@opengeoweb/core 4.5.0 → 4.6.0

package/index.umd.js

@@ -241,6 +241,19 @@
       Scale[Scale["DataScale"] = 8] = "DataScale";
     })(Scale || (Scale = {}));
 
+    var AnimationLength;
+
+    (function (AnimationLength) {
+      AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
+      AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
+      AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
+      AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
+      AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
+      AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
+      AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
+      AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
+    })(AnimationLength || (AnimationLength = {}));
+
     var MapActionOrigin;
 
     (function (MapActionOrigin) {
@@ -434,6 +447,7 @@
     var types$2 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         get Scale () { return Scale; },
+        get AnimationLength () { return AnimationLength; },
         get MapActionOrigin () { return MapActionOrigin; },
         get LayerType () { return LayerType; },
         get LayerStatus () { return LayerStatus; },
@@ -1841,7 +1855,9 @@
         activeMapId: activeMapId,
         isOpen: setOpen,
         type: type,
-        source: source
+        source: source,
+        isLoading: false,
+        error: undefined
       };
     };
     var initialState$4 = {
@@ -1924,6 +1940,18 @@
         setActiveWindowId: function setActiveWindowId(draft, action) {
           var activeWindowId = action.payload.activeWindowId;
           draft.activeWindowId = activeWindowId;
+        },
+        toggleIsLoadingDialog: function toggleIsLoadingDialog(draft, action) {
+          var _a = action.payload,
+              isLoading = _a.isLoading,
+              type = _a.type;
+          draft.dialogs[type].isLoading = isLoading;
+        },
+        setErrorDialog: function setErrorDialog(draft, action) {
+          var _a = action.payload,
+              error = _a.error,
+              type = _a.type;
+          draft.dialogs[type].error = error;
         }
       }
     });
@@ -2148,17 +2176,6 @@
 
           draft.byId[mapId].animationDelay = animationDelay;
         },
-        setAnimationInterval: function setAnimationInterval(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              interval = _a.interval;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].timeStep = interval;
-        },
         layerMoveLayer: function layerMoveLayer(draft, action) {
           var _a = action.payload,
               oldIndex = _a.oldIndex,
@@ -2193,6 +2210,17 @@
 
           draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
         },
+        setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
+          var _a = action.payload,
+              mapId = _a.mapId,
+              timeSliderUnfilteredSelectedTime = _a.timeSliderUnfilteredSelectedTime;
+
+          if (!draft.byId[mapId]) {
+            return;
+          }
+
+          draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
+        },
         setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -2317,17 +2345,6 @@
 
           draft.byId[mapId].activeMapPresetId = presetId;
         },
-        setIsMapPresetLoading: function setIsMapPresetLoading(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              isLoading = _a.isLoading;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].isMapPresetLoading = isLoading;
-        },
         setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -2339,17 +2356,6 @@
 
           draft.byId[mapId].hasMapPresetChanges = hasChanges;
         },
-        setMapPresetError: function setMapPresetError(draft, action) {
-          var _a = action.payload,
-              mapId = _a.mapId,
-              error = _a.error;
-
-          if (!draft.byId[mapId]) {
-            return;
-          }
-
-          draft.byId[mapId].mapPresetError = error;
-        },
         toggleDockedLayerManager: function toggleDockedLayerManager(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -3043,6 +3049,12 @@
 
       return (_a = store === null || store === void 0 ? void 0 : store.ui) === null || _a === void 0 ? void 0 : _a.activeWindowId;
     };
+    var getDialogIsLoading = toolkit.createSelector(getDialogDetailsByType, function (details) {
+      return details && details.isLoading || false;
+    });
+    var getDialogError = toolkit.createSelector(getDialogDetailsByType, function (details) {
+      return details && details.error || '';
+    });
 
     var selectors$1 = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -3053,7 +3065,9 @@
         getDialogOrder: getDialogOrder,
         getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
         getDialogSource: getDialogSource,
-        getActiveWindowId: getActiveWindowId
+        getActiveWindowId: getActiveWindowId,
+        getDialogIsLoading: getDialogIsLoading,
+        getDialogError: getDialogError
     });
 
     /* *
@@ -3878,6 +3892,19 @@
     var getMapTimeSliderCenterTime = toolkit.createSelector(getMapById, function (store) {
       return store ? store.timeSliderCenterTime : moment__default["default"]().unix();
     });
+    /**
+     * Returns the unflitered selected time of time slider
+     * This is not used to set the selected time itself, which is controlled by TimeBounds where values are rounded.
+     *
+     * Example: selectedTime = getTimeSliderUnfliteredSelectedTime(store, 'mapid_1')
+     * @param {object} store store: object - store object
+     * @param {string} mapId mapId: string - Id of the map
+     * @returns {number} returnType: number - unfiltered selected time as a unix timestamp
+     */
+
+    var getTimeSliderUnfilteredSelectedTime = toolkit.createSelector(getMapById, function (store) {
+      return store ? store.timeSliderUnfilteredSelectedTime : null;
+    });
     /**
      * Returns the number of seconds per pixel on the time slider
      *
@@ -4185,18 +4212,6 @@
         shouldShowLegend: shouldShowLegend
       });
     }, selectorMemoizationOptions);
-    /**
-     * Returns the loading state of the map preset
-     *
-     * Example getIsMapPresetLoading(store, mapId);
-     * @param {object} store store: object - store object
-     * @param {string} mapId mapId: string - Id of the map
-     * @returns {boolean} returnType: boolean
-     */
-
-    var getIsMapPresetLoading = toolkit.createSelector(getMapById, function (store) {
-      return store && store.isMapPresetLoading ? store.isMapPresetLoading : false;
-    });
     /**
      * Returns the has changes state of the map preset
      *
@@ -4209,18 +4224,6 @@
     var getHasMapPresetChanges = toolkit.createSelector(getMapById, function (store) {
       return store && store.hasMapPresetChanges ? store.hasMapPresetChanges : false;
     });
-    /**
-     * Returns the error state of the map preset
-     *
-     * Example getMapPresetError(store, mapId);
-     * @param {object} store store: object - store object
-     * @param {string} mapId mapId: string - Id of the map
-     * @returns {Error} returnType: string
-     */
-
-    var getMapPresetError = toolkit.createSelector(getMapById, function (store) {
-      return store === null || store === void 0 ? void 0 : store.mapPresetError;
-    });
     /**
      * Returns whether the docked layer manager is open
      *
@@ -4263,6 +4266,7 @@
         getMapTimeStep: getMapTimeStep,
         getMapAnimationDelay: getMapAnimationDelay,
         getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
+        getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
         getMapTimeSliderSecondsPerPx: getMapTimeSliderSecondsPerPx,
         getMapTimeSliderDataScaleToSecondsPerPx: getMapTimeSliderDataScaleToSecondsPerPx,
         isTimestepAuto: isTimestepAuto,
@@ -4282,9 +4286,7 @@
         getActiveMapPresetId: getActiveMapPresetId,
         getLegendId: getLegendId,
         getMapPreset: getMapPreset,
-        getIsMapPresetLoading: getIsMapPresetLoading,
         getHasMapPresetChanges: getHasMapPresetChanges,
-        getMapPresetError: getMapPresetError,
         getIsDockedLayerManagerOpen: getIsDockedLayerManagerOpen
     });
 
@@ -8324,9 +8326,9 @@
             , 17];
             return [4
             /*yield*/
