🚧 (gdoc) add key indicator component prototype

adminSiteClient/gdocsDeploy.ts

@@ -1,12 +1,11 @@
+import { isEqual, omit } from "@ourworldindata/utils"
 import {
     OwidGdoc,
     OwidGdocBaseInterface,
     OwidGdocPostContent,
-    isEqual,
-    omit,
     OwidGdocDataInsightContent,
     OwidGdocType,
-} from "@ourworldindata/utils"
+} from "@ourworldindata/types"
 import { GDOC_DIFF_OMITTABLE_PROPERTIES } from "./GdocsDiff.js"
 import { GDOCS_DETAILS_ON_DEMAND_ID } from "../settings/clientSettings.js"
 
@@ -52,6 +51,7 @@ export const checkIsLightningUpdate = (
         breadcrumbs: true,
         errors: true,
         linkedCharts: true,
+        linkedIndicators: true,
         linkedDocuments: true,
         relatedCharts: true,
         revisionId: true,

baker/GrapherBaker.tsx

@@ -7,22 +7,12 @@ import {
     urlToSlug,
     without,
     deserializeJSONFromHTML,
-    OwidVariableDataMetadataDimensions,
     uniq,
-    JsonError,
     keyBy,
-    DimensionProperty,
-    OwidVariableWithSource,
     mergePartialGrapherConfigs,
-    OwidChartDimensionInterface,
     compact,
-    OwidGdocPostInterface,
     merge,
-    EnrichedFaq,
-    FaqEntryData,
-    FaqDictionary,
     partition,
-    ImageMetadata,
 } from "@ourworldindata/utils"
 import {
     getRelatedArticles,
@@ -45,13 +35,25 @@ import * as db from "../db/db.js"
 import { glob } from "glob"
 import { isPathRedirectedToExplorer } from "../explorerAdminServer/ExplorerRedirects.js"
 import { getPostEnrichedBySlug } from "../db/model/Post.js"
-import { ChartTypeName, GrapherInterface } from "@ourworldindata/types"
+import {
+    JsonError,
+    GrapherInterface,
+    OwidVariableDataMetadataDimensions,
+    DimensionProperty,
+    OwidVariableWithSource,
+    OwidChartDimensionInterface,
+    OwidGdocPostInterface,
+    EnrichedFaq,
+    FaqEntryData,
+    FaqDictionary,
+    ImageMetadata,
+} from "@ourworldindata/types"
 import workerpool from "workerpool"
 import ProgressBar from "progress"
 import {
     getVariableData,
-    getVariableMetadata,
     getMergedGrapherConfigForVariable,
+    getVariableOfDatapageIfApplicable,
 } from "../db/model/Variable.js"
 import { getDatapageDataV2, getDatapageGdoc } from "../datapage/Datapage.js"
 import { ExplorerProgram } from "../explorer/ExplorerProgram.js"
@@ -61,7 +63,6 @@ import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
 import { parseFaqs } from "../db/model/Gdoc/rawToEnriched.js"
 import { GdocPost } from "../db/model/Gdoc/GdocPost.js"
 import { getShortPageCitation } from "../site/gdocs/utils.js"
-import { isEmpty } from "lodash"
 import { getSlugForTopicTag, getTagToSlugMap } from "./GrapherBakingUtils.js"
 
 const renderDatapageIfApplicable = async (
@@ -70,50 +71,19 @@ const renderDatapageIfApplicable = async (
     publishedExplorersBySlug?: Record<string, ExplorerProgram>,
     imageMetadataDictionary?: Record<string, Image>
 ) => {
-    // If we have a single Y variable and that one has a schema version >= 2,
-    // meaning it has the metadata to render a datapage, AND if the metadata includes
-    // text for at least one of the description* fields or titlePublic, then we show the datapage
-    // based on this information.
-    const yVariableIds = grapher
-        .dimensions!.filter((d) => d.property === DimensionProperty.y)
-        .map((d) => d.variableId)
-    const xVariableIds = grapher
-        .dimensions!.filter((d) => d.property === DimensionProperty.x)
-        .map((d) => d.variableId)
-    // Make a data page for single indicator indicator charts.
-    // For scatter plots we want to only show a data page if it has no X variable mapped, which
-    // is a special case where time is the X axis. Marimekko charts are the other chart that uses
-    // the X dimension but there we usually map population on X which should not prevent us from
-    // showing a data page.
-    if (
-        yVariableIds.length === 1 &&
-        (grapher.type !== ChartTypeName.ScatterPlot ||
-            xVariableIds.length === 0)
-    ) {
-        const variableId = yVariableIds[0]
-        const variableMetadata = await getVariableMetadata(variableId)
-
-        if (
-            variableMetadata.schemaVersion !== undefined &&
-            variableMetadata.schemaVersion >= 2 &&
-            (!isEmpty(variableMetadata.descriptionShort) ||
-                !isEmpty(variableMetadata.descriptionProcessing) ||
-                !isEmpty(variableMetadata.descriptionKey) ||
-                !isEmpty(variableMetadata.descriptionFromProducer) ||
-                !isEmpty(variableMetadata.presentation?.titlePublic))
-        ) {
-            return await renderDataPageV2({
-                variableId,
-                variableMetadata,
-                isPreviewing: isPreviewing,
-                useIndicatorGrapherConfigs: false,
-                pageGrapher: grapher,
-                publishedExplorersBySlug,
-                imageMetadataDictionary,
-            })
-        }
-    }
-    return undefined
+    const variable = await getVariableOfDatapageIfApplicable(grapher)
+
+    if (!variable) return undefined
+
+    return await renderDataPageV2({
+        variableId: variable.id,
+        variableMetadata: variable.metadata,
+        isPreviewing: isPreviewing,
+        useIndicatorGrapherConfigs: false,
+        pageGrapher: grapher,
+        publishedExplorersBySlug,
+        imageMetadataDictionary,
+    })
 }
 
 /**

baker/SiteBaker.tsx

@@ -47,13 +47,15 @@ import {
     countries,
     FullPost,
     LinkedChart,
+    LinkedIndicator,
     extractDetailsFromSyntax,
     OwidGdocErrorMessageType,
     ImageMetadata,
     OwidGdoc,
     OwidGdocPostInterface,
     OwidGdocType,
     DATA_INSIGHTS_INDEX_PAGE_SIZE,
+    excludeUndefined,
 } from "@ourworldindata/utils"
 
 import { execWrapper } from "../db/execWrapper.js"
@@ -83,6 +85,10 @@ import {
 } from "../settings/clientSettings.js"
 import pMap from "p-map"
 import { GdocDataInsight } from "../db/model/Gdoc/GdocDataInsight.js"
+import {
+    getVariableMetadata,
+    getVariableOfDatapageIfApplicable,
+} from "../db/model/Variable.js"
 
 type PrefetchedAttachments = {
     linkedDocuments: Record<string, OwidGdocPostInterface>
@@ -91,6 +97,7 @@ type PrefetchedAttachments = {
         graphers: Record<string, LinkedChart>
         explorers: Record<string, LinkedChart>
     }
+    linkedIndicators: Record<number, LinkedIndicator>
 }
 
 // These aren't all "wordpress" steps
@@ -282,7 +289,7 @@ export class SiteBaker {
         return without(existingSlugs, ...postSlugsFromDb)
     }
 
-    // Prefetches all linkedDocuments, imageMetadata, and linkedCharts instead of having to fetch them
+    // Prefetches all linkedDocuments, imageMetadata, linkedCharts, and linkedIndicators instead of having to fetch them
     // for each individual gdoc. Optionally takes a tuple of string arrays to pick from the prefetched
     // dictionaries.
     _prefetchedAttachmentsCache: PrefetchedAttachments | undefined = undefined
@@ -308,23 +315,38 @@ export class SiteBaker {
                             `${BAKED_BASE_URL}/default-thumbnail.jpg`,
                     }))
                 )
+
             // Includes redirects
-            const publishedChartsBySlug = await Chart.mapSlugsToConfigs().then(
-                (results) =>
-                    results.reduce(
-                        (acc, cur) => ({
-                            ...acc,
-                            [cur.slug]: {
-                                originalSlug: cur.slug,
-                                resolvedUrl: `${BAKED_GRAPHER_URL}/${cur.config.slug}`,
-                                queryString: "",
-                                title: cur.config.title || "",
-                                thumbnail: `${BAKED_GRAPHER_EXPORTS_BASE_URL}/${cur.config.slug}.svg`,
-                            },
-                        }),
-                        {} as Record<string, LinkedChart>
-                    )
+            const publishedChartsRaw = await Chart.mapSlugsToConfigs()
+            const publishedCharts: LinkedChart[] = await Promise.all(
+                publishedChartsRaw.map(async (chart) => {
+                    const datapageIndicator =
+                        await getVariableOfDatapageIfApplicable(chart.config)
+                    return {
+                        originalSlug: chart.slug,
+                        resolvedUrl: `${BAKED_GRAPHER_URL}/${chart.config.slug}`,
+                        queryString: "",
+                        title: chart.config.title || "",
+                        thumbnail: `${BAKED_GRAPHER_EXPORTS_BASE_URL}/${chart.config.slug}.svg`,
+                        indicatorId: datapageIndicator?.id,
+                    }
+                })
+            )
+            const publishedChartsBySlug = keyBy(publishedCharts, "originalSlug")
+
+            const datapageIndicatorIds = excludeUndefined(
+                publishedCharts.map((chart) => chart.indicatorId)
+            )
+            const datapageIndicators: LinkedIndicator[] = await Promise.all(
+                datapageIndicatorIds.map(async (indicatorId: number) => {
+                    const metadata = await getVariableMetadata(indicatorId)
+                    return {
+                        id: indicatorId,
+                        titlePublic: metadata.presentation?.titlePublic,
+                    }
+                })
             )
+            const datapageIndicatorsById = keyBy(datapageIndicators, "id")
 
             const prefetchedAttachments = {
                 linkedDocuments: publishedGdocsDictionary,
@@ -333,6 +355,7 @@ export class SiteBaker {
                     explorers: publishedExplorersBySlug,
                     graphers: publishedChartsBySlug,
                 },
+                linkedIndicators: datapageIndicatorsById,
             }
             this._prefetchedAttachmentsCache = prefetchedAttachments
         }
@@ -353,6 +376,16 @@ export class SiteBaker {
                 .map((gdoc) => gdoc.content["featured-image"])
                 .filter((filename): filename is string => !!filename)
 
+            const linkedGrapherCharts = pick(
+                this._prefetchedAttachmentsCache.linkedCharts.graphers,
+                linkedGrapherSlugs
+            )
+            const linkedIndicatorIds = excludeUndefined(
+                Object.values(linkedGrapherCharts).map(
+                    (chart) => chart.indicatorId
+                )
+            )
+
             return {
                 linkedDocuments,
                 imageMetadata: pick(
@@ -361,11 +394,7 @@ export class SiteBaker {
                 ),
                 linkedCharts: {
                     graphers: {
-                        ...pick(
-                            this._prefetchedAttachmentsCache.linkedCharts
-                                .graphers,
-                            linkedGrapherSlugs
-                        ),
+                        ...linkedGrapherCharts,
                     },
                     explorers: {
                         ...pick(
@@ -375,6 +404,10 @@ export class SiteBaker {
                         ),
                     },
                 },
+                linkedIndicators: pick(
+                    this._prefetchedAttachmentsCache.linkedIndicators,
+                    linkedIndicatorIds
+                ),
             }
         }
         return this._prefetchedAttachmentsCache
@@ -460,6 +493,7 @@ export class SiteBaker {
                 ...attachments.linkedCharts.graphers,
                 ...attachments.linkedCharts.explorers,
             }
+            publishedGdoc.linkedIndicators = attachments.linkedIndicators
 
             // this is a no-op if the gdoc doesn't have an all-chart block
             await publishedGdoc.loadRelatedCharts()