fix(time-series): improve location filters and reset behavior

Author: evulins

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/trapping-data-map/component.js

@@ -43,12 +43,18 @@ const HistoricalMap = (props) => {
   const {
     availableStates,
     availableSublocations,
+    county,
     dataMode,
     predictionYear,
+    rangerDistrict,
     selectedState,
     setCounty,
     setRangerDistrict,
     setState,
+    setCountyFilter,
+    setRangerDistrictFilter,
+    setStateFilter,
+    clearAllSelections,
     sublocationData: rawData,
   } = props;
 
@@ -114,14 +120,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 +155,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;
 
@@ -266,7 +285,7 @@ const HistoricalMap = (props) => {
 
     zoomToSelectedState(selectedState, map);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rawData, selectedState, map, predictionYear]);
+  }, [rawData, selectedState, map, predictionYear, county, rangerDistrict]);
 
   useEffect(() => {
     if (!initialFill && map && rawData.length > 0) {
@@ -368,16 +387,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(

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

@@ -6,6 +6,7 @@ import {
   setCounty,
   setRangerDistrict,
   setState,
+  ActionTypes,
 } from '../../../state/actions';
 
 const mapStateToProps = (state) => {
@@ -50,6 +51,20 @@ const mapDispatchToProps = (dispatch) => {
     setState: (state) => {
       dispatch(setState(state));
     },
+    setCountyFilter: (county) => {
+      dispatch({ type: ActionTypes.SET_COUNTY_FILTER, payload: { county: county === '' ? [] : county } });
+    },
+    setRangerDistrictFilter: (rangerDistrict) => {
+      dispatch({ type: ActionTypes.SET_RANGER_DISTRICT_FILTER, payload: { rangerDistrict: rangerDistrict === '' ? [] : rangerDistrict } });
+    },
+    setStateFilter: (state) => {
+      dispatch({ type: ActionTypes.SET_STATE, payload: { state } });
+    },
+    clearAllSelections: () => {
+      dispatch({ type: ActionTypes.SET_STATE, payload: { state: '' } });
+      dispatch({ type: ActionTypes.SET_COUNTY_FILTER, payload: { county: [] } });
+      dispatch({ type: ActionTypes.SET_RANGER_DISTRICT_FILTER, payload: { rangerDistrict: [] } });
+    },
   };
 };
 

src/hooks/useDataTableData.js

@@ -39,12 +39,12 @@ const useDataTableData = (filters, dataFormat, dataMode) => {
   );
 
   const fetchAvailableYears = useCallback(
-    (filterParams) => dispatch(getAvailableYears(filterParams)),
+    () => dispatch(getAvailableYears()),
     [dispatch]
   );
 
   useEffect(() => {
-    fetchAvailableYears({ isHistorical: true });
+    fetchAvailableYears();
     fetchAvailableStates({ isHistorical: true });
   }, [dataMode, fetchAvailableYears, fetchAvailableStates]);
 

src/screens/download-data/component.js

@@ -26,7 +26,7 @@ const DownloadDataScreen = (props) => {
 
   // Load available data when component mounts or dataMode changes
   useEffect(() => {
-    dispatch(getAvailableYears({ isHistorical: true }));
+    dispatch(getAvailableYears());
     dispatch(getAvailableStates({ isHistorical: true }, { historical: true, prediction: false }));
   }, [dataMode, dispatch]);
 

src/screens/observed-outcomes/component.js

@@ -8,15 +8,24 @@ import './style.scss';
 
 const ObservedOutcomes = (props) => {
   const {
-    isLoading, predictionYear, dataMode, fetchData, yearsLoaded, fetchAvailableYears,
+    isLoading,
+    predictionYear,
+    dataMode,
+    fetchData,
+    yearsLoaded,
+    fetchAvailableYears,
+    clearFilters,
+    setStateFilter,
+    setCountyFilter,
+    setRangerDistrictFilter,
   } = props;
 
   // Fetch available years on mount
   useEffect(() => {
     fetchAvailableYears();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Fetch data when year or dataMode changes
+  // Fetch data when year or dataMode changes (state filtering is done visually)
   useEffect(() => {
     if (yearsLoaded && predictionYear) {
       fetchData(predictionYear);
@@ -30,7 +39,12 @@ const ObservedOutcomes = (props) => {
         <OverviewText />
         <div className="observed-outcomes-content">
           <div className="container">
-            <FilterBar />
+            <FilterBar
+              onClearSelections={clearFilters}
+              onSetState={setStateFilter}
+              onSetCounty={setCountyFilter}
+              onSetRangerDistrict={setRangerDistrictFilter}
+            />
           </div>
           <ComparisonMap />
           <div className="container">

src/screens/observed-outcomes/components/comparison-map/component.js

@@ -74,16 +74,19 @@ const ComparisonMap = (props) => {
   const {
     availableStates,
     availableSublocations,
+    county,
     data,
     dataMode,
+    rangerDistrict,
     selectedState,
     setCounty,
+    setCountyFilter,
     setDataMode,
     setRangerDistrict,
+    setRangerDistrictFilter,
     setState,
+    clearAllSelections,
     year,
-    isLoading,
-    yearsLoaded,
   } = props;
 
   const {
@@ -196,19 +199,36 @@ const ComparisonMap = (props) => {
 
     const { fillExpression, strokeExpression } = createBaseExpressions(dataMode);
 
-    comparisonData.forEach(({
-      county,
+    // Filter data based on selected state and county/rangerDistrict
+    const filteredData = comparisonData.filter((item) => {
+      // First filter by state if selected
+      if (selectedState && item.state !== selectedState) {
+        return false;
+      }
+      // Then filter by county/rangerDistrict if selected
+      if (dataMode === DATA_MODES.COUNTY) {
+        if (county && county.length > 0) {
+          return county.includes(item.county);
+        }
+      } else if (rangerDistrict && rangerDistrict.length > 0) {
+        return rangerDistrict.includes(item.rangerDistrict);
+      }
+      return true;
+    });
+
+    filteredData.forEach(({
+      county: countyName,
       probSpotsGT50: fillProb,
       sumSpots,
-      rangerDistrict,
-      state,
+      rangerDistrict: rdName,
+      state: stateName,
     }) => {
       const color = getFillColor(fillProb, sumSpots);
 
       const locationName = formatLocationForMapbox(dataMode, {
-        county,
-        rangerDistrict,
-        state,
+        county: countyName,
+        rangerDistrict: rdName,
+        state: stateName,
       });
 
       if (locationName) {
@@ -223,7 +243,7 @@ const ComparisonMap = (props) => {
     addDefaultExpressions(fillExpression, strokeExpression);
 
     addMapLayer(map, fillExpression, strokeExpression, getSourceLayer(dataMode));
-  }, [map, dataMode]);
+  }, [map, dataMode, selectedState, county, rangerDistrict]);
 
   const mapInitializedRef = useRef(false);
   const lastDataModeRef = useRef(dataMode);
@@ -325,7 +345,7 @@ const ComparisonMap = (props) => {
     if (year.toString().length === 4 && data.length > 0) colorResults(data);
 
     zoomToSelectedState(selectedState, map);
-  }, [data, selectedState, map, dataMode, year, colorResults]);
+  }, [data, selectedState, county, rangerDistrict, map, dataMode, year, colorResults]);
 
   useEffect(() => {
     if (!initialFill && map && data.length > 0) {
@@ -401,8 +421,6 @@ const ComparisonMap = (props) => {
     label: getShortLabel(threshold),
   }));
 
-  const shouldShowMessage = !isLoading && !data.length && year && year.toString().length === 4 && yearsLoaded;
-
   return (
     <div className="container flex-item-left observed-outcomes-map" id="map-container">
       <TogglesOverlay dataMode={dataMode} setDataMode={setDataMode} />
@@ -413,16 +431,16 @@ const ComparisonMap = (props) => {
         availableStates={availableStates}
         availableYears={[]}
         availableSublocations={availableSublocations}
-        county={props.county}
+        county={county}
         dataMode={dataMode}
         predictionYear={year}
-        rangerDistrict={props.rangerDistrict}
+        rangerDistrict={rangerDistrict}
         selectedState={selectedState}
-        setCounty={setCounty}
+        setCounty={setCountyFilter}
         setPredictionYear={() => {}}
-        setRangerDistrict={setRangerDistrict}
+        setRangerDistrict={setRangerDistrictFilter}
         setState={setState}
-        clearAllSelections={props.clearAllSelections}
+        clearAllSelections={clearAllSelections}
         legendItems={legendItems}
         legendTitle="Results comparison"
         downloadCallback={() => downloadMap(
@@ -437,13 +455,6 @@ const ComparisonMap = (props) => {
         isDownloadingMap={isDownloadingMap}
         hideFilters
       />
-      {shouldShowMessage && (
-        <div className="observed-outcomes-message">
-          <p>
-            {`Map for ${year} not yet available. Spot data for the previous year usually come online sometime in January or February of the following year.`}
-          </p>
-        </div>
-      )}
     </div>
   );
 };

src/screens/observed-outcomes/components/comparison-map/index.js

@@ -1,6 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  setCounty, setDataMode, setRangerDistrict, setState,
+  ActionTypes,
+  setCounty,
+  setCountyFilter,
+  setDataMode,
+  setRangerDistrict,
+  setRangerDistrictFilter,
+  setState,
 } from '../../../../state/actions';
 import ComparisonMap from './component';
 
@@ -42,15 +48,28 @@ const mapDispatchToProps = (dispatch) => {
     setCounty: (county) => {
       dispatch(setCounty(county));
     },
+    setCountyFilter: (county) => {
+      dispatch(setCountyFilter(county));
+    },
     setDataMode: (mode) => {
       dispatch(setDataMode(mode));
     },
     setRangerDistrict: (rangerDistrict) => {
       dispatch(setRangerDistrict(rangerDistrict));
     },
+    setRangerDistrictFilter: (rangerDistrict) => {
+      dispatch(setRangerDistrictFilter(rangerDistrict));
+    },
     setState: (state) => {
       dispatch(setState(state));
     },
+    clearAllSelections: () => {
+      // Only reset filter selections without clearing data
+      // Reset state, county, and rangerDistrict to empty
+      dispatch({ type: ActionTypes.SET_STATE, payload: { state: '' } });
+      dispatch({ type: ActionTypes.SET_COUNTY_FILTER, payload: { county: [] } });
+      dispatch({ type: ActionTypes.SET_RANGER_DISTRICT_FILTER, payload: { rangerDistrict: [] } });
+    },
   };
 };