owid · ikesau · Jul 18, 2024 · Jul 19, 2024 · Jul 19, 2024 · Jul 22, 2024
diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.tsx
@@ -285,10 +285,9 @@ getPlainRouteNonIdempotentWithRWTransaction(
 
 getPlainRouteWithROTransaction(
     mockSiteRouter,
-    "/charts",
+    "/charts*",
     async (req, res, trx) => {
-        const explorerAdminServer = new ExplorerAdminServer(GIT_CMS_DIR)
-        res.send(await renderChartsPage(trx, explorerAdminServer))
+        res.send(await renderChartsPage(trx))
     }
 )
 

diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
@@ -672,7 +672,7 @@ export class SiteBaker {
 
         await this.stageWrite(
             `${this.bakedSiteDir}/charts.html`,
-            await renderChartsPage(knex, this.explorerAdminServer)
+            await renderChartsPage(knex)
         )
         this.progressBar.tick({ name: "✅ baked special pages" })
     }

diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
@@ -1,6 +1,6 @@
 import { LongFormPage, PageOverrides } from "../site/LongFormPage.js"
 import { BlogIndexPage } from "../site/BlogIndexPage.js"
-import { ChartsIndexPage, ChartIndexItem } from "../site/ChartsIndexPage.js"
+import { DataCatalogPage } from "../site/DataCatalogPage.js"
 import { DynamicCollectionPage } from "../site/collections/DynamicCollectionPage.js"
 import { StaticCollectionPage } from "../site/collections/StaticCollectionPage.js"
 import { SearchPage } from "../site/search/SearchPage.js"
@@ -10,7 +10,6 @@ import { ThankYouPage } from "../site/ThankYouPage.js"
 import OwidGdocPage from "../site/gdocs/OwidGdocPage.js"
 import React from "react"
 import ReactDOMServer from "react-dom/server.js"
-import * as lodash from "lodash"
 import { formatCountryProfile, isCanonicalInternalUrl } from "./formatting.js"
 import {
     bakeGrapherUrls,
@@ -44,6 +43,7 @@ import {
     OwidGdocType,
     OwidGdoc,
     OwidGdocDataInsightInterface,
+    createTagGraph,
 } from "@ourworldindata/utils"
 import { extractFormattingOptions } from "../serverUtils/wordpressUtils.js"
 import { FormattingOptions, GrapherInterface } from "@ourworldindata/types"
@@ -54,6 +54,7 @@ import {
     KnexReadWriteTransaction,
     KnexReadonlyTransaction,
     getHomepageId,
+    getFlatTagGraph,
 } from "../db/db.js"
 import { getPageOverrides, isPageOverridesCitable } from "./pageOverrides.js"
 import { ProminentLink } from "../site/blocks/ProminentLink.js"
@@ -94,59 +95,11 @@ import { GdocDataInsight } from "../db/model/Gdoc/GdocDataInsight.js"
 export const renderToHtmlPage = (element: any) =>
     `<!doctype html>${ReactDOMServer.renderToStaticMarkup(element)}`
 
-export const renderChartsPage = async (
-    knex: KnexReadonlyTransaction,
-    explorerAdminServer: ExplorerAdminServer
-) => {
-    const explorers = await explorerAdminServer.getAllPublishedExplorers()
-
-    const chartItems = await knexRaw<ChartIndexItem>(
-        knex,
-        `-- sql
-        SELECT
-            id,
-            config->>"$.slug" AS slug,
-            config->>"$.title" AS title,
-            config->>"$.variantName" AS variantName
-        FROM charts
-        WHERE
-            isIndexable IS TRUE
-            AND publishedAt IS NOT NULL
-            AND config->>"$.isPublished" = "true"
-    `
-    )
-
-    const chartTags = await knexRaw<{
-        chartId: number
-        tagId: number
-        tagName: string
-        tagParentId: number
-    }>(
-        knex,
-        `-- sql
-        SELECT ct.chartId, ct.tagId, t.name as tagName, t.parentId as tagParentId FROM chart_tags ct
-        JOIN charts c ON c.id=ct.chartId
-        JOIN tags t ON t.id=ct.tagId
-    `
-    )
-
-    for (const c of chartItems) {
-        c.tags = []
-    }
-
-    const chartsById = lodash.keyBy(chartItems, (c) => c.id)
-
-    for (const ct of chartTags) {
-        const c = chartsById[ct.chartId]
-        if (c) c.tags.push({ id: ct.tagId, name: ct.tagName })
-    }
-
+export const renderChartsPage = async (knex: KnexReadonlyTransaction) => {
+    const { __rootId, ...flatTagGraph } = await getFlatTagGraph(knex)
+    const rootTagGraph = createTagGraph(flatTagGraph, __rootId)
     return renderToHtmlPage(
-        <ChartsIndexPage
-            explorers={explorers}
-            chartItems={chartItems}
-            baseUrl={BAKED_BASE_URL}
-        />
+        <DataCatalogPage baseUrl={BAKED_BASE_URL} tagGraph={rootTagGraph} />
     )
 }
 

diff --git a/package.json b/package.json
@@ -133,7 +133,7 @@
         "react-flip-toolkit": "^7.0.9",
         "react-hook-form": "^7.51.3",
         "react-horizontal-scrolling-menu": "^4.0.3",
-        "react-instantsearch": "^7.11.3",
+        "react-instantsearch": "^7.12.2",
         "react-intersection-observer": "^9.10.1",
         "react-move": "^6.5.0",
         "react-recaptcha": "^2.3.10",

diff --git a/packages/@ourworldindata/components/src/styles/colors.scss b/packages/@ourworldindata/components/src/styles/colors.scss
@@ -25,6 +25,10 @@ $amber-10: #f4eddb;
 $blue-20: #dbe5f0;
 $blue-10: #ebeef2;
 $blue-5: #f0f4fa;
+$gray-80: #5b5b5b;
+$gray-70: #858585;
+$gray-30: #dadada;
+$gray-20: #e7e7e7;
 $gray-10: #f7f7f7;
 $beige: #fbf9f3;
 $white: #ffffff;

diff --git a/packages/@ourworldindata/components/src/styles/mixins.scss b/packages/@ourworldindata/components/src/styles/mixins.scss
@@ -446,3 +446,29 @@
         }
     }
 }
