✨ WIP data catalog breadcrumbs implementation

owid · Jul 19, 2024 · d18694a · d18694a
1 parent f56d196
commit d18694a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/site/DataCatalog.scss b/site/DataCatalog.scss
@@ -11,6 +11,16 @@
     position: relative;
 }
 
+.data-catalog-breadcrumb {
+    margin-left: 8px;
+    svg {
+        margin-right: 8px;
+    }
+    a {
+        color: $blue-60;
+    }
+}
+
 .data-catalog-ribbon {
     background-color: $blue-5;
     padding: 24px;

diff --git a/site/DataCatalog.tsx b/site/DataCatalog.tsx
@@ -24,6 +24,8 @@ import {
 import { SearchIndexName } from "./search/searchTypes.js"
 import { getIndexName } from "./search/searchClient.js"
 import { UiState } from "instantsearch.js"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons"
 
 // SSR-safe way to get the current pathname
 const usePathname = () => {
@@ -101,11 +103,43 @@ function getArea(
     )
 }
 
-const DataCatalogRibbonView = (props: {
+const Breadcrumbs = ({
+    subpaths,
+    tagNamesBySlug,
+}: {
+    subpaths: string[]
+    tagNamesBySlug: Record<string, string>
+}) => {
+    return (
+        <div className="data-catalog-breadcrumbs span-cols-12 col-start-2">
+            <a className="body-3-medium data-catalog-breadcrumb" href="/charts">
+                All areas
+            </a>
+            {subpaths.map((subpath, i) => {
+                const path = subpaths.slice(0, i + 1).join("/")
+                return (
+                    <span
+                        className="body-3-medium data-catalog-breadcrumb"
+                        key={subpath}
+                    >
+                        <FontAwesomeIcon icon={faChevronRight} />
+                        <a href={path}>{tagNamesBySlug[subpath]}</a>
+                    </span>
+                )
+            })}
+        </div>
+    )
+}
+
+const DataCatalogRibbonView = ({
+    tagGraph,
+    subpaths,
+    tagNamesBySlug,
+}: {
     tagGraph: TagGraphRoot
+    tagNamesBySlug: Record<string, string>
     subpaths: string[]
 }) => {
-    const { tagGraph, subpaths } = props
     let areas: TagGraphNode[] = []
     // if subpaths = [], we're on the landing page, render all areas
     if (subpaths.length === 0) {
@@ -115,11 +149,13 @@ const DataCatalogRibbonView = (props: {
         areas = area ? area.children : []
     }
     if (areas.length === 0) {
+        // TODO: what should we do here?
         return <div className="span-cols-12 col-start-2">Invalid area</div>
     }
 
     return (
         <div className="span-cols-12 col-start-2">
+            {/* <Breadcrumbs subpaths={subpaths} tagNamesBySlug={tagNamesBySlug} /> */}
             {areas.map((area) => (
                 <DataCatalogRibbon tagName={area.name} key={area.name} />
             ))}
@@ -144,11 +180,15 @@ const DataCatalogResults = ({
     )
 
     return shouldAttemptRibbonsView ? (
-        <DataCatalogRibbonView tagGraph={tagGraph} subpaths={subpaths} />
+        <DataCatalogRibbonView
+            tagGraph={tagGraph}
+            subpaths={subpaths}
+            tagNamesBySlug={tagNamesBySlug}
+        />
     ) : (
         <Index indexName={getIndexName(SearchIndexName.Charts)}>
             <Configure
-                facetFilters={[`tags:${subpathsAsTagNames.join(",")}`]}
+                facetFilters={subpathsAsTagNames.map((tag) => `tags:${tag}`)}
                 hitsPerPage={20}
             />
             <Hits
@@ -163,7 +203,7 @@ const DataCatalogResults = ({
                 className="span-cols-12 col-start-2"
                 style={{ margin: "48px 0" }}
             >
-                TODO: pagination
+                TODO: pagination?
             </pre>
         </Index>
     )