@opengeoweb/time-slider 17.0.0 → 17.1.0

package/index.esm.js

@@ -1,3963 +0,0 @@
-import { Grid, useTheme, Box, Typography, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, Stack, InputAdornment, ClickAwayListener } from '@mui/material';
-import React, { useState, useRef, useEffect, createElement } from 'react';
-import { dateUtils, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, renderCounter, CustomToggleButton } from '@opengeoweb/shared';
-import { debounce, throttle } from 'lodash';
-import { ChevronDown, ChevronUp, dragHandlePath, Edit, Animation, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, Clock, FastForward, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
-import i18n from 'i18next';
-import { useTranslation, I18nextProvider } from 'react-i18next';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Box as Box$1 } from '@mui/system';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-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
-};
-
-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 = /*#__PURE__*/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";
-  return Scale;
-}({});
-var AnimationLength = /*#__PURE__*/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";
-  return 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.useRef(null);
-  var _React$useState = React.useState(false),
-    isTargetNode = _React$useState[0],
-    setIsTargetNode = _React$useState[1];
-
-  // Check if pointer event targets current node element
-  var pointerEventListener = React.useCallback(function (event) {
-    setIsTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
-  }, [nodeRef]);
-  React.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 = /*#__PURE__*/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";
-  return 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);
-};
-
-// 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,
-  AnimationLength: AnimationLength,
-  Scale: Scale,
-  TimeInMinutes: 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,
-  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) {
-  // timeStep is in minutes, convert to seconds
-  var timeStepInSeconds = timeStep * 60;
-  var nextTime = currentTime - timeStepInSeconds;
-  // Don't round - just step by the timestep amount from current position
-  var newTime = Math.max(nextTime, dataStartTime || nextTime);
-  var selectedTimeString = dateUtils.fromUnix(newTime).toISOString();
-  onSetNewDate(selectedTimeString);
-};
-var setNextTimeStep = function setNextTimeStep(timeStep, currentTime, dataEndTime, onSetNewDate) {
-  // timeStep is in minutes, convert to seconds
-  var timeStepInSeconds = timeStep * 60;
-  var nextTime = currentTime + timeStepInSeconds;
-  // Don't round - just step by the timestep amount from current position
-  var newTime = Math.min(nextTime, dataEndTime || nextTime);
-  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.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.useEffect(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Home' && mapIsActive) {
-        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, dateUtils.unix(dateUtils.utc()), onSetNewDate, onSetCenterTime);
-      }
-      var isMac = window.navigator.userAgent.includes(' Mac ');
-      var isCorrectModifier = isMac && event.ctrlKey && event.shiftKey || !isMac && event.ctrlKey;
-      if (isCorrectModifier && 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 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);
-};
-
-/* *
- * 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 HideSliderButtonComponent = function HideSliderButtonComponent(_ref) {
-  var isVisible = _ref.isVisible,
-    toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return /*#__PURE__*/jsx(CustomIconButton, {
-    "data-testid": "hideTimeSliderButton",
-    onClick: function onClick() {
-      toggleTimeSliderIsVisible(!isVisible);
-    },
-    tooltipTitle: isVisible ? t('timeslider-hide') : t('timeslider-show'),
-    variant: "tool",
-    children: isVisible ? /*#__PURE__*/jsx(ChevronDown, {}) : /*#__PURE__*/jsx(ChevronUp, {})
-  });
-};
-var HideSliderButton = /*#__PURE__*/React.memo(HideSliderButtonComponent);
-
-/* *
- * 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
-  };
-}
-
-/* *
- * 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 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 ? /*#__PURE__*/jsxs(Grid, {
-    container: true,
-    "data-testid": "timeSlider",
-    sx: {
-      display: 'grid',
-      gridTemplateColumns: '175px 1fr 40px',
-      gridTemplateRows: TIME_SLIDER_LEGEND_HEIGHT,
-      gridTemplateAreas: "\". timebox .\"\n                            \"buttons timelegend toggle\"",
-      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%'
-      }
-    },
-    children: [/*#__PURE__*/jsx(Grid, {
-      sx: {
-        gridArea: 'timebox',
-        zIndex: 99,
-        position: 'relative',
-        overflow: 'hidden'
-      },
-      children: timeBox
-    }), /*#__PURE__*/jsx(Grid, {
-      sx: {
-        gridArea: 'buttons'
-      },
-      children: buttons
-    }), /*#__PURE__*/jsx(Grid, {
-      sx: {
-        gridArea: 'timelegend'
-      },
-      children: legend
-    }), /*#__PURE__*/jsx(Grid, {
-      sx: {
-        gridArea: 'toggle',
-        paddingLeft: 1,
-        lineHeight: 0
-      },
-      children: /*#__PURE__*/jsx(HideSliderButton, {
-        isVisible: isVisible,
-        toggleTimeSliderIsVisible: onToggleTimeSlider
-      })
-    })]
-  }) : /*#__PURE__*/jsx(Grid, {
-    container: true,
-    sx: {
-      paddingRight: 1,
-      alignItems: 'center',
-      justifyContent: 'flex-end'
-    },
-    children: /*#__PURE__*/jsx(HideSliderButton, {
-      isVisible: isVisible,
-      toggleTimeSliderIsVisible: onToggleTimeSlider
-    })
-  });
-};
-
-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 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 drawCurrentTime = function drawCurrentTime(context, theme, width, height, startTime, endTime, currentTime) {
-  var ctx = context;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
-    playerNeedleTime = _theme$palette$geoweb.playerNeedleTime,
-    playerNeedleTimeTop = _theme$palette$geoweb.playerNeedleTimeTop;
-  var current = currentTime;
-  var currentPx = current ? timestampToPixelEdges(current, startTime, endTime, width) : 0;
-  // Draw a high vertical line (needle) indicating the current or selected time
-  ctx.beginPath();
-  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-  ctx.moveTo(Math.floor(currentPx) + 0.5, height - 24);
-  ctx.lineTo(Math.floor(currentPx) + 0.5, height);
-  ctx.lineWidth = 5;
-  ctx.strokeStyle = playerNeedleTime.rgba;
-  ctx.stroke();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = playerNeedleTimeTop.rgba;
-  ctx.stroke();
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var drawNeedle = function drawNeedle(context, theme, width, height, startTime, endTime, selectedTime) {
-  if (!selectedTime) {
-    return;
-  }
-  var ctx = context;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
-    playerNeedlePlayer = _theme$palette$geoweb.playerNeedlePlayer,
-    playerNeedlePlayerTop = _theme$palette$geoweb.playerNeedlePlayerTop,
-    playerTimeMarkers = _theme$palette$geoweb.playerTimeMarkers;
-  var selectedPx = timestampToPixelEdges(selectedTime, startTime, endTime, width);
-
-  // Draw a high vertical line (needle) indicating the current or selected time
-  ctx.beginPath();
-  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-  ctx.moveTo(Math.floor(selectedPx) + 0.5, height - 50);
-  ctx.lineTo(Math.floor(selectedPx) + 0.5, height);
-  ctx.lineWidth = 5;
-  ctx.strokeStyle = playerNeedlePlayer.rgba;
-  ctx.stroke();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = playerNeedlePlayerTop.rgba;
-  ctx.stroke();
-
-  // Triange connecting timebox.
-  ctx.beginPath();
-  ctx.moveTo(Math.floor(selectedPx) + 5, 0);
-  ctx.lineTo(Math.floor(selectedPx) + 0.5, 5);
-  ctx.lineTo(Math.floor(selectedPx) - 5, 0);
-  ctx.closePath();
-  ctx.fillStyle = playerTimeMarkers.fill;
-  ctx.fill();
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, timeSliderSpan, selectedTimeUnix, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
-  var ctx = context;
-  var _map = [0, canvasWidth].map(function (px) {
-      return pixelToTimestamp(px, centerTime, canvasWidth, secondsPerPx);
-    }),
-    visibleTimeStart = _map[0],
-    visibleTimeEnd = _map[1];
-  var _map2 = [animationStartTime, animationEndTime, dataStartTime, dataEndTime, currentTimeUnix].map(function (time) {
-      return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
-    }),
-    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);
-};
-
-/* *
- * 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)
- * */
-
-// 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();
-
-  // Display unfilteredSelectedTime (already snapped to available timestep)
-  var displayTime = unfilteredSelectedTime;
-  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 == null || onStartTimeChange(startTime);
-      }
-    } else if (isDraggingEndAnimation && pixelsBetweenOnLeft) {
-      if (isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth)) {
-        return;
-      }
-      setLocalAnimationEndTime(roundWithTimeStep(mouseTimeUnix, timeStep));
-      if (lastHandledRoundedTime !== endTime) {
-        setLastHandledRoundedTime(endTime);
-        setShowTooltip('animationEnd');
-        onEndTimeChange == null || onEndTimeChange(endTime);
-      }
-    }
-    if (isDraggingAnimationArea) {
-      if (timeBetweenMouseAndStartAndEnd.current === undefined) {
-        // to move the whole animation area we need to calculate the distance
-        // between the mouse position and the start and end position
-
-        var _timeFromMouseToStart = mouseTimeUnix - start;
-        var _timeFromMouseToEnd = end - mouseTimeUnix;
-        timeBetweenMouseAndStartAndEnd.current = {
-          timeFromMouseToEnd: _timeFromMouseToEnd,
-          timeFromMouseToStart: _timeFromMouseToStart
-        };
-        return;
-      }
-      pixelsMovedSinceStartDragging.current += x;
-      var _timeBetweenMouseAndS = timeBetweenMouseAndStartAndEnd.current,
-        timeFromMouseToEnd = _timeBetweenMouseAndS.timeFromMouseToEnd,
-        timeFromMouseToStart = _timeBetweenMouseAndS.timeFromMouseToStart;
-      var newStartTime = mouseTimeUnix - timeFromMouseToStart;
-      var newEndTime = mouseTimeUnix + timeFromMouseToEnd;
-      var roundedNewStartTime = roundWithTimeStep(newStartTime, timeStep);
-      var roundedNewEndTime = roundWithTimeStep(newEndTime, timeStep);
-      setLocalAnimationStartTime(roundedNewStartTime);
-      setLocalAnimationEndTime(roundedNewEndTime);
-    }
-  }, [canvasWidth, centerTime, end, isDraggingAnimationArea, isDraggingEndAnimation, isDraggingStartAnimation, lastHandledRoundedTime, localAnimationEndTime, localAnimationStartTime, mapId, onEndTimeChange, onStartTimeChange, secondsPerPx, start, timeStep, xOffset]);
-  useEffect(function () {
-    var handleMouseUp = function handleMouseUp() {
-      pixelsMovedSinceStartDragging.current = 0;
-      timeBetweenMouseAndStartAndEnd.current = undefined;
-    };
-    document.addEventListener('mouseup', handleMouseUp);
-    return function () {
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, []);
-  useEffect(function () {
-    var startTimestamp = convertStringTimeToUnix(reduxAnimationStartTime);
-    var endTimestamp = convertStringTimeToUnix(reduxAnimationEndTime);
-    setLocalAnimationStartTime(startTimestamp);
-    setLocalAnimationEndTime(endTimestamp);
-  }, [reduxAnimationStartTime, reduxAnimationEndTime, setLocalAnimationStartTime, setLocalAnimationEndTime]);
-  useEffect(function () {
-    var stoppedDragging = !isDraggingStartAnimation && !isDraggingEndAnimation && !isDraggingAnimationArea;
-    if (stoppedDragging && isAnimationTimeModifiedSetRef.current) {
-      if (start && start !== localAnimationStartTime) {
-        onSetAnimationStartTime(dateUtils.fromUnix(start).toISOString());
-      }
-      if (end && end !== localAnimationEndTime) {
-        onSetAnimationEndTime(dateUtils.fromUnix(end).toISOString());
-      }
-      isAnimationTimeModifiedSetRef.current = false;
-    }
-  }, [isDraggingStartAnimation, isDraggingEndAnimation, isDraggingAnimationArea, isAnimationTimeModifiedSetRef, localAnimationStartTime, localAnimationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, start, end]);
-  useEffect(function () {
-    var handleMouseUp = function handleMouseUp() {
-      if (isDraggingAnimationArea) {
-        onStartTimeChange == null || onStartTimeChange(localAnimationStartTime);
-        onEndTimeChange == null || onEndTimeChange(localAnimationEndTime);
-      }
-      setCursorStyle('auto');
-      setIsDraggingSelectedTime(false);
-      setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(false);
-      setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(false);
-      setIsDraggingLegend(false);
-      setShowTooltip(undefined);
-      setIsDraggingAnimationArea(false);
-      startDraggingPosition.current = 0;
-      if (isAnimationTimeModifiedSetRef.current) {
-        isAnimationTimeModifiedSetRef.current = false;
-      }
-    };
-    document.addEventListener('mouseup', handleMouseUp);
-    return function () {
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [setIsDraggingStartAnimation, setIsDraggingEndAnimation, localAnimationStartTime, localAnimationEndTime, onStartTimeChange, onEndTimeChange, isDraggingAnimationArea]);
-  useEffect(function () {
-    var handleMouseActions = function handleMouseActions(event) {
-      if (event.movementX === 0) {
-        return;
-      }
-      if (isDraggingLegend) {
-        var dragDistanceTime = event.movementX * secondsPerPx;
-        var newCenterTime = centerTime - dragDistanceTime;
-        onSetCenterTime(newCenterTime);
-      } else if (isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
-        handleAnimationDragging(event.movementX, event.clientX);
-      } else if (isDraggingSelectedTime) {
-        moveSelectedTimePx(event.movementX, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
-      }
-      if (isMouseOverCanvas && isTimeSliderHoverOn) {
-        moveSelectedTimePx(event.movementX, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
-      }
-    };
-    var handleMouseMove = function handleMouseMove(event) {
-      handleMouseActions(event);
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    return function () {
-      document.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [isDraggingLegend, isDraggingStartAnimation, isDraggingEndAnimation, isDraggingAnimationArea, isDraggingSelectedTime, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime, onSetCenterTime, isTimeSliderHoverOn, isMouseOverCanvas, handleAnimationDragging]);
-  useEffect(function () {
-    if (!showTooltip && pointerTime) {
-      if (showPointerTimeTooltip) {
-        setShowTooltip('mousePointer');
-      } else {
-        debouncedSetShowPointerTimeTooltip(true);
-      }
-    } else if (showTooltip === 'mousePointer' && !pointerTime) {
-      setShowTooltip(undefined);
-      debouncedSetShowPointerTimeTooltip(false);
-      debouncedSetShowPointerTimeTooltip.flush();
-    } else if (showTooltip !== 'mousePointer') {
-      debouncedSetShowPointerTimeTooltip(false);
-      debouncedSetShowPointerTimeTooltip.flush();
-    }
-  }, [debouncedSetShowPointerTimeTooltip, pointerTime, showPointerTimeTooltip, showTooltip]);
-  var onMouseDown = function onMouseDown(x, y, width) {
-    isClickOrDrag.current = 'click';
-    startDraggingPosition.current = x;
-    var _getPositions = getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, start, end),
-      startAnimationPosition = _getPositions.startAnimationPosition,
-      endAnimationPosition = _getPositions.endAnimationPosition,
-      selectedTimePosition = _getPositions.selectedTimePosition;
-
-    // start dragging selected time.
-    if (isSelectedTimeIconArea(x, selectedTimePosition, DRAG_AREA_WIDTH)) {
-      setCursorStyle('grabbing');
-      setIsDraggingSelectedTime(true);
-      return;
-    }
-    if (reduxAnimationStartTime && reduxAnimationEndTime) {
-      var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
-      tooltipPosition.current = pixelsBetweenOnLeft ? x + pixelsBetweenOnLeft : x;
-
-      // start dragging either marker
-      if (isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH)) {
-        setCursorStyle('grabbing');
-        setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(true);
-        setShowTooltip('animationStart');
-        return;
-      }
-      if (isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH)) {
-        setCursorStyle('grabbing');
-        setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(true);
-        setShowTooltip('animationEnd');
-        return;
-      }
-      if (isInsideAnimationArea(x, startAnimationPosition, endAnimationPosition)) {
-        setCursorStyle('grabbing');
-        setIsDraggingAnimationArea(true);
-        return;
-      }
-    }
-    // clicking the timeslider
-    setIsDraggingLegend(true);
-  };
-  var onMouseUp = function onMouseUp(x) {
-    if (isClickOrDrag.current === 'click') {
-      var unfilteredSelectedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx);
-      moveSelectedTimePx(x - unfilteredSelectedTimePx, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
-    }
-    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 /*#__PURE__*/jsxs(Box, {
-    sx: {
-      position: 'relative',
-      height: TIME_SLIDER_LEGEND_HEIGHT + "px"
-    },
-    children: [/*#__PURE__*/jsx(CustomTooltip, {
-      open: Boolean(showTooltip),
-      slotProps: {
-        popper: {
-          popperRef: popperRef,
-          anchorEl: {
-            getBoundingClientRect: setTooltipPosition
-          }
-        }
-      },
-      title: getTooltipText(),
-      children: /*#__PURE__*/jsx(Box, {
-        className: getTimeSliderLegendId(mapId),
-        "data-testid": "timeSliderLegend",
-        onMouseLeave: function onMouseLeave() {
-          setPointerTime(undefined);
-        },
-        sx: {
-          height: TIME_SLIDER_LEGEND_HEIGHT + "px",
-          borderRadius: '4.5px',
-          overflow: 'hidden',
-          cursor: cursorStyle
-        },
-        children: /*#__PURE__*/jsx(CanvasComponent, {
-          onMouseDown: onMouseDown,
-          onMouseMove: onMouseMove,
-          onMouseUp: onMouseUp,
-          onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-            updateCanvasWidth(canvasWidth, width);
-            drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, timeSliderSpan, displayTime, currentTime, start, end, dataStartTime, dataEndTime);
-          },
-          onWheel: onWheelOverCanvas,
-          ref: node
-        })
-      })
-    }), !!isTimeSliderHoverOn && /*#__PURE__*/jsx(Box, {
-      "data-testid": "customCanvasMouseOverContainer",
-      onMouseLeave: function onMouseLeave() {
-        return setIsMouseOverCanvas(false);
-      },
-      onMouseOver: function onMouseOver() {
-        return setIsMouseOverCanvas(true);
-      },
-      sx: {
-        position: 'absolute',
-        top: '-40px',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: TIME_SLIDER_LEGEND_HEIGHT + " + 40px",
-        zIndex: isMouseOverCanvas ? 100 : 0
-      }
-    })]
-  });
-};
-
-/* *
- * 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 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 /*#__PURE__*/jsxs(Box, {
-    onKeyDown: function onKeyDown(event) {
-      event.stopPropagation();
-    },
-    children: [/*#__PURE__*/jsxs(CustomIconButton, {
-      isSelected: true,
-      onClick: function onClick() {
-        setOpen(true);
-      },
-      onWheel: onWheel,
-      ref: setAnchorRef,
-      sx: {
-        padding: '0px',
-        paddingRight: '12px',
-        width: '100%!important',
-        minWidth: '64px',
-        justifyContent: 'space-between'
-      },
-      tooltipTitle: title,
-      variant: "tool",
-      children: [icon, /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: 12,
-          fontWeight: 400,
-          textTransform: 'none'
-        },
-        children: buttonText(value, displayCurrentLength, currentMark)
-      })]
-    }), !!anchorRef && /*#__PURE__*/jsxs(Menu, {
-      anchorEl: anchorRef,
-      anchorOrigin: {
-        vertical: -15,
-        horizontal: 'center'
-      },
-      onClose: function onClose() {
-        return setOpen(false);
-      },
-      open: open,
-      slotProps: {
-        backdrop: {
-          sx: {
-            backgroundColor: 'transparent'
-          }
-        }
-      },
-      transformOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      },
-      children: [/*#__PURE__*/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 /*#__PURE__*/jsx(MenuItem, {
-          disabled: allOptionsDisabled,
-          onClick: function onClick() {
-            if (!isSelected) {
-              onChangeSliderValue(mark.value);
-            }
-            setOpen(false);
-          },
-          selected: !!isSelected && !displayLengthInputField,
-          children: mark.label || mark.text
-        }, mark.value);
-      }), !!handleAutoClick && /*#__PURE__*/jsx(MenuItem, {
-        disabled: allOptionsDisabled || isAutoDisabled,
-        onClick: function onClick() {
-          handleAutoClick();
-          setOpen(false);
-        },
-        selected: isAutoSelected,
-        children: t('timeslider-auto')
-      }), !!displayCurrentLength && /*#__PURE__*/jsxs(MenuItem, {
-        disabled: disbleUserSetDuration,
-        onClick: function onClick() {
-          return setDisplayLengthInputField(true);
-        },
-        sx: {
-          maxWidth: '175px'
-        },
-        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && /*#__PURE__*/jsxs(Box, {
-          sx: {
-            flexDirection: 'column',
-            display: 'flex',
-            flexGrow: 1
-          },
-          children: [/*#__PURE__*/jsx(CardHeader, {
-            slotProps: {
-              title: {
-                fontSize: 12
-              }
-            },
-            sx: {
-              height: 2,
-              padding: 0,
-              color: 'geowebColors.greys.accessible'
-            },
-            title: t(customFieldHeader)
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: {
-              flexDirection: 'row',
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexGrow: 1,
-              paddingTop: 0.5
-            },
-            children: [/*#__PURE__*/jsx(Typography, {
-              sx: {
-                fontSize: 14,
-                textTransform: 'none',
-                lineHeight: 2
-              },
-              children: minutesToDescribedDuration(value)
-            }), /*#__PURE__*/jsx(CustomTooltip, {
-              title: t('timeslider-edit'),
-              children: /*#__PURE__*/jsx("span", {
-                children: /*#__PURE__*/jsx(CustomIconButton, {
-                  "aria-label": "edit animation option",
-                  "data-testid": "editAnimationOption",
-                  children: /*#__PURE__*/jsx(Edit, {})
-                })
-              })
-            })]
-          })]
-        })]
-      })]
-    })]
-  });
-};
-
-/* *
- * 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 marks$2 = [{
-  value: AnimationLength.Minutes15,
-  text: 'timeslider-min',
-  count: 15
-}, {
-  value: AnimationLength.Minutes30,
-  text: 'timeslider-min',
-  count: 30
-}, {
-  value: AnimationLength.Hours1,
-  text: 'timeslider-hour',
-  count: 1
-}, {
-  value: AnimationLength.Hours2,
-  text: 'timeslider-hour',
-  count: 2
-}, {
-  value: AnimationLength.Hours3,
-  text: 'timeslider-hour',
-  count: 3
-}, {
-  value: AnimationLength.Hours6,
-  text: 'timeslider-hour',
-  count: 6
-}, {
-  value: AnimationLength.Hours12,
-  text: 'timeslider-hour',
-  count: 12
-}, {
-  value: AnimationLength.Hours24,
-  text: 'timeslider-hour',
-  count: 24
-}].sort(function (ta, tb) {
-  return tb.value - ta.value;
-});
-var AnimationLengthButton = function AnimationLengthButton(_ref) {
-  var _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$animationLength = _ref.animationLength,
-    animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
-    _ref$isAuto = _ref.isAuto,
-    isAuto = _ref$isAuto === void 0 ? false : _ref$isAuto,
-    layerHasTimeStep = _ref.layerHasTimeStep,
-    onChangeAnimationLength = _ref.onChangeAnimationLength,
-    toggleAnimationLengthAuto = _ref.toggleAnimationLengthAuto;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var translatedMarks = marks$2.map(function (mark) {
-    return Object.assign({}, mark, {
-      label: mark.count + " " + t(mark.text)
-    });
-  });
-  var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
-    var newLength = newSliderValue ? Math.round(newSliderValue) : 0;
-    onChangeAnimationLength == null || onChangeAnimationLength(newLength);
-  };
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return /*#__PURE__*/jsx(TimeSliderMenu, {
-    allOptionsDisabled: disabled,
-    displayCurrentLength: true,
-    handleAutoClick: toggleAnimationLengthAuto,
-    icon: /*#__PURE__*/jsx(Animation, {
-      "data-testid": "animationLengthButton"
-    }),
-    isAutoDisabled: !layerHasTimeStep,
-    isAutoSelected: isAuto,
-    marks: translatedMarks,
-    onChangeSliderValue: onChangeSliderValue,
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-animation'),
-    value: animationLength
-  });
-};
-
-/* *
- * 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 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 /*#__PURE__*/jsx(CustomIconButton, {
-    "data-testid": "autoUpdateButton",
-    disabled: disabled,
-    isSelected: isAutoUpdating,
-    onClick: function onClick() {
-      return toggleAutoUpdate();
-    },
-    tooltipTitle: isAutoUpdating ? t('timeslider-auto-update-on') : t('timeslider-auto-update-off'),
-    variant: "tool",
-    children: isAutoUpdating ? /*#__PURE__*/jsx(AutoUpdateActive, {
-      "data-testid": "auto-update-svg-on"
-    }) : /*#__PURE__*/jsx(AutoUpdateInActive, {
-      "data-testid": "auto-update-svg-off"
-    })
-  });
-};
-
-/* *
- * 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 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 /*#__PURE__*/jsx(CustomIconButton, {
-    "aria-label": isForwardStep ? 'forward' : 'backward',
-    "data-testid": isForwardStep ? 'stepForwardButton' : 'stepBackwardButton',
-    disabled: isDisabled,
-    onClick: onClickBFButton,
-    tooltipTitle: isForwardStep ? t('timeslider-forward') : t('timeslider-backward'),
-    variant: "tool",
-    children: isForwardStep ? /*#__PURE__*/jsx(StepForward, {
-      "data-testid": "step-forward-svg-path"
-    }) : /*#__PURE__*/jsx(StepBackward, {
-      "data-testid": "step-backward-svg-path"
-    })
-  });
-};
-
-/* *
- * 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 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 /*#__PURE__*/jsx(CustomIconButton, {
-    "aria-label": "now",
-    "data-testid": "nowButtonTooltip",
-    disabled: disabled,
-    onClick: function onClick() {
-      return onSetNow();
-    },
-    tooltipTitle: t('timeslider-now'),
-    variant: "tool",
-    children: /*#__PURE__*/jsx(Now, {
-      "data-testid": "now-svg"
-    })
-  });
-};
-
-/* *
- * 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 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 /*#__PURE__*/jsx(CustomIconButton, {
-    "data-testid": "playButton",
-    disabled: isDisabled,
-    isSelected: isAnimating,
-    onClick: onTogglePlay,
-    tooltipTitle: isAnimating ? t('timeslider-pause') : t('timeslider-play'),
-    variant: "tool",
-    children: isAnimating ? /*#__PURE__*/jsx(Pause, {
-      "data-testid": "pause-svg-path"
-    }) : /*#__PURE__*/jsx(Play, {
-      "data-testid": "play-svg-path"
-    })
-  });
-};
-
-/* *
- * 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 ControlButtons = function ControlButtons(_ref) {
-  var backwardBtn = _ref.backwardBtn,
-    forwardBtn = _ref.forwardBtn,
-    playBtn = _ref.playBtn,
-    nowBtn = _ref.nowBtn,
-    autoUpdateBtn = _ref.autoUpdateBtn;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Grid, {
-      children: backwardBtn || /*#__PURE__*/jsx(BackwardForwardStepButton, {
-        isForwardStep: false
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      children: forwardBtn || /*#__PURE__*/jsx(BackwardForwardStepButton, {
-        isForwardStep: true
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      children: playBtn || /*#__PURE__*/jsx(PlayButton, {})
-    }), /*#__PURE__*/jsx(Grid, {
-      children: nowBtn || /*#__PURE__*/jsx(NowButton, {})
-    }), /*#__PURE__*/jsx(Grid, {
-      children: autoUpdateBtn || /*#__PURE__*/jsx(AutoUpdateButton, {})
-    })]
-  });
-};
-
-/* *
- * 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 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 /*#__PURE__*/jsx(TimeSliderMenu, {
-    icon: /*#__PURE__*/jsx(Speed, {}),
-    marks: marks,
-    onChangeSliderValue: function onChangeSliderValue(markValue) {
-      setMapAnimationDelay(markValue);
-    },
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-speed'),
-    value: animationDelay
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
-  var timeSliderSpan = _ref.timeSliderSpan,
-    setOpen = _ref.setOpen,
-    onChangeSliderValue = _ref.onChangeSliderValue;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var _React$useState = React.useState(timeSliderSpan / getLargestTimeUnit(timeSliderSpan)),
-    selectedTimeValue = _React$useState[0],
-    setSelectedTimeValue = _React$useState[1];
-  var _React$useState2 = React.useState(getLargestTimeUnit(timeSliderSpan).toString()),
-    selectedTimeResolution = _React$useState2[0],
-    setSelectedTimeResolution = _React$useState2[1];
-  var _React$useState3 = React.useState(true),
-    isANumber = _React$useState3[0],
-    setIsANumber = _React$useState3[1];
-  return /*#__PURE__*/jsx(Box, {
-    children: /*#__PURE__*/jsxs(FormControl, {
-      onKeyDown: function onKeyDown(event) {
-        event.stopPropagation();
-      },
-      size: "small",
-      sx: {
-        flexDirection: 'row',
-        display: 'flex'
-      },
-      variant: "standard",
-      children: [/*#__PURE__*/jsx(TextField, {
-        autoFocus: true,
-        color: isANumber ? 'primary' : 'warning',
-        label: t('timeslider-span'),
-        onBlur: function onBlur() {
-          onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
-        },
-        onChange: function onChange(e) {
-          if (!isNaN(+e.target.value)) {
-            setIsANumber(true);
-            setSelectedTimeValue(Number(e.target.value));
-          } else {
-            setIsANumber(false);
-          }
-        },
-        onKeyDown: function onKeyDown(e) {
-          if (e.key === 'Enter' || e.key === 'Escape') {
-            onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
-            setOpen(false);
-          }
-        },
-        size: "small",
-        slotProps: {
-          htmlInput: {
-            maxLength: 4,
-            'aria-label': 'custom-input'
-          }
-        },
-        value: Math.round(selectedTimeValue * 100) / 100,
-        variant: "standard"
-      }), /*#__PURE__*/jsx(Box, {
-        sx: {
-          alignContent: 'end'
-        },
-        children: /*#__PURE__*/jsxs(Select, {
-          "aria-label": "time-resolution-selector",
-          defaultValue: "h",
-          onChange: function onChange(e) {
-            setSelectedTimeResolution(e.target.value);
-            onChangeSliderValue(selectedTimeValue * Number(e.target.value));
-            setOpen(false);
-          },
-          size: "small",
-          tabIndex: -1,
-          value: selectedTimeResolution,
-          children: [/*#__PURE__*/jsx(MenuItem, {
-            value: TimeInMinutes.YEAR,
-            children: t('years')
-          }), /*#__PURE__*/jsx(MenuItem, {
-            value: TimeInMinutes.MONTH,
-            children: t('months')
-          }), /*#__PURE__*/jsx(MenuItem, {
-            value: TimeInMinutes.WEEK,
-            children: t('weeks')
-          }), /*#__PURE__*/jsx(MenuItem, {
-            value: TimeInMinutes.DAY,
-            children: t('days')
-          }), /*#__PURE__*/jsx(MenuItem, {
-            value: TimeInMinutes.HOUR,
-            children: t('hours')
-          }), /*#__PURE__*/jsx(MenuItem, {
-            value: TimeInMinutes.MINUTE,
-            children: t('minutes')
-          })]
-        })
-      })]
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var 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 /*#__PURE__*/jsx(TimeSliderMenu, {
-    allOptionsDisabled: disabled,
-    customFieldHeader: t('timeslider-span'),
-    customLengthSelector: /*#__PURE__*/jsx(TimeSpanButtonCustomSelect, {
-      onChangeSliderValue: onChangeSliderValue,
-      setOpen: setOpen,
-      timeSliderSpan: timeSliderSpan
-    }),
-    disbleUserSetDuration: false,
-    displayCurrentLength: true,
-    handleAutoClick: onToggleTimeSpan,
-    icon: /*#__PURE__*/jsx(Clock, {}),
-    isAutoDisabled: !layerHasTimeStep,
-    isAutoSelected: isTimeSpanAuto,
-    marks: translatedMarks,
-    onChangeSliderValue: onChangeSliderValue,
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-time-span'),
-    value: timeSliderSpan
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var marks = [{
-  value: 1,
-  text: 'timeslider-min',
-  count: 1
-}, {
-  value: 2,
-  text: 'timeslider-min',
-  count: 2
-}, {
-  value: 5,
-  text: 'timeslider-min',
-  count: 5
-}, {
-  value: 10,
-  text: 'timeslider-min',
-  count: 10
-}, {
-  value: 15,
-  text: 'timeslider-min',
-  count: 15
-}, {
-  value: 30,
-  text: 'timeslider-min',
-  count: 30
-}, {
-  value: 60,
-  text: 'timeslider-hour',
-  count: 1
-}, {
-  value: 120,
-  text: 'timeslider-hour',
-  count: 2
-}, {
-  value: 180,
-  text: 'timeslider-hour',
-  count: 3
-}, {
-  value: 360,
-  text: 'timeslider-hour',
-  count: 6
-}, {
-  value: 720,
-  text: 'timeslider-hour',
-  count: 12
-}, {
-  value: 1440,
-  text: 'timeslider-hour',
-  count: 24
-}, {
-  value: 2880,
-  text: 'timeslider-hour',
-  count: 48
-}, {
-  value: 4320,
-  text: 'timeslider-hour',
-  count: 72
-}, {
-  value: 10080,
-  text: 'timeslider-week',
-  count: 1
-}, {
-  value: 20160,
-  text: 'timeslider-weeks',
-  count: 2
-}, {
-  value: 43200,
-  text: 'timeslider-month',
-  count: 1
-}, {
-  value: 87600,
-  text: 'timeslider-months',
-  count: 2
-}, {
-  value: 262800,
-  text: 'timeslider-months',
-  count: 6
-}, {
-  value: 525600,
-  text: 'timeslider-year',
-  count: 1
-}, {
-  value: 5256000,
-  text: 'timeslider-years',
-  count: 10
-}].sort(function (ta, tb) {
-  return tb.value - ta.value;
-});
-var TimeStepButton = function TimeStepButton(_ref) {
-  var _ref$timeStep = _ref.timeStep,
-    timeStep = _ref$timeStep === void 0 ? marks[0].value : _ref$timeStep,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$isTimestepAuto = _ref.isTimestepAuto,
-    isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
-    onChangeTimeStep = _ref.onChangeTimeStep,
-    _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
-    onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
-    _ref$isOpenByDefault = _ref.isOpenByDefault,
-    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
-    timeStepFromLayer = _ref.timeStepFromLayer;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var translatedMarks = marks.map(function (mark) {
-    return Object.assign({}, mark, {
-      label: mark.count + " " + t(mark.text)
-    });
-  });
-  var onMenuItemClick = function onMenuItemClick(markValue) {
-    if (isTimestepAuto) {
-      onToggleTimestepAuto();
-    }
-    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 /*#__PURE__*/jsx(TimeSliderMenu, {
-    allOptionsDisabled: disabled,
-    displayCurrentLength: true,
-    handleAutoClick: handleToggleTimeStep,
-    icon: /*#__PURE__*/jsx(FastForward, {
-      "data-testid": "timeStepButton"
-    }),
-    isAutoDisabled: !layerHasTimeStep,
-    isAutoSelected: isTimestepAuto,
-    marks: translatedMarks,
-    onChangeSliderValue: onMenuItemClick,
-    open: open,
-    setOpen: setOpen,
-    title: t('timeslider-time-step'),
-    value: timeStep || translatedMarks[0].value
-  });
-};
-
-/* *
- * 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 OptionsMenu = function OptionsMenu(_ref) {
-  var speedBtn = _ref.speedBtn,
-    timeSpanBtn = _ref.timeSpanBtn,
-    timeStepBtn = _ref.timeStepBtn,
-    animationLengthBtn = _ref.animationLengthBtn;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: timeSpanBtn || /*#__PURE__*/jsx(TimeSpanButton, {
-        disabled: false,
-        isTimeSpanAuto: false,
-        layerHasTimeStep: false,
-        onChangeSliderValue: function onChangeSliderValue() {},
-        onToggleTimeSpan: function onToggleTimeSpan() {},
-        timeSliderSpan: 0
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: animationLengthBtn || /*#__PURE__*/jsx(AnimationLengthButton, {
-        onChangeAnimationLength: function onChangeAnimationLength() {},
-        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: timeStepBtn || /*#__PURE__*/jsx(TimeStepButton, {
-        isTimestepAuto: false,
-        onChangeTimeStep: function onChangeTimeStep() {}
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: speedBtn || /*#__PURE__*/jsx(SpeedButton, {
-        animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {}
-      })
-    })]
-  });
-};
-
-/* *
- * 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 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 /*#__PURE__*/jsxs("div", {
-    children: [/*#__PURE__*/jsx(CustomIconButton, {
-      "aria-label": "animation options",
-      "data-testid": "optionsMenuButton",
-      isSelected: open,
-      onClick: function onClick() {
-        setOpen(!open);
-      },
-      ref: function ref(_ref2) {
-        setAnchorEl(_ref2);
-      },
-      tooltipProps: {
-        title: t('timeslider-animation-options'),
-        placement: 'bottom'
-      },
-      variant: "tool",
-      children: /*#__PURE__*/jsx(Options, {})
-    }), /*#__PURE__*/jsx(Popper, {
-      anchorEl: anchorEl,
-      "data-testid": "optionsMenuPopOver",
-      open: open,
-      placement: "top-start",
-      sx: {
-        zIndex: 10
-      },
-      children: /*#__PURE__*/jsx(Paper, {
-        elevation: 3,
-        sx: {
-          position: 'relative',
-          top: '-2rem'
-        },
-        children: /*#__PURE__*/jsx(Grid, {
-          container: true,
-          spacing: 1,
-          sx: {
-            padding: '10px'
-          },
-          children: /*#__PURE__*/jsx(OptionsMenu, {
-            animationLengthBtn: animationLengthBtn,
-            speedBtn: speedBtn,
-            timeSpanBtn: timeSpanBtn,
-            timeStepBtn: timeStepBtn
-          })
-        })
-      })
-    })]
-  });
-};
-
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-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 /*#__PURE__*/jsx(Box, {
-    "data-testid": "timeSliderButtons",
-    sx: {
-      height: 24
-    },
-    children: /*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: 0.5,
-      sx: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      children: [/*#__PURE__*/jsx(Grid, {
-        children: optionsMenuBtn || /*#__PURE__*/jsx(OptionsMenuButton, {})
-      }), /*#__PURE__*/jsx(ControlButtons, {
-        autoUpdateBtn: autoUpdateBtn,
-        backwardBtn: backwardBtn,
-        forwardBtn: forwardBtn,
-        nowBtn: nowBtn,
-        playBtn: playBtn
-      })]
-    })
-  });
-};
-
-/* *
- * 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 /*#__PURE__*/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.useState({}),
-    calendarDayStyle = _React$useState[0],
-    setCalendarDayStyle = _React$useState[1];
-  React.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, {
-    day: day,
-    disableHighlightToday: true,
-    disableMargin: true,
-    key: day.toString(),
-    outsideCurrentMonth: outsideCurrentMonth,
-    sx: Object.assign({}, calendarDayStyle)
-  }));
-};
-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.useState(value ? toLocalTime(value) : null),
-    localTimeValue = _React$useState2[0],
-    setLocalTimeValue = _React$useState2[1];
-  var _React$useState3 = React.useState(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime),
-    isUndefinedDateRange = _React$useState3[0],
-    setIsUndefinedDateRange = _React$useState3[1];
-  var isDateRangeDisabled = React.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.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.useEffect(function () {
-    setIsUndefinedDateRange(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime);
-    setIsDisabledRange(isDateRangeDisabled(localTimeValue));
-  }, [dataStartTime, dataEndTime, localTimeValue, isDateRangeDisabled]);
-  return /*#__PURE__*/jsx(Paper, {
-    sx: {
-      borderRadius: '0px',
-      width: '240px'
-    },
-    children: /*#__PURE__*/jsxs(Stack, {
-      "data-testid": "markerTimeSelector",
-      children: [/*#__PURE__*/jsx(Paper, {
-        sx: {
-          height: '24px',
-          align: 'center',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderRadius: '0px'
-        },
-        children: /*#__PURE__*/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')
-        })
-      }), /*#__PURE__*/jsx(LocalizationProvider, {
-        dateAdapter: AdapterDateFns,
-        children: /*#__PURE__*/jsx(DateTimePicker, {
-          ampm: false,
-          autoFocus: true,
-          closeOnSelect: false,
-          desktopModeMediaQuery: "@media (min-width: 720px)",
-          disableIgnoringDatePartForTimeValidation: true,
-          format: format,
-          label: t('timeslider-marker-label'),
-          maxDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataEndTime),
-          minDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataStartTime),
-          onChange: handleDateChange,
-          onClose: handleSelect,
-          shouldDisableDate: isDisabledDateWithSomeAvailableData,
-          slotProps: {
-            textField: {
-              variant: 'filled',
-              InputProps: {
-                onKeyDownCapture: handleKeyDown,
-                endAdornment: /*#__PURE__*/jsx(InputAdornment, {
-                  position: "end",
-                  sx: {
-                    paddingTop: '16px'
-                  },
-                  children: "UTC"
-                })
-              }
-            },
-            field: {
-              openPickerButtonPosition: 'start'
-            },
-            openPickerButton: {
-              size: 'small',
-              sx: {
-                padding: 0
-              }
-            }
-          },
-          slots: {
-            openPickerIcon: OpenPicker,
-            day: AvailableDay
-          },
-          sx: {
-            marginTop: '8px',
-            marginBottom: '8px',
-            marginLeft: '8px',
-            marginRight: '8px',
-            borderRadius: '0px'
-          },
-          timeSteps: {
-            minutes: 1
-          },
-          value: localTimeValue
-        })
-      })]
-    })
-  });
-};
-
-/* *
- * 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 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.useState(null),
-    anchorEl = _React$useState[0],
-    setAnchorEl = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    open = _React$useState2[0],
-    setOpen = _React$useState2[1];
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return /*#__PURE__*/jsx(ClickAwayListener, {
-    mouseEvent: "onMouseDown",
-    onClickAway: function onClickAway() {
-      return setOpen(false);
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      style: {
-        position: 'absolute',
-        top: '-2px',
-        left: calendarIconPx + "px"
-      },
-      children: [/*#__PURE__*/jsx(CustomTooltip, {
-        slotProps: {
-          transition: {
-            exit: false
-          }
-        },
-        title: !open && t('timeslider-marker-placement'),
-        children: /*#__PURE__*/jsx(CustomToggleButton, {
-          onClick: function onClick() {
-            return setOpen(!open);
-          },
-          ref: function ref(_ref2) {
-            setAnchorEl(_ref2);
-          },
-          selected: open,
-          sx: style,
-          variant: "flat",
-          children: /*#__PURE__*/jsx(CalendarToday, {
-            style: {
-              marginRight: '0px'
-            }
-          })
-        })
-      }), /*#__PURE__*/jsx(Popper, {
-        anchorEl: anchorEl,
-        "data-testid": "dateTimePickerPopOver",
-        open: open,
-        placement: "top-start",
-        sx: {
-          zIndex: 10
-        },
-        children: /*#__PURE__*/jsx(MarkerTimeSelector, {
-          dataEndTime: dataEndTime,
-          dataStartTime: dataStartTime,
-          onCancel: function onCancel() {
-            return setOpen(false);
-          },
-          onSelect: function onSelect(newTime) {
-            setOpen(false);
-            _onSelect(newTime);
-          },
-          value: selectedTime
-        })
-      })]
-    })
-  });
-};
-
-/* *
- * 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 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 DEFAULT_PX_TO_MOVE_TIMESLIDER_CENTER = 25; // When the timeslider centertime is reaching the end of the canvas, move the timeslider center a bit
-
-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;
-    _ref.timeStep;
-    var dataStartTime = _ref.dataStartTime,
-    dataEndTime = _ref.dataEndTime,
-    unfilteredSelectedTime = _ref.unfilteredSelectedTime,
-    linkedMapAnimationInfo = _ref.linkedMapAnimationInfo,
-    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.useState('auto'),
-    cursorStyle = _React$useState[0],
-    setCursorStyle = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    mouseDownInTimeBox = _React$useState2[0],
-    setMouseDownInTimeBox = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    canvasWidth = _React$useState3[0],
-    setCanvasWidth = _React$useState3[1];
-  var isAnimating = linkedMapAnimationInfo == null ? void 0 : linkedMapAnimationInfo.isAnimating;
-
-  // 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 = isAnimating ? DEFAULT_PX_TO_MOVE_TIMESLIDER_CENTER : getAutoMoveAreaWidth(getFundamentalScale(secondsPerPx));
-    if (moveWidth > canvasWidth / 2 || canvasWidth < 100) {
-      // don't move if the moveWidth is larger than half the canvaswidth or canvaswidth is very small
-      return;
-    }
-    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, isAnimating]);
-  var isTimeBoxArea = function isTimeBoxArea(x, selectedTimePx) {
-    return x > selectedTimePx - timeBoxWidth / 2 && x < selectedTimePx + timeBoxWidth / 2;
-  };
-  var mouseDownX = useRef(0);
-  var unfilteredSelectedTimePxAtMouseDown = useRef(0);
-  React.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]);
-
-  // Display unfilteredSelectedTime (already snapped to available timestep)
-  var displayTime = unfilteredSelectedTime;
-  var timePx = timestampToPixel(displayTime, centerTime, canvasWidth, secondsPerPx);
-  var currentTimeBoxWidth = getTimeBoxWidth(span);
-  var calendarIconPx = timePx - currentTimeBoxWidth / 2 + CALENDAR_ICON_LEFT_SPACING;
-  return /*#__PURE__*/jsxs(Box$1, {
-    className: "timeSliderTimeBox",
-    "data-testid": "timeSliderTimeBox",
-    sx: {
-      height: '24px',
-      cursor: cursorStyle
-    },
-    children: [/*#__PURE__*/jsx(CanvasComponent, {
-      onMouseDown: function onMouseDown$1(x, y, width) {
-        if (!unfilteredSelectedTime) {
-          return;
-        }
-        onMouseDown(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox);
-      },
-      onMouseMove: function onMouseMove$1(x, y, event, width) {
-        if (!unfilteredSelectedTime) {
-          return;
-        }
-        onMouseMove(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle);
-      },
-      onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-        setCanvasWidth(width);
-        // Use the actual selected time without rounding to timestep
-        renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, unfilteredSelectedTime, secondsPerPx, span, isAutoUpdating);
-      },
-      ref: node
-    }), /*#__PURE__*/jsx(CalendarButton, {
-      calendarIconPx: calendarIconPx,
-      dataEndTime: dataEndTime,
-      dataStartTime: dataStartTime,
-      onSelect: function onSelect(newSelectedTime) {
-        if (newSelectedTime) {
-          onCalendarSelect(newSelectedTime);
-          if (onSetCenterTime) {
-            onSetCenterTime(newSelectedTime - displayTime + centerTime);
-          }
-        }
-      },
-      selectedTime: displayTime
-    })]
-  });
-};
-
-/* *
- * 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 TimesliderI18nProvider = function TimesliderI18nProvider(_ref) {
-  var children = _ref.children;
-  initTimesliderI18n();
-  return /*#__PURE__*/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 /*#__PURE__*/jsx(TimesliderI18nProvider, {
-    children: /*#__PURE__*/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, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, TimeStepButton, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultSecondsPerPx, defaultTimeSpan, defaultTimeStep, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRightAnimationIconArea, isSelectedTimeIconArea, marks$1 as marks, minutesToDescribedDuration, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pixelToTimestamp, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, useCanvasTarget };