static handlers; use onBlur instead of onChange

which gets converted to onInput due to preact/compat

frontend/src/pages/HistoricalCalendarPrices/HistoricalCalendarPrices.tsx

@@ -36,98 +36,114 @@ const chosenLookbackPeriodStart = signal("2022-01-01");
 const chosenLookbackPeriodEnd = signal("2024-01-01");
 
 
-export function HistoricalCalendarPrices(){
-  const refreshHistoricalStockQuoteChartData = useCallback(()=>{
-    trpc.getHistoricalStockQuoteChartData
-      .query({
-        underlying:chosenUnderlying.value,
-        lookbackPeriodStart:chosenLookbackPeriodStart.value,
-        lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
-      })
-      .then((getHistoricalStockQuoteChartDataResponse)=>{
-        historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse;
-      })
-  },[]);
-  const refreshHistoricalCalendarQuoteChartData = useCallback(()=>{
-    trpc.getHistoricalCalendarQuoteChartData
-      .query({
-        underlying:chosenUnderlying.value,
-        daysToFrontExpiration:chosenDaysToFrontExpiration.value,
-        daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
-        strikePercentageFromUnderlyingPriceRangeMin:chosenStrikePercentageFromUnderlyingPrice.value - chosenStrikePercentageFromUnderlyingPriceRadius.value,
-        strikePercentageFromUnderlyingPriceRangeMax:chosenStrikePercentageFromUnderlyingPrice.value + chosenStrikePercentageFromUnderlyingPriceRadius.value,
-        lookbackPeriodStart:chosenLookbackPeriodStart.value,
-        lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
-      })
-      .then((getHistoricalCalendarQuoteChartDataResponse)=>{
-        historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse;
-      })
-  },[]);
-  const refreshHistoricalCalendarExitQuoteChartData = useCallback(()=>{
-    trpc.getHistoricalCalendarExitQuoteChartData
-      .query({
-        underlying:chosenUnderlying.value,
-        daysToFrontExpiration:chosenExitToFrontExpiration.value,
-        daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
-        lookbackPeriodStart:chosenLookbackPeriodStart.value,
-        lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
-      })
-      .then((getHistoricalCalendarExitQuoteChartDataResponse)=>{
-        historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse;
-      })
-  },[]);
-  const handleInit = useCallback(()=>{
-    trpc.getAvailableUnderlyings
-      .query()
-      .then((availableUnderlyingsResponse)=>{
-        availableUnderlyings.value = availableUnderlyingsResponse;
-        chosenUnderlying.value = availableUnderlyingsResponse[0];
-        refreshHistoricalStockQuoteChartData();
-        refreshHistoricalCalendarQuoteChartData();
-        refreshHistoricalCalendarExitQuoteChartData();
-      });
-  },[]);
-  const handleUnderlyingChange = useCallback((e)=>{
+const refreshHistoricalStockQuoteChartData = ()=>{
+  trpc.getHistoricalStockQuoteChartData
+    .query({
+      underlying:chosenUnderlying.value,
+      lookbackPeriodStart:chosenLookbackPeriodStart.value,
+      lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
+    })
+    .then((getHistoricalStockQuoteChartDataResponse)=>{
+      historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse;
+    })
+};
+const refreshHistoricalCalendarQuoteChartData = ()=>{
+  trpc.getHistoricalCalendarQuoteChartData
+    .query({
+      underlying:chosenUnderlying.value,
+      daysToFrontExpiration:chosenDaysToFrontExpiration.value,
+      daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
+      strikePercentageFromUnderlyingPriceRangeMin:chosenStrikePercentageFromUnderlyingPrice.value - chosenStrikePercentageFromUnderlyingPriceRadius.value,
+      strikePercentageFromUnderlyingPriceRangeMax:chosenStrikePercentageFromUnderlyingPrice.value + chosenStrikePercentageFromUnderlyingPriceRadius.value,
+      lookbackPeriodStart:chosenLookbackPeriodStart.value,
+      lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
+    })
+    .then((getHistoricalCalendarQuoteChartDataResponse)=>{
+      historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse;
+    })
+};
+const refreshHistoricalCalendarExitQuoteChartData = ()=>{
+  trpc.getHistoricalCalendarExitQuoteChartData
+    .query({
+      underlying:chosenUnderlying.value,
+      daysToFrontExpiration:chosenExitToFrontExpiration.value,
+      daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
+      lookbackPeriodStart:chosenLookbackPeriodStart.value,
+      lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
+    })
+    .then((getHistoricalCalendarExitQuoteChartDataResponse)=>{
+      historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse;
+    })
+};
+const handleInit = ()=>{
+  trpc.getAvailableUnderlyings
+    .query()
+    .then((availableUnderlyingsResponse)=>{
+      availableUnderlyings.value = availableUnderlyingsResponse;
+      chosenUnderlying.value = availableUnderlyingsResponse[0];
+      refreshHistoricalStockQuoteChartData();
+      refreshHistoricalCalendarQuoteChartData();
+      refreshHistoricalCalendarExitQuoteChartData();
+    });
+};
+const handleUnderlyingChange = (e)=>{
+  if(chosenUnderlying.value !== e.target.value){
     chosenUnderlying.value = e.target.value;
     refreshHistoricalStockQuoteChartData();
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
-  const handleDaysToFrontExpirationChange = useCallback((e)=>{
+  }
+};
+const handleDaysToFrontExpirationChange = (e)=>{
+  if(chosenDaysToFrontExpiration.value !== parseInt(e.target.value)){
     chosenDaysToFrontExpiration.value = parseInt(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
-  },[]);
-  const handleDaysBetweenFrontAndBackExpirationChange = useCallback((e)=>{
+  }
+};
+const handleDaysBetweenFrontAndBackExpirationChange = (e)=>{
+  if(chosenDaysBetweenFrontAndBackExpiration.value !== parseInt(e.target.value)){
     chosenDaysBetweenFrontAndBackExpiration.value = parseInt(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
-  const handleStrikePercentageFromUnderlyingPriceChange = useCallback((e)=>{
+  }
+};
+const handleStrikePercentageFromUnderlyingPriceChange = (e)=>{
+  if(chosenStrikePercentageFromUnderlyingPrice.value !== parseFloat(e.target.value)){
     chosenStrikePercentageFromUnderlyingPrice.value = parseFloat(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
-  },[]);
-  const handleStrikePercentageFromUnderlyingPriceRadiusChange = useCallback((e)=>{
+  }
+};
+const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e)=>{
+  if(chosenStrikePercentageFromUnderlyingPriceRadius.value !== parseFloat(e.target.value)){
     chosenStrikePercentageFromUnderlyingPriceRadius.value = parseFloat(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
-  },[]);
-  const handleExitToFrontExpirationChange = useCallback((e)=>{
+  }
+};
+const handleExitToFrontExpirationChange = (e)=>{
+  if(chosenExitToFrontExpiration.value !== parseInt(e.target.value)){
     chosenExitToFrontExpiration.value = parseInt(e.target.value);
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
+  }
+};
 
-  const handleLookbackPeriodStartChange = useCallback((e)=>{
+const handleLookbackPeriodStartChange = (e)=>{
+  if(chosenLookbackPeriodStart.value !== e.target.value){
     chosenLookbackPeriodStart.value = e.target.value;
     refreshHistoricalStockQuoteChartData();
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
-  const handleLookbackPeriodEndChange = useCallback((e)=>{
+  }
+};
+const handleLookbackPeriodEndChange = (e)=>{
+  if(chosenLookbackPeriodEnd.value !== e.target.value){
     chosenLookbackPeriodEnd.value = e.target.value;
     refreshHistoricalStockQuoteChartData();
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
+  }
+};
 
+export function HistoricalCalendarPrices(){
   useEffect(handleInit, []);
 
   return (
@@ -146,32 +162,32 @@ export function HistoricalCalendarPrices(){
       </div>
       <div>
         <label>Now-to-Front-Month "Days to Expiration"</label>
-        <input type="text" onChange={handleDaysToFrontExpirationChange} value={chosenDaysToFrontExpiration.value} />
+        <input type="text" onBlur={handleDaysToFrontExpirationChange} value={chosenDaysToFrontExpiration.value} />
         Days
       </div>
       <div>
         <label>Front-to-Back-Month "Days to Expiration" Difference</label>
-        <input type="text" onChange={handleDaysBetweenFrontAndBackExpirationChange} value={chosenDaysBetweenFrontAndBackExpiration.value} />
+        <input type="text" onBlur={handleDaysBetweenFrontAndBackExpirationChange} value={chosenDaysBetweenFrontAndBackExpiration.value} />
         Days Difference
       </div>
       <div>
         <label>"Strike Percentage From Underlying Price" Range</label>
-        <input type="text" onChange={handleStrikePercentageFromUnderlyingPriceChange} value={chosenStrikePercentageFromUnderlyingPrice.value} />
+        <input type="text" onBlur={handleStrikePercentageFromUnderlyingPriceChange} value={chosenStrikePercentageFromUnderlyingPrice.value} />
         %
         +/-
-        <input type="text" onChange={handleStrikePercentageFromUnderlyingPriceRadiusChange} value={chosenStrikePercentageFromUnderlyingPriceRadius.value} />
+        <input type="text" onBlur={handleStrikePercentageFromUnderlyingPriceRadiusChange} value={chosenStrikePercentageFromUnderlyingPriceRadius.value} />
         % from ATM
       </div>
       <div>
         <label>Exit-to-Front-Month "Days to Expiration"</label>
-        <input type="text" onChange={handleExitToFrontExpirationChange} value={chosenExitToFrontExpiration.value} />
+        <input type="text" onBlur={handleExitToFrontExpirationChange} value={chosenExitToFrontExpiration.value} />
         Days
       </div>
       <div>
         <label>Lookback Period</label>
-        <input type="text" onChange={handleLookbackPeriodStartChange} value={chosenLookbackPeriodStart.value} />
+        <input type="text" onBlur={handleLookbackPeriodStartChange} value={chosenLookbackPeriodStart.value} />
         -
-        <input type="text" onChange={handleLookbackPeriodEndChange} value={chosenLookbackPeriodEnd.value} />
+        <input type="text" onBlur={handleLookbackPeriodEndChange} value={chosenLookbackPeriodEnd.value} />
       </div>
       <div className="chart-container">
         {chosenUnderlying.value!==null && historicalStockQuoteChartData.value.length>0