✨ (grapher) prevent scrolling while showing tooltips / TAS-528

[sophiamersmann]

Line charts and stacked area charts listen to move events on mobile to show a tooltip, but don't prevent scrolling, which makes the experience of interacting with the tooltip a bit jumpy (see video below).

This PR makes it so that scrolling is disabled when interacting with the chart area.

Implementation detail: All React event listeners are by default passive, which means that calling event.preventDefault() has no effect. That's why we need to attach the event listener to the DOM ourselves (technically, only the move event needs this but I moved them all to the componentDidMount method so that they're all defined in the same place)

https://github.com/owid/owid-grapher/assets/12461810/d2f4ab22-fc10-44c9-8353-0cb2aabb146e

[sophiamersmann]

• #3589
• #3679
• #3678 👈
• 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-prevent-scrolling

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

SVG tester:

Number of differences (default views): 1342 ([9e2931](https://github.com/owid/owid-grapher-svgs/commit/9e2931aa4d349786c2cc2c685cc6109ea793a470)) ❌ Number of differences (all views): 685 ([1f9cfe](https://github.com/owid/owid-grapher-svgs/commit/1f9cfeb7ac73b02b9268b1c70ea31904a7679ccb)) ❌

Edited: 2024-06-24 09:05:23 UTC Execution time: 1.26 seconds

[notion-workspace[bot]]

Prevent scrolling when interacting with tooltips

[sophiamersmann]

Thanks for your reviews! This is good to go but I want to ship it in concert with follow-up PRs, so closing it for now, but will be continued...