diff --git a/site/search/Search.scss b/site/search/Search.scss index 1c2f1454fb9..9751d6c9f5e 100644 --- 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,6 +328,7 @@ .search-results__pages, .search-results__explorers, +.search-results__explorer-views, .search-results__charts { display: none; } @@ -333,6 +336,7 @@ .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 index 1482fe17ec5..a03b0640404 100644 --- 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 ( + +

{hit.viewTitle}

+ + in {hit.explorerTitle} Data Explorer + + {/* Explorer subtitles are mostly useless at the moment, so we're only showing titles */} +
+ ) +} + function ExplorerHit({ hit }: { hit: IExplorerHit }) { return ( 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 (