✨ Use grapher config from API instead of from HTML in multiembedder

adminSiteServer/mockSiteRouter.tsx

@@ -42,7 +42,11 @@ 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 {
+    DbRawChartConfig,
+    JsonError,
+    parseChartConfig,
+} 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"
@@ -197,6 +201,29 @@ mockSiteRouter.get("/collection/custom", async (_, res) => {
     return res.send(await renderDynamicCollectionPage())
 })
 
+getPlainRouteWithROTransaction(
+    mockSiteRouter,
+    "/grapher/by-uuid/:uuid.config.json",
+    async (req, res, trx) => {
+        const chartRow = await db.knexRawFirst<Pick<DbRawChartConfig, "full">>(
+            trx,
+            "SELECT full FROM chart_configs WHERE id = ?",
+            [req.params.uuid]
+        )
+        if (!chartRow) throw new JsonError("No such chart", 404)
+        const config = parseChartConfig(chartRow.full)
+        res.json(config)
+    }
+)
+
+getPlainRouteWithROTransaction(
+    mockSiteRouter,
+    "/grapher/:slug.config.json",
+    async (req, res, trx) => {
+        const chartRow = await getChartConfigBySlug(trx, req.params.slug)
+        res.json(chartRow.config)
+    }
+)
 // TODO: this transaction is only RW because somewhere inside it we fetch images
 getPlainRouteNonIdempotentWithRWTransaction(
     mockSiteRouter,

settings/clientSettings.ts

@@ -37,6 +37,9 @@ export const BAKED_SITE_EXPORTS_BASE_URL: string =
 export const GRAPHER_DYNAMIC_THUMBNAIL_URL: string =
     process.env.GRAPHER_DYNAMIC_THUMBNAIL_URL ?? `${BAKED_GRAPHER_URL}`
 
+export const GRAPHER_DYNAMIC_CONFIG_URL: string =
+    process.env.GRAPHER_DYNAMIC_CONFIG_URL ?? `${BAKED_GRAPHER_URL}`
+
 export const ADMIN_BASE_URL: string =
     process.env.ADMIN_BASE_URL ??
     `http://${ADMIN_SERVER_HOST}:${ADMIN_SERVER_PORT}`

site/multiembedder/MultiEmbedder.tsx

@@ -36,6 +36,7 @@ import {
     ADMIN_BASE_URL,
     BAKED_GRAPHER_URL,
     DATA_API_URL,
+    GRAPHER_DYNAMIC_CONFIG_URL,
 } from "../../settings/clientSettings.js"
 import Bugsnag from "@bugsnag/js"
 import { embedDynamicCollectionGrapher } from "../collections/DynamicCollection.js"
@@ -159,9 +160,8 @@ class MultiEmbedder {
             dataApiUrl: DATA_API_URL,
         }
 
-        const html = await fetchText(fullUrl)
-
         if (isExplorer) {
+            const html = await fetchText(fullUrl)
             let grapherConfigs = deserializeJSONFromHTML(
                 html,
                 EMBEDDED_EXPLORER_GRAPHER_CONFIGS
@@ -201,8 +201,13 @@ class MultiEmbedder {
             ReactDOM.render(<Explorer {...props} />, figure)
         } else {
             figure.classList.remove(GRAPHER_PREVIEW_CLASS)
+            const url = new URL(fullUrl)
+            const slug = url.pathname.split("/").pop()
+            const configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/${slug}.config.json`
 
-            const grapherPageConfig = deserializeJSONFromHTML(html)
+            const grapherPageConfig = await fetch(configUrl).then((res) =>
+                res.json()
+            )
 
             const figureConfigAttr = figure.getAttribute(
                 GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR