Add date range selector histogram

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 = ({ bins }) => {
   const { indexUiState } = useInstantSearch();
 
   const [expandFilters, setExpandFilters] = useState(false);
@@ -75,7 +75,7 @@ const Controls = () => {
 
       <div className="basis-full order-3" />
 
-      <Filters {...{ expandFilters }} />
+      <Filters {...{ expandFilters, bins }} />
     </div>
   );
 };

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

@@ -30,7 +30,7 @@ function mapping() {
   };
 }
 
-export default function Discover() {
+export default function Discover({ bins }) {
   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 {...{ bins }} /> : <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, bins }) {
   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={type} filterProps={filterProps} {...{ bins }} />
       </div>
     </div>
   );
 }
 
-function FilterContent({ type, filterProps }) {
+function FilterContent({ type, filterProps, bins }) {
   const { default: Component } = componentsMap[type];
 
-  return <Component {...filterProps} />;
+  return <Component {...filterProps} {...{ bins }} />;
 }
 
 const FilterOverlay = React.forwardRef(function Container(
-  { type, filterProps, ...overlayProps },
+  { bins, 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={type} filterProps={filterProps} {...{ bins }} />
         </div>
       </Card>
     </div>
   );
 });
 
-export default function Filter({ type, ...filterProps }) {
+export default function Filter({ type, bins, ...filterProps }) {
   const { label, faIcon, attribute } = filterProps;
 
   const { touchedCount } = componentsMap[type];
@@ -155,6 +155,7 @@ export default function Filter({ type, ...filterProps }) {
         touched={touched}
         type={type}
         filterProps={filterProps}
+        {...{ bins }}
       />
     </>
   );

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, bins }) {
   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} taxa={taxa} {...list} {...{ bins }} />
           </div>
         );
       })}

site/gatsby-site/src/components/discover/filterTypes/RangeInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useRange } from 'react-instantsearch';
 import { Trans } from 'react-i18next';
 import { debounce } from 'debounce';
@@ -13,7 +13,7 @@ const formatDate = (epoch) => new Date(epoch * 1000).toISOString().substr(0, 10)
 
 const dateToEpoch = (date) => new Date(date).getTime() / 1000;
 
