@opengeoweb/core 9.8.0 → 9.10.0

package/index.esm.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
-import { Grid, Box, MenuItem, Typography, useTheme, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, styled, Slider, Checkbox, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup } from '@mui/material';
+import { Grid, Box, MenuItem, Typography, useTheme, Button, Popper, ListItemText, ListItemIcon, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Checkbox, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, renderCounter, AlertBanner, CustomAccordion, calculateStartSize, ToolContainerDraggable, dateUtils, withEggs } from '@opengeoweb/shared';
 import { LayerSelectButtonConnect, LayerInfoButton, LayerInfoButtonConnect, getUserAddedServices, layerSelectConfig } from '@opengeoweb/layer-select';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, Equalizer, DimensionsElevation, Link, LinkOff, List as List$1, ExitDomain, Info, Search, MyLocation, Close, ChevronDown, ChevronUp, StepForward, StepBackward, Pause, Play, Options, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import { useDispatch, useSelector, connect, Provider } from 'react-redux';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, List as List$1, ExitDomain, Info, Search, MyLocation, Close, ChevronDown, ChevronUp, StepForward, StepBackward, Pause, Play, Options, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, uiSelectors, uiTypes, useSetupDialog, uiActions, drawtoolSelectors, genericActions, syncConstants, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
-import { WMGetServiceFromStore, getCapabilities, webmapUtils, LayerType, handleMomentISOString, WMLayer } from '@opengeoweb/webmap';
+import { layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, uiSelectors, uiTypes, useSetupDialog, uiActions, genericActions, drawtoolSelectors, syncConstants, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
+import { WMGetServiceFromStore, getCapabilities, webmapUtils, LayerType, handleMomentISOString, WMLayer, getWMJSMapById } from '@opengeoweb/webmap';
 import { Box as Box$1 } from '@mui/system';
 import _, { isEqual, range } from 'lodash';
-import { MapControlButton, ZoomControls, MapView, MapViewLayer, LegendDialog, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
+import { MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, ZoomControls, MapView, MapViewLayer, LegendDialog, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
 import { TIME_SLIDER_LEGEND_HEIGHT, TimeSliderConnect, TimeSliderClockConnect, speedFactors } from '@opengeoweb/timeslider';
 import axios from 'axios';
 import { useDebounce } from '@opengeoweb/api';
@@ -561,7 +561,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     tooltipTitle: "small",
     "data-testid": "collapseSmall-btn",
     onClick: function onClick() {
-      if (mapWidth && mapWidth > sizeSmall.width) {
+      if (!isDockedLayerManager) {
+        onChangeSize(sizeSmall);
+      } else if (mapWidth && mapWidth > sizeSmall.width) {
         onChangeSize(sizeSmall);
       }
     },
@@ -570,7 +572,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     tooltipTitle: "medium",
     "data-testid": "collapseMedium-btn",
     onClick: function onClick() {
-      if (mapWidth && mapWidth > sizeMedium.width) {
+      if (!isDockedLayerManager) {
+        onChangeSize(sizeMedium);
+      } else if (mapWidth && mapWidth > sizeMedium.width) {
         onChangeSize(sizeMedium);
       }
     },
@@ -579,7 +583,9 @@ var HeaderOptions = function HeaderOptions(_ref) {
     tooltipTitle: "large",
     "data-testid": "collapseLarge-btn",
     onClick: function onClick() {
-      if (mapWidth && mapWidth > sizeLarge.width) {
+      if (!isDockedLayerManager) {
+        onChangeSize(sizeLarge);
+      } else if (mapWidth && mapWidth > sizeLarge.width) {
         onChangeSize(sizeLarge);
       }
     },
@@ -916,6 +922,9 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
   var isLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime && selectedDimension.maxValue === selectedDimension.currentValue;
   return /*#__PURE__*/React__default.createElement(TooltipSelect, {
     disableUnderline: true,
+    SelectDisplayProps: {
+      'aria-label': 'dimensionSelectValue'
+    },
     tooltip: tooltip,
     isEnabled: isEnabled,
     value: isLatest ? 'Latest' : selectedDimension.currentValue,
@@ -980,6 +989,9 @@ var DimensionSelectName = function DimensionSelectName(_ref) {
   return /*#__PURE__*/React__default.createElement(TooltipSelect, {
     disableUnderline: true,
     tooltip: tooltip,
+    SelectDisplayProps: {
+      'aria-label': 'dimensionSelectName'
+    },
     isEnabled: isEnabled,
     value: selectedDimensionName,
     list: dimensionNames.map(function (name) {
@@ -3110,7 +3122,7 @@ var DragHandle = function DragHandle(_ref) {
   }, icon);
 };
 
-var LayerContainerRow = function LayerContainerRow(_a) {
+var LayerContainerRow = /*#__PURE__*/React.memo(function (_a) {
   var mapId = _a.mapId,
     settings = _a.settings,
     gridProps = __rest(_a, ["mapId", "settings"]);
@@ -3119,6 +3131,14 @@ var LayerContainerRow = function LayerContainerRow(_a) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     keyPressed = _React$useState2[0],
     setKeyPressed = _React$useState2[1];
+  var _React$useTransition = React.useTransition(),
+    _React$useTransition2 = _slicedToArray(_React$useTransition, 2),
+    isPending = _React$useTransition2[0],
+    startTransition = _React$useTransition2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    rowsToDisplay = _React$useState4[0],
+    setRowsToDisplay = _React$useState4[1];
   var layerIds = useSelector(function (store) {
     return mapSelectors.getLayerIds(store, mapId);
   });
@@ -3133,10 +3153,10 @@ var LayerContainerRow = function LayerContainerRow(_a) {
       origin: layerTypes.LayerActionOrigin.layerManager
     }));
   }, [dispatch]);
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    activeDragIndex = _React$useState4[0],
-    setActiveDragIndex = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    activeDragIndex = _React$useState6[0],
+    setActiveDragIndex = _React$useState6[1];
   var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
   var onStart = React.useCallback(function (_ref2) {
     var oldIndex = _ref2.oldIndex;
@@ -3194,6 +3214,31 @@ var LayerContainerRow = function LayerContainerRow(_a) {
       return window.removeEventListener('wheel', preventDefault);
     };
   }, [keyPressed, preventDefault]);
+  var contents = layerIds.map(function (layerId, index) {
+    var _a, _b;
+    return /*#__PURE__*/React.createElement(LayerRowConnect, {
+      mapId: mapId,
+      layerId: layerId,
+      layerIndex: index,
+      key: "layerRowConnect-".concat(layerId),
+      dragHandle: /*#__PURE__*/React.createElement(DragHandle, {
+        isDisabled: isDragDisabled,
+        index: index,
+        hideTooltip: isSorting || isDragDisabled,
+        isSorting: isSorting,
+        icon: (_a = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _a === void 0 ? void 0 : _a.icon,
+        tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _b === void 0 ? void 0 : _b.tooltipTitle
+      }),
+      settings: settings
+    });
+  });
+  React.useEffect(function () {
+    if (rowsToDisplay < contents.length) {
+      startTransition(function () {
+        setRowsToDisplay(rowsToDisplay + contents.length);
+      });
+    }
+  }, [contents.length, rowsToDisplay]);
   return /*#__PURE__*/React.createElement(Grid, Object.assign({
     container: true,
     item: true,
@@ -3223,25 +3268,10 @@ var LayerContainerRow = function LayerContainerRow(_a) {
     style: {
       width: '100%'
     }
-  }, layerIds.map(function (layerId, index) {
-    var _a, _b;
-    return /*#__PURE__*/React.createElement(LayerRowConnect, {
-      mapId: mapId,
-      layerId: layerId,
-      layerIndex: index,
-      key: "layerRowConnect-".concat(layerId),
-      dragHandle: /*#__PURE__*/React.createElement(DragHandle, {
-        isDisabled: isDragDisabled,
-        index: index,
-        hideTooltip: isSorting || isDragDisabled,
-        isSorting: isSorting,
-        icon: (_a = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _a === void 0 ? void 0 : _a.icon,
-        tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _b === void 0 ? void 0 : _b.tooltipTitle
-      }),
-      settings: settings
-    });
-  })));
-};
+  }, isPending ? ( /*#__PURE__*/React.createElement(LinearProgress, {
+    "data-testid": "loading-bar"
+  })) : contents.slice(0, rowsToDisplay)));
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4394,6 +4424,9 @@ var ProjectionSelect = function ProjectionSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
+    SelectDisplayProps: {
+      'aria-label': 'projectionSelect'
+    },
     tooltip: "Projection: ".concat(currentProjectionObject === null || currentProjectionObject === void 0 ? void 0 : currentProjectionObject.name),
     isEnabled: true,
     style: {
@@ -4867,167 +4900,6 @@ var LayerManagerMapButtonConnect = function LayerManagerMapButtonConnect(_ref) {
   }, /*#__PURE__*/React.createElement(Layers, null));
 };
 
-var dimensionConfig = [{
-  name: 'elevation',
-  label: 'Vertical level',
-  defaultUnit: 'hPa',
-  reversed: true,
-  iconType: 'IconLevels'
-}, {
-  name: 'ensemble_member',
-  label: 'Ensemble member',
-  defaultUnit: 'member',
-  reversed: false,
-  iconType: 'IconEnsemble'
-}, {
-  name: 'probability',
-  label: 'Probability',
-  defaultUnit: '%',
-  reversed: false,
-  iconType: 'IconLevels'
-}, {
-  name: 'level',
-  label: 'Level',
-  defaultUnit: 'level',
-  reversed: false,
-  iconType: 'IconLevels'
-}];
-var getDimensionIcon = function getDimensionIcon(iconType) {
-  if (iconType === 'IconEnsemble') {
-    return Equalizer;
-  }
-  return DimensionsElevation;
-};
-
-/* *
- * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var DimensionSelectButton = function DimensionSelectButton(_ref) {
-  var dimension = _ref.dimension,
-    onClickDimensionButton = _ref.onClickDimensionButton,
-    _ref$isActive = _ref.isActive,
-    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
-  var dimConfig = dimensionConfig.find(function (cnf) {
-    return cnf.name === dimension;
-  });
-  var Icon = getDimensionIcon(dimConfig && dimConfig.iconType || 'IconLevels');
-  var title = "Show ".concat(dimConfig ? dimConfig.label.toLowerCase() : dimension.toLowerCase());
-  return /*#__PURE__*/React.createElement(MapControlButton, {
-    title: title,
-    "data-testid": "dimensionMapBtn-".concat(dimension),
-    onClick: onClickDimensionButton,
-    isActive: isActive
-  }, /*#__PURE__*/React.createElement(Icon, null));
-};
-
-var SmallFontSlider = styled(Slider)(function () {
-  return {
-    '& .MuiSlider-markLabel': {
-      fontSize: '80%'
-    }
-  };
-});
-var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
-  var marks = _ref.marks,
-    layerTitle = _ref.layerTitle,
-    _ref$reverse = _ref.reverse,
-    reverse = _ref$reverse === void 0 ? false : _ref$reverse,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$managedValue = _ref.managedValue,
-    managedValue = _ref$managedValue === void 0 ? null : _ref$managedValue,
-    _ref$validSelection = _ref.validSelection,
-    validSelection = _ref$validSelection === void 0 ? true : _ref$validSelection,
-    _ref$alertColor = _ref.alertColor,
-    alertColor = _ref$alertColor === void 0 ? 'red' : _ref$alertColor,
-    onChangeDimensionValue = _ref.onChangeDimensionValue;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentIndex = _useState2[0],
-    setCurrentIndex = _useState2[1];
-  if (!marks || !marks.length) {
-    return null;
-  }
-  var sortedMarks = _toConsumableArray(marks).sort(function (a, b) {
-    return Number(typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value);
-  });
-  var adaptedMarks = reverse ? sortedMarks.reverse() : sortedMarks;
-  var values = adaptedMarks.map(function (m) {
-    return m.value;
-  });
-  // using index as values in slider to get constant spacing between marks
-  var indexLabelMarks = adaptedMarks.map(function (m, index) {
-    return {
-      value: index,
-      label: m.label
-    };
-  });
-  var sliderValue = managedValue !== null ? values.findIndex(function (v) {
-    return v === managedValue;
-  }) : currentIndex;
-  var upDownNavigation = function upDownNavigation(event) {
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.metaKey || event.ctrlKey) {
-      event.preventDefault();
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "slider-dimensionSelect",
-    sx: {
-      height: '320px',
-      margin: '10px',
-      marginLeft: '-5px',
-      minWidth: 120,
-      fontSize: '90%'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "span",
-    m: 1
-  }, /*#__PURE__*/React.createElement(SmallFontSlider, {
-    "data-testid": "verticalSlider",
-    orientation: "vertical",
-    "aria-labelledby": "vertical-slider",
-    step: null,
-    min: 0,
-    max: indexLabelMarks.length - 1,
-    marks: indexLabelMarks,
-    style: !validSelection ? {
-      color: alertColor
-    } : {},
-    disabled: isDisabled,
-    value: sliderValue,
-    onKeyDown: upDownNavigation,
-    onChange: function onChange(e, val) {
-      onChangeDimensionValue(values[val].toString());
-      if (!managedValue) {
-        setCurrentIndex(val);
-      }
-    }
-  }))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: layerTitle
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body2",
-    sx: {
-      paddingLeft: '10px',
-      maxWidth: 130,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, layerTitle)));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5041,100 +4913,27 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
  * 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)
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * */
-var marksByDimension = function marksByDimension(dim) {
-  if (!dim || !dim.name) {
-    return [];
-  }
-  var dimCnf = dimensionConfig.find(function (cnf) {
-    return cnf.name === dim.name;
-  });
-  var defaultUnit = dimCnf ? dimCnf.defaultUnit : '';
-  var marks = [];
-  if (dim && dim.size) {
-    for (var i = 0; i < dim.size(); i += 1) {
-      marks.push({
-        value: Number(dim.getValueForIndex(i)) || dim.getValueForIndex(i),
-        label: "".concat(Number(dim.getValueForIndex(i)) || dim.getValueForIndex(i), " ").concat(dim.unitSymbol ? dim.unitSymbol : defaultUnit)
-      });
-    }
-  }
-  return marks;
-};
-
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-var Icon = function Icon(_ref) {
-  var isLayerDimensionSynced = _ref.isLayerDimensionSynced;
-  return isLayerDimensionSynced ? ( /*#__PURE__*/React.createElement(Link, {
-    "data-testid": "syncIcon"
-  })) : ( /*#__PURE__*/React.createElement(LinkOff, {
-    "data-testid": "syncDisIcon"
-  }));
-};
-var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref2) {
-  var layerId = _ref2.layerId,
-    dimConfig = _ref2.dimConfig,
-    dimensionName = _ref2.dimensionName,
-    handleDimensionValueChanged = _ref2.handleDimensionValueChanged,
-    handleSyncChanged = _ref2.handleSyncChanged;
+var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
+  var layerId = _ref.layerId,
+    dimensionName = _ref.dimensionName,
+    handleDimensionValueChanged = _ref.handleDimensionValueChanged,
+    handleSyncChanged = _ref.handleSyncChanged;
   var layerDimension = useSelector(function (store) {
     return layerSelectors.getLayerDimension(store, layerId, dimensionName);
   });
-  var wmLayer = webmapUtils.getWMLayerById(layerId);
-  if (!layerDimension || !wmLayer) {
-    return null;
-  }
-  var wmsDimension = wmLayer.getDimension(dimensionName);
-  if (!wmsDimension) {
+  if (!layerDimension) {
     return null;
   }
-  var layerTitle = wmLayer.title;
-  var marks = marksByDimension(wmsDimension);
-  var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
-  var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
-  return /*#__PURE__*/React.createElement(Grid, {
-    key: layerId,
-    item: true,
-    xs: "auto"
-  }, /*#__PURE__*/React.createElement(CustomIconButton, {
-    tooltipTitle: tooltipTitle,
-    "data-testid": "syncButton",
-    onClick: function onClick() {
-      return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
-    },
-    sx: {
-      margin: '5px'
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    isLayerDimensionSynced: isLayerDimensionSynced
-  })), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
-    marks: marks,
-    layerTitle: layerTitle,
-    reverse: dimConfig ? dimConfig.reversed : false,
-    managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
-    onChangeDimensionValue: function onChangeDimensionValue(value) {
-      handleDimensionValueChanged(layerId, dimensionName, value);
-    },
-    isDisabled: false,
-    validSelection: layerDimension.synced === false || !(layerDimension.validSyncSelection !== undefined && layerDimension.validSyncSelection === false)
-  }));
+  return /*#__PURE__*/React.createElement(MapDimensionSelect, {
+    layerId: layerId,
+    dimensionName: dimensionName,
+    handleDimensionValueChanged: handleDimensionValueChanged,
+    handleSyncChanged: handleSyncChanged,
+    layerDimension: layerDimension
+  });
 };
 
 /* *
@@ -5150,8 +4949,8 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref2)
  * 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)
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * */
 var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
   var mapId = _ref.mapId,
@@ -5201,38 +5000,24 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
     return cnf.name === dimensionName;
   });
   var title = dimConfig ? dimConfig.label : dimensionName;
-  var topPos = index * 32 + 164; // index * btn height + offset top of window
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    startPosition: {
-      left: 50,
-      top: topPos
-    },
-    minWidth: 180,
-    title: title,
+  return /*#__PURE__*/React.createElement(DimensionSelectDialog, {
+    dimensionName: dimensionName,
     isOpen: isOpen,
     "data-testid": "multidimensionContent-".concat(title),
     onClose: onCloseDialog,
-    bounds: "parent",
     onMouseDown: onMouseDown,
     order: order,
-    source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: 4
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    direction: "row"
+    source: source,
+    index: index
   }, layerIds.map(function (layerId) {
     return /*#__PURE__*/React.createElement(DimensionSelectSliderConnect, {
       key: layerId,
       handleDimensionValueChanged: handleDimensionValueChanged,
       handleSyncChanged: handleSyncChanged,
       layerId: layerId,
-      dimConfig: dimConfig,
       dimensionName: dimensionName
     });
-  }))));
+  }));
 };
 
 /* *
@@ -5689,6 +5474,7 @@ var MapViewConnect = function MapViewConnect(_a) {
   var mapId = _a.mapId,
     children = _a.children,
     props = __rest(_a, ["mapId", "children"]);
+  var store = useStore();
   var mapDimensions = useSelector(function (store) {
     return mapSelectors.getMapDimensions(store, mapId);
   });
@@ -5728,19 +5514,6 @@ var MapViewConnect = function MapViewConnect(_a) {
   var timestep = useSelector(function (store) {
     return mapSelectors.getMapTimeStep(store, mapId);
   });
-  // draw tool selectors
-  var activeDrawToolId = useSelector(function (store) {
-    return drawtoolSelectors.getActiveDrawToolId(store);
-  });
-  var shouldAllowMultipleDrawShapes = useSelector(function (store) {
-    return drawtoolSelectors.getShouldAllowMultipleShapes(store, activeDrawToolId);
-  });
-  var geoJSONIntersectionLayerId = useSelector(function (store) {
-    return drawtoolSelectors.getGeoJSONIntersectionLayerId(store, activeDrawToolId);
-  });
-  var geoJSONIntersectionBoundsLayerId = useSelector(function (store) {
-    return drawtoolSelectors.getGeoJSONIntersectionBoundsLayerId(store, activeDrawToolId);
-  });
   var dispatch = useDispatch();
   var mapChangeDimension = React.useCallback(function (mapDimensionPayload) {
     if (mapDimensionPayload.dimension) {
@@ -5787,18 +5560,46 @@ var MapViewConnect = function MapViewConnect(_a) {
   var setSelectedFeature = React.useCallback(function (payload) {
     dispatch(layerActions.setSelectedFeature(payload));
   }, [dispatch]);
-  var updateFeature = React.useCallback(function (payload) {
-    dispatch(layerActions.updateFeature(payload));
-  }, [dispatch]);
-  var exitFeatureDrawMode = React.useCallback(function (payload) {
-    dispatch(layerActions.exitFeatureDrawMode(payload));
-  }, [dispatch]);
+  var updateFeature = React.useCallback(function (_ref) {
+    var geojson = _ref.geojson,
+      reason = _ref.reason,
+      layerId = _ref.layerId;
+    var activeDrawToolId = drawtoolSelectors.getActiveDrawToolId(store.getState());
+    var activeDrawMode = drawtoolSelectors.getActiveDrawMode(store.getState(), activeDrawToolId);
+    dispatch(layerActions.updateFeature({
+      geojson: geojson,
+      reason: reason,
+      layerId: layerId,
+      shouldAllowMultipleShapes: drawtoolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId),
+      geoJSONIntersectionLayerId: drawtoolSelectors.getGeoJSONIntersectionLayerId(store.getState(), activeDrawToolId),
+      geoJSONIntersectionBoundsLayerId: drawtoolSelectors.getGeoJSONIntersectionBoundsLayerId(store.getState(), activeDrawToolId),
+      selectionType: activeDrawMode === null || activeDrawMode === void 0 ? void 0 : activeDrawMode.selectionType
+    }));
+  }, [dispatch, store]);
+  var exitFeatureDrawMode = React.useCallback(function (_ref2) {
+    var reason = _ref2.reason,
+      layerId = _ref2.layerId;
+    var activeDrawToolId = drawtoolSelectors.getActiveDrawToolId(store.getState());
+    dispatch(layerActions.exitFeatureDrawMode({
+      reason: reason,
+      layerId: layerId,
+      shouldAllowMultipleShapes: drawtoolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
+    }));
+  }, [dispatch, store]);
   var activeWindowId = useSelector(uiSelectors.getActiveWindowId);
   var isActiveWindowId = function isActiveWindowId() {
     return activeWindowId === mapId;
   };
   useKeyboardZoomAndPan(isActiveWindowId(), mapId);
   useTouchZoomPan(isActiveWindowId(), mapId);
+  var unRegister = React.useCallback(function (mapId) {
+    unregisterMap({
+      mapId: mapId
+    });
+    syncGroupRemoveSource({
+      id: mapId
+    });
+  }, [syncGroupRemoveSource, unregisterMap]);
   React.useEffect(function () {
     registerMap({
       mapId: mapId
@@ -5807,15 +5608,7 @@ var MapViewConnect = function MapViewConnect(_a) {
       id: mapId,
       type: [syncConstants.SYNCGROUPS_TYPE_SETTIME, syncConstants.SYNCGROUPS_TYPE_SETBBOX]
     });
-    return function () {
-      unregisterMap({
-        mapId: mapId
-      });
-      syncGroupRemoveSource({
-        id: mapId
-      });
-    };
-  }, [mapId, registerMap, syncGroupAddSource, syncGroupRemoveSource, unregisterMap]);
+  }, [mapId, registerMap, syncGroupAddSource]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%'
@@ -5852,6 +5645,9 @@ var MapViewConnect = function MapViewConnect(_a) {
         origin: mapEnums.MapActionOrigin.map,
         mapId: mapId
       });
+    },
+    onWMJSUnMount: function onWMJSUnMount(mapId) {
+      unRegister(mapId);
     }
   }), baseLayers.map(function (layer) {
     return /*#__PURE__*/React.createElement(MapViewLayer, Object.assign({
@@ -5905,17 +5701,13 @@ var MapViewConnect = function MapViewConnect(_a) {
         updateFeature({
           geojson: geojson,
           layerId: layer.id,
-          reason: reason,
-          shouldAllowMultipleShapes: shouldAllowMultipleDrawShapes,
-          geoJSONIntersectionLayerId: geoJSONIntersectionLayerId,
-          geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
+          reason: reason
         });
       },
       exitDrawModeCallback: function exitDrawModeCallback(reason) {
         return exitFeatureDrawMode({
           reason: reason,
-          layerId: layer.id,
-          shouldAllowMultipleShapes: shouldAllowMultipleDrawShapes
+          layerId: layer.id
         });
       }
     }, layer));
