@opengeoweb/time-slider 14.5.1 → 15.0.0

package/index.esm.js

@@ -1,13 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Grid, Typography, Box, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, useTheme, Stack, InputAdornment, ClickAwayListener } from '@mui/material';
+import { Grid, useTheme, Box, Typography, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, Stack, InputAdornment, ClickAwayListener } from '@mui/material';
 import React, { useState, useRef, useEffect, createElement } from 'react';
-import { dateUtils, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, renderCounter, useMakeSureContainerStaysInsideWindow, CanvasComponent, CustomToggleButton } from '@opengeoweb/shared';
+import { dateUtils, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, renderCounter, CustomToggleButton } from '@opengeoweb/shared';
 import { debounce, throttle } from 'lodash';
-import { ChevronDown, ChevronUp, ChevronRight, ChevronLeft, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Edit, Animation, Speed, Clock, FastForward, Resize, dragHandlePath, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
+import { ChevronDown, ChevronUp, dragHandlePath, Edit, Animation, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, Clock, FastForward, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
-import { Resizable } from 're-resizable';
-import Draggable from 'react-draggable';
 import { Box as Box$1 } from '@mui/system';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
@@ -948,2312 +946,1900 @@ var TimeSlider = function TimeSlider(_ref) {
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-// To be used with translations of days in formatted date
-// enum DaysOfWeeki18n {
-//   SUNDAY = 'timeslider-sunday',
-//   MONDAY = 'timeslider-monday',
-//   TUESDAY = 'timeslider-tuesday',
-//   WEDNESDAY = 'timeslider-wednesday',
-//   THURSDAY = 'timeslider-thursday',
-//   FRIDAY = 'timeslider-friday',
-//   SATURDAY = 'timeslider-saturday',
-// }
-// To be used with translations of months in formatted date
-// enum MonthsOfTheYeari18n {
-//   JANUARY = 'timeslider-january',
-//   FEBRUARY = 'timeslider-february',
-//   MARCH = 'timeslider-march',
-//   APRIL = 'timeslider-april',
-//   MAY = 'timeslider-may',
-//   JUNE = 'timeslider-june',
-//   JULY = 'timeslider-july',
-//   AUGUST = 'timeslider-august',
-//   SEPTEMBER = 'timeslider-september',
-//   OCTOBER = 'timeslider-october',
-//   NOVEMBER = 'timeslider-november',
-//   DECEMBER = 'timeslider-december',
-// }
-var DaysOfWeek;
-(function (DaysOfWeek) {
-  DaysOfWeek["SUNDAY"] = "Sun";
-  DaysOfWeek["MONDAY"] = "Mon";
-  DaysOfWeek["TUESDAY"] = "Tue";
-  DaysOfWeek["WEDNESDAY"] = "Wed";
-  DaysOfWeek["THURSDAY"] = "Thu";
-  DaysOfWeek["FRIDAY"] = "Fri";
-  DaysOfWeek["SATURDAY"] = "Sat";
-})(DaysOfWeek || (DaysOfWeek = {}));
-var MonthsOfTheYear;
-(function (MonthsOfTheYear) {
-  MonthsOfTheYear["JANUARY"] = "Jan";
-  MonthsOfTheYear["FEBRUARY"] = "Feb";
-  MonthsOfTheYear["MARCH"] = "Mar";
-  MonthsOfTheYear["APRIL"] = "Apr";
-  MonthsOfTheYear["MAY"] = "May";
-  MonthsOfTheYear["JUNE"] = "Jun";
-  MonthsOfTheYear["JULY"] = "Jul";
-  MonthsOfTheYear["AUGUST"] = "Aug";
-  MonthsOfTheYear["SEPTEMBER"] = "Sep";
-  MonthsOfTheYear["OCTOBER"] = "Oct";
-  MonthsOfTheYear["NOVEMBER"] = "Nov";
-  MonthsOfTheYear["DECEMBER"] = "Dec";
-})(MonthsOfTheYear || (MonthsOfTheYear = {}));
-var dateToManualFormatString = function dateToManualFormatString(inDate) {
-  if (!inDate) {
-    return 'Date not available';
+var _scaleToUnitSeconds, _scaleToRoundableUnit;
+var scaleToUnitSeconds = (_scaleToUnitSeconds = {}, _scaleToUnitSeconds[Scale.Minutes5] = 5 * 60, _scaleToUnitSeconds[Scale.Hour] = 60 * 60, _scaleToUnitSeconds[Scale.Hours3] = 3 * 60 * 60, _scaleToUnitSeconds[Scale.Hours6] = 6 * 60 * 60, _scaleToUnitSeconds[Scale.Day] = 24 * 60 * 60, _scaleToUnitSeconds[Scale.Week] = 7 * 24 * 60 * 60, _scaleToUnitSeconds[Scale.Weeks2] = 14 * 24 * 60 * 60, _scaleToUnitSeconds);
+var TICK_MARK_HEIGHT_PRIMARY = 40;
+var TICK_MARK_HEIGHT_SECONDARY = 10;
+var TICK_MARK_HEIGHT_TERTIARY = 5;
+var getStepPxLineHeight = function getStepPxLineHeight(scale, timestep) {
+  var scaleUnitSeconds = scaleToUnitSeconds[scale];
+  var rem = timestep % scaleUnitSeconds;
+  switch (scale) {
+    case Scale.Hour:
+      {
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+        // 15 min subdivisions
+        if (rem % (15 * 60) === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
+        return TICK_MARK_HEIGHT_TERTIARY;
+      }
+    case Scale.Hours3:
+      {
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+        return TICK_MARK_HEIGHT_TERTIARY;
+      }
+    case Scale.Hours6:
+      {
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+        // 3 hour subdivisions
+        if (rem % (3 * 60 * 60) === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
+        return TICK_MARK_HEIGHT_TERTIARY;
+      }
+    case Scale.Day:
+      {
+        if (rem === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+        // 6 hour subdivisions
+        if (rem % (6 * 60 * 60) === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
+        return TICK_MARK_HEIGHT_TERTIARY;
+      }
+    case Scale.Week:
+    case Scale.Weeks2:
+      {
+        var weekday = dateUtils.getDay(dateUtils.fromUnix(timestep));
+        // dateUtils days range from 0 (Sunday) to 6 (Saturday)
+        if (weekday === 1) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+        return TICK_MARK_HEIGHT_TERTIARY;
+      }
+    case Scale.Year:
+      {
+        var month = dateUtils.getMonth(dateUtils.fromUnix(timestep));
+        // months are zero indexed
+        if (month === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+        if (month % 3 === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
+        return TICK_MARK_HEIGHT_TERTIARY;
+      }
+    case Scale.Minutes5:
+      {
+        // add primary line on day change
+        if (timestep % (60 * 60 * 24) === 0) {
+          return TICK_MARK_HEIGHT_PRIMARY;
+        }
+        return TICK_MARK_HEIGHT_TERTIARY;
+      }
+    default:
+      // Scale.Month
+      return TICK_MARK_HEIGHT_TERTIARY;
   }
-  var EEE = inDate && Object.values(DaysOfWeek)[inDate.getUTCDay()];
-  var dd = ("0" + (inDate == null ? void 0 : inDate.getUTCDate())).slice(-2);
-  var MMM = inDate && Object.values(MonthsOfTheYear)[inDate.getUTCMonth()];
-  var HH = ("0" + (inDate == null ? void 0 : inDate.getUTCHours())).slice(-2);
-  var mm = ("0" + (inDate == null ? void 0 : inDate.getUTCMinutes())).slice(-2);
-  return EEE + " " + dd + " " + MMM + " " + HH + ":" + mm + " UTC";
 };
-
-/**
- * Format a date to a string
- *
- * Expects the following props:
- * @param {Date} inDate - date to be formatted
- *
- */
-var ClockContainer = function ClockContainer(_ref) {
-  var fontSize = _ref.fontSize,
-    isPopperOpen = _ref.isPopperOpen,
-    hideButton = _ref.hideButton,
-    onButtonClick = _ref.onButtonClick,
-    time = _ref.time,
-    setButtonElement = _ref.setButtonElement,
-    popperPlacement = _ref.popperPlacement;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var currentDateString = dateToManualFormatString(dateUtils.fromUnix(time));
-  return jsxs(Grid, {
-    container: true,
-    sx: {
-      justifyContent: 'space-evenly',
-      alignItems: 'center',
-      cursor: 'move',
-      height: '100%',
-      width: '100%',
-      backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
-      borderRadius: '5px'
-    },
-    wrap: "nowrap",
-    children: [jsx(Grid, {
-      sx: {
-        width: '4px'
-      }
-    }), !hideButton && jsx(CustomTooltip, {
-      title: t('timeslider-animation-options'),
-      children: jsx(Grid, {
-        ref: setButtonElement,
-        sx: {
-          zIndex: 2
-        },
-        children: jsx(CustomIconButton, {
-          "aria-label": "Animation options",
-          isSelected: isPopperOpen,
-          onClick: onButtonClick,
-          sx: {
-            color: '#fff!important'
-          },
-          variant: "tool",
-          children: jsx(Icon, {
-            isPopperOpen: isPopperOpen,
-            popperPlacement: popperPlacement
-          })
-        })
-      })
-    }), jsx(Grid, {
-      children: jsx(Typography, {
-        sx: {
-          whiteSpace: 'nowrap',
-          fontSize: fontSize,
-          color: '#fff'
-        },
-        variant: "subtitle2",
-        children: currentDateString
-      })
-    })]
-  });
+var drawStepPxLine = function drawStepPxLine(ctx, theme, stepPx, height, fundamentalScale, timestep) {
+  var ctx2 = ctx;
+  ctx2.strokeStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
+  ctx2.lineWidth = 1;
+  var stepPxLineHeight = getStepPxLineHeight(fundamentalScale, timestep);
+  ctx2.beginPath();
+  ctx2.moveTo(stepPx, height - stepPxLineHeight);
+  ctx2.lineTo(stepPx, height);
+  ctx2.stroke();
 };
-var Icon = function Icon(_ref2) {
-  var isPopperOpen = _ref2.isPopperOpen,
-    popperPlacement = _ref2.popperPlacement;
-  if (isPopperOpen) {
-    if (popperPlacement === 'left') {
-      return jsx(ChevronRight, {});
-    }
-    if (popperPlacement === 'right') {
-      return jsx(ChevronLeft, {});
+var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, scale) {
+  var ctx2 = ctx;
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider.timelineText,
+    fontSize = _theme$palette$geoweb.fontSize,
+    fontFamily = _theme$palette$geoweb.fontFamily,
+    color = _theme$palette$geoweb.color;
+  ctx2.fillStyle = color;
+  // time text has smaller font than other timeline text
+  ctx2.font = fontSize + "px " + fontFamily;
+  ctx2.textAlign = 'left';
+  if (scale === Scale.Year || scale === Scale.Months3 || scale === Scale.Month || scale === Scale.Weeks2 || scale === Scale.Week || scale === Scale.Day) {
+    ctx2.fillText(timeText, stepPx, height - 12);
+  } else {
+    ctx2.fillText(timeText, stepPx - 15, height - 12);
+  }
+};
+var drawYearScaleText = function drawYearScaleText(ctx, theme, newDate, stepPx, height) {
+  var ctx2 = ctx;
+  var _theme$palette$geoweb2 = theme.palette.geowebColors.timeSlider.timelineText,
+    fontSize = _theme$palette$geoweb2.fontSize,
+    fontFamily = _theme$palette$geoweb2.fontFamily,
+    color = _theme$palette$geoweb2.color;
+  ctx2.fillStyle = color;
+  ctx2.font = fontSize + "px " + fontFamily;
+  ctx2.textAlign = 'left';
+  ctx2.fillText(newDate, stepPx + 2, height - 10);
+};
+var drawLeftSideDateText = function drawLeftSideDateText(ctx, theme, newDate, height) {
+  var ctx2 = ctx;
+  var _theme$palette$geoweb3 = theme.palette.geowebColors.timeSlider.timelineText,
+    fontSize = _theme$palette$geoweb3.fontSize,
+    fontFamily = _theme$palette$geoweb3.fontFamily,
+    color = _theme$palette$geoweb3.color;
+  ctx2.fillStyle = color;
+  ctx2.font = fontSize + "px " + fontFamily;
+  ctx2.textAlign = 'left';
+  ctx2.fillText(newDate, 2, height - 30);
+};
+var getTimeFormat = function getTimeFormat(scale) {
+  switch (scale) {
+    case Scale.Year:
+      return 'y';
+    case Scale.Month:
+    case Scale.Months3:
+      return 'MMM';
+    case Scale.Week:
+    case Scale.Weeks2:
+      return 'dd MMM';
+    case Scale.Day:
+      return 'EEE dd';
+    default:
+      return dateUtils.DATE_FORMAT_HOURS;
+  }
+};
+var drawDateChangeLine = function drawDateChangeLine(ctx, theme, stepPx, height) {
+  var ctx2 = ctx;
+  ctx2.strokeStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
+  ctx2.lineWidth = 1;
+  ctx2.beginPath();
+  ctx2.moveTo(stepPx, height - 40);
+  ctx2.lineTo(stepPx, height);
+  ctx2.stroke();
+};
+var drawDashedMonthChangeLine = function drawDashedMonthChangeLine(ctx, theme, stepPx, height) {
+  var ctx2 = ctx;
+  ctx2.strokeStyle = theme.palette.geowebColors.timeSlider.timelineMonthChangeDash.rgba;
+  ctx2.lineWidth = 3;
+  ctx2.setLineDash([5, 5]);
+  ctx2.beginPath();
+  ctx2.moveTo(stepPx, 0);
+  ctx2.lineTo(stepPx, height);
+  ctx2.stroke();
+  ctx2.setLineDash([]);
+};
+var roundByUnitOfTime = function roundByUnitOfTime(timeUnix, unit, roundUp) {
+  if (roundUp === void 0) {
+    roundUp = false;
+  }
+  if (unit === 'hour') {
+    var _timeStartOfPassedUnit = dateUtils.startOfHourUTC(dateUtils.fromUnix(timeUnix));
+    if (roundUp) {
+      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit, {
+        hours: 1
+      }));
     }
-    if (popperPlacement === 'top') {
-      return jsx(ChevronDown, {});
+    return dateUtils.unix(_timeStartOfPassedUnit);
+  }
+  if (unit === 'day') {
+    var _timeStartOfPassedUnit2 = dateUtils.startOfDayUTC(dateUtils.fromUnix(timeUnix));
+    if (roundUp) {
+      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit2, {
+        days: 1
+      }));
     }
-    return jsx(ChevronUp, {});
+    return dateUtils.unix(_timeStartOfPassedUnit2);
   }
-  var popperClosedStyle = {
-    backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
-    outline: '1px solid white',
-    borderRadius: '5px'
-  };
-  if (popperPlacement === 'left') {
-    return jsx(ChevronLeft, {
-      sx: popperClosedStyle
-    });
+  if (unit === 'week') {
+    var _timeStartOfPassedUnit3 = dateUtils.startOfWeekUTC(dateUtils.fromUnix(timeUnix));
+    if (roundUp) {
+      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit3, {
+        weeks: 1
+      }));
+    }
+    return dateUtils.unix(_timeStartOfPassedUnit3);
   }
-  if (popperPlacement === 'right') {
-    return jsx(ChevronRight, {
-      sx: popperClosedStyle
-    });
+  if (unit === 'month') {
+    var _timeStartOfPassedUnit4 = dateUtils.startOfMonthUTC(dateUtils.fromUnix(timeUnix));
+    if (roundUp) {
+      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit4, {
+        months: 1
+      }));
+    }
+    return dateUtils.unix(_timeStartOfPassedUnit4);
   }
-  if (popperPlacement === 'top') {
-    return jsx(ChevronUp, {
-      sx: popperClosedStyle
-    });
+  // Default unit === 'year'
+  var timeStartOfPassedUnit = dateUtils.startOfYearUTC(dateUtils.fromUnix(timeUnix));
+  if (roundUp) {
+    return dateUtils.unix(dateUtils.add(timeStartOfPassedUnit, {
+      years: 1
+    }));
   }
-  return jsx(ChevronDown, {
-    sx: popperClosedStyle
-  });
+  return dateUtils.unix(timeStartOfPassedUnit);
 };
-
-var AutoUpdateButton = function AutoUpdateButton(_ref) {
-  var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
-    toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
-    _ref$isAutoUpdating = _ref.isAutoUpdating,
-    isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    "data-testid": "autoUpdateButton",
-    disabled: disabled,
-    isSelected: isAutoUpdating,
-    onClick: function onClick() {
-      return toggleAutoUpdate();
-    },
-    tooltipTitle: isAutoUpdating ? t('timeslider-auto-update-on') : t('timeslider-auto-update-off'),
-    variant: "tool",
-    children: isAutoUpdating ? jsx(AutoUpdateActive, {
-      "data-testid": "auto-update-svg-on"
-    }) : jsx(AutoUpdateInActive, {
-      "data-testid": "auto-update-svg-off"
-    })
-  });
+var roundToNearestMultiple = function roundToNearestMultiple(timeUnix, scale, roundUp) {
+  if (roundUp === void 0) {
+    roundUp = false;
+  }
+  var stepSeconds = scaleToUnitSeconds[scale];
+  var roundFn = roundUp ? Math.ceil : Math.floor;
+  return roundFn(timeUnix / stepSeconds) * stepSeconds;
 };
-
-var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
-  var isForwardStep = _ref.isForwardStep,
-    isDisabled = _ref.isDisabled,
-    _ref$onClickBFButton = _ref.onClickBFButton,
-    onClickBFButton = _ref$onClickBFButton === void 0 ? function () {} : _ref$onClickBFButton;
-  // Added renderCounter for testing and performance purposes
-  renderCounter.count(BackwardForwardStepButton.name);
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    "aria-label": isForwardStep ? 'forward' : 'backward',
-    "data-testid": isForwardStep ? 'stepForwardButton' : 'stepBackwardButton',
-    disabled: isDisabled,
-    onClick: onClickBFButton,
-    tooltipTitle: isForwardStep ? t('timeslider-forward') : t('timeslider-backward'),
-    variant: "tool",
-    children: isForwardStep ? jsx(StepForward, {
-      "data-testid": "step-forward-svg-path"
-    }) : jsx(StepBackward, {
-      "data-testid": "step-backward-svg-path"
-    })
-  });
+/**
+ * In this script starting and ending times of the time slider are rounded.
+ * Here it is defined what is a time unit to a start of which a rounding is
+ * done for each scale.
+ * @returns an object where there are rounding units of each scale
+ */
+var scaleToRoundableUnit = (_scaleToRoundableUnit = {}, _scaleToRoundableUnit[Scale.Hour] = 'hour', _scaleToRoundableUnit[Scale.Day] = 'day', _scaleToRoundableUnit[Scale.Week] = 'week', _scaleToRoundableUnit[Scale.Weeks2] = 'week', _scaleToRoundableUnit[Scale.Month] = 'week', _scaleToRoundableUnit[Scale.Months3] = 'week', _scaleToRoundableUnit[Scale.Year] = 'year', _scaleToRoundableUnit);
+var getRoundedStartAndEnd = function getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, scale) {
+  if (scale === Scale.Minutes5 || scale === Scale.Hours3 || scale === Scale.Hours6) {
+    return [roundToNearestMultiple(visibleTimeStart, scale, false), roundToNearestMultiple(visibleTimeEnd, scale, true)];
+  }
+  var unit = scaleToRoundableUnit[scale];
+  return [roundByUnitOfTime(visibleTimeStart, unit, false), roundByUnitOfTime(visibleTimeEnd, unit, true)];
 };
-
-var NowButton = function NowButton(_ref) {
-  var _ref$onSetNow = _ref.onSetNow,
-    onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    "aria-label": "now",
-    "data-testid": "nowButtonTooltip",
-    disabled: disabled,
-    onClick: function onClick() {
-      return onSetNow();
-    },
-    tooltipTitle: t('timeslider-now'),
-    variant: "tool",
-    children: jsx(Now, {
-      "data-testid": "now-svg"
-    })
-  });
+var getCustomRoundedStartAndEndScale = function getCustomRoundedStartAndEndScale(scale) {
+  switch (scale) {
+    case Scale.Year:
+      return 'month';
+    case Scale.Month:
+    case Scale.Months3:
+      return 'week';
+    case Scale.Week:
+    case Scale.Weeks2:
+      return 'day';
+    default:
+      return 'day';
+  }
 };
-
-var PlayButton = function PlayButton(_ref) {
-  var isAnimating = _ref.isAnimating,
-    isDisabled = _ref.isDisabled,
-    _ref$onTogglePlayButt = _ref.onTogglePlayButton,
-    onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {} : _ref$onTogglePlayButt;
-  var onTogglePlay = function onTogglePlay() {
-    onTogglePlayButton();
-  };
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    "data-testid": "playButton",
-    disabled: isDisabled,
-    isSelected: isAnimating,
-    onClick: onTogglePlay,
-    tooltipTitle: isAnimating ? t('timeslider-pause') : t('timeslider-play'),
-    variant: "tool",
-    children: isAnimating ? jsx(Pause, {
-      "data-testid": "pause-svg-path"
-    }) : jsx(Play, {
-      "data-testid": "play-svg-path"
-    })
-  });
+var getCustomRoundedStartAndEnd = function getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, unit) {
+  var scale = getCustomRoundedStartAndEndScale(unit);
+  return [roundByUnitOfTime(visibleTimeStart, scale, false), roundByUnitOfTime(visibleTimeEnd, scale, true)];
 };
-
-var ControlButtons = function ControlButtons(_ref) {
-  var backwardBtn = _ref.backwardBtn,
-    forwardBtn = _ref.forwardBtn,
-    playBtn = _ref.playBtn,
-    nowBtn = _ref.nowBtn,
-    autoUpdateBtn = _ref.autoUpdateBtn;
-  return jsxs(Fragment, {
-    children: [jsx(Grid, {
-      children: backwardBtn || jsx(BackwardForwardStepButton, {
-        isForwardStep: false
-      })
-    }), jsx(Grid, {
-      children: forwardBtn || jsx(BackwardForwardStepButton, {
-        isForwardStep: true
-      })
-    }), jsx(Grid, {
-      children: playBtn || jsx(PlayButton, {})
-    }), jsx(Grid, {
-      children: nowBtn || jsx(NowButton, {})
-    }), jsx(Grid, {
-      children: autoUpdateBtn || jsx(AutoUpdateButton, {})
-    })]
-  });
+var incrementTimestep = function incrementTimestep(timeAtTimeStep, fundamentalScale) {
+  switch (fundamentalScale) {
+    case Scale.Minutes5:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        minutes: 1
+      }));
+    case Scale.Hour:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        minutes: 5
+      }));
+    case Scale.Hours3:
+    case Scale.Hours6:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        hours: 1
+      }));
+    case Scale.Day:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        hours: 3
+      }));
+    case Scale.Week:
+    case Scale.Weeks2:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        days: 1
+      }));
+    case Scale.Month:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        weeks: 1
+      }));
+    case Scale.Year:
+    case Scale.Months3:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        months: 1
+      }));
+    default:
+      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
+        months: 1
+      }));
+  }
 };
