feat: incorporate query params for grapher page fallback svg

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)
 }

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}

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,9 @@ 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`.
+            // Enabling this option only makes sense if this is the _main_ chart on a _standalone_ grapher/data page - it will pass on the URL params from the page to the thumbnail.
+            data-owid-populate-url-params={enablePopulatingUrlParams}
         />
     )
 }

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>

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>
                 )}
             </>