From 45cd3d1d656e0d4b8dc7ea360e68d397e3fc16ae Mon Sep 17 00:00:00 2001
From: Luna McNulty <l.mcnulty@riseup.net>
Date: Fri, 31 May 2024 17:01:49 -0400
Subject: [PATCH 1/6] Add date range selector histogram

---
 .../src/components/discover/Controls.js       |   4 +-
 .../src/components/discover/Discover.js       |   4 +-
 .../src/components/discover/Filter.js         |  15 +-
 .../src/components/discover/Filters.js        |   4 +-
 .../discover/filterTypes/RangeInput.js        | 208 +++++++++++++++++-
 site/gatsby-site/src/pages/apps/discover.js   |  39 +++-
 6 files changed, 257 insertions(+), 17 deletions(-)

diff --git a/site/gatsby-site/src/components/discover/Controls.js b/site/gatsby-site/src/components/discover/Controls.js
index fc2c2ecf0f..b64931ce52 100644
--- a/site/gatsby-site/src/components/discover/Controls.js
+++ b/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>
   );
 };
diff --git a/site/gatsby-site/src/components/discover/Discover.js b/site/gatsby-site/src/components/discover/Discover.js
index 24a2cfc1f2..3fdbe9ecc1 100644
--- a/site/gatsby-site/src/components/discover/Discover.js
+++ b/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 />
 
diff --git a/site/gatsby-site/src/components/discover/Filter.js b/site/gatsby-site/src/components/discover/Filter.js
index 7a82cf0bec..e01adf3b76 100644
--- a/site/gatsby-site/src/components/discover/Filter.js
+++ b/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 }}
       />
     </>
   );
diff --git a/site/gatsby-site/src/components/discover/Filters.js b/site/gatsby-site/src/components/discover/Filters.js
index e8d3d81b1e..7365d41320 100644
--- a/site/gatsby-site/src/components/discover/Filters.js
+++ b/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>
         );
       })}
diff --git a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
index b183b392ef..b9476283f6 100644
--- a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
+++ b/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
diff --git a/site/gatsby-site/src/pages/apps/discover.js b/site/gatsby-site/src/pages/apps/discover.js
index 89f9212847..41107d0a78 100644
--- a/site/gatsby-site/src/pages/apps/discover.js
+++ b/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;

From ccb522f57443e07491f1f24b6f43b2d07a68caa4 Mon Sep 17 00:00:00 2001
From: Luna McNulty <l.mcnulty@riseup.net>
Date: Thu, 6 Jun 2024 11:35:11 -0400
Subject: [PATCH 2/6] Add test

---
 .../cypress/e2e/integration/discover.cy.js    | 12 +++
 .../discover/filterTypes/RangeInput.js        | 99 ++++++++++++++-----
 site/gatsby-site/src/pages/apps/discover.js   |  2 +-
 3 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/site/gatsby-site/cypress/e2e/integration/discover.cy.js b/site/gatsby-site/cypress/e2e/integration/discover.cy.js
index 7eac88565a..d5e10c093e 100644
--- a/site/gatsby-site/cypress/e2e/integration/discover.cy.js
+++ b/site/gatsby-site/cypress/e2e/integration/discover.cy.js
@@ -665,4 +665,16 @@ describe('The Discover app', () => {
       cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 1);
     }
   );
+
+  it('Should select date range', () => {
+    cy.visit(url);
+    cy.waitForStableDOM();
+    cy.get('[data-cy="epoch_date_published"]').first().click();
+
+    const rangeKnobSelector = '[data-cy="epoch_date_published"] [data-cy="range-knob"]';
+
+    cy.get(rangeKnobSelector).first().focus().type('{rightArrow}{rightArrow}');
+
+    cy.url().should('include', 'epoch_date_published_min');
+  });
 });
diff --git a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
index b9476283f6..a04a82b173 100644
--- a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
+++ b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { useRange } from 'react-instantsearch';
 import { Trans } from 'react-i18next';
 import { debounce } from 'debounce';
-import { Button } from 'flowbite-react';
+import { Button, Checkbox } from 'flowbite-react';
 import { Form, Formik } from 'formik';
 import Label from 'components/forms/Label';
 import TextInputGroup from 'components/forms/TextInputGroup';
@@ -56,13 +56,14 @@ export default function RangeInput({ attribute, bins }) {
               <DoubleRangeSlider
                 globalMin={min}
                 globalMax={max}
+                selectionMin={currentRefinement.min}
                 selectionMax={currentRefinement.max}
                 setSelectionMin={debounce((min) => {
                   onChange({ min, max: currentRefinement.max });
-                })}
+                }, 3000)}
                 setSelectionMax={debounce((max) => {
                   onChange({ max, min: currentRefinement.min });
-                }, 2000)}
+                }, 3000)}
                 {...{ bins }}
               />
               <FieldContainer>
@@ -154,23 +155,26 @@ const sliderHeight = '1rem';
 const DoubleRangeSlider = ({
   globalMin,
   globalMax,
+  selectionMin,
   selectionMax,
   setSelectionMin,
   setSelectionMax,
   bins,
 }) => {
-  const [lowerBound, bareSetLowerBound] = useState();
+  const valueToProportion = (value) => globalMin + (globalMax - globalMin) * value;
+
+  const [lowerBound, bareSetLowerBound] = useState(valueToProportion(selectionMin));
 
   const setLowerBound = (value) => {
     bareSetLowerBound(value);
-    setSelectionMin(globalMin + (globalMax - globalMin) * value);
+    setSelectionMin(valueToProportion(value));
   };
 
-  const [upperBound, bareSetUpperBound] = useState();
+  const [upperBound, bareSetUpperBound] = useState(valueToProportion(selectionMax));
 
   const setUpperBound = (value) => {
     bareSetUpperBound(value);
-    setSelectionMax(globalMin + (globalMax - globalMin) * value);
+    setSelectionMax(valueToProportion(value));
   };
 
   const binsMax = Math.max(...bins);
@@ -179,23 +183,72 @@ const DoubleRangeSlider = ({
     setUpperBound((selectionMax - globalMin) / (globalMax - globalMin));
   }, [selectionMax, globalMax, globalMin]);
 
+  const [logScale, setLogScale] = useState(true);
+
+  const numTicks = 20;
+
   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 className="mb-2">
+        <Checkbox
+          id="log-scale"
+          checked={logScale ? true : undefined}
+          onClick={() => setLogScale((logScale) => !logScale)}
+          className="mr-1"
+        />
+        <label htmlFor="log-scale">Log Scale</label>
+      </div>
+      <div className="h-32 w-full bg-gray-100 relative">
+        <div className="h-full w-full absolute inset-0">
+          {Array(numTicks)
+            .fill()
+            .map((_, i) => {
+              const proportion = logScale
+                ? Math.log((i * binsMax) / numTicks) / Math.log(binsMax)
+                : (i * binsMax) / numTicks / binsMax;
+
+              return (
+                <div
+                  key={i}
+                  className="w-full h-px bg-gray-200 absolute"
+                  style={{ bottom: proportionToPercent(proportion) }}
+                />
+              );
+            })}
+        </div>
+        <div className="flex items-end w-full h-full absolute inset-0">
+          {bins.map((bin, i) => {
+            const rangeWidth = globalMax - globalMin;
+
+            const dateRangeStart = globalMin + (i * rangeWidth) / bins.length;
+
+            const dateRangeEnd = globalMin + ((i + 1) * rangeWidth) / bins.length;
+
+            const baseProportion = bin / binsMax;
+
+            const logProportion = Math.log(bin) / Math.log(binsMax);
+
+            const proportion = logScale ? logProportion : baseProportion;
+
+            return (
+              <div
+                key={i}
+                title={`${bin} reports from ${formatDate(dateRangeStart)} to ${formatDate(
+                  dateRangeEnd
+                )}`}
+                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(proportion),
+                }}
+              />
+            );
+          })}
+        </div>
       </div>
       <div className="relative bg-gray-200" style={{ height: sliderHeight }}>
         <div
