@opengeoweb/core 4.9.1 → 4.10.0

package/index.umd.js

@@ -836,46 +836,66 @@
       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 += yearsInMintues + "y";
-        time -= yearsInMintues * TimeInMinutes.YEAR;
-      }
 
-      if (time >= TimeInMinutes.MONTH) {
-        var monthsInMinutes = Math.floor(time / TimeInMinutes.MONTH);
-        dateStr += monthsInMinutes + "m";
-        time -= monthsInMinutes * TimeInMinutes.MONTH;
-      }
-
-      if (time >= TimeInMinutes.DAY) {
-        var daysInMinutes = Math.floor(time / TimeInMinutes.DAY);
-        dateStr += 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 += Math.floor(time / TimeInMinutes.HOUR).toLocaleString(undefined, {
-          minimumIntegerDigits: 2,
-          useGrouping: false
-        }) + "h" + (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,
+            _a = duration.plural,
+            plural = _a === void 0 ? '' : _a;
+        var unit = Math.floor(min / value);
+
+        if (unit > 0 && count < 2) {
+          return {
+            time: "" + time + unit + label + (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,
@@ -10595,7 +10615,6 @@
         return currentStyle === style.name;
       });
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
-        disableUnderline: true,
         tooltip: "Style: " + ((_b = styles[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
         inputProps: {
           SelectDisplayProps: {
@@ -10638,51 +10657,108 @@
      * 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(_a) {
-      var _b = _a.tooltipTitle,
-          tooltipTitle = _b === void 0 ? 'Leading layer' : _b,
-          onClickActivate = _a.onClickActivate,
-          _c = _a.isActive,
-          isActive = _c === void 0 ? false : _c,
-          _d = _a.isEnabled,
-          isEnabled = _d === void 0 ? true : _d,
-          _e = _a.id,
-          id = _e === void 0 ? 'activateLayer-btn' : _e;
-      var iconStyle = makeIconStyle(isActive, isEnabled);
+      var _onChange = _a.onChange,
+          isActive = _a.isActive,
+          isEnabled = _a.isEnabled;
+      return /*#__PURE__*/React__namespace.createElement(shared.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__namespace.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__namespace.createElement(material.MenuItem, {
+        disabled: true
+      }, "Auto-update"), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: "None"
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.None, null),
+        text: "None"
+      })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: "Both"
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Both, null),
+        text: "Both"
+      })));
+    };
 
-      return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
-        tooltipTitle: tooltipTitle,
-        onClick: onClick,
-        icon: isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
-          sx: iconStyle
-        }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
-          sx: iconStyle
-        }),
-        testId: id,
-        isActive: isActive,
-        className: "activateLayer-btn"
+    var AutoUpdateButton$1 = function AutoUpdateButton(_a) {
+      var optionSelected = _a.optionSelected,
+          isActive = _a.isActive,
+          isEnabled = _a.isEnabled;
+      var style = {
+        backgroundColor: isActive ? 'geowebColors.buttons.primary.active.fill' : 'transparent!important',
+        borderRadius: '5px',
+        color: getIconColor(isActive, isEnabled)
+      };
+      var Icon = isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
+        sx: style
+      }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
+        sx: style
       });
