feat: incorporate query params for grapher page fallback svg

owid · Aug 14, 2024 · 89e17a6 · 89e17a6
1 parent 16036f1
commit 89e17a6
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 1 deletion.
diff --git a/functions/grapher/[slug].ts b/functions/grapher/[slug].ts
@@ -80,6 +80,9 @@ export const onRequestGet: PagesFunction = async (context) => {
     const twitterThumbnailUrl = `/grapher/thumbnail/${lowerCaseSlug}.png?imType=twitter${
         url.search ? "&" + url.search.slice(1) : ""
     }`
+    const grapherThumbnailUrl = url.search.length
+        ? `/grapher/thumbnail/${lowerCaseSlug}.svg${url.search}`
+        : undefined
 
     // Take the origin (e.g. https://ourworldindata.org) from the canonical URL, which should appear before the image elements.
     // If we fail to capture the origin, we end up with relative image URLs, which should also be okay.
@@ -105,6 +108,12 @@ export const onRequestGet: PagesFunction = async (context) => {
                 element.setAttribute("content", origin + twitterThumbnailUrl)
             },
         })
+        .on("img[data-owid-populate-url-params]", {
+            element: (element) => {
+                if (grapherThumbnailUrl)
+                    element.setAttribute("src", grapherThumbnailUrl)
+            },
+        })
 
     return rewriter.transform(grapherPageResp)
 }
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
@@ -150,6 +150,7 @@ export const DataPageV2Content = ({
                     <GrapherWithFallback
                         grapher={grapher}
                         slug={grapherConfig.slug}
+                        enablePopulatingUrlParams
                     />
                 </div>
                 <div className="DataPageContent grid grid-cols-12-full-width">
@@ -189,6 +190,7 @@ export const DataPageV2Content = ({
                                 // non-grapher pages then we need to make sure that there are thunbnails that are generated for the these non-chart graphers and
                                 // then this piece will have to change anyhow and know how to provide the thumbnail.
                                 id="explore-the-data"
+                                enablePopulatingUrlParams
                             />
                             <AboutThisData
                                 datapageData={datapageData}

diff --git a/site/GrapherImage.tsx b/site/GrapherImage.tsx
@@ -10,10 +10,12 @@ export default function GrapherImage({
     alt,
     slug,
     noFormatting,
+    enablePopulatingUrlParams,
 }: {
     slug: string
     alt?: string
     noFormatting?: boolean
+    enablePopulatingUrlParams?: boolean
 }) {
     return (
         <img
@@ -27,6 +29,8 @@ export default function GrapherImage({
             loading="lazy"
             data-no-lightbox
             data-no-img-formatting={noFormatting}
+            // This tells our Cloudflare functions to replace the src with the dynamic thumbnail URL, including URL params like `?time=2020`
+            data-owid-populate-url-params={enablePopulatingUrlParams}
         />
     )
 }
diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
@@ -124,6 +124,7 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
                             <GrapherImage
                                 slug={grapher.slug}
                                 alt={grapher.title}
+                                enablePopulatingUrlParams
                             />
                         )}
                         <p>Interactive visualization requires JavaScript</p>

diff --git a/site/GrapherWithFallback.tsx b/site/GrapherWithFallback.tsx
@@ -10,11 +10,13 @@ export const GrapherWithFallback = ({
     slug,
     className,
     id,
+    enablePopulatingUrlParams,
 }: {
     grapher?: Grapher | undefined
     slug?: string
     className?: string
     id?: string
+    enablePopulatingUrlParams?: boolean
 }) => {
     return (
         <div
@@ -38,7 +40,14 @@ export const GrapherWithFallback = ({
                             "GrapherWithFallback__fallback"
                         )}
                     >
-                        {slug && <GrapherImage slug={slug} />}
+                        {slug && (
+                            <GrapherImage
+                                slug={slug}
+                                enablePopulatingUrlParams={
+                                    enablePopulatingUrlParams
+                                }
+                            />
+                        )}
                     </figure>
                 )}
             </>