@opengeoweb/core 4.8.0 → 4.9.1

package/index.umd.js

@@ -1172,7 +1172,7 @@
       }
     };
     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({
@@ -2838,11 +2838,11 @@
 
 
     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
@@ -3742,7 +3742,7 @@
       return null;
     };
 
-    var getTime = toolkit.createSelector(getSyncSourceBySourceId, function (store) {
+    toolkit.createSelector(getSyncSourceBySourceId, function (store) {
       return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
     });
 
@@ -4642,7 +4642,7 @@
       allServicesEnabled: true,
       activeLayerInfo: {
         name: '',
-        text: '',
+        title: '',
         leaf: true,
         path: [],
         serviceName: ''
@@ -4868,7 +4868,7 @@
             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;
@@ -6563,7 +6563,7 @@
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
     var animationIntervalDefault = 5;
-    var connectRedux$5 = reactRedux.connect(function (store, props) {
+    var connectRedux$3 = reactRedux.connect(function (store, props) {
       return {
         animationStartTime: getAnimationStartTime(store, props.mapId),
         animationEndTime: getAnimationEndTime$1(store, props.mapId),
@@ -6574,7 +6574,7 @@
       mapStartAnimation: mapActions$1.mapStartAnimation,
       mapStopAnimation: mapActions$1.mapStopAnimation
     });
-    var PlayButtonConnect = connectRedux$5(function (_a) {
+    var PlayButtonConnect = connectRedux$3(function (_a) {
       var mapId = _a.mapId,
           animationStartTime = _a.animationStartTime,
           animationEndTime = _a.animationEndTime,
@@ -8300,12 +8300,12 @@
       });
     }
     function setLayerDimensionsSaga(_a) {
-      var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, newTimeStep, error_1;
+      var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep, error_1;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            _b.trys.push([0, 15,, 16]);
+            _b.trys.push([0, 16,, 17]);
 
             layerDimensions = payload.layerDimensions;
             if (!layerDimensions) return [2
@@ -8357,13 +8357,19 @@
 
           case 6:
             timeStep = _b.sent();
-            if (!(isActiveLayer && timeStep === undefined && newTimeDimension)) return [3
+            return [4
+            /*yield*/
+            , effects.select(isTimestepAuto, mapId)];
+
+          case 7:
+            isTimestepAuto$1 = _b.sent();
+            if (!(isTimestepAuto$1 && isActiveLayer && timeStep === undefined && newTimeDimension)) return [3
             /*break*/
-            , 8];
+            , 9];
             newTimeStep = getActiveLayerTimeStep(newTimeDimension);
             if (!newTimeStep) return [3
             /*break*/
-            , 8];
+            , 9];
             return [4
             /*yield*/
             , effects.put(mapActions$1.setTimeStep({
@@ -8371,19 +8377,19 @@
               timeStep: newTimeStep
             }))];
 
-          case 7:
+          case 8:
             _b.sent();
 
-            _b.label = 8;
+            _b.label = 9;
 
-          case 8:
+          case 9:
             if (!(isActiveLayer && // only update the active layer
             shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) return [3
             /*break*/
-            , 12];
+            , 13];
             if (!!isAnimating$1) return [3
             /*break*/
-            , 10];
+            , 11];
             return [4
             /*yield*/
             , effects.put(layerActions.layerChangeDimension({
@@ -8395,50 +8401,50 @@
               }
             }))];
 
-          case 9:
+          case 10:
             _b.sent();
 
-            _b.label = 10;
+            _b.label = 11;
 
-          case 10:
+          case 11:
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-          case 11:
+          case 12:
             _b.sent();
 
             return [3
             /*break*/
-            , 14];
+            , 15];
 
-          case 12:
+          case 13:
             if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) return [3
             /*break*/
-            , 14];
+            , 15];
             return [4
             /*yield*/
             , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-          case 13:
+          case 14:
             _b.sent();
 
-            _b.label = 14;
+            _b.label = 15;
 
-          case 14:
+          case 15:
             return [3
             /*break*/
-            , 16];
+            , 17];
 
-          case 15:
+          case 16:
             error_1 = _b.sent(); // eslint-disable-next-line no-console
 
             console.warn(error_1);
             return [3
             /*break*/
-            , 16];
+            , 17];
 
-          case 16:
+          case 17:
             return [2
             /*return*/
             ];
@@ -9308,8 +9314,8 @@
           case 11:
             dialogInfo = _c.sent();
             if (!!filteredLayers.map(function (layer) {
-              return layer.text;
-            }).includes(dialogInfo.text)) return [3
+              return layer.title;
+            }).includes(dialogInfo.title)) return [3
             /*break*/
             , 13];
             return [4
@@ -10238,7 +10244,7 @@
           currentIndex: layers.length,
           extendedLayers: __spreadArray(__spreadArray([], __read(layers)), [{
             name: layerName,
-            text: layerName,
+            title: layerName,
             leaf: true,
             path: []
           }])
@@ -10301,7 +10307,7 @@
       });
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
         disableUnderline: true,
