@opengeoweb/core 4.8.0 → 4.10.0

package/index.umd.js

@@ -836,46 +836,66 @@
       TimeInMinutes[TimeInMinutes["MONTH"] = 43800] = "MONTH";
       TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
       TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
+      TimeInMinutes[TimeInMinutes["MINUTE"] = 1] = "MINUTE";
     })(TimeInMinutes || (TimeInMinutes = {}));
+    /**
+     *
+     * @param minutes
+     * @returns the two highest values in the format yr(s) mo(s) d h m
+     */
 
-    var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
-      var dateStr = '';
-      var time = minutes; // subtracting whole years/months/days from time duration and adding the amount to the string to be printed.
-
-      if (time >= TimeInMinutes.YEAR) {
-        var yearsInMintues = Math.floor(time / TimeInMinutes.YEAR);
-        dateStr += yearsInMintues + "y";
-        time -= yearsInMintues * TimeInMinutes.YEAR;
-      }
-
-      if (time >= TimeInMinutes.MONTH) {
-        var monthsInMinutes = Math.floor(time / TimeInMinutes.MONTH);
-        dateStr += monthsInMinutes + "m";
-        time -= monthsInMinutes * TimeInMinutes.MONTH;
-      }
 
-      if (time >= TimeInMinutes.DAY) {
-        var daysInMinutes = Math.floor(time / TimeInMinutes.DAY);
-        dateStr += daysInMinutes + "d";
-        time -= daysInMinutes * TimeInMinutes.DAY;
-      } // we will always print hour/minutes if there are any of them in the XX:XX format
-
-
-      if (time > 0) {
-        if (dateStr !== '') dateStr += ' ';
-        dateStr += Math.floor(time / TimeInMinutes.HOUR).toLocaleString(undefined, {
-          minimumIntegerDigits: 2,
-          useGrouping: false
-        }) + "h" + (time % TimeInMinutes.HOUR).toLocaleString(undefined, {
-          minimumIntegerDigits: 2,
-          useGrouping: false
-        }) + "min";
-      }
+    var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
+      var units = [{
+        label: 'yr',
+        value: TimeInMinutes.YEAR,
+        plural: 's'
+      }, {
+        label: 'mo',
+        value: TimeInMinutes.MONTH,
+        plural: 's'
+      }, {
+        label: 'd',
+        value: TimeInMinutes.DAY
+      }, {
+        label: 'h',
+        value: TimeInMinutes.HOUR
+      }, {
+        label: 'm',
+        value: TimeInMinutes.MINUTE
+      }];
+      var durations = units.reduce(function (units, duration) {
+        var min = units.min,
+            time = units.time,
+            count = units.count;
+        var label = duration.label,
+            value = duration.value,
+            _a = duration.plural,
+            plural = _a === void 0 ? '' : _a;
+        var unit = Math.floor(min / value);
+
+        if (unit > 0 && count < 2) {
+          return {
+            time: "" + time + unit + label + (unit > 1 ? plural : '') + " ",
+            min: min - unit * value,
+            count: count + 1
+          };
+        }
 
-      return dateStr;
+        return {
+          min: min,
+          time: time,
+          count: count
+        };
+      }, {
+        min: minutes,
+        time: '',
+        count: 0
+      });
+      return durations.time.trim();
     };
 
-    var TimeSliderUtils = /*#__PURE__*/Object.freeze({
+    var timeSliderUtils = /*#__PURE__*/Object.freeze({
         __proto__: null,
         millisecondsInSecond: millisecondsInSecond,
         defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
@@ -1172,7 +1192,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 +2858,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 +3762,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 +4662,7 @@
       allServicesEnabled: true,
       activeLayerInfo: {
         name: '',
-        text: '',
+        title: '',
         leaf: true,
         path: [],
         serviceName: ''
@@ -4868,7 +4888,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 +6583,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 +6594,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 +8320,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 +8377,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 +8397,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 +8421,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 +9334,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 +10264,7 @@
           currentIndex: layers.length,
           extendedLayers: __spreadArray(__spreadArray([], __read(layers)), [{
             name: layerName,
-            text: layerName,
+            title: layerName,
             leaf: true,
             path: []
           }])
@@ -10301,7 +10327,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 +10345,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 +10359,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"
         }));
       }));
