✨ finish cf functions fetching from R2

.gitignore

@@ -43,3 +43,4 @@ dist/
 .nx/workspace-data
 .dev.vars
 **/tsup.config.bundled*.mjs
+cfstorage

adminSiteServer/apiRouter.ts

@@ -85,6 +85,7 @@ import {
     DbInsertUser,
     FlatTagGraph,
     DbRawChartConfig,
+    R2GrapherConfigDirectory,
 } from "@ourworldindata/types"
 import { uuidv7 } from "uuidv7"
 import {
@@ -158,7 +159,6 @@ import path from "path"
 import {
     deleteGrapherConfigFromR2,
     deleteGrapherConfigFromR2ByUUID,
-    R2GrapherConfigDirectory,
     saveGrapherConfigToR2,
     saveGrapherConfigToR2ByUUID,
     getMd5HashBase64,

devTools/syncGraphersToR2/syncGraphersToR2.ts

@@ -23,7 +23,6 @@ import {
     KnexReadonlyTransaction,
     knexReadonlyTransaction,
 } from "../../db/db.js"
-import { R2GrapherConfigDirectory } from "../../adminSiteServer/chartConfigR2Helpers.js"
 import {
     base64ToBytes,
     bytesToBase64,
@@ -32,6 +31,7 @@ import {
     excludeUndefined,
     HexString,
     hexToBytes,
+    R2GrapherConfigDirectory,
 } from "@ourworldindata/utils"
 import { string } from "ts-pattern/dist/patterns.js"
 import { chunk, take } from "lodash"

functions/_common/grapherRenderer.ts

@@ -1,8 +1,9 @@
-import { Grapher, GrapherInterface } from "@ourworldindata/grapher"
+import { Grapher } from "@ourworldindata/grapher"
 import {
     Bounds,
-    deserializeJSONFromHTML,
     excludeUndefined,
+    GrapherInterface,
+    R2GrapherConfigDirectory,
 } from "@ourworldindata/utils"
 import { svg2png, initialize as initializeSvg2Png } from "svg2png-wasm"
 import { TimeLogger } from "./timeLogger"
@@ -16,7 +17,6 @@ import LatoMedium from "../_common/fonts/LatoLatin-Medium.ttf.bin"
 import LatoBold from "../_common/fonts/LatoLatin-Bold.ttf.bin"
 import PlayfairSemiBold from "../_common/fonts/PlayfairDisplayLatin-SemiBold.ttf.bin"
 import { Env } from "../grapher/thumbnail/[slug].js"
-import { R2GrapherConfigDirectory } from "@ourworldindata/types"
 
 declare global {
     // eslint-disable-next-line no-var
@@ -150,25 +150,21 @@ async function fetchAndRenderGrapherToSvg({
 
     const url = new URL(`/grapher/${slug}`, env.url)
     const slugOnly = url.pathname.split("/").pop()
-    console.log("Fetching", url.href)
     const key = excludeUndefined([
         env.GRAPHER_CONFIG_R2_BUCKET_PATH,
-        R2GrapherConfigDirectory.bySlug,
+        R2GrapherConfigDirectory.publishedGrapherBySlug,
         `${slugOnly}.json`,
     ]).join("/")
 
-    console.log("Fetching", key)
+    // Fetch grapher config
+    const fetchResponse = await env.r2ChartConfigs.get(key)
 
-    console.log("r2", env.r2ChartConfigs)
-
-    // Fetch grapher config and extract it from the HTML
-    const grapherConfig: GrapherInterface = await env.r2ChartConfigs.get(key)
-
-    if (!grapherConfig) {
-        throw new Error("Could not find grapher config")
+    if (!fetchResponse) {
+        return null
     }
 
-    grapherLogger.log("fetchGrapherConfig")
+    const grapherConfig: GrapherInterface = await fetchResponse.json()
+    console.log("grapher interface", grapherConfig)
 
     const bounds = new Bounds(0, 0, options.svgWidth, options.svgHeight)
     const grapher = new Grapher({
@@ -219,6 +215,10 @@ export const fetchAndRenderGrapher = async (
         env,
     })
 
+    if (!svg) {
+        return new Response("Not found", { status: 404 })
+    }
+
     switch (outType) {
         case "png":
             return png(await renderSvgToPng(svg, options))

functions/grapher/thumbnail/[slug].ts

@@ -34,14 +34,6 @@ router
 
 export const onRequestGet: PagesFunction = async (ctx) => {
     const { request, env } = ctx
-    const test = await (ctx.env as any).r2ChartConfigs.get(
-        "devs/daniel/grapher/by-slug/life-expectancy.json"
-    )
-    const listed = await (ctx.env as any).r2ChartConfigs.list({ limit: 10 })
-    console.log("listed", listed)
-    console.log("bucket is null", (ctx.env as any).r2ChartConfigs === null)
-    console.log("has get get", "get" in (ctx.env as any).r2ChartConfigs)
-    console.log("r2", test)
 
     const url = new URL(request.url)
     const shouldCache = !url.searchParams.has("nocache")

package.json

@@ -26,7 +26,7 @@
         "revertLastDbMigration": "tsx --tsconfig tsconfig.tsx.json node_modules/typeorm/cli.js migration:revert -d db/dataSource.ts",
         "startAdminServer": "node --enable-source-maps ./itsJustJavascript/adminSiteServer/app.js",
         "startAdminDevServer": "tsx watch --ignore '**.mjs' --tsconfig tsconfig.tsx.json adminSiteServer/app.tsx",
-        "startLocalCloudflareFunctions": "wrangler pages dev",
+        "startLocalCloudflareFunctions": "wrangler pages dev --local --persist-to ./cfstorage",
         "startDeployQueueServer": "node --enable-source-maps ./itsJustJavascript/baker/startDeployQueueServer.js",
         "startLernaWatcher": "lerna watch --scope '@ourworldindata/*' -- lerna run build --scope=\\$LERNA_PACKAGE_NAME --include-dependents",
         "startTmuxServer": "node_modules/tmex/tmex dev \"yarn startLernaWatcher\" \"yarn startAdminDevServer\" \"yarn startViteServer\"",

packages/@ourworldindata/types/src/index.ts

@@ -18,7 +18,7 @@ export {
     type RawPageview,
     type UserCountryInformation,
     type QueryParams,
-    type R2GrapherConfigDirectory,
+    R2GrapherConfigDirectory,
 } from "./domainTypes/Various.js"
 export { type BreadcrumbItem, type KeyValueProps } from "./domainTypes/Site.js"
 export {

wrangler.toml

@@ -36,4 +36,3 @@ GRAPHER_CONFIG_R2_BUCKET_PATH = "v1"
 binding = "r2ChartConfigs"
 bucket_name = "owid-grapher-configs-staging"
 
-[env.preview.vars]