-            , effects.put(mapActions$1.setAnimationInterval({
+            , effects.put(mapActions$1.setTimeStep({
               mapId: mapId,
-              interval: interval
+              timeStep: interval
             }))];
 
           case 16:
@@ -9757,7 +9759,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var marks$2 = [{
+    var marks$3 = [{
       value: 0,
       label: '0 %'
     }, {
@@ -9893,7 +9895,7 @@
         step: 0.01,
         max: 1,
         min: 0,
-        marks: marks$2,
+        marks: marks$3,
         onChange: function onChange(event, newValue) {
           event.stopPropagation();
           onLayerChangeOpacity(newValue);
@@ -10070,7 +10072,9 @@
       return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClick,
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Flag, {
+        icon: isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
+          sx: iconStyle
+        }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
           sx: iconStyle
         }),
         testId: id,
@@ -12222,6 +12226,9 @@
         onClick: function onClick() {
           return onChangeSize(sizeSmall);
         },
+        onTouchEnd: function onTouchEnd() {
+          return onChangeSize(sizeSmall);
+        },
         sx: iconStyle,
         className: "collapseSmall-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -12232,6 +12239,9 @@
         onClick: function onClick() {
           return onChangeSize(sizeMedium);
         },
+        onTouchEnd: function onTouchEnd() {
+          return onChangeSize(sizeMedium);
+        },
         sx: iconStyle,
         className: "collapseMedium-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -12242,6 +12252,9 @@
         onClick: function onClick() {
           return onChangeSize(sizeLarge);
         },
+        onTouchEnd: function onTouchEnd() {
+          return onChangeSize(sizeLarge);
+        },
         sx: iconStyle,
         className: "collapseLarge-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -12253,6 +12266,9 @@
         sx: iconStyle,
         onClick: function onClick() {
           return onClickDockButton();
+        },
+        onTouchEnd: function onTouchEnd() {
+          return onClickDockButton();
         }
       }, isDockedLayerManager ? /*#__PURE__*/React__namespace.createElement(theme.CollapseWindow, {
         "data-testid": "dockedLayerManager-collapse"
@@ -12384,7 +12400,11 @@
             setSize(dragSize);
           }
         }
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, null, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        onKeyDown: function onKeyDown(event) {
+          event.stopPropagation();
+        }
+      }, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
         "data-testid": "loading-bar",
         color: "secondary",
         sx: {
@@ -12491,12 +12511,20 @@
       var isDialogOpen = reactRedux.useSelector(function (store) {
         return getisDialogOpen(store, dialogType);
       });
+      var uiIsLoading = reactRedux.useSelector(function (store) {
+        return getDialogIsLoading(store, dialogType);
+      });
+      var uiError = reactRedux.useSelector(function (store) {
+        return getDialogError(store, dialogType);
+      });
       return {
         setDialogOrder: setDialogOrder,
         dialogOrder: dialogOrder,
         onCloseDialog: onCloseDialog,
         uiSource: uiSource,
-        isDialogOpen: isDialogOpen
+        isDialogOpen: isDialogOpen,
+        uiIsLoading: uiIsLoading,
+        uiError: uiError
       };
     };
 
@@ -12603,19 +12631,15 @@
       var mapId = reactRedux.useSelector(function (store) {
         return getDialogMapId(store, dialogType);
       });
-      var isMapPresetLoading = reactRedux.useSelector(function (store) {
-        return getIsMapPresetLoading(store, mapId);
-      });
-      var mapPresetError = reactRedux.useSelector(function (store) {
-        return getMapPresetError(store, mapId);
-      });
 
       var _d = useSetupDialog(dialogType),
           dialogOrder = _d.dialogOrder,
           setDialogOrder = _d.setDialogOrder,
           onCloseDialog = _d.onCloseDialog,
           isDialogOpen = _d.isDialogOpen,
-          uiSource = _d.uiSource;
+          uiSource = _d.uiSource,
+          uiIsLoading = _d.uiIsLoading,
+          uiError = _d.uiError;
 
       useFetchServices(dialogType, preloadedMapServices);
 
@@ -12640,8 +12664,8 @@
         order: dialogOrder,
         source: uiSource,
         leftHeaderComponent: leftHeaderComponent,
-        isLoading: isMapPresetLoading,
-        error: mapPresetError,
+        isLoading: uiIsLoading,
+        error: uiError,
         onToggleDock: onToggleDock
       });
     };
@@ -14310,6 +14334,7 @@
       var rowMargin = 4;
       var rowHeight = widthToRowHeight(layerSelectWidth);
       var layerSelectFilterHeight = 155 + serviceListHeight;
+      var minHeight = 400;
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -14318,7 +14343,7 @@
           fontSize: '12px'
         }
       }, filteredLayers.length, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
-        height: layerSelectHeight - layerSelectFilterHeight,
+        height: layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight,
         itemCount: filteredLayers.length,
         itemSize: rowHeight + rowMargin
       }, function (_a) {
@@ -15164,7 +15189,14 @@
           left: 100
         },
         isOpen: isOpen,
-        onChangeSize: onChangeSize,
+        onResizeStop: function onResizeStop(_event, _direction, node) {
+          var width = node.offsetWidth,
+              height = node.offsetHeight;
+          onChangeSize({
+            width: width,
+            height: height
+          });
+        },
         onClose: onClose,
         headerSize: "small",
         bounds: bounds,
