-
@@ -206,7 +206,7 @@ function BrowseLayers (props) {
{
isCategoryDisplay
? (
-
+
) : renderContent()
diff --git a/web/js/components/layer/product-picker/search/search-layers-list.js b/web/js/components/layer/product-picker/search/search-layers-list.js
index 0fb0592f9d..8d975bbf97 100644
--- a/web/js/components/layer/product-picker/search/search-layers-list.js
+++ b/web/js/components/layer/product-picker/search/search-layers-list.js
@@ -152,7 +152,7 @@ class SearchLayerList extends React.Component {
useWindow={false}
getScrollParent={() => this.scrollParent}
>
-
+
{visibleItems.map((layer) => (isMobile && recentLayerMode
? (
{
- testMode && (
+ checkAnimationAvailability ? (
- )
+ ) : isPlaying ? (
+
+ ) : null
}
- {isPlaying && !testMode && (
-
- )}
{isCollapsed ? (
- ) : isKioskModeActive && !testMode
+ ) : isKioskModeActive
? null
-
: (
{
const hasFutureLayers = activeLayersForProj.filter((layer) => layer.futureTime).length > 0;
const layerDateRange = getDateRange({}, activeLayersForProj);
+ const isAntarctic = proj.id === 'arctic';
+
const minDate = new Date(config.startDate);
let maxDate;
if (layerDateRange && layerDateRange.end > appNow) {
@@ -388,7 +387,10 @@ const mapStateToProps = (state) => {
maxDate = appNow;
}
- const { isDistractionFreeModeActive, isKioskModeActive } = ui;
+ const {
+ isDistractionFreeModeActive, isKioskModeActive, animationAvailabilityChecked, eic,
+ } = ui;
+ const checkAnimationAvailability = (eic === 'sa' || eic === 'da') && !animationAvailabilityChecked && isKioskModeActive && isPlaying && !isAntarctic;
const { isEmbedModeActive } = embed;
const animationIsActive = isActive
&& lodashGet(map, 'ui.selected.frameState_')
@@ -436,6 +438,7 @@ const mapStateToProps = (state) => {
appNow,
animationCustomModalOpen,
autoplay,
+ checkAnimationAvailability,
customSelected,
startDate,
endDate,
@@ -522,6 +525,7 @@ AnimationWidget.propTypes = {
animationCustomModalOpen: PropTypes.bool,
autoplay: PropTypes.bool,
breakpoints: PropTypes.object,
+ checkAnimationAvailability: PropTypes.bool,
snappedCurrentDate: PropTypes.object,
currentDate: PropTypes.object,
delta: PropTypes.number,
diff --git a/web/js/map/layerbuilder.js b/web/js/map/layerbuilder.js
index 34e86984ff..c93d0edcf5 100644
--- a/web/js/map/layerbuilder.js
+++ b/web/js/map/layerbuilder.js
@@ -26,7 +26,6 @@ import {
mergeBreakpointLayerAttributes,
formatReduxDate,
extractDateFromTileErrorURL,
- formatSelectedDate,
} from './util';
import { datesInDateRanges, prevDateInDateRange } from '../modules/layers/util';
import { updateLayerDateCollection, updateLayerCollection } from '../modules/layers/actions';
@@ -163,14 +162,12 @@ export default function mapLayerBuilder(config, cache, store) {
*/
const tileLoadFunction = (layer, layerDate) => async function(tile, src) {
const state = store.getState();
- const { ui: { isKioskModeActive }, date: { selected } } = state;
+ const { ui: { isKioskModeActive } } = state;
const date = layerDate.toISOString().split('T')[0];
const checkBlobTiles = (headers) => {
- // recently changed from appNow date to selected date, was previously only checking current day
- const formattedSelectedDate = formatSelectedDate(selected);
- if (isKioskModeActive && kioskCheckForBlankTilesList.includes(layer.id) && formattedSelectedDate === date) {
+ if (isKioskModeActive && kioskCheckForBlankTilesList.includes(layer.id)) {
errorTiles.kioskTileCount += 1;
const contentLength = headers.get('content-length');
const contentType = headers.get('content-type');
@@ -289,6 +286,11 @@ export default function mapLayerBuilder(config, cache, store) {
}
}
layer.setOpacity(opacity || 1.0);
+ if (breakPointLayer) {
+ layer.getLayersArray().forEach((l) => {
+ l.setOpacity(opacity || 1.0);
+ });
+ }
return layer;
};
diff --git a/web/js/map/natural-events/util.js b/web/js/map/natural-events/util.js
index 6d2d7a5b5b..315ea09c38 100644
--- a/web/js/map/natural-events/util.js
+++ b/web/js/map/natural-events/util.js
@@ -47,8 +47,13 @@ export const getTrackPoint = function(proj, clusterPoint, isSelected, callback)
};
textEl.appendChild(content);
textEl.appendChild(magnitudeContent);
- textEl.className = 'track-marker-date';
- if (!isSelected) {
+ if (isSelected) {
+ textEl.className = 'track-marker-date track-marker-date-selected';
+ setTimeout(() => {
+ textEl.className = 'track-marker-date';
+ }, 5000);
+ } else {
+ textEl.className = 'track-marker-date';
textEl.style.top = hasMagnitude ? '-40px' : '-28px';
}
circleEl.className = `track-marker track-marker-${date}`;
diff --git a/web/js/mapUI/components/kiosk/kiosk-animations/kiosk-animations.js b/web/js/mapUI/components/kiosk/kiosk-animations/kiosk-animations.js
index 8fcee0aa73..1ff0c10ab0 100644
--- a/web/js/mapUI/components/kiosk/kiosk-animations/kiosk-animations.js
+++ b/web/js/mapUI/components/kiosk/kiosk-animations/kiosk-animations.js
@@ -81,6 +81,7 @@ function KioskAnimations({ ui }) {
return date.toString();
};
+ // Invoked after tileError check is complete, this will trigger the animation availability check
const handleAnimationSettings = () => {
const start = updateStartTime(selectedDate);
const end = selectedDate;
diff --git a/web/js/mapUI/components/update-opacity/updateOpacity.js b/web/js/mapUI/components/update-opacity/updateOpacity.js
index 4803cfafc0..0c7be066fd 100644
--- a/web/js/mapUI/components/update-opacity/updateOpacity.js
+++ b/web/js/mapUI/components/update-opacity/updateOpacity.js
@@ -69,8 +69,11 @@ function UpdateOpacity(props) {
if (def.type === 'granule') {
updateGranuleLayerOpacity(def, activeString, opacity, compare);
} else {
- const layer = findLayer(def, activeString);
- layer.setOpacity(opacity);
+ const layerGroup = findLayer(def, activeString);
+ layerGroup.setOpacity(opacity);
+ layerGroup.getLayersArray().forEach((l) => {
+ l.setOpacity(opacity);
+ });
}
updateLayerVisibilities();
};
diff --git a/web/js/mapUI/components/update-projection/updateProjection.js b/web/js/mapUI/components/update-projection/updateProjection.js
index ec72e8db5b..1fb1b27ef9 100644
--- a/web/js/mapUI/components/update-projection/updateProjection.js
+++ b/web/js/mapUI/components/update-projection/updateProjection.js
@@ -280,7 +280,8 @@ function UpdateProjection(props) {
* @returns {void}
*/
function showMap(map) {
- document.getElementById(`${map.getTarget()}`).style.display = 'block';
+ const el = document.getElementById(`${map.getTarget()}`);
+ if (el) el.style.display = 'block';
}
/**
@@ -294,7 +295,8 @@ function UpdateProjection(props) {
* @returns {void}
*/
function hideMap(map) {
- document.getElementById(`${map.getTarget()}`).style.display = 'none';
+ const el = document.getElementById(`${map.getTarget()}`);
+ if (el) el.style.display = 'none';
}
diff --git a/web/js/modules/layers/reducers.js b/web/js/modules/layers/reducers.js
index 7e0bc83ac5..a956be58e4 100644
--- a/web/js/modules/layers/reducers.js
+++ b/web/js/modules/layers/reducers.js
@@ -159,12 +159,13 @@ export function layerReducer(state = initialState, action) {
};
case TOGGLE_LAYER_VISIBILITY:
+ if (getLayerIndex() === -1) return state;
return update(state, {
[compareState]: {
layers: {
[getLayerIndex()]: {
visible: {
- $set: action.visible,
+ $set: action?.visible,
},
},
},
diff --git a/web/js/modules/ui/actions.js b/web/js/modules/ui/actions.js
index d440814440..2b207d702c 100644
--- a/web/js/modules/ui/actions.js
+++ b/web/js/modules/ui/actions.js
@@ -7,6 +7,7 @@ import {
SET_ERROR_TILES,
DISPLAY_STATIC_MAP,
READY_FOR_KIOSK_ANIMATION,
+ CHECK_ANIMATION_AVAILABILITY,
} from './constants';
import { CLOSE as CLOSE_MODAL } from '../modal/constants';
@@ -30,6 +31,8 @@ export default function toggleDistractionFreeMode() {
};
}
+// Keeping this action for testing purposes.
+// Kiosk mode should always be activated through the permalink parameters.
export function toggleKioskMode(isActive) {
return {
type: TOGGLE_KIOSK_MODE,
@@ -37,6 +40,7 @@ export function toggleKioskMode(isActive) {
};
}
+// Layerbuilder tracks tile requests that return errors or blank tiles and dispatches this action for specific layers.
export function setErrorTiles(errorTiles) {
return {
type: SET_ERROR_TILES,
@@ -50,6 +54,8 @@ export function setErrorTiles(errorTiles) {
};
}
+// After each tile request we call this to clear the error tiles for the current date.
+// We want to preserve the lastCheckedDate value from the previous dispatched setErrorTiles action.
export function clearErrorTiles() {
return (dispatch, getState) => {
const { ui: { errorTiles: { lastCheckedDate } } } = getState();
@@ -74,6 +80,8 @@ export function clearErrorTiles() {
};
}
+// Dispatched when maximum date/time threshold is met when checking for error/blank tiles.
+// Displays a static image map stored locally in repo.
export function toggleStaticMap(isActive) {
return {
type: DISPLAY_STATIC_MAP,
@@ -81,9 +89,21 @@ export function toggleStaticMap(isActive) {
};
}
+// When kiosk mode is active && (eic === 'sa' || eic === 'da') this action is dispatched once we step the date back to full imagery.
+// This signals that the animation availability to ready to be checked.
export function toggleReadyForKioskAnimation(toggleAnimation) {
return {
type: READY_FOR_KIOSK_ANIMATION,
toggleAnimation,
};
}
+
+// When kiosk mode is active && (eic === 'sa' || eic === 'da') this action is dispatched once the animation has been triggered.
+// Once availability is measured and passes the threshold metric this action will dispatch.
+// This signals that the animation is ready to be played.
+export function toggleCheckedAnimationAvailability(toggleCheck) {
+ return {
+ type: CHECK_ANIMATION_AVAILABILITY,
+ toggleCheck,
+ };
+}
diff --git a/web/js/modules/ui/constants.js b/web/js/modules/ui/constants.js
index d6f2d71f14..8775e42db7 100644
--- a/web/js/modules/ui/constants.js
+++ b/web/js/modules/ui/constants.js
@@ -4,3 +4,4 @@ export const SET_ERROR_TILES = 'UI/SET_ERROR_TILES';
export const CLEAR_ERROR_TILES = 'UI/CLEAR_ERROR_TILES';
export const DISPLAY_STATIC_MAP = 'UI/DISPLAY_STATIC_MAP';
export const READY_FOR_KIOSK_ANIMATION = 'UI/READY_FOR_KIOSK_ANIMATION';
+export const CHECK_ANIMATION_AVAILABILITY = 'UI/CHECK_ANIMATION_AVAILABILITY';
diff --git a/web/js/modules/ui/reducers.js b/web/js/modules/ui/reducers.js
index 1696a7dd24..5dcab1f082 100644
--- a/web/js/modules/ui/reducers.js
+++ b/web/js/modules/ui/reducers.js
@@ -5,13 +5,14 @@ import {
DISPLAY_STATIC_MAP,
CLEAR_ERROR_TILES,
READY_FOR_KIOSK_ANIMATION,
+ CHECK_ANIMATION_AVAILABILITY,
} from './constants';
export const uiState = {
isDistractionFreeModeActive: false,
isKioskModeActive: false,
displayStaticMap: false,
- eic: '', // sa == subdaily-animation, da == daily-animation, ss== subdaily-static, ds == daily-static
+ eic: '', // 'sa' == subdaily-animation, 'da' == daily-animation
errorTiles: {
dailyTiles: [],
subdailyTiles: [],
@@ -20,6 +21,7 @@ export const uiState = {
lastCheckedDate: null,
},
readyForKioskAnimation: false,
+ animationAvailabilityChecked: false,
};
export default function uiReducers(state = uiState, action) {
@@ -58,8 +60,12 @@ export default function uiReducers(state = uiState, action) {
...state,
readyForKioskAnimation: action.toggleAnimation,
};
+ case CHECK_ANIMATION_AVAILABILITY:
+ return {
+ ...state,
+ animationAvailabilityChecked: action.toggleCheck,
+ };
default:
return state;
}
}
-
diff --git a/web/scss/components/list.scss b/web/scss/components/list.scss
index 48661329a0..eaa42237f6 100644
--- a/web/scss/components/list.scss
+++ b/web/scss/components/list.scss
@@ -2,6 +2,7 @@
background: #282828;
color: #eee;
text-align: left;
+ border: none;
}
.list-group-item.active {
diff --git a/web/scss/features/events.scss b/web/scss/features/events.scss
index 4887b86a2c..b01ab2c746 100644
--- a/web/scss/features/events.scss
+++ b/web/scss/features/events.scss
@@ -314,6 +314,12 @@
display: block;
}
+@media (any-hover: none) {
+ .track-marker-date-selected {
+ display: block;
+ }
+}
+
.cluster-marker:hover ~ .cluster-track-marker-date {
display: block;
}
diff --git a/web/scss/features/layers.scss b/web/scss/features/layers.scss
index ccec9f8f82..3db40afd8d 100644
--- a/web/scss/features/layers.scss
+++ b/web/scss/features/layers.scss
@@ -431,7 +431,7 @@
flex-direction: column;
}
- & .product-outter-list-case {
+ & .product-outer-list-case {
width: 100%;
padding: 0 4px;
}
@@ -835,7 +835,7 @@
margin: 0;
}
- &.browse-search-width .product-outter-list-case {
+ &.browse-search-width .product-outer-list-case {
width: 100%;
}
@@ -953,7 +953,7 @@
margin: 0;
}
- &.browse-search-width .product-outter-list-case {
+ &.browse-search-width .product-outer-list-case {
width: 100%;
}
@@ -1052,3 +1052,9 @@ a[rel="noreferrer"]:hover {
}
}
}
+
+.scrollable-layer-container {
+ overflow-y: scroll;
+ max-height: calc(100vh - 95px);
+ height: auto;
+}