@@ -10589,7 +10615,6 @@
         return currentStyle === style.name;
       });
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
-        disableUnderline: true,
         tooltip: "Style: " + ((_b = styles[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
         inputProps: {
           SelectDisplayProps: {
@@ -10632,51 +10657,108 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var makeIconStyle = function makeIconStyle(isActive, isEnabled) {
-      return {
-        color: function color() {
-          if (isActive) {
-            return 'common.white';
-          }
+    var getIconColor = function getIconColor(isActive, isEnabled) {
+      if (isActive) {
+        return 'common.white';
+      }
 
-          if (isEnabled) {
-            return 'geowebColors.buttons.flat.default.color';
-          }
+      if (isEnabled) {
+        return 'geowebColors.buttons.flat.default.color';
+      }
 
-          return 'geowebColors.buttons.flat.disabled.color';
-        }
-      };
+      return 'geowebColors.buttons.flat.disabled.color';
     };
 
     var ActivateLayer = function ActivateLayer(_a) {
-      var _b = _a.tooltipTitle,
-          tooltipTitle = _b === void 0 ? 'Leading layer' : _b,
-          onClickActivate = _a.onClickActivate,
-          _c = _a.isActive,
-          isActive = _c === void 0 ? false : _c,
-          _d = _a.isEnabled,
-          isEnabled = _d === void 0 ? true : _d,
-          _e = _a.id,
-          id = _e === void 0 ? 'activateLayer-btn' : _e;
-      var iconStyle = makeIconStyle(isActive, isEnabled);
+      var _onChange = _a.onChange,
+          isActive = _a.isActive,
+          isEnabled = _a.isEnabled;
+      return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
+        variant: "standard",
+        tooltip: "Auto update",
+        // Don't show arrow https://stackoverflow.com/questions/69085735/how-to-remove-arrow-from-react-textfield-select
+        inputProps: {
+          IconComponent: function IconComponent() {
+            return null;
+          }
+        },
+        value: isActive ? 'Both' : 'None',
+        sx: {
+          '&& .MuiOutlinedInput-input': {
+            padding: '0'
+          },
+          '&&& .MuiInput-input': {
+            paddingRight: 0
+          }
+        },
+        renderValue: function renderValue(optionSelected) {
+          return /*#__PURE__*/React__namespace.createElement(AutoUpdateButton$1, {
+            optionSelected: optionSelected,
+            isActive: isActive,
+            isEnabled: isEnabled
+          });
+        },
+        onChange: function onChange(event) {
+          event.stopPropagation();
 
-      var onClick = function onClick(event) {
-        event.stopPropagation();
-        onClickActivate();
-      };
+          _onChange(event.target.value === 'Both');
+        },
+        onClose: function onClose(event) {
+          event.stopPropagation();
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        disabled: true
+      }, "Auto-update"), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: "None"
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.None, null),
+        text: "None"
+      })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: "Both"
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Both, null),
+        text: "Both"
+      })));
+    };
 
-      return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
-        tooltipTitle: tooltipTitle,
-        onClick: onClick,
-        icon: isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
-          sx: iconStyle
-        }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
-          sx: iconStyle
-        }),
-        testId: id,
-        isActive: isActive,
-        className: "activateLayer-btn"
+    var AutoUpdateButton$1 = function AutoUpdateButton(_a) {
+      var optionSelected = _a.optionSelected,
+          isActive = _a.isActive,
+          isEnabled = _a.isEnabled;
+      var style = {
+        backgroundColor: isActive ? 'geowebColors.buttons.primary.active.fill' : 'transparent!important',
+        borderRadius: '5px',
+        color: getIconColor(isActive, isEnabled)
+      };
+      var Icon = isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
+        sx: style
+      }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
+        sx: style
       });