-
-var THROTTLE_WAIT_TIME = 300; // [ms]
-var THROTTLE_OPTIONS = {
-  trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
+var getTimesteps = function getTimesteps(roundedStart, roundedEnd, fundamentalScaleType) {
+  var timesteps = [];
+  var timestep = roundedStart;
+  while (timestep <= roundedEnd) {
+    timesteps.push(timestep);
+    timestep = incrementTimestep(timestep, fundamentalScaleType);
+  }
+  return timesteps;
 };
-var TimeSliderMenu = function TimeSliderMenu(_ref) {
-  var marks = _ref.marks,
-    value = _ref.value,
-    allOptionsDisabled = _ref.allOptionsDisabled,
-    isAutoDisabled = _ref.isAutoDisabled,
-    handleAutoClick = _ref.handleAutoClick,
-    isAutoSelected = _ref.isAutoSelected,
-    title = _ref.title,
-    icon = _ref.icon,
-    _ref$onChangeSliderVa = _ref.onChangeSliderValue,
-    onChangeSliderValue = _ref$onChangeSliderVa === void 0 ? function () {} : _ref$onChangeSliderVa,
-    displayCurrentLength = _ref.displayCurrentLength,
-    _ref$disbleUserSetDur = _ref.disbleUserSetDuration,
-    disbleUserSetDuration = _ref$disbleUserSetDur === void 0 ? true : _ref$disbleUserSetDur,
-    customLengthSelector = _ref.customLengthSelector,
-    _ref$setOpen = _ref.setOpen,
-    setOpen = _ref$setOpen === void 0 ? function () {} : _ref$setOpen,
-    _ref$customFieldHeade = _ref.customFieldHeader,
-    customFieldHeader = _ref$customFieldHeade === void 0 ? 'timeslider-length' : _ref$customFieldHeade,
-    open = _ref.open;
-  var currentMarkIndex = marks.findIndex(function (mark) {
-    return mark.value === value;
-  });
-  var currentMark = marks[currentMarkIndex];
-  var _React$useState = React.useState(null),
-    anchorRef = _React$useState[0],
-    setAnchorRef = _React$useState[1];
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var _useState = useState(false),
-    displayLengthInputField = _useState[0],
-    setDisplayLengthInputField = _useState[1];
-  React.useEffect(function () {
-    if (!open && displayLengthInputField) {
-      setDisplayLengthInputField(false);
-    }
-  }, [displayLengthInputField, open]);
-  var buttonText = function buttonText(value, displayCurrentLength, currentMark) {
-    if (displayCurrentLength) {
-      return minutesToDescribedDuration(value);
-    }
-    if (currentMark) {
-      var parts = t(currentMark.label).split(' ');
-      if (parts.length > 1) {
-        return parts[0] + parts.slice(1).join(' ');
-      }
-      return parts.join('');
-    }
-    return '';
-  };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  var throttledScroll = React.useCallback(throttle(function (newValue) {
-    onChangeSliderValue(newValue);
-  }, THROTTLE_WAIT_TIME, THROTTLE_OPTIONS), []);
-  var onWheel = React.useCallback(function (event) {
-    var direction = event.deltaY < 0 ? 1 : -1;
-    var newValue = marks[Math.min(Math.max(currentMarkIndex - direction, 0), marks.length - 1)];
-    throttledScroll(newValue.value);
-  }, [currentMarkIndex, marks, throttledScroll]);
-  return jsxs(Box, {
-    onKeyDown: function onKeyDown(event) {
-      event.stopPropagation();
-    },
-    children: [jsxs(CustomIconButton, {
-      isSelected: true,
-      onClick: function onClick() {
-        setOpen(true);
-      },
-      onWheel: onWheel,
-      ref: setAnchorRef,
-      sx: {
-        padding: '11px!important',
-        width: '100%!important'
-      },
-      tooltipTitle: title,
-      variant: "tool",
-      children: [icon, jsx(Typography, {
-        sx: {
-          fontSize: 12,
-          fontWeight: 400,
-          textTransform: 'none'
-        },
-        children: buttonText(value, displayCurrentLength, currentMark)
-      })]
-    }), !!anchorRef && jsxs(Menu, {
-      anchorEl: anchorRef,
-      anchorOrigin: {
-        vertical: -15,
-        horizontal: 'center'
-      },
-      onClose: function onClose() {
-        return setOpen(false);
-      },
-      open: open,
-      slotProps: {
-        backdrop: {
-          sx: {
-            backgroundColor: 'transparent'
-          }
-        }
-      },
-      transformOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      },
-      children: [jsx(MenuItem, {
-        disabled: true,
-        sx: {
-          fontSize: '12px',
-          opacity: 0.67,
-          padding: '0px 12px',
-          '&.MuiMenuItem-root': {
-            minHeight: '30px!important',
-            minWidth: 150
-          }
-        },
-        children: title
-      }), marks.map(function (mark) {
-        var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value && !isAutoSelected;
-        return jsx(MenuItem, {
-          disabled: allOptionsDisabled,
-          onClick: function onClick() {
-            if (!isSelected) {
-              onChangeSliderValue(mark.value);
-            }
-            setOpen(false);
-          },
-          selected: !!isSelected && !displayLengthInputField,
-          children: mark.label || mark.text
-        }, mark.value);
-      }), !!handleAutoClick && jsx(MenuItem, {
-        disabled: allOptionsDisabled || isAutoDisabled,
-        onClick: function onClick() {
-          handleAutoClick();
-          setOpen(false);
-        },
-        selected: isAutoSelected,
-        children: t('timeslider-auto')
-      }), !!displayCurrentLength && jsxs(MenuItem, {
-        disabled: disbleUserSetDuration,
-        onClick: function onClick() {
-          return setDisplayLengthInputField(true);
-        },
-        sx: {
-          maxWidth: '175px'
-        },
-        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
-          sx: {
-            flexDirection: 'column',
-            display: 'flex',
-            flexGrow: 1
-          },
-          children: [jsx(CardHeader, {
-            slotProps: {
-              title: {
-                fontSize: 12
-              }
-            },
-            sx: {
-              height: 2,
-              padding: 0,
-              color: 'geowebColors.greys.accessible'
-            },
-            title: t(customFieldHeader)
-          }), jsxs(Box, {
-            sx: {
-              flexDirection: 'row',
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexGrow: 1,
-              paddingTop: 0.5
-            },
-            children: [jsx(Typography, {
-              sx: {
-                fontSize: 14,
-                textTransform: 'none',
-                lineHeight: 2
-              },
-              children: minutesToDescribedDuration(value)
-            }), jsx(CustomTooltip, {
-              title: t('timeslider-edit'),
-              children: jsx("span", {
-                children: jsx(CustomIconButton, {
-                  "aria-label": "edit animation option",
-                  "data-testid": "editAnimationOption",
-                  children: jsx(Edit, {})
-                })
-              })
-            })]
-          })]
-        })]
-      })]
-    })]
+var getCustomTimesteps = function getCustomTimesteps(roundedStart, roundedEnd, increment) {
+  var timesteps = [];
+  var timestep = roundedStart;
+  while (timestep <= roundedEnd) {
+    var _dateUtils$add;
+    timesteps.push(timestep);
+    timestep = dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timestep), (_dateUtils$add = {}, _dateUtils$add[increment] = 1, _dateUtils$add)));
+  }
+  return timesteps;
+};
+var getLeftSideDateText = function getLeftSideDateText(timestamp, fundamentalScale) {
+  var time = dateUtils.fromUnix(timestamp);
+  switch (fundamentalScale) {
+    case Scale.Minutes5:
+    case Scale.Hour:
+    case Scale.Hours3:
+    case Scale.Hours6:
+      return dateUtils.dateToString(time, 'y MMM EEE dd');
+    case Scale.Day:
+    case Scale.Week:
+    case Scale.Weeks2:
+      return dateUtils.dateToString(time, 'y MMM');
+    case Scale.Month:
+    case Scale.Months3:
+      return dateUtils.dateToString(time, 'y');
+    case Scale.Year:
+      return dateUtils.dateToString(time, 'y');
+    default:
+      return '';
+  }
+};
+var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, secondsPerPx) {
+  var fundamentalScale = getFundamentalScale(secondsPerPx);
+  var _getRoundedStartAndEn = getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, fundamentalScale),
+    roundedStart = _getRoundedStartAndEn[0],
+    roundedEnd = _getRoundedStartAndEn[1];
+  // draw regular tickmarks
+  var ctx = context;
+  getTimesteps(roundedStart, roundedEnd, fundamentalScale).forEach(function (timestep) {
+    var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
+    // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
+    drawStepPxLine(ctx, theme, Math.floor(stepPx) + 0.5, height, fundamentalScale, timestep);
+    // Draw the time step time as text
+    var timeFormat = getTimeFormat(fundamentalScale);
+    var timeText = dateUtils.dateToString(dateUtils.fromUnix(timestep), timeFormat);
+    if ([Scale.Minutes5, Scale.Hour, Scale.Hours3, Scale.Hours6, Scale.Day].includes(fundamentalScale) &&
+    // eslint-disable-next-line @typescript-eslint/no-confusing-non-null-assertion
+    timestep % scaleToUnitSeconds[fundamentalScale] === 0 || fundamentalScale === Scale.Week && dateUtils.getDay(dateUtils.fromUnix(timestep)) === 1) {
+      drawTimeText(ctx, theme, stepPx, height, timeText, fundamentalScale);
+    }
+    if (fundamentalScale === Scale.Year && dateUtils.getMonth(dateUtils.fromUnix(timestep)) === 0) {
+      drawYearScaleText(ctx, theme, timeText, stepPx, height);
+    }
   });
+  // draw month overlay lines
+  if (fundamentalScale === Scale.Week || fundamentalScale === Scale.Weeks2 || fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
+    var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, Scale.Year),
+      _roundedStart = _getCustomRoundedStar[0],
+      _roundedEnd = _getCustomRoundedStar[1];
+    var monthTimesteps = getCustomTimesteps(_roundedStart, _roundedEnd, 'months');
+    monthTimesteps.forEach(function (timestep) {
+      var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
+      if (fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
+        var month = dateUtils.dateToString(dateUtils.fromUnix(timestep), 'MMM');
+        // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
+        drawDateChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
+        drawTimeText(ctx, theme, stepPx, height, month, fundamentalScale);
+        return;
+      }
+      // adding 0.5 to make line not so blurred
+      drawDashedMonthChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
+    });
+  }
+  // draw date change texts
+  if (fundamentalScale === Scale.Year) {
+    return;
+  }
+  var dateText = getLeftSideDateText(visibleTimeStart, fundamentalScale);
+  drawLeftSideDateText(ctx, theme, dateText, height);
 };
 
-var marks$2 = [{
-  value: AnimationLength.Minutes15,
-  text: 'timeslider-min',
-  count: 15
-}, {
-  value: AnimationLength.Minutes30,
-  text: 'timeslider-min',
-  count: 30
-}, {
-  value: AnimationLength.Hours1,
-  text: 'timeslider-hour',
-  count: 1
-}, {
-  value: AnimationLength.Hours2,
-  text: 'timeslider-hour',
-  count: 2
-}, {
-  value: AnimationLength.Hours3,
-  text: 'timeslider-hour',
-  count: 3
-}, {
-  value: AnimationLength.Hours6,
-  text: 'timeslider-hour',
-  count: 6
-}, {
-  value: AnimationLength.Hours12,
-  text: 'timeslider-hour',
-  count: 12
-}, {
-  value: AnimationLength.Hours24,
-  text: 'timeslider-hour',
-  count: 24
-}].sort(function (ta, tb) {
-  return tb.value - ta.value;
-});
-var AnimationLengthButton = function AnimationLengthButton(_ref) {
-  var _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$animationLength = _ref.animationLength,
-    animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
-    _ref$isAuto = _ref.isAuto,
-    isAuto = _ref$isAuto === void 0 ? false : _ref$isAuto,
-    layerHasTimeStep = _ref.layerHasTimeStep,
-    onChangeAnimationLength = _ref.onChangeAnimationLength,
-    toggleAnimationLengthAuto = _ref.toggleAnimationLengthAuto;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var translatedMarks = marks$2.map(function (mark) {
-    return Object.assign({}, mark, {
-      label: mark.count + " " + t(mark.text)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, secondsPerPx, timeSliderSpan, dataStartPx, dataEndPx, currentTimePx) {
+  var ctx = context;
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
+    timelineNightTime = _theme$palette$geoweb.timelineNightTime,
+    ledgendObservedBackground = _theme$palette$geoweb.ledgendObservedBackground,
+    legendForecastBackground = _theme$palette$geoweb.legendForecastBackground,
+    legendNoDataBackground = _theme$palette$geoweb.legendNoDataBackground;
+  // top spacing
+  var y = 0;
+  var scaleToUse = timeSliderSpan ? getScaleFromSpan(timeSliderSpan) : getFundamentalScale(secondsPerPx);
+  drawDefaultBackground();
+  drawObservedData();
+  drawForecastData();
+  drawNightOrAlternateTime();
+  drawAnimationArea();
+  drawDraggableIcons();
+  function drawDefaultBackground() {
+    ctx.fillStyle = legendNoDataBackground.rgba;
+    ctx.fillRect(0, y, canvasWidth, height);
+  }
+  function drawObservedData() {
+    if (dataStartPx < currentTimePx) {
+      ctx.fillStyle = ledgendObservedBackground.fill;
+      ctx.fillRect(Math.max(dataStartPx, y), y, Math.min(currentTimePx, dataEndPx) - Math.max(dataStartPx, y), height);
+    }
+  }
+  function drawForecastData() {
+    if (dataEndPx > currentTimePx) {
+      ctx.fillStyle = legendForecastBackground.fill;
+      ctx.fillRect(Math.max(currentTimePx, dataStartPx), y, Math.min(canvasWidth, dataEndPx) - Math.max(currentTimePx, dataStartPx), height);
+    }
+  }
+  function drawAnimationArea() {
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
+    ctx.strokeStyle = theme.palette.geowebColors.timeSlider.timelineSelectionOutline.rgba;
+    ctx.lineWidth = 3;
+    ctx.rect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
+    ctx.fill();
+    ctx.stroke();
+  }
+  function drawDraggableIcons() {
+    ctx.save();
+    var path = new Path2D(dragHandlePath);
+    ctx.translate(animationStartPx, y);
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
+    ctx.fill(path);
+    ctx.restore();
+    ctx.save();
+    ctx.translate(animationEndPx - 24, y);
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
+    ctx.fill(path);
+    ctx.restore();
+  }
+  function drawNightOrAlternateTime() {
+    var colorChangeTimesteps = getColorChangeTimesteps(scaleToUse, visibleTimeStart, visibleTimeEnd);
+    colorChangeTimesteps.forEach(function (timestep, i, arr) {
+      if (i === 0) {
+        return;
+      }
+      var _map = [arr[i - 1], timestep].map(function (timestep) {
+          return timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
+        }),
+        prevPx = _map[0],
+        currPx = _map[1];
+      if (!isColorIntervalEven(scaleToUse, timestep)) {
+        ctx.fillStyle = timelineNightTime.rgba;
+        var TOP_OFFSET = 0;
+        ctx.fillRect(prevPx, TOP_OFFSET, currPx - prevPx, height);
+      }
     });
-  });
-  var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
-    var newLength = newSliderValue ? Math.round(newSliderValue) : 0;
-    onChangeAnimationLength == null || onChangeAnimationLength(newLength);
-  };
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    allOptionsDisabled: disabled,
-    displayCurrentLength: true,
-    handleAutoClick: toggleAnimationLengthAuto,
-    icon: jsx(Animation, {
-      "data-testid": "animationLengthButton"
-    }),
-    isAutoDisabled: !layerHasTimeStep,
-    isAutoSelected: isAuto,
-    marks: translatedMarks,
-    onChangeSliderValue: onChangeSliderValue,
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-animation'),
-    value: animationLength
-  });
+  }
+};
+var getColorChangeTimestepUnit = function getColorChangeTimestepUnit(scale) {
+  switch (scale) {
+    case Scale.Year:
+      return 'months';
+    case Scale.Month:
+    case Scale.Months3:
+      return 'weeks';
+    case Scale.Weeks2:
+    case Scale.Week:
+      return 'days';
+    default:
+      return 'days';
+  }
+};
+var isColorIntervalEven = function isColorIntervalEven(scale, timestep) {
+  var time = dateUtils.fromUnix(timestep);
+  switch (scale) {
+    case Scale.Year:
+      return dateUtils.getMonth(time) % 2 === 0;
+    case Scale.Month:
+    case Scale.Months3:
+      return dateUtils.getWeek(time) % 2 === 0;
+    case Scale.Week:
+    case Scale.Weeks2:
+      return dateUtils.getDayOfYear(time) % 2 === 0;
+    default:
+      {
+        return dateUtils.getDayOfYear(time) % 2 === 0;
+      }
+  }
 };
