feat(search): surface explorer views in search results

owid · Mar 29, 2024 · 3c15ba9 · 3c15ba9
1 parent e62157f
commit 3c15ba9
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/site/search/Search.scss b/site/search/Search.scss
@@ -193,6 +193,7 @@
 
 .search-results__pages-list,
 .search-results__explorers-list,
+.search-results__explorer-views-list,
 .search-results__charts-list {
     gap: var(--grid-gap);
     @include sm-only {
@@ -227,7 +228,8 @@
     display: block;
 }
 
-.search-results__explorer-hit a {
+.search-results__explorer-hit a,
+.search-results__explorer-view-hit a {
     background-color: $blue-10;
     height: 100%;
     padding: 24px;
@@ -326,13 +328,15 @@
 
 .search-results__pages,
 .search-results__explorers,
+.search-results__explorer-views,
 .search-results__charts {
     display: none;
 }
 
 .search-results[data-active-filter="all"] {
     .search-results__pages,
     .search-results__explorers,
+    .search-results__explorer-views,
     .search-results__charts {
         // both needed for .search-results__show-more-container absolute-positioning
         display: inline-block;
@@ -377,10 +381,21 @@
     }
 }
 
-.search-results[data-active-filter="explorers"] .search-results__explorers {
+.search-results__explorer-view-hit {
+    display: none;
+
+    &:nth-child(-n + 4) {
+        display: inline;
+    }
+}
+
+.search-results[data-active-filter="explorers"] .search-results__explorers,
+.search-results[data-active-filter="explorers"]
+    .search-results__explorer-views {
     display: inline;
 
-    .search-results__explorer-hit {
+    .search-results__explorer-hit,
+    .search-results__explorer-view-hit {
         display: inline;
     }
 }

diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
@@ -35,6 +35,7 @@ import {
     searchCategoryFilters,
     IPageHit,
     pageTypeDisplayNames,
+    IExplorerViewHit,
 } from "./searchTypes.js"
 import { EXPLORERS_ROUTE_FOLDER } from "../../explorer/ExplorerConstants.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
@@ -121,6 +122,23 @@ function ChartHit({ hit }: { hit: IChartHit }) {
     )
 }
 
+function ExplorerViewHit({ hit }: { hit: IExplorerViewHit }) {
+    return (
+        <a
+            data-algolia-index={getIndexName(SearchIndexName.ExplorerViews)}
+            data-algolia-object-id={hit.objectID}
+            data-algolia-position={hit.__position}
+            href={`${BAKED_BASE_URL}/${EXPLORERS_ROUTE_FOLDER}/${hit.explorerSlug}${hit.viewQueryParams}`}
+        >
+            <h4 className="h3-bold">{hit.viewTitle}</h4>
+            <span>
+                in <em>{hit.explorerTitle} Data Explorer</em>
+            </span>
+            {/* Explorer subtitles are mostly useless at the moment, so we're only showing titles */}
+        </a>
+    )
+}
+
 function ExplorerHit({ hit }: { hit: IExplorerHit }) {
     return (
         <a
@@ -194,10 +212,15 @@ function Filters({
     const hitsLengthByIndexName = mapValues(resultsByIndexName, (results) =>
         get(results, ["results", "hits", "length"], 0)
     )
+
     hitsLengthByIndexName[getIndexName("all")] = Object.values(
         hitsLengthByIndexName
     ).reduce((a: number, b: number) => a + b, 0)
 
+    hitsLengthByIndexName[getIndexName(SearchIndexName.Explorers)] =
+        hitsLengthByIndexName[getIndexName(SearchIndexName.Explorers)] +
+        hitsLengthByIndexName[getIndexName(SearchIndexName.ExplorerViews)]
+
     return (
         <div className="search-filters">
             <ul
@@ -375,6 +398,38 @@ const SearchResults = (props: SearchResultsProps) => {
                     </section>
                 </NoResultsBoundary>
             </Index>
+            <Index indexName={getIndexName(SearchIndexName.ExplorerViews)}>
+                <Configure
+                    hitsPerPage={10}
+                    distinct
+                    clickAnalytics={hasClickAnalyticsConsent}
+                />
+                <NoResultsBoundary>
+                    <section className="search-results__explorer-views">
+                        <header className="search-results__header">
+                            <h2 className="h2-bold search-results__section-title">
+                                Data Explorer views
+                            </h2>
+                            <ShowMore
+                                category={SearchIndexName.ExplorerViews}
+                                cutoffNumber={4}
+                                activeCategoryFilter={activeCategoryFilter}
+                                handleCategoryFilterClick={
+                                    handleCategoryFilterClick
+                                }
+                            />
+                        </header>
+                        <Hits
+                            classNames={{
+                                root: "search-results__list-container",
+                                list: "search-results__explorer-views-list grid grid-cols-2 grid-sm-cols-1",
+                                item: "search-results__explorer-view-hit",
+                            }}
+                            hitComponent={ExplorerViewHit}
+                        />
+                    </section>
+                </NoResultsBoundary>
+            </Index>
             <Index indexName={getIndexName(SearchIndexName.Charts)}>
                 <Configure
                     hitsPerPage={40}

diff --git a/site/search/searchTypes.ts b/site/search/searchTypes.ts
@@ -36,6 +36,14 @@ export interface PageRecord {
 
 export type IPageHit = PageRecord & Hit<BaseHit>
 
+export type IExplorerViewHit = Hit<BaseHit> & {
+    objectID: string
+    explorerSlug: string
+    viewTitle: string
+    explorerTitle: string
+    viewQueryParams: string
+}
+
 export type IExplorerHit = Hit<BaseHit> & {
     objectID: string
     slug: string