✨ (slope) improve hover interaction

[sophiamersmann]

Improves hover interaction on slope charts.

Summary

• Improves the "algorithm" to figure out which slope is currently closest to the mouse (see below for an explanation)
• Adds support for clicking anywhere inside the Grapher frame to dismiss the current selection
• Uses the "default" cursor for value and entity labels since they're clickable (default is the text selection cursor)

How do we figure out which slope is currently closest to the mouse?

Before	After
We used to measure the distance to the orange line that is defined by the start and end point of a slope but extends to both sides.	Now we measure the distance to the line segment that is the slope or, if the mouse is outside of the chart area, we measure the distance to a label that is represented by a straight line

Caveats

• If a Grapher chart has entities selected by default, then clicking anywhere inside the Grapher frame will dismiss the default selection (Example)
  • I do believe that if it's possible to select entities by clicking on slopes or clicking the legend, then it should also be possible to dismiss a selection by clicking into dead space (it's almost expected behaviour, I think?)
  • But dismissing a default selection before a user has even interacted with a chart is not ideal
  • We have very few slope charts though that allow entity selection and have a set of entities selected by default
  • All in all, I think it's still net positive but can be convinced otherwise

Videos

Before/After

before.mov

after.mov

Context

Part of a larger body of work. See stack 👇🏻

SVG tester

All slope charts are updated because of the cursor change.

[sophiamersmann]

• 🐛 (slope) fix chart state if entity without data is selected #3321 : 2 dependent PRs (#3269 , #3389 )
• ✨ (slope) remove size dimension #3291
• ✨ (slope) move legend to the top on mobile #3304
• ✨ (slope) show value labels on demand #3288
• 🔨 (slope) replace custom y-axis with shared component #3273
• ✨ (slope) improve hover interaction #3270 👈
• master

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

Join @sophiamersmann and the rest of your teammates on Graphite

[marcelgerber]

Nice work! I left two comments, but otherwise this is great and a definite improvement. 🙌🏻

[marcelgerber]

Nice!