+function getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd) {
+  var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, scale),
+    colorChangeStart = _getCustomRoundedStar[0],
+    colorChangeEnd = _getCustomRoundedStar[1];
+  var colorChangeUnit = getColorChangeTimestepUnit(scale);
+  var colorChangeTimesteps = getCustomTimesteps(colorChangeStart, colorChangeEnd, colorChangeUnit);
+  return colorChangeTimesteps;
+}
 
-var SpeedButton = function SpeedButton(_ref) {
-  var animationDelay = _ref.animationDelay,
-    setMapAnimationDelay = _ref.setMapAnimationDelay;
-  var sorted = [].concat(speedFactors).sort(function (sa, sb) {
-    return sb - sa;
-  });
-  var marks = sorted.map(function (speedFactor) {
-    return {
-      value: getSpeedDelay(speedFactor),
-      text: "x" + speedFactor,
-      label: "x" + speedFactor
-    };
-  });
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    icon: jsx(Speed, {}),
-    marks: marks,
-    onChangeSliderValue: function onChangeSliderValue(markValue) {
-      setMapAnimationDelay(markValue);
-    },
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-speed'),
-    value: animationDelay
-  });
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var drawCurrentTime = function drawCurrentTime(context, theme, width, height, startTime, endTime, currentTime) {
+  var ctx = context;
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
+    playerNeedleTime = _theme$palette$geoweb.playerNeedleTime,
+    playerNeedleTimeTop = _theme$palette$geoweb.playerNeedleTimeTop;
+  var current = currentTime;
+  var currentPx = current ? timestampToPixelEdges(current, startTime, endTime, width) : 0;
+  // Draw a high vertical line (needle) indicating the current or selected time
+  ctx.beginPath();
+  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
+  ctx.moveTo(Math.floor(currentPx) + 0.5, height - 24);
+  ctx.lineTo(Math.floor(currentPx) + 0.5, height);
+  ctx.lineWidth = 5;
+  ctx.strokeStyle = playerNeedleTime.rgba;
+  ctx.stroke();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = playerNeedleTimeTop.rgba;
+  ctx.stroke();
 };
 
-var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
-  var timeSliderSpan = _ref.timeSliderSpan,
-    setOpen = _ref.setOpen,
-    onChangeSliderValue = _ref.onChangeSliderValue;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var _React$useState = React.useState(timeSliderSpan / getLargestTimeUnit(timeSliderSpan)),
-    selectedTimeValue = _React$useState[0],
-    setSelectedTimeValue = _React$useState[1];
-  var _React$useState2 = React.useState(getLargestTimeUnit(timeSliderSpan).toString()),
-    selectedTimeResolution = _React$useState2[0],
-    setSelectedTimeResolution = _React$useState2[1];
-  var _React$useState3 = React.useState(true),
-    isANumber = _React$useState3[0],
-    setIsANumber = _React$useState3[1];
-  return jsx(Box, {
-    children: jsxs(FormControl, {
-      onKeyDown: function onKeyDown(event) {
-        event.stopPropagation();
-      },
-      size: "small",
-      sx: {
-        flexDirection: 'row',
-        display: 'flex'
-      },
-      variant: "standard",
-      children: [jsx(TextField, {
-        autoFocus: true,
-        color: isANumber ? 'primary' : 'warning',
-        label: t('timeslider-span'),
-        onBlur: function onBlur() {
-          onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
-        },
-        onChange: function onChange(e) {
-          if (!isNaN(+e.target.value)) {
-            setIsANumber(true);
-            setSelectedTimeValue(Number(e.target.value));
-          } else {
-            setIsANumber(false);
-          }
-        },
-        onKeyDown: function onKeyDown(e) {
-          if (e.key === 'Enter' || e.key === 'Escape') {
-            onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
-            setOpen(false);
-          }
-        },
-        size: "small",
-        slotProps: {
-          htmlInput: {
-            maxLength: 4,
-            'aria-label': 'custom-input'
-          }
-        },
-        value: Math.round(selectedTimeValue * 100) / 100,
-        variant: "standard"
-      }), jsx(Box, {
-        sx: {
-          alignContent: 'end'
-        },
-        children: jsxs(Select, {
-          "aria-label": "time-resolution-selector",
-          defaultValue: "h",
-          onChange: function onChange(e) {
-            setSelectedTimeResolution(e.target.value);
-            onChangeSliderValue(selectedTimeValue * Number(e.target.value));
-            setOpen(false);
-          },
-          size: "small",
-          tabIndex: -1,
-          value: selectedTimeResolution,
-          children: [jsx(MenuItem, {
-            value: TimeInMinutes.YEAR,
-            children: t('years')
-          }), jsx(MenuItem, {
-            value: TimeInMinutes.MONTH,
-            children: t('months')
-          }), jsx(MenuItem, {
-            value: TimeInMinutes.WEEK,
-            children: t('weeks')
-          }), jsx(MenuItem, {
-            value: TimeInMinutes.DAY,
-            children: t('days')
-          }), jsx(MenuItem, {
-            value: TimeInMinutes.HOUR,
-            children: t('hours')
-          }), jsx(MenuItem, {
-            value: TimeInMinutes.MINUTE,
-            children: t('minutes')
-          })]
-        })
-      })]
-    })
-  });
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var drawNeedle = function drawNeedle(context, theme, width, height, startTime, endTime, selectedTime) {
+  if (!selectedTime) {
+    return;
+  }
+  var ctx = context;
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
+    playerNeedlePlayer = _theme$palette$geoweb.playerNeedlePlayer,
+    playerNeedlePlayerTop = _theme$palette$geoweb.playerNeedlePlayerTop,
+    playerTimeMarkers = _theme$palette$geoweb.playerTimeMarkers;
+  var selectedPx = timestampToPixelEdges(selectedTime, startTime, endTime, width);
+  // Draw a high vertical line (needle) indicating the current or selected time
+  ctx.beginPath();
+  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
+  ctx.moveTo(Math.floor(selectedPx) + 0.5, height - 50);
+  ctx.lineTo(Math.floor(selectedPx) + 0.5, height);
+  ctx.lineWidth = 5;
+  ctx.strokeStyle = playerNeedlePlayer.rgba;
+  ctx.stroke();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = playerNeedlePlayerTop.rgba;
+  ctx.stroke();
+  // Triange connecting timebox.
+  ctx.beginPath();
+  ctx.moveTo(Math.floor(selectedPx) + 5, 0);
+  ctx.lineTo(Math.floor(selectedPx) + 0.5, 5);
+  ctx.lineTo(Math.floor(selectedPx) - 5, 0);
+  ctx.closePath();
+  ctx.fillStyle = playerTimeMarkers.fill;
+  ctx.fill();
 };
 
-var marks$1 = [{
-  value: 60,
-  text: 'timeslider-hour',
-  count: 1
-}, {
-  value: 3 * 60,
-  text: 'timeslider-hour',
-  count: 3
-}, {
-  value: 6 * 60,
-  text: 'timeslider-hour',
-  count: 6
-}, {
-  value: 12 * 60,
-  text: 'timeslider-hour',
-  count: 12
-}, {
-  value: 24 * 60,
-  text: 'timeslider-hour',
-  count: 24
-}, {
-  value: 2 * 24 * 60,
-  text: 'timeslider-hour',
-  count: 48
-}, {
-  value: 7 * 24 * 60,
-  text: 'timeslider-week',
-  count: 1
-}, {
-  value: 2 * 7 * 24 * 60,
-  text: 'timeslider-weeks',
-  count: 2
-}, {
-  value: 30 * 24 * 60,
-  text: 'timeslider-month',
-  count: 1
-}, {
-  value: 3 * 30 * 24 * 60,
-  text: 'timeslider-months',
-  count: 3
-}, {
-  value: 365 * 24 * 60,
-  text: 'timeslider-year',
-  count: 1
-}].sort(function (ta, tb) {
-  return tb.value - ta.value;
-});
-var TimeSpanButton = function TimeSpanButton(_ref) {
-  var _ref$timeSliderSpan = _ref.timeSliderSpan,
-    timeSliderSpan = _ref$timeSliderSpan === void 0 ? defaultTimeSpan : _ref$timeSliderSpan,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$onChangeSliderVa = _ref.onChangeSliderValue,
-    onChangeSliderValue = _ref$onChangeSliderVa === void 0 ? function () {} : _ref$onChangeSliderVa,
-    onToggleTimeSpan = _ref.onToggleTimeSpan,
-    isTimeSpanAuto = _ref.isTimeSpanAuto,
-    _ref$isOpenByDefault = _ref.isOpenByDefault,
-    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
-    _ref$layerHasTimeStep = _ref.layerHasTimeStep,
-    layerHasTimeStep = _ref$layerHasTimeStep === void 0 ? false : _ref$layerHasTimeStep;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var translatedMarks = marks$1.map(function (mark) {
-    return Object.assign({}, mark, {
-      label: mark.count + " " + t(mark.text)
-    });
-  });
-  var _useState = useState(isOpenByDefault),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    allOptionsDisabled: disabled,
-    customFieldHeader: t('timeslider-span'),
-    customLengthSelector: jsx(TimeSpanButtonCustomSelect, {
-      onChangeSliderValue: onChangeSliderValue,
-      setOpen: setOpen,
-      timeSliderSpan: timeSliderSpan
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, timeSliderSpan, selectedTimeUnix, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
+  var ctx = context;
+  var _map = [0, canvasWidth].map(function (px) {
+      return pixelToTimestamp(px, centerTime, canvasWidth, secondsPerPx);
     }),
-    disbleUserSetDuration: false,
-    displayCurrentLength: true,
-    handleAutoClick: onToggleTimeSpan,
-    icon: jsx(Clock, {}),
-    isAutoDisabled: !layerHasTimeStep,
-    isAutoSelected: isTimeSpanAuto,
-    marks: translatedMarks,
-    onChangeSliderValue: onChangeSliderValue,
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-time-span'),
-    value: timeSliderSpan
-  });
+    visibleTimeStart = _map[0],
+    visibleTimeEnd = _map[1];
+  var _map2 = [animationStartTime, animationEndTime, dataStartTime, dataEndTime, currentTimeUnix].map(function (time) {
+      return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
+    }),
+    animationStartPx = _map2[0],
+    animationEndPx = _map2[1],
+    dataStartPx = _map2[2],
+    dataEndPx = _map2[3],
+    currentTimePx = _map2[4];
+  ctx.clearRect(0, 0, canvasWidth, height);
+  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, secondsPerPx, timeSliderSpan, dataStartPx, dataEndPx, currentTimePx);
+  drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, secondsPerPx);
+  drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
+  drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
 };
 
