Merge pull request #685 from dali-lab/feat/map-navigation-enhancements

feat: enhance map navigation, remove the details overlay
dali-lab · Jan 31, 2025 · af4150d · af4150d
2 parents 11ec273 + 8045841
commit af4150d
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 85 deletions.
diff --git a/src/screens/prediction/component.js b/src/screens/prediction/component.js
@@ -34,10 +34,22 @@ const Prediction = (props) => {
     dataMode,
     setDataMode,
     clearAllSelections,
+    county,
+    setCounty,
+    rangerDistrict,
+    setRangerDistrict,
   } = props;
 
   // functions for showing modal
-  const handleClose = () => setPredictionModal(false);
+  const handleClose = () => {
+    setPredictionModal(false);
+    if (county.length > 0) {
+      setCounty([]);
+    }
+    if (rangerDistrict.length > 0) {
+      setRangerDistrict([]);
+    }
+  };
   const handleShow = () => setPredictionModal(true);
 
   useEffect(() => {

diff --git a/src/screens/prediction/components/prediction-details/component.js b/src/screens/prediction/components/prediction-details/component.js
@@ -7,6 +7,7 @@ import { DATA_MODES } from '../../../../constants';
 
 import trapIcon from '../../../../assets/icons/trap.png';
 import cleridIcon from '../../../../assets/icons/clerids.png';
+import { getFillColor } from '../../../../utils';
 
 const spbText = 'SPB per two weeks, averaged across traps';
 const cleridText = 'clerids per two weeks, averaged across traps';
@@ -31,13 +32,13 @@ const PredictionDetails = (props) => {
               <p id="prediction-subtitle">{data[0].year} Prediction</p>
               <div className="percentages">
                 <div className="prediction-circle">
-                  <div className="circle" id="any-spots">
+                  <div className={`circle ${getFillColor(data[0].probSpotsGT0).colorName}`} id="any-spots">
                     <div id="percent">{((data[0].probSpotsGT0) * 100).toFixed(1)}%</div>
                     <p>Predicted % Chance of Any Spots ({'>'}0 spots)</p>
                   </div>
                 </div>
                 <div className="prediction-circle">
-                  <div className="circle" id="outbreak">
+                  <div className={`circle ${getFillColor(data[0].probSpotsGT50).colorName}`} id="outbreak">
                     <div id="percent">{((data[0].probSpotsGT50) * 100).toFixed(1)}%</div>
                     <p>Predicted % Chance of Outbreak ({'>'}50 spots)</p>
                   </div>

diff --git a/src/screens/prediction/components/prediction-details/style.scss b/src/screens/prediction/components/prediction-details/style.scss
@@ -45,7 +45,8 @@
     line-height: 110px;
     text-align: center;
     font-size: 28px;
-    font-weight: 900;
+    font-weight: 800;
+    text-shadow: rgba($textColor, 0.2) 1px 0 10px;
 }
 
 .prediction-circle p {
@@ -57,22 +58,45 @@
     width: 110px;
     height: 110px;
     border-radius: 50%;
-    color: black; 
+    color: $white; 
+    font-weight: 700;
     text-align: center;
     justify-content: space-between;
     margin-left: 40px;
     margin-right: 30px;
     margin-bottom: 100px;
-}
-
-#any-spots {
-    box-shadow: 0 6px 20px -2px rgba(134, 204, 255, 0.55);
-    background-color: $blue500;
-}
 
-#outbreak {
-    box-shadow: 0 6px 20px -2px rgba(255, 193, 72, 0.55);
-    background-color: $yellow;
+    &.blue {
+        background-color: $blue500;
+        box-shadow: 0 6px 20px -2px rgba($blue500, 0.55);
+    }
+
+    &.yellow {
+        background-color: $yellow;
+        box-shadow: 0 6px 20px -2px rgba($yellow, 0.55);
+    }
+
+    &.orange {
+        background-color: $orange;
+        box-shadow: 0 6px 20px -2px rgba($orange, 0.55);
+    }
+
+    &.brightRed {
+        background-color: $red400;
+        box-shadow: 0 6px 20px -2px rgba($red400, 0.55);
+    }
+
+    &.darkerRed {
+        background-color: $red600;
+        box-shadow: 0 6px 20px -2px rgba($red600, 0.55);
+        color: $white;
+    }
+
+    &.darkRed {
+        background-color: $red900;
+        box-shadow: 0 6px 20px -2px rgba($red900, 0.55);
+        color: $white;
+    }
 }
 
 .circle p {

diff --git a/src/screens/prediction/components/prediction-map/component.js b/src/screens/prediction/components/prediction-map/component.js
@@ -25,7 +25,7 @@ import {
   STATE_VECTOR_LAYER,
 } from '../../../../constants';
 
-import { getMapboxRDNameFormat } from '../../../../utils';
+import { getMapboxRDNameFormat, getFillColor } from '../../../../utils';
 import { api } from '../../../../services';
 
 import {
@@ -84,11 +84,6 @@ const PredictionMap = (props) => {
     }
   };
 
-  // for the data window once we select a county/RD
-  const windowTitle = () => {
-    return dataMode === DATA_MODES.COUNTY ? `${data[0].county} County` : data[0].rangerDistrict;
-  };
-
   // twice-curried function for generating hover callback
   const createMapHoverCallback = (predictions, rangerDistricts, mode, state, availStates) => (e) => {
     if (!map || !e || !map.isStyleLoaded()) return;
@@ -194,9 +189,6 @@ const PredictionMap = (props) => {
 
     createdMap.addControl(new mapboxgl.NavigationControl());
 
-    // disable map zoom when using scroll
-    createdMap.scrollZoom.disable();
-
     const legendTagsToSet = thresholds.map((threshold, index) => {
       const color = colors[index];
 
@@ -260,21 +252,7 @@ const PredictionMap = (props) => {
       rangerDistrict,
       state,
     }) => {
-      let color;
-
-      if (fillProb <= 0.025) {
-        color = colors[0];
-      } else if (fillProb > 0.025 && fillProb <= 0.05) {
-        color = colors[1];
-      } else if (fillProb > 0.05 && fillProb <= 0.15) {
-        color = colors[2];
-      } else if (fillProb > 0.15 && fillProb <= 0.25) {
-        color = colors[3];
-      } else if (fillProb > 0.25 && fillProb <= 0.4) {
-        color = colors[4];
-      } else {
-        color = colors[5];
-      }
+      const color = getFillColor(fillProb).color;
 
       const countyFormatName = county && state ? `${county.toUpperCase()} ${state}` : '';
       const rangerDistrictFormatName = rangerDistrict ? getMapboxRDNameFormat(rangerDistrict).toUpperCase() : '';
@@ -502,56 +480,15 @@ const PredictionMap = (props) => {
     }
   }, [data]);
 
+  useEffect(() => {
+    if (data.length === 1) {
+      setPredictionModal(true);
+    }
+  }, [data]);
+
   return (
     <div className="container flex-item-left" id="map-container">
       <div id="map" />
-      <div className="map-overlay-data" id="data">
-        <h3 className="data-title">
-          {
-            data?.length === 1
-              ? windowTitle()
-              : 'Select county or federal land on the map to view prediction data'
-          }
-        </h3>
-        {
-          data?.length === 1
-          && <p>{year} Prediction</p>
-        }
-        <div className="data-info">
-          <div className="data-info-section">
-            {
-              data?.length === 1
-                ? (
-                  <div className="circle" id="data-spots">
-                    <div id="percent">{((data[0].probSpotsGT0) * 100).toFixed(0)}%</div>
-                  </div>
-                )
-                : <div className="circle" id="empty" />
-            }
-            <p>Probability of any spots</p>
-          </div>
-          <div className="data-info-section">
-            {
-              data?.length === 1
-                ? (
-                  <div className="circle" id="data-outbreak">
-                    <div id="percent">{((data[0].probSpotsGT50) * 100).toFixed(0)}%</div>
-                  </div>
-                )
-                : <div className="circle" id="empty" />
-            }
-            <p>Probability of a spot outbreak</p>
-          </div>
-        </div>
-        {
-          data?.length === 1
-          && (
-            <div className="data-button" onClick={() => setPredictionModal(true)}>
-              <p>View details</p>
-            </div>
-          )
-        }
-      </div>
       <div id="map-overlay-download" onClick={downloadMap}>
         <h4>{isDownloadingMap ? 'Downloading...' : 'Download Map'}</h4>
         <div>

diff --git a/src/screens/prediction/index.js b/src/screens/prediction/index.js
@@ -7,6 +7,8 @@ import {
   clearSelections,
   setDataMode,
   setPredictionModal,
+  setCounty,
+  setRangerDistrict,
 } from '../../state/actions';
 
 const mapStateToProps = (state) => {
@@ -24,6 +26,8 @@ const mapStateToProps = (state) => {
       predictionModal,
       chartMode,
       dataMode,
+      county,
+      rangerDistrict,
     },
   } = state;
 
@@ -36,6 +40,8 @@ const mapStateToProps = (state) => {
     predictionModal,
     chartMode,
     dataMode,
+    county,
+    rangerDistrict,
   };
 };
 
@@ -53,6 +59,12 @@ const mapDispatchToProps = (dispatch) => {
     setDataMode: (mode) => {
       dispatch(setDataMode(mode));
     },
+    setCounty: (county) => {
+      dispatch(setCounty(county));
+    },
+    setRangerDistrict: (rangerDistrict) => {
+      dispatch(setRangerDistrict(rangerDistrict));
+    },
   };
 };
 

diff --git a/src/utils/colors.js b/src/utils/colors.js
@@ -0,0 +1,44 @@
+/* eslint-disable prefer-destructuring */
+const colors = [
+  '#86CCFF',
+  '#FFC148',
+  '#FFA370',
+  '#FF525C',
+  '#CB4767',
+  '#6B1B38',
+];
+
+const colorNames = [
+  'blue',
+  'yellow',
+  'orange',
+  'brightRed',
+  'darkerRed',
+  'darkRed',
+];
+
+const getFillColor = (fillProb) => {
+  let color, colorName;
+  if (fillProb <= 0.025) {
+    color = colors[0];
+    colorName = colorNames[0];
+  } else if (fillProb > 0.025 && fillProb <= 0.05) {
+    color = colors[1];
+    colorName = colorNames[1];
+  } else if (fillProb > 0.05 && fillProb <= 0.15) {
+    color = colors[2];
+    colorName = colorNames[2];
+  } else if (fillProb > 0.15 && fillProb <= 0.25) {
+    color = colors[3];
+    colorName = colorNames[3];
+  } else if (fillProb > 0.25 && fillProb <= 0.4) {
+    color = colors[4];
+    colorName = colorNames[4];
+  } else {
+    color = colors[5];
+    colorName = colorNames[5];
+  }
+  return { color, colorName };
+};
+
+export default getFillColor;
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -30,12 +30,15 @@ import {
   truncateText,
 } from './blog';
 
+import getFillColor from './colors';
+
 export {
   downloadCsv,
   getAuthTokenFromStorage,
   getChartModeFromStorage,
   getDataModeFromStorage,
   getDateToDisplay,
+  getFillColor,
   getLatestBlogPost,
   getMapboxRDNameFormat,
   getStateAbbreviationFromStateName,