🔨 drop manager pattern for vertical color legend / TAS-799

[sophiamersmann]

Drops the 'manager pattern' for the vertical colour legend component.

Current state

• VerticalColorLegend is a React class component that receives a manager as a prop
  • It is rendered as <VerticalColorLegend manager={this} />
  • The legend is typically also available as a computed property since we often need to know the legend's dimensions (new VerticalColorLegend({ manager: this }))

Changes

This PR splits the vertical colour legend into two pieces, separating state from rendering:

• VerticalColorLegend is a class with MobX properties that calculates the position of each placed bin and derives its width and height (this instance can be used to get the dimension of a legend)
• VerticalColorLegendComponent is a function component that accepts a VerticalColorLegend instance (and other props) and renders it at a given position

Drawback

Using the manager pattern allows MobX to be smart about dependencies. For example, suppose the width of a legend depends on a subset of props consumed by the legend. MobX only recomputes the width if any of the props change that are actually used to calculate the width. Passing props explicitly means that all props are considered dependencies for all computed MobX state of the legend. As a result, (i) the legend is recomputed and rerendered more often, and (ii) MobX complains about cyclic dependencies more often (and some of the complaints are false positives).

Rendering more often is probably okay since legend components are typically lightweight. The second effect (cyclic dependencies) is mitigated by splitting the component into state and rendering. We don't see any additional cyclic dependencies in this PR, but we get one in the next where the legends of the map chart component are refactored.

I didn't anticipate this when I started working on this and now I'm honestly a bit on the fence about it. I wouldn't mind if we decided to close this PR without merging.

[sophiamersmann]

• 🔨 drop manager pattern for horizontal color legend / TAS-800 #4369
• 🔨 drop manager pattern for vertical color legend / TAS-799 #4368 👈 (View in Graphite)
• master

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

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-refactor-vertical-color-lege

• Site-screenshots: https://github.com/owid/site-screenshots/compare/refactor-vertical-color-legend
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/refactor-vertical-color-legend

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2025-01-02 14:24:28 UTC
Execution time: 1.27 seconds

[notion-workspace]

Drop manager pattern (vertical color legend)

[marcelgerber]

I think this makes sense!
As you say - this one here is fine since it doesn't introduce any circular dependency warnings. My judgement may be different for the next PR down the line.

Also, of course, feel free to use your own judgement; if you don't like the way this ended up, then feel free to close it also, or reach out to me to talk through it :)

[sophiamersmann]

Thanks for the review!

I want to wait for Daniel's changes to be merged and see how this integrates. We ended up using a similar approach (separating state from render), and if these PRs make Grapher more cohesive after a rebase onto Grapher's new structure, then that gives me more confidence that merging is the right thing to do.

For now, I'll revert this into draft to reflect that I'm waiting for other PRs to be merged.