@opengeoweb/core 4.5.0 → 4.6.0

package/index.esm.js

@@ -7,7 +7,7 @@ import _, { debounce, isEqual, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { Pause, Play, Add, Copy, Flag, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Pause, Play, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, FormControl, InputLabel, List, ListItem, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
@@ -398,6 +398,19 @@ var Scale;
   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) {
@@ -591,6 +604,7 @@ var getLastTimeStepForLayerId = function getLastTimeStepForLayerId(layerId) {
 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; },
@@ -1964,7 +1978,9 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     activeMapId: activeMapId,
     isOpen: setOpen,
     type: type,
-    source: source
+    source: source,
+    isLoading: false,
+    error: undefined
   };
 };
 var initialState$4 = {
@@ -2047,6 +2063,18 @@ var slice$4 = createSlice({
     setActiveWindowId: function setActiveWindowId(draft, action) {
       var activeWindowId = action.payload.activeWindowId;
       draft.activeWindowId = activeWindowId;
+    },
+    toggleIsLoadingDialog: function toggleIsLoadingDialog(draft, action) {
+      var _action$payload3 = action.payload,
+          isLoading = _action$payload3.isLoading,
+          type = _action$payload3.type;
+      draft.dialogs[type].isLoading = isLoading;
+    },
+    setErrorDialog: function setErrorDialog(draft, action) {
+      var _action$payload4 = action.payload,
+          error = _action$payload4.error,
+          type = _action$payload4.type;
+      draft.dialogs[type].error = error;
     }
   }
 });
@@ -2255,50 +2283,50 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].animationDelay = animationDelay;
     },
-    setAnimationInterval: function setAnimationInterval(draft, action) {
+    layerMoveLayer: function layerMoveLayer(draft, action) {
       var _action$payload9 = action.payload,
-          mapId = _action$payload9.mapId,
-          interval = _action$payload9.interval;
+          oldIndex = _action$payload9.oldIndex,
+          newIndex = _action$payload9.newIndex,
+          mapId = _action$payload9.mapId;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].timeStep = interval;
+      draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
     },
-    layerMoveLayer: function layerMoveLayer(draft, action) {
+    setActiveLayerId: function setActiveLayerId(draft, action) {
       var _action$payload10 = action.payload,
-          oldIndex = _action$payload10.oldIndex,
-          newIndex = _action$payload10.newIndex,
-          mapId = _action$payload10.mapId;
+          mapId = _action$payload10.mapId,
+          layerId = _action$payload10.layerId;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].mapLayers = moveArrayElements(draft.byId[mapId].mapLayers, oldIndex, newIndex);
+      draft.byId[mapId].activeLayerId = layerId;
     },
-    setActiveLayerId: function setActiveLayerId(draft, action) {
+    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
       var _action$payload11 = action.payload,
           mapId = _action$payload11.mapId,
-          layerId = _action$payload11.layerId;
+          timeSliderCenterTime = _action$payload11.timeSliderCenterTime;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].activeLayerId = layerId;
+      draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
-    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
+    setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
       var _action$payload12 = action.payload,
           mapId = _action$payload12.mapId,
-          timeSliderCenterTime = _action$payload12.timeSliderCenterTime;
+          timeSliderUnfilteredSelectedTime = _action$payload12.timeSliderUnfilteredSelectedTime;
 
       if (!draft.byId[mapId]) {
         return;
       }
 
-      draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
+      draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
     },
     setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
       var _action$payload13 = action.payload,
@@ -2424,21 +2452,10 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].activeMapPresetId = presetId;
     },
-    setIsMapPresetLoading: function setIsMapPresetLoading(draft, action) {
+    setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
       var _action$payload24 = action.payload,
           mapId = _action$payload24.mapId,
-          isLoading = _action$payload24.isLoading;
-
-      if (!draft.byId[mapId]) {
-        return;
-      }
-
-      draft.byId[mapId].isMapPresetLoading = isLoading;
-    },
-    setHasMapPresetChanges: function setHasMapPresetChanges(draft, action) {
-      var _action$payload25 = action.payload,
-          mapId = _action$payload25.mapId,
-          hasChanges = _action$payload25.hasChanges;
+          hasChanges = _action$payload24.hasChanges;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2446,21 +2463,10 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].hasMapPresetChanges = hasChanges;
     },
