✨ (grapher) pin tooltips to the bottom on mobile / TAS-664

[sophiamersmann]

Pin tooltips to the bottom of the screen on mobile for a more pleasant UX. When pinned to the bottom, the tooltip hides less of the chart area and isn't "in the way" when interacting with a chart. This also fixes several overflow issues for very tall tooltips.

Summary

• If the tooltip content is very tall, then the tooltip content becomes scrollable
  • This is also the reason why the tooltip stays on screen even after an interaction has ended
• A tooltip can be dismissed by clicking anywhere on the screen
• A tooltip is automatically dismissed when Grapher is scrolled out of view
• For tooltips that have a "Total" row (e.g. for stacked area charts), the total row is moved to the top, so that it's visible by default even if the tooltip is scrollable

Notes

• To detect when Grapher is scrolled out of view, we keep Grapher's intersection observer around (we used to disconnect it after Grapher has been first scrolled to). That might have a perf impact? I can't imagine the perf impact being too bad since we very rarely have more than 10 rendered Graphers on a site.
• After making these changes, map charts errored when trying to render a map tooltip with a MobX issue like "Dynamic observables can't be frozen". I didn't manage to understand what the problem was, but the MapTooltip/MapSparkline refactor resolves the issue 🤷🏻‍♀️
• An event handler is registered on the document to dismiss the tooltip when clicking outside of the chart area. This doesn't work if propagation is stopped. This is the case for the the entity selector toggle and the timeline. That's why the tooltip is explicitly dismissed when clicking on the timeline or the entity selector toggle

Caveats

• If a tooltip is open and then gets dismissed because the entity selector is opened, for example, we ideally want the tooltip to disappear immediately. But for some chart types, tooltips fade out with some delay (e.g. scatter plots).

Example charts

• Line chart: http://staging-site-mobile-tooltips-fixed-bottom/grapher/life-expectancy
• Stacked area with many variables: http://staging-site-mobile-tooltips-fixed-bottom/grapher/dietary-composition-by-country
• Map: http://staging-site-mobile-tooltips-fixed-bottom/grapher/life-expectancy?tab=map
• Scatter: http://staging-site-mobile-tooltips-fixed-bottom/grapher/carbon-emission-intensity-vs-gdp-per-capita

Testing

This behaviour only kicks in for touchscreen devices, so it's best to look at these changes on an actual phone.

Drive-by changes

• I removed the computed properties for frame padding – all that passing around wasn't really necessary for a couple of constants

Screenshot

[sophiamersmann]

• ✨ (grapher) pin tooltips to the bottom on mobile / TAS-664 #4082 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-mobile-tooltips-fixed-bottom

• Site-screenshots: https://github.com/owid/site-screenshots/compare/mobile-tooltips-fixed-bottom
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/mobile-tooltips-fixed-bottom

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 5 (d3dfed) ❌

Edited: 2024-11-14 17:01:06 UTC
Execution time: 1.46 seconds

[marcelgerber]

Really nice work here, I like the new behavior.

I tested this on desktop and mobile. On desktop I didn't notice any issues. On mobile I noticed two:

• When clicking on "Learn more about this data" on a data page (which scrolls down), the tooltip stays visible even though the chart itself leaves the viewport. Maybe the IntersectionObserver doesn't fire for programmatic scrolls?
• The tooltip also stays visible when clicking the download button and the share button

I'm wondering if there is a better way to register click events - maybe use a {capture: true} event handler to catch them all??

[sophiamersmann]

Ah, damn it. I've thought about using a capture event but I don't think that works because interacting with the chart shouldn't dismiss the tooltip. If we wanted to use a capture event for the document, we would also need to use capture events for chart event handlers, which I thought was too much of a weird constraint.

[marcelgerber]

I think a capturing event handler would work?

I agree about that clicking inside the chart area should not dismiss the tooltip, but that we can handle inside the event handler.

When searching through the code just now, I saw that SettingsMenu and SlideInDrawer are, in fact, already using capturing event handlers.

See SettingsMenu here - inside the handler, it checks whether the click target is inside the settings menu. We can do a similar thing for the charting area also.

[sophiamersmann]

Ah, that's not something I considered. Yes, that should work!

[marcelgerber]

I'm currently confused how dismissing the tooltip works for chart types other than line & stacked? How does it work for maps, for example - they don't seem to have a handler inside MapChart.tsx?

[sophiamersmann]

Line charts and stacked area charts are special because they implement touch events so you can hold your thumb down, and on movement, the tooltip gets updated. Other chart types don't do this. They only register mouse enter and leave events. So, if you press down on an element on mobile, then the mouse enter event is fired (showing the tooltip), and if you click anywhere else, then the mouse leave event is fired (dismissing the tooltip).

[sophiamersmann]

The code is now using a capture event handler, but for some reason it doesn't get fired when interacting with the timeline. I'm not sure why – that's why, when interacting with the timeline, the tooltip still gets dismissed explicitly.

[notion-workspace]

Fix tooltips to the bottom on mobile

[sophiamersmann]

@marcelgerber this is good to go from my side. Do you think we can get this over the finish line? No worries if you would need too much to finish the review though :)

[marcelgerber]

Yes, good to go now! 🚀