-        tooltip: "Layer: " + ((_b = extendedLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.text),
+        tooltip: "Layer: " + ((_b = extendedLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
         inputProps: {
           SelectDisplayProps: {
             'data-testid': 'selectLayer'
@@ -10319,7 +10325,7 @@
         renderValue: function renderValue(value) {
           return extendedLayers.find(function (layer) {
             return layer.name === value;
-          }).text;
+          }).title;
         }
       }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true
@@ -10333,7 +10339,7 @@
               marginLeft: '28px'
             }
           }
-        }, layerFromServiceLayers.text, currentIndex === layers.length && /*#__PURE__*/React__namespace.createElement(shared.AlertIcon, {
+        }, layerFromServiceLayers.title, currentIndex === layers.length && /*#__PURE__*/React__namespace.createElement(shared.AlertIcon, {
           severity: "error"
         }));
       }));
@@ -10798,7 +10804,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, "Style"), layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
-        layerStyles: layer.styles,
+        layerStyles: [],
         currentLayerStyle: layer.style,
         onChangeLayerStyle: function onChangeLayerStyle(style) {
           onLayerChangeStyle({
@@ -10878,7 +10884,7 @@
         item: true,
         className: columnClasses.column3
       }, layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
-        layerStyles: layer.styles,
+        layerStyles: [],
         currentLayerStyle: layer.style,
         onChangeLayerStyle: function onChangeLayerStyle(style) {
           onLayerChangeStyle({
@@ -11212,7 +11218,7 @@
       var newLayerTreeObj = {
         leaf: nodesToRecur.leaf,
         name: nodesToRecur.name,
-        title: nodesToRecur.text,
+        title: nodesToRecur.title,
         path: nodesToRecur.path || [],
         children: [],
         keywords: nodesToRecur.keywords || [],
@@ -11530,7 +11536,7 @@
       });
       var fullLayerName = ((_b = reactRedux.useSelector(function (store) {
         return getLayerFromService(store, layerService, layerName);
-      })) === null || _b === void 0 ? void 0 : _b.text) || '';
+      })) === null || _b === void 0 ? void 0 : _b.title) || '';
       var layers = reactRedux.useSelector(function (store) {
         return getLayersFromService$1(store, layerService);
       });
