🔨 refactor hover states / TAS-738

[sophiamersmann]

Refactor in preparation of adding focus state to line and slope charts.

Summary

• Introduces InteractionState where active means 'actively focused/hovered' and background means 'another element is actively focused/hovered'
  • This could have been an enum as well (since no element can be active and in the background at the same time), but I like the ergonomics of the object better (typing hover.active is less verbose than hover === InteractionState.active)
• Removes partitioning of series into focused and background series and instead renders an ordered series – once we add focus states to the mix, sorting becomes more practical
• Renames 'focus' to 'hover' in line and slope charts wherever it's used

[sophiamersmann]

• 🔨 add empty arrays to the default grapher config #4294 : 2 dependent PRs (#4243 , #4309 )
• ✨ (slope) improve svg output for figma #4292
• 🎉 (line+slope) add focus state / TAS-739 #4272
• 🔨 move colors to ColorConstants file #4289
• ✨ improve hover state of facet legends #4285
• 🔨 refactor hover states / TAS-738 #4266 👈 (View in Graphite)
• 🎉 make line/slope switching available to authors / TAS-720 #4207 : 1 other dependent PR (#4210 )
• 🎉 (slope) support facetting / TAS-734 #4247
• ✨ (slope) redesign / TAS-722 #4222
• 🎉 (slope) add tolerance / TAS-719 #4205
• 🎉 (slope) feature parity with line charts / TAS-708 #4192
• 🔨 migrate slope chart configs #4275
• master

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

[notion-workspace]

Refactor hover states

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-refactor-hover-viz

• Site-screenshots: https://github.com/owid/site-screenshots/compare/refactor-hover-viz
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/refactor-hover-viz

SVG tester:

Number of differences (default views): 1420 (d948c2) ❌
Number of differences (all views): 615 (ffd8d6) ❌

Edited: 2024-12-13 13:46:05 UTC
Execution time: 1.29 seconds

[marcelgerber]

nice refactoring!

Normally, I like to represent these things in such a way that it is impossible to represent invalid state (i.e., in this case {active: true, background: true}). but in this case, I can very much see the added benefit of using this syntax, so that's all good with me.

[sophiamersmann]

Merge activity

• Dec 13, 8:54 AM EST: A user started a stack merge that includes this pull request via Graphite.
• Dec 13, 8:54 AM EST: A user merged this pull request with Graphite.