@opengeoweb/core 4.8.0 → 4.9.1

package/index.esm.js

@@ -1327,7 +1327,7 @@ var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInter
   }
 };
 var getActiveLayerTimeStep = function getActiveLayerTimeStep(timeDimension) {
-  return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : null;
+  return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : undefined;
 };
 
 var utils = /*#__PURE__*/Object.freeze({
@@ -2943,11 +2943,11 @@ var layerStore = function layerStore(store) {
 
 
 var getLayerById = function getLayerById(store, layerId) {
-  if (store && store.layers && store.layers.byId[layerId]) {
+  if (layerId && store && store.layers && store.layers.byId[layerId]) {
     return store.layers.byId[layerId];
   }
 
-  return null;
+  return undefined;
 };
 /**
  * Retrieves all layers indexed by layerId
@@ -3847,7 +3847,7 @@ var getSyncSourceBySourceId = function getSyncSourceBySourceId(state, id) {
   return null;
 };
 
-var getTime = createSelector(getSyncSourceBySourceId, function (store) {
+createSelector(getSyncSourceBySourceId, function (store) {
   return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
 });
 
@@ -4714,7 +4714,7 @@ var initialState$2 = {
   allServicesEnabled: true,
   activeLayerInfo: {
     name: '',
-    text: '',
+    title: '',
     leaf: true,
     path: [],
     serviceName: ''
@@ -4930,7 +4930,7 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
         return filterId.toLowerCase().includes(searchLowercase);
       });
       var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayerText = (_b = layer.title) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
       var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
       var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
       var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
@@ -6480,7 +6480,7 @@ var PlayButton = function PlayButton(_ref) {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var animationIntervalDefault = 5;
-var connectRedux$5 = connect(function (store, props) {
+var connectRedux$3 = connect(function (store, props) {
   return {
     animationStartTime: getAnimationStartTime(store, props.mapId),
     animationEndTime: getAnimationEndTime$1(store, props.mapId),
@@ -6491,7 +6491,7 @@ var connectRedux$5 = connect(function (store, props) {
   mapStartAnimation: mapActions$1.mapStartAnimation,
   mapStopAnimation: mapActions$1.mapStopAnimation
 });
-var PlayButtonConnect = connectRedux$5(function (_ref) {
+var PlayButtonConnect = connectRedux$3(function (_ref) {
   var mapId = _ref.mapId,
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
@@ -8163,7 +8163,7 @@ function updateAnimation(mapId, maxValue) {
   }, _marked4$1);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, newTimeStep;
+  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -8226,38 +8226,43 @@ function setLayerDimensionsSaga(_ref4) {
 
         case 29:
           timeStep = _context5.sent;
+          _context5.next = 32;
+          return select(isTimestepAuto, mapId);
+
+        case 32:
+          isTimestepAuto$1 = _context5.sent;
 
-          if (!(isActiveLayer && timeStep === undefined && newTimeDimension)) {
-            _context5.next = 35;
+          if (!(isTimestepAuto$1 && isActiveLayer && timeStep === undefined && newTimeDimension)) {
+            _context5.next = 38;
             break;
           }
 
           newTimeStep = getActiveLayerTimeStep(newTimeDimension);
 
           if (!newTimeStep) {
-            _context5.next = 35;
+            _context5.next = 38;
             break;
           }
 
-          _context5.next = 35;
+          _context5.next = 38;
           return put(mapActions$1.setTimeStep({
             mapId: mapId,
             timeStep: newTimeStep
           }));
 
-        case 35:
+        case 38:
           if (!(isActiveLayer && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) {
-            _context5.next = 43;
+            _context5.next = 46;
             break;
           }
 
           if (isAnimating$1) {
-            _context5.next = 39;
+            _context5.next = 42;
             break;
           }
 
-          _context5.next = 39;
+          _context5.next = 42;
           return put(layerActions.layerChangeDimension({
             layerId: layerId,
             origin: LayerActionOrigin.setLayerDimensionSaga,
@@ -8267,39 +8272,39 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
 
-        case 39:
-          _context5.next = 41;
+        case 42:
+          _context5.next = 44;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 41:
-          _context5.next = 46;
+        case 44:
+          _context5.next = 49;
           break;
 
-        case 43:
+        case 46:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) {
-            _context5.next = 46;
+            _context5.next = 49;
             break;
           }
 
-          _context5.next = 46;
+          _context5.next = 49;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 46:
-          _context5.next = 51;
+        case 49:
+          _context5.next = 54;
           break;
 
-        case 48:
-          _context5.prev = 48;
+        case 51:
+          _context5.prev = 51;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 51:
+        case 54:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 48]]);
+  }, _marked5, null, [[1, 51]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
   var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
@@ -9016,8 +9021,8 @@ function layerSelectCloseInfoDialogSaga(_ref) {
           dialogInfo = _context2.sent;
 
           if (filteredLayers.map(function (layer) {
-            return layer.text;
-          }).includes(dialogInfo.text)) {
+            return layer.title;
+          }).includes(dialogInfo.title)) {
             _context2.next = 31;
             break;
           }
@@ -9840,7 +9845,7 @@ var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
       currentIndex: layers.length,
       extendedLayers: [].concat(_toConsumableArray(layers), [{
         name: layerName,
-        text: layerName,
+        title: layerName,
         leaf: true,
         path: []
       }])
@@ -9903,7 +9908,7 @@ var RenderLayers = function RenderLayers(_ref) {
   });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "Layer: ".concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.text),
+    tooltip: "Layer: ".concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectLayer'
@@ -9921,7 +9926,7 @@ var RenderLayers = function RenderLayers(_ref) {
     renderValue: function renderValue(value) {
       return extendedLayers.find(function (layer) {
         return layer.name === value;
-      }).text;
+      }).title;
     }
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
@@ -9935,7 +9940,7 @@ var RenderLayers = function RenderLayers(_ref) {
           marginLeft: '28px'
         }
       }
-    }, layerFromServiceLayers.text, currentIndex === layers.length && /*#__PURE__*/React.createElement(AlertIcon, {
+    }, layerFromServiceLayers.title, currentIndex === layers.length && /*#__PURE__*/React.createElement(AlertIcon, {
       severity: "error"
     }));
   }));
@@ -10386,7 +10391,7 @@ var LayerRow = function LayerRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, "Style"), layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
-    layerStyles: layer.styles,
+    layerStyles: [],
     currentLayerStyle: layer.style,
     onChangeLayerStyle: function onChangeLayerStyle(style) {
       onLayerChangeStyle({
@@ -10466,7 +10471,7 @@ var LayerRow = function LayerRow(_ref) {
     item: true,
     className: columnClasses.column3
   }, layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
-    layerStyles: layer.styles,
+    layerStyles: [],
     currentLayerStyle: layer.style,
     onChangeLayerStyle: function onChangeLayerStyle(style) {
       onLayerChangeStyle({
@@ -10800,7 +10805,7 @@ var recurseNodes = function recurseNodes(nodesToRecur) {
   var newLayerTreeObj = {
     leaf: nodesToRecur.leaf,
     name: nodesToRecur.name,
-    title: nodesToRecur.text,
+    title: nodesToRecur.title,
     path: nodesToRecur.path || [],
     children: [],
     keywords: nodesToRecur.keywords || [],
@@ -11110,7 +11115,7 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
   });
   var fullLayerName = ((_a = useSelector(function (store) {
     return getLayerFromService(store, layerService, layerName);
-  })) === null || _a === void 0 ? void 0 : _a.text) || '';
+  })) === null || _a === void 0 ? void 0 : _a.title) || '';
   var layers = useSelector(function (store) {
     return getLayersFromService$1(store, layerService);
   });
@@ -11779,7 +11784,7 @@ var WMSLayerTree = function WMSLayerTree(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$4 = connect(function (store, props) {
+var connectRedux$2 = connect(function (store, props) {
   return {
     loadedLayers: getMapLayers(store, props.mapId)
   };
@@ -11843,7 +11848,7 @@ var ConnectedTree = function ConnectedTree(_ref) {
   });
 };
 
-var WMSLayerTreeConnect = connectRedux$4(ConnectedTree);
+var WMSLayerTreeConnect = connectRedux$2(ConnectedTree);
 
 var preset = {
 	presetType: "mapPreset",
@@ -13409,7 +13414,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Title",
-    value: layer.text
+    value: layer.title
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Name",
     value: layer.name
@@ -13435,7 +13440,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     label: "Keywords",
     value: ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.join(', ')) || '-'
   }), /*#__PURE__*/React__default.createElement(LayerInfoLegend, {
-    title: layer.text,
+    title: layer.title,
     name: layer.name,
     dimensions: layer.dimensions,
     legendURL: ((_b = layer.styles) === null || _b === void 0 ? void 0 : _b.length) ? layer.styles[0].legendURL : undefined
@@ -13704,7 +13709,7 @@ var LayerListRow = function LayerListRow(_ref) {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React__default.createElement(SearchHighlight, {
-    text: layer.text,
+    text: layer.title,
     search: searchFilter
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -18188,34 +18193,6 @@ function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationSt
   };
 }
 
-function useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime) {
-  var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
-  React.useEffect(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Home' && mapIsActive) {
-        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
-      }
-
-      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
-        switch (event.code) {
-          case 'ArrowLeft':
-            setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
-            break;
-
-          case 'ArrowRight':
-            setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate);
-            break;
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
-}
-
 function convertStringTimeToUnix(time) {
   return time ? moment.utc(time).unix() : undefined;
 } // Explanation of props can be found here:
@@ -18237,8 +18214,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
       timeStep = _ref.timeStep,
-      _ref$mapIsActive = _ref.mapIsActive,
-      mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
       unfilteredSelectedTime = _ref.unfilteredSelectedTime,
       setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
       _ref$onSetNewDate = _ref.onSetNewDate,
@@ -18249,7 +18224,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       onSetAnimationStartTime = _ref$onSetAnimationSt === void 0 ? function () {} : _ref$onSetAnimationSt,
       _ref$onSetAnimationEn = _ref.onSetAnimationEndTime,
       onSetAnimationEndTime = _ref$onSetAnimationEn === void 0 ? function () {} : _ref$onSetAnimationEn;
-  useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime);
 
   var _useCanvasTarget = useCanvasTarget('mousedown'),
       _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
@@ -18728,7 +18702,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   }));
 };
 
-var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
+var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       var target = event.target;
@@ -18745,6 +18719,34 @@ var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsAc
   }, [mapIsActive, isVisible, onToggleTimeSlider]);
 };
 
+var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime, currentTime) {
+  var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Home' && mapIsActive) {
+        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
+      }
+
+      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
+        switch (event.code) {
+          case 'ArrowLeft':
+            setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
+            break;
+
+          case 'ArrowRight':
+            setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate);
+            break;
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
+};
+
 var defaultProps = {
   centerTime: moment.utc().startOf('day').hours(12).unix(),
   secondsPerPx: 5,
@@ -18761,9 +18763,17 @@ var TimeSlider = function TimeSlider(_ref) {
       mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
       _ref$isVisible = _ref.isVisible,
       isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+      timeStep = _ref.timeStep,
+      dataStartTime = _ref.dataStartTime,
+      dataEndTime = _ref.dataEndTime,
+      selectedTime = _ref.selectedTime,
+      currentTime = _ref.currentTime,
+      onSetNewDate = _ref.onSetNewDate,
+      onSetCenterTime = _ref.onSetCenterTime,
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
-  useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+  useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider);
+  useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime, currentTime);
 
   var _React$useState = React.useState(defaultProps.selectedTime),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18778,7 +18788,7 @@ var TimeSlider = function TimeSlider(_ref) {
     container: true,
     sx: {
       display: 'grid',
-      gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr) minmax(40px, 40px)',
+      gridTemplateColumns: '120px 1fr 40px',
       gridTemplateRows: TIME_SLIDER_LEGEND_HEIGHT,
       paddingBottom: 1,
       alignItems: 'center',
@@ -18804,7 +18814,6 @@ var TimeSlider = function TimeSlider(_ref) {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
     mapId: mapId,
-    mapIsActive: mapIsActive,
     unfilteredSelectedTime: unfilteredSelectedTime,
     setUnfilteredSelectedTime: setUnfilteredSelectedTime
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
@@ -18845,14 +18854,14 @@ var TimeSlider = function TimeSlider(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$3 = connect(function (store, props) {
+var connectRedux$1 = connect(function (store, props) {
   return {
     isAutoUpdating: isAutoUpdating(store, props.mapId)
   };
 }, {
   toggleAutoUpdate: mapActions$1.toggleAutoUpdate
 });
-var AutoUpdateButtonConnectComponent = connectRedux$3(function (_ref) {
+var AutoUpdateButtonConnectComponent = connectRedux$1(function (_ref) {
   var mapId = _ref.mapId,
       isAutoUpdating = _ref.isAutoUpdating,
       toggleAutoUpdate = _ref.toggleAutoUpdate;
@@ -18871,7 +18880,7 @@ var AutoUpdateButtonConnectComponent = connectRedux$3(function (_ref) {
     disabled: false
   });
 });
-var AutoUpdateButtonConnect = connectRedux$3(AutoUpdateButtonConnectComponent);
+var AutoUpdateButtonConnect = connectRedux$1(AutoUpdateButtonConnectComponent);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -19306,56 +19315,45 @@ var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
   });
 };
 
-var connectRedux$2 = connect(function (store, props) {
-  return {
-    layers: getMapLayers(store, props.mapId),
-    dimensions: getMapDimensions(store, props.mapId),
-    scale: getMapTimeSliderScale(store, props.mapId),
-    centerTime: getMapTimeSliderCenterTime(store, props.mapId),
-    secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
-    dataScaleToSecondsPerPx: getMapTimeSliderDataScaleToSecondsPerPx(store, props.mapId),
-    isAnimating: isAnimating(store, props.mapId),
-    timeStep: getMapTimeStep(store, props.mapId),
-    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
-    timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
-    animationStartTime: getAnimationStartTime(store, props.mapId),
-    animationEndTime: getAnimationEndTime$1(store, props.mapId),
-    activeWindowId: getActiveWindowId(store),
-    unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
-  };
-}, {
-  setTimeSliderUnfilteredSelectedTime: mapActions$1.setTimeSliderUnfilteredSelectedTime,
-  stopMapAnimation: mapActions$1.mapStopAnimation,
-  setTime: genericActions.setTime,
-  mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
-  mapSetTimeSliderSecondsPerPx: mapActions$1.setTimeSliderSecondsPerPx,
-  setAnimationStartTime: mapActions$1.setAnimationStartTime,
-  setAnimationEndTime: mapActions$1.setAnimationEndTime
-});
-
 var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   var sourceId = _ref.sourceId,
-      mapId = _ref.mapId,
-      dimensions = _ref.dimensions,
-      scale = _ref.scale,
-      centerTime = _ref.centerTime,
-      secondsPerPx = _ref.secondsPerPx,
-      dataScaleToSecondsPerPx = _ref.dataScaleToSecondsPerPx,
-      layers = _ref.layers,
-      isAnimating = _ref.isAnimating,
-      timeStep = _ref.timeStep,
-      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
-      animationStartTime = _ref.animationStartTime,
-      animationEndTime = _ref.animationEndTime,
-      activeWindowId = _ref.activeWindowId,
-      stopMapAnimation = _ref.stopMapAnimation,
-      setTime = _ref.setTime,
-      mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime,
-      mapSetTimeSliderSecondsPerPx = _ref.mapSetTimeSliderSecondsPerPx,
-      setAnimationStartTime = _ref.setAnimationStartTime,
-      setAnimationEndTime = _ref.setAnimationEndTime,
-      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
-      setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime;
+      mapId = _ref.mapId;
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+  var scale = useSelector(function (store) {
+    return getMapTimeSliderScale(store, mapId);
+  });
+  var centerTime = useSelector(function (store) {
+    return getMapTimeSliderCenterTime(store, mapId);
+  });
+  var secondsPerPx = useSelector(function (store) {
+    return getMapTimeSliderSecondsPerPx(store, mapId);
+  });
+  var dataScaleToSecondsPerPx = useSelector(function (store) {
+    return getMapTimeSliderDataScaleToSecondsPerPx(store, mapId);
+  });
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var isTimeSliderHoverOn$1 = useSelector(function (store) {
+    return isTimeSliderHoverOn(store, mapId);
+  });
+  var animationStartTime = useSelector(function (store) {
+    return getAnimationStartTime(store, mapId);
+  });
+  var animationEndTime = useSelector(function (store) {
+    return getAnimationEndTime$1(store, mapId);
+  });
+  var unfilteredSelectedTime = useSelector(function (store) {
+    return getTimeSliderUnfilteredSelectedTime(store, mapId);
+  });
 
   var _getTimeBounds = getTimeBounds(dimensions),
       selectedTime = _getTimeBounds.selectedTime;
@@ -19367,7 +19365,7 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       dataStartTime = _getDataLimitsFromLay2[0],
       dataEndTime = _getDataLimitsFromLay2[1];
 
-  var mapIsActive = mapId === activeWindowId;
+  var dispatch = useDispatch();
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
     mapId: mapId,
     centerTime: centerTime,
@@ -19376,76 +19374,64 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     selectedTime: selectedTime,
     scale: scale,
     currentTime: currentTime,
-    isTimeSliderHoverOn: isTimeSliderHoverOn,
+    isTimeSliderHoverOn: isTimeSliderHoverOn$1,
     dataStartTime: dataStartTime,
     dataEndTime: dataEndTime,
     animationStartTime: animationStartTime,
     animationEndTime: animationEndTime,
     timeStep: timeStep,
-    mapIsActive: mapIsActive,
     unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
     setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
-      if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
+      dispatch(mapActions$1.setTimeSliderUnfilteredSelectedTime({
         timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
         mapId: mapId
-      });
+      }));
     },
     onSetNewDate: function onSetNewDate(newDate) {
-      if (isAnimating) {
-        stopMapAnimation({
+      if (isAnimating$1) {
+        dispatch(mapActions$1.mapStopAnimation({
           mapId: mapId
-        });
+        }));
       }
 
-      setTime({
+      dispatch(genericActions.setTime({
         sourceId: sourceId,
         origin: 'TimeSliderConnect, 139',
         value: handleMomentISOString(newDate)
-      });
+      }));
     },
     onSetCenterTime: function onSetCenterTime(newTime) {
-      mapSetTimeSliderCenterTime({
+      dispatch(mapActions$1.setTimeSliderCenterTime({
         mapId: mapId,
         timeSliderCenterTime: newTime
-      });
+      }));
     },
     onZoom: function onZoom(newSecondsPerPx, newCenterTime) {
-      mapSetTimeSliderSecondsPerPx({
+      dispatch(mapActions$1.setTimeSliderSecondsPerPx({
         mapId: mapId,
         timeSliderSecondsPerPx: newSecondsPerPx
-      });
-      mapSetTimeSliderCenterTime({
+      }));
+      dispatch(mapActions$1.setTimeSliderCenterTime({
         mapId: mapId,
         timeSliderCenterTime: newCenterTime
-      });
+      }));
     },
     onSetAnimationStartTime: function onSetAnimationStartTime(animationStartTime) {
-      setAnimationStartTime({
+      dispatch(mapActions$1.setAnimationStartTime({
         mapId: mapId,
         animationStartTime: animationStartTime
-      });
+      }));
     },
     onSetAnimationEndTime: function onSetAnimationEndTime(animationEndTime) {
-      setAnimationEndTime({
+      dispatch(mapActions$1.setAnimationEndTime({
         mapId: mapId,
         animationEndTime: animationEndTime
-      });
+      }));
     }
   });
 };