+      return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        "data-testid": "activateLayer-btn",
+        "aria-label": "Auto update " + optionSelected,
+        sx: {
+          '&.MuiButtonBase-root': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }, Icon);
+    };
+
+    var AutoOption = function AutoOption(_a) {
+      var icon = _a.icon,
+          text = _a.text;
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
+        sx: {
+          width: '112px'
+        }
+      }, text), /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon));
     };
 
     /* *
@@ -10748,8 +10824,8 @@
           borderRadius: 1,
           marginBottom: 0.5,
           minHeight: '34px',
-          '&.sortable-drag': {
-            boxShadow: 4
+          '&.sortable-chosen': {
+            boxShadow: 1
           },
           '&.sortable-ghost': {
             opacity: 0.5
@@ -10781,8 +10857,9 @@
           },
           id: "enableButton-medium"
         }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
-          onClickActivate: onClickRow,
-          id: "activateLayer-btn-medium"
+          onChange: onClickRow,
+          isActive: false,
+          isEnabled: true
         }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           sx: {
             fontWeight: '500',
@@ -10861,7 +10938,9 @@
           });
         }
       }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
-        onClickActivate: onClickRow
+        onChange: onClickRow,
+        isActive: false,
+        isEnabled: true
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: columnClasses.column2
@@ -11484,11 +11563,10 @@
       }, [dispatch]);
       var isActive = activeLayerId === layerId;
       return /*#__PURE__*/React__namespace.createElement(ActivateLayer, {
-        tooltipTitle: "Leading layer",
-        onClickActivate: function onClickActivate() {
+        onChange: function onChange(isActive) {
           setActiveLayerId({
             mapId: mapId,
-            layerId: layerId
+            layerId: isActive ? layerId : undefined
           });
 
           if (isAutoUpdating$1) {
@@ -11612,7 +11690,9 @@
           _c = _a.index,
           index = _c === void 0 ? undefined : _c,
           _d = _a.hideTooltip,
-          hideTooltip = _d === void 0 ? false : _d;
+          hideTooltip = _d === void 0 ? false : _d,
+          _e = _a.isSorting,
+          isSorting = _e === void 0 ? false : _e;
       var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
       return /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
         tooltipTitle: tooltipTitle,
@@ -11626,7 +11706,7 @@
         disabled: isDisabled,
         isAccessible: true,
         sx: {
-          cursor: 'grab',
+          cursor: isSorting ? 'grabbing' : 'grab',
           '&:hover': {
             backgroundColor: 'inherit!important'
           },
@@ -11688,7 +11768,7 @@
       var onStart = React__namespace.useCallback(function (_a) {
         var oldIndex = _a.oldIndex;
         setActiveDragIndex(oldIndex);
-        Sortable__default["default"].ghost.style.opacity = '1';
+        if (Sortable__default["default"].ghost) Sortable__default["default"].ghost.style.opacity = '1';
       }, []);
       var onEnd = React__namespace.useCallback(function () {
         if (activeDragIndex !== null) {
@@ -11768,12 +11848,11 @@
         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__namespace.createElement(LayerRowConnect, {
@@ -11784,7 +11863,8 @@
           dragHandle: /*#__PURE__*/React__namespace.createElement(DragHandle, {
             isDisabled: isDragDisabled,
             index: index,
-            hideTooltip: isSorting || isDragDisabled
+            hideTooltip: isSorting || isDragDisabled,
+            isSorting: isSorting
           })
         });
       })));
@@ -17237,7 +17317,8 @@
           icon = _a.icon,
           _b = _a.onChangeMouseWheel,
           onChangeMouseWheel = _b === void 0 ? function () {} : _b,
-          animationLength = _a.animationLength;
+          displayVariableDuration = _a.displayVariableDuration,
+          layerHasTimeStep = _a.layerHasTimeStep;
       var currentMarkIndex = marks.findIndex(function (mark) {
         return mark.value === value;
       });
@@ -17277,11 +17358,12 @@
         },
         ref: setAnchorRef,
         active: true,
-        width: "58px",
+        width: "100%",
         onWheel: onWheel
-      }, icon, /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
-        text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
-      }))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+      }, icon, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        fontSize: 12,
+        fontWeight: 400
+      }, displayVariableDuration ? minutesToDescribedDuration(value) : currentMark === null || currentMark === void 0 ? void 0 : currentMark.text))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
         anchorEl: anchorRef,
         open: open,
         onClose: function onClose() {
@@ -17317,7 +17399,7 @@
             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__namespace.createElement(material.MenuItem, {
@@ -17326,8 +17408,8 @@
           setOpen(false);
         },
         selected: isAutoSelected,
-        disabled: isDisabled
-      }, "Auto"), animationLength && /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        disabled: isDisabled || !layerHasTimeStep
+      }, "Auto"), displayVariableDuration && /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true,
         sx: {
           fontSize: '12px',
@@ -17337,12 +17419,12 @@
             minHeight: '30px!important'
           }
         }
-      }, "length"), animationLength && /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, "length"), displayVariableDuration && /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         "data-testid": "menu-animation-length-button",
         active: false,
         disableRipple: true,
         width: "100%"
-      }, minutesToDescribedDuration(animationLength))));
+      }, minutesToDescribedDuration(value))));
     };
 
     /* *
@@ -17474,16 +17556,16 @@
       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,
@@ -17498,15 +17580,17 @@
     var timeStepTitle = 'Time step';
 
     var TimeStepButton = function TimeStepButton(_a) {
-      var timeStep = _a.timeStep,
-          _b = _a.disabled,
-          disabled = _b === void 0 ? false : _b,
+      var _b = _a.timeStep,
+          timeStep = _b === void 0 ? marks$2[0].value : _b,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c,
           isTimestepAuto = _a.isTimestepAuto,
           onChangeTimeStep = _a.onChangeTimeStep,
-          _c = _a.onToggleTimestepAuto,
-          onToggleTimestepAuto = _c === void 0 ? function () {} : _c,
-          _d = _a.isOpenByDefault,
-          isOpenByDefault = _d === void 0 ? false : _d;
+          _d = _a.onToggleTimestepAuto,
+          onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
+          _e = _a.isOpenByDefault,
+          isOpenByDefault = _e === void 0 ? false : _e,
+          timeStepFromLayer = _a.timeStepFromLayer;
 
       var handleMenuItemClick = function handleMenuItemClick(mark) {
         if (isTimestepAuto) {
@@ -17516,6 +17600,12 @@
         onChangeTimeStep(mark.value, MapActionOrigin.map);
       };
 
+      var handleToggleTimeStep = function handleToggleTimeStep() {
+        if (isTimestepAuto) return;
+        onToggleTimestepAuto();
+        timeStepFromLayer && onChangeTimeStep(timeStepFromLayer, MapActionOrigin.map);
+      };
+
       return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
         title: timeStepTitle,
         isOpenByDefault: isOpenByDefault,
@@ -17524,9 +17614,11 @@
         handleMenuItemClick: handleMenuItemClick,
         isDisabled: disabled,
         isAutoSelected: isTimestepAuto,
-        handleAutoClick: onToggleTimestepAuto,
+        handleAutoClick: handleToggleTimeStep,
         icon: /*#__PURE__*/React__namespace.createElement(theme.FastForward, null),
-        onChangeMouseWheel: handleMenuItemClick
+        onChangeMouseWheel: handleMenuItemClick,
+        displayVariableDuration: true,
+        layerHasTimeStep: Boolean(timeStepFromLayer)
       });
     };
 
@@ -17710,7 +17802,6 @@
           disabled = _b === void 0 ? false : _b,
           _c = _a.animationLength,
           animationLength = _c === void 0 ? AnimationLength.Hours1 : _c,
-          animationLengthInMinutes = _a.animationLengthInMinutes,
           onChangeAnimationLength = _a.onChangeAnimationLength;
 
       var onChangeSliderValue = function onChangeSliderValue(mark) {
@@ -17730,7 +17821,7 @@
         isDisabled: disabled,
         value: animationLength,
         onChangeMouseWheel: onChangeSliderValue,
-        animationLength: animationLengthInMinutes
+        displayVariableDuration: true
       });
     };
 
@@ -17778,7 +17869,6 @@
         item: true,
         xs: "auto"
       }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
-        timeStep: 0,
         onChangeTimeStep: function onChangeTimeStep() {},
         isTimestepAuto: false
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -19385,6 +19475,26 @@
       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 " + 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();