@@ -16692,7 +16724,7 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var marks$1 = [{
+    var marks$2 = [{
       label: '1 min',
       value: 1,
       text: '1m'
@@ -16787,18 +16819,11 @@
           disabled = _b === void 0 ? false : _b,
           _c = _a.isTimestepAuto,
           isTimestepAuto = _c === void 0 ? false : _c,
-          timeDimension = _a.timeDimension,
           onChangeTimeStep = _a.onChangeTimeStep,
           _d = _a.onToggleTimestepAuto,
           onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
           _e = _a.isOpenByDefault,
           isOpenByDefault = _e === void 0 ? false : _e;
-      var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-      React__namespace.useEffect(function () {
-        if (isTimestepAuto) {
-          onChangeTimeStep(timeStepFromLayer);
-        }
-      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
       var handleMenuItemClick = function handleMenuItemClick(mark) {
         if (isTimestepAuto) {
@@ -16811,7 +16836,7 @@
       return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
         title: timeStepTitle,
         isOpenByDefault: isOpenByDefault,
-        marks: marks$1,
+        marks: marks$2,
         value: timeStep,
         handleMenuItemClick: handleMenuItemClick,
         isDisabled: disabled,
@@ -16838,7 +16863,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var marks = [{
+    var marks$1 = [{
       label: '5 min',
       value: Scale.Minutes5,
       text: '5m'
@@ -16889,7 +16914,7 @@
       var onChangeSliderValue = function onChangeSliderValue(mark) {
         var newSliderValue = mark.value;
         var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
-        var newScale = marks.find(function (el) {
+        var newScale = marks$1.find(function (el) {
           return el.value === newValue;
         }).value;
         var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
@@ -16900,7 +16925,7 @@
       return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
         handleMenuItemClick: onChangeSliderValue,
         icon: /*#__PURE__*/React__namespace.createElement(theme.Clock, null),
-        marks: marks,
+        marks: marks$1,
         title: "Time scale",
         value: timeSliderScale,
         onChangeMouseWheel: onChangeSliderValue
@@ -16923,7 +16948,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var title = 'Now';
+    var title$1 = 'Now';
 
     var NowButton = function NowButton(_a) {
       var _b = _a.onSetNow,
@@ -16931,7 +16956,7 @@
           _c = _a.disabled,
           disabled = _c === void 0 ? false : _c;
       return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: title,
+        title: title$1,
         "data-testid": "nowButtonTooltip"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         disabled: disabled,
@@ -16944,6 +16969,86 @@
       }))));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var title = 'Animation';
+    var marks = [{
+      label: '15 min',
+      value: AnimationLength.Minutes15,
+      text: '15m'
+    }, {
+      label: '30 min',
+      value: AnimationLength.Minutes30,
+      text: '30m'
+    }, {
+      label: '1 h',
+      value: AnimationLength.Hours1,
+      text: '1h'
+    }, {
+      label: '2 h',
+      value: AnimationLength.Hours2,
+      text: '2h'
+    }, {
+      label: '3 h',
+      value: AnimationLength.Hours3,
+      text: '3h'
+    }, {
+      label: '6 h',
+      value: AnimationLength.Hours6,
+      text: '6h'
+    }, {
+      label: '12 h',
+      value: AnimationLength.Hours12,
+      text: '12h'
+    }, {
+      label: '24 h',
+      value: AnimationLength.Hours24,
+      text: '24h'
+    }].sort(function (a, b) {
+      return b.value - a.value;
+    });
+
+    var AnimationLengthButton = function AnimationLengthButton(_a) {
+      var _b = _a.disabled,
+          disabled = _b === void 0 ? false : _b,
+          _c = _a.animationLength,
+          animationLength = _c === void 0 ? AnimationLength.Hours1 : _c,
+          onChangeAnimationLength = _a.onChangeAnimationLength;
+
+      var onChangeSliderValue = function onChangeSliderValue(mark) {
+        var newSliderValue = mark.value;
+        var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
+        var newLength = marks.find(function (el) {
+          return el.value === newValue;
+        }).value;
+        onChangeAnimationLength(newLength);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
+        handleMenuItemClick: onChangeSliderValue,
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Animation, null),
+        marks: marks,
+        title: title,
+        isDisabled: disabled,
+        value: animationLength,
+        onChangeMouseWheel: onChangeSliderValue
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -16965,7 +17070,8 @@
           nowBtn = _a.nowBtn,
           speedBtn = _a.speedBtn,
           timeScaleBtn = _a.timeScaleBtn,
-          timeStepBtn = _a.timeStepBtn;
+          timeStepBtn = _a.timeStepBtn,
+          animationLengthBtn = _a.animationLengthBtn;
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
@@ -16981,6 +17087,11 @@
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
+      }, animationLengthBtn || /*#__PURE__*/React__default["default"].createElement(AnimationLengthButton, {
+        onChangeAnimationLength: function onChangeAnimationLength() {}
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
       }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
         timeStep: 0,
         onChangeTimeStep: function onChangeTimeStep() {}
@@ -17019,22 +17130,34 @@
           speedBtn = _a.speedBtn,
           timeStepBtn = _a.timeStepBtn,
           timeScaleBtn = _a.timeScaleBtn,
+          animationLengthBtn = _a.animationLengthBtn,
           _b = _a.isOpenByDefault,
-          isOpenByDefault = _b === void 0 ? false : _b;
+          isOpenByDefault = _b === void 0 ? false : _b,
+          timeStep = _a.timeStep,
+          timeDimension = _a.timeDimension,
+          onChangeTimeStep = _a.onChangeTimeStep,
+          _c = _a.isTimestepAuto,
+          isTimestepAuto = _c === void 0 ? false : _c;
 
-      var _c = __read(React.useState(null), 2),
-          anchorEl = _c[0],
-          setAnchorEl = _c[1];
+      var _d = __read(React.useState(null), 2),
+          anchorEl = _d[0],
+          setAnchorEl = _d[1];
 
-      var _d = __read(React.useState(false), 2),
-          open = _d[0],
-          setOpen = _d[1];
+      var _e = __read(React.useState(false), 2),
+          open = _e[0],
+          setOpen = _e[1];
 
       React.useEffect(function () {
         if (anchorEl && isOpenByDefault) {
           setOpen(true);
         }
       }, [anchorEl, isOpenByDefault]);
+      var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
+      React__default["default"].useEffect(function () {
+        if (isTimestepAuto) {
+          onChangeTimeStep(timeStepFromLayer);
+        }
+      }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
       return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Animation options",
         placement: "bottom"
@@ -17070,6 +17193,7 @@
         timeScaleBtn: timeScaleBtn,
         timeStepBtn: timeStepBtn,
         speedBtn: speedBtn,
+        animationLengthBtn: animationLengthBtn,
         autoUpdateBtn: autoUpdateBtn
       })))));
     };
@@ -17352,11 +17476,12 @@
     var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, scale) {
       var ctx2 = ctx;
       var _a = theme.palette.geowebColors.timeSlider.timelineText,
+          fontSize = _a.fontSize,
           fontFamily = _a.fontFamily,
           color = _a.color;
       ctx2.fillStyle = color; // time text has smaller font than other timeline text
 
-      ctx2.font = "12px " + fontFamily;
+      ctx2.font = fontSize + "px " + fontFamily;
       ctx2.textAlign = 'left';
 
       if (scale === Scale.Year || scale === Scale.Month || scale === Scale.Week || scale === Scale.Day) {
@@ -17388,7 +17513,7 @@
       ctx2.fillStyle = color;
       ctx2.font = fontSize + "px " + fontFamily;
       ctx2.textAlign = 'left';
-      ctx2.fillText(newDate, stepPx + 2, height - 30);
+      ctx2.fillText(newDate, stepPx + 2, height - 10);
     };
 
     var drawLeftSideDateText = function drawLeftSideDateText(ctx, theme, newDate, height) {
@@ -17881,9 +18006,9 @@
       drawDefaultBackground();
       drawObservedData();
       drawForecastData();
+      drawNightOrAlternateTime();
       drawAnimationArea();
       drawDraggableIcons();
-      drawNightOrAlternateTime();
 
       function drawDefaultBackground() {
         ctx.fillStyle = legendNoDataBackground.rgba;
@@ -17906,18 +18031,23 @@
 
       function drawAnimationArea() {
         ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
-        ctx.fillRect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
+        ctx.strokeStyle = theme$1.palette.geowebColors.timeSlider.timelineSelectionOutline.rgba;
+        ctx.lineWidth = 3;
+        ctx.rect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
+        ctx.fill();
+        ctx.stroke();
       }
 
       function drawDraggableIcons() {
         ctx.save();
         var path = new Path2D(theme.dragHandlePath);
         ctx.translate(animationStartPx, y);
-        ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
+        ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineTimeScale.fill;
         ctx.fill(path);
         ctx.restore();
         ctx.save();
         ctx.translate(animationEndPx - 24, y);
+        ctx.fillStyle = theme$1.palette.geowebColors.timeSlider.timelineTimeScale.fill;
         ctx.fill(path);
         ctx.restore();
       }
@@ -18067,6 +18197,11 @@
     var isRightAnimationIconArea = function isRightAnimationIconArea(x, rightMarkerPx, width) {
       return x >= rightMarkerPx - width && x <= rightMarkerPx;
     };
+    var isInsideAnimationArea = function isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) {
+      var isInsideOnLeftSide = x >= leftMarkerPx;
+      var isInsideOnRightSide = x <= rightMarkerPx;
+      return isInsideOnLeftSide && isInsideOnRightSide;
+    };
     /**
      * @param x The pin location
      * @param selectedTimePx The selected px
@@ -18097,7 +18232,8 @@
     var DRAG_AREA_WIDTH = 24;
 
     var TimeSliderLegend = function TimeSliderLegend(_a) {
-      var centerTime = _a.centerTime,
+      var mapId = _a.mapId,
+          centerTime = _a.centerTime,
           secondsPerPx = _a.secondsPerPx,
           _b = _a.dataScaleToSecondsPerPx,
           dataScaleToSecondsPerPx = _b === void 0 ? defaultDataScaleToSecondsPerPx : _b,
@@ -18109,10 +18245,11 @@
           dataEndTime = _a.dataEndTime,
           animationStartTime = _a.animationStartTime,
           animationEndTime = _a.animationEndTime,
-          isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
           timeStep = _a.timeStep,
           _d = _a.mapIsActive,
           mapIsActive = _d === void 0 ? true : _d,
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime,
           onSetNewDate = _a.onSetNewDate,
           onSetCenterTime = _a.onSetCenterTime,
           onSetAnimationStartTime = _a.onSetAnimationStartTime,
@@ -18142,23 +18279,39 @@
           setCenterTimeDragging = _k[1];
 
       var _l = __read(React__namespace.useState(false), 2),
-          mouseDownInLegend = _l[0],
-          setMouseDownInLegend = _l[1];
+          dragTooltipOpen = _l[0],
+          setDragTooltipOpen = _l[1];
+
+      var _m = __read(React__namespace.useState(false), 2),
+          mouseDownInLegend = _m[0],
+          setMouseDownInLegend = _m[1];
 
-      var _m = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
-          localAnimationStartTime = _m[0],
-          setLocalAnimationStartTime = _m[1];
+      var _o = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
+          localAnimationStartTime = _o[0],
+          setLocalAnimationStartTime = _o[1];
 
-      var _o = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
-          localAnimationEndTime = _o[0],
-          setLocalAnimationEndTime = _o[1];
+      var _p = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
+          localAnimationEndTime = _p[0],
+          setLocalAnimationEndTime = _p[1];
 
-      var elem = document.querySelector('.timeSliderLegend');
-      var pixelsToLeft = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['left']; // we need to subtract the left padding so event.x start within the canvas.
+      var _q = __read(React__namespace.useState(moment__default["default"].utc(0)), 2),
+          tooltipTime = _q[0],
+          setTooltipTime = _q[1];
 
-      var _p = __read(React__namespace.useState('auto'), 2),
-          cursorStyle = _p[0],
-          setCursorStyle = _p[1];
+      var _r = __read(React__namespace.useState(false), 2),
+          animationAreaDragging = _r[0],
+          setAnimationAreaDragging = _r[1];
+
+      var animationDiff = React__namespace.useRef();
+      var isClickOrDrag = React__namespace.useRef();
+      var pixelsMovedSinceStartDragging = React__namespace.useRef(0);
+      var elem = document.querySelector(".timeSliderLegend_" + mapId);
+      var pixelsToLeft = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['left'];
+      var pixelsToTop = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect()['top'];
+
+      var _s = __read(React__namespace.useState('auto'), 2),
+          cursorStyle = _s[0],
+          setCursorStyle = _s[1];
 
       var curTime = selectedTime !== undefined ? moment__default["default"].unix(selectedTime).toISOString() : moment__default["default"].utc().toISOString();
       React__namespace.useEffect(function () {
@@ -18188,7 +18341,7 @@
         return function () {
           document.removeEventListener('keydown', handleKeyDown);
         };
-      }, [timeStep, isTimeSliderHoverOn, currentTime, dataStartTime, dataEndTime, mapIsActive, onSetCenterTime, onSetNewDate, curTime]);
+      }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
       /**
        * remove active drag. can happen outside canvas.
        */
@@ -18201,13 +18354,18 @@
           setRightMarkerDragging(false);
           setMouseDownInLegend(false);
           setCenterTimeDragging(false);
+          setDragTooltipOpen(false);
+          setAnimationAreaDragging(false);
+          startDraggingPosition.current = 0;
+          pixelsMovedSinceStartDragging.current = 0;
+          animationDiff.current = undefined;
         };
 
         document.addEventListener('mouseup', handleMouseUp);
         return function () {
           document.removeEventListener('mouseup', handleMouseUp);
         };
-      });
+      }, [centerTimeDragging]);
       var onMouseTouchMoveActions = React.useCallback(function (x) {
         if (!localAnimationStartTime || !localAnimationEndTime) return;
 
@@ -18218,43 +18376,78 @@
             rightMarkerPx = _a[1];
 
         if (leftMarkerDragging) {
+          var mousePosition = leftMarkerPx + x;
+          var rightAnimationPosition = rightMarkerPx - DRAG_AREA_WIDTH * 2; // update tooltip position while dragging
           // Prevent dragging if it would cause markers to cross over, except if the markers
           // are moved away from being crossed over
-          if (x >= rightMarkerPx - DRAG_AREA_WIDTH * 2 || x <= 0) return; // change local time bounds according to either dragged marker
 
-          var mouseTimeUnix = pixelToTimestamp(x - DRAG_AREA_WIDTH / 2, // lets us drag on the marker
+          if (mousePosition >= rightAnimationPosition || mousePosition <= 0) return; // set animation drag info dialog location
+
+          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition; // change local time bounds according to either dragged marker
+
+          var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
           centerTime, canvasWidth, secondsPerPx);
           setLocalAnimationStartTime(mouseTimeUnix);
+          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
           return;
         }
 
         if (rightMarkerDragging) {
-          // Similar condition for other marker
-          if (x <= leftMarkerPx + DRAG_AREA_WIDTH * 2 || x >= canvasWidth) return; // change local time bounds according to either dragged marker
+          var mousePosition = rightMarkerPx + x;
+          var leftAnimationPosition = leftMarkerPx + DRAG_AREA_WIDTH * 2; // Similar condition for other marker
+
+          if (leftAnimationPosition >= mousePosition || mousePosition >= canvasWidth) return; // set animation drag info dialog location
 
-          var mouseTimeUnix = pixelToTimestamp(x + DRAG_AREA_WIDTH / 2, // lets us drag on the marker
+          dragTooltipPosition.current = pixelsToLeft ? mousePosition + pixelsToLeft : mousePosition; // change local time bounds according to either dragged marker
+
+          var mouseTimeUnix = pixelToTimestamp(mousePosition, // lets us drag on the marker
           centerTime, canvasWidth, secondsPerPx);
           setLocalAnimationEndTime(mouseTimeUnix);
+          setTooltipTime(moment__default["default"].unix(mouseTimeUnix));
+          return;
         }
-      }, [centerTime, leftMarkerDragging, localAnimationEndTime, localAnimationStartTime, rightMarkerDragging, secondsPerPx, canvasWidth]);
+
+        if (animationAreaDragging) {
+          if (animationDiff.current === undefined) {
+            var startDraggingPositionTimestamp = pixelToTimestamp(startDraggingPosition.current, centerTime, canvasWidth, secondsPerPx);
+            var diffLeftAnimationToStartDraggingPosition = startDraggingPositionTimestamp - localAnimationStartTime;
+            var diffRightAnimationToStartDraggingPosition = localAnimationEndTime - startDraggingPositionTimestamp;
+            animationDiff.current = {
+              diffStartToRight: diffRightAnimationToStartDraggingPosition,
+              diffStartToLeft: diffLeftAnimationToStartDraggingPosition
+            };
+            return;
+          }
+
+          pixelsMovedSinceStartDragging.current += x;
+          var currentPositionTimestamp = pixelToTimestamp(startDraggingPosition.current + pixelsMovedSinceStartDragging.current, centerTime, canvasWidth, secondsPerPx);
+          var _b = animationDiff.current,
+              diffStartToRight = _b.diffStartToRight,
+              diffStartToLeft = _b.diffStartToLeft;
+          var startTime = currentPositionTimestamp - diffStartToLeft;
+          var endTime = currentPositionTimestamp + diffStartToRight;
+          setLocalAnimationStartTime(startTime);
+          setLocalAnimationEndTime(endTime);
+        }
+      }, [localAnimationStartTime, localAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, pixelsToLeft, animationDiff]);
       var setSelectedTime = React.useCallback(function (x) {
-        setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
-      }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, timeStep]);
+        var unfliteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + x;
+        setUnfilteredSelectedTime(pixelToTimestamp(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
+        setNewRoundedTime(unfliteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+      }, [canvasWidth, centerTime, dataEndTime, dataStartTime, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
       React__namespace.useEffect(function () {
         var handleMouseMove = function handleMouseMove(event) {
+          if (event.movementX === 0) return;
+
           if (mouseDownInLegend) {
             setCenterTimeDragging(true);
             var dragDistanceTime = event.movementX * secondsPerPx;
             var newCenterTime = centerTime - dragDistanceTime;
             onSetCenterTime && onSetCenterTime(newCenterTime);
-          } else {
-            if (!pixelsToLeft) return;
-
-            if (leftMarkerDragging || rightMarkerDragging) {
-              onMouseTouchMoveActions(event.clientX - pixelsToLeft);
-            } else if (selectedTimeDragging) {
-              setSelectedTime(event.clientX - pixelsToLeft);
-            }
+          } else if (leftMarkerDragging || rightMarkerDragging || animationAreaDragging) {
+            onMouseTouchMoveActions(event.movementX);
+          } else if (selectedTimeDragging) {
+            setSelectedTime(event.movementX);
           }
         };
 
@@ -18262,10 +18455,14 @@
         return function () {
           document.removeEventListener('mousemove', handleMouseMove);
         };
-      }, [centerTime, secondsPerPx, onSetCenterTime, mouseDownInLegend, leftMarkerDragging, rightMarkerDragging, onMouseTouchMoveActions, selectedTimeDragging, setSelectedTime, pixelsToLeft]);
+      }, [animationAreaDragging, centerTime, leftMarkerDragging, mouseDownInLegend, onMouseTouchMoveActions, onSetCenterTime, rightMarkerDragging, secondsPerPx, selectedTimeDragging, setSelectedTime]);
       var theme = material.useTheme();
+      var startDraggingPosition = React__namespace.useRef(0);
 
       var onMouseDown = function onMouseDown(x, y, width) {
+        isClickOrDrag.current = 'click';
+        startDraggingPosition.current = x;
+
         var _a = __read([localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
           return timestampToPixel(timestamp, centerTime, width, secondsPerPx);
         }), 3),
@@ -18281,16 +18478,27 @@
         }
 
         if (animationStartTime && animationEndTime && onSetAnimationStartTime && onSetAnimationEndTime) {
-          // start dragging either marker
+          dragTooltipPosition.current = pixelsToLeft ? x + pixelsToLeft : x; // start dragging either marker
+
           if (isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH) && !rightMarkerDragging) {
             setCursorStyle('grabbing');
             setLeftMarkerDragging(true);
+            setTooltipTime(moment__default["default"].utc(animationStartTime));
+            setDragTooltipOpen(true);
             return;
           }
 
           if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
             setCursorStyle('grabbing');
             setRightMarkerDragging(true);
