🚧 start work on fetching grapher configs for pages functions from R2

adminSiteServer/chartConfigR2Helpers.ts

@@ -14,6 +14,7 @@ import {
     S3Client,
 } from "@aws-sdk/client-s3"
 import { Base64String, JsonError } from "@ourworldindata/utils"
+import { R2GrapherConfigDirectory } from "@ourworldindata/types"
 import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
 import { createHash } from "crypto"
 
@@ -25,10 +26,6 @@ export function getMd5HashBase64(data: string): Base64String {
         .update(data, "utf-8")
         .digest("base64") as Base64String
 }
-export enum R2GrapherConfigDirectory {
-    byUUID = "config/by-uuid",
-    publishedGrapherBySlug = "grapher/by-slug",
-}
 
 let s3Client: S3Client | undefined = undefined
 

functions/_common/grapherRenderer.ts

@@ -1,5 +1,9 @@
 import { Grapher, GrapherInterface } from "@ourworldindata/grapher"
-import { Bounds, deserializeJSONFromHTML } from "@ourworldindata/utils"
+import {
+    Bounds,
+    deserializeJSONFromHTML,
+    excludeUndefined,
+} from "@ourworldindata/utils"
 import { svg2png, initialize as initializeSvg2Png } from "svg2png-wasm"
 import { TimeLogger } from "./timeLogger"
 import { png } from "itty-router"
@@ -12,6 +16,7 @@ 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
@@ -143,13 +148,21 @@ async function fetchAndRenderGrapherToSvg({
 }) {
     const grapherLogger = new TimeLogger("grapher")
 
+    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,
+        `${slugOnly}.json`,
+    ]).join("/")
+
+    console.log("Fetching", key)
+
+    console.log("r2", env.r2ChartConfigs)
+
     // Fetch grapher config and extract it from the HTML
-    const grapherConfig: GrapherInterface = await env.ASSETS.fetch(
-        new URL(`/grapher/${slug}`, env.url)
-    )
-        .then((r) => (r.ok ? r : Promise.reject("Failed to load grapher page")))
-        .then((r) => r.text())
-        .then((html) => deserializeJSONFromHTML(html))
+    const grapherConfig: GrapherInterface = await env.r2ChartConfigs.get(key)
 
     if (!grapherConfig) {
         throw new Error("Could not find grapher config")

functions/grapher/thumbnail/[slug].ts

@@ -5,7 +5,11 @@ export interface Env {
     ASSETS: {
         fetch: typeof fetch
     }
+    r2ChartConfigs: {
+        get: (url: string) => Promise<R2ObjectBody>
+    }
     url: URL
+    GRAPHER_CONFIG_R2_BUCKET_PATH: string
     ENV: string
 }
 
@@ -30,6 +34,14 @@ 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")

packages/@ourworldindata/types/src/domainTypes/Various.ts

@@ -65,3 +65,8 @@ export class JsonError extends Error {
 export interface QueryParams {
     [key: string]: string | undefined
 }
+
+export enum R2GrapherConfigDirectory {
+    byUUID = "config/by-uuid",
+    publishedGrapherBySlug = "grapher/by-slug",
+}

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

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

wrangler.toml

@@ -13,6 +13,10 @@ MAILGUN_DOMAIN = "mg.ourworldindata.org"
 SLACK_ERROR_CHANNEL_ID = "C016H0BNNB1"
 ENV = "preview"
 
+[[r2_buckets]]
+binding = "r2ChartConfigs"
+bucket_name = "owid-grapher-configs-staging"
+
 # Overrides for CF production deployment
 [env.production]
 compatibility_date = "2024-04-29"
@@ -25,8 +29,11 @@ bucket_name = "owid-grapher-configs"
 ENV = "production"
 MAILGUN_DOMAIN = "mg.ourworldindata.org"
 SLACK_ERROR_CHANNEL_ID = "C5JJW19PS"
+GRAPHER_CONFIG_R2_BUCKET_PATH = "v1"
 
 
-[[env.development.r2_buckets]]
+[[env.preview.r2_buckets]]
 binding = "r2ChartConfigs"
 bucket_name = "owid-grapher-configs-staging"
+
+[env.preview.vars]