@@ -6880,6 +6672,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       controls: {},
       displayTimeInMap: displayTimeInMap,
       showScaleBar: false,
+      shouldAutoFetch: shouldAutoUpdate,
       mapId: mapId
     }, children), multiLegend && ( /*#__PURE__*/React__default.createElement(LegendConnect, {
       showMapId: true,
@@ -6898,7 +6691,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       isDocked: true,
       mapWidthRef: mapWidthRef
     }));
-  }, [children, disableTimeSlider, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayLayerManagerAndLegendButtonInMap, displaySearchButtonInMap, displayTimeInMap, id, mapControls, mapControlsPositionTop, mapId, multiLegend, showClock, title, mapWidthRef]);
+  }, [children, disableTimeSlider, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayLayerManagerAndLegendButtonInMap, displaySearchButtonInMap, displayTimeInMap, id, mapControls, mapControlsPositionTop, mapId, multiLegend, showClock, shouldAutoUpdate, title, mapWidthRef]);
 };
 
 /* *
@@ -7062,7 +6855,7 @@ var useHasSyncGroupWithLayerActions = function useHasSyncGroupWithLayerActions(s
 var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTime, layers, syncGroupsIds, displayLayerManagerAndLegendButtonInMap, displayDimensionSelectButtonInMap) {
   var mapTime = dateUtils.dateToString(dateUtils.add(dateUtils.utc(referenceTime), {
     hours: timeIncrement
-  }), "yyyy-MM-dd'T'HH:mm:ss'Z'");
+  }), "yyyy-MM-dd'T'HH:mm:ss'Z'") || dateUtils.getCurrentTimeAsString();
   return {
     id: uniqueId,
     syncGroupsIds: syncGroupsIds,
@@ -7220,8 +7013,8 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * */
 var componentsLookUp = function componentsLookUp(_ref) {
   var componentType = _ref.componentType,
@@ -7287,14 +7080,6 @@ var componentsLookUp = function componentsLookUp(_ref) {
           "data-testid": "coreModelRunInterval"
         }));
       }
