🔨 Switch grapher exports to use CF worker

README.md

@@ -6,7 +6,7 @@
 
 The monorepo we use at [Our World in Data](https://ourworldindata.org) to create and publish embeddable, interactive visualizations like this one:
 
-[![A Grapher chart showing world-wide life expectancy at birth. Click for interactive.](https://ourworldindata.org/grapher/exports/life-expectancy.svg)](https://ourworldindata.org/grapher/life-expectancy)
+[![A Grapher chart showing world-wide life expectancy at birth. Click for interactive.](https://ourworldindata.org/grapher/life-expectancy.svg)](https://ourworldindata.org/grapher/life-expectancy)
 
 ## ✋ Disclaimer
 

adminSiteClient/ChartRow.tsx

@@ -7,8 +7,8 @@ import { Timeago } from "./Forms.js"
 import { EditableTags } from "./EditableTags.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import {
-    BAKED_GRAPHER_EXPORTS_BASE_URL,
     BAKED_GRAPHER_URL,
+    GRAPHER_DYNAMIC_THUMBNAIL_URL,
 } from "../settings/clientSettings.js"
 import { ChartListItem, showChartType } from "./ChartList.js"
 import { TaggableType, DbChartTagJoin } from "@ourworldindata/utils"
@@ -48,11 +48,19 @@ export class ChartRow extends React.Component<{
 
         return (
             <tr>
-                <td style={{ minWidth: "140px", width: "12.5%" }}>
+                <td
+                    style={{
+                        minWidth: "140px",
+                        width: "12.5%",
+                        textAlign: "center",
+                    }}
+                >
                     {chart.isPublished ? (
                         <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
                             <img
-                                src={`${BAKED_GRAPHER_EXPORTS_BASE_URL}/${chart.slug}.svg`}
+                                src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/${chart.slug}.png`}
+                                height={850}
+                                width={600}
                                 className="chartPreview"
                             />
                         </a>

adminSiteClient/admin.scss

@@ -753,6 +753,7 @@ main:not(.ChartEditorPage):not(.GdocsEditPage) {
 .chartPreview {
     width: 100%;
     height: auto;
+    max-width: 140px;
 }
 
 .internalNotes {

adminSiteServer/mockSiteRouter.ts

@@ -25,7 +25,6 @@ import {
 import {
     BAKED_BASE_URL,
     BASE_DIR,
-    BAKED_SITE_DIR,
     LEGACY_WORDPRESS_IMAGE_URL,
 } from "../settings/serverSettings.js"
 
@@ -35,13 +34,9 @@ import {
     countriesIndexPage,
 } from "../baker/countryProfiles.js"
 import { makeSitemap } from "../baker/sitemap.js"
-import {
-    getChartConfigBySlug,
-    getChartVariableData,
-} from "../db/model/Chart.js"
+import { getChartConfigBySlug } from "../db/model/Chart.js"
 import { countryProfileSpecs } from "../site/countryProfileProjects.js"
 import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.js"
-import { grapherToSVG } from "../baker/GrapherImageBaker.js"
 import { getVariableData, getVariableMetadata } from "../db/model/Variable.js"
 import { MultiEmbedderTestPage } from "../site/multiembedder/MultiEmbedderTestPage.js"
 import {
@@ -429,27 +424,9 @@ mockSiteRouter.use(
         res.redirect(assetUrl)
     }
 )
-mockSiteRouter.use(
-    "/exports",
-    express.static(path.join(BAKED_SITE_DIR, "exports"))
-)
 
 mockSiteRouter.use("/assets", express.static("dist/assets"))
 
-// TODO: this used to be a mockSiteRouter.use call but otherwise it looked like a route and
-// it didn't look like it was making use of any middleware - if this causese issues then
-// this has to be reverted to a use call
-getPlainRouteWithROTransaction(
-    mockSiteRouter,
-    "/grapher/exports/:slug.svg",
-    async (req, res, trx) => {
-        const grapher = await getChartConfigBySlug(trx, req.params.slug)
-        const vardata = await getChartVariableData(grapher.config)
-        res.setHeader("Content-Type", "image/svg+xml")
-        res.send(await grapherToSVG(grapher.config, vardata))
-    }
-)
-
 mockSiteRouter.use(
     "/fonts",
     express.static(path.join(BASE_DIR, "public/fonts"), {

adminSiteServer/testPageRouter.tsx

@@ -41,6 +41,7 @@ import {
     ColorSchemes,
     GrapherProgrammaticInterface,
 } from "@ourworldindata/grapher"
+import { GRAPHER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js"
 
 const IS_LIVE = ADMIN_BASE_URL === "https://owid.cloud"
 const DEFAULT_COMPARISON_URL = "https://ourworldindata.org"
@@ -467,7 +468,7 @@ getPlainRouteWithROTransaction(
             Pick<DbPlainChart, "id"> & { config: DbRawChartConfig["full"] }
         >(
             trx,
-            `--sql
+            `-- sql
                 select ca.id, cc.full as config
                 from charts ca
                 join chart_configs cc
@@ -539,11 +540,15 @@ function PreviewTestPage(props: { charts: any[] }) {
                             href={`https://ourworldindata.org/grapher/${chart.slug}`}
                         >
                             <img
-                                src={`https://ourworldindata.org/grapher/exports/${chart.slug}.svg`}
+                                src={`https://ourworldindata.org/grapher/${chart.slug}.svg`}
                             />
                         </a>
-                        <a href={`/grapher/${chart.slug}`}>
-                            <img src={`/grapher/exports/${chart.slug}.svg`} />
+                        <a
+                            href={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/${chart.slug}.svg`}
+                        >
+                            <img
+                                src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/${chart.slug}.svg`}
+                            />
                         </a>
                     </div>
                 ))}
@@ -732,7 +737,7 @@ getPlainRouteWithROTransaction(
     async (req, res, trx) => {
         const rows = await db.knexRaw<{ config: DbRawChartConfig["full"] }>(
             trx,
-            `--sql
+            `-- sql
                 SELECT cc.full as config
                 FROM charts ca
                 JOIN chart_configs cc
@@ -752,7 +757,7 @@ getPlainRouteWithROTransaction(
     async (req, res, trx) => {
         const rows = await db.knexRaw<{ config: DbRawChartConfig["full"] }>(
             trx,
-            `--sql
+            `-- sql
                 SELECT cc.full as config
                 FROM charts ca
                 JOIN chart_configs cc