@opengeoweb/soundings 19.6.1 → 20.0.0

package/dist/index.esm.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Stack, Box, Tooltip, Typography, styled, Card, IconButton, Menu, ListSubheader, MenuItem, LinearProgress, List as List$1, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton, Switch, ToggleButtonGroup, ToggleButton } from '@mui/material';
 import { range, isEqual } from 'lodash';
-import React, { useMemo, useRef, useEffect, useId, useState, Fragment as Fragment$1, useCallback } from 'react';
+import React, { useMemo, useRef, useEffect, useId, useCallback, useState, Fragment as Fragment$1 } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { dateUtils, referenceTimeUtils, safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, SwitchButton, CustomToggleButton, LegendToggleButton, CustomSlider, AlertBanner, ToolContainerDraggable, TooltipSelect, AlertIcon, useResizeObserver, SearchField, CustomAccordion } from '@opengeoweb/shared';
-import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, useSyncgroupTimeState, useRegisterFeatureSyncSource, genericSelectors, mapSelectors, mapActions, useUpdateFeatureSyncLayers, layerActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { dateUtils, referenceTimeUtils, safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, SwitchButton, CustomToggleButton, LegendToggleButton, useScrollingInIsolation, CustomSlider, AlertBanner, ToolContainerDraggable, TooltipSelect, AlertIcon, useResizeObserver, SearchField, CustomAccordion } from '@opengeoweb/shared';
+import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, syncGroupsSelectors, genericActions, useSyncgroupTimeState, useRegisterFeatureSyncSource, genericSelectors, mapSelectors, mapActions, useUpdateFeatureSyncLayers, layerActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
 import { Layers, Sources, Location, Equalizer, ArrowDropDownDown, DragHandle, Close, Visibility, VisibilityOff } from '@opengeoweb/theme';
 import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, handleDateUtilsISOString, webmapUtils } from '@opengeoweb/webmap';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import * as d3 from 'd3';
 import { queryOptions, useQueryClient, useQueries } from '@tanstack/react-query';
 import { withJsonFormat, getHeaders, handleResponse } from '@opengeoweb/api';
+import { authFetch } from '@opengeoweb/authentication';
 import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
@@ -31,7 +32,6 @@ var en = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
-	"coming-soon": "Coming soon",
 	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Markers",
 	"soundings-toggle-location-markers-tooltip": "Show/hide location markers",
@@ -51,7 +51,6 @@ var no = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
-	"coming-soon": "Kommer snart",
 	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Lokasjoner",
 	"soundings-toggle-location-markers-tooltip": "Vis/skjul lokasjoner",
@@ -71,14 +70,13 @@ var nl = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
-	"coming-soon": "Binnenkort beschikbaar",
-	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
+	"soundings-time-mismatch-title": "Geselecteerde tijd in de sounding view komt niet overeen met de tijd in de kaart.",
 	"soundings-toggle-location-markers-label": "Kaart locaties",
 	"soundings-toggle-location-markers-tooltip": "Toon/Verberg locatie punten",
 	"soundings-legend": "Legenda",
 	"soundings-legend-tooltip-show": "Toon legenda",
 	"soundings-legend-tooltip-hide": "Verberg legenda",