+            setTooltipTime(moment__default["default"].utc(animationEndTime));
+            setDragTooltipOpen(true);
+            return;
+          }
+
+          if (isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) && !animationAreaDragging) {
+            setCursorStyle('grabbing');
+            setAnimationAreaDragging(true);
             return;
           }
         } // clicking the timeslider
@@ -18299,18 +18507,36 @@
         setMouseDownInLegend(true);
       };
 
+      React__namespace.useEffect(function () {
+        var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
+
+        if (stoppedDragging) {
+          if (localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
+            onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
+          }
+
+          if (localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
+            onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000).format(dateFormat));
+          }
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [leftMarkerDragging, rightMarkerDragging, animationAreaDragging]);
+
       var onMouseUpTouchEnd = function onMouseUpTouchEnd(x) {
-        // Dispatch changes when releasing mouse
-        if (leftMarkerDragging) {
-          onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
-        } else if (rightMarkerDragging) {
-          onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000).format(dateFormat));
-        } else if (!selectedTimeDragging && !centerTimeDragging) {
-          setSelectedTime(x);
+        if (isClickOrDrag.current === 'click') {
+          // we need to set the unfiltered time, so the timebox will update accordingly
+          setUnfilteredSelectedTime(pixelToTimestamp(x, centerTime, canvasWidth, secondsPerPx));
+          setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
         }
+
+        isClickOrDrag.current = undefined;
       };
 
       var onMouseMove = function onMouseMove(x, y, event, width) {
+        if (isClickOrDrag.current === 'click') {
+          isClickOrDrag.current = 'drag';
+        }
+
         if (selectedTimeDragging || leftMarkerDragging || rightMarkerDragging) return;
 
         var _a = __read([localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
@@ -18324,18 +18550,41 @@
         var leftAnimationIconArea = isLeftAnimationIconArea(x, leftMarkerPx, DRAG_AREA_WIDTH);
         var rightAnimationIconArea = isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH);
         var selectedTimeArea = isSelectedTimeIconArea(x, selectedTimePx, DRAG_AREA_WIDTH);
+        var insideAnimationArea = isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx);
         var hoveringLegendHandles = leftAnimationIconArea || rightAnimationIconArea || selectedTimeArea || mouseDownInLegend;
 
         if (hoveringLegendHandles) {
           setCursorStyle('ew-resize');
+        } else if (insideAnimationArea && !animationAreaDragging) {
+          setCursorStyle('grab');
+        } else if (insideAnimationArea && animationAreaDragging) {
+          setCursorStyle('grabbing');
         } else {
           setCursorStyle('auto');
         }
       };
 
