✨ Use grapher config from API instead of from HTML in multiembedder (#…

…3884)

This PR switches the multi-embedder from using the chart config in the HTML file to the explicit grapher API. 

The current (draft) version just uses the same url as the request came in on but that means that for local dev you need to have baked pages to use port :8788. It's probably nicer to have an explicit "grapher api url" setting that defaults to the same as the main page for prod but can be set differently for local dev or staging

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