✨ all-charts block: data catalog link and tag-based heading

owid · Jan 31, 2025 · 36da2f2 · 36da2f2
1 parent 15838ee
commit 36da2f2
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 3 deletions.
diff --git a/adminSiteServer/mockSiteRouter.ts b/adminSiteServer/mockSiteRouter.ts
@@ -527,6 +527,7 @@ async function getTombstoneAttachments(
         linkedDocuments,
         linkedIndicators: {},
         relatedCharts: [],
+        tags: [],
     }
 }
 

diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
@@ -254,6 +254,7 @@ export class SiteBaker {
             ...attachments,
             linkedCharts: {},
             relatedCharts: [],
+            tags: [],
         })
         const outPath = path.join(
             this.bakedSiteDir,

diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
@@ -414,6 +414,7 @@ ${dataInsights
                     homepageMetadata: get(post, "homepageMetadata", {}),
                     latestWorkLinks: get(post, "latestWorkLinks", []),
                     linkedChartViews: get(post, "linkedChartViews", {}),
+                    tags: get(post, "tags", []) ?? [],
                 }}
             >
                 <AtomArticleBlocks blocks={post.content.body} />

diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx
@@ -114,6 +114,7 @@ export const DataInsightsIndexPageContent = (
                     linkedIndicators: {}, // not needed for data insights
                     relatedCharts: [], // not needed for the index page
                     latestDataInsights: [], // not needed for the index page
+                    tags: [], // not needed for the index page
                 }}
             >
                 <header className="data-insights-index-page__header grid grid-cols-12-full-width span-cols-14">

diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
@@ -93,6 +93,7 @@ export const DataPageV2Content = ({
                 linkedCharts: {},
                 linkedIndicators: {},
                 relatedCharts: [],
+                tags: [],
             }}
         >
             <DocumentContext.Provider value={{ isPreviewing }}>

diff --git a/site/gdocs/AttachmentsContext.tsx b/site/gdocs/AttachmentsContext.tsx
@@ -10,6 +10,7 @@ import {
     OwidGdocHomepageMetadata,
     DbEnrichedLatestWork,
     ChartViewInfo,
+    MinimalTag,
 } from "@ourworldindata/types"
 
 export type Attachments = {
@@ -24,6 +25,7 @@ export type Attachments = {
     homepageMetadata?: OwidGdocHomepageMetadata
     latestWorkLinks?: DbEnrichedLatestWork[]
     linkedChartViews?: Record<string, ChartViewInfo>
+    tags: MinimalTag[]
 }
 
 export const AttachmentsContext = createContext<Attachments>({
@@ -37,4 +39,5 @@ export const AttachmentsContext = createContext<Attachments>({
     homepageMetadata: {},
     latestWorkLinks: [],
     linkedChartViews: {},
+    tags: [],
 })
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
@@ -94,6 +94,7 @@ export function OwidGdoc({
                 homepageMetadata: get(props, "homepageMetadata", {}),
                 latestWorkLinks: get(props, "latestWorkLinks", []),
                 linkedChartViews: get(props, "linkedChartViews", {}),
+                tags: get(props, "tags", []) ?? [],
             }}
         >
             <DocumentContext.Provider value={{ isPreviewing }}>

diff --git a/site/gdocs/components/AllCharts.scss b/site/gdocs/components/AllCharts.scss
@@ -1,6 +1,43 @@
 .article-block__all-charts {
     h1.h1-semibold {
-        margin-bottom: 40px;
+        margin: 0;
+        flex: 1 1 0%;
+        .deep-link {
+            // Any value smaller than -16 causes the h1 to wrap in Firefox
+            margin-left: -16px;
+        }
+    }
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 40px;
+
+    .owid-button {
+        line-height: 40px;
+        text-align: center;
+        padding: 0 24px;
+        height: 40px;
+        flex-shrink: 0;
+        align-self: start;
+        background-color: $vermillion;
+        svg {
+            margin-left: 8px;
+        }
+        &:hover {
+            background-color: $accent-vermillion;
+        }
+        @include sm-only {
+            order: 3;
+            margin-top: 24px;
+            width: 100%;
+        }
+    }
+
+    .related-charts {
+        flex-basis: 100%;
+        margin-top: 40px;
     }
 
     figure[data-grapher-src]:not(.grapherPreview) {

diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx
@@ -1,4 +1,5 @@
 import { useContext } from "react"
+import urljoin from "url-join"
 import cx from "classnames"
 import {
     EnrichedBlockAllCharts,
@@ -9,6 +10,9 @@ import {
 } from "@ourworldindata/utils"
 import { AttachmentsContext } from "../AttachmentsContext.js"
 import { RelatedCharts } from "../../blocks/RelatedCharts.js"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
+import { BAKED_BASE_URL } from "../../../settings/clientSettings.js"
 
 type AllChartsProps = EnrichedBlockAllCharts & {
     className?: string
@@ -42,23 +46,39 @@ function sortRelatedCharts(
 
 export function AllCharts(props: AllChartsProps) {
     const { heading, top, className } = props
-    const { relatedCharts } = useContext(AttachmentsContext)
+    const { relatedCharts, tags } = useContext(AttachmentsContext)
     const topSlugs = top.map((item) => Url.fromURL(item.url).slug as string)
 
+    const firstTag = tags[0]
+    const firstTagDataCatalogQueryString = firstTag
+        ? `?topics=${firstTag.name}`
+        : ""
+
     const sortedRelatedCharts = sortRelatedCharts(relatedCharts, topSlugs)
     return (
         <div className={cx(className)}>
             <h1
                 className="article-block__heading h1-semibold"
                 id={ALL_CHARTS_ID}
             >
-                <span>{heading}</span>
+                <span>
+                    {firstTag ? `Key Charts on ${firstTag.name}` : heading}
+                </span>
                 <a
                     className="deep-link"
                     aria-labelledby={ALL_CHARTS_ID}
                     href={`#${ALL_CHARTS_ID}`}
                 />
             </h1>
+            <a
+                className="owid-button"
+                href={`${urljoin(BAKED_BASE_URL, `/data`, firstTagDataCatalogQueryString)}`}
+            >
+                <span className="body-3-medium">
+                    See all charts on this topic
+                    <FontAwesomeIcon icon={faArrowRight} />
+                </span>
+            </a>
             <RelatedCharts
                 showKeyChartsOnly={true}
                 charts={sortedRelatedCharts}

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
@@ -354,6 +354,7 @@ export const MultiDimDataPageContent = ({
                 linkedCharts: {},
                 linkedIndicators: {},
                 relatedCharts: [],
+                tags: [],
             }}
         >
             <div className="DataPageContent MultiDimDataPageContent">