static handlers; use onBlur instead of onChange

which gets converted to onInput due to preact/compat

frontend/src/pages/HistoricalCalendarPrices/HistoricalCalendarPrices.tsx

@@ -36,8 +36,7 @@ const chosenLookbackPeriodStart = signal("2022-01-01");
 const chosenLookbackPeriodEnd = signal("2024-01-01");
 
 
-export function HistoricalCalendarPrices(){
+const refreshHistoricalStockQuoteChartData = ()=>{
-  const refreshHistoricalStockQuoteChartData = useCallback(()=>{
   trpc.getHistoricalStockQuoteChartData
     .query({
       underlying:chosenUnderlying.value,
@@ -47,8 +46,8 @@ export function HistoricalCalendarPrices(){
     .then((getHistoricalStockQuoteChartDataResponse)=>{
       historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse;
     })
-  },[]);
+};
-  const refreshHistoricalCalendarQuoteChartData = useCallback(()=>{
+const refreshHistoricalCalendarQuoteChartData = ()=>{
   trpc.getHistoricalCalendarQuoteChartData
     .query({
       underlying:chosenUnderlying.value,
@@ -62,8 +61,8 @@ export function HistoricalCalendarPrices(){
     .then((getHistoricalCalendarQuoteChartDataResponse)=>{
       historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse;
     })
-  },[]);
+};
-  const refreshHistoricalCalendarExitQuoteChartData = useCallback(()=>{
+const refreshHistoricalCalendarExitQuoteChartData = ()=>{
   trpc.getHistoricalCalendarExitQuoteChartData
     .query({
       underlying:chosenUnderlying.value,
@@ -75,8 +74,8 @@ export function HistoricalCalendarPrices(){
     .then((getHistoricalCalendarExitQuoteChartDataResponse)=>{
       historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse;
     })
-  },[]);
+};
-  const handleInit = useCallback(()=>{
+const handleInit = ()=>{
   trpc.getAvailableUnderlyings
     .query()
     .then((availableUnderlyingsResponse)=>{
@@ -86,48 +85,65 @@ export function HistoricalCalendarPrices(){
       refreshHistoricalCalendarQuoteChartData();
       refreshHistoricalCalendarExitQuoteChartData();
     });
-  },[]);
+};
-  const handleUnderlyingChange = useCallback((e)=>{
+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