Improve map filters (#712)

Author: evulins

src/app/component.js

@@ -104,10 +104,11 @@ const App = (props) => {
     const isResultsPage = pathname === '/observed-outcomes';
 
     // Home page needs predictions and sparse data for the map
-    // First fetch available years to ensure predictionYear is valid (e.g., 2024 not 2025)
-    // The reducer will auto-correct predictionYear, which triggers the other useEffect to fetch predictions
+    // Fetch years, predictions, and available states immediately
     if (isHomePage) {
       getAvailableYears();
+      getPredictions(predictionYear);
+      getAvailableStates({ predictionYear });
     }
 
     // Blog pages need blog posts
@@ -124,6 +125,7 @@ const App = (props) => {
     getAggregateStateData,
     getAggregateYearData,
     getAllBlogPosts,
+    getAvailableStates,
     getAvailableYears,
     getPredictions,
     getSparseData,

src/components/filter-bar/index.js

@@ -52,28 +52,28 @@ const mapStateToProps = (state, ownProps) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => ({
-  clearAllSelections: () => {
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  clearAllSelections: ownProps.onClearSelections || (() => {
     dispatch(clearSelections());
-  },
-  setPredictionYear: (year) => {
+  }),
+  setPredictionYear: ownProps.onSetPredictionYear || ((year) => {
     dispatch(setPredictionYear(year));
-  },
+  }),
   setStartYear: (year) => {
     dispatch(setStartYear(year));
   },
   setEndYear: (year) => {
     dispatch(setEndYear(year));
   },
-  setCounty: (county) => {
+  setCounty: ownProps.onSetCounty || ((county) => {
     dispatch(setCounty(county));
-  },
-  setRangerDistrict: (rangerDistrict) => {
+  }),
+  setRangerDistrict: ownProps.onSetRangerDistrict || ((rangerDistrict) => {
     dispatch(setRangerDistrict(rangerDistrict));
-  },
-  setState: (state) => {
+  }),
+  setState: ownProps.onSetState || ((state) => {
     dispatch(setState(state));
-  },
+  }),
   setDataMode: (mode) => {
     dispatch(setDataMode(mode));
   },

src/components/historical-data/line-chart/components/avg-prob-chart/component.js

@@ -103,10 +103,6 @@ const AvgProbChart = (props) => {
       ],
     };
 
-    const updatedChartOptions = {
-      ...avgProbChartOptions,
-    };
-
     const yearRange = getYearRange(startYear, endYear);
     if (yearRange.length === 0) {
       return;
@@ -124,12 +120,24 @@ const AvgProbChart = (props) => {
     const maxValue = Math.max(
       ...updatedAvgProbChartData.datasets[0].data.filter((v) => v !== null && v !== undefined)
     );
-    if (!Number.isNaN(maxValue) && maxValue > 0) {
-      updatedChartOptions.scales.yAxes[0].ticks.max = maxValue;
-    }
 
     setAvgProbChartData(updatedAvgProbChartData);
-    setAvgProbChartOptions(updatedChartOptions);
+
+    if (!Number.isNaN(maxValue) && maxValue > 0) {
+      setAvgProbChartOptions((prevOptions) => ({
+        ...prevOptions,
+        scales: {
+          ...prevOptions.scales,
+          yAxes: [{
+            ...prevOptions.scales.yAxes[0],
+            ticks: {
+              ...prevOptions.scales.yAxes[0].ticks,
+              max: maxValue,
+            },
+          }],
+        },
+      }));
+    }
   }, [yearData, startYear, endYear]);
 
   return <Line data={avgProbChartData} height={400} options={avgProbChartOptions} />;

src/components/historical-data/trapping-data-map/component.js

@@ -29,6 +29,7 @@ import {
   addMapLayer,
   createBaseExpressions,
   removeVectorLayer,
+  waitForStyleLoad,
 } from '../../../utils/map-coloring';
 import { isMapRemoved as checkMapRemoved, markMapAsRemoved as markMapRemoved } from '../../../utils/map-instance-tracker';
 import Map from '../../map';
@@ -43,20 +44,24 @@ const HistoricalMap = (props) => {
   const {
     availableStates,
     availableSublocations,
+    county,
     dataMode,
     predictionYear,
+    rangerDistrict,
     selectedState,
     setCounty,
     setRangerDistrict,
     setState,
+    setCountyFilter,
+    setRangerDistrictFilter,
+    setStateFilter,
+    clearAllSelections,
     sublocationData: rawData,
   } = props;
 
   const {
     map,
     setMap,
-    initialFill,
-    setInitialFill,
     hover: trappingHover,
     setHover: setTrappingHover,
     isDownloadingMap,
@@ -65,6 +70,26 @@ const HistoricalMap = (props) => {
 
   const allRangerDistricts = useRangerDistricts(dataMode);
 
+  const colorFillTimeoutRef = useRef(null);
+  const isMountedRef = useRef(true);
+  const styleRetryCountRef = useRef(0);
+  const containerCheckTimeoutRef = useRef(null);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (colorFillTimeoutRef.current) {
+        clearTimeout(colorFillTimeoutRef.current);
+        colorFillTimeoutRef.current = null;
+      }
+      if (containerCheckTimeoutRef.current) {
+        clearTimeout(containerCheckTimeoutRef.current);
+        containerCheckTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
   const createMapHoverCallback = useCallback((allData, rangerDistricts, mode, state, availStates) => {
     const callback = (hoverState, location, x, y, counties) => {
       const sublocation = mode === DATA_MODES.COUNTY ? 'county' : 'rangerDistrict';
@@ -96,14 +121,11 @@ const HistoricalMap = (props) => {
     return createHoverCallback(map, rangerDistricts, dataMode, callback);
   }, [map, dataMode, setTrappingHover]);
 
-  const colorFill = (d) => {
-    if (!map) return;
+  const colorFill = useCallback((d) => {
+    if (!isMountedRef.current || !map) return false;
 
-    if (!map.isStyleLoaded()) {
-      setTimeout(() => {
-        colorFill(d);
-      }, 1000);
-      return;
+    if (!waitForStyleLoad(map, colorFill, [d], colorFillTimeoutRef, isMountedRef, styleRetryCountRef)) {
+      return false;
     }
 
     removeVectorLayer(map);
@@ -114,14 +136,27 @@ const HistoricalMap = (props) => {
     const filteredData = d.filter((item) => {
       const itemYear = parseYearFromItem(item);
       if (itemYear === null) return false;
-      return itemYear === selectedYear;
+      if (itemYear !== selectedYear) return false;
+
+      // Apply visual filtering based on selected state, county, and rangerDistrict
+      if (selectedState && item.state !== selectedState) return false;
+
+      if (dataMode === DATA_MODES.COUNTY && county && county.length > 0) {
+        if (!county.includes(item.county)) return false;
+      }
+
+      if (dataMode === DATA_MODES.RANGER_DISTRICT && rangerDistrict && rangerDistrict.length > 0) {
+        if (!rangerDistrict.includes(item.rangerDistrict)) return false;
+      }
+
+      return true;
     });
 
     const trappingsByLocality = filteredData.reduce((acc, curr) => {
       const {
-        county,
-        rangerDistrict,
-        state,
+        county: itemCounty,
+        rangerDistrict: itemRangerDistrict,
+        state: itemState,
         sumSpotst0,
         spotst0,
         spots,
@@ -136,8 +171,8 @@ const HistoricalMap = (props) => {
         spotsValue = spots;
       }
 
-      const countyFormatName = county && state ? `${county} ${state}`.toUpperCase() : '';
-      const rangerDistrictFormatName = rangerDistrict ? getMapboxRDNameFormat(rangerDistrict)?.toUpperCase() : '';
+      const countyFormatName = itemCounty && itemState ? `${itemCounty} ${itemState}`.toUpperCase() : '';
+      const rangerDistrictFormatName = itemRangerDistrict ? getMapboxRDNameFormat(itemRangerDistrict)?.toUpperCase() : '';
 
       const localityDescription = dataMode === DATA_MODES.COUNTY ? countyFormatName : rangerDistrictFormatName;
 
@@ -178,14 +213,20 @@ const HistoricalMap = (props) => {
 
     addDefaultExpressions(fillExpression, strokeExpression);
 
-    addMapLayer(map, fillExpression, strokeExpression, getSourceLayer(dataMode));
-  };
+    addMapLayer(map, fillExpression, strokeExpression, getSourceLayer(dataMode), dataMode);
+
+    return true;
+  }, [map, dataMode, selectedState, county, rangerDistrict, predictionYear]);
 
   const mapInitializedRef = useRef(false);
   const lastDataModeRef = useRef(dataMode);
   const initTimeoutRef = useRef(null);
   const containerRetryCountRef = useRef(0);
 
+  useEffect(() => {
+    mapInitializedRef.current = false;
+  }, []);
+
   useEffect(() => {
     const shouldRegenerate = !map || lastDataModeRef.current !== dataMode;
 
@@ -203,7 +244,13 @@ const HistoricalMap = (props) => {
     const currentMap = map;
 
     initTimeoutRef.current = setTimeout(() => {
+      initTimeoutRef.current = null;
+
+      if (!isMountedRef.current) return;
+
       const checkContainer = () => {
+        if (!isMountedRef.current) return;
+
         if (containerRetryCountRef.current >= MAP_INIT_CONSTANTS.MAX_CONTAINER_CHECK_RETRIES) {
           logError('Map container not found after maximum retries', null, { component: 'TrappingDataMap' });
           return;
@@ -220,10 +267,14 @@ const HistoricalMap = (props) => {
           });
           mapInitializedRef.current = true;
           lastDataModeRef.current = dataMode;
-          initTimeoutRef.current = null;
         } else {
           containerRetryCountRef.current += 1;
-          setTimeout(checkContainer, MAP_INIT_CONSTANTS.CONTAINER_CHECK_INTERVAL);
+          containerCheckTimeoutRef.current = setTimeout(() => {
+            containerCheckTimeoutRef.current = null;
+            if (isMountedRef.current) {
+              checkContainer();
+            }
+          }, MAP_INIT_CONSTANTS.CONTAINER_CHECK_INTERVAL);
         }
       };
       checkContainer();
@@ -235,6 +286,10 @@ const HistoricalMap = (props) => {
         clearTimeout(initTimeoutRef.current);
         initTimeoutRef.current = null;
       }
+      if (containerCheckTimeoutRef.current) {
+        clearTimeout(containerCheckTimeoutRef.current);
+        containerCheckTimeoutRef.current = null;
+      }
       if (map && typeof map.remove === 'function' && map.getContainer && !checkMapRemoved(map)) {
         try {
           const container = map.getContainer();
@@ -251,23 +306,36 @@ const HistoricalMap = (props) => {
       }
       mapInitializedRef.current = false;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataMode]);
 
   useEffect(() => {
-    if (!map) return;
+    if (!map || rawData.length === 0 || predictionYear.toString().length !== 4) {
+      return undefined;
+    }
 
-    if (predictionYear.toString().length === 4) colorFill(rawData);
+    const attemptColoring = () => {
+      if (map.isStyleLoaded && map.isStyleLoaded()) {
+        const didColor = colorFill(rawData);
+        if (didColor) {
+          zoomToSelectedState(selectedState, map);
+        }
+      } else {
+        map.once('styledata', () => {
+          const didColor = colorFill(rawData);
+          if (didColor) {
+            zoomToSelectedState(selectedState, map);
+          }
+        });
+      }
+    };
 
-    zoomToSelectedState(selectedState, map);
+    const timer = setTimeout(attemptColoring, 50);
+    return () => {
+      clearTimeout(timer);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rawData, selectedState, map, predictionYear]);
-
-  useEffect(() => {
-    if (!initialFill && map && rawData.length > 0) {
-      colorFill(rawData);
-      setInitialFill(true);
-    }
-  }, [initialFill, map, rawData, setInitialFill]);
+  }, [rawData, selectedState, map, predictionYear, county, rangerDistrict]);
 
   const hoverCallback = useMemo(() => {
     if (!map || !rawData) return null;
@@ -321,27 +389,6 @@ const HistoricalMap = (props) => {
     }
   }, [rawData, map]);
 
-  useEffect(() => {
-    const handleDownloadClick = (event) => {
-      if (!event.target.matches('.download-button') && !event.target.matches('.download-button p')) return;
-      downloadMap(
-        map,
-        predictionYear,
-        isDownloadingMap,
-        setIsDownloadingMap,
-        selectedState,
-        MAP_TITLES.HISTORICAL,
-        { titleDetails: { selectedState, period: predictionYear }, thresholds, colors }
-      );
-    };
-
-    document.addEventListener('click', handleDownloadClick, false);
-
-    return () => {
-      document.removeEventListener('click', handleDownloadClick, false);
-    };
-  }, [map, predictionYear, isDownloadingMap, setIsDownloadingMap, selectedState]);
-
   const getRiskLevel = (index) => {
     const riskLevels = ['No Data', '0-9', '10-19', '20-49', '50-99', '100-249', '250+'];
     return riskLevels[index] || 'Unknown';
@@ -361,16 +408,16 @@ const HistoricalMap = (props) => {
         availableStates={availableStates}
         availableYears={[]}
         availableSublocations={availableSublocations}
-        county={props.county}
+        county={county}
         dataMode={dataMode}
         predictionYear={predictionYear}
-        rangerDistrict={props.rangerDistrict}
+        rangerDistrict={rangerDistrict}
         selectedState={selectedState}
-        setCounty={setCounty}
+        setCounty={setCountyFilter}
         setPredictionYear={() => {}}
-        setRangerDistrict={setRangerDistrict}
-        setState={setState}
-        clearAllSelections={props.clearAllSelections}
+        setRangerDistrict={setRangerDistrictFilter}
+        setState={setStateFilter}
+        clearAllSelections={clearAllSelections}
         legendItems={legendItems}
         legendTitle="Total Number of Spots"
         downloadCallback={() => downloadMap(