-      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+      var dragTooltipPosition = React__namespace.useRef();
+      var popperRef = React__namespace.useRef(null);
+
+      var setTooltipPosition = function setTooltipPosition() {
+        var tooltipX = dragTooltipPosition.current;
+        var tooltipY = pixelsToTop && pixelsToTop - TIME_SLIDER_LEGEND_HEIGHT * 2.5;
+        return new DOMRect(tooltipX, tooltipY, 0, 0);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        title: tooltipTime.format('HH:mm'),
+        open: dragTooltipOpen,
+        PopperProps: {
+          popperRef: popperRef,
+          anchorEl: {
+            getBoundingClientRect: setTooltipPosition
+          }
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "timeSliderLegend",
-        className: "timeSliderLegend",
+        className: "timeSliderLegend_" + mapId,
         sx: {
           height: TIME_SLIDER_LEGEND_HEIGHT + "px",
           borderRadius: '4.5px',
@@ -18357,9 +18606,13 @@
           setCanvasWidth(width);
           drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
         }
-      }));
+      })));
     };
 
+    function convertStringTimeToUnix(time) {
+      return time ? moment__default["default"].utc(time).unix() : undefined;
+    }
+
     var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
     /* *
@@ -18411,7 +18664,7 @@
      * */
     var onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle) {
       if (!selectedTime || mouseDownInTimeBox) return;
-      var selectedTimePx = timestampToPixel(selectedTime.unix(), centerTime, width, secondsPerPx);
+      var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
 
       if (isTimeBoxArea(x, selectedTimePx)) {
         setCursorStyle('grab');
@@ -18421,7 +18674,7 @@
     };
     var onMouseDown = function onMouseDown(x, width, selectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox) {
       if (!selectedTime) return;
-      var selectedTimePx = timestampToPixel(selectedTime.unix(), centerTime, width, secondsPerPx);
+      var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
 
       if (isTimeBoxArea(x, selectedTimePx)) {
         setCursorStyle('grabbing');
@@ -18536,7 +18789,9 @@
           timeStep = _a.timeStep,
           dataStartTime = _a.dataStartTime,
           dataEndTime = _a.dataEndTime,
-          onSetNewDate = _a.onSetNewDate;
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          onSetNewDate = _a.onSetNewDate,
+          setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime;
       var TIME_BOX_WIDTH = 140;
       var theme = material.useTheme();
 
@@ -18577,11 +18832,9 @@
       React__default["default"].useEffect(function () {
         var handleMouseMove = function handleMouseMove(event) {
           if (mouseDownInTimeBox) {
-            var elem = document.querySelector('.timeSliderTimeBox');
-            var rect = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect(); // we need to subtract the left padding so event.x start within the canvas.
-
-            if (!rect) return;
-            setNewRoundedTime(event.clientX - rect['left'], centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+            var localSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx) + event.movementX;
+            setUnfilteredSelectedTime(pixelToTimestamp(localSelectedTimePx, centerTime, canvasWidth, secondsPerPx));
+            setNewRoundedTime(localSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
           }
         };
 
@@ -18589,7 +18842,7 @@
         return function () {
           document.removeEventListener('mousemove', handleMouseMove);
         };
-      });
+      }, [canvasWidth, centerTime, dataEndTime, dataStartTime, mouseDownInTimeBox, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
       return /*#__PURE__*/React__default["default"].createElement(system.Box, {
         "data-testid": "timeSliderTimeBox",
         className: "timeSliderTimeBox",
@@ -18610,11 +18863,14 @@
           onMouseDown(x, width, selectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox);
         },
         onMouseUp: function onMouseUp(x) {
-          setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+          if (mouseDownInTimeBox) {
+            setUnfilteredSelectedTime(pixelToTimestamp(x, centerTime, canvasWidth, secondsPerPx));
+            setNewRoundedTime(x, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+          }
         },
         onRenderCanvas: function onRenderCanvas(ctx, width, height) {
           setCanvasWidth(width);
-          renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime.unix(), secondsPerPx, scale);
+          renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, scale);
         }
       }));
     };
