feat(search): card styles for explorer views

owid · Apr 2, 2024 · 539259b · 539259b
1 parent 93fa1af
commit 539259b
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 13 deletions.
diff --git a/site/search/Search.scss b/site/search/Search.scss
@@ -192,7 +192,7 @@
 }
 
 .search-results__pages-list,
-.search-results__explorer-views-list,
+.search-results__explorer-list,
 .search-results__charts-list {
     gap: var(--grid-gap);
     @include sm-only {
@@ -227,7 +227,7 @@
     display: block;
 }
 
-.search-results__explorer-view-hit a {
+.search-results__explorer-hit {
     background-color: $blue-10;
     height: 100%;
     padding: 24px;
@@ -246,6 +246,40 @@
     p {
         color: $blue-60;
     }
+
+    .search-results__explorer-hit-title {
+        display: inline;
+        color: $blue-90;
+        margin: 0 8px 0 0;
+    }
+
+    .search-results__explorer-hit-subtitle {
+        margin: 0 8px 0 0;
+    }
+
+    .search-results__explorer-views-list {
+        margin-left: 20px;
+        margin-top: 5px;
+        list-style: none;
+
+        .search-results__explorer-view-title {
+            color: $blue-90;
+            text-decoration: underline;
+        }
+
+        .search-results__explorer-view-subtitle {
+            color: $blue-60;
+            margin-top: 0px;
+            // text-overflow: ellipsis;
+            // white-space: nowrap;
+            // overflow: hidden;
+            // max-width: 100%;
+        }
+    }
+
+    .search-results__explorer-hit-link {
+        @include owid-link-60;
+    }
 }
 
 .search-results__chart-hit {

diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
@@ -6,6 +6,8 @@ import {
     getWindowQueryParams,
     get,
     mapValues,
+    groupBy,
+    uniqBy,
 } from "@ourworldindata/utils"
 import {
     InstantSearch,
@@ -17,6 +19,7 @@ import {
     Snippet,
     useInstantSearch,
     PoweredBy,
+    useHits,
 } from "react-instantsearch-hooks-web"
 import algoliasearch, { SearchClient } from "algoliasearch"
 import {
@@ -121,6 +124,59 @@ function ChartHit({ hit }: { hit: IChartHit }) {
     )
 }
 
+function ExplorerViewHits() {
+    const { hits, results, sendEvent } = useHits<IExplorerViewHit>()
+
+    const groupedBySlug = groupBy(hits, "explorerSlug")
+    const grouped = Object.values(groupedBySlug).map((explorerViews) => {
+        const firstView = explorerViews[0]
+        return {
+            explorerSlug: firstView.explorerSlug,
+            explorerTitle: firstView.explorerTitle,
+            explorerSubtitle: firstView.explorerSubtitle,
+            numViewsWithinExplorer: firstView.numViewsWithinExplorer,
+            views: uniqBy(explorerViews, "viewTitle"),
+        }
+    })
+
+    return (
+        <div className="search-results__list-container">
+            <ol className="search-results__explorer-list grid grid-cols-2 grid-sm-cols-1">
+                {grouped.map((group) => (
+                    <div
+                        key={group.explorerSlug}
+                        className="search-results__explorer-hit"
+                    >
+                        <h3 className="h3-bold search-results__explorer-hit-title">
+                            {group.explorerTitle}
+                        </h3>
+                        <p className="body-3-medium-italic search-results__explorer-hit-subtitle">
+                            {group.explorerSubtitle}
+                        </p>
+                        <ul className="search-results__explorer-views-list">
+                            {group.views.map((hit) => (
+                                <li
+                                    key={hit.objectID}
+                                    className="search-results__explorer-view"
+                                >
+                                    <ExplorerViewHit hit={hit} />
+                                </li>
+                            ))}
+                        </ul>
+                        <a
+                            href={`${BAKED_BASE_URL}/${EXPLORERS_ROUTE_FOLDER}/${group.explorerSlug}`}
+                            className="search-results__explorer-hit-link"
+                        >
+                            Explore all {group.numViewsWithinExplorer}{" "}
+                            indicators
+                        </a>
+                    </div>
+                ))}
+            </ol>
+        </div>
+    )
+}
+
 function ExplorerViewHit({ hit }: { hit: IExplorerViewHit }) {
     return (
         <a
@@ -129,10 +185,15 @@ function ExplorerViewHit({ hit }: { hit: IExplorerViewHit }) {
             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>
+            <Highlight
+                attribute="viewTitle"
+                hit={hit}
+                highlightedTagName="strong"
+                className="search-results__explorer-view-title"
+            />
+            <p className="body-3-medium-italic search-results__explorer-view-subtitle">
+                {hit.viewSubtitle}
+            </p>
             {/* Explorer subtitles are mostly useless at the moment, so we're only showing titles */}
         </a>
     )
@@ -311,6 +372,7 @@ const SearchResults = (props: SearchResultsProps) => {
     const hasClickAnalyticsConsent = getPreferenceValue(
         PreferenceType.Analytics
     )
+
     return (
         <div
             className="search-results"
@@ -349,8 +411,8 @@ const SearchResults = (props: SearchResultsProps) => {
             </NoResultsBoundary>
             <Index indexName={getIndexName(SearchIndexName.ExplorerViews)}>
                 <Configure
-                    hitsPerPage={10}
-                    distinct
+                    hitsPerPage={20}
+                    distinct={4}
                     clickAnalytics={hasClickAnalyticsConsent}
                 />
                 <NoResultsBoundary>
@@ -361,21 +423,22 @@ const SearchResults = (props: SearchResultsProps) => {
                             </h2>
                             <ShowMore
                                 category={SearchIndexName.ExplorerViews}
-                                cutoffNumber={4}
+                                cutoffNumber={2}
                                 activeCategoryFilter={activeCategoryFilter}
                                 handleCategoryFilterClick={
                                     handleCategoryFilterClick
                                 }
                             />
                         </header>
-                        <Hits
+                        <ExplorerViewHits />
+                        {/* <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>

diff --git a/site/search/searchTypes.ts b/site/search/searchTypes.ts
@@ -38,10 +38,17 @@ export type IPageHit = PageRecord & Hit<BaseHit>
 
 export type IExplorerViewHit = Hit<BaseHit> & {
     objectID: string
+
+    // Explorer-wide fields
     explorerSlug: string
-    viewTitle: string
     explorerTitle: string
+    numViewsWithinExplorer: number
+
+    // View-specific fields
+    viewTitle: string
+    viewSubtitle: string
     viewQueryParams: string
+    viewTitleIndexWithinExplorer: number
 }
 
 export type IExplorerHit = Hit<BaseHit> & {
@@ -86,7 +93,7 @@ export type SearchCategoryFilter = SearchIndexName | "all"
 export const searchCategoryFilters: [string, SearchCategoryFilter][] = [
     ["All", "all"],
     ["Research & Writing", SearchIndexName.Pages],
-    ["Data Explorers", SearchIndexName.Explorers],
+    ["Data Explorers", SearchIndexName.ExplorerViews],
     ["Charts", SearchIndexName.Charts],
 ]