🎉 (line+slope) add focus state / TAS-739

[sophiamersmann]

Adds the option to highlight lines in line and slope charts

Summary

• Adds a new config field, focusedSeriesNames (suggestions for a different name welcome)
• A line is identified by its series name which is either an entity name, a column display name or a combination of both
• The list of focused series names is persisted to the URL as focus query param
  • The entity name utility functions are used to parse and serialise focused series names, so that the same delimiter is used and entity names are mapped to their codes if possible
  • This breaks if a column name contains ~ (the delimiter) which theoretically is possible but I don't think we need to worry about that now
• Focused lines have bold labels, non-focused lines are grayed out
• Grapher makes an effort to prevent the chart to enter a 'bad state' where all lines are grayed out because the focused line doesn't exist
  • This includes removing all elements from the focus array when the facet strategy changes and dismissing focused entities when they're unselected

In the admin

• There is a new 'Data to highlight' section below the entity selection section
• If the chart is in a bad state because one of the focused series names is invalid, saving is disabled and shows an error message

Follow up

• It's a bit ugly that selectedEntityNames and focusedSeriesNames are always serialised, even for an empty Grapher. I've fixes that in a follow-up PR
• The line legend method that drops labels if there are to many is a bit difficult to read. I'll open another PR with a refactor

[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 👈 (View in Graphite)
• 🔨 move colors to ColorConstants file #4289
• ✨ improve hover state of facet legends #4285
• 🔨 refactor hover states / TAS-738 #4266
• 🎉 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]

Line+slope charts: Add support for highlighting entities

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-focus-state-viz

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

SVG tester:

Number of differences (default views): 1354 (d99454) ❌
Number of differences (all views): 450 (aa8e0f) ❌

Edited: 2024-12-17 16:13:28 UTC
Execution time: 1.34 seconds

[sophiamersmann]

Thank you for the quick review!

• I find it a bit weird that for slope charts, clicking the right legend entry changes focus state, but clicking the left one (or the line itself) does nothing.

true! will add it for the left legend. I don't want to overload slope interactions too much though and since it's only a power user feature...

• It would be nice if discrete bar charts could also support this.

yap!

There's one such case that is still possible, which you can see in http://staging-site-focus-state-viz/grapher/population-density-of-the-capital-city?country=~DEU&focus=~FRA: Here, selectedEntityNames and focusedSeriesNames are non-overlapping, making everything gray. Although it should be quite hard to get into such a state without manually changing the URL, if I see that correctly?

The URL isn't validated at all. You can also focus a non-existing entity and everything is grayed out: http://staging-site-focus-state-viz/grapher/population-density-of-the-capital-city?focus=hello. That's how Grapher currently works for other query params as well, so I just went with that for now :)

[sophiamersmann]

Merge activity

• Dec 17, 11:23 AM EST: A user started a stack merge that includes this pull request via Graphite.
• Dec 17, 11:24 AM EST: Graphite rebased this pull request as part of a merge.
• Dec 17, 11:25 AM EST: A user merged this pull request with Graphite.