-var marks = [{
-  value: 1,
-  text: 'timeslider-min',
-  count: 1
-}, {
-  value: 2,
-  text: 'timeslider-min',
-  count: 2
-}, {
-  value: 5,
-  text: 'timeslider-min',
-  count: 5
-}, {
-  value: 10,
-  text: 'timeslider-min',
-  count: 10
-}, {
-  value: 15,
-  text: 'timeslider-min',
-  count: 15
-}, {
-  value: 30,
-  text: 'timeslider-min',
-  count: 30
-}, {
-  value: 60,
-  text: 'timeslider-hour',
-  count: 1
-}, {
-  value: 120,
-  text: 'timeslider-hour',
-  count: 2
-}, {
-  value: 180,
-  text: 'timeslider-hour',
-  count: 3
-}, {
-  value: 360,
-  text: 'timeslider-hour',
-  count: 6
-}, {
-  value: 720,
-  text: 'timeslider-hour',
-  count: 12
-}, {
-  value: 1440,
-  text: 'timeslider-hour',
-  count: 24
-}, {
-  value: 2880,
-  text: 'timeslider-hour',
-  count: 48
-}, {
-  value: 4320,
-  text: 'timeslider-hour',
-  count: 72
-}, {
-  value: 10080,
-  text: 'timeslider-week',
-  count: 1
-}, {
-  value: 20160,
-  text: 'timeslider-weeks',
-  count: 2
-}, {
-  value: 43200,
-  text: 'timeslider-month',
-  count: 1
-}, {
-  value: 87600,
-  text: 'timeslider-months',
-  count: 2
-}, {
-  value: 262800,
-  text: 'timeslider-months',
-  count: 6
-}, {
-  value: 525600,
-  text: 'timeslider-year',
-  count: 1
-}, {
-  value: 5256000,
-  text: 'timeslider-years',
-  count: 10
-}].sort(function (ta, tb) {
-  return tb.value - ta.value;
-});
-var TimeStepButton = function TimeStepButton(_ref) {
-  var _ref$timeStep = _ref.timeStep,
-    timeStep = _ref$timeStep === void 0 ? marks[0].value : _ref$timeStep,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$isTimestepAuto = _ref.isTimestepAuto,
-    isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
-    onChangeTimeStep = _ref.onChangeTimeStep,
-    _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
-    onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
-    _ref$isOpenByDefault = _ref.isOpenByDefault,
-    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
-    timeStepFromLayer = _ref.timeStepFromLayer;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var translatedMarks = marks.map(function (mark) {
-    return Object.assign({}, mark, {
-      label: mark.count + " " + t(mark.text)
-    });
-  });
-  var onMenuItemClick = function onMenuItemClick(markValue) {
-    if (isTimestepAuto) {
-      onToggleTimestepAuto();
+// Explanation of props can be found here:
+// https://drive.google.com/file/d/1jqqNcciCH0UJiZ04HO-1vknmPPpT8fK5/view?usp=sharing
+var TimeSliderLegend = function TimeSliderLegend(_ref) {
+  var _node$current, _getTimeSliderLegendE;
+  var mapId = _ref.mapId,
+    isTimeScrollingEnabled = _ref.isTimeScrollingEnabled,
+    mapWindowRef = _ref.mapWindowRef,
+    centerTime = _ref.centerTime,
+    canvasWidth = _ref.timeSliderWidth,
+    _ref$secondsPerPx = _ref.secondsPerPx,
+    secondsPerPx = _ref$secondsPerPx === void 0 ? defaultSecondsPerPx : _ref$secondsPerPx,
+    currentTime = _ref.currentTime,
+    dataStartTime = _ref.dataStartTime,
+    dataEndTime = _ref.dataEndTime,
+    reduxAnimationStartTime = _ref.reduxAnimationStartTime,
+    reduxAnimationEndTime = _ref.reduxAnimationEndTime,
+    timeStep = _ref.timeStep,
+    unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+    isDraggingStartAnimation = _ref.isDraggingStartAnimation,
+    isDraggingEndAnimation = _ref.isDraggingEndAnimation,
+    isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
+    timeSliderSpan = _ref.timeSliderSpan,
+    _ref$setUnfilteredSel = _ref.setUnfilteredSelectedTime,
+    setUnfilteredSelectedTime = _ref$setUnfilteredSel === void 0 ? function () {} : _ref$setUnfilteredSel,
+    _ref$onSetCenterTime = _ref.onSetCenterTime,
+    onSetCenterTime = _ref$onSetCenterTime === void 0 ? function () {} : _ref$onSetCenterTime,
+    _ref$onSetAnimationSt = _ref.onSetAnimationStartTime,
+    onSetAnimationStartTime = _ref$onSetAnimationSt === void 0 ? function () {} : _ref$onSetAnimationSt,
+    _ref$onSetAnimationEn = _ref.onSetAnimationEndTime,
+    onSetAnimationEndTime = _ref$onSetAnimationEn === void 0 ? function () {} : _ref$onSetAnimationEn,
+    _ref$updateCanvasWidt = _ref.updateCanvasWidth,
+    updateCanvasWidth = _ref$updateCanvasWidt === void 0 ? function () {} : _ref$updateCanvasWidt,
+    setIsDraggingStartAnimation = _ref.setIsDraggingStartAnimation,
+    setIsDraggingEndAnimation = _ref.setIsDraggingEndAnimation,
+    onStartTimeChange = _ref.onStartTimeChange,
+    onEndTimeChange = _ref.onEndTimeChange,
+    onSetTimeSliderSpan = _ref.onSetTimeSliderSpan,
+    _ref$adjustSelectedTi = _ref.adjustSelectedTimeOnWheel,
+    adjustSelectedTimeOnWheel = _ref$adjustSelectedTi === void 0 ? function () {} : _ref$adjustSelectedTi;
+  var _useCanvasTarget = useCanvasTarget('mousedown'),
+    node = _useCanvasTarget[1];
+  var theme = useTheme();
+  var _useState = useState(false),
+    isDraggingSelectedTime = _useState[0],
+    setIsDraggingSelectedTime = _useState[1];
+  var _useState2 = useState(false),
+    isDraggingLegend = _useState2[0],
+    setIsDraggingLegend = _useState2[1];
+  var xOffset = ((_node$current = node.current) == null || (_node$current = _node$current.canvas) == null ? void 0 : _node$current.getBoundingClientRect().x) || 0;
+  var _useState3 = useState(false),
+    isDraggingAnimationArea = _useState3[0],
+    setIsDraggingAnimationArea = _useState3[1];
+  var _useState4 = useState(false),
+    isMouseOverCanvas = _useState4[0],
+    setIsMouseOverCanvas = _useState4[1];
+  var _useState5 = useState('auto'),
+    cursorStyle = _useState5[0],
+    setCursorStyle = _useState5[1];
+  var _useState6 = useState(undefined),
+    showTooltip = _useState6[0],
+    setShowTooltip = _useState6[1];
+  var _useState7 = useState(),
+    lastHandledRoundedTime = _useState7[0],
+    setLastHandledRoundedTime = _useState7[1];
+  // remove active drag. can happen outside canvas.
+  var _useState8 = useState(),
+    localAnimationStartTime = _useState8[0],
+    setLocalAnimationStartTime = _useState8[1];
+  var _useState9 = useState(),
+    localAnimationEndTime = _useState9[0],
+    setLocalAnimationEndTime = _useState9[1];
+  var _useState0 = useState(),
+    pointerTime = _useState0[0],
+    setPointerTime = _useState0[1];
+  var _useState1 = useState(false),
+    showPointerTimeTooltip = _useState1[0],
+    setShowPointerTimeTooltip = _useState1[1];
+  var debouncedSetShowPointerTimeTooltip = useRef(debounce(setShowPointerTimeTooltip, 500)).current;
+  var timeBetweenMouseAndStartAndEnd = useRef();
+  var pixelsMovedSinceStartDragging = useRef(0);
+  var isAnimationTimeModifiedSetRef = useRef(false);
+  var tooltipPosition = useRef();
+  var startDraggingPosition = useRef(0);
+  var popperRef = useRef(null);
+  var isClickOrDrag = useRef();
+  var filteredTime = getFilteredTime(unfilteredSelectedTime, timeStep, dataStartTime, dataEndTime);
+  var start = localAnimationStartTime;
+  var end = localAnimationEndTime;
+  var pixelsBetweenViewportAndTimesliderOnTop = (_getTimeSliderLegendE = getTimeSliderLegendElement(mapId)) == null ? void 0 : _getTimeSliderLegendE.getBoundingClientRect()['top'];
+  var setTooltipPosition = function setTooltipPosition() {
+    var tooltipX = tooltipPosition.current;
+    var tooltipY = pixelsBetweenViewportAndTimesliderOnTop && pixelsBetweenViewportAndTimesliderOnTop - TIME_SLIDER_LEGEND_HEIGHT * 2.5;
+    return new DOMRect(tooltipX, tooltipY, 0, 0);
+  };
+  var getTooltipTime = function getTooltipTime() {
+    switch (showTooltip) {
+      case 'animationStart':
+        return localAnimationStartTime;
+      case 'animationEnd':
+        return localAnimationEndTime;
+      case 'mousePointer':
+        return pointerTime;
+      default:
+        return undefined;
     }
-    onChangeTimeStep(markValue);
   };
-  var handleToggleTimeStep = function handleToggleTimeStep() {
-    if (isTimestepAuto) {
-      return;
+  var getTooltipText = function getTooltipText() {
+    var time = getTooltipTime();
+    if (!time) {
+      return undefined;
     }
-    onToggleTimestepAuto();
-    timeStepFromLayer && onChangeTimeStep(timeStepFromLayer);
+    var roundedTooltipTime = showTooltip === 'mousePointer' ? time : roundWithTimeStep$1(time);
+    var tooltipText = dateUtils.dateToString(dateUtils.fromUnix(roundedTooltipTime), dateUtils.DATE_FORMAT_HOURS);
+    return tooltipText;
   };
-  var layerHasTimeStep = Boolean(timeStepFromLayer);
-  renderCounter.count(TimeStepButton.name);
-  var _useState = useState(isOpenByDefault),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    allOptionsDisabled: disabled,
-    displayCurrentLength: true,
-    handleAutoClick: handleToggleTimeStep,
-    icon: jsx(FastForward, {
-      "data-testid": "timeStepButton"
-    }),
-    isAutoDisabled: !layerHasTimeStep,
-    isAutoSelected: isTimestepAuto,
-    marks: translatedMarks,
-    onChangeSliderValue: onMenuItemClick,
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-time-step'),
-    value: timeStep || translatedMarks[0].value
-  });
-};
-
-var OptionsMenu = function OptionsMenu(_ref) {
-  var speedBtn = _ref.speedBtn,
-    timeSpanBtn = _ref.timeSpanBtn,
-    timeStepBtn = _ref.timeStepBtn,
-    animationLengthBtn = _ref.animationLengthBtn;
-  return jsxs(Fragment, {
-    children: [jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: timeSpanBtn || jsx(TimeSpanButton, {
-        disabled: false,
-        isTimeSpanAuto: false,
-        layerHasTimeStep: false,
-        onChangeSliderValue: function onChangeSliderValue() {},
-        onToggleTimeSpan: function onToggleTimeSpan() {},
-        timeSliderSpan: 0
-      })
-    }), jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: animationLengthBtn || jsx(AnimationLengthButton, {
-        onChangeAnimationLength: function onChangeAnimationLength() {},
-        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
-      })
-    }), jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: timeStepBtn || jsx(TimeStepButton, {
-        isTimestepAuto: false,
-        onChangeTimeStep: function onChangeTimeStep() {}
-      })
-    }), jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: speedBtn || jsx(SpeedButton, {
-        animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {}
-      })
-    })]
-  });
-};
-
-var PopperMenu = function PopperMenu(_ref) {
-  var controls = _ref.controls,
-    isPopperOpen = _ref.isPopperOpen,
-    options = _ref.options,
-    buttonElement = _ref.buttonElement,
-    popperPlacement = _ref.popperPlacement;
-  if (!buttonElement) {
-    return null;
-  }
-  var direction = ['bottom', 'top'].includes(popperPlacement) ? 'column' : 'row';
-  var margin = getMargin(buttonElement, popperPlacement);
-  return jsx(Popper, {
-    anchorEl: direction === 'row' ? buttonElement == null ? void 0 : buttonElement.parentElement : buttonElement,
-    open: isPopperOpen,
-    placement: popperPlacement,
-    sx: {
-      zIndex: 3
-    },
-    children: jsx(Paper, {
-      elevation: 3,
-      sx: Object.assign({}, margin),
-      children: jsxs(Grid, {
-        container: true,
-        direction: direction,
-        spacing: 0.5,
-        sx: Object.assign({
-          padding: '4px 8px 8px'
-        }, direction === 'column' && {
-          '& button': {
-            width: '100%!important'
-          }
-        }, direction === 'row' && {
-          marginTop: -0.5
-        }),
-        children: [options != null ? options : jsx(OptionsMenu, {}), controls != null ? controls : jsx(ControlButtons, {})]
-      })
-    })
-  });
-};
-var getMargin = function getMargin(buttonElement, popperPlacement) {
-  var clock = buttonElement.parentElement.getBoundingClientRect();
-  var button = buttonElement.getBoundingClientRect();
-  var distanceFromButtonToContainer = clock.bottom - button.bottom;
-  if (popperPlacement === 'top') {
-    return {
-      marginBottom: distanceFromButtonToContainer + "px!important"
-    };
-  }
-  if (popperPlacement === 'bottom') {
-    return {
-      marginTop: distanceFromButtonToContainer + "px!important"
-    };
-  }
-  return undefined;
-};
-
-var MIN_WIDTH = 170;
-var MIN_HEIGHT = 32;
-var MIN_FONT_SIZE = 14; // bigger font size will cause render delay in LCP
-var FONT_SIZE_WIDTH_RATIO = MIN_FONT_SIZE / MIN_WIDTH;
-var BUTTON_WIDTH = 40;
-var POPPER_WIDTH = 356;
-var POPPER_LENGTH = 240;
-var TimeSliderClock = function TimeSliderClock(_ref2) {
-  var time = _ref2.time,
-    options = _ref2.options,
-    controls = _ref2.controls,
-    _ref2$hideButton = _ref2.hideButton,
-    hideButton = _ref2$hideButton === void 0 ? true : _ref2$hideButton,
-    _ref2$isPopperOpenByD = _ref2.isPopperOpenByDefault,
-    isPopperOpenByDefault = _ref2$isPopperOpenByD === void 0 ? false : _ref2$isPopperOpenByD;
-  var clockElement = useRef(null);
-  var _useState = useState(null),
-    buttonElement = _useState[0],
-    setButtonElement = _useState[1];
-  var _useState2 = useState(false),
-    isPopperOpen = _useState2[0],
-    setIsPopperOpen = _useState2[1];
-  var _useState3 = useState('left'),
-    popperPlacement = _useState3[0],
-    setPopperPlacement = _useState3[1];
-  var _useState4 = useState({
-      x: 0,
-      y: 0
-    }),
-    position = _useState4[0],
-    setPosition = _useState4[1];
-  useMakeSureContainerStaysInsideWindow(clockElement, position, setPosition);
-  var _useState5 = useState({
-      width: MIN_WIDTH,
-      height: MIN_HEIGHT
-    }),
-    size = _useState5[0],
-    setSize = _useState5[1];
-  var _useState6 = useState(MIN_FONT_SIZE),
-    fontSize = _useState6[0],
-    setFontSize = _useState6[1];
-  useEffect(function () {
-    if (hideButton) {
-      setIsPopperOpen(false);
+  var roundWithTimeStep$1 = function roundWithTimeStep$1(time) {
+    return roundWithTimeStep(time, timeStep);
+  };
+  var currentIndex = timeValues.indexOf(timeSliderSpan);
+  var updateTimeSpan = function updateTimeSpan(deltaY) {
+    if (onSetTimeSliderSpan) {
+      // Don't do anything if we are already at the edges of the timespan options
+      if (deltaY < 0 && currentIndex === 0 || deltaY > 0 && currentIndex === timeValues.length - 1) {
+        return;
+      }
+      var newTimeSpan = deltaY < 0 ? timeValues[currentIndex - 1] : timeValues[currentIndex + 1];
+      onSetTimeSliderSpan(newTimeSpan, centerTime);
     }
-    if (size.width === MIN_WIDTH && hideButton) {
+  };
+  var throttledUpdateTimeSpan = throttle(updateTimeSpan, 200);
+  var debouncedAndThrottledUpdateTimeSpan = debounce(throttledUpdateTimeSpan, 20);
+  var handleAnimationDragging = React.useCallback(function (x, clientX) {
+    if (!localAnimationStartTime || !localAnimationEndTime) {
       return;
     }
-    var diff = hideButton ? -40 : BUTTON_WIDTH;
-    var width = size.width + diff;
-    setSize(Object.assign({}, size, {
-      width: width
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hideButton]);
-  useEffect(function () {
-    if (buttonElement && isPopperOpenByDefault) {
-      setIsPopperOpen(true);
+    var mousePosition = clientX - xOffset;
+    var startPos = timestampToPixel(localAnimationStartTime, centerTime, canvasWidth, secondsPerPx);
+    var endPos = timestampToPixel(localAnimationEndTime, centerTime, canvasWidth, secondsPerPx);
+    var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
+    var startTime = roundWithTimeStep(mouseTimeUnix, timeStep);
+    var endTime = roundWithTimeStep(mouseTimeUnix, timeStep);
+    var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
+    if (isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
+      if (!isAnimationTimeModifiedSetRef.current) {
+        isAnimationTimeModifiedSetRef.current = true;
+      }
     }
-  }, [buttonElement, isPopperOpenByDefault]);
-  return jsxs(Fragment, {
-    children: [jsx(PopperMenu, {
-      buttonElement: buttonElement,
-      controls: controls,
-      isPopperOpen: isPopperOpen,
-      options: options,
-      popperPlacement: popperPlacement
-    }), jsx(Draggable, {
-      bounds: "parent",
-      cancel: ".MuiButtonBase-root",
-      nodeRef: clockElement,
-      onStop: function onStop(_event, position) {
-        setPosition(position);
-        setPopperPlacement(getPopperplacement(clockElement.current));
-      },
-      position: position,
-      children: jsx("div", {
-        ref: function ref(_ref3) {
-          clockElement.current = _ref3;
-          setPopperPlacement(getPopperplacement(_ref3));
-        },
-        style: {
-          position: 'absolute',
-          zIndex: 1001,
-          top: '10px',
-          right: '10px'
-        },
-        children: jsx(Resizable, {
-          enable: resizeHandlePlacement,
-          handleComponent: {
-            bottomLeft: jsx(Resize, {
-              isRightAligned: true,
-              style: {
-                fill: '#FFFFFF'
-              }
-            })
-          },
-          lockAspectRatio: true,
-          minHeight: MIN_HEIGHT,
-          minWidth: hideButton ? MIN_WIDTH : MIN_WIDTH + BUTTON_WIDTH,
-          onResize: function onResize(_event, _direction, _ref, delta) {
-            var width = size.width + delta.width;
-            var adjustedWidth = hideButton ? width : width - BUTTON_WIDTH;
-            var fontSize = FONT_SIZE_WIDTH_RATIO * adjustedWidth;
-            setFontSize(fontSize);
-          },
-          onResizeStart: function onResizeStart(event) {
-            event.stopPropagation();
-          },
-          onResizeStop: function onResizeStop(_event, _direction, _ref, delta) {
-            var width = size.width + delta.width;
-            var height = size.height + delta.height;
-            setSize({
-              width: width,
-              height: height
-            });
-            setPopperPlacement(getPopperplacement(clockElement.current));
-          },
-          size: size,
-          children: jsx(ClockContainer, {
-            fontSize: fontSize,
-            hideButton: hideButton,
-            isPopperOpen: isPopperOpen,
-            onButtonClick: function onButtonClick() {
-              if (!isPopperOpen) {
-                setPopperPlacement(getPopperplacement(clockElement.current));
-              }
-              setIsPopperOpen(!isPopperOpen);
-            },
-            popperPlacement: popperPlacement,
-            setButtonElement: setButtonElement,
-            time: time
-          })
-        })
-      })
-    })]
-  });
-};
-var getPopperplacement = function getPopperplacement(clockElement) {
-  var _clockElement$parentE;
-  var clock = clockElement == null ? void 0 : clockElement.getBoundingClientRect();
-  var mapWindow = clockElement == null || (_clockElement$parentE = clockElement.parentElement) == null ? void 0 : _clockElement$parentE.getBoundingClientRect();
-  if (clock && mapWindow) {
-    var popperIsOutsideWindowOnLeft = mapWindow.left > clock.left - POPPER_WIDTH;
-    var popperIsOutsideWindowOnBottom = clock.bottom + POPPER_LENGTH > mapWindow.bottom;
-    var popperIsOutsideWindowOnRight = clock.right + POPPER_WIDTH > mapWindow.right;
-    if (popperIsOutsideWindowOnLeft && popperIsOutsideWindowOnBottom && popperIsOutsideWindowOnRight) {
-      return 'top';
+    if (isDraggingStartAnimation) {
+      if (isDraggingStartWithinBounds(endPos, mousePosition)) {
+        return;
+      }
+      setLocalAnimationStartTime(roundWithTimeStep(mouseTimeUnix, timeStep));
+      if (lastHandledRoundedTime !== startTime) {
+        setLastHandledRoundedTime(startTime);
+        setShowTooltip('animationStart');
+        onStartTimeChange == null || onStartTimeChange(startTime);
+      }
+    } else if (isDraggingEndAnimation && pixelsBetweenOnLeft) {
+      if (isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth)) {
+        return;
+      }
+      setLocalAnimationEndTime(roundWithTimeStep(mouseTimeUnix, timeStep));
+      if (lastHandledRoundedTime !== endTime) {
+        setLastHandledRoundedTime(endTime);
+        setShowTooltip('animationEnd');
+        onEndTimeChange == null || onEndTimeChange(endTime);
+      }
     }
-    if (popperIsOutsideWindowOnLeft && popperIsOutsideWindowOnBottom) {
-      return 'right';
+    if (isDraggingAnimationArea) {
+      if (timeBetweenMouseAndStartAndEnd.current === undefined) {
+        // to move the whole animation area we need to calculate the distance
+        // between the mouse position and the start and end position
+        var _timeFromMouseToStart = mouseTimeUnix - start;
+        var _timeFromMouseToEnd = end - mouseTimeUnix;
+        timeBetweenMouseAndStartAndEnd.current = {
+          timeFromMouseToEnd: _timeFromMouseToEnd,
+          timeFromMouseToStart: _timeFromMouseToStart
+        };
+        return;
+      }
+      pixelsMovedSinceStartDragging.current += x;
+      var _timeBetweenMouseAndS = timeBetweenMouseAndStartAndEnd.current,
+        timeFromMouseToEnd = _timeBetweenMouseAndS.timeFromMouseToEnd,
+        timeFromMouseToStart = _timeBetweenMouseAndS.timeFromMouseToStart;
+      var newStartTime = mouseTimeUnix - timeFromMouseToStart;
+      var newEndTime = mouseTimeUnix + timeFromMouseToEnd;
+      var roundedNewStartTime = roundWithTimeStep(newStartTime, timeStep);
+      var roundedNewEndTime = roundWithTimeStep(newEndTime, timeStep);
+      setLocalAnimationStartTime(roundedNewStartTime);
+      setLocalAnimationEndTime(roundedNewEndTime);
     }
-    if (popperIsOutsideWindowOnLeft) {
-      return 'bottom';
+  }, [canvasWidth, centerTime, end, isDraggingAnimationArea, isDraggingEndAnimation, isDraggingStartAnimation, lastHandledRoundedTime, localAnimationEndTime, localAnimationStartTime, mapId, onEndTimeChange, onStartTimeChange, secondsPerPx, start, timeStep, xOffset]);
+  useEffect(function () {
+    var handleMouseUp = function handleMouseUp() {
+      pixelsMovedSinceStartDragging.current = 0;
+      timeBetweenMouseAndStartAndEnd.current = undefined;
+    };
+    document.addEventListener('mouseup', handleMouseUp);
+    return function () {
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+  useEffect(function () {
+    var startTimestamp = convertStringTimeToUnix(reduxAnimationStartTime);
+    var endTimestamp = convertStringTimeToUnix(reduxAnimationEndTime);
+    setLocalAnimationStartTime(startTimestamp);
+    setLocalAnimationEndTime(endTimestamp);
+  }, [reduxAnimationStartTime, reduxAnimationEndTime, setLocalAnimationStartTime, setLocalAnimationEndTime]);
+  useEffect(function () {
+    var stoppedDragging = !isDraggingStartAnimation && !isDraggingEndAnimation && !isDraggingAnimationArea;
+    if (stoppedDragging && isAnimationTimeModifiedSetRef.current) {
+      if (start && start !== localAnimationStartTime) {
+        onSetAnimationStartTime(dateUtils.fromUnix(start).toISOString());
+      }
+      if (end && end !== localAnimationEndTime) {
+        onSetAnimationEndTime(dateUtils.fromUnix(end).toISOString());
+      }
+      isAnimationTimeModifiedSetRef.current = false;
     }
-  }
-  return 'left';
-};
-var resizeHandlePlacement = {
-  top: false,
-  right: false,
-  bottom: false,
-  left: false,
-  topRight: false,
-  bottomRight: false,
-  bottomLeft: true,
-  topLeft: false
-};
-
-var _scaleToUnitSeconds, _scaleToRoundableUnit;
-var scaleToUnitSeconds = (_scaleToUnitSeconds = {}, _scaleToUnitSeconds[Scale.Minutes5] = 5 * 60, _scaleToUnitSeconds[Scale.Hour] = 60 * 60, _scaleToUnitSeconds[Scale.Hours3] = 3 * 60 * 60, _scaleToUnitSeconds[Scale.Hours6] = 6 * 60 * 60, _scaleToUnitSeconds[Scale.Day] = 24 * 60 * 60, _scaleToUnitSeconds[Scale.Week] = 7 * 24 * 60 * 60, _scaleToUnitSeconds[Scale.Weeks2] = 14 * 24 * 60 * 60, _scaleToUnitSeconds);
-var TICK_MARK_HEIGHT_PRIMARY = 40;
-var TICK_MARK_HEIGHT_SECONDARY = 10;
-var TICK_MARK_HEIGHT_TERTIARY = 5;
-var getStepPxLineHeight = function getStepPxLineHeight(scale, timestep) {
-  var scaleUnitSeconds = scaleToUnitSeconds[scale];
-  var rem = timestep % scaleUnitSeconds;
-  switch (scale) {
-    case Scale.Hour:
-      {
-        if (rem === 0) {
-          return TICK_MARK_HEIGHT_PRIMARY;
-        }
-        // 15 min subdivisions
-        if (rem % (15 * 60) === 0) {
-          return TICK_MARK_HEIGHT_SECONDARY;
-        }
-        return TICK_MARK_HEIGHT_TERTIARY;
+  }, [isDraggingStartAnimation, isDraggingEndAnimation, isDraggingAnimationArea, isAnimationTimeModifiedSetRef, localAnimationStartTime, localAnimationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, start, end]);
+  useEffect(function () {
+    var handleMouseUp = function handleMouseUp() {
+      if (isDraggingAnimationArea) {
+        onStartTimeChange == null || onStartTimeChange(localAnimationStartTime);
+        onEndTimeChange == null || onEndTimeChange(localAnimationEndTime);
       }
-    case Scale.Hours3:
-      {
-        if (rem === 0) {
-          return TICK_MARK_HEIGHT_PRIMARY;
-        }
-        return TICK_MARK_HEIGHT_TERTIARY;
+      setCursorStyle('auto');
+      setIsDraggingSelectedTime(false);
+      setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(false);
+      setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(false);
+      setIsDraggingLegend(false);
+      setShowTooltip(undefined);
+      setIsDraggingAnimationArea(false);
+      startDraggingPosition.current = 0;
+      if (isAnimationTimeModifiedSetRef.current) {
+        isAnimationTimeModifiedSetRef.current = false;
       }
-    case Scale.Hours6:
-      {
-        if (rem === 0) {
-          return TICK_MARK_HEIGHT_PRIMARY;
-        }
-        // 3 hour subdivisions
-        if (rem % (3 * 60 * 60) === 0) {
-          return TICK_MARK_HEIGHT_SECONDARY;
-        }
-        return TICK_MARK_HEIGHT_TERTIARY;
+    };
+    document.addEventListener('mouseup', handleMouseUp);
+    return function () {
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [setIsDraggingStartAnimation, setIsDraggingEndAnimation, localAnimationStartTime, localAnimationEndTime, onStartTimeChange, onEndTimeChange, isDraggingAnimationArea]);
+  useEffect(function () {
+    var handleMouseActions = function handleMouseActions(event) {
+      if (event.movementX === 0) {
+        return;
       }
-    case Scale.Day:
-      {
-        if (rem === 0) {
-          return TICK_MARK_HEIGHT_PRIMARY;
-        }
-        // 6 hour subdivisions
-        if (rem % (6 * 60 * 60) === 0) {
-          return TICK_MARK_HEIGHT_SECONDARY;
-        }
-        return TICK_MARK_HEIGHT_TERTIARY;
+      if (isDraggingLegend) {
+        var dragDistanceTime = event.movementX * secondsPerPx;
+        var newCenterTime = centerTime - dragDistanceTime;
+        onSetCenterTime(newCenterTime);
+      } else if (isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
+        handleAnimationDragging(event.movementX, event.clientX);
+      } else if (isDraggingSelectedTime) {
+        moveSelectedTimePx(event.movementX, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
       }
-    case Scale.Week:
-    case Scale.Weeks2:
-      {
-        var weekday = dateUtils.getDay(dateUtils.fromUnix(timestep));
-        // dateUtils days range from 0 (Sunday) to 6 (Saturday)
-        if (weekday === 1) {
-          return TICK_MARK_HEIGHT_PRIMARY;
-        }
-        return TICK_MARK_HEIGHT_TERTIARY;
+      if (isMouseOverCanvas && isTimeSliderHoverOn) {
+        moveSelectedTimePx(event.movementX, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
       }
-    case Scale.Year:
-      {
-        var month = dateUtils.getMonth(dateUtils.fromUnix(timestep));
-        // months are zero indexed
-        if (month === 0) {
-          return TICK_MARK_HEIGHT_PRIMARY;
-        }
-        if (month % 3 === 0) {
-          return TICK_MARK_HEIGHT_SECONDARY;
-        }
-        return TICK_MARK_HEIGHT_TERTIARY;
+    };
+    var handleMouseMove = function handleMouseMove(event) {
+      handleMouseActions(event);
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [isDraggingLegend, isDraggingStartAnimation, isDraggingEndAnimation, isDraggingAnimationArea, isDraggingSelectedTime, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime, onSetCenterTime, isTimeSliderHoverOn, isMouseOverCanvas, handleAnimationDragging]);
+  useEffect(function () {
+    if (!showTooltip && pointerTime) {
+      if (showPointerTimeTooltip) {
+        setShowTooltip('mousePointer');
+      } else {
+        debouncedSetShowPointerTimeTooltip(true);
       }
-    case Scale.Minutes5:
-      {
-        // add primary line on day change
-        if (timestep % (60 * 60 * 24) === 0) {
-          return TICK_MARK_HEIGHT_PRIMARY;
-        }
-        return TICK_MARK_HEIGHT_TERTIARY;
+    } else if (showTooltip === 'mousePointer' && !pointerTime) {
+      setShowTooltip(undefined);
+      debouncedSetShowPointerTimeTooltip(false);
+      debouncedSetShowPointerTimeTooltip.flush();
+    } else if (showTooltip !== 'mousePointer') {
+      debouncedSetShowPointerTimeTooltip(false);
+      debouncedSetShowPointerTimeTooltip.flush();
+    }
+  }, [debouncedSetShowPointerTimeTooltip, pointerTime, showPointerTimeTooltip, showTooltip]);
+  var onMouseDown = function onMouseDown(x, y, width) {
+    isClickOrDrag.current = 'click';
+    startDraggingPosition.current = x;
+    var _getPositions = getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, start, end),
+      startAnimationPosition = _getPositions.startAnimationPosition,
+      endAnimationPosition = _getPositions.endAnimationPosition,
+      selectedTimePosition = _getPositions.selectedTimePosition;
+    // start dragging selected time.
+    if (isSelectedTimeIconArea(x, selectedTimePosition, DRAG_AREA_WIDTH)) {
+      setCursorStyle('grabbing');
+      setIsDraggingSelectedTime(true);
+      return;
+    }
+    if (reduxAnimationStartTime && reduxAnimationEndTime) {
+      var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
+      tooltipPosition.current = pixelsBetweenOnLeft ? x + pixelsBetweenOnLeft : x;
+      // start dragging either marker
+      if (isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH)) {
+        setCursorStyle('grabbing');
+        setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(true);
+        setShowTooltip('animationStart');
+        return;
+      }
+      if (isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH)) {
+        setCursorStyle('grabbing');
+        setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(true);
+        setShowTooltip('animationEnd');
+        return;
+      }
+      if (isInsideAnimationArea(x, startAnimationPosition, endAnimationPosition)) {
+        setCursorStyle('grabbing');
+        setIsDraggingAnimationArea(true);
+        return;
       }
-    default:
-      // Scale.Month
-      return TICK_MARK_HEIGHT_TERTIARY;
-  }
-};
-var drawStepPxLine = function drawStepPxLine(ctx, theme, stepPx, height, fundamentalScale, timestep) {
-  var ctx2 = ctx;
-  ctx2.strokeStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
-  ctx2.lineWidth = 1;
-  var stepPxLineHeight = getStepPxLineHeight(fundamentalScale, timestep);
-  ctx2.beginPath();
-  ctx2.moveTo(stepPx, height - stepPxLineHeight);
-  ctx2.lineTo(stepPx, height);
-  ctx2.stroke();
-};
-var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, scale) {
-  var ctx2 = ctx;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider.timelineText,
-    fontSize = _theme$palette$geoweb.fontSize,
-    fontFamily = _theme$palette$geoweb.fontFamily,
-    color = _theme$palette$geoweb.color;
-  ctx2.fillStyle = color;
-  // time text has smaller font than other timeline text
-  ctx2.font = fontSize + "px " + fontFamily;
-  ctx2.textAlign = 'left';
-  if (scale === Scale.Year || scale === Scale.Months3 || scale === Scale.Month || scale === Scale.Weeks2 || scale === Scale.Week || scale === Scale.Day) {
-    ctx2.fillText(timeText, stepPx, height - 12);
-  } else {
-    ctx2.fillText(timeText, stepPx - 15, height - 12);
-  }
-};
-var drawYearScaleText = function drawYearScaleText(ctx, theme, newDate, stepPx, height) {
-  var ctx2 = ctx;
-  var _theme$palette$geoweb2 = theme.palette.geowebColors.timeSlider.timelineText,
-    fontSize = _theme$palette$geoweb2.fontSize,
-    fontFamily = _theme$palette$geoweb2.fontFamily,
-    color = _theme$palette$geoweb2.color;
-  ctx2.fillStyle = color;
-  ctx2.font = fontSize + "px " + fontFamily;
-  ctx2.textAlign = 'left';
-  ctx2.fillText(newDate, stepPx + 2, height - 10);
-};
-var drawLeftSideDateText = function drawLeftSideDateText(ctx, theme, newDate, height) {
-  var ctx2 = ctx;
-  var _theme$palette$geoweb3 = theme.palette.geowebColors.timeSlider.timelineText,
-    fontSize = _theme$palette$geoweb3.fontSize,
-    fontFamily = _theme$palette$geoweb3.fontFamily,
-    color = _theme$palette$geoweb3.color;
-  ctx2.fillStyle = color;
-  ctx2.font = fontSize + "px " + fontFamily;
-  ctx2.textAlign = 'left';
-  ctx2.fillText(newDate, 2, height - 30);
-};
-var getTimeFormat = function getTimeFormat(scale) {
-  switch (scale) {
-    case Scale.Year:
-      return 'y';
-    case Scale.Month:
-    case Scale.Months3:
-      return 'MMM';
-    case Scale.Week:
-    case Scale.Weeks2:
-      return 'dd MMM';
-    case Scale.Day:
-      return 'EEE dd';
-    default:
-      return dateUtils.DATE_FORMAT_HOURS;
-  }
-};
-var drawDateChangeLine = function drawDateChangeLine(ctx, theme, stepPx, height) {
-  var ctx2 = ctx;
-  ctx2.strokeStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
-  ctx2.lineWidth = 1;
-  ctx2.beginPath();
-  ctx2.moveTo(stepPx, height - 40);
-  ctx2.lineTo(stepPx, height);
-  ctx2.stroke();
-};
-var drawDashedMonthChangeLine = function drawDashedMonthChangeLine(ctx, theme, stepPx, height) {
-  var ctx2 = ctx;
-  ctx2.strokeStyle = theme.palette.geowebColors.timeSlider.timelineMonthChangeDash.rgba;
-  ctx2.lineWidth = 3;
-  ctx2.setLineDash([5, 5]);
-  ctx2.beginPath();
-  ctx2.moveTo(stepPx, 0);
-  ctx2.lineTo(stepPx, height);
-  ctx2.stroke();
-  ctx2.setLineDash([]);
-};
-var roundByUnitOfTime = function roundByUnitOfTime(timeUnix, unit, roundUp) {
-  if (roundUp === void 0) {
-    roundUp = false;
-  }
-  if (unit === 'hour') {
-    var _timeStartOfPassedUnit = dateUtils.startOfHourUTC(dateUtils.fromUnix(timeUnix));
-    if (roundUp) {
-      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit, {
-        hours: 1
-      }));
     }
-    return dateUtils.unix(_timeStartOfPassedUnit);
-  }
-  if (unit === 'day') {
-    var _timeStartOfPassedUnit2 = dateUtils.startOfDayUTC(dateUtils.fromUnix(timeUnix));
-    if (roundUp) {
-      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit2, {
-        days: 1
-      }));
+    // clicking the timeslider
+    setIsDraggingLegend(true);
+  };
+  var onMouseUp = function onMouseUp(x) {
+    if (isClickOrDrag.current === 'click') {
+      var unfilteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx);
+      moveSelectedTimePx(x - unfilteredSelectedTimePx, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
     }
-    return dateUtils.unix(_timeStartOfPassedUnit2);
-  }
-  if (unit === 'week') {
-    var _timeStartOfPassedUnit3 = dateUtils.startOfWeekUTC(dateUtils.fromUnix(timeUnix));
-    if (roundUp) {
-      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit3, {
-        weeks: 1
-      }));
+    isClickOrDrag.current = undefined;
+  };
+  var onMouseMove = function onMouseMove(x, y, event, width) {
+    var mousePosition = x;
+    setPointerTime(pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx));
+    var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
+    tooltipPosition.current = pixelsBetweenOnLeft && mousePosition + pixelsBetweenOnLeft;
+    if (isClickOrDrag.current === 'click') {
+      isClickOrDrag.current = 'drag';
     }
-    return dateUtils.unix(_timeStartOfPassedUnit3);
-  }
-  if (unit === 'month') {
-    var _timeStartOfPassedUnit4 = dateUtils.startOfMonthUTC(dateUtils.fromUnix(timeUnix));
-    if (roundUp) {
-      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit4, {
-        months: 1
-      }));
+    if (isDraggingSelectedTime || isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
+      return;
     }
-    return dateUtils.unix(_timeStartOfPassedUnit4);
-  }
-  // Default unit === 'year'
-  var timeStartOfPassedUnit = dateUtils.startOfYearUTC(dateUtils.fromUnix(timeUnix));
-  if (roundUp) {
-    return dateUtils.unix(dateUtils.add(timeStartOfPassedUnit, {
-      years: 1
-    }));
-  }
-  return dateUtils.unix(timeStartOfPassedUnit);
-};
-var roundToNearestMultiple = function roundToNearestMultiple(timeUnix, scale, roundUp) {
-  if (roundUp === void 0) {
-    roundUp = false;
-  }
-  var stepSeconds = scaleToUnitSeconds[scale];
-  var roundFn = roundUp ? Math.ceil : Math.floor;
-  return roundFn(timeUnix / stepSeconds) * stepSeconds;
-};
-/**
- * In this script starting and ending times of the time slider are rounded.
- * Here it is defined what is a time unit to a start of which a rounding is
- * done for each scale.
- * @returns an object where there are rounding units of each scale
- */
-var scaleToRoundableUnit = (_scaleToRoundableUnit = {}, _scaleToRoundableUnit[Scale.Hour] = 'hour', _scaleToRoundableUnit[Scale.Day] = 'day', _scaleToRoundableUnit[Scale.Week] = 'week', _scaleToRoundableUnit[Scale.Weeks2] = 'week', _scaleToRoundableUnit[Scale.Month] = 'week', _scaleToRoundableUnit[Scale.Months3] = 'week', _scaleToRoundableUnit[Scale.Year] = 'year', _scaleToRoundableUnit);
-var getRoundedStartAndEnd = function getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, scale) {
-  if (scale === Scale.Minutes5 || scale === Scale.Hours3 || scale === Scale.Hours6) {
-    return [roundToNearestMultiple(visibleTimeStart, scale, false), roundToNearestMultiple(visibleTimeEnd, scale, true)];
-  }
-  var unit = scaleToRoundableUnit[scale];
-  return [roundByUnitOfTime(visibleTimeStart, unit, false), roundByUnitOfTime(visibleTimeEnd, unit, true)];
-};
-var getCustomRoundedStartAndEndScale = function getCustomRoundedStartAndEndScale(scale) {
-  switch (scale) {
-    case Scale.Year:
-      return 'month';
-    case Scale.Month:
-    case Scale.Months3:
-      return 'week';
-    case Scale.Week:
-    case Scale.Weeks2:
-      return 'day';
-    default:
-      return 'day';
-  }
-};
-var getCustomRoundedStartAndEnd = function getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, unit) {
-  var scale = getCustomRoundedStartAndEndScale(unit);
-  return [roundByUnitOfTime(visibleTimeStart, scale, false), roundByUnitOfTime(visibleTimeEnd, scale, true)];
-};
-var incrementTimestep = function incrementTimestep(timeAtTimeStep, fundamentalScale) {
-  switch (fundamentalScale) {
-    case Scale.Minutes5:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        minutes: 1
-      }));
-    case Scale.Hour:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        minutes: 5
-      }));
-    case Scale.Hours3:
-    case Scale.Hours6:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        hours: 1
-      }));
-    case Scale.Day:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        hours: 3
-      }));
-    case Scale.Week:
-    case Scale.Weeks2:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        days: 1
-      }));
-    case Scale.Month:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        weeks: 1
-      }));
-    case Scale.Year:
-    case Scale.Months3:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        months: 1
-      }));
-    default:
-      return dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timeAtTimeStep), {
-        months: 1
-      }));
-  }
-};
-var getTimesteps = function getTimesteps(roundedStart, roundedEnd, fundamentalScaleType) {
-  var timesteps = [];
-  var timestep = roundedStart;
-  while (timestep <= roundedEnd) {
-    timesteps.push(timestep);
-    timestep = incrementTimestep(timestep, fundamentalScaleType);
-  }
-  return timesteps;
-};
-var getCustomTimesteps = function getCustomTimesteps(roundedStart, roundedEnd, increment) {
-  var timesteps = [];
-  var timestep = roundedStart;
-  while (timestep <= roundedEnd) {
-    var _dateUtils$add;
-    timesteps.push(timestep);
-    timestep = dateUtils.unix(dateUtils.add(dateUtils.fromUnix(timestep), (_dateUtils$add = {}, _dateUtils$add[increment] = 1, _dateUtils$add)));
-  }
-  return timesteps;
-};
-var getLeftSideDateText = function getLeftSideDateText(timestamp, fundamentalScale) {
-  var time = dateUtils.fromUnix(timestamp);
-  switch (fundamentalScale) {
-    case Scale.Minutes5:
-    case Scale.Hour:
-    case Scale.Hours3:
-    case Scale.Hours6:
-      return dateUtils.dateToString(time, 'y MMM EEE dd');
-    case Scale.Day:
-    case Scale.Week:
-    case Scale.Weeks2:
-      return dateUtils.dateToString(time, 'y MMM');
-    case Scale.Month:
-    case Scale.Months3:
-      return dateUtils.dateToString(time, 'y');
-    case Scale.Year:
-      return dateUtils.dateToString(time, 'y');
-    default:
-      return '';
-  }
-};
-var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, secondsPerPx) {
-  var fundamentalScale = getFundamentalScale(secondsPerPx);
-  var _getRoundedStartAndEn = getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, fundamentalScale),
-    roundedStart = _getRoundedStartAndEn[0],
-    roundedEnd = _getRoundedStartAndEn[1];
-  // draw regular tickmarks
-  var ctx = context;
-  getTimesteps(roundedStart, roundedEnd, fundamentalScale).forEach(function (timestep) {
-    var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
-    // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-    drawStepPxLine(ctx, theme, Math.floor(stepPx) + 0.5, height, fundamentalScale, timestep);
-    // Draw the time step time as text
-    var timeFormat = getTimeFormat(fundamentalScale);
-    var timeText = dateUtils.dateToString(dateUtils.fromUnix(timestep), timeFormat);
-    if ([Scale.Minutes5, Scale.Hour, Scale.Hours3, Scale.Hours6, Scale.Day].includes(fundamentalScale) &&
-    // eslint-disable-next-line @typescript-eslint/no-confusing-non-null-assertion
-    timestep % scaleToUnitSeconds[fundamentalScale] === 0 || fundamentalScale === Scale.Week && dateUtils.getDay(dateUtils.fromUnix(timestep)) === 1) {
-      drawTimeText(ctx, theme, stepPx, height, timeText, fundamentalScale);
+    var _getPositions2 = getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, start, end),
+      startAnimationPosition = _getPositions2.startAnimationPosition,
+      endAnimationPosition = _getPositions2.endAnimationPosition,
+      selectedTimePosition = _getPositions2.selectedTimePosition;
+    // Adjust mouse cursor while hovering draggable areas
+    var leftAnimationIconArea = isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH);
+    var rightAnimationIconArea = isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH);
+    var selectedTimeArea = isSelectedTimeIconArea(x, selectedTimePosition, DRAG_AREA_WIDTH);
+    var insideAnimationArea = isInsideAnimationArea(x, startAnimationPosition, endAnimationPosition);
+    var hoveringLegendHandles = leftAnimationIconArea || rightAnimationIconArea || selectedTimeArea || isDraggingLegend;
+    if (hoveringLegendHandles) {
+      setCursorStyle('ew-resize');
+    } else if (insideAnimationArea && !isDraggingAnimationArea) {
+      setCursorStyle('grab');
+    } else if (insideAnimationArea && isDraggingAnimationArea) {
+      setCursorStyle('grabbing');
+    } else {
+      setCursorStyle('auto');
     }
