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

Also adds two new mockSiteRouter routes so that
in local dev we can fetch grapher configs from the
DB instead of R2 via the admin API

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