Merge pull request #675 from dali-lab/dev

Allow user to pick model version in Play with the Model

Author: wu-ciesielska

src/screens/play-with-model/component.js

@@ -11,6 +11,8 @@ import { Loading } from '../../components';
 
 import { DATA_MODES } from '../../constants';
 
+export const DEFAULT_MODEL_VERSION = 2024;
+
 const PlayWithModel = (props) => {
   const {
     clearAllSelections,
@@ -32,11 +34,12 @@ const PlayWithModel = (props) => {
   }, [clearAllSelections]);
 
   const [modelInputs, setModelInputs] = useState({
-    cleridst1: 0,
+    cleridst1: null,
     endobrev: 1,
     spb: 0,
     spotst1: 0,
     spotst2: 0,
+    modelVersion: DEFAULT_MODEL_VERSION,
   });
 
   const updateModelInputs = (updates) => {
@@ -56,6 +59,7 @@ const PlayWithModel = (props) => {
       modelInputs.spotst2,
       modelInputs.spb,
       modelInputs.endobrev,
+      modelInputs.modelVersion,
     );
   };
 
@@ -68,11 +72,12 @@ const PlayWithModel = (props) => {
     // sets input fields to 0 if selections not fully specified
     if (!selectedState || selectedSubLocation.length !== 1) {
       setModelInputs({
-        cleridst1: 0,
+        cleridst1: null,
         endobrev: 1,
         spb: 0,
         spotst1: 0,
         spotst2: 0,
+        modelVersion: DEFAULT_MODEL_VERSION,
       });
     } else {
       const {
@@ -81,6 +86,7 @@ const PlayWithModel = (props) => {
         spbPer2Weeks,
         endobrev,
         cleridst1,
+        modelVersion,
       } = predictions[0];
 
       // update the state
@@ -90,6 +96,7 @@ const PlayWithModel = (props) => {
         spb: spbPer2Weeks,
         endobrev,
         cleridst1,
+        modelVersion,
       });
     }
   }, [county, dataMode, predictions, rangerDistrict, selectedState]);