+      return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        "data-testid": "activateLayer-btn",
+        "aria-label": "Auto update " + optionSelected,
+        sx: {
+          '&.MuiButtonBase-root': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }, Icon);
+    };
+
+    var AutoOption = function AutoOption(_a) {
+      var icon = _a.icon,
+          text = _a.text;
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
+        sx: {
+          width: '112px'
+        }
+      }, text), /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon));
     };
 
     /* *
@@ -10742,8 +10824,8 @@
           borderRadius: 1,
           marginBottom: 0.5,
           minHeight: '34px',
-          '&.sortable-drag': {
-            boxShadow: 4
+          '&.sortable-chosen': {
+            boxShadow: 1
           },
           '&.sortable-ghost': {
             opacity: 0.5
@@ -10775,8 +10857,9 @@
           },
           id: "enableButton-medium"
         }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
-          onClickActivate: onClickRow,
-          id: "activateLayer-btn-medium"
+          onChange: onClickRow,
+          isActive: false,
+          isEnabled: true
         }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           sx: {
             fontWeight: '500',
@@ -10798,7 +10881,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({
@@ -10855,7 +10938,9 @@
           });
         }
       }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
-        onClickActivate: onClickRow
+        onChange: onClickRow,
+        isActive: false,
+        isEnabled: true
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: columnClasses.column2
@@ -10878,7 +10963,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 +11297,7 @@
       var newLayerTreeObj = {
         leaf: nodesToRecur.leaf,
         name: nodesToRecur.name,
-        title: nodesToRecur.text,
+        title: nodesToRecur.title,
         path: nodesToRecur.path || [],
         children: [],
         keywords: nodesToRecur.keywords || [],
@@ -11478,11 +11563,10 @@
       }, [dispatch]);
       var isActive = activeLayerId === layerId;
       return /*#__PURE__*/React__namespace.createElement(ActivateLayer, {
-        tooltipTitle: "Leading layer",
-        onClickActivate: function onClickActivate() {
+        onChange: function onChange(isActive) {
           setActiveLayerId({
             mapId: mapId,
-            layerId: layerId
+            layerId: isActive ? layerId : undefined
           });
 
           if (isAutoUpdating$1) {
@@ -11530,7 +11614,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);
       });
@@ -11606,7 +11690,9 @@
           _c = _a.index,
           index = _c === void 0 ? undefined : _c,
           _d = _a.hideTooltip,
-          hideTooltip = _d === void 0 ? false : _d;
+          hideTooltip = _d === void 0 ? false : _d,
+          _e = _a.isSorting,
+          isSorting = _e === void 0 ? false : _e;
       var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
       return /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
         tooltipTitle: tooltipTitle,
@@ -11620,7 +11706,7 @@
         disabled: isDisabled,
         isAccessible: true,
         sx: {
-          cursor: 'grab',
+          cursor: isSorting ? 'grabbing' : 'grab',
           '&:hover': {
             backgroundColor: 'inherit!important'
           },
@@ -11682,7 +11768,7 @@
       var onStart = React__namespace.useCallback(function (_a) {
         var oldIndex = _a.oldIndex;
         setActiveDragIndex(oldIndex);
-        Sortable__default["default"].ghost.style.opacity = '1';
+        if (Sortable__default["default"].ghost) Sortable__default["default"].ghost.style.opacity = '1';
       }, []);
       var onEnd = React__namespace.useCallback(function () {
         if (activeDragIndex !== null) {
@@ -11762,12 +11848,11 @@
         handle: ".handle",
         direction: "vertical",
         // hover props
-        forceFallback: true,
+        forceFallback: false,
         onStart: onStart,
         onEnd: onEnd,
         style: {
-          width: '100%',
-          cursor: isSorting ? 'grabbing' : 'inherit'
+          width: '100%'
         }
       }, layerIds.map(function (layerId, index) {
         return /*#__PURE__*/React__namespace.createElement(LayerRowConnect, {
@@ -11778,7 +11863,8 @@
           dragHandle: /*#__PURE__*/React__namespace.createElement(DragHandle, {
             isDisabled: isDragDisabled,
             index: index,
-            hideTooltip: isSorting || isDragDisabled
+            hideTooltip: isSorting || isDragDisabled,
+            isSorting: isSorting
           })
         });
       })));
@@ -12244,7 +12330,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 +12394,7 @@
       });
     };
 
-    var WMSLayerTreeConnect = connectRedux$4(ConnectedTree);
+    var WMSLayerTreeConnect = connectRedux$2(ConnectedTree);
 
     var preset = {
     	presetType: "mapPreset",
@@ -13951,7 +14037,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 +14063,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 +14349,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,
@@ -17231,7 +17317,8 @@
           icon = _a.icon,
           _b = _a.onChangeMouseWheel,
           onChangeMouseWheel = _b === void 0 ? function () {} : _b,
-          animationLength = _a.animationLength;
+          displayVariableDuration = _a.displayVariableDuration,
+          layerHasTimeStep = _a.layerHasTimeStep;
       var currentMarkIndex = marks.findIndex(function (mark) {
         return mark.value === value;
       });
@@ -17271,11 +17358,12 @@
         },
         ref: setAnchorRef,
         active: true,
-        width: "58px",
+        width: "100%",
         onWheel: onWheel
-      }, icon, /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
-        text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
-      }))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+      }, icon, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        fontSize: 12,
+        fontWeight: 400
+      }, displayVariableDuration ? minutesToDescribedDuration(value) : currentMark === null || currentMark === void 0 ? void 0 : currentMark.text))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
         anchorEl: anchorRef,
         open: open,
         onClose: function onClose() {
@@ -17311,7 +17399,7 @@
             setOpen(false);
           },
           key: mark.value,
-          selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.value) === mark.value,
+          selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.value) === mark.value && !isAutoSelected,
           disabled: isDisabled
         }, mark.label || mark.text);
       }), handleAutoClick && /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
@@ -17320,8 +17408,8 @@
           setOpen(false);
         },
         selected: isAutoSelected,
-        disabled: isDisabled
-      }, "Auto"), animationLength && /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        disabled: isDisabled || !layerHasTimeStep
+      }, "Auto"), displayVariableDuration && /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true,
         sx: {
           fontSize: '12px',
@@ -17331,12 +17419,12 @@
             minHeight: '30px!important'
           }
         }
-      }, "length"), animationLength && /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, "length"), displayVariableDuration && /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         "data-testid": "menu-animation-length-button",
         active: false,
         disableRipple: true,
         width: "100%"
-      }, minutesToDescribedDuration(animationLength))));
+      }, minutesToDescribedDuration(value))));
     };
 
     /* *
@@ -17468,16 +17556,16 @@
       text: '2w'
     }, {
       label: '1 month',
-      value: 40320,
-      text: '4w'
+      value: 43800,
+      text: '1mo'
     }, {
       label: '2 months',
-      value: 80640,
-      text: '8w'
+      value: 87600,
+      text: '2mos'
     }, {
       label: '6 months',
-      value: 241920,
-      text: '24w'
+      value: 262800,
+      text: '6mos'
     }, {
       label: '1 year',
       value: 525600,
@@ -17492,15 +17580,17 @@
     var timeStepTitle = 'Time step';
 
     var TimeStepButton = function TimeStepButton(_a) {
-      var timeStep = _a.timeStep,
-          _b = _a.disabled,
-          disabled = _b === void 0 ? false : _b,
+      var _b = _a.timeStep,
+          timeStep = _b === void 0 ? marks$2[0].value : _b,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c,
           isTimestepAuto = _a.isTimestepAuto,
           onChangeTimeStep = _a.onChangeTimeStep,
-          _c = _a.onToggleTimestepAuto,
-          onToggleTimestepAuto = _c === void 0 ? function () {} : _c,
-          _d = _a.isOpenByDefault,
-          isOpenByDefault = _d === void 0 ? false : _d;
+          _d = _a.onToggleTimestepAuto,
+          onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
+          _e = _a.isOpenByDefault,
+          isOpenByDefault = _e === void 0 ? false : _e,
+          timeStepFromLayer = _a.timeStepFromLayer;
 
       var handleMenuItemClick = function handleMenuItemClick(mark) {
         if (isTimestepAuto) {
@@ -17510,6 +17600,12 @@
         onChangeTimeStep(mark.value, MapActionOrigin.map);
       };
 
+      var handleToggleTimeStep = function handleToggleTimeStep() {
+        if (isTimestepAuto) return;
+        onToggleTimestepAuto();
+        timeStepFromLayer && onChangeTimeStep(timeStepFromLayer, MapActionOrigin.map);
+      };
+
       return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
         title: timeStepTitle,
         isOpenByDefault: isOpenByDefault,
@@ -17518,9 +17614,11 @@
         handleMenuItemClick: handleMenuItemClick,
         isDisabled: disabled,
         isAutoSelected: isTimestepAuto,
-        handleAutoClick: onToggleTimestepAuto,
+        handleAutoClick: handleToggleTimeStep,
         icon: /*#__PURE__*/React__namespace.createElement(theme.FastForward, null),