@@ -18656,12 +18912,13 @@
     var defaultProps = {
       centerTime: moment__default["default"].utc().startOf('day').hours(12).unix(),
       secondsPerPx: 5,
-      selectedTime: moment__default["default"].utc().startOf('day').hours(12),
+      selectedTime: moment__default["default"].utc().startOf('day').hours(12).unix(),
       dataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx
     };
 
     var TimeSlider = function TimeSlider(_a) {
-      var buttons = _a.buttons,
+      var mapId = _a.mapId,
+          buttons = _a.buttons,
           timeBox = _a.timeBox,
           legend = _a.legend,
           _b = _a.mapIsActive,
@@ -18671,6 +18928,11 @@
           _d = _a.onToggleTimeSlider,
           onToggleTimeSlider = _d === void 0 ? function () {} : _d;
       useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+
+      var _e = __read(React__namespace.useState(defaultProps.selectedTime), 2),
+          unfilteredSelectedTime = _e[0],
+          setUnfilteredSelectedTime = _e[1];
+
       var visibilityState = isVisible ? 'visible' : 'hidden';
       return isVisible ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
         style: {
@@ -18695,7 +18957,8 @@
           zIndex: 99
         }
       }, timeBox || /*#__PURE__*/React__namespace.createElement(TimeSliderCurrentTimeBox, __assign({}, defaultProps, {
-        selectedTime: defaultProps.selectedTime
+        unfilteredSelectedTime: unfilteredSelectedTime,
+        setUnfilteredSelectedTime: setUnfilteredSelectedTime
       }))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -18703,8 +18966,10 @@
       }, buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
