✨ use dynamic thumbnails in GrapherImage

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

site/InteractionNotice.tsx

@@ -7,6 +7,7 @@ export const INTERACTIVE_ICON_SVG = `<svg aria-hidden="true" focusable="false" d
     <path fill="currentColor" opacity="0.6" d="M239.76,234.78A27.5,27.5,0,0,1,217,192a87.76,87.76,0,1,0-145.9,0A27.5,27.5,0,1,1,25.37,222.6,142.17,142.17,0,0,1,1.24,143.17C1.24,64.45,65.28.41,144,.41s142.76,64,142.76,142.76a142.17,142.17,0,0,1-24.13,79.43A27.47,27.47,0,0,1,239.76,234.78Z" transform="translate(0 -0.41)"/>
 </svg>`
 
+// shouldProgressiveEmbed is hardcoded to true, so this will only show if JS is disabled
 export default function InteractionNotice() {
     return (
         <div className="interactionNotice">

site/blocks/RelatedCharts.jsdom.test.tsx

@@ -7,7 +7,7 @@ import Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 import {
     BAKED_BASE_URL,
-    BAKED_GRAPHER_EXPORTS_BASE_URL,
+    GRAPHER_DYNAMIC_THUMBNAIL_URL,
 } from "../../settings/clientSettings.js"
 import { KeyChartLevel } from "@ourworldindata/utils"
 Enzyme.configure({ adapter: new Adapter() })
@@ -37,7 +37,7 @@ it("renders active chart links and loads respective chart on click", () => {
             .find("li")
             .first()
             .find(
-                `img[src="${BAKED_GRAPHER_EXPORTS_BASE_URL}/${charts[1].slug}.svg"]`
+                `img[src="${GRAPHER_DYNAMIC_THUMBNAIL_URL}/${charts[1].slug}"]`
             )
     ).toHaveLength(1)
 

site/css/content.scss

@@ -87,6 +87,12 @@ figure[data-explorer-src] {
     }
 }
 
+// Doesn't make sense to show the notice if JavaScript is disabled
+// As the grapher/data page will also be disabled
+.js-disabled .interactionNotice {
+    display: none;
+}
+
 /*******************************************************************************
  * Tables
  */

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
@@ -116,12 +115,10 @@ export default function Chart({
                 {isExplorer ? (
                     <div className="js--show-warning-block-if-js-disabled" />
                 ) : (
-                    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 ? (