-        onChangeMouseWheel: handleMenuItemClick
+        onChangeMouseWheel: handleMenuItemClick,
+        displayVariableDuration: true,
+        layerHasTimeStep: Boolean(timeStepFromLayer)
       });
     };
 
@@ -17704,7 +17802,6 @@
           disabled = _b === void 0 ? false : _b,
           _c = _a.animationLength,
           animationLength = _c === void 0 ? AnimationLength.Hours1 : _c,
-          animationLengthInMinutes = _a.animationLengthInMinutes,
           onChangeAnimationLength = _a.onChangeAnimationLength;
 
       var onChangeSliderValue = function onChangeSliderValue(mark) {
@@ -17724,7 +17821,7 @@
         isDisabled: disabled,
         value: animationLength,
         onChangeMouseWheel: onChangeSliderValue,
-        animationLength: animationLengthInMinutes
+        displayVariableDuration: true
       });
     };
 
@@ -17772,7 +17869,6 @@
         item: true,
         xs: "auto"
       }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
-        timeStep: 0,
         onChangeTimeStep: function onChangeTimeStep() {},
         isTimestepAuto: false
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -19004,34 +19100,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 +19121,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];
-
-      var _r = __read(React__namespace.useState(false), 2),
-          animationAreaDragging = _r[0],
-          setAnimationAreaDragging = _r[1];
+          animationAreaDragging = _q[0],
+          setAnimationAreaDragging = _q[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 +19194,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;
@@ -19410,6 +19475,26 @@
       ctx.restore();
     };
 
+    var drawAutoUpdateIcon = function drawAutoUpdateIcon(ctx, x, y, theme, isAutoUpdating) {
+      ctx.save();
+      ctx.translate(x, y);
+      var playerTimeText = theme.palette.geowebColors.timeSlider.playerTimeText;
+      ctx.fillStyle = isAutoUpdating ? '#7BACFF' : '#B4B4B4';
+      var path = new Path2D('M12.385 3.295l5 3-5 3V7.723l-.085.014c-3.08.548-5.418 3.24-5.418 6.479 0 3.634 2.945 6.58 6.577 6.58 2.914 0 5.385-1.896 6.248-4.523l2.815-1.626c-.225 4.814-4.197 8.648-9.063 8.648-5.012 0-9.074-4.065-9.074-9.08 0-4.65 3.495-8.484 8-9.015V3.295z');
+      ctx.translate(7, -8);
+      ctx.rotate(13.295);
+      ctx.fill(path);
+      ctx.restore();
+      var text = 'Auto';
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.fillStyle = isAutoUpdating ? '#7BACFF' : '#B4B4B4'; // ON
+
+      ctx.font = "7px " + playerTimeText.fontFamily;
+      ctx.fillText(text, 5, 14);
+      ctx.restore();
+    };
+
     var drawTextAnnotation = function drawTextAnnotation(ctx, x, y, text, theme) {
       var playerTimeText = theme.palette.geowebColors.timeSlider.playerTimeText;
       ctx.save();
@@ -19423,20 +19508,22 @@
       ctx.restore();
     };
 
