WV-2967 EIC 2.0 (#4999)

* EIC Request

* WIP

* update url

* remove util file

* remove console statement

web/js/location.js

@@ -317,6 +317,10 @@ const getParameters = function(config, parameters) {
  stateKey: 'ui.eic',
  initialState: '',
  },
+ scenario: {
+ stateKey: 'ui.scenario',
+ initialState: '',
+ },
  em: {
  stateKey: 'embed.isEmbedModeActive',
  initialState: false,

web/js/mapUI/components/eic/eic.js

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectDate as selectDateAction } from '../../../modules/date/actions';
+import {
+ setEICLegacy as setEICLegacyAction,
+} from '../../../modules/ui/actions';
+
+function EIC() {
+ const dispatch = useDispatch();
+ const selectDate = (date) => { dispatch(selectDateAction(date)); };
+ const setEICLegacy = (isLegacy) => { dispatch(setEICLegacyAction(isLegacy)); };
+
+ const eic = useSelector((state) => state.ui.eic);
+ const eicLegacy = useSelector((state) => state.ui.eicLegacy);
+ const scenario = useSelector((state) => state.ui.scenario);
+
+ const requestBestDate = async () => {
+ try {
+ const url = `https://m80gyw03f7.execute-api.us-east-1.amazonaws.com/dev/scenarios?item_type=scenario&item_id=${scenario}`;
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error('Network response was not ok.');
+ }
+ const data = await response.json();
+ const resolutionDate = data.resolution_date;
+
+ if (resolutionDate === 'No valid date found') {
+ console.error('No valid date found, using EIC Legacy mode');
+ setEICLegacy(true);
+ return;
+ }
+
+ const dateObj = new Date(resolutionDate);
+ selectDate(dateObj);
+ } catch (error) {
+ console.error('Error fetching the best date, using EIC Legacy mode:', error);
+ setEICLegacy(true);
+ }
+ };
+
+ useEffect(() => {
+ if (scenario !== '' && eicLegacy === false && eic === 'si') {
+ requestBestDate();
+ }
+ }, []);
+
+ return null;
+}
+
+export default EIC;

web/js/mapUI/components/kiosk/tile-measurement/tile-measurement.js

@@ -27,6 +27,8 @@ function TileMeasurement({ ui }) {
  const eic = useSelector((state) => state.ui.eic);
  const realTime = useSelector((state) => state.date.appNow);
  const activeLayers = useSelector((state) => getActiveLayers(state, state.compare.activeString), shallowEqual);
+ const eicLegacy = useSelector((state) => state.ui.eicLegacy);
+ const scenario = useSelector((state) => state.ui.scenario);
 
  const [measurementsStarted, setMeasurementsStarted] = useState(false);
 
@@ -230,7 +232,7 @@ function TileMeasurement({ ui }) {
  };
 
  useEffect(() => {
- if (!measurementsStarted && activeLayers && eic && ui.selected) {
+ if (!measurementsStarted && activeLayers && eic && ui.selected && (eicLegacy || !scenario)) {
  setMeasurementsStarted(true);
  calculateMeasurements();
  }

web/js/mapUI/mapUI.js

@@ -19,6 +19,7 @@ import BufferQuickAnimate from './components/buffer-quick-animate/bufferQuickAni
 import KioskAnimations from './components/kiosk/kiosk-animations/kiosk-animations';
 import TileMeasurement from './components/kiosk/tile-measurement/tile-measurement';
 import TravelMode from './components/kiosk/travel-mode/travelMode';
+import EIC from './components/eic/eic';
 import UpdateCollections from './components/update-collections/updateCollections';
 import DevTestButton from './components/dev-test-mode/dev-test-button';
 import { LOCATION_POP_ACTION } from '../redux-location-state-customs';
@@ -411,6 +412,7 @@ function MapUI(props) {
  { isEICModeActive
  && (
  <>
+ <EIC />
  <KioskAnimations ui={ui} />
  <TileMeasurement ui={ui} />
  { (isTravelModeActive && !isStaticMapActive) && <TravelMode /> }

web/js/modules/ui/actions.js

@@ -9,6 +9,7 @@ import {
  SET_EIC_MEASUREMENT_COMPLETE,
  SET_EIC_MEASUREMENT_ABORTED,
  SET_TRAVELING_HYPERWALL,
+ SET_EIC_LEGACY,
 } from './constants';
 import { CLOSE as CLOSE_MODAL } from '../modal/constants';
 
@@ -90,3 +91,11 @@ export function setTravelMode(travelMode) {
  travelMode,
  };
 }
+
+// Determines whether EIC mode should query backend (new EIC) or query data from the frontend (legacy)
+export function setEICLegacy(isLegacy) {
+ return {
+ type: SET_EIC_LEGACY,
+ isLegacy,
+ };
+}

web/js/modules/ui/constants.js

@@ -8,3 +8,4 @@ export const CHECK_ANIMATION_AVAILABILITY = 'UI/CHECK_ANIMATION_AVAILABILITY';
 export const SET_EIC_MEASUREMENT_COMPLETE = 'UI/SET_EIC_MEASUREMENT_COMPLETE';
 export const SET_EIC_MEASUREMENT_ABORTED = 'UI/SET_EIC_MEASUREMENT_ABORTED';
 export const SET_TRAVELING_HYPERWALL = 'UI/SET_TRAVELING_HYPERWALL';
+export const SET_EIC_LEGACY = 'UI/SET_EIC_LEGACY';

web/js/modules/ui/reducers.js

@@ -9,6 +9,7 @@ import {
  SET_EIC_MEASUREMENT_COMPLETE,
  SET_EIC_MEASUREMENT_ABORTED,
  SET_TRAVELING_HYPERWALL,
+ SET_EIC_LEGACY,
 } from './constants';
 
 export const uiState = {
@@ -20,7 +21,9 @@ export const uiState = {
  animationAvailabilityChecked: false,
  eicMeasurementComplete: false,
  eicMeasurementAborted: false,
- travelMode: '', // an id key that corresponds to a specific set of EIC scenario details
+ travelMode: '', // an id key that corresponds to a specific set of EIC scenario details for travel mode
+ eicLegacy: false,
+ scenario: '', // the scenario id that corresponds to the current EIC scenario to query backend
 };
 
 export default function uiReducers(state = uiState, action) {
@@ -79,6 +82,11 @@ export default function uiReducers(state = uiState, action) {
  ...state,
  travelMode: action.travelMode,
  };
+ case SET_EIC_LEGACY:
+ return {
+ ...state,
+ eicLegacy: action.isLegacy,
+ };
  default:
  return state;
  }