-    setMapPresetError: function setMapPresetError(draft, action) {
-      var _action$payload26 = action.payload,
-          mapId = _action$payload26.mapId,
-          error = _action$payload26.error;
-
-      if (!draft.byId[mapId]) {
-        return;
-      }
-
-      draft.byId[mapId].mapPresetError = error;
-    },
     toggleDockedLayerManager: function toggleDockedLayerManager(draft, action) {
-      var _action$payload27 = action.payload,
-          mapId = _action$payload27.mapId,
-          openDockedLayerManager = _action$payload27.openDockedLayerManager;
+      var _action$payload25 = action.payload,
+          mapId = _action$payload25.mapId,
+          openDockedLayerManager = _action$payload25.openDockedLayerManager;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2473,9 +2479,9 @@ var slice$3 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(addLayer$1, function (draft, action) {
-      var _action$payload28 = action.payload,
-          layerId = _action$payload28.layerId,
-          mapId = _action$payload28.mapId;
+      var _action$payload26 = action.payload,
+          layerId = _action$payload26.layerId,
+          mapId = _action$payload26.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2492,10 +2498,10 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].mapLayers.unshift(layerId);
     }).addCase(addBaseLayer, function (draft, action) {
-      var _action$payload29 = action.payload,
-          layer = _action$payload29.layer,
-          layerId = _action$payload29.layerId,
-          mapId = _action$payload29.mapId;
+      var _action$payload27 = action.payload,
+          layer = _action$payload27.layer,
+          layerId = _action$payload27.layerId,
+          mapId = _action$payload27.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2545,9 +2551,9 @@ var slice$3 = createSlice({
         }
       }
     }).addCase(setBaseLayers$1, function (draft, action) {
-      var _action$payload30 = action.payload,
-          layers = _action$payload30.layers,
-          mapId = _action$payload30.mapId; // Split into base and overlayers
+      var _action$payload28 = action.payload,
+          layers = _action$payload28.layers,
+          mapId = _action$payload28.mapId; // Split into base and overlayers
 
       var baseLayers = [];
       var overLayers = [];
@@ -2574,9 +2580,9 @@ var slice$3 = createSlice({
         if (overLayerIds.length !== 0) draft.byId[mapId].overLayers = overLayerIds;
       }
     }).addCase(layerDelete$1, function (draft, action) {
-      var _action$payload31 = action.payload,
-          mapId = _action$payload31.mapId,
-          layerId = _action$payload31.layerId;
+      var _action$payload29 = action.payload,
+          mapId = _action$payload29.mapId,
+          layerId = _action$payload29.layerId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2597,9 +2603,9 @@ var slice$3 = createSlice({
         draft.byId[mapId].activeLayerId = '';
       }
     }).addCase(baseLayerDelete, function (draft, action) {
-      var _action$payload32 = action.payload,
-          mapId = _action$payload32.mapId,
-          layerId = _action$payload32.layerId;
+      var _action$payload30 = action.payload,
+          mapId = _action$payload30.mapId,
+          layerId = _action$payload30.layerId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2612,14 +2618,14 @@ var slice$3 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerChangeDimension$1, function (draft, action) {
-      var _action$payload33 = action.payload,
-          layerId = _action$payload33.layerId,
-          dimension = _action$payload33.dimension;
+      var _action$payload31 = action.payload,
+          layerId = _action$payload31.layerId,
+          dimension = _action$payload31.dimension;
       produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension);
     }).addCase(setTimeSync, function (draft, action) {
-      var _action$payload34 = action.payload,
-          targetsFromAction = _action$payload34.targets,
-          source = _action$payload34.source;
+      var _action$payload32 = action.payload,
+          targetsFromAction = _action$payload32.targets,
+          source = _action$payload32.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -2643,9 +2649,9 @@ var slice$3 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload35 = action.payload,
-          targetsFromAction = _action$payload35.targets,
-          source = _action$payload35.source;
+      var _action$payload33 = action.payload,
+          targetsFromAction = _action$payload33.targets,
+          source = _action$payload33.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -2676,9 +2682,9 @@ var slice$3 = createSlice({
        * These targets can be used as payloads in new Layer actions.
        * These actions are here handled via the layer reducer, as it is the same logic
        */
-      var _action$payload36 = action.payload,
-          targets = _action$payload36.targets,
-          source = _action$payload36.source;
+      var _action$payload34 = action.payload,
+          targets = _action$payload34.targets,
+          source = _action$payload34.source;
       return targets.reduce(function (prevState, target) {
         var action = {
           payload: target,
@@ -2694,9 +2700,9 @@ var slice$3 = createSlice({
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
       return reducer$3(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload37 = action.payload,
-          mapId = _action$payload37.mapId,
-          dimensionFromAction = _action$payload37.dimension;
+      var _action$payload35 = action.payload,
+          mapId = _action$payload35.mapId,
+          dimensionFromAction = _action$payload35.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -2719,9 +2725,9 @@ var slice$3 = createSlice({
       draft.byId[mapId].timeStep = defaultTimeStep;
       draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
     }).addCase(uiActions.registerDialog, function (draft, action) {
-      var _action$payload38 = action.payload,
-          mapId = _action$payload38.mapId,
-          type = _action$payload38.type;
+      var _action$payload36 = action.payload,
+          mapId = _action$payload36.mapId,
+          type = _action$payload36.type;
 
       if (!draft.byId[mapId]) {
         return;
@@ -3150,6 +3156,12 @@ var getActiveWindowId = function getActiveWindowId(store) {
 
   return (_a = store === null || store === void 0 ? void 0 : store.ui) === null || _a === void 0 ? void 0 : _a.activeWindowId;
 };
+var getDialogIsLoading = createSelector(getDialogDetailsByType, function (details) {
+  return details && details.isLoading || false;
+});
+var getDialogError = createSelector(getDialogDetailsByType, function (details) {
+  return details && details.error || '';
+});
 
 var selectors$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3160,7 +3172,9 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getDialogOrder: getDialogOrder,
   getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
   getDialogSource: getDialogSource,
-  getActiveWindowId: getActiveWindowId
+  getActiveWindowId: getActiveWindowId,
+  getDialogIsLoading: getDialogIsLoading,
+  getDialogError: getDialogError
 });
 
 /* *
@@ -3969,6 +3983,19 @@ var getMapAnimationDelay = createSelector(getMapById, function (store) {
 var getMapTimeSliderCenterTime = createSelector(getMapById, function (store) {
   return store ? store.timeSliderCenterTime : moment().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 = createSelector(getMapById, function (store) {
+  return store ? store.timeSliderUnfilteredSelectedTime : null;
+});
 /**
  * Returns the number of seconds per pixel on the time slider
  *
@@ -4275,18 +4302,6 @@ var getMapPreset = createSelector(getMapLayers, getMapBaseLayers, getMapOverLaye
     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 = createSelector(getMapById, function (store) {
-  return store && store.isMapPresetLoading ? store.isMapPresetLoading : false;
-});
 /**
  * Returns the has changes state of the map preset
  *
@@ -4299,18 +4314,6 @@ var getIsMapPresetLoading = createSelector(getMapById, function (store) {
 var getHasMapPresetChanges = 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 = createSelector(getMapById, function (store) {
-  return store === null || store === void 0 ? void 0 : store.mapPresetError;
-});
 /**
  * Returns whether the docked layer manager is open
  *
@@ -4353,6 +4356,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getMapTimeStep: getMapTimeStep,
   getMapAnimationDelay: getMapAnimationDelay,
   getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
+  getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
   getMapTimeSliderSecondsPerPx: getMapTimeSliderSecondsPerPx,
   getMapTimeSliderDataScaleToSecondsPerPx: getMapTimeSliderDataScaleToSecondsPerPx,
   isTimestepAuto: isTimestepAuto,
@@ -4372,9 +4376,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getActiveMapPresetId: getActiveMapPresetId,
   getLegendId: getLegendId,
   getMapPreset: getMapPreset,
-  getIsMapPresetLoading: getIsMapPresetLoading,
   getHasMapPresetChanges: getHasMapPresetChanges,
-  getMapPresetError: getMapPresetError,
   getIsDockedLayerManagerOpen: getIsDockedLayerManagerOpen
 });
 
@@ -8149,9 +8151,9 @@ function setMapPresetSaga(_ref6) {
           }
 
           _context8.next = 42;
-          return put(mapActions$1.setAnimationInterval({
+          return put(mapActions$1.setTimeStep({
             mapId: mapId,
-            interval: interval
+            timeStep: interval
           }));
 
         case 42:
@@ -9379,7 +9381,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var marks$2 = [{
+var marks$3 = [{
   value: 0,
   label: '0 %'
 }, {
@@ -9517,7 +9519,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
     step: 0.01,
     max: 1,
     min: 0,
-    marks: marks$2,
+    marks: marks$3,
     onChange: function onChange(event, newValue) {
       event.stopPropagation();
       onLayerChangeOpacity(newValue);
@@ -9695,7 +9697,9 @@ var ActivateLayer = function ActivateLayer(_ref) {
   return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClick,
-    icon: /*#__PURE__*/React.createElement(Flag, {
+    icon: isActive ? /*#__PURE__*/React.createElement(Both, {
+      sx: iconStyle
+    }) : /*#__PURE__*/React.createElement(None, {
       sx: iconStyle
     }),
     testId: id,
@@ -11767,6 +11771,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeSmall);
     },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeSmall);
+    },
     sx: iconStyle,
     className: "collapseSmall-btn"
   }, /*#__PURE__*/React.createElement(CollapseSmall, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -11777,6 +11784,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeMedium);
     },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeMedium);
+    },
     sx: iconStyle,
     className: "collapseMedium-btn"
   }, /*#__PURE__*/React.createElement(CollapseMedium, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -11787,6 +11797,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeLarge);
     },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeLarge);
+    },
     sx: iconStyle,
     className: "collapseLarge-btn"
   }, /*#__PURE__*/React.createElement(CollapseLarge, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -11798,6 +11811,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     sx: iconStyle,
     onClick: function onClick() {
       return onClickDockButton();
+    },
+    onTouchEnd: function onTouchEnd() {
+      return onClickDockButton();
     }
   }, isDockedLayerManager ? /*#__PURE__*/React.createElement(CollapseWindow, {
     "data-testid": "dockedLayerManager-collapse"
@@ -11914,7 +11930,11 @@ var LayerManager = function LayerManager(_ref) {
         setSize(dragSize);
       }
     }
-  }, /*#__PURE__*/React.createElement(Box, null, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
+    }
+  }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary",
     sx: {
@@ -12021,12 +12041,20 @@ var useSetupDialog = function useSetupDialog(dialogType) {
   var isDialogOpen = useSelector(function (store) {
     return getisDialogOpen(store, dialogType);
   });
+  var uiIsLoading = useSelector(function (store) {
+    return getDialogIsLoading(store, dialogType);
+  });
+  var uiError = useSelector(function (store) {
+    return getDialogError(store, dialogType);
+  });
   return {
     setDialogOrder: setDialogOrder,
     dialogOrder: dialogOrder,
     onCloseDialog: onCloseDialog,
     uiSource: uiSource,
-    isDialogOpen: isDialogOpen
+    isDialogOpen: isDialogOpen,
+    uiIsLoading: uiIsLoading,
+    uiError: uiError
   };
 };
 
@@ -12115,19 +12143,15 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
   var mapId = useSelector(function (store) {
     return getDialogMapId(store, dialogType);
   });
-  var isMapPresetLoading = useSelector(function (store) {
-    return getIsMapPresetLoading(store, mapId);
-  });
-  var mapPresetError = useSelector(function (store) {
-    return getMapPresetError(store, mapId);
-  });
 
   var _useSetupDialog = useSetupDialog(dialogType),
       dialogOrder = _useSetupDialog.dialogOrder,
       setDialogOrder = _useSetupDialog.setDialogOrder,
       onCloseDialog = _useSetupDialog.onCloseDialog,
       isDialogOpen = _useSetupDialog.isDialogOpen,
-      uiSource = _useSetupDialog.uiSource;
+      uiSource = _useSetupDialog.uiSource,
+      uiIsLoading = _useSetupDialog.uiIsLoading,
+      uiError = _useSetupDialog.uiError;
 
   useFetchServices(dialogType, preloadedMapServices);
 
@@ -12152,8 +12176,8 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     order: dialogOrder,
     source: uiSource,
     leftHeaderComponent: leftHeaderComponent,
-    isLoading: isMapPresetLoading,
-    error: mapPresetError,
+    isLoading: uiIsLoading,
+    error: uiError,
     onToggleDock: onToggleDock
   });
 };
