feat(gdocs): narrative charts component

adminSiteClient/AdminSidebar.tsx

@@ -37,7 +37,7 @@ export const AdminSidebar = (): React.ReactElement => (
             {chartViewsFeatureEnabled && (
                 <li>
                     <Link to="/chartViews">
-                        <FontAwesomeIcon icon={faPanorama} /> Narrative views
+                        <FontAwesomeIcon icon={faPanorama} /> Narrative charts
                     </Link>
                 </li>
             )}

adminSiteClient/ChartEditor.ts

@@ -200,15 +200,15 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
             )
     }
 
-    async saveAsNarrativeView(): Promise<void> {
+    async saveAsChartView(): Promise<void> {
         const { patchConfig, grapher } = this
 
         const chartJson = omit(patchConfig, CHART_VIEW_PROPS_TO_OMIT)
 
         const suggestedName = grapher.title ? slugify(grapher.title) : undefined
 
         const name = prompt(
-            "Please enter a programmatic name for the narrative view. Note that this name cannot be changed later.",
+            "Please enter a programmatic name for the narrative chart. Note that this name cannot be changed later.",
             suggestedName
         )
 

adminSiteClient/ChartViewEditor.ts

@@ -5,7 +5,7 @@ import {
     References,
     type EditorTab,
 } from "./AbstractChartEditor.js"
-import { ENV } from "../settings/clientSettings.js"
+import { BAKED_BASE_URL, ENV } from "../settings/clientSettings.js"
 import {
     CHART_VIEW_PROPS_TO_OMIT,
     CHART_VIEW_PROPS_TO_PERSIST,
@@ -16,7 +16,8 @@ import { diffGrapherConfigs, omit, pick } from "@ourworldindata/utils"
 // Don't yet show chart views in the admin interface
 // This is low-stakes - if it shows up anyhow (e.g. on staging servers), it's not a big deal.
 // TODO: Remove this flag once we're launching this feature
-export const chartViewsFeatureEnabled = ENV === "development"
+export const chartViewsFeatureEnabled =
+    ENV === "development" || BAKED_BASE_URL.includes("narrative-")
 
 export interface Chart {
     id: number

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 }}
                 />
             ),
@@ -134,7 +134,7 @@ export function ChartViewIndexPage() {
     }, [admin])
 
     return (
-        <AdminLayout title="Narrative views">
+        <AdminLayout title="Narrative charts">
             <main className="ChartViewIndexPage">
                 <Flex justify="space-between">
                     <Input

adminSiteClient/EditorReferencesTab.tsx

@@ -127,7 +127,7 @@ export const ReferencesSection = (props: {
 
     const chartViews = !!props.references?.chartViews?.length && (
         <>
-            <p>Narrative views based on this chart</p>
+            <p>Narrative charts based on this chart</p>
             <ul className="list-group">
                 {props.references.chartViews.map((chartView) => (
                     <li key={chartView.id} className="list-group-item">

adminSiteClient/SaveButtons.tsx

@@ -63,8 +63,8 @@ class SaveButtonsForChart extends React.Component<{
         void this.props.editor.saveAsNewGrapher()
     }
 
-    @action.bound onSaveAsNarrativeView() {
-        void this.props.editor.saveAsNarrativeView()
+    @action.bound onSaveAsChartView() {
+        void this.props.editor.saveAsChartView()
     }
 
     @action.bound onPublishToggle() {
@@ -122,10 +122,10 @@ class SaveButtonsForChart extends React.Component<{
                     <div className="mt-2">
                         <button
                             className="btn btn-primary"
-                            onClick={this.onSaveAsNarrativeView}
+                            onClick={this.onSaveAsChartView}
                             disabled={isSavingDisabled}
                         >
-                            Save as narrative view
+                            Save as narrative chart
                         </button>
                     </div>
                 )}

adminSiteServer/apiRouter.ts

@@ -3637,7 +3637,7 @@ const createPatchConfigAndQueryParamsForChartView = async (
         ...pick(fullConfigIncludingDefaults, CHART_VIEW_PROPS_TO_PERSIST),
     }
 
-    const queryParams = grapherConfigToQueryParams(config)
+    const queryParams = grapherConfigToQueryParams(patchConfigToSave)
 
     const fullConfig = mergeGrapherConfigs(parentChartConfig, patchConfigToSave)
     return { patchConfig: patchConfigToSave, fullConfig, queryParams }

baker/SiteBaker.tsx

@@ -56,6 +56,7 @@ import {
     grabMetadataForGdocLinkedIndicator,
     TombstonePageData,
     gdocUrlRegex,
+    ChartViewInfo,
 } from "@ourworldindata/utils"
 import { execWrapper } from "../db/execWrapper.js"
 import { countryProfileSpecs } from "../site/countryProfileProjects.js"
@@ -109,6 +110,7 @@ import { getTombstones } from "../db/model/GdocTombstone.js"
 import { bakeAllMultiDimDataPages } from "./MultiDimBaker.js"
 import { getAllLinkedPublishedMultiDimDataPages } from "../db/model/MultiDimDataPage.js"
 import { getPublicDonorNames } from "../db/model/Donor.js"
+import { getChartViewsInfo } from "../db/model/ChartView.js"
 
 type PrefetchedAttachments = {
     donors: string[]
@@ -120,6 +122,7 @@ type PrefetchedAttachments = {
         explorers: Record<string, LinkedChart>
     }
     linkedIndicators: Record<number, LinkedIndicator>
+    linkedChartViews: Record<string, ChartViewInfo>
 }
 
 // These aren't all "wordpress" steps
@@ -176,7 +179,7 @@ function getProgressBarTotal(bakeSteps: BakeStepConfig): number {
         bakeSteps.has("dataInsights") ||
         bakeSteps.has("authors")
     ) {
-        total += 8
+        total += 9
     }
     return total
 }
@@ -345,7 +348,7 @@ export class SiteBaker {
     _prefetchedAttachmentsCache: PrefetchedAttachments | undefined = undefined
     private async getPrefetchedGdocAttachments(
         knex: db.KnexReadonlyTransaction,
-        picks?: [string[], string[], string[], string[], string[]]
+        picks?: [string[], string[], string[], string[], string[], string[]]
     ): Promise<PrefetchedAttachments> {
         if (!this._prefetchedAttachmentsCache) {
             console.log("Prefetching attachments...")
@@ -459,6 +462,12 @@ export class SiteBaker {
                 name: `✅ Prefetched ${publishedAuthors.length} authors`,
             })
 
+            const chartViewsInfo = await getChartViewsInfo(knex)
+            const chartViewsInfoByName = keyBy(chartViewsInfo, "name")
+            this.progressBar.tick({
+                name: `✅ Prefetched ${chartViewsInfo.length} chart views`,
+            })
+
             const prefetchedAttachments = {
                 donors,
                 linkedAuthors: publishedAuthors,
@@ -469,6 +478,7 @@ export class SiteBaker {
                     graphers: publishedChartsBySlug,
                 },
                 linkedIndicators: datapageIndicatorsById,
+                linkedChartViews: chartViewsInfoByName,
             }
             this.progressBar.tick({ name: "✅ Prefetched attachments" })
             this._prefetchedAttachmentsCache = prefetchedAttachments
@@ -480,6 +490,7 @@ export class SiteBaker {
                 imageFilenames,
                 linkedGrapherSlugs,
                 linkedExplorerSlugs,
+                linkedChartViewNames,
             ] = picks
             const linkedDocuments = pick(
                 this._prefetchedAttachmentsCache.linkedDocuments,
@@ -528,6 +539,10 @@ export class SiteBaker {
                     this._prefetchedAttachmentsCache.linkedAuthors.filter(
                         (author) => authorNames.includes(author.name)
                     ),
+                linkedChartViews: pick(
+                    this._prefetchedAttachmentsCache.linkedChartViews,
+                    linkedChartViewNames
+                ),
             }
         }
         return this._prefetchedAttachmentsCache
@@ -619,6 +634,7 @@ export class SiteBaker {
                 publishedGdoc.linkedImageFilenames,
                 publishedGdoc.linkedChartSlugs.grapher,
                 publishedGdoc.linkedChartSlugs.explorer,
+                publishedGdoc.linkedChartViewNames,
             ])
             publishedGdoc.donors = attachments.donors
             publishedGdoc.linkedAuthors = attachments.linkedAuthors
@@ -629,6 +645,7 @@ export class SiteBaker {
                 ...attachments.linkedCharts.explorers,
             }
             publishedGdoc.linkedIndicators = attachments.linkedIndicators
+            publishedGdoc.linkedChartViews = attachments.linkedChartViews
 
             // this is a no-op if the gdoc doesn't have an all-chart block
             if ("loadRelatedCharts" in publishedGdoc) {
@@ -876,6 +893,7 @@ export class SiteBaker {
                 dataInsight.linkedImageFilenames,
                 dataInsight.linkedChartSlugs.grapher,
                 dataInsight.linkedChartSlugs.explorer,
+                dataInsight.linkedChartViewNames,
             ])
             dataInsight.linkedDocuments = attachments.linkedDocuments
             dataInsight.imageMetadata = {
@@ -949,6 +967,7 @@ export class SiteBaker {
                 publishedAuthor.linkedImageFilenames,
                 publishedAuthor.linkedChartSlugs.grapher,
                 publishedAuthor.linkedChartSlugs.explorer,
+                publishedAuthor.linkedChartViewNames,
             ])
 
             // We don't need these to be attached to the gdoc in the current

baker/siteRenderers.tsx

@@ -439,6 +439,7 @@ ${dataInsights
                     latestDataInsights: get(post, "latestDataInsights", []),
                     homepageMetadata: get(post, "homepageMetadata", {}),
                     latestWorkLinks: get(post, "latestWorkLinks", []),
+                    linkedChartViews: get(post, "linkedChartViews", {}),
                 }}
             >
                 <AtomArticleBlocks blocks={post.content.body} />

db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts

@@ -0,0 +1,17 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class PostsGdocsLinksAddChartViews1734454799588
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`
+            ALTER TABLE posts_gdocs_links
+            MODIFY linkType ENUM ('gdoc', 'url', 'grapher', 'explorer', 'chart-view') NULL`)
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`
+            ALTER TABLE posts_gdocs_links
+            MODIFY linkType ENUM ('gdoc', 'url', 'grapher', 'explorer') NULL`)
+    }
+}

db/model/ChartView.ts

@@ -0,0 +1,34 @@
+import { ChartViewInfo, JsonString } from "@ourworldindata/types"
+import * as db from "../db.js"
+
+export const getChartViewsInfo = async (
+    knex: db.KnexReadonlyTransaction,
+    names?: string[]
+): Promise<ChartViewInfo[]> => {
+    type RawRow = Omit<ChartViewInfo, "queryParamsForParentChart"> & {
+        queryParamsForParentChart: JsonString
+    }
+    let rows: RawRow[]
+
+    const query = `-- sql
+SELECT cv.name,
+       cc.full ->> "$.title" as title,
+       chartConfigId,
+       pcc.slug as parentChartSlug,
+       cv.queryParamsForParentChart
+FROM chart_views cv
+JOIN chart_configs cc on cc.id = cv.chartConfigId
+JOIN charts pc on cv.parentChartId = pc.id
+JOIN chart_configs pcc on pc.configId = pcc.id
+        `
+
+    if (names) {
+        if (names.length === 0) return []
+        rows = await db.knexRaw(knex, `${query} WHERE cv.name IN (?)`, [names])
+    } else rows = await db.knexRaw(knex, query)
+
+    return rows.map((row) => ({
+        ...row,
+        queryParamsForParentChart: JSON.parse(row.queryParamsForParentChart),
+    }))
+}

db/model/Gdoc/GdocBase.ts

@@ -48,14 +48,15 @@ import {
     getVariableMetadata,
     getVariableOfDatapageIfApplicable,
 } from "../Variable.js"
-import { createLinkFromUrl } from "../Link.js"
+import { createLinkForChartView, createLinkFromUrl } from "../Link.js"
 import {
     getMultiDimDataPageBySlug,
     isMultiDimDataPagePublished,
 } from "../MultiDimDataPage.js"
 import {
     ARCHVED_THUMBNAIL_FILENAME,
     ChartConfigType,
+    ChartViewInfo,
     DEFAULT_THUMBNAIL_FILENAME,
     GrapherInterface,
     LatestDataInsight,
@@ -66,6 +67,7 @@ import {
     OwidGdocLinkType,
     OwidGdocType,
 } from "@ourworldindata/types"
+import { getChartViewsInfo } 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[] = []
+    linkedChartViews?: Record<string, ChartViewInfo> = {}
     _omittableFields: string[] = []
 
     constructor(id?: string) {
@@ -292,6 +295,14 @@ export class GdocBase implements OwidGdocBaseInterface {
         return { grapher: [...grapher], explorer: [...explorer] }
     }
 
+    get linkedChartViewNames(): string[] {
+        const filteredLinks = this.links
+            .filter((link) => link.linkType === OwidGdocLinkType.ChartView)
+            .map((link) => link.target)
+
+        return filteredLinks
+    }
+
     get hasAllChartsBlock(): boolean {
         let hasAllChartsBlock = false
         for (const enrichedBlockSource of this.enrichedBlockSources) {
@@ -338,6 +349,13 @@ export class GdocBase implements OwidGdocBaseInterface {
                     componentType: block.type,
                 }),
             ])
+            .with({ type: "narrative-chart" }, (block) => [
+                createLinkForChartView({
+                    name: block.name,
+                    source: this,
+                    componentType: block.type,
+                }),
+            ])
             .with({ type: "all-charts" }, (block) =>
                 block.top.map((item) =>
                     createLinkFromUrl({
@@ -700,6 +718,11 @@ export class GdocBase implements OwidGdocBaseInterface {
         }
     }
 
+    async loadChartViewsInfo(knex: db.KnexReadonlyTransaction): Promise<void> {
+        const result = await getChartViewsInfo(knex, this.linkedChartViewNames)
+        this.linkedChartViews = keyBy(result, "name")
+    }
+
     async fetchAndEnrichGdoc(): Promise<void> {
         const docsClient = google.docs({
             version: "v1",
@@ -845,6 +868,7 @@ export class GdocBase implements OwidGdocBaseInterface {
         await this.loadImageMetadataFromDB(knex)
         await this.loadLinkedCharts(knex)
         await this.loadLinkedIndicators() // depends on linked charts
+        await this.loadChartViewsInfo(knex)
         await this._loadSubclassAttachments(knex)
         await this.validate(knex)
     }

db/model/Gdoc/enrichedToMarkdown.ts

@@ -127,6 +127,17 @@ ${items}
                 exportComponents
             )
         )
+        .with({ type: "narrative-chart" }, (b): string | undefined =>
+            markdownComponent(
+                "NarrativeChart",
+                {
+                    name: b.name,
+                    caption: b.caption ? spansToMarkdown(b.caption) : undefined,
+                    // Note: truncated
+                },
+                exportComponents
+            )
+        )
         .with({ type: "code" }, (b): string | undefined => {
             return (
                 "```\n" +