@@ -260,6 +313,7 @@ const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0 }) => {
   return (
     <>
       <button
+        data-cy="range-knob"
         ref={knobRef}
         className="rounded-full bg-white absolute focus:border-2 border-blue-500"
         style={{
@@ -298,6 +352,7 @@ const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0 }) => {
        */}
       <button
         tabIndex="-1"
+        data-cy="range-knob-handle"
         className="rounded-full absolute x-10"
         onClick={() => {
           knobRef.current.focus();
diff --git a/site/gatsby-site/src/pages/apps/discover.js b/site/gatsby-site/src/pages/apps/discover.js
index 41107d0a78..39f3409bb7 100644
--- a/site/gatsby-site/src/pages/apps/discover.js
+++ b/site/gatsby-site/src/pages/apps/discover.js
@@ -23,7 +23,7 @@ function DiscoverApp(props) {
     const position =
       (publishDate - earliestPublishDate) / (latestPublishDate - earliestPublishDate);
 
-    const index = Math.floor(position * (bins.length - 1));
+    const index = Math.round(position * (bins.length - 1));
 
     bins[index] += 1;
   }

From 0bae3965a8e0c05ca1440ef7493fc538d5c13699 Mon Sep 17 00:00:00 2001
From: Luna McNulty <l.mcnulty@riseup.net>
Date: Wed, 12 Jun 2024 15:51:14 -0400
Subject: [PATCH 3/6] Use single range selector function

---
 .../components/discover/filterTypes/RangeInput.js  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
index a04a82b173..be558d7928 100644
--- a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
+++ b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
@@ -58,11 +58,8 @@ export default function RangeInput({ attribute, bins }) {
                 globalMax={max}
                 selectionMin={currentRefinement.min}
                 selectionMax={currentRefinement.max}
-                setSelectionMin={debounce((min) => {
-                  onChange({ min, max: currentRefinement.max });
-                }, 3000)}
-                setSelectionMax={debounce((max) => {
-                  onChange({ max, min: currentRefinement.min });
+                setSelection={debounce((min, max) => {
+                  onChange({ min, max });
                 }, 3000)}
                 {...{ bins }}
               />
@@ -157,8 +154,7 @@ const DoubleRangeSlider = ({
   globalMax,
   selectionMin,
   selectionMax,
-  setSelectionMin,
-  setSelectionMax,
+  setSelection,
   bins,
 }) => {
   const valueToProportion = (value) => globalMin + (globalMax - globalMin) * value;
@@ -167,14 +163,14 @@ const DoubleRangeSlider = ({
 
   const setLowerBound = (value) => {
     bareSetLowerBound(value);
-    setSelectionMin(valueToProportion(value));
+    setSelection(valueToProportion(value), selectionMax);
   };
 
   const [upperBound, bareSetUpperBound] = useState(valueToProportion(selectionMax));
 
   const setUpperBound = (value) => {
     bareSetUpperBound(value);
-    setSelectionMax(valueToProportion(value));
+    setSelection(selectionMin, valueToProportion(value));
   };
 
   const binsMax = Math.max(...bins);

From f8fb24c2ead3fd4956098b273cd449c0a33214c5 Mon Sep 17 00:00:00 2001
From: Luna McNulty <l.mcnulty@riseup.net>
Date: Thu, 13 Jun 2024 16:06:32 -0400
Subject: [PATCH 4/6] Rename bins, fix bounds setting

---
 .../src/components/discover/Controls.js       |  4 +--
 .../src/components/discover/Discover.js       |  4 +--
 .../src/components/discover/Filter.js         | 23 +++++----------
 .../src/components/discover/Filters.js        |  4 +--
 .../discover/filterTypes/RangeInput.js        | 29 ++++++++++---------
 site/gatsby-site/src/pages/apps/discover.js   |  8 ++---
 6 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/site/gatsby-site/src/components/discover/Controls.js b/site/gatsby-site/src/components/discover/Controls.js
index b64931ce52..110c3c3d7d 100644
--- a/site/gatsby-site/src/components/discover/Controls.js
+++ b/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 = ({ bins }) => {
+const Controls = ({ histogramBins }) => {
   const { indexUiState } = useInstantSearch();
 
   const [expandFilters, setExpandFilters] = useState(false);
@@ -75,7 +75,7 @@ const Controls = ({ bins }) => {
 
       <div className="basis-full order-3" />
 
-      <Filters {...{ expandFilters, bins }} />
+      <Filters {...{ expandFilters, histogramBins }} />
     </div>
   );
 };
diff --git a/site/gatsby-site/src/components/discover/Discover.js b/site/gatsby-site/src/components/discover/Discover.js
index 3fdbe9ecc1..bf2c5c2713 100644
--- a/site/gatsby-site/src/components/discover/Discover.js
+++ b/site/gatsby-site/src/components/discover/Discover.js
@@ -30,7 +30,7 @@ function mapping() {
   };
 }
 
-export default function Discover({ bins }) {
+export default function Discover({ histogramBins }) {
   const { locale } = useLocalization();
 
   const [indexName] = useState(`instant_search-${locale}-featured`);
@@ -114,7 +114,7 @@ export default function Discover({ bins }) {
           </Col>
         </Row>
 
-        {width > 767 ? <Controls {...{ bins }} /> : <OptionsModal />}
+        {width > 767 ? <Controls {...{ histogramBins }} /> : <OptionsModal />}
 
         <Hits />
 
diff --git a/site/gatsby-site/src/components/discover/Filter.js b/site/gatsby-site/src/components/discover/Filter.js
index e01adf3b76..250c208dbe 100644
--- a/site/gatsby-site/src/components/discover/Filter.js
+++ b/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, bins }) {
+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, bins }) {
           toggled ? 'hidden' : 'block '
         } bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700`}
       >
-        <FilterOverlay type={type} filterProps={filterProps} {...{ bins }} />
+        <FilterOverlay {...{ type, filterProps, histogramBins }} />
       </div>
     </div>
   );
 }
 
-function FilterContent({ type, filterProps, bins }) {
+function FilterContent({ type, filterProps, histogramBins }) {
   const { default: Component } = componentsMap[type];
 
-  return <Component {...filterProps} {...{ bins }} />;
+  return <Component {...filterProps} {...{ histogramBins }} />;
 }
 
 const FilterOverlay = React.forwardRef(function Container(
-  { bins, 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} {...{ bins }} />
+          <FilterContent {...{ type, filterProps, histogramBins }} />
         </div>
       </Card>
     </div>
   );
 });
 
-export default function Filter({ type, bins, ...filterProps }) {
+export default function Filter({ type, histogramBins, ...filterProps }) {
   const { label, faIcon, attribute } = filterProps;
 
   const { touchedCount } = componentsMap[type];
@@ -149,14 +149,7 @@ export default function Filter({ type, bins, ...filterProps }) {
 
   return (
     <>
-      <ButtonToggle
-        label={label}
-        faIcon={faIcon}
-        touched={touched}
-        type={type}
-        filterProps={filterProps}
-        {...{ bins }}
-      />
+      <ButtonToggle {...{ label, faIcon, touched, type, filterProps, histogramBins }} />
     </>
   );
 }
diff --git a/site/gatsby-site/src/components/discover/Filters.js b/site/gatsby-site/src/components/discover/Filters.js
index 7365d41320..267ead7bbf 100644
--- a/site/gatsby-site/src/components/discover/Filters.js
+++ b/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, bins }) {
+function Filters({ expandFilters, histogramBins }) {
   const {
     taxa: { nodes: taxa },
   } = useStaticQuery(graphql`
@@ -44,7 +44,7 @@ function Filters({ expandFilters, bins }) {
         }
         return (
           <div key={list.attribute} className={className} data-cy={list.attribute}>
-            <Filter className="w-full" type={list.type} taxa={taxa} {...list} {...{ bins }} />
+            <Filter className="w-full" type={list.type} {...{ histogramBins, taxa, ...list }} />
           </div>
         );
       })}
diff --git a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
index be558d7928..bc6fb723dd 100644
--- a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
+++ b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
@@ -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, bins }) {
+export default function RangeInput({ attribute, histogramBins }) {
   const {
     range: { min, max },
     start,
@@ -60,8 +60,8 @@ export default function RangeInput({ attribute, bins }) {
                 selectionMax={currentRefinement.max}
                 setSelection={debounce((min, max) => {
                   onChange({ min, max });
-                }, 3000)}
-                {...{ bins }}
+                }, 1000)}
+                {...{ histogramBins }}
               />
               <FieldContainer>
                 <Label>
@@ -155,25 +155,25 @@ const DoubleRangeSlider = ({
   selectionMin,
   selectionMax,
   setSelection,
-  bins,
+  histogramBins,
 }) => {
   const valueToProportion = (value) => globalMin + (globalMax - globalMin) * value;
 
   const [lowerBound, bareSetLowerBound] = useState(valueToProportion(selectionMin));
 
+  const [upperBound, bareSetUpperBound] = useState(valueToProportion(selectionMax));
+
   const setLowerBound = (value) => {
     bareSetLowerBound(value);
-    setSelection(valueToProportion(value), selectionMax);
+    setSelection(valueToProportion(value), valueToProportion(upperBound));
   };
 
-  const [upperBound, bareSetUpperBound] = useState(valueToProportion(selectionMax));
-
   const setUpperBound = (value) => {
     bareSetUpperBound(value);
-    setSelection(selectionMin, valueToProportion(value));
+    setSelection(valueToProportion(lowerBound), valueToProportion(value));
   };
 
-  const binsMax = Math.max(...bins);
+  const binsMax = Math.max(...histogramBins);
 
   useEffect(() => {
     setUpperBound((selectionMax - globalMin) / (globalMax - globalMin));
@@ -213,12 +213,12 @@ const DoubleRangeSlider = ({
             })}
         </div>
         <div className="flex items-end w-full h-full absolute inset-0">
-          {bins.map((bin, i) => {
+          {histogramBins.map((bin, i) => {
             const rangeWidth = globalMax - globalMin;
 
-            const dateRangeStart = globalMin + (i * rangeWidth) / bins.length;
+            const dateRangeStart = globalMin + (i * rangeWidth) / histogramBins.length;
 
-            const dateRangeEnd = globalMin + ((i + 1) * rangeWidth) / bins.length;
+            const dateRangeEnd = globalMin + ((i + 1) * rangeWidth) / histogramBins.length;
 
             const baseProportion = bin / binsMax;
 
@@ -233,12 +233,13 @@ const DoubleRangeSlider = ({
                   dateRangeEnd
                 )}`}
                 className={`border-1 border-white ${
-                  (i + 1) / bins.length >= lowerBound && i / bins.length <= upperBound
+                  (i + 1) / histogramBins.length >= lowerBound &&
+                  i / histogramBins.length <= upperBound
                     ? 'bg-blue-500'
                     : 'bg-gray-700'
                 }`}
                 style={{
-                  width: proportionToPercent(1 / bins.length),
+                  width: proportionToPercent(1 / histogramBins.length),
                   height: proportionToPercent(proportion),
                 }}
               />
diff --git a/site/gatsby-site/src/pages/apps/discover.js b/site/gatsby-site/src/pages/apps/discover.js
index 39f3409bb7..ee5cef9168 100644
--- a/site/gatsby-site/src/pages/apps/discover.js
+++ b/site/gatsby-site/src/pages/apps/discover.js
@@ -11,7 +11,7 @@ function DiscoverApp(props) {
 
   const numBins = 16;
 
-  const bins = new Array(numBins).fill().map(() => 0);
+  const histogramBins = new Array(numBins).fill().map(() => 0);
 
   const publishDates = reports.map((report) => new Date(report.date_published));
 
@@ -23,14 +23,14 @@ function DiscoverApp(props) {
     const position =
       (publishDate - earliestPublishDate) / (latestPublishDate - earliestPublishDate);
 
-    const index = Math.round(position * (bins.length - 1));
+    const index = Math.round(position * (histogramBins.length - 1));
 
-    bins[index] += 1;
+    histogramBins[index] += 1;
   }
 
   return (
     <div className="w-full">
-      <Discover {...{ bins }} />
+      <Discover {...{ histogramBins }} />
     </div>
   );
 }

From 8be1d318556007773e34ba7e6cbf92f7ca53c8e0 Mon Sep 17 00:00:00 2001
From: Luna McNulty <l.mcnulty@riseup.net>
Date: Tue, 18 Jun 2024 12:22:07 -0400
Subject: [PATCH 5/6] Create histogram bins at build-time, add dates to knobs

---
 site/gatsby-site/gatsby-node.js               |  3 +
 .../page-creators/createDiscoverPage.js       | 43 ++++++++++++
 .../discover/filterTypes/RangeInput.js        | 41 ++++++++----
 site/gatsby-site/src/pages/apps/discover.js   | 67 -------------------
 site/gatsby-site/src/templates/discover.js    | 34 ++++++++++
 5 files changed, 108 insertions(+), 80 deletions(-)
 create mode 100644 site/gatsby-site/page-creators/createDiscoverPage.js
 delete mode 100644 site/gatsby-site/src/pages/apps/discover.js
 create mode 100644 site/gatsby-site/src/templates/discover.js

diff --git a/site/gatsby-site/gatsby-node.js b/site/gatsby-site/gatsby-node.js
index a24c0455b7..cffa7e5dee 100644
--- a/site/gatsby-site/gatsby-node.js
+++ b/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,
diff --git a/site/gatsby-site/page-creators/createDiscoverPage.js b/site/gatsby-site/page-creators/createDiscoverPage.js
new file mode 100644
index 0000000000..b7cdc49e55
--- /dev/null
+++ b/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;
diff --git a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
index bc6fb723dd..5ab6ec74c5 100644
--- a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
+++ b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
@@ -61,7 +61,7 @@ export default function RangeInput({ attribute, histogramBins }) {
                 setSelection={debounce((min, max) => {
                   onChange({ min, max });
                 }, 1000)}
-                {...{ histogramBins }}
+                {...{ histogramBins, attribute }}
               />
               <FieldContainer>
                 <Label>
@@ -156,21 +156,22 @@ const DoubleRangeSlider = ({
   selectionMax,
   setSelection,
   histogramBins,
+  attribute,
 }) => {
-  const valueToProportion = (value) => globalMin + (globalMax - globalMin) * value;
+  const proportionToTimestamp = (value) => globalMin + (globalMax - globalMin) * value;
 
-  const [lowerBound, bareSetLowerBound] = useState(valueToProportion(selectionMin));
+  const [lowerBound, bareSetLowerBound] = useState(proportionToTimestamp(selectionMin));
 
-  const [upperBound, bareSetUpperBound] = useState(valueToProportion(selectionMax));
+  const [upperBound, bareSetUpperBound] = useState(proportionToTimestamp(selectionMax));
 
   const setLowerBound = (value) => {
     bareSetLowerBound(value);
-    setSelection(valueToProportion(value), valueToProportion(upperBound));
+    setSelection(proportionToTimestamp(value), proportionToTimestamp(upperBound));
   };
 
   const setUpperBound = (value) => {
     bareSetUpperBound(value);
-    setSelection(valueToProportion(lowerBound), valueToProportion(value));
+    setSelection(proportionToTimestamp(lowerBound), proportionToTimestamp(value));
   };
 
   const binsMax = Math.max(...histogramBins);
@@ -187,12 +188,12 @@ const DoubleRangeSlider = ({
     <>
       <div className="mb-2">
         <Checkbox
-          id="log-scale"
+          id={`${attribute}-log-scale`}
           checked={logScale ? true : undefined}
           onClick={() => setLogScale((logScale) => !logScale)}
           className="mr-1"
         />
-        <label htmlFor="log-scale">Log Scale</label>
+        <label htmlFor={`${attribute}-log-scale`}>Log Scale</label>
       </div>
       <div className="h-32 w-full bg-gray-100 relative">
         <div className="h-full w-full absolute inset-0">
@@ -256,14 +257,24 @@ const DoubleRangeSlider = ({
           }}
         />
 
-        <SliderKnob bound={lowerBound} setBound={setLowerBound} ceiling={upperBound} />
-        <SliderKnob bound={upperBound} setBound={setUpperBound} floor={lowerBound} />
+        <SliderKnob
+          bound={lowerBound}
+          setBound={setLowerBound}
+          ceiling={upperBound}
+          {...{ proportionToTimestamp }}
+        />
+        <SliderKnob
+          bound={upperBound}
+          setBound={setUpperBound}
+          floor={lowerBound}
+          {...{ proportionToTimestamp }}
+        />
       </div>
     </>
   );
 };
 
-const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0 }) => {
+const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0, proportionToTimestamp }) => {
   const [dragOffset, setDragOffset] = useState(null);
 
   const [handlePosition, setHandlePosition] = useState({
@@ -312,7 +323,7 @@ const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0 }) => {
       <button
         data-cy="range-knob"
         ref={knobRef}
-        className="rounded-full bg-white absolute focus:border-2 border-blue-500"
+        className="rounded-full bg-white absolute focus:border-2 border-blue-500 flex items-center justify-center"
         style={{
           height: sliderHeight,
           width: sliderHeight,
@@ -340,7 +351,11 @@ const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0 }) => {
             });
           }
         }}
-      />
+      >
+        <div className="mt-4 text-center pointer-events-none">
+          {bound && formatDate(proportionToTimestamp(bound)).substr(0, 4)}
+        </div>
+      </button>
 
       {/* This "handle" element moves with the cursor
        * so that we track the mouse position
diff --git a/site/gatsby-site/src/pages/apps/discover.js b/site/gatsby-site/src/pages/apps/discover.js
deleted file mode 100644
index ee5cef9168..0000000000
--- a/site/gatsby-site/src/pages/apps/discover.js
+++ /dev/null
@@ -1,67 +0,0 @@
-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 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;
-  }
-
-  return (
-    <div className="w-full">
-      <Discover {...{ histogramBins }} />
-    </div>
-  );
-}
-
-export const Head = (props) => {
-  const {
-    location: { pathname },
-  } = props;
-
-  const { t } = useTranslation();
-
-  const metaTitle = t('Artificial Intelligence Incident Database - Discover');
-
-  return (
-    <HeadContent
-      path={pathname}
-      metaTitle={metaTitle}
-      metaDescription={t('Find AI related incidents and reports')}
-    />
-  );
-};
-
-export const query = graphql`
-  query DiscoverPageQuery {
-    reports: allMongodbAiidprodReports {
-      nodes {
-        report_number
-        date_published
-      }
-    }
-  }
-`;
-
-export default DiscoverApp;
diff --git a/site/gatsby-site/src/templates/discover.js b/site/gatsby-site/src/templates/discover.js
new file mode 100644
index 0000000000..eb211f8895
--- /dev/null
+++ b/site/gatsby-site/src/templates/discover.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import HeadContent from 'components/HeadContent';
+import Discover from 'components/discover/Discover';
+import { useTranslation } from 'react-i18next';
+
+function DiscoverApp({ pageContext }) {
+  const { histogramBins } = pageContext;
+
+  return (
+    <div className="w-full">
+      <Discover {...{ histogramBins }} />
+    </div>
+  );
+}
+
+export const Head = (props) => {
+  const {
+    location: { pathname },
+  } = props;
+
+  const { t } = useTranslation();
+
+  const metaTitle = t('Artificial Intelligence Incident Database - Discover');
+
+  return (
+    <HeadContent
+      path={pathname}
+      metaTitle={metaTitle}
+      metaDescription={t('Find AI related incidents and reports')}
+    />
+  );
+};
+
+export default DiscoverApp;

From 2c962df939bdc5f6dd982fda241ed5a1b6d4e505 Mon Sep 17 00:00:00 2001
From: Luna McNulty <l.mcnulty@riseup.net>
Date: Thu, 20 Jun 2024 16:34:18 -0400
Subject: [PATCH 6/6] Fix 0 in lower bound

---
 .../src/components/discover/filterTypes/RangeInput.js       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
index 5ab6ec74c5..5fc4b4c711 100644
--- a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
+++ b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
@@ -352,8 +352,10 @@ const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0, proportionToTimes
           }
         }}
       >
-        <div className="mt-4 text-center pointer-events-none">
-          {bound && formatDate(proportionToTimestamp(bound)).substr(0, 4)}
+        <div className="mt-10 text-center pointer-events-none">
+          {![null, NaN, undefined].includes(bound)
+            ? formatDate(proportionToTimestamp(bound)).substr(0, 4)
+            : ''}
         </div>
       </button>