@@ -13776,6 +13800,7 @@ var LayerList = function LayerList(_ref) {
   var rowMargin = 4;
   var rowHeight = widthToRowHeight(layerSelectWidth);
   var layerSelectFilterHeight = 155 + serviceListHeight;
+  var minHeight = 400;
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -13784,7 +13809,7 @@ var LayerList = function LayerList(_ref) {
       fontSize: '12px'
     }
   }, filteredLayers.length, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
-    height: layerSelectHeight - layerSelectFilterHeight,
+    height: layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight,
     itemCount: filteredLayers.length,
     itemSize: rowHeight + rowMargin
   }, function (_ref2) {
@@ -14543,7 +14568,14 @@ var LayerSelect = function LayerSelect(_ref) {
       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,
@@ -15996,7 +16028,7 @@ var SpeedButton = function SpeedButton(_ref) {
  * 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'
@@ -16091,18 +16123,11 @@ var TimeStepButton = function TimeStepButton(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$isTimestepAuto = _ref.isTimestepAuto,
       isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
-      timeDimension = _ref.timeDimension,
       onChangeTimeStep = _ref.onChangeTimeStep,
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
       onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
       isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
-  var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-  React.useEffect(function () {
-    if (isTimestepAuto) {
-      onChangeTimeStep(timeStepFromLayer);
-    }
-  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
   var handleMenuItemClick = function handleMenuItemClick(mark) {
     if (isTimestepAuto) {
@@ -16115,7 +16140,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
   return /*#__PURE__*/React.createElement(TimeSliderMenu, {
     title: timeStepTitle,
     isOpenByDefault: isOpenByDefault,
-    marks: marks$1,
+    marks: marks$2,
     value: timeStep,
     handleMenuItemClick: handleMenuItemClick,
     isDisabled: disabled,
@@ -16142,7 +16167,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
  * 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'
@@ -16193,7 +16218,7 @@ var TimeScaleButton = function TimeScaleButton(_ref) {
   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];
@@ -16204,7 +16229,7 @@ var TimeScaleButton = function TimeScaleButton(_ref) {
   return /*#__PURE__*/React.createElement(TimeSliderMenu, {
     handleMenuItemClick: onChangeSliderValue,
     icon: /*#__PURE__*/React.createElement(Clock, null),
-    marks: marks,
+    marks: marks$1,
     title: "Time scale",
     value: timeSliderScale,
     onChangeMouseWheel: onChangeSliderValue
@@ -16227,7 +16252,7 @@ var TimeScaleButton = function TimeScaleButton(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var title = 'Now';
+var title$1 = 'Now';
 
 var NowButton = function NowButton(_ref) {
   var _ref$onSetNow = _ref.onSetNow,
@@ -16235,7 +16260,7 @@ var NowButton = function NowButton(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: title,
+    title: title$1,
     "data-testid": "nowButtonTooltip"
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     disabled: disabled,
@@ -16248,6 +16273,86 @@ var NowButton = function NowButton(_ref) {
   }))));
 };
 
+/* *
+ * 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(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$animationLength = _ref.animationLength,
+      animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
+      onChangeAnimationLength = _ref.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.createElement(TimeSliderMenu, {
+    handleMenuItemClick: onChangeSliderValue,
+    icon: /*#__PURE__*/React.createElement(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.
@@ -16269,7 +16374,8 @@ var OptionsMenu = function OptionsMenu(_ref) {
       nowBtn = _ref.nowBtn,
       speedBtn = _ref.speedBtn,
       timeScaleBtn = _ref.timeScaleBtn,
-      timeStepBtn = _ref.timeStepBtn;
+      timeStepBtn = _ref.timeStepBtn,
+      animationLengthBtn = _ref.animationLengthBtn;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
@@ -16285,6 +16391,11 @@ var OptionsMenu = function OptionsMenu(_ref) {
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
+  }, animationLengthBtn || /*#__PURE__*/React__default.createElement(AnimationLengthButton, {
+    onChangeAnimationLength: function onChangeAnimationLength() {}
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: "auto"
   }, timeStepBtn || /*#__PURE__*/React__default.createElement(TimeStepButton, {
     timeStep: 0,
     onChangeTimeStep: function onChangeTimeStep() {}
@@ -16306,8 +16417,14 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       speedBtn = _ref.speedBtn,
       timeStepBtn = _ref.timeStepBtn,
       timeScaleBtn = _ref.timeScaleBtn,
+      animationLengthBtn = _ref.animationLengthBtn,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
-      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
+      timeStep = _ref.timeStep,
+      timeDimension = _ref.timeDimension,
+      onChangeTimeStep = _ref.onChangeTimeStep,
+      _ref$isTimestepAuto = _ref.isTimestepAuto,
+      isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -16324,6 +16441,12 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       setOpen(true);
     }
   }, [anchorEl, isOpenByDefault]);
+  var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
+  React__default.useEffect(function () {
+    if (isTimestepAuto) {
+      onChangeTimeStep(timeStepFromLayer);
+    }
+  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Animation options",
     placement: "bottom"
@@ -16359,6 +16482,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
     timeScaleBtn: timeScaleBtn,
     timeStepBtn: timeStepBtn,
     speedBtn: speedBtn,
+    animationLengthBtn: animationLengthBtn,
     autoUpdateBtn: autoUpdateBtn
   })))));
 };
@@ -16625,11 +16749,12 @@ var drawStepPxLine = function drawStepPxLine(ctx, theme, stepPx, height, scale,
 var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, scale) {
   var ctx2 = ctx;
   var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider.timelineText,
+      fontSize = _theme$palette$geoweb.fontSize,
       fontFamily = _theme$palette$geoweb.fontFamily,
       color = _theme$palette$geoweb.color;
   ctx2.fillStyle = color; // time text has smaller font than other timeline text
 
-  ctx2.font = "12px ".concat(fontFamily);
+  ctx2.font = "".concat(fontSize, "px ").concat(fontFamily);
   ctx2.textAlign = 'left';
 
   if (scale === Scale.Year || scale === Scale.Month || scale === Scale.Week || scale === Scale.Day) {
@@ -16661,7 +16786,7 @@ var drawYearScaleText = function drawYearScaleText(ctx, theme, newDate, stepPx,
   ctx2.fillStyle = color;
   ctx2.font = "".concat(fontSize, "px ").concat(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) {
@@ -17127,9 +17252,9 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
   drawDefaultBackground();
   drawObservedData();
   drawForecastData();
+  drawNightOrAlternateTime();
   drawAnimationArea();
   drawDraggableIcons();
-  drawNightOrAlternateTime();
 
   function drawDefaultBackground() {
     ctx.fillStyle = legendNoDataBackground.rgba;
@@ -17152,18 +17277,23 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
 
   function drawAnimationArea() {
     ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
-    ctx.fillRect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
+    ctx.strokeStyle = theme.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(dragHandlePath);
     ctx.translate(animationStartPx, y);
-    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
     ctx.fill(path);
     ctx.restore();
     ctx.save();
     ctx.translate(animationEndPx - 24, y);
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
     ctx.fill(path);
     ctx.restore();
   }
@@ -17301,6 +17431,11 @@ var isSelectedTimeIconArea = function isSelectedTimeIconArea(x, selectedTimePx,
 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
@@ -17315,7 +17450,8 @@ var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx,
 var DRAG_AREA_WIDTH = 24;
 
 var TimeSliderLegend = function TimeSliderLegend(_ref) {
-  var centerTime = _ref.centerTime,
+  var mapId = _ref.mapId,
+      centerTime = _ref.centerTime,
       secondsPerPx = _ref.secondsPerPx,
       _ref$dataScaleToSecon = _ref.dataScaleToSecondsPerPx,
       dataScaleToSecondsPerPx = _ref$dataScaleToSecon === void 0 ? defaultDataScaleToSecondsPerPx : _ref$dataScaleToSecon,
@@ -17327,10 +17463,11 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       dataEndTime = _ref.dataEndTime,
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
-      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
       timeStep = _ref.timeStep,
       _ref$mapIsActive = _ref.mapIsActive,
       mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime,
       onSetAnimationStartTime = _ref.onSetAnimationStartTime,
@@ -17367,26 +17504,45 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
 
   var _React$useState11 = React.useState(false),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      mouseDownInLegend = _React$useState12[0],
-      setMouseDownInLegend = _React$useState12[1];
+      dragTooltipOpen = _React$useState12[0],
+      setDragTooltipOpen = _React$useState12[1];
 
-  var _React$useState13 = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
+  var _React$useState13 = React.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      localAnimationStartTime = _React$useState14[0],
-      setLocalAnimationStartTime = _React$useState14[1];
+      mouseDownInLegend = _React$useState14[0],
+      setMouseDownInLegend = _React$useState14[1];
 
-  var _React$useState15 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
+  var _React$useState15 = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      localAnimationEndTime = _React$useState16[0],
-      setLocalAnimationEndTime = _React$useState16[1];
+      localAnimationStartTime = _React$useState16[0],
+      setLocalAnimationStartTime = _React$useState16[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 _React$useState17 = React.useState('auto'),
+  var _React$useState17 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      cursorStyle = _React$useState18[0],
-      setCursorStyle = _React$useState18[1];
+      localAnimationEndTime = _React$useState18[0],
+      setLocalAnimationEndTime = _React$useState18[1];
+
+  var _React$useState19 = React.useState(moment.utc(0)),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      tooltipTime = _React$useState20[0],
+      setTooltipTime = _React$useState20[1];
+
+  var _React$useState21 = React.useState(false),
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      animationAreaDragging = _React$useState22[0],
+      setAnimationAreaDragging = _React$useState22[1];
+
+  var animationDiff = React.useRef();
+  var isClickOrDrag = React.useRef();
+  var pixelsMovedSinceStartDragging = React.useRef(0);
+  var elem = document.querySelector(".timeSliderLegend_".concat(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 _React$useState23 = React.useState('auto'),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      cursorStyle = _React$useState24[0],
+      setCursorStyle = _React$useState24[1];
 
   var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
   React.useEffect(function () {
@@ -17416,7 +17572,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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.
    */
@@ -17429,13 +17585,18 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       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 = useCallback(function (x) {
     if (!localAnimationStartTime || !localAnimationEndTime) return;
 
@@ -17447,44 +17608,80 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         rightMarkerPx = _map2[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.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.unix(_mouseTimeUnix));
+      return;
+    }
+
+    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 _animationDiff$curren = animationDiff.current,
+          diffStartToRight = _animationDiff$curren.diffStartToRight,
+          diffStartToLeft = _animationDiff$curren.diffStartToLeft;
+      var startTime = currentPositionTimestamp - diffStartToLeft;
+      var endTime = currentPositionTimestamp + diffStartToRight;
+      setLocalAnimationStartTime(startTime);
+      setLocalAnimationEndTime(endTime);
     }
-  }, [centerTime, leftMarkerDragging, localAnimationEndTime, localAnimationStartTime, rightMarkerDragging, secondsPerPx, canvasWidth]);
+  }, [localAnimationStartTime, localAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, pixelsToLeft, animationDiff]);
   var setSelectedTime = 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.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);
       }
     };
 
@@ -17492,10 +17689,14 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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 = useTheme();
+  var startDraggingPosition = React.useRef(0);
 
   var onMouseDown = function onMouseDown(x, y, width) {
+    isClickOrDrag.current = 'click';
+    startDraggingPosition.current = x;
+
     var _map3 = [localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
       return timestampToPixel(timestamp, centerTime, width, secondsPerPx);
     }),
@@ -17512,16 +17713,27 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     }
 
     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.utc(animationStartTime));
+        setDragTooltipOpen(true);
         return;
       }
 
       if (isRightAnimationIconArea(x, rightMarkerPx, DRAG_AREA_WIDTH) && !leftMarkerDragging) {
         setCursorStyle('grabbing');
         setRightMarkerDragging(true);
+        setTooltipTime(moment.utc(animationEndTime));
+        setDragTooltipOpen(true);
+        return;
+      }
+
+      if (isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) && !animationAreaDragging) {
+        setCursorStyle('grabbing');
+        setAnimationAreaDragging(true);
         return;
       }
     } // clicking the timeslider
@@ -17530,18 +17742,36 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     setMouseDownInLegend(true);
   };
 
+  React.useEffect(function () {
+    var stoppedDragging = !leftMarkerDragging && !rightMarkerDragging && !animationAreaDragging;
+
+    if (stoppedDragging) {
+      if (localAnimationStartTime !== convertStringTimeToUnix(animationStartTime)) {
+        onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000).format(dateFormat));
+      }
+
+      if (localAnimationEndTime !== convertStringTimeToUnix(animationEndTime)) {
+        onSetAnimationEndTime(moment.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.utc(localAnimationStartTime * 1000).format(dateFormat));
-    } else if (rightMarkerDragging) {
-      onSetAnimationEndTime(moment.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 _map5 = [localAnimationStartTime, localAnimationEndTime, selectedTime].map(function (timestamp) {
@@ -17556,18 +17786,41 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     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.createElement(Box, {
+  var dragTooltipPosition = React.useRef();
+  var popperRef = React.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.createElement(CustomTooltip, {
+    title: tooltipTime.format('HH:mm'),
+    open: dragTooltipOpen,
+    PopperProps: {
+      popperRef: popperRef,
+      anchorEl: {
+        getBoundingClientRect: setTooltipPosition
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
     "data-testid": "timeSliderLegend",
-    className: "timeSliderLegend",
+    className: "timeSliderLegend_".concat(mapId),
     sx: {
       height: "".concat(TIME_SLIDER_LEGEND_HEIGHT, "px"),
       borderRadius: '4.5px',
@@ -17589,9 +17842,13 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       setCanvasWidth(width);
       drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
     }
-  }));
+  })));
 };
 
+function convertStringTimeToUnix(time) {
+  return time ? moment.utc(time).unix() : undefined;
+}
+
 var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
 /* *
@@ -17643,7 +17900,7 @@ var HideSliderButton = function HideSliderButton(_ref) {
  * */
 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');
@@ -17653,7 +17910,7 @@ var onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secon
 };
 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');
@@ -17735,7 +17992,9 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
       timeStep = _ref.timeStep,
       dataStartTime = _ref.dataStartTime,
       dataEndTime = _ref.dataEndTime,
-      onSetNewDate = _ref.onSetNewDate;
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      onSetNewDate = _ref.onSetNewDate,
+      setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime;
   var TIME_BOX_WIDTH = 140;
   var theme = useTheme();
 
@@ -17780,11 +18039,9 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   React__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);
       }
     };
 
@@ -17792,7 +18049,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     return function () {
       document.removeEventListener('mousemove', handleMouseMove);
     };
-  });
+  }, [canvasWidth, centerTime, dataEndTime, dataStartTime, mouseDownInTimeBox, onSetNewDate, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
   return /*#__PURE__*/React__default.createElement(Box$2, {
     "data-testid": "timeSliderTimeBox",
     className: "timeSliderTimeBox",
@@ -17813,32 +18070,18 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
       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);
     }
   }));
 };
 
