use Slider for lookback period

frontend/src/pages/HistoricalCalendarPrices.tsx

@@ -43,8 +43,7 @@ import { EditableUnderlying } from "./HistoricalCalendarPrices/EditableUnderlyin
 import { EditableOpenDTE } from "./HistoricalCalendarPrices/EditableOpenDTE.js";
 import { EditableExitDTE } from "./HistoricalCalendarPrices/EditableExitDTE.js";
 import { EditableSpan } from "./HistoricalCalendarPrices/EditableSpan.js";
-import { EditableLookbackPeriodStart } from "./HistoricalCalendarPrices/EditableLookbackPeriodStart.js";
-import { EditableLookbackPeriodEnd } from "./HistoricalCalendarPrices/EditableLookbackPeriodEnd.js";
+import { EditableLookbackPeriod } from "./HistoricalCalendarPrices/EditableLookbackPeriod.js";
 
 ChartJS.register(
   LinearScale,
@@ -133,8 +132,7 @@ export function HistoricalCalendarPrices() {
             <Typography gutterBottom minWidth={"8em"}>
               Lookback Period
             </Typography>
-            <EditableLookbackPeriodStart />-
-            <EditableLookbackPeriodEnd />
+            <EditableLookbackPeriod />
           </Stack>
           <ClickAwayListener
             onClickAway={() => {

frontend/src/pages/HistoricalCalendarPrices/EditableLookbackPeriod.tsx

@@ -0,0 +1,66 @@
+import TextField from "@mui/material/TextField";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+  refreshStockPriceChartData,
+} from "./actions";
+import { lookbackPeriodEnd, lookbackPeriodStart } from "./state";
+import Slider from "@mui/material/Slider";
+
+const handleLookbackPeriodChange = (
+  e,
+  [newLookbackPeriodStart, newLookbackPeriodEnd]: [number, number]
+) => {
+  const [lookbackPeriodStartUnixTime, lookbackPeriodEndUnixTime] = [
+    new Date(lookbackPeriodStart.value).getTime(),
+    new Date(lookbackPeriodEnd.value).getTime(),
+  ];
+  if (lookbackPeriodStartUnixTime !== newLookbackPeriodStart) {
+    lookbackPeriodStart.value = new Date(newLookbackPeriodStart)
+      .toISOString()
+      .substring(0, 10);
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+  if (lookbackPeriodEndUnixTime !== newLookbackPeriodEnd) {
+    lookbackPeriodEnd.value = new Date(newLookbackPeriodEnd)
+      .toISOString()
+      .substring(0, 10);
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+const earliestDate = new Date("2022-03-07");
+const DAY = 1000 * 60 * 60 * 24;
+function addDays(date, days) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result.toISOString().substring(0, 10);
+}
+function daysBetween(date1, date2) {
+  return Math.round(Math.abs((date2.getTime() - date1.getTime()) / DAY));
+}
+export function EditableLookbackPeriod() {
+  return (
+    <Slider
+      value={[
+        new Date(lookbackPeriodStart.value).getTime(),
+        new Date(lookbackPeriodEnd.value).getTime(),
+      ]}
+      onChange={handleLookbackPeriodChange}
+      valueLabelFormat={(unixTimeMs) =>
+        new Date(unixTimeMs).toISOString().substring(0, 10)
+      }
+      getAriaValueText={(unixTimeMs) =>
+        new Date(unixTimeMs).toISOString().substring(0, 10)
+      }
+      min={earliestDate.getTime()}
+      max={earliestDate.getTime() + 250 * DAY}
+      step={DAY}
+      valueLabelDisplay="on"
+    />
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/actions.ts

@@ -13,7 +13,29 @@ import {
   underlying,
 } from "./state";
 
-export const refreshStockPriceChartData = () => {
+function debounce(func, wait) {
+  let timeout;
+  return function () {
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
+function throttle(func, limit) {
+  let inThrottle;
+  return function () {
+    const context = this;
+    const args = arguments;
+    if (!inThrottle) {
+      func.apply(context, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+export const refreshStockPriceChartData = throttle(() => {
   stockPriceChartData.value = [];
   trpc.StockPriceChart.getChartData
     .query({
@@ -24,8 +46,8 @@ export const refreshStockPriceChartData = () => {
     .then((getChartDataResponse) => {
       stockPriceChartData.value = getChartDataResponse;
     });
-};
-export const refreshSimilarCalendarPriceChartData = () => {
+}, 400);
+export const refreshSimilarCalendarPriceChartData = throttle(() => {
   similarCalendarPriceChartData.value = [];
   trpc.SimilarCalendarPriceChart.getChartData
     .query({
@@ -42,8 +64,8 @@ export const refreshSimilarCalendarPriceChartData = () => {
     .then((getChartDataResponse) => {
       similarCalendarPriceChartData.value = getChartDataResponse;
     });
-};
-export const refreshcalendarExitPriceChartData = () => {
+}, 400);
+export const refreshcalendarExitPriceChartData = throttle(() => {
   calendarExitPriceChartData.value = [];
   trpc.CalendarExitPriceChart.getChartData
     .query({
@@ -56,4 +78,4 @@ export const refreshcalendarExitPriceChartData = () => {
     .then((getChartDataResponse) => {
       calendarExitPriceChartData.value = getChartDataResponse;
     });
-};
+}, 400);