Page MenuHomePhabricator

Kartographer map overlay not visible in Parsoid rendering
Open, Needs TriagePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

Compare the maps https://he.wikipedia.org/wiki/%D7%9E%D7%92%D7%93%D7%9C%D7%99_K?useparsoid=0 and https://he.wikipedia.org/wiki/%D7%9E%D7%92%D7%93%D7%9C%D7%99_K?useparsoid=1, in the second tab of the infobox

What happens?:

The maps don't have an overlay on Parsoid.

Legacy parser rendering screenshot:

image.png (846×521 px, 377 KB)

Parsoid rendering screenshot:

image.png (855×528 px, 341 KB)

When clicking on the maps, they display correctly in both cases.

What should have happened instead?:

Overlays should be rendered when rendering with Parsoid like in legacy.

Note

While the Parsoid support for Kartographer has been deployed late on hewiki, this is happening *after* kartographer+parsoid has been deployed to production on hewiki.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

old parser:

<a class="mw-kartographer-map notheme mw-kartographer-link" style="width: 710px; height: 780px;" data-mw-kartographer="mapframe" data-style="osm-intl" data-width="710" data-height="780" data-zoom="13" data-lat="31.807" data-lon="34.673" data-overlays="[&quot;_8afac0e44a6b6826ba8fab43e1d72cab6b566ebd&quot;]" href="#/map/1" title="Show in full screen"><img src="https://maps.wikimedia.org/img/osm-intl,13,31.807,34.673,710x780.png?lang=he&amp;domain=he.wikipedia.org&amp;title=%D7%9E%D7%92%D7%93%D7%9C%D7%99_K&amp;revid=40604675&amp;groups=_8afac0e44a6b6826ba8fab43e1d72cab6b566ebd" width="710" height="780" decoding="async" srcset="https://maps.wikimedia.org/img/osm-intl,13,31.807,34.673,710x780@2x.png?lang=he&amp;domain=he.wikipedia.org&amp;title=%D7%9E%D7%92%D7%93%D7%9C%D7%99_K&amp;revid=40604675&amp;groups=_8afac0e44a6b6826ba8fab43e1d72cab6b566ebd 2x" alt="Map">
    <div class="mw-kartographer-fullScreen"><button class="cdx-button cdx-button--icon-only" aria-label="Show in full screen"><span class="cdx-button__icon mw-kartographer-icon--fullscreen"></span></button></div>
    <div class="mw-kartographer-attribution"><a href="https://foundation.wikimedia.org/wiki/Maps_Terms_of_Use" class="external">Wikimedia</a> | © <a href="https://www.openstreetmap.org/copyright" class="external">OpenStreetMap</a></div>
</a>

parsoid:

<a class="mw-kartographer-map notheme mw-kartographer-link" style="width: 710px; height: 780px;" data-mw-kartographer="mapframe" data-style="osm-intl" data-width="710" data-height="780" data-zoom="13" data-lat="31.807" data-lon="34.673" href="#/map/1" data-overlays="[&quot;_bde9f09b15a1722d57302c4369f7bd8d8e98ecb3&quot;]" id="mwEg" title="Show in full screen"><img src="https://maps.wikimedia.org/img/osm-intl,13,31.807,34.673,710x780.png?lang=he&amp;domain=he.wikipedia.org&amp;title=%D7%9E%D7%92%D7%93%D7%9C%D7%99_K&amp;revid=40604675&amp;groups=_bde9f09b15a1722d57302c4369f7bd8d8e98ecb3" width="710" height="780" decoding="async" srcset="https://maps.wikimedia.org/img/osm-intl,13,31.807,34.673,710x780@2x.png?lang=he&amp;domain=he.wikipedia.org&amp;title=%D7%9E%D7%92%D7%93%D7%9C%D7%99_K&amp;revid=40604675&amp;groups=_bde9f09b15a1722d57302c4369f7bd8d8e98ecb3 2x" typeof="mw:LocalizedAttrs" id="mwEw" alt="מפה" data-mw-i18n="{&quot;alt&quot;:{&quot;lang&quot;:&quot;x-page&quot;,&quot;key&quot;:&quot;kartographer-static-mapframe-alt&quot;,&quot;params&quot;:[]}}">
    <div class="mw-kartographer-fullScreen"><button class="cdx-button cdx-button--icon-only" aria-label="Show in full screen"><span class="cdx-button__icon mw-kartographer-icon--fullscreen"></span></button></div>
    <div class="mw-kartographer-attribution"><a href="https://foundation.wikimedia.org/wiki/Maps_Terms_of_Use" class="external">Wikimedia</a> | © <a href="https://www.openstreetmap.org/copyright" class="external">OpenStreetMap</a></div>
