@opengeoweb/soundings 19.2.0 → 19.4.0

package/dist/index.esm.js

@@ -1,15 +1,15 @@
 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, useState, Fragment as Fragment$1, useCallback } from 'react';
+import React, { useMemo, useRef, useEffect, useId, useState, Fragment as Fragment$1, useCallback } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { dateUtils, referenceTimeUtils, safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, SwitchButton, CustomToggleButton, CustomSlider, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
-import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, useRegisterFeatureSyncSource, genericSelectors, useSyncgroupTimeState, mapSelectors, mapActions, useUpdateFeatureSyncLayers, useSetupDialog, layerActions, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+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 { 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 { useQueries } from '@tanstack/react-query';
+import { queryOptions, useQueryClient, useQueries } from '@tanstack/react-query';
 import { withJsonFormat, getHeaders, handleResponse } from '@opengeoweb/api';
 import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
 import i18n from 'i18next';
@@ -35,6 +35,9 @@ var en = {
 	"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",
+	"soundings-legend": "Legend",
+	"soundings-legend-tooltip-show": "Show legend",
+	"soundings-legend-tooltip-hide": "Hide legend",
 	"no-sounding-data-available": "No sounding data available"
 };
 var no = {
@@ -52,6 +55,9 @@ var no = {
 	"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",
+	"soundings-legend": "Forklaring",
+	"soundings-legend-tooltip-show": "Vis forklaring",
+	"soundings-legend-tooltip-hide": "Skjul forklaring",
 	"no-sounding-data-available": "No sounding data available"
 };
 var nl = {
@@ -69,6 +75,9 @@ var nl = {
 	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"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"
 };
 var fi = {
@@ -86,6 +95,9 @@ var fi = {
 	"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",
+	"soundings-legend": "Selite",
+	"soundings-legend-tooltip-show": "Näytä selite",
+	"soundings-legend-tooltip-hide": "Piilota selite",
 	"no-sounding-data-available": "Ei luotausdataa saatavilla"
 };
 var soundingsTranslations = {
@@ -139,6 +151,8 @@ var REFERENCE_PRESSURE = 1000 * 100; // 1000hPa = 100000Pa
 var EARTH_MEAN_RADIUS = 6371; // [km]
 var MAX_PROXIMITY_RADIUS = 100; // [km]
 var SAME_POINT_DISTANCE_KM = 0.05;
+var SOUNDINGS_CONTAINER_BREAKPOINT_PX = '720px';
+var SOUNDINGS_CONTAINER_NAME = 'soundings-container';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -308,6 +322,14 @@ var initializeSvg$1 = function initializeSvg(_ref) {
   // Ensure clipPath uses same coordinate system as the translated group
   // so width/height starting at x=0,y=0 align with axis origin.
   .attr('clipPathUnits', 'userSpaceOnUse').append('rect').attr('width', width).attr('height', height).attr('x', 0).attr('y', 0);
+  svg.append('clipPath').attr('id', "clip-" + d3GraphId + "-" + diagramType + "x-axis").attr('clipPathUnits', 'userSpaceOnUse').append('rect')
+  // Keep x-axis labels within the horizontal chart band while allowing them
+  // to use the reserved left and bottom margin.
+  .attr('width', width + margin.left).attr('height', height + margin.bottom).attr('x', -margin.left).attr('y', 0);
+  svg.append('clipPath').attr('id', "clip-" + d3GraphId + "-" + diagramType + "y-axis").attr('clipPathUnits', 'userSpaceOnUse').append('rect')
+  // Keep y-axis labels within the vertical chart band while allowing them
+  // to use the reserved left margin.
+  .attr('width', width + margin.left).attr('height', height).attr('x', -margin.left).attr('y', 0);
   svg.append('rect').attr('height', height).attr('width', width).attr('fill', '#ffffff00').attr('opacity', 1).attr('id', d3GraphId + "-" + diagramType + "d3").attr('clip-path', "url(#clip-" + d3GraphId + "-" + diagramType + "d3)");
   return svg;
 };
@@ -436,6 +458,7 @@ var plotSounding = function plotSounding(_ref7) {
     pressureValues = _ref7.pressureValues,
     color = _ref7.color,
     lineStyle = _ref7.lineStyle,
+    d3GraphId = _ref7.d3GraphId,
     xScale = _ref7.xScale,
     yScale = _ref7.yScale,
     height = _ref7.height,
@@ -448,7 +471,7 @@ var plotSounding = function plotSounding(_ref7) {
   var Px = mapToPlot(diagramType, filteredPressureValues, filteredTemperatureValues, xScale, yScale, height);
   var lineGenerator = d3.line();
   var pathString = lineGenerator(Px);
-  svg.append('path').attr('d', pathString).attr('id', 'dataline').attr('x', 0).attr('y', 0).style('fill', 'none').style('stroke-width', 2).style('stroke', color).style('stroke-opacity', 1).style('stroke-dasharray', lineStyle).attr('clip-path', "url(#clip-" + diagramType + "d3)");
+  svg.append('path').attr('d', pathString).attr('id', 'dataline').attr('x', 0).attr('y', 0).style('fill', 'none').style('stroke-width', 2).style('stroke', color).style('stroke-opacity', 1).style('stroke-dasharray', lineStyle).attr('clip-path', "url(#clip-" + d3GraphId + "-" + diagramType + "d3)");
 };
 // Use this function to filter the pressure and parameter array so no NaN or null values are included
 var filterDomainRangeForParameter = function filterDomainRangeForParameter(pressureDomain, parameterDomain) {
@@ -461,8 +484,16 @@ var filterDomainRangeForParameter = function filterDomainRangeForParameter(press
   return [filteredPressureDomain, filteredParameterDomain];
 };
 
+var defaultVerticalZoom = {
+  scale: 1,
+  y: 0,
+  sourceId: null
+};
 var MouseYContext = /*#__PURE__*/React.createContext({
-  clientY: null
+  clientY: null,
+  verticalZoom: defaultVerticalZoom,
+  publishVerticalZoom: function publishVerticalZoom() {},
+  resetVerticalZoom: function resetVerticalZoom() {}
 });
 var useSharedMouseY = function useSharedMouseY() {
   return React.useContext(MouseYContext);
@@ -477,6 +508,31 @@ var SharedMouseYProvider = function SharedMouseYProvider(_ref) {
   var _React$useState = React.useState(null),
     clientY = _React$useState[0],
     setClientY = _React$useState[1];
+  var _React$useState2 = React.useState(defaultVerticalZoom),
+    verticalZoom = _React$useState2[0],
+    setVerticalZoom = _React$useState2[1];
+  var publishVerticalZoom = React.useCallback(function (sourceId, scale, y) {
+    setVerticalZoom(function (previous) {
+      var hasSameValues = previous.sourceId === sourceId && Math.abs(previous.scale - scale) < 1e-6 && Math.abs(previous.y - y) < 1e-3;
+      if (hasSameValues) {
+        return previous;
+      }
+      return {
+        scale: scale,
+        y: y,
+        sourceId: sourceId
+      };
+    });
+  }, []);
+  var resetVerticalZoom = React.useCallback(function (sourceId) {
+    setVerticalZoom(function () {
+      return {
+        scale: 1,
+        y: 0,
+        sourceId: sourceId
+      };
+    });
+  }, []);
   React.useEffect(function () {
     var el = wrapperRef.current;
     if (!el) {
@@ -500,9 +556,12 @@ var SharedMouseYProvider = function SharedMouseYProvider(_ref) {
   }, []);
   var contextValue = React.useMemo(function () {
     return {
-      clientY: clientY
+      clientY: clientY,
+      verticalZoom: verticalZoom,
+      publishVerticalZoom: publishVerticalZoom,
+      resetVerticalZoom: resetVerticalZoom
     };
-  }, [clientY]);
+  }, [clientY, verticalZoom, publishVerticalZoom, resetVerticalZoom]);
   return jsx("div", {
     "data-testid": "shared-mouse-y-wrapper",
     ref: wrapperRef,
@@ -717,13 +776,13 @@ var SoundingsLegend = function SoundingsLegend(_ref) {
   return jsx(Stack, {
     direction: "row",
     spacing: 1,
-    useFlexGap: true,
     sx: {
       justifyContent: 'center',
       flexWrap: 'wrap',
       paddingLeft: 2,
       paddingTop: 0.5
     },
+    useFlexGap: true,
     children: sourceSelections.map(function (source, index) {
       var resolvedInstanceId = sourceResolvedInstanceIds == null ? void 0 : sourceResolvedInstanceIds[source.collectionId];
       var title = getLegendTitle(source, resolvedInstanceId);
@@ -985,77 +1044,92 @@ var getCollectionLocations = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-var getCollectionInstances = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(collectionId, baseUrl) {
+var getInstanceLocations = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(collectionId, instanceId, baseUrl) {
     return _regenerator().w(function (_context2) {
       while (1) switch (_context2.n) {
         case 0:
-          return _context2.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances"), {
+          return _context2.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId + "/locations"), {
             headers: getHeaders()
           }).then(handleResponse));
       }
     }, _callee2);
   }));
-  return function getCollectionInstances(_x3, _x4) {
+  return function getInstanceLocations(_x3, _x4, _x5) {
     return _ref2.apply(this, arguments);
   };
 }();
-var getCollectionDetails = /*#__PURE__*/function () {
+var getCollectionInstances = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(collectionId, baseUrl) {
     return _regenerator().w(function (_context3) {
       while (1) switch (_context3.n) {
         case 0:
-          return _context3.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId), {
+          return _context3.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances"), {
             headers: getHeaders()
           }).then(handleResponse));
       }
     }, _callee3);
   }));
-  return function getCollectionDetails(_x5, _x6) {
+  return function getCollectionInstances(_x6, _x7) {
     return _ref3.apply(this, arguments);
   };
 }();
-var getInstanceDetails = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(collectionId, instanceId, baseUrl) {
+var getCollectionDetails = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(collectionId, baseUrl) {
     return _regenerator().w(function (_context4) {
       while (1) switch (_context4.n) {
         case 0:
-          return _context4.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId), {
+          return _context4.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId), {
             headers: getHeaders()
           }).then(handleResponse));
       }
     }, _callee4);
   }));
-  return function getInstanceDetails(_x7, _x8, _x9) {
+  return function getCollectionDetails(_x8, _x9) {
     return _ref4.apply(this, arguments);
   };
 }();
-var getEdrCollectionForLocation = /*#__PURE__*/function () {
-  var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(collectionId, baseUrl, instanceId, locationId, parameters, datetime, verticalRange) {
-    var url;
+var getInstanceDetails = /*#__PURE__*/function () {
+  var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(collectionId, instanceId, baseUrl) {
     return _regenerator().w(function (_context5) {
       while (1) switch (_context5.n) {
+        case 0:
+          return _context5.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId), {
+            headers: getHeaders()
+          }).then(handleResponse));
+      }
+    }, _callee5);
+  }));
+  return function getInstanceDetails(_x0, _x1, _x10) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+var getEdrCollectionForLocation = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(collectionId, baseUrl, instanceId, locationId, parameters, datetime, verticalRange) {
+    var url;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
         case 0:
           url = new URL(baseUrl + "/collections/" + collectionId + (instanceId ? "/instances/" + instanceId : '') + "/locations/" + locationId);
           url.searchParams.append('parameter-name', parameters.join(','));
           url.searchParams.append('datetime', datetime);
           url.searchParams.append('z', verticalRange);
           url.searchParams.append('f', 'CoverageJSON');
-          return _context5.a(2, fetch(url.toString(), {
+          return _context6.a(2, fetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
-    }, _callee5);
+    }, _callee6);
   }));
-  return function getEdrCollectionForLocation(_x0, _x1, _x10, _x11, _x12, _x13, _x14) {
-    return _ref5.apply(this, arguments);
+  return function getEdrCollectionForLocation(_x11, _x12, _x13, _x14, _x15, _x16, _x17) {
+    return _ref6.apply(this, arguments);
   };
 }();
 var getEdrCollectionForPosition = /*#__PURE__*/function () {
-  var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(collectionId, baseUrl, instanceId, coordinates, parameters, datetime, verticalRange) {
+  var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(collectionId, baseUrl, instanceId, coordinates, parameters, datetime, verticalRange) {
     var url;
-    return _regenerator().w(function (_context6) {
-      while (1) switch (_context6.n) {
+    return _regenerator().w(function (_context7) {
+      while (1) switch (_context7.n) {
         case 0:
           url = new URL(baseUrl + "/collections/" + collectionId + (instanceId ? "/instances/" + instanceId : '') + "/position");
           url.searchParams.append('coords', "POINT(" + coordinates[0] + " " + coordinates[1] + ")");
@@ -1065,14 +1139,14 @@ var getEdrCollectionForPosition = /*#__PURE__*/function () {
             url.searchParams.append('z', verticalRange);
           }
           url.searchParams.append('f', 'CoverageJSON');
-          return _context6.a(2, fetch(url.toString(), {
+          return _context7.a(2, fetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
-    }, _callee6);
+    }, _callee7);
   }));
-  return function getEdrCollectionForPosition(_x15, _x16, _x17, _x18, _x19, _x20, _x21) {
-    return _ref6.apply(this, arguments);
+  return function getEdrCollectionForPosition(_x18, _x19, _x20, _x21, _x22, _x23, _x24) {
+    return _ref7.apply(this, arguments);
   };
 }();
 /**
@@ -1081,10 +1155,10 @@ var getEdrCollectionForPosition = /*#__PURE__*/function () {
  * Returns a CoverageCollection with coverages for each grid point within the radius.
  */
 var getEdrCollectionForRadius = /*#__PURE__*/function () {
-  var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(collectionId, baseUrl, instanceId, centerCoordinates, radiusKm, parameters, datetime, verticalRange) {
+  var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(collectionId, baseUrl, instanceId, centerCoordinates, radiusKm, parameters, datetime, verticalRange) {
     var url;
-    return _regenerator().w(function (_context7) {
-      while (1) switch (_context7.n) {
+    return _regenerator().w(function (_context8) {
+      while (1) switch (_context8.n) {
         case 0:
           url = new URL(baseUrl + "/collections/" + collectionId + (instanceId ? "/instances/" + instanceId : '') + "/radius");
           url.searchParams.append('coords', "POINT(" + centerCoordinates[0] + " " + centerCoordinates[1] + ")");
@@ -1097,17 +1171,40 @@ var getEdrCollectionForRadius = /*#__PURE__*/function () {
             url.searchParams.append('z', verticalRange);
           }
           url.searchParams.append('f', 'CoverageJSON');
-          return _context7.a(2, fetch(url.toString(), {
+          return _context8.a(2, fetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
-    }, _callee7);
+    }, _callee8);
   }));
-  return function getEdrCollectionForRadius(_x22, _x23, _x24, _x25, _x26, _x27, _x28, _x29) {
-    return _ref7.apply(this, arguments);
+  return function getEdrCollectionForRadius(_x25, _x26, _x27, _x28, _x29, _x30, _x31, _x32) {
+    return _ref8.apply(this, arguments);
   };
 }();
 
+var soundingsQueryOptions = {
+  getCollectionInstances: function getCollectionInstances$1(collectionId, url) {
+    return queryOptions({
+      queryKey: ['edr-soundings-instances', collectionId, url],
+      queryFn: function () {
+        var _queryFn = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
+              case 0:
+                return _context.a(2, getCollectionInstances(collectionId, url));
+            }
+          }, _callee);
+        }));
+        function queryFn() {
+          return _queryFn.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      refetchInterval: 5 * 60 * 1000
+    });
+  }
+};
+
 var epsilon = 0.622; // Ratio of molecular weights of water vapour and dry air
 var e0 = 611.2; // Reference vapor pressure [Pa]
 var aConstant = 17.67;
@@ -1625,28 +1722,12 @@ var useResolvedSourceSelections = function useResolvedSourceSelections(sources)
       var collectionId = _ref2.collectionId,
         url = _ref2.url,
         instanceId = _ref2.instanceId;
-      return {
-        queryKey: ['edr-soundings-instances', collectionId],
-        queryFn: function () {
-          var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-            return _regenerator().w(function (_context3) {
-              while (1) switch (_context3.n) {
-                case 0:
-                  return _context3.a(2, getCollectionInstances(collectionId, url));
-              }
-            }, _callee3);
-          }));
-          function queryFn() {
-            return _queryFn3.apply(this, arguments);
-          }
-          return queryFn;
-        }(),
+      return Object.assign({}, soundingsQueryOptions.getCollectionInstances(collectionId, url), {
         enabled: referenceTimeUtils.isRelativeReferenceTime(instanceId),
-        refetchInterval: 5 * 60 * 1000,
         select: function select(data) {
           return data.instances;
         }
-      };
+      });
     });
   }, [sources]);
   var instancesBySource = useQueries({
@@ -1678,6 +1759,7 @@ var useResolvedSourceSelections = function useResolvedSourceSelections(sources)
   }, [sources, instancesBySource]);
 };
 var useTimesteps = function useTimesteps(sourceSelections) {
+  var queryClient = useQueryClient();
   var queries = React.useMemo(function () {
     return sourceSelections.map(function (_ref3) {
       var collectionId = _ref3.collectionId,
@@ -1686,42 +1768,38 @@ var useTimesteps = function useTimesteps(sourceSelections) {
       return {
         queryKey: ['edr-soundings-instance', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-            var _instanceData$extent, instanceData, timeExtentValues, allInstancesData, collectionData;
-            return _regenerator().w(function (_context4) {
-              while (1) switch (_context4.n) {
+          var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+            var _instanceData$extent, instanceData, timeExtentValues, collectionData;
+            return _regenerator().w(function (_context3) {
+              while (1) switch (_context3.n) {
                 case 0:
                   if (!(instanceId && instanceId !== '')) {
-                    _context4.n = 4;
+                    _context3.n = 3;
                     break;
                   }
-                  _context4.n = 1;
+                  _context3.n = 1;
                   return getInstanceDetails(collectionId, instanceId, url);
                 case 1:
-                  instanceData = _context4.v;
+                  instanceData = _context3.v;
                   timeExtentValues = instanceData == null || (_instanceData$extent = instanceData.extent) == null || (_instanceData$extent = _instanceData$extent.temporal) == null ? void 0 : _instanceData$extent.values;
                   if (timeExtentValues) {
-                    _context4.n = 3;
+                    _context3.n = 2;
                     break;
                   }
-                  _context4.n = 2;
-                  return getCollectionInstances(collectionId, url);
+                  return _context3.a(2, queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url)));
                 case 2:
-                  allInstancesData = _context4.v;
-                  return _context4.a(2, allInstancesData);
+                  return _context3.a(2, instanceData);
                 case 3:
-                  return _context4.a(2, instanceData);
-                case 4:
-                  _context4.n = 5;
+                  _context3.n = 4;
                   return getCollectionDetails(collectionId, url);
-                case 5:
-                  collectionData = _context4.v;
-                  return _context4.a(2, collectionData);
+                case 4:
+                  collectionData = _context3.v;
+                  return _context3.a(2, collectionData);
               }
-            }, _callee4);
+            }, _callee3);
           }));
           function queryFn() {
-            return _queryFn4.apply(this, arguments);
+            return _queryFn3.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -1738,7 +1816,7 @@ var useTimesteps = function useTimesteps(sourceSelections) {
         refetchInterval: 5 * 60 * 1000
       };
     });
-  }, [sourceSelections]);
+  }, [sourceSelections, queryClient]);
   var results = useQueries({
     queries: queries,
     combine: function combine(queryResults) {
@@ -1782,21 +1860,21 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
       return {
         queryKey: ['edr-soundings-collection-details', id, url],
         queryFn: function () {
-          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+          var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
             var data;
-            return _regenerator().w(function (_context5) {
-              while (1) switch (_context5.n) {
+            return _regenerator().w(function (_context4) {
+              while (1) switch (_context4.n) {
                 case 0:
-                  _context5.n = 1;
+                  _context4.n = 1;
                   return getCollectionDetails(id, url);
                 case 1:
-                  data = _context5.v;
-                  return _context5.a(2, data);
+                  data = _context4.v;
+                  return _context4.a(2, data);
               }
-            }, _callee5);
+            }, _callee4);
           }));
           function queryFn() {
-            return _queryFn5.apply(this, arguments);
+            return _queryFn4.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -1810,10 +1888,13 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
       var _queryResults$find3;
       var data = queryResults.map(function (result) {
         var _result$data2;
-        return ((_result$data2 = result.data) == null || (_result$data2 = _result$data2.data_queries) == null ? void 0 : _result$data2.instances) !== undefined;
+        return !!((_result$data2 = result.data) != null && (_result$data2 = _result$data2.data_queries) != null && _result$data2.instances);
       });
-      var isPending = queryResults.some(function (result) {
-        return result.isPending;
+      // Only enabled queries should contribute to isPending to prevent a
+      // loading indicator that never clears
+      var isPending = queryResults.some(function (result, index) {
+        var _queriesCollection$in;
+        return !!((_queriesCollection$in = queriesCollection[index]) != null && _queriesCollection$in.enabled) && result.isPending;
       });
       var error = (_queryResults$find3 = queryResults.find(function (result) {
         return result == null ? void 0 : result.error;
@@ -1830,52 +1911,28 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
     return collectionIds.map(function (_ref5, index) {
       var id = _ref5.id,
         url = _ref5.url;
-      return {
-        queryKey: ['edr-soundings-instances', id, resultsCollection.data],
-        queryFn: function () {
-          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
-            var data;
-            return _regenerator().w(function (_context6) {
-              while (1) switch (_context6.n) {
-                case 0:
-                  if (!resultsCollection.data[index]) {
-                    _context6.n = 2;
-                    break;
-                  }
-                  _context6.n = 1;
-                  return getCollectionInstances(id, url);
-                case 1:
-                  data = _context6.v;
-                  return _context6.a(2, data);
-                case 2:
-                  return _context6.a(2, {
-                    instances: []
-                  });
-              }
-            }, _callee6);
-          }));
-          function queryFn() {
-            return _queryFn6.apply(this, arguments);
-          }
-          return queryFn;
-        }(),
-        enabled: isDialogOpen && resultsCollection.data !== undefined
-      };
+      var hasInstances = !!resultsCollection.data[index];
+      return Object.assign({}, soundingsQueryOptions.getCollectionInstances(id, url), {
+        enabled: !!isDialogOpen && hasInstances
+      });
     });
-  }, [collectionIds, isDialogOpen, resultsCollection]);
+  }, [collectionIds, isDialogOpen, resultsCollection.data]);
   var results = useQueries({
     queries: queries,
     combine: function combine(queryResults) {
       var _queryResults$find4;
       var data = queryResults.map(function (result) {
-        var _result$data3;
-        var instances = ((_result$data3 = result.data) == null ? void 0 : _result$data3.instances.sort(function (featureA, featureB) {
+        var _result$data$instance, _result$data3;
+        var instances = [].concat((_result$data$instance = (_result$data3 = result.data) == null ? void 0 : _result$data3.instances) != null ? _result$data$instance : []).sort(function (featureA, featureB) {
           return featureB.id.localeCompare(featureA.id);
-        })) || []; // Sort to get latest first
+        }); // Sort to get latest first
         return instances;
       });
-      var isPending = queryResults.some(function (result) {
-        return result.isPending;
+      // Mirror the collection-details behavior: only enabled instance queries
+      // participate in the loading state.
+      var isPending = queryResults.some(function (result, index) {
+        var _queries$index;
+        return !!((_queries$index = queries[index]) != null && _queries$index.enabled) && result.isPending;
       });
       var error = (_queryResults$find4 = queryResults.find(function (result) {
         return result == null ? void 0 : result.error;
@@ -1900,37 +1957,76 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
     data: dataWithCollectionInfo
   });
 };
-var useGetCollectionLocations = function useGetCollectionLocations(collections, enabled) {
+var useGetLocations = function useGetLocations(collections, enabled) {
+  var queryClient = useQueryClient();
   var edrQueries = useMemo(function () {
     return collections == null ? void 0 : collections.map(function (collection) {
+      var _collection$instanceI;
       return {
-        queryKey: ['edr-locations', collection.id],
+        queryKey: ['edr-locations', collection.id, collection.url, (_collection$instanceI = collection.instanceId) != null ? _collection$instanceI : ''],
         queryFn: function () {
-          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
-            var locations;
-            return _regenerator().w(function (_context7) {
-              while (1) switch (_context7.n) {
+          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+            var resolvedInstanceId, instances, resolved, locationsExplicitlyUnsupported, _locations, locations;
+            return _regenerator().w(function (_context5) {
+              while (1) switch (_context5.p = _context5.n) {
                 case 0:
-                  _context7.n = 1;
+                  resolvedInstanceId = collection.instanceId;
+                  if (!(resolvedInstanceId && referenceTimeUtils.isRelativeReferenceTime(resolvedInstanceId))) {
+                    _context5.n = 4;
+                    break;
+                  }
+                  _context5.p = 1;
+                  _context5.n = 2;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collection.id, collection.url));
+                case 2:
+                  instances = _context5.v;
+                  resolved = referenceTimeUtils.resolveReferenceTimeInstance(instances.instances, resolvedInstanceId); // Skip instance-level only when data_queries is present but explicitly excludes locations — if data_queries is absent, try instance-level anyway
+                  locationsExplicitlyUnsupported = (resolved == null ? void 0 : resolved.data_queries) !== undefined && !resolved.data_queries.locations;
+                  resolvedInstanceId = locationsExplicitlyUnsupported ? undefined : resolved == null ? void 0 : resolved.id;
+                  _context5.n = 4;
+                  break;
+                case 3:
+                  _context5.p = 3;
+                  _context5.v;
+                  resolvedInstanceId = undefined;
+                case 4:
+                  if (!resolvedInstanceId) {
+                    _context5.n = 8;
+                    break;
+                  }
+                  _context5.p = 5;
+                  _context5.n = 6;
+                  return getInstanceLocations(collection.id, resolvedInstanceId, collection.url);
+                case 6:
+                  _locations = _context5.v;
+                  return _context5.a(2, Object.assign({}, _locations, {
+                    id: collection.id,
+                    name: collection.name
+                  }));
+                case 7:
+                  _context5.p = 7;
+                  _context5.v;
+                case 8:
+                  _context5.n = 9;
                   return getCollectionLocations(collection.id, collection.url);
-                case 1:
-                  locations = _context7.v;
-                  return _context7.a(2, Object.assign({}, locations, {
+                case 9:
+                  locations = _context5.v;
+                  return _context5.a(2, Object.assign({}, locations, {
                     id: collection.id,
                     name: collection.name
                   }));
               }
-            }, _callee7);
+            }, _callee5, null, [[5, 7], [1, 3]]);
           }));
           function queryFn() {
-            return _queryFn7.apply(this, arguments);
+            return _queryFn5.apply(this, arguments);
           }
           return queryFn;
         }(),
         enabled: enabled
       };
     });
-  }, [collections, enabled]);
+  }, [collections, enabled, queryClient]);
   return useQueries({
     queries: edrQueries,
     combine: function combine(results) {
@@ -1964,6 +2060,7 @@ var useGetCollectionLocations = function useGetCollectionLocations(collections,
 var useCheckPositionQuerySupportBySource = function useCheckPositionQuerySupportBySource(sources) {
   // Ref to stabilize data object reference when values haven't changed
   var dataRef = React.useRef({});
+  var queryClient = useQueryClient();
   var queries = useMemo(function () {
     return sources.map(function (_ref6) {
       var collectionId = _ref6.collectionId,
@@ -1972,55 +2069,61 @@ var useCheckPositionQuerySupportBySource = function useCheckPositionQuerySupport
       return {
         queryKey: ['edr-position-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
             var _details$data_queries, _instance$data_querie, instances, instance, details;
-            return _regenerator().w(function (_context8) {
-              while (1) switch (_context8.p = _context8.n) {
+            return _regenerator().w(function (_context6) {
+              while (1) switch (_context6.p = _context6.n) {
                 case 0:
-                  _context8.p = 0;
+                  _context6.p = 0;
                   if (!instanceId) {
-                    _context8.n = 2;
+                    _context6.n = 2;
                     break;
                   }
-                  _context8.n = 1;
-                  return getCollectionInstances(collectionId, url);
+                  _context6.n = 1;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url));
                 case 1:
-                  instances = _context8.v;
+                  instances = _context6.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context8.a(2, {
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie = instance.data_queries) != null && _instance$data_querie.position)
                   });
                 case 2:
-                  _context8.n = 3;
+                  _context6.n = 3;
                   return getCollectionDetails(collectionId, url);
                 case 3:
-                  details = _context8.v;
-                  return _context8.a(2, {
+                  details = _context6.v;
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: !!(details != null && (_details$data_queries = details.data_queries) != null && _details$data_queries.position)
                   });
                 case 4:
-                  _context8.p = 4;
-                  _context8.v;
-                  return _context8.a(2, {
+                  _context6.p = 4;
+                  _context6.v;
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee8, null, [[0, 4]]);
+            }, _callee6, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn8.apply(this, arguments);
+            return _queryFn6.apply(this, arguments);
           }
           return queryFn;
         }(),
-        staleTime: 5 * 60 * 1000 // Cache for 5 minutes
+        enabled: !referenceTimeUtils.isRelativeReferenceTime(instanceId),
+        staleTime: 5 * 60 * 1000,
+        // Cache for 5 minutes
+        // Preserve previous result while a new instance check is in-flight to avoid spurious location updates.
+        placeholderData: function placeholderData(prev) {
+          return prev;
+        }
       };
     });
-  }, [sources]);
+  }, [sources, queryClient]);
   return useQueries({
     queries: queries,
     combine: function combine(queryResults) {
@@ -2054,6 +2157,7 @@ var useCheckPositionQuerySupportBySource = function useCheckPositionQuerySupport
 var useCheckRadiusQuerySupportBySource = function useCheckRadiusQuerySupportBySource(sources) {
   // Ref to stabilize data object reference when values haven't changed
   var dataRef = React.useRef({});
+  var queryClient = useQueryClient();
   var queries = useMemo(function () {
     return sources.map(function (_ref7) {
       var collectionId = _ref7.collectionId,
@@ -2062,55 +2166,60 @@ var useCheckRadiusQuerySupportBySource = function useCheckRadiusQuerySupportBySo
       return {
         queryKey: ['edr-radius-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
             var _details$data_queries2, _instance$data_querie2, instances, instance, details;
-            return _regenerator().w(function (_context9) {
-              while (1) switch (_context9.p = _context9.n) {
+            return _regenerator().w(function (_context7) {
+              while (1) switch (_context7.p = _context7.n) {
                 case 0:
-                  _context9.p = 0;
+                  _context7.p = 0;
                   if (!instanceId) {
-                    _context9.n = 2;
+                    _context7.n = 2;
                     break;
                   }
-                  _context9.n = 1;
-                  return getCollectionInstances(collectionId, url);
+                  _context7.n = 1;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url));
                 case 1:
-                  instances = _context9.v;
+                  instances = _context7.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context9.a(2, {
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie2 = instance.data_queries) != null && _instance$data_querie2.radius)
                   });
                 case 2:
-                  _context9.n = 3;
+                  _context7.n = 3;
                   return getCollectionDetails(collectionId, url);
                 case 3:
-                  details = _context9.v;
-                  return _context9.a(2, {
+                  details = _context7.v;
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: !!(details != null && (_details$data_queries2 = details.data_queries) != null && _details$data_queries2.radius)
                   });
                 case 4:
-                  _context9.p = 4;
-                  _context9.v;
-                  return _context9.a(2, {
+                  _context7.p = 4;
+                  _context7.v;
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee9, null, [[0, 4]]);
+            }, _callee7, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn9.apply(this, arguments);
+            return _queryFn7.apply(this, arguments);
           }
           return queryFn;
         }(),
-        staleTime: 5 * 60 * 1000 // Cache for 5 minutes
+        enabled: !referenceTimeUtils.isRelativeReferenceTime(instanceId),
+        staleTime: 5 * 60 * 1000,
+        // Cache for 5 minutes
+        placeholderData: function placeholderData(prev) {
+          return prev;
+        }
       };
     });
-  }, [sources]);
+  }, [sources, queryClient]);
   return useQueries({
     queries: queries,
     combine: function combine(queryResults) {
@@ -2160,20 +2269,20 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
         return {
           queryKey: ['edr-grid-points-disabled', collectionId],
           queryFn: function () {
-            var _queryFn0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
-              return _regenerator().w(function (_context0) {
-                while (1) switch (_context0.n) {
+            var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+              return _regenerator().w(function (_context8) {
+                while (1) switch (_context8.n) {
                   case 0:
-                    return _context0.a(2, {
+                    return _context8.a(2, {
                       sourceId: collectionId,
                       gridPoint: undefined,
                       allGridPoints: []
                     });
                 }
-              }, _callee0);
+              }, _callee8);
             }));
             function queryFn() {
-              return _queryFn0.apply(this, arguments);
+              return _queryFn8.apply(this, arguments);
             }
             return queryFn;
           }(),
@@ -2198,22 +2307,22 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
       return {
         queryKey: ['edr-grid-points-radius', collectionId, instanceId || '', centerCoordinates.join(','), radiusKm.toString(), datetime],
         queryFn: function () {
-          var _queryFn1 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+          var _queryFn9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
             var minimalParameters, minimalVerticalRange, rawData, allGridPoints, nearestPoint, minSquaredDistance;
-            return _regenerator().w(function (_context1) {
-              while (1) switch (_context1.p = _context1.n) {
+            return _regenerator().w(function (_context9) {
+              while (1) switch (_context9.p = _context9.n) {
                 case 0:
                   if (supportsRadius) {
-                    _context1.n = 1;
+                    _context9.n = 1;
                     break;
                   }
-                  return _context1.a(2, {
+                  return _context9.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
                 case 1:
-                  _context1.p = 1;
+                  _context9.p = 1;
                   // Optimization: Only request a single parameter to minimize data transfer
                   // We only need the grid point coordinates, not the actual sounding data
                   minimalParameters = parameters.slice(0, 1); // Just one parameter
@@ -2221,10 +2330,10 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
                   // (Don't hardcode '1000' as that only works for pressure-level sources,
                   // not for hybrid/model-level sources which use levels 1-65)
                   minimalVerticalRange = '';
-                  _context1.n = 2;
+                  _context9.n = 2;
                   return getEdrCollectionForRadius(collectionId, url, instanceId, centerCoordinates, radiusKm, minimalParameters, datetime, minimalVerticalRange);
                 case 2:
-                  rawData = _context1.v;
+                  rawData = _context9.v;
                   allGridPoints = extractGridPointsFromCoverage(rawData); // Find the nearest grid point to the center coordinates
                   minSquaredDistance = Infinity;
                   allGridPoints.forEach(function (point) {
@@ -2239,24 +2348,24 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
                       nearestPoint = point;
                     }
                   });
-                  return _context1.a(2, {
+                  return _context9.a(2, {
                     sourceId: collectionId,
                     gridPoint: nearestPoint,
                     allGridPoints: allGridPoints
                   });
                 case 3:
-                  _context1.p = 3;
-                  _context1.v;
-                  return _context1.a(2, {
+                  _context9.p = 3;
+                  _context9.v;
+                  return _context9.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
               }
-            }, _callee1, null, [[1, 3]]);
+            }, _callee9, null, [[1, 3]]);
           }));
           function queryFn() {
-            return _queryFn1.apply(this, arguments);
+            return _queryFn9.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2564,6 +2673,7 @@ var initialSoundingsViewState = {
   },
   shouldHideLocationMarkers: false,
   isTimeSliderVisible: true,
+  isLegendVisible: true,
   profileDataPreferences: DEFAULT_PROFILE_DATA_PREFERENCES,
   syncGroupsIds: []
 };
@@ -2633,7 +2743,7 @@ var slice = createSlice({
       }
       var preset = payloadAction.payload.preset;
       if (preset) {
-        var _preset$selectedSourc, _preset$selectedLocat, _preset$selectedTime, _preset$diagramType, _preset$shouldHideLoc, _preset$isTimeSliderV, _preset$profileDataPr;
+        var _preset$selectedSourc, _preset$selectedLocat, _preset$selectedTime, _preset$diagramType, _preset$shouldHideLoc, _preset$isTimeSliderV, _preset$isLegendVisib, _preset$profileDataPr;
         panel.selectedSources = (_preset$selectedSourc = preset.selectedSources) != null ? _preset$selectedSourc : {};
         panel.selectedLocations = (_preset$selectedLocat = preset.selectedLocations) != null ? _preset$selectedLocat : {};
         panel.selectedTime = (_preset$selectedTime = preset.selectedTime) != null ? _preset$selectedTime : new Date().toISOString();
@@ -2655,6 +2765,7 @@ var slice = createSlice({
         }
         panel.shouldHideLocationMarkers = (_preset$shouldHideLoc = preset.shouldHideLocationMarkers) != null ? _preset$shouldHideLoc : false;
         panel.isTimeSliderVisible = (_preset$isTimeSliderV = preset.isTimeSliderVisible) != null ? _preset$isTimeSliderV : true;
+        panel.isLegendVisible = (_preset$isLegendVisib = preset.isLegendVisible) != null ? _preset$isLegendVisib : true;
         panel.profileDataPreferences = (_preset$profileDataPr = preset.profileDataPreferences) != null ? _preset$profileDataPr : DEFAULT_PROFILE_DATA_PREFERENCES;
       }
     },
@@ -2713,6 +2824,13 @@ var slice = createSlice({
       }
       panel.isTimeSliderVisible = payloadAction.payload.isTimeSliderVisible;
     },
+    toggleLegendVisibility: function toggleLegendVisibility(draft, payloadAction) {
+      var panel = resolveSoundingsView(draft, payloadAction);
+      if (!panel) {
+        return;
+      }
+      panel.isLegendVisible = payloadAction.payload.isLegendVisible;
+    },
     updateProfileDataPreferences: function updateProfileDataPreferences(draft, payloadAction) {
       var panel = resolveSoundingsView(draft, payloadAction);
       if (!panel) {
@@ -2891,6 +3009,10 @@ var getIsTimeSliderVisible = createSelector(getSoundingsViewState, function (sto
   var _store$isTimeSliderVi;
   return (_store$isTimeSliderVi = store.isTimeSliderVisible) != null ? _store$isTimeSliderVi : true;
 }, selectorMemoizationOptions);
+var getIsLegendVisible = createSelector(getSoundingsViewState, function (store) {
+  var _store$isLegendVisibl;
+  return (_store$isLegendVisibl = store.isLegendVisible) != null ? _store$isLegendVisibl : true;
+}, selectorMemoizationOptions);
 var getProfileDataPreferences = createSelector(getSoundingsViewState, function (store) {
   var _store$profileDataPre;
   return (_store$profileDataPre = store.profileDataPreferences) != null ? _store$profileDataPre : DEFAULT_PROFILE_DATA_PREFERENCES;
@@ -2945,6 +3067,7 @@ var getSoundingPanelsInOrder = createSelector(getSoundingsViewState, function (s
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getDiagramType: getDiagramType,
+  getIsLegendVisible: getIsLegendVisible,
   getIsTimeSliderVisible: getIsTimeSliderVisible,
   getLocationSelections: getLocationSelections,
   getPanelCustomWidth: getPanelCustomWidth,
@@ -3034,12 +3157,13 @@ var useSoundingsTranslation = function useSoundingsTranslation() {
 };
 
 var SoundingsMarkersSwitch = function SoundingsMarkersSwitch(_ref) {
+  var _sx;
   var shouldHideMarkers = _ref.shouldHideMarkers,
     toggleMarkers = _ref.toggleMarkers;
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
   return jsxs(Box, {
-    sx: {
+    sx: (_sx = {
       display: 'flex',
       flexWrap: 'wrap',
       alignItems: 'flex-start',
@@ -3055,14 +3179,13 @@ var SoundingsMarkersSwitch = function SoundingsMarkersSwitch(_ref) {
       },
       '.markers-label': {
         display: 'none'
-      },
-      '@container soundings-container (min-width: 560px)': {
-        minWidth: '146px',
-        '.markers-label, .switch-button label': {
-          display: 'initial'
-        }
       }
-    },
+    }, _sx["@container " + SOUNDINGS_CONTAINER_NAME + " (min-width: " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+      minWidth: '146px',
+      '.markers-label, .switch-button label': {
+        display: 'initial'
+      }
+    }, _sx),
     children: [jsx(Typography, {
       className: "markers-label",
       sx: {
@@ -3087,6 +3210,7 @@ var SoundingsMarkersSwitch = function SoundingsMarkersSwitch(_ref) {
   });
 };
 
+var _styled;
 var _excluded = ["icon", "shortText", "longText"];
 var SoundingsTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
@@ -3105,30 +3229,27 @@ var SoundingsTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_ref
     })]
   }));
 });
-var SoundingsTopRowButton = styled(SoundingsTopRowButtonUnstyled)({
-  height: '10px !important',
-  '@container soundings-container (width < 560px)': {
-    maxWidth: '90px',
-    '& .longText': {
-      display: 'none'
-    },
-    '& svg': {
-      marginRight: '0 !important'
-    }
+var SoundingsTopRowButton = styled(SoundingsTopRowButtonUnstyled)((_styled = {
+  height: '10px !important'
+}, _styled["@container " + SOUNDINGS_CONTAINER_NAME + " (width < " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+  maxWidth: '90px',
+  '& .longText': {
+    display: 'none'
   },
-  '@container soundings-container (width >= 560px)': {
-    width: '130px',
-    '& .shortText': {
-      display: 'none'
-    }
-  },
-  '& span': {
-    fontSize: '9pt',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden'
+  '& svg': {
+    marginRight: '0 !important'
   }
-});
+}, _styled["@container " + SOUNDINGS_CONTAINER_NAME + " (min-width: " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+  width: '130px',
+  '& .shortText': {
+    display: 'none'
+  }
+}, _styled['& span'] = {
+  fontSize: '9pt',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+}, _styled));
 
 var MenuOptions;
 (function (MenuOptions) {
@@ -3138,20 +3259,26 @@ var MenuOptions;
   MenuOptions["profileData"] = "profileData";
 })(MenuOptions || (MenuOptions = {}));
 var SoundingsMenuBar = function SoundingsMenuBar(_ref) {
+  var _sx, _sx2;
   var handleClick = _ref.handleClick,
     isOpen = _ref.isOpen,
     _ref$selectedSourcesA = _ref.selectedSourcesAmount,
     selectedSourcesAmount = _ref$selectedSourcesA === void 0 ? 0 : _ref$selectedSourcesA,
     shouldHideMarkers = _ref.shouldHideMarkers,
-    toggleMarkers = _ref.toggleMarkers;
+    toggleMarkers = _ref.toggleMarkers,
+    isLegendVisible = _ref.isLegendVisible,
+    toggleLegend = _ref.toggleLegend;
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
   return jsxs(Stack, {
     direction: "row",
     spacing: 1,
-    sx: {
-      marginBottom: '4px'
-    },
+    sx: (_sx = {
+      marginBottom: '4px',
+      overflowX: 'auto'
+    }, _sx["@container " + SOUNDINGS_CONTAINER_NAME + " (min-width: " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+      overflowX: 'initial'
+    }, _sx),
     children: [jsx(SoundingsTopRowButton, {
       "data-testid": "soundingsManagerButton",
       icon: jsx(Layers, {}),
@@ -3195,6 +3322,23 @@ var SoundingsMenuBar = function SoundingsMenuBar(_ref) {
     }), jsx(SoundingsMarkersSwitch, {
       shouldHideMarkers: shouldHideMarkers,
       toggleMarkers: toggleMarkers
+    }), jsx(LegendToggleButton, {
+      hideTooltipText: t('soundings-legend-tooltip-hide'),
+      isLegendVisible: isLegendVisible,
+      legendLabel: t('soundings-legend'),
+      onToggle: toggleLegend,
+      showTooltipText: t('soundings-legend-tooltip-show'),
+      sx: (_sx2 = {}, _sx2["@container " + SOUNDINGS_CONTAINER_NAME + " (width < " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+        maxWidth: '90px',
+        '& .longText': {
+          display: 'none'
+        },
+        '& svg': {
+          marginRight: '0 !important'
+        }
+      }, _sx2["@container " + SOUNDINGS_CONTAINER_NAME + " (min-width: " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+        width: '130px'
+      }, _sx2)
     })]
   });
 };
@@ -3239,6 +3383,16 @@ var MenuBarConnect = function MenuBarConnect(_ref) {
   var shouldHideLocationMarkers = useSelector(function (state) {
     return getShouldHideLocationMarkers(state, viewId);
   });
+  var isLegendVisible = useSelector(function (state) {
+    return getIsLegendVisible(state, viewId);
+  });
+  var toggleLegend = React.useCallback(function () {
+    dispatch(soundingsActions.toggleLegendVisibility({
+      isLegendVisible: !isLegendVisible,
+      viewId: viewId,
+      origin: SoundingsActionOrigin.soundingsComponent
+    }));
+  }, [dispatch, isLegendVisible, viewId]);
   var toggleLocationMarkers = React.useCallback(function (shouldHide) {
     dispatch(soundingsActions.toggleLocationMarkers({
       shouldHideLocationMarkers: shouldHide,
@@ -3273,9 +3427,11 @@ var MenuBarConnect = function MenuBarConnect(_ref) {
   var isOpen = (_isOpen = {}, _isOpen[MenuOptions.sources] = currentActiveMapIdSources === viewId && isSourcesOpenInStore, _isOpen[MenuOptions.locations] = currentActiveMapIdLocations === viewId && isLocationsOpenInStore, _isOpen[MenuOptions.soundingsManager] = currentActiveMapIdsoundingsManager === viewId && isSoundingsManagerOpenInStore, _isOpen[MenuOptions.profileData] = currentActiveMapIdProfileData === viewId && isProfileDataOpenInStore, _isOpen);
   return jsx(SoundingsMenuBar, {
     handleClick: handleClick,
+    isLegendVisible: isLegendVisible,
     isOpen: isOpen,
     selectedSourcesAmount: sourcesAmount,
     shouldHideMarkers: shouldHideLocationMarkers,
+    toggleLegend: toggleLegend,
     toggleMarkers: toggleLocationMarkers
   });
 };
@@ -3891,7 +4047,7 @@ var Hodograph = function Hodograph(_ref) {
       });
     });
     // Allow zooming and panning
-    var zoomBehavior = d3.zoom().scaleExtent([1, 7]).translateExtent([[-0.2 * widthHeight, -0.2 * widthHeight], [1.2 * widthHeight, 1.2 * widthHeight]]).on('zoom', function (event) {
+    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);
@@ -3930,13 +4086,13 @@ var getLegendItem = function getLegendItem(color, text) {
 var HodographLegend = function HodographLegend() {
   return jsxs(Stack, {
     direction: "column",
-    useFlexGap: true,
     sx: {
       justifyContent: 'center',
       flexWrap: 'wrap',
       paddingLeft: 2,
       paddingTop: 0.5
     },
+    useFlexGap: true,
     children: [getLegendItem(HODOGRAPH_COLORS[0], '0 - 1 km'), getLegendItem(HODOGRAPH_COLORS[1], '1 - 3 km'), getLegendItem(HODOGRAPH_COLORS[2], '3 - 6 km'), getLegendItem(HODOGRAPH_COLORS[3], '6 - 9 km'), getLegendItem(HODOGRAPH_COLORS[4], '9 - 19 km')]
   });
 };
@@ -4245,23 +4401,21 @@ var extractPressureFromY = function extractPressureFromY(diagramType, y, yScale)
 };
 var drawSoundingsTooltip = function drawSoundingsTooltip(_ref) {
   var event = _ref.event,
-    yScale = _ref.yScale,
     svgRectangle = _ref.svgRectangle,
+    hoveredPressure = _ref.hoveredPressure,
     pressureRefd3 = _ref.pressureRefd3,
     tempRefd3 = _ref.tempRefd3,
     dewpointRefd3 = _ref.dewpointRefd3,
     windRefd3 = _ref.windRefd3,
     margin = _ref.margin,
     width = _ref.width,
-    tooltipData = _ref.tooltipData,
-    diagramType = _ref.diagramType;
+    tooltipData = _ref.tooltipData;
+    _ref.diagramType;
   if (tooltipData.length === 0) {
     return;
   }
-  var _d3$pointer = d3.pointer(event),
-    y = _d3$pointer[1];
   var pressureY = event.clientY - svgRectangle.top - 10;
-  var pressure = extractPressureFromY(diagramType, y, yScale);
+  var pressure = hoveredPressure;
   var interpolatedData = tooltipData.map(function (dataSet) {
     return {
       hoveredPressure: dataSet.interpolatePressure(pressure),
@@ -4460,6 +4614,7 @@ var drawIsothermsBijvoet = function drawIsothermsBijvoet(_ref2) {
     xScale = _ref2.xScale,
     yScale = _ref2.yScale,
     svg = _ref2.svg,
+    labelSvg = _ref2.labelSvg,
     height = _ref2.height,
     d3GraphId = _ref2.d3GraphId;
   // lines of constant temperature (2 degree interval from -150...+40C)
@@ -4477,7 +4632,7 @@ var drawIsothermsBijvoet = function drawIsothermsBijvoet(_ref2) {
     var strID = temp + "-isotherm-BIJVOET";
     svg.append('path').attr('id', strID).attr('d', pathString).style('fill', 'none').style('stroke-width', temp % 10 === 0 ? 2 : 1).style('stroke', temp === 0 ? '#D27D2D' : 'orange').style('stroke-opacity', 0.5).attr('clip-path', "url(#clip-" + d3GraphId + "-BIJVOETd3)");
     if (temp % 10 === 0 && ((_points$ = points[0]) == null ? void 0 : _points$[1]) === height) {
-      svg.append('text').text(temp).attr('text-anchor', 'middle').attr('x', points[0][0] + "px").attr('y', height + 12 + "px").attr('fill', temp === 0 ? '#D27D2D' : 'orange').attr('font-size', '10px');
+      (labelSvg != null ? labelSvg : svg).append('text').text(temp).attr('text-anchor', 'middle').attr('x', points[0][0] + "px").attr('y', height + 12 + "px").attr('fill', temp === 0 ? '#D27D2D' : 'orange').attr('font-size', '10px');
     }
   }
 };
@@ -4620,6 +4775,7 @@ var drawStaticLines = function drawStaticLines(_ref) {
     minPressure = _ref.minPressure,
     maxPressure = _ref.maxPressure,
     svg = _ref.svg,
+    bijvoetLabelSvg = _ref.bijvoetLabelSvg,
     d3GraphId = _ref.d3GraphId;
   drawIsobars({
     diagramType: diagramType,
@@ -4643,6 +4799,7 @@ var drawStaticLines = function drawStaticLines(_ref) {
       xScale: xScale,
       yScale: yScale,
       svg: svg,
+      labelSvg: bijvoetLabelSvg,
       height: height,
       d3GraphId: d3GraphId
     });
@@ -4731,6 +4888,11 @@ var soundingsStyle$1 = {
     fontSize: '12px',
     fontWeight: 'bold'
   }};
+var updateTransformToViewport = function updateTransformToViewport(transform, width, height) {
+  var minX = width * (1 - transform.k);
+  var minY = height * (1 - transform.k);
+  return d3.zoomIdentity.translate(Math.min(0, Math.max(minX, transform.x)), Math.min(0, Math.max(minY, transform.y))).scale(transform.k);
+};
 var Soundings = function Soundings(_ref) {
   var d3GraphId = _ref.d3GraphId,
     data = _ref.data,
@@ -4739,6 +4901,8 @@ var Soundings = function Soundings(_ref) {
     showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
     _ref$diagramType = _ref.diagramType,
     diagramType = _ref$diagramType === void 0 ? 'SKEWT' : _ref$diagramType;
+  var instanceId = useId().replace(/:/g, '_');
+  var scopedGraphId = d3GraphId + "-" + instanceId;
   var svgRef = useRef(null);
   var canvasRef = useRef(null);
   var pressureRef = useRef(null);
@@ -4750,8 +4914,21 @@ var Soundings = function Soundings(_ref) {
   var widthRef = useRef(0);
   var svgRectRef = useRef(null);
   var tooltipDataRef = useRef(null);
+  var zoomBehaviorRef = useRef(null);
+  // Keep zoom target on the inner translated <g>; Soundings and WindBarbs must
+  // transform the same coordinate space to stay aligned.
+  var zoomTargetRef = useRef(null);
+  var isApplyingSharedZoomRef = useRef(false);
+  // Keep the last applied d3 zoom transform across SVG redraws.
+  // Width/height changes recreate the chart, so this ref prevents zoom snapping
+  // back to identity when panels are closed/resized.
+  var persistedZoomTransformRef = useRef(d3.zoomIdentity);
+  var previousDiagramTypeRef = useRef(null);
   var _useSharedMouseY = useSharedMouseY(),
-    clientY = _useSharedMouseY.clientY;
+    clientY = _useSharedMouseY.clientY,
+    publishVerticalZoom = _useSharedMouseY.publishVerticalZoom,
+    verticalZoom = _useSharedMouseY.verticalZoom,
+    resetVerticalZoom = _useSharedMouseY.resetVerticalZoom;
   // Set SVG dimensions (required props; no optional chaining needed)
   var baseWidth = svgDimensions.width,
     baseHeight = svgDimensions.height,
@@ -4759,17 +4936,31 @@ var Soundings = function Soundings(_ref) {
   var width = baseWidth - (margin.left + margin.right);
   var height = baseHeight - (margin.top + margin.bottom);
   useEffect(function () {
-    if (!svgRef.current) {
+    if (!svgRef.current || width <= 0 || height <= 0) {
       return;
     }
+    var isDiagramTypeChange = previousDiagramTypeRef.current !== null && previousDiagramTypeRef.current !== diagramType;
+    if (isDiagramTypeChange) {
+      persistedZoomTransformRef.current = d3.zoomIdentity;
+      resetVerticalZoom(scopedGraphId);
+    }
+    var root = d3.select(svgRef.current);
+    root.selectAll('*').remove();
     var svg = initializeSvg$1({
       svgRef: svgRef,
       width: width,
       height: height,
       margin: margin,
       diagramType: diagramType,
-      d3GraphId: d3GraphId
+      d3GraphId: scopedGraphId
     });
+    // Create a separate layer for axes so they can stay visible above the zoomed content.
+    var axisLayer = svg.append('g').attr('data-layer', 'axis-layer');
+    // Keep a static viewport group for clipping, and transform only the inner
+    // content group during zoom so the visible area stays fixed.
+    var zoomViewport = svg.append('g').attr('data-layer', 'zoom-viewport').attr('clip-path', "url(#clip-" + scopedGraphId + "-" + diagramType + "d3)");
+    var zoomContent = zoomViewport.append('g').attr('data-layer', 'zoom-content');
+    var bijvoetLabelLayer = svg.append('g').attr('data-layer', 'bijvoet-label-layer').style('pointer-events', 'none');
     var svgRectangle = svgRef.current.getBoundingClientRect();
     svgRectRef.current = svgRectangle;
     marginRef.current = margin;
@@ -4780,13 +4971,19 @@ var Soundings = function Soundings(_ref) {
       xScale = _createScales[0],
       yScale = _createScales[1];
     yScaleRef.current = yScale;
+    var applyAxisClips = function applyAxisClips() {
+      axisLayer.select('g[type="x-axis"] path.domain').attr('d', "M0.5,0.5H" + (width + 0.5));
+      axisLayer.select('g[type="x-axis"]').attr('clip-path', "url(#clip-" + scopedGraphId + "-" + diagramType + "x-axis)");
+      axisLayer.select('g[type="y-axis"]').attr('clip-path', "url(#clip-" + scopedGraphId + "-" + diagramType + "y-axis)");
+    };
     drawAxes$1({
-      svg: svg,
+      svg: axisLayer,
       xScale: xScale,
       yScale: yScale,
       height: height,
       diagramType: diagramType
     });
+    applyAxisClips();
     drawStaticLines({
       diagramType: diagramType,
       dp: dp,
@@ -4799,8 +4996,9 @@ var Soundings = function Soundings(_ref) {
       yScale: yScale,
       minPressure: minPressure,
       maxPressure: maxPressure,
-      svg: svg,
-      d3GraphId: d3GraphId
+      svg: zoomContent,
+      bijvoetLabelSvg: bijvoetLabelLayer,
+      d3GraphId: scopedGraphId
     });
     data.forEach(function (features, index) {
       var color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
@@ -4815,10 +5013,11 @@ var Soundings = function Soundings(_ref) {
         pressureValues: pressureValues,
         color: color,
         lineStyle: 'none',
+        d3GraphId: scopedGraphId,
         xScale: xScale,
         yScale: yScale,
         height: height,
-        svg: svg,
+        svg: zoomContent,
         diagramType: diagramType
       });
       var dewpointValues = features.map(function (feature) {
@@ -4829,20 +5028,89 @@ var Soundings = function Soundings(_ref) {
         pressureValues: pressureValues,
         color: color,
         lineStyle: '8, 2',
+        d3GraphId: scopedGraphId,
         xScale: xScale,
         yScale: yScale,
         height: height,
-        svg: svg,
+        svg: zoomContent,
         diagramType: diagramType
       });
     });
     tooltipDataRef.current = constructTooltipData(data);
-    var svgRefCur = svgRef.current;
-    // eslint-disable-next-line consistent-return, @typescript-eslint/explicit-function-return-type
+    var zoomTarget = zoomContent.node();
+    if (!zoomTarget) {
+      return;
+    }
+    zoomTargetRef.current = zoomTarget;
+    var bijvoetLabelTarget = bijvoetLabelLayer.node();
+    if (!bijvoetLabelTarget) {
+      return;
+    }
+    var applyZoomTransform = function applyZoomTransform(transform) {
+      d3.select(zoomTarget).attr('transform', transform.toString());
+      d3.select(bijvoetLabelTarget).attr('transform', transform.toString());
+    };
+    // Allow zooming and panning
+    var zoomBehavior = d3.zoom().scaleExtent([1, 7]).extent([[0, 0], [width, height]]).translateExtent([[0, 0], [width, height]]).on('zoom', function (event) {
+      // Persist every interactive zoom/pan event so the transform can be
+      // restored after dimension-driven rerenders.
+      persistedZoomTransformRef.current = event.transform;
+      applyZoomTransform(event.transform);
+      var zoomedXScale = event.transform.rescaleX(xScale);
+      var zoomedYScale = event.transform.rescaleY(yScale);
+      var axisXScale = diagramType === 'SKEWT' ? xScale.copy().range(xScale.range().map(function (xValue) {
+        // Skew-T X uses x + (height - y). To keep tick labels tied to
+        // isotherm intersections on the bottom axis, apply the same
+        // transformed bottom-edge offset to the axis scale.
+        var skewBottomOffset = (event.transform.k - 1) * height + event.transform.y;
+        return event.transform.k * xValue + event.transform.x + skewBottomOffset;
+      })) : zoomedXScale;
+      var axisYScale = diagramType === 'BIJVOET' ? yScale.copy().range(yScale.range().map(function (yValue) {
+        return event.transform.k * yValue + event.transform.y;
+      })) : zoomedYScale;
+      axisLayer.selectAll('*').remove();
+      drawAxes$1({
+        svg: axisLayer,
+        xScale: axisXScale,
+        yScale: axisYScale,
+        height: height,
+        diagramType: diagramType
+      });
+      applyAxisClips();
+      if (!isApplyingSharedZoomRef.current) {
+        publishVerticalZoom(scopedGraphId, event.transform.k, event.transform.y);
+      }
+    });
+    zoomBehaviorRef.current = zoomBehavior;
+    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
+    // operations preserve the current zoom level/pan offset.
+    if (hasPersistedTransform) {
+      isApplyingSharedZoomRef.current = true;
+      svg.call(zoomBehavior.transform, previousTransform);
+      isApplyingSharedZoomRef.current = false;
+    }
+    // Keep shared zoom state aligned with the effective transform that was
+    // restored after resize so companion panels (WindBarbs) do not wait for the
+    // next interactive zoom event.
+    publishVerticalZoom(scopedGraphId, previousTransform.k, previousTransform.y);
+    previousDiagramTypeRef.current = diagramType;
+    // eslint-disable-next-line consistent-return
     return function () {
-      d3.select(svgRefCur).selectAll('*').remove();
+      // Read the transform directly from d3's internal zoom state before this
+      // chart instance is torn down, then reuse it on the next mount pass.
+      var zoomState = zoomTarget.__zoom;
+      if (zoomState) {
+        persistedZoomTransformRef.current = zoomState;
+      }
+      svg.on('zoom', null);
+      zoomBehaviorRef.current = null;
+      zoomTargetRef.current = null;
+      root.selectAll('*').remove();
     };
-  }, [data, diagramType, width, height, d3GraphId, margin]);
+  }, [data, diagramType, width, height, scopedGraphId, margin, publishVerticalZoom, resetVerticalZoom]);
   useEffect(function () {
     var _svgRectRef$current;
     if (!showTooltip || !svgRef.current) {
@@ -4876,19 +5144,22 @@ var Soundings = function Soundings(_ref) {
     var maxT = maxTemperature;
     var _createScales2 = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT),
       yScale = _createScales2[1];
+    var pointerY = clientY - rect.top - marginRef.current.top;
+    var unscaledY = (pointerY - verticalZoom.y) / verticalZoom.scale;
+    var hoveredPressure = extractPressureFromY(diagramType, unscaledY, yScale);
     drawSoundingsTooltip({
       event: synthetic,
-      yScale: yScale,
       svgRectangle: rect,
       margin: marginRef.current,
       width: widthRef.current,
+      hoveredPressure: hoveredPressure,
       pressureRefd3: pressureRefd3,
       tempRefd3: tempRefd3,
       dewpointRefd3: dewpointRefd3,
       tooltipData: tooltipDataRef.current,
       diagramType: diagramType
     });
-  }, [clientY, showTooltip, diagramType, data, width, height]);
+  }, [clientY, showTooltip, diagramType, data, width, height, verticalZoom.scale, verticalZoom.y]);
   return jsxs(Box, {
     ref: canvasRef,
     sx: {
@@ -5098,7 +5369,10 @@ var SoundingsTimeSlider = function SoundingsTimeSlider(_ref) {
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var OFFSET_HEIGHT = 100; // Space reserved in layout
-var useSoundingsDiagramSize = function useSoundingsDiagramSize(ref) {
+var useSoundingsDiagramSize = function useSoundingsDiagramSize(ref, useWidth) {
+  if (useWidth === void 0) {
+    useWidth = true;
+  }
   var _React$useState = React.useState(0),
     size = _React$useState[0],
     setSize = _React$useState[1];
@@ -5115,14 +5389,14 @@ var useSoundingsDiagramSize = function useSoundingsDiagramSize(ref) {
         width = _entries$0$contentRec.width,
         height = _entries$0$contentRec.height;
       var availableHeight = height - TIMESLIDER_HEIGHT + OFFSET_HEIGHT;
-      var nextSize = Math.floor(Math.min(width, availableHeight));
+      var nextSize = useWidth ? Math.floor(Math.min(width, availableHeight)) : Math.floor(availableHeight);
       setSize(nextSize > 0 ? nextSize : 0);
     });
     resizeObserver.observe(container);
     return function () {
       resizeObserver.disconnect();
     };
-  }, [ref]);
+  }, [ref, useWidth]);
   return size;
 };
 
@@ -5377,7 +5651,9 @@ var drawWindBarbs = function drawWindBarbs(_ref) {
     _ref$barbColor = _ref.barbColor,
     barbColor = _ref$barbColor === void 0 ? 'black' : _ref$barbColor,
     _ref$columnOffsetX = _ref.columnOffsetX,
-    columnOffsetX = _ref$columnOffsetX === void 0 ? 0 : _ref$columnOffsetX;
+    columnOffsetX = _ref$columnOffsetX === void 0 ? 0 : _ref$columnOffsetX,
+    _ref$verticalScale = _ref.verticalScale,
+    verticalScale = _ref$verticalScale === void 0 ? 1 : _ref$verticalScale;
   var barbsSize = 40;
   var scalingFactor = 0.5;
   var horizontalBarbMargin = barbsSize * scalingFactor + 5;
@@ -5391,14 +5667,14 @@ var drawWindBarbs = function drawWindBarbs(_ref) {
   if (!currentWidth) {
     return;
   }
-  // Add extra width to all isobars needed for the windbarbs
-  d3.selectAll('path[type="isobar"]').each(function (_d, i, nodes) {
+  // Add extra width to isobars in this SVG only.
+  rootSvg.selectAll('path[type="isobar"]').each(function (_d, i, nodes) {
     var path = d3.select(nodes[i]).attr('d');
     var newD = extendIsoBar(path, horizontalBarbMargin);
     d3.select(nodes[i]).attr('d', newD).attr('clip-path', null);
   });
-  // Add extra width to x-axis needed for the windbarbs
-  d3.select('g[type="x-axis"] path.domain').each(function (_d, i, nodes) {
+  // Add extra width to x-axis in this SVG only.
+  rootSvg.select('g[type="x-axis"] path.domain').each(function (_d, i, nodes) {
     var path = d3.select(nodes[i]).attr('d');
     var newD = extendXAxis(path, horizontalBarbMargin);
     d3.select(nodes[i]).attr('d', newD);
@@ -5408,10 +5684,10 @@ var drawWindBarbs = function drawWindBarbs(_ref) {
   // Place the barbs just to the right of the plotting area.
   // plotGroup's origin is already translated to (margin.left, margin.top),
   // and its width equals `width`.
-  var windBarbColumnX = width + 5 + columnOffsetX;
-  var barbGroup = plotGroup.append('g').attr('class', 'wind-group').attr('transform', // This translation should be revisited when implementing
-  // the plotting of several datasets at once
-  "translate(" + windBarbColumnX + ", 0)");
+  var windBarbColumnX = width + 5 + columnOffsetX + horizontalBarbMargin;
+  var barbGroup = plotGroup.append('g').attr('class', 'wind-group').attr('transform', // Apply translation and counter-scale to maintain aspect ratio during vertical zoom.
+  // The counter-scale (1, 1/verticalScale) undoes the parent's vertical scaling.
+  "translate(" + windBarbColumnX + ", 0) scale(1, " + 1 / verticalScale + ")");
   barbGroup.selectAll('g').data(visibleItems).enter().append('g').attr('id', 'wind-barb').each(function handleBarb(data) {
     var group = d3.select(this);
     var windSymbol = getWindSymbol(data.windSpeed);
@@ -5437,9 +5713,10 @@ var drawWindBarbs = function drawWindBarbs(_ref) {
       var cy = bbox.y + bbox.height / 2;
       var rotation = 180 + data.windDirection;
       var y = yScale(data.pressure);
-      // Place items in the correct vertical position
-      // Correcting for barbSize
-      group.attr('transform', "translate(0, " + (y - barbsSize * scalingFactor / 8) + ")");
+      // Place items in the correct vertical position.
+      // Apply verticalScale to compensate for the parent's counter-scale,
+      // ensuring barbs appear at the correct zoomed Y position.
+      group.attr('transform', "translate(0, " + (y - barbsSize * scalingFactor / 8) * verticalScale + ")");
       // Rotate accordingly, and scale
       innerGroup.attr('transform', "rotate(" + rotation + ") scale(" + scalingFactor + ") translate(" + -cx + ", " + -cy + ")");
     }
@@ -5495,6 +5772,10 @@ var soundingsStyle = {
   }
 };
 var WIND_BARB_OFFSET_X = 35;
+var getVerticalOnlyTransform = function getVerticalOnlyTransform(scale, yOffset) {
+  // Keep x-axis unchanged, apply shared zoom on y-axis only.
+  return "matrix(1, 0, 0, " + scale + ", 0, " + yOffset + ")";
+};
 /**
  * Check if the sounding data is effectively empty.
  * Data can be empty in two ways:
@@ -5530,8 +5811,12 @@ var WindBarbs = function WindBarbs(_ref) {
   var widthRef = useRef(0);
   var svgRectRef = useRef(null);
   var tooltipDataRef = useRef(null);
+  // Must point to the inner translated <g> to match Soundings zoom coordinate space.
+  var zoomTargetRef = useRef(null);
   var _useSharedMouseY = useSharedMouseY(),
-    clientY = _useSharedMouseY.clientY;
+    clientY = _useSharedMouseY.clientY,
+    verticalZoom = _useSharedMouseY.verticalZoom,
+    resetVerticalZoom = _useSharedMouseY.resetVerticalZoom;
   // Set SVG dimensions (required props; no optional chaining needed)
   var baseWidth = svgDimensions.width,
     baseHeight = svgDimensions.height,
@@ -5539,7 +5824,7 @@ var WindBarbs = function WindBarbs(_ref) {
   var width = baseWidth - (margin.left + margin.right);
   var height = baseHeight - (margin.top + margin.bottom);
   useEffect(function () {
-    if (!svgRef.current) {
+    if (!svgRef.current || width <= 0 || height <= 0) {
       return;
     }
     var root = d3.select(svgRef.current);
@@ -5552,8 +5837,9 @@ var WindBarbs = function WindBarbs(_ref) {
       diagramType: diagramType,
       d3GraphId: d3GraphId
     });
-    // When Soundings is dragged close, animate the Wind Barbs to resize back to the height where dragging started
+    // When Soundings is dragged closed, reset the zoom level and animate the Wind Barbs to resize back to the height where dragging started
     if (animateResize) {
+      resetVerticalZoom(d3GraphId);
       animateResizeTransform(svg, margin, height, prevInnerHeightRef);
     }
     var svgRectangle = svgRef.current.getBoundingClientRect();
@@ -5591,18 +5877,33 @@ var WindBarbs = function WindBarbs(_ref) {
         width: width,
         margin: margin,
         barbColor: color,
-        columnOffsetX: index * WIND_BARB_OFFSET_X
+        columnOffsetX: index * WIND_BARB_OFFSET_X,
+        verticalScale: verticalZoom.scale
       });
     });
     // Clear or update tooltip data based on whether we have actual data
     tooltipDataRef.current = isDataEmpty(data) ? null : constructTooltipData(data);
     // Update previous inner height after drawing so animation uses the prior value
     prevInnerHeightRef.current = height;
+    var zoomTarget = svg.node();
+    if (!zoomTarget) {
+      return;
+    }
+    zoomTargetRef.current = zoomTarget;
+    // Initialize with shared zoom state from Soundings.
+    d3.select(zoomTarget).attr('transform', getVerticalOnlyTransform(verticalZoom.scale, verticalZoom.y));
     // eslint-disable-next-line consistent-return, @typescript-eslint/explicit-function-return-type
     return function () {
+      zoomTargetRef.current = null;
       root.selectAll('*').remove();
     };
-  }, [data, diagramType, width, height, d3GraphId, margin, animateResize]);
+  }, [data, diagramType, width, height, d3GraphId, margin, animateResize, verticalZoom.scale, verticalZoom.y, resetVerticalZoom]);
+  useEffect(function () {
+    if (!zoomTargetRef.current) {
+      return;
+    }
+    d3.select(zoomTargetRef.current).attr('transform', getVerticalOnlyTransform(verticalZoom.scale, verticalZoom.y));
+  }, [verticalZoom]);
   useEffect(function () {
     var _svgRectRef$current;
     if (!showTooltip || !svgRef.current || !windRef.current) {
@@ -5630,18 +5931,27 @@ var WindBarbs = function WindBarbs(_ref) {
       target: svgRef.current,
       currentTarget: svgRef.current
     };
+    var pointerY = clientY - rect.top - marginRef.current.top;
+    var unscaledY = (pointerY - verticalZoom.y) / verticalZoom.scale;
+    var hoveredPressure = extractPressureFromY(diagramType, unscaledY, yScaleRef.current);
+    var transformedY = yScaleRef.current(hoveredPressure) * verticalZoom.scale + verticalZoom.y;
+    var pressureLineY = transformedY + marginRef.current.top;
     var windRefd3 = d3.select(windRef.current);
     drawSoundingsTooltip({
       event: synthetic,
-      yScale: yScaleRef.current,
       svgRectangle: rect,
       margin: marginRef.current,
       width: widthRef.current,
+      hoveredPressure: hoveredPressure,
       windRefd3: windRefd3,
       tooltipData: tooltipDataRef.current,
       diagramType: diagramType
     });
-  }, [clientY, showTooltip, diagramType, data]);
+    var tooltipHeight = windRef.current.getBoundingClientRect().height;
+    var centeredTop = pressureLineY - tooltipHeight / 2;
+    var clampedTop = Math.max(0, Math.min(centeredTop, rect.height - tooltipHeight));
+    windRef.current.style.top = clampedTop + "px";
+  }, [clientY, showTooltip, diagramType, data, verticalZoom.scale, verticalZoom.y]);
   return jsxs(Box, {
     ref: canvasRef,
     sx: {
@@ -5859,10 +6169,10 @@ var SoundingsProfileDataTable = function SoundingsProfileDataTable(_ref2) {
             py: 4
           },
           children: jsx(Typography, {
-            variant: "body2",
             sx: {
               color: 'text.secondary'
             },
+            variant: "body2",
             children: t('no-sounding-data-available')
           })
         }) : jsx(Box, {
@@ -5884,7 +6194,9 @@ var SoundingsProfileDataTable = function SoundingsProfileDataTable(_ref2) {
             },
             style: {
               height: '100%',
-              width: '100%'
+              width: '100%',
+              minWidth: tableMinWidth,
+              overflowX: 'hidden'
             }
           })
         })]
@@ -5903,32 +6215,42 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
     panelComponent = _ref.panelComponent,
     profileDataPreferences = _ref.profileDataPreferences;
   var soundingsContentRef = React.useRef(null);
+  var windBarbsContentRef = React.useRef(null);
   var diagramSize = useSoundingsDiagramSize(soundingsContentRef);
-  var _React$useState = React.useState(false),
-    soundingsIsClosed = _React$useState[0],
-    setSoundingsIsClosed = _React$useState[1];
-  var _React$useState2 = React.useState(null),
-    previousHeight = _React$useState2[0],
-    setPreviousHeight = _React$useState2[1];
+  var windBarbsDiagramSize = useSoundingsDiagramSize(windBarbsContentRef, false);
+  var soundingsIsOpen = React.useMemo(function () {
+    var _soundingPanelsInOrde;
+    return ((_soundingPanelsInOrde = soundingPanelsInOrder.find(function (panel) {
+      return panel.id === 'soundings';
+    })) == null ? void 0 : _soundingPanelsInOrde.isOpen) || false;
+  }, [soundingPanelsInOrder]);
+  var _React$useState = React.useState(null),
+    previousHeight = _React$useState[0],
+    setPreviousHeight = _React$useState[1];
   var firstSelectedSourceData = React.useMemo(function () {
     var _data$;
     return (_data$ = data[0]) != null ? _data$ : [];
   }, [data]);
+  var windBarbsHeight = React.useMemo(function () {
+    if (soundingsIsOpen) {
+      return diagramSize;
+    }
+    return previousHeight != null ? previousHeight : windBarbsDiagramSize;
+  }, [diagramSize, previousHeight, soundingsIsOpen, windBarbsDiagramSize]);
   var sizeRef = React.useRef(diagramSize);
   var isResizingRef = React.useRef(false);
   React.useEffect(function () {
     sizeRef.current = diagramSize;
   }, [diagramSize]);
   React.useEffect(function () {
-    if (previousHeight == null && diagramSize > 0) {
+    if (previousHeight == null && diagramSize > 24) {
       setPreviousHeight(diagramSize);
     }
   }, [diagramSize, previousHeight]);
   var preserveWindBarbsGrowBackHeight = React.useCallback(function () {
-    if (sizeRef.current > 0) {
-      setPreviousHeight(sizeRef.current);
-    }
-  }, []);
+    var nextHeight = sizeRef.current > 24 ? sizeRef.current : windBarbsDiagramSize;
+    setPreviousHeight(nextHeight);
+  }, [windBarbsDiagramSize]);
   var handleSoundingsResizeStart = React.useCallback(function () {
     isResizingRef.current = true;
     preserveWindBarbsGrowBackHeight();
@@ -5941,7 +6263,6 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
     if (isClosingViaClick) {
       preserveWindBarbsGrowBackHeight();
     }
-    setSoundingsIsClosed(!isOpen);
   }, [preserveWindBarbsGrowBackHeight]);
   var panels = soundingPanelsInOrder.flatMap(function (_ref2) {
     var id = _ref2.id,
@@ -5985,9 +6306,10 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
           name: 'Wind Barbs',
           isDisplayed: isDisplayed,
           maxWidth: 200,
+          panelRef: windBarbsContentRef,
           render: function render() {
             return jsx(WindBarbs, {
-              animateResize: Boolean(soundingsIsClosed && previousHeight),
+              animateResize: Boolean(!soundingsIsOpen && previousHeight),
               d3GraphId: normalizedId,
               data: data,
               diagramType: chosenDiagramType,
@@ -5999,7 +6321,7 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
                   right: 25,
                   top: 0
                 },
-                height: soundingsIsClosed ? previousHeight != null ? previousHeight : diagramSize : diagramSize
+                height: windBarbsHeight
               }
             });
           }
@@ -6192,6 +6514,26 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
       previousLocationsRef.current = {};
     }
   }, [currentSoundingsPreset, dispatch, soundingsPreset, viewId]);
+  var syncgroupTimeState = useSyncgroupTimeState(viewId, 0);
+  var syncgroupSelectedTime = useMemo(function () {
+    if ((syncgroupTimeState == null ? void 0 : syncgroupTimeState.current) === undefined || !Number.isFinite(syncgroupTimeState.current)) {
+      return undefined;
+    }
+    return dateUtils.fromUnix(syncgroupTimeState.current).toISOString();
+  }, [syncgroupTimeState]);
+  var isTimeSynced = !!syncgroupSelectedTime;
+  React.useEffect(function () {
+    if (soundingsPreset != null && soundingsPreset.selectedTime && isTimeSynced) {
+      // trigger sync of time to map when preset has selectedTime
+      dispatch(genericActions.setTime({
+        sourceId: viewId,
+        origin: 'SoundingsConnect',
+        value: {
+          currentTime: handleDateUtilsISOString(soundingsPreset.selectedTime)
+        }
+      }));
+    }
+  }, [dispatch, isTimeSynced, soundingsPreset == null ? void 0 : soundingsPreset.selectedTime, viewId]);
   useRegisterFeatureSyncSource(viewId);
   var selectedTime = useSelector(function (state) {
     return getSelectedTime(state, viewId);
@@ -6212,6 +6554,9 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var locationSelections = useSelector(function (state) {
     return getLocationSelections(state, viewId);
   }, shallowEqual);
+  var soundingsCollections = useSelector(function (state) {
+    return getSoundingsCollections(state);
+  });
   var diagramType = useSelector(function (state) {
     return getDiagramType(state, viewId);
   });
@@ -6221,9 +6566,15 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var profileDataPreferences = useSelector(function (state) {
     return getProfileDataPreferences(state, viewId);
   });
+  var isLegendVisible = useSelector(function (state) {
+    return getIsLegendVisible(state, viewId);
+  });
   var selectedMapIds = useSelector(function (state) {
     return genericSelectors.getLinkedTargetIds(state, viewId);
   }, shallowEqual);
+  var ownedFeatureLayerIds = useSelector(function (state) {
+    return genericSelectors.selectFeatureSyncLayerIdsForPanel(state, viewId);
+  }, shallowEqual);
   var linkedPanelIdsByMapId = useSelector(function (state) {
     return Object.fromEntries(selectedMapIds.map(function (mapId) {
       return [mapId, genericSelectors.selectLinkedPanelIdsForMap(state, mapId)];
@@ -6232,14 +6583,6 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var firstLinkedMapId = selectedMapIds[0];
   var _useTimesteps = useTimesteps(resolvedSourceSelections),
     sourceTimesteps = _useTimesteps.data;
-  var syncgroupTimeState = useSyncgroupTimeState(viewId, 0);
-  var syncgroupSelectedTime = useMemo(function () {
-    if ((syncgroupTimeState == null ? void 0 : syncgroupTimeState.current) === undefined || !Number.isFinite(syncgroupTimeState.current)) {
-      return undefined;
-    }
-    return dateUtils.fromUnix(syncgroupTimeState.current).toISOString();
-  }, [syncgroupTimeState]);
-  var isTimeSynced = !!syncgroupSelectedTime;
   var selectedTimeInUse = syncgroupSelectedTime || selectedTime;
   var timeMismatchInfo = useMemo(function () {
     return getTimeMismatchInfo(isTimeSynced, selectedTimeInUse, sourceTimesteps);
@@ -6270,23 +6613,23 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   // Ref for reading selectedMapPin in effects without causing dependency loops
   var selectedMapPinRef = React.useRef(selectedMapPin);
   selectedMapPinRef.current = selectedMapPin;
-  // Get map bbox and SRS for zoom-dependent overlap prevention
-  var mapBbox = useSelector(function (state) {
-    return mapSelectors.getBbox(state, firstLinkedMapId);
-  }, shallowEqual);
-  var mapSrs = useSelector(function (state) {
-    return mapSelectors.getSrs(state, firstLinkedMapId);
-  });
   var collectionsRef = React.useRef(undefined);
   var collections = useMemo(function () {
+    // Only use instanceId for location fetching when the preset configures it, so collection-level sources (e.g. harmonie) are not affected
+    var presetMap = new Map(soundingsCollections.map(function (collection) {
+      return [collection.id, collection];
+    }));
     var newCollections = sourceSelections.map(function (_ref2) {
+      var _presetMap$get;
       var collectionId = _ref2.collectionId,
         url = _ref2.url,
-        name = _ref2.name;
+        name = _ref2.name,
+        instanceId = _ref2.instanceId;
       return {
         id: collectionId,
         url: url,
-        name: name || collectionId
+        name: name || collectionId,
+        instanceId: ((_presetMap$get = presetMap.get(collectionId)) == null ? void 0 : _presetMap$get.instanceId) !== undefined ? instanceId : undefined
       };
     });
     if (isEqual(newCollections, collectionsRef.current)) {
@@ -6294,9 +6637,9 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     }
     collectionsRef.current = newCollections;
     return newCollections;
-  }, [sourceSelections]);
-  var _useGetCollectionLoca = useGetCollectionLocations(collections, true),
-    rawLocationData = _useGetCollectionLoca.data;
+  }, [sourceSelections, soundingsCollections]);
+  var _useGetLocations = useGetLocations(collections, true),
+    rawLocationData = _useGetLocations.data;
   var _useCheckPositionQuer = useCheckPositionQuerySupportBySource(resolvedSourceSelections),
     positionQuerySupportBySource = _useCheckPositionQuer.data;
   var _useCheckRadiusQueryS = useCheckRadiusQuerySupportBySource(resolvedSourceSelections),
@@ -6317,10 +6660,11 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     sourceSelections.forEach(function (source) {
       var selection = locationSelections == null ? void 0 : locationSelections[source.collectionId];
       if (typeof selection === 'string') {
+        var _sourceLocations$feat;
         var sourceLocations = locationData == null ? void 0 : locationData.find(function (service) {
           return service.id === source.collectionId;
         });
-        var feature = sourceLocations == null ? void 0 : sourceLocations.features.find(function (feature) {
+        var feature = sourceLocations == null || (_sourceLocations$feat = sourceLocations.features) == null ? void 0 : _sourceLocations$feat.find(function (feature) {
           return feature.id === selection;
         });
         if ((feature == null ? void 0 : feature.geometry.type) === 'Point') {
@@ -6335,6 +6679,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var sourceLocationNames = useMemo(function () {
     var result = {};
     sourceSelections.forEach(function (source) {
+      var _sourceLocations$feat2;
       var selection = locationSelections == null ? void 0 : locationSelections[source.collectionId];
       if (typeof selection !== 'string') {
         return;
@@ -6342,7 +6687,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
       var sourceLocations = locationData == null ? void 0 : locationData.find(function (service) {
         return service.id === source.collectionId;
       });
-      var feature = sourceLocations == null ? void 0 : sourceLocations.features.find(function (feature) {
+      var feature = sourceLocations == null || (_sourceLocations$feat2 = sourceLocations.features) == null ? void 0 : _sourceLocations$feat2.find(function (feature) {
         return feature.id === selection;
       });
       var name = feature == null ? void 0 : feature.properties.name;
@@ -6396,7 +6741,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     var locationFeatures = (locationData || []).flatMap(function (_ref3) {
       var serviceId = _ref3.id,
         features = _ref3.features;
-      return features.map(function (feature) {
+      return (features != null ? features : []).map(function (feature) {
         // Check if this feature is highlighted by its source (for sources without position support)
         var isHighlightedBySource = highlightedFeaturesBySource[serviceId] === feature.id;
         // Get the source index to determine color (same color as sounding diagram)
@@ -6512,54 +6857,20 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     });
     // Small fixed offset for markers sharing same grid position (~200m)
     var SOURCE_OVERLAP_OFFSET_DEG = 0.002;
-    // Calculate zoom-dependent minimum separation from clicked marker
-    // Handle different map projections for bbox interpretation
-    var MARKER_DIAMETER_PIXELS = 5; // Small separation - only push when very close to clicked marker
-    var ASSUMED_MAP_WIDTH_PIXELS = 800;
-    var MIN_CLICKED_SEPARATION_DEG = 0.005; // Minimum ~500m
-    var minClickedSeparationDeg = MIN_CLICKED_SEPARATION_DEG;
-    if ((mapBbox == null ? void 0 : mapBbox.right) != null && (mapBbox == null ? void 0 : mapBbox.left) != null) {
-      var bboxExtent = mapBbox.right - mapBbox.left;
-      var extentDeg;
-      // Convert bbox extent to degrees based on map projection
-      if (mapSrs === 'EPSG:4326') {
-        // Geographic projection - bbox already in degrees
-        extentDeg = bboxExtent;
-      } else if (mapSrs === 'EPSG:3857') {
-        // Web Mercator - convert meters to degrees
-        var WEB_MERCATOR_MAX = 20037508.34; // Half of Earth's circumference in meters
-        extentDeg = bboxExtent * 180 / WEB_MERCATOR_MAX;
-      } else if (Math.abs(bboxExtent) > 360) {
-        // Other projections: use heuristic based on magnitude
-        // If extent > 360, assume it's in meters/similar units
-        // Likely meters - use Web Mercator conversion as approximation
-        var _WEB_MERCATOR_MAX = 20037508.34;
-        extentDeg = bboxExtent * 180 / _WEB_MERCATOR_MAX;
-      } else {
-        // Likely already in degrees or degree-like units
-        extentDeg = bboxExtent;
-      }
-      minClickedSeparationDeg = Math.max(MIN_CLICKED_SEPARATION_DEG, extentDeg / ASSUMED_MAP_WIDTH_PIXELS * MARKER_DIAMETER_PIXELS);
-    }
-    var clickedLon = targetLocation[0],
-      clickedLat = targetLocation[1];
-    // Place markers at their true geographic positions with two adjustments:
-    // 1. Offset if multiple sources share the same grid point
-    // 2. Push away from clicked marker if too close (zoom-dependent)
+    // Place markers at their true geographic positions.
+    // The only adjustment is a small fixed offset when multiple sources share the same grid point.
     return gridPoints.map(function (item) {
       var source = item.source,
         sourceIndex = item.sourceIndex,
         gridPoint = item.gridPoint;
       var baseLon = gridPoint[0],
         baseLat = gridPoint[1];
-      // Step 1: Handle source overlap (multiple sources at same grid position)
       var key = baseLon.toFixed(6) + "," + baseLat.toFixed(6);
       var group = positionGroups.get(key) || [];
       var lon = baseLon;
       var lat = baseLat;
       if (group.length > 1) {
         // Multiple sources share this grid point - offset in circle around it
-        // Direction is based on index (arbitrary but consistent)
         var indexInGroup = group.findIndex(function (gr) {
           return gr.sourceIndex === sourceIndex;
         });
@@ -6567,25 +6878,6 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         lon = baseLon + SOURCE_OVERLAP_OFFSET_DEG * Math.cos(offsetAngle);
         lat = baseLat + SOURCE_OVERLAP_OFFSET_DEG * Math.sin(offsetAngle);
       }
-      // Step 2: Check overlap with clicked marker
-      // Account for longitude convergence at higher latitudes (1° lon = cos(lat) * 1° lat in distance)
-      var meanLat = (lat + clickedLat) / 2;
-      var cosLat = Math.cos(meanLat * Math.PI / 180);
-      var deltaLon = lon - clickedLon;
-      var deltaLat = lat - clickedLat;
-      // Scale longitude difference by cos(lat) for accurate distance
-      var scaledDeltaLon = deltaLon * cosLat;
-      var distanceToClicked = Math.sqrt(scaledDeltaLon * scaledDeltaLon + deltaLat * deltaLat);
-      if (distanceToClicked < minClickedSeparationDeg) {
-        // Too close to clicked marker - push outward preserving direction
-        // Direction is from clicked point to marker's current position (in scaled coordinates)
-        var directionAngle = distanceToClicked > 0.0001 ? Math.atan2(deltaLat, scaledDeltaLon) :
-        // If exactly on clicked point, use direction to original grid point
-        Math.atan2(baseLat - clickedLat, (baseLon - clickedLon) * cosLat);
-        // When applying offset, divide lon component by cos(lat) to get correct degree offset
-        lon = clickedLon + minClickedSeparationDeg * Math.cos(directionAngle) / cosLat;
-        lat = clickedLat + minClickedSeparationDeg * Math.sin(directionAngle);
-      }
       return {
         type: 'Feature',
         geometry: {
@@ -6602,7 +6894,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         }
       };
     });
-  }, [isFreePositionClick, targetLocation, gridPointData, sourceSelections, shouldHideLocationMarkers, mapBbox, mapSrs]);
+  }, [isFreePositionClick, targetLocation, gridPointData, sourceSelections, shouldHideLocationMarkers]);
   // Combine location features with grid point features for dispatch to map
   var combinedGeoJson = useMemo(function () {
     if (gridPointFeatures.length === 0) {
@@ -6646,7 +6938,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     var allNearestFeatures = [];
     sourceSelections.forEach(function (source) {
       if (source.collectionId && targetLocation) {
-        var _sourceData$features, _positionQuerySupport;
+        var _sourceData$features, _positionQuerySupport, _radiusQuerySupportBy, _gridPointData$source;
         // Get features owned by this source
         var sourceData = locationData == null ? void 0 : locationData.find(function (service) {
           return service.id === source.collectionId;
@@ -6665,17 +6957,29 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         // 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);
+        // When clicking a free position, snap to the nearest grid point from the radius query
+        // 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 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:
         // 1. If user clicked directly on a marker owned by this source: use that marker's ID (location query)
-        // 2. If position query is supported AND not a direct click: use exact clicked coordinates (position query)
+        // 2. If position query is supported AND not a direct click: use nearest grid point coordinates
+        //    if available (from radius query), otherwise fall back to exact clicked coordinates
         // 3. If position query is NOT supported: fall back to nearest location marker (location query)
         var newLocation = locationSelectionsRef.current[source.collectionId];
         if (isDirectClickOnOwnedMarker && nearestOwnedFeature) {
           // Direct click on marker - use location query with marker ID
           newLocation = nearestOwnedFeature.id;
         } else if (supportsPosition && targetLocation) {
-          // Use position query with exact coordinates
-          newLocation = targetLocation;
+          if (radiusPending) {
+            // Radius query in flight — defer until gridPointData arrives
+            return;
+          }
+          // Snap to nearest grid point when available, otherwise use exact clicked coordinates
+          newLocation = gridPoint != null ? gridPoint : targetLocation;
         } else if (nearestOwnedFeature) {
           // Fall back to location query with nearest marker
           newLocation = nearestOwnedFeature.id;
@@ -6716,7 +7020,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
       isProcessingLocationUpdateRef.current = false;
     }, 0);
     // Note: selectedFeature and selectedMapPin are read from refs to avoid dependency cycles
-  }, [dispatch, locationData, positionQuerySupportBySource, targetLocation, sourceSelections, viewId, updateHighlightedFeaturesBySource]);
+  }, [dispatch, locationData, positionQuerySupportBySource, radiusQuerySupportBySource, gridPointData, targetLocation, sourceSelections, viewId, updateHighlightedFeaturesBySource]);
   // Effect 2 was removed - it was redundant with effect 1 which handles all cases
   // (with or without selectedFeature, falls back to targetLocation if no nearby feature)
   useEffect(function () {
@@ -6759,7 +7063,8 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         return;
       }
       if (typeof selectedLocation === 'string') {
-        var foundFeature = serviceData.features.find(function (feature) {
+        var _serviceData$features;
+        var foundFeature = (_serviceData$features = serviceData.features) == null ? void 0 : _serviceData$features.find(function (feature) {
           return feature.id === selectedLocation;
         });
         if ((foundFeature == null ? void 0 : foundFeature.geometry.type) === 'Point') {
@@ -6796,29 +7101,35 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
             });
           }
           if (featureNeedsUpdate) {
-            dispatch(genericActions.addFeatureSyncState({
-              panelId: viewId,
-              data: {
-                selectedFeatureId: selectedLocation
-              }
-            }));
+            ownedFeatureLayerIds.forEach(function (layerId) {
+              dispatch(layerActions.setSelectedFeatures({
+                layerId: layerId,
+                selectedFeatureIds: [selectedLocation]
+              }));
+            });
           }
         }
       } else if (Array.isArray(selectedLocation)) {
         var _lon = selectedLocation[0],
           _lat = selectedLocation[1];
         var _currentMapPin = selectedMapPinRef.current;
-        var needsUpdate = (_currentMapPin == null ? void 0 : _currentMapPin.lon) !== _lon || (_currentMapPin == null ? void 0 : _currentMapPin.lat) !== _lat;
-        if (needsUpdate) {
-          selectedMapIds.forEach(function (mapId) {
-            dispatch(mapActions.setMapPinLocation({
-              mapId: mapId,
-              mapPinLocation: {
-                lon: _lon,
-                lat: _lat
-              }
-            }));
-          });
+        // When locationSelections was snapped to a grid point (differs from the clicked
+        // position), keep the map pin at the clicked position so targetLocation stays at the
+        // click and the legend can compute a meaningful distance to the data origin.
+        var isGridPointSnap = targetLocationRef.current !== undefined && !isEqual(selectedLocation, targetLocationRef.current);
+        if (!isGridPointSnap) {
+          var needsUpdate = (_currentMapPin == null ? void 0 : _currentMapPin.lon) !== _lon || (_currentMapPin == null ? void 0 : _currentMapPin.lat) !== _lat;
+          if (needsUpdate) {
+            selectedMapIds.forEach(function (mapId) {
+              dispatch(mapActions.setMapPinLocation({
+                mapId: mapId,
+                mapPinLocation: {
+                  lon: _lon,
+                  lat: _lat
+                }
+              }));
+            });
+          }
         }
       }
     });
@@ -6826,7 +7137,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     setTimeout(function () {
       isProcessingLocationUpdateRef.current = false;
     }, 0);
-  }, [locationData, locationSelections, sourceSelections, selectedMapIds, dispatch, viewId, updateHighlightedFeaturesBySource
+  }, [locationData, locationSelections, sourceSelections, selectedMapIds, ownedFeatureLayerIds, dispatch, viewId, updateHighlightedFeaturesBySource
   // Note: highlightedFeaturesBySource intentionally excluded - we use highlightedFeaturesBySourceRef.current
   // inside this effect, and including the state would cause infinite loops since we call
   // updateHighlightedFeaturesBySource within the effect
@@ -6875,7 +7186,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         backgroundColor: 'geowebColors.background.surfaceApp',
         position: 'relative',
         containerType: 'inline-size',
-        containerName: 'soundings-container'
+        containerName: SOUNDINGS_CONTAINER_NAME
       },
       children: [jsx(Box, {
         sx: {
@@ -6930,7 +7241,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
                 fontSize: "small"
               })
             })]
-          }), jsx(Box, {
+          }), isLegendVisible ? jsx(Box, {
             sx: {
               display: 'flex',
               justifyContent: 'center',
@@ -6946,7 +7257,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
               sourceResolvedInstanceIds: sourceResolvedInstanceIds,
               sourceSelections: sourceSelections
             })
-          }), jsx(Box, {
+          }) : null, jsx(Box, {
             sx: {
               flex: 1,
               minHeight: 0,
@@ -6981,6 +7292,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   });
 };
 
+var defaultInstanceId = 'latest-0';
 var extractVerticalRange = function extractVerticalRange(collection, selectedInstanceId) {
   return getVerticalRangeFromInstance(collection.instances.find(function (instance) {
     return instance.id === selectedInstanceId;
@@ -7007,7 +7319,11 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
     order = _ref$order === void 0 ? 0 : _ref$order,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    error = _ref.error;
+    error = _ref.error,
+    _ref$startSize = _ref.startSize,
+    startSize = _ref$startSize === void 0 ? {
+      width: 320
+    } : _ref$startSize;
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
   return jsxs(ToolContainerDraggable, {
@@ -7022,9 +7338,7 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
       top: 40,
       left: 50
     },
-    startSize: {
-      width: 320
-    },
+    startSize: startSize,
     title: t('sources'),
     children: [!!isLoading && jsx(LinearProgress, {
       sx: {
@@ -7039,14 +7353,16 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
         pr: 1
       },
       children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(function (collection) {
-        var _collection$instances;
         var _ref2 = sourceSelections[collection.id] || {},
           isChecked = _ref2.isChecked,
           instanceId = _ref2.instanceId,
           url = _ref2.url;
         var sourceUrl = url || collection.url;
         var hasInstances = collection.instances.length > 0;
-        var selectedInstanceId = instanceId || ((_collection$instances = collection.instances[0]) == null ? void 0 : _collection$instances.id) || undefined;
+        var selectedInstanceId = hasInstances ? instanceId || defaultInstanceId : undefined;
+        var hasNonExistingInstanceId = selectedInstanceId && !referenceTimeUtils.isRelativeReferenceTime(selectedInstanceId) && !collection.instances.some(function (instance) {
+          return instance.id === selectedInstanceId;
+        });
         return jsxs(ListItem, {
           disablePadding: true,
           children: [jsx(ListItemIcon, {
@@ -7066,7 +7382,7 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
                 });
               }
             })
-          }), jsxs(StyledSelect, {
+          }), jsxs(TooltipSelect, {
             additionalStyling: {
               width: 'calc(100% - 42px)'
             },
@@ -7081,31 +7397,54 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
               });
             },
             renderValue: function renderValue(value) {
-              return jsx(Box, {
+              return jsxs(Box, {
                 sx: {
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden'
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  gap: 1
                 },
-                children: jsxs(Box, {
+                children: [jsx(Box, {
+                  sx: {
+                    flex: '4 1 0',
+                    minWidth: 0,
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap'
+                  },
+                  children: collection.name
+                }), jsxs(Box, {
                   sx: {
-                    display: 'flex'
+                    flex: '1 1 0',
+                    minWidth: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 0.5
                   },
                   children: [jsx(Box, {
                     sx: {
-                      minWidth: 200
-                    },
-                    children: collection.name
-                  }), jsx(Box, {
-                    sx: {
+                      minWidth: 0,
                       textOverflow: 'ellipsis',
-                      overflow: 'hidden'
+                      overflow: 'hidden',
+                      whiteSpace: 'nowrap'
                     },
                     children: getSelectedDisplayValue(value)
-                  })]
-                })
+                  }), hasNonExistingInstanceId ? jsx(Box, {
+                    sx: {
+                      '& .MuiSvgIcon-root': {
+                        fill: 'currentcolor!important'
+                      }
+                    },
+                    children: jsx(AlertIcon, {
+                      severity: "error"
+                    })
+                  }) : null]
+                })]
               });
             },
             skipLocalStyling: false,
+            tooltip: collection.name + ": " + getSelectedDisplayValue(selectedInstanceId || t('noInstancesAvailable')),
             value: selectedInstanceId || t('noInstancesAvailable'),
             children: [!hasInstances && jsx(MenuItem, {
               disabled: true,
@@ -7120,10 +7459,12 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
                 value: option.token,
                 children: option.label
               }, option.token);
-            }), collection.instances.map(function (instance) {
-              return jsx(MenuItem, {
+            }), referenceTimeUtils.extendCollectionInstances(collection.instances, selectedInstanceId).map(function (instance, currentIndex) {
+              return jsxs(MenuItem, {
                 value: instance.id,
-                children: getDisplayValue(instance.id)
+                children: [getDisplayValue(instance.id), currentIndex === collection.instances.length && jsx(AlertIcon, {
+                  severity: "error"
+                })]
               }, instance.id);
             })]
           })]
@@ -7199,6 +7540,28 @@ var SoundingsSourceDialogConnect = function SoundingsSourceDialogConnect(_ref) {
     data = _useGetCollectionsIns.data,
     isPending = _useGetCollectionsIns.isPending,
     error = _useGetCollectionsIns.error;
+  // Update checked sources without an instance once instances finish loading.
+  React.useEffect(function () {
+    data == null || data.forEach(function (collection) {
+      var currentSelection = sourceSelections[collection.id];
+      if (!(currentSelection != null && currentSelection.isChecked) || currentSelection.instanceId || collection.instances.length === 0) {
+        return;
+      }
+      var resolvedInstance = referenceTimeUtils.resolveReferenceTimeInstance(collection.instances, defaultInstanceId);
+      if (!resolvedInstance) {
+        return;
+      }
+      dispatch(soundingsActions.updateSelectedSource({
+        sourceId: collection.id,
+        value: {
+          instanceId: defaultInstanceId,
+          verticalRange: getVerticalRangeFromInstance(resolvedInstance)
+        },
+        viewId: viewId,
+        origin: SoundingsActionOrigin.soundingsManager
+      }));
+    });
+  }, [data, dispatch, sourceSelections, viewId]);
   return jsx(SoundingsSourceMenu, {
     error: error,
     handleClose: onCloseDialog,
@@ -7267,6 +7630,7 @@ var LocationsMenu = function LocationsMenu(_ref2) {
     setSearchFilter = _useState[1];
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
+  var listContainerRef = useRef(null);
   var filteredResults = useMemo(function () {
     return services == null ? void 0 : services.map(function (service) {
       var filteredFeatures = service.features ? service.features.filter(function (feature) {
@@ -7278,6 +7642,7 @@ var LocationsMenu = function LocationsMenu(_ref2) {
       });
     });
   }, [services, searchFilter]);
+  var heightObserver = useResizeObserver(listContainerRef, filteredResults);
   var isChecked = function isChecked(sourceId, locationId) {
     return selectedLocations[sourceId] === locationId;
   };
@@ -7310,58 +7675,65 @@ var LocationsMenu = function LocationsMenu(_ref2) {
         margin: 1
       },
       children: t('locations-menu-warning')
-    }) : jsxs(Grid, {
-      container: true,
-      children: [jsx(Box, {
-        sx: {
-          width: '100%',
-          padding: 1,
-          position: 'sticky',
-          top: 0,
-          zIndex: 1,
-          backgroundColor: 'geowebColors.background.surfaceApp'
-        },
-        children: jsx(SearchField, {
-          searchFilter: searchFilter,
-          setSearchFilter: setSearchFilter,
-          small: true
-        })
-      }), filteredResults.map(function (service) {
-        return jsx(Fragment$1, {
-          children: jsx(CustomAccordion, {
-            amountOfItems: service.features.length,
-            defaultExpanded: false,
-            sx: {
-              width: '100%',
-              margin: '0 8px 2px 8px',
-              '.MuiAccordionDetails-root': {
-                padding: 0
-              },
-              '.MuiAccordionSummary-root': {
-                minHeight: '40px'
-              },
-              '.MuiAccordionSummary-content': {
-                paddingLeft: 3
-              }
-            },
-            title: service.name,
-            children: jsx(List, {
-              rowComponent: RowComponent,
-              rowCount: service.features.length,
-              rowHeight: 40,
-              rowProps: {
-                service: service,
-                isChecked: isChecked,
-                updateSelectedLocation: updateSelectedLocation
+    }) : jsx(Box, {
+      ref: listContainerRef,
+      sx: {
+        width: '100%',
+        height: '100%'
+      },
+      children: jsxs(Grid, {
+        container: true,
+        children: [jsx(Box, {
+          sx: {
+            width: '100%',
+            padding: 1,
+            position: 'sticky',
+            top: 0,
+            zIndex: 1,
+            backgroundColor: 'geowebColors.background.surfaceApp'
+          },
+          children: jsx(SearchField, {
+            searchFilter: searchFilter,
+            setSearchFilter: setSearchFilter,
+            small: true
+          })
+        }), filteredResults.map(function (service) {
+          return jsx(Fragment$1, {
+            children: jsx(CustomAccordion, {
+              amountOfItems: service.features.length,
+              defaultExpanded: false,
+              sx: {
+                width: '100%',
+                margin: '0 8px 2px 8px',
+                '.MuiAccordionDetails-root': {
+                  padding: 0
+                },
+                '.MuiAccordionSummary-root': {
+                  minHeight: '40px'
+                },
+                '.MuiAccordionSummary-content': {
+                  paddingLeft: 3
+                }
               },
-              style: {
-                height: 320,
-                width: '100%'
-              }
+              title: service.name,
+              children: jsx(List, {
+                rowComponent: RowComponent,
+                rowCount: service.features.length,
+                rowHeight: 40,
+                rowProps: {
+                  service: service,
+                  isChecked: isChecked,
+                  updateSelectedLocation: updateSelectedLocation
+                },
+                style: {
+                  height: heightObserver,
+                  width: '100%'
+                }
+              })
             })
-          })
-        }, service.id);
-      })]
+          }, service.id);
+        })]
+      })
     })]
   });
 };
@@ -7401,10 +7773,10 @@ var LocationsMenuConnect = function LocationsMenuConnect(_ref) {
       dispatch(soundingsActions.setSoundingsCollections(soundingsCollections));
     }
   }, [dispatch, soundingsCollections]);
-  var _useGetCollectionLoca = useGetCollectionLocations(collections, isDialogOpen),
-    data = _useGetCollectionLoca.data,
-    isPending = _useGetCollectionLoca.isPending,
-    error = _useGetCollectionLoca.error;
+  var _useGetLocations = useGetLocations(collections, isDialogOpen),
+    data = _useGetLocations.data,
+    isPending = _useGetLocations.isPending,
+    error = _useGetLocations.error;
   var services = useMemo(function () {
     return (data == null ? void 0 : data.filter(function (service) {
       return selectedSourceIds.includes(service.id);