Grapher Settings Drawer Redesign

[samizdatco]

This PR moves the collection of one-off controls that are contextually inserted above the chart into a pop-up dialog box which is summoned by a button in the upper right corner labeled Settings. On grapher and explorer pages, a nav#grapher-settings-drawer element has been added to the markup outside of the grapher instance. When present, the settings menu will use a portal to render its contents into this <nav> (which slides in from the right edge of the viewport). If the <nav> is not present, the menu is presented as a pop-up whose bounds are fit to the containing grapher instance.

Tracking issue: #2486
Related issue: #1714

[sophiamersmann]

Unfortunately, many charts don't specify the proper entityType and entityTypePlural. entityTypePlural in particular is often not set since it's only used for some scatter plots, and entityType is mainly used for faceting, so I wouldn't expect this to be set for charts that can't be faceted. We've discussed this in this thread in a different context. Back then I did a quick analysis and since we don't have many non-country charts, it's only around 120 charts that would need to be updated (maybe more, I don't remember what I checked specifically). Some of these charts could be updated in bulk (e.g. if "egg" is one of the entities, use "product" and "products", etc.) but others would need to be updated manually. I wanted to do that in this cycle but I didn't find the time. It's definitely something we should consider doing when overhauling the entity picker (currently, the heading is "Choose data to show"), but if it's useful for the controls as well, then we might as well do it now. If you do end up doing the data work, it would be nice to also update the heading in the entity picker modal.

[samizdatco]

Agreed that it's probably worth fixing at the data level since we'll be able to make use of the names again in the entity-selector UI.

Just to clarify though: when the config doesn't override the entity type names, they default to country or region and countries or regions, so there will always be a string for this, it will just be the wrong string until we update those un-customized, non-country charts.

[sophiamersmann]

Yes, it would show the default (which for non-country entities is wrong).

[sophiamersmann]

Not sure why selection is sometimes treated as SelectionArray instance, sometimes as string[]. That's probably a question for @marcelgerber.

I've seen the makeSelectionArray in use, so you could use that here as well?

[sophiamersmann]

I didn't know about @at-root. Neat!

[sophiamersmann]

Hey! I hope it's okay I looked at the code today. I thought it would be good to do this before I'm off and tomorrow is a short day for me, so I worry that might not have the time tomorrow..

It's really neat to see the drawer in action and it makes me so happy that our controls and their look & feel get overhauled. It looks fantastic!

These are my notes:

• It'd be nice if the settings popup was dismissible by clicking outside of it (similar to how it works for the drawer and the modals)
• If the <CollapsibleList /> component isn't used anymore, we could remove it?
• The drawer should probably also open on data pages (like this one)
  • Can data pages have an "All charts" section? If yes, we would only want to open the drawer for the main chart on top?
• The settings menu should be hidden on map & table tabs, see this chart for example
• I'm not really sure what the data-track-note is for and whether that's still in use. It's probably worth checking in with Marcel to see if it's currently used for analytics.
• The control row should be 32px, but is closer to 33px at the moment. You could either make it fit or adapt the height of the control bar here and here (I know it's a single pixel but it adds up...)

I think we need to do some more harmonising of our work on narrative charts. This piece of Archie syntax shouldn't show any controls:

{.chart}
url: https://ourworldindata.org/grapher/life-expectancy
title: Custom title
subtitle: Custom subtitle
[.tabs]
- all
[]
{}

And this one should show the yLogLinearSelector selector only:

{.chart}
url: https://ourworldindata.org/grapher/life-expectancy
title: Custom title
subtitle: Custom subtitle
[.controls]
- yLogLinearSelector
[]
{}

I'm not sure what's needed to make this happen but one piece to the puzzle is this method that should also account for controls.