enhance: fetch yaml on the client side

owid · May 29, 2024 · a853f31 · a853f31
1 parent 87a50bb
commit a853f31
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 21 deletions.
diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
@@ -358,16 +358,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(config)
+        // 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
     }

diff --git a/site/multi-dim/MultiDimDataPageContent.tsx b/site/multi-dim/MultiDimDataPageContent.tsx
@@ -52,6 +52,8 @@ import {
     OwidVariableDataMetadataDimensions,
     OwidVariableWithSourceAndDimension,
     memoize,
+    Url,
+    getWindowQueryParams,
 } from "@ourworldindata/utils"
 import { AttachmentsContext, DocumentContext } from "../gdocs/OwidGdoc.js"
 import StickyNav from "../blocks/StickyNav.js"
@@ -302,17 +304,31 @@ export const MultiDimDataPageContent = ({
     grapherConfig: GrapherInterface
     imageMetadata: Record<string, ImageMetadata>
 }) => {
-    const config = useMemo(
-        () => MultiDimDataPageConfig.fromObject(window._OWID_MULTI_DIM_CONFIG),
-        []
+    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 datapageData: 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 titleFragments = joinTitleFragments(
@@ -333,7 +349,7 @@ export const MultiDimDataPageContent = ({
 
     const currentView = useMemo(() => {
         if (Object.keys(currentSettings).length === 0) return undefined
-        return config.findViewByDimensions(currentSettings)
+        return config?.findViewByDimensions(currentSettings)
     }, [currentSettings, config])
 
     const dimensionsConfig = useMemo(() => {
@@ -410,10 +426,12 @@ export const MultiDimDataPageContent = ({
                 </div>
             </div>
             <div className="wrapper">
-                <MultiDimSettingsPanel
-                    config={config}
-                    updateSettings={setCurrentSettings}
-                />
+                {config && (
+                    <MultiDimSettingsPanel
+                        config={config}
+                        updateSettings={setCurrentSettings}
+                    />
+                )}
             </div>
 
             <div className="span-cols-14 grid grid-cols-12-full-width full-width--border">