-/* *
- * 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 useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
@@ -17859,12 +18102,13 @@ var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsAc
 var defaultProps = {
   centerTime: moment.utc().startOf('day').hours(12).unix(),
   secondsPerPx: 5,
-  selectedTime: moment.utc().startOf('day').hours(12),
+  selectedTime: moment.utc().startOf('day').hours(12).unix(),
   dataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx
 };
 
 var TimeSlider = function TimeSlider(_ref) {
-  var buttons = _ref.buttons,
+  var mapId = _ref.mapId,
+      buttons = _ref.buttons,
       timeBox = _ref.timeBox,
       legend = _ref.legend,
       _ref$mapIsActive = _ref.mapIsActive,
@@ -17874,6 +18118,12 @@ var TimeSlider = function TimeSlider(_ref) {
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
   useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+
+  var _React$useState = React.useState(defaultProps.selectedTime),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      unfilteredSelectedTime = _React$useState2[0],
+      setUnfilteredSelectedTime = _React$useState2[1];
+
   var visibilityState = isVisible ? 'visible' : 'hidden';
   return isVisible ? /*#__PURE__*/React.createElement(Grid, {
     style: {
@@ -17898,7 +18148,8 @@ var TimeSlider = function TimeSlider(_ref) {
       zIndex: 99
     }
   }, timeBox || /*#__PURE__*/React.createElement(TimeSliderCurrentTimeBox, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime
+    unfilteredSelectedTime: unfilteredSelectedTime,
+    setUnfilteredSelectedTime: setUnfilteredSelectedTime
   }))), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }), /*#__PURE__*/React.createElement(Grid, {
@@ -17906,8 +18157,10 @@ var TimeSlider = function TimeSlider(_ref) {
   }, buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime.unix(),
-    mapIsActive: mapIsActive
+    mapId: mapId,
+    mapIsActive: mapIsActive,
+    unfilteredSelectedTime: unfilteredSelectedTime,
+    setUnfilteredSelectedTime: setUnfilteredSelectedTime
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     sx: {
@@ -18041,12 +18294,6 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
   var isTimestepAuto$1 = useSelector(function (store) {
     return isTimestepAuto(store, mapId);
   });
-  var activeLayerId = useSelector(function (store) {
-    return getActiveLayerId(store, mapId);
-  });
-  var activeLayerTimeDimension = useSelector(function (store) {
-    return getLayerTimeDimension(store, activeLayerId);
-  });
   var onToggleTimestepAuto = React.useCallback(function () {
     dispatch(mapActions$1.toggleTimestepAuto({
       mapId: mapId,
@@ -18066,9 +18313,7 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
     timeStep: timeStep,
     onChangeTimeStep: onSetTimeStep,
     disabled: isAnimating$1,
-    isTimestepAuto: isTimestepAuto$1,
-    onToggleTimestepAuto: onToggleTimestepAuto,
-    timeDimension: activeLayerTimeDimension
+    onToggleTimestepAuto: onToggleTimestepAuto
   });
 };
 
@@ -18188,6 +18433,57 @@ var NowButtonConnect = function NowButtonConnect(_ref) {
   });
 };
 
+/* *
+ * 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(_ref) {
+  var mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var animationStartTime = useSelector(function (store) {
+    return getAnimationStartTime(store, mapId);
+  });
+  var animationEndTime = useSelector(function (store) {
+    return getAnimationEndTime(store, mapId);
+  });
+  var currentDiffInMinutes = moment(animationEndTime).diff(moment(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(animationStartTime).add(length, 'minutes').toISOString();
+    dispatch(mapActions$1.setAnimationEndTime({
+      mapId: mapId,
+      animationEndTime: animationEndTime
+    }));
+  };
+
+  return /*#__PURE__*/React.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.
@@ -18216,11 +18512,35 @@ var NowButtonConnect = function NowButtonConnect(_ref) {
 var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
   var sourceId = _ref.sourceId,
       mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var isTimestepAuto$1 = useSelector(function (store) {
+    return isTimestepAuto(store, mapId);
+  });
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var activeLayerId = useSelector(function (store) {
+    return getActiveLayerId(store, mapId);
+  });
+  var activeLayerTimeDimension = useSelector(function (store) {
+    return getLayerTimeDimension(store, activeLayerId);
+  });
+  var onSetTimeStep = React.useCallback(function (timeStep, origin) {
+    dispatch(mapActions$1.setTimeStep(Object.assign({
+      mapId: mapId,
+      timeStep: timeStep
+    }, origin && {
+      origin: origin
+    })));
+  }, [dispatch, mapId]);
   return /*#__PURE__*/React.createElement(OptionsMenuButton, {
     nowBtn: /*#__PURE__*/React.createElement(NowButtonConnect, {
       mapId: mapId,
       sourceId: sourceId
     }),
+    animationLengthBtn: /*#__PURE__*/React.createElement(AnimationLengthButtonConnect, {
+      mapId: mapId
+    }),
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
@@ -18232,7 +18552,11 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     }),
     timeScaleBtn: /*#__PURE__*/React.createElement(TimeScaleButtonConnect, {
       mapId: mapId
-    })
+    }),
+    timeStep: timeStep,
+    isTimestepAuto: isTimestepAuto$1,
+    onChangeTimeStep: onSetTimeStep,
+    timeDimension: activeLayerTimeDimension
   });
 };
 
