✨ Refactor grapher and extract most of the state into GrapherState

owid · Jan 6, 2025 · 338a5ed · 338a5ed
1 parent ca4adc4
commit 338a5ed
Show file tree

Hide file tree

Showing 18 changed files with 2,723 additions and 2,480 deletions.
diff --git a/adminSiteServer/testPageRouter.tsx b/adminSiteServer/testPageRouter.tsx
@@ -41,6 +41,7 @@ import {
     ColorSchemes,
     GrapherProgrammaticInterface,
 } from "@ourworldindata/grapher"
+import { DATA_API_URL } from "../settings/clientSettings.js"
 
 const IS_LIVE = ADMIN_BASE_URL === "https://owid.cloud"
 const DEFAULT_COMPARISON_URL = "https://ourworldindata.org"
@@ -803,6 +804,72 @@ getPlainRouteWithROTransaction(
     }
 )
 
+getPlainRouteWithROTransaction(
+    testPageRouter,
+    "/experiment",
+    async (req, res, trx) => {
+        const style = `
+
+        .row {
+            padding: 10px;
+            margin: 0;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .side-by-side {
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            width: 100%;
+        }
+
+        .side-by-side + .side-by-side {
+            margin-top: 64px;
+        }
+
+`
+        const script = `
+        const grapher = new FetchingGrapher();
+        const container = document.getElementById('graphers');
+        const root = ReactDOM.createRoot(container);
+        const grapher1Props = {
+            configUrl: "https://ourworldindata.org/grapher/life-expectancy.config.json",
+            dataApiUrl: "${DATA_API_URL}"
+};
+        root.render(
+        React.createElement(
+            React.Fragment,
+            null,
+            React.createElement(FetchingGrapher, grapher1Props),
+            React.createElement(FetchingGrapher, grapher1Props)
+        )
+        );
+                        `
+        const html = (
+            <html>
+                <Head
+                    canonicalUrl=""
+                    pageTitle="Experiment"
+                    baseUrl={BAKED_BASE_URL}
+                >
+                    <style dangerouslySetInnerHTML={{ __html: style }} />
+                </Head>
+                <body>
+                    <div className="row">
+                        <div id="graphers" className="side-by-side"></div>
+                    </div>
+                    <script src={`${BAKED_BASE_URL}/assets/embedCharts.js`} />
+                    <script
+                        dangerouslySetInnerHTML={{ __html: script }}
+                    ></script>
+                </body>
+            </html>
+        )
+
+        res.send(renderToHtmlPage(html))
+    }
+)
+
 testPageRouter.get("/explorers", async (req, res) => {
     let explorers = await explorerAdminServer.getAllPublishedExplorers()
     const viewProps = getViewPropsFromQueryParams(req.query)

diff --git a/packages/@ourworldindata/explorer/src/Explorer.jsdom.test.tsx b/packages/@ourworldindata/explorer/src/Explorer.jsdom.test.tsx
@@ -30,26 +30,28 @@ describe(Explorer, () => {
 
         explorer.onChangeChoice("Gas")("All GHGs (CO₂eq)")
 
-        if (explorer.grapher) explorer.grapher.tab = GRAPHER_TAB_OPTIONS.table
+        if (explorer.grapher?.grapherState)
+            explorer.grapher.grapherState.tab = GRAPHER_TAB_OPTIONS.table
         else throw Error("where's the grapher?")
         expect(explorer.queryParams.tab).toEqual("table")
 
         explorer.onChangeChoice("Gas")("CO₂")
         expect(explorer.queryParams.tab).toEqual("table")
 
-        explorer.grapher.tab = GRAPHER_TAB_OPTIONS.chart
+        explorer.grapher.grapherState.tab = GRAPHER_TAB_OPTIONS.chart
     })
 
     it("switches to first tab if current tab does not exist in new view", () => {
         const explorer = element.instance() as Explorer
         expect(explorer.queryParams.tab).toBeUndefined()
-        if (explorer.grapher) explorer.grapher.tab = GRAPHER_TAB_OPTIONS.map
+        if (explorer.grapher?.grapherState)
+            explorer.grapher.grapherState.tab = GRAPHER_TAB_OPTIONS.map
         else throw Error("where's the grapher?")
         expect(explorer.queryParams.tab).toEqual("map")
 
         explorer.onChangeChoice("Gas")("All GHGs (CO₂eq)")
 
-        expect(explorer.grapher.tab).toEqual("chart")
+        expect(explorer.grapher?.grapherState.tab).toEqual("chart")
         expect(explorer.queryParams.tab).toEqual(undefined)
     })
 
@@ -85,20 +87,20 @@ describe("inline data explorer", () => {
         expect(explorer.queryParams).toMatchObject({
             Test: "Scatter",
         })
-        expect(explorer.grapher?.xSlug).toEqual("x")
-        expect(explorer.grapher?.ySlugs).toEqual("y")
-        expect(explorer.grapher?.colorSlug).toEqual("color")
-        expect(explorer.grapher?.sizeSlug).toEqual("size")
+        expect(explorer.grapher?.grapherState?.xSlug).toEqual("x")
+        expect(explorer.grapher?.grapherState?.ySlugs).toEqual("y")
+        expect(explorer.grapher?.grapherState?.colorSlug).toEqual("color")
+        expect(explorer.grapher?.grapherState?.sizeSlug).toEqual("size")
     })
 
     it("clears column slugs that don't exist in current row", () => {
         explorer.onChangeChoice("Test")("Line")
         expect(explorer.queryParams).toMatchObject({
             Test: "Line",
         })
-        expect(explorer.grapher?.xSlug).toEqual(undefined)
-        expect(explorer.grapher?.ySlugs).toEqual("y")
-        expect(explorer.grapher?.colorSlug).toEqual(undefined)
-        expect(explorer.grapher?.sizeSlug).toEqual(undefined)
+        expect(explorer.grapher?.grapherState?.xSlug).toEqual(undefined)
+        expect(explorer.grapher?.grapherState?.ySlugs).toEqual("y")
+        expect(explorer.grapher?.grapherState?.colorSlug).toEqual(undefined)
+        expect(explorer.grapher?.grapherState?.sizeSlug).toEqual(undefined)
     })
 })
diff --git a/packages/@ourworldindata/explorer/src/Explorer.tsx b/packages/@ourworldindata/explorer/src/Explorer.tsx
@@ -27,6 +27,7 @@ import {
     SlideShowManager,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     GrapherAnalytics,
+    GrapherState,
 } from "@ourworldindata/grapher"
 import {
     Bounds,
@@ -194,15 +195,23 @@ export class Explorer
         GrapherManager
 {
     analytics = new GrapherAnalytics()
+    grapherState: GrapherState
 
     constructor(props: ExplorerProps) {
         super(props)
         this.explorerProgram = ExplorerProgram.fromJson(
             props
         ).initDecisionMatrix(this.initialQueryParams)
-        this.grapher = new Grapher({
-            bounds: props.bounds,
+        this.grapherState = new GrapherState({
             staticBounds: props.staticBounds,
+            bounds: props.bounds,
+            enableKeyboardShortcuts: true,
+            manager: this,
+            isEmbeddedInAnOwidPage: this.props.isEmbeddedInAnOwidPage,
+            adminBaseUrl: this.adminBaseUrl,
+        })
+        this.grapher = new Grapher({
+            grapherState: this.grapherState,
         })
     }
     // caution: do a ctrl+f to find untyped usages
@@ -329,7 +338,7 @@ export class Explorer
 
         if (this.props.isInStandalonePage) this.setCanonicalUrl()
 
-        this.grapher?.populateFromQueryParams(url.queryParams)
+        this.grapher?.grapherState?.populateFromQueryParams(url.queryParams)
 
         exposeInstanceOnWindow(this, "explorer")
         this.setUpIntersectionObserver()
@@ -350,7 +359,7 @@ export class Explorer
             this.explorerProgram.indexViewsSeparately &&
             document.location.search
         ) {
-            document.title = `${this.grapher.displayTitle} - Our World in Data`
+            document.title = `${this.grapher?.grapherState.displayTitle} - Our World in Data`
         }
     }
 
@@ -428,7 +437,7 @@ export class Explorer
             return // todo: can we remove this?
         this.initSlideshow()
 
-        const oldGrapherParams = this.grapher.changedParams
+        const oldGrapherParams = this.grapher?.grapherState.changedParams
         this.persistedGrapherQueryParamsBySelectedRow.set(
             oldSelectedRow,
             oldGrapherParams
@@ -440,31 +449,34 @@ export class Explorer
             ),
             country: oldGrapherParams.country,
             region: oldGrapherParams.region,
-            time: this.grapher.timeParam,
+            time: this.grapher?.grapherState.timeParam,
         }
 
-        const previousTab = this.grapher.activeTab
+        const previousTab = this.grapher?.grapherState.activeTab
 
         this.updateGrapherFromExplorer()
 
-        if (this.grapher.availableTabs.includes(previousTab)) {
+        if (this.grapher?.grapherState.availableTabs.includes(previousTab)) {
             // preserve the previous tab if that's still available in the new view
             newGrapherParams.tab =
-                this.grapher.mapGrapherTabToQueryParam(previousTab)
-        } else if (this.grapher.validChartTypes.length > 0) {
+                this.grapher?.grapherState.mapGrapherTabToQueryParam(
+                    previousTab
+                )
+        } else if (this.grapher?.grapherState.validChartTypes.length > 0) {
             // otherwise, switch to the first chart tab
-            newGrapherParams.tab = this.grapher.mapGrapherTabToQueryParam(
-                this.grapher.validChartTypes[0]
-            )
-        } else if (this.grapher.hasMapTab) {
+            newGrapherParams.tab =
+                this.grapher?.grapherState.mapGrapherTabToQueryParam(
+                    this.grapher?.grapherState.validChartTypes[0]
+                )
+        } else if (this.grapher?.grapherState.hasMapTab) {
             // or switch to the map, if there is one
             newGrapherParams.tab = GRAPHER_TAB_QUERY_PARAMS.map
         } else {
             // if everything fails, switch to the table tab that is always available
             newGrapherParams.tab = GRAPHER_TAB_QUERY_PARAMS.table
         }
 
-        this.grapher.populateFromQueryParams(newGrapherParams)
+        this.grapher?.grapherState.populateFromQueryParams(newGrapherParams)
 
         this.analytics.logExplorerView(
             this.explorerProgram.slug,
@@ -474,7 +486,7 @@ export class Explorer
 
     @action.bound private setGrapherTable(table: OwidTable) {
         if (this.grapher) {
-            this.grapher.inputTable = table
+            this.grapher.grapherState.inputTable = table
             this.grapher.appendNewEntitySelectionOptions()
         }
     }
@@ -572,9 +584,9 @@ export class Explorer
             config.selectedEntityNames = this.selection.selectedEntityNames
         }
 
-        grapher.setAuthoredVersion(config)
+        grapher?.grapherState.setAuthoredVersion(config)
         grapher.reset()
-        grapher.updateFromObject(config)
+        grapher?.grapherState.updateFromObject(config)
         // grapher.downloadData()
     }
 
@@ -736,9 +748,9 @@ export class Explorer
             return table
         }
 
