Add facet-based search refinements to UI

Refine the listing based on keywords and content type. Note that all these attributes must be configured as "facets" in Algolia.
astropy · Aug 4, 2021 · 3fe4cef · 3fe4cef
1 parent e11316b
commit 3fe4cef
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 2 deletions.
diff --git a/src/components/instantsearch/refinementList.js b/src/components/instantsearch/refinementList.js
@@ -0,0 +1,16 @@
+/*
+ * Styled version of the Algolia InstantSearch RefinementList component.
+ *
+ * https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/
+ */
+
+import styled from 'styled-components';
+import { RefinementList as BaseRefinementList } from 'react-instantsearch-dom';
+
+const RefinementList = styled(BaseRefinementList)`
+  .ais-RefinementList-labelText {
+    margin-left: var(--astropy-size-s);
+  }
+`;
+
+export default RefinementList;
diff --git a/src/components/searchLayout.js b/src/components/searchLayout.js
@@ -36,3 +36,16 @@ export const SearchLayout = styled.div`
     grid-row: 2 / 3;
   }
 `;
+
+/* Styled component div around a refinement widget.
+ *
+ * This styling controls spacing and the heading styling
+ */
+export const SearchRefinementsSection = styled.div`
+  margin-bottom: var(--astropy-size-l);
+
+  h2 {
+    margin-top: 0;
+    font-size: var(--astropy-font-size-ml);
+  }
+`;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -4,11 +4,15 @@ import PropTypes from 'prop-types';
 import { InstantSearch, SearchBox, Configure } from 'react-instantsearch-dom';
 
 import Layout from '../components/layout';
-import { SearchLayout } from '../components/searchLayout';
+import {
+  SearchLayout,
+  SearchRefinementsSection,
+} from '../components/searchLayout';
 import SEO from '../components/seo';
 import PageCover from '../components/pageCover';
 import searchClient from '../searchClient';
 import { StyledHits } from '../components/instantsearch/hits';
+import RefinementList from '../components/instantsearch/refinementList';
 import ResultCard from '../components/resultCard';
 
 export default function IndexPage({ location }) {
@@ -31,7 +35,50 @@ export default function IndexPage({ location }) {
             <SearchBox />
           </div>
           <div className="search-refinements-area">
-            <p>Refinements</p>
+            <SearchRefinementsSection>
+              <h2>Format</h2>
+              <RefinementList attribute="content_type" />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Astropy packages</h2>
+              <RefinementList
+                attribute="astropy_package_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Python packages</h2>
+              <RefinementList
+                attribute="python_package_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Tasks</h2>
+              <RefinementList
+                attribute="task_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Science domains</h2>
+              <RefinementList
+                attribute="science_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
           </div>
           <div className="search-results-area">
             <StyledHits hitComponent={ResultCard} />