@@ -105,6 +112,7 @@ const PlayWithModel = (props) => {
           modelInputs={modelInputs}
           runModel={runModel}
           updateModelInputs={updateModelInputs}
+          defaultModelVersion={DEFAULT_MODEL_VERSION}
         />
         <PlayWithModelOutputs
           county={county}

src/screens/play-with-model/components/play-with-model-inputs/component.js

@@ -5,13 +5,15 @@ import './style.scss';
 import trapIcon from '../../../../assets/icons/trap.png';
 import cleridsIcon from '../../../../assets/icons/clerids.png';
 import endobrevIcon from '../../../../assets/icons/endobrev.png';
+import { ChoiceInput } from '../../../../components/input-components';
 
 const PlayWithModelInputs = (props) => {
   const {
     modelInputs,
     runModel,
     updateModelInputs,
     year,
+    defaultModelVersion,
   } = props;
 
   const createValueSetter = (fieldName) => (newValue) => {
@@ -22,7 +24,7 @@ const PlayWithModelInputs = (props) => {
 
   const INPUT_INFORMATION = {
     SPOTST2: {
-      text: 'Enter a number for spots in {YEAR-2} (whole year)',
+      text: 'Enter number of spots two years ago',
       icon: trapIcon,
       iconAlt: 'number of spots icon',
       iconId: 'trap-icon',
@@ -31,7 +33,7 @@ const PlayWithModelInputs = (props) => {
       trueFalseSelection: false,
     },
     SPOTST1: {
-      text: 'Enter a number for spots in {YEAR-1} (whole year)',
+      text: 'Enter number of spots in previous year',
       icon: trapIcon,
       iconAlt: 'number of spots icon',
       iconId: 'trap-icon',
@@ -40,7 +42,7 @@ const PlayWithModelInputs = (props) => {
       trueFalseSelection: false,
     },
     CLERIDST1: {
-      text: 'Enter a number for clerids per 2 weeks in Spring, {YEAR-1}',
+      text: 'Enter number of clerids / 2 weeks / trap this spring (leave blank if unknown)',
       icon: cleridsIcon,
       iconAlt: 'number of clerids icon',
       iconId: 'clerids-icon',
@@ -49,7 +51,7 @@ const PlayWithModelInputs = (props) => {
       trueFalseSelection: false,
     },
     SPB: {
-      text: 'Enter a number for SPB per 2 weeks in Spring, {YEAR}',
+      text: 'Enter number of SPB / 2 weeks / trap this spring',
       icon: trapIcon,
       iconAlt: 'number of SPB icon',
       iconId: 'spb-icon',
@@ -58,7 +60,7 @@ const PlayWithModelInputs = (props) => {
       trueFalseSelection: false,
     },
     ENDOBREV: {
-      text: 'Was endo-brevicomin used in Spring, {YEAR}?',
+      text: 'Toggle this switch to “No” if endo-brevicomin was not used',
       icon: endobrevIcon,
       iconAlt: 'endo-brevicomin icon',
       iconId: 'endobrev-icon',
@@ -68,6 +70,21 @@ const PlayWithModelInputs = (props) => {
     },
   };
 
+  const MODEL_VERSION_INPUTS = {
+    2018: ['SPOTST2', 'SPOTST1', 'CLERIDST1', 'SPB', 'ENDOBREV'],
+    2024: ['SPOTST1', 'SPB', 'ENDOBREV'],
+  };
+
+  const filterModelVersionInputs = (modelVersion) => {
+    const filteredInputsInformation = Object.entries(INPUT_INFORMATION).filter((entry) => {
+      return MODEL_VERSION_INPUTS[modelVersion || defaultModelVersion].includes(entry[0]);
+    });
+
+    return Object.fromEntries(filteredInputsInformation);
+  };
+
+  const inputInformation = filterModelVersionInputs(modelInputs.modelVersion);
+
   const selectionInput = (isTrueFalseSelection, value, setValue) => {
     if (!isTrueFalseSelection) {
       return (
@@ -119,7 +136,7 @@ const PlayWithModelInputs = (props) => {
           <span className="input-description">Change numbers in any of the fields below to gauge effect on predicted risks at right</span>
           <span className="required-text">* required</span>
         </div>
-        {Object.entries(INPUT_INFORMATION).map(([key, inputInfo]) => {
+        {Object.entries(inputInformation).map(([key, inputInfo]) => {
           const {
             text,
             icon,
@@ -154,9 +171,21 @@ const PlayWithModelInputs = (props) => {
           );
         })}
       </div>
-      <button className="animated-button" id="run-button" type="button" onClick={runModel}>
-        Run
-      </button>
+      <div className="actions-container">
+        <div className="pick-model-input">
+          <span>Pick model version</span>
+          <ChoiceInput
+            id="modelVersion"
+            options={[2018, 2024]}
+            value={modelInputs.modelVersion}
+            setValue={createValueSetter('modelVersion')}
+            firstOptionText="Year"
+          />
+        </div>
+        <button className="animated-button" id="run-button" type="button" onClick={runModel}>
+          Run
+        </button>
+      </div>
     </div>
   );
 };

src/screens/play-with-model/components/play-with-model-inputs/style.scss

@@ -140,3 +140,25 @@ span.required-text {
     color: #ffffff;
     float: right;
 }
+
+.actions-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .selection-button {
+        background-color: #f0f2f8;
+    }
+}
+
+.pick-model-input {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+
+    span {
+        font-weight: 600;
+        line-height: 1.8;
+        margin-bottom: 5px;
+    }
+}

src/screens/play-with-model/components/play-with-model-outputs/style.scss

@@ -9,7 +9,6 @@
     }
 
     #predictions-generated-title {
-        margin-top: 20px;
         font-size: 16px;
         font-weight: 600;
         color: #3c4253;

src/screens/play-with-model/index.js

@@ -57,8 +57,8 @@ const mapDispatchToProps = (dispatch) => {
     clearError: () => {
       dispatch(clearCustomPredictionError());
     },
-    runCustomPrediction: (cleridst1, spotst1, spotst2, SPB, endobrev) => {
-      dispatch(runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev));
+    runCustomPrediction: (cleridst1, spotst1, spotst2, SPB, endobrev, modelVersion) => {
+      dispatch(runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev, modelVersion));
     },
   };
 };

src/services/api.js

@@ -246,13 +246,14 @@ export async function rangerDistrictAggregateByRangerDistrict(filters = {}) {
  * @param {Number|string|Boolean} endobrev whether or not endobrev was used
  * @returns {Promise<Object>} model results
  */
-export async function runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev) {
+export async function runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev, modelVersion) {
   const params = {
     cleridst1,
     endobrev: +endobrev, // note: this casts true to 1 and false to 0 if it is a boolean
     SPB,
     spotst1,
     spotst2,
+    modelVersion,
   };
 
   const url = `${global.AUTOMATION_API_URL}/${R_MODEL_SUBROUTE}`;

src/state/actions/data.js

@@ -256,12 +256,12 @@ export function getAggregateLocationData(overrideFilter = {}) {
  * @param {Number} SPB num spb this year
  * @param {Number|Boolean} endobrev whether or not endobrev was used
  */
-export function runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev) {
+export function runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev, modelVersion) {
   return async (dispatch) => {
     dispatch({ type: ActionTypes.FETCHING_CUSTOM_PREDICTION, payload: true });
 
     try {
-      const response = await api.runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev);
+      const response = await api.runCustomPrediction(cleridst1, spotst1, spotst2, SPB, endobrev, modelVersion);
       dispatch({ type: ActionTypes.SET_CUSTOM_PREDICTION, payload: response });
     } catch (error) {
       dispatch({