enhance: show static preview of chart view

owid · Dec 19, 2024 · 566ee00 · 566ee00
1 parent ac62f0e
commit 566ee00
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/adminSiteClient/ChartViewIndexPage.tsx b/adminSiteClient/ChartViewIndexPage.tsx
@@ -6,7 +6,7 @@ import { AdminAppContext } from "./AdminAppContext.js"
 import { Timeago } from "./Forms.js"
 import { ColumnsType } from "antd/es/table/InternalTable.js"
 import { ApiChartViewOverview } from "../adminShared/AdminTypes.js"
-import { BAKED_GRAPHER_URL } from "../settings/clientSettings.js"
+import { GRAPHER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js"
 import { Link } from "./Link.js"
 import {
     buildSearchWordsFromSearchString,
@@ -27,7 +27,7 @@ function createColumns(
             width: 200,
             render: (chartConfigId) => (
                 <img
-                    src={`${BAKED_GRAPHER_URL}/by-uuid/${chartConfigId}.svg`}
+                    src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/by-uuid/${chartConfigId}.svg`}
                     style={{ maxWidth: 200, maxHeight: 200 }}
                 />
             ),

diff --git a/site/gdocs/components/NarrativeChart.tsx b/site/gdocs/components/NarrativeChart.tsx
@@ -6,7 +6,18 @@ import cx from "classnames"
 import { GRAPHER_PREVIEW_CLASS } from "../../SiteConstants.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { DocumentContext } from "../OwidGdoc.js"
-import { GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR } from "@ourworldindata/grapher"
+import {
+    DEFAULT_GRAPHER_HEIGHT,
+    DEFAULT_GRAPHER_WIDTH,
+    GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR,
+} from "@ourworldindata/grapher"
+import {
+    BAKED_GRAPHER_URL,
+    GRAPHER_DYNAMIC_THUMBNAIL_URL,
+} from "../../../settings/clientSettings.js"
+import { queryParamsToStr } from "@ourworldindata/utils"
+import GrapherImage from "../../GrapherImage.js"
+import InteractionNotice from "../../InteractionNotice.js"
 
 export default function NarrativeChart({
     d,
@@ -40,6 +51,10 @@ export default function NarrativeChart({
 
     const metadataStringified = JSON.stringify(viewMetadata)
 
+    const resolvedUrl = `${BAKED_GRAPHER_URL}/${viewMetadata.parentChartSlug}${queryParamsToStr(
+        viewMetadata.queryParamsForParentChart
+    )}`
+
     return (
         <div
             className={cx(d.position, className, {
@@ -61,10 +76,17 @@ export default function NarrativeChart({
                         metadataStringified,
                 }}
             >
-                {/* <a href={resolvedUrl} target="_blank" rel="noopener">
-                    <GrapherImage slug={resolvedSlug} alt={d.title} />
+                <a href={resolvedUrl} target="_blank" rel="noopener">
+                    <img
+                        src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/by-uuid/${viewMetadata.chartConfigId}.svg`}
+                        alt={viewMetadata.title}
+                        width={DEFAULT_GRAPHER_WIDTH}
+                        height={DEFAULT_GRAPHER_HEIGHT}
+                        loading="lazy"
+                        data-no-lightbox
+                    />
                     <InteractionNotice />
-                </a> */}
+                </a>
             </figure>
             {d.caption ? (
                 <figcaption>{renderSpans(d.caption)}</figcaption>