-    if (fundamentalScale === Scale.Year && dateUtils.getMonth(dateUtils.fromUnix(timestep)) === 0) {
-      drawYearScaleText(ctx, theme, timeText, stepPx, height);
+  };
+  var onWheel = React.useCallback(function (_ref2) {
+    var event = _ref2.event,
+      deltaY = _ref2.deltaY;
+    event.preventDefault();
+    if (event.ctrlKey || event.metaKey) {
+      debouncedAndThrottledUpdateTimeSpan(deltaY);
     }
-  });
-  // draw month overlay lines
-  if (fundamentalScale === Scale.Week || fundamentalScale === Scale.Weeks2 || fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
-    var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, Scale.Year),
-      _roundedStart = _getCustomRoundedStar[0],
-      _roundedEnd = _getCustomRoundedStar[1];
-    var monthTimesteps = getCustomTimesteps(_roundedStart, _roundedEnd, 'months');
-    monthTimesteps.forEach(function (timestep) {
-      var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
-      if (fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
-        var month = dateUtils.dateToString(dateUtils.fromUnix(timestep), 'MMM');
-        // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-        drawDateChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
-        drawTimeText(ctx, theme, stepPx, height, month, fundamentalScale);
-        return;
+  }, [debouncedAndThrottledUpdateTimeSpan]);
+  var onWheelOverCanvas = React.useCallback(function (props) {
+    onWheel(props);
+    adjustSelectedTimeOnWheel(props);
+  }, [adjustSelectedTimeOnWheel, onWheel]);
+  React.useEffect(function () {
+    if (isTimeScrollingEnabled && mapWindowRef != null && mapWindowRef.current) {
+      var handleWheel = function handleWheel(event) {
+        event.preventDefault();
+        onWheel({
+          event: event,
+          deltaY: event.deltaY
+        });
+      };
+      var element = mapWindowRef.current;
+      element.addEventListener('wheel', handleWheel);
+      return function () {
+        element.removeEventListener('wheel', handleWheel);
+      };
+    }
+    return undefined;
+  }, [isTimeScrollingEnabled, mapWindowRef, onWheel]);
+  return jsxs(Box, {
+    sx: {
+      position: 'relative',
+      height: TIME_SLIDER_LEGEND_HEIGHT + "px"
+    },
+    children: [jsx(CustomTooltip, {
+      open: Boolean(showTooltip),
+      slotProps: {
+        popper: {
+          popperRef: popperRef,
+          anchorEl: {
+            getBoundingClientRect: setTooltipPosition
+          }
+        }
+      },
+      title: getTooltipText(),
+      children: jsx(Box, {
+        className: getTimeSliderLegendId(mapId),
+        "data-testid": "timeSliderLegend",
+        onMouseLeave: function onMouseLeave() {
+          setPointerTime(undefined);
+        },
+        sx: {
+          height: TIME_SLIDER_LEGEND_HEIGHT + "px",
+          borderRadius: '4.5px',
+          overflow: 'hidden',
+          cursor: cursorStyle
+        },
+        children: jsx(CanvasComponent, {
+          onMouseDown: onMouseDown,
+          onMouseMove: onMouseMove,
+          onMouseUp: onMouseUp,
+          onRenderCanvas: function onRenderCanvas(ctx, width, height) {
+            updateCanvasWidth(canvasWidth, width);
+            drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, timeSliderSpan, filteredTime, currentTime, start, end, dataStartTime, dataEndTime);
+          },
+          onWheel: onWheelOverCanvas,
+          ref: node
+        })
+      })
+    }), !!isTimeSliderHoverOn && jsx(Box, {
+      "data-testid": "customCanvasMouseOverContainer",
+      onMouseLeave: function onMouseLeave() {
+        return setIsMouseOverCanvas(false);
+      },
+      onMouseOver: function onMouseOver() {
+        return setIsMouseOverCanvas(true);
+      },
+      sx: {
+        position: 'absolute',
+        top: '-40px',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: TIME_SLIDER_LEGEND_HEIGHT + " + 40px",
+        zIndex: isMouseOverCanvas ? 100 : 0
       }
-      // adding 0.5 to make line not so blurred
-      drawDashedMonthChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
-    });
-  }
-  // draw date change texts
-  if (fundamentalScale === Scale.Year) {
-    return;
-  }
-  var dateText = getLeftSideDateText(visibleTimeStart, fundamentalScale);
-  drawLeftSideDateText(ctx, theme, dateText, height);
+    })]
+  });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, secondsPerPx, timeSliderSpan, dataStartPx, dataEndPx, currentTimePx) {
-  var ctx = context;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
-    timelineNightTime = _theme$palette$geoweb.timelineNightTime,
-    ledgendObservedBackground = _theme$palette$geoweb.ledgendObservedBackground,
-    legendForecastBackground = _theme$palette$geoweb.legendForecastBackground,
-    legendNoDataBackground = _theme$palette$geoweb.legendNoDataBackground;
-  // top spacing
-  var y = 0;
-  var scaleToUse = timeSliderSpan ? getScaleFromSpan(timeSliderSpan) : getFundamentalScale(secondsPerPx);
-  drawDefaultBackground();
-  drawObservedData();
-  drawForecastData();
-  drawNightOrAlternateTime();
-  drawAnimationArea();
-  drawDraggableIcons();
-  function drawDefaultBackground() {
-    ctx.fillStyle = legendNoDataBackground.rgba;
-    ctx.fillRect(0, y, canvasWidth, height);
-  }
-  function drawObservedData() {
-    if (dataStartPx < currentTimePx) {
-      ctx.fillStyle = ledgendObservedBackground.fill;
-      ctx.fillRect(Math.max(dataStartPx, y), y, Math.min(currentTimePx, dataEndPx) - Math.max(dataStartPx, y), height);
+var THROTTLE_WAIT_TIME = 300; // [ms]
+var THROTTLE_OPTIONS = {
+  trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
+};
+var TimeSliderMenu = function TimeSliderMenu(_ref) {
+  var marks = _ref.marks,
+    value = _ref.value,
+    allOptionsDisabled = _ref.allOptionsDisabled,
+    isAutoDisabled = _ref.isAutoDisabled,
+    handleAutoClick = _ref.handleAutoClick,
+    isAutoSelected = _ref.isAutoSelected,
+    title = _ref.title,
+    icon = _ref.icon,
+    _ref$onChangeSliderVa = _ref.onChangeSliderValue,
+    onChangeSliderValue = _ref$onChangeSliderVa === void 0 ? function () {} : _ref$onChangeSliderVa,
+    displayCurrentLength = _ref.displayCurrentLength,
+    _ref$disbleUserSetDur = _ref.disbleUserSetDuration,
+    disbleUserSetDuration = _ref$disbleUserSetDur === void 0 ? true : _ref$disbleUserSetDur,
+    customLengthSelector = _ref.customLengthSelector,
+    _ref$setOpen = _ref.setOpen,
+    setOpen = _ref$setOpen === void 0 ? function () {} : _ref$setOpen,
+    _ref$customFieldHeade = _ref.customFieldHeader,
+    customFieldHeader = _ref$customFieldHeade === void 0 ? 'timeslider-length' : _ref$customFieldHeade,
+    open = _ref.open;
+  var currentMarkIndex = marks.findIndex(function (mark) {
+    return mark.value === value;
+  });
+  var currentMark = marks[currentMarkIndex];
+  var _React$useState = React.useState(null),
+    anchorRef = _React$useState[0],
+    setAnchorRef = _React$useState[1];
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var _useState = useState(false),
+    displayLengthInputField = _useState[0],
+    setDisplayLengthInputField = _useState[1];
+  React.useEffect(function () {
+    if (!open && displayLengthInputField) {
+      setDisplayLengthInputField(false);
     }
-  }
-  function drawForecastData() {
-    if (dataEndPx > currentTimePx) {
-      ctx.fillStyle = legendForecastBackground.fill;
-      ctx.fillRect(Math.max(currentTimePx, dataStartPx), y, Math.min(canvasWidth, dataEndPx) - Math.max(currentTimePx, dataStartPx), height);
+  }, [displayLengthInputField, open]);
+  var buttonText = function buttonText(value, displayCurrentLength, currentMark) {
+    if (displayCurrentLength) {
+      return minutesToDescribedDuration(value);
     }
-  }
-  function drawAnimationArea() {
-    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
-    ctx.strokeStyle = theme.palette.geowebColors.timeSlider.timelineSelectionOutline.rgba;
-    ctx.lineWidth = 3;
-    ctx.rect(animationStartPx, y, Math.max(animationEndPx - animationStartPx, y), height);
-    ctx.fill();
-    ctx.stroke();
-  }
-  function drawDraggableIcons() {
-    ctx.save();
-    var path = new Path2D(dragHandlePath);
-    ctx.translate(animationStartPx, y);
-    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
-    ctx.fill(path);
-    ctx.restore();
-    ctx.save();
-    ctx.translate(animationEndPx - 24, y);
-    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
-    ctx.fill(path);
-    ctx.restore();
-  }
-  function drawNightOrAlternateTime() {
-    var colorChangeTimesteps = getColorChangeTimesteps(scaleToUse, visibleTimeStart, visibleTimeEnd);
-    colorChangeTimesteps.forEach(function (timestep, i, arr) {
-      if (i === 0) {
-        return;
-      }
-      var _map = [arr[i - 1], timestep].map(function (timestep) {
-          return timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
-        }),
-        prevPx = _map[0],
-        currPx = _map[1];
-      if (!isColorIntervalEven(scaleToUse, timestep)) {
-        ctx.fillStyle = timelineNightTime.rgba;
-        var TOP_OFFSET = 0;
-        ctx.fillRect(prevPx, TOP_OFFSET, currPx - prevPx, height);
-      }
-    });
-  }
-};
-var getColorChangeTimestepUnit = function getColorChangeTimestepUnit(scale) {
-  switch (scale) {
-    case Scale.Year:
-      return 'months';
-    case Scale.Month:
-    case Scale.Months3:
-      return 'weeks';
-    case Scale.Weeks2:
-    case Scale.Week:
-      return 'days';
-    default:
-      return 'days';
-  }
-};
-var isColorIntervalEven = function isColorIntervalEven(scale, timestep) {
-  var time = dateUtils.fromUnix(timestep);
-  switch (scale) {
-    case Scale.Year:
-      return dateUtils.getMonth(time) % 2 === 0;
-    case Scale.Month:
-    case Scale.Months3:
-      return dateUtils.getWeek(time) % 2 === 0;
-    case Scale.Week:
-    case Scale.Weeks2:
-      return dateUtils.getDayOfYear(time) % 2 === 0;
-    default:
-      {
-        return dateUtils.getDayOfYear(time) % 2 === 0;
+    if (currentMark) {
+      var parts = t(currentMark.label).split(' ');
+      if (parts.length > 1) {
+        return parts[0] + parts.slice(1).join(' ');
       }
-  }
-};
-function getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd) {
-  var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, scale),
-    colorChangeStart = _getCustomRoundedStar[0],
-    colorChangeEnd = _getCustomRoundedStar[1];
-  var colorChangeUnit = getColorChangeTimestepUnit(scale);
-  var colorChangeTimesteps = getCustomTimesteps(colorChangeStart, colorChangeEnd, colorChangeUnit);
-  return colorChangeTimesteps;
-}
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var drawCurrentTime = function drawCurrentTime(context, theme, width, height, startTime, endTime, currentTime) {
-  var ctx = context;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
-    playerNeedleTime = _theme$palette$geoweb.playerNeedleTime,
-    playerNeedleTimeTop = _theme$palette$geoweb.playerNeedleTimeTop;
-  var current = currentTime;
-  var currentPx = current ? timestampToPixelEdges(current, startTime, endTime, width) : 0;
-  // Draw a high vertical line (needle) indicating the current or selected time
-  ctx.beginPath();
-  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-  ctx.moveTo(Math.floor(currentPx) + 0.5, height - 24);
-  ctx.lineTo(Math.floor(currentPx) + 0.5, height);
-  ctx.lineWidth = 5;
-  ctx.strokeStyle = playerNeedleTime.rgba;
-  ctx.stroke();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = playerNeedleTimeTop.rgba;
-  ctx.stroke();
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var drawNeedle = function drawNeedle(context, theme, width, height, startTime, endTime, selectedTime) {
-  if (!selectedTime) {
-    return;
-  }
-  var ctx = context;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
-    playerNeedlePlayer = _theme$palette$geoweb.playerNeedlePlayer,
-    playerNeedlePlayerTop = _theme$palette$geoweb.playerNeedlePlayerTop,
-    playerTimeMarkers = _theme$palette$geoweb.playerTimeMarkers;
-  var selectedPx = timestampToPixelEdges(selectedTime, startTime, endTime, width);
-  // Draw a high vertical line (needle) indicating the current or selected time
-  ctx.beginPath();
-  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-  ctx.moveTo(Math.floor(selectedPx) + 0.5, height - 50);
-  ctx.lineTo(Math.floor(selectedPx) + 0.5, height);
-  ctx.lineWidth = 5;
-  ctx.strokeStyle = playerNeedlePlayer.rgba;
-  ctx.stroke();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = playerNeedlePlayerTop.rgba;
-  ctx.stroke();
-  // Triange connecting timebox.
-  ctx.beginPath();
-  ctx.moveTo(Math.floor(selectedPx) + 5, 0);
-  ctx.lineTo(Math.floor(selectedPx) + 0.5, 5);
-  ctx.lineTo(Math.floor(selectedPx) - 5, 0);
-  ctx.closePath();
-  ctx.fillStyle = playerTimeMarkers.fill;
-  ctx.fill();
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, timeSliderSpan, selectedTimeUnix, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
-  var ctx = context;
-  var _map = [0, canvasWidth].map(function (px) {
-      return pixelToTimestamp(px, centerTime, canvasWidth, secondsPerPx);
-    }),
-    visibleTimeStart = _map[0],
-    visibleTimeEnd = _map[1];
-  var _map2 = [animationStartTime, animationEndTime, dataStartTime, dataEndTime, currentTimeUnix].map(function (time) {
-      return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
+      return parts.join('');
+    }
+    return '';
+  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var throttledScroll = React.useCallback(throttle(function (newValue) {
+    onChangeSliderValue(newValue);
+  }, THROTTLE_WAIT_TIME, THROTTLE_OPTIONS), []);
+  var onWheel = React.useCallback(function (event) {
+    var direction = event.deltaY < 0 ? 1 : -1;
+    var newValue = marks[Math.min(Math.max(currentMarkIndex - direction, 0), marks.length - 1)];
+    throttledScroll(newValue.value);
+  }, [currentMarkIndex, marks, throttledScroll]);
+  return jsxs(Box, {
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
+    },
+    children: [jsxs(CustomIconButton, {
+      isSelected: true,
+      onClick: function onClick() {
+        setOpen(true);
+      },
+      onWheel: onWheel,
+      ref: setAnchorRef,
+      sx: {
+        padding: '11px!important',
+        width: '100%!important'
+      },
+      tooltipTitle: title,
+      variant: "tool",
+      children: [icon, jsx(Typography, {
+        sx: {
+          fontSize: 12,
+          fontWeight: 400,
+          textTransform: 'none'
+        },
+        children: buttonText(value, displayCurrentLength, currentMark)
+      })]
+    }), !!anchorRef && jsxs(Menu, {
+      anchorEl: anchorRef,
+      anchorOrigin: {
+        vertical: -15,
+        horizontal: 'center'
+      },
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      open: open,
+      slotProps: {
+        backdrop: {
+          sx: {
+            backgroundColor: 'transparent'
+          }
+        }
+      },
+      transformOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      children: [jsx(MenuItem, {
+        disabled: true,
+        sx: {
+          fontSize: '12px',
+          opacity: 0.67,
+          padding: '0px 12px',
+          '&.MuiMenuItem-root': {
+            minHeight: '30px!important',
+            minWidth: 150
+          }
+        },
+        children: title
+      }), marks.map(function (mark) {
+        var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value && !isAutoSelected;
+        return jsx(MenuItem, {
+          disabled: allOptionsDisabled,
+          onClick: function onClick() {
+            if (!isSelected) {
+              onChangeSliderValue(mark.value);
+            }
+            setOpen(false);
+          },
+          selected: !!isSelected && !displayLengthInputField,
+          children: mark.label || mark.text
+        }, mark.value);
+      }), !!handleAutoClick && jsx(MenuItem, {
+        disabled: allOptionsDisabled || isAutoDisabled,
+        onClick: function onClick() {
+          handleAutoClick();
+          setOpen(false);
+        },
+        selected: isAutoSelected,
+        children: t('timeslider-auto')
+      }), !!displayCurrentLength && jsxs(MenuItem, {
+        disabled: disbleUserSetDuration,
+        onClick: function onClick() {
+          return setDisplayLengthInputField(true);
+        },
+        sx: {
+          maxWidth: '175px'
+        },
+        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
+          sx: {
+            flexDirection: 'column',
+            display: 'flex',
+            flexGrow: 1
+          },
+          children: [jsx(CardHeader, {
+            slotProps: {
+              title: {
+                fontSize: 12
+              }
+            },
+            sx: {
+              height: 2,
+              padding: 0,
+              color: 'geowebColors.greys.accessible'
+            },
+            title: t(customFieldHeader)
+          }), jsxs(Box, {
+            sx: {
+              flexDirection: 'row',
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexGrow: 1,
+              paddingTop: 0.5
+            },
+            children: [jsx(Typography, {
+              sx: {
+                fontSize: 14,
+                textTransform: 'none',
+                lineHeight: 2
+              },
+              children: minutesToDescribedDuration(value)
+            }), jsx(CustomTooltip, {
+              title: t('timeslider-edit'),
+              children: jsx("span", {
+                children: jsx(CustomIconButton, {
+                  "aria-label": "edit animation option",
+                  "data-testid": "editAnimationOption",
+                  children: jsx(Edit, {})
+                })
+              })
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
+};
+
+var marks$2 = [{
+  value: AnimationLength.Minutes15,
+  text: 'timeslider-min',
+  count: 15
+}, {
+  value: AnimationLength.Minutes30,
+  text: 'timeslider-min',
+  count: 30
+}, {
+  value: AnimationLength.Hours1,
+  text: 'timeslider-hour',
+  count: 1
+}, {
+  value: AnimationLength.Hours2,
+  text: 'timeslider-hour',
+  count: 2
+}, {
+  value: AnimationLength.Hours3,
+  text: 'timeslider-hour',
+  count: 3
+}, {
+  value: AnimationLength.Hours6,
+  text: 'timeslider-hour',
+  count: 6
+}, {
+  value: AnimationLength.Hours12,
+  text: 'timeslider-hour',
+  count: 12
+}, {
+  value: AnimationLength.Hours24,
+  text: 'timeslider-hour',
+  count: 24
+}].sort(function (ta, tb) {
+  return tb.value - ta.value;
+});
+var AnimationLengthButton = function AnimationLengthButton(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$animationLength = _ref.animationLength,
+    animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
+    _ref$isAuto = _ref.isAuto,
+    isAuto = _ref$isAuto === void 0 ? false : _ref$isAuto,
+    layerHasTimeStep = _ref.layerHasTimeStep,
+    onChangeAnimationLength = _ref.onChangeAnimationLength,
+    toggleAnimationLengthAuto = _ref.toggleAnimationLengthAuto;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var translatedMarks = marks$2.map(function (mark) {
+    return Object.assign({}, mark, {
+      label: mark.count + " " + t(mark.text)
+    });
+  });
+  var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
+    var newLength = newSliderValue ? Math.round(newSliderValue) : 0;
+    onChangeAnimationLength == null || onChangeAnimationLength(newLength);
+  };
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    allOptionsDisabled: disabled,
+    displayCurrentLength: true,
+    handleAutoClick: toggleAnimationLengthAuto,
+    icon: jsx(Animation, {
+      "data-testid": "animationLengthButton"
     }),
-    animationStartPx = _map2[0],
-    animationEndPx = _map2[1],
-    dataStartPx = _map2[2],
-    dataEndPx = _map2[3],
-    currentTimePx = _map2[4];
-  ctx.clearRect(0, 0, canvasWidth, height);
-  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, secondsPerPx, timeSliderSpan, dataStartPx, dataEndPx, currentTimePx);
-  drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, secondsPerPx);
-  drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
-  drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
+    isAutoDisabled: !layerHasTimeStep,
+    isAutoSelected: isAuto,
+    marks: translatedMarks,
+    onChangeSliderValue: onChangeSliderValue,
+    open: open,
+    setOpen: setOpen,
+    title: t('timeslider-animation'),
+    value: animationLength
+  });
 };
 
-// Explanation of props can be found here:
-// https://drive.google.com/file/d/1jqqNcciCH0UJiZ04HO-1vknmPPpT8fK5/view?usp=sharing
-var TimeSliderLegend = function TimeSliderLegend(_ref) {
-  var _node$current, _getTimeSliderLegendE;
-  var mapId = _ref.mapId,
-    isTimeScrollingEnabled = _ref.isTimeScrollingEnabled,
-    mapWindowRef = _ref.mapWindowRef,
-    centerTime = _ref.centerTime,
-    canvasWidth = _ref.timeSliderWidth,
-    _ref$secondsPerPx = _ref.secondsPerPx,
-    secondsPerPx = _ref$secondsPerPx === void 0 ? defaultSecondsPerPx : _ref$secondsPerPx,
-    currentTime = _ref.currentTime,
-    dataStartTime = _ref.dataStartTime,
-    dataEndTime = _ref.dataEndTime,
-    reduxAnimationStartTime = _ref.reduxAnimationStartTime,
-    reduxAnimationEndTime = _ref.reduxAnimationEndTime,
-    timeStep = _ref.timeStep,
-    unfilteredSelectedTime = _ref.unfilteredSelectedTime,
-    isDraggingStartAnimation = _ref.isDraggingStartAnimation,
-    isDraggingEndAnimation = _ref.isDraggingEndAnimation,
-    isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
-    timeSliderSpan = _ref.timeSliderSpan,
-    _ref$setUnfilteredSel = _ref.setUnfilteredSelectedTime,
-    setUnfilteredSelectedTime = _ref$setUnfilteredSel === void 0 ? function () {} : _ref$setUnfilteredSel,
-    _ref$onSetCenterTime = _ref.onSetCenterTime,
-    onSetCenterTime = _ref$onSetCenterTime === void 0 ? function () {} : _ref$onSetCenterTime,
-    _ref$onSetAnimationSt = _ref.onSetAnimationStartTime,
-    onSetAnimationStartTime = _ref$onSetAnimationSt === void 0 ? function () {} : _ref$onSetAnimationSt,
-    _ref$onSetAnimationEn = _ref.onSetAnimationEndTime,
-    onSetAnimationEndTime = _ref$onSetAnimationEn === void 0 ? function () {} : _ref$onSetAnimationEn,
-    _ref$updateCanvasWidt = _ref.updateCanvasWidth,
-    updateCanvasWidth = _ref$updateCanvasWidt === void 0 ? function () {} : _ref$updateCanvasWidt,
-    setIsDraggingStartAnimation = _ref.setIsDraggingStartAnimation,
-    setIsDraggingEndAnimation = _ref.setIsDraggingEndAnimation,
-    onStartTimeChange = _ref.onStartTimeChange,
-    onEndTimeChange = _ref.onEndTimeChange,
-    onSetTimeSliderSpan = _ref.onSetTimeSliderSpan,
-    _ref$adjustSelectedTi = _ref.adjustSelectedTimeOnWheel,
-    adjustSelectedTimeOnWheel = _ref$adjustSelectedTi === void 0 ? function () {} : _ref$adjustSelectedTi;
-  var _useCanvasTarget = useCanvasTarget('mousedown'),
-    node = _useCanvasTarget[1];
-  var theme = useTheme();
-  var _useState = useState(false),
-    isDraggingSelectedTime = _useState[0],
-    setIsDraggingSelectedTime = _useState[1];
-  var _useState2 = useState(false),
-    isDraggingLegend = _useState2[0],
-    setIsDraggingLegend = _useState2[1];
-  var xOffset = ((_node$current = node.current) == null || (_node$current = _node$current.canvas) == null ? void 0 : _node$current.getBoundingClientRect().x) || 0;
-  var _useState3 = useState(false),
-    isDraggingAnimationArea = _useState3[0],
-    setIsDraggingAnimationArea = _useState3[1];
-  var _useState4 = useState(false),
-    isMouseOverCanvas = _useState4[0],
-    setIsMouseOverCanvas = _useState4[1];
-  var _useState5 = useState('auto'),
-    cursorStyle = _useState5[0],
-    setCursorStyle = _useState5[1];
-  var _useState6 = useState(undefined),
-    showTooltip = _useState6[0],
-    setShowTooltip = _useState6[1];
-  var _useState7 = useState(),
-    lastHandledRoundedTime = _useState7[0],
-    setLastHandledRoundedTime = _useState7[1];
-  // remove active drag. can happen outside canvas.
-  var _useState8 = useState(),
-    localAnimationStartTime = _useState8[0],
-    setLocalAnimationStartTime = _useState8[1];
-  var _useState9 = useState(),
-    localAnimationEndTime = _useState9[0],
-    setLocalAnimationEndTime = _useState9[1];
-  var _useState0 = useState(),
-    pointerTime = _useState0[0],
-    setPointerTime = _useState0[1];
-  var _useState1 = useState(false),
-    showPointerTimeTooltip = _useState1[0],
-    setShowPointerTimeTooltip = _useState1[1];
-  var debouncedSetShowPointerTimeTooltip = useRef(debounce(setShowPointerTimeTooltip, 500)).current;
-  var timeBetweenMouseAndStartAndEnd = useRef();
-  var pixelsMovedSinceStartDragging = useRef(0);
-  var isAnimationTimeModifiedSetRef = useRef(false);
-  var tooltipPosition = useRef();
-  var startDraggingPosition = useRef(0);
-  var popperRef = useRef(null);
-  var isClickOrDrag = useRef();
-  var filteredTime = getFilteredTime(unfilteredSelectedTime, timeStep, dataStartTime, dataEndTime);
-  var start = localAnimationStartTime;
-  var end = localAnimationEndTime;
-  var pixelsBetweenViewportAndTimesliderOnTop = (_getTimeSliderLegendE = getTimeSliderLegendElement(mapId)) == null ? void 0 : _getTimeSliderLegendE.getBoundingClientRect()['top'];
-  var setTooltipPosition = function setTooltipPosition() {
-    var tooltipX = tooltipPosition.current;
-    var tooltipY = pixelsBetweenViewportAndTimesliderOnTop && pixelsBetweenViewportAndTimesliderOnTop - TIME_SLIDER_LEGEND_HEIGHT * 2.5;
-    return new DOMRect(tooltipX, tooltipY, 0, 0);
-  };
-  var getTooltipTime = function getTooltipTime() {
-    switch (showTooltip) {
-      case 'animationStart':
-        return localAnimationStartTime;
-      case 'animationEnd':
-        return localAnimationEndTime;
-      case 'mousePointer':
-        return pointerTime;
-      default:
-        return undefined;
-    }
-  };
-  var getTooltipText = function getTooltipText() {
-    var time = getTooltipTime();
-    if (!time) {
-      return undefined;
-    }
-    var roundedTooltipTime = showTooltip === 'mousePointer' ? time : roundWithTimeStep$1(time);
-    var tooltipText = dateUtils.dateToString(dateUtils.fromUnix(roundedTooltipTime), dateUtils.DATE_FORMAT_HOURS);
-    return tooltipText;
-  };
-  var roundWithTimeStep$1 = function roundWithTimeStep$1(time) {
-    return roundWithTimeStep(time, timeStep);
-  };
-  var currentIndex = timeValues.indexOf(timeSliderSpan);
-  var updateTimeSpan = function updateTimeSpan(deltaY) {
-    if (onSetTimeSliderSpan) {
-      // Don't do anything if we are already at the edges of the timespan options
-      if (deltaY < 0 && currentIndex === 0 || deltaY > 0 && currentIndex === timeValues.length - 1) {
-        return;
-      }
-      var newTimeSpan = deltaY < 0 ? timeValues[currentIndex - 1] : timeValues[currentIndex + 1];
-      onSetTimeSliderSpan(newTimeSpan, centerTime);
-    }
+var AutoUpdateButton = function AutoUpdateButton(_ref) {
+  var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
+    toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
+    _ref$isAutoUpdating = _ref.isAutoUpdating,
+    isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "data-testid": "autoUpdateButton",
+    disabled: disabled,
+    isSelected: isAutoUpdating,
+    onClick: function onClick() {
+      return toggleAutoUpdate();
+    },
+    tooltipTitle: isAutoUpdating ? t('timeslider-auto-update-on') : t('timeslider-auto-update-off'),
+    variant: "tool",
+    children: isAutoUpdating ? jsx(AutoUpdateActive, {
+      "data-testid": "auto-update-svg-on"
+    }) : jsx(AutoUpdateInActive, {
+      "data-testid": "auto-update-svg-off"
+    })
+  });
+};
+
+var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
+  var isForwardStep = _ref.isForwardStep,
+    isDisabled = _ref.isDisabled,
+    _ref$onClickBFButton = _ref.onClickBFButton,
+    onClickBFButton = _ref$onClickBFButton === void 0 ? function () {} : _ref$onClickBFButton;
+  // Added renderCounter for testing and performance purposes
+  renderCounter.count(BackwardForwardStepButton.name);
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "aria-label": isForwardStep ? 'forward' : 'backward',
+    "data-testid": isForwardStep ? 'stepForwardButton' : 'stepBackwardButton',
+    disabled: isDisabled,
+    onClick: onClickBFButton,
+    tooltipTitle: isForwardStep ? t('timeslider-forward') : t('timeslider-backward'),
+    variant: "tool",
+    children: isForwardStep ? jsx(StepForward, {
+      "data-testid": "step-forward-svg-path"
+    }) : jsx(StepBackward, {
+      "data-testid": "step-backward-svg-path"
+    })
+  });
+};
+
+var NowButton = function NowButton(_ref) {
+  var _ref$onSetNow = _ref.onSetNow,
+    onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "aria-label": "now",
+    "data-testid": "nowButtonTooltip",
+    disabled: disabled,
+    onClick: function onClick() {
+      return onSetNow();
+    },
+    tooltipTitle: t('timeslider-now'),
+    variant: "tool",
+    children: jsx(Now, {
+      "data-testid": "now-svg"
+    })
+  });
+};
+
+var PlayButton = function PlayButton(_ref) {
+  var isAnimating = _ref.isAnimating,
+    isDisabled = _ref.isDisabled,
+    _ref$onTogglePlayButt = _ref.onTogglePlayButton,
+    onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {} : _ref$onTogglePlayButt;
+  var onTogglePlay = function onTogglePlay() {
+    onTogglePlayButton();
   };
-  var throttledUpdateTimeSpan = throttle(updateTimeSpan, 200);
-  var debouncedAndThrottledUpdateTimeSpan = debounce(throttledUpdateTimeSpan, 20);
-  var handleAnimationDragging = React.useCallback(function (x, clientX) {
-    if (!localAnimationStartTime || !localAnimationEndTime) {
-      return;
-    }
-    var mousePosition = clientX - xOffset;
-    var startPos = timestampToPixel(localAnimationStartTime, centerTime, canvasWidth, secondsPerPx);
-    var endPos = timestampToPixel(localAnimationEndTime, centerTime, canvasWidth, secondsPerPx);
-    var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
-    var startTime = roundWithTimeStep(mouseTimeUnix, timeStep);
-    var endTime = roundWithTimeStep(mouseTimeUnix, timeStep);
-    var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
-    if (isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
-      if (!isAnimationTimeModifiedSetRef.current) {
-        isAnimationTimeModifiedSetRef.current = true;
-      }
-    }
-    if (isDraggingStartAnimation) {
-      if (isDraggingStartWithinBounds(endPos, mousePosition)) {
-        return;
-      }
-      setLocalAnimationStartTime(roundWithTimeStep(mouseTimeUnix, timeStep));
-      if (lastHandledRoundedTime !== startTime) {
-        setLastHandledRoundedTime(startTime);
-        setShowTooltip('animationStart');
-        onStartTimeChange == null || onStartTimeChange(startTime);
-      }
-    } else if (isDraggingEndAnimation && pixelsBetweenOnLeft) {
-      if (isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth)) {
-        return;
-      }
-      setLocalAnimationEndTime(roundWithTimeStep(mouseTimeUnix, timeStep));
-      if (lastHandledRoundedTime !== endTime) {
-        setLastHandledRoundedTime(endTime);
-        setShowTooltip('animationEnd');
-        onEndTimeChange == null || onEndTimeChange(endTime);
-      }
-    }
-    if (isDraggingAnimationArea) {
-      if (timeBetweenMouseAndStartAndEnd.current === undefined) {
-        // to move the whole animation area we need to calculate the distance
-        // between the mouse position and the start and end position
-        var _timeFromMouseToStart = mouseTimeUnix - start;
-        var _timeFromMouseToEnd = end - mouseTimeUnix;
-        timeBetweenMouseAndStartAndEnd.current = {
-          timeFromMouseToEnd: _timeFromMouseToEnd,
-          timeFromMouseToStart: _timeFromMouseToStart
-        };
-        return;
-      }
-      pixelsMovedSinceStartDragging.current += x;
-      var _timeBetweenMouseAndS = timeBetweenMouseAndStartAndEnd.current,
-        timeFromMouseToEnd = _timeBetweenMouseAndS.timeFromMouseToEnd,
-        timeFromMouseToStart = _timeBetweenMouseAndS.timeFromMouseToStart;
-      var newStartTime = mouseTimeUnix - timeFromMouseToStart;
-      var newEndTime = mouseTimeUnix + timeFromMouseToEnd;
-      var roundedNewStartTime = roundWithTimeStep(newStartTime, timeStep);
-      var roundedNewEndTime = roundWithTimeStep(newEndTime, timeStep);
-      setLocalAnimationStartTime(roundedNewStartTime);
-      setLocalAnimationEndTime(roundedNewEndTime);
-    }
-  }, [canvasWidth, centerTime, end, isDraggingAnimationArea, isDraggingEndAnimation, isDraggingStartAnimation, lastHandledRoundedTime, localAnimationEndTime, localAnimationStartTime, mapId, onEndTimeChange, onStartTimeChange, secondsPerPx, start, timeStep, xOffset]);
-  useEffect(function () {
-    var handleMouseUp = function handleMouseUp() {
-      pixelsMovedSinceStartDragging.current = 0;
-      timeBetweenMouseAndStartAndEnd.current = undefined;
-    };
-    document.addEventListener('mouseup', handleMouseUp);
-    return function () {
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, []);
-  useEffect(function () {
-    var startTimestamp = convertStringTimeToUnix(reduxAnimationStartTime);
-    var endTimestamp = convertStringTimeToUnix(reduxAnimationEndTime);
-    setLocalAnimationStartTime(startTimestamp);
-    setLocalAnimationEndTime(endTimestamp);
-  }, [reduxAnimationStartTime, reduxAnimationEndTime, setLocalAnimationStartTime, setLocalAnimationEndTime]);
-  useEffect(function () {
-    var stoppedDragging = !isDraggingStartAnimation && !isDraggingEndAnimation && !isDraggingAnimationArea;
-    if (stoppedDragging && isAnimationTimeModifiedSetRef.current) {
-      if (start && start !== localAnimationStartTime) {
-        onSetAnimationStartTime(dateUtils.fromUnix(start).toISOString());
-      }
-      if (end && end !== localAnimationEndTime) {
-        onSetAnimationEndTime(dateUtils.fromUnix(end).toISOString());
-      }
-      isAnimationTimeModifiedSetRef.current = false;
-    }
-  }, [isDraggingStartAnimation, isDraggingEndAnimation, isDraggingAnimationArea, isAnimationTimeModifiedSetRef, localAnimationStartTime, localAnimationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, start, end]);
-  useEffect(function () {
-    var handleMouseUp = function handleMouseUp() {
-      if (isDraggingAnimationArea) {
-        onStartTimeChange == null || onStartTimeChange(localAnimationStartTime);
-        onEndTimeChange == null || onEndTimeChange(localAnimationEndTime);
-      }
-      setCursorStyle('auto');
-      setIsDraggingSelectedTime(false);
-      setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(false);
-      setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(false);
-      setIsDraggingLegend(false);
-      setShowTooltip(undefined);
-      setIsDraggingAnimationArea(false);
-      startDraggingPosition.current = 0;
-      if (isAnimationTimeModifiedSetRef.current) {
-        isAnimationTimeModifiedSetRef.current = false;
-      }
-    };
-    document.addEventListener('mouseup', handleMouseUp);
-    return function () {
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [setIsDraggingStartAnimation, setIsDraggingEndAnimation, localAnimationStartTime, localAnimationEndTime, onStartTimeChange, onEndTimeChange, isDraggingAnimationArea]);
-  useEffect(function () {
-    var handleMouseActions = function handleMouseActions(event) {
-      if (event.movementX === 0) {
-        return;
-      }
-      if (isDraggingLegend) {
-        var dragDistanceTime = event.movementX * secondsPerPx;
-        var newCenterTime = centerTime - dragDistanceTime;
-        onSetCenterTime(newCenterTime);
-      } else if (isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
-        handleAnimationDragging(event.movementX, event.clientX);
-      } else if (isDraggingSelectedTime) {
-        moveSelectedTimePx(event.movementX, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
-      }
-      if (isMouseOverCanvas && isTimeSliderHoverOn) {
-        moveSelectedTimePx(event.movementX, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
-      }
-    };
-    var handleMouseMove = function handleMouseMove(event) {
-      handleMouseActions(event);
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    return function () {
-      document.removeEventListener('mousemove', handleMouseMove);
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "data-testid": "playButton",
+    disabled: isDisabled,
+    isSelected: isAnimating,
+    onClick: onTogglePlay,
+    tooltipTitle: isAnimating ? t('timeslider-pause') : t('timeslider-play'),
+    variant: "tool",
+    children: isAnimating ? jsx(Pause, {
+      "data-testid": "pause-svg-path"
+    }) : jsx(Play, {
+      "data-testid": "play-svg-path"
+    })
+  });
+};
+
+var ControlButtons = function ControlButtons(_ref) {
+  var backwardBtn = _ref.backwardBtn,
+    forwardBtn = _ref.forwardBtn,
+    playBtn = _ref.playBtn,
+    nowBtn = _ref.nowBtn,
+    autoUpdateBtn = _ref.autoUpdateBtn;
+  return jsxs(Fragment, {
+    children: [jsx(Grid, {
+      children: backwardBtn || jsx(BackwardForwardStepButton, {
+        isForwardStep: false
+      })
+    }), jsx(Grid, {
+      children: forwardBtn || jsx(BackwardForwardStepButton, {
+        isForwardStep: true
+      })
+    }), jsx(Grid, {
+      children: playBtn || jsx(PlayButton, {})
+    }), jsx(Grid, {
+      children: nowBtn || jsx(NowButton, {})
+    }), jsx(Grid, {
+      children: autoUpdateBtn || jsx(AutoUpdateButton, {})
+    })]
+  });
+};
+
+var SpeedButton = function SpeedButton(_ref) {
+  var animationDelay = _ref.animationDelay,
+    setMapAnimationDelay = _ref.setMapAnimationDelay;
+  var sorted = [].concat(speedFactors).sort(function (sa, sb) {
+    return sb - sa;
+  });
+  var marks = sorted.map(function (speedFactor) {
+    return {
+      value: getSpeedDelay(speedFactor),
+      text: "x" + speedFactor,
+      label: "x" + speedFactor
     };
-  }, [isDraggingLegend, isDraggingStartAnimation, isDraggingEndAnimation, isDraggingAnimationArea, isDraggingSelectedTime, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime, onSetCenterTime, isTimeSliderHoverOn, isMouseOverCanvas, handleAnimationDragging]);
-  useEffect(function () {
-    if (!showTooltip && pointerTime) {
-      if (showPointerTimeTooltip) {
-        setShowTooltip('mousePointer');
-      } else {
-        debouncedSetShowPointerTimeTooltip(true);
-      }
-    } else if (showTooltip === 'mousePointer' && !pointerTime) {
-      setShowTooltip(undefined);
-      debouncedSetShowPointerTimeTooltip(false);
-      debouncedSetShowPointerTimeTooltip.flush();
-    } else if (showTooltip !== 'mousePointer') {
-      debouncedSetShowPointerTimeTooltip(false);
-      debouncedSetShowPointerTimeTooltip.flush();
-    }
-  }, [debouncedSetShowPointerTimeTooltip, pointerTime, showPointerTimeTooltip, showTooltip]);
-  var onMouseDown = function onMouseDown(x, y, width) {
-    isClickOrDrag.current = 'click';
-    startDraggingPosition.current = x;
-    var _getPositions = getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, start, end),
-      startAnimationPosition = _getPositions.startAnimationPosition,
-      endAnimationPosition = _getPositions.endAnimationPosition,
-      selectedTimePosition = _getPositions.selectedTimePosition;
-    // start dragging selected time.
-    if (isSelectedTimeIconArea(x, selectedTimePosition, DRAG_AREA_WIDTH)) {
-      setCursorStyle('grabbing');
-      setIsDraggingSelectedTime(true);
-      return;
-    }
-    if (reduxAnimationStartTime && reduxAnimationEndTime) {
-      var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
-      tooltipPosition.current = pixelsBetweenOnLeft ? x + pixelsBetweenOnLeft : x;
-      // start dragging either marker
-      if (isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH)) {
-        setCursorStyle('grabbing');
-        setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(true);
-        setShowTooltip('animationStart');
-        return;
-      }
-      if (isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH)) {
-        setCursorStyle('grabbing');
-        setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(true);
-        setShowTooltip('animationEnd');
-        return;
-      }
-      if (isInsideAnimationArea(x, startAnimationPosition, endAnimationPosition)) {
-        setCursorStyle('grabbing');
-        setIsDraggingAnimationArea(true);
-        return;
-      }
-    }
-    // clicking the timeslider
-    setIsDraggingLegend(true);
-  };
-  var onMouseUp = function onMouseUp(x) {
-    if (isClickOrDrag.current === 'click') {
-      var unfilteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx);
-      moveSelectedTimePx(x - unfilteredSelectedTimePx, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
+  });
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    icon: jsx(Speed, {}),
+    marks: marks,
+    onChangeSliderValue: function onChangeSliderValue(markValue) {
+      setMapAnimationDelay(markValue);
+    },
+    open: open,
+    setOpen: setOpen,
+    title: t('timeslider-speed'),
+    value: animationDelay
+  });
+};
+
+var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
+  var timeSliderSpan = _ref.timeSliderSpan,
+    setOpen = _ref.setOpen,
+    onChangeSliderValue = _ref.onChangeSliderValue;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var _React$useState = React.useState(timeSliderSpan / getLargestTimeUnit(timeSliderSpan)),
+    selectedTimeValue = _React$useState[0],
+    setSelectedTimeValue = _React$useState[1];
+  var _React$useState2 = React.useState(getLargestTimeUnit(timeSliderSpan).toString()),
+    selectedTimeResolution = _React$useState2[0],
+    setSelectedTimeResolution = _React$useState2[1];
+  var _React$useState3 = React.useState(true),
+    isANumber = _React$useState3[0],
+    setIsANumber = _React$useState3[1];
+  return jsx(Box, {
+    children: jsxs(FormControl, {
+      onKeyDown: function onKeyDown(event) {
+        event.stopPropagation();
+      },
+      size: "small",
+      sx: {
+        flexDirection: 'row',
+        display: 'flex'
+      },
+      variant: "standard",
+      children: [jsx(TextField, {
+        autoFocus: true,
+        color: isANumber ? 'primary' : 'warning',
+        label: t('timeslider-span'),
+        onBlur: function onBlur() {
+          onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
+        },
+        onChange: function onChange(e) {
+          if (!isNaN(+e.target.value)) {
+            setIsANumber(true);
+            setSelectedTimeValue(Number(e.target.value));
+          } else {
+            setIsANumber(false);
+          }
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'Enter' || e.key === 'Escape') {
+            onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
+            setOpen(false);
+          }
+        },
+        size: "small",
+        slotProps: {
+          htmlInput: {
+            maxLength: 4,
+            'aria-label': 'custom-input'
+          }
+        },
+        value: Math.round(selectedTimeValue * 100) / 100,
+        variant: "standard"
+      }), jsx(Box, {
+        sx: {
+          alignContent: 'end'
+        },
+        children: jsxs(Select, {
+          "aria-label": "time-resolution-selector",
+          defaultValue: "h",
+          onChange: function onChange(e) {
+            setSelectedTimeResolution(e.target.value);
+            onChangeSliderValue(selectedTimeValue * Number(e.target.value));
+            setOpen(false);
+          },
+          size: "small",
+          tabIndex: -1,
+          value: selectedTimeResolution,
+          children: [jsx(MenuItem, {
+            value: TimeInMinutes.YEAR,
+            children: t('years')
+          }), jsx(MenuItem, {
+            value: TimeInMinutes.MONTH,
+            children: t('months')
+          }), jsx(MenuItem, {
+            value: TimeInMinutes.WEEK,
+            children: t('weeks')
+          }), jsx(MenuItem, {
+            value: TimeInMinutes.DAY,
+            children: t('days')
+          }), jsx(MenuItem, {
+            value: TimeInMinutes.HOUR,
+            children: t('hours')
+          }), jsx(MenuItem, {
+            value: TimeInMinutes.MINUTE,
+            children: t('minutes')
+          })]
+        })
+      })]
+    })
+  });
+};
+
+var marks$1 = [{
+  value: 60,
+  text: 'timeslider-hour',
+  count: 1
+}, {
+  value: 3 * 60,
+  text: 'timeslider-hour',
+  count: 3
+}, {
+  value: 6 * 60,
+  text: 'timeslider-hour',
+  count: 6
+}, {
+  value: 12 * 60,
+  text: 'timeslider-hour',
+  count: 12
+}, {
+  value: 24 * 60,
+  text: 'timeslider-hour',
+  count: 24
+}, {
+  value: 2 * 24 * 60,
+  text: 'timeslider-hour',
+  count: 48
+}, {
+  value: 7 * 24 * 60,
+  text: 'timeslider-week',
+  count: 1
+}, {
+  value: 2 * 7 * 24 * 60,
+  text: 'timeslider-weeks',
+  count: 2
+}, {
+  value: 30 * 24 * 60,
+  text: 'timeslider-month',
+  count: 1
+}, {
+  value: 3 * 30 * 24 * 60,
+  text: 'timeslider-months',
+  count: 3
+}, {
+  value: 365 * 24 * 60,
+  text: 'timeslider-year',
+  count: 1
+}].sort(function (ta, tb) {
+  return tb.value - ta.value;
+});
+var TimeSpanButton = function TimeSpanButton(_ref) {
+  var _ref$timeSliderSpan = _ref.timeSliderSpan,
+    timeSliderSpan = _ref$timeSliderSpan === void 0 ? defaultTimeSpan : _ref$timeSliderSpan,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$onChangeSliderVa = _ref.onChangeSliderValue,
+    onChangeSliderValue = _ref$onChangeSliderVa === void 0 ? function () {} : _ref$onChangeSliderVa,
+    onToggleTimeSpan = _ref.onToggleTimeSpan,
+    isTimeSpanAuto = _ref.isTimeSpanAuto,
+    _ref$isOpenByDefault = _ref.isOpenByDefault,
+    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
+    _ref$layerHasTimeStep = _ref.layerHasTimeStep,
+    layerHasTimeStep = _ref$layerHasTimeStep === void 0 ? false : _ref$layerHasTimeStep;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var translatedMarks = marks$1.map(function (mark) {
+    return Object.assign({}, mark, {
+      label: mark.count + " " + t(mark.text)
+    });
+  });
+  var _useState = useState(isOpenByDefault),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    allOptionsDisabled: disabled,
+    customFieldHeader: t('timeslider-span'),
+    customLengthSelector: jsx(TimeSpanButtonCustomSelect, {
+      onChangeSliderValue: onChangeSliderValue,
+      setOpen: setOpen,
+      timeSliderSpan: timeSliderSpan
+    }),
+    disbleUserSetDuration: false,
+    displayCurrentLength: true,
+    handleAutoClick: onToggleTimeSpan,
+    icon: jsx(Clock, {}),
+    isAutoDisabled: !layerHasTimeStep,
+    isAutoSelected: isTimeSpanAuto,
+    marks: translatedMarks,
+    onChangeSliderValue: onChangeSliderValue,
+    open: open,
+    setOpen: setOpen,
+    title: t('timeslider-time-span'),
+    value: timeSliderSpan
+  });
+};
+
+var marks = [{
+  value: 1,
+  text: 'timeslider-min',
+  count: 1
+}, {
+  value: 2,
+  text: 'timeslider-min',
+  count: 2
+}, {
+  value: 5,
+  text: 'timeslider-min',
+  count: 5
+}, {
+  value: 10,
+  text: 'timeslider-min',
+  count: 10
+}, {
+  value: 15,
+  text: 'timeslider-min',
+  count: 15
+}, {
+  value: 30,
+  text: 'timeslider-min',
+  count: 30
+}, {
+  value: 60,
+  text: 'timeslider-hour',
+  count: 1
+}, {
+  value: 120,
+  text: 'timeslider-hour',
+  count: 2
+}, {
+  value: 180,
+  text: 'timeslider-hour',
+  count: 3
+}, {
+  value: 360,
+  text: 'timeslider-hour',
+  count: 6
+}, {
+  value: 720,
+  text: 'timeslider-hour',
+  count: 12
+}, {
+  value: 1440,
+  text: 'timeslider-hour',
+  count: 24
+}, {
+  value: 2880,
+  text: 'timeslider-hour',
+  count: 48
+}, {
+  value: 4320,
+  text: 'timeslider-hour',
+  count: 72
+}, {
+  value: 10080,
+  text: 'timeslider-week',
+  count: 1
+}, {
+  value: 20160,
+  text: 'timeslider-weeks',
+  count: 2
+}, {
+  value: 43200,
+  text: 'timeslider-month',
+  count: 1
+}, {
+  value: 87600,
+  text: 'timeslider-months',
+  count: 2
+}, {
+  value: 262800,
+  text: 'timeslider-months',
+  count: 6
+}, {
+  value: 525600,
+  text: 'timeslider-year',
+  count: 1
+}, {
+  value: 5256000,
+  text: 'timeslider-years',
+  count: 10
+}].sort(function (ta, tb) {
+  return tb.value - ta.value;
+});
+var TimeStepButton = function TimeStepButton(_ref) {
+  var _ref$timeStep = _ref.timeStep,
+    timeStep = _ref$timeStep === void 0 ? marks[0].value : _ref$timeStep,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$isTimestepAuto = _ref.isTimestepAuto,
+    isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
+    onChangeTimeStep = _ref.onChangeTimeStep,
+    _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
+    onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
+    _ref$isOpenByDefault = _ref.isOpenByDefault,
+    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
+    timeStepFromLayer = _ref.timeStepFromLayer;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var translatedMarks = marks.map(function (mark) {
+    return Object.assign({}, mark, {
+      label: mark.count + " " + t(mark.text)
+    });
+  });
+  var onMenuItemClick = function onMenuItemClick(markValue) {
+    if (isTimestepAuto) {
+      onToggleTimestepAuto();
     }
-    isClickOrDrag.current = undefined;
+    onChangeTimeStep(markValue);
   };
-  var onMouseMove = function onMouseMove(x, y, event, width) {
-    var mousePosition = x;
-    setPointerTime(pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx));
-    var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
-    tooltipPosition.current = pixelsBetweenOnLeft && mousePosition + pixelsBetweenOnLeft;
-    if (isClickOrDrag.current === 'click') {
-      isClickOrDrag.current = 'drag';
-    }
-    if (isDraggingSelectedTime || isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
+  var handleToggleTimeStep = function handleToggleTimeStep() {
+    if (isTimestepAuto) {
       return;
     }
-    var _getPositions2 = getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, start, end),
-      startAnimationPosition = _getPositions2.startAnimationPosition,
-      endAnimationPosition = _getPositions2.endAnimationPosition,
-      selectedTimePosition = _getPositions2.selectedTimePosition;
-    // Adjust mouse cursor while hovering draggable areas
-    var leftAnimationIconArea = isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH);
-    var rightAnimationIconArea = isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH);
-    var selectedTimeArea = isSelectedTimeIconArea(x, selectedTimePosition, DRAG_AREA_WIDTH);
-    var insideAnimationArea = isInsideAnimationArea(x, startAnimationPosition, endAnimationPosition);
-    var hoveringLegendHandles = leftAnimationIconArea || rightAnimationIconArea || selectedTimeArea || isDraggingLegend;
-    if (hoveringLegendHandles) {
-      setCursorStyle('ew-resize');
-    } else if (insideAnimationArea && !isDraggingAnimationArea) {
-      setCursorStyle('grab');
-    } else if (insideAnimationArea && isDraggingAnimationArea) {
-      setCursorStyle('grabbing');
-    } else {
-      setCursorStyle('auto');
-    }
+    onToggleTimestepAuto();
+    timeStepFromLayer && onChangeTimeStep(timeStepFromLayer);
   };
-  var onWheel = React.useCallback(function (_ref2) {
-    var event = _ref2.event,
-      deltaY = _ref2.deltaY;
-    event.preventDefault();
-    if (event.ctrlKey || event.metaKey) {
-      debouncedAndThrottledUpdateTimeSpan(deltaY);
-    }
-  }, [debouncedAndThrottledUpdateTimeSpan]);
-  var onWheelOverCanvas = React.useCallback(function (props) {
-    onWheel(props);
-    adjustSelectedTimeOnWheel(props);
-  }, [adjustSelectedTimeOnWheel, onWheel]);
-  React.useEffect(function () {
-    if (isTimeScrollingEnabled && mapWindowRef != null && mapWindowRef.current) {
-      var handleWheel = function handleWheel(event) {
-        event.preventDefault();
-        onWheel({
-          event: event,
-          deltaY: event.deltaY
-        });
-      };
-      var element = mapWindowRef.current;
-      element.addEventListener('wheel', handleWheel);
-      return function () {
-        element.removeEventListener('wheel', handleWheel);
-      };
-    }
-    return undefined;
-  }, [isTimeScrollingEnabled, mapWindowRef, onWheel]);
-  return jsxs(Box, {
-    sx: {
-      position: 'relative',
-      height: TIME_SLIDER_LEGEND_HEIGHT + "px"
-    },
-    children: [jsx(CustomTooltip, {
-      open: Boolean(showTooltip),
-      slotProps: {
-        popper: {
-          popperRef: popperRef,
-          anchorEl: {
-            getBoundingClientRect: setTooltipPosition
-          }
-        }
+  var layerHasTimeStep = Boolean(timeStepFromLayer);
+  renderCounter.count(TimeStepButton.name);
+  var _useState = useState(isOpenByDefault),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    allOptionsDisabled: disabled,
+    displayCurrentLength: true,
+    handleAutoClick: handleToggleTimeStep,
+    icon: jsx(FastForward, {
+      "data-testid": "timeStepButton"
+    }),
+    isAutoDisabled: !layerHasTimeStep,
+    isAutoSelected: isTimestepAuto,
+    marks: translatedMarks,
+    onChangeSliderValue: onMenuItemClick,
+    open: open,
+    setOpen: setOpen,
+    title: t('timeslider-time-step'),
+    value: timeStep || translatedMarks[0].value
+  });
+};
+
+var OptionsMenu = function OptionsMenu(_ref) {
+  var speedBtn = _ref.speedBtn,
+    timeSpanBtn = _ref.timeSpanBtn,
+    timeStepBtn = _ref.timeStepBtn,
+    animationLengthBtn = _ref.animationLengthBtn;
+  return jsxs(Fragment, {
+    children: [jsx(Grid, {
+      size: {
+        xs: 'auto'
       },
-      title: getTooltipText(),
-      children: jsx(Box, {
-        className: getTimeSliderLegendId(mapId),
-        "data-testid": "timeSliderLegend",
-        onMouseLeave: function onMouseLeave() {
-          setPointerTime(undefined);
-        },
-        sx: {
-          height: TIME_SLIDER_LEGEND_HEIGHT + "px",
-          borderRadius: '4.5px',
-          overflow: 'hidden',
-          cursor: cursorStyle
-        },
-        children: jsx(CanvasComponent, {
-          onMouseDown: onMouseDown,
-          onMouseMove: onMouseMove,
-          onMouseUp: onMouseUp,
-          onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-            updateCanvasWidth(canvasWidth, width);
-            drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, timeSliderSpan, filteredTime, currentTime, start, end, dataStartTime, dataEndTime);
-          },
-          onWheel: onWheelOverCanvas,
-          ref: node
-        })
+      children: timeSpanBtn || jsx(TimeSpanButton, {
+        disabled: false,
+        isTimeSpanAuto: false,
+        layerHasTimeStep: false,
+        onChangeSliderValue: function onChangeSliderValue() {},
+        onToggleTimeSpan: function onToggleTimeSpan() {},
+        timeSliderSpan: 0
       })
-    }), !!isTimeSliderHoverOn && jsx(Box, {
-      "data-testid": "customCanvasMouseOverContainer",
-      onMouseLeave: function onMouseLeave() {
-        return setIsMouseOverCanvas(false);
+    }), jsx(Grid, {
+      size: {
+        xs: 'auto'
       },
-      onMouseOver: function onMouseOver() {
-        return setIsMouseOverCanvas(true);
+      children: animationLengthBtn || jsx(AnimationLengthButton, {
+        onChangeAnimationLength: function onChangeAnimationLength() {},
+        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
+      })
+    }), jsx(Grid, {
+      size: {
+        xs: 'auto'
       },
-      sx: {
-        position: 'absolute',
-        top: '-40px',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: TIME_SLIDER_LEGEND_HEIGHT + " + 40px",
-        zIndex: isMouseOverCanvas ? 100 : 0
-      }
+      children: timeStepBtn || jsx(TimeStepButton, {
+        isTimestepAuto: false,
+        onChangeTimeStep: function onChangeTimeStep() {}
+      })
+    }), jsx(Grid, {
+      size: {
+        xs: 'auto'
+      },
+      children: speedBtn || jsx(SpeedButton, {
+        animationDelay: defaultAnimationDelayAtStart,
+        setMapAnimationDelay: function setMapAnimationDelay() {}
+      })
     })]
   });
 };
@@ -3944,4 +3530,4 @@ var DemoWrapper = function DemoWrapper(_ref2) {
   });
 };
 
-export { AUTO_MOVE_AREA_PADDING, AnimationLength, AnimationLengthButton, AutoUpdateButton, BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderClock, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, TimeStepButton, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultSecondsPerPx, defaultTimeSpan, defaultTimeStep, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRightAnimationIconArea, isSelectedTimeIconArea, marks$1 as marks, minutesToDescribedDuration, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pixelToTimestamp, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, useCanvasTarget };
+export { AUTO_MOVE_AREA_PADDING, AnimationLength, AnimationLengthButton, AutoUpdateButton, BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, TimeStepButton, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultSecondsPerPx, defaultTimeSpan, defaultTimeStep, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRightAnimationIconArea, isSelectedTimeIconArea, marks$1 as marks, minutesToDescribedDuration, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pixelToTimestamp, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, useCanvasTarget };