-    case 'TimeSlider':
-      {
-        var sliderPreset = initialProps.sliderPreset;
-        return /*#__PURE__*/React__default.createElement(TimeSliderConnect, Object.assign({}, sliderPreset, {
-          sourceId: id,
-          "data-testid": "coreTimeSliderConnect"
-        }));
-      }
     default:
       return null;
   }
@@ -7685,11 +7470,76 @@ var MILLISECOND_TO_DAY = 1 / 86400000;
 var MILLISECOND_TO_SECOND = 1 / 1000;
 var MILLISECOND_TO_MINUTE = 1 / 60000;
 var MINUTE_TO_SECOND = 60;
+var MINUTE_TO_MILLISECOND = 60000;
 var SECOND_TO_DAY = 1 / 86400;
 var SECOND_TO_HOUR = 1 / 3600;
 var SECOND_TO_MILLISECOND = 1000;
 var SEVEN_DAYS_IN_SECONDS = 7 * 24 * 60 * 60;
 var ONE_DAY_IN_SECONDS = DAY_TO_SECOND;
+/**
+ * Default behaviour for time slider lite to update
+ *  - Update current time
+ *  - Update time range
+ *  - Update layers
+ * @param mapId
+ * @param options
+ */
+var defaultTimeSliderLiteUpdate = function defaultTimeSliderLiteUpdate(mapId, options) {
+  var _a;
+  var updateIntervalSeconds = options.updateIntervalSeconds,
+    setCurrentTime = options.setCurrentTime,
+    timeRange = options.timeRange,
+    setTimeRange = options.setTimeRange;
+  setCurrentTime(Math.floor(Date.now() * MILLISECOND_TO_SECOND));
+  if (timeRange) {
+    setTimeRange([timeRange[0] + updateIntervalSeconds, timeRange[1] + updateIntervalSeconds]);
+  }
+  var layers = (_a = getWMJSMapById(mapId)) === null || _a === void 0 ? void 0 : _a.getLayers();
+  layers === null || layers === void 0 ? void 0 : layers.forEach(function (layer) {
+    layer.parseLayer(undefined, true, 'WMLayer timeSliderLite auto update');
+  });
+};
+/**
+ * Connected hook for updating time range and current time
+ * @param updateInterval Update interval in minutes
+ * @param timeRange [startTime, endTime] in seconds
+ * @param setTimeRange Sets the time range
+ * @param options Options
+ */
+var useAutoUpdate = function useAutoUpdate(mapId, updateInterval, timeRange, setTimeRange, options) {
+  var _a;
+  var _useState = useState(Math.floor(Date.now() * MILLISECOND_TO_SECOND)),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentTime = _useState2[0],
+    setCurrentTime = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    updateIntervalInstance = _useState4[0],
+    setUpdateIntervalInstance = _useState4[1];
+  var updateIntervalSeconds = ((_a = updateInterval !== null && updateInterval !== void 0 ? updateInterval : options === null || options === void 0 ? void 0 : options.defaultUpdateInterval) !== null && _a !== void 0 ? _a : 1) * MINUTE_TO_SECOND;
+  useEffect(function () {
+    clearInterval(updateIntervalInstance);
+    var intervalCallback = function intervalCallback() {
+      var _a;
+      return ((_a = options === null || options === void 0 ? void 0 : options.handleUpdate) !== null && _a !== void 0 ? _a : defaultTimeSliderLiteUpdate)(mapId, {
+        updateIntervalSeconds: updateIntervalSeconds,
+        setCurrentTime: setCurrentTime,
+        timeRange: timeRange,
+        setTimeRange: setTimeRange
+      });
+    };
+    var interval = setInterval(intervalCallback, updateIntervalSeconds * SECOND_TO_MILLISECOND);
+    setUpdateIntervalInstance(interval);
+    return function () {
+      return clearInterval(interval);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updateIntervalSeconds, timeRange]);
+  return {
+    currentTime: currentTime,
+    updateIntervalSeconds: updateIntervalSeconds
+  };
+};
 /**
  * Reformats a date that has capitalized first letter and colon separator for time
  * @param dateString Date string from Date.toLocaleDateString
@@ -7826,12 +7676,12 @@ var defaultTimeRange = function defaultTimeRange(layers) {
 };
 var useDefaultTimeRange = function useDefaultTimeRange(layers, updateThreshold) {
   var currentTime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Math.floor(Date.now() * MILLISECOND_TO_SECOND);
-  var _useState = useState([0, 0]),
-    _useState2 = _slicedToArray(_useState, 2),
-    _useState2$ = _slicedToArray(_useState2[0], 2),
-    defaultStartTime = _useState2$[0],
-    defaultEndTime = _useState2$[1],
-    setDefaultTimeRange = _useState2[1];
+  var _useState5 = useState([0, 0]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    _useState6$ = _slicedToArray(_useState6[0], 2),
+    defaultStartTime = _useState6$[0],
+    defaultEndTime = _useState6$[1],
+    setDefaultTimeRange = _useState6[1];
   var updateThresholdInMinutes = updateThreshold * MINUTE_TO_SECOND;
   var updateDefaultTimeRange = function updateDefaultTimeRange() {
     var newTimeRange = defaultTimeRange(layers, currentTime);
@@ -7844,7 +7694,7 @@ var useDefaultTimeRange = function useDefaultTimeRange(layers, updateThreshold)
   useEffect(function () {
     updateDefaultTimeRange();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [layers]);
+  }, [layers, currentTime]);
   return [defaultStartTime, defaultEndTime];
 };
 var generateCustomTimeList = function generateCustomTimeList(currentTime, startTime, endTime, timeStep, timeZoneOffsetSeconds) {
@@ -7942,10 +7792,13 @@ var timeSliderLiteUtils = /*#__PURE__*/Object.freeze({
   MILLISECOND_TO_SECOND: MILLISECOND_TO_SECOND,
   MILLISECOND_TO_MINUTE: MILLISECOND_TO_MINUTE,
   MINUTE_TO_SECOND: MINUTE_TO_SECOND,
+  MINUTE_TO_MILLISECOND: MINUTE_TO_MILLISECOND,
   SECOND_TO_DAY: SECOND_TO_DAY,
   SECOND_TO_HOUR: SECOND_TO_HOUR,
   SECOND_TO_MILLISECOND: SECOND_TO_MILLISECOND,
   SEVEN_DAYS_IN_SECONDS: SEVEN_DAYS_IN_SECONDS,
+  defaultTimeSliderLiteUpdate: defaultTimeSliderLiteUpdate,
+  useAutoUpdate: useAutoUpdate,
   reformatFinnishDateString: reformatFinnishDateString,
   shortUTCTime: shortUTCTime,
   getMonthChanges: getMonthChanges,
@@ -8448,7 +8301,8 @@ var AnimationSpeedOptions = function AnimationSpeedOptions(_ref) {
 
 var defaultUpdateIntervalOptions = [1, 2, 5, 10, 15, 30, 60];
 var UpdateIntervalOptions = function UpdateIntervalOptions(_ref) {
-  var defaultUpdateInterval = _ref.defaultUpdateInterval,
+  var _ref$defaultUpdateInt = _ref.defaultUpdateInterval,
+    defaultUpdateInterval = _ref$defaultUpdateInt === void 0 ? 1 : _ref$defaultUpdateInt,
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     _ref$intervalOptionPr = _ref.intervalOptionPrefix,
     intervalOptionPrefix = _ref$intervalOptionPr === void 0 ? '' : _ref$intervalOptionPr,
@@ -8490,7 +8344,7 @@ var UpdateIntervalOptions = function UpdateIntervalOptions(_ref) {
     onChange: function onChange(event) {
       var _a;
       var newValue = Number((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
-      setUpdateInterval && setUpdateInterval(newValue);
+      setUpdateInterval && setUpdateInterval(newValue === defaultValue ? null : newValue);
     },
     IconComponent: dropdownButtonIcon
   }, updateIntervalOptions.map(function (option) {
@@ -9666,8 +9520,8 @@ var useOnToggleAnimation = function useOnToggleAnimation(dispatch, mapId, select
       origin: mapEnums.MapActionOrigin.map
     }));
   };
-  var onToggleAnimation = function onToggleAnimation() {
-    if (isAnimating) {
+  var onToggleAnimation = function onToggleAnimation(forceStart) {
+    if (isAnimating && !forceStart) {
       dispatch(mapActions.mapStopAnimation({
         mapId: mapId,
         origin: mapEnums.MapActionOrigin.map
@@ -9692,31 +9546,42 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
   var overrideUseTimeRange = _a.overrideUseTimeRange,
     overrideUseTimeStep = _a.overrideUseTimeStep,
     overrideUseTimeZone = _a.overrideUseTimeZone,
+    overrideUseUpdateInterval = _a.overrideUseUpdateInterval,
+    overrideHandleAutoUpdate = _a.overrideHandleAutoUpdate,
     sourceId = _a.sourceId,
     mapId = _a.mapId,
     _a$isAlwaysVisible = _a.isAlwaysVisible,
     isAlwaysVisible = _a$isAlwaysVisible === void 0 ? false : _a$isAlwaysVisible,
     TimeSliderLiteOptionsMenuProps = _a.TimeSliderLiteOptionsMenuProps,
-    timeSliderProps = __rest(_a, ["overrideUseTimeRange", "overrideUseTimeStep", "overrideUseTimeZone", "sourceId", "mapId", "isAlwaysVisible", "TimeSliderLiteOptionsMenuProps"]);
-  var _React$useState = React.useState(false),
+    timeSliderProps = __rest(_a, ["overrideUseTimeRange", "overrideUseTimeStep", "overrideUseTimeZone", "overrideUseUpdateInterval", "overrideHandleAutoUpdate", "sourceId", "mapId", "isAlwaysVisible", "TimeSliderLiteOptionsMenuProps"]);
+  var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     menuOpen = _React$useState2[0],
     setMenuOpen = _React$useState2[1];
-  var useTimeRange = React.useState(null);
+  var useTimeRange = React__default.useState(null);
   var _ref = overrideUseTimeRange || useTimeRange,
     _ref2 = _slicedToArray(_ref, 2),
     timeRange = _ref2[0],
     setTimeRange = _ref2[1];
-  var useTimeStep = React.useState(null);
+  var useTimeStep = React__default.useState(null);
   var _ref3 = overrideUseTimeStep || useTimeStep,
     _ref4 = _slicedToArray(_ref3, 2),
     timeStep = _ref4[0],
     setTimeStep = _ref4[1];
-  var useTimeZone = React.useState('LT');
+  var useTimeZone = React__default.useState('LT');
   var _ref5 = overrideUseTimeZone || useTimeZone,
     _ref6 = _slicedToArray(_ref5, 2),
     timeZone = _ref6[0],
     setTimeZone = _ref6[1];
+  var useUpdateInterval = React__default.useState(null);
+  var _ref7 = overrideUseUpdateInterval || useUpdateInterval,
+    _ref8 = _slicedToArray(_ref7, 2),
+    updateInterval = _ref8[0],
+    setUpdateInterval = _ref8[1];
+  var _useAutoUpdate = useAutoUpdate(mapId, updateInterval, timeRange, setTimeRange, Object.assign(Object.assign({}, TimeSliderLiteOptionsMenuProps), {
+      handleUpdate: overrideHandleAutoUpdate
+    })),
+    currentTime = _useAutoUpdate.currentTime;
   var isTimeSliderVisible = useSelector(function (store) {
     return mapSelectors.isTimeSliderVisible(store, mapId);
   });
@@ -9748,18 +9613,25 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
   var layers = useSelector(function (store) {
     return mapSelectors.getMapLayers(store, mapId);
   });
-  var _useDefaultTimeRange = useDefaultTimeRange(layers, HOUR_TO_MINUTE),
+  var _useDefaultTimeRange = useDefaultTimeRange(layers, HOUR_TO_MINUTE, currentTime),
     _useDefaultTimeRange2 = _slicedToArray(_useDefaultTimeRange, 2),
     defaultStartTime = _useDefaultTimeRange2[0],
     defaultEndTime = _useDefaultTimeRange2[1];
-  var _ref7 = timeRange || [defaultStartTime, defaultEndTime],
-    _ref8 = _slicedToArray(_ref7, 2),
-    startTime = _ref8[0],
-    endTime = _ref8[1];
+  var _ref9 = timeRange || [defaultStartTime, defaultEndTime],
+    _ref10 = _slicedToArray(_ref9, 2),
+    startTime = _ref10[0],
+    endTime = _ref10[1];
   var selectedTime = useSelector(function (store) {
     return mapSelectors.getSelectedTime(store, mapId);
   });
   var onToggleAnimation = useOnToggleAnimation(dispatch, mapId, selectedTime, timeStep, defaultTimeStep, startTime, endTime, isAnimating, timeSliderProps);
+  // Restart animation if auto updated
+  useEffect(function () {
+    if (isAnimating) {
+      onToggleAnimation(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTime]);
   var handleTimeRangeChange = function handleTimeRangeChange(newTimeRange) {
     if (isAnimating && newTimeRange) {
       dispatch(mapActions.mapStopAnimation({
@@ -9776,7 +9648,7 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     }
     setTimeStep(newTimeStep);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && menuOpen && ( /*#__PURE__*/React.createElement(TimeSliderLiteOptionsMenu, Object.assign({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isVisible && menuOpen && ( /*#__PURE__*/React__default.createElement(TimeSliderLiteOptionsMenu, Object.assign({
     menuOpen: menuOpen,
     setMenuOpen: setMenuOpen,
     defaultTimeRange: [defaultStartTime, defaultEndTime],
@@ -9784,11 +9656,13 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     useTimeRange: [timeRange, handleTimeRangeChange],
     useTimeStep: [timeStep, handleTimeStepChange],
     useAnimationSpeed: [animationSpeed, handleAnimationSpeedChange],
+    useUpdateInterval: [updateInterval, setUpdateInterval],
     useTimeZone: [timeZone, setTimeZone],
     closeButtonIcon: (_d = (_c = timeSliderProps.settings) === null || _c === void 0 ? void 0 : _c.closeButton) === null || _d === void 0 ? void 0 : _d.icon,
     dropdownButtonIcon: (_f = (_e = timeSliderProps.settings) === null || _e === void 0 ? void 0 : _e.dropdownButton) === null || _f === void 0 ? void 0 : _f.icon,
     TimeZoneSwitch: (_g = timeSliderProps === null || timeSliderProps === void 0 ? void 0 : timeSliderProps.settings) === null || _g === void 0 ? void 0 : _g.TimeZoneSwitch
-  }, TimeSliderLiteOptionsMenuProps))), /*#__PURE__*/React.createElement(TimeSliderLite, Object.assign({
+  }, TimeSliderLiteOptionsMenuProps))), /*#__PURE__*/React__default.createElement(TimeSliderLite, Object.assign({
+    currentTime: currentTime,
     selectedTime: selectedTime,
     timeStep: timeStep !== null && timeStep !== void 0 ? timeStep : defaultTimeStep,
     timeZone: timeZone,