-
-
+
+
{isTourActive && numberOutagesUnseen === 0 && (!isMobile || isEmbedModeActive) ? : null}
diff --git a/web/js/components/util/alert.js b/web/js/components/util/alert.js
index 889a130e10..a27345f85e 100644
--- a/web/js/components/util/alert.js
+++ b/web/js/components/util/alert.js
@@ -47,6 +47,7 @@ export default class AlertUtil extends React.Component {
id,
title,
message,
+ messageTitle,
icon,
onDismiss,
onClick,
@@ -70,8 +71,13 @@ export default class AlertUtil extends React.Component {
className="wv-alert-icon"
size="1x"
/>
-
- {message}
+
+
+ {messageTitle}
+
+
+ {message}
+
{onDismiss && (
@@ -106,6 +112,7 @@ AlertUtil.propTypes = {
id: PropTypes.string,
isOpen: PropTypes.bool,
message: PropTypes.string,
+ messageTitle: PropTypes.string,
noPortal: PropTypes.bool,
onClick: PropTypes.func,
onDismiss: PropTypes.func,
diff --git a/web/js/containers/alertDropdown.js b/web/js/containers/alertDropdown.js
new file mode 100644
index 0000000000..1afce2c519
--- /dev/null
+++ b/web/js/containers/alertDropdown.js
@@ -0,0 +1,36 @@
+import React, { useState, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import FeatureAlert from '../components/feature-alert/alert';
+import Alerts from './alerts';
+
+export default function AlertDropdown(isTourActive) {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const containerRef = useRef(null);
+ const notifications = containerRef?.current?.children.length;
+ const toggle = () => setDropdownOpen((prevState) => !prevState);
+ const { isTourActive: tourActive } = isTourActive;
+ const isDistractionFreeModeActive = useSelector((state) => state.ui.isDistractionFreeModeActive);
+ const isMobile = useSelector((state) => state.screenSize.isMobileDevice);
+
+ return (
+
+
+
+
+ Select an issue above for details
+
+
+ );
+}
diff --git a/web/js/containers/sidebar/layer-row.js b/web/js/containers/sidebar/layer-row.js
index 982e7905c0..48d43bb810 100644
--- a/web/js/containers/sidebar/layer-row.js
+++ b/web/js/containers/sidebar/layer-row.js
@@ -508,7 +508,8 @@ function LayerRow (props) {
id="zoom-alert"
isOpen
title="Zoom in to see imagery for this layer"
- message={`Imagery for ${layer.title} is not available at this zoom level.`}
+ messageTitle={layer.title}
+ message="Imagery is not available at this zoom level."
onDismiss={() => setHideZoomAlert(true)}
onClick={openZoomAlertModal}
/>
@@ -518,7 +519,8 @@ function LayerRow (props) {
id="granule-alert"
isOpen
title="Try moving the map or select a different date in the layer's settings."
- message={`Imagery for ${layer.title} is not available at this location or date.`}
+ messageTitle={layer.title}
+ message="Imagery is not available at this location or date."
onDismiss={() => setHideGranuleAlert(true)}
onClick={openGranuleAlertModal}
/>
diff --git a/web/js/containers/tour.js b/web/js/containers/tour.js
index 56d4a41fae..ff497e8713 100644
--- a/web/js/containers/tour.js
+++ b/web/js/containers/tour.js
@@ -528,8 +528,9 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(clearCustoms());
}
if (
- (parameters.l && hasCustomTypePalette(parameters.l))
- || (parameters.l1 && hasCustomTypePalette(parameters.l1))
+ ((parameters.l && hasCustomTypePalette(parameters.l))
+ || (parameters.l1 && hasCustomTypePalette(parameters.l1)))
+ && !Object.keys(rendered).includes('OPERA_Dynamic_Surface_Water_Extent')
) {
layers = layersParse12(parameters.l, config);
if (parameters.l1 && hasCustomTypePalette(parameters.l1)) {
@@ -537,6 +538,7 @@ const mapDispatchToProps = (dispatch) => ({
}
layers = uniqBy(layers, 'id');
+
preloadPalettes(layers, rendered, true).then((obj) => {
dispatch({
type: BULK_PALETTE_RENDERING_SUCCESS,
diff --git a/web/js/location.js b/web/js/location.js
index de332c7136..95980d9f85 100644
--- a/web/js/location.js
+++ b/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,
diff --git a/web/js/mapUI/components/eic/eic.js b/web/js/mapUI/components/eic/eic.js
new file mode 100644
index 0000000000..cef014d6bb
--- /dev/null
+++ b/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;
diff --git a/web/js/mapUI/components/kiosk/tile-measurement/tile-measurement.js b/web/js/mapUI/components/kiosk/tile-measurement/tile-measurement.js
index 7e5cba4a2b..3408e0370c 100644
--- a/web/js/mapUI/components/kiosk/tile-measurement/tile-measurement.js
+++ b/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();
}
diff --git a/web/js/mapUI/mapUI.js b/web/js/mapUI/mapUI.js
index 257fdaf09c..4a1491e4b8 100644
--- a/web/js/mapUI/mapUI.js
+++ b/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
&& (
<>
+
{ (isTravelModeActive && !isStaticMapActive) &&
}
diff --git a/web/js/modules/ui/actions.js b/web/js/modules/ui/actions.js
index d307a343da..57719847e3 100644
--- a/web/js/modules/ui/actions.js
+++ b/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,
+ };
+}
diff --git a/web/js/modules/ui/constants.js b/web/js/modules/ui/constants.js
index 4d03455924..6ddf04c36d 100644
--- a/web/js/modules/ui/constants.js
+++ b/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';
diff --git a/web/js/modules/ui/reducers.js b/web/js/modules/ui/reducers.js
index d457684b2e..6bfc381cb7 100644
--- a/web/js/modules/ui/reducers.js
+++ b/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;
}
diff --git a/web/scss/components/alert.scss b/web/scss/components/alert.scss
index 22fa9db591..20d2969bd3 100644
--- a/web/scss/components/alert.scss
+++ b/web/scss/components/alert.scss
@@ -1,8 +1,35 @@
-.wv-alert-container {
+.wv-alert-dropdown {
position: absolute;
top: 60px;
- right: 10px;
+ right: 50px;
left: auto;
+ width: 450px;
+ background: #282828;
+
+
+ button {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ color: #fff;
+ background: #282828;
+ border: #282828;
+ border-radius: 0;
+ min-height: 40px;
+ cursor: pointer;
+ padding: 0;
+ z-index: 100;
+ margin-bottom: 5px;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+}
+
+.wv-alert-container {
+ max-height: 300px;
+ overflow-y: scroll;
}
.wv-alert {
@@ -14,7 +41,7 @@
display: flex;
align-items: center;
justify-content: space-between;
- min-height: 40px;
+ min-height: 50px;
cursor: pointer;
padding: 0;
z-index: 100;
@@ -25,7 +52,22 @@
padding-right: 3px;
display: flex;
align-items: center;
+ min-height: 50px;
+ width: 100%;
+}
+
+.alert-text {
+ display: flex;
+ flex-direction: column;
+}
+
+.wv-alert-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ width: 100%;
height: 40px;
+ color: #fff;
}
.wv-alert .close-alert {