</a>

data-overlays="[&quot;_8afac0e44a6b6826ba8fab43e1d72cab6b566ebd&quot;]" vs data-overlays="[&quot;_bde9f09b15a1722d57302c4369f7bd8d8e98ecb3&quot;]"

https://maps.wikimedia.org/img/osm-intl,13,31.807,34.673,710x780.png?lang=he&amp;domain=he.wikipedia.org&amp;title=%D7%9E%D7%92%D7%93%D7%9C%D7%99_K&amp;revid=40604675&amp;groups=_8afac0e44a6b6826ba8fab43e1d72cab6b566ebd

vs

https://maps.wikimedia.org/img/osm-intl,13,31.807,34.673,710x780.png?lang=he&amp;domain=he.wikipedia.org&amp;title=%D7%9E%D7%92%D7%93%D7%9C%D7%99_K&amp;revid=40604675&amp;groups=_bde9f09b15a1722d57302c4369f7bd8d8e98ecb3

The groupid seems to vary (both logged in and logged out), though that should not be possible for the same user (unless it takes into account the useparsoid flag account, but then it is logical that it doesn't work).

groupid is generated as sha1( FormatJson::encode( $geometries, false, FormatJson::ALL_OK ) ); So the input geometries differs between the two parsers.

Also notable. In parsoid the Map label is translated to Hebrew (content language) whereas in the original it is in English (my UI language).

This is logical. The data of Kartographer can include limited markup. This includes links for instance. The links generated by parsoid and legacy have different formats, leading to different html being fed to geometries, leading to different IDs.

As the backend rendering the static images only finds the groupids returned by the api servers (using the legacy parser), the pre rendered maps cannot find the group that the generated html has calculated and will return the map without the groups being added.

This seems like a major blocker to rollout of parsoid on wikis with pre rendered maps + mapshapes.

Screenshot 2025-03-13 at 15.38.44.png (225×1 px, 192 KB)

Screenshot 2025-03-13 at 15.38.25.png (229×1 px, 182 KB)

@TheDJ thank you very much for looking into this, this is super helpful!

To expand a bit with my own notes for future-me:

  • Indeed the groupids in includes/Api/ApiQueryMapData.php are generated by parsing with the legacy parser and not with parsoid
  • It's somewhat unclear where we go from here
    • it's probably *hard* to align the groupids from both parsers in an error-proof way
    • my first idea was to parse the page twice (legacy and parsoid) on ApiQueryMapData and merge both results, but that's probably a terrible idea because we're probably going to generate images with two overlays, so meh
    • second idea is to accept requests to mapdata API with useparsoid=1, and to reply with what is generated with Parsoid; which should probably work and do the right thing, and then whatever generates the images (I actually don't know what that is ^^; ) does these two calls. What is non-trivial to me is how/whether we want to avoid duplication and where the "duplication vs work" needle stands (we'd have to investigate that, probably).
  • My belief is that, as far as "Parsoid read views" are concerned, this only triggers if wgKartographerStaticMapframe = true (which is the case for Wikipedia, though, so this will need to be solved before deploying to any Wikipedia); in any case, we have an issue there if we have clients of that API who expect consistency of groupids.

Ideas, remarks, thoughts - all welcome.

I like the second idea (add useparsoid=1 to ApiQueryMapData).

Change #1194987 had a related patch set uploaded (by Isabelle Hurbain-Palatin; author: Isabelle Hurbain-Palatin):

[mediawiki/extensions/Kartographer@master] [WIP] add a "useparsoid" parameter to the ApiQueryMapData

https://gerrit.wikimedia.org/r/1194987

Change #1196666 had a related patch set uploaded (by Isabelle Hurbain-Palatin; author: Isabelle Hurbain-Palatin):

[mediawiki/extensions/Kartographer@master] Activate the mpdparser parameter in the mapdata JS call

https://gerrit.wikimedia.org/r/1196666

Change #1194987 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Add a "parser" parameter to the ApiQueryMapData

https://gerrit.wikimedia.org/r/1194987