@@ -12244,7 +12250,7 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux$4 = reactRedux.connect(function (store, props) {
+    var connectRedux$2 = reactRedux.connect(function (store, props) {
       return {
         loadedLayers: getMapLayers(store, props.mapId)
       };
@@ -12308,7 +12314,7 @@
       });
     };
 
-    var WMSLayerTreeConnect = connectRedux$4(ConnectedTree);
+    var WMSLayerTreeConnect = connectRedux$2(ConnectedTree);
 
     var preset = {
     	presetType: "mapPreset",
@@ -13951,7 +13957,7 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
         label: "Title",
-        value: layer.text
+        value: layer.title
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
         label: "Name",
         value: layer.name
@@ -13977,7 +13983,7 @@
         label: "Keywords",
         value: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.join(', ')) || '-'
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoLegend, {
-        title: layer.text,
+        title: layer.title,
         name: layer.name,
         dimensions: layer.dimensions,
         legendURL: ((_c = layer.styles) === null || _c === void 0 ? void 0 : _c.length) ? layer.styles[0].legendURL : undefined
@@ -14263,7 +14269,7 @@
           overflow: 'hidden'
         }
       }, /*#__PURE__*/React__default["default"].createElement(SearchHighlight, {
-        text: layer.text,
+        text: layer.title,
         search: searchFilter
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -19004,34 +19010,6 @@
       };
     }
 
-    function useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime) {
-      var curTime = selectedTime !== undefined ? moment__default["default"].unix(selectedTime).toISOString() : moment__default["default"].utc().toISOString();
-      React__namespace.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__default["default"].utc(time).unix() : undefined;
     } // Explanation of props can be found here:
@@ -19053,54 +19031,51 @@
           animationStartTime = _a.animationStartTime,
           animationEndTime = _a.animationEndTime,
           timeStep = _a.timeStep,
-          _d = _a.mapIsActive,
-          mapIsActive = _d === void 0 ? true : _d,
           unfilteredSelectedTime = _a.unfilteredSelectedTime,
           setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime,
-          _e = _a.onSetNewDate,
-          onSetNewDate = _e === void 0 ? function () {} : _e,
-          _f = _a.onSetCenterTime,
-          onSetCenterTime = _f === void 0 ? function () {} : _f,
-          _g = _a.onSetAnimationStartTime,
-          onSetAnimationStartTime = _g === void 0 ? function () {} : _g,
-          _h = _a.onSetAnimationEndTime,
-          onSetAnimationEndTime = _h === void 0 ? function () {} : _h;
-      useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime);
-
-      var _j = __read(useCanvasTarget('mousedown'), 2),
-          node = _j[1];
-
-      var _k = __read(React__namespace.useState(0), 2),
-          canvasWidth = _k[0],
-          setCanvasWidth = _k[1];
+          _d = _a.onSetNewDate,
+          onSetNewDate = _d === void 0 ? function () {} : _d,
+          _e = _a.onSetCenterTime,
+          onSetCenterTime = _e === void 0 ? function () {} : _e,
+          _f = _a.onSetAnimationStartTime,
+          onSetAnimationStartTime = _f === void 0 ? function () {} : _f,
+          _g = _a.onSetAnimationEndTime,
+          onSetAnimationEndTime = _g === void 0 ? function () {} : _g;
+
+      var _h = __read(useCanvasTarget('mousedown'), 2),
+          node = _h[1];
+
+      var _j = __read(React__namespace.useState(0), 2),
+          canvasWidth = _j[0],
+          setCanvasWidth = _j[1];
+
+      var _k = __read(React__namespace.useState(false), 2),
+          selectedTimeDragging = _k[0],
+          setSelectedTimeDragging = _k[1];
 
       var _l = __read(React__namespace.useState(false), 2),
-          selectedTimeDragging = _l[0],
-          setSelectedTimeDragging = _l[1];
+          leftMarkerDragging = _l[0],
+          setLeftMarkerDragging = _l[1];
 
       var _m = __read(React__namespace.useState(false), 2),
-          leftMarkerDragging = _m[0],
-          setLeftMarkerDragging = _m[1];
+          rightMarkerDragging = _m[0],
+          setRightMarkerDragging = _m[1];
 
       var _o = __read(React__namespace.useState(false), 2),
-          rightMarkerDragging = _o[0],
-          setRightMarkerDragging = _o[1];
+          dragTooltipOpen = _o[0],
+          setDragTooltipOpen = _o[1];
 
       var _p = __read(React__namespace.useState(false), 2),