@@ -19398,20 +19508,22 @@
       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__default["default"].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 _a = __read([selected].map(function (t) {
         return timestampToPixel(t, centerTime, width, secondsPerPx);
@@ -19419,7 +19531,7 @@
           selectedPx = _a[0];
 
       ctx.clearRect(0, 0, width, height);
-      drawNewCurrentTimeBox(ctx, selected, selectedPx, scale, theme);
+      drawNewCurrentTimeBox(ctx, selected, selectedPx, scale, theme, isAutoUpdating);
     };
 
     /* *
@@ -19451,6 +19563,7 @@
           dataStartTime = _a.dataStartTime,
           dataEndTime = _a.dataEndTime,
           unfilteredSelectedTime = _a.unfilteredSelectedTime,
+          isAutoUpdating = _a.isAutoUpdating,
           onSetNewDate = _a.onSetNewDate,
           setUnfilteredSelectedTime = _a.setUnfilteredSelectedTime;
       var TIME_BOX_WIDTH = 140;
@@ -19531,7 +19644,7 @@
         },
         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);
         }
       }));
     };
@@ -19805,26 +19918,15 @@
       var activeLayerTimeDimension = reactRedux.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__namespace.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({
@@ -19834,11 +19936,12 @@
       };
 
       return /*#__PURE__*/React__namespace.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
       });
     };
 
@@ -20002,11 +20105,6 @@
         return getAnimationEndTime$1(store, mapId);
       });
       var currentDiffInMinutes = moment__default["default"](animationEndTime).diff(moment__default["default"](animationStartTime), 'minutes');
-      var currentLength = Object.values(AnimationLength).map(function (val) {
-        return Number(val);
-      }).find(function (val) {
-        return val >= currentDiffInMinutes;
-      });
 
       var handlechangeAnimationLength = function handlechangeAnimationLength(length) {
         var animationEndTime = moment__default["default"](animationStartTime).add(length, 'minutes').toISOString();
@@ -20018,9 +20116,8 @@
 
       return /*#__PURE__*/React__namespace.createElement(AnimationLengthButton, {
         disabled: isAnimating$1,
-        animationLength: currentLength || Number(AnimationLength.Hours24),
-        onChangeAnimationLength: handlechangeAnimationLength,
-        animationLengthInMinutes: currentDiffInMinutes
+        animationLength: currentDiffInMinutes || Number(AnimationLength.Hours24),
+        onChangeAnimationLength: handlechangeAnimationLength
       });
     };
 
@@ -20349,6 +20446,7 @@
         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)
       };
     }, {
@@ -20367,6 +20465,7 @@
           layers = _a.layers,
           timeStep = _a.timeStep,
           isAnimating = _a.isAnimating,
+          isAutoUpdating = _a.isAutoUpdating,
           stopMapAnimation = _a.stopMapAnimation,
           unfilteredSelectedTime = _a.unfilteredSelectedTime,
           setTimeSliderUnfilteredSelectedTime = _a.setTimeSliderUnfilteredSelectedTime,
@@ -20385,6 +20484,7 @@
         dataStartTime: dataStartTime,
         dataEndTime: dataEndTime,
         timeStep: timeStep,
+        isAutoUpdating: isAutoUpdating,
         unfilteredSelectedTime: unfilteredSelectedTime || selectedTime,
         setUnfilteredSelectedTime: function setUnfilteredSelectedTime(timeSliderUnfilteredSelectedTime) {
           if (setTimeSliderUnfilteredSelectedTime) setTimeSliderUnfilteredSelectedTime({
@@ -27378,7 +27478,7 @@
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
     exports.synchronizationGroupsConfig = synchronizationGroupConfig;
     exports.testLayers = testLayers;
-    exports.timeSliderUtils = TimeSliderUtils;
+    exports.timeSliderUtils = timeSliderUtils;
     exports.uiActions = uiActions;
     exports.uiModuleConfig = uiModuleConfig;
     exports.uiSelectors = selectors$1;