-        selectedTime: defaultProps.selectedTime.unix(),
-        mapIsActive: mapIsActive
+        mapId: mapId,
+        mapIsActive: mapIsActive,
+        unfilteredSelectedTime: unfilteredSelectedTime,
+        setUnfilteredSelectedTime: setUnfilteredSelectedTime
       })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         sx: {
@@ -18838,12 +19103,6 @@
       var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
         return isTimestepAuto(store, mapId);
       });
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
-      });
-      var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
-        return getLayerTimeDimension(store, activeLayerId);
-      });
       var onToggleTimestepAuto = React__namespace.useCallback(function () {
         dispatch(mapActions$1.toggleTimestepAuto({
           mapId: mapId,
@@ -18863,9 +19122,7 @@
         timeStep: timeStep,
         onChangeTimeStep: onSetTimeStep,
         disabled: isAnimating$1,
-        isTimestepAuto: isTimestepAuto$1,
-        onToggleTimestepAuto: onToggleTimestepAuto,
-        timeDimension: activeLayerTimeDimension
+        onToggleTimestepAuto: onToggleTimestepAuto
       });
     };
 
@@ -18999,6 +19256,57 @@
       });
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_a) {
+      var mapId = _a.mapId;
+      var dispatch = reactRedux.useDispatch();
+      var isAnimating$1 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+      var animationStartTime = reactRedux.useSelector(function (store) {
+        return getAnimationStartTime(store, mapId);
+      });
+      var animationEndTime = reactRedux.useSelector(function (store) {
+        return getAnimationEndTime(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();
+        dispatch(mapActions$1.setAnimationEndTime({
+          mapId: mapId,
+          animationEndTime: animationEndTime
+        }));
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(AnimationLengthButton, {
+        disabled: isAnimating$1,
+        animationLength: currentLength || Number(AnimationLength.Hours24),
+        onChangeAnimationLength: handlechangeAnimationLength
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -19027,11 +19335,35 @@
     var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_a) {
       var sourceId = _a.sourceId,
           mapId = _a.mapId;
+      var dispatch = reactRedux.useDispatch();
+      var isTimestepAuto$1 = reactRedux.useSelector(function (store) {
+        return isTimestepAuto(store, mapId);
+      });
+      var timeStep = reactRedux.useSelector(function (store) {
+        return getMapTimeStep(store, mapId);
+      });
+      var activeLayerId = reactRedux.useSelector(function (store) {
+        return getActiveLayerId(store, mapId);
+      });
+      var activeLayerTimeDimension = reactRedux.useSelector(function (store) {
+        return getLayerTimeDimension(store, activeLayerId);
+      });
+      var onSetTimeStep = React__namespace.useCallback(function (timeStep, origin) {
+        dispatch(mapActions$1.setTimeStep(__assign({
+          mapId: mapId,
+          timeStep: timeStep
+        }, origin && {
+          origin: origin
+        })));
+      }, [dispatch, mapId]);
       return /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, {
         nowBtn: /*#__PURE__*/React__namespace.createElement(NowButtonConnect, {
           mapId: mapId,
           sourceId: sourceId
         }),
+        animationLengthBtn: /*#__PURE__*/React__namespace.createElement(AnimationLengthButtonConnect, {
+          mapId: mapId
+        }),
         autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
           mapId: mapId
         }),
@@ -19043,7 +19375,11 @@
         }),
         timeScaleBtn: /*#__PURE__*/React__namespace.createElement(TimeScaleButtonConnect, {
           mapId: mapId
-        })
+        }),
+        timeStep: timeStep,
+        isTimestepAuto: isTimestepAuto$1,
+        onChangeTimeStep: onSetTimeStep,
+        timeDimension: activeLayerTimeDimension
       });
     };
 