-          dragTooltipOpen = _p[0],
-          setDragTooltipOpen = _p[1];
+          mouseDownInLegend = _p[0],
+          setMouseDownInLegend = _p[1];
 
       var _q = __read(React__namespace.useState(false), 2),
-          mouseDownInLegend = _q[0],
-          setMouseDownInLegend = _q[1];
+          animationAreaDragging = _q[0],
+          setAnimationAreaDragging = _q[1];
 
-      var _r = __read(React__namespace.useState(false), 2),
-          animationAreaDragging = _r[0],
-          setAnimationAreaDragging = _r[1];
-
-      var _s = __read(React__namespace.useState('auto'), 2),
-          cursorStyle = _s[0],
-          setCursorStyle = _s[1];
+      var _r = __read(React__namespace.useState('auto'), 2),
+          cursorStyle = _r[0],
+          setCursorStyle = _r[1];
       /**
        * remove active drag. can happen outside canvas.
        */
@@ -19129,14 +19104,14 @@
       var timeSliderLegendElement = document.querySelector("." + timeSliderLegendId);
       var pixelsToLeft = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
 
-      var _t = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
-          tooltipTime = _t[0],
-          setTooltipTime = _t[1];
+      var _s = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
+          tooltipTime = _s[0],
+          setTooltipTime = _s[1];
 
-      var _u = useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition),
-          handleAnimationDragging = _u.handleAnimationDragging,
-          localAnimationEndTime = _u.localAnimationEndTime,
-          localAnimationStartTime = _u.localAnimationStartTime;
+      var _t = useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition),
+          handleAnimationDragging = _t.handleAnimationDragging,
+          localAnimationEndTime = _t.localAnimationEndTime,
+          localAnimationStartTime = _t.localAnimationStartTime;
 
       var setSelectedTime = React.useCallback(function (x) {
         var unfliteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + x;
@@ -19578,7 +19553,7 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
+    var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider) {
       React__namespace.useEffect(function () {
         var handleKeyDown = function handleKeyDown(event) {
           var target = event.target;
@@ -19595,6 +19570,34 @@
       }, [mapIsActive, isVisible, onToggleTimeSlider]);
     };
 
+    var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime, currentTime) {
+      var curTime = selectedTime !== undefined ? moment__default["default"].unix(selectedTime).toISOString() : moment__default["default"].utc().toISOString();
+      React__namespace.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__default["default"].utc().startOf('day').hours(12).unix(),
       secondsPerPx: 5,
@@ -19611,9 +19614,17 @@
           mapIsActive = _b === void 0 ? true : _b,
           _c = _a.isVisible,
           isVisible = _c === void 0 ? true : _c,
+          timeStep = _a.timeStep,
+          dataStartTime = _a.dataStartTime,
+          dataEndTime = _a.dataEndTime,
+          selectedTime = _a.selectedTime,
+          currentTime = _a.currentTime,
+          onSetNewDate = _a.onSetNewDate,
+          onSetCenterTime = _a.onSetCenterTime,
           _d = _a.onToggleTimeSlider,
           onToggleTimeSlider = _d === void 0 ? function () {} : _d;
-      useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+      useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider);
+      useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime, currentTime);
 
       var _e = __read(React__namespace.useState(defaultProps.selectedTime), 2),
           unfilteredSelectedTime = _e[0],
@@ -19627,7 +19638,7 @@
         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',
@@ -19653,7 +19664,6 @@
         item: true
       }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
         mapId: mapId,
-        mapIsActive: mapIsActive,
         unfilteredSelectedTime: unfilteredSelectedTime,
         setUnfilteredSelectedTime: setUnfilteredSelectedTime
       })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -19694,14 +19704,14 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux$3 = reactRedux.connect(function (store, props) {
+    var connectRedux$1 = reactRedux.connect(function (store, props) {
       return {
         isAutoUpdating: isAutoUpdating(store, props.mapId)
       };
     }, {
       toggleAutoUpdate: mapActions$1.toggleAutoUpdate
     });
-    var AutoUpdateButtonConnectComponent = connectRedux$3(function (_a) {
+    var AutoUpdateButtonConnectComponent = connectRedux$1(function (_a) {
       var mapId = _a.mapId,
           isAutoUpdating = _a.isAutoUpdating,
           toggleAutoUpdate = _a.toggleAutoUpdate;
@@ -19720,7 +19730,7 @@
         disabled: false
       });
     });
-    var AutoUpdateButtonConnect = connectRedux$3(AutoUpdateButtonConnectComponent);
+    var AutoUpdateButtonConnect = connectRedux$1(AutoUpdateButtonConnectComponent);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20201,56 +20211,46 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux$2 = reactRedux.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(_a) {
       var sourceId = _a.sourceId,
-          mapId = _a.mapId,
-          dimensions = _a.dimensions,
-          scale = _a.scale,
-          centerTime = _a.centerTime,
-          secondsPerPx = _a.secondsPerPx,
-          dataScaleToSecondsPerPx = _a.dataScaleToSecondsPerPx,
-          layers = _a.layers,
-          isAnimating = _a.isAnimating,
-          timeStep = _a.timeStep,
-          isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
-          animationStartTime = _a.animationStartTime,
-          animationEndTime = _a.animationEndTime,
-          activeWindowId = _a.activeWindowId,
-          stopMapAnimation = _a.stopMapAnimation,
-          setTime = _a.setTime,
-          mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime,
-          mapSetTimeSliderSecondsPerPx = _a.mapSetTimeSliderSecondsPerPx,
-          setAnimationStartTime = _a.setAnimationStartTime,
-          setAnimationEndTime = _a.setAnimationEndTime,
-          unfilteredSelectedTime = _a.unfilteredSelectedTime,
-          setTimeSliderUnfilteredSelectedTime = _a.setTimeSliderUnfilteredSelectedTime;
+          mapId = _a.mapId;
+      var layers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+      var dimensions = reactRedux.useSelector(function (store) {
+        return getMapDimensions(store, mapId);
+      });
+      var scale = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderScale(store, mapId);
+      });
+      var centerTime = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderCenterTime(store, mapId);
+      });
+      var secondsPerPx = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderSecondsPerPx(store, mapId);
+      });
+      var dataScaleToSecondsPerPx = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderDataScaleToSecondsPerPx(store, mapId);
+      });
+      var isAnimating$1 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+      var timeStep = reactRedux.useSelector(function (store) {
+        return getMapTimeStep(store, mapId);
+      });
+      var isTimeSliderHoverOn$1 = reactRedux.useSelector(function (store) {
+        return isTimeSliderHoverOn(store, mapId);
+      });
+      var animationStartTime = reactRedux.useSelector(function (store) {
+        return getAnimationStartTime(store, mapId);
+      });
+      var animationEndTime = reactRedux.useSelector(function (store) {
+        return getAnimationEndTime$1(store, mapId);
+      });
+      var unfilteredSelectedTime = reactRedux.useSelector(function (store) {
+        return getTimeSliderUnfilteredSelectedTime(store, mapId);
+      });
       var selectedTime = getTimeBounds(dimensions).selectedTime;
       var currentTime = moment__default["default"].utc().unix();
 
@@ -20258,7 +20258,7 @@
           dataStartTime = _b[0],
           dataEndTime = _b[1];
 