-        grapher.setAuthoredVersion(config)
+        grapher?.grapherState.setAuthoredVersion(config)
         grapher.reset()
-        grapher.updateFromObject(config)
+        grapher?.grapherState.updateFromObject(config)
         if (dimensions.length === 0) {
             // If dimensions are empty, explicitly set the table to an empty table
             // so we don't end up confusingly showing stale data from a previous chart
@@ -769,9 +781,9 @@ export class Explorer
             config.selectedEntityNames = this.selection.selectedEntityNames
         }
 
-        grapher.setAuthoredVersion(config)
+        grapher?.grapherState.setAuthoredVersion(config)
         grapher.reset()
-        grapher.updateFromObject(config)
+        grapher?.grapherState.updateFromObject(config)
 
         // Clear any error messages, they are likely to be related to dataset loading.
         this.grapher?.clearErrors()
@@ -805,7 +817,7 @@ export class Explorer
 
         let url = Url.fromQueryParams(
             omitUndefinedValues({
-                ...this.grapher.changedParams,
+                ...this.grapher?.grapherState.changedParams,
                 pickerSort: this.entityPickerSort,
                 pickerMetric: this.entityPickerMetric,
                 hideControls: this.initialQueryParams.hideControls || undefined,
@@ -1026,16 +1038,7 @@ export class Explorer
                     this.isNarrow &&
                     this.mobileCustomizeButton}
                 <div className="ExplorerFigure" ref={this.grapherContainerRef}>
-                    <Grapher
-                        adminBaseUrl={this.adminBaseUrl}
-                        bounds={this.grapherBounds}
-                        enableKeyboardShortcuts={true}
-                        manager={this}
-                        ref={this.grapherRef}
-                        isEmbeddedInAnOwidPage={
-                            this.props.isEmbeddedInAnOwidPage
-                        }
-                    />
+                    <Grapher grapherState={this.grapherState} />
                 </div>
             </div>
         )
@@ -1076,7 +1079,7 @@ export class Explorer
     }
 
     @computed get grapherTable() {
-        return this.grapher?.tableAfterAuthorTimelineFilter
+        return this.grapher?.grapherState?.tableAfterAuthorTimelineFilter
     }
 
     @observable entityPickerMetric? = this.initialQueryParams.pickerMetric
@@ -1191,6 +1194,6 @@ export class Explorer
     }
 
     @computed get requiredColumnSlugs() {
-        return this.grapher?.newSlugs ?? []
+        return this.grapher?.grapherState?.newSlugs ?? []
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/chart/DimensionSlot.ts b/packages/@ourworldindata/grapher/src/chart/DimensionSlot.ts
@@ -1,21 +1,21 @@
 // todo: remove
 
-import { Grapher } from "../core/Grapher"
+import { Grapher, GrapherState } from "../core/Grapher"
 import { computed } from "mobx"
 import { ChartDimension } from "./ChartDimension"
 import { DimensionProperty } from "@ourworldindata/utils"
 
 export class DimensionSlot {
-    private grapher: Grapher
+    private grapherState: GrapherState
     property: DimensionProperty
-    constructor(grapher: Grapher, property: DimensionProperty) {
-        this.grapher = grapher
+    constructor(grapher: GrapherState, property: DimensionProperty) {
+        this.grapherState = grapher
         this.property = property
     }
 
     @computed get name(): string {
         const names = {
-            y: this.grapher.isDiscreteBar ? "X axis" : "Y axis",
+            y: this.grapherState.isDiscreteBar ? "X axis" : "Y axis",
             x: "X axis",
             size: "Size",
             color: "Color",
@@ -28,7 +28,7 @@ export class DimensionSlot {
     @computed get allowMultiple(): boolean {
         return (
             this.property === DimensionProperty.y &&
-            this.grapher.supportsMultipleYColumns
+            this.grapherState.supportsMultipleYColumns
         )
     }
 
@@ -37,7 +37,7 @@ export class DimensionSlot {
     }
 
     @computed get dimensions(): ChartDimension[] {
-        return this.grapher.dimensions.filter(
+        return this.grapherState.dimensions.filter(
             (d) => d.property === this.property
         )
     }