refactor: properly attach gdocs attachments

baker/SiteBaker.tsx

@@ -56,6 +56,7 @@ import {
     grabMetadataForGdocLinkedIndicator,
     TombstonePageData,
     gdocUrlRegex,
+    ChartViewMetadata,
 } from "@ourworldindata/utils"
 import { execWrapper } from "../db/execWrapper.js"
 import { countryProfileSpecs } from "../site/countryProfileProjects.js"
@@ -121,6 +122,7 @@ type PrefetchedAttachments = {
         explorers: Record<string, LinkedChart>
     }
     linkedIndicators: Record<number, LinkedIndicator>
+    chartViewMetadata: Record<string, ChartViewMetadata>
 }
 
 // These aren't all "wordpress" steps
@@ -536,6 +538,8 @@ export class SiteBaker {
                     this._prefetchedAttachmentsCache.linkedAuthors.filter(
                         (author) => authorNames.includes(author.name)
                     ),
+                chartViewMetadata:
+                    this._prefetchedAttachmentsCache.chartViewMetadata, // TODO: Filter
             }
         }
         return this._prefetchedAttachmentsCache
@@ -637,6 +641,7 @@ export class SiteBaker {
                 ...attachments.linkedCharts.explorers,
             }
             publishedGdoc.linkedIndicators = attachments.linkedIndicators
+            publishedGdoc.chartViewMetadata = attachments.chartViewMetadata
 
             // this is a no-op if the gdoc doesn't have an all-chart block
             if ("loadRelatedCharts" in publishedGdoc) {

db/model/Gdoc/GdocBase.ts

@@ -56,6 +56,7 @@ import {
 import {
     ARCHVED_THUMBNAIL_FILENAME,
     ChartConfigType,
+    ChartViewMetadata,
     DEFAULT_THUMBNAIL_FILENAME,
     GrapherInterface,
     LatestDataInsight,
@@ -66,6 +67,7 @@ import {
     OwidGdocLinkType,
     OwidGdocType,
 } from "@ourworldindata/types"
+import { getAllChartViewsMetadata } from "../ChartView.js"
 
 export class GdocBase implements OwidGdocBaseInterface {
     id!: string
@@ -89,6 +91,7 @@ export class GdocBase implements OwidGdocBaseInterface {
     linkedIndicators: Record<number, LinkedIndicator> = {}
     linkedDocuments: Record<string, OwidGdocMinimalPostInterface> = {}
     latestDataInsights: LatestDataInsight[] = []
+    chartViewMetadata?: Record<string, ChartViewMetadata> = {}
     _omittableFields: string[] = []
 
     constructor(id?: string) {
@@ -694,6 +697,14 @@ export class GdocBase implements OwidGdocBaseInterface {
         }
     }
 
+    async loadChartViewMetadata(
+        knex: db.KnexReadonlyTransaction
+    ): Promise<void> {
+        // TODO: Filter down to only those that are used in the Gdoc
+        const result = await getAllChartViewsMetadata(knex)
+        this.chartViewMetadata = keyBy(result, "name")
+    }
+
     async fetchAndEnrichGdoc(): Promise<void> {
         const docsClient = google.docs({
             version: "v1",
@@ -839,6 +850,7 @@ export class GdocBase implements OwidGdocBaseInterface {
         await this.loadImageMetadataFromDB(knex)
         await this.loadLinkedCharts(knex)
         await this.loadLinkedIndicators() // depends on linked charts
+        await this.loadChartViewMetadata(knex)
         await this._loadSubclassAttachments(knex)
         await this.validate(knex)
     }

site/gdocs/OwidGdoc.tsx

@@ -49,6 +49,7 @@ export const AttachmentsContext = createContext<Attachments>({
     latestDataInsights: [],
     homepageMetadata: {},
     latestWorkLinks: [],
+    chartViewMetadata: {},
 })
 
 export const DocumentContext = createContext<{ isPreviewing: boolean }>({

site/gdocs/components/NarrativeChart.tsx

@@ -1,10 +1,9 @@
-import React, { useContext, useRef } from "react"
+import React, { useRef } from "react"
 import { useEmbedChart } from "../../hooks.js"
 import { EnrichedBlockNarrativeChart } from "@ourworldindata/types"
-import { renderSpans } from "../utils.js"
+import { renderSpans, useChartViewMetadata } from "../utils.js"
 import cx from "classnames"
 import { GRAPHER_PREVIEW_CLASS } from "../../SiteConstants.js"
-import { AttachmentsContext } from "../OwidGdoc.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 
 export default function NarrativeChart({
@@ -19,9 +18,7 @@ export default function NarrativeChart({
     const refChartContainer = useRef<HTMLDivElement>(null)
     useEmbedChart(0, refChartContainer)
 
-    const attachments = useContext(AttachmentsContext)
-
-    const viewMetadata = attachments.chartViewMetadata?.[d.name]
+    const viewMetadata = useChartViewMetadata(d.name)
 
     if (!viewMetadata)
         return (

site/gdocs/utils.tsx

@@ -147,6 +147,11 @@ export function useDonors(): string[] | undefined {
     return donors
 }
 
+export const useChartViewMetadata = (name: string) => {
+    const { chartViewMetadata } = useContext(AttachmentsContext)
+    return chartViewMetadata?.[name]
+}
+
 const LinkedA = ({ span }: { span: SpanLink }): React.ReactElement => {
     const linkType = getLinkType(span.url)
     const { linkedDocument } = useLinkedDocument(span.url)