-      var mapIsActive = mapId === activeWindowId;
+      var dispatch = reactRedux.useDispatch();
       return /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, {
         mapId: mapId,
         centerTime: centerTime,
@@ -20267,74 +20267,62 @@
         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);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20352,7 +20340,7 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux$1 = reactRedux.connect(function (store, props) {
+    var connectRedux = reactRedux.connect(function (store, props) {
       return {
         layers: getMapLayers(store, props.mapId),
         dimensions: getMapDimensions(store, props.mapId),
@@ -20420,7 +20408,7 @@
       });
     };
 
-    var TimeSliderCurrentTimeBoxConnect = connectRedux$1(TimeSliderCurrentTimeBoxConnectComponent);
+    var TimeSliderCurrentTimeBoxConnect = connectRedux(TimeSliderCurrentTimeBoxConnectComponent);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20438,38 +20426,54 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux = reactRedux.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 = reactRedux.useSelector(function (store) {
+        return getActiveLayerId(store, mapId);
+      });
+      var isTimeStepAuto = reactRedux.useSelector(function (store) {
+        return isTimestepAuto(store, mapId);
+      });
+      var timeDimension = reactRedux.useSelector(function (store) {
+        return getLayerTimeDimension(store, activeLayerId);
+      });
+      var dispatch = reactRedux.useDispatch();
+      React__namespace.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(_a) {
+    var TimeSliderConnect = function TimeSliderConnect(_a) {
       var sourceId = _a.sourceId,
           mapId = _a.mapId,
-          isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
-          toggleTimeSliderHover = _a.toggleTimeSliderHover,
-          activeWindowId = _a.activeWindowId,
-          isTimeSliderVisible = _a.isTimeSliderVisible,
-          toggleTimeSliderIsVisible = _a.toggleTimeSliderIsVisible,
           _b = _a.isAlwaysVisible,
-          isAlwaysVisible = _b === void 0 ? false : _b; // don't use redux state if isAlwaysVisible
+          isAlwaysVisible = _b === void 0 ? false : _b;
+      var isTimeSliderHoverOn$1 = reactRedux.useSelector(function (store) {
+        return isTimeSliderHoverOn(store, mapId);
+      });
+      var activeWindowId = reactRedux.useSelector(function (store) {
+        return getActiveWindowId(store);
+      });
+      var isTimeSliderVisible$1 = reactRedux.useSelector(function (store) {
+        return isTimeSliderVisible(store, mapId);
+      }); // don't use redux state if isAlwaysVisible
 
-      var isVisible = isAlwaysVisible || isTimeSliderVisible;
-      var mapIsActive = mapId === activeWindowId; // TODO: move keyboard logic to TimeSlider.tsx
+      var isVisible = isAlwaysVisible || isTimeSliderVisible$1;
+      var mapIsActive = mapId === activeWindowId;
+      var dispatch = reactRedux.useDispatch(); // TODO: move keyboard logic to TimeSlider.tsx
 
       React__namespace.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
+            }));
           }
         };
 
@@ -20477,17 +20481,60 @@
         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 = reactRedux.useSelector(function (store) {
+        return getMapTimeStep(store, mapId);
+      });
+      var layers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+
+      var _c = __read(getDataLimitsFromLayers(layers), 2),
+          dataStartTime = _c[0],
+          dataEndTime = _c[1];
+
+      var isAnimating$1 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+      var dimensions = reactRedux.useSelector(function (store) {
+        return getMapDimensions(store, mapId);
+      });
+      var selectedTime = getTimeBounds(dimensions).selectedTime;
+      useUpdateTimestep(mapId);
       return /*#__PURE__*/React__namespace.createElement(TimeSlider, {
+        currentTime: moment__default["default"].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__namespace.createElement(TimeSliderButtonsConnect, {
           mapId: mapId,
@@ -20497,7 +20544,7 @@
           mapId: mapId,
           sourceId: sourceId
         }),
-        legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect$1, {
+        legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect, {
           mapId: mapId,
           sourceId: sourceId
         }),
@@ -20506,18 +20553,6 @@
         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");
@@ -27275,6 +27310,7 @@
     exports.CoreThemeStoreProvider = CoreThemeStoreProvider;
     exports.DockedLayerManagerConnect = DockedLayerManagerConnect;
     exports.HarmonieTempAndPrecipPreset = HarmonieTempAndPrecipPreset;
+    exports.LayerManager = LayerManager;
     exports.LayerManagerConnect = LayerManagerConnect;
     exports.LayerManagerMapButtonConnect = LayerManagerMapButtonConnect;
     exports.LayerSelectConnect = LayerSelectConnect;