-/**
- * TimeSliderLegend component connected to the store displaying a legend of the time slider
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @example
- * ``` <TimeSliderLegendConnect mapId={mapId} />```
- */
-
-
-var TimeSliderLegendConnect$1 = connectRedux$2(TimeSliderLegendConnect);
 
-var connectRedux$1 = connect(function (store, props) {
+var connectRedux = connect(function (store, props) {
   return {
     layers: getMapLayers(store, props.mapId),
     dimensions: getMapDimensions(store, props.mapId),
@@ -19516,56 +19502,56 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
   });
 };
 
-var TimeSliderCurrentTimeBoxConnect = connectRedux$1(TimeSliderCurrentTimeBoxConnectComponent);
+var TimeSliderCurrentTimeBoxConnect = connectRedux(TimeSliderCurrentTimeBoxConnectComponent);
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-var connectRedux = connect(function (store, props) {
-  return {
-    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
-    activeWindowId: getActiveWindowId(store),
-    isTimeSliderVisible: isTimeSliderVisible(store, props.mapId)
-  };
-}, {
-  toggleTimeSliderHover: mapActions$1.toggleTimeSliderHover,
-  toggleTimeSliderIsVisible: mapActions$1.toggleTimeSliderIsVisible
-});
+var useUpdateTimestep = function useUpdateTimestep(mapId) {
+  var activeLayerId = useSelector(function (store) {
+    return getActiveLayerId(store, mapId);
+  });
+  var isTimeStepAuto = useSelector(function (store) {
+    return isTimestepAuto(store, mapId);
+  });
+  var timeDimension = useSelector(function (store) {
+    return getLayerTimeDimension(store, activeLayerId);
+  });
+  var dispatch = useDispatch();
+  React.useEffect(function () {
+    if (isTimeStepAuto) {
+      var timeStep = getActiveLayerTimeStep(timeDimension);
+      dispatch(mapActions$1.setTimeStep({
+        mapId: mapId,
+        timeStep: timeStep
+      }));
+    }
+  }, [activeLayerId, dispatch, isTimeStepAuto, mapId, timeDimension]);
+};
 
-var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
+var TimeSliderConnect = function TimeSliderConnect(_ref) {
   var sourceId = _ref.sourceId,
       mapId = _ref.mapId,
-      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
-      toggleTimeSliderHover = _ref.toggleTimeSliderHover,
-      activeWindowId = _ref.activeWindowId,
-      isTimeSliderVisible = _ref.isTimeSliderVisible,
-      toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible,
       _ref$isAlwaysVisible = _ref.isAlwaysVisible,
       isAlwaysVisible = _ref$isAlwaysVisible === void 0 ? false : _ref$isAlwaysVisible;
-  // don't use redux state if isAlwaysVisible
-  var isVisible = isAlwaysVisible || isTimeSliderVisible;
-  var mapIsActive = mapId === activeWindowId; // TODO: move keyboard logic to TimeSlider.tsx
+  var isTimeSliderHoverOn$1 = useSelector(function (store) {
+    return isTimeSliderHoverOn(store, mapId);
+  });
+  var activeWindowId = useSelector(function (store) {
+    return getActiveWindowId(store);
+  });
+  var isTimeSliderVisible$1 = useSelector(function (store) {
+    return isTimeSliderVisible(store, mapId);
+  }); // don't use redux state if isAlwaysVisible
+
+  var isVisible = isAlwaysVisible || isTimeSliderVisible$1;
+  var mapIsActive = mapId === activeWindowId;
+  var dispatch = useDispatch(); // TODO: move keyboard logic to TimeSlider.tsx
 
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.ctrlKey && event.altKey && event.key === 'h') {
-        toggleTimeSliderHover({
+        dispatch(mapActions$1.toggleTimeSliderHover({
           mapId: mapId,
-          isTimeSliderHoverOn: !isTimeSliderHoverOn
-        });
+          isTimeSliderHoverOn: !isTimeSliderHoverOn$1
+        }));
       }
     };
 
@@ -19573,17 +19559,64 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [mapId, isTimeSliderHoverOn, toggleTimeSliderHover]);
+  }, [mapId, isTimeSliderHoverOn$1, dispatch]);
 
   var onToggleTimeSliderVisibility = function onToggleTimeSliderVisibility(isTimeSliderVisible) {
-    toggleTimeSliderIsVisible({
+    dispatch(mapActions$1.toggleTimeSliderIsVisible({
       mapId: mapId,
       isTimeSliderVisible: isTimeSliderVisible,
       origin: MapActionOrigin.map
-    });
+    }));
   };
 
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+
+  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
+      _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
+      dataStartTime = _getDataLimitsFromLay2[0],
+      dataEndTime = _getDataLimitsFromLay2[1];
+
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+
+  var _getTimeBounds = getTimeBounds(dimensions),
+      selectedTime = _getTimeBounds.selectedTime;
+
+  useUpdateTimestep(mapId);
   return /*#__PURE__*/React.createElement(TimeSlider, {
+    currentTime: moment.utc().unix(),
+    timeStep: timeStep,
+    dataStartTime: dataStartTime,
+    dataEndTime: dataEndTime,
+    onSetNewDate: function onSetNewDate(newDate) {
+      if (isAnimating$1) {
+        dispatch(mapActions$1.mapStopAnimation({
+          mapId: mapId
+        }));
+      }
+
+      dispatch(genericActions.setTime({
+        sourceId: sourceId,
+        value: handleMomentISOString(newDate),
+        origin: ''
+      }));
+    },
+    onSetCenterTime: function onSetCenterTime(newTime) {
+      dispatch(mapActions$1.setTimeSliderCenterTime({
+        mapId: mapId,
+        timeSliderCenterTime: newTime
+      }));
+    },
+    selectedTime: selectedTime,
     mapId: mapId,
     buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
       mapId: mapId,
@@ -19593,7 +19626,7 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
       mapId: mapId,
       sourceId: sourceId
     }),
-    legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect$1, {
+    legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect, {
       mapId: mapId,
       sourceId: sourceId
     }),
@@ -19602,18 +19635,6 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
     isVisible: isVisible
   });
 };
-/**
- * TimeSlider component with components connected to the store displaying the time slider
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @param {string} sourceId sourceId: string - Source Id of the timeslider
- * @example
- * ``` <TimeSliderConnect sourceId="timeslider-1" mapId={mapId} />```
- */
-
-
-var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26327,4 +26348,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$2 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, TimeSliderUtils as timeSliderUtils, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$2 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, TimeSliderUtils as timeSliderUtils, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };