From 47eebef6dae67e0ffe47a15cef9b8b5e7a2296ca Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 21 May 2024 17:16:34 +0200
Subject: [PATCH 01/65] feat(multi-dim): prototype

---
 adminSiteServer/adminRouter.tsx               |   21 +
 adminSiteServer/appClass.tsx                  |    2 +
 adminSiteServer/mockSiteRouter.tsx            |    1 +
 baker/siteRenderers.tsx                       |   10 +
 .../types/src/domainTypes/Various.ts          |    1 +
 public/multi-dim/energy.yml                   |  264 +++
 public/multi-dim/life-expectancy.json         |  193 ++
 public/multi-dim/plastic.json                 |   95 +
 public/multi-dim/poverty.yml                  |  226 +++
 site/GrapherWithFallback.tsx                  |   12 +-
 site/multi-dim/MultiDimDataPage.tsx           |  101 +
 site/multi-dim/MultiDimDataPageConfig.test.ts |  129 ++
 site/multi-dim/MultiDimDataPageConfig.ts      |  141 ++
 site/multi-dim/MultiDimDataPageContent.scss   |  257 +++
 site/multi-dim/MultiDimDataPageContent.tsx    | 1756 +++++++++++++++++
 site/multi-dim/MultiDimDataPageTypes.ts       |   43 +
 site/multi-dim/config.json                    |   75 +
 site/multi-dim/config.yml                     |   58 +
 site/owid.scss                                |    1 +
 site/runSiteFooterScripts.ts                  |   10 +
 site/tsconfig.json                            |    1 +
 21 files changed, 3395 insertions(+), 2 deletions(-)
 create mode 100644 public/multi-dim/energy.yml
 create mode 100644 public/multi-dim/life-expectancy.json
 create mode 100644 public/multi-dim/plastic.json
 create mode 100644 public/multi-dim/poverty.yml
 create mode 100644 site/multi-dim/MultiDimDataPage.tsx
 create mode 100644 site/multi-dim/MultiDimDataPageConfig.test.ts
 create mode 100644 site/multi-dim/MultiDimDataPageConfig.ts
 create mode 100644 site/multi-dim/MultiDimDataPageContent.scss
 create mode 100644 site/multi-dim/MultiDimDataPageContent.tsx
 create mode 100644 site/multi-dim/MultiDimDataPageTypes.ts
 create mode 100644 site/multi-dim/config.json
 create mode 100644 site/multi-dim/config.yml

diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
index bb818314245..da8d45ba57f 100644
--- a/adminSiteServer/adminRouter.tsx
+++ b/adminSiteServer/adminRouter.tsx
@@ -13,6 +13,7 @@ import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.
 import {
     renderExplorerPage,
     renderGdoc,
+    renderMultiDimDataPage,
     renderPreview,
 } from "../baker/siteRenderers.js"
 import { GitCmsServer } from "../gitCms/GitCmsServer.js"
@@ -49,6 +50,7 @@ import {
     getPlainRouteNonIdempotentWithRWTransaction,
     getPlainRouteWithROTransaction,
 } from "./plainRouterHelpers.js"
+import { MultiDimDataPageConfig } from "../site/multi-dim/MultiDimDataPageConfig.js"
 
 // Used for rate-limiting important endpoints (login, register) to prevent brute force attacks
 const limiterMiddleware = (
@@ -355,6 +357,25 @@ getPlainRouteNonIdempotentWithRWTransaction(
     }
 )
 
+getPlainRouteNonIdempotentWithRWTransaction(
+    adminRouter,
+    "/multi-dim",
+    async (req, res, trx) => {
+        // const reqUrl = new URL(req.url, `http://localhost/`)
+        // const fetchUrl = reqUrl.searchParams.get("url")
+        // if (!fetchUrl) return new JsonError("No URL provided", 400)
+        // const configRaw = await fetch(fetchUrl).catch(() => null)
+        // if (!configRaw) return new JsonError("Failed to fetch config", 500)
+        // const config = await configRaw
+        //     .text()
+        //     .then(MultiDimDataPageConfig.fromYaml)
+
+        const page = await renderMultiDimDataPage({} as any)
+        res.send(page)
+        return
+    }
+)
+
 const gitCmsServer = new GitCmsServer({
     baseDir: GIT_CMS_DIR,
     shouldAutoPush: true,
diff --git a/adminSiteServer/appClass.tsx b/adminSiteServer/appClass.tsx
index 09fe4867bb0..e662538cbd7 100644
--- a/adminSiteServer/appClass.tsx
+++ b/adminSiteServer/appClass.tsx
@@ -100,6 +100,8 @@ export class OwidAdminApp {
         app.use("/fonts", express.static("public/fonts"))
         app.use("/assets-admin", express.static("dist/assets-admin"))
 
+        app.use("/multi-dim-assets", express.static("public/multi-dim"))
+
         app.use("/api", publicApiRouter.router)
         app.use("/admin/api", apiRouter.router)
         app.use("/admin/test", testPageRouter)
diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.tsx
index ee387e6b8ef..2638a56628c 100644
--- a/adminSiteServer/mockSiteRouter.tsx
+++ b/adminSiteServer/mockSiteRouter.tsx
@@ -19,6 +19,7 @@ import {
     renderDataInsightsIndexPage,
     renderThankYouPage,
     makeDataInsightsAtomFeed,
+    renderMultiDimDataPage,
 } from "../baker/siteRenderers.js"
 import {
     BAKED_BASE_URL,
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index 547360a807d..97eb0cc380a 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -7,6 +7,7 @@ import { SearchPage } from "../site/search/SearchPage.js"
 import { NotFoundPage } from "../site/NotFoundPage.js"
 import { DonatePage } from "../site/DonatePage.js"
 import { ThankYouPage } from "../site/ThankYouPage.js"
+import { MultiDimDataPage } from "../site/multi-dim/MultiDimDataPage.js"
 import OwidGdocPage from "../site/gdocs/OwidGdocPage.js"
 import React from "react"
 import ReactDOMServer from "react-dom/server.js"
@@ -90,6 +91,7 @@ import { transformExplorerProgramToResolveCatalogPaths } from "./ExplorerBaker.j
 import { AttachmentsContext } from "../site/gdocs/OwidGdoc.js"
 import AtomArticleBlocks from "../site/gdocs/components/AtomArticleBlocks.js"
 import { GdocDataInsight } from "../db/model/Gdoc/GdocDataInsight.js"
+import { MultiDimDataPageConfig } from "../site/multi-dim/MultiDimDataPageConfig.js"
 
 export const renderToHtmlPage = (element: any) =>
     `<!doctype html>${ReactDOMServer.renderToStaticMarkup(element)}`
@@ -863,3 +865,11 @@ const renderExplorerDefaultThumbnail = (): string => {
         <img src={`${BAKED_BASE_URL}/default-thumbnail.jpg`} />
     )
 }
+
+export const renderMultiDimDataPage = async (
+    config: MultiDimDataPageConfig
+) => {
+    return renderToHtmlPage(
+        <MultiDimDataPage baseUrl={BAKED_BASE_URL} config={config} />
+    )
+}
diff --git a/packages/@ourworldindata/types/src/domainTypes/Various.ts b/packages/@ourworldindata/types/src/domainTypes/Various.ts
index 946339baa14..fb634a03334 100644
--- a/packages/@ourworldindata/types/src/domainTypes/Various.ts
+++ b/packages/@ourworldindata/types/src/domainTypes/Various.ts
@@ -27,6 +27,7 @@ export enum SiteFooterContext {
     gdocsDocument = "gdocsDocument", // the rendered version (on the site)
     grapherPage = "grapherPage",
     dataPageV2 = "dataPageV2",
+    multiDimDataPage = "multiDimDataPage",
     dynamicCollectionPage = "dynamicCollectionPage",
     explorerPage = "explorerPage",
     default = "default",
diff --git a/public/multi-dim/energy.yml b/public/multi-dim/energy.yml
new file mode 100644
index 00000000000..50890fd238a
--- /dev/null
+++ b/public/multi-dim/energy.yml
@@ -0,0 +1,264 @@
+name: Energy use
+dimensions_title: by energy source
+dimensions:
+    - slug: source
+      name: Energy source
+      choices:
+          - slug: all
+            name: All sources
+            group: Aggregates
+            description: Total energy use
+          - slug: fossil
+            name: Fossil fuels
+            group: Aggregates
+            description: The sum of coal, oil and gas
+          - slug: coal
+            name: Coal
+            group: Fossil fuels
+          - slug: oil
+            name: Oil
+            group: Fossil fuels
+          - slug: gas
+            name: Gas
+            group: Fossil fuels
+          - slug: low-carbon
+            name: Low-carbon
+            group: Aggregates
+            description: The sum of nuclear and renewable sources
+          - slug: nuclear
+            name: Nuclear
+            group: Low-carbon & renewables
+          - slug: renewable
+            name: Renewables (all)
+            group: Aggregates
+            description: Includes energy from hydropower, solar, wind, geothermal, wave and tidal, and bioenergy.
+          - slug: hydro
+            name: Hydropower
+            group: Low-carbon & renewables
+          - slug: solar-wind
+            name: Solar and wind
+            group: Low-carbon & renewables
+          - slug: solar
+            name: Solar
+            group: Low-carbon & renewables
+          - slug: wind
+            name: Wind
+            group: Low-carbon & renewables
+    - slug: metric
+      name: Metric
+      choices:
+          - slug: total
+            name: Total consumption
+            description: The amount of energy consumed nationally per year
+          - slug: per_capita
+            name: Consumption per capita
+            description: The average amount of energy each person consumes per year
+          - slug: share_total
+            name: Share of total
+            description: The share of total energy consumption that this source contributes
+          - slug: proportional_change
+            name: Proportional change
+            description: The percentage change from the previous year
+          - slug: absolute_change
+            name: Absolute change
+            description: The absolute change from the previous year
+views:
+    - dimensions:
+          source: all
+          metric: total
+      indicator_path:
+          900831: y
+    - dimensions:
+          source: all
+          metric: per_capita
+      indicator_path:
+          900839: y
+    - dimensions:
+          source: all
+          metric: share_total
+    - dimensions:
+          source: all
+          metric: proportional_change
+      indicator_path:
+          900830: y
+    - dimensions:
+          source: all
+          metric: absolute_change
+      indicator_path:
+          900832: y
+
+    - dimensions:
+          source: fossil
+          metric: total
+    - dimensions:
+          source: fossil
+          metric: per_capita
+    - dimensions:
+          source: fossil
+          metric: share_total
+    - dimensions:
+          source: fossil
+          metric: proportional_change
+    - dimensions:
+          source: fossil
+          metric: absolute_change
+
+    - dimensions:
+          source: coal
+          metric: total
+    - dimensions:
+          source: coal
+          metric: per_capita
+    - dimensions:
+          source: coal
+          metric: share_total
+    - dimensions:
+          source: coal
+          metric: proportional_change
+    - dimensions:
+          source: coal
+          metric: absolute_change
+
+    - dimensions:
+          source: oil
+          metric: total
+    - dimensions:
+          source: oil
+          metric: per_capita
+    - dimensions:
+          source: oil
+          metric: share_total
+    - dimensions:
+          source: oil
+          metric: proportional_change
+    - dimensions:
+          source: oil
+          metric: absolute_change
+
+    - dimensions:
+          source: gas
+          metric: total
+    - dimensions:
+          source: gas
+          metric: per_capita
+    - dimensions:
+          source: gas
+          metric: share_total
+    - dimensions:
+          source: gas
+          metric: proportional_change
+    - dimensions:
+          source: gas
+          metric: absolute_change
+
+    - dimensions:
+          source: low-carbon
+          metric: total
+    - dimensions:
+          source: low-carbon
+          metric: per_capita
+    - dimensions:
+          source: low-carbon
+          metric: share_total
+    - dimensions:
+          source: low-carbon
+          metric: proportional_change
+    - dimensions:
+          source: low-carbon
+          metric: absolute_change
+
+    - dimensions:
+          source: nuclear
+          metric: total
+    - dimensions:
+          source: nuclear
+          metric: per_capita
+    - dimensions:
+          source: nuclear
+          metric: share_total
+    - dimensions:
+          source: nuclear
+          metric: proportional_change
+    - dimensions:
+          source: nuclear
+          metric: absolute_change
+
+    - dimensions:
+          source: renewable
+          metric: total
+    - dimensions:
+          source: renewable
+          metric: per_capita
+    - dimensions:
+          source: renewable
+          metric: share_total
+    - dimensions:
+          source: renewable
+          metric: proportional_change
+    - dimensions:
+          source: renewable
+          metric: absolute_change
+
+    - dimensions:
+          source: hydro
+          metric: total
+    - dimensions:
+          source: hydro
+          metric: per_capita
+    - dimensions:
+          source: hydro
+          metric: share_total
+    - dimensions:
+          source: hydro
+          metric: proportional_change
+    - dimensions:
+          source: hydro
+          metric: absolute_change
+
+    - dimensions:
+          source: solar-wind
+          metric: total
+    - dimensions:
+          source: solar-wind
+          metric: per_capita
+    - dimensions:
+          source: solar-wind
+          metric: share_total
+    - dimensions:
+          source: solar-wind
+          metric: proportional_change
+    - dimensions:
+          source: solar-wind
+          metric: absolute_change
+
+    - dimensions:
+          source: solar
+          metric: total
+    - dimensions:
+          source: solar
+          metric: per_capita
+    - dimensions:
+          source: solar
+          metric: share_total
+    - dimensions:
+          source: solar
+          metric: proportional_change
+    - dimensions:
+          source: solar
+          metric: absolute_change
+
+    - dimensions:
+          source: wind
+          metric: total
+    - dimensions:
+          source: wind
+          metric: per_capita
+    - dimensions:
+          source: wind
+          metric: share_total
+    - dimensions:
+          source: wind
+          metric: proportional_change
+    - dimensions:
+          source: wind
+          metric: absolute_change
diff --git a/public/multi-dim/life-expectancy.json b/public/multi-dim/life-expectancy.json
new file mode 100644
index 00000000000..082b7270f92
--- /dev/null
+++ b/public/multi-dim/life-expectancy.json
@@ -0,0 +1,193 @@
+{
+    "name": "Life expectancy",
+    "dimensions_title": "by age and sex",
+    "dimensions": [
+        {
+            "slug": "age",
+            "name": "Age",
+            "description": "The age at which the life expectancy is measured.",
+            "multi_select": true,
+            "choices": [
+                {
+                    "slug": "0",
+                    "name": "At birth"
+                },
+                {
+                    "slug": "15",
+                    "name": "At age 15",
+                    "description": "The expected age a 15-year-old would reach if current mortality rates continue."
+                }
+            ],
+            "_hidden_choices": [
+                {
+                    "slug": "65",
+                    "name": "At age 65",
+                    "description": "The expected age a 65-year-old would reach if current mortality rates continue."
+                },
+                {
+                    "slug": "80",
+                    "name": "At age 80",
+                    "description": "The expected age a 80-year-old would reach if current mortality rates continue. This number will always be higher than 80."
+                }
+            ]
+        },
+        {
+            "slug": "sex",
+            "name": "Sex",
+            "choices": [
+                {
+                    "slug": "both",
+                    "name": "Both sexes"
+                },
+                {
+                    "slug": "female",
+                    "name": "Female"
+                },
+                {
+                    "slug": "male",
+                    "name": "Male"
+                }
+            ]
+        },
+        {
+            "slug": "projection",
+            "name": "Projection",
+            "description": "The UNWPP projection scenario to use",
+            "choices": [
+                {
+                    "slug": "none",
+                    "name": "No projection (estimates only)",
+                    "description": "Only historical data, no projections into the future."
+                },
+                {
+                    "slug": "medium",
+                    "name": "Medium projection scenario",
+                    "description": "Projections into the future based on UNWPP's medium-fertility scenario."
+                }
+            ]
+        }
+    ],
+    "views": [
+        {
+            "dimensions": { "age": "0", "sex": "both", "projection": "none" },
+            "indicator_path": { "520369": "y" },
+            "config": {
+                "title": "Life expectancy at birth",
+                "hasMapTab": true
+            }
+        },
+        {
+            "dimensions": { "age": "0", "sex": "both", "projection": "medium" },
+            "indicator_path": { "520370": "y" },
+            "config": {
+                "title": "Life expectancy at birth, medium projection",
+                "hasMapTab": true
+            }
+        },
+
+        {
+            "dimensions": { "age": "0", "sex": "male", "projection": "none" },
+            "indicator_path": { "520349": "y" },
+            "config": {
+                "title": "Male life expectancy at birth",
+                "hasMapTab": true
+            }
+        },
+        {
+            "dimensions": { "age": "0", "sex": "male", "projection": "medium" },
+            "indicator_path": { "520350": "y" },
+            "config": {
+                "title": "Male life expectancy at birth, medium projection",
+                "hasMapTab": true
+            }
+        },
+
+        {
+            "dimensions": { "age": "0", "sex": "female", "projection": "none" },
+            "indicator_path": { "520329": "y" },
+            "config": {
+                "title": "Female life expectancy at birth",
+                "hasMapTab": true
+            }
+        },
+        {
+            "dimensions": {
+                "age": "0",
+                "sex": "female",
+                "projection": "medium"
+            },
+            "indicator_path": { "520330": "y" },
+            "config": {
+                "title": "Female life expectancy at birth, medium projection",
+                "hasMapTab": true
+            }
+        },
+
+        {
+            "dimensions": { "age": "15", "sex": "both", "projection": "none" },
+            "indicator_path": { "520379": "y" },
+            "config": {
+                "title": "Life expectancy at age 15",
+                "hasMapTab": true
+            }
+        },
+        {
+            "dimensions": {
+                "age": "15",
+                "sex": "both",
+                "projection": "medium"
+            },
+            "indicator_path": { "520380": "y" },
+            "config": {
+                "title": "Life expectancy at age 15, medium projection",
+                "hasMapTab": true
+            }
+        },
+
+        {
+            "dimensions": { "age": "15", "sex": "male", "projection": "none" },
+            "indicator_path": { "520359": "y" },
+            "config": {
+                "title": "Male life expectancy at age 15",
+                "hasMapTab": true
+            }
+        },
+        {
+            "dimensions": {
+                "age": "15",
+                "sex": "male",
+                "projection": "medium"
+            },
+            "indicator_path": { "520360": "y" },
+            "config": {
+                "title": "Male life expectancy at age 15, medium projection",
+                "hasMapTab": true
+            }
+        },
+
+        {
+            "dimensions": {
+                "age": "15",
+                "sex": "female",
+                "projection": "none"
+            },
+            "indicator_path": { "520338": "y" },
+            "config": {
+                "title": "Female life expectancy at age 15",
+                "hasMapTab": true
+            }
+        },
+        {
+            "dimensions": {
+                "age": "15",
+                "sex": "female",
+                "projection": "medium"
+            },
+            "indicator_path": { "520340": "y" },
+            "config": {
+                "title": "Female life expectancy at age 15, medium projection",
+                "hasMapTab": true
+            }
+        }
+    ]
+}
diff --git a/public/multi-dim/plastic.json b/public/multi-dim/plastic.json
new file mode 100644
index 00000000000..1760e20bd70
--- /dev/null
+++ b/public/multi-dim/plastic.json
@@ -0,0 +1,95 @@
+{
+    "name": "Plastic",
+    "dimensions_title": "waste and pollution",
+    "dimensions": [
+        {
+            "slug": "metric",
+            "name": "Metric",
+            "multi_select": true,
+            "choices": [
+                {
+                    "slug": "waste_gen",
+                    "name": "Plastic waste generation",
+                    "description": "The amount of plastic waste generated. Prior to management, i.e. this also includes waste that is properly incinerated or recycled."
+                },
+                {
+                    "slug": "waste_mismanaged",
+                    "name": "Mismanaged waste",
+                    "description": "Mismanaged plastic waste includes materials burned in open pits, dumped into seas or open waters, or disposed of in unsanitary landfills and dumpsites."
+                },
+                {
+                    "slug": "emitted_to_ocean",
+                    "name": "Plastic emitted to ocean",
+                    "description": "This is an annual estimate of plastic emissions. A country's total does not include waste that is exported overseas, which may be at higher risk of entering the ocean."
+                },
+                {
+                    "slug": "trade_exports",
+                    "name": "Trade: exports",
+                    "description": "Plastic waste that is exported by all modes of transport in a given year."
+                },
+                {
+                    "slug": "trade_imports",
+                    "name": "Trade: imports",
+                    "description": "Plastic waste that is imported by all modes of transport in a given year."
+                },
+                {
+                    "slug": "trade_net_exports",
+                    "name": "Trade: net exports",
+                    "description": "Net exports of plastic waste are calculated as a country's plastic waste exports minus its imports."
+                }
+            ]
+        },
+        {
+            "slug": "measurement",
+            "name": "Measurement",
+            "choices": [
+                {
+                    "slug": "per_capita",
+                    "name": "Per capita",
+                    "description": "Per capita values are calculated by dividing the total amount by the population of the country."
+                },
+                {
+                    "slug": "total",
+                    "name": "Total"
+                },
+                {
+                    "slug": "share_of_world",
+                    "name": "Share of world total",
+                    "description": "The share of the world total is calculated by dividing the country's total by the global total."
+                }
+            ]
+        }
+    ],
+    "views": [
+        {
+            "dimensions": { "metric": "waste_gen", "measurement": "total" },
+            "indicator_path": { "97679": "y" },
+            "config": {
+                "title": "Plastic waste generation",
+                "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
+            }
+        },
+        {
+            "dimensions": {
+                "metric": "waste_gen",
+                "measurement": "per_capita"
+            },
+            "indicator_path": { "65358": "y" },
+            "config": {
+                "title": "Plastic waste generation per capita",
+                "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
+            }
+        },
+        {
+            "dimensions": {
+                "metric": "waste_gen",
+                "measurement": "share_of_world"
+            },
+            "indicator_path": { "146456": "y" },
+            "config": {
+                "title": "Plastic waste generation",
+                "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
+            }
+        }
+    ]
+}
diff --git a/public/multi-dim/poverty.yml b/public/multi-dim/poverty.yml
new file mode 100644
index 00000000000..8be35f83ea1
--- /dev/null
+++ b/public/multi-dim/poverty.yml
@@ -0,0 +1,226 @@
+name: Poverty
+dimensions_title: by poverty line
+dimensions:
+    - slug: povertyLine
+      name: Poverty line
+      description: The poverty line to display, in 2017 international $
+      choices:
+          - slug: "2.15"
+            name: 2.15 int.$
+          - slug: "3.65"
+            name: 3.65 int.$
+          - slug: "6.85"
+            name: 6.85 int.$
+          - slug: "10"
+            name: 10 int.$
+          - slug: "20"
+            name: 20 int.$
+          - slug: "20"
+            name: 20 int.$
+          - slug: "30"
+            name: 30 int.$
+          - slug: "40"
+            name: 40 int.$
+          - slug: all
+            name: all
+            description: show all poverty lines at the same time
+    - slug: metric
+      name: Metric
+      choices:
+          - slug: absolute
+            name: Number of people
+          - slug: share
+            name: Share of population
+          - slug: shareVsGdp
+            name: Share of population VS GDP per capita
+views:
+    - dimensions:
+          povertyLine: "2.15"
+          metric: share
+      config:
+          hasMapTab: true
+      indicator_path:
+          819727: y
+    - dimensions:
+          povertyLine: "3.65"
+          metric: share
+      indicator_path:
+          819729: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "6.85"
+          metric: share
+      indicator_path:
+          819731: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "10"
+          metric: share
+      indicator_path:
+          819725: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "20"
+          metric: share
+      indicator_path:
+          819726: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "30"
+          metric: share
+      indicator_path:
+          819728: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "40"
+          metric: share
+      indicator_path:
+          819730: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "2.15"
+          metric: shareVsGdp
+      indicator_path:
+          819727: y
+          539760: x
+      config:
+          hasMapTab: true
+          type: ScatterPlot
+          xAxis:
+              scaleType: log
+    - dimensions:
+          povertyLine: "3.65"
+          metric: shareVsGdp
+      indicator_path:
+          819729: y
+          539760: x
+      config:
+          hasMapTab: true
+          type: ScatterPlot
+          xAxis:
+              scaleType: log
+    - dimensions:
+          povertyLine: "6.85"
+          metric: shareVsGdp
+      indicator_path:
+          819731: y
+          539760: x
+      config:
+          hasMapTab: true
+          type: ScatterPlot
+          xAxis:
+              scaleType: log
+    - dimensions:
+          povertyLine: "10"
+          metric: shareVsGdp
+      indicator_path:
+          819725: y
+          539760: x
+      config:
+          hasMapTab: true
+          type: ScatterPlot
+          xAxis:
+              scaleType: log
+    - dimensions:
+          povertyLine: "20"
+          metric: shareVsGdp
+      indicator_path:
+          819726: y
+          539760: x
+      config:
+          hasMapTab: true
+          type: ScatterPlot
+          xAxis:
+              scaleType: log
+    - dimensions:
+          povertyLine: "30"
+          metric: shareVsGdp
+      indicator_path:
+          819728: y
+          539760: x
+      config:
+          hasMapTab: true
+          type: ScatterPlot
+          xAxis:
+              scaleType: log
+    - dimensions:
+          povertyLine: "40"
+          metric: shareVsGdp
+      indicator_path:
+          819730: y
+          539760: x
+      config:
+          hasMapTab: true
+          type: ScatterPlot
+          xAxis:
+              scaleType: log
+    - dimensions:
+          povertyLine: "2.15"
+          metric: absolute
+      indicator_path:
+          819719: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "3.65"
+          metric: absolute
+      indicator_path:
+          819721: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "6.85"
+          metric: absolute
+      indicator_path:
+          819723: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "10"
+          metric: absolute
+      indicator_path:
+          819717: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "20"
+          metric: absolute
+      indicator_path:
+          819718: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "30"
+          metric: absolute
+      indicator_path:
+          819720: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: "40"
+          metric: absolute
+      indicator_path:
+          819722: y
+      config:
+          hasMapTab: true
+    - dimensions:
+          povertyLine: all
+          metric: share
+      indicator_path:
+          - 819811: y
+          - 819826: y
+          - 819824: y
+          - 819822: y
+          - 819820: y
+          - 819818: y
+          - 819816: y
+          - 819815: y
+      config:
+          type: StackedArea
+          hasMapTab: true
diff --git a/site/GrapherWithFallback.tsx b/site/GrapherWithFallback.tsx
index 3849df575ff..b9b18acea4e 100644
--- a/site/GrapherWithFallback.tsx
+++ b/site/GrapherWithFallback.tsx
@@ -1,4 +1,4 @@
-import { Grapher } from "@ourworldindata/grapher"
+import { Grapher, GrapherManager } from "@ourworldindata/grapher"
 import React from "react"
 import { GrapherFigureView } from "./GrapherFigureView.js"
 import cx from "classnames"
@@ -7,14 +7,18 @@ import GrapherImage from "./GrapherImage.js"
 
 export const GrapherWithFallback = ({
     grapher,
+    manager,
     slug,
     className,
     id,
+    getGrapherInstance,
 }: {
     grapher?: Grapher | undefined
+    manager?: GrapherManager
     slug?: string
     className?: string
     id?: string
+    getGrapherInstance?: (grapher: Grapher) => void
 }) => {
     return (
         <div
@@ -27,7 +31,11 @@ export const GrapherWithFallback = ({
         >
             <>
                 {grapher ? (
-                    <GrapherFigureView grapher={grapher} />
+                    <GrapherFigureView
+                        grapher={grapher}
+                        manager={manager}
+                        getGrapherInstance={getGrapherInstance}
+                    />
                 ) : (
                     // Render fallback svg when javascript disabled or while
                     // grapher is loading
diff --git a/site/multi-dim/MultiDimDataPage.tsx b/site/multi-dim/MultiDimDataPage.tsx
new file mode 100644
index 00000000000..b42dbc0326c
--- /dev/null
+++ b/site/multi-dim/MultiDimDataPage.tsx
@@ -0,0 +1,101 @@
+import React from "react"
+import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
+import { Head } from "../Head.js"
+import { IFrameDetector } from "../IframeDetector.js"
+import { SiteHeader } from "../SiteHeader.js"
+import { OWID_DATAPAGE_CONTENT_ROOT_ID } from "../DataPageV2Content.js"
+import { SiteFooter } from "../SiteFooter.js"
+import { SiteFooterContext, serializeJSONForHTML } from "@ourworldindata/utils"
+
+export const MultiDimDataPage = (props: {
+    baseUrl: string
+    config: MultiDimDataPageConfig
+}) => {
+    const canonicalUrl = "" // TODO
+    const baseUrl = props.baseUrl // TODO
+    return (
+        <html>
+            <Head
+                canonicalUrl={canonicalUrl}
+                // pageTitle={pageTitle}
+                // pageDesc={pageDesc}
+                // imageUrl={imageUrl}
+                baseUrl={baseUrl}
+            >
+                {/* <meta property="og:image:width" content={imageWidth} />
+                <meta property="og:image:height" content={imageHeight} /> */}
+                <IFrameDetector />
+                <noscript>
+                    <style>{`
+                    figure[data-grapher-src] { display: none !important; }
+                `}</style>
+                </noscript>
+                {/* <link rel="preconnect" href={dataApiOrigin} />
+                {variableIds.flatMap((variableId) =>
+                    [
+                        getVariableDataRoute(DATA_API_URL, variableId),
+                        getVariableMetadataRoute(DATA_API_URL, variableId),
+                    ].map((href) => (
+                        <link
+                            key={href}
+                            rel="preload"
+                            href={href}
+                            as="fetch"
+                            crossOrigin="anonymous"
+                        />
+                    ))
+                )} */}
+                <link
+                    rel="preload"
+                    href="/fonts/PlayfairDisplayLatin-SemiBold.woff2"
+                    as="font"
+                    type="font/woff2"
+                    crossOrigin="anonymous"
+                />
+            </Head>
+            <body className="DataPage">
+                <SiteHeader baseUrl={baseUrl} />
+                <main>
+                    {/* <script
+                        dangerouslySetInnerHTML={{
+                            __html: `window._OWID_DATAPAGEV2_PROPS = ${JSON.stringify(
+                                {
+                                    datapageData,
+                                    faqEntries,
+                                    canonicalUrl,
+                                    tagToSlugMap: minimalTagToSlugMap,
+                                    imageMetadata,
+                                }
+                            )}`,
+                        }}
+                    /> */}
+                    <div id={OWID_DATAPAGE_CONTENT_ROOT_ID}>
+                        {/* <DebugProvider debug={isPreviewing}>
+                            <DataPageV2Content
+                                datapageData={datapageData}
+                                grapherConfig={grapherConfig}
+                                imageMetadata={imageMetadata}
+                                isPreviewing={isPreviewing}
+                                faqEntries={faqEntries}
+                                canonicalUrl={canonicalUrl}
+                                tagToSlugMap={tagToSlugMap}
+                            />
+                        </DebugProvider> */}
+                    </div>
+                </main>
+                <SiteFooter
+                    baseUrl={baseUrl}
+                    context={SiteFooterContext.multiDimDataPage}
+                    // isPreviewing={isPreviewing}
+                />
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `window._OWID_MULTI_DIM_CONFIG = ${serializeJSONForHTML(
+                            props.config.config
+                        )}`,
+                    }}
+                />
+            </body>
+        </html>
+    )
+}
diff --git a/site/multi-dim/MultiDimDataPageConfig.test.ts b/site/multi-dim/MultiDimDataPageConfig.test.ts
new file mode 100644
index 00000000000..e7dacb6dc70
--- /dev/null
+++ b/site/multi-dim/MultiDimDataPageConfig.test.ts
@@ -0,0 +1,129 @@
+#! /usr/bin/env jest
+
+import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
+
+it("fromYaml", () => {
+    const config = MultiDimDataPageConfig.fromYaml(`name: Test`)
+    expect(config.config.name).toBe("Test")
+})
+
+it("fromObject", () => {
+    const config = MultiDimDataPageConfig.fromObject({ name: "Test" } as any)
+    expect(config.config.name).toBe("Test")
+})
+
+describe("methods", () => {
+    const yaml = `
+    name: CO₂ emissions
+    dimensions_title: by fuel type and sector
+    common_indicator_path_prefix: gcp/2024/co2_and_ghg_emissions/ # optional
+    dimensions:
+        - slug: fuel_type
+          name: Fuel type
+          description: The fuel where these emissions stem from. # optional
+          multi_select: true # optional
+          choices:
+              - slug: gas
+                name: Natural gas
+                description: Natural gas, e.g. methane or propane.
+              - slug: cement
+                name: Cement
+                description: Emissions from the drying-out of cement.
+              - slug: all
+                name: All
+                description: Emissions from all fuel types.
+                multi_select: false
+        - slug: sector
+          name: Sector
+          description: The sector where these emissions stem from.
+          choices:
+              - slug: agriculture
+                name: Agriculture
+                description: Agricultural emissions, e.g. from land use change and emissions from livestock and harvesting.
+              - slug: transport
+                name: Transportation
+                description: Emissions from global transport, including cars, trucks, rail transport and global shipping.
+              - slug: industry
+                name: Industry
+                description: Emissions from the production of non-agricultural goods, e.g. steel and glass.
+              - slug: heating
+              - slug: electricity
+    views:
+        - dimensions:
+              fuel_type: gas
+              sector: transport
+          indicator_path:
+              emissions__gas__transport: y
+          config:
+              title: Natural gas emissions in transport
+        - dimensions:
+              fuel_type: oil
+              sector: transport
+          indicator_path:
+              emissions__oil__transport: y
+          config:
+              title: Oil emissions in transport
+              subtitle: ...
+        - dimensions: # This dimension uses other fields; they probably are nicer to work with
+              fuel_type: solar
+              sector: electricity
+          indicator_path:
+              emissions__solar__transport: y
+          config:
+              title: ...
+              subtitle: ...
+`
+    const config = MultiDimDataPageConfig.fromYaml(yaml)
+
+    it("dimensions", () => {
+        expect(Object.keys(config.dimensions)).toEqual(["fuel_type", "sector"])
+        expect(Object.keys(config.dimensions["fuel_type"].choices)).toEqual([
+            "gas",
+            "cement",
+            "all",
+        ])
+    })
+
+    it("filterViewsByDimensions", () => {
+        const views = config.filterViewsByDimensions({
+            sector: "transport",
+        })
+        expect(views).toHaveLength(2)
+        expect(views.map((v) => v.config?.title)).toEqual([
+            "Natural gas emissions in transport",
+            "Oil emissions in transport",
+        ])
+    })
+
+    it("findViewByDimensions", () => {
+        const view = config.findViewByDimensions({
+            fuel_type: "gas",
+            sector: "transport",
+        })
+        expect(view).toBeDefined()
+        expect(view!.indicator_path).toEqual({
+            emissions__gas__transport: "y",
+        })
+    })
+})
+
+describe("transformIndicatorPathObj", () => {
+    it("works", () => {
+        const obj = {
+            emissions__gas__transport: "y",
+            emissions__oil__transport: "y",
+            time: "x",
+            gdp_per_capita: "size",
+        }
+        const result = MultiDimDataPageConfig.transformIndicatorPathObj(
+            obj as any
+        )
+        expect(result).toEqual({
+            x: ["time"],
+            y: ["emissions__gas__transport", "emissions__oil__transport"],
+            color: [],
+            size: ["gdp_per_capita"],
+            table: [],
+        })
+    })
+})
diff --git a/site/multi-dim/MultiDimDataPageConfig.ts b/site/multi-dim/MultiDimDataPageConfig.ts
new file mode 100644
index 00000000000..e5a5bbf3b07
--- /dev/null
+++ b/site/multi-dim/MultiDimDataPageConfig.ts
@@ -0,0 +1,141 @@
+import YAML from "yaml"
+import {
+    Dimension,
+    MultiDimDataPageConfigType,
+    View,
+} from "./MultiDimDataPageTypes.js"
+import { DimensionProperty, groupBy, keyBy } from "@ourworldindata/utils"
+
+export class MultiDimDataPageConfig {
+    private constructor(public readonly config: MultiDimDataPageConfigType) {}
+
+    static fromYaml(yaml: string) {
+        return new MultiDimDataPageConfig(YAML.parse(yaml))
+    }
+
+    static fromObject(obj: MultiDimDataPageConfigType) {
+        return new MultiDimDataPageConfig(obj)
+    }
+
+    static getChoicesFields(choices: Dimension[]) {
+        return {
+            choices,
+            choicesBySlug: keyBy(choices, "slug"),
+            choicesByGroup: groupBy(choices, "group"),
+        }
+    }
+
+    get dimensions() {
+        const dimensionsEnriched = this.config.dimensions.map((dimension) => ({
+            ...dimension,
+            ...MultiDimDataPageConfig.getChoicesFields(dimension.choices),
+        }))
+        return keyBy(dimensionsEnriched, "slug")
+    }
+
+    filterViewsByDimensions(dimensions: Record<string, string>): View[] {
+        return this.config.views.filter((view) => {
+            for (const [dimensionSlug, choiceSlug] of Object.entries(
+                dimensions
+            )) {
+                if (view.dimensions[dimensionSlug] !== choiceSlug) return false
+            }
+            return true
+        })
+    }
+
+    findViewByDimensions(dimensions: Record<string, string>) {
+        const matchingViews = this.filterViewsByDimensions(dimensions)
+        if (matchingViews.length === 0) return undefined
+        if (matchingViews.length > 1) {
+            throw new Error(
+                `Multiple views found for dimensions ${JSON.stringify(
+                    dimensions
+                )}`
+            )
+        }
+        return matchingViews[0]
+    }
+
+    filterToAvailableChoices(selectedChoices: Record<string, string>) {
+        const updatedSelectedChoices: Record<string, string> = {}
+        const dimensionsWithAvailableChoices = this.dimensions
+        for (const [dimSlug, dim] of Object.entries(
+            dimensionsWithAvailableChoices
+        )) {
+            const availableViewsBeforeSelection = this.filterViewsByDimensions(
+                updatedSelectedChoices
+            )
+            if (
+                selectedChoices[dimSlug] &&
+                dim.choicesBySlug[selectedChoices[dimSlug]]
+            ) {
+                updatedSelectedChoices[dimSlug] = selectedChoices[dimSlug]
+            } else {
+                throw new Error(
+                    `Missing or invalid choice for dimension ${dimSlug}`
+                )
+            }
+
+            const availableViewsAfterSelection = this.filterViewsByDimensions(
+                updatedSelectedChoices
+            )
+            if (availableViewsAfterSelection.length === 0) {
+                updatedSelectedChoices[dimSlug] =
+                    availableViewsBeforeSelection[0].dimensions[dimSlug]
+            }
+
+            const choices = Object.values(dim.choices).filter((choice) =>
+                availableViewsBeforeSelection.some(
+                    (view) => view.dimensions[dimSlug] === choice.slug
+                )
+            )
+
+            dimensionsWithAvailableChoices[dimSlug] = {
+                ...dim,
+                ...MultiDimDataPageConfig.getChoicesFields(choices),
+            }
+        }
+
+        return {
+            selectedChoices: updatedSelectedChoices,
+            dimensionsWithAvailableChoices,
+        }
+    }
+
+    static transformIndicatorPathObj(
+        indicatorPathObj:
+            | Record<string, DimensionProperty>
+            | Array<Record<string, DimensionProperty>>
+    ): Record<DimensionProperty, string[]> {
+        const emptyObj: Record<DimensionProperty, string[]> = {
+            x: [],
+            y: [],
+            color: [],
+            size: [],
+            table: [],
+        }
+        if (Array.isArray(indicatorPathObj)) {
+            return indicatorPathObj.reduce((result, obj) => {
+                const transformed =
+                    MultiDimDataPageConfig.transformIndicatorPathObj(obj)
+                for (const [dimension, indicatorPaths] of Object.entries(
+                    transformed
+                )) {
+                    result[dimension as DimensionProperty].push(
+                        ...indicatorPaths
+                    )
+                }
+                return result
+            }, emptyObj)
+        } else {
+            return Object.entries(indicatorPathObj).reduce(
+                (result, [indicatorPath, dimension]) => {
+                    result[dimension].push(indicatorPath)
+                    return result
+                },
+                emptyObj
+            )
+        }
+    }
+}
diff --git a/site/multi-dim/MultiDimDataPageContent.scss b/site/multi-dim/MultiDimDataPageContent.scss
new file mode 100644
index 00000000000..e32f17667e6
--- /dev/null
+++ b/site/multi-dim/MultiDimDataPageContent.scss
@@ -0,0 +1,257 @@
+$light-stroke: #e7e7e7;
+$dark-stroke: #2d2d2d;
+$active-stroke: #a4b6ca;
+
+$light-fill: #dadada;
+$active-fill: #dbe5f0;
+$hover-fill: #f2f2f2;
+$selected-fill: #c7ced7;
+
+$info-icon: #a1a1a1;
+$active-switch: #6e87a2;
+
+$medium: 400;
+$bold: 700;
+$lato: $sans-serif-font-stack;
+
+$indent: 15px;
+$control-row-height: 32px;
+
+$light-text: #858585;
+$dark-text: #5b5b5b;
+$active-text: $blue-90;
+
+$zindex-controls-backdrop: 130;
+$zindex-controls-popup: 140;
+
+.MultiDimDataPageContent {
+    .settings-row {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        margin-top: 20px;
+
+        > span {
+            color: $gray-70;
+            text-transform: uppercase;
+            font-weight: 700;
+            font-size: 0.9em;
+            margin-right: 10px;
+        }
+
+        button {
+            display: flex;
+            align-items: center;
+            color: $dark-text;
+            background: white;
+            border: 1px solid $light-stroke;
+            font: $medium 13px/16px $lato;
+            letter-spacing: 0.01em;
+            border-radius: 4px;
+            padding: 7px;
+            height: 40px;
+
+            svg {
+                margin-left: 5px;
+            }
+
+            &:hover {
+                background: $hover-fill;
+                cursor: pointer;
+
+                &:not(.active) {
+                    color: $dark-text;
+                }
+            }
+
+            &.active,
+            &:active {
+                background: $active-fill;
+                border: 1px solid $active-fill;
+            }
+
+            &.active {
+                cursor: default;
+                color: $active-text;
+
+                .setting-label {
+                    color: $dark-text;
+                }
+            }
+        }
+    }
+
+    .settings-dropdown {
+        position: relative;
+    }
+
+    .menu-wrapper {
+        position: absolute;
+        width: 400px;
+        left: 0;
+        top: 40px + 5px;
+        background: white;
+        border-radius: 4px;
+        box-shadow: 0px 4px 23px 4px #0000000f;
+        z-index: $zindex-controls-popup;
+        overflow-y: scroll;
+
+        h4 {
+            padding: 0 1em;
+            margin-bottom: 0;
+            color: $dark-text;
+        }
+
+        p {
+            padding: 0 1em;
+            color: $dark-text;
+            font-size: 0.8em;
+        }
+    }
+
+    // transparent mouse-event catcher while popup is visible
+    .menu-backdrop {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: $zindex-controls-backdrop;
+    }
+
+    .setting-label {
+        color: $light-text;
+        &::after {
+            content: ":";
+            margin-right: 3px;
+        }
+
+        .active & {
+            color: $dark-text;
+        }
+    }
+
+    .menu-group {
+        > label {
+            padding: 0 1em;
+            color: $light-text;
+            font-size: 14px;
+            // text-transform: uppercase;
+        }
+
+        &.is-group section {
+            padding-left: 0.75em;
+        }
+        padding-bottom: 0.25em;
+        margin-bottom: 0.25em;
+        border-bottom: 1px solid rgba($light-stroke, 0.3);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    section {
+        font: $medium 14px/1.2 $lato;
+        color: $dark-text;
+        margin: 0 $indent;
+
+        .config-name {
+            font: $bold 14px/1.2 $lato;
+            color: $dark-text;
+            list-style: none;
+
+            svg {
+                color: $info-icon;
+                height: 13px;
+                padding: 0 0.333em;
+            }
+        }
+
+        .labeled-switch .labeled-switch-subtitle,
+        .config-subtitle {
+            font-size: 13px;
+            margin: 5px 0;
+        }
+
+        .config-toggle {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            padding: 0.5em 0;
+        }
+
+        &.active {
+            button {
+                background: $active-fill;
+                border: 1px solid $active-fill;
+                color: $active-text;
+
+                &:hover {
+                    background: darken($active-fill, 5%);
+                }
+
+                &:active {
+                    background: darken($active-fill, 10%);
+                }
+            }
+        }
+
+        .description {
+            font-size: 12px;
+            color: $gray-60;
+            margin: 0;
+            margin-bottom: 5px;
+        }
+    }
+
+    //
+    // resuable widgets
+    //
+    section {
+        // left/right pairs of options
+        .config-toggle {
+            label {
+                flex-basis: 100%;
+                color: $dark-text;
+                margin-bottom: 0.5em;
+            }
+            button {
+                width: calc(50% - 5px);
+                padding: 7px 16px;
+            }
+        }
+
+        // on/off switch with label written to the right
+        .labeled-switch {
+            margin: 14px 0;
+            display: block;
+        }
+
+        // vertical list of options (for selecting faceting mode)
+        .config-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            padding: 7px 0;
+            button {
+                width: 100%;
+
+                &.entity span {
+                    width: 10px;
+                    height: 10px;
+                }
+
+                &.metric span {
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 5px;
+                }
+
+                &.active {
+                    background: #a4b6ca;
+                }
+            }
+        }
+    }
+}
diff --git a/site/multi-dim/MultiDimDataPageContent.tsx b/site/multi-dim/MultiDimDataPageContent.tsx
new file mode 100644
index 00000000000..70eec553144
--- /dev/null
+++ b/site/multi-dim/MultiDimDataPageContent.tsx
@@ -0,0 +1,1756 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { faArrowDown, faCaretDown } from "@fortawesome/free-solid-svg-icons"
+import {
+    Grapher,
+    GrapherManager,
+    GrapherProgrammaticInterface,
+    SelectionArray,
+    getVariableMetadataRoute,
+} from "@ourworldindata/grapher"
+import {
+    CodeSnippet,
+    REUSE_THIS_WORK_SECTION_ID,
+    IndicatorSources,
+    DATAPAGE_ABOUT_THIS_DATA_SECTION_ID,
+    DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
+    IndicatorProcessing,
+    SimpleMarkdownText,
+    ExpandableToggle,
+    makeSource,
+    makeDateRange,
+    makeLastUpdated,
+    makeNextUpdate,
+    makeUnit,
+    makeUnitConversionFactor,
+    makeLinks,
+    HtmlOrSimpleMarkdownText,
+    DataCitation,
+} from "@ourworldindata/components"
+import ReactDOM from "react-dom"
+import { GrapherWithFallback } from "../GrapherWithFallback.js"
+import { ArticleBlocks } from "../gdocs/components/ArticleBlocks.js"
+import { RelatedCharts } from "../blocks/RelatedCharts.js"
+import {
+    DataPageV2ContentFields,
+    uniq,
+    formatAuthors,
+    intersection,
+    prepareSourcesForDisplay,
+    excludeUndefined,
+    OwidOrigin,
+    DataPageDataV2,
+    getCitationShort,
+    GrapherInterface,
+    getCitationLong,
+    joinTitleFragments,
+    ImageMetadata,
+    DimensionProperty,
+    OwidVariableWithSource,
+    getLastUpdatedFromVariable,
+    getNextUpdateFromVariable,
+    omitUndefinedValues,
+    getAttributionFragmentsFromVariable,
+    OwidVariableDataMetadataDimensions,
+    OwidVariableWithSourceAndDimension,
+    memoize,
+    Url,
+    getWindowQueryParams,
+    isEqual,
+    GrapherTabOption,
+} from "@ourworldindata/utils"
+import { AttachmentsContext, DocumentContext } from "../gdocs/OwidGdoc.js"
+import StickyNav from "../blocks/StickyNav.js"
+import cx from "classnames"
+import { DebugProvider } from "../gdocs/DebugContext.js"
+import dayjs from "dayjs"
+import { BAKED_BASE_URL, DATA_API_URL } from "../../settings/clientSettings.js"
+import Image from "../gdocs/components/Image.js"
+import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
+import Select, { OptionProps, components } from "react-select"
+import {
+    Choice,
+    Dimension,
+    DimensionEnriched,
+    MultiDimDataPageConfigType,
+} from "./MultiDimDataPageTypes.js"
+import { action, autorun, reaction } from "mobx"
+declare global {
+    interface Window {
+        _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigType
+    }
+}
+export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root"
+
+// https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
+function usePrevious<T>(value: T) {
+    const ref = useRef<T>()
+    useEffect(() => {
+        ref.current = value
+    }, [value])
+    return ref.current
+}
+
+// We still have topic pages on WordPress, whose featured images are specified as absolute URLs which this component handles
+// Once we've migrated all WP topic pages to gdocs, we'll be able to remove this component and just use <Image />
+const DatapageResearchThumbnail = ({
+    urlOrFilename,
+}: {
+    urlOrFilename: string | undefined | null
+}) => {
+    if (!urlOrFilename) {
+        urlOrFilename = `${BAKED_BASE_URL}/default-thumbnail.jpg`
+    }
+    if (urlOrFilename.startsWith("http")) {
+        return (
+            <img
+                src={urlOrFilename}
+                className="span-lg-cols-2 span-sm-cols-3"
+            />
+        )
+    }
+    return (
+        <Image
+            filename={urlOrFilename}
+            shouldLightbox={false}
+            containerType="thumbnail"
+            className="span-lg-cols-2 span-sm-cols-3"
+        />
+    )
+}
+
+const DimensionDropdown = (props: {
+    dimension: DimensionEnriched
+    currentChoiceSlug: string
+    onChange?: (slug: string, valueSlug: string) => void
+}) => {
+    const { dimension } = props
+
+    const [active, setActive] = useState(false)
+
+    const toggleVisibility = useCallback(() => setActive(!active), [active])
+
+    const dropdownRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape") setActive(false)
+        }
+
+        document.addEventListener("keydown", handleEscape)
+        return () => document.removeEventListener("keydown", handleEscape)
+    }, [])
+
+    useEffect(() => {
+        const handleOutsideClick = (e: MouseEvent) => {
+            if (
+                active &&
+                dropdownRef.current &&
+                e.target instanceof Node &&
+                !dropdownRef.current.contains(e.target)
+            )
+                setActive(false)
+        }
+
+        document.addEventListener("click", handleOutsideClick)
+        return () => document.removeEventListener("click", handleOutsideClick)
+    }, [active])
+
+    const currentChoice = dimension.choicesBySlug[props.currentChoiceSlug]
+
+    return (
+        <div className="settings-dropdown" ref={dropdownRef}>
+            <button
+                className={cx("menu-toggle", { active })}
+                onClick={toggleVisibility}
+                data-track-note="multi-dim-choice-dropdown"
+                type="button"
+            >
+                <span className="setting-label">{dimension.name}</span>
+                <span className="setting-choice">{currentChoice.name}</span>
+                <FontAwesomeIcon icon={faCaretDown} />
+            </button>
+            {active && (
+                <div className="menu">
+                    <div className="menu-contents">
+                        <div
+                            className="menu-backdrop"
+                            onClick={toggleVisibility}
+                        ></div>
+                        {/* <OverlayHeader /> */}
+                        <div className="menu-wrapper">
+                            <h4>{dimension.name}</h4>
+                            {dimension.description && (
+                                <p>{dimension.description}</p>
+                            )}
+                            <div className="menu-options">
+                                {Object.entries(dimension.choicesByGroup).map(
+                                    ([groupName, groupChoices]) => (
+                                        <div
+                                            key={groupName}
+                                            className={cx("menu-group", {
+                                                "is-group":
+                                                    groupName !== "undefined",
+                                            })}
+                                        >
+                                            {groupName !== "undefined" && (
+                                                <label>{groupName}</label>
+                                            )}
+                                            {groupChoices.map((choice) => (
+                                                <section
+                                                    key={choice.slug}
+                                                    className={cx({
+                                                        active:
+                                                            choice.slug ===
+                                                            props.currentChoiceSlug,
+                                                    })}
+                                                >
+                                                    <div className="config-list">
+                                                        <button
+                                                            onClick={() => {
+                                                                props.onChange?.(
+                                                                    dimension.slug,
+                                                                    choice.slug
+                                                                )
+                                                                setActive(false)
+                                                            }}
+                                                        >
+                                                            {choice.name}
+                                                        </button>
+                                                        {choice.description && (
+                                                            <label className="description">
+                                                                {
+                                                                    choice.description
+                                                                }
+                                                            </label>
+                                                        )}
+                                                    </div>
+                                                </section>
+                                            ))}
+                                        </div>
+                                    )
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+const MultiDimSettingsPanel = (props: {
+    config: MultiDimDataPageConfig
+    onChange?: (
+        slug: string,
+        value: string,
+        currentSettings: Record<string, string>
+    ) => void
+    updateSettings?: (currentSettings: Record<string, string>) => void
+}) => {
+    const { config } = props
+
+    const { dimensions } = config
+
+    const initialSettings = useMemo(
+        () =>
+            Object.fromEntries(
+                Object.values(dimensions).map((dimension) => [
+                    dimension.slug,
+                    Object.values(dimension.choices)[0].slug,
+                ])
+            ),
+        [dimensions]
+    )
+
+    const [currentSettings, setCurrentSettings] = useState(initialSettings)
+
+    const [availableSettings, setAvailableSettings] = useState<
+        Record<string, DimensionEnriched>
+    >({})
+
+    useEffect(() => {
+        if (!config) return
+        const { dimensionsWithAvailableChoices, selectedChoices } =
+            config.filterToAvailableChoices(currentSettings)
+
+        if (!isEqual(selectedChoices, currentSettings))
+            setCurrentSettings(selectedChoices)
+        setAvailableSettings(dimensionsWithAvailableChoices)
+    }, [currentSettings, config])
+
+    useEffect(
+        () => props.updateSettings?.(currentSettings),
+        [props, currentSettings]
+    )
+
+    const settings = Object.values(availableSettings).map((dim) => (
+        <DimensionDropdown
+            key={dim.slug}
+            dimension={dim}
+            currentChoiceSlug={currentSettings[dim.slug]}
+            onChange={(slug, value) =>
+                setCurrentSettings({ ...currentSettings, [slug]: value })
+            }
+        />
+    ))
+
+    return (
+        <div className="settings-row">
+            <span>Configure the data</span>
+            {settings}
+        </div>
+    )
+}
+
+// From DataPageUtils
+const getDatapageDataV2 = async (
+    variableMetadata: OwidVariableWithSource,
+    partialGrapherConfig: GrapherInterface
+): Promise<DataPageDataV2> => {
+    {
+        const lastUpdated = getLastUpdatedFromVariable(variableMetadata) ?? ""
+        const nextUpdate = getNextUpdateFromVariable(variableMetadata)
+        const datapageJson: DataPageDataV2 = {
+            status: "draft",
+            title: variableMetadata.presentation?.titlePublic
+                ? omitUndefinedValues({
+                      title: variableMetadata.presentation?.titlePublic,
+                      attributionShort:
+                          variableMetadata.presentation?.attributionShort,
+                      titleVariant: variableMetadata.presentation?.titleVariant,
+                  })
+                : {
+                      title:
+                          partialGrapherConfig.title ??
+                          variableMetadata.display?.name ??
+                          variableMetadata.name ??
+                          "",
+                  },
+            description: variableMetadata.description,
+            descriptionShort: variableMetadata.descriptionShort,
+            descriptionFromProducer: variableMetadata.descriptionFromProducer,
+            attributionShort: variableMetadata.presentation?.attributionShort,
+            titleVariant: variableMetadata.presentation?.titleVariant,
+            topicTagsLinks: variableMetadata.presentation?.topicTagsLinks ?? [],
+            attributions: getAttributionFragmentsFromVariable(variableMetadata),
+            faqs: [],
+            descriptionKey: variableMetadata.descriptionKey ?? [],
+            descriptionProcessing: variableMetadata.descriptionProcessing,
+            owidProcessingLevel: variableMetadata.processingLevel,
+            dateRange: variableMetadata.timespan ?? "",
+            lastUpdated: lastUpdated,
+            nextUpdate: nextUpdate,
+            relatedData: [],
+            allCharts: [],
+            relatedResearch: [],
+            source: variableMetadata.source,
+            origins: variableMetadata.origins ?? [],
+            chartConfig: partialGrapherConfig as Record<string, unknown>,
+            unit: variableMetadata.display?.unit ?? variableMetadata.unit,
+            unitConversionFactor: variableMetadata.display?.conversionFactor,
+        }
+        return datapageJson
+    }
+}
+
+const cachedGetVariableMetadata = memoize(
+    (variableId: number): Promise<OwidVariableWithSourceAndDimension> =>
+        fetch(getVariableMetadataRoute(DATA_API_URL, variableId)).then((resp) =>
+            resp.json()
+        )
+)
+
+export const MultiDimDataPageContent = ({
+    // _datapageData,
+    grapherConfig,
+    isPreviewing = false,
+    faqEntries,
+    canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
+    tagToSlugMap,
+    imageMetadata,
+}: DataPageV2ContentFields & {
+    grapherConfig: GrapherInterface
+    imageMetadata: Record<string, ImageMetadata>
+}) => {
+    const [config, setConfig] = useState<MultiDimDataPageConfig | undefined>(
+        undefined
+    )
+    useEffect(() => {
+        const params = getWindowQueryParams()
+        const fetchUrl = params["url"]
+        if (!fetchUrl) throw new Error("No fetch url provided")
+
+        fetch(fetchUrl)
+            .then((res) => res.text())
+            .then(MultiDimDataPageConfig.fromYaml)
+            .then(setConfig)
+            .catch(console.error)
+    }, [])
+    // const config = useMemo(
+    //     () => MultiDimDataPageConfig.fromObject(window._OWID_MULTI_DIM_CONFIG),
+    //     []
+    // )
+
+    const datapageDataStub: Partial<DataPageDataV2> = {
+        title: {
+            title: config?.config.name ?? "",
+            titleVariant: config?.config.dimensions_title,
+        },
+        titleVariant: config?.config.dimensions_title,
+    }
+
+    const [currentSettings, setCurrentSettings] = useState({})
+
+    const currentView = useMemo(() => {
+        if (Object.keys(currentSettings).length === 0) return undefined
+        return config?.findViewByDimensions(currentSettings)
+    }, [currentSettings, config])
+
+    const dimensionsConfig = useMemo(() => {
+        const dimObj = MultiDimDataPageConfig.transformIndicatorPathObj(
+            currentView?.indicator_path ?? {}
+        )
+        return Object.entries(dimObj).flatMap(([property, variableIds]) =>
+            variableIds.flatMap((variableId) => ({
+                property: property as DimensionProperty,
+                variableId: parseInt(variableId),
+            }))
+        )
+    }, [currentView])
+
+    const [datapageDataFromVar, setDatapageDataFromVar] =
+        useState<DataPageDataV2 | null>(null)
+
+    useEffect(() => {
+        const timer = window.setTimeout(() => setDatapageDataFromVar(null), 1)
+        const variableId = dimensionsConfig[0]?.variableId
+        if (!variableId) return
+        const variableMetadata = cachedGetVariableMetadata(variableId)
+
+        variableMetadata
+            .then((json) => getDatapageDataV2(json, grapherConfig))
+            .then(setDatapageDataFromVar)
+            .then(() => window.clearTimeout(timer))
+            .catch(console.error)
+    }, [dimensionsConfig, grapherConfig])
+
+    const titleFragments = joinTitleFragments(
+        datapageDataFromVar?.attributionShort,
+        datapageDataFromVar?.titleVariant
+    )
+
+    const topicTags = datapageDataFromVar?.topicTagsLinks
+        ?.map((name) => ({ name, slug: tagToSlugMap?.[name] }))
+        .filter((tag): tag is { name: string; slug: string } => !!tag.slug)
+        .map((tag) => (
+            <a href={`/${tag.slug}`} key={tag.slug}>
+                {tag.name}
+            </a>
+        ))
+
+    const selectionArray = useMemo(
+        () =>
+            new SelectionArray([
+                "Spain",
+                "Zimbabwe",
+                "United Kingdom",
+                "World",
+            ]),
+        []
+    )
+
+    const grapherManager = useMemo(
+        (): GrapherManager => ({
+            selection: selectionArray,
+        }),
+        [selectionArray]
+    )
+
+    // This is the ACTUAL grapher instance being used, because GrapherFigureView/GrapherWithFallback are doing weird things and are not actually using the grapher instance we pass into it
+    // and therefore we can not access the grapher state (e.g. tab, selection) from the grapher instance we pass into it
+    // TODO we should probably fix that? seems sensible? change GrapherFigureView around a bit to use the actual grapher inst? or pass a GrapherProgrammaticInterface to it instead?
+    const [grapherInst, setGrapherInst] = useState<Grapher | null>(null)
+
+    const grapherConfigComputed = useMemo(() => {
+        return {
+            ...currentView?.config,
+            dimensions: dimensionsConfig,
+            isEmbeddedInADataPage: true,
+
+            // Keep the tab we last had
+            tab: grapherInst?.tab ?? GrapherTabOption.chart,
+        } as GrapherProgrammaticInterface
+    }, [currentView, dimensionsConfig, grapherInst])
+
+    const grapher = useMemo(() => {
+        const grapher = new Grapher(grapherConfigComputed)
+        return grapher
+    }, [grapherConfigComputed])
+
+    const hasDescriptionKey = !!datapageDataFromVar?.descriptionKey?.length
+
+    const attributionFragments = datapageDataFromVar?.attributions ?? []
+    const attributionUnshortened = attributionFragments.join("; ")
+    const citationShort = getCitationShort(
+        datapageDataFromVar?.origins ?? [],
+        datapageDataFromVar?.attributions ?? [],
+        datapageDataFromVar?.owidProcessingLevel
+    )
+    const currentYear = dayjs().year()
+    const citationLong = getCitationLong(
+        datapageDataFromVar?.title ?? { title: "" },
+        datapageDataFromVar?.origins ?? [],
+        datapageDataFromVar?.source,
+        datapageDataFromVar?.attributions ?? [],
+        datapageDataFromVar?.attributionShort,
+        datapageDataFromVar?.titleVariant,
+        datapageDataFromVar?.owidProcessingLevel,
+        canonicalUrl
+    )
+
+    const getYearSuffixFromOrigin = (o: OwidOrigin) => {
+        const year = o.dateAccessed
+            ? dayjs(o.dateAccessed, ["YYYY-MM-DD", "YYYY"]).year()
+            : o.datePublished
+              ? dayjs(o.datePublished, ["YYYY-MM-DD", "YYYY"]).year()
+              : undefined
+        if (year) return ` (${year})`
+        else return ""
+    }
+    const producers = uniq(
+        datapageDataFromVar?.origins?.map((o) => `${o.producer}`)
+    )
+    const producersWithYear = uniq(
+        datapageDataFromVar?.origins?.map(
+            (o) => `${o.producer}${getYearSuffixFromOrigin(o)}`
+        )
+    )
+
+    const adaptedFrom =
+        producers.length > 0
+            ? producers.join(", ")
+            : datapageDataFromVar?.source?.name
+
+    const maybeAddPeriod = (s: string) =>
+        s.endsWith("?") || s.endsWith(".") ? s : `${s}.`
+
+    // For the citation of the data page add a period it doesn't have that or a question mark
+    const primaryTopicCitation = maybeAddPeriod(
+        datapageDataFromVar?.primaryTopic?.citation ?? ""
+    )
+
+    const citationDatapage = excludeUndefined([
+        datapageDataFromVar?.primaryTopic
+            ? `“Data Page: ${datapageDataFromVar?.title?.title}”, part of the following publication: ${primaryTopicCitation}`
+            : `“Data Page: ${datapageDataFromVar?.title?.title}”. Our World in Data (${currentYear}).`,
+        adaptedFrom ? `Data adapted from ${adaptedFrom}.` : undefined,
+        `Retrieved from ${canonicalUrl} [online resource]`,
+    ]).join(" ")
+
+    const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
+    const relatedResearch =
+        relatedResearchCandidates.length > 3 &&
+        datapageDataFromVar?.topicTagsLinks?.length
+            ? relatedResearchCandidates.filter((research) => {
+                  const shared = intersection(
+                      research.tags,
+                      datapageDataFromVar?.topicTagsLinks ?? []
+                  )
+                  return shared.length > 0
+              })
+            : relatedResearchCandidates
+    for (const item of relatedResearch) {
+        // TODO: these are workarounds to not link to the (not really existing) template pages for energy or co2
+        // country profiles but instead to the topic page at the country selector.
+        if (item.url === "/co2-country-profile")
+            item.url =
+                "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles"
+        else if (item.url === "/energy-country-profile")
+            item.url = "/energy#country-profiles"
+        else if (item.url === "/coronavirus-country-profile")
+            item.url = "/coronavirus#coronavirus-country-profiles"
+    }
+
+    const hasRelatedDataFeatured = datapageDataFromVar?.relatedData?.some(
+        (data) => data.featured
+    )
+    const hasRelatedDataNonFeatured = datapageDataFromVar?.relatedData?.some(
+        (data) => !data.featured
+    )
+    const relatedDataCategoryClasses = `related-data__category ${
+        hasRelatedDataFeatured && hasRelatedDataNonFeatured
+            ? "related-data__category--grid span-cols-4 span-lg-cols-6 span-sm-cols-3"
+            : "related-data__category--columns span-cols-8 span-lg-cols-12"
+    } `
+
+    const sourcesForDisplay =
+        datapageDataFromVar !== null
+            ? prepareSourcesForDisplay(datapageDataFromVar)
+            : []
+
+    return (
+        <div className="DataPageContent MultiDimDataPageContent">
+            <div className="bg-blue-10">
+                <div className="header__wrapper wrapper grid grid-cols-12 ">
+                    <div className="header__left span-cols-8 span-sm-cols-12">
+                        <div className="header__supertitle">Data</div>
+                        <h1 className="header__title">
+                            {datapageDataFromVar?.title?.title}
+                        </h1>
+                        <div className="header__source">{titleFragments}</div>
+                    </div>
+                    {!!datapageDataFromVar?.topicTagsLinks?.length && (
+                        <div className="header__right col-start-9 span-cols-4 span-sm-cols-12">
+                            <div className="topic-tags__label">
+                                See all data and research on:
+                            </div>
+                            <div className="topic-tags">{topicTags}</div>
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className="wrapper">
+                {config && (
+                    <MultiDimSettingsPanel
+                        config={config}
+                        updateSettings={setCurrentSettings}
+                    />
+                )}
+            </div>
+
+            <div className="span-cols-14 grid grid-cols-12-full-width full-width--border">
+                <div className="chart-key-info col-start-2 span-cols-12">
+                    <GrapherWithFallback
+                        key={JSON.stringify(grapherConfigComputed)}
+                        grapher={grapher}
+                        manager={grapherManager}
+                        getGrapherInstance={(g) => setGrapherInst}
+                        id="explore-the-data"
+                    />
+                    {datapageDataFromVar && (
+                        <div className="wrapper-about-this-data grid grid-cols-12">
+                            {hasDescriptionKey ||
+                            datapageDataFromVar.descriptionFromProducer ||
+                            datapageDataFromVar.source?.additionalInfo ? (
+                                <>
+                                    <h2
+                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
+                                        className="key-info__title span-cols-12"
+                                    >
+                                        What you should know about this
+                                        indicator
+                                    </h2>
+                                    <div className="col-start-1 span-cols-8 span-lg-cols-7 span-sm-cols-12">
+                                        <div className="key-info__content">
+                                            {hasDescriptionKey && (
+                                                <div className="key-info__key-description">
+                                                    {datapageDataFromVar
+                                                        .descriptionKey
+                                                        .length === 1 ? (
+                                                        <SimpleMarkdownText
+                                                            text={datapageDataFromVar.descriptionKey[0].trim()}
+                                                        />
+                                                    ) : (
+                                                        <ul>
+                                                            {datapageDataFromVar.descriptionKey.map(
+                                                                (text, i) => (
+                                                                    <li key={i}>
+                                                                        <SimpleMarkdownText
+                                                                            text={text.trim()}
+                                                                            useParagraphs={
+                                                                                false
+                                                                            }
+                                                                        />
+                                                                    </li>
+                                                                )
+                                                            )}
+                                                        </ul>
+                                                    )}
+                                                    {!!faqEntries?.faqs
+                                                        .length && (
+                                                        <a
+                                                            className="key-info__learn-more"
+                                                            href="#faqs"
+                                                        >
+                                                            Learn more in the
+                                                            FAQs
+                                                            <FontAwesomeIcon
+                                                                icon={
+                                                                    faArrowDown
+                                                                }
+                                                            />
+                                                        </a>
+                                                    )}
+                                                </div>
+                                            )}
+
+                                            <div className="key-info__expandable-descriptions">
+                                                {datapageDataFromVar.descriptionFromProducer && (
+                                                    <ExpandableToggle
+                                                        label={
+                                                            datapageDataFromVar.attributionShort
+                                                                ? `How does the producer of this data - ${datapageDataFromVar.attributionShort} - describe this data?`
+                                                                : "How does the producer of this data describe this data?"
+                                                        }
+                                                        content={
+                                                            <div className="article-block__text">
+                                                                <SimpleMarkdownText
+                                                                    text={
+                                                                        datapageDataFromVar.descriptionFromProducer
+                                                                    }
+                                                                />
+                                                            </div>
+                                                        }
+                                                        isStacked={
+                                                            !!datapageDataFromVar
+                                                                .source
+                                                                ?.additionalInfo
+                                                        }
+                                                    />
+                                                )}
+                                                {datapageDataFromVar.source
+                                                    ?.additionalInfo && (
+                                                    <ExpandableToggle
+                                                        label="Additional information about this data"
+                                                        content={
+                                                            <div className="expandable-info-blocks__content">
+                                                                <HtmlOrSimpleMarkdownText
+                                                                    text={datapageDataFromVar.source?.additionalInfo.trim()}
+                                                                />
+                                                            </div>
+                                                        }
+                                                    />
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="key-info__right span-cols-4 span-lg-cols-5 span-sm-cols-12">
+                                        <KeyDataTable
+                                            datapageData={datapageDataFromVar}
+                                            attribution={attributionUnshortened}
+                                        />
+                                    </div>
+                                </>
+                            ) : (
+                                <>
+                                    <h2
+                                        className="about-this-data__title span-cols-3 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
+                                    >
+                                        About this data
+                                    </h2>
+                                    <div className="col-start-4 span-cols-10 col-lg-start-5 span-lg-cols-8 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                        <KeyDataTable
+                                            datapageData={datapageDataFromVar}
+                                            attribution={attributionUnshortened}
+                                        />
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className="col-start-2 span-cols-12">
+                {relatedResearch && relatedResearch.length > 0 && (
+                    <div className="section-wrapper grid">
+                        <h2
+                            className="related-research__title span-cols-3 span-lg-cols-12"
+                            id="research-and-writing"
+                        >
+                            Related research and writing
+                        </h2>
+                        <div className="related-research__items grid grid-cols-9 grid-lg-cols-12 span-cols-9 span-lg-cols-12">
+                            {relatedResearch.map((research) => (
+                                <a
+                                    href={research.url}
+                                    key={research.url}
+                                    className="related-research__item grid grid-cols-4 grid-lg-cols-6 grid-sm-cols-12 span-cols-4 span-lg-cols-6 span-sm-cols-12"
+                                >
+                                    <DatapageResearchThumbnail
+                                        urlOrFilename={research.imageUrl}
+                                    />
+                                    <div className="span-cols-3 span-lg-cols-4 span-sm-cols-9">
+                                        <h3 className="related-article__title">
+                                            {research.title}
+                                        </h3>
+                                        <div className="related-article__authors body-3-medium-italic">
+                                            {research.authors &&
+                                                research.authors.length &&
+                                                formatAuthors({
+                                                    authors: research.authors,
+                                                })}
+                                        </div>
+                                    </div>
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {!!datapageDataFromVar?.relatedData?.length && (
+                    <div className="section-wrapper grid">
+                        <h2
+                            className="related-data__title span-cols-3 span-lg-cols-12"
+                            id="related-data"
+                        >
+                            Related data
+                        </h2>
+                        <div
+                            className={cx(
+                                "related-data__items",
+                                {
+                                    "related-data__items--two-cols":
+                                        hasRelatedDataFeatured &&
+                                        hasRelatedDataNonFeatured,
+                                },
+                                "grid",
+                                "grid-cols-9",
+                                "grid-lg-cols-12",
+                                "span-cols-9",
+                                "span-lg-cols-12"
+                            )}
+                        >
+                            {hasRelatedDataFeatured && (
+                                <div className={relatedDataCategoryClasses}>
+                                    {datapageDataFromVar.relatedData
+                                        .filter((data) => data.featured)
+                                        .map((data) => (
+                                            <a
+                                                href={data.url}
+                                                key={data.url}
+                                                className="related-data-item related-data-item--medium col-start-1 col-end-limit"
+                                            >
+                                                {data.type && (
+                                                    <div className="related-data-item__type">
+                                                        {data.type}
+                                                    </div>
+                                                )}
+                                                <h3 className="related-data-item__title">
+                                                    {data.title}
+                                                </h3>
+                                                {data.source && (
+                                                    <div className="related-data-item__source">
+                                                        {data.source}
+                                                    </div>
+                                                )}
+                                                <div className="related-data-item__content">
+                                                    {data.content}
+                                                </div>
+                                            </a>
+                                        ))}
+                                </div>
+                            )}
+                            {hasRelatedDataNonFeatured && (
+                                <div className={relatedDataCategoryClasses}>
+                                    {datapageDataFromVar.relatedData
+                                        .filter((data) => !data.featured)
+                                        .map((data) => (
+                                            <a
+                                                href={data.url}
+                                                key={data.url}
+                                                className="related-data-item related-data-item--small col-start-1 col-end-limit"
+                                            >
+                                                <h4 className="related-data-item__title">
+                                                    {data.title}
+                                                </h4>
+                                                {data.source && (
+                                                    <div className="related-data-item__source">
+                                                        {data.source}
+                                                    </div>
+                                                )}
+                                            </a>
+                                        ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+                {datapageDataFromVar?.allCharts &&
+                datapageDataFromVar?.allCharts.length > 0 ? (
+                    <div className="section-wrapper section-wrapper__related-charts">
+                        <h2 className="related-charts__title" id="all-charts">
+                            Explore charts that include this data
+                        </h2>
+                        <div>
+                            <RelatedCharts
+                                charts={datapageDataFromVar.allCharts}
+                            />
+                        </div>
+                    </div>
+                ) : null}
+            </div>
+            <div className="bg-gray-10 span-cols-14 grid grid-cols-12-full-width">
+                <div className="col-start-2 span-cols-12">
+                    {!!faqEntries?.faqs.length && (
+                        <div className="section-wrapper section-wrapper__faqs grid">
+                            <h2
+                                className="faqs__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                                id="faqs"
+                            >
+                                Frequently Asked Questions
+                            </h2>
+                            <div className="faqs__items grid grid-cols-10 grid-lg-cols-9 grid-md-cols-12 span-cols-10 span-lg-cols-9 span-md-cols-12 span-sm-cols-12">
+                                <ArticleBlocks
+                                    blocks={faqEntries.faqs}
+                                    containerType="datapage"
+                                />
+                            </div>
+                        </div>
+                    )}
+                    <div className="section-wrapper grid">
+                        <h2
+                            className="data-sources-processing__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                            id={DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}
+                        >
+                            Sources and processing
+                        </h2>
+                        <div className="data-sources grid span-cols-12">
+                            <h3 className="data-sources__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                This data is based on the following sources
+                            </h3>
+                            <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                <IndicatorSources sources={sourcesForDisplay} />
+                            </div>
+                        </div>
+                        <div className="data-processing grid span-cols-12">
+                            <h3 className="data-processing__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                How we process data at Our World in Data
+                            </h3>
+                            <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                <IndicatorProcessing
+                                    descriptionProcessing={
+                                        datapageDataFromVar?.descriptionProcessing
+                                    }
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="section-wrapper grid">
+                        <h2
+                            className="reuse__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                            id="reuse-this-work"
+                        >
+                            Reuse this work
+                        </h2>
+                        <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                            <ul className="reuse__content">
+                                <li className="reuse__list-item">
+                                    All data produced by third-party providers
+                                    and made available by Our World in Data are
+                                    subject to the license terms from the
+                                    original providers. Our work would not be
+                                    possible without the data providers we rely
+                                    on, so we ask you to always cite them
+                                    appropriately (see below). This is crucial
+                                    to allow data providers to continue doing
+                                    their work, enhancing, maintaining and
+                                    updating valuable data.
+                                </li>
+                                <li className="reuse__list-item">
+                                    All data, visualizations, and code produced
+                                    by Our World in Data are completely open
+                                    access under the{" "}
+                                    <a
+                                        href="https://creativecommons.org/licenses/by/4.0/"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="reuse__link"
+                                    >
+                                        Creative Commons BY license
+                                    </a>
+                                    . You have the permission to use,
+                                    distribute, and reproduce these in any
+                                    medium, provided the source and authors are
+                                    credited.
+                                </li>
+                            </ul>
+                        </div>
+
+                        {(citationShort ||
+                            citationLong ||
+                            citationDatapage) && (
+                            <div className="citations grid span-cols-12">
+                                <h3 className="citations__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                    Citations
+                                </h3>
+                                <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                    {citationDatapage && (
+                                        <div className="citations-section">
+                                            <h5 className="citation__how-to-header">
+                                                How to cite this page
+                                            </h5>
+                                            <p className="citation__paragraph">
+                                                To cite this page overall,
+                                                including any descriptions, FAQs
+                                                or explanations of the data
+                                                authored by Our World in Data,
+                                                please use the following
+                                                citation:
+                                            </p>
+                                            <CodeSnippet
+                                                code={citationDatapage}
+                                                theme="light"
+                                                useMarkdown={true}
+                                            />
+                                        </div>
+                                    )}
+                                    <div className="citations-section">
+                                        <h5 className="citation__how-to-header citation__how-to-header--data">
+                                            How to cite this data
+                                        </h5>
+                                        {(citationShort || citationLong) && (
+                                            <DataCitation
+                                                citationLong={citationLong}
+                                                citationShort={citationShort}
+                                            />
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+/*
+export const MultiDimDataPageContent = ({
+    datapageData,
+    grapherConfig,
+    isPreviewing = false,
+    faqEntries,
+    canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
+    tagToSlugMap,
+    imageMetadata,
+}: DataPageV2ContentFields & {
+    grapherConfig: GrapherInterface
+    imageMetadata: Record<string, ImageMetadata>
+}) => {
+    const [grapher, setGrapher] = React.useState<Grapher | undefined>(undefined)
+
+    const titleFragments = joinTitleFragments(
+        datapageData.attributionShort,
+        datapageData.titleVariant
+    )
+
+    // Initialize the grapher for client-side rendering
+    const mergedGrapherConfig: GrapherProgrammaticInterface = useMemo(
+        () => ({
+            ...grapherConfig,
+            isEmbeddedInADataPage: true,
+            bindUrlToWindow: true,
+        }),
+        [grapherConfig]
+    )
+
+    useEffect(() => {
+        setGrapher(new Grapher(mergedGrapherConfig))
+    }, [mergedGrapherConfig])
+
+    const stickyNavLinks = [
+        {
+            text: "Explore the Data",
+            target: "#explore-the-data",
+        },
+        {
+            text: "Research & Writing",
+            target: "#research-and-writing",
+        },
+        { text: "Related Data", target: "#related-data" },
+        { text: "All Charts", target: "#all-charts" },
+        { text: "FAQs", target: "#faqs" },
+        {
+            text: "Sources & Processing",
+            target: "#" + DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
+        },
+        { text: "Reuse This Work", target: "#" + REUSE_THIS_WORK_SECTION_ID },
+    ]
+
+    const hasRelatedDataFeatured = datapageData.relatedData?.some(
+        (data) => data.featured
+    )
+    const hasRelatedDataNonFeatured = datapageData.relatedData?.some(
+        (data) => !data.featured
+    )
+    const relatedDataCategoryClasses = `related-data__category ${
+        hasRelatedDataFeatured && hasRelatedDataNonFeatured
+            ? "related-data__category--grid span-cols-4 span-lg-cols-6 span-sm-cols-3"
+            : "related-data__category--columns span-cols-8 span-lg-cols-12"
+    } `
+
+    const hasDescriptionKey =
+        datapageData.descriptionKey && datapageData.descriptionKey.length > 0
+
+    const sourcesForDisplay = prepareSourcesForDisplay(datapageData)
+    const getYearSuffixFromOrigin = (o: OwidOrigin) => {
+        const year = o.dateAccessed
+            ? dayjs(o.dateAccessed, ["YYYY-MM-DD", "YYYY"]).year()
+            : o.datePublished
+              ? dayjs(o.datePublished, ["YYYY-MM-DD", "YYYY"]).year()
+              : undefined
+        if (year) return ` (${year})`
+        else return ""
+    }
+    const producers = uniq(datapageData.origins.map((o) => `${o.producer}`))
+    const producersWithYear = uniq(
+        datapageData.origins.map(
+            (o) => `${o.producer}${getYearSuffixFromOrigin(o)}`
+        )
+    )
+
+    const attributionFragments = datapageData.attributions ?? producersWithYear
+    const attributionUnshortened = attributionFragments.join("; ")
+    const citationShort = getCitationShort(
+        datapageData.origins,
+        datapageData.attributions,
+        datapageData.owidProcessingLevel
+    )
+    const currentYear = dayjs().year()
+    const citationLong = getCitationLong(
+        datapageData.title,
+        datapageData.origins,
+        datapageData.source,
+        datapageData.attributions,
+        datapageData.attributionShort,
+        datapageData.titleVariant,
+        datapageData.owidProcessingLevel,
+        canonicalUrl
+    )
+
+    const adaptedFrom =
+        producers.length > 0 ? producers.join(", ") : datapageData.source?.name
+
+    const maybeAddPeriod = (s: string) =>
+        s.endsWith("?") || s.endsWith(".") ? s : `${s}.`
+
+    // For the citation of the data page add a period it doesn't have that or a question mark
+    const primaryTopicCitation = maybeAddPeriod(
+        datapageData.primaryTopic?.citation ?? ""
+    )
+
+    const citationDatapage = excludeUndefined([
+        datapageData.primaryTopic
+            ? `“Data Page: ${datapageData.title.title}”, part of the following publication: ${primaryTopicCitation}`
+            : `“Data Page: ${datapageData.title.title}”. Our World in Data (${currentYear}).`,
+        adaptedFrom ? `Data adapted from ${adaptedFrom}.` : undefined,
+        `Retrieved from ${canonicalUrl} [online resource]`,
+    ]).join(" ")
+
+    const relatedResearchCandidates = datapageData.relatedResearch
+    const relatedResearch =
+        relatedResearchCandidates.length > 3 &&
+        datapageData.topicTagsLinks?.length
+            ? relatedResearchCandidates.filter((research) => {
+                  const shared = intersection(
+                      research.tags,
+                      datapageData.topicTagsLinks ?? []
+                  )
+                  return shared.length > 0
+              })
+            : relatedResearchCandidates
+    for (const item of relatedResearch) {
+        // TODO: these are workarounds to not link to the (not really existing) template pages for energy or co2
+        // country profiles but instead to the topic page at the country selector.
+        if (item.url === "/co2-country-profile")
+            item.url =
+                "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles"
+        else if (item.url === "/energy-country-profile")
+            item.url = "/energy#country-profiles"
+        else if (item.url === "/coronavirus-country-profile")
+            item.url = "/coronavirus#coronavirus-country-profiles"
+    }
+    // TODO: mark topic pages
+
+    const topicTags = datapageData.topicTagsLinks
+        ?.map((name) => ({ name, slug: tagToSlugMap[name] }))
+        .filter((tag): tag is { name: string; slug: string } => !!tag.slug)
+        .map((tag) => (
+            <a href={`/${tag.slug}`} key={tag.slug}>
+                {tag.name}
+            </a>
+        ))
+
+    return (
+        <AttachmentsContext.Provider
+            value={{
+                linkedDocuments: {},
+                imageMetadata,
+                linkedCharts: {},
+                linkedIndicators: {},
+                relatedCharts: [],
+            }}
+        >
+            <DocumentContext.Provider value={{ isPreviewing }}>
+                <div className="DataPageContent__grapher-for-embed">
+                    <GrapherWithFallback
+                        grapher={grapher}
+                        slug={grapherConfig.slug}
+                    />
+                </div>
+                <div className="DataPageContent">
+                    <div className="bg-blue-10">
+                        <div className="header__wrapper wrapper grid grid-cols-12 ">
+                            <div className="header__left span-cols-8 span-sm-cols-12">
+                                <div className="header__supertitle">Data</div>
+                                <h1 className="header__title">
+                                    {datapageData.title.title}
+                                </h1>
+                                <div className="header__source">
+                                    {titleFragments}
+                                </div>
+                            </div>
+                            {!!datapageData.topicTagsLinks?.length && (
+                                <div className="header__right col-start-9 span-cols-4 span-sm-cols-12">
+                                    <div className="topic-tags__label">
+                                        See all data and research on:
+                                    </div>
+                                    <div className="topic-tags">
+                                        {topicTags}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <nav className="sticky-nav sticky-nav--dark">
+                        <StickyNav links={stickyNavLinks} className="wrapper" />
+                    </nav>
+                    <div className="chart-key-info">
+                        <GrapherWithFallback
+                            grapher={grapher}
+                            slug={grapherConfig.slug} // TODO: On grapher pages,
+                            // there will always be a slug, but if we just show a data page preview for an indicator in the admin, there will be no slug
+                            // and then thumbnails will be broken for those. When we consider baking data pages for
+                            // non-grapher pages then we need to make sure that there are thunbnails that are generated for the these non-chart graphers and
+                            // then this piece will have to change anyhow and know how to provide the thumbnail.
+                            className="wrapper"
+                            id="explore-the-data"
+                        />
+                        <div className="wrapper wrapper-about-this-data grid grid-cols-12">
+                            {hasDescriptionKey ||
+                            datapageData.descriptionFromProducer ||
+                            datapageData.source?.additionalInfo ? (
+                                <>
+                                    <h2
+                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
+                                        className="key-info__title span-cols-12"
+                                    >
+                                        What you should know about this
+                                        indicator
+                                    </h2>
+                                    <div className="col-start-1 span-cols-8 span-lg-cols-7 span-sm-cols-12">
+                                        <div className="key-info__content">
+                                            {hasDescriptionKey && (
+                                                <div className="key-info__key-description">
+                                                    {datapageData.descriptionKey
+                                                        .length === 1 ? (
+                                                        <SimpleMarkdownText
+                                                            text={datapageData.descriptionKey[0].trim()}
+                                                        />
+                                                    ) : (
+                                                        <ul>
+                                                            {datapageData.descriptionKey.map(
+                                                                (text, i) => (
+                                                                    <li key={i}>
+                                                                        <SimpleMarkdownText
+                                                                            text={text.trim()}
+                                                                            useParagraphs={
+                                                                                false
+                                                                            }
+                                                                        />
+                                                                    </li>
+                                                                )
+                                                            )}
+                                                        </ul>
+                                                    )}
+                                                    {!!faqEntries?.faqs
+                                                        .length && (
+                                                        <a
+                                                            className="key-info__learn-more"
+                                                            href="#faqs"
+                                                        >
+                                                            Learn more in the
+                                                            FAQs
+                                                            <FontAwesomeIcon
+                                                                icon={
+                                                                    faArrowDown
+                                                                }
+                                                            />
+                                                        </a>
+                                                    )}
+                                                </div>
+                                            )}
+
+                                            <div className="key-info__expandable-descriptions">
+                                                {datapageData.descriptionFromProducer && (
+                                                    <ExpandableToggle
+                                                        label={
+                                                            datapageData.attributionShort
+                                                                ? `How does the producer of this data - ${datapageData.attributionShort} - describe this data?`
+                                                                : "How does the producer of this data describe this data?"
+                                                        }
+                                                        content={
+                                                            <div className="article-block__text">
+                                                                <SimpleMarkdownText
+                                                                    text={
+                                                                        datapageData.descriptionFromProducer
+                                                                    }
+                                                                />
+                                                            </div>
+                                                        }
+                                                        isStacked={
+                                                            !!datapageData
+                                                                .source
+                                                                ?.additionalInfo
+                                                        }
+                                                    />
+                                                )}
+                                                {datapageData.source
+                                                    ?.additionalInfo && (
+                                                    <ExpandableToggle
+                                                        label="Additional information about this data"
+                                                        content={
+                                                            <div className="expandable-info-blocks__content">
+                                                                <HtmlOrSimpleMarkdownText
+                                                                    text={datapageData.source?.additionalInfo.trim()}
+                                                                />
+                                                            </div>
+                                                        }
+                                                    />
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="key-info__right span-cols-4 span-lg-cols-5 span-sm-cols-12">
+                                        <KeyDataTable
+                                            datapageData={datapageData}
+                                            attribution={attributionUnshortened}
+                                        />
+                                    </div>
+                                </>
+                            ) : (
+                                <>
+                                    <h2
+                                        className="about-this-data__title span-cols-3 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
+                                    >
+                                        About this data
+                                    </h2>
+                                    <div className="col-start-4 span-cols-10 col-lg-start-5 span-lg-cols-8 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                        <KeyDataTable
+                                            datapageData={datapageData}
+                                            attribution={attributionUnshortened}
+                                        />
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                    <div className="wrapper">
+                        {relatedResearch && relatedResearch.length > 0 && (
+                            <div className="section-wrapper grid">
+                                <h2
+                                    className="related-research__title span-cols-3 span-lg-cols-12"
+                                    id="research-and-writing"
+                                >
+                                    Related research and writing
+                                </h2>
+                                <div className="related-research__items grid grid-cols-9 grid-lg-cols-12 span-cols-9 span-lg-cols-12">
+                                    {relatedResearch.map((research) => (
+                                        <a
+                                            href={research.url}
+                                            key={research.url}
+                                            className="related-research__item grid grid-cols-4 grid-lg-cols-6 grid-sm-cols-12 span-cols-4 span-lg-cols-6 span-sm-cols-12"
+                                        >
+                                            <DatapageResearchThumbnail
+                                                urlOrFilename={
+                                                    research.imageUrl
+                                                }
+                                            />
+                                            <div className="span-cols-3 span-lg-cols-4 span-sm-cols-9">
+                                                <h3 className="related-article__title">
+                                                    {research.title}
+                                                </h3>
+                                                <div className="related-article__authors body-3-medium-italic">
+                                                    {research.authors &&
+                                                        research.authors
+                                                            .length &&
+                                                        formatAuthors({
+                                                            authors:
+                                                                research.authors,
+                                                        })}
+                                                </div>
+                                            </div>
+                                        </a>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                        {!!datapageData.relatedData?.length && (
+                            <div className="section-wrapper grid">
+                                <h2
+                                    className="related-data__title span-cols-3 span-lg-cols-12"
+                                    id="related-data"
+                                >
+                                    Related data
+                                </h2>
+                                <div
+                                    className={cx(
+                                        "related-data__items",
+                                        {
+                                            "related-data__items--two-cols":
+                                                hasRelatedDataFeatured &&
+                                                hasRelatedDataNonFeatured,
+                                        },
+                                        "grid",
+                                        "grid-cols-9",
+                                        "grid-lg-cols-12",
+                                        "span-cols-9",
+                                        "span-lg-cols-12"
+                                    )}
+                                >
+                                    {hasRelatedDataFeatured && (
+                                        <div
+                                            className={
+                                                relatedDataCategoryClasses
+                                            }
+                                        >
+                                            {datapageData.relatedData
+                                                .filter((data) => data.featured)
+                                                .map((data) => (
+                                                    <a
+                                                        href={data.url}
+                                                        key={data.url}
+                                                        className="related-data-item related-data-item--medium col-start-1 col-end-limit"
+                                                    >
+                                                        {data.type && (
+                                                            <div className="related-data-item__type">
+                                                                {data.type}
+                                                            </div>
+                                                        )}
+                                                        <h3 className="related-data-item__title">
+                                                            {data.title}
+                                                        </h3>
+                                                        {data.source && (
+                                                            <div className="related-data-item__source">
+                                                                {data.source}
+                                                            </div>
+                                                        )}
+                                                        <div className="related-data-item__content">
+                                                            {data.content}
+                                                        </div>
+                                                    </a>
+                                                ))}
+                                        </div>
+                                    )}
+                                    {hasRelatedDataNonFeatured && (
+                                        <div
+                                            className={
+                                                relatedDataCategoryClasses
+                                            }
+                                        >
+                                            {datapageData.relatedData
+                                                .filter(
+                                                    (data) => !data.featured
+                                                )
+                                                .map((data) => (
+                                                    <a
+                                                        href={data.url}
+                                                        key={data.url}
+                                                        className="related-data-item related-data-item--small col-start-1 col-end-limit"
+                                                    >
+                                                        <h4 className="related-data-item__title">
+                                                            {data.title}
+                                                        </h4>
+                                                        {data.source && (
+                                                            <div className="related-data-item__source">
+                                                                {data.source}
+                                                            </div>
+                                                        )}
+                                                    </a>
+                                                ))}
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                        {datapageData.allCharts &&
+                        datapageData.allCharts.length > 0 ? (
+                            <div className="section-wrapper section-wrapper__related-charts">
+                                <h2
+                                    className="related-charts__title"
+                                    id="all-charts"
+                                >
+                                    Explore charts that include this data
+                                </h2>
+                                <div>
+                                    <RelatedCharts
+                                        charts={datapageData.allCharts}
+                                    />
+                                </div>
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className="bg-gray-10">
+                        <div className="wrapper">
+                            {!!faqEntries?.faqs.length && (
+                                <div className="section-wrapper section-wrapper__faqs grid">
+                                    <h2
+                                        className="faqs__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                                        id="faqs"
+                                    >
+                                        Frequently Asked Questions
+                                    </h2>
+                                    <div className="faqs__items grid grid-cols-10 grid-lg-cols-9 grid-md-cols-12 span-cols-10 span-lg-cols-9 span-md-cols-12 span-sm-cols-12">
+                                        <ArticleBlocks
+                                            blocks={faqEntries.faqs}
+                                            containerType="datapage"
+                                        />
+                                    </div>
+                                </div>
+                            )}
+                            <div className="section-wrapper grid">
+                                <h2
+                                    className="data-sources-processing__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                                    id={
+                                        DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID
+                                    }
+                                >
+                                    Sources and processing
+                                </h2>
+                                <div className="data-sources grid span-cols-12">
+                                    <h3 className="data-sources__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                        This data is based on the following
+                                        sources
+                                    </h3>
+                                    <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                        <IndicatorSources
+                                            sources={sourcesForDisplay}
+                                        />
+                                    </div>
+                                </div>
+                                <div className="data-processing grid span-cols-12">
+                                    <h3 className="data-processing__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                        How we process data at Our World in Data
+                                    </h3>
+                                    <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                        <IndicatorProcessing
+                                            descriptionProcessing={
+                                                datapageData.descriptionProcessing
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="section-wrapper grid">
+                                <h2
+                                    className="reuse__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
+                                    id="reuse-this-work"
+                                >
+                                    Reuse this work
+                                </h2>
+                                <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                    <ul className="reuse__content">
+                                        <li className="reuse__list-item">
+                                            All data produced by third-party
+                                            providers and made available by Our
+                                            World in Data are subject to the
+                                            license terms from the original
+                                            providers. Our work would not be
+                                            possible without the data providers
+                                            we rely on, so we ask you to always
+                                            cite them appropriately (see below).
+                                            This is crucial to allow data
+                                            providers to continue doing their
+                                            work, enhancing, maintaining and
+                                            updating valuable data.
+                                        </li>
+                                        <li className="reuse__list-item">
+                                            All data, visualizations, and code
+                                            produced by Our World in Data are
+                                            completely open access under the{" "}
+                                            <a
+                                                href="https://creativecommons.org/licenses/by/4.0/"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="reuse__link"
+                                            >
+                                                Creative Commons BY license
+                                            </a>
+                                            . You have the permission to use,
+                                            distribute, and reproduce these in
+                                            any medium, provided the source and
+                                            authors are credited.
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                {(citationShort ||
+                                    citationLong ||
+                                    citationDatapage) && (
+                                    <div className="citations grid span-cols-12">
+                                        <h3 className="citations__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                            Citations
+                                        </h3>
+                                        <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                                            {citationDatapage && (
+                                                <div className="citations-section">
+                                                    <h5 className="citation__how-to-header">
+                                                        How to cite this page
+                                                    </h5>
+                                                    <p className="citation__paragraph">
+                                                        To cite this page
+                                                        overall, including any
+                                                        descriptions, FAQs or
+                                                        explanations of the data
+                                                        authored by Our World in
+                                                        Data, please use the
+                                                        following citation:
+                                                    </p>
+                                                    <CodeSnippet
+                                                        code={citationDatapage}
+                                                        theme="light"
+                                                        useMarkdown={true}
+                                                    />
+                                                </div>
+                                            )}
+                                            <div className="citations-section">
+                                                <h5 className="citation__how-to-header citation__how-to-header--data">
+                                                    How to cite this data
+                                                </h5>
+                                                {(citationShort ||
+                                                    citationLong) && (
+                                                    <DataCitation
+                                                        citationLong={
+                                                            citationLong
+                                                        }
+                                                        citationShort={
+                                                            citationShort
+                                                        }
+                                                    />
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </DocumentContext.Provider>
+        </AttachmentsContext.Provider>
+    )
+}
+*/
+
+export const hydrateMultiDimDataPageContent = (isPreviewing?: boolean) => {
+    const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
+    const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS
+    const grapherConfig = window._OWID_GRAPHER_CONFIG
+
+    ReactDOM.hydrate(
+        <DebugProvider debug={isPreviewing}>
+            <MultiDimDataPageContent
+                {...props}
+                grapherConfig={grapherConfig}
+                isPreviewing={isPreviewing}
+            />
+        </DebugProvider>,
+        wrapper
+    )
+}
+
+const KeyDataTable = (props: {
+    datapageData: DataPageDataV2
+    attribution: string
+}) => {
+    const { datapageData } = props
+    const source = makeSource({
+        attribution: props.attribution,
+        owidProcessingLevel: datapageData.owidProcessingLevel,
+    })
+    const lastUpdated = makeLastUpdated(datapageData)
+    const nextUpdate = makeNextUpdate(datapageData)
+    const dateRange = makeDateRange(datapageData)
+    const unit = makeUnit(datapageData)
+    const unitConversionFactor = makeUnitConversionFactor(datapageData)
+    const links = makeLinks({ link: datapageData.source?.link })
+
+    return (
+        <div className="key-data-block grid grid-cols-4 grid-sm-cols-12">
+            {datapageData.descriptionShort && (
+                <div className="key-data span-cols-4 span-sm-cols-12">
+                    <div className="key-data__title key-data-description-short__title">
+                        {datapageData.title.title}
+                        {(datapageData.attributionShort ||
+                            datapageData.titleVariant) && (
+                            <>
+                                {" "}
+                                <span className="title-fragments">
+                                    {joinTitleFragments(
+                                        datapageData.attributionShort,
+                                        datapageData.titleVariant
+                                    )}
+                                </span>
+                            </>
+                        )}
+                    </div>
+                    <div>
+                        <SimpleMarkdownText
+                            text={datapageData.descriptionShort}
+                            useParagraphs={false}
+                        />
+                    </div>
+                </div>
+            )}
+            {source && (
+                <div className="key-data span-cols-4 span-sm-cols-12">
+                    <div className="key-data__title">Source</div>
+                    <div>{source}</div>
+                </div>
+            )}
+            {lastUpdated && (
+                <div className="key-data span-cols-2 span-sm-cols-6">
+                    <div className="key-data__title">Last updated</div>
+                    <div>{lastUpdated}</div>
+                </div>
+            )}
+            {nextUpdate && (
+                <div className="key-data span-cols-2 span-sm-cols-6">
+                    <div className="key-data__title">Next expected update</div>
+                    <div>{nextUpdate}</div>
+                </div>
+            )}
+            {dateRange && (
+                <div className="key-data span-cols-2 span-sm-cols-6">
+                    <div className="key-data__title">Date range</div>
+                    <div>{dateRange}</div>
+                </div>
+            )}
+            {unit && (
+                <div className="key-data span-cols-2 span-sm-cols-6">
+                    <div className="key-data__title">Unit</div>
+                    <div>{unit}</div>
+                </div>
+            )}
+            {unitConversionFactor && (
+                <div className="key-data span-cols-2 span-sm-cols-6">
+                    <div className="key-data__title">
+                        Unit conversion factor
+                    </div>
+                    <div>{unitConversionFactor}</div>
+                </div>
+            )}
+            {links && (
+                <div className="key-data span-cols-2 span-sm-cols-6">
+                    <div className="key-data__title">Links</div>
+                    <div className="key-data__content--hide-overflow">
+                        {links}
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/site/multi-dim/MultiDimDataPageTypes.ts b/site/multi-dim/MultiDimDataPageTypes.ts
new file mode 100644
index 00000000000..b61da9c3b4c
--- /dev/null
+++ b/site/multi-dim/MultiDimDataPageTypes.ts
@@ -0,0 +1,43 @@
+import { DimensionProperty } from "@ourworldindata/types"
+
+export interface MultiDimDataPageConfigType {
+    name: string
+    dimensions_title: string
+    common_indicator_path_prefix?: string
+    dimensions: Dimension[]
+    views: View[]
+}
+
+export interface Dimension {
+    slug: string
+    name: string
+    group?: string
+    description?: string
+    multi_select?: boolean
+    choices: Dimension[]
+}
+
+export interface DimensionEnriched extends Dimension {
+    choicesBySlug: Record<string, Choice>
+    choicesByGroup: Record<string, Choice[]>
+}
+
+export interface Choice {
+    slug: string
+    name: string
+    description?: string
+    multi_select?: boolean
+}
+
+export interface View {
+    dimensions: Record<string, string> // Keys: dimension slugs, values: choice slugs
+    indicator_path:
+        | Record<string, DimensionProperty>
+        | Array<Record<string, DimensionProperty>> // Keys: indicator path, values: dimension (e.g. x, y, color, size)
+    config?: Config
+}
+
+export interface Config {
+    title?: string
+    subtitle?: string
+}
diff --git a/site/multi-dim/config.json b/site/multi-dim/config.json
new file mode 100644
index 00000000000..0d1bab40e77
--- /dev/null
+++ b/site/multi-dim/config.json
@@ -0,0 +1,75 @@
+{
+    "name": "CO₂ emissions",
+    "dimensions_title": "by fuel type and sector",
+    "common_indicator_path_prefix": "gcp/2024/co2_and_ghg_emissions/",
+    "dimensions": [
+        {
+            "slug": "fuel_type",
+            "name": "Fuel type",
+            "description": "The fuel where these emissions stem from.",
+            "multi_select": true,
+            "choices": [
+                {
+                    "slug": "gas",
+                    "name": "Natural gas",
+                    "description": "Natural gas, e.g. methane or propane."
+                },
+                {
+                    "slug": "cement",
+                    "name": "Cement",
+                    "description": "Emissions from the drying-out of cement."
+                },
+                {
+                    "slug": "all",
+                    "name": "All",
+                    "description": "Emissions from all fuel types.",
+                    "multi_select": false
+                }
+            ]
+        },
+        {
+            "slug": "sector",
+            "name": "Sector",
+            "description": "The sector where these emissions stem from.",
+            "choices": [
+                {
+                    "slug": "agriculture",
+                    "name": "Agriculture",
+                    "description": "Agricultural emissions, e.g. from land use change and emissions from livestock and harvesting."
+                },
+                {
+                    "slug": "transport",
+                    "name": "Transportation",
+                    "description": "Emissions from global transport, including cars, trucks, rail transport and global shipping."
+                },
+                {
+                    "slug": "industry",
+                    "name": "Industry",
+                    "description": "Emissions from the production of non-agricultural goods, e.g. steel and glass."
+                },
+                { "slug": "heating" },
+                { "slug": "electricity" }
+            ]
+        }
+    ],
+    "views": [
+        {
+            "dimensions": { "fuel_type": "gas", "sector": "transport" },
+            "indicator_path": { "emissions__gas__transport": "y" },
+            "config": { "title": "Natural gas emissions in transport" }
+        },
+        {
+            "dimensions": { "fuel_type": "oil", "sector": "transport" },
+            "indicator_path": { "emissions__oil__transport": "y" },
+            "config": {
+                "title": "Oil emissions in transport",
+                "subtitle": "..."
+            }
+        },
+        {
+            "dimensions": { "fuel_type": "solar", "sector": "electricity" },
+            "indicator_path": { "emissions__solar__transport": "y" },
+            "config": { "title": "...", "subtitle": "..." }
+        }
+    ]
+}
diff --git a/site/multi-dim/config.yml b/site/multi-dim/config.yml
new file mode 100644
index 00000000000..c24c3262c4f
--- /dev/null
+++ b/site/multi-dim/config.yml
@@ -0,0 +1,58 @@
+name: CO₂ emissions
+dimensions_title: by fuel type and sector
+common_indicator_path_prefix: gcp/2024/co2_and_ghg_emissions/ # optional
+dimensions:
+    - slug: fuel_type
+      name: Fuel type
+      description: The fuel where these emissions stem from. # optional
+      multi_select: true # optional
+      choices:
+          - slug: gas
+            name: Natural gas
+            description: Natural gas, e.g. methane or propane.
+          - slug: cement
+            name: Cement
+            description: Emissions from the drying-out of cement.
+          - slug: all
+            name: All
+            description: Emissions from all fuel types.
+            multi_select: false
+    - slug: sector
+      name: Sector
+      description: The sector where these emissions stem from.
+      choices:
+          - slug: agriculture
+            name: Agriculture
+            description: Agricultural emissions, e.g. from land use change and emissions from livestock and harvesting.
+          - slug: transport
+            name: Transportation
+            description: Emissions from global transport, including cars, trucks, rail transport and global shipping.
+          - slug: industry
+            name: Industry
+            description: Emissions from the production of non-agricultural goods, e.g. steel and glass.
+          - slug: heating
+          - slug: electricity
+views:
+    - dimensions:
+          fuel_type: gas
+          sector: transport
+      indicator_path:
+          emissions__gas__transport: y
+      config:
+          title: Natural gas emissions in transport
+    - dimensions:
+          fuel_type: oil
+          sector: transport
+      indicator_path:
+          emissions__oil__transport: y
+      config:
+          title: Oil emissions in transport
+          subtitle: ...
+    - dimensions: # This dimension uses other fields; they probably are nicer to work with
+          fuel_type: solar
+          sector: electricity
+      indicator_path:
+          emissions__solar__transport: y
+      config:
+          title: ...
+          subtitle: ...
diff --git a/site/owid.scss b/site/owid.scss
index 60e20655e74..5d8824782c6 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -105,6 +105,7 @@
 @import "./DataInsightsNewsletterBanner.scss";
 @import "./DataPage.scss";
 @import "./DataPageContent.scss";
+@import "./multi-dim/MultiDimDataPageContent.scss";
 @import "./GrapherImage.scss";
 @import "./KeyDataTable.scss";
 @import "./MetadataSection.scss";
diff --git a/site/runSiteFooterScripts.ts b/site/runSiteFooterScripts.ts
index 71f10438dc4..9d27052c59c 100644
--- a/site/runSiteFooterScripts.ts
+++ b/site/runSiteFooterScripts.ts
@@ -20,6 +20,7 @@ import {
     hydrateDataInsightsIndexPage,
 } from "./DataInsightsIndexPageContent.js"
 import { runAllGraphersLoadedListener } from "./runAllGraphersLoadedListener.js"
+import { hydrateMultiDimDataPageContent } from "./multi-dim/MultiDimDataPageContent.js"
 
 export const runSiteFooterScripts = (
     args:
@@ -47,6 +48,15 @@ export const runSiteFooterScripts = (
             runCookiePreferencesManager()
             void runDetailsOnDemand()
             break
+        case SiteFooterContext.multiDimDataPage:
+            hydrateMultiDimDataPageContent(isPreviewing)
+            runAllGraphersLoadedListener()
+            runLightbox()
+            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
+            runSiteTools()
+            runCookiePreferencesManager()
+            void runDetailsOnDemand()
+            break
         case SiteFooterContext.grapherPage:
         case SiteFooterContext.explorerPage:
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
diff --git a/site/tsconfig.json b/site/tsconfig.json
index 27009fd1be3..cd938e00818 100644
--- a/site/tsconfig.json
+++ b/site/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "extends": "../devTools/tsconfigs/tsconfig.base.json",
+    "include": ["**/*.ts", "**/*.json", "**/*.tsx"],
     "compilerOptions": {
         "outDir": "../itsJustJavascript/site",
         "rootDir": "."

From 096f8a3c8364aab398587431b68f785a43e6adcb Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 22 Jul 2024 11:40:50 +0100
Subject: [PATCH 02/65] feat(multi-dim): Multi-dim data page config

---
 site/multi-dim/MultiDimDataPageConfig.ts | 80 +++++++++++++++++-------
 site/multi-dim/MultiDimDataPageTypes.ts  |  7 ++-
 2 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/site/multi-dim/MultiDimDataPageConfig.ts b/site/multi-dim/MultiDimDataPageConfig.ts
index e5a5bbf3b07..5f1f7bafddd 100644
--- a/site/multi-dim/MultiDimDataPageConfig.ts
+++ b/site/multi-dim/MultiDimDataPageConfig.ts
@@ -1,6 +1,8 @@
 import YAML from "yaml"
 import {
-    Dimension,
+    Choice,
+    ChoicesEnriched,
+    DimensionEnriched,
     MultiDimDataPageConfigType,
     View,
 } from "./MultiDimDataPageTypes.js"
@@ -9,15 +11,21 @@ import { DimensionProperty, groupBy, keyBy } from "@ourworldindata/utils"
 export class MultiDimDataPageConfig {
     private constructor(public readonly config: MultiDimDataPageConfigType) {}
 
-    static fromYaml(yaml: string) {
-        return new MultiDimDataPageConfig(YAML.parse(yaml))
+    static fromYaml(yamlString: string) {
+        return new MultiDimDataPageConfig(YAML.parse(yamlString))
+    }
+
+    static fromJson(jsonString: string) {
+        return new MultiDimDataPageConfig(JSON.parse(jsonString))
     }
 
     static fromObject(obj: MultiDimDataPageConfigType) {
         return new MultiDimDataPageConfig(obj)
     }
 
-    static getChoicesFields(choices: Dimension[]) {
+    private static getEnrichedChoicesFields(
+        choices: Choice[]
+    ): ChoicesEnriched {
         return {
             choices,
             choicesBySlug: keyBy(choices, "slug"),
@@ -25,10 +33,12 @@ export class MultiDimDataPageConfig {
         }
     }
 
-    get dimensions() {
+    get dimensions(): Record<string, DimensionEnriched> {
         const dimensionsEnriched = this.config.dimensions.map((dimension) => ({
             ...dimension,
-            ...MultiDimDataPageConfig.getChoicesFields(dimension.choices),
+            ...MultiDimDataPageConfig.getEnrichedChoicesFields(
+                dimension.choices
+            ),
         }))
         return keyBy(dimensionsEnriched, "slug")
     }
@@ -44,6 +54,8 @@ export class MultiDimDataPageConfig {
         })
     }
 
+    // This'll only ever find one or zero views, and will throw an error
+    // if more than one matching views were found
     findViewByDimensions(dimensions: Record<string, string>) {
         const matchingViews = this.filterViewsByDimensions(dimensions)
         if (matchingViews.length === 0) return undefined
@@ -57,23 +69,42 @@ export class MultiDimDataPageConfig {
         return matchingViews[0]
     }
 
+    /**
+     * This checks if matching views are available for the selected choices, and otherwise
+     * adapts them in such a way that they are available, in the following way:
+     * - Go through the choices left-to-right. The current dimension we're looking at is called `cur`.
+     * - If there is at least one available view for choices[leftmost, ..., cur], continue.
+     * - Otherwise, for dimension `cur`, find the first choice that has at least one available view.
+     *
+     * `selectedChoices` is expected to be fully-qualified, i.e. it should contain a choice for every available dimension.
+     *
+     * The method returns two values:
+     * - `selectedChoices` is the updated version of the input `selectedChoices`, where choices have been adapted to make sure there are available views.
+     * - `dimensionsWithAvailableChoices` indicates for each dimension which choices are available, and excludes the ones that are excluded by choices left of it.
+     *
+     * - @marcelgerber, 2024-07-22
+     */
     filterToAvailableChoices(selectedChoices: Record<string, string>) {
         const updatedSelectedChoices: Record<string, string> = {}
-        const dimensionsWithAvailableChoices = this.dimensions
-        for (const [dimSlug, dim] of Object.entries(
-            dimensionsWithAvailableChoices
+        const dimensionsWithAvailableChoices: Record<
+            string,
+            DimensionEnriched
+        > = {}
+        for (const [currentDimSlug, currentDim] of Object.entries(
+            this.dimensions
         )) {
             const availableViewsBeforeSelection = this.filterViewsByDimensions(
                 updatedSelectedChoices
             )
             if (
-                selectedChoices[dimSlug] &&
-                dim.choicesBySlug[selectedChoices[dimSlug]]
+                selectedChoices[currentDimSlug] &&
+                currentDim.choicesBySlug[selectedChoices[currentDimSlug]]
             ) {
-                updatedSelectedChoices[dimSlug] = selectedChoices[dimSlug]
+                updatedSelectedChoices[currentDimSlug] =
+                    selectedChoices[currentDimSlug]
             } else {
                 throw new Error(
-                    `Missing or invalid choice for dimension ${dimSlug}`
+                    `Missing or invalid choice for dimension ${currentDimSlug}`
                 )
             }
 
@@ -81,19 +112,26 @@ export class MultiDimDataPageConfig {
                 updatedSelectedChoices
             )
             if (availableViewsAfterSelection.length === 0) {
-                updatedSelectedChoices[dimSlug] =
-                    availableViewsBeforeSelection[0].dimensions[dimSlug]
+                // If there are no views available after this selection, choose the first available view before this choice and update to its choice
+                updatedSelectedChoices[currentDimSlug] =
+                    availableViewsBeforeSelection[0].dimensions[currentDimSlug]
             }
 
-            const choices = Object.values(dim.choices).filter((choice) =>
+            // Find all the available choices we can show for this dimension - these are all
+            // the ones that are possible for this dimension with all of the previous choices
+            // (i.e., left of this dimension) in mind.
+            const availableChoicesForDimension = Object.values(
+                currentDim.choices
+            ).filter((choice) =>
                 availableViewsBeforeSelection.some(
-                    (view) => view.dimensions[dimSlug] === choice.slug
+                    (view) => view.dimensions[currentDimSlug] === choice.slug
                 )
             )
-
-            dimensionsWithAvailableChoices[dimSlug] = {
-                ...dim,
-                ...MultiDimDataPageConfig.getChoicesFields(choices),
+            dimensionsWithAvailableChoices[currentDimSlug] = {
+                ...currentDim,
+                ...MultiDimDataPageConfig.getEnrichedChoicesFields(
+                    availableChoicesForDimension
+                ),
             }
         }
 
diff --git a/site/multi-dim/MultiDimDataPageTypes.ts b/site/multi-dim/MultiDimDataPageTypes.ts
index b61da9c3b4c..d68f4ff3e3a 100644
--- a/site/multi-dim/MultiDimDataPageTypes.ts
+++ b/site/multi-dim/MultiDimDataPageTypes.ts
@@ -14,14 +14,17 @@ export interface Dimension {
     group?: string
     description?: string
     multi_select?: boolean
-    choices: Dimension[]
+    choices: Choice[]
 }
 
-export interface DimensionEnriched extends Dimension {
+export interface ChoicesEnriched {
+    choices: Choice[]
     choicesBySlug: Record<string, Choice>
     choicesByGroup: Record<string, Choice[]>
 }
 
+export type DimensionEnriched = Dimension & ChoicesEnriched
+
 export interface Choice {
     slug: string
     name: string

From 05a199a5572d2e4433acc3c84594cb0aea9f3c45 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 22 Jul 2024 15:19:39 +0100
Subject: [PATCH 03/65] chore: rename folder

---
 adminSiteServer/adminRouter.tsx                             | 2 +-
 baker/siteRenderers.tsx                                     | 4 ++--
 site/{multi-dim => multiDim}/MultiDimDataPage.tsx           | 0
 site/{multi-dim => multiDim}/MultiDimDataPageConfig.test.ts | 0
 site/{multi-dim => multiDim}/MultiDimDataPageConfig.ts      | 0
 site/{multi-dim => multiDim}/MultiDimDataPageContent.scss   | 0
 site/{multi-dim => multiDim}/MultiDimDataPageContent.tsx    | 0
 site/{multi-dim => multiDim}/MultiDimDataPageTypes.ts       | 0
 site/{multi-dim => multiDim}/config.json                    | 0
 site/{multi-dim => multiDim}/config.yml                     | 0
 site/owid.scss                                              | 2 +-
 site/runSiteFooterScripts.ts                                | 2 +-
 12 files changed, 5 insertions(+), 5 deletions(-)
 rename site/{multi-dim => multiDim}/MultiDimDataPage.tsx (100%)
 rename site/{multi-dim => multiDim}/MultiDimDataPageConfig.test.ts (100%)
 rename site/{multi-dim => multiDim}/MultiDimDataPageConfig.ts (100%)
 rename site/{multi-dim => multiDim}/MultiDimDataPageContent.scss (100%)
 rename site/{multi-dim => multiDim}/MultiDimDataPageContent.tsx (100%)
 rename site/{multi-dim => multiDim}/MultiDimDataPageTypes.ts (100%)
 rename site/{multi-dim => multiDim}/config.json (100%)
 rename site/{multi-dim => multiDim}/config.yml (100%)

diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
index da8d45ba57f..3ed06ff80ed 100644
--- a/adminSiteServer/adminRouter.tsx
+++ b/adminSiteServer/adminRouter.tsx
@@ -50,7 +50,7 @@ import {
     getPlainRouteNonIdempotentWithRWTransaction,
     getPlainRouteWithROTransaction,
 } from "./plainRouterHelpers.js"
-import { MultiDimDataPageConfig } from "../site/multi-dim/MultiDimDataPageConfig.js"
+import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 
 // Used for rate-limiting important endpoints (login, register) to prevent brute force attacks
 const limiterMiddleware = (
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index 97eb0cc380a..87343fa37f4 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -7,7 +7,7 @@ import { SearchPage } from "../site/search/SearchPage.js"
 import { NotFoundPage } from "../site/NotFoundPage.js"
 import { DonatePage } from "../site/DonatePage.js"
 import { ThankYouPage } from "../site/ThankYouPage.js"
-import { MultiDimDataPage } from "../site/multi-dim/MultiDimDataPage.js"
+import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
 import OwidGdocPage from "../site/gdocs/OwidGdocPage.js"
 import React from "react"
 import ReactDOMServer from "react-dom/server.js"
@@ -91,7 +91,7 @@ import { transformExplorerProgramToResolveCatalogPaths } from "./ExplorerBaker.j
 import { AttachmentsContext } from "../site/gdocs/OwidGdoc.js"
 import AtomArticleBlocks from "../site/gdocs/components/AtomArticleBlocks.js"
 import { GdocDataInsight } from "../db/model/Gdoc/GdocDataInsight.js"
-import { MultiDimDataPageConfig } from "../site/multi-dim/MultiDimDataPageConfig.js"
+import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 
 export const renderToHtmlPage = (element: any) =>
     `<!doctype html>${ReactDOMServer.renderToStaticMarkup(element)}`
diff --git a/site/multi-dim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
similarity index 100%
rename from site/multi-dim/MultiDimDataPage.tsx
rename to site/multiDim/MultiDimDataPage.tsx
diff --git a/site/multi-dim/MultiDimDataPageConfig.test.ts b/site/multiDim/MultiDimDataPageConfig.test.ts
similarity index 100%
rename from site/multi-dim/MultiDimDataPageConfig.test.ts
rename to site/multiDim/MultiDimDataPageConfig.test.ts
diff --git a/site/multi-dim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
similarity index 100%
rename from site/multi-dim/MultiDimDataPageConfig.ts
rename to site/multiDim/MultiDimDataPageConfig.ts
diff --git a/site/multi-dim/MultiDimDataPageContent.scss b/site/multiDim/MultiDimDataPageContent.scss
similarity index 100%
rename from site/multi-dim/MultiDimDataPageContent.scss
rename to site/multiDim/MultiDimDataPageContent.scss
diff --git a/site/multi-dim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
similarity index 100%
rename from site/multi-dim/MultiDimDataPageContent.tsx
rename to site/multiDim/MultiDimDataPageContent.tsx
diff --git a/site/multi-dim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
similarity index 100%
rename from site/multi-dim/MultiDimDataPageTypes.ts
rename to site/multiDim/MultiDimDataPageTypes.ts
diff --git a/site/multi-dim/config.json b/site/multiDim/config.json
similarity index 100%
rename from site/multi-dim/config.json
rename to site/multiDim/config.json
diff --git a/site/multi-dim/config.yml b/site/multiDim/config.yml
similarity index 100%
rename from site/multi-dim/config.yml
rename to site/multiDim/config.yml
diff --git a/site/owid.scss b/site/owid.scss
index 5d8824782c6..14f720f30f6 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -105,7 +105,7 @@
 @import "./DataInsightsNewsletterBanner.scss";
 @import "./DataPage.scss";
 @import "./DataPageContent.scss";
-@import "./multi-dim/MultiDimDataPageContent.scss";
+@import "./multiDim/MultiDimDataPageContent.scss";
 @import "./GrapherImage.scss";
 @import "./KeyDataTable.scss";
 @import "./MetadataSection.scss";
diff --git a/site/runSiteFooterScripts.ts b/site/runSiteFooterScripts.ts
index 9d27052c59c..92b108407bc 100644
--- a/site/runSiteFooterScripts.ts
+++ b/site/runSiteFooterScripts.ts
@@ -20,7 +20,7 @@ import {
     hydrateDataInsightsIndexPage,
 } from "./DataInsightsIndexPageContent.js"
 import { runAllGraphersLoadedListener } from "./runAllGraphersLoadedListener.js"
-import { hydrateMultiDimDataPageContent } from "./multi-dim/MultiDimDataPageContent.js"
+import { hydrateMultiDimDataPageContent } from "./multiDim/MultiDimDataPageContent.js"
 
 export const runSiteFooterScripts = (
     args:

From 1791d00243df6c4e9b93112210752dd64ce3db88 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 22 Jul 2024 17:02:41 +0100
Subject: [PATCH 04/65] enhance(multi-dim): fetch data on the server side

---
 adminSiteServer/adminRouter.tsx           | 20 ++++++++++----------
 site/multiDim/MultiDimDataPageContent.tsx | 20 +++-----------------
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
index 3ed06ff80ed..4545881bd83 100644
--- a/adminSiteServer/adminRouter.tsx
+++ b/adminSiteServer/adminRouter.tsx
@@ -361,16 +361,16 @@ getPlainRouteNonIdempotentWithRWTransaction(
     adminRouter,
     "/multi-dim",
     async (req, res, trx) => {
-        // const reqUrl = new URL(req.url, `http://localhost/`)
-        // const fetchUrl = reqUrl.searchParams.get("url")
-        // if (!fetchUrl) return new JsonError("No URL provided", 400)
-        // const configRaw = await fetch(fetchUrl).catch(() => null)
-        // if (!configRaw) return new JsonError("Failed to fetch config", 500)
-        // const config = await configRaw
-        //     .text()
-        //     .then(MultiDimDataPageConfig.fromYaml)
-
-        const page = await renderMultiDimDataPage({} as any)
+        const reqUrl = new URL(req.url, `http://localhost/`)
+        const fetchUrl = reqUrl.searchParams.get("url")
+        if (!fetchUrl) return new JsonError("No URL provided", 400)
+        const configRaw = await fetch(fetchUrl).catch(() => null)
+        if (!configRaw) return new JsonError("Failed to fetch config", 500)
+        const config = await configRaw
+            .text()
+            .then(MultiDimDataPageConfig.fromYaml)
+
+        const page = await renderMultiDimDataPage(config)
         res.send(page)
         return
     }
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 70eec553144..08c008b8d17 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -373,24 +373,10 @@ export const MultiDimDataPageContent = ({
     grapherConfig: GrapherInterface
     imageMetadata: Record<string, ImageMetadata>
 }) => {
-    const [config, setConfig] = useState<MultiDimDataPageConfig | undefined>(
-        undefined
+    const config = useMemo(
+        () => MultiDimDataPageConfig.fromObject(window._OWID_MULTI_DIM_CONFIG),
+        []
     )
-    useEffect(() => {
-        const params = getWindowQueryParams()
-        const fetchUrl = params["url"]
-        if (!fetchUrl) throw new Error("No fetch url provided")
-
-        fetch(fetchUrl)
-            .then((res) => res.text())
-            .then(MultiDimDataPageConfig.fromYaml)
-            .then(setConfig)
-            .catch(console.error)
-    }, [])
-    // const config = useMemo(
-    //     () => MultiDimDataPageConfig.fromObject(window._OWID_MULTI_DIM_CONFIG),
-    //     []
-    // )
 
     const datapageDataStub: Partial<DataPageDataV2> = {
         title: {

From 06b8835efa7b251d92612d5a9e33aa1200d1baf8 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 23 Jul 2024 14:10:46 +0100
Subject: [PATCH 05/65] enhance(multi-dim): use new react components

---
 site/multiDim/MultiDimDataPageContent.tsx | 395 ++--------------------
 site/multiDim/MultiDimUrl.ts              |  26 ++
 2 files changed, 62 insertions(+), 359 deletions(-)
 create mode 100644 site/multiDim/MultiDimUrl.ts

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 08c008b8d17..70811100c19 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faArrowDown, faCaretDown } from "@fortawesome/free-solid-svg-icons"
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import {
     Grapher,
     GrapherManager,
@@ -9,14 +9,7 @@ import {
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
 import {
-    CodeSnippet,
-    REUSE_THIS_WORK_SECTION_ID,
-    IndicatorSources,
-    DATAPAGE_ABOUT_THIS_DATA_SECTION_ID,
-    DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
-    IndicatorProcessing,
     SimpleMarkdownText,
-    ExpandableToggle,
     makeSource,
     makeDateRange,
     makeLastUpdated,
@@ -24,25 +17,16 @@ import {
     makeUnit,
     makeUnitConversionFactor,
     makeLinks,
-    HtmlOrSimpleMarkdownText,
-    DataCitation,
 } from "@ourworldindata/components"
 import ReactDOM from "react-dom"
 import { GrapherWithFallback } from "../GrapherWithFallback.js"
-import { ArticleBlocks } from "../gdocs/components/ArticleBlocks.js"
 import { RelatedCharts } from "../blocks/RelatedCharts.js"
 import {
     DataPageV2ContentFields,
-    uniq,
     formatAuthors,
     intersection,
-    prepareSourcesForDisplay,
-    excludeUndefined,
-    OwidOrigin,
     DataPageDataV2,
-    getCitationShort,
     GrapherInterface,
-    getCitationLong,
     joinTitleFragments,
     ImageMetadata,
     DimensionProperty,
@@ -51,30 +35,23 @@ import {
     getNextUpdateFromVariable,
     omitUndefinedValues,
     getAttributionFragmentsFromVariable,
-    OwidVariableDataMetadataDimensions,
     OwidVariableWithSourceAndDimension,
     memoize,
-    Url,
-    getWindowQueryParams,
     isEqual,
     GrapherTabOption,
 } from "@ourworldindata/utils"
-import { AttachmentsContext, DocumentContext } from "../gdocs/OwidGdoc.js"
-import StickyNav from "../blocks/StickyNav.js"
 import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
-import dayjs from "dayjs"
 import { BAKED_BASE_URL, DATA_API_URL } from "../../settings/clientSettings.js"
 import Image from "../gdocs/components/Image.js"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import Select, { OptionProps, components } from "react-select"
 import {
-    Choice,
-    Dimension,
     DimensionEnriched,
     MultiDimDataPageConfigType,
 } from "./MultiDimDataPageTypes.js"
-import { action, autorun, reaction } from "mobx"
+import AboutThisData from "../AboutThisData.js"
+import TopicTags from "../TopicTags.js"
+import MetadataSection from "../MetadataSection.js"
 declare global {
     interface Window {
         _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigType
@@ -426,14 +403,9 @@ export const MultiDimDataPageContent = ({
         datapageDataFromVar?.titleVariant
     )
 
-    const topicTags = datapageDataFromVar?.topicTagsLinks
-        ?.map((name) => ({ name, slug: tagToSlugMap?.[name] }))
-        .filter((tag): tag is { name: string; slug: string } => !!tag.slug)
-        .map((tag) => (
-            <a href={`/${tag.slug}`} key={tag.slug}>
-                {tag.name}
-            </a>
-        ))
+    const topicTagsLinks = datapageDataFromVar?.topicTagsLinks?.filter(
+        (tag) => tagToSlugMap?.[tag]
+    )
 
     const selectionArray = useMemo(
         () =>
@@ -474,66 +446,6 @@ export const MultiDimDataPageContent = ({
         return grapher
     }, [grapherConfigComputed])
 
-    const hasDescriptionKey = !!datapageDataFromVar?.descriptionKey?.length
-
-    const attributionFragments = datapageDataFromVar?.attributions ?? []
-    const attributionUnshortened = attributionFragments.join("; ")
-    const citationShort = getCitationShort(
-        datapageDataFromVar?.origins ?? [],
-        datapageDataFromVar?.attributions ?? [],
-        datapageDataFromVar?.owidProcessingLevel
-    )
-    const currentYear = dayjs().year()
-    const citationLong = getCitationLong(
-        datapageDataFromVar?.title ?? { title: "" },
-        datapageDataFromVar?.origins ?? [],
-        datapageDataFromVar?.source,
-        datapageDataFromVar?.attributions ?? [],
-        datapageDataFromVar?.attributionShort,
-        datapageDataFromVar?.titleVariant,
-        datapageDataFromVar?.owidProcessingLevel,
-        canonicalUrl
-    )
-
-    const getYearSuffixFromOrigin = (o: OwidOrigin) => {
-        const year = o.dateAccessed
-            ? dayjs(o.dateAccessed, ["YYYY-MM-DD", "YYYY"]).year()
-            : o.datePublished
-              ? dayjs(o.datePublished, ["YYYY-MM-DD", "YYYY"]).year()
-              : undefined
-        if (year) return ` (${year})`
-        else return ""
-    }
-    const producers = uniq(
-        datapageDataFromVar?.origins?.map((o) => `${o.producer}`)
-    )
-    const producersWithYear = uniq(
-        datapageDataFromVar?.origins?.map(
-            (o) => `${o.producer}${getYearSuffixFromOrigin(o)}`
-        )
-    )
-
-    const adaptedFrom =
-        producers.length > 0
-            ? producers.join(", ")
-            : datapageDataFromVar?.source?.name
-
-    const maybeAddPeriod = (s: string) =>
-        s.endsWith("?") || s.endsWith(".") ? s : `${s}.`
-
-    // For the citation of the data page add a period it doesn't have that or a question mark
-    const primaryTopicCitation = maybeAddPeriod(
-        datapageDataFromVar?.primaryTopic?.citation ?? ""
-    )
-
-    const citationDatapage = excludeUndefined([
-        datapageDataFromVar?.primaryTopic
-            ? `“Data Page: ${datapageDataFromVar?.title?.title}”, part of the following publication: ${primaryTopicCitation}`
-            : `“Data Page: ${datapageDataFromVar?.title?.title}”. Our World in Data (${currentYear}).`,
-        adaptedFrom ? `Data adapted from ${adaptedFrom}.` : undefined,
-        `Retrieved from ${canonicalUrl} [online resource]`,
-    ]).join(" ")
-
     const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
     const relatedResearch =
         relatedResearchCandidates.length > 3 &&
@@ -570,11 +482,6 @@ export const MultiDimDataPageContent = ({
             : "related-data__category--columns span-cols-8 span-lg-cols-12"
     } `
 
-    const sourcesForDisplay =
-        datapageDataFromVar !== null
-            ? prepareSourcesForDisplay(datapageDataFromVar)
-            : []
-
     return (
         <div className="DataPageContent MultiDimDataPageContent">
             <div className="bg-blue-10">
@@ -586,13 +493,12 @@ export const MultiDimDataPageContent = ({
                         </h1>
                         <div className="header__source">{titleFragments}</div>
                     </div>
-                    {!!datapageDataFromVar?.topicTagsLinks?.length && (
-                        <div className="header__right col-start-9 span-cols-4 span-sm-cols-12">
-                            <div className="topic-tags__label">
-                                See all data and research on:
-                            </div>
-                            <div className="topic-tags">{topicTags}</div>
-                        </div>
+                    {!!topicTagsLinks && (
+                        <TopicTags
+                            className="header__right col-start-10 span-cols-4 col-sm-start-2 span-sm-cols-12"
+                            topicTagsLinks={topicTagsLinks}
+                            tagToSlugMap={tagToSlugMap}
+                        />
                     )}
                 </div>
             </div>
@@ -615,126 +521,10 @@ export const MultiDimDataPageContent = ({
                         id="explore-the-data"
                     />
                     {datapageDataFromVar && (
-                        <div className="wrapper-about-this-data grid grid-cols-12">
-                            {hasDescriptionKey ||
-                            datapageDataFromVar.descriptionFromProducer ||
-                            datapageDataFromVar.source?.additionalInfo ? (
-                                <>
-                                    <h2
-                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
-                                        className="key-info__title span-cols-12"
-                                    >
-                                        What you should know about this
-                                        indicator
-                                    </h2>
-                                    <div className="col-start-1 span-cols-8 span-lg-cols-7 span-sm-cols-12">
-                                        <div className="key-info__content">
-                                            {hasDescriptionKey && (
-                                                <div className="key-info__key-description">
-                                                    {datapageDataFromVar
-                                                        .descriptionKey
-                                                        .length === 1 ? (
-                                                        <SimpleMarkdownText
-                                                            text={datapageDataFromVar.descriptionKey[0].trim()}
-                                                        />
-                                                    ) : (
-                                                        <ul>
-                                                            {datapageDataFromVar.descriptionKey.map(
-                                                                (text, i) => (
-                                                                    <li key={i}>
-                                                                        <SimpleMarkdownText
-                                                                            text={text.trim()}
-                                                                            useParagraphs={
-                                                                                false
-                                                                            }
-                                                                        />
-                                                                    </li>
-                                                                )
-                                                            )}
-                                                        </ul>
-                                                    )}
-                                                    {!!faqEntries?.faqs
-                                                        .length && (
-                                                        <a
-                                                            className="key-info__learn-more"
-                                                            href="#faqs"
-                                                        >
-                                                            Learn more in the
-                                                            FAQs
-                                                            <FontAwesomeIcon
-                                                                icon={
-                                                                    faArrowDown
-                                                                }
-                                                            />
-                                                        </a>
-                                                    )}
-                                                </div>
-                                            )}
-
-                                            <div className="key-info__expandable-descriptions">
-                                                {datapageDataFromVar.descriptionFromProducer && (
-                                                    <ExpandableToggle
-                                                        label={
-                                                            datapageDataFromVar.attributionShort
-                                                                ? `How does the producer of this data - ${datapageDataFromVar.attributionShort} - describe this data?`
-                                                                : "How does the producer of this data describe this data?"
-                                                        }
-                                                        content={
-                                                            <div className="article-block__text">
-                                                                <SimpleMarkdownText
-                                                                    text={
-                                                                        datapageDataFromVar.descriptionFromProducer
-                                                                    }
-                                                                />
-                                                            </div>
-                                                        }
-                                                        isStacked={
-                                                            !!datapageDataFromVar
-                                                                .source
-                                                                ?.additionalInfo
-                                                        }
-                                                    />
-                                                )}
-                                                {datapageDataFromVar.source
-                                                    ?.additionalInfo && (
-                                                    <ExpandableToggle
-                                                        label="Additional information about this data"
-                                                        content={
-                                                            <div className="expandable-info-blocks__content">
-                                                                <HtmlOrSimpleMarkdownText
-                                                                    text={datapageDataFromVar.source?.additionalInfo.trim()}
-                                                                />
-                                                            </div>
-                                                        }
-                                                    />
-                                                )}
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="key-info__right span-cols-4 span-lg-cols-5 span-sm-cols-12">
-                                        <KeyDataTable
-                                            datapageData={datapageDataFromVar}
-                                            attribution={attributionUnshortened}
-                                        />
-                                    </div>
-                                </>
-                            ) : (
-                                <>
-                                    <h2
-                                        className="about-this-data__title span-cols-3 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
-                                    >
-                                        About this data
-                                    </h2>
-                                    <div className="col-start-4 span-cols-10 col-lg-start-5 span-lg-cols-8 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                        <KeyDataTable
-                                            datapageData={datapageDataFromVar}
-                                            attribution={attributionUnshortened}
-                                        />
-                                    </div>
-                                </>
-                            )}
-                        </div>
+                        <AboutThisData
+                            datapageData={datapageDataFromVar}
+                            hasFaq={!!faqEntries?.faqs.length}
+                        />
                     )}
                 </div>
             </div>
@@ -866,138 +656,25 @@ export const MultiDimDataPageContent = ({
                     </div>
                 ) : null}
             </div>
-            <div className="bg-gray-10 span-cols-14 grid grid-cols-12-full-width">
-                <div className="col-start-2 span-cols-12">
-                    {!!faqEntries?.faqs.length && (
-                        <div className="section-wrapper section-wrapper__faqs grid">
-                            <h2
-                                className="faqs__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                                id="faqs"
-                            >
-                                Frequently Asked Questions
-                            </h2>
-                            <div className="faqs__items grid grid-cols-10 grid-lg-cols-9 grid-md-cols-12 span-cols-10 span-lg-cols-9 span-md-cols-12 span-sm-cols-12">
-                                <ArticleBlocks
-                                    blocks={faqEntries.faqs}
-                                    containerType="datapage"
-                                />
-                            </div>
-                        </div>
-                    )}
-                    <div className="section-wrapper grid">
-                        <h2
-                            className="data-sources-processing__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                            id={DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}
-                        >
-                            Sources and processing
-                        </h2>
-                        <div className="data-sources grid span-cols-12">
-                            <h3 className="data-sources__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                This data is based on the following sources
-                            </h3>
-                            <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                <IndicatorSources sources={sourcesForDisplay} />
-                            </div>
-                        </div>
-                        <div className="data-processing grid span-cols-12">
-                            <h3 className="data-processing__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                How we process data at Our World in Data
-                            </h3>
-                            <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                <IndicatorProcessing
-                                    descriptionProcessing={
-                                        datapageDataFromVar?.descriptionProcessing
-                                    }
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="section-wrapper grid">
-                        <h2
-                            className="reuse__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                            id="reuse-this-work"
-                        >
-                            Reuse this work
-                        </h2>
-                        <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                            <ul className="reuse__content">
-                                <li className="reuse__list-item">
-                                    All data produced by third-party providers
-                                    and made available by Our World in Data are
-                                    subject to the license terms from the
-                                    original providers. Our work would not be
-                                    possible without the data providers we rely
-                                    on, so we ask you to always cite them
-                                    appropriately (see below). This is crucial
-                                    to allow data providers to continue doing
-                                    their work, enhancing, maintaining and
-                                    updating valuable data.
-                                </li>
-                                <li className="reuse__list-item">
-                                    All data, visualizations, and code produced
-                                    by Our World in Data are completely open
-                                    access under the{" "}
-                                    <a
-                                        href="https://creativecommons.org/licenses/by/4.0/"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="reuse__link"
-                                    >
-                                        Creative Commons BY license
-                                    </a>
-                                    . You have the permission to use,
-                                    distribute, and reproduce these in any
-                                    medium, provided the source and authors are
-                                    credited.
-                                </li>
-                            </ul>
-                        </div>
-
-                        {(citationShort ||
-                            citationLong ||
-                            citationDatapage) && (
-                            <div className="citations grid span-cols-12">
-                                <h3 className="citations__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                    Citations
-                                </h3>
-                                <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                    {citationDatapage && (
-                                        <div className="citations-section">
-                                            <h5 className="citation__how-to-header">
-                                                How to cite this page
-                                            </h5>
-                                            <p className="citation__paragraph">
-                                                To cite this page overall,
-                                                including any descriptions, FAQs
-                                                or explanations of the data
-                                                authored by Our World in Data,
-                                                please use the following
-                                                citation:
-                                            </p>
-                                            <CodeSnippet
-                                                code={citationDatapage}
-                                                theme="light"
-                                                useMarkdown={true}
-                                            />
-                                        </div>
-                                    )}
-                                    <div className="citations-section">
-                                        <h5 className="citation__how-to-header citation__how-to-header--data">
-                                            How to cite this data
-                                        </h5>
-                                        {(citationShort || citationLong) && (
-                                            <DataCitation
-                                                citationLong={citationLong}
-                                                citationShort={citationShort}
-                                            />
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
+            {datapageDataFromVar && (
+                <MetadataSection
+                    attributionShort={datapageDataFromVar.attributionShort}
+                    attributions={datapageDataFromVar.attributions}
+                    canonicalUrl={canonicalUrl}
+                    descriptionProcessing={
+                        datapageDataFromVar.descriptionProcessing
+                    }
+                    faqEntries={faqEntries}
+                    origins={datapageDataFromVar.origins}
+                    owidProcessingLevel={
+                        datapageDataFromVar.owidProcessingLevel
+                    }
+                    primaryTopic={datapageDataFromVar.primaryTopic}
+                    source={datapageDataFromVar.source}
+                    title={datapageDataFromVar.title}
+                    titleVariant={datapageDataFromVar.titleVariant}
+                />
+            )}
         </div>
     )
 }
diff --git a/site/multiDim/MultiDimUrl.ts b/site/multiDim/MultiDimUrl.ts
new file mode 100644
index 00000000000..59a67549a26
--- /dev/null
+++ b/site/multiDim/MultiDimUrl.ts
@@ -0,0 +1,26 @@
+import { QueryParams } from "@ourworldindata/types"
+import { pick, Url } from "@ourworldindata/utils"
+import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
+
+export const toQueryStr = (
+    grapherQueryParams: QueryParams,
+    dimensionChoices: Record<string, string>
+) => {
+    return Url.fromQueryParams(grapherQueryParams).updateQueryParams(
+        dimensionChoices
+    ).queryStr
+}
+
+export const extractDimensionChoicesFromQueryStr = (
+    queryStr: string,
+    config: MultiDimDataPageConfig
+): Record<string, string> => {
+    const queryParams = Url.fromQueryStr(queryStr).queryParams
+    const dimensions = config.dimensions
+    const dimensionChoices = pick(
+        queryParams,
+        Object.keys(dimensions)
+    ) as Record<string, string>
+
+    return dimensionChoices
+}

From 81ae08832b368700ded05e7b354dfb00f986288d Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 23 Jul 2024 14:41:30 +0100
Subject: [PATCH 06/65] enhance(multi-dim): remove timeout

---
 site/multiDim/MultiDimDataPageContent.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 70811100c19..b985bbf87ae 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -386,7 +386,7 @@ export const MultiDimDataPageContent = ({
         useState<DataPageDataV2 | null>(null)
 
     useEffect(() => {
-        const timer = window.setTimeout(() => setDatapageDataFromVar(null), 1)
+        setDatapageDataFromVar(null)
         const variableId = dimensionsConfig[0]?.variableId
         if (!variableId) return
         const variableMetadata = cachedGetVariableMetadata(variableId)
@@ -394,7 +394,6 @@ export const MultiDimDataPageContent = ({
         variableMetadata
             .then((json) => getDatapageDataV2(json, grapherConfig))
             .then(setDatapageDataFromVar)
-            .then(() => window.clearTimeout(timer))
             .catch(console.error)
     }, [dimensionsConfig, grapherConfig])
 

From f2c87af2db04cbea14931ffe0533f901fb00f338 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 23 Jul 2024 16:09:22 +0100
Subject: [PATCH 07/65] wip(multi-dim): url serialization & deserialization
 works

---
 site/multiDim/MultiDimDataPageContent.tsx | 199 ++++++++--------------
 site/multiDim/MultiDimUrl.ts              |   2 +-
 2 files changed, 74 insertions(+), 127 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index b985bbf87ae..eaeee1444b6 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -8,16 +8,6 @@ import {
     SelectionArray,
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
-import {
-    SimpleMarkdownText,
-    makeSource,
-    makeDateRange,
-    makeLastUpdated,
-    makeNextUpdate,
-    makeUnit,
-    makeUnitConversionFactor,
-    makeLinks,
-} from "@ourworldindata/components"
 import ReactDOM from "react-dom"
 import { GrapherWithFallback } from "../GrapherWithFallback.js"
 import { RelatedCharts } from "../blocks/RelatedCharts.js"
@@ -39,6 +29,10 @@ import {
     memoize,
     isEqual,
     GrapherTabOption,
+    QueryParams,
+    setWindowQueryStr,
+    getWindowQueryParams,
+    getWindowQueryStr,
 } from "@ourworldindata/utils"
 import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
@@ -52,6 +46,11 @@ import {
 import AboutThisData from "../AboutThisData.js"
 import TopicTags from "../TopicTags.js"
 import MetadataSection from "../MetadataSection.js"
+import {
+    extractDimensionChoicesFromQueryStr,
+    stateToQueryStr,
+} from "./MultiDimUrl.js"
+import { reaction } from "mobx"
 declare global {
     interface Window {
         _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigType
@@ -218,6 +217,7 @@ const DimensionDropdown = (props: {
 
 const MultiDimSettingsPanel = (props: {
     config: MultiDimDataPageConfig
+    currentSettings: Record<string, string>
     onChange?: (
         slug: string,
         value: string,
@@ -225,41 +225,36 @@ const MultiDimSettingsPanel = (props: {
     ) => void
     updateSettings?: (currentSettings: Record<string, string>) => void
 }) => {
-    const { config } = props
+    const { config, currentSettings, updateSettings } = props
 
     const { dimensions } = config
 
-    const initialSettings = useMemo(
+    // Non-partial version of `currentSettings` with all dimensions filled in
+    const resolvedCurrentSettings = useMemo(
         () =>
             Object.fromEntries(
                 Object.values(dimensions).map((dimension) => [
                     dimension.slug,
-                    Object.values(dimension.choices)[0].slug,
+                    currentSettings[dimension.slug] ??
+                        Object.values(dimension.choices)[0].slug,
                 ])
             ),
-        [dimensions]
+        [currentSettings, dimensions]
     )
 
-    const [currentSettings, setCurrentSettings] = useState(initialSettings)
-
     const [availableSettings, setAvailableSettings] = useState<
         Record<string, DimensionEnriched>
     >({})
 
     useEffect(() => {
-        if (!config) return
         const { dimensionsWithAvailableChoices, selectedChoices } =
-            config.filterToAvailableChoices(currentSettings)
+            config.filterToAvailableChoices(resolvedCurrentSettings)
 
-        if (!isEqual(selectedChoices, currentSettings))
-            setCurrentSettings(selectedChoices)
-        setAvailableSettings(dimensionsWithAvailableChoices)
-    }, [currentSettings, config])
-
-    useEffect(
-        () => props.updateSettings?.(currentSettings),
-        [props, currentSettings]
-    )
+        if (!isEqual(selectedChoices, resolvedCurrentSettings))
+            updateSettings?.(selectedChoices)
+        if (!isEqual(dimensionsWithAvailableChoices, availableSettings))
+            setAvailableSettings(dimensionsWithAvailableChoices)
+    }, [resolvedCurrentSettings, config, updateSettings, availableSettings])
 
     const settings = Object.values(availableSettings).map((dim) => (
         <DimensionDropdown
@@ -267,7 +262,7 @@ const MultiDimSettingsPanel = (props: {
             dimension={dim}
             currentChoiceSlug={currentSettings[dim.slug]}
             onChange={(slug, value) =>
-                setCurrentSettings({ ...currentSettings, [slug]: value })
+                updateSettings?.({ ...currentSettings, [slug]: value })
             }
         />
     ))
@@ -340,19 +335,24 @@ const cachedGetVariableMetadata = memoize(
 
 export const MultiDimDataPageContent = ({
     // _datapageData,
+    config,
     grapherConfig,
     isPreviewing = false,
     faqEntries,
     canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
     tagToSlugMap,
     imageMetadata,
+    initialQueryStr,
 }: DataPageV2ContentFields & {
+    config: MultiDimDataPageConfig
     grapherConfig: GrapherInterface
     imageMetadata: Record<string, ImageMetadata>
+    initialQueryStr?: string
 }) => {
-    const config = useMemo(
-        () => MultiDimDataPageConfig.fromObject(window._OWID_MULTI_DIM_CONFIG),
-        []
+    const [initialChoices] = useState(() =>
+        initialQueryStr
+            ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
+            : {}
     )
 
     const datapageDataStub: Partial<DataPageDataV2> = {
@@ -363,7 +363,9 @@ export const MultiDimDataPageContent = ({
         titleVariant: config?.config.dimensions_title,
     }
 
-    const [currentSettings, setCurrentSettings] = useState({})
+    const [currentSettings, setCurrentSettings] = useState(initialChoices)
+
+    console.log("currentSettings", currentSettings, initialChoices)
 
     const currentView = useMemo(() => {
         if (Object.keys(currentSettings).length === 0) return undefined
@@ -429,6 +431,37 @@ export const MultiDimDataPageContent = ({
     // TODO we should probably fix that? seems sensible? change GrapherFigureView around a bit to use the actual grapher inst? or pass a GrapherProgrammaticInterface to it instead?
     const [grapherInst, setGrapherInst] = useState<Grapher | null>(null)
 
+    const [grapherChangedParams, setGrapherChangedParams] =
+        useState<QueryParams>({})
+
+    // De-mobx grapher.changedParams by transforming it into React state
+    useEffect(
+        () =>
+            grapherInst
+                ? reaction(
+                      () => grapherInst.changedParams,
+                      setGrapherChangedParams
+                  )
+                : undefined,
+        [grapherInst]
+    )
+
+    // TEMPORARY, only while we are using `url` as part of the query string
+    const urlQueryParam = getWindowQueryParams().url
+
+    const queryStr = useMemo(
+        () =>
+            stateToQueryStr(
+                { ...grapherChangedParams, url: urlQueryParam },
+                currentSettings
+            ),
+        [grapherChangedParams, currentSettings]
+    )
+
+    useEffect(() => {
+        setWindowQueryStr(queryStr)
+    }, [queryStr])
+
     const grapherConfigComputed = useMemo(() => {
         return {
             ...currentView?.config,
@@ -505,6 +538,7 @@ export const MultiDimDataPageContent = ({
                 {config && (
                     <MultiDimSettingsPanel
                         config={config}
+                        currentSettings={currentSettings}
                         updateSettings={setCurrentSettings}
                     />
                 )}
@@ -516,7 +550,7 @@ export const MultiDimDataPageContent = ({
                         key={JSON.stringify(grapherConfigComputed)}
                         grapher={grapher}
                         manager={grapherManager}
-                        getGrapherInstance={(g) => setGrapherInst}
+                        getGrapherInstance={setGrapherInst}
                         id="explore-the-data"
                     />
                     {datapageDataFromVar && (
@@ -1311,108 +1345,21 @@ export const hydrateMultiDimDataPageContent = (isPreviewing?: boolean) => {
     const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
     const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS
     const grapherConfig = window._OWID_GRAPHER_CONFIG
+    const initialQueryStr = getWindowQueryStr()
+    const config = MultiDimDataPageConfig.fromObject(
+        window._OWID_MULTI_DIM_CONFIG
+    )
 
     ReactDOM.hydrate(
         <DebugProvider debug={isPreviewing}>
             <MultiDimDataPageContent
                 {...props}
+                config={config}
                 grapherConfig={grapherConfig}
                 isPreviewing={isPreviewing}
+                initialQueryStr={initialQueryStr}
             />
         </DebugProvider>,
         wrapper
     )
 }
-
-const KeyDataTable = (props: {
-    datapageData: DataPageDataV2
-    attribution: string
-}) => {
-    const { datapageData } = props
-    const source = makeSource({
-        attribution: props.attribution,
-        owidProcessingLevel: datapageData.owidProcessingLevel,
-    })
-    const lastUpdated = makeLastUpdated(datapageData)
-    const nextUpdate = makeNextUpdate(datapageData)
-    const dateRange = makeDateRange(datapageData)
-    const unit = makeUnit(datapageData)
-    const unitConversionFactor = makeUnitConversionFactor(datapageData)
-    const links = makeLinks({ link: datapageData.source?.link })
-
-    return (
-        <div className="key-data-block grid grid-cols-4 grid-sm-cols-12">
-            {datapageData.descriptionShort && (
-                <div className="key-data span-cols-4 span-sm-cols-12">
-                    <div className="key-data__title key-data-description-short__title">
-                        {datapageData.title.title}
-                        {(datapageData.attributionShort ||
-                            datapageData.titleVariant) && (
-                            <>
-                                {" "}
-                                <span className="title-fragments">
-                                    {joinTitleFragments(
-                                        datapageData.attributionShort,
-                                        datapageData.titleVariant
-                                    )}
-                                </span>
-                            </>
-                        )}
-                    </div>
-                    <div>
-                        <SimpleMarkdownText
-                            text={datapageData.descriptionShort}
-                            useParagraphs={false}
-                        />
-                    </div>
-                </div>
-            )}
-            {source && (
-                <div className="key-data span-cols-4 span-sm-cols-12">
-                    <div className="key-data__title">Source</div>
-                    <div>{source}</div>
-                </div>
-            )}
-            {lastUpdated && (
-                <div className="key-data span-cols-2 span-sm-cols-6">
-                    <div className="key-data__title">Last updated</div>
-                    <div>{lastUpdated}</div>
-                </div>
-            )}
-            {nextUpdate && (
-                <div className="key-data span-cols-2 span-sm-cols-6">
-                    <div className="key-data__title">Next expected update</div>
-                    <div>{nextUpdate}</div>
-                </div>
-            )}
-            {dateRange && (
-                <div className="key-data span-cols-2 span-sm-cols-6">
-                    <div className="key-data__title">Date range</div>
-                    <div>{dateRange}</div>
-                </div>
-            )}
-            {unit && (
-                <div className="key-data span-cols-2 span-sm-cols-6">
-                    <div className="key-data__title">Unit</div>
-                    <div>{unit}</div>
-                </div>
-            )}
-            {unitConversionFactor && (
-                <div className="key-data span-cols-2 span-sm-cols-6">
-                    <div className="key-data__title">
-                        Unit conversion factor
-                    </div>
-                    <div>{unitConversionFactor}</div>
-                </div>
-            )}
-            {links && (
-                <div className="key-data span-cols-2 span-sm-cols-6">
-                    <div className="key-data__title">Links</div>
-                    <div className="key-data__content--hide-overflow">
-                        {links}
-                    </div>
-                </div>
-            )}
-        </div>
-    )
-}
diff --git a/site/multiDim/MultiDimUrl.ts b/site/multiDim/MultiDimUrl.ts
index 59a67549a26..efe598b094b 100644
--- a/site/multiDim/MultiDimUrl.ts
+++ b/site/multiDim/MultiDimUrl.ts
@@ -2,7 +2,7 @@ import { QueryParams } from "@ourworldindata/types"
 import { pick, Url } from "@ourworldindata/utils"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 
-export const toQueryStr = (
+export const stateToQueryStr = (
     grapherQueryParams: QueryParams,
     dimensionChoices: Record<string, string>
 ) => {

From 471f674e9323a60a20f3b59539489ac1b6a43cf9 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 11:25:09 +0100
Subject: [PATCH 08/65] fix: url serialization is not weird any more

---
 site/multiDim/MultiDimDataPageContent.tsx | 71 +++++++++++++----------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index eaeee1444b6..d2d3c8cba06 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -9,7 +9,6 @@ import {
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
 import ReactDOM from "react-dom"
-import { GrapherWithFallback } from "../GrapherWithFallback.js"
 import { RelatedCharts } from "../blocks/RelatedCharts.js"
 import {
     DataPageV2ContentFields,
@@ -33,6 +32,7 @@ import {
     setWindowQueryStr,
     getWindowQueryParams,
     getWindowQueryStr,
+    Bounds,
 } from "@ourworldindata/utils"
 import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
@@ -365,8 +365,6 @@ export const MultiDimDataPageContent = ({
 
     const [currentSettings, setCurrentSettings] = useState(initialChoices)
 
-    console.log("currentSettings", currentSettings, initialChoices)
-
     const currentView = useMemo(() => {
         if (Object.keys(currentSettings).length === 0) return undefined
         return config?.findViewByDimensions(currentSettings)
@@ -408,16 +406,7 @@ export const MultiDimDataPageContent = ({
         (tag) => tagToSlugMap?.[tag]
     )
 
-    const selectionArray = useMemo(
-        () =>
-            new SelectionArray([
-                "Spain",
-                "Zimbabwe",
-                "United Kingdom",
-                "World",
-            ]),
-        []
-    )
+    const selectionArray = useMemo(() => new SelectionArray(), [])
 
     const grapherManager = useMemo(
         (): GrapherManager => ({
@@ -431,8 +420,9 @@ export const MultiDimDataPageContent = ({
     // TODO we should probably fix that? seems sensible? change GrapherFigureView around a bit to use the actual grapher inst? or pass a GrapherProgrammaticInterface to it instead?
     const [grapherInst, setGrapherInst] = useState<Grapher | null>(null)
 
-    const [grapherChangedParams, setGrapherChangedParams] =
-        useState<QueryParams>({})
+    const [grapherChangedParams, setGrapherChangedParams] = useState<
+        QueryParams | undefined
+    >(undefined)
 
     // De-mobx grapher.changedParams by transforming it into React state
     useEffect(
@@ -440,7 +430,8 @@ export const MultiDimDataPageContent = ({
             grapherInst
                 ? reaction(
                       () => grapherInst.changedParams,
-                      setGrapherChangedParams
+                      setGrapherChangedParams,
+                      { fireImmediately: true }
                   )
                 : undefined,
         [grapherInst]
@@ -451,15 +442,22 @@ export const MultiDimDataPageContent = ({
 
     const queryStr = useMemo(
         () =>
-            stateToQueryStr(
-                { ...grapherChangedParams, url: urlQueryParam },
-                currentSettings
-            ),
-        [grapherChangedParams, currentSettings]
+            grapherChangedParams !== undefined
+                ? stateToQueryStr(
+                      { ...grapherChangedParams, url: urlQueryParam },
+                      currentSettings
+                  )
+                : initialQueryStr,
+        [
+            grapherChangedParams,
+            urlQueryParam, // TEMPORARY
+            currentSettings,
+            initialQueryStr,
+        ]
     )
 
     useEffect(() => {
-        setWindowQueryStr(queryStr)
+        setWindowQueryStr(queryStr ?? "")
     }, [queryStr])
 
     const grapherConfigComputed = useMemo(() => {
@@ -468,15 +466,18 @@ export const MultiDimDataPageContent = ({
             dimensions: dimensionsConfig,
             isEmbeddedInADataPage: true,
 
+            // TODO temp
+            bounds: new Bounds(0, 0, 1000, 600),
+
             // Keep the tab we last had
             tab: grapherInst?.tab ?? GrapherTabOption.chart,
         } as GrapherProgrammaticInterface
     }, [currentView, dimensionsConfig, grapherInst])
 
-    const grapher = useMemo(() => {
-        const grapher = new Grapher(grapherConfigComputed)
-        return grapher
-    }, [grapherConfigComputed])
+    // const grapher = useMemo(() => {
+    //     const grapher = new Grapher({ ...grapherConfigComputed, queryStr })
+    //     return grapher
+    // }, [grapherConfigComputed, queryStr])
 
     const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
     const relatedResearch =
@@ -546,13 +547,19 @@ export const MultiDimDataPageContent = ({
 
             <div className="span-cols-14 grid grid-cols-12-full-width full-width--border">
                 <div className="chart-key-info col-start-2 span-cols-12">
-                    <GrapherWithFallback
-                        key={JSON.stringify(grapherConfigComputed)}
-                        grapher={grapher}
-                        manager={grapherManager}
-                        getGrapherInstance={setGrapherInst}
+                    <div
                         id="explore-the-data"
-                    />
+                        className="GrapherWithFallback full-width-on-mobile"
+                    >
+                        <figure data-grapher-src>
+                            <Grapher
+                                {...grapherConfigComputed}
+                                queryStr={queryStr}
+                                manager={grapherManager}
+                                getGrapherInstance={setGrapherInst}
+                            />
+                        </figure>
+                    </div>
                     {datapageDataFromVar && (
                         <AboutThisData
                             datapageData={datapageDataFromVar}

From 862ea9574a6ec3288fccb13da1fddbd6669b3a9d Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 12:20:36 +0100
Subject: [PATCH 09/65] feat(site): hook to observe bounds of an element

---
 site/multiDim/MultiDimDataPageContent.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index d2d3c8cba06..e107602b129 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -51,6 +51,7 @@ import {
     stateToQueryStr,
 } from "./MultiDimUrl.js"
 import { reaction } from "mobx"
+import { useElementBounds } from "../hooks.js"
 declare global {
     interface Window {
         _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigType
@@ -349,6 +350,8 @@ export const MultiDimDataPageContent = ({
     imageMetadata: Record<string, ImageMetadata>
     initialQueryStr?: string
 }) => {
+    const grapherFigureRef = useRef<HTMLDivElement>(null)
+
     const [initialChoices] = useState(() =>
         initialQueryStr
             ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
@@ -437,6 +440,8 @@ export const MultiDimDataPageContent = ({
         [grapherInst]
     )
 
+    const bounds = useElementBounds(grapherFigureRef)
+
     // TEMPORARY, only while we are using `url` as part of the query string
     const urlQueryParam = getWindowQueryParams().url
 
@@ -466,13 +471,12 @@ export const MultiDimDataPageContent = ({
             dimensions: dimensionsConfig,
             isEmbeddedInADataPage: true,
 
-            // TODO temp
-            bounds: new Bounds(0, 0, 1000, 600),
+            bounds,
 
             // Keep the tab we last had
             tab: grapherInst?.tab ?? GrapherTabOption.chart,
         } as GrapherProgrammaticInterface
-    }, [currentView, dimensionsConfig, grapherInst])
+    }, [currentView, dimensionsConfig, grapherInst, bounds])
 
     // const grapher = useMemo(() => {
     //     const grapher = new Grapher({ ...grapherConfigComputed, queryStr })
@@ -551,7 +555,7 @@ export const MultiDimDataPageContent = ({
                         id="explore-the-data"
                         className="GrapherWithFallback full-width-on-mobile"
                     >
-                        <figure data-grapher-src>
+                        <figure data-grapher-src ref={grapherFigureRef}>
                             <Grapher
                                 {...grapherConfigComputed}
                                 queryStr={queryStr}

From 6d9c2d350b479d601e8befdf93a19d2442107687 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 13:37:37 +0100
Subject: [PATCH 10/65] fix(multi-dim): re-render on url change

---
 site/multiDim/MultiDimDataPageContent.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index e107602b129..3f8c6ca0935 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -557,6 +557,7 @@ export const MultiDimDataPageContent = ({
                     >
                         <figure data-grapher-src ref={grapherFigureRef}>
                             <Grapher
+                                key={JSON.stringify(currentView)}
                                 {...grapherConfigComputed}
                                 queryStr={queryStr}
                                 manager={grapherManager}

From f0e82c99b77f82baa83eed1d5f6b4cf8152fc68d Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 15:55:38 +0100
Subject: [PATCH 11/65] enhance(multi-dim): allow for default selection

---
 public/multi-dim/energy.yml               | 4 ++++
 site/multiDim/MultiDimDataPageContent.tsx | 5 ++++-
 site/multiDim/MultiDimDataPageTypes.ts    | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/multi-dim/energy.yml b/public/multi-dim/energy.yml
index 50890fd238a..665fd877e8a 100644
--- a/public/multi-dim/energy.yml
+++ b/public/multi-dim/energy.yml
@@ -1,5 +1,9 @@
 name: Energy use
 dimensions_title: by energy source
+default_selection:
+    - World
+    - Europe
+    - Mexico
 dimensions:
     - slug: source
       name: Energy source
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 3f8c6ca0935..bc7bbf9b013 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -409,7 +409,10 @@ export const MultiDimDataPageContent = ({
         (tag) => tagToSlugMap?.[tag]
     )
 
-    const selectionArray = useMemo(() => new SelectionArray(), [])
+    const selectionArray = useMemo(
+        () => new SelectionArray(config.config.default_selection),
+        [config]
+    )
 
     const grapherManager = useMemo(
         (): GrapherManager => ({
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index d68f4ff3e3a..b05805fe107 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -3,6 +3,7 @@ import { DimensionProperty } from "@ourworldindata/types"
 export interface MultiDimDataPageConfigType {
     name: string
     dimensions_title: string
+    default_selection?: string[]
     common_indicator_path_prefix?: string
     dimensions: Dimension[]
     views: View[]

From 174a99316ab0bc3626bd8b833b85a58be6c65329 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 17:42:26 +0100
Subject: [PATCH 12/65] fix: properly serialize country selection

---
 site/multiDim/MultiDimDataPageContent.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index bc7bbf9b013..2cb08e793aa 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -473,13 +473,14 @@ export const MultiDimDataPageContent = ({
             ...currentView?.config,
             dimensions: dimensionsConfig,
             isEmbeddedInADataPage: true,
+            selectedEntityNames: config.config.default_selection,
 
             bounds,
 
             // Keep the tab we last had
             tab: grapherInst?.tab ?? GrapherTabOption.chart,
         } as GrapherProgrammaticInterface
-    }, [currentView, dimensionsConfig, grapherInst, bounds])
+    }, [currentView, dimensionsConfig, grapherInst, bounds, config])
 
     // const grapher = useMemo(() => {
     //     const grapher = new Grapher({ ...grapherConfigComputed, queryStr })

From 07ff726eded194e6baec9070d781cc510965848b Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 18:21:46 +0100
Subject: [PATCH 13/65] feat(multi-dim): move dropdowns to header

---
 site/multiDim/MultiDimDataPageContent.scss | 57 +++++++++++++---------
 site/multiDim/MultiDimDataPageContent.tsx  | 18 +++----
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.scss b/site/multiDim/MultiDimDataPageContent.scss
index e32f17667e6..217e5201bf9 100644
--- a/site/multiDim/MultiDimDataPageContent.scss
+++ b/site/multiDim/MultiDimDataPageContent.scss
@@ -18,13 +18,23 @@ $indent: 15px;
 $control-row-height: 32px;
 
 $light-text: #858585;
-$dark-text: #5b5b5b;
+$secondary-text: $blue-50;
+$primary-text: $blue-90;
 $active-text: $blue-90;
 
 $zindex-controls-backdrop: 130;
 $zindex-controls-popup: 140;
 
 .MultiDimDataPageContent {
+    .header__left {
+        padding-bottom: 20px;
+    }
+
+    .settings-row__wrapper {
+        padding-bottom: 20px;
+        border-top: 1px solid $blue-20;
+    }
+
     .settings-row {
         display: flex;
         align-items: center;
@@ -32,37 +42,35 @@ $zindex-controls-popup: 140;
         margin-top: 20px;
 
         > span {
-            color: $gray-70;
-            text-transform: uppercase;
+            color: $secondary-text;
             font-weight: 700;
-            font-size: 0.9em;
             margin-right: 10px;
         }
 
         button {
             display: flex;
             align-items: center;
-            color: $dark-text;
+            color: $secondary-text;
             background: white;
             border: 1px solid $light-stroke;
             font: $medium 13px/16px $lato;
             letter-spacing: 0.01em;
             border-radius: 4px;
-            padding: 7px;
+            padding: 8px 12px;
             height: 40px;
 
             svg {
                 margin-left: 5px;
             }
 
-            &:hover {
-                background: $hover-fill;
-                cursor: pointer;
+            // &:hover {
+            //     background: $hover-fill;
+            //     cursor: pointer;
 
-                &:not(.active) {
-                    color: $dark-text;
-                }
-            }
+            //     &:not(.active) {
+            //         color: $dark-text;
+            //     }
+            // }
 
             &.active,
             &:active {
@@ -74,9 +82,9 @@ $zindex-controls-popup: 140;
                 cursor: default;
                 color: $active-text;
 
-                .setting-label {
-                    color: $dark-text;
-                }
+                // .setting-label {
+                //     color: $dark-text;
+                // }
             }
         }
     }
@@ -99,12 +107,12 @@ $zindex-controls-popup: 140;
         h4 {
             padding: 0 1em;
             margin-bottom: 0;
-            color: $dark-text;
+            color: $primary-text;
         }
 
         p {
             padding: 0 1em;
-            color: $dark-text;
+            color: $primary-text;
             font-size: 0.8em;
         }
     }
@@ -120,17 +128,20 @@ $zindex-controls-popup: 140;
     }
 
     .setting-label {
-        color: $light-text;
         &::after {
             content: ":";
             margin-right: 3px;
         }
 
         .active & {
-            color: $dark-text;
+            color: $primary-text;
         }
     }
 
+    .setting-choice {
+        color: $primary-text;
+    }
+
     .menu-group {
         > label {
             padding: 0 1em;
@@ -153,12 +164,12 @@ $zindex-controls-popup: 140;
 
     section {
         font: $medium 14px/1.2 $lato;
-        color: $dark-text;
+        color: $primary-text;
         margin: 0 $indent;
 
         .config-name {
             font: $bold 14px/1.2 $lato;
-            color: $dark-text;
+            color: $primary-text;
             list-style: none;
 
             svg {
@@ -213,7 +224,7 @@ $zindex-controls-popup: 140;
         .config-toggle {
             label {
                 flex-basis: 100%;
-                color: $dark-text;
+                color: $primary-text;
                 margin-bottom: 0.5em;
             }
             button {
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 2cb08e793aa..c6c043aca4a 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -270,7 +270,7 @@ const MultiDimSettingsPanel = (props: {
 
     return (
         <div className="settings-row">
-            <span>Configure the data</span>
+            <span className="h5-black-caps">Configure the data</span>
             {settings}
         </div>
     )
@@ -541,17 +541,15 @@ export const MultiDimDataPageContent = ({
                             tagToSlugMap={tagToSlugMap}
                         />
                     )}
+                    <div className="settings-row__wrapper span-cols-9 span-sm-cols-12">
+                        <MultiDimSettingsPanel
+                            config={config}
+                            currentSettings={currentSettings}
+                            updateSettings={setCurrentSettings}
+                        />
+                    </div>
                 </div>
             </div>
-            <div className="wrapper">
-                {config && (
-                    <MultiDimSettingsPanel
-                        config={config}
-                        currentSettings={currentSettings}
-                        updateSettings={setCurrentSettings}
-                    />
-                )}
-            </div>
 
             <div className="span-cols-14 grid grid-cols-12-full-width full-width--border">
                 <div className="chart-key-info col-start-2 span-cols-12">

From c902d7911488f999f6ebf336ee3fa335163329ca Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 18:28:33 +0100
Subject: [PATCH 14/65] style(multi-dim): split into multiple files

---
 site/multiDim/MultiDimDataPageContent.scss    | 238 +-----------------
 site/multiDim/MultiDimDataPageContent.tsx     | 192 +-------------
 .../MultiDimDataPageSettingsPanel.scss        | 235 +++++++++++++++++
 .../MultiDimDataPageSettingsPanel.tsx         | 187 ++++++++++++++
 4 files changed, 427 insertions(+), 425 deletions(-)
 create mode 100644 site/multiDim/MultiDimDataPageSettingsPanel.scss
 create mode 100644 site/multiDim/MultiDimDataPageSettingsPanel.tsx

diff --git a/site/multiDim/MultiDimDataPageContent.scss b/site/multiDim/MultiDimDataPageContent.scss
index 217e5201bf9..40f0b172f5a 100644
--- a/site/multiDim/MultiDimDataPageContent.scss
+++ b/site/multiDim/MultiDimDataPageContent.scss
@@ -26,243 +26,9 @@ $zindex-controls-backdrop: 130;
 $zindex-controls-popup: 140;
 
 .MultiDimDataPageContent {
-    .header__left {
-        padding-bottom: 20px;
-    }
+    @import "./MultiDimDataPageSettingsPanel.scss";
 
-    .settings-row__wrapper {
+    .header__left {
         padding-bottom: 20px;
-        border-top: 1px solid $blue-20;
-    }
-
-    .settings-row {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-        margin-top: 20px;
-
-        > span {
-            color: $secondary-text;
-            font-weight: 700;
-            margin-right: 10px;
-        }
-
-        button {
-            display: flex;
-            align-items: center;
-            color: $secondary-text;
-            background: white;
-            border: 1px solid $light-stroke;
-            font: $medium 13px/16px $lato;
-            letter-spacing: 0.01em;
-            border-radius: 4px;
-            padding: 8px 12px;
-            height: 40px;
-
-            svg {
-                margin-left: 5px;
-            }
-
-            // &:hover {
-            //     background: $hover-fill;
-            //     cursor: pointer;
-
-            //     &:not(.active) {
-            //         color: $dark-text;
-            //     }
-            // }
-
-            &.active,
-            &:active {
-                background: $active-fill;
-                border: 1px solid $active-fill;
-            }
-
-            &.active {
-                cursor: default;
-                color: $active-text;
-
-                // .setting-label {
-                //     color: $dark-text;
-                // }
-            }
-        }
-    }
-
-    .settings-dropdown {
-        position: relative;
-    }
-
-    .menu-wrapper {
-        position: absolute;
-        width: 400px;
-        left: 0;
-        top: 40px + 5px;
-        background: white;
-        border-radius: 4px;
-        box-shadow: 0px 4px 23px 4px #0000000f;
-        z-index: $zindex-controls-popup;
-        overflow-y: scroll;
-
-        h4 {
-            padding: 0 1em;
-            margin-bottom: 0;
-            color: $primary-text;
-        }
-
-        p {
-            padding: 0 1em;
-            color: $primary-text;
-            font-size: 0.8em;
-        }
-    }
-
-    // transparent mouse-event catcher while popup is visible
-    .menu-backdrop {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        z-index: $zindex-controls-backdrop;
-    }
-
-    .setting-label {
-        &::after {
-            content: ":";
-            margin-right: 3px;
-        }
-
-        .active & {
-            color: $primary-text;
-        }
-    }
-
-    .setting-choice {
-        color: $primary-text;
-    }
-
-    .menu-group {
-        > label {
-            padding: 0 1em;
-            color: $light-text;
-            font-size: 14px;
-            // text-transform: uppercase;
-        }
-
-        &.is-group section {
-            padding-left: 0.75em;
-        }
-        padding-bottom: 0.25em;
-        margin-bottom: 0.25em;
-        border-bottom: 1px solid rgba($light-stroke, 0.3);
-
-        &:last-child {
-            border-bottom: none;
-        }
-    }
-
-    section {
-        font: $medium 14px/1.2 $lato;
-        color: $primary-text;
-        margin: 0 $indent;
-
-        .config-name {
-            font: $bold 14px/1.2 $lato;
-            color: $primary-text;
-            list-style: none;
-
-            svg {
-                color: $info-icon;
-                height: 13px;
-                padding: 0 0.333em;
-            }
-        }
-
-        .labeled-switch .labeled-switch-subtitle,
-        .config-subtitle {
-            font-size: 13px;
-            margin: 5px 0;
-        }
-
-        .config-toggle {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            padding: 0.5em 0;
-        }
-
-        &.active {
-            button {
-                background: $active-fill;
-                border: 1px solid $active-fill;
-                color: $active-text;
-
-                &:hover {
-                    background: darken($active-fill, 5%);
-                }
-
-                &:active {
-                    background: darken($active-fill, 10%);
-                }
-            }
-        }
-
-        .description {
-            font-size: 12px;
-            color: $gray-60;
-            margin: 0;
-            margin-bottom: 5px;
-        }
-    }
-
-    //
-    // resuable widgets
-    //
-    section {
-        // left/right pairs of options
-        .config-toggle {
-            label {
-                flex-basis: 100%;
-                color: $primary-text;
-                margin-bottom: 0.5em;
-            }
-            button {
-                width: calc(50% - 5px);
-                padding: 7px 16px;
-            }
-        }
-
-        // on/off switch with label written to the right
-        .labeled-switch {
-            margin: 14px 0;
-            display: block;
-        }
-
-        // vertical list of options (for selecting faceting mode)
-        .config-list {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 7px 0;
-            button {
-                width: 100%;
-
-                &.entity span {
-                    width: 10px;
-                    height: 10px;
-                }
-
-                &.metric span {
-                    width: 10px;
-                    height: 10px;
-                    border-radius: 5px;
-                }
-
-                &.active {
-                    background: #a4b6ca;
-                }
-            }
-        }
     }
 }
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index c6c043aca4a..4cfeb41a79f 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -1,6 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
+import React, { useEffect, useMemo, useRef, useState } from "react"
 import {
     Grapher,
     GrapherManager,
@@ -26,23 +24,18 @@ import {
     getAttributionFragmentsFromVariable,
     OwidVariableWithSourceAndDimension,
     memoize,
-    isEqual,
     GrapherTabOption,
     QueryParams,
     setWindowQueryStr,
     getWindowQueryParams,
     getWindowQueryStr,
-    Bounds,
 } from "@ourworldindata/utils"
 import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
 import { BAKED_BASE_URL, DATA_API_URL } from "../../settings/clientSettings.js"
 import Image from "../gdocs/components/Image.js"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import {
-    DimensionEnriched,
-    MultiDimDataPageConfigType,
-} from "./MultiDimDataPageTypes.js"
+import { MultiDimDataPageConfigType } from "./MultiDimDataPageTypes.js"
 import AboutThisData from "../AboutThisData.js"
 import TopicTags from "../TopicTags.js"
 import MetadataSection from "../MetadataSection.js"
@@ -52,6 +45,7 @@ import {
 } from "./MultiDimUrl.js"
 import { reaction } from "mobx"
 import { useElementBounds } from "../hooks.js"
+import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
 declare global {
     interface Window {
         _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigType
@@ -96,186 +90,6 @@ const DatapageResearchThumbnail = ({
     )
 }
 
-const DimensionDropdown = (props: {
-    dimension: DimensionEnriched
-    currentChoiceSlug: string
-    onChange?: (slug: string, valueSlug: string) => void
-}) => {
-    const { dimension } = props
-
-    const [active, setActive] = useState(false)
-
-    const toggleVisibility = useCallback(() => setActive(!active), [active])
-
-    const dropdownRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === "Escape") setActive(false)
-        }
-
-        document.addEventListener("keydown", handleEscape)
-        return () => document.removeEventListener("keydown", handleEscape)
-    }, [])
-
-    useEffect(() => {
-        const handleOutsideClick = (e: MouseEvent) => {
-            if (
-                active &&
-                dropdownRef.current &&
-                e.target instanceof Node &&
-                !dropdownRef.current.contains(e.target)
-            )
-                setActive(false)
-        }
-
-        document.addEventListener("click", handleOutsideClick)
-        return () => document.removeEventListener("click", handleOutsideClick)
-    }, [active])
-
-    const currentChoice = dimension.choicesBySlug[props.currentChoiceSlug]
-
-    return (
-        <div className="settings-dropdown" ref={dropdownRef}>
-            <button
-                className={cx("menu-toggle", { active })}
-                onClick={toggleVisibility}
-                data-track-note="multi-dim-choice-dropdown"
-                type="button"
-            >
-                <span className="setting-label">{dimension.name}</span>
-                <span className="setting-choice">{currentChoice.name}</span>
-                <FontAwesomeIcon icon={faCaretDown} />
-            </button>
-            {active && (
-                <div className="menu">
-                    <div className="menu-contents">
-                        <div
-                            className="menu-backdrop"
-                            onClick={toggleVisibility}
-                        ></div>
-                        {/* <OverlayHeader /> */}
-                        <div className="menu-wrapper">
-                            <h4>{dimension.name}</h4>
-                            {dimension.description && (
-                                <p>{dimension.description}</p>
-                            )}
-                            <div className="menu-options">
-                                {Object.entries(dimension.choicesByGroup).map(
-                                    ([groupName, groupChoices]) => (
-                                        <div
-                                            key={groupName}
-                                            className={cx("menu-group", {
-                                                "is-group":
-                                                    groupName !== "undefined",
-                                            })}
-                                        >
-                                            {groupName !== "undefined" && (
-                                                <label>{groupName}</label>
-                                            )}
-                                            {groupChoices.map((choice) => (
-                                                <section
-                                                    key={choice.slug}
-                                                    className={cx({
-                                                        active:
-                                                            choice.slug ===
-                                                            props.currentChoiceSlug,
-                                                    })}
-                                                >
-                                                    <div className="config-list">
-                                                        <button
-                                                            onClick={() => {
-                                                                props.onChange?.(
-                                                                    dimension.slug,
-                                                                    choice.slug
-                                                                )
-                                                                setActive(false)
-                                                            }}
-                                                        >
-                                                            {choice.name}
-                                                        </button>
-                                                        {choice.description && (
-                                                            <label className="description">
-                                                                {
-                                                                    choice.description
-                                                                }
-                                                            </label>
-                                                        )}
-                                                    </div>
-                                                </section>
-                                            ))}
-                                        </div>
-                                    )
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    )
-}
-
-const MultiDimSettingsPanel = (props: {
-    config: MultiDimDataPageConfig
-    currentSettings: Record<string, string>
-    onChange?: (
-        slug: string,
-        value: string,
-        currentSettings: Record<string, string>
-    ) => void
-    updateSettings?: (currentSettings: Record<string, string>) => void
-}) => {
-    const { config, currentSettings, updateSettings } = props
-
-    const { dimensions } = config
-
-    // Non-partial version of `currentSettings` with all dimensions filled in
-    const resolvedCurrentSettings = useMemo(
-        () =>
-            Object.fromEntries(
-                Object.values(dimensions).map((dimension) => [
-                    dimension.slug,
-                    currentSettings[dimension.slug] ??
-                        Object.values(dimension.choices)[0].slug,
-                ])
-            ),
-        [currentSettings, dimensions]
-    )
-
-    const [availableSettings, setAvailableSettings] = useState<
-        Record<string, DimensionEnriched>
-    >({})
-
-    useEffect(() => {
-        const { dimensionsWithAvailableChoices, selectedChoices } =
-            config.filterToAvailableChoices(resolvedCurrentSettings)
-
-        if (!isEqual(selectedChoices, resolvedCurrentSettings))
-            updateSettings?.(selectedChoices)
-        if (!isEqual(dimensionsWithAvailableChoices, availableSettings))
-            setAvailableSettings(dimensionsWithAvailableChoices)
-    }, [resolvedCurrentSettings, config, updateSettings, availableSettings])
-
-    const settings = Object.values(availableSettings).map((dim) => (
-        <DimensionDropdown
-            key={dim.slug}
-            dimension={dim}
-            currentChoiceSlug={currentSettings[dim.slug]}
-            onChange={(slug, value) =>
-                updateSettings?.({ ...currentSettings, [slug]: value })
-            }
-        />
-    ))
-
-    return (
-        <div className="settings-row">
-            <span className="h5-black-caps">Configure the data</span>
-            {settings}
-        </div>
-    )
-}
-
 // From DataPageUtils
 const getDatapageDataV2 = async (
     variableMetadata: OwidVariableWithSource,
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.scss b/site/multiDim/MultiDimDataPageSettingsPanel.scss
new file mode 100644
index 00000000000..26dc31d8785
--- /dev/null
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.scss
@@ -0,0 +1,235 @@
+.settings-row__wrapper {
+    padding-bottom: 20px;
+    border-top: 1px solid $blue-20;
+}
+
+.settings-row {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-top: 20px;
+
+    > span {
+        color: $secondary-text;
+        font-weight: 700;
+        margin-right: 10px;
+    }
+
+    button {
+        display: flex;
+        align-items: center;
+        color: $secondary-text;
+        background: white;
+        border: 1px solid $light-stroke;
+        font: $medium 13px/16px $lato;
+        letter-spacing: 0.01em;
+        border-radius: 4px;
+        padding: 8px 12px;
+        height: 40px;
+
+        svg {
+            margin-left: 5px;
+        }
+
+        // &:hover {
+        //     background: $hover-fill;
+        //     cursor: pointer;
+
+        //     &:not(.active) {
+        //         color: $dark-text;
+        //     }
+        // }
+
+        &.active,
+        &:active {
+            background: $active-fill;
+            border: 1px solid $active-fill;
+        }
+
+        &.active {
+            cursor: default;
+            color: $active-text;
+
+            // .setting-label {
+            //     color: $dark-text;
+            // }
+        }
+    }
+}
+
+.settings-dropdown {
+    position: relative;
+}
+
+.menu-wrapper {
+    position: absolute;
+    width: 400px;
+    left: 0;
+    top: 40px + 5px;
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0px 4px 23px 4px #0000000f;
+    z-index: $zindex-controls-popup;
+    overflow-y: scroll;
+
+    h4 {
+        padding: 0 1em;
+        margin-bottom: 0;
+        color: $primary-text;
+    }
+
+    p {
+        padding: 0 1em;
+        color: $primary-text;
+        font-size: 0.8em;
+    }
+}
+
+// transparent mouse-event catcher while popup is visible
+.menu-backdrop {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: $zindex-controls-backdrop;
+}
+
+.setting-label {
+    &::after {
+        content: ":";
+        margin-right: 3px;
+    }
+
+    .active & {
+        color: $primary-text;
+    }
+}
+
+.setting-choice {
+    color: $primary-text;
+}
+
+.menu-group {
+    > label {
+        padding: 0 1em;
+        color: $light-text;
+        font-size: 14px;
+        // text-transform: uppercase;
+    }
+
+    &.is-group section {
+        padding-left: 0.75em;
+    }
+    padding-bottom: 0.25em;
+    margin-bottom: 0.25em;
+    border-bottom: 1px solid rgba($light-stroke, 0.3);
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+section {
+    font: $medium 14px/1.2 $lato;
+    color: $primary-text;
+    margin: 0 $indent;
+
+    .config-name {
+        font: $bold 14px/1.2 $lato;
+        color: $primary-text;
+        list-style: none;
+
+        svg {
+            color: $info-icon;
+            height: 13px;
+            padding: 0 0.333em;
+        }
+    }
+
+    .labeled-switch .labeled-switch-subtitle,
+    .config-subtitle {
+        font-size: 13px;
+        margin: 5px 0;
+    }
+
+    .config-toggle {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        padding: 0.5em 0;
+    }
+
+    &.active {
+        button {
+            background: $active-fill;
+            border: 1px solid $active-fill;
+            color: $active-text;
+
+            &:hover {
+                background: darken($active-fill, 5%);
+            }
+
+            &:active {
+                background: darken($active-fill, 10%);
+            }
+        }
+    }
+
+    .description {
+        font-size: 12px;
+        color: $gray-60;
+        margin: 0;
+        margin-bottom: 5px;
+    }
+}
+
+//
+// resuable widgets
+//
+section {
+    // left/right pairs of options
+    .config-toggle {
+        label {
+            flex-basis: 100%;
+            color: $primary-text;
+            margin-bottom: 0.5em;
+        }
+        button {
+            width: calc(50% - 5px);
+            padding: 7px 16px;
+        }
+    }
+
+    // on/off switch with label written to the right
+    .labeled-switch {
+        margin: 14px 0;
+        display: block;
+    }
+
+    // vertical list of options (for selecting faceting mode)
+    .config-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 7px 0;
+        button {
+            width: 100%;
+
+            &.entity span {
+                width: 10px;
+                height: 10px;
+            }
+
+            &.metric span {
+                width: 10px;
+                height: 10px;
+                border-radius: 5px;
+            }
+
+            &.active {
+                background: #a4b6ca;
+            }
+        }
+    }
+}
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
new file mode 100644
index 00000000000..05bd9ab4b30
--- /dev/null
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { DimensionEnriched } from "./MultiDimDataPageTypes.js"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
+import cx from "classnames"
+import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
+import { isEqual } from "@ourworldindata/utils"
+
+const DimensionDropdown = (props: {
+    dimension: DimensionEnriched
+    currentChoiceSlug: string
+    onChange?: (slug: string, valueSlug: string) => void
+}) => {
+    const { dimension } = props
+
+    const [active, setActive] = useState(false)
+
+    const toggleVisibility = useCallback(() => setActive(!active), [active])
+
+    const dropdownRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape") setActive(false)
+        }
+
+        document.addEventListener("keydown", handleEscape)
+        return () => document.removeEventListener("keydown", handleEscape)
+    }, [])
+
+    useEffect(() => {
+        const handleOutsideClick = (e: MouseEvent) => {
+            if (
+                active &&
+                dropdownRef.current &&
+                e.target instanceof Node &&
+                !dropdownRef.current.contains(e.target)
+            )
+                setActive(false)
+        }
+
+        document.addEventListener("click", handleOutsideClick)
+        return () => document.removeEventListener("click", handleOutsideClick)
+    }, [active])
+
+    const currentChoice = dimension.choicesBySlug[props.currentChoiceSlug]
+
+    return (
+        <div className="settings-dropdown" ref={dropdownRef}>
+            <button
+                className={cx("menu-toggle", { active })}
+                onClick={toggleVisibility}
+                data-track-note="multi-dim-choice-dropdown"
+                type="button"
+            >
+                <span className="setting-label">{dimension.name}</span>
+                <span className="setting-choice">{currentChoice.name}</span>
+                <FontAwesomeIcon icon={faCaretDown} />
+            </button>
+            {active && (
+                <div className="menu">
+                    <div className="menu-contents">
+                        <div
+                            className="menu-backdrop"
+                            onClick={toggleVisibility}
+                        ></div>
+                        {/* <OverlayHeader /> */}
+                        <div className="menu-wrapper">
+                            <h4>{dimension.name}</h4>
+                            {dimension.description && (
+                                <p>{dimension.description}</p>
+                            )}
+                            <div className="menu-options">
+                                {Object.entries(dimension.choicesByGroup).map(
+                                    ([groupName, groupChoices]) => (
+                                        <div
+                                            key={groupName}
+                                            className={cx("menu-group", {
+                                                "is-group":
+                                                    groupName !== "undefined",
+                                            })}
+                                        >
+                                            {groupName !== "undefined" && (
+                                                <label>{groupName}</label>
+                                            )}
+                                            {groupChoices.map((choice) => (
+                                                <section
+                                                    key={choice.slug}
+                                                    className={cx({
+                                                        active:
+                                                            choice.slug ===
+                                                            props.currentChoiceSlug,
+                                                    })}
+                                                >
+                                                    <div className="config-list">
+                                                        <button
+                                                            onClick={() => {
+                                                                props.onChange?.(
+                                                                    dimension.slug,
+                                                                    choice.slug
+                                                                )
+                                                                setActive(false)
+                                                            }}
+                                                        >
+                                                            {choice.name}
+                                                        </button>
+                                                        {choice.description && (
+                                                            <label className="description">
+                                                                {
+                                                                    choice.description
+                                                                }
+                                                            </label>
+                                                        )}
+                                                    </div>
+                                                </section>
+                                            ))}
+                                        </div>
+                                    )
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export const MultiDimSettingsPanel = (props: {
+    config: MultiDimDataPageConfig
+    currentSettings: Record<string, string>
+    onChange?: (
+        slug: string,
+        value: string,
+        currentSettings: Record<string, string>
+    ) => void
+    updateSettings?: (currentSettings: Record<string, string>) => void
+}) => {
+    const { config, currentSettings, updateSettings } = props
+
+    const { dimensions } = config
+
+    // Non-partial version of `currentSettings` with all dimensions filled in
+    const resolvedCurrentSettings = useMemo(
+        () =>
+            Object.fromEntries(
+                Object.values(dimensions).map((dimension) => [
+                    dimension.slug,
+                    currentSettings[dimension.slug] ??
+                        Object.values(dimension.choices)[0].slug,
+                ])
+            ),
+        [currentSettings, dimensions]
+    )
+
+    const [availableSettings, setAvailableSettings] = useState<
+        Record<string, DimensionEnriched>
+    >({})
+
+    useEffect(() => {
+        const { dimensionsWithAvailableChoices, selectedChoices } =
+            config.filterToAvailableChoices(resolvedCurrentSettings)
+
+        if (!isEqual(selectedChoices, resolvedCurrentSettings))
+            updateSettings?.(selectedChoices)
+        if (!isEqual(dimensionsWithAvailableChoices, availableSettings))
+            setAvailableSettings(dimensionsWithAvailableChoices)
+    }, [resolvedCurrentSettings, config, updateSettings, availableSettings])
+
+    const settings = Object.values(availableSettings).map((dim) => (
+        <DimensionDropdown
+            key={dim.slug}
+            dimension={dim}
+            currentChoiceSlug={currentSettings[dim.slug]}
+            onChange={(slug, value) =>
+                updateSettings?.({ ...currentSettings, [slug]: value })
+            }
+        />
+    ))
+
+    return (
+        <div className="settings-row">
+            <span className="h5-black-caps">Configure the data</span>
+            {settings}
+        </div>
+    )
+}

From 842ff4ddce06d9eb3aa0e7d17a43fd36d478db54 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 24 Jul 2024 18:40:17 +0100
Subject: [PATCH 15/65] enhance(multi-dim): start implementing new design

---
 .../MultiDimDataPageSettingsPanel.scss        | 259 +++++++++---------
 .../MultiDimDataPageSettingsPanel.tsx         |   2 +-
 2 files changed, 132 insertions(+), 129 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.scss b/site/multiDim/MultiDimDataPageSettingsPanel.scss
index 26dc31d8785..ce155a81718 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.scss
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.scss
@@ -55,6 +55,21 @@
             // }
         }
     }
+
+    .setting-label {
+        &::after {
+            content: ":";
+            margin-right: 3px;
+        }
+
+        .active & {
+            color: $primary-text;
+        }
+    }
+
+    .setting-choice {
+        color: $primary-text;
+    }
 }
 
 .settings-dropdown {
@@ -62,6 +77,9 @@
 }
 
 .menu-wrapper {
+    $primary-text: $gray-80;
+    $secondary-text: $gray-60;
+
     position: absolute;
     width: 400px;
     left: 0;
@@ -72,10 +90,10 @@
     z-index: $zindex-controls-popup;
     overflow-y: scroll;
 
-    h4 {
+    h5 {
         padding: 0 1em;
-        margin-bottom: 0;
-        color: $primary-text;
+        margin-bottom: 8px;
+        color: $secondary-text;
     }
 
     p {
@@ -83,153 +101,138 @@
         color: $primary-text;
         font-size: 0.8em;
     }
-}
-
-// transparent mouse-event catcher while popup is visible
-.menu-backdrop {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: $zindex-controls-backdrop;
-}
-
-.setting-label {
-    &::after {
-        content: ":";
-        margin-right: 3px;
-    }
-
-    .active & {
-        color: $primary-text;
-    }
-}
-
-.setting-choice {
-    color: $primary-text;
-}
-
-.menu-group {
-    > label {
-        padding: 0 1em;
-        color: $light-text;
-        font-size: 14px;
-        // text-transform: uppercase;
-    }
-
-    &.is-group section {
-        padding-left: 0.75em;
-    }
-    padding-bottom: 0.25em;
-    margin-bottom: 0.25em;
-    border-bottom: 1px solid rgba($light-stroke, 0.3);
-
-    &:last-child {
-        border-bottom: none;
-    }
-}
 
-section {
-    font: $medium 14px/1.2 $lato;
-    color: $primary-text;
-    margin: 0 $indent;
+    .menu-group {
+        > label {
+            padding: 0 1em;
+            color: $primary-text;
+            font-weight: bold;
+            font-size: 14px;
+            // text-transform: uppercase;
+        }
 
-    .config-name {
-        font: $bold 14px/1.2 $lato;
-        color: $primary-text;
-        list-style: none;
+        padding-bottom: 0.25em;
+        margin-bottom: 0.25em;
+        border-bottom: 1px solid rgba($light-stroke, 0.3);
 
-        svg {
-            color: $info-icon;
-            height: 13px;
-            padding: 0 0.333em;
+        &:last-child {
+            border-bottom: none;
         }
     }
 
-    .labeled-switch .labeled-switch-subtitle,
-    .config-subtitle {
-        font-size: 13px;
-        margin: 5px 0;
-    }
-
-    .config-toggle {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        padding: 0.5em 0;
-    }
+    section {
+        font: $medium 14px/1.2 $lato;
+        color: $primary-text;
+        margin: 0 $indent;
 
-    &.active {
-        button {
-            background: $active-fill;
-            border: 1px solid $active-fill;
-            color: $active-text;
+        border-bottom: 1px solid $gray-20;
 
-            &:hover {
-                background: darken($active-fill, 5%);
-            }
+        .config-name {
+            font: $bold 14px/1.2 $lato;
+            color: $primary-text;
+            list-style: none;
 
-            &:active {
-                background: darken($active-fill, 10%);
+            svg {
+                color: $info-icon;
+                height: 13px;
+                padding: 0 0.333em;
             }
         }
-    }
 
-    .description {
-        font-size: 12px;
-        color: $gray-60;
-        margin: 0;
-        margin-bottom: 5px;
-    }
-}
+        .labeled-switch .labeled-switch-subtitle,
+        .config-subtitle {
+            font-size: 13px;
+            margin: 5px 0;
+        }
 
-//
-// resuable widgets
-//
-section {
-    // left/right pairs of options
-    .config-toggle {
-        label {
-            flex-basis: 100%;
-            color: $primary-text;
-            margin-bottom: 0.5em;
+        .config-toggle {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            padding: 0.5em 0;
         }
-        button {
-            width: calc(50% - 5px);
-            padding: 7px 16px;
+
+        &.active {
+            button {
+                background: $active-fill;
+                border: 1px solid $active-fill;
+                color: $active-text;
+
+                &:hover {
+                    background: darken($active-fill, 5%);
+                }
+
+                &:active {
+                    background: darken($active-fill, 10%);
+                }
+            }
         }
-    }
 
-    // on/off switch with label written to the right
-    .labeled-switch {
-        margin: 14px 0;
-        display: block;
+        .description {
+            font-size: 12px;
+            color: $gray-60;
+            margin: 0;
+            margin-bottom: 5px;
+        }
     }
 
-    // vertical list of options (for selecting faceting mode)
-    .config-list {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        padding: 7px 0;
-        button {
-            width: 100%;
-
-            &.entity span {
-                width: 10px;
-                height: 10px;
+    //
+    // resuable widgets
+    //
+    section {
+        // left/right pairs of options
+        .config-toggle {
+            label {
+                flex-basis: 100%;
+                color: $primary-text;
+                margin-bottom: 0.5em;
             }
-
-            &.metric span {
-                width: 10px;
-                height: 10px;
-                border-radius: 5px;
+            button {
+                width: calc(50% - 5px);
+                padding: 7px 16px;
             }
+        }
 
-            &.active {
-                background: #a4b6ca;
+        // on/off switch with label written to the right
+        .labeled-switch {
+            margin: 14px 0;
+            display: block;
+        }
+
+        // vertical list of options (for selecting faceting mode)
+        .config-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            padding: 7px 0;
+            button {
+                width: 100%;
+
+                &.entity span {
+                    width: 10px;
+                    height: 10px;
+                }
+
+                &.metric span {
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 5px;
+                }
+
+                &.active {
+                    background: #a4b6ca;
+                }
             }
         }
     }
 }
+
+// transparent mouse-event catcher while popup is visible
+.menu-backdrop {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: $zindex-controls-backdrop;
+}
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index 05bd9ab4b30..64ccdea7b1d 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -66,7 +66,7 @@ const DimensionDropdown = (props: {
                         ></div>
                         {/* <OverlayHeader /> */}
                         <div className="menu-wrapper">
-                            <h4>{dimension.name}</h4>
+                            <h5 className="h5-black-caps">{dimension.name}</h5>
                             {dimension.description && (
                                 <p>{dimension.description}</p>
                             )}

From 5340b3401a9a4870d7d4d224511b8fb33e6c87ba Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 13:56:31 +0100
Subject: [PATCH 16/65] enhance: new styles are mostly in place

---
 .../MultiDimDataPageSettingsPanel.scss        | 103 ++++--------------
 .../MultiDimDataPageSettingsPanel.tsx         |  85 +++++++++------
 2 files changed, 69 insertions(+), 119 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.scss b/site/multiDim/MultiDimDataPageSettingsPanel.scss
index ce155a81718..7d5fb2874a5 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.scss
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.scss
@@ -1,3 +1,6 @@
+$radio-button-padding-y: 16px;
+$indent: 16px;
+
 .settings-row__wrapper {
     padding-bottom: 20px;
     border-top: 1px solid $blue-20;
@@ -9,13 +12,7 @@
     gap: 15px;
     margin-top: 20px;
 
-    > span {
-        color: $secondary-text;
-        font-weight: 700;
-        margin-right: 10px;
-    }
-
-    button {
+    .menu-toggle {
         display: flex;
         align-items: center;
         color: $secondary-text;
@@ -90,53 +87,43 @@
     z-index: $zindex-controls-popup;
     overflow-y: scroll;
 
-    h5 {
-        padding: 0 1em;
-        margin-bottom: 8px;
-        color: $secondary-text;
+    .overlay-header {
+        padding-bottom: 0;
+        margin-bottom: 0;
     }
 
     p {
-        padding: 0 1em;
-        color: $primary-text;
+        margin-top: 0;
+        margin: 0 $indent;
+        color: $secondary-text;
         font-size: 0.8em;
     }
 
     .menu-group {
         > label {
-            padding: 0 1em;
-            color: $primary-text;
-            font-weight: bold;
+            margin: 0 $indent;
+            color: $light-text;
+            font-weight: 600;
             font-size: 14px;
-            // text-transform: uppercase;
         }
 
-        padding-bottom: 0.25em;
         margin-bottom: 0.25em;
-        border-bottom: 1px solid rgba($light-stroke, 0.3);
-
-        &:last-child {
-            border-bottom: none;
-        }
     }
 
-    section {
+    .menu__radio-button {
         font: $medium 14px/1.2 $lato;
         color: $primary-text;
         margin: 0 $indent;
+        padding: $radio-button-padding-y 0;
 
         border-bottom: 1px solid $gray-20;
 
-        .config-name {
-            font: $bold 14px/1.2 $lato;
-            color: $primary-text;
-            list-style: none;
+        &:first-child {
+            padding-top: calc($radio-button-padding-y - 4px);
+        }
 
-            svg {
-                color: $info-icon;
-                height: 13px;
-                padding: 0 0.333em;
-            }
+        &:last-child {
+            border-bottom: none;
         }
 
         .labeled-switch .labeled-switch-subtitle,
@@ -175,56 +162,6 @@
             margin-bottom: 5px;
         }
     }
-
-    //
-    // resuable widgets
-    //
-    section {
-        // left/right pairs of options
-        .config-toggle {
-            label {
-                flex-basis: 100%;
-                color: $primary-text;
-                margin-bottom: 0.5em;
-            }
-            button {
-                width: calc(50% - 5px);
-                padding: 7px 16px;
-            }
-        }
-
-        // on/off switch with label written to the right
-        .labeled-switch {
-            margin: 14px 0;
-            display: block;
-        }
-
-        // vertical list of options (for selecting faceting mode)
-        .config-list {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 7px 0;
-            button {
-                width: 100%;
-
-                &.entity span {
-                    width: 10px;
-                    height: 10px;
-                }
-
-                &.metric span {
-                    width: 10px;
-                    height: 10px;
-                    border-radius: 5px;
-                }
-
-                &.active {
-                    background: #a4b6ca;
-                }
-            }
-        }
-    }
 }
 
 // transparent mouse-event catcher while popup is visible
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index 64ccdea7b1d..5577205b0c3 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -5,6 +5,7 @@ import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 import { isEqual } from "@ourworldindata/utils"
+import { OverlayHeader, RadioButton } from "@ourworldindata/components"
 
 const DimensionDropdown = (props: {
     dimension: DimensionEnriched
@@ -64,56 +65,68 @@ const DimensionDropdown = (props: {
                             className="menu-backdrop"
                             onClick={toggleVisibility}
                         ></div>
-                        {/* <OverlayHeader /> */}
                         <div className="menu-wrapper">
-                            <h5 className="h5-black-caps">{dimension.name}</h5>
+                            <OverlayHeader
+                                title={dimension.name}
+                                onDismiss={() => setActive(false)}
+                            />
                             {dimension.description && (
-                                <p>{dimension.description}</p>
+                                <p className="menu-dimension__description">
+                                    {dimension.description}
+                                </p>
                             )}
                             <div className="menu-options">
                                 {Object.entries(dimension.choicesByGroup).map(
-                                    ([groupName, groupChoices]) => (
+                                    ([groupLabel, groupChoices]) => (
                                         <div
-                                            key={groupName}
+                                            key={groupLabel}
                                             className={cx("menu-group", {
                                                 "is-group":
-                                                    groupName !== "undefined",
+                                                    groupLabel !== "undefined",
                                             })}
                                         >
-                                            {groupName !== "undefined" && (
-                                                <label>{groupName}</label>
+                                            {groupLabel !== "undefined" && (
+                                                <label className="settings-group__label">
+                                                    {groupLabel}
+                                                </label>
                                             )}
-                                            {groupChoices.map((choice) => (
-                                                <section
-                                                    key={choice.slug}
-                                                    className={cx({
-                                                        active:
-                                                            choice.slug ===
-                                                            props.currentChoiceSlug,
-                                                    })}
-                                                >
-                                                    <div className="config-list">
-                                                        <button
-                                                            onClick={() => {
+                                            <div className="menu-group__options">
+                                                {groupChoices.map((choice) => (
+                                                    <div
+                                                        className="menu__radio-button"
+                                                        key={choice.slug}
+                                                    >
+                                                        <RadioButton
+                                                            checked={
+                                                                choice.slug ===
+                                                                props.currentChoiceSlug
+                                                            }
+                                                            label={
+                                                                <>
+                                                                    <div>
+                                                                        {
+                                                                            choice.name
+                                                                        }
+                                                                    </div>
+                                                                    {choice.description && (
+                                                                        <label className="description">
+                                                                            {
+                                                                                choice.description
+                                                                            }
+                                                                        </label>
+                                                                    )}
+                                                                </>
+                                                            }
+                                                            onChange={() =>
                                                                 props.onChange?.(
                                                                     dimension.slug,
                                                                     choice.slug
                                                                 )
-                                                                setActive(false)
-                                                            }}
-                                                        >
-                                                            {choice.name}
-                                                        </button>
-                                                        {choice.description && (
-                                                            <label className="description">
-                                                                {
-                                                                    choice.description
-                                                                }
-                                                            </label>
-                                                        )}
+                                                            }
+                                                        />
                                                     </div>
-                                                </section>
-                                            ))}
+                                                ))}
+                                            </div>
                                         </div>
                                     )
                                 )}
@@ -171,9 +184,9 @@ export const MultiDimSettingsPanel = (props: {
         <DimensionDropdown
             key={dim.slug}
             dimension={dim}
-            currentChoiceSlug={currentSettings[dim.slug]}
+            currentChoiceSlug={resolvedCurrentSettings[dim.slug]}
             onChange={(slug, value) =>
-                updateSettings?.({ ...currentSettings, [slug]: value })
+                updateSettings?.({ ...resolvedCurrentSettings, [slug]: value })
             }
         />
     ))

From 8c8663869aed27f2acc08cf7f486b2d2506c1072 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 14:29:07 +0100
Subject: [PATCH 17/65] style: rename css classes and refactor code a bit

---
 site/multiDim/MultiDimDataPageContent.scss    |   5 +
 .../MultiDimDataPageSettingsPanel.scss        | 115 ++++--------
 .../MultiDimDataPageSettingsPanel.tsx         | 175 ++++++++----------
 3 files changed, 112 insertions(+), 183 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.scss b/site/multiDim/MultiDimDataPageContent.scss
index 40f0b172f5a..661c96a23c1 100644
--- a/site/multiDim/MultiDimDataPageContent.scss
+++ b/site/multiDim/MultiDimDataPageContent.scss
@@ -31,4 +31,9 @@ $zindex-controls-popup: 140;
     .header__left {
         padding-bottom: 20px;
     }
+
+    .settings-row__wrapper {
+        padding-bottom: 20px;
+        border-top: 1px solid $blue-20;
+    }
 }
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.scss b/site/multiDim/MultiDimDataPageSettingsPanel.scss
index 7d5fb2874a5..f9a9e68f169 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.scss
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.scss
@@ -1,18 +1,19 @@
 $radio-button-padding-y: 16px;
 $indent: 16px;
 
-.settings-row__wrapper {
-    padding-bottom: 20px;
-    border-top: 1px solid $blue-20;
-}
+$toggle-height: 40px;
 
-.settings-row {
+.md-settings-row {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 20px;
 
-    .menu-toggle {
+    .md-settings__configure-data {
+        color: $blue-60;
+    }
+
+    .md-settings__dropdown-toggle {
         display: flex;
         align-items: center;
         color: $secondary-text;
@@ -22,20 +23,18 @@ $indent: 16px;
         letter-spacing: 0.01em;
         border-radius: 4px;
         padding: 8px 12px;
-        height: 40px;
+        height: $toggle-height;
+        cursor: pointer;
 
         svg {
             margin-left: 5px;
         }
 
-        // &:hover {
-        //     background: $hover-fill;
-        //     cursor: pointer;
-
-        //     &:not(.active) {
-        //         color: $dark-text;
-        //     }
-        // }
+        &:hover,
+        &:focus {
+            // background: $gray-5;
+            border-color: $blue-30;
+        }
 
         &.active,
         &:active {
@@ -46,14 +45,10 @@ $indent: 16px;
         &.active {
             cursor: default;
             color: $active-text;
-
-            // .setting-label {
-            //     color: $dark-text;
-            // }
         }
     }
 
-    .setting-label {
+    .md-settings__dropdown-label {
         &::after {
             content: ":";
             margin-right: 3px;
@@ -64,44 +59,49 @@ $indent: 16px;
         }
     }
 
-    .setting-choice {
+    .md-settings__dropdown-current-choice {
         color: $primary-text;
     }
 }
 
-.settings-dropdown {
+.md-settings__dropdown {
     position: relative;
 }
 
-.menu-wrapper {
+.md-menu {
     $primary-text: $gray-80;
     $secondary-text: $gray-60;
 
     position: absolute;
     width: 400px;
     left: 0;
-    top: 40px + 5px;
+    top: calc($toggle-height + 5px);
     background: white;
     border-radius: 4px;
     box-shadow: 0px 4px 23px 4px #0000000f;
     z-index: $zindex-controls-popup;
-    overflow-y: scroll;
 
     .overlay-header {
         padding-bottom: 0;
-        margin-bottom: 0;
     }
 
-    p {
-        margin-top: 0;
-        margin: 0 $indent;
+    .md-description {
         color: $secondary-text;
         font-size: 0.8em;
     }
 
-    .menu-group {
-        > label {
-            margin: 0 $indent;
+    .menu-dimension__description {
+        margin: 0 $indent;
+    }
+
+    .md-menu__options {
+        padding: 0 $indent;
+        overflow-y: auto;
+        max-height: 50vh;
+    }
+
+    .md-menu__group {
+        .md-menu__group-label {
             color: $light-text;
             font-weight: 600;
             font-size: 14px;
@@ -110,10 +110,7 @@ $indent: 16px;
         margin-bottom: 0.25em;
     }
 
-    .menu__radio-button {
-        font: $medium 14px/1.2 $lato;
-        color: $primary-text;
-        margin: 0 $indent;
+    .md-menu__radio-button {
         padding: $radio-button-padding-y 0;
 
         border-bottom: 1px solid $gray-20;
@@ -125,51 +122,5 @@ $indent: 16px;
         &:last-child {
             border-bottom: none;
         }
-
-        .labeled-switch .labeled-switch-subtitle,
-        .config-subtitle {
-            font-size: 13px;
-            margin: 5px 0;
-        }
-
-        .config-toggle {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            padding: 0.5em 0;
-        }
-
-        &.active {
-            button {
-                background: $active-fill;
-                border: 1px solid $active-fill;
-                color: $active-text;
-
-                &:hover {
-                    background: darken($active-fill, 5%);
-                }
-
-                &:active {
-                    background: darken($active-fill, 10%);
-                }
-            }
-        }
-
-        .description {
-            font-size: 12px;
-            color: $gray-60;
-            margin: 0;
-            margin-bottom: 5px;
-        }
     }
 }
-
-// transparent mouse-event catcher while popup is visible
-.menu-backdrop {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: $zindex-controls-backdrop;
-}
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index 5577205b0c3..3e29a224aaf 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -6,6 +6,7 @@ import cx from "classnames"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 import { isEqual } from "@ourworldindata/utils"
 import { OverlayHeader, RadioButton } from "@ourworldindata/components"
+import { useTriggerOnEscape, useTriggerWhenClickOutside } from "../hooks.js"
 
 const DimensionDropdown = (props: {
     dimension: DimensionEnriched
@@ -17,121 +18,91 @@ const DimensionDropdown = (props: {
     const [active, setActive] = useState(false)
 
     const toggleVisibility = useCallback(() => setActive(!active), [active])
+    const hide = useCallback(() => setActive(false), [])
 
     const dropdownRef = useRef<HTMLDivElement>(null)
 
-    useEffect(() => {
-        const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === "Escape") setActive(false)
-        }
-
-        document.addEventListener("keydown", handleEscape)
-        return () => document.removeEventListener("keydown", handleEscape)
-    }, [])
-
-    useEffect(() => {
-        const handleOutsideClick = (e: MouseEvent) => {
-            if (
-                active &&
-                dropdownRef.current &&
-                e.target instanceof Node &&
-                !dropdownRef.current.contains(e.target)
-            )
-                setActive(false)
-        }
-
-        document.addEventListener("click", handleOutsideClick)
-        return () => document.removeEventListener("click", handleOutsideClick)
-    }, [active])
+    useTriggerOnEscape(hide)
+    useTriggerWhenClickOutside(dropdownRef, active, hide)
 
     const currentChoice = dimension.choicesBySlug[props.currentChoiceSlug]
 
     return (
-        <div className="settings-dropdown" ref={dropdownRef}>
+        <div className="md-settings__dropdown" ref={dropdownRef}>
             <button
-                className={cx("menu-toggle", { active })}
+                className={cx("md-settings__dropdown-toggle", { active })}
                 onClick={toggleVisibility}
                 data-track-note="multi-dim-choice-dropdown"
                 type="button"
             >
-                <span className="setting-label">{dimension.name}</span>
-                <span className="setting-choice">{currentChoice.name}</span>
+                <span className="md-settings__dropdown-label">
+                    {dimension.name}
+                </span>
+                <span className="md-settings__dropdown-current-choice">
+                    {currentChoice.name}
+                </span>
                 <FontAwesomeIcon icon={faCaretDown} />
             </button>
             {active && (
-                <div className="menu">
-                    <div className="menu-contents">
-                        <div
-                            className="menu-backdrop"
-                            onClick={toggleVisibility}
-                        ></div>
-                        <div className="menu-wrapper">
-                            <OverlayHeader
-                                title={dimension.name}
-                                onDismiss={() => setActive(false)}
-                            />
-                            {dimension.description && (
-                                <p className="menu-dimension__description">
-                                    {dimension.description}
-                                </p>
-                            )}
-                            <div className="menu-options">
-                                {Object.entries(dimension.choicesByGroup).map(
-                                    ([groupLabel, groupChoices]) => (
-                                        <div
-                                            key={groupLabel}
-                                            className={cx("menu-group", {
-                                                "is-group":
-                                                    groupLabel !== "undefined",
-                                            })}
-                                        >
-                                            {groupLabel !== "undefined" && (
-                                                <label className="settings-group__label">
-                                                    {groupLabel}
-                                                </label>
-                                            )}
-                                            <div className="menu-group__options">
-                                                {groupChoices.map((choice) => (
-                                                    <div
-                                                        className="menu__radio-button"
-                                                        key={choice.slug}
-                                                    >
-                                                        <RadioButton
-                                                            checked={
-                                                                choice.slug ===
-                                                                props.currentChoiceSlug
-                                                            }
-                                                            label={
-                                                                <>
-                                                                    <div>
-                                                                        {
-                                                                            choice.name
-                                                                        }
-                                                                    </div>
-                                                                    {choice.description && (
-                                                                        <label className="description">
-                                                                            {
-                                                                                choice.description
-                                                                            }
-                                                                        </label>
-                                                                    )}
-                                                                </>
-                                                            }
-                                                            onChange={() =>
-                                                                props.onChange?.(
-                                                                    dimension.slug,
-                                                                    choice.slug
-                                                                )
-                                                            }
-                                                        />
-                                                    </div>
-                                                ))}
+                <div className="md-menu">
+                    <OverlayHeader title={dimension.name} onDismiss={hide} />
+                    {dimension.description && (
+                        <p className="md-description menu-dimension__description">
+                            {dimension.description}
+                        </p>
+                    )}
+                    <div className="md-menu__options">
+                        {Object.entries(dimension.choicesByGroup).map(
+                            ([groupLabel, groupChoices]) => (
+                                <div
+                                    key={groupLabel}
+                                    className={cx("md-menu__group", {
+                                        "is-group": groupLabel !== "undefined",
+                                    })}
+                                >
+                                    {groupLabel !== "undefined" && (
+                                        <label className="md-menu__group-label">
+                                            {groupLabel}
+                                        </label>
+                                    )}
+                                    <div className="md-menu__group-options">
+                                        {groupChoices.map((choice) => (
+                                            <div
+                                                className="md-menu__radio-button"
+                                                key={choice.slug}
+                                            >
+                                                <RadioButton
+                                                    checked={
+                                                        choice.slug ===
+                                                        props.currentChoiceSlug
+                                                    }
+                                                    label={
+                                                        <>
+                                                            <div>
+                                                                {choice.name}
+                                                            </div>
+                                                            {choice.description && (
+                                                                <label className="md-description">
+                                                                    {
+                                                                        choice.description
+                                                                    }
+                                                                </label>
+                                                            )}
+                                                        </>
+                                                    }
+                                                    onChange={() =>
+                                                        props.onChange?.(
+                                                            dimension.slug,
+                                                            choice.slug
+                                                        )
+                                                    }
+                                                />
                                             </div>
-                                        </div>
-                                    )
-                                )}
-                            </div>
-                        </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )
+                        )}
                     </div>
                 </div>
             )}
@@ -192,8 +163,10 @@ export const MultiDimSettingsPanel = (props: {
     ))
 
     return (
-        <div className="settings-row">
-            <span className="h5-black-caps">Configure the data</span>
+        <div className="md-settings-row">
+            <span className="h5-black-caps md-settings__configure-data">
+                Configure the data
+            </span>
             {settings}
         </div>
     )

From a8242ed2cbd61a7cc7c8307f79eec9f65012bd7d Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 15:03:42 +0100
Subject: [PATCH 18/65] fix: make ts happy

---
 site/GrapherWithFallback.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/site/GrapherWithFallback.tsx b/site/GrapherWithFallback.tsx
index b9b18acea4e..e8802598ebc 100644
--- a/site/GrapherWithFallback.tsx
+++ b/site/GrapherWithFallback.tsx
@@ -7,18 +7,14 @@ import GrapherImage from "./GrapherImage.js"
 
 export const GrapherWithFallback = ({
     grapher,
-    manager,
     slug,
     className,
     id,
-    getGrapherInstance,
 }: {
     grapher?: Grapher | undefined
-    manager?: GrapherManager
     slug?: string
     className?: string
     id?: string
-    getGrapherInstance?: (grapher: Grapher) => void
 }) => {
     return (
         <div
@@ -31,11 +27,7 @@ export const GrapherWithFallback = ({
         >
             <>
                 {grapher ? (
-                    <GrapherFigureView
-                        grapher={grapher}
-                        manager={manager}
-                        getGrapherInstance={getGrapherInstance}
-                    />
+                    <GrapherFigureView grapher={grapher} />
                 ) : (
                     // Render fallback svg when javascript disabled or while
                     // grapher is loading

From 080979978ee5fdabbf2f527e327f6533e6cf2e05 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 15:04:16 +0100
Subject: [PATCH 19/65] enhance: max width for dropdown text

---
 site/multiDim/MultiDimDataPageSettingsPanel.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.scss b/site/multiDim/MultiDimDataPageSettingsPanel.scss
index f9a9e68f169..36544c05ded 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.scss
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.scss
@@ -61,6 +61,10 @@ $toggle-height: 40px;
 
     .md-settings__dropdown-current-choice {
         color: $primary-text;
+        max-width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }
 

From cfdddcb76e19bd79d56a748074f52f188ea01262 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 15:05:38 +0100
Subject: [PATCH 20/65] style: remove unused import

---
 site/GrapherWithFallback.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/GrapherWithFallback.tsx b/site/GrapherWithFallback.tsx
index e8802598ebc..3849df575ff 100644
--- a/site/GrapherWithFallback.tsx
+++ b/site/GrapherWithFallback.tsx
@@ -1,4 +1,4 @@
-import { Grapher, GrapherManager } from "@ourworldindata/grapher"
+import { Grapher } from "@ourworldindata/grapher"
 import React from "react"
 import { GrapherFigureView } from "./GrapherFigureView.js"
 import cx from "classnames"

From 73a5969633f4a1f3c8c1aa2224e64e00080c2d56 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 16:59:20 +0100
Subject: [PATCH 21/65] feat(multi-dim): first steps towards baking

---
 baker/MultiDimBaker.ts | 48 ++++++++++++++++++++++++++++++++++++++++++
 baker/SiteBaker.tsx    | 11 ++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 baker/MultiDimBaker.ts

diff --git a/baker/MultiDimBaker.ts b/baker/MultiDimBaker.ts
new file mode 100644
index 00000000000..acf4e8f0ab2
--- /dev/null
+++ b/baker/MultiDimBaker.ts
@@ -0,0 +1,48 @@
+import yaml from "yaml"
+import fs from "fs-extra"
+import path from "path"
+import findProjectBaseDir from "../settings/findBaseDir.js"
+import { MultiDimDataPageConfigType } from "../site/multiDim/MultiDimDataPageTypes.js"
+import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
+import { renderMultiDimDataPage } from "./siteRenderers.js"
+import * as db from "../db/db.js"
+
+// TODO Make this dynamic
+const baseDir = findProjectBaseDir(__dirname)
+if (!baseDir) throw new Error("Could not find project base directory")
+const MULTI_DIM_CONFIG_DIR = path.join(baseDir, "public/multi-dim")
+
+const readMultiDimConfig = (filename: string) =>
+    yaml.parse(
+        fs.readFileSync(path.join(MULTI_DIM_CONFIG_DIR, filename), "utf8")
+    )
+
+const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigType> = {
+    "mdd-energy": readMultiDimConfig("energy.yml"),
+    "mdd-life-expectancy": readMultiDimConfig("life-expectancy.json"),
+    "mdd-plastic": readMultiDimConfig("plastic.json"),
+    "mdd-poverty": readMultiDimConfig("poverty.yml"),
+}
+
+export const bakeMultiDimDataPage = async (
+    bakedSiteDir: string,
+    slug: string
+) => {
+    const site = MULTI_DIM_SITES_BY_SLUG[slug]
+    if (!site) throw new Error(`No multi-dim site found for slug: ${slug}`)
+
+    const config = MultiDimDataPageConfig.fromObject(site)
+
+    const outPath = path.join(bakedSiteDir, `grapher/${slug}.html`)
+    const renderedHtml = await renderMultiDimDataPage(config)
+    await fs.writeFile(outPath, renderedHtml)
+}
+
+export const bakeAllMultiDimDataPages = async (
+    bakedSiteDir: string,
+    knex: db.KnexReadonlyTransaction
+) => {
+    for (const slug of Object.keys(MULTI_DIM_SITES_BY_SLUG)) {
+        await bakeMultiDimDataPage(bakedSiteDir, slug)
+    }
+}
diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
index ed49183ad42..c265348dfa1 100644
--- a/baker/SiteBaker.tsx
+++ b/baker/SiteBaker.tsx
@@ -105,6 +105,7 @@ import { getBakePath } from "@ourworldindata/components"
 import { GdocAuthor, getMinimalAuthors } from "../db/model/Gdoc/GdocAuthor.js"
 import { DATA_INSIGHTS_ATOM_FEED_NAME } from "../site/gdocs/utils.js"
 import { getRedirectsFromDb } from "../db/model/Redirect.js"
+import { bakeAllMultiDimDataPages } from "./MultiDimBaker.js"
 
 type PrefetchedAttachments = {
     linkedAuthors: LinkedAuthor[]
@@ -134,6 +135,7 @@ const nonWordpressSteps = [
     "countryProfiles",
     "explorers",
     "charts",
+    "multiDimPages",
     "gdocPosts",
     "gdriveImages",
     "dods",
@@ -752,6 +754,14 @@ export class SiteBaker {
         this.progressBar.tick({ name: "✅ validated grapher dods" })
     }
 
+    private async bakeMultiDimPages(knex: db.KnexReadonlyTransaction) {
+        if (!this.bakeSteps.has("multiDimPages")) return
+
+        await bakeAllMultiDimDataPages(this.bakedSiteDir, knex)
+
+        this.progressBar.tick({ name: "✅ baked multi-dim pages" })
+    }
+
     private async bakeDetailsOnDemand(knex: db.KnexReadonlyTransaction) {
         if (!this.bakeSteps.has("dods")) return
         if (!GDOCS_DETAILS_ON_DEMAND_ID) {
@@ -1059,6 +1069,7 @@ export class SiteBaker {
                 name: "✅ bakeAllChangedGrapherPagesVariablesPngSvgAndDeleteRemovedGraphers",
             })
         }
+        await this.bakeMultiDimPages(knex)
         await this.bakeDetailsOnDemand(knex)
         await this.validateGrapherDodReferences(knex)
         await this.bakeGDocPosts(knex)

From 53e2464497b0b0aaf670cf007b42cdedaaa452d5 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 17:25:58 +0100
Subject: [PATCH 22/65] enhance(multi-dim): better baking code, incl. mock
 router

---
 adminSiteServer/adminRouter.tsx               | 21 ----------
 adminSiteServer/appClass.tsx                  |  2 -
 adminSiteServer/mockSiteRouter.tsx            | 32 ++++++++++-----
 baker/{MultiDimBaker.ts => MultiDimBaker.tsx} | 40 ++++++++++++++-----
 baker/SiteBaker.tsx                           |  2 +-
 baker/siteRenderers.tsx                       |  8 ----
 6 files changed, 54 insertions(+), 51 deletions(-)
 rename baker/{MultiDimBaker.ts => MultiDimBaker.tsx} (55%)

diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
index 4545881bd83..bb818314245 100644
--- a/adminSiteServer/adminRouter.tsx
+++ b/adminSiteServer/adminRouter.tsx
@@ -13,7 +13,6 @@ import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.
 import {
     renderExplorerPage,
     renderGdoc,
-    renderMultiDimDataPage,
     renderPreview,
 } from "../baker/siteRenderers.js"
 import { GitCmsServer } from "../gitCms/GitCmsServer.js"
@@ -50,7 +49,6 @@ import {
     getPlainRouteNonIdempotentWithRWTransaction,
     getPlainRouteWithROTransaction,
 } from "./plainRouterHelpers.js"
-import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 
 // Used for rate-limiting important endpoints (login, register) to prevent brute force attacks
 const limiterMiddleware = (
@@ -357,25 +355,6 @@ getPlainRouteNonIdempotentWithRWTransaction(
     }
 )
 
-getPlainRouteNonIdempotentWithRWTransaction(
-    adminRouter,
-    "/multi-dim",
-    async (req, res, trx) => {
-        const reqUrl = new URL(req.url, `http://localhost/`)
-        const fetchUrl = reqUrl.searchParams.get("url")
-        if (!fetchUrl) return new JsonError("No URL provided", 400)
-        const configRaw = await fetch(fetchUrl).catch(() => null)
-        if (!configRaw) return new JsonError("Failed to fetch config", 500)
-        const config = await configRaw
-            .text()
-            .then(MultiDimDataPageConfig.fromYaml)
-
-        const page = await renderMultiDimDataPage(config)
-        res.send(page)
-        return
-    }
-)
-
 const gitCmsServer = new GitCmsServer({
     baseDir: GIT_CMS_DIR,
     shouldAutoPush: true,
diff --git a/adminSiteServer/appClass.tsx b/adminSiteServer/appClass.tsx
index e662538cbd7..09fe4867bb0 100644
--- a/adminSiteServer/appClass.tsx
+++ b/adminSiteServer/appClass.tsx
@@ -100,8 +100,6 @@ export class OwidAdminApp {
         app.use("/fonts", express.static("public/fonts"))
         app.use("/assets-admin", express.static("dist/assets-admin"))
 
-        app.use("/multi-dim-assets", express.static("public/multi-dim"))
-
         app.use("/api", publicApiRouter.router)
         app.use("/admin/api", apiRouter.router)
         app.use("/admin/test", testPageRouter)
diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.tsx
index 2638a56628c..0ecfe00054e 100644
--- a/adminSiteServer/mockSiteRouter.tsx
+++ b/adminSiteServer/mockSiteRouter.tsx
@@ -19,7 +19,6 @@ import {
     renderDataInsightsIndexPage,
     renderThankYouPage,
     makeDataInsightsAtomFeed,
-    renderMultiDimDataPage,
 } from "../baker/siteRenderers.js"
 import {
     BAKED_BASE_URL,
@@ -43,7 +42,7 @@ import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.
 import { grapherToSVG } from "../baker/GrapherImageBaker.js"
 import { getVariableData, getVariableMetadata } from "../db/model/Variable.js"
 import { MultiEmbedderTestPage } from "../site/multiembedder/MultiEmbedderTestPage.js"
-import { JsonError } from "@ourworldindata/utils"
+import { JsonError, noop } from "@ourworldindata/utils"
 import { GIT_CMS_DIR } from "../gitCms/GitCmsConstants.js"
 import { EXPLORERS_ROUTE_FOLDER } from "../explorer/ExplorerConstants.js"
 import { getExplorerRedirectForPath } from "../explorerAdminServer/ExplorerRedirects.js"
@@ -63,6 +62,7 @@ import {
 } from "./plainRouterHelpers.js"
 import { DEFAULT_LOCAL_BAKE_DIR } from "../site/SiteConstants.js"
 import { DATA_INSIGHTS_ATOM_FEED_NAME } from "../site/gdocs/utils.js"
+import { renderMultiDimDataPageBySlug } from "../baker/MultiDimBaker.js"
 
 require("express-async-errors")
 
@@ -202,15 +202,29 @@ getPlainRouteNonIdempotentWithRWTransaction(
     mockSiteRouter,
     "/grapher/:slug",
     async (req, res, trx) => {
-        const entity = await getChartConfigBySlug(trx, req.params.slug)
-        if (!entity) throw new JsonError("No such chart", 404)
+        const chartRow = await getChartConfigBySlug(trx, req.params.slug).catch(
+            noop
+        )
+        if (chartRow) {
+            // XXX add dev-prod parity for this
+            res.set("Access-Control-Allow-Origin", "*")
 
-        // XXX add dev-prod parity for this
-        res.set("Access-Control-Allow-Origin", "*")
+            const previewDataPageOrGrapherPage =
+                await renderPreviewDataPageOrGrapherPage(chartRow.config, trx)
+            res.send(previewDataPageOrGrapherPage)
+            return
+        } else {
+            const page = await renderMultiDimDataPageBySlug(
+                trx,
+                req.params.slug
+            ).catch(noop)
+            if (page) {
+                res.send(page)
+                return
+            }
+        }
 
-        const previewDataPageOrGrapherPage =
-            await renderPreviewDataPageOrGrapherPage(entity.config, trx)
-        res.send(previewDataPageOrGrapherPage)
+        throw new JsonError("No such chart", 404)
     }
 )
 
diff --git a/baker/MultiDimBaker.ts b/baker/MultiDimBaker.tsx
similarity index 55%
rename from baker/MultiDimBaker.ts
rename to baker/MultiDimBaker.tsx
index acf4e8f0ab2..7cc29e7ffde 100644
--- a/baker/MultiDimBaker.ts
+++ b/baker/MultiDimBaker.tsx
@@ -4,8 +4,11 @@ import path from "path"
 import findProjectBaseDir from "../settings/findBaseDir.js"
 import { MultiDimDataPageConfigType } from "../site/multiDim/MultiDimDataPageTypes.js"
 import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
-import { renderMultiDimDataPage } from "./siteRenderers.js"
 import * as db from "../db/db.js"
+import { renderToHtmlPage } from "./siteRenderers.js"
+import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
+import React from "react"
+import { BAKED_BASE_URL } from "../settings/clientSettings.js"
 
 // TODO Make this dynamic
 const baseDir = findProjectBaseDir(__dirname)
@@ -24,25 +27,42 @@ const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigType> = {
     "mdd-poverty": readMultiDimConfig("poverty.yml"),
 }
 
-export const bakeMultiDimDataPage = async (
-    bakedSiteDir: string,
+export const renderMultiDimDataPageBySlug = async (
+    knex: db.KnexReadonlyTransaction,
     slug: string
 ) => {
-    const site = MULTI_DIM_SITES_BY_SLUG[slug]
-    if (!site) throw new Error(`No multi-dim site found for slug: ${slug}`)
+    const rawConfig = MULTI_DIM_SITES_BY_SLUG[slug]
+    if (!rawConfig) throw new Error(`No multi-dim site found for slug: ${slug}`)
 
-    const config = MultiDimDataPageConfig.fromObject(site)
+    const config = MultiDimDataPageConfig.fromObject(rawConfig)
+    return renderToHtmlPage(
+        <MultiDimDataPage baseUrl={BAKED_BASE_URL} config={config} />
+    )
+}
 
+export const renderMultiDimDataPage = async (
+    config: MultiDimDataPageConfig
+) => {
+    return renderToHtmlPage(
+        <MultiDimDataPage baseUrl={BAKED_BASE_URL} config={config} />
+    )
+}
+
+export const bakeMultiDimDataPage = async (
+    knex: db.KnexReadonlyTransaction,
+    bakedSiteDir: string,
+    slug: string
+) => {
+    const renderedHtml = await renderMultiDimDataPageBySlug(knex, slug)
     const outPath = path.join(bakedSiteDir, `grapher/${slug}.html`)
-    const renderedHtml = await renderMultiDimDataPage(config)
     await fs.writeFile(outPath, renderedHtml)
 }
 
 export const bakeAllMultiDimDataPages = async (
-    bakedSiteDir: string,
-    knex: db.KnexReadonlyTransaction
+    knex: db.KnexReadonlyTransaction,
+    bakedSiteDir: string
 ) => {
     for (const slug of Object.keys(MULTI_DIM_SITES_BY_SLUG)) {
-        await bakeMultiDimDataPage(bakedSiteDir, slug)
+        await bakeMultiDimDataPage(knex, bakedSiteDir, slug)
     }
 }
diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
index c265348dfa1..76a424081ff 100644
--- a/baker/SiteBaker.tsx
+++ b/baker/SiteBaker.tsx
@@ -757,7 +757,7 @@ export class SiteBaker {
     private async bakeMultiDimPages(knex: db.KnexReadonlyTransaction) {
         if (!this.bakeSteps.has("multiDimPages")) return
 
-        await bakeAllMultiDimDataPages(this.bakedSiteDir, knex)
+        await bakeAllMultiDimDataPages(knex, this.bakedSiteDir)
 
         this.progressBar.tick({ name: "✅ baked multi-dim pages" })
     }
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index 87343fa37f4..063326ec055 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -865,11 +865,3 @@ const renderExplorerDefaultThumbnail = (): string => {
         <img src={`${BAKED_BASE_URL}/default-thumbnail.jpg`} />
     )
 }
-
-export const renderMultiDimDataPage = async (
-    config: MultiDimDataPageConfig
-) => {
-    return renderToHtmlPage(
-        <MultiDimDataPage baseUrl={BAKED_BASE_URL} config={config} />
-    )
-}

From c3f4f3c8a813349ce0da16f7a6a4484eb7d0659f Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 17:51:16 +0100
Subject: [PATCH 23/65] enhance: get rid of temporary url param handling

---
 site/multiDim/MultiDimDataPageConfig.test.ts |  8 ++------
 site/multiDim/MultiDimDataPageConfig.ts      |  5 -----
 site/multiDim/MultiDimDataPageContent.tsx    | 15 ++-------------
 3 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageConfig.test.ts b/site/multiDim/MultiDimDataPageConfig.test.ts
index e7dacb6dc70..f9ae23e417a 100644
--- a/site/multiDim/MultiDimDataPageConfig.test.ts
+++ b/site/multiDim/MultiDimDataPageConfig.test.ts
@@ -1,11 +1,7 @@
 #! /usr/bin/env jest
 
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-
-it("fromYaml", () => {
-    const config = MultiDimDataPageConfig.fromYaml(`name: Test`)
-    expect(config.config.name).toBe("Test")
-})
+import YAML from "yaml"
 
 it("fromObject", () => {
     const config = MultiDimDataPageConfig.fromObject({ name: "Test" } as any)
@@ -73,7 +69,7 @@ describe("methods", () => {
               title: ...
               subtitle: ...
 `
-    const config = MultiDimDataPageConfig.fromYaml(yaml)
+    const config = MultiDimDataPageConfig.fromObject(YAML.parse(yaml))
 
     it("dimensions", () => {
         expect(Object.keys(config.dimensions)).toEqual(["fuel_type", "sector"])
diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
index 5f1f7bafddd..ff61856a85f 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/site/multiDim/MultiDimDataPageConfig.ts
@@ -1,4 +1,3 @@
-import YAML from "yaml"
 import {
     Choice,
     ChoicesEnriched,
@@ -11,10 +10,6 @@ import { DimensionProperty, groupBy, keyBy } from "@ourworldindata/utils"
 export class MultiDimDataPageConfig {
     private constructor(public readonly config: MultiDimDataPageConfigType) {}
 
-    static fromYaml(yamlString: string) {
-        return new MultiDimDataPageConfig(YAML.parse(yamlString))
-    }
-
     static fromJson(jsonString: string) {
         return new MultiDimDataPageConfig(JSON.parse(jsonString))
     }
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 4cfeb41a79f..5bc71c2ed25 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -259,23 +259,12 @@ export const MultiDimDataPageContent = ({
 
     const bounds = useElementBounds(grapherFigureRef)
 
-    // TEMPORARY, only while we are using `url` as part of the query string
-    const urlQueryParam = getWindowQueryParams().url
-
     const queryStr = useMemo(
         () =>
             grapherChangedParams !== undefined
-                ? stateToQueryStr(
-                      { ...grapherChangedParams, url: urlQueryParam },
-                      currentSettings
-                  )
+                ? stateToQueryStr(grapherChangedParams, currentSettings)
                 : initialQueryStr,
-        [
-            grapherChangedParams,
-            urlQueryParam, // TEMPORARY
-            currentSettings,
-            initialQueryStr,
-        ]
+        [grapherChangedParams, currentSettings, initialQueryStr]
     )
 
     useEffect(() => {

From 0897b8dce79e7504739c973ba545a3bca4bfe093 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 18:13:56 +0100
Subject: [PATCH 24/65] chore: add causes-of-death to sample mdd pages

---
 baker/MultiDimBaker.tsx              |    1 +
 public/multi-dim/causes-of-death.yml | 4000 ++++++++++++++++++++++++++
 2 files changed, 4001 insertions(+)
 create mode 100644 public/multi-dim/causes-of-death.yml

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index 7cc29e7ffde..dc00251c79c 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -21,6 +21,7 @@ const readMultiDimConfig = (filename: string) =>
     )
 
 const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigType> = {
+    "mdd-causes-of-death": readMultiDimConfig("causes-of-death.yml"),
     "mdd-energy": readMultiDimConfig("energy.yml"),
     "mdd-life-expectancy": readMultiDimConfig("life-expectancy.json"),
     "mdd-plastic": readMultiDimConfig("plastic.json"),
diff --git a/public/multi-dim/causes-of-death.yml b/public/multi-dim/causes-of-death.yml
new file mode 100644
index 00000000000..0efb005cf8a
--- /dev/null
+++ b/public/multi-dim/causes-of-death.yml
@@ -0,0 +1,4000 @@
+dimensions:
+    - choices:
+          - description: See all causes side by side
+            name: All causes
+            slug: all
+          - description: null
+            name: Cardiovascular diseases
+            slug: Cardiovascular diseases
+          - description: null
+            name: Neoplasms
+            slug: Neoplasms
+          - description: null
+            name: Chronic respiratory diseases
+            slug: Chronic respiratory diseases
+          - description: null
+            name: Digestive diseases
+            slug: Digestive diseases
+          - description: null
+            name: Lower respiratory infections
+            slug: Lower respiratory infections
+          - description: null
+            name: Neonatal disorders
+            slug: Neonatal disorders
+          - description: null
+            name: Alzheimer's disease and other dementias
+            slug: Alzheimer's disease and other dementias
+          - description: null
+            name: Diabetes mellitus
+            slug: Diabetes mellitus
+          - description: null
+            name: Diarrheal diseases
+            slug: Diarrheal diseases
+          - description: null
+            name: Meningitis
+            slug: Meningitis
+          - description: null
+            name: Parkinson's disease
+            slug: Parkinson's disease
+          - description: null
+            name: Nutritional deficiencies
+            slug: Nutritional deficiencies
+          - description: null
+            name: Malaria
+            slug: Malaria
+          - description: null
+            name: Drowning
+            slug: Drowning
+          - description: null
+            name: Interpersonal violence
+            slug: Interpersonal violence
+          - description: null
+            name: Maternal disorders
+            slug: Maternal disorders
+          - description: null
+            name: HIV/AIDS
+            slug: HIV/AIDS
+          - description: null
+            name: Drug use disorders
+            slug: Drug use disorders
+          - description: null
+            name: Tuberculosis
+            slug: Tuberculosis
+          - description: null
+            name: Alcohol use disorders
+            slug: Alcohol use disorders
+          - description: null
+            name: Self-harm
+            slug: Self-harm
+          - description: null
+            name: Exposure to forces of nature
+            slug: Exposure to forces of nature
+          - description: null
+            name: Environmental heat and cold exposure
+            slug: Environmental heat and cold exposure
+          - description: null
+            name: Conflict and terrorism
+            slug: Conflict and terrorism
+          - description: null
+            name: Chronic kidney disease
+            slug: Chronic kidney disease
+          - description: null
+            name: Poisonings
+            slug: Poisonings
+          - description: null
+            name: Road injuries
+            slug: Road injuries
+          - description: null
+            name: Fire, heat, and hot substances
+            slug: Fire, heat, and hot substances
+          - description: null
+            name: Acute hepatitis
+            slug: Acute hepatitis
+          - description: null
+            name: COVID-19
+            slug: COVID-19
+      name: Cause of death
+      slug: cause
+    - choices:
+          - description: null
+            name: 15-49 years
+            slug: 15-49 years
+          - description: null
+            name: 5-14 years
+            slug: 5-14 years
+          - description: null
+            name: 50-69 years
+            slug: 50-69 years
+          - description: null
+            name: 70+ years
+            slug: 70+ years
+          - description: null
+            name: <5 years
+            slug: <5 years
+          - description: null
+            name: All ages
+            slug: All ages
+          - description: null
+            name: Age-standardized
+            slug: Age-standardized
+      name: Age group
+      slug: age
+    - choices:
+          - description: null
+            name: Number
+            slug: Number
+          - description: null
+            name: Percent
+            slug: Percent
+          - description: null
+            name: Rate
+            slug: Rate
+      name: Metric
+      slug: metric
+dimensions_title: by cause
+name: Causes of death
+views:
+    - dimensions:
+          age: 15-49 years
+          cause: Cardiovascular diseases
+          metric: Number
+      indicator_path:
+          917705: y
+    - dimensions:
+          age: 15-49 years
+          cause: Neoplasms
+          metric: Number
+      indicator_path:
+          918245: y
+    - dimensions:
+          age: 15-49 years
+          cause: Chronic respiratory diseases
+          metric: Number
+      indicator_path:
+          917770: y
+    - dimensions:
+          age: 15-49 years
+          cause: Digestive diseases
+          metric: Number
+      indicator_path:
+          917862: y
+    - dimensions:
+          age: 15-49 years
+          cause: Lower respiratory infections
+          metric: Number
+      indicator_path:
+          918135: y
+    - dimensions:
+          age: 15-49 years
+          cause: Alzheimer's disease and other dementias
+          metric: Number
+      indicator_path:
+          917635: y
+    - dimensions:
+          age: 15-49 years
+          cause: Diabetes mellitus
+          metric: Number
+      indicator_path:
+          917846: y
+    - dimensions:
+          age: 15-49 years
+          cause: Diarrheal diseases
+          metric: Number
+      indicator_path:
+          917856: y
+    - dimensions:
+          age: 15-49 years
+          cause: Meningitis
+          metric: Number
+      indicator_path:
+          918186: y
+    - dimensions:
+          age: 15-49 years
+          cause: Parkinson's disease
+          metric: Number
+      indicator_path:
+          918482: y
+    - dimensions:
+          age: 15-49 years
+          cause: Nutritional deficiencies
+          metric: Number
+      indicator_path:
+          918302: y
+    - dimensions:
+          age: 15-49 years
+          cause: Malaria
+          metric: Number
+      indicator_path:
+          918139: y
+    - dimensions:
+          age: 15-49 years
+          cause: Drowning
+          metric: Number
+      indicator_path:
+          917874: y
+    - dimensions:
+          age: 15-49 years
+          cause: Interpersonal violence
+          metric: Number
+      indicator_path:
+          918052: y
+    - dimensions:
+          age: 15-49 years
+          cause: Maternal disorders
+          metric: Number
+      indicator_path:
+          918163: y
+    - dimensions:
+          age: 15-49 years
+          cause: HIV/AIDS
+          metric: Number
+      indicator_path:
+          917997: y
+    - dimensions:
+          age: 15-49 years
+          cause: Drug use disorders
+          metric: Number
+      indicator_path:
+          917880: y
+    - dimensions:
+          age: 15-49 years
+          cause: Tuberculosis
+          metric: Number
+      indicator_path:
+          918679: y
+    - dimensions:
+          age: 15-49 years
+          cause: Alcohol use disorders
+          metric: Number
+      indicator_path:
+          917621: y
+    - dimensions:
+          age: 15-49 years
+          cause: Self-harm
+          metric: Number
+      indicator_path:
+          918578: y
+    - dimensions:
+          age: 15-49 years
+          cause: Exposure to forces of nature
+          metric: Number
+      indicator_path:
+          917931: y
+    - dimensions:
+          age: 15-49 years
+          cause: Environmental heat and cold exposure
+          metric: Number
+      indicator_path:
+          917923: y
+    - dimensions:
+          age: 15-49 years
+          cause: Conflict and terrorism
+          metric: Number
+      indicator_path:
+          917804: y
+    - dimensions:
+          age: 15-49 years
+          cause: Chronic kidney disease
+          metric: Number
+      indicator_path:
+          917733: y
+    - dimensions:
+          age: 15-49 years
+          cause: Poisonings
+          metric: Number
+      indicator_path:
+          918524: y
+    - dimensions:
+          age: 15-49 years
+          cause: Road injuries
+          metric: Number
+      indicator_path:
+          918569: y
+    - dimensions:
+          age: 15-49 years
+          cause: Fire, heat, and hot substances
+          metric: Number
+      indicator_path:
+          917954: y
+    - dimensions:
+          age: 15-49 years
+          cause: Acute hepatitis
+          metric: Number
+      indicator_path:
+          917583: y
+    - dimensions:
+          age: 15-49 years
+          cause: COVID-19
+          metric: Number
+      indicator_path:
+          917697: y
+    - dimensions:
+          age: 15-49 years
+          cause: all
+          metric: Number
+      indicator_path:
+          917583: y
+          917621: y
+          917635: y
+          917697: y
+          917705: y
+          917733: y
+          917770: y
+          917804: y
+          917846: y
+          917856: y
+          917862: y
+          917874: y
+          917880: y
+          917923: y
+          917931: y
+          917954: y
+          917997: y
+          918052: y
+          918135: y
+          918139: y
+          918163: y
+          918186: y
+          918245: y
+          918302: y
+          918482: y
+          918524: y
+          918569: y
+          918578: y
+          918679: y
+    - dimensions:
+          age: 15-49 years
+          cause: Cardiovascular diseases
+          metric: Percent
+      indicator_path:
+          923608: y
+    - dimensions:
+          age: 15-49 years
+          cause: Neoplasms
+          metric: Percent
+      indicator_path:
+          923878: y
+    - dimensions:
+          age: 15-49 years
+          cause: Chronic respiratory diseases
+          metric: Percent
+      indicator_path:
+          923642: y
+    - dimensions:
+          age: 15-49 years
+          cause: Digestive diseases
+          metric: Percent
+      indicator_path:
+          923691: y
+    - dimensions:
+          age: 15-49 years
+          cause: Lower respiratory infections
+          metric: Percent
+      indicator_path:
+          923825: y
+    - dimensions:
+          age: 15-49 years
+          cause: Alzheimer's disease and other dementias
+          metric: Percent
+      indicator_path:
+          923573: y
+    - dimensions:
+          age: 15-49 years
+          cause: Diabetes mellitus
+          metric: Percent
+      indicator_path:
+          923681: y
+    - dimensions:
+          age: 15-49 years
+          cause: Diarrheal diseases
+          metric: Percent
+      indicator_path:
+          923686: y
+    - dimensions:
+          age: 15-49 years
+          cause: Meningitis
+          metric: Percent
+      indicator_path:
+          923849: y
+    - dimensions:
+          age: 15-49 years
+          cause: Parkinson's disease
+          metric: Percent
+      indicator_path:
+          923995: y
+    - dimensions:
+          age: 15-49 years
+          cause: Nutritional deficiencies
+          metric: Percent
+      indicator_path:
+          923904: y
+    - dimensions:
+          age: 15-49 years
+          cause: Malaria
+          metric: Percent
+      indicator_path:
+          923823: y
+    - dimensions:
+          age: 15-49 years
+          cause: Drowning
+          metric: Percent
+      indicator_path:
+          923696: y
+    - dimensions:
+          age: 15-49 years
+          cause: Interpersonal violence
+          metric: Percent
+      indicator_path:
+          923781: y
+    - dimensions:
+          age: 15-49 years
+          cause: Maternal disorders
+          metric: Percent
+      indicator_path:
+          923836: y
+    - dimensions:
+          age: 15-49 years
+          cause: HIV/AIDS
+          metric: Percent
+      indicator_path:
+          923753: y
+    - dimensions:
+          age: 15-49 years
+          cause: Drug use disorders
+          metric: Percent
+      indicator_path:
+          923699: y
+    - dimensions:
+          age: 15-49 years
+          cause: Tuberculosis
+          metric: Percent
+      indicator_path:
+          924091: y
+    - dimensions:
+          age: 15-49 years
+          cause: Alcohol use disorders
+          metric: Percent
+      indicator_path:
+          923568: y
+    - dimensions:
+          age: 15-49 years
+          cause: Self-harm
+          metric: Percent
+      indicator_path:
+          924041: y
+    - dimensions:
+          age: 15-49 years
+          cause: Exposure to forces of nature
+          metric: Percent
+      indicator_path:
+          923724: y
+    - dimensions:
+          age: 15-49 years
+          cause: Environmental heat and cold exposure
+          metric: Percent
+      indicator_path:
+          923720: y
+    - dimensions:
+          age: 15-49 years
+          cause: Conflict and terrorism
+          metric: Percent
+      indicator_path:
+          923659: y
+    - dimensions:
+          age: 15-49 years
+          cause: Chronic kidney disease
+          metric: Percent
+      indicator_path:
+          923623: y
+    - dimensions:
+          age: 15-49 years
+          cause: Poisonings
+          metric: Percent
+      indicator_path:
+          924013: y
+    - dimensions:
+          age: 15-49 years
+          cause: Road injuries
+          metric: Percent
+      indicator_path:
+          924038: y
+    - dimensions:
+          age: 15-49 years
+          cause: Fire, heat, and hot substances
+          metric: Percent
+      indicator_path:
+          923733: y
+    - dimensions:
+          age: 15-49 years
+          cause: Acute hepatitis
+          metric: Percent
+      indicator_path:
+          923549: y
+    - dimensions:
+          age: 15-49 years
+          cause: COVID-19
+          metric: Percent
+      indicator_path:
+          923603: y
+    - dimensions:
+          age: 15-49 years
+          cause: all
+          metric: Percent
+      indicator_path:
+          923549: y
+          923568: y
+          923573: y
+          923603: y
+          923608: y
+          923623: y
+          923642: y
+          923659: y
+          923681: y
+          923686: y
+          923691: y
+          923696: y
+          923699: y
+          923720: y
+          923724: y
+          923733: y
+          923753: y
+          923781: y
+          923823: y
+          923825: y
+          923836: y
+          923849: y
+          923878: y
+          923904: y
+          923995: y
+          924013: y
+          924038: y
+          924041: y
+          924091: y
+    - dimensions:
+          age: 15-49 years
+          cause: Cardiovascular diseases
+          metric: Rate
+      indicator_path:
+          926847: y
+    - dimensions:
+          age: 15-49 years
+          cause: Neoplasms
+          metric: Rate
+      indicator_path:
+          927118: y
+    - dimensions:
+          age: 15-49 years
+          cause: Chronic respiratory diseases
+          metric: Rate
+      indicator_path:
+          926880: y
+    - dimensions:
+          age: 15-49 years
+          cause: Digestive diseases
+          metric: Rate
+      indicator_path:
+          926928: y
+    - dimensions:
+          age: 15-49 years
+          cause: Lower respiratory infections
+          metric: Rate
+      indicator_path:
+          927061: y
+    - dimensions:
+          age: 15-49 years
+          cause: Alzheimer's disease and other dementias
+          metric: Rate
+      indicator_path:
+          926811: y
+    - dimensions:
+          age: 15-49 years
+          cause: Diabetes mellitus
+          metric: Rate
+      indicator_path:
+          926916: y
+    - dimensions:
+          age: 15-49 years
+          cause: Diarrheal diseases
+          metric: Rate
+      indicator_path:
+          926922: y
+    - dimensions:
+          age: 15-49 years
+          cause: Meningitis
+          metric: Rate
+      indicator_path:
+          927088: y
+    - dimensions:
+          age: 15-49 years
+          cause: Parkinson's disease
+          metric: Rate
+      indicator_path:
+          927235: y
+    - dimensions:
+          age: 15-49 years
+          cause: Nutritional deficiencies
+          metric: Rate
+      indicator_path:
+          927145: y
+    - dimensions:
+          age: 15-49 years
+          cause: Malaria
+          metric: Rate
+      indicator_path:
+          927063: y
+    - dimensions:
+          age: 15-49 years
+          cause: Drowning
+          metric: Rate
+      indicator_path:
+          926933: y
+    - dimensions:
+          age: 15-49 years
+          cause: Interpersonal violence
+          metric: Rate
+      indicator_path:
+          927021: y
+    - dimensions:
+          age: 15-49 years
+          cause: Maternal disorders
+          metric: Rate
+      indicator_path:
+          927078: y
+    - dimensions:
+          age: 15-49 years
+          cause: HIV/AIDS
+          metric: Rate
+      indicator_path:
+          926991: y
+    - dimensions:
+          age: 15-49 years
+          cause: Drug use disorders
+          metric: Rate
+      indicator_path:
+          926935: y
+    - dimensions:
+          age: 15-49 years
+          cause: Tuberculosis
+          metric: Rate
+      indicator_path:
+          927335: y
+    - dimensions:
+          age: 15-49 years
+          cause: Alcohol use disorders
+          metric: Rate
+      indicator_path:
+          926804: y
+    - dimensions:
+          age: 15-49 years
+          cause: Self-harm
+          metric: Rate
+      indicator_path:
+          927280: y
+    - dimensions:
+          age: 15-49 years
+          cause: Exposure to forces of nature
+          metric: Rate
+      indicator_path:
+          926960: y
+    - dimensions:
+          age: 15-49 years
+          cause: Environmental heat and cold exposure
+          metric: Rate
+      indicator_path:
+          926956: y
+    - dimensions:
+          age: 15-49 years
+          cause: Conflict and terrorism
+          metric: Rate
+      indicator_path:
+          926896: y
+    - dimensions:
+          age: 15-49 years
+          cause: Chronic kidney disease
+          metric: Rate
+      indicator_path:
+          926861: y
+    - dimensions:
+          age: 15-49 years
+          cause: Poisonings
+          metric: Rate
+      indicator_path:
+          927255: y
+    - dimensions:
+          age: 15-49 years
+          cause: Road injuries
+          metric: Rate
+      indicator_path:
+          927277: y
+    - dimensions:
+          age: 15-49 years
+          cause: Fire, heat, and hot substances
+          metric: Rate
+      indicator_path:
+          926971: y
+    - dimensions:
+          age: 15-49 years
+          cause: Acute hepatitis
+          metric: Rate
+      indicator_path:
+          926786: y
+    - dimensions:
+          age: 15-49 years
+          cause: COVID-19
+          metric: Rate
+      indicator_path:
+          926842: y
+    - dimensions:
+          age: 15-49 years
+          cause: all
+          metric: Rate
+      indicator_path:
+          926786: y
+          926804: y
+          926811: y
+          926842: y
+          926847: y
+          926861: y
+          926880: y
+          926896: y
+          926916: y
+          926922: y
+          926928: y
+          926933: y
+          926935: y
+          926956: y
+          926960: y
+          926971: y
+          926991: y
+          927021: y
+          927061: y
+          927063: y
+          927078: y
+          927088: y
+          927118: y
+          927145: y
+          927235: y
+          927255: y
+          927277: y
+          927280: y
+          927335: y
+    - dimensions:
+          age: 5-14 years
+          cause: Cardiovascular diseases
+          metric: Number
+      indicator_path:
+          918855: y
+    - dimensions:
+          age: 5-14 years
+          cause: Neoplasms
+          metric: Number
+      indicator_path:
+          919321: y
+    - dimensions:
+          age: 5-14 years
+          cause: Chronic respiratory diseases
+          metric: Number
+      indicator_path:
+          918900: y
+    - dimensions:
+          age: 5-14 years
+          cause: Digestive diseases
+          metric: Number
+      indicator_path:
+          918980: y
+    - dimensions:
+          age: 5-14 years
+          cause: Lower respiratory infections
+          metric: Number
+      indicator_path:
+          919219: y
+    - dimensions:
+          age: 5-14 years
+          cause: Diabetes mellitus
+          metric: Number
+      indicator_path:
+          918961: y
+    - dimensions:
+          age: 5-14 years
+          cause: Diarrheal diseases
+          metric: Number
+      indicator_path:
+          918970: y
+    - dimensions:
+          age: 5-14 years
+          cause: Meningitis
+          metric: Number
+      indicator_path:
+          919268: y
+    - dimensions:
+          age: 5-14 years
+          cause: Nutritional deficiencies
+          metric: Number
+      indicator_path:
+          919350: y
+    - dimensions:
+          age: 5-14 years
+          cause: Malaria
+          metric: Number
+      indicator_path:
+          919224: y
+    - dimensions:
+          age: 5-14 years
+          cause: Drowning
+          metric: Number
+      indicator_path:
+          918991: y
+    - dimensions:
+          age: 5-14 years
+          cause: Interpersonal violence
+          metric: Number
+      indicator_path:
+          919160: y
+    - dimensions:
+          age: 5-14 years
+          cause: Maternal disorders
+          metric: Number
+      indicator_path:
+          919243: y
+    - dimensions:
+          age: 5-14 years
+          cause: HIV/AIDS
+          metric: Number
+      indicator_path:
+          919102: y
+    - dimensions:
+          age: 5-14 years
+          cause: Drug use disorders
+          metric: Number
+      indicator_path:
+          918996: y
+    - dimensions:
+          age: 5-14 years
+          cause: Tuberculosis
+          metric: Number
+      indicator_path:
+          919679: y
+    - dimensions:
+          age: 5-14 years
+          cause: Alcohol use disorders
+          metric: Number
+      indicator_path:
+          918798: y
+    - dimensions:
+          age: 5-14 years
+          cause: Self-harm
+          metric: Number
+      indicator_path:
+          919600: y
+    - dimensions:
+          age: 5-14 years
+          cause: Exposure to forces of nature
+          metric: Number
+      indicator_path:
+          919043: y
+    - dimensions:
+          age: 5-14 years
+          cause: Environmental heat and cold exposure
+          metric: Number
+      indicator_path:
+          919038: y
+    - dimensions:
+          age: 5-14 years
+          cause: Conflict and terrorism
+          metric: Number
+      indicator_path:
+          918920: y
+    - dimensions:
+          age: 5-14 years
+          cause: Chronic kidney disease
+          metric: Number
+      indicator_path:
+          918881: y
+    - dimensions:
+          age: 5-14 years
+          cause: Poisonings
+          metric: Number
+      indicator_path:
+          919543: y
+    - dimensions:
+          age: 5-14 years
+          cause: Road injuries
+          metric: Number
+      indicator_path:
+          919589: y
+    - dimensions:
+          age: 5-14 years
+          cause: Fire, heat, and hot substances
+          metric: Number
+      indicator_path:
+          919063: y
+    - dimensions:
+          age: 5-14 years
+          cause: Acute hepatitis
+          metric: Number
+      indicator_path:
+          918764: y
+    - dimensions:
+          age: 5-14 years
+          cause: COVID-19
+          metric: Number
+      indicator_path:
+          918843: y
+    - dimensions:
+          age: 5-14 years
+          cause: all
+          metric: Number
+      indicator_path:
+          918764: y
+          918798: y
+          918843: y
+          918855: y
+          918881: y
+          918900: y
+          918920: y
+          918961: y
+          918970: y
+          918980: y
+          918991: y
+          918996: y
+          919038: y
+          919043: y
+          919063: y
+          919102: y
+          919160: y
+          919219: y
+          919224: y
+          919243: y
+          919268: y
+          919321: y
+          919350: y
+          919543: y
+          919589: y
+          919600: y
+          919679: y
+    - dimensions:
+          age: 5-14 years
+          cause: Cardiovascular diseases
+          metric: Percent
+      indicator_path:
+          924180: y
+    - dimensions:
+          age: 5-14 years
+          cause: Neoplasms
+          metric: Percent
+      indicator_path:
+          924410: y
+    - dimensions:
+          age: 5-14 years
+          cause: Chronic respiratory diseases
+          metric: Percent
+      indicator_path:
+          924202: y
+    - dimensions:
+          age: 5-14 years
+          cause: Digestive diseases
+          metric: Percent
+      indicator_path:
+          924241: y
+    - dimensions:
+          age: 5-14 years
+          cause: Lower respiratory infections
+          metric: Percent
+      indicator_path:
+          924360: y
+    - dimensions:
+          age: 5-14 years
+          cause: Diabetes mellitus
+          metric: Percent
+      indicator_path:
+          924233: y
+    - dimensions:
+          age: 5-14 years
+          cause: Diarrheal diseases
+          metric: Percent
+      indicator_path:
+          924237: y
+    - dimensions:
+          age: 5-14 years
+          cause: Meningitis
+          metric: Percent
+      indicator_path:
+          924385: y
+    - dimensions:
+          age: 5-14 years
+          cause: Nutritional deficiencies
+          metric: Percent
+      indicator_path:
+          924424: y
+    - dimensions:
+          age: 5-14 years
+          cause: Malaria
+          metric: Percent
+      indicator_path:
+          924363: y
+    - dimensions:
+          age: 5-14 years
+          cause: Drowning
+          metric: Percent
+      indicator_path:
+          924247: y
+    - dimensions:
+          age: 5-14 years
+          cause: Interpersonal violence
+          metric: Percent
+      indicator_path:
+          924330: y
+    - dimensions:
+          age: 5-14 years
+          cause: Maternal disorders
+          metric: Percent
+      indicator_path:
+          924373: y
+    - dimensions:
+          age: 5-14 years
+          cause: HIV/AIDS
+          metric: Percent
+      indicator_path:
+          924302: y
+    - dimensions:
+          age: 5-14 years
+          cause: Drug use disorders
+          metric: Percent
+      indicator_path:
+          924249: y
+    - dimensions:
+          age: 5-14 years
+          cause: Tuberculosis
+          metric: Percent
+      indicator_path:
+          924590: y
+    - dimensions:
+          age: 5-14 years
+          cause: Alcohol use disorders
+          metric: Percent
+      indicator_path:
+          924151: y
+    - dimensions:
+          age: 5-14 years
+          cause: Self-harm
+          metric: Percent
+      indicator_path:
+          924548: y
+    - dimensions:
+          age: 5-14 years
+          cause: Exposure to forces of nature
+          metric: Percent
+      indicator_path:
+          924273: y
+    - dimensions:
+          age: 5-14 years
+          cause: Environmental heat and cold exposure
+          metric: Percent
+      indicator_path:
+          924270: y
+    - dimensions:
+          age: 5-14 years
+          cause: Conflict and terrorism
+          metric: Percent
+      indicator_path:
+          924212: y
+    - dimensions:
+          age: 5-14 years
+          cause: Chronic kidney disease
+          metric: Percent
+      indicator_path:
+          924192: y
+    - dimensions:
+          age: 5-14 years
+          cause: Poisonings
+          metric: Percent
+      indicator_path:
+          924521: y
+    - dimensions:
+          age: 5-14 years
+          cause: Road injuries
+          metric: Percent
+      indicator_path:
+          924544: y
+    - dimensions:
+          age: 5-14 years
+          cause: Fire, heat, and hot substances
+          metric: Percent
+      indicator_path:
+          924283: y
+    - dimensions:
+          age: 5-14 years
+          cause: Acute hepatitis
+          metric: Percent
+      indicator_path:
+          924134: y
+    - dimensions:
+          age: 5-14 years
+          cause: COVID-19
+          metric: Percent
+      indicator_path:
+          924175: y
+    - dimensions:
+          age: 5-14 years
+          cause: all
+          metric: Percent
+      indicator_path:
+          924134: y
+          924151: y
+          924175: y
+          924180: y
+          924192: y
+          924202: y
+          924212: y
+          924233: y
+          924237: y
+          924241: y
+          924247: y
+          924249: y
+          924270: y
+          924273: y
+          924283: y
+          924302: y
+          924330: y
+          924360: y
+          924363: y
+          924373: y
+          924385: y
+          924410: y
+          924424: y
+          924521: y
+          924544: y
+          924548: y
+          924590: y
+    - dimensions:
+          age: 5-14 years
+          cause: Cardiovascular diseases
+          metric: Rate
+      indicator_path:
+          927421: y
+    - dimensions:
+          age: 5-14 years
+          cause: Neoplasms
+          metric: Rate
+      indicator_path:
+          927650: y
+    - dimensions:
+          age: 5-14 years
+          cause: Chronic respiratory diseases
+          metric: Rate
+      indicator_path:
+          927442: y
+    - dimensions:
+          age: 5-14 years
+          cause: Digestive diseases
+          metric: Rate
+      indicator_path:
+          927481: y
+    - dimensions:
+          age: 5-14 years
+          cause: Lower respiratory infections
+          metric: Rate
+      indicator_path:
+          927600: y
+    - dimensions:
+          age: 5-14 years
+          cause: Diabetes mellitus
+          metric: Rate
+      indicator_path:
+          927473: y
+    - dimensions:
+          age: 5-14 years
+          cause: Diarrheal diseases
+          metric: Rate
+      indicator_path:
+          927477: y
+    - dimensions:
+          age: 5-14 years
+          cause: Meningitis
+          metric: Rate
+      indicator_path:
+          927625: y
+    - dimensions:
+          age: 5-14 years
+          cause: Nutritional deficiencies
+          metric: Rate
+      indicator_path:
+          927664: y
+    - dimensions:
+          age: 5-14 years
+          cause: Malaria
+          metric: Rate
+      indicator_path:
+          927602: y
+    - dimensions:
+          age: 5-14 years
+          cause: Drowning
+          metric: Rate
+      indicator_path:
+          927487: y
+    - dimensions:
+          age: 5-14 years
+          cause: Interpersonal violence
+          metric: Rate
+      indicator_path:
+          927571: y
+    - dimensions:
+          age: 5-14 years
+          cause: Maternal disorders
+          metric: Rate
+      indicator_path:
+          927614: y
+    - dimensions:
+          age: 5-14 years
+          cause: HIV/AIDS
+          metric: Rate
+      indicator_path:
+          927542: y
+    - dimensions:
+          age: 5-14 years
+          cause: Drug use disorders
+          metric: Rate
+      indicator_path:
+          927489: y
+    - dimensions:
+          age: 5-14 years
+          cause: Tuberculosis
+          metric: Rate
+      indicator_path:
+          927828: y
+    - dimensions:
+          age: 5-14 years
+          cause: Alcohol use disorders
+          metric: Rate
+      indicator_path:
+          927394: y
+    - dimensions:
+          age: 5-14 years
+          cause: Self-harm
+          metric: Rate
+      indicator_path:
+          927787: y
+    - dimensions:
+          age: 5-14 years
+          cause: Exposure to forces of nature
+          metric: Rate
+      indicator_path:
+          927513: y
+    - dimensions:
+          age: 5-14 years
+          cause: Environmental heat and cold exposure
+          metric: Rate
+      indicator_path:
+          927510: y
+    - dimensions:
+          age: 5-14 years
+          cause: Conflict and terrorism
+          metric: Rate
+      indicator_path:
+          927453: y
+    - dimensions:
+          age: 5-14 years
+          cause: Chronic kidney disease
+          metric: Rate
+      indicator_path:
+          927434: y
+    - dimensions:
+          age: 5-14 years
+          cause: Poisonings
+          metric: Rate
+      indicator_path:
+          927761: y
+    - dimensions:
+          age: 5-14 years
+          cause: Road injuries
+          metric: Rate
+      indicator_path:
+          927783: y
+    - dimensions:
+          age: 5-14 years
+          cause: Fire, heat, and hot substances
+          metric: Rate
+      indicator_path:
+          927523: y
+    - dimensions:
+          age: 5-14 years
+          cause: Acute hepatitis
+          metric: Rate
+      indicator_path:
+          927376: y
+    - dimensions:
+          age: 5-14 years
+          cause: COVID-19
+          metric: Rate
+      indicator_path:
+          927417: y
+    - dimensions:
+          age: 5-14 years
+          cause: all
+          metric: Rate
+      indicator_path:
+          927376: y
+          927394: y
+          927417: y
+          927421: y
+          927434: y
+          927442: y
+          927453: y
+          927473: y
+          927477: y
+          927481: y
+          927487: y
+          927489: y
+          927510: y
+          927513: y
+          927523: y
+          927542: y
+          927571: y
+          927600: y
+          927602: y
+          927614: y
+          927625: y
+          927650: y
+          927664: y
+          927761: y
+          927783: y
+          927787: y
+          927828: y
+    - dimensions:
+          age: 50-69 years
+          cause: Cardiovascular diseases
+          metric: Number
+      indicator_path:
+          919878: y
+    - dimensions:
+          age: 50-69 years
+          cause: Neoplasms
+          metric: Number
+      indicator_path:
+          920418: y
+    - dimensions:
+          age: 50-69 years
+          cause: Chronic respiratory diseases
+          metric: Number
+      indicator_path:
+          919944: y
+    - dimensions:
+          age: 50-69 years
+          cause: Digestive diseases
+          metric: Number
+      indicator_path:
+          920040: y
+    - dimensions:
+          age: 50-69 years
+          cause: Lower respiratory infections
+          metric: Number
+      indicator_path:
+          920313: y
+    - dimensions:
+          age: 50-69 years
+          cause: Alzheimer's disease and other dementias
+          metric: Number
+      indicator_path:
+          919811: y
+    - dimensions:
+          age: 50-69 years
+          cause: Diabetes mellitus
+          metric: Number
+      indicator_path:
+          920019: y
+    - dimensions:
+          age: 50-69 years
+          cause: Diarrheal diseases
+          metric: Number
+      indicator_path:
+          920029: y
+    - dimensions:
+          age: 50-69 years
+          cause: Meningitis
+          metric: Number
+      indicator_path:
+          920367: y
+    - dimensions:
+          age: 50-69 years
+          cause: Parkinson's disease
+          metric: Number
+      indicator_path:
+          920651: y
+    - dimensions:
+          age: 50-69 years
+          cause: Nutritional deficiencies
+          metric: Number
+      indicator_path:
+          920471: y
+    - dimensions:
+          age: 50-69 years
+          cause: Malaria
+          metric: Number
+      indicator_path:
+          920317: y
+    - dimensions:
+          age: 50-69 years
+          cause: Drowning
+          metric: Number
+      indicator_path:
+          920052: y
+    - dimensions:
+          age: 50-69 years
+          cause: Interpersonal violence
+          metric: Number
+      indicator_path:
+          920230: y
+    - dimensions:
+          age: 50-69 years
+          cause: Maternal disorders
+          metric: Number
+      indicator_path:
+          920341: y
+    - dimensions:
+          age: 50-69 years
+          cause: HIV/AIDS
+          metric: Number
+      indicator_path:
+          920168: y
+    - dimensions:
+          age: 50-69 years
+          cause: Drug use disorders
+          metric: Number
+      indicator_path:
+          920057: y
+    - dimensions:
+          age: 50-69 years
+          cause: Tuberculosis
+          metric: Number
+      indicator_path:
+          920850: y
+    - dimensions:
+          age: 50-69 years
+          cause: Alcohol use disorders
+          metric: Number
+      indicator_path:
+          919799: y
+    - dimensions:
+          age: 50-69 years
+          cause: Self-harm
+          metric: Number
+      indicator_path:
+          920748: y
+    - dimensions:
+          age: 50-69 years
+          cause: Exposure to forces of nature
+          metric: Number
+      indicator_path:
+          920103: y
+    - dimensions:
+          age: 50-69 years
+          cause: Environmental heat and cold exposure
+          metric: Number
+      indicator_path:
+          920096: y
+    - dimensions:
+          age: 50-69 years
+          cause: Conflict and terrorism
+          metric: Number
+      indicator_path:
+          919979: y
+    - dimensions:
+          age: 50-69 years
+          cause: Chronic kidney disease
+          metric: Number
+      indicator_path:
+          919909: y
+    - dimensions:
+          age: 50-69 years
+          cause: Poisonings
+          metric: Number
+      indicator_path:
+          920694: y
+    - dimensions:
+          age: 50-69 years
+          cause: Road injuries
+          metric: Number
+      indicator_path:
+          920741: y
+    - dimensions:
+          age: 50-69 years
+          cause: Fire, heat, and hot substances
+          metric: Number
+      indicator_path:
+          920123: y
+    - dimensions:
+          age: 50-69 years
+          cause: Acute hepatitis
+          metric: Number
+      indicator_path:
+          919760: y
+    - dimensions:
+          age: 50-69 years
+          cause: COVID-19
+          metric: Number
+      indicator_path:
+          919872: y
+    - dimensions:
+          age: 50-69 years
+          cause: all
+          metric: Number
+      indicator_path:
+          919760: y
+          919799: y
+          919811: y
+          919872: y
+          919878: y
+          919909: y
+          919944: y
+          919979: y
+          920019: y
+          920029: y
+          920040: y
+          920052: y
+          920057: y
+          920096: y
+          920103: y
+          920123: y
+          920168: y
+          920230: y
+          920313: y
+          920317: y
+          920341: y
+          920367: y
+          920418: y
+          920471: y
+          920651: y
+          920694: y
+          920741: y
+          920748: y
+          920850: y
+    - dimensions:
+          age: 50-69 years
+          cause: Cardiovascular diseases
+          metric: Percent
+      indicator_path:
+          924687: y
+    - dimensions:
+          age: 50-69 years
+          cause: Neoplasms
+          metric: Percent
+      indicator_path:
+          924952: y
+    - dimensions:
+          age: 50-69 years
+          cause: Chronic respiratory diseases
+          metric: Percent
+      indicator_path:
+          924720: y
+    - dimensions:
+          age: 50-69 years
+          cause: Digestive diseases
+          metric: Percent
+      indicator_path:
+          924769: y
+    - dimensions:
+          age: 50-69 years
+          cause: Lower respiratory infections
+          metric: Percent
+      indicator_path:
+          924899: y
+    - dimensions:
+          age: 50-69 years
+          cause: Alzheimer's disease and other dementias
+          metric: Percent
+      indicator_path:
+          924654: y
+    - dimensions:
+          age: 50-69 years
+          cause: Diabetes mellitus
+          metric: Percent
+      indicator_path:
+          924758: y
+    - dimensions:
+          age: 50-69 years
+          cause: Diarrheal diseases
+          metric: Percent
+      indicator_path:
+          924765: y
+    - dimensions:
+          age: 50-69 years
+          cause: Meningitis
+          metric: Percent
+      indicator_path:
+          924926: y
+    - dimensions:
+          age: 50-69 years
+          cause: Parkinson's disease
+          metric: Percent
+      indicator_path:
+          925066: y
+    - dimensions:
+          age: 50-69 years
+          cause: Nutritional deficiencies
+          metric: Percent
+      indicator_path:
+          924979: y
+    - dimensions:
+          age: 50-69 years
+          cause: Malaria
+          metric: Percent
+      indicator_path:
+          924901: y
+    - dimensions:
+          age: 50-69 years
+          cause: Drowning
+          metric: Percent
+      indicator_path:
+          924774: y
+    - dimensions:
+          age: 50-69 years
+          cause: Interpersonal violence
+          metric: Percent
+      indicator_path:
+          924859: y
+    - dimensions:
+          age: 50-69 years
+          cause: Maternal disorders
+          metric: Percent
+      indicator_path:
+          924914: y
+    - dimensions:
+          age: 50-69 years
+          cause: HIV/AIDS
+          metric: Percent
+      indicator_path:
+          924829: y
+    - dimensions:
+          age: 50-69 years
+          cause: Drug use disorders
+          metric: Percent
+      indicator_path:
+          924777: y
+    - dimensions:
+          age: 50-69 years
+          cause: Tuberculosis
+          metric: Percent
+      indicator_path:
+          925165: y
+    - dimensions:
+          age: 50-69 years
+          cause: Alcohol use disorders
+          metric: Percent
+      indicator_path:
+          924647: y
+    - dimensions:
+          age: 50-69 years
+          cause: Self-harm
+          metric: Percent
+      indicator_path:
+          925115: y
+    - dimensions:
+          age: 50-69 years
+          cause: Exposure to forces of nature
+          metric: Percent
+      indicator_path:
+          924799: y
+    - dimensions:
+          age: 50-69 years
+          cause: Environmental heat and cold exposure
+          metric: Percent
+      indicator_path:
+          924794: y
+    - dimensions:
+          age: 50-69 years
+          cause: Conflict and terrorism
+          metric: Percent
+      indicator_path:
+          924737: y
+    - dimensions:
+          age: 50-69 years
+          cause: Chronic kidney disease
+          metric: Percent
+      indicator_path:
+          924700: y
+    - dimensions:
+          age: 50-69 years
+          cause: Poisonings
+          metric: Percent
+      indicator_path:
+          925089: y
+    - dimensions:
+          age: 50-69 years
+          cause: Road injuries
+          metric: Percent
+      indicator_path:
+          925111: y
+    - dimensions:
+          age: 50-69 years
+          cause: Fire, heat, and hot substances
+          metric: Percent
+      indicator_path:
+          924809: y
+    - dimensions:
+          age: 50-69 years
+          cause: Acute hepatitis
+          metric: Percent
+      indicator_path:
+          924630: y
+    - dimensions:
+          age: 50-69 years
+          cause: COVID-19
+          metric: Percent
+      indicator_path:
+          924682: y
+    - dimensions:
+          age: 50-69 years
+          cause: all
+          metric: Percent
+      indicator_path:
+          924630: y
+          924647: y
+          924654: y
+          924682: y
+          924687: y
+          924700: y
+          924720: y
+          924737: y
+          924758: y
+          924765: y
+          924769: y
+          924774: y
+          924777: y
+          924794: y
+          924799: y
+          924809: y
+          924829: y
+          924859: y
+          924899: y
+          924901: y
+          924914: y
+          924926: y
+          924952: y
+          924979: y
+          925066: y
+          925089: y
+          925111: y
+          925115: y
+          925165: y
+    - dimensions:
+          age: 50-69 years
+          cause: Cardiovascular diseases
+          metric: Rate
+      indicator_path:
+          927925: y
+    - dimensions:
+          age: 50-69 years
+          cause: Neoplasms
+          metric: Rate
+      indicator_path:
+          928192: y
+    - dimensions:
+          age: 50-69 years
+          cause: Chronic respiratory diseases
+          metric: Rate
+      indicator_path:
+          927959: y
+    - dimensions:
+          age: 50-69 years
+          cause: Digestive diseases
+          metric: Rate
+      indicator_path:
+          928006: y
+    - dimensions:
+          age: 50-69 years
+          cause: Lower respiratory infections
+          metric: Rate
+      indicator_path:
+          928139: y
+    - dimensions:
+          age: 50-69 years
+          cause: Alzheimer's disease and other dementias
+          metric: Rate
+      indicator_path:
+          927893: y
+    - dimensions:
+          age: 50-69 years
+          cause: Diabetes mellitus
+          metric: Rate
+      indicator_path:
+          927996: y
+    - dimensions:
+          age: 50-69 years
+          cause: Diarrheal diseases
+          metric: Rate
+      indicator_path:
+          928001: y
+    - dimensions:
+          age: 50-69 years
+          cause: Meningitis
+          metric: Rate
+      indicator_path:
+          928166: y
+    - dimensions:
+          age: 50-69 years
+          cause: Parkinson's disease
+          metric: Rate
+      indicator_path:
+          928308: y
+    - dimensions:
+          age: 50-69 years
+          cause: Nutritional deficiencies
+          metric: Rate
+      indicator_path:
+          928220: y
+    - dimensions:
+          age: 50-69 years
+          cause: Malaria
+          metric: Rate
+      indicator_path:
+          928141: y
+    - dimensions:
+          age: 50-69 years
+          cause: Drowning
+          metric: Rate
+      indicator_path:
+          928013: y
+    - dimensions:
+          age: 50-69 years
+          cause: Interpersonal violence
+          metric: Rate
+      indicator_path:
+          928096: y
+    - dimensions:
+          age: 50-69 years
+          cause: Maternal disorders
+          metric: Rate
+      indicator_path:
+          928154: y
+    - dimensions:
+          age: 50-69 years
+          cause: HIV/AIDS
+          metric: Rate
+      indicator_path:
+          928066: y
+    - dimensions:
+          age: 50-69 years
+          cause: Drug use disorders
+          metric: Rate
+      indicator_path:
+          928015: y
+    - dimensions:
+          age: 50-69 years
+          cause: Tuberculosis
+          metric: Rate
+      indicator_path:
+          928405: y
+    - dimensions:
+          age: 50-69 years
+          cause: Alcohol use disorders
+          metric: Rate
+      indicator_path:
+          927886: y
+    - dimensions:
+          age: 50-69 years
+          cause: Self-harm
+          metric: Rate
+      indicator_path:
+          928355: y
+    - dimensions:
+          age: 50-69 years
+          cause: Exposure to forces of nature
+          metric: Rate
+      indicator_path:
+          928036: y
+    - dimensions:
+          age: 50-69 years
+          cause: Environmental heat and cold exposure
+          metric: Rate
+      indicator_path:
+          928032: y
+    - dimensions:
+          age: 50-69 years
+          cause: Conflict and terrorism
+          metric: Rate
+      indicator_path:
+          927975: y
+    - dimensions:
+          age: 50-69 years
+          cause: Chronic kidney disease
+          metric: Rate
+      indicator_path:
+          927941: y
+    - dimensions:
+          age: 50-69 years
+          cause: Poisonings
+          metric: Rate
+      indicator_path:
+          928328: y
+    - dimensions:
+          age: 50-69 years
+          cause: Road injuries
+          metric: Rate
+      indicator_path:
+          928351: y
+    - dimensions:
+          age: 50-69 years
+          cause: Fire, heat, and hot substances
+          metric: Rate
+      indicator_path:
+          928045: y
+    - dimensions:
+          age: 50-69 years
+          cause: Acute hepatitis
+          metric: Rate
+      indicator_path:
+          927868: y
+    - dimensions:
+          age: 50-69 years
+          cause: COVID-19
+          metric: Rate
+      indicator_path:
+          927922: y
+    - dimensions:
+          age: 50-69 years
+          cause: all
+          metric: Rate
+      indicator_path:
+          927868: y
+          927886: y
+          927893: y
+          927922: y
+          927925: y
+          927941: y
+          927959: y
+          927975: y
+          927996: y
+          928001: y
+          928006: y
+          928013: y
+          928015: y
+          928032: y
+          928036: y
+          928045: y
+          928066: y
+          928096: y
+          928139: y
+          928141: y
+          928154: y
+          928166: y
+          928192: y
+          928220: y
+          928308: y
+          928328: y
+          928351: y
+          928355: y
+          928405: y
+    - dimensions:
+          age: 70+ years
+          cause: Cardiovascular diseases
+          metric: Number
+      indicator_path:
+          921053: y
+    - dimensions:
+          age: 70+ years
+          cause: Neoplasms
+          metric: Number
+      indicator_path:
+          921522: y
+    - dimensions:
+          age: 70+ years
+          cause: Chronic respiratory diseases
+          metric: Number
+      indicator_path:
+          921121: y
+    - dimensions:
+          age: 70+ years
+          cause: Digestive diseases
+          metric: Number
+      indicator_path:
+          921200: y
+    - dimensions:
+          age: 70+ years
+          cause: Lower respiratory infections
+          metric: Number
+      indicator_path:
+          921445: y
+    - dimensions:
+          age: 70+ years
+          cause: Alzheimer's disease and other dementias
+          metric: Number
+      indicator_path:
+          920987: y
+    - dimensions:
+          age: 70+ years
+          cause: Diabetes mellitus
+          metric: Number
+      indicator_path:
+          921184: y
+    - dimensions:
+          age: 70+ years
+          cause: Diarrheal diseases
+          metric: Number
+      indicator_path:
+          921195: y
+    - dimensions:
+          age: 70+ years
+          cause: Meningitis
+          metric: Number
+      indicator_path:
+          921469: y
+    - dimensions:
+          age: 70+ years
+          cause: Parkinson's disease
+          metric: Number
+      indicator_path:
+          921744: y
+    - dimensions:
+          age: 70+ years
+          cause: Nutritional deficiencies
+          metric: Number
+      indicator_path:
+          921570: y
+    - dimensions:
+          age: 70+ years
+          cause: Malaria
+          metric: Number
+      indicator_path:
+          921454: y
+    - dimensions:
+          age: 70+ years
+          cause: Drowning
+          metric: Number
+      indicator_path:
+          921206: y
+    - dimensions:
+          age: 70+ years
+          cause: Interpersonal violence
+          metric: Number
+      indicator_path:
+          921373: y
+    - dimensions:
+          age: 70+ years
+          cause: HIV/AIDS
+          metric: Number
+      indicator_path:
+          921316: y
+    - dimensions:
+          age: 70+ years
+          cause: Drug use disorders
+          metric: Number
+      indicator_path:
+          921213: y
+    - dimensions:
+          age: 70+ years
+          cause: Tuberculosis
+          metric: Number
+      indicator_path:
+          921942: y
+    - dimensions:
+          age: 70+ years
+          cause: Alcohol use disorders
+          metric: Number
+      indicator_path:
+          920975: y
+    - dimensions:
+          age: 70+ years
+          cause: Self-harm
+          metric: Number
+      indicator_path:
+          921835: y
+    - dimensions:
+          age: 70+ years
+          cause: Exposure to forces of nature
+          metric: Number
+      indicator_path:
+          921253: y
+    - dimensions:
+          age: 70+ years
+          cause: Environmental heat and cold exposure
+          metric: Number
+      indicator_path:
+          921246: y
+    - dimensions:
+          age: 70+ years
+          cause: Conflict and terrorism
+          metric: Number
+      indicator_path:
+          921155: y
+    - dimensions:
+          age: 70+ years
+          cause: Chronic kidney disease
+          metric: Number
+      indicator_path:
+          921086: y
+    - dimensions:
+          age: 70+ years
+          cause: Poisonings
+          metric: Number
+      indicator_path:
+          921779: y
+    - dimensions:
+          age: 70+ years
+          cause: Road injuries
+          metric: Number
+      indicator_path:
+          921828: y
+    - dimensions:
+          age: 70+ years
+          cause: Fire, heat, and hot substances
+          metric: Number
+      indicator_path:
+          921276: y
+    - dimensions:
+          age: 70+ years
+          cause: Acute hepatitis
+          metric: Number
+      indicator_path:
+          920936: y
+    - dimensions:
+          age: 70+ years
+          cause: COVID-19
+          metric: Number
+      indicator_path:
+          921048: y
+    - dimensions:
+          age: 70+ years
+          cause: all
+          metric: Number
+      indicator_path:
+          920936: y
+          920975: y
+          920987: y
+          921048: y
+          921053: y
+          921086: y
+          921121: y
+          921155: y
+          921184: y
+          921195: y
+          921200: y
+          921206: y
+          921213: y
+          921246: y
+          921253: y
+          921276: y
+          921316: y
+          921373: y
+          921445: y
+          921454: y
+          921469: y
+          921522: y
+          921570: y
+          921744: y
+          921779: y
+          921828: y
+          921835: y
+          921942: y
+    - dimensions:
+          age: 70+ years
+          cause: Cardiovascular diseases
+          metric: Percent
+      indicator_path:
+          925266: y
+    - dimensions:
+          age: 70+ years
+          cause: Neoplasms
+          metric: Percent
+      indicator_path:
+          925498: y
+    - dimensions:
+          age: 70+ years
+          cause: Chronic respiratory diseases
+          metric: Percent
+      indicator_path:
+          925299: y
+    - dimensions:
+          age: 70+ years
+          cause: Digestive diseases
+          metric: Percent
+      indicator_path:
+          925340: y
+    - dimensions:
+          age: 70+ years
+          cause: Lower respiratory infections
+          metric: Percent
+      indicator_path:
+          925461: y
+    - dimensions:
+          age: 70+ years
+          cause: Alzheimer's disease and other dementias
+          metric: Percent
+      indicator_path:
+          925232: y
+    - dimensions:
+          age: 70+ years
+          cause: Diabetes mellitus
+          metric: Percent
+      indicator_path:
+          925330: y
+    - dimensions:
+          age: 70+ years
+          cause: Diarrheal diseases
+          metric: Percent
+      indicator_path:
+          925336: y
+    - dimensions:
+          age: 70+ years
+          cause: Meningitis
+          metric: Percent
+      indicator_path:
+          925470: y
+    - dimensions:
+          age: 70+ years
+          cause: Parkinson's disease
+          metric: Percent
+      indicator_path:
+          925605: y
+    - dimensions:
+          age: 70+ years
+          cause: Nutritional deficiencies
+          metric: Percent
+      indicator_path:
+          925523: y
+    - dimensions:
+          age: 70+ years
+          cause: Malaria
+          metric: Percent
+      indicator_path:
+          925463: y
+    - dimensions:
+          age: 70+ years
+          cause: Drowning
+          metric: Percent
+      indicator_path:
+          925343: y
+    - dimensions:
+          age: 70+ years
+          cause: Interpersonal violence
+          metric: Percent
+      indicator_path:
+          925420: y
+    - dimensions:
+          age: 70+ years
+          cause: HIV/AIDS
+          metric: Percent
+      indicator_path:
+          925394: y
+    - dimensions:
+          age: 70+ years
+          cause: Drug use disorders
+          metric: Percent
+      indicator_path:
+          925344: y
+    - dimensions:
+          age: 70+ years
+          cause: Tuberculosis
+          metric: Percent
+      indicator_path:
+          925704: y
+    - dimensions:
+          age: 70+ years
+          cause: Alcohol use disorders
+          metric: Percent
+      indicator_path:
+          925225: y
+    - dimensions:
+          age: 70+ years
+          cause: Self-harm
+          metric: Percent
+      indicator_path:
+          925652: y
+    - dimensions:
+          age: 70+ years
+          cause: Exposure to forces of nature
+          metric: Percent
+      indicator_path:
+          925363: y
+    - dimensions:
+          age: 70+ years
+          cause: Environmental heat and cold exposure
+          metric: Percent
+      indicator_path:
+          925359: y
+    - dimensions:
+          age: 70+ years
+          cause: Conflict and terrorism
+          metric: Percent
+      indicator_path:
+          925316: y
+    - dimensions:
+          age: 70+ years
+          cause: Chronic kidney disease
+          metric: Percent
+      indicator_path:
+          925281: y
+    - dimensions:
+          age: 70+ years
+          cause: Poisonings
+          metric: Percent
+      indicator_path:
+          925624: y
+    - dimensions:
+          age: 70+ years
+          cause: Road injuries
+          metric: Percent
+      indicator_path:
+          925648: y
+    - dimensions:
+          age: 70+ years
+          cause: Fire, heat, and hot substances
+          metric: Percent
+      indicator_path:
+          925374: y
+    - dimensions:
+          age: 70+ years
+          cause: Acute hepatitis
+          metric: Percent
+      indicator_path:
+          925206: y
+    - dimensions:
+          age: 70+ years
+          cause: COVID-19
+          metric: Percent
+      indicator_path:
+          925260: y
+    - dimensions:
+          age: 70+ years
+          cause: all
+          metric: Percent
+      indicator_path:
+          925206: y
+          925225: y
+          925232: y
+          925260: y
+          925266: y
+          925281: y
+          925299: y
+          925316: y
+          925330: y
+          925336: y
+          925340: y
+          925343: y
+          925344: y
+          925359: y
+          925363: y
+          925374: y
+          925394: y
+          925420: y
+          925461: y
+          925463: y
+          925470: y
+          925498: y
+          925523: y
+          925605: y
+          925624: y
+          925648: y
+          925652: y
+          925704: y
+    - dimensions:
+          age: 70+ years
+          cause: Cardiovascular diseases
+          metric: Rate
+      indicator_path:
+          928507: y
+    - dimensions:
+          age: 70+ years
+          cause: Neoplasms
+          metric: Rate
+      indicator_path:
+          928737: y
+    - dimensions:
+          age: 70+ years
+          cause: Chronic respiratory diseases
+          metric: Rate
+      indicator_path:
+          928539: y
+    - dimensions:
+          age: 70+ years
+          cause: Digestive diseases
+          metric: Rate
+      indicator_path:
+          928581: y
+    - dimensions:
+          age: 70+ years
+          cause: Lower respiratory infections
+          metric: Rate
+      indicator_path:
+          928700: y
+    - dimensions:
+          age: 70+ years
+          cause: Alzheimer's disease and other dementias
+          metric: Rate
+      indicator_path:
+          928473: y
+    - dimensions:
+          age: 70+ years
+          cause: Diabetes mellitus
+          metric: Rate
+      indicator_path:
+          928573: y
+    - dimensions:
+          age: 70+ years
+          cause: Diarrheal diseases
+          metric: Rate
+      indicator_path:
+          928580: y
+    - dimensions:
+          age: 70+ years
+          cause: Meningitis
+          metric: Rate
+      indicator_path:
+          928710: y
+    - dimensions:
+          age: 70+ years
+          cause: Parkinson's disease
+          metric: Rate
+      indicator_path:
+          928844: y
+    - dimensions:
+          age: 70+ years
+          cause: Nutritional deficiencies
+          metric: Rate
+      indicator_path:
+          928762: y
+    - dimensions:
+          age: 70+ years
+          cause: Malaria
+          metric: Rate
+      indicator_path:
+          928703: y
+    - dimensions:
+          age: 70+ years
+          cause: Drowning
+          metric: Rate
+      indicator_path:
+          928585: y
+    - dimensions:
+          age: 70+ years
+          cause: Interpersonal violence
+          metric: Rate
+      indicator_path:
+          928663: y
+    - dimensions:
+          age: 70+ years
+          cause: HIV/AIDS
+          metric: Rate
+      indicator_path:
+          928636: y
+    - dimensions:
+          age: 70+ years
+          cause: Drug use disorders
+          metric: Rate
+      indicator_path:
+          928588: y
+    - dimensions:
+          age: 70+ years
+          cause: Tuberculosis
+          metric: Rate
+      indicator_path:
+          928941: y
+    - dimensions:
+          age: 70+ years
+          cause: Alcohol use disorders
+          metric: Rate
+      indicator_path:
+          928467: y
+    - dimensions:
+          age: 70+ years
+          cause: Self-harm
+          metric: Rate
+      indicator_path:
+          928889: y
+    - dimensions:
+          age: 70+ years
+          cause: Exposure to forces of nature
+          metric: Rate
+      indicator_path:
+          928605: y
+    - dimensions:
+          age: 70+ years
+          cause: Environmental heat and cold exposure
+          metric: Rate
+      indicator_path:
+          928602: y
+    - dimensions:
+          age: 70+ years
+          cause: Conflict and terrorism
+          metric: Rate
+      indicator_path:
+          928558: y
+    - dimensions:
+          age: 70+ years
+          cause: Chronic kidney disease
+          metric: Rate
+      indicator_path:
+          928521: y
+    - dimensions:
+          age: 70+ years
+          cause: Poisonings
+          metric: Rate
+      indicator_path:
+          928862: y
+    - dimensions:
+          age: 70+ years
+          cause: Road injuries
+          metric: Rate
+      indicator_path:
+          928886: y
+    - dimensions:
+          age: 70+ years
+          cause: Fire, heat, and hot substances
+          metric: Rate
+      indicator_path:
+          928616: y
+    - dimensions:
+          age: 70+ years
+          cause: Acute hepatitis
+          metric: Rate
+      indicator_path:
+          928448: y
+    - dimensions:
+          age: 70+ years
+          cause: COVID-19
+          metric: Rate
+      indicator_path:
+          928503: y
+    - dimensions:
+          age: 70+ years
+          cause: all
+          metric: Rate
+      indicator_path:
+          928448: y
+          928467: y
+          928473: y
+          928503: y
+          928507: y
+          928521: y
+          928539: y
+          928558: y
+          928573: y
+          928580: y
+          928581: y
+          928585: y
+          928588: y
+          928602: y
+          928605: y
+          928616: y
+          928636: y
+          928663: y
+          928700: y
+          928703: y
+          928710: y
+          928737: y
+          928762: y
+          928844: y
+          928862: y
+          928886: y
+          928889: y
+          928941: y
+    - dimensions:
+          age: <5 years
+          cause: Cardiovascular diseases
+          metric: Number
+      indicator_path:
+          922101: y
+    - dimensions:
+          age: <5 years
+          cause: Neoplasms
+          metric: Number
+      indicator_path:
+          922390: y
+    - dimensions:
+          age: <5 years
+          cause: Chronic respiratory diseases
+          metric: Number
+      indicator_path:
+          922135: y
+    - dimensions:
+          age: <5 years
+          cause: Digestive diseases
+          metric: Number
+      indicator_path:
+          922190: y
+    - dimensions:
+          age: <5 years
+          cause: Lower respiratory infections
+          metric: Number
+      indicator_path:
+          922335: y
+    - dimensions:
+          age: <5 years
+          cause: Neonatal disorders
+          metric: Number
+      indicator_path:
+          922375: y
+    - dimensions:
+          age: <5 years
+          cause: Diabetes mellitus
+          metric: Number
+      indicator_path:
+          922177: y
+    - dimensions:
+          age: <5 years
+          cause: Diarrheal diseases
+          metric: Number
+      indicator_path:
+          922185: y
+    - dimensions:
+          age: <5 years
+          cause: Meningitis
+          metric: Number
+      indicator_path:
+          922352: y
+    - dimensions:
+          age: <5 years
+          cause: Nutritional deficiencies
+          metric: Number
+      indicator_path:
+          922411: y
+    - dimensions:
+          age: <5 years
+          cause: Malaria
+          metric: Number
+      indicator_path:
+          922336: y
+    - dimensions:
+          age: <5 years
+          cause: Drowning
+          metric: Number
+      indicator_path:
+          922200: y
+    - dimensions:
+          age: <5 years
+          cause: Interpersonal violence
+          metric: Number
+      indicator_path:
+          922306: y
+    - dimensions:
+          age: <5 years
+          cause: HIV/AIDS
+          metric: Number
+      indicator_path:
+          922263: y
+    - dimensions:
+          age: <5 years
+          cause: Drug use disorders
+          metric: Number
+      indicator_path:
+          922202: y
+    - dimensions:
+          age: <5 years
+          cause: Tuberculosis
+          metric: Number
+      indicator_path:
+          922639: y
+    - dimensions:
+          age: <5 years
+          cause: Alcohol use disorders
+          metric: Number
+      indicator_path:
+          922058: y
+    - dimensions:
+          age: <5 years
+          cause: Exposure to forces of nature
+          metric: Number
+      indicator_path:
+          922229: y
+    - dimensions:
+          age: <5 years
+          cause: Environmental heat and cold exposure
+          metric: Number
+      indicator_path:
+          922227: y
+    - dimensions:
+          age: <5 years
+          cause: Conflict and terrorism
+          metric: Number
+      indicator_path:
+          922147: y
+    - dimensions:
+          age: <5 years
+          cause: Chronic kidney disease
+          metric: Number
+      indicator_path:
+          922120: y
+    - dimensions:
+          age: <5 years
+          cause: Poisonings
+          metric: Number
+      indicator_path:
+          922551: y
+    - dimensions:
+          age: <5 years
+          cause: Road injuries
+          metric: Number
+      indicator_path:
+          922582: y
+    - dimensions:
+          age: <5 years
+          cause: Fire, heat, and hot substances
+          metric: Number
+      indicator_path:
+          922244: y
+    - dimensions:
+          age: <5 years
+          cause: Acute hepatitis
+          metric: Number
+      indicator_path:
+          922018: y
+    - dimensions:
+          age: <5 years
+          cause: COVID-19
+          metric: Number
+      indicator_path:
+          922096: y
+    - dimensions:
+          age: <5 years
+          cause: all
+          metric: Number
+      indicator_path:
+          922018: y
+          922058: y
+          922096: y
+          922101: y
+          922120: y
+          922135: y
+          922147: y
+          922177: y
+          922185: y
+          922190: y
+          922200: y
+          922202: y
+          922227: y
+          922229: y
+          922244: y
+          922263: y
+          922306: y
+          922335: y
+          922336: y
+          922352: y
+          922375: y
+          922390: y
+          922411: y
+          922551: y
+          922582: y
+          922639: y
+    - dimensions:
+          age: <5 years
+          cause: Cardiovascular diseases
+          metric: Percent
+      indicator_path:
+          925785: y
+    - dimensions:
+          age: <5 years
+          cause: Neoplasms
+          metric: Percent
+      indicator_path:
+          925977: y
+    - dimensions:
+          age: <5 years
+          cause: Chronic respiratory diseases
+          metric: Percent
+      indicator_path:
+          925806: y
+    - dimensions:
+          age: <5 years
+          cause: Digestive diseases
+          metric: Percent
+      indicator_path:
+          925844: y
+    - dimensions:
+          age: <5 years
+          cause: Lower respiratory infections
+          metric: Percent
+      indicator_path:
+          925941: y
+    - dimensions:
+          age: <5 years
+          cause: Neonatal disorders
+          metric: Percent
+      indicator_path:
+          925970: y
+    - dimensions:
+          age: <5 years
+          cause: Diabetes mellitus
+          metric: Percent
+      indicator_path:
+          925836: y
+    - dimensions:
+          age: <5 years
+          cause: Diarrheal diseases
+          metric: Percent
+      indicator_path:
+          925842: y
+    - dimensions:
+          age: <5 years
+          cause: Meningitis
+          metric: Percent
+      indicator_path:
+          925951: y
+    - dimensions:
+          age: <5 years
+          cause: Nutritional deficiencies
+          metric: Percent
+      indicator_path:
+          925992: y
+    - dimensions:
+          age: <5 years
+          cause: Malaria
+          metric: Percent
+      indicator_path:
+          925944: y
+    - dimensions:
+          age: <5 years
+          cause: Drowning
+          metric: Percent
+      indicator_path:
+          925851: y
+    - dimensions:
+          age: <5 years
+          cause: Interpersonal violence
+          metric: Percent
+      indicator_path:
+          925920: y
+    - dimensions:
+          age: <5 years
+          cause: HIV/AIDS
+          metric: Percent
+      indicator_path:
+          925893: y
+    - dimensions:
+          age: <5 years
+          cause: Drug use disorders
+          metric: Percent
+      indicator_path:
+          925853: y
+    - dimensions:
+          age: <5 years
+          cause: Tuberculosis
+          metric: Percent
+      indicator_path:
+          926143: y
+    - dimensions:
+          age: <5 years
+          cause: Alcohol use disorders
+          metric: Percent
+      indicator_path:
+          925761: y
+    - dimensions:
+          age: <5 years
+          cause: Exposure to forces of nature
+          metric: Percent
+      indicator_path:
+          925869: y
+    - dimensions:
+          age: <5 years
+          cause: Environmental heat and cold exposure
+          metric: Percent
+      indicator_path:
+          925866: y
+    - dimensions:
+          age: <5 years
+          cause: Conflict and terrorism
+          metric: Percent
+      indicator_path:
+          925814: y
+    - dimensions:
+          age: <5 years
+          cause: Chronic kidney disease
+          metric: Percent
+      indicator_path:
+          925795: y
+    - dimensions:
+          age: <5 years
+          cause: Poisonings
+          metric: Percent
+      indicator_path:
+          926082: y
+    - dimensions:
+          age: <5 years
+          cause: Road injuries
+          metric: Percent
+      indicator_path:
+          926103: y
+    - dimensions:
+          age: <5 years
+          cause: Fire, heat, and hot substances
+          metric: Percent
+      indicator_path:
+          925879: y
+    - dimensions:
+          age: <5 years
+          cause: Acute hepatitis
+          metric: Percent
+      indicator_path:
+          925743: y
+    - dimensions:
+          age: <5 years
+          cause: COVID-19
+          metric: Percent
+      indicator_path:
+          925781: y
+    - dimensions:
+          age: <5 years
+          cause: all
+          metric: Percent
+      indicator_path:
+          925743: y
+          925761: y
+          925781: y
+          925785: y
+          925795: y
+          925806: y
+          925814: y
+          925836: y
+          925842: y
+          925844: y
+          925851: y
+          925853: y
+          925866: y
+          925869: y
+          925879: y
+          925893: y
+          925920: y
+          925941: y
+          925944: y
+          925951: y
+          925970: y
+          925977: y
+          925992: y
+          926082: y
+          926103: y
+          926143: y
+    - dimensions:
+          age: <5 years
+          cause: Cardiovascular diseases
+          metric: Rate
+      indicator_path:
+          929021: y
+    - dimensions:
+          age: <5 years
+          cause: Neoplasms
+          metric: Rate
+      indicator_path:
+          929214: y
+    - dimensions:
+          age: <5 years
+          cause: Chronic respiratory diseases
+          metric: Rate
+      indicator_path:
+          929043: y
+    - dimensions:
+          age: <5 years
+          cause: Digestive diseases
+          metric: Rate
+      indicator_path:
+          929080: y
+    - dimensions:
+          age: <5 years
+          cause: Lower respiratory infections
+          metric: Rate
+      indicator_path:
+          929177: y
+    - dimensions:
+          age: <5 years
+          cause: Neonatal disorders
+          metric: Rate
+      indicator_path:
+          929206: y
+    - dimensions:
+          age: <5 years
+          cause: Diabetes mellitus
+          metric: Rate
+      indicator_path:
+          929070: y
+    - dimensions:
+          age: <5 years
+          cause: Diarrheal diseases
+          metric: Rate
+      indicator_path:
+          929075: y
+    - dimensions:
+          age: <5 years
+          cause: Meningitis
+          metric: Rate
+      indicator_path:
+          929188: y
+    - dimensions:
+          age: <5 years
+          cause: Nutritional deficiencies
+          metric: Rate
+      indicator_path:
+          929229: y
+    - dimensions:
+          age: <5 years
+          cause: Malaria
+          metric: Rate
+      indicator_path:
+          929180: y
+    - dimensions:
+          age: <5 years
+          cause: Drowning
+          metric: Rate
+      indicator_path:
+          929086: y
+    - dimensions:
+          age: <5 years
+          cause: Interpersonal violence
+          metric: Rate
+      indicator_path:
+          929155: y
+    - dimensions:
+          age: <5 years
+          cause: HIV/AIDS
+          metric: Rate
+      indicator_path:
+          929126: y
+    - dimensions:
+          age: <5 years
+          cause: Drug use disorders
+          metric: Rate
+      indicator_path:
+          929089: y
+    - dimensions:
+          age: <5 years
+          cause: Tuberculosis
+          metric: Rate
+      indicator_path:
+          929378: y
+    - dimensions:
+          age: <5 years
+          cause: Alcohol use disorders
+          metric: Rate
+      indicator_path:
+          929000: y
+    - dimensions:
+          age: <5 years
+          cause: Exposure to forces of nature
+          metric: Rate
+      indicator_path:
+          929103: y
+    - dimensions:
+          age: <5 years
+          cause: Environmental heat and cold exposure
+          metric: Rate
+      indicator_path:
+          929101: y
+    - dimensions:
+          age: <5 years
+          cause: Conflict and terrorism
+          metric: Rate
+      indicator_path:
+          929051: y
+    - dimensions:
+          age: <5 years
+          cause: Chronic kidney disease
+          metric: Rate
+      indicator_path:
+          929030: y
+    - dimensions:
+          age: <5 years
+          cause: Poisonings
+          metric: Rate
+      indicator_path:
+          929318: y
+    - dimensions:
+          age: <5 years
+          cause: Road injuries
+          metric: Rate
+      indicator_path:
+          929339: y
+    - dimensions:
+          age: <5 years
+          cause: Fire, heat, and hot substances
+          metric: Rate
+      indicator_path:
+          929114: y
+    - dimensions:
+          age: <5 years
+          cause: Acute hepatitis
+          metric: Rate
+      indicator_path:
+          928982: y
+    - dimensions:
+          age: <5 years
+          cause: COVID-19
+          metric: Rate
+      indicator_path:
+          929017: y
+    - dimensions:
+          age: <5 years
+          cause: all
+          metric: Rate
+      indicator_path:
+          928982: y
+          929000: y
+          929017: y
+          929021: y
+          929030: y
+          929043: y
+          929051: y
+          929070: y
+          929075: y
+          929080: y
+          929086: y
+          929089: y
+          929101: y
+          929103: y
+          929114: y
+          929126: y
+          929155: y
+          929177: y
+          929180: y
+          929188: y
+          929206: y
+          929214: y
+          929229: y
+          929318: y
+          929339: y
+          929378: y
+    - dimensions:
+          age: All ages
+          cause: Cardiovascular diseases
+          metric: Number
+      indicator_path:
+          922787: y
+    - dimensions:
+          age: All ages
+          cause: Neoplasms
+          metric: Number
+      indicator_path:
+          923200: y
+    - dimensions:
+          age: All ages
+          cause: Chronic respiratory diseases
+          metric: Number
+      indicator_path:
+          922835: y
+    - dimensions:
+          age: All ages
+          cause: Digestive diseases
+          metric: Number
+      indicator_path:
+          922902: y
+    - dimensions:
+          age: All ages
+          cause: Lower respiratory infections
+          metric: Number
+      indicator_path:
+          923105: y
+    - dimensions:
+          age: All ages
+          cause: Neonatal disorders
+          metric: Number
+      indicator_path:
+          923189: y
+    - dimensions:
+          age: All ages
+          cause: Alzheimer's disease and other dementias
+          metric: Number
+      indicator_path:
+          922732: y
+    - dimensions:
+          age: All ages
+          cause: Diabetes mellitus
+          metric: Number
+      indicator_path:
+          922886: y
+    - dimensions:
+          age: All ages
+          cause: Diarrheal diseases
+          metric: Number
+      indicator_path:
+          922894: y
+    - dimensions:
+          age: All ages
+          cause: Meningitis
+          metric: Number
+      indicator_path:
+          923145: y
+    - dimensions:
+          age: All ages
+          cause: Parkinson's disease
+          metric: Number
+      indicator_path:
+          923379: y
+    - dimensions:
+          age: All ages
+          cause: Nutritional deficiencies
+          metric: Number
+      indicator_path:
+          923241: y
+    - dimensions:
+          age: All ages
+          cause: Malaria
+          metric: Number
+      indicator_path:
+          923108: y
+    - dimensions:
+          age: All ages
+          cause: Drowning
+          metric: Number
+      indicator_path:
+          922910: y
+    - dimensions:
+          age: All ages
+          cause: Interpersonal violence
+          metric: Number
+      indicator_path:
+          923046: y
+    - dimensions:
+          age: All ages
+          cause: Maternal disorders
+          metric: Number
+      indicator_path:
+          923125: y
+    - dimensions:
+          age: All ages
+          cause: HIV/AIDS
+          metric: Number
+      indicator_path:
+          922998: y
+    - dimensions:
+          age: All ages
+          cause: Drug use disorders
+          metric: Number
+      indicator_path:
+          922913: y
+    - dimensions:
+          age: All ages
+          cause: Tuberculosis
+          metric: Number
+      indicator_path:
+          923509: y
+    - dimensions:
+          age: All ages
+          cause: Alcohol use disorders
+          metric: Number
+      indicator_path:
+          922723: y
+    - dimensions:
+          age: All ages
+          cause: Self-harm
+          metric: Number
+      indicator_path:
+          923453: y
+    - dimensions:
+          age: All ages
+          cause: Exposure to forces of nature
+          metric: Number
+      indicator_path:
+          922951: y
+    - dimensions:
+          age: All ages
+          cause: Environmental heat and cold exposure
+          metric: Number
+      indicator_path:
+          922943: y
+    - dimensions:
+          age: All ages
+          cause: Conflict and terrorism
+          metric: Number
+      indicator_path:
+          922858: y
+    - dimensions:
+          age: All ages
+          cause: Chronic kidney disease
+          metric: Number
+      indicator_path:
+          922808: y
+    - dimensions:
+          age: All ages
+          cause: Poisonings
+          metric: Number
+      indicator_path:
+          923410: y
+    - dimensions:
+          age: All ages
+          cause: Road injuries
+          metric: Number
+      indicator_path:
+          923449: y
+    - dimensions:
+          age: All ages
+          cause: Fire, heat, and hot substances
+          metric: Number
+      indicator_path:
+          922968: y
+    - dimensions:
+          age: All ages
+          cause: Acute hepatitis
+          metric: Number
+      indicator_path:
+          922696: y
+    - dimensions:
+          age: All ages
+          cause: COVID-19
+          metric: Number
+      indicator_path:
+          922779: y
+    - dimensions:
+          age: All ages
+          cause: all
+          metric: Number
+      indicator_path:
+          922696: y
+          922723: y
+          922732: y
+          922779: y
+          922787: y
+          922808: y
+          922835: y
+          922858: y
+          922886: y
+          922894: y
+          922902: y
+          922910: y
+          922913: y
+          922943: y
+          922951: y
+          922968: y
+          922998: y
+          923046: y
+          923105: y
+          923108: y
+          923125: y
+          923145: y
+          923189: y
+          923200: y
+          923241: y
+          923379: y
+          923410: y
+          923449: y
+          923453: y
+          923509: y
+    - dimensions:
+          age: All ages
+          cause: Cardiovascular diseases
+          metric: Percent
+      indicator_path:
+          926241: y
+    - dimensions:
+          age: All ages
+          cause: Neoplasms
+          metric: Percent
+      indicator_path:
+          926523: y
+    - dimensions:
+          age: All ages
+          cause: Chronic respiratory diseases
+          metric: Percent
+      indicator_path:
+          926274: y
+    - dimensions:
+          age: All ages
+          cause: Digestive diseases
+          metric: Percent
+      indicator_path:
+          926320: y
+    - dimensions:
+          age: All ages
+          cause: Lower respiratory infections
+          metric: Percent
+      indicator_path:
+          926459: y
+    - dimensions:
+          age: All ages
+          cause: Neonatal disorders
+          metric: Percent
+      indicator_path:
+          926515: y
+    - dimensions:
+          age: All ages
+          cause: Alzheimer's disease and other dementias
+          metric: Percent
+      indicator_path:
+          926207: y
+    - dimensions:
+          age: All ages
+          cause: Diabetes mellitus
+          metric: Percent
+      indicator_path:
+          926311: y
+    - dimensions:
+          age: All ages
+          cause: Diarrheal diseases
+          metric: Percent
+      indicator_path:
+          926317: y
+    - dimensions:
+          age: All ages
+          cause: Meningitis
+          metric: Percent
+      indicator_path:
+          926486: y
+    - dimensions:
+          age: All ages
+          cause: Parkinson's disease
+          metric: Percent
+      indicator_path:
+          926642: y
+    - dimensions:
+          age: All ages
+          cause: Nutritional deficiencies
+          metric: Percent
+      indicator_path:
+          926550: y
+    - dimensions:
+          age: All ages
+          cause: Malaria
+          metric: Percent
+      indicator_path:
+          926462: y
+    - dimensions:
+          age: All ages
+          cause: Drowning
+          metric: Percent
+      indicator_path:
+          926327: y
+    - dimensions:
+          age: All ages
+          cause: Interpersonal violence
+          metric: Percent
+      indicator_path:
+          926418: y
+    - dimensions:
+          age: All ages
+          cause: Maternal disorders
+          metric: Percent
+      indicator_path:
+          926473: y
+    - dimensions:
+          age: All ages
+          cause: HIV/AIDS
+          metric: Percent
+      indicator_path:
+          926386: y
+    - dimensions:
+          age: All ages
+          cause: Drug use disorders
+          metric: Percent
+      indicator_path:
+          926329: y
+    - dimensions:
+          age: All ages
+          cause: Tuberculosis
+          metric: Percent
+      indicator_path:
+          926745: y
+    - dimensions:
+          age: All ages
+          cause: Alcohol use disorders
+          metric: Percent
+      indicator_path:
+          926200: y
+    - dimensions:
+          age: All ages
+          cause: Self-harm
+          metric: Percent
+      indicator_path:
+          926692: y
+    - dimensions:
+          age: All ages
+          cause: Exposure to forces of nature
+          metric: Percent
+      indicator_path:
+          926353: y
+    - dimensions:
+          age: All ages
+          cause: Environmental heat and cold exposure
+          metric: Percent
+      indicator_path:
+          926350: y
+    - dimensions:
+          age: All ages
+          cause: Conflict and terrorism
+          metric: Percent
+      indicator_path:
+          926290: y
+    - dimensions:
+          age: All ages
+          cause: Chronic kidney disease
+          metric: Percent
+      indicator_path:
+          926255: y
+    - dimensions:
+          age: All ages
+          cause: Poisonings
+          metric: Percent
+      indicator_path:
+          926662: y
+    - dimensions:
+          age: All ages
+          cause: Road injuries
+          metric: Percent
+      indicator_path:
+          926687: y
+    - dimensions:
+          age: All ages
+          cause: Fire, heat, and hot substances
+          metric: Percent
+      indicator_path:
+          926364: y
+    - dimensions:
+          age: All ages
+          cause: Acute hepatitis
+          metric: Percent
+      indicator_path:
+          926180: y
+    - dimensions:
+          age: All ages
+          cause: COVID-19
+          metric: Percent
+      indicator_path:
+          926236: y
+    - dimensions:
+          age: All ages
+          cause: all
+          metric: Percent
+      indicator_path:
+          926180: y
+          926200: y
+          926207: y
+          926236: y
+          926241: y
+          926255: y
+          926274: y
+          926290: y
+          926311: y
+          926317: y
+          926320: y
+          926327: y
+          926329: y
+          926350: y
+          926353: y
+          926364: y
+          926386: y
+          926418: y
+          926459: y
+          926462: y
+          926473: y
+          926486: y
+          926515: y
+          926523: y
+          926550: y
+          926642: y
+          926662: y
+          926687: y
+          926692: y
+          926745: y
+    - dimensions:
+          age: All ages
+          cause: Cardiovascular diseases
+          metric: Rate
+      indicator_path:
+          930083: y
+    - dimensions:
+          age: All ages
+          cause: Neoplasms
+          metric: Rate
+      indicator_path:
+          930366: y
+    - dimensions:
+          age: All ages
+          cause: Chronic respiratory diseases
+          metric: Rate
+      indicator_path:
+          930116: y
+    - dimensions:
+          age: All ages
+          cause: Digestive diseases
+          metric: Rate
+      indicator_path:
+          930164: y
+    - dimensions:
+          age: All ages
+          cause: Lower respiratory infections
+          metric: Rate
+      indicator_path:
+          930303: y
+    - dimensions:
+          age: All ages
+          cause: Neonatal disorders
+          metric: Rate
+      indicator_path:
+          930358: y
+    - dimensions:
+          age: All ages
+          cause: Alzheimer's disease and other dementias
+          metric: Rate
+      indicator_path:
+          930047: y
+    - dimensions:
+          age: All ages
+          cause: Diabetes mellitus
+          metric: Rate
+      indicator_path:
+          930153: y
+    - dimensions:
+          age: All ages
+          cause: Diarrheal diseases
+          metric: Rate
+      indicator_path:
+          930159: y
+    - dimensions:
+          age: All ages
+          cause: Meningitis
+          metric: Rate
+      indicator_path:
+          930329: y
+    - dimensions:
+          age: All ages
+          cause: Parkinson's disease
+          metric: Rate
+      indicator_path:
+          930486: y
+    - dimensions:
+          age: All ages
+          cause: Nutritional deficiencies
+          metric: Rate
+      indicator_path:
+          930394: y
+    - dimensions:
+          age: All ages
+          cause: Malaria
+          metric: Rate
+      indicator_path:
+          930306: y
+    - dimensions:
+          age: All ages
+          cause: Drowning
+          metric: Rate
+      indicator_path:
+          930170: y
+    - dimensions:
+          age: All ages
+          cause: Interpersonal violence
+          metric: Rate
+      indicator_path:
+          930262: y
+    - dimensions:
+          age: All ages
+          cause: Maternal disorders
+          metric: Rate
+      indicator_path:
+          930316: y
+    - dimensions:
+          age: All ages
+          cause: HIV/AIDS
+          metric: Rate
+      indicator_path:
+          930229: y
+    - dimensions:
+          age: All ages
+          cause: Drug use disorders
+          metric: Rate
+      indicator_path:
+          930172: y
+    - dimensions:
+          age: All ages
+          cause: Tuberculosis
+          metric: Rate
+      indicator_path:
+          930540: y
+    - dimensions:
+          age: All ages
+          cause: Alcohol use disorders
+          metric: Rate
+      indicator_path:
+          930041: y
+    - dimensions:
+          age: All ages
+          cause: Self-harm
+          metric: Rate
+      indicator_path:
+          930514: y
+    - dimensions:
+          age: All ages
+          cause: Exposure to forces of nature
+          metric: Rate
+      indicator_path:
+          930198: y
+    - dimensions:
+          age: All ages
+          cause: Environmental heat and cold exposure
+          metric: Rate
+      indicator_path:
+          930194: y
+    - dimensions:
+          age: All ages
+          cause: Conflict and terrorism
+          metric: Rate
+      indicator_path:
+          930132: y
+    - dimensions:
+          age: All ages
+          cause: Chronic kidney disease
+          metric: Rate
+      indicator_path:
+          930097: y
+    - dimensions:
+          age: All ages
+          cause: Poisonings
+          metric: Rate
+      indicator_path:
+          930500: y
+    - dimensions:
+          age: All ages
+          cause: Road injuries
+          metric: Rate
+      indicator_path:
+          930512: y
+    - dimensions:
+          age: All ages
+          cause: Fire, heat, and hot substances
+          metric: Rate
+      indicator_path:
+          930209: y
+    - dimensions:
+          age: All ages
+          cause: Acute hepatitis
+          metric: Rate
+      indicator_path:
+          930023: y
+    - dimensions:
+          age: All ages
+          cause: COVID-19
+          metric: Rate
+      indicator_path:
+          930079: y
+    - dimensions:
+          age: All ages
+          cause: all
+          metric: Rate
+      indicator_path:
+          930023: y
+          930041: y
+          930047: y
+          930079: y
+          930083: y
+          930097: y
+          930116: y
+          930132: y
+          930153: y
+          930159: y
+          930164: y
+          930170: y
+          930172: y
+          930194: y
+          930198: y
+          930209: y
+          930229: y
+          930262: y
+          930303: y
+          930306: y
+          930316: y
+          930329: y
+          930358: y
+          930366: y
+          930394: y
+          930486: y
+          930500: y
+          930512: y
+          930514: y
+          930540: y
+    - dimensions:
+          age: Age-standardized
+          cause: all
+          metric: Number
+      indicator_path: {}
+    - dimensions:
+          age: Age-standardized
+          cause: all
+          metric: Percent
+      indicator_path: {}
+    - dimensions:
+          age: Age-standardized
+          cause: Cardiovascular diseases
+          metric: Rate
+      indicator_path:
+          929478: y
+    - dimensions:
+          age: Age-standardized
+          cause: Neoplasms
+          metric: Rate
+      indicator_path:
+          929758: y
+    - dimensions:
+          age: Age-standardized
+          cause: Chronic respiratory diseases
+          metric: Rate
+      indicator_path:
+          929510: y
+    - dimensions:
+          age: Age-standardized
+          cause: Digestive diseases
+          metric: Rate
+      indicator_path:
+          929557: y
+    - dimensions:
+          age: Age-standardized
+          cause: Lower respiratory infections
+          metric: Rate
+      indicator_path:
+          929695: y
+    - dimensions:
+          age: Age-standardized
+          cause: Neonatal disorders
+          metric: Rate
+      indicator_path:
+          929751: y
+    - dimensions:
+          age: Age-standardized
+          cause: Alzheimer's disease and other dementias
+          metric: Rate
+      indicator_path:
+          929443: y
+    - dimensions:
+          age: Age-standardized
+          cause: Diabetes mellitus
+          metric: Rate
+      indicator_path:
+          929547: y
+    - dimensions:
+          age: Age-standardized
+          cause: Diarrheal diseases
+          metric: Rate
+      indicator_path:
+          929553: y
+    - dimensions:
+          age: Age-standardized
+          cause: Meningitis
+          metric: Rate
+      indicator_path:
+          929721: y
+    - dimensions:
+          age: Age-standardized
+          cause: Parkinson's disease
+          metric: Rate
+      indicator_path:
+          929879: y
+    - dimensions:
+          age: Age-standardized
+          cause: Nutritional deficiencies
+          metric: Rate
+      indicator_path:
+          929786: y
+    - dimensions:
+          age: Age-standardized
+          cause: Malaria
+          metric: Rate
+      indicator_path:
+          929697: y
+    - dimensions:
+          age: Age-standardized
+          cause: Drowning
+          metric: Rate
+      indicator_path:
+          929564: y
+    - dimensions:
+          age: Age-standardized
+          cause: Interpersonal violence
+          metric: Rate
+      indicator_path:
+          929653: y
+    - dimensions:
+          age: Age-standardized
+          cause: Maternal disorders
+          metric: Rate
+      indicator_path:
+          929710: y
+    - dimensions:
+          age: Age-standardized
+          cause: HIV/AIDS
+          metric: Rate
+      indicator_path:
+          929621: y
+    - dimensions:
+          age: Age-standardized
+          cause: Drug use disorders
+          metric: Rate
+      indicator_path:
+          929565: y
+    - dimensions:
+          age: Age-standardized
+          cause: Tuberculosis
+          metric: Rate
+      indicator_path:
+          929981: y
+    - dimensions:
+          age: Age-standardized
+          cause: Alcohol use disorders
+          metric: Rate
+      indicator_path:
+          929434: y
+    - dimensions:
+          age: Age-standardized
+          cause: Self-harm
+          metric: Rate
+      indicator_path:
+          929928: y
+    - dimensions:
+          age: Age-standardized
+          cause: Exposure to forces of nature
+          metric: Rate
+      indicator_path:
+          929591: y
+    - dimensions:
+          age: Age-standardized
+          cause: Environmental heat and cold exposure
+          metric: Rate
+      indicator_path:
+          929587: y
+    - dimensions:
+          age: Age-standardized
+          cause: Conflict and terrorism
+          metric: Rate
+      indicator_path:
+          929527: y
+    - dimensions:
+          age: Age-standardized
+          cause: Chronic kidney disease
+          metric: Rate
+      indicator_path:
+          929492: y
+    - dimensions:
+          age: Age-standardized
+          cause: Poisonings
+          metric: Rate
+      indicator_path:
+          929899: y
+    - dimensions:
+          age: Age-standardized
+          cause: Road injuries
+          metric: Rate
+      indicator_path:
+          929924: y
+    - dimensions:
+          age: Age-standardized
+          cause: Fire, heat, and hot substances
+          metric: Rate
+      indicator_path:
+          929601: y
+    - dimensions:
+          age: Age-standardized
+          cause: Acute hepatitis
+          metric: Rate
+      indicator_path:
+          929415: y
+    - dimensions:
+          age: Age-standardized
+          cause: COVID-19
+          metric: Rate
+      indicator_path:
+          929474: y
+    - dimensions:
+          age: Age-standardized
+          cause: all
+          metric: Rate
+      indicator_path:
+          929415: y
+          929434: y
+          929443: y
+          929474: y
+          929478: y
+          929492: y
+          929510: y
+          929527: y
+          929547: y
+          929553: y
+          929557: y
+          929564: y
+          929565: y
+          929587: y
+          929591: y
+          929601: y
+          929621: y
+          929653: y
+          929695: y
+          929697: y
+          929710: y
+          929721: y
+          929751: y
+          929758: y
+          929786: y
+          929879: y
+          929899: y
+          929924: y
+          929928: y
+          929981: y

From d2dd628d88c0f1ed36a01e487d4599d48a7e824e Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 18:21:24 +0100
Subject: [PATCH 25/65] enhance(functions): don't fail if `canonicalUrl` cannot
 be parsed

---
 functions/grapher/[slug].ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/functions/grapher/[slug].ts b/functions/grapher/[slug].ts
index 9c43031f55b..17d6d24563a 100644
--- a/functions/grapher/[slug].ts
+++ b/functions/grapher/[slug].ts
@@ -92,7 +92,11 @@ export const onRequestGet: PagesFunction = async (context) => {
             element: (element) => {
                 const canonicalUrl = element.getAttribute("content")
                 element.setAttribute("content", canonicalUrl + url.search)
-                origin = new URL(canonicalUrl).origin
+                try {
+                    origin = new URL(canonicalUrl).origin
+                } catch (e) {
+                    console.error("Error parsing canonical URL", e)
+                }
             },
         })
         .on('meta[property="og:image"]', {

From 01ab4ce8608d298108e3fe8569605551e91fc76c Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 18:43:21 +0100
Subject: [PATCH 26/65] enhance: remove explicit `tab` handling

---
 site/multiDim/MultiDimDataPageContent.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 5bc71c2ed25..291a0acda4d 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -279,11 +279,8 @@ export const MultiDimDataPageContent = ({
             selectedEntityNames: config.config.default_selection,
 
             bounds,
-
-            // Keep the tab we last had
-            tab: grapherInst?.tab ?? GrapherTabOption.chart,
         } as GrapherProgrammaticInterface
-    }, [currentView, dimensionsConfig, grapherInst, bounds, config])
+    }, [currentView, dimensionsConfig, bounds, config])
 
     // const grapher = useMemo(() => {
     //     const grapher = new Grapher({ ...grapherConfigComputed, queryStr })

From eee2a1b2059c048bcb8127589b0ccb9f45c12adc Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 18:54:12 +0100
Subject: [PATCH 27/65] enhance: more clever URL param resolution, don't fail
 if it's missing or if the view in question doesn't exist

---
 site/multiDim/MultiDimDataPageConfig.ts   |   9 +-
 site/multiDim/MultiDimDataPageContent.tsx | 648 +---------------------
 2 files changed, 12 insertions(+), 645 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
index ff61856a85f..6143111ad19 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/site/multiDim/MultiDimDataPageConfig.ts
@@ -71,10 +71,8 @@ export class MultiDimDataPageConfig {
      * - If there is at least one available view for choices[leftmost, ..., cur], continue.
      * - Otherwise, for dimension `cur`, find the first choice that has at least one available view.
      *
-     * `selectedChoices` is expected to be fully-qualified, i.e. it should contain a choice for every available dimension.
-     *
      * The method returns two values:
-     * - `selectedChoices` is the updated version of the input `selectedChoices`, where choices have been adapted to make sure there are available views.
+     * - `selectedChoices` is the updated version of the input `selectedChoices`, where choices have been adapted to make sure there are available views. It is fully-qualified, i.e. it has choices for all dimensions.
      * - `dimensionsWithAvailableChoices` indicates for each dimension which choices are available, and excludes the ones that are excluded by choices left of it.
      *
      * - @marcelgerber, 2024-07-22
@@ -98,9 +96,8 @@ export class MultiDimDataPageConfig {
                 updatedSelectedChoices[currentDimSlug] =
                     selectedChoices[currentDimSlug]
             } else {
-                throw new Error(
-                    `Missing or invalid choice for dimension ${currentDimSlug}`
-                )
+                updatedSelectedChoices[currentDimSlug] =
+                    availableViewsBeforeSelection[0].dimensions[currentDimSlug]
             }
 
             const availableViewsAfterSelection = this.filterViewsByDimensions(
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 291a0acda4d..6296be93267 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -174,17 +174,21 @@ export const MultiDimDataPageContent = ({
 
     const datapageDataStub: Partial<DataPageDataV2> = {
         title: {
-            title: config?.config.name ?? "",
-            titleVariant: config?.config.dimensions_title,
+            title: config.config.name ?? "",
+            titleVariant: config.config.dimensions_title,
         },
-        titleVariant: config?.config.dimensions_title,
+        titleVariant: config.config.dimensions_title,
     }
 
-    const [currentSettings, setCurrentSettings] = useState(initialChoices)
+    const [currentSettings, setCurrentSettings] = useState(() => {
+        const { selectedChoices } =
+            config.filterToAvailableChoices(initialChoices)
+        return selectedChoices
+    })
 
     const currentView = useMemo(() => {
         if (Object.keys(currentSettings).length === 0) return undefined
-        return config?.findViewByDimensions(currentSettings)
+        return config.findViewByDimensions(currentSettings)
     }, [currentSettings, config])
 
     const dimensionsConfig = useMemo(() => {
@@ -282,11 +286,6 @@ export const MultiDimDataPageContent = ({
         } as GrapherProgrammaticInterface
     }, [currentView, dimensionsConfig, bounds, config])
 
-    // const grapher = useMemo(() => {
-    //     const grapher = new Grapher({ ...grapherConfigComputed, queryStr })
-    //     return grapher
-    // }, [grapherConfigComputed, queryStr])
-
     const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
     const relatedResearch =
         relatedResearchCandidates.length > 3 &&
@@ -526,635 +525,6 @@ export const MultiDimDataPageContent = ({
     )
 }
 
-/*
-export const MultiDimDataPageContent = ({
-    datapageData,
-    grapherConfig,
-    isPreviewing = false,
-    faqEntries,
-    canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
-    tagToSlugMap,
-    imageMetadata,
-}: DataPageV2ContentFields & {
-    grapherConfig: GrapherInterface
-    imageMetadata: Record<string, ImageMetadata>
-}) => {
-    const [grapher, setGrapher] = React.useState<Grapher | undefined>(undefined)
-
-    const titleFragments = joinTitleFragments(
-        datapageData.attributionShort,
-        datapageData.titleVariant
-    )
-
-    // Initialize the grapher for client-side rendering
-    const mergedGrapherConfig: GrapherProgrammaticInterface = useMemo(
-        () => ({
-            ...grapherConfig,
-            isEmbeddedInADataPage: true,
-            bindUrlToWindow: true,
-        }),
-        [grapherConfig]
-    )
-
-    useEffect(() => {
-        setGrapher(new Grapher(mergedGrapherConfig))
-    }, [mergedGrapherConfig])
-
-    const stickyNavLinks = [
-        {
-            text: "Explore the Data",
-            target: "#explore-the-data",
-        },
-        {
-            text: "Research & Writing",
-            target: "#research-and-writing",
-        },
-        { text: "Related Data", target: "#related-data" },
-        { text: "All Charts", target: "#all-charts" },
-        { text: "FAQs", target: "#faqs" },
-        {
-            text: "Sources & Processing",
-            target: "#" + DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
-        },
-        { text: "Reuse This Work", target: "#" + REUSE_THIS_WORK_SECTION_ID },
-    ]
-
-    const hasRelatedDataFeatured = datapageData.relatedData?.some(
-        (data) => data.featured
-    )
-    const hasRelatedDataNonFeatured = datapageData.relatedData?.some(
-        (data) => !data.featured
-    )
-    const relatedDataCategoryClasses = `related-data__category ${
-        hasRelatedDataFeatured && hasRelatedDataNonFeatured
-            ? "related-data__category--grid span-cols-4 span-lg-cols-6 span-sm-cols-3"
-            : "related-data__category--columns span-cols-8 span-lg-cols-12"
-    } `
-
-    const hasDescriptionKey =
-        datapageData.descriptionKey && datapageData.descriptionKey.length > 0
-
-    const sourcesForDisplay = prepareSourcesForDisplay(datapageData)
-    const getYearSuffixFromOrigin = (o: OwidOrigin) => {
-        const year = o.dateAccessed
-            ? dayjs(o.dateAccessed, ["YYYY-MM-DD", "YYYY"]).year()
-            : o.datePublished
-              ? dayjs(o.datePublished, ["YYYY-MM-DD", "YYYY"]).year()
-              : undefined
-        if (year) return ` (${year})`
-        else return ""
-    }
-    const producers = uniq(datapageData.origins.map((o) => `${o.producer}`))
-    const producersWithYear = uniq(
-        datapageData.origins.map(
-            (o) => `${o.producer}${getYearSuffixFromOrigin(o)}`
-        )
-    )
-
-    const attributionFragments = datapageData.attributions ?? producersWithYear
-    const attributionUnshortened = attributionFragments.join("; ")
-    const citationShort = getCitationShort(
-        datapageData.origins,
-        datapageData.attributions,
-        datapageData.owidProcessingLevel
-    )
-    const currentYear = dayjs().year()
-    const citationLong = getCitationLong(
-        datapageData.title,
-        datapageData.origins,
-        datapageData.source,
-        datapageData.attributions,
-        datapageData.attributionShort,
-        datapageData.titleVariant,
-        datapageData.owidProcessingLevel,
-        canonicalUrl
-    )
-
-    const adaptedFrom =
-        producers.length > 0 ? producers.join(", ") : datapageData.source?.name
-
-    const maybeAddPeriod = (s: string) =>
-        s.endsWith("?") || s.endsWith(".") ? s : `${s}.`
-
-    // For the citation of the data page add a period it doesn't have that or a question mark
-    const primaryTopicCitation = maybeAddPeriod(
-        datapageData.primaryTopic?.citation ?? ""
-    )
-
-    const citationDatapage = excludeUndefined([
-        datapageData.primaryTopic
-            ? `“Data Page: ${datapageData.title.title}”, part of the following publication: ${primaryTopicCitation}`
-            : `“Data Page: ${datapageData.title.title}”. Our World in Data (${currentYear}).`,
-        adaptedFrom ? `Data adapted from ${adaptedFrom}.` : undefined,
-        `Retrieved from ${canonicalUrl} [online resource]`,
-    ]).join(" ")
-
-    const relatedResearchCandidates = datapageData.relatedResearch
-    const relatedResearch =
-        relatedResearchCandidates.length > 3 &&
-        datapageData.topicTagsLinks?.length
-            ? relatedResearchCandidates.filter((research) => {
-                  const shared = intersection(
-                      research.tags,
-                      datapageData.topicTagsLinks ?? []
-                  )
-                  return shared.length > 0
-              })
-            : relatedResearchCandidates
-    for (const item of relatedResearch) {
-        // TODO: these are workarounds to not link to the (not really existing) template pages for energy or co2
-        // country profiles but instead to the topic page at the country selector.
-        if (item.url === "/co2-country-profile")
-            item.url =
-                "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles"
-        else if (item.url === "/energy-country-profile")
-            item.url = "/energy#country-profiles"
-        else if (item.url === "/coronavirus-country-profile")
-            item.url = "/coronavirus#coronavirus-country-profiles"
-    }
-    // TODO: mark topic pages
-
-    const topicTags = datapageData.topicTagsLinks
-        ?.map((name) => ({ name, slug: tagToSlugMap[name] }))
-        .filter((tag): tag is { name: string; slug: string } => !!tag.slug)
-        .map((tag) => (
-            <a href={`/${tag.slug}`} key={tag.slug}>
-                {tag.name}
-            </a>
-        ))
-
-    return (
-        <AttachmentsContext.Provider
-            value={{
-                linkedDocuments: {},
-                imageMetadata,
-                linkedCharts: {},
-                linkedIndicators: {},
-                relatedCharts: [],
-            }}
-        >
-            <DocumentContext.Provider value={{ isPreviewing }}>
-                <div className="DataPageContent__grapher-for-embed">
-                    <GrapherWithFallback
-                        grapher={grapher}
-                        slug={grapherConfig.slug}
-                    />
-                </div>
-                <div className="DataPageContent">
-                    <div className="bg-blue-10">
-                        <div className="header__wrapper wrapper grid grid-cols-12 ">
-                            <div className="header__left span-cols-8 span-sm-cols-12">
-                                <div className="header__supertitle">Data</div>
-                                <h1 className="header__title">
-                                    {datapageData.title.title}
-                                </h1>
-                                <div className="header__source">
-                                    {titleFragments}
-                                </div>
-                            </div>
-                            {!!datapageData.topicTagsLinks?.length && (
-                                <div className="header__right col-start-9 span-cols-4 span-sm-cols-12">
-                                    <div className="topic-tags__label">
-                                        See all data and research on:
-                                    </div>
-                                    <div className="topic-tags">
-                                        {topicTags}
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                    <nav className="sticky-nav sticky-nav--dark">
-                        <StickyNav links={stickyNavLinks} className="wrapper" />
-                    </nav>
-                    <div className="chart-key-info">
-                        <GrapherWithFallback
-                            grapher={grapher}
-                            slug={grapherConfig.slug} // TODO: On grapher pages,
-                            // there will always be a slug, but if we just show a data page preview for an indicator in the admin, there will be no slug
-                            // and then thumbnails will be broken for those. When we consider baking data pages for
-                            // non-grapher pages then we need to make sure that there are thunbnails that are generated for the these non-chart graphers and
-                            // then this piece will have to change anyhow and know how to provide the thumbnail.
-                            className="wrapper"
-                            id="explore-the-data"
-                        />
-                        <div className="wrapper wrapper-about-this-data grid grid-cols-12">
-                            {hasDescriptionKey ||
-                            datapageData.descriptionFromProducer ||
-                            datapageData.source?.additionalInfo ? (
-                                <>
-                                    <h2
-                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
-                                        className="key-info__title span-cols-12"
-                                    >
-                                        What you should know about this
-                                        indicator
-                                    </h2>
-                                    <div className="col-start-1 span-cols-8 span-lg-cols-7 span-sm-cols-12">
-                                        <div className="key-info__content">
-                                            {hasDescriptionKey && (
-                                                <div className="key-info__key-description">
-                                                    {datapageData.descriptionKey
-                                                        .length === 1 ? (
-                                                        <SimpleMarkdownText
-                                                            text={datapageData.descriptionKey[0].trim()}
-                                                        />
-                                                    ) : (
-                                                        <ul>
-                                                            {datapageData.descriptionKey.map(
-                                                                (text, i) => (
-                                                                    <li key={i}>
-                                                                        <SimpleMarkdownText
-                                                                            text={text.trim()}
-                                                                            useParagraphs={
-                                                                                false
-                                                                            }
-                                                                        />
-                                                                    </li>
-                                                                )
-                                                            )}
-                                                        </ul>
-                                                    )}
-                                                    {!!faqEntries?.faqs
-                                                        .length && (
-                                                        <a
-                                                            className="key-info__learn-more"
-                                                            href="#faqs"
-                                                        >
-                                                            Learn more in the
-                                                            FAQs
-                                                            <FontAwesomeIcon
-                                                                icon={
-                                                                    faArrowDown
-                                                                }
-                                                            />
-                                                        </a>
-                                                    )}
-                                                </div>
-                                            )}
-
-                                            <div className="key-info__expandable-descriptions">
-                                                {datapageData.descriptionFromProducer && (
-                                                    <ExpandableToggle
-                                                        label={
-                                                            datapageData.attributionShort
-                                                                ? `How does the producer of this data - ${datapageData.attributionShort} - describe this data?`
-                                                                : "How does the producer of this data describe this data?"
-                                                        }
-                                                        content={
-                                                            <div className="article-block__text">
-                                                                <SimpleMarkdownText
-                                                                    text={
-                                                                        datapageData.descriptionFromProducer
-                                                                    }
-                                                                />
-                                                            </div>
-                                                        }
-                                                        isStacked={
-                                                            !!datapageData
-                                                                .source
-                                                                ?.additionalInfo
-                                                        }
-                                                    />
-                                                )}
-                                                {datapageData.source
-                                                    ?.additionalInfo && (
-                                                    <ExpandableToggle
-                                                        label="Additional information about this data"
-                                                        content={
-                                                            <div className="expandable-info-blocks__content">
-                                                                <HtmlOrSimpleMarkdownText
-                                                                    text={datapageData.source?.additionalInfo.trim()}
-                                                                />
-                                                            </div>
-                                                        }
-                                                    />
-                                                )}
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="key-info__right span-cols-4 span-lg-cols-5 span-sm-cols-12">
-                                        <KeyDataTable
-                                            datapageData={datapageData}
-                                            attribution={attributionUnshortened}
-                                        />
-                                    </div>
-                                </>
-                            ) : (
-                                <>
-                                    <h2
-                                        className="about-this-data__title span-cols-3 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                                        id={DATAPAGE_ABOUT_THIS_DATA_SECTION_ID}
-                                    >
-                                        About this data
-                                    </h2>
-                                    <div className="col-start-4 span-cols-10 col-lg-start-5 span-lg-cols-8 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                        <KeyDataTable
-                                            datapageData={datapageData}
-                                            attribution={attributionUnshortened}
-                                        />
-                                    </div>
-                                </>
-                            )}
-                        </div>
-                    </div>
-                    <div className="wrapper">
-                        {relatedResearch && relatedResearch.length > 0 && (
-                            <div className="section-wrapper grid">
-                                <h2
-                                    className="related-research__title span-cols-3 span-lg-cols-12"
-                                    id="research-and-writing"
-                                >
-                                    Related research and writing
-                                </h2>
-                                <div className="related-research__items grid grid-cols-9 grid-lg-cols-12 span-cols-9 span-lg-cols-12">
-                                    {relatedResearch.map((research) => (
-                                        <a
-                                            href={research.url}
-                                            key={research.url}
-                                            className="related-research__item grid grid-cols-4 grid-lg-cols-6 grid-sm-cols-12 span-cols-4 span-lg-cols-6 span-sm-cols-12"
-                                        >
-                                            <DatapageResearchThumbnail
-                                                urlOrFilename={
-                                                    research.imageUrl
-                                                }
-                                            />
-                                            <div className="span-cols-3 span-lg-cols-4 span-sm-cols-9">
-                                                <h3 className="related-article__title">
-                                                    {research.title}
-                                                </h3>
-                                                <div className="related-article__authors body-3-medium-italic">
-                                                    {research.authors &&
-                                                        research.authors
-                                                            .length &&
-                                                        formatAuthors({
-                                                            authors:
-                                                                research.authors,
-                                                        })}
-                                                </div>
-                                            </div>
-                                        </a>
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-                        {!!datapageData.relatedData?.length && (
-                            <div className="section-wrapper grid">
-                                <h2
-                                    className="related-data__title span-cols-3 span-lg-cols-12"
-                                    id="related-data"
-                                >
-                                    Related data
-                                </h2>
-                                <div
-                                    className={cx(
-                                        "related-data__items",
-                                        {
-                                            "related-data__items--two-cols":
-                                                hasRelatedDataFeatured &&
-                                                hasRelatedDataNonFeatured,
-                                        },
-                                        "grid",
-                                        "grid-cols-9",
-                                        "grid-lg-cols-12",
-                                        "span-cols-9",
-                                        "span-lg-cols-12"
-                                    )}
-                                >
-                                    {hasRelatedDataFeatured && (
-                                        <div
-                                            className={
-                                                relatedDataCategoryClasses
-                                            }
-                                        >
-                                            {datapageData.relatedData
-                                                .filter((data) => data.featured)
-                                                .map((data) => (
-                                                    <a
-                                                        href={data.url}
-                                                        key={data.url}
-                                                        className="related-data-item related-data-item--medium col-start-1 col-end-limit"
-                                                    >
-                                                        {data.type && (
-                                                            <div className="related-data-item__type">
-                                                                {data.type}
-                                                            </div>
-                                                        )}
-                                                        <h3 className="related-data-item__title">
-                                                            {data.title}
-                                                        </h3>
-                                                        {data.source && (
-                                                            <div className="related-data-item__source">
-                                                                {data.source}
-                                                            </div>
-                                                        )}
-                                                        <div className="related-data-item__content">
-                                                            {data.content}
-                                                        </div>
-                                                    </a>
-                                                ))}
-                                        </div>
-                                    )}
-                                    {hasRelatedDataNonFeatured && (
-                                        <div
-                                            className={
-                                                relatedDataCategoryClasses
-                                            }
-                                        >
-                                            {datapageData.relatedData
-                                                .filter(
-                                                    (data) => !data.featured
-                                                )
-                                                .map((data) => (
-                                                    <a
-                                                        href={data.url}
-                                                        key={data.url}
-                                                        className="related-data-item related-data-item--small col-start-1 col-end-limit"
-                                                    >
-                                                        <h4 className="related-data-item__title">
-                                                            {data.title}
-                                                        </h4>
-                                                        {data.source && (
-                                                            <div className="related-data-item__source">
-                                                                {data.source}
-                                                            </div>
-                                                        )}
-                                                    </a>
-                                                ))}
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        )}
-                        {datapageData.allCharts &&
-                        datapageData.allCharts.length > 0 ? (
-                            <div className="section-wrapper section-wrapper__related-charts">
-                                <h2
-                                    className="related-charts__title"
-                                    id="all-charts"
-                                >
-                                    Explore charts that include this data
-                                </h2>
-                                <div>
-                                    <RelatedCharts
-                                        charts={datapageData.allCharts}
-                                    />
-                                </div>
-                            </div>
-                        ) : null}
-                    </div>
-                    <div className="bg-gray-10">
-                        <div className="wrapper">
-                            {!!faqEntries?.faqs.length && (
-                                <div className="section-wrapper section-wrapper__faqs grid">
-                                    <h2
-                                        className="faqs__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                                        id="faqs"
-                                    >
-                                        Frequently Asked Questions
-                                    </h2>
-                                    <div className="faqs__items grid grid-cols-10 grid-lg-cols-9 grid-md-cols-12 span-cols-10 span-lg-cols-9 span-md-cols-12 span-sm-cols-12">
-                                        <ArticleBlocks
-                                            blocks={faqEntries.faqs}
-                                            containerType="datapage"
-                                        />
-                                    </div>
-                                </div>
-                            )}
-                            <div className="section-wrapper grid">
-                                <h2
-                                    className="data-sources-processing__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                                    id={
-                                        DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID
-                                    }
-                                >
-                                    Sources and processing
-                                </h2>
-                                <div className="data-sources grid span-cols-12">
-                                    <h3 className="data-sources__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                        This data is based on the following
-                                        sources
-                                    </h3>
-                                    <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                        <IndicatorSources
-                                            sources={sourcesForDisplay}
-                                        />
-                                    </div>
-                                </div>
-                                <div className="data-processing grid span-cols-12">
-                                    <h3 className="data-processing__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                        How we process data at Our World in Data
-                                    </h3>
-                                    <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                        <IndicatorProcessing
-                                            descriptionProcessing={
-                                                datapageData.descriptionProcessing
-                                            }
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="section-wrapper grid">
-                                <h2
-                                    className="reuse__title span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12"
-                                    id="reuse-this-work"
-                                >
-                                    Reuse this work
-                                </h2>
-                                <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                    <ul className="reuse__content">
-                                        <li className="reuse__list-item">
-                                            All data produced by third-party
-                                            providers and made available by Our
-                                            World in Data are subject to the
-                                            license terms from the original
-                                            providers. Our work would not be
-                                            possible without the data providers
-                                            we rely on, so we ask you to always
-                                            cite them appropriately (see below).
-                                            This is crucial to allow data
-                                            providers to continue doing their
-                                            work, enhancing, maintaining and
-                                            updating valuable data.
-                                        </li>
-                                        <li className="reuse__list-item">
-                                            All data, visualizations, and code
-                                            produced by Our World in Data are
-                                            completely open access under the{" "}
-                                            <a
-                                                href="https://creativecommons.org/licenses/by/4.0/"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className="reuse__link"
-                                            >
-                                                Creative Commons BY license
-                                            </a>
-                                            . You have the permission to use,
-                                            distribute, and reproduce these in
-                                            any medium, provided the source and
-                                            authors are credited.
-                                        </li>
-                                    </ul>
-                                </div>
-
-                                {(citationShort ||
-                                    citationLong ||
-                                    citationDatapage) && (
-                                    <div className="citations grid span-cols-12">
-                                        <h3 className="citations__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                            Citations
-                                        </h3>
-                                        <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
-                                            {citationDatapage && (
-                                                <div className="citations-section">
-                                                    <h5 className="citation__how-to-header">
-                                                        How to cite this page
-                                                    </h5>
-                                                    <p className="citation__paragraph">
-                                                        To cite this page
-                                                        overall, including any
-                                                        descriptions, FAQs or
-                                                        explanations of the data
-                                                        authored by Our World in
-                                                        Data, please use the
-                                                        following citation:
-                                                    </p>
-                                                    <CodeSnippet
-                                                        code={citationDatapage}
-                                                        theme="light"
-                                                        useMarkdown={true}
-                                                    />
-                                                </div>
-                                            )}
-                                            <div className="citations-section">
-                                                <h5 className="citation__how-to-header citation__how-to-header--data">
-                                                    How to cite this data
-                                                </h5>
-                                                {(citationShort ||
-                                                    citationLong) && (
-                                                    <DataCitation
-                                                        citationLong={
-                                                            citationLong
-                                                        }
-                                                        citationShort={
-                                                            citationShort
-                                                        }
-                                                    />
-                                                )}
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </DocumentContext.Provider>
-        </AttachmentsContext.Provider>
-    )
-}
-*/
-
 export const hydrateMultiDimDataPageContent = (isPreviewing?: boolean) => {
     const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
     const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS

From 5ea21bbd6b59684b91c456467b25be6a1fe0ced3 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 18:57:08 +0100
Subject: [PATCH 28/65] chore: set default selection for all mdd demos

---
 public/multi-dim/causes-of-death.yml  | 4 ++++
 public/multi-dim/life-expectancy.json | 1 +
 public/multi-dim/plastic.json         | 1 +
 public/multi-dim/poverty.yml          | 4 ++++
 4 files changed, 10 insertions(+)

diff --git a/public/multi-dim/causes-of-death.yml b/public/multi-dim/causes-of-death.yml
index 0efb005cf8a..6ee6c99934d 100644
--- a/public/multi-dim/causes-of-death.yml
+++ b/public/multi-dim/causes-of-death.yml
@@ -1,3 +1,7 @@
+default_selection:
+    - World
+    - Europe
+    - Asia
 dimensions:
     - choices:
           - description: See all causes side by side
diff --git a/public/multi-dim/life-expectancy.json b/public/multi-dim/life-expectancy.json
index 082b7270f92..c4fdaaa3d5f 100644
--- a/public/multi-dim/life-expectancy.json
+++ b/public/multi-dim/life-expectancy.json
@@ -1,6 +1,7 @@
 {
     "name": "Life expectancy",
     "dimensions_title": "by age and sex",
+    "default_selection": ["World", "Europe", "Asia"],
     "dimensions": [
         {
             "slug": "age",
diff --git a/public/multi-dim/plastic.json b/public/multi-dim/plastic.json
index 1760e20bd70..c9676ff5147 100644
--- a/public/multi-dim/plastic.json
+++ b/public/multi-dim/plastic.json
@@ -1,6 +1,7 @@
 {
     "name": "Plastic",
     "dimensions_title": "waste and pollution",
+    "default_selection": ["World", "Europe", "Asia"],
     "dimensions": [
         {
             "slug": "metric",
diff --git a/public/multi-dim/poverty.yml b/public/multi-dim/poverty.yml
index 8be35f83ea1..7136c706431 100644
--- a/public/multi-dim/poverty.yml
+++ b/public/multi-dim/poverty.yml
@@ -1,5 +1,9 @@
 name: Poverty
 dimensions_title: by poverty line
+default_selection:
+    - World
+    - Europe
+    - Asia
 dimensions:
     - slug: povertyLine
       name: Poverty line

From 49589923f2e78f5a49d62dcc4c62a2e381b69c42 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 19:22:33 +0100
Subject: [PATCH 29/65] enhance: handle missing `partialGrapherConfig`

---
 site/multiDim/MultiDimDataPageContent.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 6296be93267..a5fde256b9e 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -93,7 +93,7 @@ const DatapageResearchThumbnail = ({
 // From DataPageUtils
 const getDatapageDataV2 = async (
     variableMetadata: OwidVariableWithSource,
-    partialGrapherConfig: GrapherInterface
+    partialGrapherConfig: GrapherInterface | undefined
 ): Promise<DataPageDataV2> => {
     {
         const lastUpdated = getLastUpdatedFromVariable(variableMetadata) ?? ""
@@ -109,7 +109,7 @@ const getDatapageDataV2 = async (
                   })
                 : {
                       title:
-                          partialGrapherConfig.title ??
+                          partialGrapherConfig?.title ??
                           variableMetadata.display?.name ??
                           variableMetadata.name ??
                           "",
@@ -160,7 +160,7 @@ export const MultiDimDataPageContent = ({
     initialQueryStr,
 }: DataPageV2ContentFields & {
     config: MultiDimDataPageConfig
-    grapherConfig: GrapherInterface
+    grapherConfig?: GrapherInterface
     imageMetadata: Record<string, ImageMetadata>
     initialQueryStr?: string
 }) => {

From 49b1e4e06b8c0de9a591cc09529dc61f03523023 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 19:36:44 +0100
Subject: [PATCH 30/65] enhance: prevent settings word wrap

---
 site/multiDim/MultiDimDataPageSettingsPanel.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.scss b/site/multiDim/MultiDimDataPageSettingsPanel.scss
index 36544c05ded..e45f5910a2c 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.scss
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.scss
@@ -6,7 +6,8 @@ $toggle-height: 40px;
 .md-settings-row {
     display: flex;
     align-items: center;
-    gap: 15px;
+    flex-wrap: wrap;
+    column-gap: 15px;
     margin-top: 20px;
 
     .md-settings__configure-data {

From 2030d26d5d4ae3784cf20a5e62461df95b920e27 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 19:37:17 +0100
Subject: [PATCH 31/65] enhance: topic tags work

---
 baker/MultiDimBaker.tsx                    | 21 ++++++++++++++++-----
 site/multiDim/MultiDimDataPage.tsx         | 14 ++++++++------
 site/multiDim/MultiDimDataPageContent.scss |  4 ++++
 site/multiDim/MultiDimDataPageContent.tsx  |  8 ++------
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index dc00251c79c..6d5190487b7 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -9,6 +9,7 @@ import { renderToHtmlPage } from "./siteRenderers.js"
 import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
 import React from "react"
 import { BAKED_BASE_URL } from "../settings/clientSettings.js"
+import { getTagToSlugMap } from "./GrapherBakingUtils.js"
 
 // TODO Make this dynamic
 const baseDir = findProjectBaseDir(__dirname)
@@ -28,6 +29,10 @@ const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigType> = {
     "mdd-poverty": readMultiDimConfig("poverty.yml"),
 }
 
+interface BakingAdditionalContext {
+    tagToSlugMap: Record<string, string>
+}
+
 export const renderMultiDimDataPageBySlug = async (
     knex: db.KnexReadonlyTransaction,
     slug: string
@@ -35,17 +40,23 @@ export const renderMultiDimDataPageBySlug = async (
     const rawConfig = MULTI_DIM_SITES_BY_SLUG[slug]
     if (!rawConfig) throw new Error(`No multi-dim site found for slug: ${slug}`)
 
+    const tagToSlugMap = await getTagToSlugMap(knex)
+    const bakingContext = { tagToSlugMap }
+
     const config = MultiDimDataPageConfig.fromObject(rawConfig)
-    return renderToHtmlPage(
-        <MultiDimDataPage baseUrl={BAKED_BASE_URL} config={config} />
-    )
+    return renderMultiDimDataPage(config, bakingContext)
 }
 
 export const renderMultiDimDataPage = async (
-    config: MultiDimDataPageConfig
+    config: MultiDimDataPageConfig,
+    bakingContext?: BakingAdditionalContext
 ) => {
     return renderToHtmlPage(
-        <MultiDimDataPage baseUrl={BAKED_BASE_URL} config={config} />
+        <MultiDimDataPage
+            baseUrl={BAKED_BASE_URL}
+            config={config}
+            tagToSlugMap={bakingContext?.tagToSlugMap}
+        />
     )
 }
 
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index b42dbc0326c..c4e7939b881 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -10,9 +10,11 @@ import { SiteFooterContext, serializeJSONForHTML } from "@ourworldindata/utils"
 export const MultiDimDataPage = (props: {
     baseUrl: string
     config: MultiDimDataPageConfig
+    tagToSlugMap?: Record<string, string>
 }) => {
     const canonicalUrl = "" // TODO
     const baseUrl = props.baseUrl // TODO
+
     return (
         <html>
             <Head
@@ -56,19 +58,19 @@ export const MultiDimDataPage = (props: {
             <body className="DataPage">
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
-                    {/* <script
+                    <script
                         dangerouslySetInnerHTML={{
                             __html: `window._OWID_DATAPAGEV2_PROPS = ${JSON.stringify(
                                 {
-                                    datapageData,
-                                    faqEntries,
+                                    // datapageData,
+                                    // faqEntries,
                                     canonicalUrl,
-                                    tagToSlugMap: minimalTagToSlugMap,
-                                    imageMetadata,
+                                    tagToSlugMap: props.tagToSlugMap,
+                                    // imageMetadata,
                                 }
                             )}`,
                         }}
-                    /> */}
+                    />
                     <div id={OWID_DATAPAGE_CONTENT_ROOT_ID}>
                         {/* <DebugProvider debug={isPreviewing}>
                             <DataPageV2Content
diff --git a/site/multiDim/MultiDimDataPageContent.scss b/site/multiDim/MultiDimDataPageContent.scss
index 661c96a23c1..a4200910a7a 100644
--- a/site/multiDim/MultiDimDataPageContent.scss
+++ b/site/multiDim/MultiDimDataPageContent.scss
@@ -36,4 +36,8 @@ $zindex-controls-popup: 140;
         padding-bottom: 20px;
         border-top: 1px solid $blue-20;
     }
+
+    .topic-tag {
+        background: $blue-20;
+    }
 }
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index a5fde256b9e..51e04ca0e1c 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -223,10 +223,6 @@ export const MultiDimDataPageContent = ({
         datapageDataFromVar?.titleVariant
     )
 
-    const topicTagsLinks = datapageDataFromVar?.topicTagsLinks?.filter(
-        (tag) => tagToSlugMap?.[tag]
-    )
-
     const selectionArray = useMemo(
         () => new SelectionArray(config.config.default_selection),
         [config]
@@ -333,10 +329,10 @@ export const MultiDimDataPageContent = ({
                         </h1>
                         <div className="header__source">{titleFragments}</div>
                     </div>
-                    {!!topicTagsLinks && (
+                    {!!datapageDataFromVar?.topicTagsLinks && (
                         <TopicTags
                             className="header__right col-start-10 span-cols-4 col-sm-start-2 span-sm-cols-12"
-                            topicTagsLinks={topicTagsLinks}
+                            topicTagsLinks={datapageDataFromVar.topicTagsLinks}
                             tagToSlugMap={tagToSlugMap}
                         />
                     )}

From 2381a8da5912aca418a97740a4e99655c88be1e3 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 19:44:00 +0100
Subject: [PATCH 32/65] enhance: nicer topic tags

---
 site/multiDim/MultiDimDataPageContent.tsx        | 16 +++++++++++++---
 site/multiDim/MultiDimDataPageSettingsPanel.scss |  1 +
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 51e04ca0e1c..3b1721ae3fd 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -282,6 +282,8 @@ export const MultiDimDataPageContent = ({
         } as GrapherProgrammaticInterface
     }, [currentView, dimensionsConfig, bounds, config])
 
+    const hasTopicTags = !!datapageDataFromVar?.topicTagsLinks?.length
+
     const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
     const relatedResearch =
         relatedResearchCandidates.length > 3 &&
@@ -329,14 +331,22 @@ export const MultiDimDataPageContent = ({
                         </h1>
                         <div className="header__source">{titleFragments}</div>
                     </div>
-                    {!!datapageDataFromVar?.topicTagsLinks && (
+                    {hasTopicTags && (
                         <TopicTags
                             className="header__right col-start-10 span-cols-4 col-sm-start-2 span-sm-cols-12"
-                            topicTagsLinks={datapageDataFromVar.topicTagsLinks}
+                            topicTagsLinks={
+                                datapageDataFromVar.topicTagsLinks ?? []
+                            }
                             tagToSlugMap={tagToSlugMap}
                         />
                     )}
-                    <div className="settings-row__wrapper span-cols-9 span-sm-cols-12">
+                    <div
+                        className={cx(
+                            "settings-row__wrapper",
+                            "span-sm-cols-12",
+                            hasTopicTags ? "span-cols-9" : "span-cols-12"
+                        )}
+                    >
                         <MultiDimSettingsPanel
                             config={config}
                             currentSettings={currentSettings}
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.scss b/site/multiDim/MultiDimDataPageSettingsPanel.scss
index e45f5910a2c..a1c432f40d0 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.scss
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.scss
@@ -8,6 +8,7 @@ $toggle-height: 40px;
     align-items: center;
     flex-wrap: wrap;
     column-gap: 15px;
+    row-gap: 5px;
     margin-top: 20px;
 
     .md-settings__configure-data {

From 1b3a52853ac410de38a5b52116d41de6bbba5906 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 20:41:02 +0100
Subject: [PATCH 33/65] feat(multi-dim): change indicator config format

---
 baker/MultiDimBaker.tsx                      |   81 +-
 public/multi-dim/causes-of-death.yml         | 3283 +++++++++---------
 public/multi-dim/energy.yml                  |   16 +-
 public/multi-dim/life-expectancy.json        |   24 +-
 public/multi-dim/plastic.json                |    6 +-
 public/multi-dim/poverty.yml                 |  117 +-
 site/multiDim/MultiDimDataPageConfig.test.ts |   30 +-
 site/multiDim/MultiDimDataPageConfig.ts      |   55 +-
 site/multiDim/MultiDimDataPageContent.tsx    |   35 +-
 site/multiDim/MultiDimDataPageTypes.ts       |   26 +-
 site/multiDim/config.yml                     |    6 +-
 11 files changed, 1872 insertions(+), 1807 deletions(-)

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index 6d5190487b7..f3d876d7219 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -2,7 +2,13 @@ import yaml from "yaml"
 import fs from "fs-extra"
 import path from "path"
 import findProjectBaseDir from "../settings/findBaseDir.js"
-import { MultiDimDataPageConfigType } from "../site/multiDim/MultiDimDataPageTypes.js"
+import {
+    IndicatorEntryAfterPreProcessing,
+    IndicatorEntryBeforePreProcessing,
+    MultiDimDataPageConfigPreProcessed,
+    MultiDimDataPageConfigRaw,
+    MultiIndicatorEntry,
+} from "../site/multiDim/MultiDimDataPageTypes.js"
 import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 import * as db from "../db/db.js"
 import { renderToHtmlPage } from "./siteRenderers.js"
@@ -10,6 +16,7 @@ import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
 import React from "react"
 import { BAKED_BASE_URL } from "../settings/clientSettings.js"
 import { getTagToSlugMap } from "./GrapherBakingUtils.js"
+import { getVariableIdsByCatalogPath } from "../db/model/Variable.js"
 
 // TODO Make this dynamic
 const baseDir = findProjectBaseDir(__dirname)
@@ -21,7 +28,7 @@ const readMultiDimConfig = (filename: string) =>
         fs.readFileSync(path.join(MULTI_DIM_CONFIG_DIR, filename), "utf8")
     )
 
-const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigType> = {
+const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigRaw> = {
     "mdd-causes-of-death": readMultiDimConfig("causes-of-death.yml"),
     "mdd-energy": readMultiDimConfig("energy.yml"),
     "mdd-life-expectancy": readMultiDimConfig("life-expectancy.json"),
@@ -33,6 +40,72 @@ interface BakingAdditionalContext {
     tagToSlugMap: Record<string, string>
 }
 
+const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
+    knex: db.KnexReadonlyTransaction,
+    rawConfig: MultiDimDataPageConfigRaw
+): Promise<MultiDimDataPageConfigPreProcessed> => {
+    const allCatalogPaths = rawConfig.views
+        .flatMap((view) =>
+            Object.values(view.indicators).flatMap((indicatorOrIndicators) =>
+                Array.isArray(indicatorOrIndicators)
+                    ? indicatorOrIndicators
+                    : [indicatorOrIndicators]
+            )
+        )
+        .filter((indicator) => typeof indicator === "string")
+
+    const catalogPathToIndicatorIdMap = await getVariableIdsByCatalogPath(
+        allCatalogPaths,
+        knex
+    )
+
+    const missingCatalogPaths = new Set(
+        allCatalogPaths.filter(
+            (indicator) => !catalogPathToIndicatorIdMap.has(indicator)
+        )
+    )
+
+    if (missingCatalogPaths.size > 0) {
+        console.warn(
+            `Could not find the following catalog paths in the database: ${Array.from(
+                missingCatalogPaths
+            ).join(", ")}`
+        )
+    }
+
+    const resolveSingleField = (
+        indicator: IndicatorEntryBeforePreProcessing
+    ) => {
+        if (typeof indicator === "string") {
+            const indicatorId = catalogPathToIndicatorIdMap.get(indicator)
+            return indicatorId ?? undefined
+        } else {
+            return indicator
+        }
+    }
+
+    const resolveField = (
+        indicator: MultiIndicatorEntry<IndicatorEntryBeforePreProcessing>
+    ): MultiIndicatorEntry<IndicatorEntryAfterPreProcessing> => {
+        if (Array.isArray(indicator)) {
+            return indicator.map(resolveSingleField)
+        } else {
+            return resolveSingleField(indicator)
+        }
+    }
+
+    for (const view of rawConfig.views) {
+        view.indicators = Object.fromEntries(
+            Object.entries(view.indicators).map(([key, value]) => [
+                key,
+                resolveField(value),
+            ])
+        ) as any
+    }
+
+    return rawConfig as MultiDimDataPageConfigPreProcessed
+}
+
 export const renderMultiDimDataPageBySlug = async (
     knex: db.KnexReadonlyTransaction,
     slug: string
@@ -43,7 +116,9 @@ export const renderMultiDimDataPageBySlug = async (
     const tagToSlugMap = await getTagToSlugMap(knex)
     const bakingContext = { tagToSlugMap }
 
-    const config = MultiDimDataPageConfig.fromObject(rawConfig)
+    const preProcessedConfig =
+        await resolveMultiDimDataPageCatalogPathsToIndicatorIds(knex, rawConfig)
+    const config = MultiDimDataPageConfig.fromObject(preProcessedConfig)
     return renderMultiDimDataPage(config, bakingContext)
 }
 
diff --git a/public/multi-dim/causes-of-death.yml b/public/multi-dim/causes-of-death.yml
index 6ee6c99934d..5c42fcfc04b 100644
--- a/public/multi-dim/causes-of-death.yml
+++ b/public/multi-dim/causes-of-death.yml
@@ -142,3863 +142,3882 @@ views:
           age: 15-49 years
           cause: Cardiovascular diseases
           metric: Number
-      indicator_path:
-          917705: y
+      indicators:
+          y: 917705
     - dimensions:
           age: 15-49 years
           cause: Neoplasms
           metric: Number
-      indicator_path:
-          918245: y
+      indicators:
+          y: 918245
     - dimensions:
           age: 15-49 years
           cause: Chronic respiratory diseases
           metric: Number
-      indicator_path:
-          917770: y
+      indicators:
+          y: 917770
     - dimensions:
           age: 15-49 years
           cause: Digestive diseases
           metric: Number
-      indicator_path:
-          917862: y
+      indicators:
+          y: 917862
     - dimensions:
           age: 15-49 years
           cause: Lower respiratory infections
           metric: Number
-      indicator_path:
-          918135: y
+      indicators:
+          y: 918135
     - dimensions:
           age: 15-49 years
           cause: Alzheimer's disease and other dementias
           metric: Number
-      indicator_path:
-          917635: y
+      indicators:
+          y: 917635
     - dimensions:
           age: 15-49 years
           cause: Diabetes mellitus
           metric: Number
-      indicator_path:
-          917846: y
+      indicators:
+          y: 917846
     - dimensions:
           age: 15-49 years
           cause: Diarrheal diseases
           metric: Number
-      indicator_path:
-          917856: y
+      indicators:
+          y: 917856
     - dimensions:
           age: 15-49 years
           cause: Meningitis
           metric: Number
-      indicator_path:
-          918186: y
+      indicators:
+          y: 918186
     - dimensions:
           age: 15-49 years
           cause: Parkinson's disease
           metric: Number
-      indicator_path:
-          918482: y
+      indicators:
+          y: 918482
     - dimensions:
           age: 15-49 years
           cause: Nutritional deficiencies
           metric: Number
-      indicator_path:
-          918302: y
+      indicators:
+          y: 918302
     - dimensions:
           age: 15-49 years
           cause: Malaria
           metric: Number
-      indicator_path:
-          918139: y
+      indicators:
+          y: 918139
     - dimensions:
           age: 15-49 years
           cause: Drowning
           metric: Number
-      indicator_path:
-          917874: y
+      indicators:
+          y: 917874
     - dimensions:
           age: 15-49 years
           cause: Interpersonal violence
           metric: Number
-      indicator_path:
-          918052: y
+      indicators:
+          y: 918052
     - dimensions:
           age: 15-49 years
           cause: Maternal disorders
           metric: Number
-      indicator_path:
-          918163: y
+      indicators:
+          y: 918163
     - dimensions:
           age: 15-49 years
           cause: HIV/AIDS
           metric: Number
-      indicator_path:
-          917997: y
+      indicators:
+          y: 917997
     - dimensions:
           age: 15-49 years
           cause: Drug use disorders
           metric: Number
-      indicator_path:
-          917880: y
+      indicators:
+          y: 917880
     - dimensions:
           age: 15-49 years
           cause: Tuberculosis
           metric: Number
-      indicator_path:
-          918679: y
+      indicators:
+          y: 918679
     - dimensions:
           age: 15-49 years
           cause: Alcohol use disorders
           metric: Number
-      indicator_path:
-          917621: y
+      indicators:
+          y: 917621
     - dimensions:
           age: 15-49 years
           cause: Self-harm
           metric: Number
-      indicator_path:
-          918578: y
+      indicators:
+          y: 918578
     - dimensions:
           age: 15-49 years
           cause: Exposure to forces of nature
           metric: Number
-      indicator_path:
-          917931: y
+      indicators:
+          y: 917931
     - dimensions:
           age: 15-49 years
           cause: Environmental heat and cold exposure
           metric: Number
-      indicator_path:
-          917923: y
+      indicators:
+          y: 917923
     - dimensions:
           age: 15-49 years
           cause: Conflict and terrorism
           metric: Number
-      indicator_path:
-          917804: y
+      indicators:
+          y: 917804
     - dimensions:
           age: 15-49 years
           cause: Chronic kidney disease
           metric: Number
-      indicator_path:
-          917733: y
+      indicators:
+          y: 917733
     - dimensions:
           age: 15-49 years
           cause: Poisonings
           metric: Number
-      indicator_path:
-          918524: y
+      indicators:
+          y: 918524
     - dimensions:
           age: 15-49 years
           cause: Road injuries
           metric: Number
-      indicator_path:
-          918569: y
+      indicators:
+          y: 918569
     - dimensions:
           age: 15-49 years
           cause: Fire, heat, and hot substances
           metric: Number
-      indicator_path:
-          917954: y
+      indicators:
+          y: 917954
     - dimensions:
           age: 15-49 years
           cause: Acute hepatitis
           metric: Number
-      indicator_path:
-          917583: y
+      indicators:
+          y: 917583
     - dimensions:
           age: 15-49 years
           cause: COVID-19
           metric: Number
-      indicator_path:
-          917697: y
+      indicators:
+          y: 917697
     - dimensions:
           age: 15-49 years
           cause: all
           metric: Number
-      indicator_path:
-          917583: y
-          917621: y
-          917635: y
-          917697: y
-          917705: y
-          917733: y
-          917770: y
-          917804: y
-          917846: y
-          917856: y
-          917862: y
-          917874: y
-          917880: y
-          917923: y
-          917931: y
-          917954: y
-          917997: y
-          918052: y
-          918135: y
-          918139: y
-          918163: y
-          918186: y
-          918245: y
-          918302: y
-          918482: y
-          918524: y
-          918569: y
-          918578: y
-          918679: y
+      indicators:
+          y:
+              - 917583
+              - 917621
+              - 917635
+              - 917697
+              - 917705
+              - 917733
+              - 917770
+              - 917804
+              - 917846
+              - 917856
+              - 917862
+              - 917874
+              - 917880
+              - 917923
+              - 917931
+              - 917954
+              - 917997
+              - 918052
+              - 918135
+              - 918139
+              - 918163
+              - 918186
+              - 918245
+              - 918302
+              - 918482
+              - 918524
+              - 918569
+              - 918578
+              - 918679
     - dimensions:
           age: 15-49 years
           cause: Cardiovascular diseases
           metric: Percent
-      indicator_path:
-          923608: y
+      indicators:
+          y: 923608
     - dimensions:
           age: 15-49 years
           cause: Neoplasms
           metric: Percent
-      indicator_path:
-          923878: y
+      indicators:
+          y: 923878
     - dimensions:
           age: 15-49 years
           cause: Chronic respiratory diseases
           metric: Percent
-      indicator_path:
-          923642: y
+      indicators:
+          y: 923642
     - dimensions:
           age: 15-49 years
           cause: Digestive diseases
           metric: Percent
-      indicator_path:
-          923691: y
+      indicators:
+          y: 923691
     - dimensions:
           age: 15-49 years
           cause: Lower respiratory infections
           metric: Percent
-      indicator_path:
-          923825: y
+      indicators:
+          y: 923825
     - dimensions:
           age: 15-49 years
           cause: Alzheimer's disease and other dementias
           metric: Percent
-      indicator_path:
-          923573: y
+      indicators:
+          y: 923573
     - dimensions:
           age: 15-49 years
           cause: Diabetes mellitus
           metric: Percent
-      indicator_path:
-          923681: y
+      indicators:
+          y: 923681
     - dimensions:
           age: 15-49 years
           cause: Diarrheal diseases
           metric: Percent
-      indicator_path:
-          923686: y
+      indicators:
+          y: 923686
     - dimensions:
           age: 15-49 years
           cause: Meningitis
           metric: Percent
-      indicator_path:
-          923849: y
+      indicators:
+          y: 923849
     - dimensions:
           age: 15-49 years
           cause: Parkinson's disease
           metric: Percent
-      indicator_path:
-          923995: y
+      indicators:
+          y: 923995
     - dimensions:
           age: 15-49 years
           cause: Nutritional deficiencies
           metric: Percent
-      indicator_path:
-          923904: y
+      indicators:
+          y: 923904
     - dimensions:
           age: 15-49 years
           cause: Malaria
           metric: Percent
-      indicator_path:
-          923823: y
+      indicators:
+          y: 923823
     - dimensions:
           age: 15-49 years
           cause: Drowning
           metric: Percent
-      indicator_path:
-          923696: y
+      indicators:
+          y: 923696
     - dimensions:
           age: 15-49 years
           cause: Interpersonal violence
           metric: Percent
-      indicator_path:
-          923781: y
+      indicators:
+          y: 923781
     - dimensions:
           age: 15-49 years
           cause: Maternal disorders
           metric: Percent
-      indicator_path:
-          923836: y
+      indicators:
+          y: 923836
     - dimensions:
           age: 15-49 years
           cause: HIV/AIDS
           metric: Percent
-      indicator_path:
-          923753: y
+      indicators:
+          y: 923753
     - dimensions:
           age: 15-49 years
           cause: Drug use disorders
           metric: Percent
-      indicator_path:
-          923699: y
+      indicators:
+          y: 923699
     - dimensions:
           age: 15-49 years
           cause: Tuberculosis
           metric: Percent
-      indicator_path:
-          924091: y
+      indicators:
+          y: 924091
     - dimensions:
           age: 15-49 years
           cause: Alcohol use disorders
           metric: Percent
-      indicator_path:
-          923568: y
+      indicators:
+          y: 923568
     - dimensions:
           age: 15-49 years
           cause: Self-harm
           metric: Percent
-      indicator_path:
-          924041: y
+      indicators:
+          y: 924041
     - dimensions:
           age: 15-49 years
           cause: Exposure to forces of nature
           metric: Percent
-      indicator_path:
-          923724: y
+      indicators:
+          y: 923724
     - dimensions:
           age: 15-49 years
           cause: Environmental heat and cold exposure
           metric: Percent
-      indicator_path:
-          923720: y
+      indicators:
+          y: 923720
     - dimensions:
           age: 15-49 years
           cause: Conflict and terrorism
           metric: Percent
-      indicator_path:
-          923659: y
+      indicators:
+          y: 923659
     - dimensions:
           age: 15-49 years
           cause: Chronic kidney disease
           metric: Percent
-      indicator_path:
-          923623: y
+      indicators:
+          y: 923623
     - dimensions:
           age: 15-49 years
           cause: Poisonings
           metric: Percent
-      indicator_path:
-          924013: y
+      indicators:
+          y: 924013
     - dimensions:
           age: 15-49 years
           cause: Road injuries
           metric: Percent
-      indicator_path:
-          924038: y
+      indicators:
+          y: 924038
     - dimensions:
           age: 15-49 years
           cause: Fire, heat, and hot substances
           metric: Percent
-      indicator_path:
-          923733: y
+      indicators:
+          y: 923733
     - dimensions:
           age: 15-49 years
           cause: Acute hepatitis
           metric: Percent
-      indicator_path:
-          923549: y
+      indicators:
+          y: 923549
     - dimensions:
           age: 15-49 years
           cause: COVID-19
           metric: Percent
-      indicator_path:
-          923603: y
+      indicators:
+          y: 923603
     - dimensions:
           age: 15-49 years
           cause: all
           metric: Percent
-      indicator_path:
-          923549: y
-          923568: y
-          923573: y
-          923603: y
-          923608: y
-          923623: y
-          923642: y
-          923659: y
-          923681: y
-          923686: y
-          923691: y
-          923696: y
-          923699: y
-          923720: y
-          923724: y
-          923733: y
-          923753: y
-          923781: y
-          923823: y
-          923825: y
-          923836: y
-          923849: y
-          923878: y
-          923904: y
-          923995: y
-          924013: y
-          924038: y
-          924041: y
-          924091: y
+      indicators:
+          y:
+              - 923549
+              - 923568
+              - 923573
+              - 923603
+              - 923608
+              - 923623
+              - 923642
+              - 923659
+              - 923681
+              - 923686
+              - 923691
+              - 923696
+              - 923699
+              - 923720
+              - 923724
+              - 923733
+              - 923753
+              - 923781
+              - 923823
+              - 923825
+              - 923836
+              - 923849
+              - 923878
+              - 923904
+              - 923995
+              - 924013
+              - 924038
+              - 924041
+              - 924091
     - dimensions:
           age: 15-49 years
           cause: Cardiovascular diseases
           metric: Rate
-      indicator_path:
-          926847: y
+      indicators:
+          y: 926847
     - dimensions:
           age: 15-49 years
           cause: Neoplasms
           metric: Rate
-      indicator_path:
-          927118: y
+      indicators:
+          y: 927118
     - dimensions:
           age: 15-49 years
           cause: Chronic respiratory diseases
           metric: Rate
-      indicator_path:
-          926880: y
+      indicators:
+          y: 926880
     - dimensions:
           age: 15-49 years
           cause: Digestive diseases
           metric: Rate
-      indicator_path:
-          926928: y
+      indicators:
+          y: 926928
     - dimensions:
           age: 15-49 years
           cause: Lower respiratory infections
           metric: Rate
-      indicator_path:
-          927061: y
+      indicators:
+          y: 927061
     - dimensions:
           age: 15-49 years
           cause: Alzheimer's disease and other dementias
           metric: Rate
-      indicator_path:
-          926811: y
+      indicators:
+          y: 926811
     - dimensions:
           age: 15-49 years
           cause: Diabetes mellitus
           metric: Rate
-      indicator_path:
-          926916: y
+      indicators:
+          y: 926916
     - dimensions:
           age: 15-49 years
           cause: Diarrheal diseases
           metric: Rate
-      indicator_path:
-          926922: y
+      indicators:
+          y: 926922
     - dimensions:
           age: 15-49 years
           cause: Meningitis
           metric: Rate
-      indicator_path:
-          927088: y
+      indicators:
+          y: 927088
     - dimensions:
           age: 15-49 years
           cause: Parkinson's disease
           metric: Rate
-      indicator_path:
-          927235: y
+      indicators:
+          y: 927235
     - dimensions:
           age: 15-49 years
           cause: Nutritional deficiencies
           metric: Rate
-      indicator_path:
-          927145: y
+      indicators:
+          y: 927145
     - dimensions:
           age: 15-49 years
           cause: Malaria
           metric: Rate
-      indicator_path:
-          927063: y
+      indicators:
+          y: 927063
     - dimensions:
           age: 15-49 years
           cause: Drowning
           metric: Rate
-      indicator_path:
-          926933: y
+      indicators:
+          y: 926933
     - dimensions:
           age: 15-49 years
           cause: Interpersonal violence
           metric: Rate
-      indicator_path:
-          927021: y
+      indicators:
+          y: 927021
     - dimensions:
           age: 15-49 years
           cause: Maternal disorders
           metric: Rate
-      indicator_path:
-          927078: y
+      indicators:
+          y: 927078
     - dimensions:
           age: 15-49 years
           cause: HIV/AIDS
           metric: Rate
-      indicator_path:
-          926991: y
+      indicators:
+          y: 926991
     - dimensions:
           age: 15-49 years
           cause: Drug use disorders
           metric: Rate
-      indicator_path:
-          926935: y
+      indicators:
+          y: 926935
     - dimensions:
           age: 15-49 years
           cause: Tuberculosis
           metric: Rate
-      indicator_path:
-          927335: y
+      indicators:
+          y: 927335
     - dimensions:
           age: 15-49 years
           cause: Alcohol use disorders
           metric: Rate
-      indicator_path:
-          926804: y
+      indicators:
+          y: 926804
     - dimensions:
           age: 15-49 years
           cause: Self-harm
           metric: Rate
-      indicator_path:
-          927280: y
+      indicators:
+          y: 927280
     - dimensions:
           age: 15-49 years
           cause: Exposure to forces of nature
           metric: Rate
-      indicator_path:
-          926960: y
+      indicators:
+          y: 926960
     - dimensions:
           age: 15-49 years
           cause: Environmental heat and cold exposure
           metric: Rate
-      indicator_path:
-          926956: y
+      indicators:
+          y: 926956
     - dimensions:
           age: 15-49 years
           cause: Conflict and terrorism
           metric: Rate
-      indicator_path:
-          926896: y
+      indicators:
+          y: 926896
     - dimensions:
           age: 15-49 years
           cause: Chronic kidney disease
           metric: Rate
-      indicator_path:
-          926861: y
+      indicators:
+          y: 926861
     - dimensions:
           age: 15-49 years
           cause: Poisonings
           metric: Rate
-      indicator_path:
-          927255: y
+      indicators:
+          y: 927255
     - dimensions:
           age: 15-49 years
           cause: Road injuries
           metric: Rate
-      indicator_path:
-          927277: y
+      indicators:
+          y: 927277
     - dimensions:
           age: 15-49 years
           cause: Fire, heat, and hot substances
           metric: Rate
-      indicator_path:
-          926971: y
+      indicators:
+          y: 926971
     - dimensions:
           age: 15-49 years
           cause: Acute hepatitis
           metric: Rate
-      indicator_path:
-          926786: y
+      indicators:
+          y: 926786
     - dimensions:
           age: 15-49 years
           cause: COVID-19
           metric: Rate
-      indicator_path:
-          926842: y
+      indicators:
+          y: 926842
     - dimensions:
           age: 15-49 years
           cause: all
           metric: Rate
-      indicator_path:
-          926786: y
-          926804: y
-          926811: y
-          926842: y
-          926847: y
-          926861: y
-          926880: y
-          926896: y
-          926916: y
-          926922: y
-          926928: y
-          926933: y
-          926935: y
-          926956: y
-          926960: y
-          926971: y
-          926991: y
-          927021: y
-          927061: y
-          927063: y
-          927078: y
-          927088: y
-          927118: y
-          927145: y
-          927235: y
-          927255: y
-          927277: y
-          927280: y
-          927335: y
+      indicators:
+          y:
+              - 926786
+              - 926804
+              - 926811
+              - 926842
+              - 926847
+              - 926861
+              - 926880
+              - 926896
+              - 926916
+              - 926922
+              - 926928
+              - 926933
+              - 926935
+              - 926956
+              - 926960
+              - 926971
+              - 926991
+              - 927021
+              - 927061
+              - 927063
+              - 927078
+              - 927088
+              - 927118
+              - 927145
+              - 927235
+              - 927255
+              - 927277
+              - 927280
+              - 927335
     - dimensions:
           age: 5-14 years
           cause: Cardiovascular diseases
           metric: Number
-      indicator_path:
-          918855: y
+      indicators:
+          y: 918855
     - dimensions:
           age: 5-14 years
           cause: Neoplasms
           metric: Number
-      indicator_path:
-          919321: y
+      indicators:
+          y: 919321
     - dimensions:
           age: 5-14 years
           cause: Chronic respiratory diseases
           metric: Number
-      indicator_path:
-          918900: y
+      indicators:
+          y: 918900
     - dimensions:
           age: 5-14 years
           cause: Digestive diseases
           metric: Number
-      indicator_path:
-          918980: y
+      indicators:
+          y: 918980
     - dimensions:
           age: 5-14 years
           cause: Lower respiratory infections
           metric: Number
-      indicator_path:
-          919219: y
+      indicators:
+          y: 919219
     - dimensions:
           age: 5-14 years
           cause: Diabetes mellitus
           metric: Number
-      indicator_path:
-          918961: y
+      indicators:
+          y: 918961
     - dimensions:
           age: 5-14 years
           cause: Diarrheal diseases
           metric: Number
-      indicator_path:
-          918970: y
+      indicators:
+          y: 918970
     - dimensions:
           age: 5-14 years
           cause: Meningitis
           metric: Number
-      indicator_path:
-          919268: y
+      indicators:
+          y: 919268
     - dimensions:
           age: 5-14 years
           cause: Nutritional deficiencies
           metric: Number
-      indicator_path:
-          919350: y
+      indicators:
+          y: 919350
     - dimensions:
           age: 5-14 years
           cause: Malaria
           metric: Number
-      indicator_path:
-          919224: y
+      indicators:
+          y: 919224
     - dimensions:
           age: 5-14 years
           cause: Drowning
           metric: Number
-      indicator_path:
-          918991: y
+      indicators:
+          y: 918991
     - dimensions:
           age: 5-14 years
           cause: Interpersonal violence
           metric: Number
-      indicator_path:
-          919160: y
+      indicators:
+          y: 919160
     - dimensions:
           age: 5-14 years
           cause: Maternal disorders
           metric: Number
-      indicator_path:
-          919243: y
+      indicators:
+          y: 919243
     - dimensions:
           age: 5-14 years
           cause: HIV/AIDS
           metric: Number
-      indicator_path:
-          919102: y
+      indicators:
+          y: 919102
     - dimensions:
           age: 5-14 years
           cause: Drug use disorders
           metric: Number
-      indicator_path:
-          918996: y
+      indicators:
+          y: 918996
     - dimensions:
           age: 5-14 years
           cause: Tuberculosis
           metric: Number
-      indicator_path:
-          919679: y
+      indicators:
+          y: 919679
     - dimensions:
           age: 5-14 years
           cause: Alcohol use disorders
           metric: Number
-      indicator_path:
-          918798: y
+      indicators:
+          y: 918798
     - dimensions:
           age: 5-14 years
           cause: Self-harm
           metric: Number
-      indicator_path:
-          919600: y
+      indicators:
+          y: 919600
     - dimensions:
           age: 5-14 years
           cause: Exposure to forces of nature
           metric: Number
-      indicator_path:
-          919043: y
+      indicators:
+          y: 919043
     - dimensions:
           age: 5-14 years
           cause: Environmental heat and cold exposure
           metric: Number
-      indicator_path:
-          919038: y
+      indicators:
+          y: 919038
     - dimensions:
           age: 5-14 years
           cause: Conflict and terrorism
           metric: Number
-      indicator_path:
-          918920: y
+      indicators:
+          y: 918920
     - dimensions:
           age: 5-14 years
           cause: Chronic kidney disease
           metric: Number
-      indicator_path:
-          918881: y
+      indicators:
+          y: 918881
     - dimensions:
           age: 5-14 years
           cause: Poisonings
           metric: Number
-      indicator_path:
-          919543: y
+      indicators:
+          y: 919543
     - dimensions:
           age: 5-14 years
           cause: Road injuries
           metric: Number
-      indicator_path:
-          919589: y
+      indicators:
+          y: 919589
     - dimensions:
           age: 5-14 years
           cause: Fire, heat, and hot substances
           metric: Number
-      indicator_path:
-          919063: y
+      indicators:
+          y: 919063
     - dimensions:
           age: 5-14 years
           cause: Acute hepatitis
           metric: Number
-      indicator_path:
-          918764: y
+      indicators:
+          y: 918764
     - dimensions:
           age: 5-14 years
           cause: COVID-19
           metric: Number
-      indicator_path:
-          918843: y
+      indicators:
+          y: 918843
     - dimensions:
           age: 5-14 years
           cause: all
           metric: Number
-      indicator_path:
-          918764: y
-          918798: y
-          918843: y
-          918855: y
-          918881: y
-          918900: y
-          918920: y
-          918961: y
-          918970: y
-          918980: y
-          918991: y
-          918996: y
-          919038: y
-          919043: y
-          919063: y
-          919102: y
-          919160: y
-          919219: y
-          919224: y
-          919243: y
-          919268: y
-          919321: y
-          919350: y
-          919543: y
-          919589: y
-          919600: y
-          919679: y
+      indicators:
+          y:
+              - 918764
+              - 918798
+              - 918843
+              - 918855
+              - 918881
+              - 918900
+              - 918920
+              - 918961
+              - 918970
+              - 918980
+              - 918991
+              - 918996
+              - 919038
+              - 919043
+              - 919063
+              - 919102
+              - 919160
+              - 919219
+              - 919224
+              - 919243
+              - 919268
+              - 919321
+              - 919350
+              - 919543
+              - 919589
+              - 919600
+              - 919679
     - dimensions:
           age: 5-14 years
           cause: Cardiovascular diseases
           metric: Percent
-      indicator_path:
-          924180: y
+      indicators:
+          y: 924180
     - dimensions:
           age: 5-14 years
           cause: Neoplasms
           metric: Percent
-      indicator_path:
-          924410: y
+      indicators:
+          y: 924410
     - dimensions:
           age: 5-14 years
           cause: Chronic respiratory diseases
           metric: Percent
-      indicator_path:
-          924202: y
+      indicators:
+          y: 924202
     - dimensions:
           age: 5-14 years
           cause: Digestive diseases
           metric: Percent
-      indicator_path:
-          924241: y
+      indicators:
+          y: 924241
     - dimensions:
           age: 5-14 years
           cause: Lower respiratory infections
           metric: Percent
-      indicator_path:
-          924360: y
+      indicators:
+          y: 924360
     - dimensions:
           age: 5-14 years
           cause: Diabetes mellitus
           metric: Percent
-      indicator_path:
-          924233: y
+      indicators:
+          y: 924233
     - dimensions:
           age: 5-14 years
           cause: Diarrheal diseases
           metric: Percent
-      indicator_path:
-          924237: y
+      indicators:
+          y: 924237
     - dimensions:
           age: 5-14 years
           cause: Meningitis
           metric: Percent
-      indicator_path:
-          924385: y
+      indicators:
+          y: 924385
     - dimensions:
           age: 5-14 years
           cause: Nutritional deficiencies
           metric: Percent
-      indicator_path:
-          924424: y
+      indicators:
+          y: 924424
     - dimensions:
           age: 5-14 years
           cause: Malaria
           metric: Percent
-      indicator_path:
-          924363: y
+      indicators:
+          y: 924363
     - dimensions:
           age: 5-14 years
           cause: Drowning
           metric: Percent
-      indicator_path:
-          924247: y
+      indicators:
+          y: 924247
     - dimensions:
           age: 5-14 years
           cause: Interpersonal violence
           metric: Percent
-      indicator_path:
-          924330: y
+      indicators:
+          y: 924330
     - dimensions:
           age: 5-14 years
           cause: Maternal disorders
           metric: Percent
-      indicator_path:
-          924373: y
+      indicators:
+          y: 924373
     - dimensions:
           age: 5-14 years
           cause: HIV/AIDS
           metric: Percent
-      indicator_path:
-          924302: y
+      indicators:
+          y: 924302
     - dimensions:
           age: 5-14 years
           cause: Drug use disorders
           metric: Percent
-      indicator_path:
-          924249: y
+      indicators:
+          y: 924249
     - dimensions:
           age: 5-14 years
           cause: Tuberculosis
           metric: Percent
-      indicator_path:
-          924590: y
+      indicators:
+          y: 924590
     - dimensions:
           age: 5-14 years
           cause: Alcohol use disorders
           metric: Percent
-      indicator_path:
-          924151: y
+      indicators:
+          y: 924151
     - dimensions:
           age: 5-14 years
           cause: Self-harm
           metric: Percent
-      indicator_path:
-          924548: y
+      indicators:
+          y: 924548
     - dimensions:
           age: 5-14 years
           cause: Exposure to forces of nature
           metric: Percent
-      indicator_path:
-          924273: y
+      indicators:
+          y: 924273
     - dimensions:
           age: 5-14 years
           cause: Environmental heat and cold exposure
           metric: Percent
-      indicator_path:
-          924270: y
+      indicators:
+          y: 924270
     - dimensions:
           age: 5-14 years
           cause: Conflict and terrorism
           metric: Percent
-      indicator_path:
-          924212: y
+      indicators:
+          y: 924212
     - dimensions:
           age: 5-14 years
           cause: Chronic kidney disease
           metric: Percent
-      indicator_path:
-          924192: y
+      indicators:
+          y: 924192
     - dimensions:
           age: 5-14 years
           cause: Poisonings
           metric: Percent
-      indicator_path:
-          924521: y
+      indicators:
+          y: 924521
     - dimensions:
           age: 5-14 years
           cause: Road injuries
           metric: Percent
-      indicator_path:
-          924544: y
+      indicators:
+          y: 924544
     - dimensions:
           age: 5-14 years
           cause: Fire, heat, and hot substances
           metric: Percent
-      indicator_path:
-          924283: y
+      indicators:
+          y: 924283
     - dimensions:
           age: 5-14 years
           cause: Acute hepatitis
           metric: Percent
-      indicator_path:
-          924134: y
+      indicators:
+          y: 924134
     - dimensions:
           age: 5-14 years
           cause: COVID-19
           metric: Percent
-      indicator_path:
-          924175: y
+      indicators:
+          y: 924175
     - dimensions:
           age: 5-14 years
           cause: all
           metric: Percent
-      indicator_path:
-          924134: y
-          924151: y
-          924175: y
-          924180: y
-          924192: y
-          924202: y
-          924212: y
-          924233: y
-          924237: y
-          924241: y
-          924247: y
-          924249: y
-          924270: y
-          924273: y
-          924283: y
-          924302: y
-          924330: y
-          924360: y
-          924363: y
-          924373: y
-          924385: y
-          924410: y
-          924424: y
-          924521: y
-          924544: y
-          924548: y
-          924590: y
+      indicators:
+          y:
+              - 924134
+              - 924151
+              - 924175
+              - 924180
+              - 924192
+              - 924202
+              - 924212
+              - 924233
+              - 924237
+              - 924241
+              - 924247
+              - 924249
+              - 924270
+              - 924273
+              - 924283
+              - 924302
+              - 924330
+              - 924360
+              - 924363
+              - 924373
+              - 924385
+              - 924410
+              - 924424
+              - 924521
+              - 924544
+              - 924548
+              - 924590
     - dimensions:
           age: 5-14 years
           cause: Cardiovascular diseases
           metric: Rate
-      indicator_path:
-          927421: y
+      indicators:
+          y: 927421
     - dimensions:
           age: 5-14 years
           cause: Neoplasms
           metric: Rate
-      indicator_path:
-          927650: y
+      indicators:
+          y: 927650
     - dimensions:
           age: 5-14 years
           cause: Chronic respiratory diseases
           metric: Rate
-      indicator_path:
-          927442: y
+      indicators:
+          y: 927442
     - dimensions:
           age: 5-14 years
           cause: Digestive diseases
           metric: Rate
-      indicator_path:
-          927481: y
+      indicators:
+          y: 927481
     - dimensions:
           age: 5-14 years
           cause: Lower respiratory infections
           metric: Rate
-      indicator_path:
-          927600: y
+      indicators:
+          y: 927600
     - dimensions:
           age: 5-14 years
           cause: Diabetes mellitus
           metric: Rate
-      indicator_path:
-          927473: y
+      indicators:
+          y: 927473
     - dimensions:
           age: 5-14 years
           cause: Diarrheal diseases
           metric: Rate
-      indicator_path:
-          927477: y
+      indicators:
+          y: 927477
     - dimensions:
           age: 5-14 years
           cause: Meningitis
           metric: Rate
-      indicator_path:
-          927625: y
+      indicators:
+          y: 927625
     - dimensions:
           age: 5-14 years
           cause: Nutritional deficiencies
           metric: Rate
-      indicator_path:
-          927664: y
+      indicators:
+          y: 927664
     - dimensions:
           age: 5-14 years
           cause: Malaria
           metric: Rate
-      indicator_path:
-          927602: y
+      indicators:
+          y: 927602
     - dimensions:
           age: 5-14 years
           cause: Drowning
           metric: Rate
-      indicator_path:
-          927487: y
+      indicators:
+          y: 927487
     - dimensions:
           age: 5-14 years
           cause: Interpersonal violence
           metric: Rate
-      indicator_path:
-          927571: y
+      indicators:
+          y: 927571
     - dimensions:
           age: 5-14 years
           cause: Maternal disorders
           metric: Rate
-      indicator_path:
-          927614: y
+      indicators:
+          y: 927614
     - dimensions:
           age: 5-14 years
           cause: HIV/AIDS
           metric: Rate
-      indicator_path:
-          927542: y
+      indicators:
+          y: 927542
     - dimensions:
           age: 5-14 years
           cause: Drug use disorders
           metric: Rate
-      indicator_path:
-          927489: y
+      indicators:
+          y: 927489
     - dimensions:
           age: 5-14 years
           cause: Tuberculosis
           metric: Rate
-      indicator_path:
-          927828: y
+      indicators:
+          y: 927828
     - dimensions:
           age: 5-14 years
           cause: Alcohol use disorders
           metric: Rate
-      indicator_path:
-          927394: y
+      indicators:
+          y: 927394
     - dimensions:
           age: 5-14 years
           cause: Self-harm
           metric: Rate
-      indicator_path:
-          927787: y
+      indicators:
+          y: 927787
     - dimensions:
           age: 5-14 years
           cause: Exposure to forces of nature
           metric: Rate
-      indicator_path:
-          927513: y
+      indicators:
+          y: 927513
     - dimensions:
           age: 5-14 years
           cause: Environmental heat and cold exposure
           metric: Rate
-      indicator_path:
-          927510: y
+      indicators:
+          y: 927510
     - dimensions:
           age: 5-14 years
           cause: Conflict and terrorism
           metric: Rate
-      indicator_path:
-          927453: y
+      indicators:
+          y: 927453
     - dimensions:
           age: 5-14 years
           cause: Chronic kidney disease
           metric: Rate
-      indicator_path:
-          927434: y
+      indicators:
+          y: 927434
     - dimensions:
           age: 5-14 years
           cause: Poisonings
           metric: Rate
-      indicator_path:
-          927761: y
+      indicators:
+          y: 927761
     - dimensions:
           age: 5-14 years
           cause: Road injuries
           metric: Rate
-      indicator_path:
-          927783: y
+      indicators:
+          y: 927783
     - dimensions:
           age: 5-14 years
           cause: Fire, heat, and hot substances
           metric: Rate
-      indicator_path:
-          927523: y
+      indicators:
+          y: 927523
     - dimensions:
           age: 5-14 years
           cause: Acute hepatitis
           metric: Rate
-      indicator_path:
-          927376: y
+      indicators:
+          y: 927376
     - dimensions:
           age: 5-14 years
           cause: COVID-19
           metric: Rate
-      indicator_path:
-          927417: y
+      indicators:
+          y: 927417
     - dimensions:
           age: 5-14 years
           cause: all
           metric: Rate
-      indicator_path:
-          927376: y
-          927394: y
-          927417: y
-          927421: y
-          927434: y
-          927442: y
-          927453: y
-          927473: y
-          927477: y
-          927481: y
-          927487: y
-          927489: y
-          927510: y
-          927513: y
-          927523: y
-          927542: y
-          927571: y
-          927600: y
-          927602: y
-          927614: y
-          927625: y
-          927650: y
-          927664: y
-          927761: y
-          927783: y
-          927787: y
-          927828: y
+      indicators:
+          y:
+              - 927376
+              - 927394
+              - 927417
+              - 927421
+              - 927434
+              - 927442
+              - 927453
+              - 927473
+              - 927477
+              - 927481
+              - 927487
+              - 927489
+              - 927510
+              - 927513
+              - 927523
+              - 927542
+              - 927571
+              - 927600
+              - 927602
+              - 927614
+              - 927625
+              - 927650
+              - 927664
+              - 927761
+              - 927783
+              - 927787
+              - 927828
     - dimensions:
           age: 50-69 years
           cause: Cardiovascular diseases
           metric: Number
-      indicator_path:
-          919878: y
+      indicators:
+          y: 919878
     - dimensions:
           age: 50-69 years
           cause: Neoplasms
           metric: Number
-      indicator_path:
-          920418: y
+      indicators:
+          y: 920418
     - dimensions:
           age: 50-69 years
           cause: Chronic respiratory diseases
           metric: Number
-      indicator_path:
-          919944: y
+      indicators:
+          y: 919944
     - dimensions:
           age: 50-69 years
           cause: Digestive diseases
           metric: Number
-      indicator_path:
-          920040: y
+      indicators:
+          y: 920040
     - dimensions:
           age: 50-69 years
           cause: Lower respiratory infections
           metric: Number
-      indicator_path:
-          920313: y
+      indicators:
+          y: 920313
     - dimensions:
           age: 50-69 years
           cause: Alzheimer's disease and other dementias
           metric: Number
-      indicator_path:
-          919811: y
+      indicators:
+          y: 919811
     - dimensions:
           age: 50-69 years
           cause: Diabetes mellitus
           metric: Number
-      indicator_path:
-          920019: y
+      indicators:
+          y: 920019
     - dimensions:
           age: 50-69 years
           cause: Diarrheal diseases
           metric: Number
-      indicator_path:
-          920029: y
+      indicators:
+          y: 920029
     - dimensions:
           age: 50-69 years
           cause: Meningitis
           metric: Number
-      indicator_path:
-          920367: y
+      indicators:
+          y: 920367
     - dimensions:
           age: 50-69 years
           cause: Parkinson's disease
           metric: Number
-      indicator_path:
-          920651: y
+      indicators:
+          y: 920651
     - dimensions:
           age: 50-69 years
           cause: Nutritional deficiencies
           metric: Number
-      indicator_path:
-          920471: y
+      indicators:
+          y: 920471
     - dimensions:
           age: 50-69 years
           cause: Malaria
           metric: Number
-      indicator_path:
-          920317: y
+      indicators:
+          y: 920317
     - dimensions:
           age: 50-69 years
           cause: Drowning
           metric: Number
-      indicator_path:
-          920052: y
+      indicators:
+          y: 920052
     - dimensions:
           age: 50-69 years
           cause: Interpersonal violence
           metric: Number
-      indicator_path:
-          920230: y
+      indicators:
+          y: 920230
     - dimensions:
           age: 50-69 years
           cause: Maternal disorders
           metric: Number
-      indicator_path:
-          920341: y
+      indicators:
+          y: 920341
     - dimensions:
           age: 50-69 years
           cause: HIV/AIDS
           metric: Number
-      indicator_path:
-          920168: y
+      indicators:
+          y: 920168
     - dimensions:
           age: 50-69 years
           cause: Drug use disorders
           metric: Number
-      indicator_path:
-          920057: y
+      indicators:
+          y: 920057
     - dimensions:
           age: 50-69 years
           cause: Tuberculosis
           metric: Number
-      indicator_path:
-          920850: y
+      indicators:
+          y: 920850
     - dimensions:
           age: 50-69 years
           cause: Alcohol use disorders
           metric: Number
-      indicator_path:
-          919799: y
+      indicators:
+          y: 919799
     - dimensions:
           age: 50-69 years
           cause: Self-harm
           metric: Number
-      indicator_path:
-          920748: y
+      indicators:
+          y: 920748
     - dimensions:
           age: 50-69 years
           cause: Exposure to forces of nature
           metric: Number
-      indicator_path:
-          920103: y
+      indicators:
+          y: 920103
     - dimensions:
           age: 50-69 years
           cause: Environmental heat and cold exposure
           metric: Number
-      indicator_path:
-          920096: y
+      indicators:
+          y: 920096
     - dimensions:
           age: 50-69 years
           cause: Conflict and terrorism
           metric: Number
-      indicator_path:
-          919979: y
+      indicators:
+          y: 919979
     - dimensions:
           age: 50-69 years
           cause: Chronic kidney disease
           metric: Number
-      indicator_path:
-          919909: y
+      indicators:
+          y: 919909
     - dimensions:
           age: 50-69 years
           cause: Poisonings
           metric: Number
-      indicator_path:
-          920694: y
+      indicators:
+          y: 920694
     - dimensions:
           age: 50-69 years
           cause: Road injuries
           metric: Number
-      indicator_path:
-          920741: y
+      indicators:
+          y: 920741
     - dimensions:
           age: 50-69 years
           cause: Fire, heat, and hot substances
           metric: Number
-      indicator_path:
-          920123: y
+      indicators:
+          y: 920123
     - dimensions:
           age: 50-69 years
           cause: Acute hepatitis
           metric: Number
-      indicator_path:
-          919760: y
+      indicators:
+          y: 919760
     - dimensions:
           age: 50-69 years
           cause: COVID-19
           metric: Number
-      indicator_path:
-          919872: y
+      indicators:
+          y: 919872
     - dimensions:
           age: 50-69 years
           cause: all
           metric: Number
-      indicator_path:
-          919760: y
-          919799: y
-          919811: y
-          919872: y
-          919878: y
-          919909: y
-          919944: y
-          919979: y
-          920019: y
-          920029: y
-          920040: y
-          920052: y
-          920057: y
-          920096: y
-          920103: y
-          920123: y
-          920168: y
-          920230: y
-          920313: y
-          920317: y
-          920341: y
-          920367: y
-          920418: y
-          920471: y
-          920651: y
-          920694: y
-          920741: y
-          920748: y
-          920850: y
+      indicators:
+          y:
+              - 919760
+              - 919799
+              - 919811
+              - 919872
+              - 919878
+              - 919909
+              - 919944
+              - 919979
+              - 920019
+              - 920029
+              - 920040
+              - 920052
+              - 920057
+              - 920096
+              - 920103
+              - 920123
+              - 920168
+              - 920230
+              - 920313
+              - 920317
+              - 920341
+              - 920367
+              - 920418
+              - 920471
+              - 920651
+              - 920694
+              - 920741
+              - 920748
+              - 920850
     - dimensions:
           age: 50-69 years
           cause: Cardiovascular diseases
           metric: Percent
-      indicator_path:
-          924687: y
+      indicators:
+          y: 924687
     - dimensions:
           age: 50-69 years
           cause: Neoplasms
           metric: Percent
-      indicator_path:
-          924952: y
+      indicators:
+          y: 924952
     - dimensions:
           age: 50-69 years
           cause: Chronic respiratory diseases
           metric: Percent
-      indicator_path:
-          924720: y
+      indicators:
+          y: 924720
     - dimensions:
           age: 50-69 years
           cause: Digestive diseases
           metric: Percent
-      indicator_path:
-          924769: y
+      indicators:
+          y: 924769
     - dimensions:
           age: 50-69 years
           cause: Lower respiratory infections
           metric: Percent
-      indicator_path:
-          924899: y
+      indicators:
+          y: 924899
     - dimensions:
           age: 50-69 years
           cause: Alzheimer's disease and other dementias
           metric: Percent
-      indicator_path:
-          924654: y
+      indicators:
+          y: 924654
     - dimensions:
           age: 50-69 years
           cause: Diabetes mellitus
           metric: Percent
-      indicator_path:
-          924758: y
+      indicators:
+          y: 924758
     - dimensions:
           age: 50-69 years
           cause: Diarrheal diseases
           metric: Percent
-      indicator_path:
-          924765: y
+      indicators:
+          y: 924765
     - dimensions:
           age: 50-69 years
           cause: Meningitis
           metric: Percent
-      indicator_path:
-          924926: y
+      indicators:
+          y: 924926
     - dimensions:
           age: 50-69 years
           cause: Parkinson's disease
           metric: Percent
-      indicator_path:
-          925066: y
+      indicators:
+          y: 925066
     - dimensions:
           age: 50-69 years
           cause: Nutritional deficiencies
           metric: Percent
-      indicator_path:
-          924979: y
+      indicators:
+          y: 924979
     - dimensions:
           age: 50-69 years
           cause: Malaria
           metric: Percent
-      indicator_path:
-          924901: y
+      indicators:
+          y: 924901
     - dimensions:
           age: 50-69 years
           cause: Drowning
           metric: Percent
-      indicator_path:
-          924774: y
+      indicators:
+          y: 924774
     - dimensions:
           age: 50-69 years
           cause: Interpersonal violence
           metric: Percent
-      indicator_path:
-          924859: y
+      indicators:
+          y: 924859
     - dimensions:
           age: 50-69 years
           cause: Maternal disorders
           metric: Percent
-      indicator_path:
-          924914: y
+      indicators:
+          y: 924914
     - dimensions:
           age: 50-69 years
           cause: HIV/AIDS
           metric: Percent
-      indicator_path:
-          924829: y
+      indicators:
+          y: 924829
     - dimensions:
           age: 50-69 years
           cause: Drug use disorders
           metric: Percent
-      indicator_path:
-          924777: y
+      indicators:
+          y: 924777
     - dimensions:
           age: 50-69 years
           cause: Tuberculosis
           metric: Percent
-      indicator_path:
-          925165: y
+      indicators:
+          y: 925165
     - dimensions:
           age: 50-69 years
           cause: Alcohol use disorders
           metric: Percent
-      indicator_path:
-          924647: y
+      indicators:
+          y: 924647
     - dimensions:
           age: 50-69 years
           cause: Self-harm
           metric: Percent
-      indicator_path:
-          925115: y
+      indicators:
+          y: 925115
     - dimensions:
           age: 50-69 years
           cause: Exposure to forces of nature
           metric: Percent
-      indicator_path:
-          924799: y
+      indicators:
+          y: 924799
     - dimensions:
           age: 50-69 years
           cause: Environmental heat and cold exposure
           metric: Percent
-      indicator_path:
-          924794: y
+      indicators:
+          y: 924794
     - dimensions:
           age: 50-69 years
           cause: Conflict and terrorism
           metric: Percent
-      indicator_path:
-          924737: y
+      indicators:
+          y: 924737
     - dimensions:
           age: 50-69 years
           cause: Chronic kidney disease
           metric: Percent
-      indicator_path:
-          924700: y
+      indicators:
+          y: 924700
     - dimensions:
           age: 50-69 years
           cause: Poisonings
           metric: Percent
-      indicator_path:
-          925089: y
+      indicators:
+          y: 925089
     - dimensions:
           age: 50-69 years
           cause: Road injuries
           metric: Percent
-      indicator_path:
-          925111: y
+      indicators:
+          y: 925111
     - dimensions:
           age: 50-69 years
           cause: Fire, heat, and hot substances
           metric: Percent
-      indicator_path:
-          924809: y
+      indicators:
+          y: 924809
     - dimensions:
           age: 50-69 years
           cause: Acute hepatitis
           metric: Percent
-      indicator_path:
-          924630: y
+      indicators:
+          y: 924630
     - dimensions:
           age: 50-69 years
           cause: COVID-19
           metric: Percent
-      indicator_path:
-          924682: y
+      indicators:
+          y: 924682
     - dimensions:
           age: 50-69 years
           cause: all
           metric: Percent
-      indicator_path:
-          924630: y
-          924647: y
-          924654: y
-          924682: y
-          924687: y
-          924700: y
-          924720: y
-          924737: y
-          924758: y
-          924765: y
-          924769: y
-          924774: y
-          924777: y
-          924794: y
-          924799: y
-          924809: y
-          924829: y
-          924859: y
-          924899: y
-          924901: y
-          924914: y
-          924926: y
-          924952: y
-          924979: y
-          925066: y
-          925089: y
-          925111: y
-          925115: y
-          925165: y
+      indicators:
+          y:
+              - 924630
+              - 924647
+              - 924654
+              - 924682
+              - 924687
+              - 924700
+              - 924720
+              - 924737
+              - 924758
+              - 924765
+              - 924769
+              - 924774
+              - 924777
+              - 924794
+              - 924799
+              - 924809
+              - 924829
+              - 924859
+              - 924899
+              - 924901
+              - 924914
+              - 924926
+              - 924952
+              - 924979
+              - 925066
+              - 925089
+              - 925111
+              - 925115
+              - 925165
     - dimensions:
           age: 50-69 years
           cause: Cardiovascular diseases
           metric: Rate
-      indicator_path:
-          927925: y
+      indicators:
+          y: 927925
     - dimensions:
           age: 50-69 years
           cause: Neoplasms
           metric: Rate
-      indicator_path:
-          928192: y
+      indicators:
+          y: 928192
     - dimensions:
           age: 50-69 years
           cause: Chronic respiratory diseases
           metric: Rate
-      indicator_path:
-          927959: y
+      indicators:
+          y: 927959
     - dimensions:
           age: 50-69 years
           cause: Digestive diseases
           metric: Rate
-      indicator_path:
-          928006: y
+      indicators:
+          y: 928006
     - dimensions:
           age: 50-69 years
           cause: Lower respiratory infections
           metric: Rate
-      indicator_path:
-          928139: y
+      indicators:
+          y: 928139
     - dimensions:
           age: 50-69 years
           cause: Alzheimer's disease and other dementias
           metric: Rate
-      indicator_path:
-          927893: y
+      indicators:
+          y: 927893
     - dimensions:
           age: 50-69 years
           cause: Diabetes mellitus
           metric: Rate
-      indicator_path:
-          927996: y
+      indicators:
+          y: 927996
     - dimensions:
           age: 50-69 years
           cause: Diarrheal diseases
           metric: Rate
-      indicator_path:
-          928001: y
+      indicators:
+          y: 928001
     - dimensions:
           age: 50-69 years
           cause: Meningitis
           metric: Rate
-      indicator_path:
-          928166: y
+      indicators:
+          y: 928166
     - dimensions:
           age: 50-69 years
           cause: Parkinson's disease
           metric: Rate
-      indicator_path:
-          928308: y
+      indicators:
+          y: 928308
     - dimensions:
           age: 50-69 years
           cause: Nutritional deficiencies
           metric: Rate
-      indicator_path:
-          928220: y
+      indicators:
+          y: 928220
     - dimensions:
           age: 50-69 years
           cause: Malaria
           metric: Rate
-      indicator_path:
-          928141: y
+      indicators:
+          y: 928141
     - dimensions:
           age: 50-69 years
           cause: Drowning
           metric: Rate
-      indicator_path:
-          928013: y
+      indicators:
+          y: 928013
     - dimensions:
           age: 50-69 years
           cause: Interpersonal violence
           metric: Rate
-      indicator_path:
-          928096: y
+      indicators:
+          y: 928096
     - dimensions:
           age: 50-69 years
           cause: Maternal disorders
           metric: Rate
-      indicator_path:
-          928154: y
+      indicators:
+          y: 928154
     - dimensions:
           age: 50-69 years
           cause: HIV/AIDS
           metric: Rate
-      indicator_path:
-          928066: y
+      indicators:
+          y: 928066
     - dimensions:
           age: 50-69 years
           cause: Drug use disorders
           metric: Rate
-      indicator_path:
-          928015: y
+      indicators:
+          y: 928015
     - dimensions:
           age: 50-69 years
           cause: Tuberculosis
           metric: Rate
-      indicator_path:
-          928405: y
+      indicators:
+          y: 928405
     - dimensions:
           age: 50-69 years
           cause: Alcohol use disorders
           metric: Rate
-      indicator_path:
-          927886: y
+      indicators:
+          y: 927886
     - dimensions:
           age: 50-69 years
           cause: Self-harm
           metric: Rate
-      indicator_path:
-          928355: y
+      indicators:
+          y: 928355
     - dimensions:
           age: 50-69 years
           cause: Exposure to forces of nature
           metric: Rate
-      indicator_path:
-          928036: y
+      indicators:
+          y: 928036
     - dimensions:
           age: 50-69 years
           cause: Environmental heat and cold exposure
           metric: Rate
-      indicator_path:
-          928032: y
+      indicators:
+          y: 928032
     - dimensions:
           age: 50-69 years
           cause: Conflict and terrorism
           metric: Rate
-      indicator_path:
-          927975: y
+      indicators:
+          y: 927975
     - dimensions:
           age: 50-69 years
           cause: Chronic kidney disease
           metric: Rate
-      indicator_path:
-          927941: y
+      indicators:
+          y: 927941
     - dimensions:
           age: 50-69 years
           cause: Poisonings
           metric: Rate
-      indicator_path:
-          928328: y
+      indicators:
+          y: 928328
     - dimensions:
           age: 50-69 years
           cause: Road injuries
           metric: Rate
-      indicator_path:
-          928351: y
+      indicators:
+          y: 928351
     - dimensions:
           age: 50-69 years
           cause: Fire, heat, and hot substances
           metric: Rate
-      indicator_path:
-          928045: y
+      indicators:
+          y: 928045
     - dimensions:
           age: 50-69 years
           cause: Acute hepatitis
           metric: Rate
-      indicator_path:
-          927868: y
+      indicators:
+          y: 927868
     - dimensions:
           age: 50-69 years
           cause: COVID-19
           metric: Rate
-      indicator_path:
-          927922: y
+      indicators:
+          y: 927922
     - dimensions:
           age: 50-69 years
           cause: all
           metric: Rate
-      indicator_path:
-          927868: y
-          927886: y
-          927893: y
-          927922: y
-          927925: y
-          927941: y
-          927959: y
-          927975: y
-          927996: y
-          928001: y
-          928006: y
-          928013: y
-          928015: y
-          928032: y
-          928036: y
-          928045: y
-          928066: y
-          928096: y
-          928139: y
-          928141: y
-          928154: y
-          928166: y
-          928192: y
-          928220: y
-          928308: y
-          928328: y
-          928351: y
-          928355: y
-          928405: y
+      indicators:
+          y:
+              - 927868
+              - 927886
+              - 927893
+              - 927922
+              - 927925
+              - 927941
+              - 927959
+              - 927975
+              - 927996
+              - 928001
+              - 928006
+              - 928013
+              - 928015
+              - 928032
+              - 928036
+              - 928045
+              - 928066
+              - 928096
+              - 928139
+              - 928141
+              - 928154
+              - 928166
+              - 928192
+              - 928220
+              - 928308
+              - 928328
+              - 928351
+              - 928355
+              - 928405
     - dimensions:
           age: 70+ years
           cause: Cardiovascular diseases
           metric: Number
-      indicator_path:
-          921053: y
+      indicators:
+          y: 921053
     - dimensions:
           age: 70+ years
           cause: Neoplasms
           metric: Number
-      indicator_path:
-          921522: y
+      indicators:
+          y: 921522
     - dimensions:
           age: 70+ years
           cause: Chronic respiratory diseases
           metric: Number
-      indicator_path:
-          921121: y
+      indicators:
+          y: 921121
     - dimensions:
           age: 70+ years
           cause: Digestive diseases
           metric: Number
-      indicator_path:
-          921200: y
+      indicators:
+          y: 921200
     - dimensions:
           age: 70+ years
           cause: Lower respiratory infections
           metric: Number
-      indicator_path:
-          921445: y
+      indicators:
+          y: 921445
     - dimensions:
           age: 70+ years
           cause: Alzheimer's disease and other dementias
           metric: Number
-      indicator_path:
-          920987: y
+      indicators:
+          y: 920987
     - dimensions:
           age: 70+ years
           cause: Diabetes mellitus
           metric: Number
-      indicator_path:
-          921184: y
+      indicators:
+          y: 921184
     - dimensions:
           age: 70+ years
           cause: Diarrheal diseases
           metric: Number
-      indicator_path:
-          921195: y
+      indicators:
+          y: 921195
     - dimensions:
           age: 70+ years
           cause: Meningitis
           metric: Number
-      indicator_path:
-          921469: y
+      indicators:
+          y: 921469
     - dimensions:
           age: 70+ years
           cause: Parkinson's disease
           metric: Number
-      indicator_path:
-          921744: y
+      indicators:
+          y: 921744
     - dimensions:
           age: 70+ years
           cause: Nutritional deficiencies
           metric: Number
-      indicator_path:
-          921570: y
+      indicators:
+          y: 921570
     - dimensions:
           age: 70+ years
           cause: Malaria
           metric: Number
-      indicator_path:
-          921454: y
+      indicators:
+          y: 921454
     - dimensions:
           age: 70+ years
           cause: Drowning
           metric: Number
-      indicator_path:
-          921206: y
+      indicators:
+          y: 921206
     - dimensions:
           age: 70+ years
           cause: Interpersonal violence
           metric: Number
-      indicator_path:
-          921373: y
+      indicators:
+          y: 921373
     - dimensions:
           age: 70+ years
           cause: HIV/AIDS
           metric: Number
-      indicator_path:
-          921316: y
+      indicators:
+          y: 921316
     - dimensions:
           age: 70+ years
           cause: Drug use disorders
           metric: Number
-      indicator_path:
-          921213: y
+      indicators:
+          y: 921213
     - dimensions:
           age: 70+ years
           cause: Tuberculosis
           metric: Number
-      indicator_path:
-          921942: y
+      indicators:
+          y: 921942
     - dimensions:
           age: 70+ years
           cause: Alcohol use disorders
           metric: Number
-      indicator_path:
-          920975: y
+      indicators:
+          y: 920975
     - dimensions:
           age: 70+ years
           cause: Self-harm
           metric: Number
-      indicator_path:
-          921835: y
+      indicators:
+          y: 921835
     - dimensions:
           age: 70+ years
           cause: Exposure to forces of nature
           metric: Number
-      indicator_path:
-          921253: y
+      indicators:
+          y: 921253
     - dimensions:
           age: 70+ years
           cause: Environmental heat and cold exposure
           metric: Number
-      indicator_path:
-          921246: y
+      indicators:
+          y: 921246
     - dimensions:
           age: 70+ years
           cause: Conflict and terrorism
           metric: Number
-      indicator_path:
-          921155: y
+      indicators:
+          y: 921155
     - dimensions:
           age: 70+ years
           cause: Chronic kidney disease
           metric: Number
-      indicator_path:
-          921086: y
+      indicators:
+          y: 921086
     - dimensions:
           age: 70+ years
           cause: Poisonings
           metric: Number
-      indicator_path:
-          921779: y
+      indicators:
+          y: 921779
     - dimensions:
           age: 70+ years
           cause: Road injuries
           metric: Number
-      indicator_path:
-          921828: y
+      indicators:
+          y: 921828
     - dimensions:
           age: 70+ years
           cause: Fire, heat, and hot substances
           metric: Number
-      indicator_path:
-          921276: y
+      indicators:
+          y: 921276
     - dimensions:
           age: 70+ years
           cause: Acute hepatitis
           metric: Number
-      indicator_path:
-          920936: y
+      indicators:
+          y: 920936
     - dimensions:
           age: 70+ years
           cause: COVID-19
           metric: Number
-      indicator_path:
-          921048: y
+      indicators:
+          y: 921048
     - dimensions:
           age: 70+ years
           cause: all
           metric: Number
-      indicator_path:
-          920936: y
-          920975: y
-          920987: y
-          921048: y
-          921053: y
-          921086: y
-          921121: y
-          921155: y
-          921184: y
-          921195: y
-          921200: y
-          921206: y
-          921213: y
-          921246: y
-          921253: y
-          921276: y
-          921316: y
-          921373: y
-          921445: y
-          921454: y
-          921469: y
-          921522: y
-          921570: y
-          921744: y
-          921779: y
-          921828: y
-          921835: y
-          921942: y
+      indicators:
+          y:
+              - 920936
+              - 920975
+              - 920987
+              - 921048
+              - 921053
+              - 921086
+              - 921121
+              - 921155
+              - 921184
+              - 921195
+              - 921200
+              - 921206
+              - 921213
+              - 921246
+              - 921253
+              - 921276
+              - 921316
+              - 921373
+              - 921445
+              - 921454
+              - 921469
+              - 921522
+              - 921570
+              - 921744
+              - 921779
+              - 921828
+              - 921835
+              - 921942
     - dimensions:
           age: 70+ years
           cause: Cardiovascular diseases
           metric: Percent
-      indicator_path:
-          925266: y
+      indicators:
+          y: 925266
     - dimensions:
           age: 70+ years
           cause: Neoplasms
           metric: Percent
-      indicator_path:
-          925498: y
+      indicators:
+          y: 925498
     - dimensions:
           age: 70+ years
           cause: Chronic respiratory diseases
           metric: Percent
-      indicator_path:
-          925299: y
+      indicators:
+          y: 925299
     - dimensions:
           age: 70+ years
           cause: Digestive diseases
           metric: Percent
-      indicator_path:
-          925340: y
+      indicators:
+          y: 925340
     - dimensions:
           age: 70+ years
           cause: Lower respiratory infections
           metric: Percent
-      indicator_path:
-          925461: y
+      indicators:
+          y: 925461
     - dimensions:
           age: 70+ years
           cause: Alzheimer's disease and other dementias
           metric: Percent
-      indicator_path:
-          925232: y
+      indicators:
+          y: 925232
     - dimensions:
           age: 70+ years
           cause: Diabetes mellitus
           metric: Percent
-      indicator_path:
-          925330: y
+      indicators:
+          y: 925330
     - dimensions:
           age: 70+ years
           cause: Diarrheal diseases
           metric: Percent
-      indicator_path:
-          925336: y
+      indicators:
+          y: 925336
     - dimensions:
           age: 70+ years
           cause: Meningitis
           metric: Percent
-      indicator_path:
-          925470: y
+      indicators:
+          y: 925470
     - dimensions:
           age: 70+ years
           cause: Parkinson's disease
           metric: Percent
-      indicator_path:
-          925605: y
+      indicators:
+          y: 925605
     - dimensions:
           age: 70+ years
           cause: Nutritional deficiencies
           metric: Percent
-      indicator_path:
-          925523: y
+      indicators:
+          y: 925523
     - dimensions:
           age: 70+ years
           cause: Malaria
           metric: Percent
-      indicator_path:
-          925463: y
+      indicators:
+          y: 925463
     - dimensions:
           age: 70+ years
           cause: Drowning
           metric: Percent
-      indicator_path:
-          925343: y
+      indicators:
+          y: 925343
     - dimensions:
           age: 70+ years
           cause: Interpersonal violence
           metric: Percent
-      indicator_path:
-          925420: y
+      indicators:
+          y: 925420
     - dimensions:
           age: 70+ years
           cause: HIV/AIDS
           metric: Percent
-      indicator_path:
-          925394: y
+      indicators:
+          y: 925394
     - dimensions:
           age: 70+ years
           cause: Drug use disorders
           metric: Percent
-      indicator_path:
-          925344: y
+      indicators:
+          y: 925344
     - dimensions:
           age: 70+ years
           cause: Tuberculosis
           metric: Percent
-      indicator_path:
-          925704: y
+      indicators:
+          y: 925704
     - dimensions:
           age: 70+ years
           cause: Alcohol use disorders
           metric: Percent
-      indicator_path:
-          925225: y
+      indicators:
+          y: 925225
     - dimensions:
           age: 70+ years
           cause: Self-harm
           metric: Percent
-      indicator_path:
-          925652: y
+      indicators:
+          y: 925652
     - dimensions:
           age: 70+ years
           cause: Exposure to forces of nature
           metric: Percent
-      indicator_path:
-          925363: y
+      indicators:
+          y: 925363
     - dimensions:
           age: 70+ years
           cause: Environmental heat and cold exposure
           metric: Percent
-      indicator_path:
-          925359: y
+      indicators:
+          y: 925359
     - dimensions:
           age: 70+ years
           cause: Conflict and terrorism
           metric: Percent
-      indicator_path:
-          925316: y
+      indicators:
+          y: 925316
     - dimensions:
           age: 70+ years
           cause: Chronic kidney disease
           metric: Percent
-      indicator_path:
-          925281: y
+      indicators:
+          y: 925281
     - dimensions:
           age: 70+ years
           cause: Poisonings
           metric: Percent
-      indicator_path:
-          925624: y
+      indicators:
+          y: 925624
     - dimensions:
           age: 70+ years
           cause: Road injuries
           metric: Percent
-      indicator_path:
-          925648: y
+      indicators:
+          y: 925648
     - dimensions:
           age: 70+ years
           cause: Fire, heat, and hot substances
           metric: Percent
-      indicator_path:
-          925374: y
+      indicators:
+          y: 925374
     - dimensions:
           age: 70+ years
           cause: Acute hepatitis
           metric: Percent
-      indicator_path:
-          925206: y
+      indicators:
+          y: 925206
     - dimensions:
           age: 70+ years
           cause: COVID-19
           metric: Percent
-      indicator_path:
-          925260: y
+      indicators:
+          y: 925260
     - dimensions:
           age: 70+ years
           cause: all
           metric: Percent
-      indicator_path:
-          925206: y
-          925225: y
-          925232: y
-          925260: y
-          925266: y
-          925281: y
-          925299: y
-          925316: y
-          925330: y
-          925336: y
-          925340: y
-          925343: y
-          925344: y
-          925359: y
-          925363: y
-          925374: y
-          925394: y
-          925420: y
-          925461: y
-          925463: y
-          925470: y
-          925498: y
-          925523: y
-          925605: y
-          925624: y
-          925648: y
-          925652: y
-          925704: y
+      indicators:
+          y:
+              - 925206
+              - 925225
+              - 925232
+              - 925260
+              - 925266
+              - 925281
+              - 925299
+              - 925316
+              - 925330
+              - 925336
+              - 925340
+              - 925343
+              - 925344
+              - 925359
+              - 925363
+              - 925374
+              - 925394
+              - 925420
+              - 925461
+              - 925463
+              - 925470
+              - 925498
+              - 925523
+              - 925605
+              - 925624
+              - 925648
+              - 925652
+              - 925704
     - dimensions:
           age: 70+ years
           cause: Cardiovascular diseases
           metric: Rate
-      indicator_path:
-          928507: y
+      indicators:
+          y: 928507
     - dimensions:
           age: 70+ years
           cause: Neoplasms
           metric: Rate
-      indicator_path:
-          928737: y
+      indicators:
+          y: 928737
     - dimensions:
           age: 70+ years
           cause: Chronic respiratory diseases
           metric: Rate
-      indicator_path:
-          928539: y
+      indicators:
+          y: 928539
     - dimensions:
           age: 70+ years
           cause: Digestive diseases
           metric: Rate
-      indicator_path:
-          928581: y
+      indicators:
+          y: 928581
     - dimensions:
           age: 70+ years
           cause: Lower respiratory infections
           metric: Rate
-      indicator_path:
-          928700: y
+      indicators:
+          y: 928700
     - dimensions:
           age: 70+ years
           cause: Alzheimer's disease and other dementias
           metric: Rate
-      indicator_path:
-          928473: y
+      indicators:
+          y: 928473
     - dimensions:
           age: 70+ years
           cause: Diabetes mellitus
           metric: Rate
-      indicator_path:
-          928573: y
+      indicators:
+          y: 928573
     - dimensions:
           age: 70+ years
           cause: Diarrheal diseases
           metric: Rate
-      indicator_path:
-          928580: y
+      indicators:
+          y: 928580
     - dimensions:
           age: 70+ years
           cause: Meningitis
           metric: Rate
-      indicator_path:
-          928710: y
+      indicators:
+          y: 928710
     - dimensions:
           age: 70+ years
           cause: Parkinson's disease
           metric: Rate
-      indicator_path:
-          928844: y
+      indicators:
+          y: 928844
     - dimensions:
           age: 70+ years
           cause: Nutritional deficiencies
           metric: Rate
-      indicator_path:
-          928762: y
+      indicators:
+          y: 928762
     - dimensions:
           age: 70+ years
           cause: Malaria
           metric: Rate
-      indicator_path:
-          928703: y
+      indicators:
+          y: 928703
     - dimensions:
           age: 70+ years
           cause: Drowning
           metric: Rate
-      indicator_path:
-          928585: y
+      indicators:
+          y: 928585
     - dimensions:
           age: 70+ years
           cause: Interpersonal violence
           metric: Rate
-      indicator_path:
-          928663: y
+      indicators:
+          y: 928663
     - dimensions:
           age: 70+ years
           cause: HIV/AIDS
           metric: Rate
-      indicator_path:
-          928636: y
+      indicators:
+          y: 928636
     - dimensions:
           age: 70+ years
           cause: Drug use disorders
           metric: Rate
-      indicator_path:
-          928588: y
+      indicators:
+          y: 928588
     - dimensions:
           age: 70+ years
           cause: Tuberculosis
           metric: Rate
-      indicator_path:
-          928941: y
+      indicators:
+          y: 928941
     - dimensions:
           age: 70+ years
           cause: Alcohol use disorders
           metric: Rate
-      indicator_path:
-          928467: y
+      indicators:
+          y: 928467
     - dimensions:
           age: 70+ years
           cause: Self-harm
           metric: Rate
-      indicator_path:
-          928889: y
+      indicators:
+          y: 928889
     - dimensions:
           age: 70+ years
           cause: Exposure to forces of nature
           metric: Rate
-      indicator_path:
-          928605: y
+      indicators:
+          y: 928605
     - dimensions:
           age: 70+ years
           cause: Environmental heat and cold exposure
           metric: Rate
-      indicator_path:
-          928602: y
+      indicators:
+          y: 928602
     - dimensions:
           age: 70+ years
           cause: Conflict and terrorism
           metric: Rate
-      indicator_path:
-          928558: y
+      indicators:
+          y: 928558
     - dimensions:
           age: 70+ years
           cause: Chronic kidney disease
           metric: Rate
-      indicator_path:
-          928521: y
+      indicators:
+          y: 928521
     - dimensions:
           age: 70+ years
           cause: Poisonings
           metric: Rate
-      indicator_path:
-          928862: y
+      indicators:
+          y: 928862
     - dimensions:
           age: 70+ years
           cause: Road injuries
           metric: Rate
-      indicator_path:
-          928886: y
+      indicators:
+          y: 928886
     - dimensions:
           age: 70+ years
           cause: Fire, heat, and hot substances
           metric: Rate
-      indicator_path:
-          928616: y
+      indicators:
+          y: 928616
     - dimensions:
           age: 70+ years
           cause: Acute hepatitis
           metric: Rate
-      indicator_path:
-          928448: y
+      indicators:
+          y: 928448
     - dimensions:
           age: 70+ years
           cause: COVID-19
           metric: Rate
-      indicator_path:
-          928503: y
+      indicators:
+          y: 928503
     - dimensions:
           age: 70+ years
           cause: all
           metric: Rate
-      indicator_path:
-          928448: y
-          928467: y
-          928473: y
-          928503: y
-          928507: y
-          928521: y
-          928539: y
-          928558: y
-          928573: y
-          928580: y
-          928581: y
-          928585: y
-          928588: y
-          928602: y
-          928605: y
-          928616: y
-          928636: y
-          928663: y
-          928700: y
-          928703: y
-          928710: y
-          928737: y
-          928762: y
-          928844: y
-          928862: y
-          928886: y
-          928889: y
-          928941: y
+      indicators:
+          y:
+              - 928448
+              - 928467
+              - 928473
+              - 928503
+              - 928507
+              - 928521
+              - 928539
+              - 928558
+              - 928573
+              - 928580
+              - 928581
+              - 928585
+              - 928588
+              - 928602
+              - 928605
+              - 928616
+              - 928636
+              - 928663
+              - 928700
+              - 928703
+              - 928710
+              - 928737
+              - 928762
+              - 928844
+              - 928862
+              - 928886
+              - 928889
+              - 928941
     - dimensions:
           age: <5 years
           cause: Cardiovascular diseases
           metric: Number
-      indicator_path:
-          922101: y
+      indicators:
+          y: 922101
     - dimensions:
           age: <5 years
           cause: Neoplasms
           metric: Number
-      indicator_path:
-          922390: y
+      indicators:
+          y: 922390
     - dimensions:
           age: <5 years
           cause: Chronic respiratory diseases
           metric: Number
-      indicator_path:
-          922135: y
+      indicators:
+          y: 922135
     - dimensions:
           age: <5 years
           cause: Digestive diseases
           metric: Number
-      indicator_path:
-          922190: y
+      indicators:
+          y: 922190
     - dimensions:
           age: <5 years
           cause: Lower respiratory infections
           metric: Number
-      indicator_path:
-          922335: y
+      indicators:
+          y: 922335
     - dimensions:
           age: <5 years
           cause: Neonatal disorders
           metric: Number
-      indicator_path:
-          922375: y
+      indicators:
+          y: 922375
     - dimensions:
           age: <5 years
           cause: Diabetes mellitus
           metric: Number
-      indicator_path:
-          922177: y
+      indicators:
+          y: 922177
     - dimensions:
           age: <5 years
           cause: Diarrheal diseases
           metric: Number
-      indicator_path:
-          922185: y
+      indicators:
+          y: 922185
     - dimensions:
           age: <5 years
           cause: Meningitis
           metric: Number
-      indicator_path:
-          922352: y
+      indicators:
+          y: 922352
     - dimensions:
           age: <5 years
           cause: Nutritional deficiencies
           metric: Number
-      indicator_path:
-          922411: y
+      indicators:
+          y: 922411
     - dimensions:
           age: <5 years
           cause: Malaria
           metric: Number
-      indicator_path:
-          922336: y
+      indicators:
+          y: 922336
     - dimensions:
           age: <5 years
           cause: Drowning
           metric: Number
-      indicator_path:
-          922200: y
+      indicators:
+          y: 922200
     - dimensions:
           age: <5 years
           cause: Interpersonal violence
           metric: Number
-      indicator_path:
-          922306: y
+      indicators:
+          y: 922306
     - dimensions:
           age: <5 years
           cause: HIV/AIDS
           metric: Number
-      indicator_path:
-          922263: y
+      indicators:
+          y: 922263
     - dimensions:
           age: <5 years
           cause: Drug use disorders
           metric: Number
-      indicator_path:
-          922202: y
+      indicators:
+          y: 922202
     - dimensions:
           age: <5 years
           cause: Tuberculosis
           metric: Number
-      indicator_path:
-          922639: y
+      indicators:
+          y: 922639
     - dimensions:
           age: <5 years
           cause: Alcohol use disorders
           metric: Number
-      indicator_path:
-          922058: y
+      indicators:
+          y: 922058
     - dimensions:
           age: <5 years
           cause: Exposure to forces of nature
           metric: Number
-      indicator_path:
-          922229: y
+      indicators:
+          y: 922229
     - dimensions:
           age: <5 years
           cause: Environmental heat and cold exposure
           metric: Number
-      indicator_path:
-          922227: y
+      indicators:
+          y: 922227
     - dimensions:
           age: <5 years
           cause: Conflict and terrorism
           metric: Number
-      indicator_path:
-          922147: y
+      indicators:
+          y: 922147
     - dimensions:
           age: <5 years
           cause: Chronic kidney disease
           metric: Number
-      indicator_path:
-          922120: y
+      indicators:
+          y: 922120
     - dimensions:
           age: <5 years
           cause: Poisonings
           metric: Number
-      indicator_path:
-          922551: y
+      indicators:
+          y: 922551
     - dimensions:
           age: <5 years
           cause: Road injuries
           metric: Number
-      indicator_path:
-          922582: y
+      indicators:
+          y: 922582
     - dimensions:
           age: <5 years
           cause: Fire, heat, and hot substances
           metric: Number
-      indicator_path:
-          922244: y
+      indicators:
+          y: 922244
     - dimensions:
           age: <5 years
           cause: Acute hepatitis
           metric: Number
-      indicator_path:
-          922018: y
+      indicators:
+          y: 922018
     - dimensions:
           age: <5 years
           cause: COVID-19
           metric: Number
-      indicator_path:
-          922096: y
+      indicators:
+          y: 922096
     - dimensions:
           age: <5 years
           cause: all
           metric: Number
-      indicator_path:
-          922018: y
-          922058: y
-          922096: y
-          922101: y
-          922120: y
-          922135: y
-          922147: y
-          922177: y
-          922185: y
-          922190: y
-          922200: y
-          922202: y
-          922227: y
-          922229: y
-          922244: y
-          922263: y
-          922306: y
-          922335: y
-          922336: y
-          922352: y
-          922375: y
-          922390: y
-          922411: y
-          922551: y
-          922582: y
-          922639: y
+      indicators:
+          y:
+              - 922018
+              - 922058
+              - 922096
+              - 922101
+              - 922120
+              - 922135
+              - 922147
+              - 922177
+              - 922185
+              - 922190
+              - 922200
+              - 922202
+              - 922227
+              - 922229
+              - 922244
+              - 922263
+              - 922306
+              - 922335
+              - 922336
+              - 922352
+              - 922375
+              - 922390
+              - 922411
+              - 922551
+              - 922582
+              - 922639
     - dimensions:
           age: <5 years
           cause: Cardiovascular diseases
           metric: Percent
-      indicator_path:
-          925785: y
+      indicators:
+          y: 925785
     - dimensions:
           age: <5 years
           cause: Neoplasms
           metric: Percent
-      indicator_path:
-          925977: y
+      indicators:
+          y: 925977
     - dimensions:
           age: <5 years
           cause: Chronic respiratory diseases
           metric: Percent
-      indicator_path:
-          925806: y
+      indicators:
+          y: 925806
     - dimensions:
           age: <5 years
           cause: Digestive diseases
           metric: Percent
-      indicator_path:
-          925844: y
+      indicators:
+          y: 925844
     - dimensions:
           age: <5 years
           cause: Lower respiratory infections
           metric: Percent
-      indicator_path:
-          925941: y
+      indicators:
+          y: 925941
     - dimensions:
           age: <5 years
           cause: Neonatal disorders
           metric: Percent
-      indicator_path:
-          925970: y
+      indicators:
+          y: 925970
     - dimensions:
           age: <5 years
           cause: Diabetes mellitus
           metric: Percent
-      indicator_path:
-          925836: y
+      indicators:
+          y: 925836
     - dimensions:
           age: <5 years
           cause: Diarrheal diseases
           metric: Percent
-      indicator_path:
-          925842: y
+      indicators:
+          y: 925842
     - dimensions:
           age: <5 years
           cause: Meningitis
           metric: Percent
-      indicator_path:
-          925951: y
+      indicators:
+          y: 925951
     - dimensions:
           age: <5 years
           cause: Nutritional deficiencies
           metric: Percent
-      indicator_path:
-          925992: y
+      indicators:
+          y: 925992
     - dimensions:
           age: <5 years
           cause: Malaria
           metric: Percent
-      indicator_path:
-          925944: y
+      indicators:
+          y: 925944
     - dimensions:
           age: <5 years
           cause: Drowning
           metric: Percent
-      indicator_path:
-          925851: y
+      indicators:
+          y: 925851
     - dimensions:
           age: <5 years
           cause: Interpersonal violence
           metric: Percent
-      indicator_path:
-          925920: y
+      indicators:
+          y: 925920
     - dimensions:
           age: <5 years
           cause: HIV/AIDS
           metric: Percent
-      indicator_path:
-          925893: y
+      indicators:
+          y: 925893
     - dimensions:
           age: <5 years
           cause: Drug use disorders
           metric: Percent
-      indicator_path:
-          925853: y
+      indicators:
+          y: 925853
     - dimensions:
           age: <5 years
           cause: Tuberculosis
           metric: Percent
-      indicator_path:
-          926143: y
+      indicators:
+          y: 926143
     - dimensions:
           age: <5 years
           cause: Alcohol use disorders
           metric: Percent
-      indicator_path:
-          925761: y
+      indicators:
+          y: 925761
     - dimensions:
           age: <5 years
           cause: Exposure to forces of nature
           metric: Percent
-      indicator_path:
-          925869: y
+      indicators:
+          y: 925869
     - dimensions:
           age: <5 years
           cause: Environmental heat and cold exposure
           metric: Percent
-      indicator_path:
-          925866: y
+      indicators:
+          y: 925866
     - dimensions:
           age: <5 years
           cause: Conflict and terrorism
           metric: Percent
-      indicator_path:
-          925814: y
+      indicators:
+          y: 925814
     - dimensions:
           age: <5 years
           cause: Chronic kidney disease
           metric: Percent
-      indicator_path:
-          925795: y
+      indicators:
+          y: 925795
     - dimensions:
           age: <5 years
           cause: Poisonings
           metric: Percent
-      indicator_path:
-          926082: y
+      indicators:
+          y: 926082
     - dimensions:
           age: <5 years
           cause: Road injuries
           metric: Percent
-      indicator_path:
-          926103: y
+      indicators:
+          y: 926103
     - dimensions:
           age: <5 years
           cause: Fire, heat, and hot substances
           metric: Percent
-      indicator_path:
-          925879: y
+      indicators:
+          y: 925879
     - dimensions:
           age: <5 years
           cause: Acute hepatitis
           metric: Percent
-      indicator_path:
-          925743: y
+      indicators:
+          y: 925743
     - dimensions:
           age: <5 years
           cause: COVID-19
           metric: Percent
-      indicator_path:
-          925781: y
+      indicators:
+          y: 925781
     - dimensions:
           age: <5 years
           cause: all
           metric: Percent
-      indicator_path:
-          925743: y
-          925761: y
-          925781: y
-          925785: y
-          925795: y
-          925806: y
-          925814: y
-          925836: y
-          925842: y
-          925844: y
-          925851: y
-          925853: y
-          925866: y
-          925869: y
-          925879: y
-          925893: y
-          925920: y
-          925941: y
-          925944: y
-          925951: y
-          925970: y
-          925977: y
-          925992: y
-          926082: y
-          926103: y
-          926143: y
+      indicators:
+          y:
+              - 925743
+              - 925761
+              - 925781
+              - 925785
+              - 925795
+              - 925806
+              - 925814
+              - 925836
+              - 925842
+              - 925844
+              - 925851
+              - 925853
+              - 925866
+              - 925869
+              - 925879
+              - 925893
+              - 925920
+              - 925941
+              - 925944
+              - 925951
+              - 925970
+              - 925977
+              - 925992
+              - 926082
+              - 926103
+              - 926143
     - dimensions:
           age: <5 years
           cause: Cardiovascular diseases
           metric: Rate
-      indicator_path:
-          929021: y
+      indicators:
+          y: 929021
     - dimensions:
           age: <5 years
           cause: Neoplasms
           metric: Rate
-      indicator_path:
-          929214: y
+      indicators:
+          y: 929214
     - dimensions:
           age: <5 years
           cause: Chronic respiratory diseases
           metric: Rate
-      indicator_path:
-          929043: y
+      indicators:
+          y: 929043
     - dimensions:
           age: <5 years
           cause: Digestive diseases
           metric: Rate
-      indicator_path:
-          929080: y
+      indicators:
+          y: 929080
     - dimensions:
           age: <5 years
           cause: Lower respiratory infections
           metric: Rate
-      indicator_path:
-          929177: y
+      indicators:
+          y: 929177
     - dimensions:
           age: <5 years
           cause: Neonatal disorders
           metric: Rate
-      indicator_path:
-          929206: y
+      indicators:
+          y: 929206
     - dimensions:
           age: <5 years
           cause: Diabetes mellitus
           metric: Rate
-      indicator_path:
-          929070: y
+      indicators:
+          y: 929070
     - dimensions:
           age: <5 years
           cause: Diarrheal diseases
           metric: Rate
-      indicator_path:
-          929075: y
+      indicators:
+          y: 929075
     - dimensions:
           age: <5 years
           cause: Meningitis
           metric: Rate
-      indicator_path:
-          929188: y
+      indicators:
+          y: 929188
     - dimensions:
           age: <5 years
           cause: Nutritional deficiencies
           metric: Rate
-      indicator_path:
-          929229: y
+      indicators:
+          y: 929229
     - dimensions:
           age: <5 years
           cause: Malaria
           metric: Rate
-      indicator_path:
-          929180: y
+      indicators:
+          y: 929180
     - dimensions:
           age: <5 years
           cause: Drowning
           metric: Rate
-      indicator_path:
-          929086: y
+      indicators:
+          y: 929086
     - dimensions:
           age: <5 years
           cause: Interpersonal violence
           metric: Rate
-      indicator_path:
-          929155: y
+      indicators:
+          y: 929155
     - dimensions:
           age: <5 years
           cause: HIV/AIDS
           metric: Rate
-      indicator_path:
-          929126: y
+      indicators:
+          y: 929126
     - dimensions:
           age: <5 years
           cause: Drug use disorders
           metric: Rate
-      indicator_path:
-          929089: y
+      indicators:
+          y: 929089
     - dimensions:
           age: <5 years
           cause: Tuberculosis
           metric: Rate
-      indicator_path:
-          929378: y
+      indicators:
+          y: 929378
     - dimensions:
           age: <5 years
           cause: Alcohol use disorders
           metric: Rate
-      indicator_path:
-          929000: y
+      indicators:
+          y: 929000
     - dimensions:
           age: <5 years
           cause: Exposure to forces of nature
           metric: Rate
-      indicator_path:
-          929103: y
+      indicators:
+          y: 929103
     - dimensions:
           age: <5 years
           cause: Environmental heat and cold exposure
           metric: Rate
-      indicator_path:
-          929101: y
+      indicators:
+          y: 929101
     - dimensions:
           age: <5 years
           cause: Conflict and terrorism
           metric: Rate
-      indicator_path:
-          929051: y
+      indicators:
+          y: 929051
     - dimensions:
           age: <5 years
           cause: Chronic kidney disease
           metric: Rate
-      indicator_path:
-          929030: y
+      indicators:
+          y: 929030
     - dimensions:
           age: <5 years
           cause: Poisonings
           metric: Rate
-      indicator_path:
-          929318: y
+      indicators:
+          y: 929318
     - dimensions:
           age: <5 years
           cause: Road injuries
           metric: Rate
-      indicator_path:
-          929339: y
+      indicators:
+          y: 929339
     - dimensions:
           age: <5 years
           cause: Fire, heat, and hot substances
           metric: Rate
-      indicator_path:
-          929114: y
+      indicators:
+          y: 929114
     - dimensions:
           age: <5 years
           cause: Acute hepatitis
           metric: Rate
-      indicator_path:
-          928982: y
+      indicators:
+          y: 928982
     - dimensions:
           age: <5 years
           cause: COVID-19
           metric: Rate
-      indicator_path:
-          929017: y
+      indicators:
+          y: 929017
     - dimensions:
           age: <5 years
           cause: all
           metric: Rate
-      indicator_path:
-          928982: y
-          929000: y
-          929017: y
-          929021: y
-          929030: y
-          929043: y
-          929051: y
-          929070: y
-          929075: y
-          929080: y
-          929086: y
-          929089: y
-          929101: y
-          929103: y
-          929114: y
-          929126: y
-          929155: y
-          929177: y
-          929180: y
-          929188: y
-          929206: y
-          929214: y
-          929229: y
-          929318: y
-          929339: y
-          929378: y
+      indicators:
+          y:
+              - 928982
+              - 929000
+              - 929017
+              - 929021
+              - 929030
+              - 929043
+              - 929051
+              - 929070
+              - 929075
+              - 929080
+              - 929086
+              - 929089
+              - 929101
+              - 929103
+              - 929114
+              - 929126
+              - 929155
+              - 929177
+              - 929180
+              - 929188
+              - 929206
+              - 929214
+              - 929229
+              - 929318
+              - 929339
+              - 929378
     - dimensions:
           age: All ages
           cause: Cardiovascular diseases
           metric: Number
-      indicator_path:
-          922787: y
+      indicators:
+          y: 922787
     - dimensions:
           age: All ages
           cause: Neoplasms
           metric: Number
-      indicator_path:
-          923200: y
+      indicators:
+          y: 923200
     - dimensions:
           age: All ages
           cause: Chronic respiratory diseases
           metric: Number
-      indicator_path:
-          922835: y
+      indicators:
+          y: 922835
     - dimensions:
           age: All ages
           cause: Digestive diseases
           metric: Number
-      indicator_path:
-          922902: y
+      indicators:
+          y: 922902
     - dimensions:
           age: All ages
           cause: Lower respiratory infections
           metric: Number
-      indicator_path:
-          923105: y
+      indicators:
+          y: 923105
     - dimensions:
           age: All ages
           cause: Neonatal disorders
           metric: Number
-      indicator_path:
-          923189: y
+      indicators:
+          y: 923189
     - dimensions:
           age: All ages
           cause: Alzheimer's disease and other dementias
           metric: Number
-      indicator_path:
-          922732: y
+      indicators:
+          y: 922732
     - dimensions:
           age: All ages
           cause: Diabetes mellitus
           metric: Number
-      indicator_path:
-          922886: y
+      indicators:
+          y: 922886
     - dimensions:
           age: All ages
           cause: Diarrheal diseases
           metric: Number
-      indicator_path:
-          922894: y
+      indicators:
+          y: 922894
     - dimensions:
           age: All ages
           cause: Meningitis
           metric: Number
-      indicator_path:
-          923145: y
+      indicators:
+          y: 923145
     - dimensions:
           age: All ages
           cause: Parkinson's disease
           metric: Number
-      indicator_path:
-          923379: y
+      indicators:
+          y: 923379
     - dimensions:
           age: All ages
           cause: Nutritional deficiencies
           metric: Number
-      indicator_path:
-          923241: y
+      indicators:
+          y: 923241
     - dimensions:
           age: All ages
           cause: Malaria
           metric: Number
-      indicator_path:
-          923108: y
+      indicators:
+          y: 923108
     - dimensions:
           age: All ages
           cause: Drowning
           metric: Number
-      indicator_path:
-          922910: y
+      indicators:
+          y: 922910
     - dimensions:
           age: All ages
           cause: Interpersonal violence
           metric: Number
-      indicator_path:
-          923046: y
+      indicators:
+          y: 923046
     - dimensions:
           age: All ages
           cause: Maternal disorders
           metric: Number
-      indicator_path:
-          923125: y
+      indicators:
+          y: 923125
     - dimensions:
           age: All ages
           cause: HIV/AIDS
           metric: Number
-      indicator_path:
-          922998: y
+      indicators:
+          y: 922998
     - dimensions:
           age: All ages
           cause: Drug use disorders
           metric: Number
-      indicator_path:
-          922913: y
+      indicators:
+          y: 922913
     - dimensions:
           age: All ages
           cause: Tuberculosis
           metric: Number
-      indicator_path:
-          923509: y
+      indicators:
+          y: 923509
     - dimensions:
           age: All ages
           cause: Alcohol use disorders
           metric: Number
-      indicator_path:
-          922723: y
+      indicators:
+          y: 922723
     - dimensions:
           age: All ages
           cause: Self-harm
           metric: Number
-      indicator_path:
-          923453: y
+      indicators:
+          y: 923453
     - dimensions:
           age: All ages
           cause: Exposure to forces of nature
           metric: Number
-      indicator_path:
-          922951: y
+      indicators:
+          y: 922951
     - dimensions:
           age: All ages
           cause: Environmental heat and cold exposure
           metric: Number
-      indicator_path:
-          922943: y
+      indicators:
+          y: 922943
     - dimensions:
           age: All ages
           cause: Conflict and terrorism
           metric: Number
-      indicator_path:
-          922858: y
+      indicators:
+          y: 922858
     - dimensions:
           age: All ages
           cause: Chronic kidney disease
           metric: Number
-      indicator_path:
-          922808: y
+      indicators:
+          y: 922808
     - dimensions:
           age: All ages
           cause: Poisonings
           metric: Number
-      indicator_path:
-          923410: y
+      indicators:
+          y: 923410
     - dimensions:
           age: All ages
           cause: Road injuries
           metric: Number
-      indicator_path:
-          923449: y
+      indicators:
+          y: 923449
     - dimensions:
           age: All ages
           cause: Fire, heat, and hot substances
           metric: Number
-      indicator_path:
-          922968: y
+      indicators:
+          y: 922968
     - dimensions:
           age: All ages
           cause: Acute hepatitis
           metric: Number
-      indicator_path:
-          922696: y
+      indicators:
+          y: 922696
     - dimensions:
           age: All ages
           cause: COVID-19
           metric: Number
-      indicator_path:
-          922779: y
+      indicators:
+          y: 922779
     - dimensions:
           age: All ages
           cause: all
           metric: Number
-      indicator_path:
-          922696: y
-          922723: y
-          922732: y
-          922779: y
-          922787: y
-          922808: y
-          922835: y
-          922858: y
-          922886: y
-          922894: y
-          922902: y
-          922910: y
-          922913: y
-          922943: y
-          922951: y
-          922968: y
-          922998: y
-          923046: y
-          923105: y
-          923108: y
-          923125: y
-          923145: y
-          923189: y
-          923200: y
-          923241: y
-          923379: y
-          923410: y
-          923449: y
-          923453: y
-          923509: y
+      indicators:
+          y:
+              - 922696
+              - 922723
+              - 922732
+              - 922779
+              - 922787
+              - 922808
+              - 922835
+              - 922858
+              - 922886
+              - 922894
+              - 922902
+              - 922910
+              - 922913
+              - 922943
+              - 922951
+              - 922968
+              - 922998
+              - 923046
+              - 923105
+              - 923108
+              - 923125
+              - 923145
+              - 923189
+              - 923200
+              - 923241
+              - 923379
+              - 923410
+              - 923449
+              - 923453
+              - 923509
     - dimensions:
           age: All ages
           cause: Cardiovascular diseases
           metric: Percent
-      indicator_path:
-          926241: y
+      indicators:
+          y: 926241
     - dimensions:
           age: All ages
           cause: Neoplasms
           metric: Percent
-      indicator_path:
-          926523: y
+      indicators:
+          y: 926523
     - dimensions:
           age: All ages
           cause: Chronic respiratory diseases
           metric: Percent
-      indicator_path:
-          926274: y
+      indicators:
+          y: 926274
     - dimensions:
           age: All ages
           cause: Digestive diseases
           metric: Percent
-      indicator_path:
-          926320: y
+      indicators:
+          y: 926320
     - dimensions:
           age: All ages
           cause: Lower respiratory infections
           metric: Percent
-      indicator_path:
-          926459: y
+      indicators:
+          y: 926459
     - dimensions:
           age: All ages
           cause: Neonatal disorders
           metric: Percent
-      indicator_path:
-          926515: y
+      indicators:
+          y: 926515
     - dimensions:
           age: All ages
           cause: Alzheimer's disease and other dementias
           metric: Percent
-      indicator_path:
-          926207: y
+      indicators:
+          y: 926207
     - dimensions:
           age: All ages
           cause: Diabetes mellitus
           metric: Percent
-      indicator_path:
-          926311: y
+      indicators:
+          y: 926311
     - dimensions:
           age: All ages
           cause: Diarrheal diseases
           metric: Percent
-      indicator_path:
-          926317: y
+      indicators:
+          y: 926317
     - dimensions:
           age: All ages
           cause: Meningitis
           metric: Percent
-      indicator_path:
-          926486: y
+      indicators:
+          y: 926486
     - dimensions:
           age: All ages
           cause: Parkinson's disease
           metric: Percent
-      indicator_path:
-          926642: y
+      indicators:
+          y: 926642
     - dimensions:
           age: All ages
           cause: Nutritional deficiencies
           metric: Percent
-      indicator_path:
-          926550: y
+      indicators:
+          y: 926550
     - dimensions:
           age: All ages
           cause: Malaria
           metric: Percent
-      indicator_path:
-          926462: y
+      indicators:
+          y: 926462
     - dimensions:
           age: All ages
           cause: Drowning
           metric: Percent
-      indicator_path:
-          926327: y
+      indicators:
+          y: 926327
     - dimensions:
           age: All ages
           cause: Interpersonal violence
           metric: Percent
-      indicator_path:
-          926418: y
+      indicators:
+          y: 926418
     - dimensions:
           age: All ages
           cause: Maternal disorders
           metric: Percent
-      indicator_path:
-          926473: y
+      indicators:
+          y: 926473
     - dimensions:
           age: All ages
           cause: HIV/AIDS
           metric: Percent
-      indicator_path:
-          926386: y
+      indicators:
+          y: 926386
     - dimensions:
           age: All ages
           cause: Drug use disorders
           metric: Percent
-      indicator_path:
-          926329: y
+      indicators:
+          y: 926329
     - dimensions:
           age: All ages
           cause: Tuberculosis
           metric: Percent
-      indicator_path:
-          926745: y
+      indicators:
+          y: 926745
     - dimensions:
           age: All ages
           cause: Alcohol use disorders
           metric: Percent
-      indicator_path:
-          926200: y
+      indicators:
+          y: 926200
     - dimensions:
           age: All ages
           cause: Self-harm
           metric: Percent
-      indicator_path:
-          926692: y
+      indicators:
+          y: 926692
     - dimensions:
           age: All ages
           cause: Exposure to forces of nature
           metric: Percent
-      indicator_path:
-          926353: y
+      indicators:
+          y: 926353
     - dimensions:
           age: All ages
           cause: Environmental heat and cold exposure
           metric: Percent
-      indicator_path:
-          926350: y
+      indicators:
+          y: 926350
     - dimensions:
           age: All ages
           cause: Conflict and terrorism
           metric: Percent
-      indicator_path:
-          926290: y
+      indicators:
+          y: 926290
     - dimensions:
           age: All ages
           cause: Chronic kidney disease
           metric: Percent
-      indicator_path:
-          926255: y
+      indicators:
+          y: 926255
     - dimensions:
           age: All ages
           cause: Poisonings
           metric: Percent
-      indicator_path:
-          926662: y
+      indicators:
+          y: 926662
     - dimensions:
           age: All ages
           cause: Road injuries
           metric: Percent
-      indicator_path:
-          926687: y
+      indicators:
+          y: 926687
     - dimensions:
           age: All ages
           cause: Fire, heat, and hot substances
           metric: Percent
-      indicator_path:
-          926364: y
+      indicators:
+          y: 926364
     - dimensions:
           age: All ages
           cause: Acute hepatitis
           metric: Percent
-      indicator_path:
-          926180: y
+      indicators:
+          y: 926180
     - dimensions:
           age: All ages
           cause: COVID-19
           metric: Percent
-      indicator_path:
-          926236: y
+      indicators:
+          y: 926236
     - dimensions:
           age: All ages
           cause: all
           metric: Percent
-      indicator_path:
-          926180: y
-          926200: y
-          926207: y
-          926236: y
-          926241: y
-          926255: y
-          926274: y
-          926290: y
-          926311: y
-          926317: y
-          926320: y
-          926327: y
-          926329: y
-          926350: y
-          926353: y
-          926364: y
-          926386: y
-          926418: y
-          926459: y
-          926462: y
-          926473: y
-          926486: y
-          926515: y
-          926523: y
-          926550: y
-          926642: y
-          926662: y
-          926687: y
-          926692: y
-          926745: y
+      indicators:
+          y:
+              - 926180
+              - 926200
+              - 926207
+              - 926236
+              - 926241
+              - 926255
+              - 926274
+              - 926290
+              - 926311
+              - 926317
+              - 926320
+              - 926327
+              - 926329
+              - 926350
+              - 926353
+              - 926364
+              - 926386
+              - 926418
+              - 926459
+              - 926462
+              - 926473
+              - 926486
+              - 926515
+              - 926523
+              - 926550
+              - 926642
+              - 926662
+              - 926687
+              - 926692
+              - 926745
     - dimensions:
           age: All ages
           cause: Cardiovascular diseases
           metric: Rate
-      indicator_path:
-          930083: y
+      indicators:
+          y: 930083
     - dimensions:
           age: All ages
           cause: Neoplasms
           metric: Rate
-      indicator_path:
-          930366: y
+      indicators:
+          y: 930366
     - dimensions:
           age: All ages
           cause: Chronic respiratory diseases
           metric: Rate
-      indicator_path:
-          930116: y
+      indicators:
+          y: 930116
     - dimensions:
           age: All ages
           cause: Digestive diseases
           metric: Rate
-      indicator_path:
-          930164: y
+      indicators:
+          y: 930164
     - dimensions:
           age: All ages
           cause: Lower respiratory infections
           metric: Rate
-      indicator_path:
-          930303: y
+      indicators:
+          y: 930303
     - dimensions:
           age: All ages
           cause: Neonatal disorders
           metric: Rate
-      indicator_path:
-          930358: y
+      indicators:
+          y: 930358
     - dimensions:
           age: All ages
           cause: Alzheimer's disease and other dementias
           metric: Rate
-      indicator_path:
-          930047: y
+      indicators:
+          y: 930047
     - dimensions:
           age: All ages
           cause: Diabetes mellitus
           metric: Rate
-      indicator_path:
-          930153: y
+      indicators:
+          y: 930153
     - dimensions:
           age: All ages
           cause: Diarrheal diseases
           metric: Rate
-      indicator_path:
-          930159: y
+      indicators:
+          y: 930159
     - dimensions:
           age: All ages
           cause: Meningitis
           metric: Rate
-      indicator_path:
-          930329: y
+      indicators:
+          y: 930329
     - dimensions:
           age: All ages
           cause: Parkinson's disease
           metric: Rate
-      indicator_path:
-          930486: y
+      indicators:
+          y: 930486
     - dimensions:
           age: All ages
           cause: Nutritional deficiencies
           metric: Rate
-      indicator_path:
-          930394: y
+      indicators:
+          y: 930394
     - dimensions:
           age: All ages
           cause: Malaria
           metric: Rate
-      indicator_path:
-          930306: y
+      indicators:
+          y: 930306
     - dimensions:
           age: All ages
           cause: Drowning
           metric: Rate
-      indicator_path:
-          930170: y
+      indicators:
+          y: 930170
     - dimensions:
           age: All ages
           cause: Interpersonal violence
           metric: Rate
-      indicator_path:
-          930262: y
+      indicators:
+          y: 930262
     - dimensions:
           age: All ages
           cause: Maternal disorders
           metric: Rate
-      indicator_path:
-          930316: y
+      indicators:
+          y: 930316
     - dimensions:
           age: All ages
           cause: HIV/AIDS
           metric: Rate
-      indicator_path:
-          930229: y
+      indicators:
+          y: 930229
     - dimensions:
           age: All ages
           cause: Drug use disorders
           metric: Rate
-      indicator_path:
-          930172: y
+      indicators:
+          y: 930172
     - dimensions:
           age: All ages
           cause: Tuberculosis
           metric: Rate
-      indicator_path:
-          930540: y
+      indicators:
+          y: 930540
     - dimensions:
           age: All ages
           cause: Alcohol use disorders
           metric: Rate
-      indicator_path:
-          930041: y
+      indicators:
+          y: 930041
     - dimensions:
           age: All ages
           cause: Self-harm
           metric: Rate
-      indicator_path:
-          930514: y
+      indicators:
+          y: 930514
     - dimensions:
           age: All ages
           cause: Exposure to forces of nature
           metric: Rate
-      indicator_path:
-          930198: y
+      indicators:
+          y: 930198
     - dimensions:
           age: All ages
           cause: Environmental heat and cold exposure
           metric: Rate
-      indicator_path:
-          930194: y
+      indicators:
+          y: 930194
     - dimensions:
           age: All ages
           cause: Conflict and terrorism
           metric: Rate
-      indicator_path:
-          930132: y
+      indicators:
+          y: 930132
     - dimensions:
           age: All ages
           cause: Chronic kidney disease
           metric: Rate
-      indicator_path:
-          930097: y
+      indicators:
+          y: 930097
     - dimensions:
           age: All ages
           cause: Poisonings
           metric: Rate
-      indicator_path:
-          930500: y
+      indicators:
+          y: 930500
     - dimensions:
           age: All ages
           cause: Road injuries
           metric: Rate
-      indicator_path:
-          930512: y
+      indicators:
+          y: 930512
     - dimensions:
           age: All ages
           cause: Fire, heat, and hot substances
           metric: Rate
-      indicator_path:
-          930209: y
+      indicators:
+          y: 930209
     - dimensions:
           age: All ages
           cause: Acute hepatitis
           metric: Rate
-      indicator_path:
-          930023: y
+      indicators:
+          y: 930023
     - dimensions:
           age: All ages
           cause: COVID-19
           metric: Rate
-      indicator_path:
-          930079: y
+      indicators:
+          y: 930079
     - dimensions:
           age: All ages
           cause: all
           metric: Rate
-      indicator_path:
-          930023: y
-          930041: y
-          930047: y
-          930079: y
-          930083: y
-          930097: y
-          930116: y
-          930132: y
-          930153: y
-          930159: y
-          930164: y
-          930170: y
-          930172: y
-          930194: y
-          930198: y
-          930209: y
-          930229: y
-          930262: y
-          930303: y
-          930306: y
-          930316: y
-          930329: y
-          930358: y
-          930366: y
-          930394: y
-          930486: y
-          930500: y
-          930512: y
-          930514: y
-          930540: y
+      indicators:
+          y:
+              - 930023
+              - 930041
+              - 930047
+              - 930079
+              - 930083
+              - 930097
+              - 930116
+              - 930132
+              - 930153
+              - 930159
+              - 930164
+              - 930170
+              - 930172
+              - 930194
+              - 930198
+              - 930209
+              - 930229
+              - 930262
+              - 930303
+              - 930306
+              - 930316
+              - 930329
+              - 930358
+              - 930366
+              - 930394
+              - 930486
+              - 930500
+              - 930512
+              - 930514
+              - 930540
     - dimensions:
           age: Age-standardized
           cause: all
           metric: Number
-      indicator_path: {}
+      indicators: {}
     - dimensions:
           age: Age-standardized
           cause: all
           metric: Percent
-      indicator_path: {}
+      indicators: {}
     - dimensions:
           age: Age-standardized
           cause: Cardiovascular diseases
           metric: Rate
-      indicator_path:
-          929478: y
+      indicators:
+          y: 929478
     - dimensions:
           age: Age-standardized
           cause: Neoplasms
           metric: Rate
-      indicator_path:
-          929758: y
+      indicators:
+          y: 929758
     - dimensions:
           age: Age-standardized
           cause: Chronic respiratory diseases
           metric: Rate
-      indicator_path:
-          929510: y
+      indicators:
+          y: 929510
     - dimensions:
           age: Age-standardized
           cause: Digestive diseases
           metric: Rate
-      indicator_path:
-          929557: y
+      indicators:
+          y: 929557
     - dimensions:
           age: Age-standardized
           cause: Lower respiratory infections
           metric: Rate
-      indicator_path:
-          929695: y
+      indicators:
+          y: 929695
     - dimensions:
           age: Age-standardized
           cause: Neonatal disorders
           metric: Rate
-      indicator_path:
-          929751: y
+      indicators:
+          y: 929751
     - dimensions:
           age: Age-standardized
           cause: Alzheimer's disease and other dementias
           metric: Rate
-      indicator_path:
-          929443: y
+      indicators:
+          y: 929443
     - dimensions:
           age: Age-standardized
           cause: Diabetes mellitus
           metric: Rate
-      indicator_path:
-          929547: y
+      indicators:
+          y: 929547
     - dimensions:
           age: Age-standardized
           cause: Diarrheal diseases
           metric: Rate
-      indicator_path:
-          929553: y
+      indicators:
+          y: 929553
     - dimensions:
           age: Age-standardized
           cause: Meningitis
           metric: Rate
-      indicator_path:
-          929721: y
+      indicators:
+          y: 929721
     - dimensions:
           age: Age-standardized
           cause: Parkinson's disease
           metric: Rate
-      indicator_path:
-          929879: y
+      indicators:
+          y: 929879
     - dimensions:
           age: Age-standardized
           cause: Nutritional deficiencies
           metric: Rate
-      indicator_path:
-          929786: y
+      indicators:
+          y: 929786
     - dimensions:
           age: Age-standardized
           cause: Malaria
           metric: Rate
-      indicator_path:
-          929697: y
+      indicators:
+          y: 929697
     - dimensions:
           age: Age-standardized
           cause: Drowning
           metric: Rate
-      indicator_path:
-          929564: y
+      indicators:
+          y: 929564
     - dimensions:
           age: Age-standardized
           cause: Interpersonal violence
           metric: Rate
-      indicator_path:
-          929653: y
+      indicators:
+          y: 929653
     - dimensions:
           age: Age-standardized
           cause: Maternal disorders
           metric: Rate
-      indicator_path:
-          929710: y
+      indicators:
+          y: 929710
     - dimensions:
           age: Age-standardized
           cause: HIV/AIDS
           metric: Rate
-      indicator_path:
-          929621: y
+      indicators:
+          y: 929621
     - dimensions:
           age: Age-standardized
           cause: Drug use disorders
           metric: Rate
-      indicator_path:
-          929565: y
+      indicators:
+          y: 929565
     - dimensions:
           age: Age-standardized
           cause: Tuberculosis
           metric: Rate
-      indicator_path:
-          929981: y
+      indicators:
+          y: 929981
     - dimensions:
           age: Age-standardized
           cause: Alcohol use disorders
           metric: Rate
-      indicator_path:
-          929434: y
+      indicators:
+          y: 929434
     - dimensions:
           age: Age-standardized
           cause: Self-harm
           metric: Rate
-      indicator_path:
-          929928: y
+      indicators:
+          y: 929928
     - dimensions:
           age: Age-standardized
           cause: Exposure to forces of nature
           metric: Rate
-      indicator_path:
-          929591: y
+      indicators:
+          y: 929591
     - dimensions:
           age: Age-standardized
           cause: Environmental heat and cold exposure
           metric: Rate
-      indicator_path:
-          929587: y
+      indicators:
+          y: 929587
     - dimensions:
           age: Age-standardized
           cause: Conflict and terrorism
           metric: Rate
-      indicator_path:
-          929527: y
+      indicators:
+          y: 929527
     - dimensions:
           age: Age-standardized
           cause: Chronic kidney disease
           metric: Rate
-      indicator_path:
-          929492: y
+      indicators:
+          y: 929492
     - dimensions:
           age: Age-standardized
           cause: Poisonings
           metric: Rate
-      indicator_path:
-          929899: y
+      indicators:
+          y: 929899
     - dimensions:
           age: Age-standardized
           cause: Road injuries
           metric: Rate
-      indicator_path:
-          929924: y
+      indicators:
+          y: 929924
     - dimensions:
           age: Age-standardized
           cause: Fire, heat, and hot substances
           metric: Rate
-      indicator_path:
-          929601: y
+      indicators:
+          y: 929601
     - dimensions:
           age: Age-standardized
           cause: Acute hepatitis
           metric: Rate
-      indicator_path:
-          929415: y
+      indicators:
+          y: 929415
     - dimensions:
           age: Age-standardized
           cause: COVID-19
           metric: Rate
-      indicator_path:
-          929474: y
+      indicators:
+          y: 929474
     - dimensions:
           age: Age-standardized
           cause: all
           metric: Rate
-      indicator_path:
-          929415: y
-          929434: y
-          929443: y
-          929474: y
-          929478: y
-          929492: y
-          929510: y
-          929527: y
-          929547: y
-          929553: y
-          929557: y
-          929564: y
-          929565: y
-          929587: y
-          929591: y
-          929601: y
-          929621: y
-          929653: y
-          929695: y
-          929697: y
-          929710: y
-          929721: y
-          929751: y
-          929758: y
-          929786: y
-          929879: y
-          929899: y
-          929924: y
-          929928: y
-          929981: y
+      indicators:
+          y:
+              - 929415
+              - 929434
+              - 929443
+              - 929474
+              - 929478
+              - 929492
+              - 929510
+              - 929527
+              - 929547
+              - 929553
+              - 929557
+              - 929564
+              - 929565
+              - 929587
+              - 929591
+              - 929601
+              - 929621
+              - 929653
+              - 929695
+              - 929697
+              - 929710
+              - 929721
+              - 929751
+              - 929758
+              - 929786
+              - 929879
+              - 929899
+              - 929924
+              - 929928
+              - 929981
diff --git a/public/multi-dim/energy.yml b/public/multi-dim/energy.yml
index 665fd877e8a..22a60535113 100644
--- a/public/multi-dim/energy.yml
+++ b/public/multi-dim/energy.yml
@@ -70,26 +70,26 @@ views:
     - dimensions:
           source: all
           metric: total
-      indicator_path:
-          900831: y
+      indicators:
+          y: 900831
     - dimensions:
           source: all
           metric: per_capita
-      indicator_path:
-          900839: y
+      indicators:
+          y: 900839
     - dimensions:
           source: all
           metric: share_total
     - dimensions:
           source: all
           metric: proportional_change
-      indicator_path:
-          900830: y
+      indicators:
+          y: 900830
     - dimensions:
           source: all
           metric: absolute_change
-      indicator_path:
-          900832: y
+      indicators:
+          y: 900832
 
     - dimensions:
           source: fossil
diff --git a/public/multi-dim/life-expectancy.json b/public/multi-dim/life-expectancy.json
index c4fdaaa3d5f..988416b8db6 100644
--- a/public/multi-dim/life-expectancy.json
+++ b/public/multi-dim/life-expectancy.json
@@ -71,7 +71,7 @@
     "views": [
         {
             "dimensions": { "age": "0", "sex": "both", "projection": "none" },
-            "indicator_path": { "520369": "y" },
+            "indicators": { "y": "520369" },
             "config": {
                 "title": "Life expectancy at birth",
                 "hasMapTab": true
@@ -79,7 +79,7 @@
         },
         {
             "dimensions": { "age": "0", "sex": "both", "projection": "medium" },
-            "indicator_path": { "520370": "y" },
+            "indicators": { "y": "520370" },
             "config": {
                 "title": "Life expectancy at birth, medium projection",
                 "hasMapTab": true
@@ -88,7 +88,7 @@
 
         {
             "dimensions": { "age": "0", "sex": "male", "projection": "none" },
-            "indicator_path": { "520349": "y" },
+            "indicators": { "y": "520349" },
             "config": {
                 "title": "Male life expectancy at birth",
                 "hasMapTab": true
@@ -96,7 +96,7 @@
         },
         {
             "dimensions": { "age": "0", "sex": "male", "projection": "medium" },
-            "indicator_path": { "520350": "y" },
+            "indicators": { "y": "520350" },
             "config": {
                 "title": "Male life expectancy at birth, medium projection",
                 "hasMapTab": true
@@ -105,7 +105,7 @@
 
         {
             "dimensions": { "age": "0", "sex": "female", "projection": "none" },
-            "indicator_path": { "520329": "y" },
+            "indicators": { "y": "520329" },
             "config": {
                 "title": "Female life expectancy at birth",
                 "hasMapTab": true
@@ -117,7 +117,7 @@
                 "sex": "female",
                 "projection": "medium"
             },
-            "indicator_path": { "520330": "y" },
+            "indicators": { "y": "520330" },
             "config": {
                 "title": "Female life expectancy at birth, medium projection",
                 "hasMapTab": true
@@ -126,7 +126,7 @@
 
         {
             "dimensions": { "age": "15", "sex": "both", "projection": "none" },
-            "indicator_path": { "520379": "y" },
+            "indicators": { "y": "520379" },
             "config": {
                 "title": "Life expectancy at age 15",
                 "hasMapTab": true
@@ -138,7 +138,7 @@
                 "sex": "both",
                 "projection": "medium"
             },
-            "indicator_path": { "520380": "y" },
+            "indicators": { "y": "520380" },
             "config": {
                 "title": "Life expectancy at age 15, medium projection",
                 "hasMapTab": true
@@ -147,7 +147,7 @@
 
         {
             "dimensions": { "age": "15", "sex": "male", "projection": "none" },
-            "indicator_path": { "520359": "y" },
+            "indicators": { "y": "520359" },
             "config": {
                 "title": "Male life expectancy at age 15",
                 "hasMapTab": true
@@ -159,7 +159,7 @@
                 "sex": "male",
                 "projection": "medium"
             },
-            "indicator_path": { "520360": "y" },
+            "indicators": { "y": "520360" },
             "config": {
                 "title": "Male life expectancy at age 15, medium projection",
                 "hasMapTab": true
@@ -172,7 +172,7 @@
                 "sex": "female",
                 "projection": "none"
             },
-            "indicator_path": { "520338": "y" },
+            "indicators": { "y": "520338" },
             "config": {
                 "title": "Female life expectancy at age 15",
                 "hasMapTab": true
@@ -184,7 +184,7 @@
                 "sex": "female",
                 "projection": "medium"
             },
-            "indicator_path": { "520340": "y" },
+            "indicators": { "y": "520340" },
             "config": {
                 "title": "Female life expectancy at age 15, medium projection",
                 "hasMapTab": true
diff --git a/public/multi-dim/plastic.json b/public/multi-dim/plastic.json
index c9676ff5147..dbf46f85fff 100644
--- a/public/multi-dim/plastic.json
+++ b/public/multi-dim/plastic.json
@@ -64,7 +64,7 @@
     "views": [
         {
             "dimensions": { "metric": "waste_gen", "measurement": "total" },
-            "indicator_path": { "97679": "y" },
+            "indicators": { "y": "97679" },
             "config": {
                 "title": "Plastic waste generation",
                 "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
@@ -75,7 +75,7 @@
                 "metric": "waste_gen",
                 "measurement": "per_capita"
             },
-            "indicator_path": { "65358": "y" },
+            "indicators": { "y": "65358" },
             "config": {
                 "title": "Plastic waste generation per capita",
                 "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
@@ -86,7 +86,7 @@
                 "metric": "waste_gen",
                 "measurement": "share_of_world"
             },
-            "indicator_path": { "146456": "y" },
+            "indicators": { "y": "146456" },
             "config": {
                 "title": "Plastic waste generation",
                 "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
diff --git a/public/multi-dim/poverty.yml b/public/multi-dim/poverty.yml
index 7136c706431..ccebfd59e43 100644
--- a/public/multi-dim/poverty.yml
+++ b/public/multi-dim/poverty.yml
@@ -43,56 +43,56 @@ views:
           metric: share
       config:
           hasMapTab: true
-      indicator_path:
-          819727: y
+      indicators:
+          y: 819727
     - dimensions:
           povertyLine: "3.65"
           metric: share
-      indicator_path:
-          819729: y
+      indicators:
+          y: 819729
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "6.85"
           metric: share
-      indicator_path:
-          819731: y
+      indicators:
+          y: 819731
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "10"
           metric: share
-      indicator_path:
-          819725: y
+      indicators:
+          y: 819725
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "20"
           metric: share
-      indicator_path:
-          819726: y
+      indicators:
+          y: 819726
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "30"
           metric: share
-      indicator_path:
-          819728: y
+      indicators:
+          y: 819728
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "40"
           metric: share
-      indicator_path:
-          819730: y
+      indicators:
+          y: 819730
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "2.15"
           metric: shareVsGdp
-      indicator_path:
-          819727: y
-          539760: x
+      indicators:
+          y: 819727
+          x: 539760
       config:
           hasMapTab: true
           type: ScatterPlot
@@ -101,9 +101,9 @@ views:
     - dimensions:
           povertyLine: "3.65"
           metric: shareVsGdp
-      indicator_path:
-          819729: y
-          539760: x
+      indicators:
+          y: 819729
+          x: 539760
       config:
           hasMapTab: true
           type: ScatterPlot
@@ -112,9 +112,9 @@ views:
     - dimensions:
           povertyLine: "6.85"
           metric: shareVsGdp
-      indicator_path:
-          819731: y
-          539760: x
+      indicators:
+          y: 819731
+          x: 539760
       config:
           hasMapTab: true
           type: ScatterPlot
@@ -123,9 +123,9 @@ views:
     - dimensions:
           povertyLine: "10"
           metric: shareVsGdp
-      indicator_path:
-          819725: y
-          539760: x
+      indicators:
+          y: 819725
+          x: 539760
       config:
           hasMapTab: true
           type: ScatterPlot
@@ -134,9 +134,9 @@ views:
     - dimensions:
           povertyLine: "20"
           metric: shareVsGdp
-      indicator_path:
-          819726: y
-          539760: x
+      indicators:
+          y: 819726
+          x: 539760
       config:
           hasMapTab: true
           type: ScatterPlot
@@ -145,9 +145,9 @@ views:
     - dimensions:
           povertyLine: "30"
           metric: shareVsGdp
-      indicator_path:
-          819728: y
-          539760: x
+      indicators:
+          y: 819728
+          x: 539760
       config:
           hasMapTab: true
           type: ScatterPlot
@@ -156,9 +156,9 @@ views:
     - dimensions:
           povertyLine: "40"
           metric: shareVsGdp
-      indicator_path:
-          819730: y
-          539760: x
+      indicators:
+          y: 819730
+          x: 539760
       config:
           hasMapTab: true
           type: ScatterPlot
@@ -167,64 +167,65 @@ views:
     - dimensions:
           povertyLine: "2.15"
           metric: absolute
-      indicator_path:
-          819719: y
+      indicators:
+          y: 819719
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "3.65"
           metric: absolute
-      indicator_path:
-          819721: y
+      indicators:
+          y: 819721
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "6.85"
           metric: absolute
-      indicator_path:
-          819723: y
+      indicators:
+          y: 819723
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "10"
           metric: absolute
-      indicator_path:
-          819717: y
+      indicators:
+          y: 819717
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "20"
           metric: absolute
-      indicator_path:
-          819718: y
+      indicators:
+          y: 819718
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "30"
           metric: absolute
-      indicator_path:
-          819720: y
+      indicators:
+          y: 819720
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: "40"
           metric: absolute
-      indicator_path:
-          819722: y
+      indicators:
+          y: 819722
       config:
           hasMapTab: true
     - dimensions:
           povertyLine: all
           metric: share
-      indicator_path:
-          - 819811: y
-          - 819826: y
-          - 819824: y
-          - 819822: y
-          - 819820: y
-          - 819818: y
-          - 819816: y
-          - 819815: y
+      indicators:
+          y:
+              - 819811
+              - 819826
+              - 819824
+              - 819822
+              - 819820
+              - 819818
+              - 819816
+              - 819815
       config:
           type: StackedArea
           hasMapTab: true
diff --git a/site/multiDim/MultiDimDataPageConfig.test.ts b/site/multiDim/MultiDimDataPageConfig.test.ts
index f9ae23e417a..9f01273015a 100644
--- a/site/multiDim/MultiDimDataPageConfig.test.ts
+++ b/site/multiDim/MultiDimDataPageConfig.test.ts
@@ -48,14 +48,14 @@ describe("methods", () => {
         - dimensions:
               fuel_type: gas
               sector: transport
-          indicator_path:
+          indicators:
               emissions__gas__transport: y
           config:
               title: Natural gas emissions in transport
         - dimensions:
               fuel_type: oil
               sector: transport
-          indicator_path:
+          indicators:
               emissions__oil__transport: y
           config:
               title: Oil emissions in transport
@@ -63,7 +63,7 @@ describe("methods", () => {
         - dimensions: # This dimension uses other fields; they probably are nicer to work with
               fuel_type: solar
               sector: electricity
-          indicator_path:
+          indicators:
               emissions__solar__transport: y
           config:
               title: ...
@@ -97,29 +97,5 @@ describe("methods", () => {
             sector: "transport",
         })
         expect(view).toBeDefined()
-        expect(view!.indicator_path).toEqual({
-            emissions__gas__transport: "y",
-        })
-    })
-})
-
-describe("transformIndicatorPathObj", () => {
-    it("works", () => {
-        const obj = {
-            emissions__gas__transport: "y",
-            emissions__oil__transport: "y",
-            time: "x",
-            gdp_per_capita: "size",
-        }
-        const result = MultiDimDataPageConfig.transformIndicatorPathObj(
-            obj as any
-        )
-        expect(result).toEqual({
-            x: ["time"],
-            y: ["emissions__gas__transport", "emissions__oil__transport"],
-            color: [],
-            size: ["gdp_per_capita"],
-            table: [],
-        })
     })
 })
diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
index 6143111ad19..408fa8f4790 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/site/multiDim/MultiDimDataPageConfig.ts
@@ -2,19 +2,22 @@ import {
     Choice,
     ChoicesEnriched,
     DimensionEnriched,
-    MultiDimDataPageConfigType,
+    IndicatorEntryAfterPreProcessing,
+    MultiDimDataPageConfigPreProcessed,
     View,
 } from "./MultiDimDataPageTypes.js"
-import { DimensionProperty, groupBy, keyBy } from "@ourworldindata/utils"
+import { groupBy, keyBy } from "@ourworldindata/utils"
 
 export class MultiDimDataPageConfig {
-    private constructor(public readonly config: MultiDimDataPageConfigType) {}
+    private constructor(
+        public readonly config: MultiDimDataPageConfigPreProcessed
+    ) {}
 
     static fromJson(jsonString: string) {
         return new MultiDimDataPageConfig(JSON.parse(jsonString))
     }
 
-    static fromObject(obj: MultiDimDataPageConfigType) {
+    static fromObject(obj: MultiDimDataPageConfigPreProcessed) {
         return new MultiDimDataPageConfig(obj)
     }
 
@@ -38,7 +41,9 @@ export class MultiDimDataPageConfig {
         return keyBy(dimensionsEnriched, "slug")
     }
 
-    filterViewsByDimensions(dimensions: Record<string, string>): View[] {
+    filterViewsByDimensions(
+        dimensions: Record<string, string>
+    ): View<IndicatorEntryAfterPreProcessing>[] {
         return this.config.views.filter((view) => {
             for (const [dimensionSlug, choiceSlug] of Object.entries(
                 dimensions
@@ -51,7 +56,9 @@ export class MultiDimDataPageConfig {
 
     // This'll only ever find one or zero views, and will throw an error
     // if more than one matching views were found
-    findViewByDimensions(dimensions: Record<string, string>) {
+    findViewByDimensions(
+        dimensions: Record<string, string>
+    ): View<IndicatorEntryAfterPreProcessing> | undefined {
         const matchingViews = this.filterViewsByDimensions(dimensions)
         if (matchingViews.length === 0) return undefined
         if (matchingViews.length > 1) {
@@ -132,40 +139,4 @@ export class MultiDimDataPageConfig {
             dimensionsWithAvailableChoices,
         }
     }
-
-    static transformIndicatorPathObj(
-        indicatorPathObj:
-            | Record<string, DimensionProperty>
-            | Array<Record<string, DimensionProperty>>
-    ): Record<DimensionProperty, string[]> {
-        const emptyObj: Record<DimensionProperty, string[]> = {
-            x: [],
-            y: [],
-            color: [],
-            size: [],
-            table: [],
-        }
-        if (Array.isArray(indicatorPathObj)) {
-            return indicatorPathObj.reduce((result, obj) => {
-                const transformed =
-                    MultiDimDataPageConfig.transformIndicatorPathObj(obj)
-                for (const [dimension, indicatorPaths] of Object.entries(
-                    transformed
-                )) {
-                    result[dimension as DimensionProperty].push(
-                        ...indicatorPaths
-                    )
-                }
-                return result
-            }, emptyObj)
-        } else {
-            return Object.entries(indicatorPathObj).reduce(
-                (result, [indicatorPath, dimension]) => {
-                    result[dimension].push(indicatorPath)
-                    return result
-                },
-                emptyObj
-            )
-        }
-    }
 }
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 3b1721ae3fd..ea6d52b4ea2 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -35,7 +35,7 @@ import { DebugProvider } from "../gdocs/DebugContext.js"
 import { BAKED_BASE_URL, DATA_API_URL } from "../../settings/clientSettings.js"
 import Image from "../gdocs/components/Image.js"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import { MultiDimDataPageConfigType } from "./MultiDimDataPageTypes.js"
+import { MultiDimDataPageConfigPreProcessed } from "./MultiDimDataPageTypes.js"
 import AboutThisData from "../AboutThisData.js"
 import TopicTags from "../TopicTags.js"
 import MetadataSection from "../MetadataSection.js"
@@ -48,7 +48,7 @@ import { useElementBounds } from "../hooks.js"
 import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
 declare global {
     interface Window {
-        _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigType
+        _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigPreProcessed
     }
 }
 export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root"
@@ -192,15 +192,23 @@ export const MultiDimDataPageContent = ({
     }, [currentSettings, config])
 
     const dimensionsConfig = useMemo(() => {
-        const dimObj = MultiDimDataPageConfig.transformIndicatorPathObj(
-            currentView?.indicator_path ?? {}
-        )
-        return Object.entries(dimObj).flatMap(([property, variableIds]) =>
-            variableIds.flatMap((variableId) => ({
-                property: property as DimensionProperty,
-                variableId: parseInt(variableId),
-            }))
-        )
+        const dimObj = currentView?.indicators
+        if (!dimObj) return []
+        return Object.entries(dimObj)
+            .flatMap(([property, variableIds]) => {
+                if (Array.isArray(variableIds)) {
+                    return variableIds.flatMap((variableId) => ({
+                        property: property as DimensionProperty,
+                        variableId,
+                    }))
+                } else {
+                    return {
+                        property: property as DimensionProperty,
+                        variableId: variableIds,
+                    }
+                }
+            })
+            .filter((dim) => dim.variableId !== undefined)
     }, [currentView])
 
     const [datapageDataFromVar, setDatapageDataFromVar] =
@@ -208,7 +216,10 @@ export const MultiDimDataPageContent = ({
 
     useEffect(() => {
         setDatapageDataFromVar(null)
-        const variableId = dimensionsConfig[0]?.variableId
+        const yIndicatorOrIndicators = currentView?.indicators["y"]
+        const variableId = Array.isArray(yIndicatorOrIndicators)
+            ? yIndicatorOrIndicators[0]
+            : yIndicatorOrIndicators
         if (!variableId) return
         const variableMetadata = cachedGetVariableMetadata(variableId)
 
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index b05805fe107..94dacd9b53e 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -1,14 +1,23 @@
-import { DimensionProperty } from "@ourworldindata/types"
+// Indicator ID, catalog path, or maybe an array of those
+export type IndicatorEntryBeforePreProcessing = string | number | undefined
+export type IndicatorEntryAfterPreProcessing = number | undefined // catalog paths have been resolved to indicator IDs
+export type MultiIndicatorEntry<IndicatorType> = IndicatorType | IndicatorType[]
 
-export interface MultiDimDataPageConfigType {
+interface MultiDimDataPageConfigType<IndicatorType> {
     name: string
     dimensions_title: string
     default_selection?: string[]
     common_indicator_path_prefix?: string
     dimensions: Dimension[]
-    views: View[]
+    views: View<IndicatorType>[]
 }
 
+export type MultiDimDataPageConfigRaw =
+    MultiDimDataPageConfigType<IndicatorEntryBeforePreProcessing>
+
+export type MultiDimDataPageConfigPreProcessed =
+    MultiDimDataPageConfigType<IndicatorEntryAfterPreProcessing>
+
 export interface Dimension {
     slug: string
     name: string
@@ -33,11 +42,14 @@ export interface Choice {
     multi_select?: boolean
 }
 
-export interface View {
+export interface View<IndicatorType> {
     dimensions: Record<string, string> // Keys: dimension slugs, values: choice slugs
-    indicator_path:
-        | Record<string, DimensionProperty>
-        | Array<Record<string, DimensionProperty>> // Keys: indicator path, values: dimension (e.g. x, y, color, size)
+    indicators: {
+        y: MultiIndicatorEntry<IndicatorType>
+        x?: IndicatorType
+        size?: IndicatorType
+        color?: IndicatorType
+    }
     config?: Config
 }
 
diff --git a/site/multiDim/config.yml b/site/multiDim/config.yml
index c24c3262c4f..d56da699f9c 100644
--- a/site/multiDim/config.yml
+++ b/site/multiDim/config.yml
@@ -36,14 +36,14 @@ views:
     - dimensions:
           fuel_type: gas
           sector: transport
-      indicator_path:
+      indicators:
           emissions__gas__transport: y
       config:
           title: Natural gas emissions in transport
     - dimensions:
           fuel_type: oil
           sector: transport
-      indicator_path:
+      indicators:
           emissions__oil__transport: y
       config:
           title: Oil emissions in transport
@@ -51,7 +51,7 @@ views:
     - dimensions: # This dimension uses other fields; they probably are nicer to work with
           fuel_type: solar
           sector: electricity
-      indicator_path:
+      indicators:
           emissions__solar__transport: y
       config:
           title: ...

From 7a62c257376ecb676c554b77413b9fe1752f3fc6 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 25 Jul 2024 20:47:10 +0100
Subject: [PATCH 34/65] fix(multi-dim): handle missing indicators gracefully

---
 adminSiteServer/mockSiteRouter.tsx        |  4 ++--
 baker/MultiDimBaker.tsx                   | 22 ++++++++++++----------
 public/multi-dim/energy.yml               |  8 ++++----
 site/multiDim/MultiDimDataPageContent.tsx |  2 +-
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.tsx
index 0ecfe00054e..d0af0cdc9d8 100644
--- a/adminSiteServer/mockSiteRouter.tsx
+++ b/adminSiteServer/mockSiteRouter.tsx
@@ -203,7 +203,7 @@ getPlainRouteNonIdempotentWithRWTransaction(
     "/grapher/:slug",
     async (req, res, trx) => {
         const chartRow = await getChartConfigBySlug(trx, req.params.slug).catch(
-            noop
+            console.error
         )
         if (chartRow) {
             // XXX add dev-prod parity for this
@@ -217,7 +217,7 @@ getPlainRouteNonIdempotentWithRWTransaction(
             const page = await renderMultiDimDataPageBySlug(
                 trx,
                 req.params.slug
-            ).catch(noop)
+            ).catch(console.error)
             if (page) {
                 res.send(page)
                 return
diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index f3d876d7219..aee72e7fc25 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -46,10 +46,11 @@ const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
 ): Promise<MultiDimDataPageConfigPreProcessed> => {
     const allCatalogPaths = rawConfig.views
         .flatMap((view) =>
-            Object.values(view.indicators).flatMap((indicatorOrIndicators) =>
-                Array.isArray(indicatorOrIndicators)
-                    ? indicatorOrIndicators
-                    : [indicatorOrIndicators]
+            Object.values(view.indicators ?? {}).flatMap(
+                (indicatorOrIndicators) =>
+                    Array.isArray(indicatorOrIndicators)
+                        ? indicatorOrIndicators
+                        : [indicatorOrIndicators]
             )
         )
         .filter((indicator) => typeof indicator === "string")
@@ -95,12 +96,13 @@ const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
     }
 
     for (const view of rawConfig.views) {
-        view.indicators = Object.fromEntries(
-            Object.entries(view.indicators).map(([key, value]) => [
-                key,
-                resolveField(value),
-            ])
-        ) as any
+        if (view.indicators)
+            view.indicators = Object.fromEntries(
+                Object.entries(view.indicators).map(([key, value]) => [
+                    key,
+                    resolveField(value),
+                ])
+            ) as any
     }
 
     return rawConfig as MultiDimDataPageConfigPreProcessed
diff --git a/public/multi-dim/energy.yml b/public/multi-dim/energy.yml
index 22a60535113..9b1af0ffff6 100644
--- a/public/multi-dim/energy.yml
+++ b/public/multi-dim/energy.yml
@@ -71,12 +71,12 @@ views:
           source: all
           metric: total
       indicators:
-          y: 900831
+          y: grapher/energy/2024-05-08/primary_energy_consumption/primary_energy_consumption#primary_energy_consumption__twh
     - dimensions:
           source: all
           metric: per_capita
       indicators:
-          y: 900839
+          y: grapher/energy/2024-05-08/primary_energy_consumption/primary_energy_consumption#primary_energy_consumption_per_capita__kwh
     - dimensions:
           source: all
           metric: share_total
@@ -84,12 +84,12 @@ views:
           source: all
           metric: proportional_change
       indicators:
-          y: 900830
+          y: grapher/energy/2024-05-08/primary_energy_consumption/primary_energy_consumption#annual_change_in_primary_energy_consumption__pct
     - dimensions:
           source: all
           metric: absolute_change
       indicators:
-          y: 900832
+          y: grapher/energy/2024-05-08/primary_energy_consumption/primary_energy_consumption#annual_change_in_primary_energy_consumption__twh
 
     - dimensions:
           source: fossil
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index ea6d52b4ea2..14d5f9f9b01 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -216,7 +216,7 @@ export const MultiDimDataPageContent = ({
 
     useEffect(() => {
         setDatapageDataFromVar(null)
-        const yIndicatorOrIndicators = currentView?.indicators["y"]
+        const yIndicatorOrIndicators = currentView?.indicators?.["y"]
         const variableId = Array.isArray(yIndicatorOrIndicators)
             ? yIndicatorOrIndicators[0]
             : yIndicatorOrIndicators

From 41775b7981b91a8b6fc38d9c01f8c20f492ce03e Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 30 Jul 2024 15:24:53 +0100
Subject: [PATCH 35/65] enhance(multi-dim): use topic tags from mdd config

---
 public/multi-dim/energy.yml               |  2 ++
 site/multiDim/MultiDimDataPage.tsx        | 16 ++++++++++++++--
 site/multiDim/MultiDimDataPageContent.tsx | 13 ++++---------
 site/multiDim/MultiDimDataPageTypes.ts    |  1 +
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/public/multi-dim/energy.yml b/public/multi-dim/energy.yml
index 9b1af0ffff6..70ff9088e42 100644
--- a/public/multi-dim/energy.yml
+++ b/public/multi-dim/energy.yml
@@ -4,6 +4,8 @@ default_selection:
     - World
     - Europe
     - Mexico
+topicTags:
+    - Energy
 dimensions:
     - slug: source
       name: Energy source
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index c4e7939b881..9c2aaf830a8 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -5,16 +5,28 @@ import { IFrameDetector } from "../IframeDetector.js"
 import { SiteHeader } from "../SiteHeader.js"
 import { OWID_DATAPAGE_CONTENT_ROOT_ID } from "../DataPageV2Content.js"
 import { SiteFooter } from "../SiteFooter.js"
-import { SiteFooterContext, serializeJSONForHTML } from "@ourworldindata/utils"
+import {
+    SiteFooterContext,
+    pick,
+    serializeJSONForHTML,
+} from "@ourworldindata/utils"
 
 export const MultiDimDataPage = (props: {
     baseUrl: string
     config: MultiDimDataPageConfig
     tagToSlugMap?: Record<string, string>
 }) => {
+    const { config } = props
+
     const canonicalUrl = "" // TODO
     const baseUrl = props.baseUrl // TODO
 
+    // Only embed the tags that are actually used by the datapage, instead of the complete JSON object with ~240 properties
+    const minimalTagToSlugMap = pick(
+        props.tagToSlugMap,
+        config.config.topicTags ?? []
+    )
+
     return (
         <html>
             <Head
@@ -65,7 +77,7 @@ export const MultiDimDataPage = (props: {
                                     // datapageData,
                                     // faqEntries,
                                     canonicalUrl,
-                                    tagToSlugMap: props.tagToSlugMap,
+                                    tagToSlugMap: minimalTagToSlugMap,
                                     // imageMetadata,
                                 }
                             )}`,
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 14d5f9f9b01..6ed01c739fa 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -24,10 +24,8 @@ import {
     getAttributionFragmentsFromVariable,
     OwidVariableWithSourceAndDimension,
     memoize,
-    GrapherTabOption,
     QueryParams,
     setWindowQueryStr,
-    getWindowQueryParams,
     getWindowQueryStr,
 } from "@ourworldindata/utils"
 import cx from "classnames"
@@ -293,16 +291,15 @@ export const MultiDimDataPageContent = ({
         } as GrapherProgrammaticInterface
     }, [currentView, dimensionsConfig, bounds, config])
 
-    const hasTopicTags = !!datapageDataFromVar?.topicTagsLinks?.length
+    const hasTopicTags = !!config.config.topicTags?.length
 
     const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
     const relatedResearch =
-        relatedResearchCandidates.length > 3 &&
-        datapageDataFromVar?.topicTagsLinks?.length
+        relatedResearchCandidates.length > 3 && config.config.topicTags?.length
             ? relatedResearchCandidates.filter((research) => {
                   const shared = intersection(
                       research.tags,
-                      datapageDataFromVar?.topicTagsLinks ?? []
+                      config.config.topicTags ?? []
                   )
                   return shared.length > 0
               })
@@ -345,9 +342,7 @@ export const MultiDimDataPageContent = ({
                     {hasTopicTags && (
                         <TopicTags
                             className="header__right col-start-10 span-cols-4 col-sm-start-2 span-sm-cols-12"
-                            topicTagsLinks={
-                                datapageDataFromVar.topicTagsLinks ?? []
-                            }
+                            topicTagsLinks={config.config.topicTags ?? []}
                             tagToSlugMap={tagToSlugMap}
                         />
                     )}
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index 94dacd9b53e..ba93d8615e7 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -7,6 +7,7 @@ interface MultiDimDataPageConfigType<IndicatorType> {
     name: string
     dimensions_title: string
     default_selection?: string[]
+    topicTags?: string[]
     common_indicator_path_prefix?: string
     dimensions: Dimension[]
     views: View<IndicatorType>[]

From 94fd50e1cd309c6ef1485eb4b3c299cf1e6ea0c7 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 30 Jul 2024 17:32:02 +0100
Subject: [PATCH 36/65] enhance(multi-dim): specify static `title` and
 `titleVariant`

---
 public/multi-dim/causes-of-death.yml      |  5 ++++-
 public/multi-dim/energy.yml               |  7 ++++---
 public/multi-dim/life-expectancy.json     |  6 +++++-
 public/multi-dim/plastic.json             |  7 ++++---
 public/multi-dim/poverty.yml              |  7 ++++---
 site/multiDim/MultiDimDataPageContent.tsx | 22 +++++++---------------
 site/multiDim/MultiDimDataPageTypes.ts    | 11 ++++++-----
 7 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/public/multi-dim/causes-of-death.yml b/public/multi-dim/causes-of-death.yml
index 5c42fcfc04b..f5056dac729 100644
--- a/public/multi-dim/causes-of-death.yml
+++ b/public/multi-dim/causes-of-death.yml
@@ -1,4 +1,7 @@
-default_selection:
+title:
+    title: Causes of death
+    titleVariant: by cause and age group
+defaultSelection:
     - World
     - Europe
     - Asia
diff --git a/public/multi-dim/energy.yml b/public/multi-dim/energy.yml
index 70ff9088e42..09729ea118d 100644
--- a/public/multi-dim/energy.yml
+++ b/public/multi-dim/energy.yml
@@ -1,6 +1,7 @@
-name: Energy use
-dimensions_title: by energy source
-default_selection:
+title:
+    title: Energy use
+    titleVariant: by energy source
+defaultSelection:
     - World
     - Europe
     - Mexico
diff --git a/public/multi-dim/life-expectancy.json b/public/multi-dim/life-expectancy.json
index 988416b8db6..15cff913b74 100644
--- a/public/multi-dim/life-expectancy.json
+++ b/public/multi-dim/life-expectancy.json
@@ -1,7 +1,11 @@
 {
+    "title": {
+        "title": "Life expectancy",
+        "titleVariant": "by age and sex"
+    },
     "name": "Life expectancy",
     "dimensions_title": "by age and sex",
-    "default_selection": ["World", "Europe", "Asia"],
+    "defaultSelection": ["World", "Europe", "Asia"],
     "dimensions": [
         {
             "slug": "age",
diff --git a/public/multi-dim/plastic.json b/public/multi-dim/plastic.json
index dbf46f85fff..0f23b5d4714 100644
--- a/public/multi-dim/plastic.json
+++ b/public/multi-dim/plastic.json
@@ -1,7 +1,8 @@
 {
-    "name": "Plastic",
-    "dimensions_title": "waste and pollution",
-    "default_selection": ["World", "Europe", "Asia"],
+    "title": {
+        "title": "Plastic waste and pollution"
+    },
+    "defaultSelection": ["World", "Europe", "Asia"],
     "dimensions": [
         {
             "slug": "metric",
diff --git a/public/multi-dim/poverty.yml b/public/multi-dim/poverty.yml
index ccebfd59e43..76287bb4d0d 100644
--- a/public/multi-dim/poverty.yml
+++ b/public/multi-dim/poverty.yml
@@ -1,6 +1,7 @@
-name: Poverty
-dimensions_title: by poverty line
-default_selection:
+title:
+    title: Poverty
+    titleVariant: by poverty line
+defaultSelection:
     - World
     - Europe
     - Asia
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 6ed01c739fa..d326eb464db 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -170,13 +170,7 @@ export const MultiDimDataPageContent = ({
             : {}
     )
 
-    const datapageDataStub: Partial<DataPageDataV2> = {
-        title: {
-            title: config.config.name ?? "",
-            titleVariant: config.config.dimensions_title,
-        },
-        titleVariant: config.config.dimensions_title,
-    }
+    const title = config.config.title
 
     const [currentSettings, setCurrentSettings] = useState(() => {
         const { selectedChoices } =
@@ -225,15 +219,15 @@ export const MultiDimDataPageContent = ({
             .then((json) => getDatapageDataV2(json, grapherConfig))
             .then(setDatapageDataFromVar)
             .catch(console.error)
-    }, [dimensionsConfig, grapherConfig])
+    }, [dimensionsConfig, currentView?.indicators, grapherConfig])
 
     const titleFragments = joinTitleFragments(
-        datapageDataFromVar?.attributionShort,
-        datapageDataFromVar?.titleVariant
+        title.titleVariant,
+        title.attributionShort
     )
 
     const selectionArray = useMemo(
-        () => new SelectionArray(config.config.default_selection),
+        () => new SelectionArray(config.config.defaultSelection),
         [config]
     )
 
@@ -285,7 +279,7 @@ export const MultiDimDataPageContent = ({
             ...currentView?.config,
             dimensions: dimensionsConfig,
             isEmbeddedInADataPage: true,
-            selectedEntityNames: config.config.default_selection,
+            selectedEntityNames: config.config.defaultSelection,
 
             bounds,
         } as GrapherProgrammaticInterface
@@ -334,9 +328,7 @@ export const MultiDimDataPageContent = ({
                 <div className="header__wrapper wrapper grid grid-cols-12 ">
                     <div className="header__left span-cols-8 span-sm-cols-12">
                         <div className="header__supertitle">Data</div>
-                        <h1 className="header__title">
-                            {datapageDataFromVar?.title?.title}
-                        </h1>
+                        <h1 className="header__title">{title.title}</h1>
                         <div className="header__source">{titleFragments}</div>
                     </div>
                     {hasTopicTags && (
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index ba93d8615e7..5cb67721b46 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -1,14 +1,15 @@
+import { IndicatorTitleWithFragments } from "@ourworldindata/types"
+
 // Indicator ID, catalog path, or maybe an array of those
 export type IndicatorEntryBeforePreProcessing = string | number | undefined
 export type IndicatorEntryAfterPreProcessing = number | undefined // catalog paths have been resolved to indicator IDs
 export type MultiIndicatorEntry<IndicatorType> = IndicatorType | IndicatorType[]
 
 interface MultiDimDataPageConfigType<IndicatorType> {
-    name: string
-    dimensions_title: string
-    default_selection?: string[]
+    title: IndicatorTitleWithFragments
+    defaultSelection?: string[]
     topicTags?: string[]
-    common_indicator_path_prefix?: string
+    // commonIndicatorPathPrefix?: string
     dimensions: Dimension[]
     views: View<IndicatorType>[]
 }
@@ -40,7 +41,7 @@ export interface Choice {
     slug: string
     name: string
     description?: string
-    multi_select?: boolean
+    // multi_select?: boolean
 }
 
 export interface View<IndicatorType> {

From f65f8ca03c3c436a72f3c3963eafe0119ade73e5 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 30 Jul 2024 17:39:52 +0100
Subject: [PATCH 37/65] enhance(multi-dim): add `mixed` mdd, to test faqs

---
 baker/MultiDimBaker.tsx    |  1 +
 public/multi-dim/mixed.yml | 15 +++++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 public/multi-dim/mixed.yml

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index aee72e7fc25..a16adcc050d 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -31,6 +31,7 @@ const readMultiDimConfig = (filename: string) =>
 const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigRaw> = {
     "mdd-causes-of-death": readMultiDimConfig("causes-of-death.yml"),
     "mdd-energy": readMultiDimConfig("energy.yml"),
+    "mdd-mixed": readMultiDimConfig("mixed.yml"),
     "mdd-life-expectancy": readMultiDimConfig("life-expectancy.json"),
     "mdd-plastic": readMultiDimConfig("plastic.json"),
     "mdd-poverty": readMultiDimConfig("poverty.yml"),
diff --git a/public/multi-dim/mixed.yml b/public/multi-dim/mixed.yml
new file mode 100644
index 00000000000..13ee550d026
--- /dev/null
+++ b/public/multi-dim/mixed.yml
@@ -0,0 +1,15 @@
+title:
+    title: Anything goes
+
+dimensions:
+    - slug: view
+      name: View
+      choices:
+          - slug: stunting
+            name: Stunting
+
+views:
+    - dimensions:
+          view: stunting
+      indicators:
+          y: grapher/worldbank_wdi/2024-05-20/wdi/wdi#sh_sta_stnt_zs

From 598cfdd02f6c3078aa91211f9e459e23ddcd3c87 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 31 Jul 2024 16:03:17 +0100
Subject: [PATCH 38/65] refactor: move most datapage FAQ code over to
 `DatapageHelpers`

---
 baker/DatapageHelpers.ts | 73 +++++++++++++++++++++++++++++++++++++++-
 baker/GrapherBaker.tsx   | 65 +++++++----------------------------
 2 files changed, 84 insertions(+), 54 deletions(-)

diff --git a/baker/DatapageHelpers.ts b/baker/DatapageHelpers.ts
index dd91ce95a46..0d142e15d1a 100644
--- a/baker/DatapageHelpers.ts
+++ b/baker/DatapageHelpers.ts
@@ -9,14 +9,21 @@ import {
     getLastUpdatedFromVariable,
     getNextUpdateFromVariable,
     omitUndefinedValues,
+    partition,
 } from "@ourworldindata/utils"
 import {
     getGdocBaseObjectById,
     loadGdocFromGdocBase,
 } from "../db/model/Gdoc/GdocFactory.js"
 import { OwidGoogleAuth } from "../db/OwidGoogleAuth.js"
-import { GrapherInterface, OwidGdocBaseInterface } from "@ourworldindata/types"
+import {
+    EnrichedFaq,
+    FaqDictionary,
+    GrapherInterface,
+    OwidGdocBaseInterface,
+} from "@ourworldindata/types"
 import { KnexReadWriteTransaction } from "../db/db.js"
+import { parseFaqs } from "../db/model/Gdoc/rawToEnriched.js"
 
 export const getDatapageDataV2 = async (
     variableMetadata: OwidVariableWithSource,
@@ -112,3 +119,67 @@ export const getDatapageGdoc = async (
 
     return datapageGdoc
 }
+
+type EnrichedFaqLookupError = {
+    type: "error"
+    error: string
+}
+
+type EnrichedFaqLookupSuccess = {
+    type: "success"
+    enrichedFaq: EnrichedFaq
+}
+
+type EnrichedFaqLookupResult = EnrichedFaqLookupError | EnrichedFaqLookupSuccess
+
+export const fetchAndParseFaqs = async (
+    knex: KnexReadWriteTransaction, // TODO: this transaction is only RW because somewhere inside it we fetch images
+    faqGdocIds: string[],
+    { isPreviewing }: { isPreviewing: boolean }
+) => {
+    const gdocFetchPromises = faqGdocIds.map((gdocId) =>
+        getDatapageGdoc(knex, gdocId, isPreviewing)
+    )
+    const gdocs = await Promise.all(gdocFetchPromises)
+    const gdocIdToFragmentIdToBlock: Record<string, FaqDictionary> = {}
+    gdocs.forEach((gdoc) => {
+        if (!gdoc) return
+        const faqs = parseFaqs(
+            ("faqs" in gdoc.content && gdoc.content?.faqs) ?? [],
+            gdoc.id
+        )
+        gdocIdToFragmentIdToBlock[gdoc.id] = faqs.faqs
+    })
+
+    return gdocIdToFragmentIdToBlock
+}
+
+export const resolveFaqsForVariable = (
+    gdocIdToFragmentIdToBlock: Record<string, FaqDictionary>,
+    variableMetadata: OwidVariableWithSource
+) => {
+    const resolvedFaqResults: EnrichedFaqLookupResult[] = variableMetadata
+        .presentation?.faqs
+        ? variableMetadata.presentation.faqs.map((faq) => {
+              const enrichedFaq = gdocIdToFragmentIdToBlock[faq.gdocId]?.[
+                  faq.fragmentId
+              ] as EnrichedFaq | undefined
+              if (!enrichedFaq)
+                  return {
+                      type: "error",
+                      error: `Could not find fragment ${faq.fragmentId} in gdoc ${faq.gdocId}`,
+                  }
+              return {
+                  type: "success",
+                  enrichedFaq,
+              }
+          })
+        : []
+
+    const [resolvedFaqs, errors] = partition(
+        resolvedFaqResults,
+        (result) => result.type === "success"
+    ) as [EnrichedFaqLookupSuccess[], EnrichedFaqLookupError[]]
+
+    return { resolvedFaqs, errors }
+}
diff --git a/baker/GrapherBaker.tsx b/baker/GrapherBaker.tsx
index b4e78699c43..5cca173e4b0 100644
--- a/baker/GrapherBaker.tsx
+++ b/baker/GrapherBaker.tsx
@@ -11,7 +11,6 @@ import {
     keyBy,
     mergePartialGrapherConfigs,
     compact,
-    partition,
 } from "@ourworldindata/utils"
 import fs from "fs-extra"
 import * as lodash from "lodash"
@@ -37,9 +36,7 @@ import {
     DimensionProperty,
     OwidVariableWithSource,
     OwidChartDimensionInterface,
-    EnrichedFaq,
     FaqEntryData,
-    FaqDictionary,
     ImageMetadata,
     OwidGdocBaseInterface,
 } from "@ourworldindata/types"
@@ -49,11 +46,14 @@ import {
     getMergedGrapherConfigForVariable,
     getVariableOfDatapageIfApplicable,
 } from "../db/model/Variable.js"
-import { getDatapageDataV2, getDatapageGdoc } from "./DatapageHelpers.js"
+import {
+    fetchAndParseFaqs,
+    getDatapageDataV2,
+    resolveFaqsForVariable,
+} from "./DatapageHelpers.js"
 import { Image, getAllImages } from "../db/model/Image.js"
 import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
 
-import { parseFaqs } from "../db/model/Gdoc/rawToEnriched.js"
 import { getShortPageCitation } from "../site/gdocs/utils.js"
 import { getSlugForTopicTag, getTagToSlugMap } from "./GrapherBakingUtils.js"
 import { knexRaw } from "../db/db.js"
@@ -114,18 +114,6 @@ export const renderDataPageOrGrapherPage = async (
     return renderGrapherPage(grapher, knex)
 }
 
-type EnrichedFaqLookupError = {
-    type: "error"
-    error: string
-}
-
-type EnrichedFaqLookupSuccess = {
-    type: "success"
-    enrichedFaq: EnrichedFaq
-}
-
-type EnrichedFaqLookupResult = EnrichedFaqLookupError | EnrichedFaqLookupSuccess
-
 export async function renderDataPageV2(
     {
         variableId,
@@ -158,45 +146,16 @@ export async function renderDataPageV2(
         ? mergePartialGrapherConfigs(grapherConfigForVariable, pageGrapher)
         : pageGrapher ?? {}
 
-    const faqDocs = compact(
+    const faqDocIds = compact(
         uniq(variableMetadata.presentation?.faqs?.map((faq) => faq.gdocId))
     )
-    const gdocFetchPromises = faqDocs.map((gdocId) =>
-        getDatapageGdoc(knex, gdocId, isPreviewing)
+
+    const faqGdocs = await fetchAndParseFaqs(knex, faqDocIds, { isPreviewing })
+
+    const { resolvedFaqs, errors: faqResolveErrors } = resolveFaqsForVariable(
+        faqGdocs,
+        variableMetadata
     )
-    const gdocs = await Promise.all(gdocFetchPromises)
-    const gdocIdToFragmentIdToBlock: Record<string, FaqDictionary> = {}
-    gdocs.forEach((gdoc) => {
-        if (!gdoc) return
-        const faqs = parseFaqs(
-            ("faqs" in gdoc.content && gdoc.content?.faqs) ?? [],
-            gdoc.id
-        )
-        gdocIdToFragmentIdToBlock[gdoc.id] = faqs.faqs
-    })
-
-    const resolvedFaqsResults: EnrichedFaqLookupResult[] = variableMetadata
-        .presentation?.faqs
-        ? variableMetadata.presentation.faqs.map((faq) => {
-              const enrichedFaq = gdocIdToFragmentIdToBlock[faq.gdocId]?.[
-                  faq.fragmentId
-              ] as EnrichedFaq | undefined
-              if (!enrichedFaq)
-                  return {
-                      type: "error",
-                      error: `Could not find fragment ${faq.fragmentId} in gdoc ${faq.gdocId}`,
-                  }
-              return {
-                  type: "success",
-                  enrichedFaq,
-              }
-          })
-        : []
-
-    const [resolvedFaqs, faqResolveErrors] = partition(
-        resolvedFaqsResults,
-        (result) => result.type === "success"
-    ) as [EnrichedFaqLookupSuccess[], EnrichedFaqLookupError[]]
 
     if (faqResolveErrors.length > 0) {
         for (const error of faqResolveErrors) {

From d88bfb4ed369bdc1f1e17b8fb9847453d3589760 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 31 Jul 2024 17:33:39 +0100
Subject: [PATCH 39/65] feat(multi-dim): support faq entries

---
 baker/MultiDimBaker.tsx                       | 129 ++++++++++++++++--
 .../types/src/gdocTypes/Datapage.ts           |  10 ++
 public/multi-dim/mixed.yml                    |   6 +
 site/multiDim/MultiDimDataPage.tsx            |   6 +-
 site/multiDim/MultiDimDataPageConfig.ts       |   6 +-
 site/multiDim/MultiDimDataPageContent.tsx     |  25 +++-
 site/multiDim/MultiDimDataPageTypes.ts        |  32 +++--
 7 files changed, 185 insertions(+), 29 deletions(-)

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index a16adcc050d..537b3b9a7f9 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -3,11 +3,9 @@ import fs from "fs-extra"
 import path from "path"
 import findProjectBaseDir from "../settings/findBaseDir.js"
 import {
-    IndicatorEntryAfterPreProcessing,
     IndicatorEntryBeforePreProcessing,
     MultiDimDataPageConfigPreProcessed,
     MultiDimDataPageConfigRaw,
-    MultiIndicatorEntry,
 } from "../site/multiDim/MultiDimDataPageTypes.js"
 import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 import * as db from "../db/db.js"
@@ -16,7 +14,20 @@ import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
 import React from "react"
 import { BAKED_BASE_URL } from "../settings/clientSettings.js"
 import { getTagToSlugMap } from "./GrapherBakingUtils.js"
-import { getVariableIdsByCatalogPath } from "../db/model/Variable.js"
+import {
+    getVariableIdsByCatalogPath,
+    getVariableMetadata,
+} from "../db/model/Variable.js"
+import pMap from "p-map"
+import {
+    JsonError,
+    keyBy,
+    mapValues,
+    OwidVariableWithSource,
+} from "@ourworldindata/utils"
+import { fetchAndParseFaqs, resolveFaqsForVariable } from "./DatapageHelpers.js"
+import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
+import { FaqEntryKeyedByGdocIdAndFragmentId } from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 
 // TODO Make this dynamic
 const baseDir = findProjectBaseDir(__dirname)
@@ -39,6 +50,7 @@ const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigRaw> = {
 
 interface BakingAdditionalContext {
     tagToSlugMap: Record<string, string>
+    faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
 }
 
 const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
@@ -87,8 +99,10 @@ const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
     }
 
     const resolveField = (
-        indicator: MultiIndicatorEntry<IndicatorEntryBeforePreProcessing>
-    ): MultiIndicatorEntry<IndicatorEntryAfterPreProcessing> => {
+        indicator:
+            | IndicatorEntryBeforePreProcessing
+            | IndicatorEntryBeforePreProcessing[]
+    ) => {
         if (Array.isArray(indicator)) {
             return indicator.map(resolveSingleField)
         } else {
@@ -104,24 +118,120 @@ const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
                     resolveField(value),
                 ])
             ) as any
+
+        if (!view.indicators?.y) view.indicators = { ...view.indicators, y: [] }
+
+        if (!Array.isArray(view.indicators.y))
+            view.indicators.y = [view.indicators.y]
     }
 
     return rawConfig as MultiDimDataPageConfigPreProcessed
 }
 
+const getRelevantVariableIds = (config: MultiDimDataPageConfigPreProcessed) => {
+    // A "relevant" variable id is the first y indicator of each view
+    const allIndicatorIds = config.views
+        .map((view) => view.indicators.y?.[0])
+        .filter((id) => id !== undefined)
+
+    return new Set(allIndicatorIds)
+}
+
+const getRelevantVariableMetadata = async (
+    config: MultiDimDataPageConfigPreProcessed
+) => {
+    const variableIds = getRelevantVariableIds(config)
+    const metadata = await pMap(
+        variableIds,
+        async (id) => {
+            return getVariableMetadata(id)
+        },
+        { concurrency: 10 }
+    )
+
+    return keyBy(metadata, (m) => m.id)
+}
+
+const getFaqEntries = async (
+    knex: db.KnexReadWriteTransaction, // TODO: this transaction is only RW because somewhere inside it we fetch images
+    config: MultiDimDataPageConfigPreProcessed,
+    variableMetadataDict: Record<number, OwidVariableWithSource>
+): Promise<FaqEntryKeyedByGdocIdAndFragmentId> => {
+    const faqDocIds = new Set(
+        Object.values(variableMetadataDict)
+            .flatMap((metadata) =>
+                metadata.presentation?.faqs?.map((faq) => faq.gdocId)
+            )
+            .filter((id) => id !== undefined)
+    )
+
+    const faqGdocs = await fetchAndParseFaqs(knex, Array.from(faqDocIds), {
+        isPreviewing: false,
+    })
+
+    Object.values(variableMetadataDict).forEach((metadata) => {
+        const { errors: faqResolveErrors } = resolveFaqsForVariable(
+            faqGdocs,
+            metadata
+        )
+
+        if (faqResolveErrors.length > 0) {
+            for (const error of faqResolveErrors) {
+                void logErrorAndMaybeSendToBugsnag(
+                    new JsonError(
+                        `MDD baking error for page "${config.title}" in finding FAQs for variable ${metadata.id}: ${error.error}`
+                    )
+                )
+            }
+        }
+    })
+
+    const faqContentsByGdocIdAndFragmentId = Object.values(
+        variableMetadataDict
+    ).reduce(
+        (acc, metadata) => {
+            metadata.presentation?.faqs?.forEach((faq) => {
+                if (!faq.gdocId || !faq.fragmentId) return
+                if (!acc[faq.gdocId]) acc[faq.gdocId] = {}
+                if (!acc[faq.gdocId][faq.fragmentId]) {
+                    const faqContent =
+                        faqGdocs[faq.gdocId]?.[faq.fragmentId]?.content
+                    if (faqContent) acc[faq.gdocId][faq.fragmentId] = faqContent
+                }
+            })
+            return acc
+        },
+        {} as FaqEntryKeyedByGdocIdAndFragmentId["faqs"]
+    )
+
+    return {
+        faqs: faqContentsByGdocIdAndFragmentId,
+    }
+}
+
 export const renderMultiDimDataPageBySlug = async (
-    knex: db.KnexReadonlyTransaction,
+    knex: db.KnexReadWriteTransaction,
     slug: string
 ) => {
     const rawConfig = MULTI_DIM_SITES_BY_SLUG[slug]
     if (!rawConfig) throw new Error(`No multi-dim site found for slug: ${slug}`)
 
     const tagToSlugMap = await getTagToSlugMap(knex)
-    const bakingContext = { tagToSlugMap }
 
     const preProcessedConfig =
         await resolveMultiDimDataPageCatalogPathsToIndicatorIds(knex, rawConfig)
     const config = MultiDimDataPageConfig.fromObject(preProcessedConfig)
+
+    const variableMetaDict =
+        await getRelevantVariableMetadata(preProcessedConfig)
+    const faqEntries = await getFaqEntries(
+        knex,
+        preProcessedConfig,
+        variableMetaDict
+    )
+
+    const bakingContext = { tagToSlugMap, faqEntries }
+
     return renderMultiDimDataPage(config, bakingContext)
 }
 
@@ -134,12 +244,13 @@ export const renderMultiDimDataPage = async (
             baseUrl={BAKED_BASE_URL}
             config={config}
             tagToSlugMap={bakingContext?.tagToSlugMap}
+            faqEntries={bakingContext?.faqEntries}
         />
     )
 }
 
 export const bakeMultiDimDataPage = async (
-    knex: db.KnexReadonlyTransaction,
+    knex: db.KnexReadWriteTransaction,
     bakedSiteDir: string,
     slug: string
 ) => {
@@ -149,7 +260,7 @@ export const bakeMultiDimDataPage = async (
 }
 
 export const bakeAllMultiDimDataPages = async (
-    knex: db.KnexReadonlyTransaction,
+    knex: db.KnexReadWriteTransaction,
     bakedSiteDir: string
 ) => {
     for (const slug of Object.keys(MULTI_DIM_SITES_BY_SLUG)) {
diff --git a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
index d9b4e66bf9c..0497452d4c8 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
@@ -9,6 +9,7 @@ import { RelatedChart } from "../grapherTypes/GrapherTypes.js"
 import { Static, Type } from "@sinclair/typebox"
 import { OwidEnrichedGdocBlock } from "./ArchieMlComponents.js"
 import { ImageMetadata } from "./Image.js"
+import { EnrichedFaq } from "./Gdoc.js"
 
 export interface FaqLink {
     gdocId: string
@@ -127,6 +128,10 @@ export type FaqEntryData = {
     faqs: OwidEnrichedGdocBlock[]
 }
 
+export type FaqEntryKeyedByGdocIdAndFragmentId = {
+    faqs: Record<string, Record<string, OwidEnrichedGdocBlock[]>>
+}
+
 export interface DataPageV2ContentFields {
     datapageData: DataPageDataV2
     faqEntries: FaqEntryData | undefined
@@ -136,6 +141,11 @@ export interface DataPageV2ContentFields {
     tagToSlugMap: Record<string, string>
     imageMetadata: Record<string, ImageMetadata>
 }
+
+export type MultiDimDataPageContentFields = DataPageV2ContentFields & {
+    faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
+}
+
 export interface DisplaySource {
     label: string
     description?: string
diff --git a/public/multi-dim/mixed.yml b/public/multi-dim/mixed.yml
index 13ee550d026..501f1e56f29 100644
--- a/public/multi-dim/mixed.yml
+++ b/public/multi-dim/mixed.yml
@@ -7,9 +7,15 @@ dimensions:
       choices:
           - slug: stunting
             name: Stunting
+          - slug: poverty
+            name: Poverty
 
 views:
     - dimensions:
           view: stunting
       indicators:
           y: grapher/worldbank_wdi/2024-05-20/wdi/wdi#sh_sta_stnt_zs
+    - dimensions:
+          view: poverty
+      indicators:
+          y: 819727
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index 9c2aaf830a8..52bc8272262 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -10,13 +10,15 @@ import {
     pick,
     serializeJSONForHTML,
 } from "@ourworldindata/utils"
+import { FaqEntryKeyedByGdocIdAndFragmentId } from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 
 export const MultiDimDataPage = (props: {
     baseUrl: string
     config: MultiDimDataPageConfig
     tagToSlugMap?: Record<string, string>
+    faqEntries?: FaqEntryKeyedByGdocIdAndFragmentId
 }) => {
-    const { config } = props
+    const { config, faqEntries } = props
 
     const canonicalUrl = "" // TODO
     const baseUrl = props.baseUrl // TODO
@@ -75,9 +77,9 @@ export const MultiDimDataPage = (props: {
                             __html: `window._OWID_DATAPAGEV2_PROPS = ${JSON.stringify(
                                 {
                                     // datapageData,
-                                    // faqEntries,
                                     canonicalUrl,
                                     tagToSlugMap: minimalTagToSlugMap,
+                                    faqEntries,
                                     // imageMetadata,
                                 }
                             )}`,
diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
index 408fa8f4790..1106fff2ed2 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/site/multiDim/MultiDimDataPageConfig.ts
@@ -2,7 +2,7 @@ import {
     Choice,
     ChoicesEnriched,
     DimensionEnriched,
-    IndicatorEntryAfterPreProcessing,
+    IndicatorsAfterPreProcessing,
     MultiDimDataPageConfigPreProcessed,
     View,
 } from "./MultiDimDataPageTypes.js"
@@ -43,7 +43,7 @@ export class MultiDimDataPageConfig {
 
     filterViewsByDimensions(
         dimensions: Record<string, string>
-    ): View<IndicatorEntryAfterPreProcessing>[] {
+    ): View<IndicatorsAfterPreProcessing>[] {
         return this.config.views.filter((view) => {
             for (const [dimensionSlug, choiceSlug] of Object.entries(
                 dimensions
@@ -58,7 +58,7 @@ export class MultiDimDataPageConfig {
     // if more than one matching views were found
     findViewByDimensions(
         dimensions: Record<string, string>
-    ): View<IndicatorEntryAfterPreProcessing> | undefined {
+    ): View<IndicatorsAfterPreProcessing> | undefined {
         const matchingViews = this.filterViewsByDimensions(dimensions)
         if (matchingViews.length === 0) return undefined
         if (matchingViews.length > 1) {
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index d326eb464db..a3480bad253 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -27,6 +27,7 @@ import {
     QueryParams,
     setWindowQueryStr,
     getWindowQueryStr,
+    compact,
 } from "@ourworldindata/utils"
 import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
@@ -44,6 +45,10 @@ import {
 import { reaction } from "mobx"
 import { useElementBounds } from "../hooks.js"
 import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
+import {
+    FaqEntryKeyedByGdocIdAndFragmentId,
+    MultiDimDataPageContentFields,
+} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 declare global {
     interface Window {
         _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigPreProcessed
@@ -119,7 +124,7 @@ const getDatapageDataV2 = async (
             titleVariant: variableMetadata.presentation?.titleVariant,
             topicTagsLinks: variableMetadata.presentation?.topicTagsLinks ?? [],
             attributions: getAttributionFragmentsFromVariable(variableMetadata),
-            faqs: [],
+            faqs: variableMetadata.presentation?.faqs ?? [],
             descriptionKey: variableMetadata.descriptionKey ?? [],
             descriptionProcessing: variableMetadata.descriptionProcessing,
             owidProcessingLevel: variableMetadata.processingLevel,
@@ -159,6 +164,7 @@ export const MultiDimDataPageContent = ({
 }: DataPageV2ContentFields & {
     config: MultiDimDataPageConfig
     grapherConfig?: GrapherInterface
+    faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
     imageMetadata: Record<string, ImageMetadata>
     initialQueryStr?: string
 }) => {
@@ -322,6 +328,16 @@ export const MultiDimDataPageContent = ({
             : "related-data__category--columns span-cols-8 span-lg-cols-12"
     } `
 
+    const faqEntriesForView = useMemo(() => {
+        return compact(
+            datapageDataFromVar?.faqs?.flatMap(
+                (faq) => faqEntries.faqs?.[faq.gdocId]?.[faq.fragmentId]
+            )
+        )
+    }, [datapageDataFromVar?.faqs, faqEntries])
+
+    console.log(faqEntriesForView)
+
     return (
         <div className="DataPageContent MultiDimDataPageContent">
             <div className="bg-blue-10">
@@ -373,7 +389,7 @@ export const MultiDimDataPageContent = ({
                     {datapageDataFromVar && (
                         <AboutThisData
                             datapageData={datapageDataFromVar}
-                            hasFaq={!!faqEntries?.faqs.length}
+                            hasFaq={!!faqEntriesForView?.length}
                         />
                     )}
                 </div>
@@ -514,7 +530,7 @@ export const MultiDimDataPageContent = ({
                     descriptionProcessing={
                         datapageDataFromVar.descriptionProcessing
                     }
-                    faqEntries={faqEntries}
+                    faqEntries={{ faqs: faqEntriesForView }}
                     origins={datapageDataFromVar.origins}
                     owidProcessingLevel={
                         datapageDataFromVar.owidProcessingLevel
@@ -531,7 +547,8 @@ export const MultiDimDataPageContent = ({
 
 export const hydrateMultiDimDataPageContent = (isPreviewing?: boolean) => {
     const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
-    const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS
+    const props: MultiDimDataPageContentFields =
+        window._OWID_DATAPAGEV2_PROPS as MultiDimDataPageContentFields
     const grapherConfig = window._OWID_GRAPHER_CONFIG
     const initialQueryStr = getWindowQueryStr()
     const config = MultiDimDataPageConfig.fromObject(
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index 5cb67721b46..519bf41a98e 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -3,9 +3,10 @@ import { IndicatorTitleWithFragments } from "@ourworldindata/types"
 // Indicator ID, catalog path, or maybe an array of those
 export type IndicatorEntryBeforePreProcessing = string | number | undefined
 export type IndicatorEntryAfterPreProcessing = number | undefined // catalog paths have been resolved to indicator IDs
-export type MultiIndicatorEntry<IndicatorType> = IndicatorType | IndicatorType[]
 
-interface MultiDimDataPageConfigType<IndicatorType> {
+interface MultiDimDataPageConfigType<
+    IndicatorType extends Record<string, any>,
+> {
     title: IndicatorTitleWithFragments
     defaultSelection?: string[]
     topicTags?: string[]
@@ -15,10 +16,10 @@ interface MultiDimDataPageConfigType<IndicatorType> {
 }
 
 export type MultiDimDataPageConfigRaw =
-    MultiDimDataPageConfigType<IndicatorEntryBeforePreProcessing>
+    MultiDimDataPageConfigType<IndicatorsBeforePreProcessing>
 
 export type MultiDimDataPageConfigPreProcessed =
-    MultiDimDataPageConfigType<IndicatorEntryAfterPreProcessing>
+    MultiDimDataPageConfigType<IndicatorsAfterPreProcessing>
 
 export interface Dimension {
     slug: string
@@ -44,14 +45,23 @@ export interface Choice {
     // multi_select?: boolean
 }
 
-export interface View<IndicatorType> {
+export interface IndicatorsBeforePreProcessing {
+    y: IndicatorEntryBeforePreProcessing | IndicatorEntryBeforePreProcessing[]
+    x?: IndicatorEntryBeforePreProcessing
+    size?: IndicatorEntryBeforePreProcessing
+    color?: IndicatorEntryBeforePreProcessing
+}
+
+export interface IndicatorsAfterPreProcessing {
+    y: IndicatorEntryAfterPreProcessing[]
+    x?: IndicatorEntryAfterPreProcessing
+    size?: IndicatorEntryAfterPreProcessing
+    color?: IndicatorEntryAfterPreProcessing
+}
+
+export interface View<IndicatorsType extends Record<string, any>> {
     dimensions: Record<string, string> // Keys: dimension slugs, values: choice slugs
-    indicators: {
-        y: MultiIndicatorEntry<IndicatorType>
-        x?: IndicatorType
-        size?: IndicatorType
-        color?: IndicatorType
-    }
+    indicators: IndicatorsType
     config?: Config
 }
 

From 8a39dd2c9ffea99264190356709113a497e2c833 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 5 Aug 2024 17:19:38 +0100
Subject: [PATCH 40/65] chore: fix broken mdd pages

---
 public/multi-dim/life-expectancy.json | 24 ++++++++++++------------
 public/multi-dim/plastic.json         |  6 +++---
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/public/multi-dim/life-expectancy.json b/public/multi-dim/life-expectancy.json
index 15cff913b74..130cfa5f282 100644
--- a/public/multi-dim/life-expectancy.json
+++ b/public/multi-dim/life-expectancy.json
@@ -75,7 +75,7 @@
     "views": [
         {
             "dimensions": { "age": "0", "sex": "both", "projection": "none" },
-            "indicators": { "y": "520369" },
+            "indicators": { "y": 520369 },
             "config": {
                 "title": "Life expectancy at birth",
                 "hasMapTab": true
@@ -83,7 +83,7 @@
         },
         {
             "dimensions": { "age": "0", "sex": "both", "projection": "medium" },
-            "indicators": { "y": "520370" },
+            "indicators": { "y": 520370 },
             "config": {
                 "title": "Life expectancy at birth, medium projection",
                 "hasMapTab": true
@@ -92,7 +92,7 @@
 
         {
             "dimensions": { "age": "0", "sex": "male", "projection": "none" },
-            "indicators": { "y": "520349" },
+            "indicators": { "y": 520349 },
             "config": {
                 "title": "Male life expectancy at birth",
                 "hasMapTab": true
@@ -100,7 +100,7 @@
         },
         {
             "dimensions": { "age": "0", "sex": "male", "projection": "medium" },
-            "indicators": { "y": "520350" },
+            "indicators": { "y": 520350 },
             "config": {
                 "title": "Male life expectancy at birth, medium projection",
                 "hasMapTab": true
@@ -109,7 +109,7 @@
 
         {
             "dimensions": { "age": "0", "sex": "female", "projection": "none" },
-            "indicators": { "y": "520329" },
+            "indicators": { "y": 520329 },
             "config": {
                 "title": "Female life expectancy at birth",
                 "hasMapTab": true
@@ -121,7 +121,7 @@
                 "sex": "female",
                 "projection": "medium"
             },
-            "indicators": { "y": "520330" },
+            "indicators": { "y": 520330 },
             "config": {
                 "title": "Female life expectancy at birth, medium projection",
                 "hasMapTab": true
@@ -130,7 +130,7 @@
 
         {
             "dimensions": { "age": "15", "sex": "both", "projection": "none" },
-            "indicators": { "y": "520379" },
+            "indicators": { "y": 520379 },
             "config": {
                 "title": "Life expectancy at age 15",
                 "hasMapTab": true
@@ -142,7 +142,7 @@
                 "sex": "both",
                 "projection": "medium"
             },
-            "indicators": { "y": "520380" },
+            "indicators": { "y": 520380 },
             "config": {
                 "title": "Life expectancy at age 15, medium projection",
                 "hasMapTab": true
@@ -151,7 +151,7 @@
 
         {
             "dimensions": { "age": "15", "sex": "male", "projection": "none" },
-            "indicators": { "y": "520359" },
+            "indicators": { "y": 520359 },
             "config": {
                 "title": "Male life expectancy at age 15",
                 "hasMapTab": true
@@ -163,7 +163,7 @@
                 "sex": "male",
                 "projection": "medium"
             },
-            "indicators": { "y": "520360" },
+            "indicators": { "y": 520360 },
             "config": {
                 "title": "Male life expectancy at age 15, medium projection",
                 "hasMapTab": true
@@ -176,7 +176,7 @@
                 "sex": "female",
                 "projection": "none"
             },
-            "indicators": { "y": "520338" },
+            "indicators": { "y": 520338 },
             "config": {
                 "title": "Female life expectancy at age 15",
                 "hasMapTab": true
@@ -188,7 +188,7 @@
                 "sex": "female",
                 "projection": "medium"
             },
-            "indicators": { "y": "520340" },
+            "indicators": { "y": 520340 },
             "config": {
                 "title": "Female life expectancy at age 15, medium projection",
                 "hasMapTab": true
diff --git a/public/multi-dim/plastic.json b/public/multi-dim/plastic.json
index 0f23b5d4714..a230f1e3411 100644
--- a/public/multi-dim/plastic.json
+++ b/public/multi-dim/plastic.json
@@ -65,7 +65,7 @@
     "views": [
         {
             "dimensions": { "metric": "waste_gen", "measurement": "total" },
-            "indicators": { "y": "97679" },
+            "indicators": { "y": 97679 },
             "config": {
                 "title": "Plastic waste generation",
                 "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
@@ -76,7 +76,7 @@
                 "metric": "waste_gen",
                 "measurement": "per_capita"
             },
-            "indicators": { "y": "65358" },
+            "indicators": { "y": 65358 },
             "config": {
                 "title": "Plastic waste generation per capita",
                 "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."
@@ -87,7 +87,7 @@
                 "metric": "waste_gen",
                 "measurement": "share_of_world"
             },
-            "indicators": { "y": "146456" },
+            "indicators": { "y": 146456 },
             "config": {
                 "title": "Plastic waste generation",
                 "subtitle": "This measures total plastic waste generation prior to management and therefore does not represent the quantity of plastic at risk of polluting waterways, rivers and the ocean environment."

From b3403f3e34a81f0f2de34f39bd84625b6c0fd7dd Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 5 Aug 2024 18:05:03 +0100
Subject: [PATCH 41/65] enhance(multi-dim): support `primaryTopic`

---
 baker/DatapageHelpers.ts                      | 38 +++++++++++++++++++
 baker/GrapherBaker.tsx                        | 33 ++--------------
 baker/MultiDimBaker.tsx                       | 25 ++++++++----
 .../types/src/gdocTypes/Datapage.ts           |  2 +-
 site/multiDim/MultiDimDataPage.tsx            |  7 +++-
 site/multiDim/MultiDimDataPageContent.tsx     |  5 ++-
 6 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/baker/DatapageHelpers.ts b/baker/DatapageHelpers.ts
index 0d142e15d1a..411bb60ecde 100644
--- a/baker/DatapageHelpers.ts
+++ b/baker/DatapageHelpers.ts
@@ -13,6 +13,7 @@ import {
 } from "@ourworldindata/utils"
 import {
     getGdocBaseObjectById,
+    getPublishedGdocBaseObjectBySlug,
     loadGdocFromGdocBase,
 } from "../db/model/Gdoc/GdocFactory.js"
 import { OwidGoogleAuth } from "../db/OwidGoogleAuth.js"
@@ -24,6 +25,9 @@ import {
 } from "@ourworldindata/types"
 import { KnexReadWriteTransaction } from "../db/db.js"
 import { parseFaqs } from "../db/model/Gdoc/rawToEnriched.js"
+import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
+import { getSlugForTopicTag } from "./GrapherBakingUtils.js"
+import { getShortPageCitation } from "../site/gdocs/utils.js"
 
 export const getDatapageDataV2 = async (
     variableMetadata: OwidVariableWithSource,
@@ -183,3 +187,37 @@ export const resolveFaqsForVariable = (
 
     return { resolvedFaqs, errors }
 }
+
+export const getPrimaryTopic = async (
+    knex: KnexReadWriteTransaction,
+    firstTopicTag: string | undefined
+) => {
+    if (!firstTopicTag) return undefined
+
+    let topicSlug: string
+    try {
+        topicSlug = await getSlugForTopicTag(knex, firstTopicTag)
+    } catch (e) {
+        await logErrorAndMaybeSendToBugsnag(
+            `Data page is using "${firstTopicTag}" as its primary tag, which we are unable to resolve to a tag in the grapher DB`
+        )
+        return undefined
+    }
+
+    if (topicSlug) {
+        const gdoc = await getPublishedGdocBaseObjectBySlug(
+            knex,
+            topicSlug,
+            true
+        )
+        if (gdoc) {
+            const citation = getShortPageCitation(
+                gdoc.content.authors,
+                gdoc.content.title ?? "",
+                gdoc?.publishedAt
+            )
+            return { topicTag: firstTopicTag, citation }
+        }
+    }
+    return undefined
+}
diff --git a/baker/GrapherBaker.tsx b/baker/GrapherBaker.tsx
index 5cca173e4b0..211db0aab7e 100644
--- a/baker/GrapherBaker.tsx
+++ b/baker/GrapherBaker.tsx
@@ -38,7 +38,6 @@ import {
     OwidChartDimensionInterface,
     FaqEntryData,
     ImageMetadata,
-    OwidGdocBaseInterface,
 } from "@ourworldindata/types"
 import ProgressBar from "progress"
 import {
@@ -49,17 +48,16 @@ import {
 import {
     fetchAndParseFaqs,
     getDatapageDataV2,
+    getPrimaryTopic,
     resolveFaqsForVariable,
 } from "./DatapageHelpers.js"
 import { Image, getAllImages } from "../db/model/Image.js"
 import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
 
-import { getShortPageCitation } from "../site/gdocs/utils.js"
-import { getSlugForTopicTag, getTagToSlugMap } from "./GrapherBakingUtils.js"
+import { getTagToSlugMap } from "./GrapherBakingUtils.js"
 import { knexRaw } from "../db/db.js"
 import { getRelatedChartsForVariable } from "../db/model/Chart.js"
 import pMap from "p-map"
-import { getPublishedGdocBaseObjectBySlug } from "../db/model/Gdoc/GdocFactory.js"
 
 const renderDatapageIfApplicable = async (
     grapher: GrapherInterface,
@@ -193,32 +191,7 @@ export async function renderDataPageV2(
     )
 
     const firstTopicTag = datapageData.topicTagsLinks?.[0]
-
-    let slug = ""
-    if (firstTopicTag) {
-        try {
-            slug = await getSlugForTopicTag(knex, firstTopicTag)
-        } catch (error) {
-            await logErrorAndMaybeSendToBugsnag(
-                `Datapage with variableId "${variableId}" and title "${datapageData.title.title}" is using "${firstTopicTag}" as its primary tag, which we are unable to resolve to a tag in the grapher DB`
-            )
-        }
-        let gdoc: OwidGdocBaseInterface | undefined = undefined
-        if (slug) {
-            gdoc = await getPublishedGdocBaseObjectBySlug(knex, slug, true)
-        }
-        if (gdoc) {
-            const citation = getShortPageCitation(
-                gdoc.content.authors,
-                gdoc.content.title ?? "",
-                gdoc?.publishedAt
-            )
-            datapageData.primaryTopic = {
-                topicTag: firstTopicTag,
-                citation,
-            }
-        }
-    }
+    datapageData.primaryTopic = await getPrimaryTopic(knex, firstTopicTag)
 
     // Get the charts this variable is being used in (aka "related charts")
     // and exclude the current chart to avoid duplicates
diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index 537b3b9a7f9..f334d0f9983 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -19,15 +19,17 @@ import {
     getVariableMetadata,
 } from "../db/model/Variable.js"
 import pMap from "p-map"
+import { JsonError, keyBy, OwidVariableWithSource } from "@ourworldindata/utils"
 import {
-    JsonError,
-    keyBy,
-    mapValues,
-    OwidVariableWithSource,
-} from "@ourworldindata/utils"
-import { fetchAndParseFaqs, resolveFaqsForVariable } from "./DatapageHelpers.js"
+    fetchAndParseFaqs,
+    getPrimaryTopic,
+    resolveFaqsForVariable,
+} from "./DatapageHelpers.js"
 import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
-import { FaqEntryKeyedByGdocIdAndFragmentId } from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
+import {
+    FaqEntryKeyedByGdocIdAndFragmentId,
+    PrimaryTopic,
+} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 
 // TODO Make this dynamic
 const baseDir = findProjectBaseDir(__dirname)
@@ -51,6 +53,7 @@ const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigRaw> = {
 interface BakingAdditionalContext {
     tagToSlugMap: Record<string, string>
     faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
+    primaryTopic: PrimaryTopic | undefined
 }
 
 const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
@@ -230,7 +233,12 @@ export const renderMultiDimDataPageBySlug = async (
         variableMetaDict
     )
 
-    const bakingContext = { tagToSlugMap, faqEntries }
+    const primaryTopic = await getPrimaryTopic(
+        knex,
+        preProcessedConfig.topicTags?.[0]
+    )
+
+    const bakingContext = { tagToSlugMap, faqEntries, primaryTopic }
 
     return renderMultiDimDataPage(config, bakingContext)
 }
@@ -245,6 +253,7 @@ export const renderMultiDimDataPage = async (
             config={config}
             tagToSlugMap={bakingContext?.tagToSlugMap}
             faqEntries={bakingContext?.faqEntries}
+            primaryTopic={bakingContext?.primaryTopic}
         />
     )
 }
diff --git a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
index 0497452d4c8..76693b72f2a 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
@@ -9,7 +9,6 @@ import { RelatedChart } from "../grapherTypes/GrapherTypes.js"
 import { Static, Type } from "@sinclair/typebox"
 import { OwidEnrichedGdocBlock } from "./ArchieMlComponents.js"
 import { ImageMetadata } from "./Image.js"
-import { EnrichedFaq } from "./Gdoc.js"
 
 export interface FaqLink {
     gdocId: string
@@ -144,6 +143,7 @@ export interface DataPageV2ContentFields {
 
 export type MultiDimDataPageContentFields = DataPageV2ContentFields & {
     faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
+    primaryTopic?: PrimaryTopic | undefined
 }
 
 export interface DisplaySource {
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index 52bc8272262..d37d08d437a 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -10,13 +10,17 @@ import {
     pick,
     serializeJSONForHTML,
 } from "@ourworldindata/utils"
-import { FaqEntryKeyedByGdocIdAndFragmentId } from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
+import {
+    FaqEntryKeyedByGdocIdAndFragmentId,
+    PrimaryTopic,
+} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 
 export const MultiDimDataPage = (props: {
     baseUrl: string
     config: MultiDimDataPageConfig
     tagToSlugMap?: Record<string, string>
     faqEntries?: FaqEntryKeyedByGdocIdAndFragmentId
+    primaryTopic?: PrimaryTopic | undefined
 }) => {
     const { config, faqEntries } = props
 
@@ -80,6 +84,7 @@ export const MultiDimDataPage = (props: {
                                     canonicalUrl,
                                     tagToSlugMap: minimalTagToSlugMap,
                                     faqEntries,
+                                    primaryTopic: props.primaryTopic,
                                     // imageMetadata,
                                 }
                             )}`,
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index a3480bad253..de708a4159b 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -48,6 +48,7 @@ import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
 import {
     FaqEntryKeyedByGdocIdAndFragmentId,
     MultiDimDataPageContentFields,
+    PrimaryTopic,
 } from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 declare global {
     interface Window {
@@ -157,6 +158,7 @@ export const MultiDimDataPageContent = ({
     grapherConfig,
     isPreviewing = false,
     faqEntries,
+    primaryTopic,
     canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
     tagToSlugMap,
     imageMetadata,
@@ -167,6 +169,7 @@ export const MultiDimDataPageContent = ({
     faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
     imageMetadata: Record<string, ImageMetadata>
     initialQueryStr?: string
+    primaryTopic?: PrimaryTopic | undefined
 }) => {
     const grapherFigureRef = useRef<HTMLDivElement>(null)
 
@@ -535,7 +538,7 @@ export const MultiDimDataPageContent = ({
                     owidProcessingLevel={
                         datapageDataFromVar.owidProcessingLevel
                     }
-                    primaryTopic={datapageDataFromVar.primaryTopic}
+                    primaryTopic={primaryTopic}
                     source={datapageDataFromVar.source}
                     title={datapageDataFromVar.title}
                     titleVariant={datapageDataFromVar.titleVariant}

From 6c31702db44d51a1e642ee88bfd542dfcd158c9a Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 7 Aug 2024 14:53:03 +0100
Subject: [PATCH 42/65] fix: fix tsc build

---
 site/multiDim/MultiDimDataPageConfig.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageConfig.test.ts b/site/multiDim/MultiDimDataPageConfig.test.ts
index 9f01273015a..5c6ba85cc20 100644
--- a/site/multiDim/MultiDimDataPageConfig.test.ts
+++ b/site/multiDim/MultiDimDataPageConfig.test.ts
@@ -4,8 +4,8 @@ import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 import YAML from "yaml"
 
 it("fromObject", () => {
-    const config = MultiDimDataPageConfig.fromObject({ name: "Test" } as any)
-    expect(config.config.name).toBe("Test")
+    const config = MultiDimDataPageConfig.fromObject({ title: "Test" } as any)
+    expect(config.config.title).toBe("Test")
 })
 
 describe("methods", () => {

From 655bcb4578db6799dbe63f6071818bf77237f32b Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 7 Aug 2024 15:00:00 +0100
Subject: [PATCH 43/65] fix: fix tsc build

---
 baker/SiteBaker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
index 76a424081ff..4194604377d 100644
--- a/baker/SiteBaker.tsx
+++ b/baker/SiteBaker.tsx
@@ -754,7 +754,7 @@ export class SiteBaker {
         this.progressBar.tick({ name: "✅ validated grapher dods" })
     }
 
-    private async bakeMultiDimPages(knex: db.KnexReadonlyTransaction) {
+    private async bakeMultiDimPages(knex: db.KnexReadWriteTransaction) {
         if (!this.bakeSteps.has("multiDimPages")) return
 
         await bakeAllMultiDimDataPages(knex, this.bakedSiteDir)

From fe7ee8c7df87c5fb1bbcdf19f0306a9bea5f6bc2 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Fri, 9 Aug 2024 13:13:26 +0100
Subject: [PATCH 44/65] style: fix eslint warnings

---
 adminSiteServer/mockSiteRouter.tsx        |  2 +-
 baker/siteRenderers.tsx                   |  2 --
 site/multiDim/MultiDimDataPageContent.tsx | 15 ++-------------
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.tsx
index d0af0cdc9d8..eb1d6883954 100644
--- a/adminSiteServer/mockSiteRouter.tsx
+++ b/adminSiteServer/mockSiteRouter.tsx
@@ -42,7 +42,7 @@ import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.
 import { grapherToSVG } from "../baker/GrapherImageBaker.js"
 import { getVariableData, getVariableMetadata } from "../db/model/Variable.js"
 import { MultiEmbedderTestPage } from "../site/multiembedder/MultiEmbedderTestPage.js"
-import { JsonError, noop } from "@ourworldindata/utils"
+import { JsonError } from "@ourworldindata/utils"
 import { GIT_CMS_DIR } from "../gitCms/GitCmsConstants.js"
 import { EXPLORERS_ROUTE_FOLDER } from "../explorer/ExplorerConstants.js"
 import { getExplorerRedirectForPath } from "../explorerAdminServer/ExplorerRedirects.js"
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index 063326ec055..547360a807d 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -7,7 +7,6 @@ import { SearchPage } from "../site/search/SearchPage.js"
 import { NotFoundPage } from "../site/NotFoundPage.js"
 import { DonatePage } from "../site/DonatePage.js"
 import { ThankYouPage } from "../site/ThankYouPage.js"
-import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
 import OwidGdocPage from "../site/gdocs/OwidGdocPage.js"
 import React from "react"
 import ReactDOMServer from "react-dom/server.js"
@@ -91,7 +90,6 @@ import { transformExplorerProgramToResolveCatalogPaths } from "./ExplorerBaker.j
 import { AttachmentsContext } from "../site/gdocs/OwidGdoc.js"
 import AtomArticleBlocks from "../site/gdocs/components/AtomArticleBlocks.js"
 import { GdocDataInsight } from "../db/model/Gdoc/GdocDataInsight.js"
-import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 
 export const renderToHtmlPage = (element: any) =>
     `<!doctype html>${ReactDOMServer.renderToStaticMarkup(element)}`
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index de708a4159b..0f43c380ce7 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -57,15 +57,6 @@ declare global {
 }
 export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root"
 
-// https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
-function usePrevious<T>(value: T) {
-    const ref = useRef<T>()
-    useEffect(() => {
-        ref.current = value
-    }, [value])
-    return ref.current
-}
-
 // We still have topic pages on WordPress, whose featured images are specified as absolute URLs which this component handles
 // Once we've migrated all WP topic pages to gdocs, we'll be able to remove this component and just use <Image />
 const DatapageResearchThumbnail = ({
@@ -156,12 +147,12 @@ export const MultiDimDataPageContent = ({
     // _datapageData,
     config,
     grapherConfig,
-    isPreviewing = false,
+    // isPreviewing = false,
     faqEntries,
     primaryTopic,
     canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
     tagToSlugMap,
-    imageMetadata,
+    // imageMetadata,
     initialQueryStr,
 }: DataPageV2ContentFields & {
     config: MultiDimDataPageConfig
@@ -339,8 +330,6 @@ export const MultiDimDataPageContent = ({
         )
     }, [datapageDataFromVar?.faqs, faqEntries])
 
-    console.log(faqEntriesForView)
-
     return (
         <div className="DataPageContent MultiDimDataPageContent">
             <div className="bg-blue-10">

From e4cc4431bed590620ce1b3bbdf798348edfa28fd Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Fri, 9 Aug 2024 13:25:29 +0100
Subject: [PATCH 45/65] cleanup

---
 site/multiDim/config.json | 75 ---------------------------------------
 site/multiDim/config.yml  | 58 ------------------------------
 site/tsconfig.json        |  1 -
 3 files changed, 134 deletions(-)
 delete mode 100644 site/multiDim/config.json
 delete mode 100644 site/multiDim/config.yml

diff --git a/site/multiDim/config.json b/site/multiDim/config.json
deleted file mode 100644
index 0d1bab40e77..00000000000
--- a/site/multiDim/config.json
+++ /dev/null
@@ -1,75 +0,0 @@
-{
-    "name": "CO₂ emissions",
-    "dimensions_title": "by fuel type and sector",
-    "common_indicator_path_prefix": "gcp/2024/co2_and_ghg_emissions/",
-    "dimensions": [
-        {
-            "slug": "fuel_type",
-            "name": "Fuel type",
-            "description": "The fuel where these emissions stem from.",
-            "multi_select": true,
-            "choices": [
-                {
-                    "slug": "gas",
-                    "name": "Natural gas",
-                    "description": "Natural gas, e.g. methane or propane."
-                },
-                {
-                    "slug": "cement",
-                    "name": "Cement",
-                    "description": "Emissions from the drying-out of cement."
-                },
-                {
-                    "slug": "all",
-                    "name": "All",
-                    "description": "Emissions from all fuel types.",
-                    "multi_select": false
-                }
-            ]
-        },
-        {
-            "slug": "sector",
-            "name": "Sector",
-            "description": "The sector where these emissions stem from.",
-            "choices": [
-                {
-                    "slug": "agriculture",
-                    "name": "Agriculture",
-                    "description": "Agricultural emissions, e.g. from land use change and emissions from livestock and harvesting."
-                },
-                {
-                    "slug": "transport",
-                    "name": "Transportation",
-                    "description": "Emissions from global transport, including cars, trucks, rail transport and global shipping."
-                },
-                {
-                    "slug": "industry",
-                    "name": "Industry",
-                    "description": "Emissions from the production of non-agricultural goods, e.g. steel and glass."
-                },
-                { "slug": "heating" },
-                { "slug": "electricity" }
-            ]
-        }
-    ],
-    "views": [
-        {
-            "dimensions": { "fuel_type": "gas", "sector": "transport" },
-            "indicator_path": { "emissions__gas__transport": "y" },
-            "config": { "title": "Natural gas emissions in transport" }
-        },
-        {
-            "dimensions": { "fuel_type": "oil", "sector": "transport" },
-            "indicator_path": { "emissions__oil__transport": "y" },
-            "config": {
-                "title": "Oil emissions in transport",
-                "subtitle": "..."
-            }
-        },
-        {
-            "dimensions": { "fuel_type": "solar", "sector": "electricity" },
-            "indicator_path": { "emissions__solar__transport": "y" },
-            "config": { "title": "...", "subtitle": "..." }
-        }
-    ]
-}
diff --git a/site/multiDim/config.yml b/site/multiDim/config.yml
deleted file mode 100644
index d56da699f9c..00000000000
--- a/site/multiDim/config.yml
+++ /dev/null
@@ -1,58 +0,0 @@
-name: CO₂ emissions
-dimensions_title: by fuel type and sector
-common_indicator_path_prefix: gcp/2024/co2_and_ghg_emissions/ # optional
-dimensions:
-    - slug: fuel_type
-      name: Fuel type
-      description: The fuel where these emissions stem from. # optional
-      multi_select: true # optional
-      choices:
-          - slug: gas
-            name: Natural gas
-            description: Natural gas, e.g. methane or propane.
-          - slug: cement
-            name: Cement
-            description: Emissions from the drying-out of cement.
-          - slug: all
-            name: All
-            description: Emissions from all fuel types.
-            multi_select: false
-    - slug: sector
-      name: Sector
-      description: The sector where these emissions stem from.
-      choices:
-          - slug: agriculture
-            name: Agriculture
-            description: Agricultural emissions, e.g. from land use change and emissions from livestock and harvesting.
-          - slug: transport
-            name: Transportation
-            description: Emissions from global transport, including cars, trucks, rail transport and global shipping.
-          - slug: industry
-            name: Industry
-            description: Emissions from the production of non-agricultural goods, e.g. steel and glass.
-          - slug: heating
-          - slug: electricity
-views:
-    - dimensions:
-          fuel_type: gas
-          sector: transport
-      indicators:
-          emissions__gas__transport: y
-      config:
-          title: Natural gas emissions in transport
-    - dimensions:
-          fuel_type: oil
-          sector: transport
-      indicators:
-          emissions__oil__transport: y
-      config:
-          title: Oil emissions in transport
-          subtitle: ...
-    - dimensions: # This dimension uses other fields; they probably are nicer to work with
-          fuel_type: solar
-          sector: electricity
-      indicators:
-          emissions__solar__transport: y
-      config:
-          title: ...
-          subtitle: ...
diff --git a/site/tsconfig.json b/site/tsconfig.json
index cd938e00818..27009fd1be3 100644
--- a/site/tsconfig.json
+++ b/site/tsconfig.json
@@ -1,6 +1,5 @@
 {
     "extends": "../devTools/tsconfigs/tsconfig.base.json",
-    "include": ["**/*.ts", "**/*.json", "**/*.tsx"],
     "compilerOptions": {
         "outDir": "../itsJustJavascript/site",
         "rootDir": "."

From 622c47dfbc58115672e351903b9ca84d5e1cb615 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Fri, 9 Aug 2024 15:01:00 +0100
Subject: [PATCH 46/65] cleanup

---
 baker/MultiDimBaker.tsx            | 24 ++++++++++++++----------
 site/multiDim/MultiDimDataPage.tsx | 15 ---------------
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index f334d0f9983..c2f38f163a0 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -4,6 +4,7 @@ import path from "path"
 import findProjectBaseDir from "../settings/findBaseDir.js"
 import {
     IndicatorEntryBeforePreProcessing,
+    IndicatorsAfterPreProcessing,
     MultiDimDataPageConfigPreProcessed,
     MultiDimDataPageConfigRaw,
 } from "../site/multiDim/MultiDimDataPageTypes.js"
@@ -19,7 +20,12 @@ import {
     getVariableMetadata,
 } from "../db/model/Variable.js"
 import pMap from "p-map"
-import { JsonError, keyBy, OwidVariableWithSource } from "@ourworldindata/utils"
+import {
+    JsonError,
+    keyBy,
+    mapValues,
+    OwidVariableWithSource,
+} from "@ourworldindata/utils"
 import {
     fetchAndParseFaqs,
     getPrimaryTopic,
@@ -84,7 +90,7 @@ const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
 
     if (missingCatalogPaths.size > 0) {
         console.warn(
-            `Could not find the following catalog paths in the database: ${Array.from(
+            `Could not find the following catalog paths for MDD ${rawConfig.title} in the database: ${Array.from(
                 missingCatalogPaths
             ).join(", ")}`
         )
@@ -115,16 +121,14 @@ const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
 
     for (const view of rawConfig.views) {
         if (view.indicators)
-            view.indicators = Object.fromEntries(
-                Object.entries(view.indicators).map(([key, value]) => [
-                    key,
-                    resolveField(value),
-                ])
-            ) as any
+            view.indicators = mapValues(
+                view.indicators,
+                resolveField
+            ) as IndicatorsAfterPreProcessing
 
+        // Ensure that `indicators.y` exists and is a (possibly empty) array
         if (!view.indicators?.y) view.indicators = { ...view.indicators, y: [] }
-
-        if (!Array.isArray(view.indicators.y))
+        else if (!Array.isArray(view.indicators.y))
             view.indicators.y = [view.indicators.y]
     }
 
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index d37d08d437a..25388e315f7 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -50,21 +50,6 @@ export const MultiDimDataPage = (props: {
                     figure[data-grapher-src] { display: none !important; }
                 `}</style>
                 </noscript>
-                {/* <link rel="preconnect" href={dataApiOrigin} />
-                {variableIds.flatMap((variableId) =>
-                    [
-                        getVariableDataRoute(DATA_API_URL, variableId),
-                        getVariableMetadataRoute(DATA_API_URL, variableId),
-                    ].map((href) => (
-                        <link
-                            key={href}
-                            rel="preload"
-                            href={href}
-                            as="fetch"
-                            crossOrigin="anonymous"
-                        />
-                    ))
-                )} */}
                 <link
                     rel="preload"
                     href="/fonts/PlayfairDisplayLatin-SemiBold.woff2"

From 39d2165771ab13bc25d87bf3db118532ec9cfeea Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 12 Aug 2024 15:47:50 +0100
Subject: [PATCH 47/65] enhance(multi-dim): all props now available under
 `window._OWID_MULTI_DIM_PROPS`

---
 baker/MultiDimBaker.tsx                       | 41 ++++++++---------
 .../types/src/gdocTypes/Datapage.ts           |  5 ---
 site/multiDim/MultiDimDataPage.tsx            | 43 +++---------------
 site/multiDim/MultiDimDataPageContent.tsx     | 45 ++++++-------------
 site/multiDim/MultiDimDataPageTypes.ts        | 15 +++++++
 5 files changed, 53 insertions(+), 96 deletions(-)

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index c2f38f163a0..4011af4070f 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -7,6 +7,7 @@ import {
     IndicatorsAfterPreProcessing,
     MultiDimDataPageConfigPreProcessed,
     MultiDimDataPageConfigRaw,
+    MultiDimDataPageProps,
 } from "../site/multiDim/MultiDimDataPageTypes.js"
 import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 import * as db from "../db/db.js"
@@ -25,6 +26,7 @@ import {
     keyBy,
     mapValues,
     OwidVariableWithSource,
+    pick,
 } from "@ourworldindata/utils"
 import {
     fetchAndParseFaqs,
@@ -32,10 +34,7 @@ import {
     resolveFaqsForVariable,
 } from "./DatapageHelpers.js"
 import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
-import {
-    FaqEntryKeyedByGdocIdAndFragmentId,
-    PrimaryTopic,
-} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
+import { FaqEntryKeyedByGdocIdAndFragmentId } from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 
 // TODO Make this dynamic
 const baseDir = findProjectBaseDir(__dirname)
@@ -56,12 +55,6 @@ const MULTI_DIM_SITES_BY_SLUG: Record<string, MultiDimDataPageConfigRaw> = {
     "mdd-poverty": readMultiDimConfig("poverty.yml"),
 }
 
-interface BakingAdditionalContext {
-    tagToSlugMap: Record<string, string>
-    faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
-    primaryTopic: PrimaryTopic | undefined
-}
-
 const resolveMultiDimDataPageCatalogPathsToIndicatorIds = async (
     knex: db.KnexReadonlyTransaction,
     rawConfig: MultiDimDataPageConfigRaw
@@ -223,12 +216,17 @@ export const renderMultiDimDataPageBySlug = async (
     const rawConfig = MULTI_DIM_SITES_BY_SLUG[slug]
     if (!rawConfig) throw new Error(`No multi-dim site found for slug: ${slug}`)
 
+    // TAGS
     const tagToSlugMap = await getTagToSlugMap(knex)
+    // Only embed the tags that are actually used by the datapage, instead of the complete JSON object with ~240 properties
+    const minimalTagToSlugMap = pick(tagToSlugMap, rawConfig.topicTags ?? [])
 
+    // PRE-PROCESS CONFIG
     const preProcessedConfig =
         await resolveMultiDimDataPageCatalogPathsToIndicatorIds(knex, rawConfig)
     const config = MultiDimDataPageConfig.fromObject(preProcessedConfig)
 
+    // FAQs
     const variableMetaDict =
         await getRelevantVariableMetadata(preProcessedConfig)
     const faqEntries = await getFaqEntries(
@@ -237,28 +235,25 @@ export const renderMultiDimDataPageBySlug = async (
         variableMetaDict
     )
 
+    // PRIMARY TOPIC
     const primaryTopic = await getPrimaryTopic(
         knex,
         preProcessedConfig.topicTags?.[0]
     )
 
-    const bakingContext = { tagToSlugMap, faqEntries, primaryTopic }
+    const props = {
+        configObj: config.config,
+        tagToSlugMap: minimalTagToSlugMap,
+        faqEntries,
+        primaryTopic,
+    }
 
-    return renderMultiDimDataPage(config, bakingContext)
+    return renderMultiDimDataPage(props)
 }
 
-export const renderMultiDimDataPage = async (
-    config: MultiDimDataPageConfig,
-    bakingContext?: BakingAdditionalContext
-) => {
+export const renderMultiDimDataPage = async (props: MultiDimDataPageProps) => {
     return renderToHtmlPage(
-        <MultiDimDataPage
-            baseUrl={BAKED_BASE_URL}
-            config={config}
-            tagToSlugMap={bakingContext?.tagToSlugMap}
-            faqEntries={bakingContext?.faqEntries}
-            primaryTopic={bakingContext?.primaryTopic}
-        />
+        <MultiDimDataPage baseUrl={BAKED_BASE_URL} multiDimProps={props} />
     )
 }
 
diff --git a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
index 76693b72f2a..1f8bbe609a4 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
@@ -141,11 +141,6 @@ export interface DataPageV2ContentFields {
     imageMetadata: Record<string, ImageMetadata>
 }
 
-export type MultiDimDataPageContentFields = DataPageV2ContentFields & {
-    faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
-    primaryTopic?: PrimaryTopic | undefined
-}
-
 export interface DisplaySource {
     label: string
     description?: string
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index 25388e315f7..0e8335b9544 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -1,38 +1,21 @@
 import React from "react"
-import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 import { Head } from "../Head.js"
 import { IFrameDetector } from "../IframeDetector.js"
 import { SiteHeader } from "../SiteHeader.js"
 import { OWID_DATAPAGE_CONTENT_ROOT_ID } from "../DataPageV2Content.js"
 import { SiteFooter } from "../SiteFooter.js"
-import {
-    SiteFooterContext,
-    pick,
-    serializeJSONForHTML,
-} from "@ourworldindata/utils"
-import {
-    FaqEntryKeyedByGdocIdAndFragmentId,
-    PrimaryTopic,
-} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
+import { SiteFooterContext, serializeJSONForHTML } from "@ourworldindata/utils"
+import { MultiDimDataPageProps } from "./MultiDimDataPageTypes.js"
 
 export const MultiDimDataPage = (props: {
     baseUrl: string
-    config: MultiDimDataPageConfig
-    tagToSlugMap?: Record<string, string>
-    faqEntries?: FaqEntryKeyedByGdocIdAndFragmentId
-    primaryTopic?: PrimaryTopic | undefined
+    multiDimProps: MultiDimDataPageProps
 }) => {
-    const { config, faqEntries } = props
+    const { multiDimProps } = props
 
     const canonicalUrl = "" // TODO
     const baseUrl = props.baseUrl // TODO
 
-    // Only embed the tags that are actually used by the datapage, instead of the complete JSON object with ~240 properties
-    const minimalTagToSlugMap = pick(
-        props.tagToSlugMap,
-        config.config.topicTags ?? []
-    )
-
     return (
         <html>
             <Head
@@ -63,15 +46,8 @@ export const MultiDimDataPage = (props: {
                 <main>
                     <script
                         dangerouslySetInnerHTML={{
-                            __html: `window._OWID_DATAPAGEV2_PROPS = ${JSON.stringify(
-                                {
-                                    // datapageData,
-                                    canonicalUrl,
-                                    tagToSlugMap: minimalTagToSlugMap,
-                                    faqEntries,
-                                    primaryTopic: props.primaryTopic,
-                                    // imageMetadata,
-                                }
+                            __html: `window._OWID_MULTI_DIM_PROPS = ${serializeJSONForHTML(
+                                multiDimProps
                             )}`,
                         }}
                     />
@@ -94,13 +70,6 @@ export const MultiDimDataPage = (props: {
                     context={SiteFooterContext.multiDimDataPage}
                     // isPreviewing={isPreviewing}
                 />
-                <script
-                    dangerouslySetInnerHTML={{
-                        __html: `window._OWID_MULTI_DIM_CONFIG = ${serializeJSONForHTML(
-                            props.config.config
-                        )}`,
-                    }}
-                />
             </body>
         </html>
     )
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 0f43c380ce7..174e1a50732 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -9,13 +9,11 @@ import {
 import ReactDOM from "react-dom"
 import { RelatedCharts } from "../blocks/RelatedCharts.js"
 import {
-    DataPageV2ContentFields,
     formatAuthors,
     intersection,
     DataPageDataV2,
     GrapherInterface,
     joinTitleFragments,
-    ImageMetadata,
     DimensionProperty,
     OwidVariableWithSource,
     getLastUpdatedFromVariable,
@@ -34,7 +32,7 @@ import { DebugProvider } from "../gdocs/DebugContext.js"
 import { BAKED_BASE_URL, DATA_API_URL } from "../../settings/clientSettings.js"
 import Image from "../gdocs/components/Image.js"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import { MultiDimDataPageConfigPreProcessed } from "./MultiDimDataPageTypes.js"
+import { MultiDimDataPageProps } from "./MultiDimDataPageTypes.js"
 import AboutThisData from "../AboutThisData.js"
 import TopicTags from "../TopicTags.js"
 import MetadataSection from "../MetadataSection.js"
@@ -45,14 +43,9 @@ import {
 import { reaction } from "mobx"
 import { useElementBounds } from "../hooks.js"
 import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
-import {
-    FaqEntryKeyedByGdocIdAndFragmentId,
-    MultiDimDataPageContentFields,
-    PrimaryTopic,
-} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 declare global {
     interface Window {
-        _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigPreProcessed
+        _OWID_MULTI_DIM_PROPS: MultiDimDataPageProps
     }
 }
 export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root"
@@ -145,8 +138,7 @@ const cachedGetVariableMetadata = memoize(
 
 export const MultiDimDataPageContent = ({
     // _datapageData,
-    config,
-    grapherConfig,
+    configObj,
     // isPreviewing = false,
     faqEntries,
     primaryTopic,
@@ -154,16 +146,14 @@ export const MultiDimDataPageContent = ({
     tagToSlugMap,
     // imageMetadata,
     initialQueryStr,
-}: DataPageV2ContentFields & {
-    config: MultiDimDataPageConfig
-    grapherConfig?: GrapherInterface
-    faqEntries: FaqEntryKeyedByGdocIdAndFragmentId
-    imageMetadata: Record<string, ImageMetadata>
-    initialQueryStr?: string
-    primaryTopic?: PrimaryTopic | undefined
-}) => {
+}: MultiDimDataPageProps) => {
     const grapherFigureRef = useRef<HTMLDivElement>(null)
 
+    const config = useMemo(
+        () => MultiDimDataPageConfig.fromObject(configObj),
+        [configObj]
+    )
+
     const [initialChoices] = useState(() =>
         initialQueryStr
             ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
@@ -216,10 +206,10 @@ export const MultiDimDataPageContent = ({
         const variableMetadata = cachedGetVariableMetadata(variableId)
 
         variableMetadata
-            .then((json) => getDatapageDataV2(json, grapherConfig))
+            .then((json) => getDatapageDataV2(json, currentView?.config))
             .then(setDatapageDataFromVar)
             .catch(console.error)
-    }, [dimensionsConfig, currentView?.indicators, grapherConfig])
+    }, [dimensionsConfig, currentView?.indicators, currentView?.config])
 
     const titleFragments = joinTitleFragments(
         title.titleVariant,
@@ -325,7 +315,7 @@ export const MultiDimDataPageContent = ({
     const faqEntriesForView = useMemo(() => {
         return compact(
             datapageDataFromVar?.faqs?.flatMap(
-                (faq) => faqEntries.faqs?.[faq.gdocId]?.[faq.fragmentId]
+                (faq) => faqEntries?.faqs?.[faq.gdocId]?.[faq.fragmentId]
             )
         )
     }, [datapageDataFromVar?.faqs, faqEntries])
@@ -339,7 +329,7 @@ export const MultiDimDataPageContent = ({
                         <h1 className="header__title">{title.title}</h1>
                         <div className="header__source">{titleFragments}</div>
                     </div>
-                    {hasTopicTags && (
+                    {hasTopicTags && tagToSlugMap && (
                         <TopicTags
                             className="header__right col-start-10 span-cols-4 col-sm-start-2 span-sm-cols-12"
                             topicTagsLinks={config.config.topicTags ?? []}
@@ -539,20 +529,13 @@ export const MultiDimDataPageContent = ({
 
 export const hydrateMultiDimDataPageContent = (isPreviewing?: boolean) => {
     const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
-    const props: MultiDimDataPageContentFields =
-        window._OWID_DATAPAGEV2_PROPS as MultiDimDataPageContentFields
-    const grapherConfig = window._OWID_GRAPHER_CONFIG
+    const props: MultiDimDataPageProps = window._OWID_MULTI_DIM_PROPS
     const initialQueryStr = getWindowQueryStr()
-    const config = MultiDimDataPageConfig.fromObject(
-        window._OWID_MULTI_DIM_CONFIG
-    )
 
     ReactDOM.hydrate(
         <DebugProvider debug={isPreviewing}>
             <MultiDimDataPageContent
                 {...props}
-                config={config}
-                grapherConfig={grapherConfig}
                 isPreviewing={isPreviewing}
                 initialQueryStr={initialQueryStr}
             />
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index 519bf41a98e..c3907abf0ab 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -1,4 +1,8 @@
 import { IndicatorTitleWithFragments } from "@ourworldindata/types"
+import {
+    FaqEntryKeyedByGdocIdAndFragmentId,
+    PrimaryTopic,
+} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 
 // Indicator ID, catalog path, or maybe an array of those
 export type IndicatorEntryBeforePreProcessing = string | number | undefined
@@ -69,3 +73,14 @@ export interface Config {
     title?: string
     subtitle?: string
 }
+
+export interface MultiDimDataPageProps {
+    configObj: MultiDimDataPageConfigPreProcessed
+    tagToSlugMap?: Record<string, string>
+    faqEntries?: FaqEntryKeyedByGdocIdAndFragmentId
+    primaryTopic?: PrimaryTopic | undefined
+
+    initialQueryStr?: string
+    canonicalUrl?: string
+    isPreviewing?: boolean
+}

From 808d443aa51ceabc069b5b9f966bcc056894e65f Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 12 Aug 2024 18:15:44 +0100
Subject: [PATCH 48/65] refactor: cleanup `MultiDimDataPageContent` a bit

---
 site/multiDim/MultiDimDataPageConfig.ts   |  31 ++++++-
 site/multiDim/MultiDimDataPageContent.tsx | 102 +++++++++-------------
 2 files changed, 73 insertions(+), 60 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
index 1106fff2ed2..47909634619 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/site/multiDim/MultiDimDataPageConfig.ts
@@ -6,7 +6,12 @@ import {
     MultiDimDataPageConfigPreProcessed,
     View,
 } from "./MultiDimDataPageTypes.js"
-import { groupBy, keyBy } from "@ourworldindata/utils"
+import {
+    DimensionProperty,
+    groupBy,
+    keyBy,
+    OwidChartDimensionInterface,
+} from "@ourworldindata/utils"
 
 export class MultiDimDataPageConfig {
     private constructor(
@@ -139,4 +144,28 @@ export class MultiDimDataPageConfig {
             dimensionsWithAvailableChoices,
         }
     }
+
+    static viewToDimensionsConfig(
+        view: View<IndicatorsAfterPreProcessing> | undefined
+    ): OwidChartDimensionInterface[] {
+        if (!view?.indicators) return []
+
+        return Object.entries(view.indicators)
+            .flatMap(([property, variableIdOrIds]) => {
+                if (Array.isArray(variableIdOrIds)) {
+                    return variableIdOrIds.map((variableId) => ({
+                        property: property as DimensionProperty,
+                        variableId,
+                    }))
+                } else {
+                    return [
+                        {
+                            property: property as DimensionProperty,
+                            variableId: variableIdOrIds,
+                        },
+                    ]
+                }
+            })
+            .filter((dim) => dim.variableId !== undefined)
+    }
 }
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 174e1a50732..9c16b4b1d39 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -159,39 +159,22 @@ export const MultiDimDataPageContent = ({
             ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
             : {}
     )
-
-    const title = config.config.title
-
     const [currentSettings, setCurrentSettings] = useState(() => {
         const { selectedChoices } =
             config.filterToAvailableChoices(initialChoices)
         return selectedChoices
     })
-
     const currentView = useMemo(() => {
         if (Object.keys(currentSettings).length === 0) return undefined
         return config.findViewByDimensions(currentSettings)
     }, [currentSettings, config])
 
-    const dimensionsConfig = useMemo(() => {
-        const dimObj = currentView?.indicators
-        if (!dimObj) return []
-        return Object.entries(dimObj)
-            .flatMap(([property, variableIds]) => {
-                if (Array.isArray(variableIds)) {
-                    return variableIds.flatMap((variableId) => ({
-                        property: property as DimensionProperty,
-                        variableId,
-                    }))
-                } else {
-                    return {
-                        property: property as DimensionProperty,
-                        variableId: variableIds,
-                    }
-                }
-            })
-            .filter((dim) => dim.variableId !== undefined)
-    }, [currentView])
+    const title = config.config.title
+
+    const dimensionsConfig = useMemo(
+        () => MultiDimDataPageConfig.viewToDimensionsConfig(currentView),
+        [currentView]
+    )
 
     const [datapageDataFromVar, setDatapageDataFromVar] =
         useState<DataPageDataV2 | null>(null)
@@ -277,40 +260,41 @@ export const MultiDimDataPageContent = ({
 
     const hasTopicTags = !!config.config.topicTags?.length
 
-    const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
-    const relatedResearch =
-        relatedResearchCandidates.length > 3 && config.config.topicTags?.length
-            ? relatedResearchCandidates.filter((research) => {
-                  const shared = intersection(
-                      research.tags,
-                      config.config.topicTags ?? []
-                  )
-                  return shared.length > 0
-              })
-            : relatedResearchCandidates
-    for (const item of relatedResearch) {
-        // TODO: these are workarounds to not link to the (not really existing) template pages for energy or co2
-        // country profiles but instead to the topic page at the country selector.
-        if (item.url === "/co2-country-profile")
-            item.url =
-                "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles"
-        else if (item.url === "/energy-country-profile")
-            item.url = "/energy#country-profiles"
-        else if (item.url === "/coronavirus-country-profile")
-            item.url = "/coronavirus#coronavirus-country-profiles"
-    }
-
-    const hasRelatedDataFeatured = datapageDataFromVar?.relatedData?.some(
-        (data) => data.featured
-    )
-    const hasRelatedDataNonFeatured = datapageDataFromVar?.relatedData?.some(
-        (data) => !data.featured
-    )
-    const relatedDataCategoryClasses = `related-data__category ${
-        hasRelatedDataFeatured && hasRelatedDataNonFeatured
-            ? "related-data__category--grid span-cols-4 span-lg-cols-6 span-sm-cols-3"
-            : "related-data__category--columns span-cols-8 span-lg-cols-12"
-    } `
+    // TODO
+    // const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
+    // const relatedResearch =
+    //     relatedResearchCandidates.length > 3 && config.config.topicTags?.length
+    //         ? relatedResearchCandidates.filter((research) => {
+    //               const shared = intersection(
+    //                   research.tags,
+    //                   config.config.topicTags ?? []
+    //               )
+    //               return shared.length > 0
+    //           })
+    //         : relatedResearchCandidates
+    // for (const item of relatedResearch) {
+    //     // TODO: these are workarounds to not link to the (not really existing) template pages for energy or co2
+    //     // country profiles but instead to the topic page at the country selector.
+    //     if (item.url === "/co2-country-profile")
+    //         item.url =
+    //             "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles"
+    //     else if (item.url === "/energy-country-profile")
+    //         item.url = "/energy#country-profiles"
+    //     else if (item.url === "/coronavirus-country-profile")
+    //         item.url = "/coronavirus#coronavirus-country-profiles"
+    // }
+
+    // const hasRelatedDataFeatured = datapageDataFromVar?.relatedData?.some(
+    //     (data) => data.featured
+    // )
+    // const hasRelatedDataNonFeatured = datapageDataFromVar?.relatedData?.some(
+    //     (data) => !data.featured
+    // )
+    // const relatedDataCategoryClasses = `related-data__category ${
+    //     hasRelatedDataFeatured && hasRelatedDataNonFeatured
+    //         ? "related-data__category--grid span-cols-4 span-lg-cols-6 span-sm-cols-3"
+    //         : "related-data__category--columns span-cols-8 span-lg-cols-12"
+    // } `
 
     const faqEntriesForView = useMemo(() => {
         return compact(
@@ -376,7 +360,7 @@ export const MultiDimDataPageContent = ({
                     )}
                 </div>
             </div>
-            <div className="col-start-2 span-cols-12">
+            {/* <div className="col-start-2 span-cols-12">
                 {relatedResearch && relatedResearch.length > 0 && (
                     <div className="section-wrapper grid">
                         <h2
@@ -503,7 +487,7 @@ export const MultiDimDataPageContent = ({
                         </div>
                     </div>
                 ) : null}
-            </div>
+            </div> */}
             {datapageDataFromVar && (
                 <MetadataSection
                     attributionShort={datapageDataFromVar.attributionShort}

From 50c3c1e3a9c403630617595fb0a3af26f4356706 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 12 Aug 2024 18:31:39 +0100
Subject: [PATCH 49/65] refactor: remove some old code

---
 site/multiDim/MultiDimDataPageContent.tsx     | 35 +------------------
 .../MultiDimDataPageSettingsPanel.tsx         | 22 ++++++------
 2 files changed, 11 insertions(+), 46 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 9c16b4b1d39..71c3bcd0c28 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -7,14 +7,10 @@ import {
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
 import ReactDOM from "react-dom"
-import { RelatedCharts } from "../blocks/RelatedCharts.js"
 import {
-    formatAuthors,
-    intersection,
     DataPageDataV2,
     GrapherInterface,
     joinTitleFragments,
-    DimensionProperty,
     OwidVariableWithSource,
     getLastUpdatedFromVariable,
     getNextUpdateFromVariable,
@@ -29,8 +25,7 @@ import {
 } from "@ourworldindata/utils"
 import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
-import { BAKED_BASE_URL, DATA_API_URL } from "../../settings/clientSettings.js"
-import Image from "../gdocs/components/Image.js"
+import { DATA_API_URL } from "../../settings/clientSettings.js"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 import { MultiDimDataPageProps } from "./MultiDimDataPageTypes.js"
 import AboutThisData from "../AboutThisData.js"
@@ -50,34 +45,6 @@ declare global {
 }
 export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root"
 
-// We still have topic pages on WordPress, whose featured images are specified as absolute URLs which this component handles
-// Once we've migrated all WP topic pages to gdocs, we'll be able to remove this component and just use <Image />
-const DatapageResearchThumbnail = ({
-    urlOrFilename,
-}: {
-    urlOrFilename: string | undefined | null
-}) => {
-    if (!urlOrFilename) {
-        urlOrFilename = `${BAKED_BASE_URL}/default-thumbnail.jpg`
-    }
-    if (urlOrFilename.startsWith("http")) {
-        return (
-            <img
-                src={urlOrFilename}
-                className="span-lg-cols-2 span-sm-cols-3"
-            />
-        )
-    }
-    return (
-        <Image
-            filename={urlOrFilename}
-            shouldLightbox={false}
-            containerType="thumbnail"
-            className="span-lg-cols-2 span-sm-cols-3"
-        />
-    )
-}
-
 // From DataPageUtils
 const getDatapageDataV2 = async (
     variableMetadata: OwidVariableWithSource,
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index 3e29a224aaf..792429262e9 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import { isEqual } from "@ourworldindata/utils"
+import { isEqual, mapValues } from "@ourworldindata/utils"
 import { OverlayHeader, RadioButton } from "@ourworldindata/components"
 import { useTriggerOnEscape, useTriggerWhenClickOutside } from "../hooks.js"
 
@@ -26,6 +26,10 @@ const DimensionDropdown = (props: {
     useTriggerWhenClickOutside(dropdownRef, active, hide)
 
     const currentChoice = dimension.choicesBySlug[props.currentChoiceSlug]
+    if (currentChoice === undefined)
+        throw new Error(
+            `Unexpected error: Invalid choice slug ${props.currentChoiceSlug} for dimension ${dimension.slug}`
+        )
 
     return (
         <div className="md-settings__dropdown" ref={dropdownRef}>
@@ -113,11 +117,6 @@ const DimensionDropdown = (props: {
 export const MultiDimSettingsPanel = (props: {
     config: MultiDimDataPageConfig
     currentSettings: Record<string, string>
-    onChange?: (
-        slug: string,
-        value: string,
-        currentSettings: Record<string, string>
-    ) => void
     updateSettings?: (currentSettings: Record<string, string>) => void
 }) => {
     const { config, currentSettings, updateSettings } = props
@@ -127,12 +126,11 @@ export const MultiDimSettingsPanel = (props: {
     // Non-partial version of `currentSettings` with all dimensions filled in
     const resolvedCurrentSettings = useMemo(
         () =>
-            Object.fromEntries(
-                Object.values(dimensions).map((dimension) => [
-                    dimension.slug,
-                    currentSettings[dimension.slug] ??
-                        Object.values(dimension.choices)[0].slug,
-                ])
+            mapValues(
+                dimensions,
+                (dim) =>
+                    currentSettings[dim.slug] ??
+                    Object.values(dim.choices)[0].slug
             ),
         [currentSettings, dimensions]
     )

From 64ce88baf8957eab8a98d0e64c36d0ad5d39254e Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Mon, 12 Aug 2024 18:45:14 +0100
Subject: [PATCH 50/65] docs(multi-dim): basic README with lingo

---
 site/multiDim/README.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 site/multiDim/README.md

diff --git a/site/multiDim/README.md b/site/multiDim/README.md
new file mode 100644
index 00000000000..9292ac6541f
--- /dev/null
+++ b/site/multiDim/README.md
@@ -0,0 +1,37 @@
+## Lingo
+
+### MDD
+
+This directory contains code regarding multi-dimensional data pages, or MDDs for short.
+
+### Dimension
+
+A _dimension_ is one configurable aspect of the MDD, containing a multitude of _choices_.
+A MDD usually has 2-5 dimensions.
+Every dimension has a slug and a name, and the slug should not be changed once published.
+
+Example: Dimension `Age group` with choices `All`, `0-14 years`, `15-64 years`, `65+ years`.
+
+### Choice
+
+A _choice_ is a particular option inside a dimension.
+A choice has a slug and a name, and the slug should not be changed once published.
+
+### Choice groups
+
+Choices may be grouped into choice groups, if that's useful.
+This is purely a UX consideration and doesn't affect the MDD in any other way.
+
+For example, for a `Energy source` dimension, you may group the choices `Coal`, `Oil` and `Gas` under `Fossil fuels`.
+
+### View
+
+A view is a MDD configuration specified by the choices made in all dimensions.
+It can also be understood as a grapher & datapage configuration object, which then decides what to render on the page below the dimension dropdowns.
+There is at most one view for a given set of dimension-choice pairings.
+
+### Indicators
+
+An indicator or variable is an OWID indicator used to render a chart.
+A view may specify one or more y indicators, and up to one x, size, and color indicator.
+The first y indicator is considered the "main" indicator for a MDD, and its metadata is used to render the datapage information outside the charting area.

From b403bdfd403e4da35f31731664c4b4b9d809a0a3 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 15:03:52 +0100
Subject: [PATCH 51/65] cleanup: remove `relatedData` code

---
 site/multiDim/MultiDimDataPageContent.tsx | 91 -----------------------
 1 file changed, 91 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 71c3bcd0c28..a9d3ff7a5d7 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -83,7 +83,6 @@ const getDatapageDataV2 = async (
             dateRange: variableMetadata.timespan ?? "",
             lastUpdated: lastUpdated,
             nextUpdate: nextUpdate,
-            relatedData: [],
             allCharts: [],
             relatedResearch: [],
             source: variableMetadata.source,
@@ -251,18 +250,6 @@ export const MultiDimDataPageContent = ({
     //         item.url = "/coronavirus#coronavirus-country-profiles"
     // }
 
-    // const hasRelatedDataFeatured = datapageDataFromVar?.relatedData?.some(
-    //     (data) => data.featured
-    // )
-    // const hasRelatedDataNonFeatured = datapageDataFromVar?.relatedData?.some(
-    //     (data) => !data.featured
-    // )
-    // const relatedDataCategoryClasses = `related-data__category ${
-    //     hasRelatedDataFeatured && hasRelatedDataNonFeatured
-    //         ? "related-data__category--grid span-cols-4 span-lg-cols-6 span-sm-cols-3"
-    //         : "related-data__category--columns span-cols-8 span-lg-cols-12"
-    // } `
-
     const faqEntriesForView = useMemo(() => {
         return compact(
             datapageDataFromVar?.faqs?.flatMap(
@@ -363,84 +350,6 @@ export const MultiDimDataPageContent = ({
                         </div>
                     </div>
                 )}
-                {!!datapageDataFromVar?.relatedData?.length && (
-                    <div className="section-wrapper grid">
-                        <h2
-                            className="related-data__title span-cols-3 span-lg-cols-12"
-                            id="related-data"
-                        >
-                            Related data
-                        </h2>
-                        <div
-                            className={cx(
-                                "related-data__items",
-                                {
-                                    "related-data__items--two-cols":
-                                        hasRelatedDataFeatured &&
-                                        hasRelatedDataNonFeatured,
-                                },
-                                "grid",
-                                "grid-cols-9",
-                                "grid-lg-cols-12",
-                                "span-cols-9",
-                                "span-lg-cols-12"
-                            )}
-                        >
-                            {hasRelatedDataFeatured && (
-                                <div className={relatedDataCategoryClasses}>
-                                    {datapageDataFromVar.relatedData
-                                        .filter((data) => data.featured)
-                                        .map((data) => (
-                                            <a
-                                                href={data.url}
-                                                key={data.url}
-                                                className="related-data-item related-data-item--medium col-start-1 col-end-limit"
-                                            >
-                                                {data.type && (
-                                                    <div className="related-data-item__type">
-                                                        {data.type}
-                                                    </div>
-                                                )}
-                                                <h3 className="related-data-item__title">
-                                                    {data.title}
-                                                </h3>
-                                                {data.source && (
-                                                    <div className="related-data-item__source">
-                                                        {data.source}
-                                                    </div>
-                                                )}
-                                                <div className="related-data-item__content">
-                                                    {data.content}
-                                                </div>
-                                            </a>
-                                        ))}
-                                </div>
-                            )}
-                            {hasRelatedDataNonFeatured && (
-                                <div className={relatedDataCategoryClasses}>
-                                    {datapageDataFromVar.relatedData
-                                        .filter((data) => !data.featured)
-                                        .map((data) => (
-                                            <a
-                                                href={data.url}
-                                                key={data.url}
-                                                className="related-data-item related-data-item--small col-start-1 col-end-limit"
-                                            >
-                                                <h4 className="related-data-item__title">
-                                                    {data.title}
-                                                </h4>
-                                                {data.source && (
-                                                    <div className="related-data-item__source">
-                                                        {data.source}
-                                                    </div>
-                                                )}
-                                            </a>
-                                        ))}
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                )}
                 {datapageDataFromVar?.allCharts &&
                 datapageDataFromVar?.allCharts.length > 0 ? (
                     <div className="section-wrapper section-wrapper__related-charts">

From f3679efacaae33d4743515b7e1bf9fa0205629c9 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 16:07:48 +0100
Subject: [PATCH 52/65] refactor: pull out custom hook

---
 site/hooks.ts                             | 24 +++++++++++++++++++++++
 site/multiDim/MultiDimDataPageContent.tsx | 21 +++++---------------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/site/hooks.ts b/site/hooks.ts
index 87f8761962d..85baca9ef12 100644
--- a/site/hooks.ts
+++ b/site/hooks.ts
@@ -14,6 +14,7 @@ import {
     throttle,
 } from "@ourworldindata/utils"
 import { useResizeObserver } from "usehooks-ts"
+import { reaction } from "mobx"
 
 export const useTriggerWhenClickOutside = (
     container: RefObject<HTMLElement>,
@@ -136,3 +137,26 @@ export const useElementBounds = (
 
     return bounds
 }
+
+// Transforms Mobx state into a functional React state, by setting up
+// a listener with Mobx's `reaction` and updating the React state.
+// Make sure that the `mobxStateGetter` function is wrapped in `useCallback`,
+// otherwise the listener will be set up on every render, causing
+// an infinite loop.
+export const useMobxStateToReactState = <T>(
+    mobxStateGetter: () => T,
+    enabled: boolean = true
+) => {
+    const [state, setState] = useState(() =>
+        enabled ? mobxStateGetter() : undefined
+    )
+
+    useEffect(() => {
+        if (!enabled) return
+        const disposer = reaction(() => mobxStateGetter(), setState, {
+            fireImmediately: true,
+        })
+        return disposer
+    }, [enabled, mobxStateGetter])
+    return state
+}
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index a9d3ff7a5d7..30cf98e5780 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
     Grapher,
     GrapherManager,
@@ -36,7 +36,7 @@ import {
     stateToQueryStr,
 } from "./MultiDimUrl.js"
 import { reaction } from "mobx"
-import { useElementBounds } from "../hooks.js"
+import { useElementBounds, useMobxStateToReactState } from "../hooks.js"
 import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
 declare global {
     interface Window {
@@ -182,21 +182,10 @@ export const MultiDimDataPageContent = ({
     // TODO we should probably fix that? seems sensible? change GrapherFigureView around a bit to use the actual grapher inst? or pass a GrapherProgrammaticInterface to it instead?
     const [grapherInst, setGrapherInst] = useState<Grapher | null>(null)
 
-    const [grapherChangedParams, setGrapherChangedParams] = useState<
-        QueryParams | undefined
-    >(undefined)
-
     // De-mobx grapher.changedParams by transforming it into React state
-    useEffect(
-        () =>
-            grapherInst
-                ? reaction(
-                      () => grapherInst.changedParams,
-                      setGrapherChangedParams,
-                      { fireImmediately: true }
-                  )
-                : undefined,
-        [grapherInst]
+    const grapherChangedParams = useMobxStateToReactState(
+        useCallback(() => grapherInst?.changedParams, [grapherInst]),
+        !!grapherInst
     )
 
     const bounds = useElementBounds(grapherFigureRef)

From 838c41611a429b83fc1fd7efd9dbfa934ca8fcae Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 16:45:21 +0100
Subject: [PATCH 53/65] enhance: move more logic out into custom hooks

---
 site/multiDim/MultiDimDataPageContent.tsx | 142 ++++++++++++----------
 site/multiDim/MultiDimDataPageTypes.ts    |   4 +-
 2 files changed, 84 insertions(+), 62 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 30cf98e5780..1291d948319 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -27,7 +27,13 @@ import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
 import { DATA_API_URL } from "../../settings/clientSettings.js"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import { MultiDimDataPageProps } from "./MultiDimDataPageTypes.js"
+import {
+    IndicatorEntryAfterPreProcessing,
+    IndicatorsAfterPreProcessing,
+    MultiDimDataPageProps,
+    MultiDimDimensionChoices,
+    View,
+} from "./MultiDimDataPageTypes.js"
 import AboutThisData from "../AboutThisData.js"
 import TopicTags from "../TopicTags.js"
 import MetadataSection from "../MetadataSection.js"
@@ -102,51 +108,39 @@ const cachedGetVariableMetadata = memoize(
         )
 )
 
-export const MultiDimDataPageContent = ({
-    // _datapageData,
-    configObj,
-    // isPreviewing = false,
-    faqEntries,
-    primaryTopic,
-    canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
-    tagToSlugMap,
-    // imageMetadata,
-    initialQueryStr,
-}: MultiDimDataPageProps) => {
-    const grapherFigureRef = useRef<HTMLDivElement>(null)
-
-    const config = useMemo(
-        () => MultiDimDataPageConfig.fromObject(configObj),
-        [configObj]
+const useTitleFragments = (config: MultiDimDataPageConfig) => {
+    const title = config.config.title
+    return useMemo(
+        () => joinTitleFragments(title.titleVariant, title.attributionShort),
+        [config]
     )
+}
 
-    const [initialChoices] = useState(() =>
-        initialQueryStr
-            ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
-            : {}
-    )
-    const [currentSettings, setCurrentSettings] = useState(() => {
-        const { selectedChoices } =
-            config.filterToAvailableChoices(initialChoices)
-        return selectedChoices
-    })
+const useView = (
+    currentSettings: MultiDimDimensionChoices,
+    config: MultiDimDataPageConfig
+) => {
     const currentView = useMemo(() => {
         if (Object.keys(currentSettings).length === 0) return undefined
         return config.findViewByDimensions(currentSettings)
     }, [currentSettings, config])
 
-    const title = config.config.title
-
     const dimensionsConfig = useMemo(
         () => MultiDimDataPageConfig.viewToDimensionsConfig(currentView),
         [currentView]
     )
 
-    const [datapageDataFromVar, setDatapageDataFromVar] =
+    return { currentView, dimensionsConfig }
+}
+
+const useVarDatapageData = (
+    currentView: View<IndicatorsAfterPreProcessing> | undefined
+) => {
+    const [varDatapageData, setVarDatapageData] =
         useState<DataPageDataV2 | null>(null)
 
     useEffect(() => {
-        setDatapageDataFromVar(null)
+        setVarDatapageData(null)
         const yIndicatorOrIndicators = currentView?.indicators?.["y"]
         const variableId = Array.isArray(yIndicatorOrIndicators)
             ? yIndicatorOrIndicators[0]
@@ -156,25 +150,51 @@ export const MultiDimDataPageContent = ({
 
         variableMetadata
             .then((json) => getDatapageDataV2(json, currentView?.config))
-            .then(setDatapageDataFromVar)
+            .then(setVarDatapageData)
             .catch(console.error)
-    }, [dimensionsConfig, currentView?.indicators, currentView?.config])
+    }, [currentView?.indicators, currentView?.config])
+
+    return { varDatapageData }
+}
+
+export const MultiDimDataPageContent = ({
+    // _datapageData,
+    configObj,
+    // isPreviewing = false,
+    faqEntries,
+    primaryTopic,
+    canonicalUrl = "{URL}", // when we bake pages to their proper url this will be set correctly but on preview pages we leave this undefined
+    tagToSlugMap,
+    // imageMetadata,
+    initialQueryStr,
+}: MultiDimDataPageProps) => {
+    const grapherFigureRef = useRef<HTMLDivElement>(null)
 
-    const titleFragments = joinTitleFragments(
-        title.titleVariant,
-        title.attributionShort
+    const config = useMemo(
+        () => MultiDimDataPageConfig.fromObject(configObj),
+        [configObj]
     )
+    const titleFragments = useTitleFragments(config)
 
-    const selectionArray = useMemo(
-        () => new SelectionArray(config.config.defaultSelection),
-        [config]
+    const [initialChoices] = useState(() =>
+        initialQueryStr
+            ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
+            : {}
     )
+    const [currentSettings, setCurrentSettings] = useState(() => {
+        const { selectedChoices } =
+            config.filterToAvailableChoices(initialChoices)
+        return selectedChoices
+    })
+
+    const { currentView, dimensionsConfig } = useView(currentSettings, config)
+    const { varDatapageData } = useVarDatapageData(currentView)
 
     const grapherManager = useMemo(
         (): GrapherManager => ({
-            selection: selectionArray,
+            selection: new SelectionArray(config.config.defaultSelection),
         }),
-        [selectionArray]
+        [config]
     )
 
     // This is the ACTUAL grapher instance being used, because GrapherFigureView/GrapherWithFallback are doing weird things and are not actually using the grapher instance we pass into it
@@ -216,7 +236,7 @@ export const MultiDimDataPageContent = ({
     const hasTopicTags = !!config.config.topicTags?.length
 
     // TODO
-    // const relatedResearchCandidates = datapageDataFromVar?.relatedResearch ?? []
+    // const relatedResearchCandidates = varDatapageData?.relatedResearch ?? []
     // const relatedResearch =
     //     relatedResearchCandidates.length > 3 && config.config.topicTags?.length
     //         ? relatedResearchCandidates.filter((research) => {
@@ -241,11 +261,11 @@ export const MultiDimDataPageContent = ({
 
     const faqEntriesForView = useMemo(() => {
         return compact(
-            datapageDataFromVar?.faqs?.flatMap(
+            varDatapageData?.faqs?.flatMap(
                 (faq) => faqEntries?.faqs?.[faq.gdocId]?.[faq.fragmentId]
             )
         )
-    }, [datapageDataFromVar?.faqs, faqEntries])
+    }, [varDatapageData?.faqs, faqEntries])
 
     return (
         <div className="DataPageContent MultiDimDataPageContent">
@@ -253,7 +273,9 @@ export const MultiDimDataPageContent = ({
                 <div className="header__wrapper wrapper grid grid-cols-12 ">
                     <div className="header__left span-cols-8 span-sm-cols-12">
                         <div className="header__supertitle">Data</div>
-                        <h1 className="header__title">{title.title}</h1>
+                        <h1 className="header__title">
+                            {config.config.title.title}
+                        </h1>
                         <div className="header__source">{titleFragments}</div>
                     </div>
                     {hasTopicTags && tagToSlugMap && (
@@ -295,9 +317,9 @@ export const MultiDimDataPageContent = ({
                             />
                         </figure>
                     </div>
-                    {datapageDataFromVar && (
+                    {varDatapageData && (
                         <AboutThisData
-                            datapageData={datapageDataFromVar}
+                            datapageData={varDatapageData}
                             hasFaq={!!faqEntriesForView?.length}
                         />
                     )}
@@ -339,37 +361,35 @@ export const MultiDimDataPageContent = ({
                         </div>
                     </div>
                 )}
-                {datapageDataFromVar?.allCharts &&
-                datapageDataFromVar?.allCharts.length > 0 ? (
+                {varDatapageData?.allCharts &&
+                varDatapageData?.allCharts.length > 0 ? (
                     <div className="section-wrapper section-wrapper__related-charts">
                         <h2 className="related-charts__title" id="all-charts">
                             Explore charts that include this data
                         </h2>
                         <div>
                             <RelatedCharts
-                                charts={datapageDataFromVar.allCharts}
+                                charts={varDatapageData.allCharts}
                             />
                         </div>
                     </div>
                 ) : null}
             </div> */}
-            {datapageDataFromVar && (
+            {varDatapageData && (
                 <MetadataSection
-                    attributionShort={datapageDataFromVar.attributionShort}
-                    attributions={datapageDataFromVar.attributions}
+                    attributionShort={varDatapageData.attributionShort}
+                    attributions={varDatapageData.attributions}
                     canonicalUrl={canonicalUrl}
                     descriptionProcessing={
-                        datapageDataFromVar.descriptionProcessing
+                        varDatapageData.descriptionProcessing
                     }
                     faqEntries={{ faqs: faqEntriesForView }}
-                    origins={datapageDataFromVar.origins}
-                    owidProcessingLevel={
-                        datapageDataFromVar.owidProcessingLevel
-                    }
+                    origins={varDatapageData.origins}
+                    owidProcessingLevel={varDatapageData.owidProcessingLevel}
                     primaryTopic={primaryTopic}
-                    source={datapageDataFromVar.source}
-                    title={datapageDataFromVar.title}
-                    titleVariant={datapageDataFromVar.titleVariant}
+                    source={varDatapageData.source}
+                    title={varDatapageData.title}
+                    titleVariant={varDatapageData.titleVariant}
                 />
             )}
         </div>
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index c3907abf0ab..d8c92ded4a0 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -64,7 +64,7 @@ export interface IndicatorsAfterPreProcessing {
 }
 
 export interface View<IndicatorsType extends Record<string, any>> {
-    dimensions: Record<string, string> // Keys: dimension slugs, values: choice slugs
+    dimensions: MultiDimDimensionChoices
     indicators: IndicatorsType
     config?: Config
 }
@@ -74,6 +74,8 @@ export interface Config {
     subtitle?: string
 }
 
+export type MultiDimDimensionChoices = Record<string, string> // Keys: dimension slugs, values: choice slugs
+
 export interface MultiDimDataPageProps {
     configObj: MultiDimDataPageConfigPreProcessed
     tagToSlugMap?: Record<string, string>

From d3d70c80a2b7e7192f24ec1a6fa1d3b11330907c Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 16:58:25 +0100
Subject: [PATCH 54/65] refactor: get rid of unnecessary `grapherManager`

---
 site/multiDim/MultiDimDataPageContent.tsx | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 1291d948319..1a27eccfcb9 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -1,9 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
     Grapher,
-    GrapherManager,
     GrapherProgrammaticInterface,
-    SelectionArray,
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
 import ReactDOM from "react-dom"
@@ -18,7 +16,6 @@ import {
     getAttributionFragmentsFromVariable,
     OwidVariableWithSourceAndDimension,
     memoize,
-    QueryParams,
     setWindowQueryStr,
     getWindowQueryStr,
     compact,
@@ -28,7 +25,6 @@ import { DebugProvider } from "../gdocs/DebugContext.js"
 import { DATA_API_URL } from "../../settings/clientSettings.js"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 import {
-    IndicatorEntryAfterPreProcessing,
     IndicatorsAfterPreProcessing,
     MultiDimDataPageProps,
     MultiDimDimensionChoices,
@@ -41,7 +37,6 @@ import {
     extractDimensionChoicesFromQueryStr,
     stateToQueryStr,
 } from "./MultiDimUrl.js"
-import { reaction } from "mobx"
 import { useElementBounds, useMobxStateToReactState } from "../hooks.js"
 import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
 declare global {
@@ -112,7 +107,7 @@ const useTitleFragments = (config: MultiDimDataPageConfig) => {
     const title = config.config.title
     return useMemo(
         () => joinTitleFragments(title.titleVariant, title.attributionShort),
-        [config]
+        [title]
     )
 }
 
@@ -190,13 +185,6 @@ export const MultiDimDataPageContent = ({
     const { currentView, dimensionsConfig } = useView(currentSettings, config)
     const { varDatapageData } = useVarDatapageData(currentView)
 
-    const grapherManager = useMemo(
-        (): GrapherManager => ({
-            selection: new SelectionArray(config.config.defaultSelection),
-        }),
-        [config]
-    )
-
     // This is the ACTUAL grapher instance being used, because GrapherFigureView/GrapherWithFallback are doing weird things and are not actually using the grapher instance we pass into it
     // and therefore we can not access the grapher state (e.g. tab, selection) from the grapher instance we pass into it
     // TODO we should probably fix that? seems sensible? change GrapherFigureView around a bit to use the actual grapher inst? or pass a GrapherProgrammaticInterface to it instead?
@@ -312,7 +300,6 @@ export const MultiDimDataPageContent = ({
                                 key={JSON.stringify(currentView)}
                                 {...grapherConfigComputed}
                                 queryStr={queryStr}
-                                manager={grapherManager}
                                 getGrapherInstance={setGrapherInst}
                             />
                         </figure>

From 9ccc8e8b4f0e0e41c7291b03b2748df83c30fcab Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 17:16:10 +0100
Subject: [PATCH 55/65] refactor: use custom type

---
 site/multiDim/MultiDimDataPageConfig.ts       |  9 ++---
 .../MultiDimDataPageSettingsPanel.tsx         | 34 +++++++++++--------
 site/multiDim/MultiDimUrl.ts                  |  7 ++--
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
index 47909634619..e64e0599ad9 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/site/multiDim/MultiDimDataPageConfig.ts
@@ -4,6 +4,7 @@ import {
     DimensionEnriched,
     IndicatorsAfterPreProcessing,
     MultiDimDataPageConfigPreProcessed,
+    MultiDimDimensionChoices,
     View,
 } from "./MultiDimDataPageTypes.js"
 import {
@@ -47,7 +48,7 @@ export class MultiDimDataPageConfig {
     }
 
     filterViewsByDimensions(
-        dimensions: Record<string, string>
+        dimensions: MultiDimDimensionChoices
     ): View<IndicatorsAfterPreProcessing>[] {
         return this.config.views.filter((view) => {
             for (const [dimensionSlug, choiceSlug] of Object.entries(
@@ -62,7 +63,7 @@ export class MultiDimDataPageConfig {
     // This'll only ever find one or zero views, and will throw an error
     // if more than one matching views were found
     findViewByDimensions(
-        dimensions: Record<string, string>
+        dimensions: MultiDimDimensionChoices
     ): View<IndicatorsAfterPreProcessing> | undefined {
         const matchingViews = this.filterViewsByDimensions(dimensions)
         if (matchingViews.length === 0) return undefined
@@ -89,8 +90,8 @@ export class MultiDimDataPageConfig {
      *
      * - @marcelgerber, 2024-07-22
      */
-    filterToAvailableChoices(selectedChoices: Record<string, string>) {
-        const updatedSelectedChoices: Record<string, string> = {}
+    filterToAvailableChoices(selectedChoices: MultiDimDimensionChoices) {
+        const updatedSelectedChoices: MultiDimDimensionChoices = {}
         const dimensionsWithAvailableChoices: Record<
             string,
             DimensionEnriched
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index 792429262e9..eb51d714d3b 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -1,5 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { DimensionEnriched } from "./MultiDimDataPageTypes.js"
+import {
+    DimensionEnriched,
+    MultiDimDimensionChoices,
+} from "./MultiDimDataPageTypes.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
@@ -116,8 +119,8 @@ const DimensionDropdown = (props: {
 
 export const MultiDimSettingsPanel = (props: {
     config: MultiDimDataPageConfig
-    currentSettings: Record<string, string>
-    updateSettings?: (currentSettings: Record<string, string>) => void
+    currentSettings: MultiDimDimensionChoices
+    updateSettings?: (currentSettings: MultiDimDimensionChoices) => void
 }) => {
     const { config, currentSettings, updateSettings } = props
 
@@ -149,23 +152,24 @@ export const MultiDimSettingsPanel = (props: {
             setAvailableSettings(dimensionsWithAvailableChoices)
     }, [resolvedCurrentSettings, config, updateSettings, availableSettings])
 
-    const settings = Object.values(availableSettings).map((dim) => (
-        <DimensionDropdown
-            key={dim.slug}
-            dimension={dim}
-            currentChoiceSlug={resolvedCurrentSettings[dim.slug]}
-            onChange={(slug, value) =>
-                updateSettings?.({ ...resolvedCurrentSettings, [slug]: value })
-            }
-        />
-    ))
-
     return (
         <div className="md-settings-row">
             <span className="h5-black-caps md-settings__configure-data">
                 Configure the data
             </span>
-            {settings}
+            {Object.values(availableSettings).map((dim) => (
+                <DimensionDropdown
+                    key={dim.slug}
+                    dimension={dim}
+                    currentChoiceSlug={resolvedCurrentSettings[dim.slug]}
+                    onChange={(slug, value) =>
+                        updateSettings?.({
+                            ...resolvedCurrentSettings,
+                            [slug]: value,
+                        })
+                    }
+                />
+            ))}
         </div>
     )
 }
diff --git a/site/multiDim/MultiDimUrl.ts b/site/multiDim/MultiDimUrl.ts
index efe598b094b..ce4d88206be 100644
--- a/site/multiDim/MultiDimUrl.ts
+++ b/site/multiDim/MultiDimUrl.ts
@@ -1,10 +1,11 @@
 import { QueryParams } from "@ourworldindata/types"
 import { pick, Url } from "@ourworldindata/utils"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
+import { MultiDimDimensionChoices } from "./MultiDimDataPageTypes.js"
 
 export const stateToQueryStr = (
     grapherQueryParams: QueryParams,
-    dimensionChoices: Record<string, string>
+    dimensionChoices: MultiDimDimensionChoices
 ) => {
     return Url.fromQueryParams(grapherQueryParams).updateQueryParams(
         dimensionChoices
@@ -14,13 +15,13 @@ export const stateToQueryStr = (
 export const extractDimensionChoicesFromQueryStr = (
     queryStr: string,
     config: MultiDimDataPageConfig
-): Record<string, string> => {
+): MultiDimDimensionChoices => {
     const queryParams = Url.fromQueryStr(queryStr).queryParams
     const dimensions = config.dimensions
     const dimensionChoices = pick(
         queryParams,
         Object.keys(dimensions)
-    ) as Record<string, string>
+    ) as MultiDimDimensionChoices
 
     return dimensionChoices
 }

From c6d89f47d7969b2f5815d0dd0ef44d9a875ac216 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 17:30:34 +0100
Subject: [PATCH 56/65] feat(settings): add feature flag code

---
 settings/clientSettings.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/settings/clientSettings.ts b/settings/clientSettings.ts
index 7e54564fdc2..240fa8655a3 100644
--- a/settings/clientSettings.ts
+++ b/settings/clientSettings.ts
@@ -90,3 +90,14 @@ export const GDOCS_DETAILS_ON_DEMAND_ID: string =
     process.env.GDOCS_DETAILS_ON_DEMAND_ID ?? ""
 
 export const PUBLISHED_AT_FORMAT = "ddd, MMM D, YYYY HH:mm"
+
+// Feature flags: FEATURE_FLAGS is a comma-separated list of flags, and they need to be part of this enum to be considered
+export enum FeatureFlagFeature {
+    MultiDimDataPage = "MultiDimDataPage",
+}
+const featureFlagsRaw = process.env.FEATURE_FLAGS?.trim().split(",") ?? []
+export const FEATURE_FLAGS: Set<FeatureFlagFeature> = new Set(
+    Object.keys(FeatureFlagFeature).filter((key) =>
+        featureFlagsRaw.includes(key)
+    ) as FeatureFlagFeature[]
+)

From dd97a0701f1f40b80dd497734346e4ab34360ada Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 17:37:35 +0100
Subject: [PATCH 57/65] enhance(multi-dim): feature flag

---
 baker/SiteBaker.tsx        | 8 ++++++++
 settings/clientSettings.ts | 5 ++++-
 settings/serverSettings.ts | 2 ++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
index 4194604377d..4c0b0e1b75e 100644
--- a/baker/SiteBaker.tsx
+++ b/baker/SiteBaker.tsx
@@ -9,6 +9,7 @@ import {
     BASE_DIR,
     GDOCS_DETAILS_ON_DEMAND_ID,
     BAKED_GRAPHER_URL,
+    FEATURE_FLAGS,
 } from "../settings/serverSettings.js"
 
 import {
@@ -88,6 +89,7 @@ import {
 import {
     BAKED_BASE_URL,
     BAKED_GRAPHER_EXPORTS_BASE_URL,
+    FeatureFlagFeature,
 } from "../settings/clientSettings.js"
 import pMap from "p-map"
 import { GdocDataInsight } from "../db/model/Gdoc/GdocDataInsight.js"
@@ -756,6 +758,12 @@ export class SiteBaker {
 
     private async bakeMultiDimPages(knex: db.KnexReadWriteTransaction) {
         if (!this.bakeSteps.has("multiDimPages")) return
+        if (!FEATURE_FLAGS.has(FeatureFlagFeature.MultiDimDataPage)) {
+            console.log(
+                "Skipping baking multi-dim pages because feature flag is not set"
+            )
+            return
+        }
 
         await bakeAllMultiDimDataPages(knex, this.bakedSiteDir)
 
diff --git a/settings/clientSettings.ts b/settings/clientSettings.ts
index 240fa8655a3..750d1dc4b8c 100644
--- a/settings/clientSettings.ts
+++ b/settings/clientSettings.ts
@@ -95,7 +95,10 @@ export const PUBLISHED_AT_FORMAT = "ddd, MMM D, YYYY HH:mm"
 export enum FeatureFlagFeature {
     MultiDimDataPage = "MultiDimDataPage",
 }
-const featureFlagsRaw = process.env.FEATURE_FLAGS?.trim().split(",") ?? []
+const featureFlagsRaw =
+    (typeof process.env.FEATURE_FLAGS === "string" &&
+        process.env.FEATURE_FLAGS.trim()?.split(",")) ||
+    []
 export const FEATURE_FLAGS: Set<FeatureFlagFeature> = new Set(
     Object.keys(FeatureFlagFeature).filter((key) =>
         featureFlagsRaw.includes(key)
diff --git a/settings/serverSettings.ts b/settings/serverSettings.ts
index c6f3c42cbf2..02771ed1b3c 100644
--- a/settings/serverSettings.ts
+++ b/settings/serverSettings.ts
@@ -173,6 +173,8 @@ export const IMAGE_HOSTING_R2_REGION: string =
 
 export const DATA_API_URL: string = clientSettings.DATA_API_URL
 
+export const FEATURE_FLAGS = clientSettings.FEATURE_FLAGS
+
 export const BUILDKITE_API_ACCESS_TOKEN: string =
     serverSettings.BUILDKITE_API_ACCESS_TOKEN ?? ""
 export const BUILDKITE_DEPLOY_CONTENT_PIPELINE_SLUG: string =

From f00b5f2f3cd443db52368081938b420034b34caa Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 13 Aug 2024 18:07:18 +0100
Subject: [PATCH 58/65] fix: handle empty default selection

---
 site/multiDim/MultiDimDataPageContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 1a27eccfcb9..8568466f6ea 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -215,7 +215,7 @@ export const MultiDimDataPageContent = ({
             ...currentView?.config,
             dimensions: dimensionsConfig,
             isEmbeddedInADataPage: true,
-            selectedEntityNames: config.config.defaultSelection,
+            selectedEntityNames: config.config.defaultSelection ?? [],
 
             bounds,
         } as GrapherProgrammaticInterface

From fa35753425069d22d3cc45f233f74c0529f2e3b8 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 15 Aug 2024 11:42:00 +0100
Subject: [PATCH 59/65] fix: fix wrong import

---
 site/multiDim/MultiDimDataPageTypes.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/site/multiDim/MultiDimDataPageTypes.ts
index d8c92ded4a0..e28b57bc7a4 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/site/multiDim/MultiDimDataPageTypes.ts
@@ -1,8 +1,8 @@
-import { IndicatorTitleWithFragments } from "@ourworldindata/types"
 import {
+    IndicatorTitleWithFragments,
     FaqEntryKeyedByGdocIdAndFragmentId,
     PrimaryTopic,
-} from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
+} from "@ourworldindata/types"
 
 // Indicator ID, catalog path, or maybe an array of those
 export type IndicatorEntryBeforePreProcessing = string | number | undefined

From f580f6d8533586a64ed18c807ea83d928c60b953 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 17:49:06 +0100
Subject: [PATCH 60/65] refactor: move `MultiDimDataPageTypes` to types package

---
 baker/MultiDimBaker.tsx                            |  4 ++--
 .../types/src/gdocTypes/Datapage.ts                |  4 ----
 packages/@ourworldindata/types/src/index.ts        | 14 ++++++++++++++
 .../types/src/siteTypes/MultiDimDataPage.ts        | 12 +++++++-----
 site/multiDim/MultiDimDataPage.tsx                 |  2 +-
 site/multiDim/MultiDimDataPageConfig.ts            |  2 +-
 site/multiDim/MultiDimDataPageContent.tsx          |  2 +-
 site/multiDim/MultiDimDataPageSettingsPanel.tsx    |  2 +-
 site/multiDim/MultiDimUrl.ts                       |  3 +--
 9 files changed, 28 insertions(+), 17 deletions(-)
 rename site/multiDim/MultiDimDataPageTypes.ts => packages/@ourworldindata/types/src/siteTypes/MultiDimDataPage.ts (88%)

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index 4011af4070f..2957b4d402f 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -8,7 +8,8 @@ import {
     MultiDimDataPageConfigPreProcessed,
     MultiDimDataPageConfigRaw,
     MultiDimDataPageProps,
-} from "../site/multiDim/MultiDimDataPageTypes.js"
+    FaqEntryKeyedByGdocIdAndFragmentId,
+} from "@ourworldindata/types"
 import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
 import * as db from "../db/db.js"
 import { renderToHtmlPage } from "./siteRenderers.js"
@@ -34,7 +35,6 @@ import {
     resolveFaqsForVariable,
 } from "./DatapageHelpers.js"
 import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
-import { FaqEntryKeyedByGdocIdAndFragmentId } from "@ourworldindata/types/dist/gdocTypes/Datapage.js"
 
 // TODO Make this dynamic
 const baseDir = findProjectBaseDir(__dirname)
diff --git a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
index 1f8bbe609a4..fc0e0a2e7b8 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/Datapage.ts
@@ -127,10 +127,6 @@ export type FaqEntryData = {
     faqs: OwidEnrichedGdocBlock[]
 }
 
-export type FaqEntryKeyedByGdocIdAndFragmentId = {
-    faqs: Record<string, Record<string, OwidEnrichedGdocBlock[]>>
-}
-
 export interface DataPageV2ContentFields {
     datapageData: DataPageDataV2
     faqEntries: FaqEntryData | undefined
diff --git a/packages/@ourworldindata/types/src/index.ts b/packages/@ourworldindata/types/src/index.ts
index 62ff0f05ca8..557996d2119 100644
--- a/packages/@ourworldindata/types/src/index.ts
+++ b/packages/@ourworldindata/types/src/index.ts
@@ -648,3 +648,17 @@ export {
     type DbEnrichedLatestWork,
     parseLatestWork,
 } from "./domainTypes/Author.js"
+
+export type {
+    IndicatorEntryBeforePreProcessing,
+    IndicatorsAfterPreProcessing,
+    MultiDimDataPageConfigPreProcessed,
+    MultiDimDataPageConfigRaw,
+    MultiDimDataPageProps,
+    FaqEntryKeyedByGdocIdAndFragmentId,
+    Choice,
+    ChoicesEnriched,
+    DimensionEnriched,
+    MultiDimDimensionChoices,
+    View,
+} from "./siteTypes/MultiDimDataPage.js"
diff --git a/site/multiDim/MultiDimDataPageTypes.ts b/packages/@ourworldindata/types/src/siteTypes/MultiDimDataPage.ts
similarity index 88%
rename from site/multiDim/MultiDimDataPageTypes.ts
rename to packages/@ourworldindata/types/src/siteTypes/MultiDimDataPage.ts
index e28b57bc7a4..f3636baf233 100644
--- a/site/multiDim/MultiDimDataPageTypes.ts
+++ b/packages/@ourworldindata/types/src/siteTypes/MultiDimDataPage.ts
@@ -1,8 +1,6 @@
-import {
-    IndicatorTitleWithFragments,
-    FaqEntryKeyedByGdocIdAndFragmentId,
-    PrimaryTopic,
-} from "@ourworldindata/types"
+import { OwidEnrichedGdocBlock } from "../gdocTypes/ArchieMlComponents.js"
+import { PrimaryTopic } from "../gdocTypes/Datapage.js"
+import { IndicatorTitleWithFragments } from "../OwidVariable.js"
 
 // Indicator ID, catalog path, or maybe an array of those
 export type IndicatorEntryBeforePreProcessing = string | number | undefined
@@ -76,6 +74,10 @@ export interface Config {
 
 export type MultiDimDimensionChoices = Record<string, string> // Keys: dimension slugs, values: choice slugs
 
+export type FaqEntryKeyedByGdocIdAndFragmentId = {
+    faqs: Record<string, Record<string, OwidEnrichedGdocBlock[]>>
+}
+
 export interface MultiDimDataPageProps {
     configObj: MultiDimDataPageConfigPreProcessed
     tagToSlugMap?: Record<string, string>
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index 0e8335b9544..7edc6408588 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -5,7 +5,7 @@ import { SiteHeader } from "../SiteHeader.js"
 import { OWID_DATAPAGE_CONTENT_ROOT_ID } from "../DataPageV2Content.js"
 import { SiteFooter } from "../SiteFooter.js"
 import { SiteFooterContext, serializeJSONForHTML } from "@ourworldindata/utils"
-import { MultiDimDataPageProps } from "./MultiDimDataPageTypes.js"
+import { MultiDimDataPageProps } from "@ourworldindata/types"
 
 export const MultiDimDataPage = (props: {
     baseUrl: string
diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/site/multiDim/MultiDimDataPageConfig.ts
index e64e0599ad9..5f78882ae87 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/site/multiDim/MultiDimDataPageConfig.ts
@@ -6,7 +6,7 @@ import {
     MultiDimDataPageConfigPreProcessed,
     MultiDimDimensionChoices,
     View,
-} from "./MultiDimDataPageTypes.js"
+} from "@ourworldindata/types"
 import {
     DimensionProperty,
     groupBy,
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 8568466f6ea..9166e3be796 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -29,7 +29,7 @@ import {
     MultiDimDataPageProps,
     MultiDimDimensionChoices,
     View,
-} from "./MultiDimDataPageTypes.js"
+} from "@ourworldindata/types"
 import AboutThisData from "../AboutThisData.js"
 import TopicTags from "../TopicTags.js"
 import MetadataSection from "../MetadataSection.js"
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index eb51d714d3b..09471dcd8e0 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
     DimensionEnriched,
     MultiDimDimensionChoices,
-} from "./MultiDimDataPageTypes.js"
+} from "@ourworldindata/types"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
diff --git a/site/multiDim/MultiDimUrl.ts b/site/multiDim/MultiDimUrl.ts
index ce4d88206be..e96c4e65a8c 100644
--- a/site/multiDim/MultiDimUrl.ts
+++ b/site/multiDim/MultiDimUrl.ts
@@ -1,7 +1,6 @@
-import { QueryParams } from "@ourworldindata/types"
+import { QueryParams, MultiDimDimensionChoices } from "@ourworldindata/types"
 import { pick, Url } from "@ourworldindata/utils"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import { MultiDimDimensionChoices } from "./MultiDimDataPageTypes.js"
 
 export const stateToQueryStr = (
     grapherQueryParams: QueryParams,

From f5925f0ea7000d942da812ca0edc7381c6f1971b Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 17:55:30 +0100
Subject: [PATCH 61/65] enhance: address review comment

---
 site/multiDim/MultiDimDataPageContent.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 9166e3be796..f1d16824ad5 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -171,12 +171,10 @@ export const MultiDimDataPageContent = ({
     )
     const titleFragments = useTitleFragments(config)
 
-    const [initialChoices] = useState(() =>
-        initialQueryStr
+    const [currentSettings, setCurrentSettings] = useState(() => {
+        const initialChoices = initialQueryStr
             ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
             : {}
-    )
-    const [currentSettings, setCurrentSettings] = useState(() => {
         const { selectedChoices } =
             config.filterToAvailableChoices(initialChoices)
         return selectedChoices

From e030e6da3da4f3c46dac158a90ebfb384418f629 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 17:58:30 +0100
Subject: [PATCH 62/65] enhance: add additional class on `<body>`

---
 site/multiDim/MultiDimDataPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index 7edc6408588..7b97e13cae8 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -41,7 +41,7 @@ export const MultiDimDataPage = (props: {
                     crossOrigin="anonymous"
                 />
             </Head>
-            <body className="DataPage">
+            <body className="DataPage MultiDimDataPage">
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
                     <script

From efe749336337d0ae1a921e34a51520c6afba794e Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 18:11:20 +0100
Subject: [PATCH 63/65] refactor: move `MultiDimDataPage{Config,Url}` to
 `utils`

---
 baker/MultiDimBaker.tsx                       | 16 ++++-----
 .../utils/src}/MultiDimDataPageConfig.test.ts |  0
 .../utils/src}/MultiDimDataPageConfig.ts      | 35 +++++++++++++++----
 packages/@ourworldindata/utils/src/index.ts   |  6 ++++
 site/multiDim/MultiDimDataPageContent.tsx     | 12 +++----
 .../MultiDimDataPageSettingsPanel.tsx         |  7 ++--
 site/multiDim/MultiDimUrl.ts                  | 26 --------------
 7 files changed, 53 insertions(+), 49 deletions(-)
 rename {site/multiDim => packages/@ourworldindata/utils/src}/MultiDimDataPageConfig.test.ts (100%)
 rename {site/multiDim => packages/@ourworldindata/utils/src}/MultiDimDataPageConfig.ts (89%)
 delete mode 100644 site/multiDim/MultiDimUrl.ts

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index 2957b4d402f..79de92fd0b9 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -10,7 +10,14 @@ import {
     MultiDimDataPageProps,
     FaqEntryKeyedByGdocIdAndFragmentId,
 } from "@ourworldindata/types"
-import { MultiDimDataPageConfig } from "../site/multiDim/MultiDimDataPageConfig.js"
+import {
+    MultiDimDataPageConfig,
+    JsonError,
+    keyBy,
+    mapValues,
+    OwidVariableWithSource,
+    pick,
+} from "@ourworldindata/utils"
 import * as db from "../db/db.js"
 import { renderToHtmlPage } from "./siteRenderers.js"
 import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
@@ -22,13 +29,6 @@ import {
     getVariableMetadata,
 } from "../db/model/Variable.js"
 import pMap from "p-map"
-import {
-    JsonError,
-    keyBy,
-    mapValues,
-    OwidVariableWithSource,
-    pick,
-} from "@ourworldindata/utils"
 import {
     fetchAndParseFaqs,
     getPrimaryTopic,
diff --git a/site/multiDim/MultiDimDataPageConfig.test.ts b/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.test.ts
similarity index 100%
rename from site/multiDim/MultiDimDataPageConfig.test.ts
rename to packages/@ourworldindata/utils/src/MultiDimDataPageConfig.test.ts
diff --git a/site/multiDim/MultiDimDataPageConfig.ts b/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts
similarity index 89%
rename from site/multiDim/MultiDimDataPageConfig.ts
rename to packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts
index 5f78882ae87..aed3971ba91 100644
--- a/site/multiDim/MultiDimDataPageConfig.ts
+++ b/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts
@@ -6,13 +6,12 @@ import {
     MultiDimDataPageConfigPreProcessed,
     MultiDimDimensionChoices,
     View,
-} from "@ourworldindata/types"
-import {
-    DimensionProperty,
-    groupBy,
-    keyBy,
+    QueryParams,
     OwidChartDimensionInterface,
-} from "@ourworldindata/utils"
+    DimensionProperty,
+} from "@ourworldindata/types"
+import { groupBy, keyBy, pick } from "./Util.js"
+import { Url } from "./urls/Url.js"
 
 export class MultiDimDataPageConfig {
     private constructor(
@@ -170,3 +169,27 @@ export class MultiDimDataPageConfig {
             .filter((dim) => dim.variableId !== undefined)
     }
 }
+
+// Helpers to convert from and to query strings
+export const multiDimStateToQueryStr = (
+    grapherQueryParams: QueryParams,
+    dimensionChoices: MultiDimDimensionChoices
+) => {
+    return Url.fromQueryParams(grapherQueryParams).updateQueryParams(
+        dimensionChoices
+    ).queryStr
+}
+
+export const extractMultiDimChoicesFromQueryStr = (
+    queryStr: string,
+    config: MultiDimDataPageConfig
+): MultiDimDimensionChoices => {
+    const queryParams = Url.fromQueryStr(queryStr).queryParams
+    const dimensions = config.dimensions
+    const dimensionChoices = pick(
+        queryParams,
+        Object.keys(dimensions)
+    ) as MultiDimDimensionChoices
+
+    return dimensionChoices
+}
diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
index 9c32fa14bd1..31a64b9740d 100644
--- a/packages/@ourworldindata/utils/src/index.ts
+++ b/packages/@ourworldindata/utils/src/index.ts
@@ -329,3 +329,9 @@ export {
 } from "./DonateUtils.js"
 
 export { isAndroid, isIOS } from "./BrowserUtils.js"
+
+export {
+    MultiDimDataPageConfig,
+    extractMultiDimChoicesFromQueryStr,
+    multiDimStateToQueryStr,
+} from "./MultiDimDataPageConfig.js"
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index f1d16824ad5..f2db3c04f20 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -19,11 +19,13 @@ import {
     setWindowQueryStr,
     getWindowQueryStr,
     compact,
+    MultiDimDataPageConfig,
+    extractMultiDimChoicesFromQueryStr,
+    multiDimStateToQueryStr,
 } from "@ourworldindata/utils"
 import cx from "classnames"
 import { DebugProvider } from "../gdocs/DebugContext.js"
 import { DATA_API_URL } from "../../settings/clientSettings.js"
-import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
 import {
     IndicatorsAfterPreProcessing,
     MultiDimDataPageProps,
@@ -33,10 +35,6 @@ import {
 import AboutThisData from "../AboutThisData.js"
 import TopicTags from "../TopicTags.js"
 import MetadataSection from "../MetadataSection.js"
-import {
-    extractDimensionChoicesFromQueryStr,
-    stateToQueryStr,
-} from "./MultiDimUrl.js"
 import { useElementBounds, useMobxStateToReactState } from "../hooks.js"
 import { MultiDimSettingsPanel } from "./MultiDimDataPageSettingsPanel.js"
 declare global {
@@ -173,7 +171,7 @@ export const MultiDimDataPageContent = ({
 
     const [currentSettings, setCurrentSettings] = useState(() => {
         const initialChoices = initialQueryStr
-            ? extractDimensionChoicesFromQueryStr(initialQueryStr, config)
+            ? extractMultiDimChoicesFromQueryStr(initialQueryStr, config)
             : {}
         const { selectedChoices } =
             config.filterToAvailableChoices(initialChoices)
@@ -199,7 +197,7 @@ export const MultiDimDataPageContent = ({
     const queryStr = useMemo(
         () =>
             grapherChangedParams !== undefined
-                ? stateToQueryStr(grapherChangedParams, currentSettings)
+                ? multiDimStateToQueryStr(grapherChangedParams, currentSettings)
                 : initialQueryStr,
         [grapherChangedParams, currentSettings, initialQueryStr]
     )
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index 09471dcd8e0..6f81f10b3ce 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -6,8 +6,11 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
-import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import { isEqual, mapValues } from "@ourworldindata/utils"
+import {
+    MultiDimDataPageConfig,
+    isEqual,
+    mapValues,
+} from "@ourworldindata/utils"
 import { OverlayHeader, RadioButton } from "@ourworldindata/components"
 import { useTriggerOnEscape, useTriggerWhenClickOutside } from "../hooks.js"
 
diff --git a/site/multiDim/MultiDimUrl.ts b/site/multiDim/MultiDimUrl.ts
deleted file mode 100644
index e96c4e65a8c..00000000000
--- a/site/multiDim/MultiDimUrl.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { QueryParams, MultiDimDimensionChoices } from "@ourworldindata/types"
-import { pick, Url } from "@ourworldindata/utils"
-import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-
-export const stateToQueryStr = (
-    grapherQueryParams: QueryParams,
-    dimensionChoices: MultiDimDimensionChoices
-) => {
-    return Url.fromQueryParams(grapherQueryParams).updateQueryParams(
-        dimensionChoices
-    ).queryStr
-}
-
-export const extractDimensionChoicesFromQueryStr = (
-    queryStr: string,
-    config: MultiDimDataPageConfig
-): MultiDimDimensionChoices => {
-    const queryParams = Url.fromQueryStr(queryStr).queryParams
-    const dimensions = config.dimensions
-    const dimensionChoices = pick(
-        queryParams,
-        Object.keys(dimensions)
-    ) as MultiDimDimensionChoices
-
-    return dimensionChoices
-}

From 29b9dc2de331e4b7e8b808d5b3f552129dadbff1 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 18:17:25 +0100
Subject: [PATCH 64/65] style: add explicit return types

---
 .../utils/src/MultiDimDataPageConfig.ts         | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts b/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts
index aed3971ba91..23d17f1e390 100644
--- a/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts
+++ b/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts
@@ -13,16 +13,23 @@ import {
 import { groupBy, keyBy, pick } from "./Util.js"
 import { Url } from "./urls/Url.js"
 
+interface FilterToAvailableResult {
+    selectedChoices: MultiDimDimensionChoices
+    dimensionsWithAvailableChoices: Record<string, DimensionEnriched>
+}
+
 export class MultiDimDataPageConfig {
     private constructor(
         public readonly config: MultiDimDataPageConfigPreProcessed
     ) {}
 
-    static fromJson(jsonString: string) {
+    static fromJson(jsonString: string): MultiDimDataPageConfig {
         return new MultiDimDataPageConfig(JSON.parse(jsonString))
     }
 
-    static fromObject(obj: MultiDimDataPageConfigPreProcessed) {
+    static fromObject(
+        obj: MultiDimDataPageConfigPreProcessed
+    ): MultiDimDataPageConfig {
         return new MultiDimDataPageConfig(obj)
     }
 
@@ -89,7 +96,9 @@ export class MultiDimDataPageConfig {
      *
      * - @marcelgerber, 2024-07-22
      */
-    filterToAvailableChoices(selectedChoices: MultiDimDimensionChoices) {
+    filterToAvailableChoices(
+        selectedChoices: MultiDimDimensionChoices
+    ): FilterToAvailableResult {
         const updatedSelectedChoices: MultiDimDimensionChoices = {}
         const dimensionsWithAvailableChoices: Record<
             string,
@@ -174,7 +183,7 @@ export class MultiDimDataPageConfig {
 export const multiDimStateToQueryStr = (
     grapherQueryParams: QueryParams,
     dimensionChoices: MultiDimDimensionChoices
-) => {
+): string => {
     return Url.fromQueryParams(grapherQueryParams).updateQueryParams(
         dimensionChoices
     ).queryStr

From ef530be641a249ea0f65ca0a0f38ccd2bd3d2335 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 18:24:43 +0100
Subject: [PATCH 65/65] test: fix test failures

---
 .../utils/src/MultiDimDataPageConfig.test.ts  | 140 ++++++++----------
 public/multi-dim/mixed.yml                    |   9 ++
 2 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.test.ts b/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.test.ts
index 5c6ba85cc20..07342b78f51 100644
--- a/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.test.ts
+++ b/packages/@ourworldindata/utils/src/MultiDimDataPageConfig.test.ts
@@ -1,100 +1,90 @@
 #! /usr/bin/env jest
 
+import { MultiDimDataPageConfigPreProcessed } from "@ourworldindata/types"
 import { MultiDimDataPageConfig } from "./MultiDimDataPageConfig.js"
-import YAML from "yaml"
 
 it("fromObject", () => {
     const config = MultiDimDataPageConfig.fromObject({ title: "Test" } as any)
     expect(config.config.title).toBe("Test")
 })
 
+const CONFIG: MultiDimDataPageConfigPreProcessed = {
+    title: {
+        title: "Anything goes",
+    },
+    dimensions: [
+        {
+            slug: "view",
+            name: "View",
+            choices: [
+                {
+                    slug: "stunting",
+                    name: "Stunting",
+                },
+                {
+                    slug: "poverty",
+                    name: "Poverty",
+                },
+            ],
+        },
+        {
+            slug: "interval",
+            name: "Time interval",
+            choices: [
+                {
+                    slug: "yearly",
+                    name: "Yearly",
+                },
+                {
+                    slug: "weekly",
+                    name: "Weekly",
+                },
+            ],
+        },
+    ],
+    views: [
+        {
+            dimensions: {
+                view: "stunting",
+                interval: "yearly",
+            },
+            indicators: {
+                y: [111, 222],
+            },
+        },
+        {
+            dimensions: {
+                view: "poverty",
+                interval: "yearly",
+            },
+            indicators: {
+                y: [819727],
+            },
+        },
+    ],
+}
+
 describe("methods", () => {
-    const yaml = `
-    name: CO₂ emissions
-    dimensions_title: by fuel type and sector
-    common_indicator_path_prefix: gcp/2024/co2_and_ghg_emissions/ # optional
-    dimensions:
-        - slug: fuel_type
-          name: Fuel type
-          description: The fuel where these emissions stem from. # optional
-          multi_select: true # optional
-          choices:
-              - slug: gas
-                name: Natural gas
-                description: Natural gas, e.g. methane or propane.
-              - slug: cement
-                name: Cement
-                description: Emissions from the drying-out of cement.
-              - slug: all
-                name: All
-                description: Emissions from all fuel types.
-                multi_select: false
-        - slug: sector
-          name: Sector
-          description: The sector where these emissions stem from.
-          choices:
-              - slug: agriculture
-                name: Agriculture
-                description: Agricultural emissions, e.g. from land use change and emissions from livestock and harvesting.
-              - slug: transport
-                name: Transportation
-                description: Emissions from global transport, including cars, trucks, rail transport and global shipping.
-              - slug: industry
-                name: Industry
-                description: Emissions from the production of non-agricultural goods, e.g. steel and glass.
-              - slug: heating
-              - slug: electricity
-    views:
-        - dimensions:
-              fuel_type: gas
-              sector: transport
-          indicators:
-              emissions__gas__transport: y
-          config:
-              title: Natural gas emissions in transport
-        - dimensions:
-              fuel_type: oil
-              sector: transport
-          indicators:
-              emissions__oil__transport: y
-          config:
-              title: Oil emissions in transport
-              subtitle: ...
-        - dimensions: # This dimension uses other fields; they probably are nicer to work with
-              fuel_type: solar
-              sector: electricity
-          indicators:
-              emissions__solar__transport: y
-          config:
-              title: ...
-              subtitle: ...
-`
-    const config = MultiDimDataPageConfig.fromObject(YAML.parse(yaml))
+    const config = MultiDimDataPageConfig.fromObject(CONFIG)
 
     it("dimensions", () => {
-        expect(Object.keys(config.dimensions)).toEqual(["fuel_type", "sector"])
-        expect(Object.keys(config.dimensions["fuel_type"].choices)).toEqual([
-            "gas",
-            "cement",
-            "all",
+        expect(Object.keys(config.dimensions)).toEqual(["view", "interval"])
+        expect(Object.keys(config.dimensions["view"].choicesBySlug)).toEqual([
+            "stunting",
+            "poverty",
         ])
     })
 
     it("filterViewsByDimensions", () => {
         const views = config.filterViewsByDimensions({
-            sector: "transport",
+            view: "stunting",
         })
-        expect(views).toHaveLength(2)
-        expect(views.map((v) => v.config?.title)).toEqual([
-            "Natural gas emissions in transport",
-            "Oil emissions in transport",
-        ])
+        expect(views).toHaveLength(1)
     })
 
     it("findViewByDimensions", () => {
         const view = config.findViewByDimensions({
-            fuel_type: "gas",
-            sector: "transport",
+            view: "stunting",
         })
         expect(view).toBeDefined()
     })
diff --git a/public/multi-dim/mixed.yml b/public/multi-dim/mixed.yml
index 501f1e56f29..3c9542a4c46 100644
--- a/public/multi-dim/mixed.yml
+++ b/public/multi-dim/mixed.yml
@@ -9,13 +9,22 @@ dimensions:
             name: Stunting
           - slug: poverty
             name: Poverty
+    - slug: interval
+      name: Time interval
+      choices:
+          - slug: yearly
+            name: Yearly
+          - slug: weekly
+            name: Weekly
 
 views:
     - dimensions:
           view: stunting
+          interval: yearly
       indicators:
           y: grapher/worldbank_wdi/2024-05-20/wdi/wdi#sh_sta_stnt_zs
     - dimensions:
           view: poverty
+          interval: yearly
       indicators:
           y: 819727