Merge pull request #3108 from owid/gdoc-chart-book-component

🎉 (gdocs) add key-indicator-collection component

baker/SiteBaker.tsx

@@ -57,6 +57,7 @@ import {
     OwidGdocMinimalPostInterface,
     excludeUndefined,
     grabMetadataForGdocLinkedIndicator,
+    GrapherTabOption,
 } from "@ourworldindata/utils"
 
 import { execWrapper } from "../db/execWrapper.js"
@@ -324,11 +325,13 @@ export class SiteBaker {
             const publishedChartsRaw = await Chart.mapSlugsToConfigs()
             const publishedCharts: LinkedChart[] = await Promise.all(
                 publishedChartsRaw.map(async (chart) => {
+                    const tab = chart.config.tab ?? GrapherTabOption.chart
                     const datapageIndicator =
                         await getVariableOfDatapageIfApplicable(chart.config)
                     return {
                         originalSlug: chart.slug,
                         resolvedUrl: `${BAKED_GRAPHER_URL}/${chart.config.slug}`,
+                        tab,
                         queryString: "",
                         title: chart.config.title || "",
                         thumbnail: `${BAKED_GRAPHER_EXPORTS_BASE_URL}/${chart.config.slug}.svg`,

db/model/Gdoc/GdocBase.ts

@@ -36,6 +36,7 @@ import {
     OwidGdocMinimalPostInterface,
     urlToSlug,
     grabMetadataForGdocLinkedIndicator,
+    GrapherTabOption,
 } from "@ourworldindata/utils"
 import { BAKED_GRAPHER_URL } from "../../../settings/serverSettings.js"
 import { google } from "googleapis"
@@ -530,6 +531,7 @@ export class GdocBase extends BaseEntity implements OwidGdocBaseInterface {
                         "horizontal-rule",
                         "html",
                         "image",
+                        "key-indicator-collection",
                         "list",
                         "missing-data",
                         "numbered-list",
@@ -582,11 +584,13 @@ export class GdocBase extends BaseEntity implements OwidGdocBaseInterface {
                     if (!chart) return
                     const resolvedSlug = chart.config.slug ?? ""
                     const resolvedTitle = chart.config.title ?? ""
+                    const tab = chart.config.tab ?? GrapherTabOption.chart
                     const datapageIndicator =
                         await getVariableOfDatapageIfApplicable(chart.config)
                     const linkedChart: LinkedChart = {
                         originalSlug,
                         title: resolvedTitle,
+                        tab,
                         resolvedUrl: `${BAKED_GRAPHER_URL}/${resolvedSlug}`,
                         thumbnail: `${BAKED_GRAPHER_EXPORTS_BASE_URL}/${resolvedSlug}.svg`,
                         indicatorId: datapageIndicator?.id,

db/model/Gdoc/enrichedToMarkdown.ts

@@ -1,3 +1,4 @@
+import { EnrichedBlockKeyIndicator } from "@ourworldindata/types"
 import {
     OwidEnrichedGdocBlock,
     Span,
@@ -283,5 +284,13 @@ ${links}`
                 exportComponents
             )
         )
+        .with({ type: "key-indicator-collection" }, (b): string | undefined => {
+            const keyIndicators = b.blocks
+                .map((keyIndicatorBlock: EnrichedBlockKeyIndicator) =>
+                    enrichedBlockToMarkdown(keyIndicatorBlock, exportComponents)
+                )
+                .join("\n")
+            return `<KeyIndicatorCollection>\n${keyIndicators}\n</KeyIndicatorCollection>`
+        })
         .exhaustive()
 }

db/model/Gdoc/enrichedToRaw.ts

@@ -37,6 +37,7 @@ import {
     RawBlockTable,
     RawBlockBlockquote,
     RawBlockKeyIndicator,
+    RawBlockKeyIndicatorCollection,
 } from "@ourworldindata/types"
 import { spanToHtmlString } from "./gdocUtils.js"
 import { match, P } from "ts-pattern"
@@ -448,5 +449,14 @@ export function enrichedBlockToRawBlock(
                 },
             }
         })
+        .with(
+            { type: "key-indicator-collection" },
+            (b): RawBlockKeyIndicatorCollection => {
+                return {
+                    type: "key-indicator-collection",
+                    value: b.blocks.map(enrichedBlockToRawBlock),
+                }
+            }
+        )
         .exhaustive()
 }

db/model/Gdoc/exampleEnrichedBlocks.ts

@@ -542,4 +542,26 @@ export const enrichedBlockExamples: Record<
         blurb: [enrichedBlockText],
         parseErrors: [],
     },
+    "key-indicator-collection": {
+        type: "key-indicator-collection",
+        blocks: [
+            {
+                type: "key-indicator",
+                datapageUrl:
+                    "https://ourworldindata.org/grapher/life-expectancy",
+                title: "How did people's life expectancy change over time?",
+                blurb: [enrichedBlockText],
+                parseErrors: [],
+            },
+            {
+                type: "key-indicator",
+                datapageUrl:
+                    "https://ourworldindata.org/grapher/share-of-population-in-extreme-poverty",
+                title: "What share of the population is living in extreme poverty?",
+                blurb: [enrichedBlockText],
+                parseErrors: [],
+            },
+        ],
+        parseErrors: [],
+    },
 }

db/model/Gdoc/rawToArchie.ts

@@ -36,6 +36,7 @@ import {
     RawBlockTableRow,
     RawBlockBlockquote,
     RawBlockKeyIndicator,
+    RawBlockKeyIndicatorCollection,
 } from "@ourworldindata/types"
 import { isArray } from "@ourworldindata/utils"
 import { match } from "ts-pattern"
@@ -640,6 +641,17 @@ function* rawBlockKeyIndicatorToArchieMLString(
     yield "{}"
 }
 
+function* rawBlockKeyIndicatorCollectionToArchieMLString(
+    block: RawBlockKeyIndicatorCollection
+): Generator<string, void, undefined> {
+    yield "[.+key-indicator-collection]"
+    if (typeof block.value !== "string") {
+        for (const b of block.value)
+            yield* OwidRawGdocBlockToArchieMLStringGenerator(b)
+    }
+    yield "[]"
+}
+
 export function* OwidRawGdocBlockToArchieMLStringGenerator(
     block: OwidRawGdocBlock | RawBlockTableRow
 ): Generator<string, void, undefined> {
@@ -705,6 +717,10 @@ export function* OwidRawGdocBlockToArchieMLStringGenerator(
         .with({ type: "table-row" }, rawBlockRowToArchieMLString)
         .with({ type: "blockquote" }, rawBlockBlockquoteToArchieMLString)
         .with({ type: "key-indicator" }, rawBlockKeyIndicatorToArchieMLString)
+        .with(
+            { type: "key-indicator-collection" },
+            rawBlockKeyIndicatorCollectionToArchieMLString
+        )
         .exhaustive()
     yield* content
 }

db/model/Gdoc/rawToEnriched.ts

@@ -101,6 +101,8 @@ import {
     tableTemplates,
     RawBlockBlockquote,
     EnrichedBlockBlockquote,
+    RawBlockKeyIndicatorCollection,
+    EnrichedBlockKeyIndicatorCollection,
 } from "@ourworldindata/types"
 import {
     traverseEnrichedSpan,
@@ -199,6 +201,7 @@ export function parseRawBlocksToEnrichedBlocks(
         .with({ type: "entry-summary" }, parseEntrySummary)
         .with({ type: "table" }, parseTable)
         .with({ type: "key-indicator" }, parseKeyIndicator)
+        .with({ type: "key-indicator-collection" }, parseKeyIndicatorCollection)
         .exhaustive()
 }
 
@@ -1942,3 +1945,69 @@ const parseKeyIndicator = (
         parseErrors: parsedBlurbErrors,
     }) as EnrichedBlockKeyIndicator
 }
+
+function parseKeyIndicatorCollection(
+    raw: RawBlockKeyIndicatorCollection
+): EnrichedBlockKeyIndicatorCollection {
+    const createError = (
+        error: ParseError,
+        warnings: ParseError[] = []
+    ): EnrichedBlockKeyIndicatorCollection => ({
+        type: "key-indicator-collection",
+        blocks: [],
+        parseErrors: [error, ...warnings],
+    })
+
+    const warnings = []
+
+    if (!Array.isArray(raw.value)) {
+        return createError({
+            message:
+                "key-indicator-collection is not a freeform array. Make sure you've written [.+key-indicator-collection]",
+        })
+    }
+
+    const blocks = raw.value
+    const keyIndicatorBlocks = blocks.filter(
+        (block) => block.type === "key-indicator"
+    )
+
+    if (keyIndicatorBlocks.length < blocks.length) {
+        warnings.push({
+            message:
+                "key-indicator-collection contains blocks that are not key-indicators blocks",
+            isWarning: true,
+        })
+    }
+
+    const parsedBlocks = compact(
+        keyIndicatorBlocks.map(parseRawBlocksToEnrichedBlocks)
+    ) as EnrichedBlockKeyIndicator[]
+
+    const validBlocks = parsedBlocks.filter(
+        (block) =>
+            block.parseErrors.filter((error) => !error.isWarning).length === 0
+    )
+
+    if (validBlocks.length < parsedBlocks.length) {
+        warnings.push({
+            message:
+                "key-indicator-collection contains at least one invalid key-indicators block",
+            isWarning: true,
+        })
+    }
+
+    if (validBlocks.length <= 1) {
+        const message =
+            validBlocks.length === 0
+                ? "key-indicator-collection contains no valid key-indicator blocks"
+                : "key-indicator-collection contains only one valid key-indicator block"
+        return createError({ message }, warnings)
+    }
+
+    return {
+        type: "key-indicator-collection",
+        blocks: validBlocks,
+        parseErrors: warnings,
+    }
+}

packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts

@@ -106,6 +106,16 @@ export type EnrichedBlockKeyIndicator = {
     source?: string
 } & EnrichedBlockWithParseErrors
 
+export type RawBlockKeyIndicatorCollection = {
+    type: "key-indicator-collection"
+    value: OwidRawGdocBlock[]
+}
+
+export type EnrichedBlockKeyIndicatorCollection = {
+    type: "key-indicator-collection"
+    blocks: EnrichedBlockKeyIndicator[]
+} & EnrichedBlockWithParseErrors
+
 export type RawBlockScroller = {
     type: "scroller"
     value: OwidRawGdocBlock[] | ArchieMLUnexpectedNonObjectValue
@@ -744,6 +754,7 @@ export type OwidRawGdocBlock =
     | RawBlockTable
     | RawBlockBlockquote
     | RawBlockKeyIndicator
+    | RawBlockKeyIndicatorCollection
 
 export type OwidEnrichedGdocBlock =
     | EnrichedBlockAllCharts
@@ -782,3 +793,4 @@ export type OwidEnrichedGdocBlock =
     | EnrichedBlockTable
     | EnrichedBlockBlockquote
     | EnrichedBlockKeyIndicator
+    | EnrichedBlockKeyIndicatorCollection

packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts

@@ -1,5 +1,5 @@
 import { Tag } from "../domainTypes/Tag.js"
-import { RelatedChart } from "../grapherTypes/GrapherTypes.js"
+import { GrapherTabOption, RelatedChart } from "../grapherTypes/GrapherTypes.js"
 import { BreadcrumbItem } from "../domainTypes/Site.js"
 import { TocHeadingWithTitleSupertitle } from "../domainTypes/Toc.js"
 import { ImageMetadata } from "./Image.js"
@@ -22,6 +22,7 @@ export interface LinkedChart {
     originalSlug: string
     resolvedUrl: string
     title: string
+    tab?: GrapherTabOption
     thumbnail?: string
     indicatorId?: number // in case of a datapage
 }

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

@@ -192,6 +192,7 @@ export {
     type RawBlockTopicPageIntro,
     type RawBlockUrl,
     type RawBlockKeyIndicator,
+    type RawBlockKeyIndicatorCollection,
     tableTemplates,
     type TableTemplate,
     tableSizes,
@@ -250,6 +251,7 @@ export {
     type EnrichedBlockTableRow,
     type EnrichedBlockTableCell,
     type EnrichedBlockKeyIndicator,
+    type EnrichedBlockKeyIndicatorCollection,
     type RawBlockResearchAndWritingRow,
 } from "./gdocTypes/ArchieMlComponents.js"
 export {

packages/@ourworldindata/utils/src/Util.ts

@@ -1635,6 +1635,15 @@ export function traverseEnrichedBlocks(
                 })
             }
         )
+        .with(
+            { type: "key-indicator-collection" },
+            (keyIndicatorCollection) => {
+                callback(keyIndicatorCollection)
+                keyIndicatorCollection.blocks.forEach((node) =>
+                    traverseEnrichedBlocks(node, callback, spanCallback)
+                )
+            }
+        )
         .with(
             {
                 type: P.union(

site/gdocs/components/ArticleBlock.tsx

@@ -35,6 +35,7 @@ import { AllCharts } from "./AllCharts.js"
 import Video from "./Video.js"
 import { Table } from "./Table.js"
 import KeyIndicator from "./KeyIndicator.js"
+import KeyIndicatorCollection from "./KeyIndicatorCollection.js"
 
 export type Container =
     | "default"
@@ -71,6 +72,7 @@ const layouts: { [key in Container]: Layouts} = {
         ["image--wide"]: "col-start-4 span-cols-8 col-md-start-2 span-md-cols-12",
         ["image-caption"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
         ["key-indicator"]: "col-start-2 span-cols-12",
+        ["key-indicator-collection"]: "col-start-2 span-cols-12",
         ["key-insights"]: "col-start-2 span-cols-12",
         ["list"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
         ["numbered-list"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
@@ -628,6 +630,12 @@ export default function ArticleBlock({
         .with({ type: "key-indicator" }, (block) => (
             <KeyIndicator className={getLayout("key-indicator")} d={block} />
         ))
+        .with({ type: "key-indicator-collection" }, (block) => (
+            <KeyIndicatorCollection
+                className={getLayout("key-indicator-collection")}
+                d={block}
+            />
+        ))
         .exhaustive()
 
     return (

site/gdocs/components/KeyIndicator.scss

@@ -14,6 +14,9 @@
 
     .indicator-metadata {
         margin-bottom: 16px;
+        @include sm-only {
+            display: none;
+        }
     }
 
     .indicator-title {
@@ -119,4 +122,11 @@
             display: none;
         }
     }
+
+    .key-indicator-chart {
+        @include sm-only {
+            order: -1;
+            margin-bottom: 16px;
+        }
+    }
 }

site/gdocs/components/KeyIndicator.tsx

@@ -54,7 +54,7 @@ export default function KeyIndicator({
                 </a>
             </div>
             <Chart
-                className="col-start-5 span-cols-8 span-sm-cols-12 margin-0"
+                className="key-indicator-chart col-start-5 span-cols-8 span-sm-cols-12 margin-0"
                 d={{
                     url: linkedChart.resolvedUrl,
                     type: "chart",