@opengeoweb/core 4.8.0 → 4.10.0

package/index.esm.js

@@ -6,9 +6,9 @@ import React__default, { Component, useRef, useState, useEffect, useCallback } f
 import _, { debounce, isEqual, escapeRegExp, 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, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Close, 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, ExitDomain, 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 { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, ManagerButton, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, Both, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItem, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, 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';
 import Sortable from 'sortablejs';
@@ -991,46 +991,66 @@ var TimeInMinutes;
   TimeInMinutes[TimeInMinutes["MONTH"] = 43800] = "MONTH";
   TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
   TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
+  TimeInMinutes[TimeInMinutes["MINUTE"] = 1] = "MINUTE";
 })(TimeInMinutes || (TimeInMinutes = {}));
+/**
+ *
+ * @param minutes
+ * @returns the two highest values in the format yr(s) mo(s) d h m
+ */
 
-var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
-  var dateStr = '';
-  var time = minutes; // subtracting whole years/months/days from time duration and adding the amount to the string to be printed.
-
-  if (time >= TimeInMinutes.YEAR) {
-    var yearsInMintues = Math.floor(time / TimeInMinutes.YEAR);
-    dateStr += "".concat(yearsInMintues, "y");
-    time -= yearsInMintues * TimeInMinutes.YEAR;
-  }
-
-  if (time >= TimeInMinutes.MONTH) {
-    var monthsInMinutes = Math.floor(time / TimeInMinutes.MONTH);
-    dateStr += "".concat(monthsInMinutes, "m");
-    time -= monthsInMinutes * TimeInMinutes.MONTH;
-  }
 
-  if (time >= TimeInMinutes.DAY) {
-    var daysInMinutes = Math.floor(time / TimeInMinutes.DAY);
-    dateStr += "".concat(daysInMinutes, "d");
-    time -= daysInMinutes * TimeInMinutes.DAY;
-  } // we will always print hour/minutes if there are any of them in the XX:XX format
-
-
-  if (time > 0) {
-    if (dateStr !== '') dateStr += ' ';
-    dateStr += "".concat(Math.floor(time / TimeInMinutes.HOUR).toLocaleString(undefined, {
-      minimumIntegerDigits: 2,
-      useGrouping: false
-    }), "h").concat((time % TimeInMinutes.HOUR).toLocaleString(undefined, {
-      minimumIntegerDigits: 2,
-      useGrouping: false
-    }), "min");
-  }
+var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
+  var units = [{
+    label: 'yr',
+    value: TimeInMinutes.YEAR,
+    plural: 's'
+  }, {
+    label: 'mo',
+    value: TimeInMinutes.MONTH,
+    plural: 's'
+  }, {
+    label: 'd',
+    value: TimeInMinutes.DAY
+  }, {
+    label: 'h',
+    value: TimeInMinutes.HOUR
+  }, {
+    label: 'm',
+    value: TimeInMinutes.MINUTE
+  }];
+  var durations = units.reduce(function (units, duration) {
+    var min = units.min,
+        time = units.time,
+        count = units.count;
+    var label = duration.label,
+        value = duration.value,
+        _duration$plural = duration.plural,
+        plural = _duration$plural === void 0 ? '' : _duration$plural;
+    var unit = Math.floor(min / value);
+
+    if (unit > 0 && count < 2) {
+      return {
+        time: "".concat(time).concat(unit).concat(label).concat(unit > 1 ? plural : '', " "),
+        min: min - unit * value,
+        count: count + 1
+      };
+    }
 
-  return dateStr;
+    return {
+      min: min,
+      time: time,
+      count: count
+    };
+  }, {
+    min: minutes,
+    time: '',
+    count: 0
+  });
+  return durations.time.trim();
 };
 
-var TimeSliderUtils = /*#__PURE__*/Object.freeze({
+var timeSliderUtils = /*#__PURE__*/Object.freeze({
   __proto__: null,
   millisecondsInSecond: millisecondsInSecond,
   defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
@@ -1327,7 +1347,7 @@ var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInter
   }
 };
 var getActiveLayerTimeStep = function getActiveLayerTimeStep(timeDimension) {
-  return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : null;
+  return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : undefined;
 };
 
 var utils = /*#__PURE__*/Object.freeze({
@@ -2943,11 +2963,11 @@ var layerStore = function layerStore(store) {
 
 
 var getLayerById = function getLayerById(store, layerId) {
-  if (store && store.layers && store.layers.byId[layerId]) {
+  if (layerId && store && store.layers && store.layers.byId[layerId]) {
     return store.layers.byId[layerId];
   }
 
-  return null;
+  return undefined;
 };
 /**
  * Retrieves all layers indexed by layerId
@@ -3847,7 +3867,7 @@ var getSyncSourceBySourceId = function getSyncSourceBySourceId(state, id) {
   return null;
 };
 
-var getTime = createSelector(getSyncSourceBySourceId, function (store) {
+createSelector(getSyncSourceBySourceId, function (store) {
   return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
 });
 
@@ -4714,7 +4734,7 @@ var initialState$2 = {
   allServicesEnabled: true,
   activeLayerInfo: {
     name: '',
-    text: '',
+    title: '',
     leaf: true,
     path: [],
     serviceName: ''
@@ -4930,7 +4950,7 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
         return filterId.toLowerCase().includes(searchLowercase);
       });
       var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayerText = (_b = layer.title) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
       var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
       var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
       var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
@@ -6480,7 +6500,7 @@ var PlayButton = function PlayButton(_ref) {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var animationIntervalDefault = 5;
-var connectRedux$5 = connect(function (store, props) {
+var connectRedux$3 = connect(function (store, props) {
   return {
     animationStartTime: getAnimationStartTime(store, props.mapId),
     animationEndTime: getAnimationEndTime$1(store, props.mapId),
@@ -6491,7 +6511,7 @@ var connectRedux$5 = connect(function (store, props) {
   mapStartAnimation: mapActions$1.mapStartAnimation,
   mapStopAnimation: mapActions$1.mapStopAnimation
 });
-var PlayButtonConnect = connectRedux$5(function (_ref) {
+var PlayButtonConnect = connectRedux$3(function (_ref) {
   var mapId = _ref.mapId,
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
@@ -8163,7 +8183,7 @@ function updateAnimation(mapId, maxValue) {
   }, _marked4$1);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, newTimeStep;
+  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -8226,38 +8246,43 @@ function setLayerDimensionsSaga(_ref4) {
 
         case 29:
           timeStep = _context5.sent;
+          _context5.next = 32;
+          return select(isTimestepAuto, mapId);
+
+        case 32:
+          isTimestepAuto$1 = _context5.sent;
 
-          if (!(isActiveLayer && timeStep === undefined && newTimeDimension)) {
-            _context5.next = 35;
+          if (!(isTimestepAuto$1 && isActiveLayer && timeStep === undefined && newTimeDimension)) {
+            _context5.next = 38;
             break;
           }
 
           newTimeStep = getActiveLayerTimeStep(newTimeDimension);
 
           if (!newTimeStep) {
-            _context5.next = 35;
+            _context5.next = 38;
             break;
           }
 
-          _context5.next = 35;
+          _context5.next = 38;
           return put(mapActions$1.setTimeStep({
             mapId: mapId,
             timeStep: newTimeStep
           }));
 
-        case 35:
+        case 38:
           if (!(isActiveLayer && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) {
-            _context5.next = 43;
+            _context5.next = 46;
             break;
           }
 
           if (isAnimating$1) {
-            _context5.next = 39;
+            _context5.next = 42;
             break;
           }
 
-          _context5.next = 39;
+          _context5.next = 42;
           return put(layerActions.layerChangeDimension({
             layerId: layerId,
             origin: LayerActionOrigin.setLayerDimensionSaga,
@@ -8267,39 +8292,39 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
 
-        case 39:
-          _context5.next = 41;
+        case 42:
+          _context5.next = 44;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 41:
-          _context5.next = 46;
+        case 44:
+          _context5.next = 49;
           break;
 
-        case 43:
+        case 46:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) {
-            _context5.next = 46;
+            _context5.next = 49;
             break;
           }
 
-          _context5.next = 46;
+          _context5.next = 49;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 46:
-          _context5.next = 51;
+        case 49:
+          _context5.next = 54;
           break;
 
-        case 48:
-          _context5.prev = 48;
+        case 51:
+          _context5.prev = 51;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 51:
+        case 54:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 48]]);
+  }, _marked5, null, [[1, 51]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
   var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
@@ -9016,8 +9041,8 @@ function layerSelectCloseInfoDialogSaga(_ref) {
           dialogInfo = _context2.sent;
 
           if (filteredLayers.map(function (layer) {
-            return layer.text;
-          }).includes(dialogInfo.text)) {
+            return layer.title;
+          }).includes(dialogInfo.title)) {
             _context2.next = 31;
             break;
           }
@@ -9840,7 +9865,7 @@ var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
       currentIndex: layers.length,
       extendedLayers: [].concat(_toConsumableArray(layers), [{
         name: layerName,
-        text: layerName,
+        title: layerName,
         leaf: true,
         path: []
       }])
@@ -9903,7 +9928,7 @@ var RenderLayers = function RenderLayers(_ref) {
   });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "Layer: ".concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.text),
+    tooltip: "Layer: ".concat((_a = extendedLayers[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectLayer'
@@ -9921,7 +9946,7 @@ var RenderLayers = function RenderLayers(_ref) {
     renderValue: function renderValue(value) {
       return extendedLayers.find(function (layer) {
         return layer.name === value;
-      }).text;
+      }).title;
     }
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
@@ -9935,7 +9960,7 @@ var RenderLayers = function RenderLayers(_ref) {
           marginLeft: '28px'
         }
       }
-    }, layerFromServiceLayers.text, currentIndex === layers.length && /*#__PURE__*/React.createElement(AlertIcon, {
+    }, layerFromServiceLayers.title, currentIndex === layers.length && /*#__PURE__*/React.createElement(AlertIcon, {
       severity: "error"
     }));
   }));
@@ -10178,7 +10203,6 @@ var RenderStyles = function RenderStyles(_ref) {
     return currentStyle === style.name;
   });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
-    disableUnderline: true,
     tooltip: "Style: ".concat((_a = styles[currentIndex]) === null || _a === void 0 ? void 0 : _a.title),
     inputProps: {
       SelectDisplayProps: {
@@ -10221,51 +10245,108 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var makeIconStyle = function makeIconStyle(isActive, isEnabled) {
-  return {
-    color: function color() {
-      if (isActive) {
-        return 'common.white';
-      }
+var getIconColor = function getIconColor(isActive, isEnabled) {
+  if (isActive) {
+    return 'common.white';
+  }
 
-      if (isEnabled) {
-        return 'geowebColors.buttons.flat.default.color';
-      }
+  if (isEnabled) {
+    return 'geowebColors.buttons.flat.default.color';
+  }
 
-      return 'geowebColors.buttons.flat.disabled.color';
-    }
-  };
+  return 'geowebColors.buttons.flat.disabled.color';
 };
 
 var ActivateLayer = function ActivateLayer(_ref) {
-  var _ref$tooltipTitle = _ref.tooltipTitle,
-      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Leading layer' : _ref$tooltipTitle,
-      onClickActivate = _ref.onClickActivate,
-      _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-      _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? 'activateLayer-btn' : _ref$id;
-  var iconStyle = makeIconStyle(isActive, isEnabled);
+  var _onChange = _ref.onChange,
+      isActive = _ref.isActive,
+      isEnabled = _ref.isEnabled;
+  return /*#__PURE__*/React.createElement(TooltipSelect, {
+    variant: "standard",
+    tooltip: "Auto update",
+    // Don't show arrow https://stackoverflow.com/questions/69085735/how-to-remove-arrow-from-react-textfield-select
+    inputProps: {
+      IconComponent: function IconComponent() {
+        return null;
+      }
+    },
+    value: isActive ? 'Both' : 'None',
+    sx: {
+      '&& .MuiOutlinedInput-input': {
+        padding: '0'
+      },
+      '&&& .MuiInput-input': {
+        paddingRight: 0
+      }
+    },
+    renderValue: function renderValue(optionSelected) {
+      return /*#__PURE__*/React.createElement(AutoUpdateButton$1, {
+        optionSelected: optionSelected,
+        isActive: isActive,
+        isEnabled: isEnabled
+      });
+    },
+    onChange: function onChange(event) {
+      event.stopPropagation();
 
-  var onClick = function onClick(event) {
-    event.stopPropagation();
-    onClickActivate();
-  };
+      _onChange(event.target.value === 'Both');
+    },
+    onClose: function onClose(event) {
+      event.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: true
+  }, "Auto-update"), /*#__PURE__*/React.createElement(MenuItem, {
+    value: "None"
+  }, /*#__PURE__*/React.createElement(AutoOption, {
+    icon: /*#__PURE__*/React.createElement(None, null),
+    text: "None"
+  })), /*#__PURE__*/React.createElement(MenuItem, {
+    value: "Both"
+  }, /*#__PURE__*/React.createElement(AutoOption, {
+    icon: /*#__PURE__*/React.createElement(Both, null),
+    text: "Both"
+  })));
+};
 
-  return /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: onClick,
-    icon: isActive ? /*#__PURE__*/React.createElement(Both, {
-      sx: iconStyle
-    }) : /*#__PURE__*/React.createElement(None, {
-      sx: iconStyle
-    }),
-    testId: id,
-    isActive: isActive,
-    className: "activateLayer-btn"
+var AutoUpdateButton$1 = function AutoUpdateButton(_ref2) {
+  var optionSelected = _ref2.optionSelected,
+      isActive = _ref2.isActive,
+      isEnabled = _ref2.isEnabled;
+  var style = {
+    backgroundColor: isActive ? 'geowebColors.buttons.primary.active.fill' : 'transparent!important',
+    borderRadius: '5px',
+    color: getIconColor(isActive, isEnabled)
+  };
+  var Icon = isActive ? /*#__PURE__*/React.createElement(Both, {
+    sx: style
+  }) : /*#__PURE__*/React.createElement(None, {
+    sx: style
   });
+  return /*#__PURE__*/React.createElement(ToolButton, {
+    "data-testid": "activateLayer-btn",
+    "aria-label": "Auto update ".concat(optionSelected),
+    sx: {
+      '&.MuiButtonBase-root': {
+        backgroundColor: 'transparent'
+      }
+    }
+  }, Icon);
+};
+
+var AutoOption = function AutoOption(_ref3) {
+  var icon = _ref3.icon,
+      text = _ref3.text;
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(ListItemText, {
+    sx: {
+      width: '112px'
+    }
+  }, text), /*#__PURE__*/React.createElement(ListItemIcon, null, icon));
 };
 
 /* *
@@ -10330,8 +10411,8 @@ var LayerRow = function LayerRow(_ref) {
       borderRadius: 1,
       marginBottom: 0.5,
       minHeight: '34px',
-      '&.sortable-drag': {
-        boxShadow: 4
+      '&.sortable-chosen': {
+        boxShadow: 1
       },
       '&.sortable-ghost': {
         opacity: 0.5
@@ -10363,8 +10444,9 @@ var LayerRow = function LayerRow(_ref) {
       },
       id: "enableButton-medium"
     }), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
-      onClickActivate: onClickRow,
-      id: "activateLayer-btn-medium"
+      onChange: onClickRow,
+      isActive: false,
+      isEnabled: true
     }), /*#__PURE__*/React__default.createElement(Typography, {
       sx: {
         fontWeight: '500',
@@ -10386,7 +10468,7 @@ var LayerRow = function LayerRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, "Style"), layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
-    layerStyles: layer.styles,
+    layerStyles: [],
     currentLayerStyle: layer.style,
     onChangeLayerStyle: function onChangeLayerStyle(style) {
       onLayerChangeStyle({
@@ -10443,7 +10525,9 @@ var LayerRow = function LayerRow(_ref) {
       });
     }
   }), layerActiveLayout || /*#__PURE__*/React__default.createElement(ActivateLayer, {
-    onClickActivate: onClickRow
+    onChange: onClickRow,
+    isActive: false,
+    isEnabled: true
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnClasses.column2
@@ -10466,7 +10550,7 @@ var LayerRow = function LayerRow(_ref) {
     item: true,
     className: columnClasses.column3
   }, layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
-    layerStyles: layer.styles,
+    layerStyles: [],
     currentLayerStyle: layer.style,
     onChangeLayerStyle: function onChangeLayerStyle(style) {
       onLayerChangeStyle({
@@ -10800,7 +10884,7 @@ var recurseNodes = function recurseNodes(nodesToRecur) {
   var newLayerTreeObj = {
     leaf: nodesToRecur.leaf,
     name: nodesToRecur.name,
-    title: nodesToRecur.text,
+    title: nodesToRecur.title,
     path: nodesToRecur.path || [],
     children: [],
     keywords: nodesToRecur.keywords || [],
@@ -11057,11 +11141,10 @@ var ActivateLayerConnect = function ActivateLayerConnect(_ref) {
   }, [dispatch]);
   var isActive = activeLayerId === layerId;
   return /*#__PURE__*/React.createElement(ActivateLayer, {
-    tooltipTitle: "Leading layer",
-    onClickActivate: function onClickActivate() {
+    onChange: function onChange(isActive) {
       setActiveLayerId({
         mapId: mapId,
-        layerId: layerId
+        layerId: isActive ? layerId : undefined
       });
 
       if (isAutoUpdating$1) {
@@ -11110,7 +11193,7 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
   });
   var fullLayerName = ((_a = useSelector(function (store) {
     return getLayerFromService(store, layerService, layerName);
-  })) === null || _a === void 0 ? void 0 : _a.text) || '';
+  })) === null || _a === void 0 ? void 0 : _a.title) || '';
   var layers = useSelector(function (store) {
     return getLayersFromService$1(store, layerService);
   });
@@ -11186,7 +11269,9 @@ var DragHandle = function DragHandle(_ref) {
       _ref$index = _ref.index,
       index = _ref$index === void 0 ? undefined : _ref$index,
       _ref$hideTooltip = _ref.hideTooltip,
-      hideTooltip = _ref$hideTooltip === void 0 ? false : _ref$hideTooltip;
+      hideTooltip = _ref$hideTooltip === void 0 ? false : _ref$hideTooltip,
+      _ref$isSorting = _ref.isSorting,
+      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting;
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
   return /*#__PURE__*/React__default.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
@@ -11200,7 +11285,7 @@ var DragHandle = function DragHandle(_ref) {
     disabled: isDisabled,
     isAccessible: true,
     sx: {
-      cursor: 'grab',
+      cursor: isSorting ? 'grabbing' : 'grab',
       '&:hover': {
         backgroundColor: 'inherit!important'
       },
@@ -11247,7 +11332,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
   var onStart = React.useCallback(function (_ref3) {
     var oldIndex = _ref3.oldIndex;
     setActiveDragIndex(oldIndex);
-    Sortable.ghost.style.opacity = '1';
+    if (Sortable.ghost) Sortable.ghost.style.opacity = '1';
   }, []);
   var onEnd = React.useCallback(function () {
     if (activeDragIndex !== null) {
@@ -11327,12 +11412,11 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
     handle: ".handle",
     direction: "vertical",
     // hover props
-    forceFallback: true,
+    forceFallback: false,
     onStart: onStart,
     onEnd: onEnd,
     style: {
-      width: '100%',
-      cursor: isSorting ? 'grabbing' : 'inherit'
+      width: '100%'
     }
   }, layerIds.map(function (layerId, index) {
     return /*#__PURE__*/React.createElement(LayerRowConnect, {
@@ -11343,7 +11427,8 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
       dragHandle: /*#__PURE__*/React.createElement(DragHandle, {
         isDisabled: isDragDisabled,
         index: index,
-        hideTooltip: isSorting || isDragDisabled
+        hideTooltip: isSorting || isDragDisabled,
+        isSorting: isSorting
       })
     });
   })));
@@ -11779,7 +11864,7 @@ var WMSLayerTree = function WMSLayerTree(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$4 = connect(function (store, props) {
+var connectRedux$2 = connect(function (store, props) {
   return {
     loadedLayers: getMapLayers(store, props.mapId)
   };
@@ -11843,7 +11928,7 @@ var ConnectedTree = function ConnectedTree(_ref) {
   });
 };
 
-var WMSLayerTreeConnect = connectRedux$4(ConnectedTree);
+var WMSLayerTreeConnect = connectRedux$2(ConnectedTree);
 
 var preset = {
 	presetType: "mapPreset",
@@ -13409,7 +13494,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Title",
-    value: layer.text
+    value: layer.title
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Name",
     value: layer.name
@@ -13435,7 +13520,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     label: "Keywords",
     value: ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.join(', ')) || '-'
   }), /*#__PURE__*/React__default.createElement(LayerInfoLegend, {
-    title: layer.text,
+    title: layer.title,
     name: layer.name,
     dimensions: layer.dimensions,
     legendURL: ((_b = layer.styles) === null || _b === void 0 ? void 0 : _b.length) ? layer.styles[0].legendURL : undefined
@@ -13704,7 +13789,7 @@ var LayerListRow = function LayerListRow(_ref) {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React__default.createElement(SearchHighlight, {
-    text: layer.text,
+    text: layer.title,
     search: searchFilter
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -16509,7 +16594,8 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       icon = _ref.icon,
       _ref$onChangeMouseWhe = _ref.onChangeMouseWheel,
       onChangeMouseWheel = _ref$onChangeMouseWhe === void 0 ? function () {} : _ref$onChangeMouseWhe,
-      animationLength = _ref.animationLength;
+      displayVariableDuration = _ref.displayVariableDuration,
+      layerHasTimeStep = _ref.layerHasTimeStep;
   var currentMarkIndex = marks.findIndex(function (mark) {
     return mark.value === value;
   });
@@ -16551,11 +16637,12 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     },
     ref: setAnchorRef,
     active: true,
-    width: "58px",
+    width: "100%",
     onWheel: onWheel
-  }, icon, /*#__PURE__*/React.createElement(TextIcon, {
-    text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
-  }))), /*#__PURE__*/React.createElement(Menu, {
+  }, icon, /*#__PURE__*/React.createElement(Typography, {
+    fontSize: 12,
+    fontWeight: 400
+  }, displayVariableDuration ? minutesToDescribedDuration(value) : currentMark === null || currentMark === void 0 ? void 0 : currentMark.text))), /*#__PURE__*/React.createElement(Menu, {
     anchorEl: anchorRef,
     open: open,
     onClose: function onClose() {
@@ -16591,7 +16678,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         setOpen(false);
       },
       key: mark.value,
-      selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.value) === mark.value,
+      selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.value) === mark.value && !isAutoSelected,
       disabled: isDisabled
     }, mark.label || mark.text);
   }), handleAutoClick && /*#__PURE__*/React.createElement(MenuItem, {
@@ -16600,8 +16687,8 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       setOpen(false);
     },
     selected: isAutoSelected,
-    disabled: isDisabled
-  }, "Auto"), animationLength && /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: isDisabled || !layerHasTimeStep
+  }, "Auto"), displayVariableDuration && /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true,
     sx: {
       fontSize: '12px',
@@ -16611,12 +16698,12 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         minHeight: '30px!important'
       }
     }
-  }, "length"), animationLength && /*#__PURE__*/React.createElement(ToolButton, {
+  }, "length"), displayVariableDuration && /*#__PURE__*/React.createElement(ToolButton, {
     "data-testid": "menu-animation-length-button",
     active: false,
     disableRipple: true,
     width: "100%"
-  }, minutesToDescribedDuration(animationLength))));
+  }, minutesToDescribedDuration(value))));
 };
 
 var speedTooltipTitle = 'Speed';
@@ -16732,16 +16819,16 @@ var marks$2 = [{
   text: '2w'
 }, {
   label: '1 month',
-  value: 40320,
-  text: '4w'
+  value: 43800,
+  text: '1mo'
 }, {
   label: '2 months',
-  value: 80640,
-  text: '8w'
+  value: 87600,
+  text: '2mos'
 }, {
   label: '6 months',
-  value: 241920,
-  text: '24w'
+  value: 262800,
+  text: '6mos'
 }, {
   label: '1 year',
   value: 525600,
@@ -16756,7 +16843,8 @@ var marks$2 = [{
 var timeStepTitle = 'Time step';
 
 var TimeStepButton = function TimeStepButton(_ref) {
-  var timeStep = _ref.timeStep,
+  var _ref$timeStep = _ref.timeStep,
+      timeStep = _ref$timeStep === void 0 ? marks$2[0].value : _ref$timeStep,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       isTimestepAuto = _ref.isTimestepAuto,
@@ -16764,7 +16852,8 @@ var TimeStepButton = function TimeStepButton(_ref) {
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
       onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
-      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
+      timeStepFromLayer = _ref.timeStepFromLayer;
 
   var handleMenuItemClick = function handleMenuItemClick(mark) {
     if (isTimestepAuto) {
@@ -16774,6 +16863,12 @@ var TimeStepButton = function TimeStepButton(_ref) {
     onChangeTimeStep(mark.value, MapActionOrigin.map);
   };
 
+  var handleToggleTimeStep = function handleToggleTimeStep() {
+    if (isTimestepAuto) return;
+    onToggleTimestepAuto();
+    timeStepFromLayer && onChangeTimeStep(timeStepFromLayer, MapActionOrigin.map);
+  };
+
   return /*#__PURE__*/React.createElement(TimeSliderMenu, {
     title: timeStepTitle,
     isOpenByDefault: isOpenByDefault,
@@ -16782,9 +16877,11 @@ var TimeStepButton = function TimeStepButton(_ref) {
     handleMenuItemClick: handleMenuItemClick,
     isDisabled: disabled,
     isAutoSelected: isTimestepAuto,
-    handleAutoClick: onToggleTimestepAuto,
+    handleAutoClick: handleToggleTimeStep,
     icon: /*#__PURE__*/React.createElement(FastForward, null),
-    onChangeMouseWheel: handleMenuItemClick
+    onChangeMouseWheel: handleMenuItemClick,
+    displayVariableDuration: true,
+    layerHasTimeStep: Boolean(timeStepFromLayer)
   });
 };
 
@@ -16968,7 +17065,6 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$animationLength = _ref.animationLength,
       animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
-      animationLengthInMinutes = _ref.animationLengthInMinutes,
       onChangeAnimationLength = _ref.onChangeAnimationLength;
 
   var onChangeSliderValue = function onChangeSliderValue(mark) {
@@ -16988,7 +17084,7 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
     isDisabled: disabled,
     value: animationLength,
     onChangeMouseWheel: onChangeSliderValue,
-    animationLength: animationLengthInMinutes
+    displayVariableDuration: true
   });
 };
 
@@ -17036,7 +17132,6 @@ var OptionsMenu = function OptionsMenu(_ref) {
     item: true,
     xs: "auto"
   }, timeStepBtn || /*#__PURE__*/React__default.createElement(TimeStepButton, {
-    timeStep: 0,
     onChangeTimeStep: function onChangeTimeStep() {},
     isTimestepAuto: false
   })), /*#__PURE__*/React__default.createElement(Grid, {
@@ -18188,34 +18283,6 @@ function useAnimationTime(animationStartTime, animationEndTime, onSetAnimationSt
   };
 }
 
-function useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime) {
-  var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
-  React.useEffect(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Home' && mapIsActive) {
-        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
-      }
-
-      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
-        switch (event.code) {
-          case 'ArrowLeft':
-            setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
-            break;
-
-          case 'ArrowRight':
-            setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate);
-            break;
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
-}
-
 function convertStringTimeToUnix(time) {
   return time ? moment.utc(time).unix() : undefined;
 } // Explanation of props can be found here:
@@ -18237,8 +18304,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
       timeStep = _ref.timeStep,
-      _ref$mapIsActive = _ref.mapIsActive,
-      mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
       unfilteredSelectedTime = _ref.unfilteredSelectedTime,
       setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
       _ref$onSetNewDate = _ref.onSetNewDate,
@@ -18249,7 +18314,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       onSetAnimationStartTime = _ref$onSetAnimationSt === void 0 ? function () {} : _ref$onSetAnimationSt,
       _ref$onSetAnimationEn = _ref.onSetAnimationEndTime,
       onSetAnimationEndTime = _ref$onSetAnimationEn === void 0 ? function () {} : _ref$onSetAnimationEn;
-  useHandleKeyDown(mapIsActive, timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime, selectedTime);
 
   var _useCanvasTarget = useCanvasTarget('mousedown'),
       _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
@@ -18589,6 +18653,26 @@ var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, heigh
   ctx.restore();
 };
 
+var drawAutoUpdateIcon = function drawAutoUpdateIcon(ctx, x, y, theme, isAutoUpdating) {
+  ctx.save();
+  ctx.translate(x, y);
+  var playerTimeText = theme.palette.geowebColors.timeSlider.playerTimeText;
+  ctx.fillStyle = isAutoUpdating ? '#7BACFF' : '#B4B4B4';
+  var path = new Path2D('M12.385 3.295l5 3-5 3V7.723l-.085.014c-3.08.548-5.418 3.24-5.418 6.479 0 3.634 2.945 6.58 6.577 6.58 2.914 0 5.385-1.896 6.248-4.523l2.815-1.626c-.225 4.814-4.197 8.648-9.063 8.648-5.012 0-9.074-4.065-9.074-9.08 0-4.65 3.495-8.484 8-9.015V3.295z');
+  ctx.translate(7, -8);
+  ctx.rotate(13.295);
+  ctx.fill(path);
+  ctx.restore();
+  var text = 'Auto';
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.fillStyle = isAutoUpdating ? '#7BACFF' : '#B4B4B4'; // ON
+
+  ctx.font = "7px ".concat(playerTimeText.fontFamily);
+  ctx.fillText(text, 5, 14);
+  ctx.restore();
+};
+
 var drawTextAnnotation = function drawTextAnnotation(ctx, x, y, text, theme) {
   var playerTimeText = theme.palette.geowebColors.timeSlider.playerTimeText;
   ctx.save();
@@ -18602,20 +18686,22 @@ var drawTextAnnotation = function drawTextAnnotation(ctx, x, y, text, theme) {
   ctx.restore();
 };
 
-var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, scale, theme) {
+var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, scale, theme, isAutoUpdating) {
+  var iconWidth = 25;
   var smallWidth = needleGeom.smallWidth,
       largeWidth = needleGeom.largeWidth,
       height = needleGeom.height;
-  var needleWidth = scale === Scale.Year ? largeWidth : smallWidth;
-  var needleX = selectedPx - needleWidth / 2;
+  var boxWidth = scale === Scale.Year ? largeWidth : smallWidth;
+  var needleX = selectedPx - boxWidth / 2;
   var needleY = needleGeom.lineWidth;
-  drawRoundedRectangle(ctx, needleX, needleY, needleWidth, height, needleGeom.cornerRadius, theme);
+  drawRoundedRectangle(ctx, needleX - iconWidth, needleY, boxWidth + iconWidth, height, needleGeom.cornerRadius, theme);
   var timeFormat = scale === Scale.Year ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
   var timeText = moment.utc(selectedTime * 1000).format(timeFormat).toString();
-  drawTextAnnotation(ctx, needleX + needleWidth / 2, needleY + height / 2, timeText, theme);
+  drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth, needleY + height / 2, timeText, theme);
+  drawAutoUpdateIcon(ctx, needleX + boxWidth - iconWidth, needleY, theme, isAutoUpdating);
 };
 
-var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, scale) {
+var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, scale, isAutoUpdating) {
   // map unix timestamps to pixel values
   var _map = [selected].map(function (t) {
     return timestampToPixel(t, centerTime, width, secondsPerPx);
@@ -18624,7 +18710,7 @@ var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx
       selectedPx = _map2[0];
 
   ctx.clearRect(0, 0, width, height);
-  drawNewCurrentTimeBox(ctx, selected, selectedPx, scale, theme);
+  drawNewCurrentTimeBox(ctx, selected, selectedPx, scale, theme, isAutoUpdating);
 };
 
 var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
@@ -18639,6 +18725,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
       dataStartTime = _ref.dataStartTime,
       dataEndTime = _ref.dataEndTime,
       unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+      isAutoUpdating = _ref.isAutoUpdating,
       onSetNewDate = _ref.onSetNewDate,
       setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime;
   var TIME_BOX_WIDTH = 140;
@@ -18723,12 +18810,12 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     },
     onRenderCanvas: function onRenderCanvas(ctx, width, height) {
       setCanvasWidth(width);
-      renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, scale);
+      renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, scale, isAutoUpdating);
     }
   }));
 };
 
-var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
+var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       var target = event.target;
@@ -18745,6 +18832,34 @@ var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsAc
   }, [mapIsActive, isVisible, onToggleTimeSlider]);
 };
 
+var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime, currentTime) {
+  var curTime = selectedTime !== undefined ? moment.unix(selectedTime).toISOString() : moment.utc().toISOString();
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Home' && mapIsActive) {
+        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
+      }
+
+      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
+        switch (event.code) {
+          case 'ArrowLeft':
+            setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
+            break;
+
+          case 'ArrowRight':
+            setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate);
+            break;
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [curTime, currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, timeStep]);
+};
+
 var defaultProps = {
   centerTime: moment.utc().startOf('day').hours(12).unix(),
   secondsPerPx: 5,
@@ -18761,9 +18876,17 @@ var TimeSlider = function TimeSlider(_ref) {
       mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
       _ref$isVisible = _ref.isVisible,
       isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+      timeStep = _ref.timeStep,
+      dataStartTime = _ref.dataStartTime,
+      dataEndTime = _ref.dataEndTime,
+      selectedTime = _ref.selectedTime,
+      currentTime = _ref.currentTime,
+      onSetNewDate = _ref.onSetNewDate,
+      onSetCenterTime = _ref.onSetCenterTime,
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
-  useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+  useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider);
+  useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime, currentTime);
 
   var _React$useState = React.useState(defaultProps.selectedTime),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18778,7 +18901,7 @@ var TimeSlider = function TimeSlider(_ref) {
     container: true,
     sx: {
       display: 'grid',
-      gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr) minmax(40px, 40px)',
+      gridTemplateColumns: '120px 1fr 40px',
       gridTemplateRows: TIME_SLIDER_LEGEND_HEIGHT,
       paddingBottom: 1,
       alignItems: 'center',
@@ -18804,7 +18927,6 @@ var TimeSlider = function TimeSlider(_ref) {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
     mapId: mapId,
-    mapIsActive: mapIsActive,
     unfilteredSelectedTime: unfilteredSelectedTime,
     setUnfilteredSelectedTime: setUnfilteredSelectedTime
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
@@ -18845,14 +18967,14 @@ var TimeSlider = function TimeSlider(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$3 = connect(function (store, props) {
+var connectRedux$1 = connect(function (store, props) {
   return {
     isAutoUpdating: isAutoUpdating(store, props.mapId)
   };
 }, {
   toggleAutoUpdate: mapActions$1.toggleAutoUpdate
 });
-var AutoUpdateButtonConnectComponent = connectRedux$3(function (_ref) {
+var AutoUpdateButtonConnectComponent = connectRedux$1(function (_ref) {
   var mapId = _ref.mapId,
       isAutoUpdating = _ref.isAutoUpdating,
       toggleAutoUpdate = _ref.toggleAutoUpdate;
@@ -18871,7 +18993,7 @@ var AutoUpdateButtonConnectComponent = connectRedux$3(function (_ref) {
     disabled: false
   });
 });
-var AutoUpdateButtonConnect = connectRedux$3(AutoUpdateButtonConnectComponent);
+var AutoUpdateButtonConnect = connectRedux$1(AutoUpdateButtonConnectComponent);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -18946,26 +19068,15 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
   var activeLayerTimeDimension = useSelector(function (store) {
     return getLayerTimeDimension(store, activeLayerId);
   });
-
-  var onToggleTimestepAuto = function onToggleTimestepAuto() {
-    var newTimestepAuto = !isTimestepAuto$1;
-
-    if (newTimestepAuto) {
-      var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
-
-      if (timeStepFromLayer) {
-        dispatch(mapActions$1.setTimeStep({
-          mapId: mapId,
-          timeStep: timeStepFromLayer
-        }));
-      }
-    }
-
+  var timeStepFromLayer = getActiveLayerTimeStep(activeLayerTimeDimension);
+  var onToggleTimestepAuto = React.useCallback(function () {
     dispatch(mapActions$1.toggleTimestepAuto({
       mapId: mapId,
-      timestepAuto: newTimestepAuto
+      timestepAuto: !isTimestepAuto$1,
+      origin: MapActionOrigin.map
     }));
-  };
+  }, [dispatch, isTimestepAuto$1, mapId]);
+  var activeTimeStep = isTimestepAuto$1 && timeStepFromLayer ? timeStepFromLayer : timeStep;
 
   var onSetTimeStep = function onSetTimeStep(timeStep) {
     dispatch(mapActions$1.setTimeStep({
@@ -18975,11 +19086,12 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(TimeStepButton, {
-    timeStep: timeStep,
+    timeStep: activeTimeStep,
     onChangeTimeStep: onSetTimeStep,
     disabled: isAnimating$1,
     onToggleTimestepAuto: onToggleTimestepAuto,
-    isTimestepAuto: Boolean(isTimestepAuto$1)
+    isTimestepAuto: Boolean(isTimestepAuto$1) && Boolean(timeStepFromLayer),
+    timeStepFromLayer: timeStepFromLayer
   });
 };
 
@@ -19129,11 +19241,6 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
     return getAnimationEndTime$1(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();
@@ -19145,9 +19252,8 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
 
   return /*#__PURE__*/React.createElement(AnimationLengthButton, {
     disabled: isAnimating$1,
-    animationLength: currentLength || Number(AnimationLength.Hours24),
-    onChangeAnimationLength: handlechangeAnimationLength,
-    animationLengthInMinutes: currentDiffInMinutes
+    animationLength: currentDiffInMinutes || Number(AnimationLength.Hours24),
+    onChangeAnimationLength: handlechangeAnimationLength
   });
 };
 
@@ -19306,56 +19412,45 @@ var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
   });
 };
 
-var connectRedux$2 = connect(function (store, props) {
-  return {
-    layers: getMapLayers(store, props.mapId),
-    dimensions: getMapDimensions(store, props.mapId),
-    scale: getMapTimeSliderScale(store, props.mapId),
-    centerTime: getMapTimeSliderCenterTime(store, props.mapId),
-    secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
-    dataScaleToSecondsPerPx: getMapTimeSliderDataScaleToSecondsPerPx(store, props.mapId),
-    isAnimating: isAnimating(store, props.mapId),
-    timeStep: getMapTimeStep(store, props.mapId),
-    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
-    timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
-    animationStartTime: getAnimationStartTime(store, props.mapId),
-    animationEndTime: getAnimationEndTime$1(store, props.mapId),
-    activeWindowId: getActiveWindowId(store),
-    unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
-  };
-}, {
-  setTimeSliderUnfilteredSelectedTime: mapActions$1.setTimeSliderUnfilteredSelectedTime,
-  stopMapAnimation: mapActions$1.mapStopAnimation,
-  setTime: genericActions.setTime,
-  mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
-  mapSetTimeSliderSecondsPerPx: mapActions$1.setTimeSliderSecondsPerPx,
-  setAnimationStartTime: mapActions$1.setAnimationStartTime,
-  setAnimationEndTime: mapActions$1.setAnimationEndTime
-});
-
 var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   var sourceId = _ref.sourceId,
-      mapId = _ref.mapId,
-      dimensions = _ref.dimensions,
-      scale = _ref.scale,
-      centerTime = _ref.centerTime,
-      secondsPerPx = _ref.secondsPerPx,
-      dataScaleToSecondsPerPx = _ref.dataScaleToSecondsPerPx,
-      layers = _ref.layers,
-      isAnimating = _ref.isAnimating,
-      timeStep = _ref.timeStep,
-      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
-      animationStartTime = _ref.animationStartTime,
-      animationEndTime = _ref.animationEndTime,
-      activeWindowId = _ref.activeWindowId,
-      stopMapAnimation = _ref.stopMapAnimation,
-      setTime = _ref.setTime,
-      mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime,
-      mapSetTimeSliderSecondsPerPx = _ref.mapSetTimeSliderSecondsPerPx,
-      setAnimationStartTime = _ref.setAnimationStartTime,
-      setAnimationEndTime = _ref.setAnimationEndTime,
-      unfilteredSelectedTime = _ref.unfilteredSelectedTime,
-      setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime;
+      mapId = _ref.mapId;
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+  var scale = useSelector(function (store) {
+    return getMapTimeSliderScale(store, mapId);
+  });
+  var centerTime = useSelector(function (store) {
+    return getMapTimeSliderCenterTime(store, mapId);
+  });
+  var secondsPerPx = useSelector(function (store) {
+    return getMapTimeSliderSecondsPerPx(store, mapId);
+  });
+  var dataScaleToSecondsPerPx = useSelector(function (store) {
+    return getMapTimeSliderDataScaleToSecondsPerPx(store, mapId);
+  });
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var isTimeSliderHoverOn$1 = useSelector(function (store) {
+    return isTimeSliderHoverOn(store, mapId);
+  });
+  var animationStartTime = useSelector(function (store) {
+    return getAnimationStartTime(store, mapId);
+  });
+  var animationEndTime = useSelector(function (store) {
+    return getAnimationEndTime$1(store, mapId);
+  });
+  var unfilteredSelectedTime = useSelector(function (store) {
+    return getTimeSliderUnfilteredSelectedTime(store, mapId);
+  });
 
   var _getTimeBounds = getTimeBounds(dimensions),
       selectedTime = _getTimeBounds.selectedTime;
@@ -19367,7 +19462,7 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       dataStartTime = _getDataLimitsFromLay2[0],
       dataEndTime = _getDataLimitsFromLay2[1];
 
-  var mapIsActive = mapId === activeWindowId;
+  var dispatch = useDispatch();
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
     mapId: mapId,
     centerTime: centerTime,
@@ -19376,76 +19471,64 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     selectedTime: selectedTime,
     scale: scale,
     currentTime: currentTime,
-    isTimeSliderHoverOn: isTimeSliderHoverOn,
+    isTimeSliderHoverOn: isTimeSliderHoverOn$1,
     dataStartTime: dataStartTime,
     dataEndTime: dataEndTime,
     animationStartTime: animationStartTime,
     animationEndTime: animationEndTime,
     timeStep: timeStep,
-    mapIsActive: mapIsActive,
     unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
     setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
-      if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
+      dispatch(mapActions$1.setTimeSliderUnfilteredSelectedTime({
         timeSliderUnfilteredSelectedTime: timeSliderUnfilteredSelectedTime,
         mapId: mapId
-      });
+      }));
     },
     onSetNewDate: function onSetNewDate(newDate) {
-      if (isAnimating) {
-        stopMapAnimation({
+      if (isAnimating$1) {
+        dispatch(mapActions$1.mapStopAnimation({
           mapId: mapId
-        });
+        }));
       }
 
-      setTime({
+      dispatch(genericActions.setTime({
         sourceId: sourceId,
         origin: 'TimeSliderConnect, 139',
         value: handleMomentISOString(newDate)
-      });
+      }));
     },
     onSetCenterTime: function onSetCenterTime(newTime) {
-      mapSetTimeSliderCenterTime({
+      dispatch(mapActions$1.setTimeSliderCenterTime({
         mapId: mapId,
         timeSliderCenterTime: newTime
-      });
+      }));
     },
     onZoom: function onZoom(newSecondsPerPx, newCenterTime) {
-      mapSetTimeSliderSecondsPerPx({
+      dispatch(mapActions$1.setTimeSliderSecondsPerPx({
         mapId: mapId,
         timeSliderSecondsPerPx: newSecondsPerPx
-      });
-      mapSetTimeSliderCenterTime({
+      }));
+      dispatch(mapActions$1.setTimeSliderCenterTime({
         mapId: mapId,
         timeSliderCenterTime: newCenterTime
-      });
+      }));
     },
     onSetAnimationStartTime: function onSetAnimationStartTime(animationStartTime) {
-      setAnimationStartTime({
+      dispatch(mapActions$1.setAnimationStartTime({
         mapId: mapId,
         animationStartTime: animationStartTime
-      });
+      }));
     },
     onSetAnimationEndTime: function onSetAnimationEndTime(animationEndTime) {
-      setAnimationEndTime({
+      dispatch(mapActions$1.setAnimationEndTime({
         mapId: mapId,
         animationEndTime: animationEndTime
-      });
+      }));
     }
   });
 };
-/**
- * TimeSliderLegend component connected to the store displaying a legend of the time slider
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @example
- * ``` <TimeSliderLegendConnect mapId={mapId} />```
- */
 
-
-var TimeSliderLegendConnect$1 = connectRedux$2(TimeSliderLegendConnect);
-
-var connectRedux$1 = connect(function (store, props) {
+var connectRedux = connect(function (store, props) {
   return {
     layers: getMapLayers(store, props.mapId),
     dimensions: getMapDimensions(store, props.mapId),
@@ -19454,6 +19537,7 @@ var connectRedux$1 = connect(function (store, props) {
     scale: getMapTimeSliderScale(store, props.mapId),
     timeStep: getMapTimeStep(store, props.mapId),
     isAnimating: isAnimating(store, props.mapId),
+    isAutoUpdating: isAutoUpdating(store, props.mapId),
     unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
   };
 }, {
@@ -19472,6 +19556,7 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
       layers = _ref.layers,
       timeStep = _ref.timeStep,
       isAnimating = _ref.isAnimating,
+      isAutoUpdating = _ref.isAutoUpdating,
       stopMapAnimation = _ref.stopMapAnimation,
       unfilteredSelectedTime = _ref.unfilteredSelectedTime,
       setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime,
@@ -19493,6 +19578,7 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     dataStartTime: dataStartTime,
     dataEndTime: dataEndTime,
     timeStep: timeStep,
+    isAutoUpdating: isAutoUpdating,
     unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
     setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
       if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
@@ -19516,56 +19602,56 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
   });
 };
 
-var TimeSliderCurrentTimeBoxConnect = connectRedux$1(TimeSliderCurrentTimeBoxConnectComponent);
+var TimeSliderCurrentTimeBoxConnect = connectRedux(TimeSliderCurrentTimeBoxConnectComponent);
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-var connectRedux = connect(function (store, props) {
-  return {
-    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
-    activeWindowId: getActiveWindowId(store),
-    isTimeSliderVisible: isTimeSliderVisible(store, props.mapId)
-  };
-}, {
-  toggleTimeSliderHover: mapActions$1.toggleTimeSliderHover,
-  toggleTimeSliderIsVisible: mapActions$1.toggleTimeSliderIsVisible
-});
+var useUpdateTimestep = function useUpdateTimestep(mapId) {
+  var activeLayerId = useSelector(function (store) {
+    return getActiveLayerId(store, mapId);
+  });
+  var isTimeStepAuto = useSelector(function (store) {
+    return isTimestepAuto(store, mapId);
+  });
+  var timeDimension = useSelector(function (store) {
+    return getLayerTimeDimension(store, activeLayerId);
+  });
+  var dispatch = useDispatch();
+  React.useEffect(function () {
+    if (isTimeStepAuto) {
+      var timeStep = getActiveLayerTimeStep(timeDimension);
+      dispatch(mapActions$1.setTimeStep({
+        mapId: mapId,
+        timeStep: timeStep
+      }));
+    }
+  }, [activeLayerId, dispatch, isTimeStepAuto, mapId, timeDimension]);
+};
 
-var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
+var TimeSliderConnect = function TimeSliderConnect(_ref) {
   var sourceId = _ref.sourceId,
       mapId = _ref.mapId,
-      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
-      toggleTimeSliderHover = _ref.toggleTimeSliderHover,
-      activeWindowId = _ref.activeWindowId,
-      isTimeSliderVisible = _ref.isTimeSliderVisible,
-      toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible,
       _ref$isAlwaysVisible = _ref.isAlwaysVisible,
       isAlwaysVisible = _ref$isAlwaysVisible === void 0 ? false : _ref$isAlwaysVisible;
-  // don't use redux state if isAlwaysVisible
-  var isVisible = isAlwaysVisible || isTimeSliderVisible;
-  var mapIsActive = mapId === activeWindowId; // TODO: move keyboard logic to TimeSlider.tsx
+  var isTimeSliderHoverOn$1 = useSelector(function (store) {
+    return isTimeSliderHoverOn(store, mapId);
+  });
+  var activeWindowId = useSelector(function (store) {
+    return getActiveWindowId(store);
+  });
+  var isTimeSliderVisible$1 = useSelector(function (store) {
+    return isTimeSliderVisible(store, mapId);
+  }); // don't use redux state if isAlwaysVisible
+
+  var isVisible = isAlwaysVisible || isTimeSliderVisible$1;
+  var mapIsActive = mapId === activeWindowId;
+  var dispatch = useDispatch(); // TODO: move keyboard logic to TimeSlider.tsx
 
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.ctrlKey && event.altKey && event.key === 'h') {
-        toggleTimeSliderHover({
+        dispatch(mapActions$1.toggleTimeSliderHover({
           mapId: mapId,
-          isTimeSliderHoverOn: !isTimeSliderHoverOn
-        });
+          isTimeSliderHoverOn: !isTimeSliderHoverOn$1
+        }));
       }
     };
 
@@ -19573,17 +19659,64 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [mapId, isTimeSliderHoverOn, toggleTimeSliderHover]);
+  }, [mapId, isTimeSliderHoverOn$1, dispatch]);
 
   var onToggleTimeSliderVisibility = function onToggleTimeSliderVisibility(isTimeSliderVisible) {
-    toggleTimeSliderIsVisible({
+    dispatch(mapActions$1.toggleTimeSliderIsVisible({
       mapId: mapId,
       isTimeSliderVisible: isTimeSliderVisible,
       origin: MapActionOrigin.map
-    });
+    }));
   };
 
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+
+  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
+      _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
+      dataStartTime = _getDataLimitsFromLay2[0],
+      dataEndTime = _getDataLimitsFromLay2[1];
+
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+
+  var _getTimeBounds = getTimeBounds(dimensions),
+      selectedTime = _getTimeBounds.selectedTime;
+
+  useUpdateTimestep(mapId);
   return /*#__PURE__*/React.createElement(TimeSlider, {
+    currentTime: moment.utc().unix(),
+    timeStep: timeStep,
+    dataStartTime: dataStartTime,
+    dataEndTime: dataEndTime,
+    onSetNewDate: function onSetNewDate(newDate) {
+      if (isAnimating$1) {
+        dispatch(mapActions$1.mapStopAnimation({
+          mapId: mapId
+        }));
+      }
+
+      dispatch(genericActions.setTime({
+        sourceId: sourceId,
+        value: handleMomentISOString(newDate),
+        origin: ''
+      }));
+    },
+    onSetCenterTime: function onSetCenterTime(newTime) {
+      dispatch(mapActions$1.setTimeSliderCenterTime({
+        mapId: mapId,
+        timeSliderCenterTime: newTime
+      }));
+    },
+    selectedTime: selectedTime,
     mapId: mapId,
     buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
       mapId: mapId,
@@ -19593,7 +19726,7 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
       mapId: mapId,
       sourceId: sourceId
     }),
-    legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect$1, {
+    legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect, {
       mapId: mapId,
       sourceId: sourceId
     }),
@@ -19602,18 +19735,6 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
     isVisible: isVisible
   });
 };
-/**
- * TimeSlider component with components connected to the store displaying the time slider
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @param {string} sourceId sourceId: string - Source Id of the timeslider
- * @example
- * ``` <TimeSliderConnect sourceId="timeslider-1" mapId={mapId} />```
- */
-
-
-var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26327,4 +26448,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$2 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, TimeSliderUtils as timeSliderUtils, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$2 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };