@opengeoweb/core 4.9.1 → 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,
@@ -10183,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: {
@@ -10226,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));
 };
 
 /* *
@@ -10335,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
@@ -10368,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',
@@ -10448,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
@@ -11062,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) {
@@ -11191,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,
@@ -11205,7 +11285,7 @@ var DragHandle = function DragHandle(_ref) {
     disabled: isDisabled,
     isAccessible: true,
     sx: {
-      cursor: 'grab',
+      cursor: isSorting ? 'grabbing' : 'grab',
       '&:hover': {
         backgroundColor: 'inherit!important'
       },
@@ -11252,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) {
@@ -11332,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, {
@@ -11348,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
       })
     });
   })));
@@ -16514,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;
   });
@@ -16556,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() {
@@ -16596,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, {
@@ -16605,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',
@@ -16616,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';
@@ -16737,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,
@@ -16761,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,
@@ -16769,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) {
@@ -16779,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,
@@ -16787,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)
   });
 };
 
@@ -16973,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) {
@@ -16993,7 +17084,7 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
     isDisabled: disabled,
     value: animationLength,
     onChangeMouseWheel: onChangeSliderValue,
-    animationLength: animationLengthInMinutes
+    displayVariableDuration: true
   });
 };
 
@@ -17041,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, {
@@ -18563,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();
@@ -18576,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);
@@ -18598,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) {
@@ -18613,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;
@@ -18697,7 +18810,7 @@ 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);
     }
   }));
 };
@@ -18955,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({
@@ -18984,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
   });
 };
 
@@ -19138,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();
@@ -19154,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
   });
 };
 
@@ -19440,6 +19537,7 @@ var connectRedux = 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)
   };
 }, {
@@ -19458,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,
@@ -19479,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({
@@ -26348,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, 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 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 };