🔨 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)