-    var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, scale, theme) {
+    var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, scale, theme, isAutoUpdating) {
+      var iconWidth = 25;
       var smallWidth = needleGeom.smallWidth,
           largeWidth = needleGeom.largeWidth,
           height = needleGeom.height;
-      var needleWidth = scale === Scale.Year ? largeWidth : smallWidth;
-      var needleX = selectedPx - needleWidth / 2;
+      var boxWidth = scale === Scale.Year ? largeWidth : smallWidth;
+      var needleX = selectedPx - boxWidth / 2;
       var needleY = needleGeom.lineWidth;
-      drawRoundedRectangle(ctx, needleX, needleY, needleWidth, height, needleGeom.cornerRadius, theme);
+      drawRoundedRectangle(ctx, needleX - iconWidth, needleY, boxWidth + iconWidth, height, needleGeom.cornerRadius, theme);
       var timeFormat = scale === Scale.Year ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
       var timeText = moment__default["default"].utc(selectedTime * 1000).format(timeFormat).toString();
-      drawTextAnnotation(ctx, needleX + needleWidth / 2, needleY + height / 2, timeText, theme);
+      drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth, needleY + height / 2, timeText, theme);
+      drawAutoUpdateIcon(ctx, needleX + boxWidth - iconWidth, needleY, theme, isAutoUpdating);
     };
 
-    var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, scale) {
+    var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, scale, isAutoUpdating) {
       // map unix timestamps to pixel values
       var _a = __read([selected].map(function (t) {
         return timestampToPixel(t, centerTime, width, secondsPerPx);
@@ -19444,7 +19531,7 @@
           selectedPx = _a[0];
 
       ctx.clearRect(0, 0, width, height);
-      drawNewCurrentTimeBox(ctx, selected, selectedPx, scale, theme);
+      drawNewCurrentTimeBox(ctx, selected, selectedPx, scale, theme, isAutoUpdating);
     };
 
     /* *
@@ -19476,6 +19563,7 @@
           dataStartTime = _a.dataStartTime,
           dataEndTime = _a.dataEndTime,
           unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          isAutoUpdating = _a.isAutoUpdating,
           onSetNewDate = _a.onSetNewDate,
           setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime;
       var TIME_BOX_WIDTH = 140;
@@ -19556,7 +19644,7 @@
         },
         onRenderCanvas: function onRenderCanvas(ctx, width, height) {
           setCanvasWidth(width);
-          renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, scale);
+          renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, scale, isAutoUpdating);
         }
       }));
     };
@@ -19578,7 +19666,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 +19683,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 +19727,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 +19751,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 +19777,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 +19817,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 +19843,7 @@
         disabled: false
       });
     });
-    var AutoUpdateButtonConnect = connectRedux$3(AutoUpdateButtonConnectComponent);
+    var AutoUpdateButtonConnect = connectRedux$1(AutoUpdateButtonConnectComponent);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -19795,26 +19918,15 @@
       var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
         return getLayerTimeDimension(store, activeLayerId);
       });
-
-      var onToggleTimestepAuto = function onToggleTimestepAuto() {
-        var newTimestepAuto = !isTimestepAuto$1;
-
-        if (newTimestepAuto) {
-          var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
-
-          if (timeStepFromLayer) {
-            dispatch(mapActions$1.setTimeStep({
-              mapId: mapId,
-              timeStep: timeStepFromLayer
-            }));
-          }
-        }
-
+      var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
+      var onToggleTimestepAuto = React__namespace.useCallback(function () {
         dispatch(mapActions$1.toggleTimestepAuto({
           mapId: mapId,
-          timestepAuto: newTimestepAuto
+          timestepAuto: !isTimestepAuto$1,
+          origin: MapActionOrigin.map
         }));
-      };
+      }, [dispatch, isTimestepAuto$1, mapId]);
+      var activeTimeStep = isTimestepAuto$1 && timeStepFromLayer ? timeStepFromLayer : timeStep;
 
       var onSetTimeStep = function onSetTimeStep(timeStep) {
         dispatch(mapActions$1.setTimeStep({
@@ -19824,11 +19936,12 @@
       };
 
       return /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
-        timeStep: timeStep,
+        timeStep: activeTimeStep,
         onChangeTimeStep: onSetTimeStep,
         disabled: isAnimating$1,
         onToggleTimestepAuto: onToggleTimestepAuto,
-        isTimestepAuto: Boolean(isTimestepAuto$1)
+        isTimestepAuto: Boolean(isTimestepAuto$1) && Boolean(timeStepFromLayer),
+        timeStepFromLayer: timeStepFromLayer
       });
     };
 
@@ -19992,11 +20105,6 @@
         return getAnimationEndTime$1(store, mapId);
       });
       var currentDiffInMinutes = moment__default["default"](animationEndTime).diff(moment__default["default"](animationStartTime), 'minutes');
-      var currentLength = Object.values(AnimationLength).map(function (val) {
-        return Number(val);
-      }).find(function (val) {
-        return val >= currentDiffInMinutes;
-      });
 
       var handlechangeAnimationLength = function handlechangeAnimationLength(length) {
         var animationEndTime = moment__default["default"](animationStartTime).add(length, 'minutes').toISOString();
@@ -20008,9 +20116,8 @@
 
       return /*#__PURE__*/React__namespace.createElement(AnimationLengthButton, {
         disabled: isAnimating$1,
-        animationLength: currentLength || Number(AnimationLength.Hours24),
-        onChangeAnimationLength: handlechangeAnimationLength,
-        animationLengthInMinutes: currentDiffInMinutes
+        animationLength: currentDiffInMinutes || Number(AnimationLength.Hours24),
+        onChangeAnimationLength: handlechangeAnimationLength
       });
     };
 
@@ -20201,56 +20308,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 +20355,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 +20364,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 +20437,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),
@@ -20361,6 +20446,7 @@
         scale: getMapTimeSliderScale(store, props.mapId),
         timeStep: getMapTimeStep(store, props.mapId),
         isAnimating: isAnimating(store, props.mapId),
+        isAutoUpdating: isAutoUpdating(store, props.mapId),
         unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
       };
     }, {
@@ -20379,6 +20465,7 @@
           layers = _a.layers,
           timeStep = _a.timeStep,
           isAnimating = _a.isAnimating,
+          isAutoUpdating = _a.isAutoUpdating,
           stopMapAnimation = _a.stopMapAnimation,
           unfilteredSelectedTime = _a.unfilteredSelectedTime,
           setTimeSliderUnfilteredSelectedTime = _a.setTimeSliderUnfilteredSelectedTime,
@@ -20397,6 +20484,7 @@
         dataStartTime: dataStartTime,
         dataEndTime: dataEndTime,
         timeStep: timeStep,
+        isAutoUpdating: isAutoUpdating,
         unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
         setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
           if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
@@ -20420,7 +20508,7 @@
       });
     };
 
