From e75c5c447b69cc4fb65f74bca5d509d6558b8554 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Tue, 25 Jun 2024 22:26:40 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20use=20dynamic=20thumbnails=20in=20G?=
 =?UTF-8?q?rapherImage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/GrapherImage.tsx           | 41 ++++++++++++++++++++++++---------
 site/gdocs/components/Chart.tsx | 11 ++++-----
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/site/GrapherImage.tsx b/site/GrapherImage.tsx
index 8d14c518b5e..1abf21d45b6 100644
--- a/site/GrapherImage.tsx
+++ b/site/GrapherImage.tsx
@@ -4,29 +4,48 @@ import {
     DEFAULT_GRAPHER_HEIGHT,
     DEFAULT_GRAPHER_WIDTH,
 } from "@ourworldindata/grapher"
-import { BAKED_GRAPHER_EXPORTS_BASE_URL } from "../settings/clientSettings.js"
+import { GRAPHER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js"
+import { Url } from "@ourworldindata/utils"
 
-export default function GrapherImage({
-    alt,
-    slug,
-    noFormatting,
-}: {
+export default function GrapherImage(props: {
+    url: string
+    alt?: string
+    noFormatting?: boolean
+}): JSX.Element
+export default function GrapherImage(props: {
     slug: string
+    queryString?: string
+    alt?: string
+    noFormatting?: boolean
+}): JSX.Element
+export default function GrapherImage(props: {
+    url?: string
+    slug?: string
+    queryString?: string
     alt?: string
     noFormatting?: boolean
 }) {
+    let slug: string = ""
+    let queryString: string = ""
+    if (props.url) {
+        const url = Url.fromURL(props.url)
+        slug = url.slug!
+        queryString = url.queryStr
+    } else {
+        slug = props.slug!
+        queryString = props.queryString ?? ""
+    }
+
     return (
         <img
             className="GrapherImage"
-            // TODO: use the CF worker to render these previews so that we can show non-default configurations of the chart
-            // https://github.com/owid/owid-grapher/issues/3661
-            src={`${BAKED_GRAPHER_EXPORTS_BASE_URL}/${slug}.svg`}
-            alt={alt}
+            src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/${slug}${queryString}`}
+            alt={props.alt}
             width={DEFAULT_GRAPHER_WIDTH}
             height={DEFAULT_GRAPHER_HEIGHT}
             loading="lazy"
             data-no-lightbox
-            data-no-img-formatting={noFormatting}
+            data-no-img-formatting={props.noFormatting}
         />
     )
 }
diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
index 0dad75dd892..86a0543e678 100644
--- a/site/gdocs/components/Chart.tsx
+++ b/site/gdocs/components/Chart.tsx
@@ -41,7 +41,6 @@ export default function Chart({
 
     const url = Url.fromURL(d.url)
     const resolvedUrl = linkedChart.resolvedUrl
-    const resolvedSlug = Url.fromURL(resolvedUrl).slug
     const isExplorer = url.isExplorer
     const hasControls = url.queryParams.hideControls !== "true"
     const isExplorerWithControls = isExplorer && hasControls
@@ -120,12 +119,10 @@ export default function Chart({
                         </p>
                     </noscript>
                 ) : (
-                    resolvedSlug && (
-                        <a href={resolvedUrl} target="_blank" rel="noopener">
-                            <GrapherImage slug={resolvedSlug} alt={d.title} />
-                            <InteractionNotice />
-                        </a>
-                    )
+                    <a href={resolvedUrl} target="_blank" rel="noopener">
+                        <GrapherImage url={resolvedUrl} alt={d.title} />
+                        <InteractionNotice />
+                    </a>
                 )}
             </figure>
             {d.caption ? (