+
+@mixin owid-checkbox {
+    background: #fff;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid $gray-30;
+
+    &:active {
+        background-color: $blue-10;
+    }
+    &:checked {
+        background-color: $blue-50;
+        border: none;
+        &:before {
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            content: "";
+            clip-path: path(
+                "M3.087,8.509C2.799,8.218 2.802,7.749 3.093,7.461C3.383,7.173 3.853,7.176 4.141,7.466L6.528,9.878L11.862,4.547C12.152,4.257 12.621,4.258 12.91,4.547C13.2,4.836 13.199,5.306 12.91,5.595L7.049,11.453C6.909,11.593 6.72,11.671 6.523,11.67C6.326,11.67 6.137,11.59 5.998,11.45L3.087,8.509Z"
+            );
+            background-color: #fff;
+        }
+    }
+}
diff --git a/packages/@ourworldindata/components/src/styles/util.scss b/packages/@ourworldindata/components/src/styles/util.scss
@@ -26,6 +26,10 @@
     text-align: right;
 }
 
+.list-style-none {
+    list-style: none;
+}
+
 .display-block {
     display: block;
 }

diff --git a/packages/@ourworldindata/types/src/domainTypes/Various.ts b/packages/@ourworldindata/types/src/domainTypes/Various.ts
@@ -31,6 +31,7 @@ export enum SiteFooterContext {
     explorerPage = "explorerPage",
     default = "default",
     dataInsightsIndexPage = "data-insights-index-page",
+    chartsPage = "chartsPage",
 }
 
 export interface GitCommit {

diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
@@ -257,6 +257,7 @@ export {
     getAggregates,
     type Aggregate,
     getOthers,
+    countriesByName,
 } from "./regions.js"
 
 export { getStylesForTargetHeight } from "./react-select.js"

diff --git a/packages/@ourworldindata/utils/src/regions.ts b/packages/@ourworldindata/utils/src/regions.ts
@@ -71,7 +71,7 @@ export const getContinents = lazy(
         ) as Continent[]
 )
 
-const countriesByName = lazy(() =>
+export const countriesByName = lazy(() =>
     Object.fromEntries(countries.map((country) => [country.name, country]))
 )
 

diff --git a/site/ChartsIndexPage.tsx b/site/ChartsIndexPage.tsx
diff --git a/site/CountriesIndexPage.tsx b/site/CountriesIndexPage.tsx
@@ -40,7 +40,6 @@ export const CountriesIndexPage = (props: {
                     </ul>
                 </main>
                 <SiteFooter baseUrl={baseUrl} />
-                {/* <script>{`window.runChartsIndexPage()`}</script> */}
             </body>
         </html>
     )
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,6 @@ export const CountriesIndexPage = (props: { @@
                         </ul>
                     </main>
                     <SiteFooter baseUrl={baseUrl} />
-                    {/* <script>{`window.runChartsIndexPage()`}</script> */}
                 </body>
             </html>
         )
@@ Expand Down @@