@@ -19197,9 +19533,11 @@
         timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
         animationStartTime: getAnimationStartTime(store, props.mapId),
         animationEndTime: getAnimationEndTime(store, props.mapId),
-        activeWindowId: getActiveWindowId(store)
+        activeWindowId: getActiveWindowId(store),
+        unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
       };
     }, {
+      setTimeSliderUnfilteredSelectedTime: mapActions$1.setTimeSliderUnfilteredSelectedTime,
       stopMapAnimation: mapActions$1.mapStopAnimation,
       setTime: genericActions.setTime,
       mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
@@ -19228,7 +19566,9 @@
           mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime,
           mapSetTimeSliderSecondsPerPx = _a.mapSetTimeSliderSecondsPerPx,
           setAnimationStartTime = _a.setAnimationStartTime,
-          setAnimationEndTime = _a.setAnimationEndTime;
+          setAnimationEndTime = _a.setAnimationEndTime,
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          setTimeSliderUnfilteredSelectedTime = _a.setTimeSliderUnfilteredSelectedTime;
       var selectedTime = getTimeBounds(dimensions).selectedTime;
       var currentTime = moment__default["default"].utc().unix();
 
@@ -19238,6 +19578,7 @@
 
       var mapIsActive = mapId === activeWindowId;
       return /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, {
+        mapId: mapId,
         centerTime: centerTime,
         secondsPerPx: secondsPerPx,
         dataScaleToSecondsPerPx: dataScaleToSecondsPerPx,
@@ -19251,6 +19592,13 @@
         animationEndTime: animationEndTime,
         timeStep: timeStep,
         mapIsActive: mapIsActive,
+        unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
+        setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
+          if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
+            timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
+            mapId: mapId
+          });
+        },
         onSetNewDate: function onSetNewDate(newDate) {
           if (isAnimating) {
             stopMapAnimation({
@@ -19330,9 +19678,11 @@
         secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
         scale: getMapTimeSliderScale(store, props.mapId),
         timeStep: getMapTimeStep(store, props.mapId),
-        isAnimating: isAnimating(store, props.mapId)
+        isAnimating: isAnimating(store, props.mapId),
+        unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
       };
     }, {
+      setTimeSliderUnfilteredSelectedTime: mapActions$1.setTimeSliderUnfilteredSelectedTime,
       stopMapAnimation: mapActions$1.mapStopAnimation,
       setTime: genericActions.setTime
     });
@@ -19348,8 +19698,10 @@
           timeStep = _a.timeStep,
           isAnimating = _a.isAnimating,
           stopMapAnimation = _a.stopMapAnimation,
+          unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          setTimeSliderUnfilteredSelectedTime = _a.setTimeSliderUnfilteredSelectedTime,
           setTime = _a.setTime;
-      var selectedTime = getMomentTimeBounds(dimensions).selectedTime;
+      var selectedTime = getTimeBounds(dimensions).selectedTime;
 
       var _b = __read(getDataLimitsFromLayers(layers), 2),
           dataStartTime = _b[0],
@@ -19363,6 +19715,13 @@
         dataStartTime: dataStartTime,
         dataEndTime: dataEndTime,
         timeStep: timeStep,
+        unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
+        setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
+          if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
+            timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
+            mapId: mapId
+          });
+        },
         onSetNewDate: function onSetNewDate(newDate) {
           if (isAnimating) {
             stopMapAnimation({
@@ -19447,6 +19806,7 @@
       };
 
       return /*#__PURE__*/React__namespace.createElement(TimeSlider, {
+        mapId: mapId,
         buttons: /*#__PURE__*/React__namespace.createElement(TimeSliderButtonsConnect, {
           mapId: mapId,
           sourceId: sourceId
@@ -23529,12 +23889,11 @@
         var handleKeyPress = function handleKeyPress(event) {
           var target = event.target;
           var map = getWMJSMapById(mapId);
+          var key = event.key,
+              type = event.type;
+          keysPressedDown[key] = type === 'keydown';
 
           if (map && target.tagName !== 'INPUT' && mapIsActive) {
-            var key = event.key,
-                type = event.type;
-            keysPressedDown[key] = type === 'keydown';
-
             if (keysPressedDown['+']) {
               map.zoomIn(1);
             } else if (keysPressedDown['-']) {
@@ -23911,6 +24270,9 @@
           mapId: mapId,
           sourceId: sourceId
         }),
+        animationLengthBtn: /*#__PURE__*/React__default["default"].createElement(AnimationLengthButtonConnect, {
+          mapId: mapId
+        }),
         autoUpdateBtn: /*#__PURE__*/React__default["default"].createElement(AutoUpdateButtonConnect, {
           mapId: mapId
         }),
@@ -25594,21 +25956,29 @@
      * */
     var MapWarningProperties = function MapWarningProperties(_a) {
       var selectedFeatureProperties = _a.selectedFeatureProperties,
-          languageIndex = _a.languageIndex;
+          languageIndex = _a.languageIndex,
+          parentSize = _a.parentSize;
       var language = languageIndex || 0;
+      var newWidth = parentSize ? parentSize - 100 : 350;
       return /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          position: 'fixed',
+          width: newWidth + "px",
+          height: '1px',
+          display: 'flex',
+          justifyContent: 'center',
+          left: '50px'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "map-warning-properties",
         style: {
-          width: '100%',
-          height: '15%',
-          marginTop: '30px',
-          marginLeft: '100px',
-          position: 'relative',
-          zIndex: 10000,
-          backgroundColor: '#CCCCCCC0',
+          marginTop: '50px',
+          width: '350px',
+          height: '190px',
           padding: '0px 20px 20px',
           overflow: 'auto',
-          fontSize: '11px'
+          fontSize: '11px',
+          backgroundColor: '#CCCCCCC0'
         }
       }, /*#__PURE__*/React__default["default"].createElement("h1", {
         "data-testid": "map-warning-properties-title"
@@ -25622,7 +25992,7 @@
         "data-testid": "map-warning-properties-row"
       }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Identifier: ", selectedFeatureProperties.identifier));
+      }, "Identifier: ", selectedFeatureProperties.identifier)));
     };
 
     /* *