-    var TimeSliderCurrentTimeBoxConnect = connectRedux$1(TimeSliderCurrentTimeBoxConnectComponent);
+    var TimeSliderCurrentTimeBoxConnect = connectRedux(TimeSliderCurrentTimeBoxConnectComponent);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20438,38 +20526,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 +20581,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 +20644,7 @@
           mapId: mapId,
           sourceId: sourceId
         }),
-        legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect$1, {
+        legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect, {
           mapId: mapId,
           sourceId: sourceId
         }),
@@ -20506,18 +20653,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 +27410,7 @@
     exports.CoreThemeStoreProvider = CoreThemeStoreProvider;
     exports.DockedLayerManagerConnect = DockedLayerManagerConnect;
     exports.HarmonieTempAndPrecipPreset = HarmonieTempAndPrecipPreset;
+    exports.LayerManager = LayerManager;
     exports.LayerManagerConnect = LayerManagerConnect;
     exports.LayerManagerMapButtonConnect = LayerManagerMapButtonConnect;
     exports.LayerSelectConnect = LayerSelectConnect;
@@ -27342,7 +27478,7 @@
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
     exports.synchronizationGroupsConfig = synchronizationGroupConfig;
     exports.testLayers = testLayers;
-    exports.timeSliderUtils = TimeSliderUtils;
+    exports.timeSliderUtils = timeSliderUtils;
     exports.uiActions = uiActions;
     exports.uiModuleConfig = uiModuleConfig;
     exports.uiSelectors = selectors$1;