-	"no-sounding-data-available": "No sounding data available"
+	"no-sounding-data-available": "Geen sounding data beschikbaar"
 };
 var fi = {
 	sources: "Lähteet",
@@ -91,7 +89,6 @@ var fi = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
-	"coming-soon": "Tulossa pian",
 	"soundings-time-mismatch-title": "Valittu aika luotausnäytöllä ei vastaa karttanäytön aikaa",
 	"soundings-toggle-location-markers-label": "Kohdemerkit",
 	"soundings-toggle-location-markers-tooltip": "Näytä/piilota kohdemerkit",
@@ -1054,7 +1051,7 @@ var getCollectionLocations = /*#__PURE__*/function () {
     return _regenerator().w(function (_context) {
       while (1) switch (_context.n) {
         case 0:
-          return _context.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/locations"), {
+          return _context.a(2, authFetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/locations"), {
             headers: getHeaders()
           }).then(handleResponse));
       }
@@ -1084,7 +1081,7 @@ var getCollectionInstances = /*#__PURE__*/function () {
     return _regenerator().w(function (_context3) {
       while (1) switch (_context3.n) {
         case 0:
-          return _context3.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances"), {
+          return _context3.a(2, authFetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances"), {
             headers: getHeaders()
           }).then(handleResponse));
       }
@@ -1099,7 +1096,7 @@ var getCollectionDetails = /*#__PURE__*/function () {
     return _regenerator().w(function (_context4) {
       while (1) switch (_context4.n) {
         case 0:
-          return _context4.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId), {
+          return _context4.a(2, authFetch(withJsonFormat(baseUrl + "/collections/" + collectionId), {
             headers: getHeaders()
           }).then(handleResponse));
       }
@@ -1114,7 +1111,7 @@ var getInstanceDetails = /*#__PURE__*/function () {
     return _regenerator().w(function (_context5) {
       while (1) switch (_context5.n) {
         case 0:
-          return _context5.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId), {
+          return _context5.a(2, authFetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId), {
             headers: getHeaders()
           }).then(handleResponse));
       }
@@ -1135,7 +1132,7 @@ var getEdrCollectionForLocation = /*#__PURE__*/function () {
           url.searchParams.append('datetime', datetime);
           url.searchParams.append('z', verticalRange);
           url.searchParams.append('f', 'CoverageJSON');
-          return _context6.a(2, fetch(url.toString(), {
+          return _context6.a(2, authFetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
@@ -1159,7 +1156,7 @@ var getEdrCollectionForPosition = /*#__PURE__*/function () {
             url.searchParams.append('z', verticalRange);
           }
           url.searchParams.append('f', 'CoverageJSON');
-          return _context7.a(2, fetch(url.toString(), {
+          return _context7.a(2, authFetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
@@ -1191,7 +1188,7 @@ var getEdrCollectionForRadius = /*#__PURE__*/function () {
             url.searchParams.append('z', verticalRange);
           }
           url.searchParams.append('f', 'CoverageJSON');
-          return _context8.a(2, fetch(url.toString(), {
+          return _context8.a(2, authFetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
@@ -1524,7 +1521,7 @@ var getVerticalRangeFromInstance = function getVerticalRangeFromInstance(instanc
     return '';
   }
   if (typeof interval[0] === 'string') {
-    return interval.toSorted(function (dimA, dimB) {
+    return interval.slice().sort(function (dimA, dimB) {
       return dimA.localeCompare(dimB, undefined, {
         numeric: true
       });
@@ -1532,7 +1529,7 @@ var getVerticalRangeFromInstance = function getVerticalRangeFromInstance(instanc
   }
   var firstEl = interval[0][0];
   var lastEl = interval[interval.length - 1][1];
-  return [firstEl, lastEl].toSorted(function (dimA, dimB) {
+  return [firstEl, lastEl].sort(function (dimA, dimB) {
     return dimA.localeCompare(dimB, undefined, {
       numeric: true
     });
@@ -1563,7 +1560,7 @@ function extractGridPointsFromCoverage(response) {
 }
 
 var sortSoundingFeatures = function sortSoundingFeatures(data) {
-  return data.sort(function (featureA, featureB) {
+  return [].concat(data).sort(function (featureA, featureB) {
     // Sort by date (ascending)
     if (featureA.properties.time !== featureB.properties.time) {
       return featureA.properties.time > featureB.properties.time ? 1 : -1;
@@ -1702,6 +1699,7 @@ var useMultipleSources = function useMultipleSources(sources, locations, datetim
           }
         }
         return Object.assign({}, constructQueryParams(collectionId, url, instanceId, location, intervalDatetime, resolvedParamMappings, resolvedWindUnit, resolvedVerticalRange), {
+          placeholderData: [],
           select: function select(allFeatures) {
             if (!timeToShow || allFeatures.length === 0) {
               return [];
@@ -1724,7 +1722,9 @@ var useMultipleSources = function useMultipleSources(sources, locations, datetim
           dateToUse = exactMatch || '';
         }
       }
-      return constructQueryParams(collectionId, url, instanceId, location, dateToUse, resolvedParamMappings, resolvedWindUnit, resolvedVerticalRange);
+      return Object.assign({}, constructQueryParams(collectionId, url, instanceId, location, dateToUse, resolvedParamMappings, resolvedWindUnit, resolvedVerticalRange), {
+        placeholderData: []
+      });
     });
   }, [datetime, locations, sources, timesteps]);
   return useQueries({
@@ -1734,12 +1734,12 @@ var useMultipleSources = function useMultipleSources(sources, locations, datetim
       var data = queryResults.map(function (result) {
         return result.data || [];
       });
-      var isPending = timestepsPending || queryResults.some(function (result) {
-        return result.isPending;
-      });
       var error = timestepsError || ((_queryResults$find = queryResults.find(function (result) {
         return result == null ? void 0 : result.error;
       })) == null ? void 0 : _queryResults$find.error);
+      var isPending = !error && (timestepsPending || queryResults.some(function (result) {
+        return result.isPending || result.isPlaceholderData && result.isFetching;
+      }));
       return {
         data: data,
         isPending: isPending,
@@ -3957,7 +3957,7 @@ var filterDomainRangeForHodograph = function filterDomainRangeForHodograph(press
   });
   // If first pressure value is smallest, reverse arrays to ensure we draw starting from surface
   if (filteredPressureDomain[0] < filteredPressureDomain[filteredPressureDomain.length - 1]) {
-    return [filteredPressureDomain.reverse(), filteredParameterDomain.reverse()];
+    return [filteredPressureDomain.slice().reverse(), filteredParameterDomain.slice().reverse()];
   }
   return [filteredPressureDomain, filteredParameterDomain];
 };
@@ -4059,7 +4059,8 @@ var plotHodograph = function plotHodograph(_ref3) {
 };
 
 var Hodograph = function Hodograph(_ref) {
-  var data = _ref.data;
+  var data = _ref.data,
+    isMouseWheelZoomEnabled = _ref.isMouseWheelZoomEnabled;
   var svgRef = useRef(null);
   var widthHeight = 400;
   useEffect(function () {
@@ -4105,13 +4106,15 @@ var Hodograph = function Hodograph(_ref) {
     var zoomBehavior = d3.zoom().scaleExtent([1, 7]).translateExtent([[0, 0], [widthHeight, widthHeight]]).on('zoom', function (event) {
       svg.select('g.hodograph').attr('transform', event.transform);
     });
-    svg.call(zoomBehavior);
+    if (isMouseWheelZoomEnabled) {
+      svg.call(zoomBehavior);
+    }
     // eslint-disable-next-line consistent-return
     return function () {
-      svg.on('zoom', null);
+      svg.on('.zoom', null);
       svg.select('g.hodograph').selectAll('*').remove();
     };
-  }, [data, widthHeight]);
+  }, [data, isMouseWheelZoomEnabled, widthHeight]);
   return jsx("svg", {
     height: "100%",
     ref: svgRef,
@@ -4153,13 +4156,15 @@ var HodographLegend = function HodographLegend() {
 };
 
 var HodographCollection = function HodographCollection(_ref) {
-  var data = _ref.data;
+  var data = _ref.data,
+    isMouseWheelZoomEnabled = _ref.isMouseWheelZoomEnabled;
   return jsxs(Box, {
     sx: {
       padding: '5px'
     },
     children: [jsx(Hodograph, {
-      data: data
+      data: data,
+      isMouseWheelZoomEnabled: isMouseWheelZoomEnabled
     }), jsx(HodographLegend, {})]
   });
 };
@@ -5314,7 +5319,8 @@ var Soundings = function Soundings(_ref) {
     _ref$showTooltip = _ref.showTooltip,
     showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
     _ref$diagramType = _ref.diagramType,
-    diagramType = _ref$diagramType === void 0 ? 'SKEWT' : _ref$diagramType;
+    diagramType = _ref$diagramType === void 0 ? 'SKEWT' : _ref$diagramType,
+    isMouseWheelZoomEnabled = _ref.isMouseWheelZoomEnabled;
   var instanceId = useId().replace(/:/g, '_');
   var scopedGraphId = d3GraphId + "-" + instanceId;
   var svgRef = useRef(null);
@@ -5496,7 +5502,9 @@ var Soundings = function Soundings(_ref) {
       }
     });
     zoomBehaviorRef.current = zoomBehavior;
-    svg.call(zoomBehavior);
+    if (isMouseWheelZoomEnabled) {
+      svg.call(zoomBehavior);
+    }
     var previousTransform = updateTransformToViewport(persistedZoomTransformRef.current, width, height);
     var hasPersistedTransform = previousTransform.k > 1 || Math.abs(previousTransform.x) > 1e-3 || Math.abs(previousTransform.y) > 1e-3;
     // Re-apply the previous transform after rebuilding the SVG so resize
@@ -5524,7 +5532,7 @@ var Soundings = function Soundings(_ref) {
       zoomTargetRef.current = null;
       root.selectAll('*').remove();
     };
-  }, [data, diagramType, width, height, scopedGraphId, margin, publishVerticalZoom, resetVerticalZoom]);
+  }, [data, diagramType, width, height, scopedGraphId, margin, publishVerticalZoom, resetVerticalZoom, isMouseWheelZoomEnabled]);
   useEffect(function () {
     var _svgRectRef$current;
     if (!showTooltip || !svgRef.current) {
@@ -5634,7 +5642,9 @@ var shouldHideLabel = function shouldHideLabel(nItems, index, maxLabelCount) {
 var SoundingsTimeSlider = function SoundingsTimeSlider(_ref) {
   var timesteps = _ref.timesteps,
     selectedTime = _ref.selectedTime,
-    updateSelectedTime = _ref.updateSelectedTime;
+    updateSelectedTime = _ref.updateSelectedTime,
+    isTimeScrollingEnabled = _ref.isTimeScrollingEnabled,
+    soundingsWindowRef = _ref.soundingsWindowRef;
   var sliderRef = React.useRef(null);
   var maxLabelCount = useMaxLabelCount(sliderRef);
   var _useSoundingsTranslat = useSoundingsTranslation(),
@@ -5696,72 +5706,105 @@ var SoundingsTimeSlider = function SoundingsTimeSlider(_ref) {
     var followingIndex = Math.min(currentTimeIndex + 1, timesteps.length - 1);
     updateSelectedTime(timesteps[followingIndex]);
   }, [currentTimeIndex, updateSelectedTime, timesteps]);
-  return jsxs("div", {
-    ref: sliderRef,
-    style: {
-      display: 'flex',
-      paddingTop: '32px',
-      marginRight: '80px',
-      marginLeft: '24px',
-      height: TIMESLIDER_HEIGHT + "px"
-    },
-    children: [jsxs("div", {
+  var onWheel = useCallback(function (event) {
+    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.deltaY === 0) {
+      return;
+    }
+    // Kind of "one frame debouncer", meant to dampen too fast slider movement
+    requestAnimationFrame(function () {
+      if (event.deltaY > 0) {
+        onStepBackward();
+      } else {
+        onStepForward();
+      }
+    });
+  }, [onStepBackward, onStepForward]);
+  var scrollRef = useScrollingInIsolation({
+    onWheel: onWheel
+  });
+  React.useEffect(function () {
+    if (!isTimeScrollingEnabled || !(soundingsWindowRef != null && soundingsWindowRef.current)) {
+      return undefined;
+    }
+    var handleWheel = function handleWheel(event) {
+      event.preventDefault();
+      onWheel(event);
+    };
+    var element = soundingsWindowRef.current;
+    element.addEventListener('wheel', handleWheel);
+    return function () {
+      element.removeEventListener('wheel', handleWheel);
+    };
+  }, [isTimeScrollingEnabled, soundingsWindowRef, onWheel]);
+  return jsx("div", {
+    ref: scrollRef,
+    children: jsxs("div", {
+      ref: sliderRef,
       style: {
-        minWidth: '60px',
-        marginTop: '2px',
         display: 'flex',
-        gap: '4px'
+        paddingTop: '32px',
+        marginRight: '80px',
+        marginLeft: '24px',
+        height: TIMESLIDER_HEIGHT + "px"
       },
-      children: [jsx(BackwardForwardStepButton, {
-        isDisabled: marks.length === 0,
-        isForwardStep: false,
-        onClickBFButton: onStepBackward
-      }), jsx(BackwardForwardStepButton, {
-        isDisabled: marks.length === 0,
-        isForwardStep: true,
-        onClickBFButton: onStepForward
-      })]
-    }), marks.length === 0 ? jsx(CustomSlider, {
-      disabled: true,
-      max: 1,
-      min: 0,
-      orientation: "horizontal",
-      value: 0.5
-    }) : jsx(CustomSlider, {
-      extraStyles: {
-        margin: '0px 20px 0px 20px',
-        '.MuiSlider-markLabel': {
-          transform: 'translate(-90%, 20px) rotate(-45deg)',
-          transformOrigin: 'top center'
-        }
-      },
-      marks: marks,
-      max: marks[marks.length - 1].value,
-      min: marks[0].value,
-      onChange: function onChange(_, value) {
-        updateSelectedTime(dateUtils.fromUnix(value).toISOString());
-      },
-      orientation: "horizontal",
-      slotProps: {
-        // Workaround for MUI bug where labels are just draggable area and clicking on one
-        // does not necessarily select the described timestep
-        markLabel: {
-          onPointerDown: function onPointerDown(event) {
-            event.preventDefault();
-            var markIndex = event.currentTarget.getAttribute('data-index');
-            var mark = marks[Number(markIndex)];
-            var value = mark.value;
-            updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+      children: [jsxs("div", {
+        style: {
+          minWidth: '60px',
+          marginTop: '2px',
+          display: 'flex',
+          gap: '4px'
+        },
+        children: [jsx(BackwardForwardStepButton, {
+          isDisabled: marks.length === 0,
+          isForwardStep: false,
+          onClickBFButton: onStepBackward
+        }), jsx(BackwardForwardStepButton, {
+          isDisabled: marks.length === 0,
+          isForwardStep: true,
+          onClickBFButton: onStepForward
+        })]
+      }), marks.length === 0 ? jsx(CustomSlider, {
+        disabled: true,
+        max: 1,
+        min: 0,
+        orientation: "horizontal",
+        value: 0.5
+      }) : jsx(CustomSlider, {
+        extraStyles: {
+          margin: '0px 20px 0px 20px',
+          '.MuiSlider-markLabel': {
+            transform: 'translate(-90%, 20px) rotate(-45deg)',
+            transformOrigin: 'top center'
           }
+        },
+        marks: marks,
+        max: marks[marks.length - 1].value,
+        min: marks[0].value,
+        onChange: function onChange(_, value) {
+          updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+        },
+        orientation: "horizontal",
+        slotProps: {
+          // Workaround for MUI bug where labels are just draggable area and clicking on one
+          // does not necessarily select the described timestep
+          markLabel: {
+            onPointerDown: function onPointerDown(event) {
+              event.preventDefault();
+              var markIndex = event.currentTarget.getAttribute('data-index');
+              var mark = marks[Number(markIndex)];
+              var value = mark.value;
+              updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+            }
+          }
+        },
+        step: null,
+        value: dateUtils.unix(dateUtils.getUtcFromString(selectedTime)),
+        valueLabelDisplay: "on",
+        valueLabelFormat: function valueLabelFormat(value) {
+          return dateUtils.dateToString(dateUtils.fromUnix(value), "yyyy iii dd MMM HH:mm 'UTC'", true, i18n.language);
         }
-      },
-      step: null,
-      value: dateUtils.unix(dateUtils.getUtcFromString(selectedTime)),
-      valueLabelDisplay: "on",
-      valueLabelFormat: function valueLabelFormat(value) {
-        return dateUtils.dateToString(dateUtils.fromUnix(value), "yyyy iii dd MMM HH:mm 'UTC'", true, i18n.language);
-      }
-    })]
+      })]
+    })
   });
 };
 
@@ -6296,7 +6339,8 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
     setChosenDiagramType = _ref.setChosenDiagramType,
     onOrderChange = _ref.onOrderChange,
     panelComponent = _ref.panelComponent,
-    profileDataPreferences = _ref.profileDataPreferences;
+    profileDataPreferences = _ref.profileDataPreferences,
+    isMouseWheelZoomEnabled = _ref.isMouseWheelZoomEnabled;
   var soundingsContentRef = React.useRef(null);
   var windBarbsContentRef = React.useRef(null);
   var diagramSize = useSoundingsDiagramSize(soundingsContentRef);
@@ -6370,6 +6414,7 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
               d3GraphId: normalizedId,
               data: data,
               diagramType: chosenDiagramType,
+              isMouseWheelZoomEnabled: isMouseWheelZoomEnabled,
               svgDimensions: {
                 width: diagramSize,
                 height: diagramSize,
@@ -6417,7 +6462,8 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
           maxWidth: 500,
           render: function render() {
             return jsx(HodographCollection, {
-              data: data
+              data: data,
+              isMouseWheelZoomEnabled: isMouseWheelZoomEnabled
             });
           }
         }];
@@ -6451,7 +6497,8 @@ var SoundingsTimeSliderConnect = function SoundingsTimeSliderConnect(_ref) {
   var viewId = _ref.viewId,
     timeInUse = _ref.timeInUse,
     _ref$syncEnabled = _ref.syncEnabled,
-    syncEnabled = _ref$syncEnabled === void 0 ? false : _ref$syncEnabled;
+    syncEnabled = _ref$syncEnabled === void 0 ? false : _ref$syncEnabled,
+    soundingsWindowRef = _ref.soundingsWindowRef;
   var selectedTimeInStore = useSelector(function (state) {
     return getSelectedTime(state, viewId);
   });
@@ -6462,6 +6509,7 @@ var SoundingsTimeSliderConnect = function SoundingsTimeSliderConnect(_ref) {
   var isTimeSliderVisible = useSelector(function (state) {
     return getIsTimeSliderVisible(state, viewId);
   });
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
   var dispatch = useDispatch();
   var toggleTimeSliderVisibility = React.useCallback(function (nextIsVisible) {
     dispatch(soundingsActions.toggleTimeSliderVisibility({
@@ -6503,37 +6551,36 @@ var SoundingsTimeSliderConnect = function SoundingsTimeSliderConnect(_ref) {
       origin: SoundingsActionOrigin.soundingsComponent
     }));
   }, [dispatch, selectedTimeInStore, syncEnabled, validSelectedTime, viewId]);
-  if (!isTimeSliderVisible) {
-    return jsx(Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        paddingRight: 1,
-        paddingBottom: 1
-      },
-      children: jsx(HideSliderButton, {
-        isVisible: false,
-        toggleTimeSliderIsVisible: toggleTimeSliderVisibility
-      })
-    });
-  }
   return jsxs(Box, {
     sx: {
       position: 'relative'
     },
-    children: [jsx(SoundingsTimeSlider, {
-      selectedTime: selectedTime,
-      timesteps: mergedTimesteps,
-      updateSelectedTime: updateSelectedTime
-    }), jsx(Box, {
+    children: [jsx(Box, {
       sx: {
+        visibility: isTimeSliderVisible ? 'visible' : 'hidden',
+        maxHeight: isTimeSliderVisible ? 'inherit' : '0px'
+      },
+      children: jsx(SoundingsTimeSlider, {
+        isTimeScrollingEnabled: isTimeScrollingEnabled,
+        selectedTime: selectedTime,
+        soundingsWindowRef: soundingsWindowRef,
+        timesteps: mergedTimesteps,
+        updateSelectedTime: updateSelectedTime
+      })
+    }), jsx(Box, {
+      sx: isTimeSliderVisible ? {
         position: 'absolute',
         right: 0,
         bottom: 0,
         padding: 1
+      } : {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        paddingRight: 1,
+        paddingBottom: 1
       },
       children: jsx(HideSliderButton, {
-        isVisible: true,
+        isVisible: isTimeSliderVisible,
         toggleTimeSliderIsVisible: toggleTimeSliderVisibility
       })
     })]
@@ -6543,6 +6590,7 @@ var SoundingsTimeSliderConnect = function SoundingsTimeSliderConnect(_ref) {
 var SoundingsConnect = function SoundingsConnect(_ref) {
   var viewId = _ref.viewId,
     soundingsPreset = _ref.soundingsPreset;
+  var soundingsRef = useRef(null);
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
   var geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
@@ -6570,6 +6618,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var currentSoundingsPreset = useSelector(function (state) {
     return getSoundingsPreset(state, viewId);
   });
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
   React.useLayoutEffect(function () {
     dispatch(soundingsActions.registerSoundingsView({
       viewId: viewId
@@ -6882,11 +6931,13 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   // Compute target location from map pin or selected feature
   var targetLocation = useMemo(function () {
     var newLocation;
+    var hasSelectedMapPinLocation = typeof (selectedMapPin == null ? void 0 : selectedMapPin.lon) === 'number' && typeof selectedMapPin.lat === 'number';
+    var hasSelectedFeatureLocation = typeof (selectedFeature == null ? void 0 : selectedFeature.lon) === 'number' && typeof selectedFeature.lat === 'number';
     // Prioritize selectedMapPin for target location if it has valid coordinates,
     // otherwise fall back to selectedFeature
-    if (selectedMapPin != null && selectedMapPin.lon && selectedMapPin.lat) {
+    if (hasSelectedMapPinLocation) {
       newLocation = [selectedMapPin.lon, selectedMapPin.lat];
-    } else if (selectedFeature != null && selectedFeature.lon && selectedFeature != null && selectedFeature.lat) {
+    } else if (hasSelectedFeatureLocation) {
       newLocation = [selectedFeature.lon, selectedFeature.lat];
     }
     // Stabilize targetLocation reference
@@ -6907,8 +6958,9 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     // 1. selectedFeature doesn't have an id (not a named location marker), OR
     // 2. selectedMapPin is a grid point marker (starts with 'grid-point-')
     var isGridPointMarkerClick = typeof (selectedMapPin == null ? void 0 : selectedMapPin.id) === 'string' && selectedMapPin.id.startsWith('grid-point-');
-    return !(selectedFeature != null && selectedFeature.id) || isGridPointMarkerClick;
-  }, [targetLocation, selectedMapPin == null ? void 0 : selectedMapPin.id, selectedFeature == null ? void 0 : selectedFeature.id]);
+    var isMapPinForSelectedFeature = !!(selectedMapPin != null && selectedMapPin.id) && selectedMapPin.id === (selectedFeature == null ? void 0 : selectedFeature.id) && selectedMapPin.lon === (selectedFeature == null ? void 0 : selectedFeature.lon) && selectedMapPin.lat === (selectedFeature == null ? void 0 : selectedFeature.lat);
+    return !(selectedFeature != null && selectedFeature.id) || isGridPointMarkerClick || !isMapPinForSelectedFeature;
+  }, [targetLocation, selectedMapPin == null ? void 0 : selectedMapPin.id, selectedMapPin == null ? void 0 : selectedMapPin.lon, selectedMapPin == null ? void 0 : selectedMapPin.lat, selectedFeature == null ? void 0 : selectedFeature.id, selectedFeature == null ? void 0 : selectedFeature.lon, selectedFeature == null ? void 0 : selectedFeature.lat]);
   // Fetch grid points within radius for each source when user clicks on free position
   var _useGridPointsFromRad = useGridPointsFromRadius(resolvedSourceSelections, radiusQuerySupportBySource, targetLocation, selectedTimeInUse, isFreePositionClick),
     gridPointData = _useGridPointsFromRad.data;
@@ -7043,6 +7095,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         }
         // Check if this source supports EDR position queries
         var supportsPosition = (_positionQuerySupport = positionQuerySupportBySource[source.collectionId]) != null ? _positionQuerySupport : false;
+        var currentLocation = locationSelectionsRef.current[source.collectionId];
         // Detect if user clicked directly on a location marker owned by this source
         // A direct click means selectedFeature has an id that matches a feature owned by this source
         var isDirectClickOnOwnedMarker = !!(currentSelectedFeature != null && currentSelectedFeature.id) && (nearestOwnedFeature == null ? void 0 : nearestOwnedFeature.id) === (currentSelectedFeature == null ? void 0 : currentSelectedFeature.id);
@@ -7050,7 +7103,9 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         // so the sounding data comes from an actual model grid point rather than an arbitrary coordinate.
         var supportsRadius = (_radiusQuerySupportBy = radiusQuerySupportBySource[source.collectionId]) != null ? _radiusQuerySupportBy : false;
         var isGridPointMarkerClick = typeof (currentMapPin == null ? void 0 : currentMapPin.id) === 'string' && currentMapPin.id.startsWith('grid-point-');
-        var isLocalFreePositionClick = !(currentSelectedFeature != null && currentSelectedFeature.id) || isGridPointMarkerClick;
+        var isMapPinForSelectedFeature = !!(currentMapPin != null && currentMapPin.id) && currentMapPin.id === (currentSelectedFeature == null ? void 0 : currentSelectedFeature.id) && currentMapPin.lon === (currentSelectedFeature == null ? void 0 : currentSelectedFeature.lon) && currentMapPin.lat === (currentSelectedFeature == null ? void 0 : currentSelectedFeature.lat);
+        var isMapPinForCurrentLocation = typeof currentLocation === 'string' && (currentMapPin == null ? void 0 : currentMapPin.id) === currentLocation;
+        var isLocalFreePositionClick = !isMapPinForCurrentLocation && (!(currentSelectedFeature != null && currentSelectedFeature.id) || isGridPointMarkerClick || !isMapPinForSelectedFeature);
         var gridPoint = isLocalFreePositionClick && supportsRadius ? gridPointData == null || (_gridPointData$source = gridPointData[source.collectionId]) == null ? void 0 : _gridPointData$source.gridPoint : undefined;
         var radiusPending = isLocalFreePositionClick && supportsRadius && !(gridPointData != null && gridPointData[source.collectionId]);
         // Determine the location to use:
@@ -7072,10 +7127,12 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         } else if (nearestOwnedFeature) {
           // Fall back to location query with nearest marker
           newLocation = nearestOwnedFeature.id;
+        } else if (isLocalFreePositionClick) {
+          newLocation = undefined;
         }
-        var currentLocation = locationSelectionsRef.current[source.collectionId];
+        var hasInitialLocation = Object.hasOwn(initialLocationsRef.current, source.collectionId);
         var initialLocation = initialLocationsRef.current[source.collectionId];
-        if (!isEqual(currentLocation, newLocation) && !isEqual(initialLocation, newLocation)) {
+        if (!isEqual(currentLocation, newLocation) && (!hasInitialLocation || !isEqual(initialLocation, newLocation))) {
           dispatch(soundingsActions.updateSelectedLocation({
             sourceId: source.collectionId,
             location: newLocation,
@@ -7268,6 +7325,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         zIndex: 20
       }
     }), jsxs(Stack, {
+      ref: soundingsRef,
       sx: {
         padding: '12px',
         width: '100%',
@@ -7356,6 +7414,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
               children: jsx(SoundingsPanels, {
                 chosenDiagramType: diagramType,
                 data: data,
+                isMouseWheelZoomEnabled: !isTimeScrollingEnabled,
                 onOrderChange: changeOrder,
                 panelComponent: SoundingsPanelConnect,
                 profileDataPreferences: profileDataPreferences,
@@ -7370,6 +7429,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
               flex: '0 0 auto'
             },
             children: jsx(SoundingsTimeSliderConnect, {
+              soundingsWindowRef: soundingsRef,
               syncEnabled: isTimeSynced,
               timeInUse: selectedTimeInUse,
               viewId: viewId

package/dist/src/lib/components/Hodograph/Hodograph.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 import type { SoundingFeature } from '../../api/edr-api/types';
 export interface HodographProps {
     data: SoundingFeature[][];
+    isMouseWheelZoomEnabled: boolean;
 }
 export declare const Hodograph: React.FC<HodographProps>;

package/dist/src/lib/components/Hodograph/HodographCollection.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 import type { SoundingFeature } from '../../api/edr-api/types';
 export interface HodographCollectionProps {
     data: SoundingFeature[][];
+    isMouseWheelZoomEnabled: boolean;
 }
 export declare const HodographCollection: React.FC<HodographCollectionProps>;

package/dist/src/lib/components/Soundings/Soundings.d.ts

@@ -11,5 +11,6 @@ export interface SoundingProps {
     };
     showTooltip?: boolean;
     diagramType?: SoundingDiagramType;
+    isMouseWheelZoomEnabled: boolean;
 }
 export declare const Soundings: React.FC<SoundingProps>;

package/dist/src/lib/components/SoundingsPanels/SoundingsPanels.d.ts

@@ -16,5 +16,6 @@ export interface SoundingsPanelsProps {
     }[]) => void;
     panelComponent?: ResizablePanelComponent;
     profileDataPreferences?: SoundingsProfileDataPreferences;
+    isMouseWheelZoomEnabled: boolean;
 }
-export declare const SoundingsPanels: ({ viewId, soundingPanelsInOrder, data, chosenDiagramType, setChosenDiagramType, onOrderChange, panelComponent, profileDataPreferences, }: SoundingsPanelsProps) => React.ReactElement;
+export declare const SoundingsPanels: ({ viewId, soundingPanelsInOrder, data, chosenDiagramType, setChosenDiagramType, onOrderChange, panelComponent, profileDataPreferences, isMouseWheelZoomEnabled, }: SoundingsPanelsProps) => React.ReactElement;

package/dist/src/lib/components/SoundingsTimeSlider/SoundingsTimeSlider.d.ts

@@ -4,5 +4,7 @@ export interface SoundingsTimeSliderProps {
     timesteps: string[];
     selectedTime: string;
     updateSelectedTime: (date: string) => void;
+    isTimeScrollingEnabled: boolean;
+    soundingsWindowRef?: React.RefObject<HTMLElement | null>;
 }
-export declare const SoundingsTimeSlider: ({ timesteps, selectedTime, updateSelectedTime, }: SoundingsTimeSliderProps) => React.ReactElement;
+export declare const SoundingsTimeSlider: ({ timesteps, selectedTime, updateSelectedTime, isTimeScrollingEnabled, soundingsWindowRef, }: SoundingsTimeSliderProps) => React.ReactElement;

package/dist/src/lib/components/SoundingsTimeSlider/SoundingsTimeSliderConnect.d.ts

@@ -3,6 +3,7 @@ interface SoundingsTimeSliderConnectProps {
     viewId: string;
     timeInUse?: string;
     syncEnabled?: boolean;
+    soundingsWindowRef?: React.RefObject<HTMLElement | null>;
 }
-export declare const SoundingsTimeSliderConnect: ({ viewId, timeInUse, syncEnabled, }: SoundingsTimeSliderConnectProps) => React.ReactElement;
+export declare const SoundingsTimeSliderConnect: ({ viewId, timeInUse, syncEnabled, soundingsWindowRef, }: SoundingsTimeSliderConnectProps) => React.ReactElement;
 export {};

package/package.json

@@ -1,55 +1,56 @@
 {
-  "name": "@opengeoweb/soundings",
-  "version": "19.6.1",
-  "description": "GeoWeb soundings library for the opengeoweb project",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
-  },
-  "main": "./dist/index.esm.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "@opengeoweb/source": "./src/index.ts",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.esm.js",
-      "default": "./dist/index.esm.js"
-    }
-  },
-  "dependencies": {
-    "@opengeoweb/api": "*",
-    "@tanstack/react-query": "^5.85.5",
-    "d3": "^7.9.0",
-    "react-i18next": "^15.1.1",
-    "i18next": "^25.0.1",
-    "@opengeoweb/shared": "*",
-    "@mui/material": "^9.0.1",
-    "@opengeoweb/store": "*",
-    "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "*",
-    "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "*",
-    "react-window": "^2.2.6",
-    "@opengeoweb/webmap": "*",
-    "lodash": "^4.18.1",
-    "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "*",
-    "react-resizable-layout": "^0.7.3",
-    "react-sortablejs": "^6.1.4"
-  },
-  "devDependencies": {
-    "eslint-plugin-storybook": "10.3.3"
-  },
-  "peerDependencies": {
-    "react": "19"
-  },
-  "files": [
-    "dist",
-    "!dist/package.json",
-    "README.md",
-    "package.json"
-  ]
-}
+    "name": "@opengeoweb/soundings",
+    "version": "20.0.0",
+    "description": "GeoWeb soundings library for the opengeoweb project",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
+    },
+    "main": "./dist/index.esm.js",
+    "module": "./dist/index.esm.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "@opengeoweb/source": "./src/index.ts",
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.esm.js",
+            "default": "./dist/index.esm.js"
+        }
+    },
+    "dependencies": {
+        "@opengeoweb/api": "20.0.0",
+        "@opengeoweb/authentication": "20.0.0",
+        "@tanstack/react-query": "^5.85.5",
+        "d3": "^7.9.0",
+        "react-i18next": "^15.1.1",
+        "i18next": "^25.0.1",
+        "@opengeoweb/shared": "20.0.0",
+        "@mui/material": "^9.0.1",
+        "@opengeoweb/store": "20.0.0",
+        "react-redux": "^9.2.0",
+        "@opengeoweb/theme": "20.0.0",
+        "@reduxjs/toolkit": "^2.6.1",
+        "@opengeoweb/time-slider": "20.0.0",
+        "react-window": "^2.2.6",
+        "@opengeoweb/webmap": "20.0.0",
+        "lodash": "^4.18.1",
+        "@types/geojson": "^7946.0.14",
+        "@opengeoweb/webmap-react": "20.0.0",
+        "react-resizable-layout": "^0.7.3",
+        "react-sortablejs": "^6.1.4"
+    },
+    "devDependencies": {
+        "eslint-plugin-storybook": "10.3.3"
+    },
+    "peerDependencies": {
+        "react": "19"
+    },
+    "files": [
+        "dist",
+        "!dist/package.json",
+        "README.md",
+        "package.json"
+    ]
+}

package/dist/src/lib/components/SoundingPanelPlaceholder/SoundingPanelPlaceholder.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface SoundingPanelPlaceholderProps {
-    panelName: string;
-}
-export declare const SoundingPanelPlaceholder: React.FC<SoundingPanelPlaceholderProps>;

package/dist/src/lib/components/SoundingPanelPlaceholder/index.d.ts

@@ -1 +0,0 @@
-export * from './SoundingPanelPlaceholder';