@@ -18354,9 +18678,11 @@ var connectRedux$2 = connect(function (store, props) {
     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,
@@ -18385,7 +18711,9 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime,
       mapSetTimeSliderSecondsPerPx = _ref.mapSetTimeSliderSecondsPerPx,
       setAnimationStartTime = _ref.setAnimationStartTime,
-      setAnimationEndTime = _ref.setAnimationEndTime;
+      setAnimationEndTime = _ref.setAnimationEndTime,
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime;
 
   var _getTimeBounds = getTimeBounds(dimensions),
       selectedTime = _getTimeBounds.selectedTime;
@@ -18399,6 +18727,7 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
 
   var mapIsActive = mapId === activeWindowId;
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
+    mapId: mapId,
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
     dataScaleToSecondsPerPx: dataScaleToSecondsPerPx,
@@ -18412,6 +18741,13 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     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({
@@ -18475,9 +18811,11 @@ var connectRedux$1 = connect(function (store, props) {
     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
 });
@@ -18493,10 +18831,12 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
       timeStep = _ref.timeStep,
       isAnimating = _ref.isAnimating,
       stopMapAnimation = _ref.stopMapAnimation,
+      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime,
       setTime = _ref.setTime;
 
-  var _getMomentTimeBounds = getMomentTimeBounds(dimensions),
-      selectedTime = _getMomentTimeBounds.selectedTime;
+  var _getTimeBounds = getTimeBounds(dimensions),
+      selectedTime = _getTimeBounds.selectedTime;
 
   var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
       _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
@@ -18511,6 +18851,13 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     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({
@@ -18595,6 +18942,7 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(TimeSlider, {
+    mapId: mapId,
     buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
       mapId: mapId,
       sourceId: sourceId
@@ -22749,12 +23097,11 @@ var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapIsActive, mapId) {
     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['-']) {
@@ -23131,6 +23478,9 @@ var OptionsMenuConnect = function OptionsMenuConnect(_ref) {
       mapId: mapId,
       sourceId: sourceId
     }),
+    animationLengthBtn: /*#__PURE__*/React__default.createElement(AnimationLengthButtonConnect, {
+      mapId: mapId
+    }),
     autoUpdateBtn: /*#__PURE__*/React__default.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
@@ -24735,21 +25085,29 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
  * */
 var MapWarningProperties = function MapWarningProperties(_ref) {
   var selectedFeatureProperties = _ref.selectedFeatureProperties,
-      languageIndex = _ref.languageIndex;
+      languageIndex = _ref.languageIndex,
+      parentSize = _ref.parentSize;
   var language = languageIndex || 0;
+  var newWidth = parentSize ? parentSize - 100 : 350;
   return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'fixed',
+      width: "".concat(newWidth, "px"),
+      height: '1px',
+      display: 'flex',
+      justifyContent: 'center',
+      left: '50px'
+    }
+  }, /*#__PURE__*/React__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.createElement("h1", {
     "data-testid": "map-warning-properties-title"
@@ -24763,7 +25121,7 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
     "data-testid": "map-warning-properties-row"
   }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Identifier: ", selectedFeatureProperties.identifier));
+  }, "Identifier: ", selectedFeatureProperties.identifier)));
 };
 
 /* *