@opengeoweb/time-slider 13.0.0

package/index.esm.js

@@ -0,0 +1,3941 @@
+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 { safelyInitI18nForTestsAndStories, CustomIconButton, dateUtils, CustomTooltip, renderCounter, useMakeSureContainerStaysInsideWindow, CanvasComponent, CustomToggleButton } from '@opengeoweb/shared';
+import { ChevronDown, ChevronUp, ChevronRight, ChevronLeft, Edit, Speed, FastForward, Clock, Animation, Pause, Play, StepForward, StepBackward, Now, AutoUpdateActive, AutoUpdateInActive, Resize, dragHandlePath, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
+import * as React from 'react';
+import React__default, { useState, useRef, useEffect, createElement } from 'react';
+import i18n from 'i18next';
+import { useTranslation, I18nextProvider } from 'react-i18next';
+import { debounce, throttle } from 'lodash';
+import Draggable from 'react-draggable';
+import { Resizable } from 're-resizable';
+import { Box as Box$1 } from '@mui/system';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { PickersDay } from '@mui/x-date-pickers/PickersDay';
+
+var en = {
+	"timeslider-auto": "Auto",
+	"timeslider-length": "length",
+	"timeslider-animation": "Animation",
+	"timeslider-auto-update-on": "Auto update on",
+	"timeslider-auto-update-off": "Auto update off",
+	"timeslider-backward": "Backward",
+	"timeslider-forward": "Forward",
+	"timeslider-hide": "Hide timeslider",
+	"timeslider-show": "Show timeslider",
+	"timeslider-now": "Now",
+	"timeslider-animation-options": "Animation options",
+	"timeslider-play": "Play",
+	"timeslider-pause": "Pause",
+	"timeslider-speed": "Speed",
+	"timeslider-min": "min",
+	"timeslider-hour": "h",
+	"timeslider-day": "d",
+	"timeslider-week": "week",
+	"timeslider-weeks": "weeks",
+	"timeslider-month": "month",
+	"timeslider-months": "months",
+	"timeslider-year": "year",
+	"timeslider-years": "years",
+	"timeslider-time-step": "Time step",
+	"timeslider-time-span": "Time span",
+	"timeslider-january": "Jan",
+	"timeslider-february": "Feb",
+	"timeslider-march": "Mar",
+	"timeslider-april": "Apr",
+	"timeslider-may": "May",
+	"timeslider-june": "Jun",
+	"timeslider-july": "Jul",
+	"timeslider-august": "Aug",
+	"timeslider-september": "Sep",
+	"timeslider-october": "Oct",
+	"timeslider-november": "Nov",
+	"timeslider-december": "Dec",
+	"timeslider-sunday": "Sun",
+	"timeslider-monday": "Mon",
+	"timeslider-tuesday": "Tue",
+	"timeslider-wednesday": "Wed",
+	"timeslider-thursday": "Thu",
+	"timeslider-friday": "Fri",
+	"timeslider-saturday": "Sat",
+	"timeslider-edit": "Edit",
+	"timeslider-span": "Span",
+	"timeslider-marker": "Marker",
+	"timeslider-marker-placement": "Marker placement",
+	"timeslider-marker-label": "Select date and time"
+};
+var fi = {
+	"timeslider-auto": "Auto",
+	"timeslider-length": "pituus",
+	"timeslider-animation": "Animaatio",
+	"timeslider-auto-update-on": "Auto update päällä",
+	"timeslider-auto-update-off": "Auto update pois päältä",
+	"timeslider-backward": "Taaksepäin",
+	"timeslider-forward": "Eteenpäin",
+	"timeslider-hide": "Piilota Timeslider",
+	"timeslider-show": "Näytä Timeslider",
+	"timeslider-now": "Nyt",
+	"timeslider-animation-options": "Animoinnin asetukset",
+	"timeslider-play": "Toista",
+	"timeslider-pause": "Tauko",
+	"timeslider-speed": "Nopeus",
+	"timeslider-min": "min",
+	"timeslider-hour": "t",
+	"timeslider-week": "viikko",
+	"timeslider-weeks": "viikkoa",
+	"timeslider-month": "kuukausi",
+	"timeslider-months": "kuukautta",
+	"timeslider-year": "vuosi",
+	"timeslider-years": "vuotta",
+	"timeslider-time-step": "Aika-askel",
+	"timeslider-time-span": "Aikaväli",
+	"timeslider-january": "Tammmi",
+	"timeslider-february": "Helmi",
+	"timeslider-march": "Maalis",
+	"timeslider-april": "Huhti",
+	"timeslider-may": "Touko",
+	"timeslider-june": "Kesä",
+	"timeslider-july": "Heinä",
+	"timeslider-august": "Elo",
+	"timeslider-september": "Syys",
+	"timeslider-october": "Loka",
+	"timeslider-november": "Marras",
+	"timeslider-december": "Joulu",
+	"timeslider-sunday": "Su",
+	"timeslider-monday": "Ma",
+	"timeslider-tuesday": "Ti",
+	"timeslider-wednesday": "Ke",
+	"timeslider-thursday": "To",
+	"timeslider-friday": "Pe",
+	"timeslider-saturday": "La",
+	"timeslider-edit": "missing-translation",
+	"timeslider-span": "missing-translation",
+	"timeslider-marker": "Aikamerkki",
+	"timeslider-marker-placement": "Aikamerkin siirto",
+	"timeslider-marker-label": "Valitse päivämäärä ja kellonaika"
+};
+var no = {
+	"timeslider-auto": "Auto",
+	"timeslider-length": "lengde",
+	"timeslider-animation": "Animasjon",
+	"timeslider-auto-update-on": "Autooppdatering på",
+	"timeslider-auto-update-off": "Autooppdatering av",
+	"timeslider-backward": "Bakover",
+	"timeslider-forward": "Forover",
+	"timeslider-hide": "Skjul",
+	"timeslider-show": "Vis",
+	"timeslider-now": "Nå",
+	"timeslider-animation-options": "Animasjonsinnstillinger",
+	"timeslider-play": "Spill",
+	"timeslider-pause": "Pause",
+	"timeslider-speed": "Hurtighet",
+	"timeslider-min": "min",
+	"timeslider-hour": "t",
+	"timeslider-week": "uke",
+	"timeslider-weeks": "uker",
+	"timeslider-month": "måned",
+	"timeslider-months": "måneder",
+	"timeslider-year": "år",
+	"timeslider-years": "år",
+	"timeslider-time-step": "Tidsintervall",
+	"timeslider-time-span": "Tidsperiode",
+	"timeslider-january": "Jan",
+	"timeslider-february": "Feb",
+	"timeslider-march": "Mar",
+	"timeslider-april": "Apr",
+	"timeslider-may": "Mai",
+	"timeslider-june": "Jun",
+	"timeslider-july": "Jul",
+	"timeslider-august": "Aug",
+	"timeslider-september": "Sep",
+	"timeslider-october": "Okt",
+	"timeslider-november": "Nov",
+	"timeslider-december": "Des",
+	"timeslider-sunday": "Søn",
+	"timeslider-monday": "Man",
+	"timeslider-tuesday": "Tir",
+	"timeslider-wednesday": "Ons",
+	"timeslider-thursday": "Tor",
+	"timeslider-friday": "Fre",
+	"timeslider-saturday": "Lør",
+	"timeslider-edit": "Editer",
+	"timeslider-span": "Periode",
+	"timeslider-marker": "missing translation",
+	"timeslider-marker-placement": "missing translation",
+	"timeslider-marker-label": "missing translation"
+};
+var nl = {
+	"timeslider-auto": "Auto",
+	"timeslider-length": "lengte",
+	"timeslider-animation": "Animatie",
+	"timeslider-auto-update-on": "Auto update aan",
+	"timeslider-auto-update-off": "Auto update uit",
+	"timeslider-backward": "Achteruit",
+	"timeslider-forward": "Vooruit",
+	"timeslider-hide": "Timeslider verbergen",
+	"timeslider-show": "Timeslider tonen",
+	"timeslider-now": "Nu",
+	"timeslider-animation-options": "Animatie opties",
+	"timeslider-play": "Afspelen",
+	"timeslider-pause": "Pauze",
+	"timeslider-speed": "Snelheid",
+	"timeslider-min": "min",
+	"timeslider-hour": "u",
+	"timeslider-week": "week",
+	"timeslider-weeks": "weken",
+	"timeslider-month": "maand",
+	"timeslider-months": "maanden",
+	"timeslider-year": "jaar",
+	"timeslider-years": "jaren",
+	"timeslider-time-step": "Tijdsinterval",
+	"timeslider-time-span": "Tijdsperiode",
+	"timeslider-january": "Jan",
+	"timeslider-february": "Feb",
+	"timeslider-march": "Maa",
+	"timeslider-april": "Apr",
+	"timeslider-may": "Mei",
+	"timeslider-june": "Jun",
+	"timeslider-july": "Jul",
+	"timeslider-august": "Aug",
+	"timeslider-september": "Sep",
+	"timeslider-october": "Okt",
+	"timeslider-november": "Nov",
+	"timeslider-december": "Dec",
+	"timeslider-sunday": "Zon",
+	"timeslider-monday": "Maa",
+	"timeslider-tuesday": "Din",
+	"timeslider-wednesday": "Woe",
+	"timeslider-thursday": "Don",
+	"timeslider-friday": "Vri",
+	"timeslider-saturday": "Zat",
+	"timeslider-edit": "Bewerken",
+	"timeslider-span": "Tijdsperiode",
+	"timeslider-marker": "Kies tijdstip",
+	"timeslider-marker-placement": "Tijd kiezen",
+	"timeslider-marker-label": "Selecteer datum en tijd"
+};
+var timesliderTranslations = {
+	en: en,
+	fi: fi,
+	no: no,
+	nl: nl
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var TIME_SLIDER_NAMESPACE = 'timeslider';
+var initTimesliderI18n = function initTimesliderI18n() {
+  safelyInitI18nForTestsAndStories(i18n, TIME_SLIDER_NAMESPACE, [{
+    ns: TIME_SLIDER_NAMESPACE,
+    translations: timesliderTranslations
+  }]);
+};
+var useTimesliderTranslation = function useTimesliderTranslation() {
+  return useTranslation(TIME_SLIDER_NAMESPACE);
+};
+
+var HideSliderButtonComponent = function HideSliderButtonComponent(_ref) {
+  var isVisible = _ref.isVisible,
+    toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    variant: "tool",
+    onClick: function onClick() {
+      toggleTimeSliderIsVisible(!isVisible);
+    },
+    "data-testid": "hideTimeSliderButton",
+    tooltipTitle: isVisible ? t('timeslider-hide') : t('timeslider-show'),
+    children: isVisible ? jsx(ChevronDown, {}) : jsx(ChevronUp, {})
+  });
+};
+var HideSliderButton = /*#__PURE__*/React__default.memo(HideSliderButtonComponent);
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: true
+      } : {
+        done: false,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var Scale;
+(function (Scale) {
+  Scale[Scale["Minutes5"] = 0] = "Minutes5";
+  Scale[Scale["Hour"] = 1] = "Hour";
+  Scale[Scale["Hours3"] = 2] = "Hours3";
+  Scale[Scale["Hours6"] = 3] = "Hours6";
+  Scale[Scale["Day"] = 4] = "Day";
+  Scale[Scale["Week"] = 5] = "Week";
+  Scale[Scale["Weeks2"] = 6] = "Weeks2";
+  Scale[Scale["Month"] = 7] = "Month";
+  Scale[Scale["Months3"] = 8] = "Months3";
+  Scale[Scale["Year"] = 9] = "Year";
+})(Scale || (Scale = {}));
+var AnimationLength;
+(function (AnimationLength) {
+  AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
+  AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
+  AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
+  AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
+  AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
+  AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
+  AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
+  AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
+})(AnimationLength || (AnimationLength = {}));
+/**
+ * In this Map collection all fundamental scales
+ * (Scale.Minutes5 ... Scale.Year) are mapped with their corresponding
+ * secondsPerPx numbers.
+ * @returns a Map including information explained above
+ */
+var secondsPerPxToScale = new Map([[2.5, Scale.Minutes5], [30, Scale.Hour], [3 * 30, Scale.Hours3], [6 * 30, Scale.Hours6], [24 * 30, Scale.Day], [7 * 24 * 30, Scale.Week], [14 * 24 * 30, Scale.Weeks2], [30 * 24 * 30, Scale.Month], [90 * 24 * 30, Scale.Months3], [365 * 24 * 30, Scale.Year]]);
+var spanToScale = new Map([[5 * 60, Scale.Minutes5], [60 * 60, Scale.Hour], [3 * 60 * 60, Scale.Hours3], [6 * 60 * 60, Scale.Hours6], [24 * 60 * 60, Scale.Day], [7 * 24 * 60 * 60, Scale.Week], [14 * 24 * 60 * 60, Scale.Weeks2], [30 * 24 * 60 * 60, Scale.Month], [90 * 24 * 60 * 60, Scale.Months3], [365 * 24 * 60 * 60, Scale.Year]]);
+/**
+ * Creates a reverse mapping of scales to their corresponding secondsPerPx
+ * values to make it easier in some parts GeoWeb to fetch a secondsPerpx for
+ * a certain fundamental scale (Scale.Minutes5 ... Scale.year)
+ * @returns an Object, where names are fundamental scale values (0 - 7) and
+ * values are their corresponding secondsPerPx numbers.
+ */
+var scaleToSecondsPerPx = Object.fromEntries(Array.from(secondsPerPxToScale.entries()).map(function (_ref) {
+  var key = _ref[0],
+    value = _ref[1];
+  return [value, key];
+}));
+var scalingCoefficient = function scalingCoefficient(end, start, width) {
+  return width / (end - start);
+};
+var timestampToPixelEdges = function timestampToPixelEdges(timestamp, start, end, width) {
+  return (timestamp - start) * scalingCoefficient(end, start, width);
+};
+var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx, secondsPerPx) {
+  return widthPx / 2 - (centerTime - timestamp) / secondsPerPx;
+};
+var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
+  return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
+};
+/**
+ * This function creates and returns an array where there is secondsPerPx
+ * number of the data set added for a data scale (secondsPerPx)
+ * to secondsPerPxToScale.
+ * @param secondsPerPx
+ * @returns an array containing secondsPerPx numbers.
+ * The secondsPerPx number for a data scale is included
+ * contrary to secondsPerPxToScale.
+ */
+var secondsPerPxValues = function secondsPerPxValues(secondsPerPx) {
+  var sortedSecondsPerPx = [].concat(secondsPerPxToScale).map(function (value) {
+    return Number(value[0]);
+  });
+  var full = [].concat(sortedSecondsPerPx, [secondsPerPx]);
+  return full;
+};
+var secondsPerPxFromCanvasWidth = function secondsPerPxFromCanvasWidth(canvasWidth, spanInSeconds) {
+  if (canvasWidth <= 0 || spanInSeconds <= 0) {
+    return undefined;
+  }
+  return spanInSeconds / canvasWidth;
+};
+var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTimePoint, oldSecondsPerPx, newSecondsPerPx, oldCenterTime) {
+  var centerToFixedPointPx = (fixedTimePoint - oldCenterTime) / oldSecondsPerPx;
+  return fixedTimePoint - centerToFixedPointPx * newSecondsPerPx;
+};
+/**
+ * Move the time slider such that a given time point (timePoint)
+ * is at a given pixel width (timePointPx).
+ * @returns a new center time for the resulting position
+ */
+var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePointPx, secondsPerPx, canvasWidth) {
+  return timePoint - secondsPerPx * (timePointPx - canvasWidth / 2);
+};
+/** This reusable custom hook tells whether given pointer event targets current canvas node.
+ * Example:
+ *
+ * const [isAllowedCanvasNodePointed, nodeRef] = useCanvasTarget('mousedown', false);
+ *  ...
+ * return isAllowedCanvasNodePointed ? (<CanvasComponent ref={nodeRef}>Component with ref</CanvasComponent>) : (<CanvasComponent>Component with NO ref</CanvasComponent>);
+ *  ...
+ */
+var useCanvasTarget = function useCanvasTarget(eventType) {
+  var nodeRef = React__default.useRef(null);
+  var _React$useState = React__default.useState(false),
+    isTargetNode = _React$useState[0],
+    setTargetNode = _React$useState[1];
+  // Check if pointer event targets current node element
+  var pointerEventListener = React__default.useCallback(function (event) {
+    setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
+  }, [nodeRef]);
+  React__default.useEffect(function () {
+    document.addEventListener(eventType, pointerEventListener);
+    return function () {
+      return document.removeEventListener(eventType, pointerEventListener);
+    };
+  }, [eventType, pointerEventListener]); // Only add/remove event listener when listener really changes, that is, NOT necessarily between every re-render.
+  return [isTargetNode, nodeRef];
+};
+var timeBoxGeom = {
+  smallWidth: 126,
+  largeWidth: 167,
+  height: 24,
+  cornerRadius: 5,
+  lineWidth: 1,
+  iconWidth: 25,
+  calendarWidth: 20
+};
+var AUTO_MOVE_AREA_PADDING = 1;
+var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
+  return (scale === Scale.Year ? timeBoxGeom.largeWidth + timeBoxGeom.iconWidth : timeBoxGeom.smallWidth + timeBoxGeom.iconWidth) / 2 + AUTO_MOVE_AREA_PADDING;
+};
+var TimeInMinutes;
+(function (TimeInMinutes) {
+  TimeInMinutes[TimeInMinutes["YEAR"] = 525600] = "YEAR";
+  TimeInMinutes[TimeInMinutes["MONTH"] = 43200] = "MONTH";
+  TimeInMinutes[TimeInMinutes["WEEK"] = 10080] = "WEEK";
+  TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
+  TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
+  TimeInMinutes[TimeInMinutes["MINUTE"] = 1] = "MINUTE";
+})(TimeInMinutes || (TimeInMinutes = {}));
+/**
+ *
+ * @param minutes
+ * @returns the two highest values in the format yr(s) mo(s) d h m
+ */
+var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
+  var units = [{
+    label: 'yr',
+    value: TimeInMinutes.YEAR,
+    plural: 's'
+  }, {
+    label: 'mo',
+    value: TimeInMinutes.MONTH,
+    plural: 's'
+  }, {
+    label: 'd',
+    value: TimeInMinutes.DAY
+  }, {
+    label: 'h',
+    value: TimeInMinutes.HOUR
+  }, {
+    label: 'm',
+    value: TimeInMinutes.MINUTE
+  }];
+  var durations = units.reduce(function (units, duration) {
+    var min = units.min,
+      time = units.time,
+      count = units.count;
+    var label = duration.label,
+      value = duration.value,
+      _duration$plural = duration.plural,
+      plural = _duration$plural === void 0 ? '' : _duration$plural;
+    var unit = Math.floor(min / value);
+    if (unit > 0 && count < 2) {
+      return {
+        time: "" + time + unit + label + (unit > 1 ? plural : '') + " ",
+        min: min - unit * value,
+        count: count + 1
+      };
+    }
+    return {
+      min: min,
+      time: time,
+      count: count
+    };
+  }, {
+    min: minutes,
+    time: '',
+    count: 0
+  });
+  return durations.time.trim();
+};
+/**
+ * Returns the largest timeunit value divisible by minuts
+ * @param minutes
+ * @returns
+ */
+function getLargestTimeUnit(minutes) {
+  var values = Object.values(TimeInMinutes).filter(function (value) {
+    return typeof value === 'number';
+  });
+  for (var _iterator = _createForOfIteratorHelperLoose(values), _step; !(_step = _iterator()).done;) {
+    var value = _step.value;
+    if (minutes >= value) {
+      return value;
+    }
+  }
+  return TimeInMinutes.MINUTE;
+}
+// For a data scale an appropriate fundamental scale is chosen
+// depending on secondsPerPx of data. When a time range of
+// data is for example many months. the fundamental scale Scale.Year
+// is chosen here and the legend of the time slider is drawn in the
+// same as if otiginally a year scale would have been chose.
+//
+// If a  time range of data is a few weeks, Scale.Month is chosen. So, all
+// the time range of data can be shown in the window.
+var getFundamentalScale = function getFundamentalScale(secondsPerPx) {
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Month]) {
+    return Scale.Year;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Week]) {
+    return Scale.Month;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Day]) {
+    return Scale.Week;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hours6]) {
+    return Scale.Day;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hours3]) {
+    return Scale.Hours6;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hour]) {
+    return Scale.Hours3;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Minutes5]) {
+    return Scale.Hour;
+  }
+  return Scale.Minutes5;
+};
+var getScaleFromSpan = function getScaleFromSpan(span) {
+  var sortedScales = [].concat(spanToScale.entries()).sort(function (_ref2, _ref3) {
+    var sa = _ref2[0];
+    var sb = _ref3[0];
+    return sb - sa;
+  });
+  for (var _iterator2 = _createForOfIteratorHelperLoose(sortedScales), _step2; !(_step2 = _iterator2()).done;) {
+    var _step2$value = _step2.value,
+      scaleSpan = _step2$value[0],
+      scale = _step2$value[1];
+    if (span >= scaleSpan) {
+      return scale;
+    }
+  }
+  return sortedScales[0][1];
+};
+var calculateMouseTimeAndCheckBounds = function calculateMouseTimeAndCheckBounds(x, startAnimationPosition, endAnimationPosition, DRAG_AREA_WIDTH, pixelsBetweenViewportAndTimesliderOnLeft, centerTime, canvasWidth, secondsPerPx, tooltipPosition) {
+  var mousePosition = startAnimationPosition + x;
+  var startAnimationMaxPosition = endAnimationPosition - DRAG_AREA_WIDTH * 2;
+  var isDraggingWithinBounds = mousePosition >= startAnimationMaxPosition || mousePosition <= 0;
+  if (isDraggingWithinBounds) {
+    return undefined;
+  }
+  // eslint-disable-next-line no-param-reassign
+  tooltipPosition.current = pixelsBetweenViewportAndTimesliderOnLeft && mousePosition + pixelsBetweenViewportAndTimesliderOnLeft;
+  return pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
+};
+var MockDOMRect = function MockDOMRect(x, y, width, height) {
+  this.x = x;
+  this.y = y;
+  this.width = width;
+  this.height = height;
+}; // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+var setTooltipPosition = function setTooltipPosition(tooltipX, tooltipY) {
+  return new MockDOMRect(tooltipX, tooltipY, 0, 0);
+};
+// default values
+var defaultAnimationDelayAtStart = 250;
+var defaultDelay = 1000; // [ms]
+var defaultTimeStep = 60;
+var defaultSecondsPerPx = 80;
+var defaultTimeSpan = 24 * 3600;
+var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
+var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
+  var adjustedTimeStep = timeStep * 60;
+  if (!type || type === 'round') {
+    return Math.round(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  if (type === 'floor') {
+    return Math.floor(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  if (type === 'ceil') {
+    return Math.ceil(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  return undefined;
+};
+/**
+ * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
+ */
+var getSpeedDelay = function getSpeedDelay(speedFactor) {
+  return defaultDelay / speedFactor;
+};
+var timeSliderLegendDefaultProps = {
+  timeSliderWidth: 100,
+  centerTime: dateUtils.unix(dateUtils.set(dateUtils.utc(), {
+    hours: 12,
+    minutes: 0,
+    seconds: 0,
+    milliseconds: 0
+  })),
+  secondsPerPx: defaultSecondsPerPx,
+  selectedTime: dateUtils.unix(dateUtils.set(dateUtils.utc(), {
+    hours: 12,
+    minutes: 0,
+    seconds: 0,
+    milliseconds: 0
+  }))
+};
+
+var timeSliderUtils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
+  get AnimationLength () { return AnimationLength; },
+  get Scale () { return Scale; },
+  get TimeInMinutes () { return TimeInMinutes; },
+  calculateMouseTimeAndCheckBounds: calculateMouseTimeAndCheckBounds,
+  defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
+  defaultDelay: defaultDelay,
+  defaultSecondsPerPx: defaultSecondsPerPx,
+  defaultTimeSpan: defaultTimeSpan,
+  defaultTimeStep: defaultTimeStep,
+  getAutoMoveAreaWidth: getAutoMoveAreaWidth,
+  getFundamentalScale: getFundamentalScale,
+  getLargestTimeUnit: getLargestTimeUnit,
+  getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
+  getScaleFromSpan: getScaleFromSpan,
+  getSpeedDelay: getSpeedDelay,
+  minutesToDescribedDuration: minutesToDescribedDuration,
+  moveRelativeToTimePoint: moveRelativeToTimePoint,
+  pixelToTimestamp: pixelToTimestamp,
+  roundWithTimeStep: roundWithTimeStep,
+  scaleToSecondsPerPx: scaleToSecondsPerPx,
+  scalingCoefficient: scalingCoefficient,
+  secondsPerPxFromCanvasWidth: secondsPerPxFromCanvasWidth,
+  secondsPerPxToScale: secondsPerPxToScale,
+  secondsPerPxValues: secondsPerPxValues,
+  setTooltipPosition: setTooltipPosition,
+  spanToScale: spanToScale,
+  speedFactors: speedFactors,
+  timeBoxGeom: timeBoxGeom,
+  timeSliderLegendDefaultProps: timeSliderLegendDefaultProps,
+  timestampToPixel: timestampToPixel,
+  timestampToPixelEdges: timestampToPixelEdges,
+  useCanvasTarget: useCanvasTarget
+});
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var onsetNewDateDebounced = debounce(function (dateToSet, onSetNewDate) {
+  onSetNewDate(dateToSet);
+}, 4, {
+  maxWait: 40
+});
+var setPreviousTimeStep = function setPreviousTimeStep(timeStep, currentTime, dataStartTime, onSetNewDate) {
+  var nextTime = currentTime - timeStep;
+  var roundedTime = roundWithTimeStep(nextTime, timeStep, 'floor');
+  var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
+  var selectedTimeString = dateUtils.fromUnix(newTime).toISOString();
+  onSetNewDate(selectedTimeString);
+};
+var setNextTimeStep = function setNextTimeStep(timeStep, currentTime, dataEndTime, onSetNewDate) {
+  var nextTime = currentTime + timeStep;
+  var roundedTime = roundWithTimeStep(nextTime, timeStep, 'ceil');
+  var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
+  var selectedTimeString = dateUtils.fromUnix(newTime).toISOString();
+  onSetNewDate(selectedTimeString);
+};
+/**
+ * updates unfiltered selected time and moves selected time a given distance
+ * in pixels. Unfiltered selected time can be outside data data limits, but
+ * selected time cannot.
+ */
+var moveSelectedTimePx = function moveSelectedTimePx(pixelsMoved, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime) {
+  var unfilteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx);
+  var clickedUnfilteredSelectedTimePx = unfilteredSelectedTimePx + pixelsMoved;
+  var newUnfilteredSelectedTime = pixelToTimestamp(clickedUnfilteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx);
+  setUnfilteredSelectedTime(newUnfilteredSelectedTime);
+};
+function getFilteredTime(unfilteredTime, timeStep, dataStartTime, dataEndTime) {
+  if (!timeStep || !dataStartTime || !dataEndTime) {
+    return unfilteredTime;
+  }
+  var roundedTime = roundWithTimeStep(unfilteredTime, timeStep);
+  var maxTime = Math.max(roundedTime, dataStartTime);
+  return Math.min(maxTime, dataEndTime);
+}
+/** Reusable business logic for how to handle events that set time to now (closest).
+ * Used in NowButton and TimeSliderLegend.
+ */
+var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime) {
+  if (dataStartTime < dataEndTime) {
+    if (dataEndTime < currentTime) {
+      onSetNewDate(dateUtils.fromUnix(dataEndTime).toISOString());
+      onSetCenterTime(dataEndTime);
+    } else if (dataStartTime > currentTime) {
+      onSetNewDate(dateUtils.fromUnix(dataStartTime).toISOString());
+      onSetCenterTime(dataStartTime);
+    } else {
+      var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
+      onSetNewDate(dateUtils.fromUnix(closestToCurrent).toISOString());
+      onSetCenterTime(closestToCurrent);
+    }
+  }
+};
+
+/* *
+ * 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)
+ * */
+var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider) {
+  React__default.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      var target = event.target;
+      if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && (event.key === 't' || event.key === 'T') && mapIsActive) {
+        onToggleTimeSlider(!isVisible);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [mapIsActive, isVisible, onToggleTimeSlider]);
+};
+var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime) {
+  React__default.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Home' && mapIsActive) {
+        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, dateUtils.unix(dateUtils.utc()), onSetNewDate, onSetCenterTime);
+      }
+      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
+        switch (event.code) {
+          case 'ArrowLeft':
+            setPreviousTimeStep(timeStep, selectedTime, dataStartTime, onSetNewDate);
+            break;
+          case 'ArrowRight':
+            setNextTimeStep(timeStep, selectedTime, dataEndTime, onSetNewDate);
+            break;
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, selectedTime, timeStep]);
+};
+
+/* *
+ * 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)
+ * */
+/**
+ * @param x The pin location
+ * @param selectedTimePx The selected px
+ * @param width The default width of a hoverable icon (usually 24px)
+ * @returns
+ */
+var isSelectedTimeIconArea = function isSelectedTimeIconArea(x, selectedTimePx, width) {
+  return x >= selectedTimePx && x <= selectedTimePx + width / 2;
+};
+/**
+ * @param x The pin location
+ * @param selectedTimePx The selected px
+ * @param width The default width of a hoverable icon (usually 24px)
+ * @returns
+ */
+var isRightAnimationIconArea = function isRightAnimationIconArea(x, rightMarkerPx, width) {
+  return x >= rightMarkerPx - width && x <= rightMarkerPx;
+};
+var isInsideAnimationArea = function isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) {
+  var isInsideOnLeftSide = x >= leftMarkerPx;
+  var isInsideOnRightSide = x <= rightMarkerPx;
+  return isInsideOnLeftSide && isInsideOnRightSide;
+};
+/**
+ * @param x The pin location
+ * @param selectedTimePx The selected px
+ * @param width The default width of a hoverable icon (usually 24px)
+ * @returns
+ */
+var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx, width) {
+  return x >= leftMarkerPx && x <= leftMarkerPx + width;
+};
+function convertStringTimeToUnix(time) {
+  return time ? dateUtils.unix(new Date(time)) : undefined;
+}
+var timeValues = [3600, 10800, 21600, 43200, 86400, 172800, 604800, 1209600, 2592000, 7776000, 31536000];
+var TIME_SLIDER_LEGEND_HEIGHT = 24;
+var DRAG_AREA_WIDTH = 24;
+var isDraggingStartWithinBounds = function isDraggingStartWithinBounds(endPos, mousePosition) {
+  var startAnimationMaxPosition = endPos - DRAG_AREA_WIDTH * 2;
+  return mousePosition >= startAnimationMaxPosition || mousePosition <= 0;
+};
+var isDraggingEndWithinBounds = function isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth) {
+  var endAnimationMinimumPosition = startPos + DRAG_AREA_WIDTH * 2;
+  return endAnimationMinimumPosition >= mousePosition || mousePosition >= canvasWidth;
+};
+var getTimeSliderLegendId = function getTimeSliderLegendId(mapId) {
+  return "timeSliderLegend_" + mapId;
+};
+var getTimeSliderLegendElement = function getTimeSliderLegendElement(mapId) {
+  return document.querySelector(".timeSliderLegend_" + mapId);
+};
+var getPixelsBetweenViewportAndTimesliderOnLeft = function getPixelsBetweenViewportAndTimesliderOnLeft(mapId) {
+  var timeSliderLegendElement = document.querySelector(".timeSliderLegend_" + mapId);
+  return timeSliderLegendElement == null ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
+};
+function getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, start, end) {
+  var selectedTimePosition = timestampToPixel(unfilteredSelectedTime, centerTime, width, secondsPerPx);
+  var endAnimationPosition = timestampToPixel(end, centerTime, width, secondsPerPx);
+  var startAnimationPosition = timestampToPixel(start, centerTime, width, secondsPerPx);
+  return {
+    startAnimationPosition: startAnimationPosition,
+    endAnimationPosition: endAnimationPosition,
+    selectedTimePosition: selectedTimePosition
+  };
+}
+
+var TimeSlider = function TimeSlider(_ref) {
+  var buttons = _ref.buttons,
+    timeBox = _ref.timeBox,
+    legend = _ref.legend,
+    _ref$mapIsActive = _ref.mapIsActive,
+    mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    timeStep = _ref.timeStep,
+    dataStartTime = _ref.dataStartTime,
+    dataEndTime = _ref.dataEndTime,
+    selectedTime = _ref.selectedTime,
+    onSetNewDate = _ref.onSetNewDate,
+    onSetCenterTime = _ref.onSetCenterTime,
+    _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
+    onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
+  // set up visibility toggle
+  useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider);
+  // set up movement with keyboard shortcuts
+  useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime);
+  // timeBox, buttons and legend are created in TimeSliderConnect.tsx
+  // these components will always be created as TimeSlider never runs in isolation from the store
+  return isVisible ? jsxs(Grid, {
+    container: true,
+    sx: {
+      display: 'grid',
+      gridTemplateColumns: '175px 1fr 40px',
+      gridTemplateRows: TIME_SLIDER_LEGEND_HEIGHT,
+      gridTemplateAreas: "\". timebox .\"\n                            \"buttons timelegend toggle\"",
+      paddingBottom: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      visibility: isVisible ? 'visible' : 'hidden',
+      // Apply these styles only one mobile devices on landscape orientation
+      '@media screen and (max-width: 1024px) and (orientation: landscape)': {
+        paddingLeft: '5%',
+        paddingRight: '5%'
+      }
+    },
+    "data-testid": "timeSlider",
+    children: [jsx(Grid, {
+      sx: {
+        gridArea: 'timebox',
+        zIndex: 99,
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      children: timeBox
+    }), jsx(Grid, {
+      sx: {
+        gridArea: 'buttons'
+      },
+      children: buttons
+    }), jsx(Grid, {
+      sx: {
+        gridArea: 'timelegend'
+      },
+      children: legend
+    }), jsx(Grid, {
+      sx: {
+        gridArea: 'toggle',
+        paddingLeft: 1
+      },
+      children: jsx(HideSliderButton, {
+        toggleTimeSliderIsVisible: onToggleTimeSlider,
+        isVisible: isVisible
+      })
+    })]
+  }) : jsx(Grid, {
+    container: true,
+    sx: {
+      paddingRight: 1,
+      paddingBottom: 1,
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    },
+    children: jsx(HideSliderButton, {
+      toggleTimeSliderIsVisible: onToggleTimeSlider,
+      isVisible: isVisible
+    })
+  });
+};
+
+/* *
+ * 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 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,
+    wrap: "nowrap",
+    sx: {
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+      cursor: 'move',
+      height: '100%',
+      width: '100%',
+      backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
+      borderRadius: '5px'
+    },
+    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, {
+          variant: "tool",
+          onClick: onButtonClick,
+          sx: {
+            color: '#fff!important'
+          },
+          "aria-label": "Animation options",
+          isSelected: isPopperOpen,
+          children: jsx(Icon, {
+            isPopperOpen: isPopperOpen,
+            popperPlacement: popperPlacement
+          })
+        })
+      })
+    }), jsx(Grid, {
+      children: jsx(Typography, {
+        variant: "subtitle2",
+        sx: {
+          whiteSpace: 'nowrap',
+          fontSize: fontSize,
+          color: '#fff'
+        },
+        children: currentDateString
+      })
+    })]
+  });
+};
+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, {});
+    }
+    if (popperPlacement === 'top') {
+      return jsx(ChevronDown, {});
+    }
+    return jsx(ChevronUp, {});
+  }
+  var popperClosedStyle = {
+    backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
+    outline: '1px solid white',
+    borderRadius: '5px'
+  };
+  if (popperPlacement === 'left') {
+    return jsx(ChevronLeft, {
+      sx: popperClosedStyle
+    });
+  }
+  if (popperPlacement === 'right') {
+    return jsx(ChevronRight, {
+      sx: popperClosedStyle
+    });
+  }
+  if (popperPlacement === 'top') {
+    return jsx(ChevronUp, {
+      sx: popperClosedStyle
+    });
+  }
+  return jsx(ChevronDown, {
+    sx: popperClosedStyle
+  });
+};
+
+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);
+    }
+  }, [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, {
+      variant: "tool",
+      tooltipTitle: title,
+      onClick: function onClick() {
+        setOpen(true);
+      },
+      ref: setAnchorRef,
+      isSelected: true,
+      onWheel: onWheel,
+      sx: {
+        padding: '11px!important',
+        width: '100%!important'
+      },
+      children: [icon, jsx(Typography, {
+        sx: {
+          fontSize: 12,
+          fontWeight: 400,
+          textTransform: 'none'
+        },
+        children: buttonText(value, displayCurrentLength, currentMark)
+      })]
+    }), anchorRef && jsxs(Menu, {
+      anchorEl: anchorRef,
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      BackdropProps: {
+        sx: {
+          backgroundColor: 'transparent'
+        }
+      },
+      anchorOrigin: {
+        vertical: -15,
+        horizontal: 'center'
+      },
+      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, {
+          onClick: function onClick() {
+            if (!isSelected) {
+              onChangeSliderValue(mark.value);
+            }
+            setOpen(false);
+          },
+          selected: isSelected && !displayLengthInputField,
+          disabled: allOptionsDisabled,
+          children: mark.label || mark.text
+        }, mark.value);
+      }), handleAutoClick && jsx(MenuItem, {
+        onClick: function onClick() {
+          handleAutoClick();
+          setOpen(false);
+        },
+        selected: isAutoSelected,
+        disabled: allOptionsDisabled || isAutoDisabled,
+        children: t('timeslider-auto')
+      }), displayCurrentLength && jsxs(MenuItem, {
+        onClick: function onClick() {
+          return setdisplayLengthInputField(true);
+        },
+        disabled: disbleUserSetDuration,
+        sx: {
+          maxWidth: '175px'
+        },
+        children: [displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
+          sx: {
+            flexDirection: 'column',
+            display: 'flex',
+            flexGrow: 1
+          },
+          children: [jsx(CardHeader, {
+            title: t(customFieldHeader),
+            sx: {
+              height: 2,
+              padding: 0,
+              color: 'geowebColors.greys.accessible'
+            },
+            titleTypographyProps: {
+              fontSize: 12
+            }
+          }), 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 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, {
+    onChangeSliderValue: function onChangeSliderValue(markValue) {
+      setMapAnimationDelay(markValue);
+    },
+    icon: jsx(Speed, {}),
+    marks: marks,
+    title: t('timeslider-speed'),
+    value: animationDelay,
+    open: open,
+    setOpen: setOpen
+  });
+};
+
+var marks$2 = [{
+  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$2[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$2.map(function (mark) {
+    return Object.assign({}, mark, {
+      label: mark.count + " " + t(mark.text)
+    });
+  });
+  var onMenuItemClick = function onMenuItemClick(markValue) {
+    if (isTimestepAuto) {
+      onToggleTimestepAuto();
+    }
+    onChangeTimeStep(markValue);
+  };
+  var handleToggleTimeStep = function handleToggleTimeStep() {
+    if (isTimestepAuto) {
+      return;
+    }
+    onToggleTimestepAuto();
+    timeStepFromLayer && onChangeTimeStep(timeStepFromLayer);
+  };
+  var layerHasTimeStep = Boolean(timeStepFromLayer);
+  renderCounter.count(TimeStepButton.name);
+  var _useState = useState(isOpenByDefault),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    title: t('timeslider-time-step'),
+    marks: translatedMarks,
+    value: timeStep || translatedMarks[0].value,
+    onChangeSliderValue: onMenuItemClick,
+    allOptionsDisabled: disabled,
+    isAutoSelected: isTimestepAuto,
+    isAutoDisabled: !layerHasTimeStep,
+    handleAutoClick: handleToggleTimeStep,
+    icon: jsx(FastForward, {
+      "data-testid": "timeStepButton"
+    }),
+    displayCurrentLength: true,
+    open: open,
+    setOpen: setOpen
+  });
+};
+
+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__default.useState(timeSliderSpan / getLargestTimeUnit(timeSliderSpan)),
+    selectedTimeValue = _React$useState[0],
+    setSelectedTimeValue = _React$useState[1];
+  var _React$useState2 = React__default.useState(getLargestTimeUnit(timeSliderSpan).toString()),
+    selectedTimeResolution = _React$useState2[0],
+    setSelectedTimeResolution = _React$useState2[1];
+  var _React$useState3 = React__default.useState(true),
+    isANumber = _React$useState3[0],
+    setisANumber = _React$useState3[1];
+  return jsx(Box, {
+    children: jsxs(FormControl, {
+      variant: "standard",
+      size: "small",
+      sx: {
+        flexDirection: 'row',
+        display: 'flex'
+      },
+      onKeyDown: function onKeyDown(event) {
+        event.stopPropagation();
+      },
+      children: [jsx(TextField, {
+        label: t('timeslider-span'),
+        size: "small",
+        variant: "standard",
+        value: Math.round(selectedTimeValue * 100) / 100,
+        autoFocus: true,
+        onChange: function onChange(e) {
+          if (!isNaN(+e.target.value)) {
+            setisANumber(true);
+            setSelectedTimeValue(Number(e.target.value));
+          } else {
+            setisANumber(false);
+          }
+        },
+        color: isANumber ? 'primary' : 'warning',
+        onBlur: function onBlur() {
+          onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'Enter' || e.key === 'Escape') {
+            onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
+            setOpen(false);
+          }
+        },
+        slotProps: {
+          htmlInput: {
+            maxLength: 4,
+            'aria-label': 'custom-input'
+          }
+        }
+      }), jsx(Box, {
+        sx: {
+          alignContent: 'end'
+        },
+        children: jsxs(Select, {
+          value: selectedTimeResolution,
+          defaultValue: "h",
+          onChange: function onChange(e) {
+            setSelectedTimeResolution(e.target.value);
+            onChangeSliderValue(selectedTimeValue * Number(e.target.value));
+            setOpen(false);
+          },
+          "aria-label": "time-resolution-selector",
+          size: "small",
+          tabIndex: -1,
+          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, {
+    icon: jsx(Clock, {}),
+    marks: translatedMarks,
+    displayCurrentLength: true,
+    title: t('timeslider-time-span'),
+    customFieldHeader: t('timeslider-span'),
+    value: timeSliderSpan,
+    onChangeSliderValue: onChangeSliderValue,
+    allOptionsDisabled: disabled,
+    isAutoSelected: isTimeSpanAuto,
+    isAutoDisabled: !layerHasTimeStep,
+    handleAutoClick: onToggleTimeSpan,
+    disbleUserSetDuration: false,
+    open: open,
+    setOpen: setOpen,
+    customLengthSelector: jsx(TimeSpanButtonCustomSelect, {
+      timeSliderSpan: timeSliderSpan,
+      setOpen: setOpen,
+      onChangeSliderValue: onChangeSliderValue
+    })
+  });
+};
+
+var marks = [{
+  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.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 && onChangeAnimationLength(newLength);
+  };
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    onChangeSliderValue: onChangeSliderValue,
+    icon: jsx(Animation, {
+      "data-testid": "animationLengthButton"
+    }),
+    marks: translatedMarks,
+    title: t('timeslider-animation'),
+    isAutoSelected: isAuto,
+    isAutoDisabled: !layerHasTimeStep,
+    handleAutoClick: toggleAnimationLengthAuto,
+    allOptionsDisabled: disabled,
+    value: animationLength,
+    displayCurrentLength: true,
+    open: open,
+    setOpen: setOpen
+  });
+};
+
+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, {
+        onChangeSliderValue: function onChangeSliderValue() {},
+        onToggleTimeSpan: function onToggleTimeSpan() {},
+        isTimeSpanAuto: false,
+        layerHasTimeStep: false,
+        timeSliderSpan: 0,
+        disabled: false
+      })
+    }), jsx(Grid, {
+      size: {
+        xs: 'auto'
+      },
+      children: animationLengthBtn || jsx(AnimationLengthButton, {
+        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {},
+        onChangeAnimationLength: function onChangeAnimationLength() {}
+      })
+    }), jsx(Grid, {
+      size: {
+        xs: 'auto'
+      },
+      children: timeStepBtn || jsx(TimeStepButton, {
+        onChangeTimeStep: function onChangeTimeStep() {},
+        isTimestepAuto: false
+      })
+    }), jsx(Grid, {
+      size: {
+        xs: 'auto'
+      },
+      children: speedBtn || jsx(SpeedButton, {
+        animationDelay: defaultAnimationDelayAtStart,
+        setMapAnimationDelay: function setMapAnimationDelay() {}
+      })
+    })]
+  });
+};
+
+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, {
+    variant: "tool",
+    tooltipTitle: isAnimating ? t('timeslider-pause') : t('timeslider-play'),
+    onClick: onTogglePlay,
+    disabled: isDisabled,
+    "data-testid": "playButton",
+    isSelected: isAnimating,
+    children: isAnimating ? jsx(Pause, {
+      "data-testid": "pause-svg-path"
+    }) : jsx(Play, {
+      "data-testid": "play-svg-path"
+    })
+  });
+};
+
+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, {
+    variant: "tool",
+    "data-testid": isForwardStep ? 'stepForwardButton' : 'stepBackwardButton',
+    disabled: isDisabled,
+    "aria-label": isForwardStep ? 'forward' : 'backward',
+    onClick: onClickBFButton,
+    tooltipTitle: isForwardStep ? t('timeslider-forward') : t('timeslider-backward'),
+    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, {
+    variant: "tool",
+    "aria-label": "now",
+    tooltipTitle: t('timeslider-now'),
+    "data-testid": "nowButtonTooltip",
+    disabled: disabled,
+    onClick: function onClick() {
+      return onSetNow();
+    },
+    children: jsx(Now, {
+      "data-testid": "now-svg"
+    })
+  });
+};
+
+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, {
+    variant: "tool",
+    isSelected: isAutoUpdating,
+    disabled: disabled,
+    onClick: function onClick() {
+      return toggleAutoUpdate();
+    },
+    "data-testid": "autoUpdateButton",
+    tooltipTitle: isAutoUpdating ? t('timeslider-auto-update-on') : t('timeslider-auto-update-off'),
+    children: isAutoUpdating ? jsx(AutoUpdateActive, {
+      "data-testid": "auto-update-svg-on"
+    }) : jsx(AutoUpdateInActive, {
+      "data-testid": "auto-update-svg-off"
+    })
+  });
+};
+
+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 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, {
+    sx: {
+      zIndex: 3
+    },
+    placement: popperPlacement,
+    open: isPopperOpen,
+    anchorEl: direction === 'row' ? buttonElement == null ? void 0 : buttonElement.parentElement : buttonElement,
+    children: jsx(Paper, {
+      sx: Object.assign({}, margin),
+      elevation: 3,
+      children: jsxs(Grid, {
+        sx: Object.assign({
+          padding: '4px 8px 8px'
+        }, direction === 'column' && {
+          '& button': {
+            width: '100%!important'
+          }
+        }, direction === 'row' && {
+          marginTop: -0.5
+        }),
+        container: true,
+        spacing: 0.5,
+        direction: direction,
+        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);
+    }
+    if (size.width === MIN_WIDTH && hideButton) {
+      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);
+    }
+  }, [buttonElement, isPopperOpenByDefault]);
+  return jsxs(Fragment, {
+    children: [jsx(PopperMenu, {
+      popperPlacement: popperPlacement,
+      isPopperOpen: isPopperOpen,
+      buttonElement: buttonElement,
+      options: options,
+      controls: controls
+    }), jsx(Draggable, {
+      cancel: ".MuiButtonBase-root",
+      nodeRef: clockElement,
+      bounds: "parent",
+      position: position,
+      onStop: function onStop(_event, position) {
+        setPosition(position);
+        setPopperPlacement(getPopperplacement(clockElement.current));
+      },
+      children: jsx("div", {
+        style: {
+          position: 'absolute',
+          zIndex: 1001,
+          top: '10px',
+          right: '10px'
+        },
+        ref: function ref(_ref3) {
+          clockElement.current = _ref3;
+          setPopperPlacement(getPopperplacement(_ref3));
+        },
+        children: jsx(Resizable, {
+          onResizeStart: function onResizeStart(event) {
+            event.stopPropagation();
+          },
+          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);
+          },
+          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));
+          },
+          lockAspectRatio: true,
+          minHeight: MIN_HEIGHT,
+          minWidth: hideButton ? MIN_WIDTH : MIN_WIDTH + BUTTON_WIDTH,
+          size: size,
+          handleComponent: {
+            bottomLeft: jsx(Resize, {
+              isRightAligned: true,
+              style: {
+                fill: '#FFFFFF'
+              }
+            })
+          },
+          enable: resizeHandlePlacement,
+          children: jsx(ClockContainer, {
+            hideButton: hideButton,
+            onButtonClick: function onButtonClick() {
+              if (!isPopperOpen) {
+                setPopperPlacement(getPopperplacement(clockElement.current));
+              }
+              setIsPopperOpen(!isPopperOpen);
+            },
+            isPopperOpen: isPopperOpen,
+            fontSize: fontSize,
+            time: time,
+            setButtonElement: setButtonElement,
+            popperPlacement: popperPlacement
+          })
+        })
+      })
+    })]
+  });
+};
+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 (popperIsOutsideWindowOnLeft && popperIsOutsideWindowOnBottom) {
+      return 'right';
+    }
+    if (popperIsOutsideWindowOnLeft) {
+      return 'bottom';
+    }
+  }
+  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;
+      }
+    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 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
+      }));
+    }
+    return dateUtils.unix(_timeStartOfPassedUnit2);
+  }
+  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 (unit === 'month') {
+    var _timeStartOfPassedUnit4 = dateUtils.startOfMonthUTC(dateUtils.fromUnix(timeUnix));
+    if (roundUp) {
+      return dateUtils.unix(dateUtils.add(_timeStartOfPassedUnit4, {
+        months: 1
+      }));
+    }
+    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);
+    }
+    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);
+};
+
+/* *
+ * 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 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 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 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;
+}
+
+/* *
+ * 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);
+    }),
+    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);
+};
+
+// 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 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 && onStartTimeChange(startTime);
+      }
+    } else if (isDraggingEndAnimation && pixelsBetweenOnLeft) {
+      if (isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth)) {
+        return;
+      }
+      setLocalAnimationEndTime(roundWithTimeStep(mouseTimeUnix, timeStep));
+      if (lastHandledRoundedTime !== endTime) {
+        setLastHandledRoundedTime(endTime);
+        setShowTooltip('animationEnd');
+        onEndTimeChange && 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 && onStartTimeChange(localAnimationStartTime);
+        onEndTimeChange && onEndTimeChange(localAnimationEndTime);
+      }
+      setCursorStyle('auto');
+      setIsDraggingSelectedTime(false);
+      setIsDraggingStartAnimation && setIsDraggingStartAnimation(false);
+      setIsDraggingEndAnimation && 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);
+    };
+  }, [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 && setIsDraggingStartAnimation(true);
+        setShowTooltip('animationStart');
+        return;
+      }
+      if (isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH)) {
+        setCursorStyle('grabbing');
+        setIsDraggingEndAnimation && 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);
+    }
+    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';
+    }
+    if (isDraggingSelectedTime || isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
+      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');
+    }
+  };
+  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, {
+      title: getTooltipText(),
+      open: Boolean(showTooltip),
+      PopperProps: {
+        popperRef: popperRef,
+        anchorEl: {
+          getBoundingClientRect: setTooltipPosition
+        }
+      },
+      children: jsx(Box, {
+        "data-testid": "timeSliderLegend",
+        className: getTimeSliderLegendId(mapId),
+        sx: {
+          height: TIME_SLIDER_LEGEND_HEIGHT + "px",
+          borderRadius: '4.5px',
+          overflow: 'hidden',
+          cursor: cursorStyle
+        },
+        onMouseLeave: function onMouseLeave() {
+          setPointerTime(undefined);
+        },
+        children: jsx(CanvasComponent, {
+          ref: node,
+          onMouseMove: onMouseMove,
+          onWheel: onWheelOverCanvas,
+          onMouseDown: onMouseDown,
+          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);
+          }
+        })
+      })
+    }), isTimeSliderHoverOn && jsx(Box, {
+      "data-testid": "customCanvasMouseOverContainer",
+      sx: {
+        position: 'absolute',
+        top: '-40px',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: TIME_SLIDER_LEGEND_HEIGHT + " + 40px",
+        zIndex: isMouseOverCanvas ? 100 : 0
+      },
+      onMouseOver: function onMouseOver() {
+        return setIsMouseOverCanvas(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsMouseOverCanvas(false);
+      }
+    })]
+  });
+};
+
+var OptionsMenuButton = function OptionsMenuButton(_ref) {
+  var speedBtn = _ref.speedBtn,
+    timeStepBtn = _ref.timeStepBtn,
+    timeSpanBtn = _ref.timeSpanBtn,
+    animationLengthBtn = _ref.animationLengthBtn,
+    _ref$isOpenByDefault = _ref.isOpenByDefault,
+    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
+  var _useState = useState(null),
+    anchorEl = _useState[0],
+    setAnchorEl = _useState[1];
+  var _useState2 = useState(false),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  useEffect(function () {
+    if (anchorEl && isOpenByDefault) {
+      setOpen(true);
+    }
+  }, [anchorEl, isOpenByDefault]);
+  return jsxs("div", {
+    children: [jsx(CustomIconButton, {
+      variant: "tool",
+      onClick: function onClick() {
+        setOpen(!open);
+      },
+      "data-testid": "optionsMenuButton",
+      isSelected: open,
+      "aria-label": "animation options",
+      tooltipProps: {
+        title: t('timeslider-animation-options'),
+        placement: 'bottom'
+      },
+      ref: function ref(_ref2) {
+        setAnchorEl(_ref2);
+      },
+      children: jsx(Options, {})
+    }), jsx(Popper, {
+      sx: {
+        zIndex: 10
+      },
+      placement: "top-start",
+      open: open,
+      "data-testid": "optionsMenuPopOver",
+      anchorEl: anchorEl,
+      children: jsx(Paper, {
+        elevation: 3,
+        sx: {
+          position: 'relative',
+          top: '-2rem'
+        },
+        children: jsx(Grid, {
+          sx: {
+            padding: '10px'
+          },
+          container: true,
+          spacing: 1,
+          children: jsx(OptionsMenu, {
+            timeSpanBtn: timeSpanBtn,
+            timeStepBtn: timeStepBtn,
+            speedBtn: speedBtn,
+            animationLengthBtn: animationLengthBtn
+          })
+        })
+      })
+    })]
+  });
+};
+
+var TimeSliderButtons = function TimeSliderButtons(_ref) {
+  var optionsMenuBtn = _ref.optionsMenuBtn,
+    playBtn = _ref.playBtn,
+    backwardBtn = _ref.backwardBtn,
+    forwardBtn = _ref.forwardBtn,
+    nowBtn = _ref.nowBtn,
+    autoUpdateBtn = _ref.autoUpdateBtn;
+  return jsx("div", {
+    "data-testid": "timeSliderButtons",
+    children: jsxs(Grid, {
+      container: true,
+      spacing: 0.5,
+      sx: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: [jsx(Grid, {
+        children: optionsMenuBtn || jsx(OptionsMenuButton, {})
+      }), jsx(ControlButtons, {
+        backwardBtn: backwardBtn,
+        forwardBtn: forwardBtn,
+        playBtn: playBtn,
+        nowBtn: nowBtn,
+        autoUpdateBtn: autoUpdateBtn
+      })]
+    })
+  });
+};
+
+/* *
+ * 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 onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle) {
+  if (!selectedTime || mouseDownInTimeBox) {
+    return;
+  }
+  var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
+  if (isTimeBoxArea(x, selectedTimePx)) {
+    setCursorStyle('grab');
+  } else {
+    setCursorStyle('auto');
+  }
+};
+var onMouseDown = function onMouseDown(x, width, selectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox) {
+  if (!selectedTime) {
+    return;
+  }
+  var selectedTimePx = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
+  if (isTimeBoxArea(x, selectedTimePx)) {
+    setCursorStyle('grabbing');
+  }
+  setMouseDownInTimeBox(true);
+};
+
+/* *
+ * 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 secondsInYear = 365 * 24 * 3600;
+var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, height, cornerRadius, theme) {
+  ctx.save();
+  ctx.translate(x, y);
+  var playerTimeMarkers = theme.palette.geowebColors.timeSlider.playerTimeMarkers;
+  ctx.beginPath();
+  ctx.strokeStyle = playerTimeMarkers.fill;
+  ctx.fillStyle = playerTimeMarkers.fill;
+  ctx.lineWidth = timeBoxGeom.lineWidth;
+  var halfLineWidth = timeBoxGeom.lineWidth / 2;
+  // Top left corner
+  ctx.moveTo(halfLineWidth, height / 2);
+  ctx.arcTo(halfLineWidth, halfLineWidth, width / 2, halfLineWidth, cornerRadius);
+  // Top right corner
+  ctx.arcTo(width - halfLineWidth, halfLineWidth, width - halfLineWidth, height / 2, cornerRadius);
+  // Bottom right corner
+  ctx.arcTo(width - halfLineWidth, height - halfLineWidth, width / 2, height - halfLineWidth, cornerRadius);
+  // Bottom left corner
+  ctx.arcTo(halfLineWidth, height - halfLineWidth, halfLineWidth, height / 2, cornerRadius);
+  ctx.lineTo(halfLineWidth, height / 2);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+};
+var drawAutoUpdateIcon = function drawAutoUpdateIcon(ctx, x, y, theme, isAutoUpdating) {
+  ctx.save();
+  ctx.translate(x, y);
+  var playerTimeText = theme.palette.geowebColors.timeSlider.playerTimeText;
+  ctx.fillStyle = isAutoUpdating ? '#7BACFF' : '#B4B4B4';
+  var path = new Path2D('M12.385 3.295l5 3-5 3V7.723l-.085.014c-3.08.548-5.418 3.24-5.418 6.479 0 3.634 2.945 6.58 6.577 6.58 2.914 0 5.385-1.896 6.248-4.523l2.815-1.626c-.225 4.814-4.197 8.648-9.063 8.648-5.012 0-9.074-4.065-9.074-9.08 0-4.65 3.495-8.484 8-9.015V3.295z');
+  ctx.translate(7, -8);
+  ctx.rotate(13.295);
+  ctx.fill(path);
+  ctx.restore();
+  var text = 'Auto';
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.fillStyle = isAutoUpdating ? '#7BACFF' : '#B4B4B4'; // ON
+  ctx.font = "7px " + playerTimeText.fontFamily;
+  ctx.fillText(text, 5, 14);
+  ctx.restore();
+};
+var drawTextAnnotation = function drawTextAnnotation(ctx, x, y, text, theme) {
+  var playerTimeText = theme.palette.geowebColors.timeSlider.playerTimeText;
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.fillStyle = playerTimeText.color;
+  ctx.font = playerTimeText.fontSize + "px " + playerTimeText.fontFamily;
+  var textMetrics = ctx.measureText(text);
+  var actualTextWidth = textMetrics.actualBoundingBoxRight - textMetrics.actualBoundingBoxLeft;
+  var actualTextHeight = ctx.measureText('O').width;
+  ctx.fillText(text, -actualTextWidth / 2, actualTextHeight / 2);
+  ctx.restore();
+};
+var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, span, theme, isAutoUpdating) {
+  var smallWidth = timeBoxGeom.smallWidth,
+    largeWidth = timeBoxGeom.largeWidth,
+    height = timeBoxGeom.height,
+    iconWidth = timeBoxGeom.iconWidth,
+    calendarWidth = timeBoxGeom.calendarWidth;
+  var boxWidth = span >= secondsInYear ? largeWidth : smallWidth;
+  var needleX = selectedPx - boxWidth / 2;
+  var needleY = timeBoxGeom.lineWidth;
+  drawRoundedRectangle(ctx, needleX - iconWidth / 2 - calendarWidth / 2, needleY, boxWidth + iconWidth + calendarWidth, height, timeBoxGeom.cornerRadius, theme);
+  var timeFormat = span >= secondsInYear ? "y " + dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH : dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH;
+  var timeText = dateUtils.dateToString(dateUtils.fromUnix(selectedTime), timeFormat) || '';
+  drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth / 2 + calendarWidth / 2, needleY + height / 2, timeText, theme);
+  drawAutoUpdateIcon(ctx, needleX + boxWidth + calendarWidth - iconWidth / 2 - calendarWidth / 2, needleY, theme, isAutoUpdating);
+};
+var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, span, isAutoUpdating) {
+  // map unix timestamps to pixel values
+  var _map = [selected].map(function (t) {
+      return timestampToPixel(t, centerTime, width, secondsPerPx);
+    }),
+    selectedPx = _map[0];
+  ctx.clearRect(0, 0, width, height);
+  drawNewCurrentTimeBox(ctx, selected, selectedPx, span, theme, isAutoUpdating);
+};
+
+var _excluded = ["day", "today", "outsideCurrentMonth"];
+var getTimezoneOffsetS = function getTimezoneOffsetS(value) {
+  return value.getTimezoneOffset() * 60;
+};
+var toLocalTime = function toLocalTime(dateTime) {
+  return dateUtils.fromUnix(dateTime + getTimezoneOffsetS(dateUtils.fromUnix(dateTime)));
+};
+var toUTCTime = function toUTCTime(dateTime) {
+  return dateUtils.unix(dateTime) - getTimezoneOffsetS(dateTime);
+};
+var OpenPicker = function OpenPicker() {
+  return jsx(CalendarToday, {});
+};
+var enabledAndSelectedButtonStyle = {
+  borderWidth: '6px',
+  borderBottomStyle: 'solid',
+  borderRadius: 0,
+  borderColor: 'rgb(170, 210, 240)',
+  backgroundColor: 'rgba(170, 210, 240, 0.3)'
+};
+var enabledButUnSelectedButtonStyle = Object.assign({}, enabledAndSelectedButtonStyle, {
+  backgroundColor: 'transparent'
+});
+var disabledButtonStyle = Object.assign({}, enabledAndSelectedButtonStyle, {
+  borderColor: 'transparent',
+  backgroundColor: 'transparent'
+});
+var AvailableDayByTimeRange = function AvailableDayByTimeRange(props, isDisabledStyle) {
+  var day = props.day,
+    today = props.today,
+    outsideCurrentMonth = props.outsideCurrentMonth,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var _React$useState = React__default.useState({}),
+    calendarDayStyle = _React$useState[0],
+    setCalendarDayStyle = _React$useState[1];
+  React__default.useEffect(function () {
+    if (outsideCurrentMonth || isDisabledStyle) {
+      setCalendarDayStyle(disabledButtonStyle);
+    } else if (today) {
+      setCalendarDayStyle(enabledAndSelectedButtonStyle);
+    } else {
+      setCalendarDayStyle(enabledButUnSelectedButtonStyle);
+    }
+  }, [day, today, outsideCurrentMonth, isDisabledStyle]);
+  return /*#__PURE__*/createElement(PickersDay, Object.assign({}, other, {
+    key: day.toString(),
+    sx: Object.assign({}, calendarDayStyle),
+    outsideCurrentMonth: outsideCurrentMonth,
+    day: day,
+    disableMargin: true,
+    disableHighlightToday: true
+  }));
+};
+var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
+  var value = _ref.value,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? dateUtils.DATE_FORMAT_DATEPICKER : _ref$format,
+    dataStartTime = _ref.dataStartTime,
+    dataEndTime = _ref.dataEndTime,
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var _React$useState2 = React__default.useState(value ? toLocalTime(value) : null),
+    localTimeValue = _React$useState2[0],
+    setLocalTimeValue = _React$useState2[1];
+  var _React$useState3 = React__default.useState(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime),
+    isUndefinedDateRange = _React$useState3[0],
+    setIsUndefinedDateRange = _React$useState3[1];
+  var isDateRangeDisabled = React__default.useCallback(function (date) {
+    if (dataStartTime === undefined || dataEndTime === undefined || dataStartTime > dataEndTime) {
+      return true;
+    }
+    var startOfFirstDay = dateUtils.fromUnix(dataStartTime);
+    startOfFirstDay.setHours(0, 0, 0);
+    var endOfLastDay = dateUtils.fromUnix(dataEndTime);
+    var day = dateUtils.unix(date);
+    return day < dateUtils.unix(startOfFirstDay) || day > dateUtils.unix(endOfLastDay);
+  }, [dataStartTime, dataEndTime]);
+  var _React$useState4 = React__default.useState(isDateRangeDisabled(localTimeValue)),
+    isDisabledRange = _React$useState4[0],
+    setIsDisabledRange = _React$useState4[1];
+  var handleSelect = function handleSelect() {
+    if (localTimeValue) {
+      onSelect(toUTCTime(localTimeValue));
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      handleSelect();
+    } else if (event.key === 'Escape') {
+      onCancel();
+    }
+  };
+  var isDisabledDateWithSomeAvailableData = function isDisabledDateWithSomeAvailableData() {
+    return isUndefinedDateRange ? false : isDisabledRange;
+  };
+  var handleDateChange = function handleDateChange(value) {
+    if (value instanceof Date || value === null || isDisabledDateWithSomeAvailableData()) {
+      setLocalTimeValue(value);
+    }
+  };
+  var AvailableDay = function AvailableDay(props) {
+    return AvailableDayByTimeRange(props, isDateRangeDisabled(props.day));
+  };
+  React__default.useEffect(function () {
+    setIsUndefinedDateRange(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime);
+    setIsDisabledRange(isDateRangeDisabled(localTimeValue));
+  }, [dataStartTime, dataEndTime, localTimeValue, isDateRangeDisabled]);
+  return jsx(Paper, {
+    sx: {
+      borderRadius: '0px',
+      width: '240px'
+    },
+    children: jsxs(Stack, {
+      "data-testid": "markerTimeSelector",
+      children: [jsx(Paper, {
+        sx: {
+          height: '24px',
+          align: 'center',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: '0px'
+        },
+        children: jsx(Paper, {
+          sx: {
+            variant: 'subtitle',
+            textAlign: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            font: {
+              fontWeight: 'medium',
+              fontFamily: 'Roboto',
+              fontSize: '12px'
+            },
+            borderRadius: '0px',
+            boxShadow: 'none'
+          },
+          children: t('timeslider-marker')
+        })
+      }), jsx(LocalizationProvider, {
+        dateAdapter: AdapterDateFns,
+        children: jsx(DateTimePicker, {
+          desktopModeMediaQuery: "@media (min-width: 720px)",
+          label: t('timeslider-marker-label'),
+          ampm: false,
+          value: localTimeValue,
+          format: format,
+          onChange: handleDateChange,
+          closeOnSelect: false,
+          onClose: handleSelect,
+          autoFocus: true,
+          disableIgnoringDatePartForTimeValidation: true,
+          shouldDisableDate: isDisabledDateWithSomeAvailableData,
+          minDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataStartTime),
+          maxDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataEndTime),
+          sx: {
+            marginTop: '8px',
+            marginBottom: '8px',
+            marginLeft: '8px',
+            marginRight: '8px',
+            borderRadius: '0px'
+          },
+          slotProps: {
+            textField: {
+              variant: 'filled',
+              InputProps: {
+                onKeyDownCapture: handleKeyDown,
+                endAdornment: jsx(InputAdornment, {
+                  sx: {
+                    paddingTop: '16px'
+                  },
+                  position: "end",
+                  children: "UTC"
+                })
+              }
+            },
+            field: {
+              openPickerButtonPosition: 'start'
+            },
+            openPickerButton: {
+              size: 'small',
+              sx: {
+                padding: 0
+              }
+            }
+          },
+          slots: {
+            openPickerIcon: OpenPicker,
+            day: AvailableDay
+          },
+          timeSteps: {
+            minutes: 1
+          }
+        })
+      })]
+    })
+  });
+};
+
+var style = {
+  '&.MuiToggleButton-root': {
+    color: '#B4B4B4',
+    '&:hover': {
+      color: '#F8F9F9 !important',
+      backgroundColor: 'rgba(255,255,225, 0.3)'
+    },
+    '&.Mui-selected': {
+      color: '#7BACFF !important',
+      '&:hover': {
+        backgroundColor: 'rgba(255,255,225, 0.3)'
+      }
+    }
+  },
+  width: '26px',
+  height: '24px!important'
+};
+var CalendarButton = function CalendarButton(_ref) {
+  var calendarIconPx = _ref.calendarIconPx,
+    dataStartTime = _ref.dataStartTime,
+    dataEndTime = _ref.dataEndTime,
+    selectedTime = _ref.selectedTime,
+    _ref$onSelect = _ref.onSelect,
+    _onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect;
+  var _React$useState = React__default.useState(null),
+    anchorEl = _React$useState[0],
+    setAnchorEl = _React$useState[1];
+  var _React$useState2 = React__default.useState(false),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(ClickAwayListener, {
+    onClickAway: function onClickAway() {
+      return setOpen(false);
+    },
+    mouseEvent: "onMouseDown",
+    children: jsxs("div", {
+      style: {
+        position: 'absolute',
+        top: '-2px',
+        left: calendarIconPx + "px"
+      },
+      children: [jsx(CustomTooltip, {
+        title: !open && t('timeslider-marker-placement'),
+        TransitionProps: {
+          exit: false
+        },
+        children: jsx(CustomToggleButton, {
+          sx: style,
+          selected: open,
+          variant: "flat",
+          onClick: function onClick() {
+            return setOpen(!open);
+          },
+          ref: function ref(_ref2) {
+            setAnchorEl(_ref2);
+          },
+          children: jsx(CalendarToday, {
+            style: {
+              marginRight: '0px'
+            }
+          })
+        })
+      }), jsx(Popper, {
+        sx: {
+          zIndex: 10
+        },
+        placement: "top-start",
+        open: open,
+        "data-testid": "dateTimePickerPopOver",
+        anchorEl: anchorEl,
+        children: jsx(MarkerTimeSelector, {
+          dataStartTime: dataStartTime,
+          dataEndTime: dataEndTime,
+          value: selectedTime,
+          onSelect: function onSelect(newTime) {
+            setOpen(false);
+            _onSelect(newTime);
+          },
+          onCancel: function onCancel() {
+            return setOpen(false);
+          }
+        })
+      })]
+    })
+  });
+};
+
+var getTimeBoxWidth = function getTimeBoxWidth(span) {
+  var smallWidth = timeBoxGeom.smallWidth,
+    largeWidth = timeBoxGeom.largeWidth,
+    iconWidth = timeBoxGeom.iconWidth,
+    calendarWidth = timeBoxGeom.calendarWidth;
+  var mainWidth = span >= secondsInYear ? largeWidth : smallWidth;
+  return mainWidth + iconWidth + calendarWidth;
+};
+var CALENDAR_ICON_LEFT_SPACING = 1;
+var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
+  var centerTime = _ref.centerTime,
+    _ref$secondsPerPx = _ref.secondsPerPx,
+    secondsPerPx = _ref$secondsPerPx === void 0 ? 50 : _ref$secondsPerPx,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? defaultTimeSpan : _ref$span,
+    timeStep = _ref.timeStep,
+    dataStartTime = _ref.dataStartTime,
+    dataEndTime = _ref.dataEndTime,
+    unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+    isAutoUpdating = _ref.isAutoUpdating,
+    setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
+    onCalendarSelect = _ref.onCalendarSelect,
+    onSetCenterTime = _ref.onSetCenterTime;
+  var timeBoxWidth = getTimeBoxWidth(span);
+  var theme = useTheme();
+  var _useCanvasTarget = useCanvasTarget('mousedown'),
+    node = _useCanvasTarget[1];
+  var _React$useState = React__default.useState('auto'),
+    cursorStyle = _React$useState[0],
+    setCursorStyle = _React$useState[1];
+  var _React$useState2 = React__default.useState(false),
+    mouseDownInTimeBox = _React$useState2[0],
+    setMouseDownInTimeBox = _React$useState2[1];
+  var _React$useState3 = React__default.useState(0),
+    canvasWidth = _React$useState3[0],
+    setCanvasWidth = _React$useState3[1];
+  // Move TimeBox back to view if it goes out of bounds
+  useEffect(function () {
+    if (!(onSetCenterTime && canvasWidth && !mouseDownInTimeBox)) {
+      return;
+    }
+    var receivedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx);
+    var moveWidth = getAutoMoveAreaWidth(getFundamentalScale(secondsPerPx));
+    if (receivedTimePx < moveWidth) {
+      onSetCenterTime(pixelToTimestamp(canvasWidth / 2 - (moveWidth - receivedTimePx), centerTime, canvasWidth, secondsPerPx));
+    } else if (receivedTimePx > canvasWidth - moveWidth) {
+      onSetCenterTime(pixelToTimestamp(canvasWidth / 2 + (receivedTimePx - (canvasWidth - moveWidth)), centerTime, canvasWidth, secondsPerPx));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unfilteredSelectedTime]);
+  var isTimeBoxArea = function isTimeBoxArea(x, selectedTimePx) {
+    return x > selectedTimePx - timeBoxWidth / 2 && x < selectedTimePx + timeBoxWidth / 2;
+  };
+  var mouseDownX = useRef(0);
+  var unfilteredSelectedTimePxAtMouseDown = useRef(0);
+  React__default.useEffect(function () {
+    var handleMouseUp = function handleMouseUp() {
+      mouseDownInTimeBox ? setCursorStyle('grab') : setCursorStyle('auto');
+      setMouseDownInTimeBox(false);
+    };
+    var handleMouseDown = function handleMouseDown(event) {
+      mouseDownX.current = event.clientX;
+      unfilteredSelectedTimePxAtMouseDown.current = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx);
+    };
+    var handleMouseMove = function handleMouseMove(event) {
+      if (mouseDownInTimeBox) {
+        if (mouseDownX.current) {
+          var pixelsMoved = event.clientX - mouseDownX.current;
+          var clickedUnfilteredSelectedTimePx = unfilteredSelectedTimePxAtMouseDown.current + pixelsMoved;
+          var newUnfilteredSelectedTime = pixelToTimestamp(clickedUnfilteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx);
+          setUnfilteredSelectedTime(newUnfilteredSelectedTime);
+        }
+      }
+    };
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mousedown', handleMouseDown);
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [canvasWidth, centerTime, mouseDownInTimeBox, secondsPerPx, setUnfilteredSelectedTime, unfilteredSelectedTime]);
+  var filteredTime = getFilteredTime(unfilteredSelectedTime, timeStep, dataStartTime, dataEndTime);
+  var timePx = timestampToPixel(filteredTime, centerTime, canvasWidth, secondsPerPx);
+  var currentTimeBoxWidth = getTimeBoxWidth(span);
+  var calendarIconPx = timePx - currentTimeBoxWidth / 2 + CALENDAR_ICON_LEFT_SPACING;
+  return jsxs(Box$1, {
+    "data-testid": "timeSliderTimeBox",
+    className: "timeSliderTimeBox",
+    sx: {
+      height: '24px',
+      cursor: cursorStyle
+    },
+    children: [jsx(CanvasComponent, {
+      ref: node,
+      onMouseMove: function onMouseMove$1(x, y, event, width) {
+        if (!unfilteredSelectedTime) {
+          return;
+        }
+        onMouseMove(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle);
+      },
+      onMouseDown: function onMouseDown$1(x, y, width) {
+        if (!unfilteredSelectedTime) {
+          return;
+        }
+        onMouseDown(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox);
+      },
+      onRenderCanvas: function onRenderCanvas(ctx, width, height) {
+        setCanvasWidth(width);
+        var filteredTime = getFilteredTime(unfilteredSelectedTime, timeStep, dataStartTime, dataEndTime);
+        renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, filteredTime, secondsPerPx, span, isAutoUpdating);
+      }
+    }), jsx(CalendarButton, {
+      calendarIconPx: calendarIconPx,
+      dataStartTime: dataStartTime,
+      dataEndTime: dataEndTime,
+      selectedTime: filteredTime,
+      onSelect: function onSelect(newSelectedTime) {
+        if (newSelectedTime) {
+          onCalendarSelect(newSelectedTime);
+          if (onSetCenterTime) {
+            onSetCenterTime(newSelectedTime - filteredTime + centerTime);
+          }
+        }
+      }
+    })]
+  });
+};
+
+var TimesliderI18nProvider = function TimesliderI18nProvider(_ref) {
+  var children = _ref.children;
+  initTimesliderI18n();
+  return jsx(I18nextProvider, {
+    i18n: i18n,
+    children: children
+  });
+};
+var DemoWrapper = function DemoWrapper(_ref2) {
+  var children = _ref2.children,
+    _ref2$theme = _ref2.theme,
+    theme = _ref2$theme === void 0 ? 'light' : _ref2$theme;
+  var themeToApply = theme === 'light' ? lightTheme : darkTheme;
+  return jsx(TimesliderI18nProvider, {
+    children: jsx(ThemeWrapper, {
+      theme: themeToApply,
+      children: children
+    })
+  });
+};
+
+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, setTooltipPosition, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, useCanvasTarget };