Implement thumbnails for multidimensional data pages

functions/_common/grapherTools.ts

@@ -1,9 +1,14 @@
 import { generateGrapherImageSrcSet, Grapher } from "@ourworldindata/grapher"
 import {
     GrapherInterface,
+    MultiDimDataPageConfigEnriched,
     R2GrapherConfigDirectory,
 } from "@ourworldindata/types"
-import { excludeUndefined, Bounds } from "@ourworldindata/utils"
+import {
+    excludeUndefined,
+    Bounds,
+    searchParamsToMultiDimView,
+} from "@ourworldindata/utils"
 import { StatusError } from "itty-router"
 import { Env } from "./env.js"
 import { fetchFromR2, grapherBaseUrl } from "./grapherRenderer.js"
@@ -83,11 +88,30 @@ export async function fetchUnparsedGrapherConfig(
     return fetchFromR2(requestUrl, etag, fallbackUrl)
 }
 
-export async function fetchGrapherConfig(
-    identifier: GrapherIdentifier,
-    env: Env,
+async function fetchMultiDimGrapherConfig(
+    multiDimConfig: MultiDimDataPageConfigEnriched,
+    searchParams: URLSearchParams,
+    env: Env
+) {
+    const view = searchParamsToMultiDimView(multiDimConfig, searchParams)
+    const response = await fetchUnparsedGrapherConfig(
+        { type: "uuid", id: view.fullConfigId },
+        env
+    )
+    return await response.json()
+}
+
+export async function fetchGrapherConfig({
+    identifier,
+    env,
+    etag,
+    searchParams,
+}: {
+    identifier: GrapherIdentifier
+    env: Env
     etag?: string
-): Promise<FetchGrapherConfigResult> {
+    searchParams?: URLSearchParams
+}): Promise<FetchGrapherConfigResult> {
     const fetchResponse = await fetchUnparsedGrapherConfig(
         identifier,
         env,
@@ -113,7 +137,17 @@ export async function fetchGrapherConfig(
         }
     }
 
-    const grapherConfig: GrapherInterface = await fetchResponse.json()
+    const config = await fetchResponse.json()
+    let grapherConfig: GrapherInterface
+    if (identifier.type === "multi-dim-slug") {
+        grapherConfig = await fetchMultiDimGrapherConfig(
+            config as MultiDimDataPageConfigEnriched,
+            searchParams,
+            env
+        )
+    } else {
+        grapherConfig = config
+    }
     console.log("grapher title", grapherConfig.title)
     return {
         grapherConfig,
@@ -127,7 +161,35 @@ export async function initGrapher(
     searchParams: URLSearchParams,
     env: Env
 ): Promise<Grapher> {
-    const grapherConfigResponse = await fetchGrapherConfig(identifier, env)
+    let grapherConfigResponse: FetchGrapherConfigResult
+    try {
+        grapherConfigResponse = await fetchGrapherConfig({
+            identifier,
+            env,
+            searchParams,
+        })
+    } catch (e) {
+        if (
+            identifier.type === "slug" &&
+            e instanceof StatusError &&
+            e.status === 404
+        ) {
+            // Normal graphers and multi-dims have the same URL namespace, but
+            // we have no way of knowing which of them was requested, so we try
+            // again with a multi-dim identifier.
+            const multiDimId: MultiDimSlug = {
+                type: "multi-dim-slug",
+                id: identifier.id,
+            }
+            grapherConfigResponse = await fetchGrapherConfig({
+                identifier: multiDimId,
+                env,
+                searchParams,
+            })
+        } else {
+            throw e
+        }
+    }
 
     if (grapherConfigResponse.status === 404) {
         // we throw 404 errors instad of returning a 404 response so that the router

functions/grapher/by-uuid/[uuid].ts

@@ -74,11 +74,11 @@ async function handleConfigRequest(
     const shouldCache = searchParams.get("nocache") === null
     console.log("Preparing json response for uuid ", uuid)
 
-    const grapherPageResp = await fetchGrapherConfig(
-        { type: "uuid", id: uuid },
+    const grapherPageResp = await fetchGrapherConfig({
+        identifier: { type: "uuid", id: uuid },
         env,
-        etag
-    )
+        etag,
+    })
 
     if (grapherPageResp.status === 304) {
         return new Response(null, { status: 304 })

packages/@ourworldindata/types/src/siteTypes/MultiDimDataPage.ts

@@ -118,6 +118,5 @@ export interface MultiDimDataPageProps {
     primaryTopic?: PrimaryTopic
     relatedResearchCandidates: DataPageRelatedResearch[]
     imageMetadata: Record<string, ImageMetadata>
-    initialQueryStr?: string
     isPreviewing?: boolean
 }

packages/@ourworldindata/utils/src/MultiDimDataPageConfig.ts

@@ -11,7 +11,7 @@ import {
     DimensionProperty,
     MultiDimDataPageConfigEnriched,
 } from "@ourworldindata/types"
-import { groupBy, keyBy, pick } from "./Util.js"
+import { groupBy, isEmpty, keyBy, pick } from "./Util.js"
 import { Url } from "./urls/Url.js"
 
 interface FilterToAvailableResult {
@@ -217,3 +217,25 @@ export const extractMultiDimChoicesFromQueryStr = (
 
     return dimensionChoices
 }
+
+export function searchParamsToMultiDimView(
+    config: MultiDimDataPageConfigEnriched,
+    searchParams: URLSearchParams
+): ViewEnriched {
+    const mdimConfig = MultiDimDataPageConfig.fromObject(config)
+    let dimensions = extractMultiDimChoicesFromQueryStr(
+        searchParams.toString(),
+        mdimConfig
+    )
+    if (isEmpty(dimensions)) {
+        // Get the default dimensions.
+        dimensions = mdimConfig.filterToAvailableChoices({}).selectedChoices
+    }
+    const view = mdimConfig.findViewByDimensions(dimensions)
+    if (!view) {
+        throw new Error(
+            `No view found for dimensions ${JSON.stringify(dimensions)}`
+        )
+    }
+    return view
+}

packages/@ourworldindata/utils/src/index.ts

@@ -350,4 +350,5 @@ export {
     MultiDimDataPageConfig,
     extractMultiDimChoicesFromQueryStr,
     multiDimStateToQueryStr,
+    searchParamsToMultiDimView,
 } from "./MultiDimDataPageConfig.js"

site/DataPageV2.tsx

@@ -68,15 +68,6 @@ export const DataPageV2 = (props: {
         }).plaintext
     } else pageDesc = "An interactive visualization from Our World in Data."
 
-    // Due to thumbnails not taking into account URL parameters, they are often inaccurate on
-    // social media. We decided to remove them and use a single thumbnail for all charts.
-    // See https://github.com/owid/owid-grapher/issues/1086
-    //
-    // const imageUrl = urljoin(
-    //     baseGrapherUrl,
-    //     "exports",
-    //     `${grapher.slug}.png?v=${grapher.version}`
-    // )
     const imageUrl: string = urljoin(baseUrl, "default-grapher-thumbnail.png")
     const imageWidth = "1200"
     const imageHeight = "628"

site/multiDim/MultiDimDataPage.tsx

@@ -1,3 +1,4 @@
+import urljoin from "url-join"
 import { Head } from "../Head.js"
 import { IFrameDetector } from "../IframeDetector.js"
 import { SiteHeader } from "../SiteHeader.js"
@@ -18,7 +19,6 @@ export function MultiDimDataPage({
     primaryTopic,
     relatedResearchCandidates,
     imageMetadata,
-    initialQueryStr,
     isPreviewing,
 }: MultiDimDataPageProps) {
     const canonicalUrl = `${baseGrapherUrl}/${slug}`
@@ -31,19 +31,21 @@ export function MultiDimDataPage({
         relatedResearchCandidates,
         imageMetadata,
         tagToSlugMap,
-        initialQueryStr,
     }
+    const imageUrl: string = urljoin(baseUrl, "default-grapher-thumbnail.png")
+    const imageWidth = "1200"
+    const imageHeight = "628"
     return (
         <Html>
             <Head
                 canonicalUrl={canonicalUrl}
                 // pageTitle={pageTitle}
                 // pageDesc={pageDesc}
-                // imageUrl={imageUrl}
+                imageUrl={imageUrl}
                 baseUrl={baseUrl}
             >
-                {/* <meta property="og:image:width" content={imageWidth} />
-                <meta property="og:image:height" content={imageHeight} /> */}
+                <meta property="og:image:width" content={imageWidth} />
+                <meta property="og:image:height" content={imageHeight} />
                 <IFrameDetector />
                 <noscript>
                     <style>{`

site/multiembedder/MultiEmbedder.tsx

@@ -19,10 +19,9 @@ import {
     Url,
     GRAPHER_TAB_OPTIONS,
     merge,
-    MultiDimDataPageConfig,
-    extractMultiDimChoicesFromQueryStr,
     fetchWithRetry,
     ChartViewInfo,
+    searchParamsToMultiDimView,
 } from "@ourworldindata/utils"
 import { action } from "mobx"
 import ReactDOM from "react-dom"
@@ -238,20 +237,13 @@ class MultiEmbedder {
         const { queryStr, slug } = embedUrl
 
         const mdimConfigUrl = `${MULTI_DIM_DYNAMIC_CONFIG_URL}/${slug}.json`
-        const mdimJsonConfig = await fetchWithRetry(mdimConfigUrl).then((res) =>
+        const multiDimConfig = await fetchWithRetry(mdimConfigUrl).then((res) =>
             res.json()
         )
-        const mdimConfig = MultiDimDataPageConfig.fromObject(mdimJsonConfig)
-        const dimensions = extractMultiDimChoicesFromQueryStr(
-            queryStr,
-            mdimConfig
+        const view = searchParamsToMultiDimView(
+            multiDimConfig,
+            new URLSearchParams(queryStr)
         )
-        const view = mdimConfig.findViewByDimensions(dimensions)
-        if (!view) {
-            throw new Error(
-                `No view found for dimensions ${JSON.stringify(dimensions)}`
-            )
-        }
 
         const configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/by-uuid/${view.fullConfigId}.config.json`