-export default function RangeInput({ attribute }) {
+export default function RangeInput({ attribute, bins }) {
   const {
     range: { min, max },
     start,
@@ -53,6 +53,18 @@ export default function RangeInput({ attribute }) {
         {({ values, errors, touched, handleBlur }) => (
           <>
             <Form className="px-3">
+              <DoubleRangeSlider
+                globalMin={min}
+                globalMax={max}
+                selectionMax={currentRefinement.max}
+                setSelectionMin={debounce((min) => {
+                  onChange({ min, max: currentRefinement.max });
+                })}
+                setSelectionMax={debounce((max) => {
+                  onChange({ max, min: currentRefinement.min });
+                }, 2000)}
+                {...{ bins }}
+              />
               <FieldContainer>
                 <Label>
                   <Trans>From Date</Trans>:
@@ -135,6 +147,198 @@ export default function RangeInput({ attribute }) {
   );
 }
 
+const proportionToPercent = (proportion) => 100 * proportion + '%';
+
+const sliderHeight = '1rem';
+
+const DoubleRangeSlider = ({
+  globalMin,
+  globalMax,
+  selectionMax,
+  setSelectionMin,
+  setSelectionMax,
+  bins,
+}) => {
+  const [lowerBound, bareSetLowerBound] = useState();
+
+  const setLowerBound = (value) => {
+    bareSetLowerBound(value);
+    setSelectionMin(globalMin + (globalMax - globalMin) * value);
+  };
+
+  const [upperBound, bareSetUpperBound] = useState();
+
+  const setUpperBound = (value) => {
+    bareSetUpperBound(value);
+    setSelectionMax(globalMin + (globalMax - globalMin) * value);
+  };
+
+  const binsMax = Math.max(...bins);
+
+  useEffect(() => {
+    setUpperBound((selectionMax - globalMin) / (globalMax - globalMin));
+  }, [selectionMax, globalMax, globalMin]);
+
+  return (
+    <>
+      <div className="h-32 w-full bg-gray-100 relative flex items-end">
+        {bins.map((bin, i) => (
+          <div
+            key={i}
+            className={`border-1 border-white ${
+              (i + 1) / bins.length >= lowerBound && i / bins.length <= upperBound
+                ? 'bg-blue-500'
+                : 'bg-gray-700'
+            }`}
+            style={{
+              width: proportionToPercent(1 / bins.length),
+              height: proportionToPercent(Math.log(bin) / Math.log(binsMax * 0.9)),
+            }}
+          />
+        ))}
+      </div>
+      <div className="relative bg-gray-200" style={{ height: sliderHeight }}>
+        <div
+          className="bg-blue-600 h-full absolute"
+          style={{
+            left: `calc(${proportionToPercent(lowerBound)})`,
+            width: proportionToPercent(upperBound - lowerBound),
+          }}
+        />
+
+        <SliderKnob bound={lowerBound} setBound={setLowerBound} ceiling={upperBound} />
+        <SliderKnob bound={upperBound} setBound={setUpperBound} floor={lowerBound} />
+      </div>
+    </>
+  );
+};
+
+const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0 }) => {
+  const [dragOffset, setDragOffset] = useState(null);
+
+  const [handlePosition, setHandlePosition] = useState({
+    top: '0px',
+    left: proportionToPercent(bound),
+  });
+
+  const knobRef = useRef();
+
+  useEffect(() => {
+    if (dragOffset) {
+      knobRef.current.focus();
+    }
+  });
+
+  useEffect(() => {
+    setHandlePosition({
+      top: '0px',
+      left: proportionToPercent(bound),
+    });
+  }, [bound]);
+
+  const updatePosition = (event) => {
+    if (dragOffset) {
+      const parentClientRect = event.target.parentNode.getBoundingClientRect();
+
+      const handleLeftPx = event.clientX - parentClientRect.x - dragOffset.x;
+
+      setHandlePosition({
+        top: event.clientY - parentClientRect.y - dragOffset.y + 'px',
+        left: handleLeftPx + 'px',
+      });
+
+      const handleLeftPercent = handleLeftPx / parentClientRect.width;
+
+      const newBound = clamp(handleLeftPercent, { floor, ceiling });
+
+      setBound(newBound);
+
+      return newBound;
+    }
+  };
+
+  return (
+    <>
+      <button
+        ref={knobRef}
+        className="rounded-full bg-white absolute focus:border-2 border-blue-500"
+        style={{
+          height: sliderHeight,
+          width: sliderHeight,
+          left: `calc(${proportionToPercent(bound)} - calc(${sliderHeight} / 2))`,
+        }}
+        onKeyDown={(event) => {
+          if (event.key == 'ArrowLeft') {
+            const newBound = clamp(bound - 0.1, { floor, ceiling });
+
+            setBound(newBound);
+            setDragOffset(null);
+            setHandlePosition({
+              top: '0px',
+              left: proportionToPercent(newBound),
+            });
+          }
+          if (event.key == 'ArrowRight') {
+            const newBound = clamp(bound + 0.1, { floor, ceiling });
+
+            setBound(newBound);
+            setDragOffset(null);
+            setHandlePosition({
+              top: '0px',
+              left: proportionToPercent(newBound),
+            });
+          }
+        }}
+      />
+
+      {/* This "handle" element moves with the cursor
+       * so that we track the mouse position
+       * while the knob is being dragged.
+       * Then we move the knob to match the handle in the x-axis.
+       */}
+      <button
+        tabIndex="-1"
+        className="rounded-full absolute x-10"
+        onClick={() => {
+          knobRef.current.focus();
+        }}
+        onMouseDown={(event) => {
+          const clientRect = event.target.getBoundingClientRect();
+
+          const offset = { x: event.clientX - clientRect.x, y: event.clientY - clientRect.y };
+
+          setDragOffset(offset);
+        }}
+        onMouseUp={() => {
+          setDragOffset(null);
+          setHandlePosition({
+            // TODO: It would be more efficient to use translate()
+            // so as to trigger fewer re-layouts.
+            top: '0px',
+            left: proportionToPercent(bound),
+          });
+        }}
+        onMouseMove={(event) => {
+          updatePosition(event);
+        }}
+        style={{
+          height: sliderHeight,
+          width: sliderHeight,
+          ...handlePosition,
+          ...(dragOffset
+            ? // We enlarge the handle during movement
+              // so that moving the cursor real fast doesn't take it outside the div
+              // before an update occurs.
+              { scale: '100', transformOrigin: 'center' }
+            : { left: `calc(${handlePosition.left} - calc(${sliderHeight} / 2))` }),
+        }}
+      />
+    </>
+  );
+};
+
+const clamp = (value, { floor, ceiling }) => Math.max(Math.min(value, ceiling), floor);
+
 export const touchedCount = ({ searchState, attribute }) =>
   searchState?.range?.[attribute]?.split(':')[0] || searchState?.range?.[attribute]?.split(':')[1]
     ? 1

site/gatsby-site/src/pages/apps/discover.js

@@ -2,11 +2,35 @@ import React from 'react';
 import HeadContent from 'components/HeadContent';
 import Discover from 'components/discover/Discover';
 import { useTranslation } from 'react-i18next';
+import { graphql } from 'gatsby';
+
+function DiscoverApp(props) {
+  const { data } = props;
+
+  const reports = data.reports?.nodes;
+
+  const numBins = 16;
+
+  const bins = 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.floor(position * (bins.length - 1));
+
+    bins[index] += 1;
+  }
 
-function DiscoverApp() {
   return (
     <div className="w-full">
-      <Discover />
+      <Discover {...{ bins }} />
     </div>
   );
 }
@@ -29,4 +53,15 @@ export const Head = (props) => {
   );
 };
 
+export const query = graphql`
+  query DiscoverPageQuery {
+    reports: allMongodbAiidprodReports {
+      nodes {
+        report_number
+        date_published
+      }
+    }
+  }
+`;
+
 export default DiscoverApp;