From e5338b60fe6f478bb87b4d3773eb9edccdc064f8 Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Mon, 19 Aug 2024 20:49:32 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Use=20grapher=20config=20from=20API?=
 =?UTF-8?q?=20instead=20of=20from=20HTML=20in=20multiembedder.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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   | 29 +++++++++++++++++++++++++++-
 settings/clientSettings.ts           |  3 +++
 site/multiembedder/MultiEmbedder.tsx | 11 ++++++++---
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.tsx
index eb1d6883954..35740f9d7f6 100644
--- a/adminSiteServer/mockSiteRouter.tsx
+++ b/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,
diff --git a/settings/clientSettings.ts b/settings/clientSettings.ts
index a678d27c04c..6c35e45020c 100644
--- a/settings/clientSettings.ts
+++ b/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}`
diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx
index 5dc2363dc95..b4d295cd554 100644
--- a/site/multiembedder/MultiEmbedder.tsx
+++ b/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