Add date range selector histogram

site/gatsby-site/gatsby-node.js

@@ -34,6 +34,8 @@ const createBlogPages = require('./page-creators/createBlogPages');
 
 const createDocPages = require('./page-creators/createDocPages');
 
+const createDiscoverPage = require('./page-creators/createDiscoverPage');
+
 const algoliasearch = require('algoliasearch');
 
 const Translator = require('./src/utils/Translator');
@@ -75,6 +77,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   for (const pageCreator of [
+    createDiscoverPage,
     createBlogPages,
     createCitationPages,
     createWordCountsPages,

site/gatsby-site/page-creators/createDiscoverPage.js

@@ -0,0 +1,43 @@
+const path = require('path');
+
+const createDiscoverPage = async (graphql, createPage) => {
+  const pageQuery = await graphql(`
+    query DiscoverPageQuery {
+      reports: allMongodbAiidprodReports {
+        nodes {
+          report_number
+          date_published
+        }
+      }
+    }
+  `);
+
+  const reports = pageQuery.data.reports?.nodes;
+
+  const numBins = 16;
+
+  const histogramBins = new Array(numBins).fill().map(() => 0);
+
+  const publishDates = reports.map((report) => new Date(report.date_published));
+
+  const latestPublishDate = Math.max(...publishDates);
+
+  const earliestPublishDate = Math.min(...publishDates);
+
+  for (const publishDate of publishDates) {
+    const position =
+      (publishDate - earliestPublishDate) / (latestPublishDate - earliestPublishDate);
+
+    const index = Math.round(position * (histogramBins.length - 1));
+
+    histogramBins[index] += 1;
+  }
+
+  createPage({
+    path: '/apps/discover/',
+    component: path.resolve('./src/templates/discover.js'),
+    context: { histogramBins },
+  });
+};
+
+module.exports = createDiscoverPage;

site/gatsby-site/playwright/e2e/discover.spec.ts

@@ -10,7 +10,7 @@ import config from '../../config';
 
 test.describe('The Discover app', () => {
     const url = '/apps/discover';
-
+  
     test('Successfully loads', async ({ page }) => {
         await page.goto(url);
     });
@@ -503,4 +503,20 @@ test.describe('The Discover app', () => {
             await expect(count).toBeGreaterThanOrEqual(0);
         }).toPass();
     });
+
+    test('Should select date range', async ({ page }) => {
+      await page.goto(url);
+
+      await page.locator('[data-cy="epoch_date_published"]').first().click();
+
+      const rangeKnobSelector = '[data-cy="epoch_date_published"] [data-cy="range-knob"]';
+
+      await page.locator(rangeKnobSelector).first().focus();
+
+      await page.locator(rangeKnobSelector).first().press('ArrowRight');
+
+      await page.locator(rangeKnobSelector).first().press('ArrowRight');
+
+      await expect(page).toHaveURL(/.*epoch_date_published_min.*/g); 
+    });
 });

site/gatsby-site/src/components/discover/Controls.js

@@ -12,7 +12,7 @@ import { Trans } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 
-const Controls = () => {
+const Controls = ({ histogramBins }) => {
   const { indexUiState } = useInstantSearch();
 
   const [expandFilters, setExpandFilters] = useState(false);
@@ -75,7 +75,7 @@ const Controls = () => {
 
       <div className="basis-full order-3" />
 
-      <Filters {...{ expandFilters }} />
+      <Filters {...{ expandFilters, histogramBins }} />
     </div>
   );
 };

site/gatsby-site/src/components/discover/Discover.js

@@ -30,7 +30,7 @@ function mapping() {
   };
 }
 
-export default function Discover() {
+export default function Discover({ histogramBins }) {
   const { locale } = useLocalization();
 
   const [indexName] = useState(`instant_search-${locale}-featured`);
@@ -114,7 +114,7 @@ export default function Discover() {
           </Col>
         </Row>
 
-        {width > 767 ? <Controls /> : <OptionsModal />}
+        {width > 767 ? <Controls {...{ histogramBins }} /> : <OptionsModal />}
 
         <Hits />
 

site/gatsby-site/src/components/discover/Filter.js

@@ -54,7 +54,7 @@ function ToggleContent({ label, touched, faIcon, toggled, accordion = false }) {
   );
 }
 
-function ButtonToggle({ label, faIcon, touched, type, filterProps }) {
+function ButtonToggle({ label, faIcon, touched, type, filterProps, histogramBins }) {
   const [toggled, setToggled] = useState(true);
 
   const toggleDropdown = () => {
@@ -105,20 +105,20 @@ function ButtonToggle({ label, faIcon, touched, type, filterProps }) {
           toggled ? 'hidden' : 'block '
         } bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700`}
       >
-        <FilterOverlay type={type} filterProps={filterProps} />
+        <FilterOverlay {...{ type, filterProps, histogramBins }} />
       </div>
     </div>
   );
 }
 
-function FilterContent({ type, filterProps }) {
+function FilterContent({ type, filterProps, histogramBins }) {
   const { default: Component } = componentsMap[type];
 
-  return <Component {...filterProps} />;
+  return <Component {...filterProps} {...{ histogramBins }} />;
 }
 
 const FilterOverlay = React.forwardRef(function Container(
-  { type, filterProps, ...overlayProps },
+  { histogramBins, type, filterProps, ...overlayProps },
   ref
 ) {
   return (
@@ -131,14 +131,14 @@ const FilterOverlay = React.forwardRef(function Container(
     >
       <Card className="shadow-lg card">
         <div>
-          <FilterContent type={type} filterProps={filterProps} />
+          <FilterContent {...{ type, filterProps, histogramBins }} />
         </div>
       </Card>
     </div>
   );
 });
 
-export default function Filter({ type, ...filterProps }) {
+export default function Filter({ type, histogramBins, ...filterProps }) {
   const { label, faIcon, attribute } = filterProps;
 
   const { touchedCount } = componentsMap[type];
@@ -149,13 +149,7 @@ export default function Filter({ type, ...filterProps }) {
 
   return (
     <>
-      <ButtonToggle
-        label={label}
-        faIcon={faIcon}
-        touched={touched}
-        type={type}
-        filterProps={filterProps}
-      />
+      <ButtonToggle {...{ label, faIcon, touched, type, filterProps, histogramBins }} />
     </>
   );
 }

site/gatsby-site/src/components/discover/Filters.js

@@ -3,7 +3,7 @@ import REFINEMENT_LISTS from 'components/discover/REFINEMENT_LISTS';
 import Filter from './Filter';
 import { graphql, useStaticQuery } from 'gatsby';
 
-function Filters({ expandFilters }) {
+function Filters({ expandFilters, histogramBins }) {
   const {
     taxa: { nodes: taxa },
   } = useStaticQuery(graphql`
@@ -44,7 +44,7 @@ function Filters({ expandFilters }) {
         }
         return (
           <div key={list.attribute} className={className} data-cy={list.attribute}>
-            <Filter className="w-full" type={list.type} taxa={taxa} {...list} />
+            <Filter className="w-full" type={list.type} {...{ histogramBins, taxa, ...list }} />
           </div>
         );
       })}