@opengeoweb/soundings 19.3.0 → 19.4.0

package/dist/index.esm.js

@@ -3,8 +3,8 @@ import { Stack, Box, Tooltip, Typography, styled, Card, IconButton, Menu, ListSu
 import { range, isEqual } from 'lodash';
 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, TooltipSelect, AlertIcon, useResizeObserver, SearchField, CustomAccordion } from '@opengeoweb/shared';
-import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, useRegisterFeatureSyncSource, genericSelectors, useSyncgroupTimeState, mapSelectors, mapActions, useUpdateFeatureSyncLayers, layerActions, useSetupDialog, 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';
@@ -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,7 +151,7 @@ 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 = '600px';
+var SOUNDINGS_CONTAINER_BREAKPOINT_PX = '720px';
 var SOUNDINGS_CONTAINER_NAME = 'soundings-container';
 
 /* *
@@ -310,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;
 };
@@ -438,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,
@@ -450,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) {
@@ -463,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);
@@ -479,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) {
@@ -502,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,
@@ -1702,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,
@@ -1711,12 +1769,12 @@ var useTimesteps = function useTimesteps(sourceSelections) {
         queryKey: ['edr-soundings-instance', collectionId, instanceId || ''],
         queryFn: function () {
           var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-            var _instanceData$extent, instanceData, timeExtentValues, allInstancesData, collectionData;
+            var _instanceData$extent, instanceData, timeExtentValues, collectionData;
             return _regenerator().w(function (_context3) {
               while (1) switch (_context3.n) {
                 case 0:
                   if (!(instanceId && instanceId !== '')) {
-                    _context3.n = 4;
+                    _context3.n = 3;
                     break;
                   }
                   _context3.n = 1;
@@ -1725,20 +1783,16 @@ var useTimesteps = function useTimesteps(sourceSelections) {
                   instanceData = _context3.v;
                   timeExtentValues = instanceData == null || (_instanceData$extent = instanceData.extent) == null || (_instanceData$extent = _instanceData$extent.temporal) == null ? void 0 : _instanceData$extent.values;
                   if (timeExtentValues) {
-                    _context3.n = 3;
+                    _context3.n = 2;
                     break;
                   }
-                  _context3.n = 2;
-                  return getCollectionInstances(collectionId, url);
+                  return _context3.a(2, queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url)));
                 case 2:
-                  allInstancesData = _context3.v;
-                  return _context3.a(2, allInstancesData);
-                case 3:
                   return _context3.a(2, instanceData);
-                case 4:
-                  _context3.n = 5;
+                case 3:
+                  _context3.n = 4;
                   return getCollectionDetails(collectionId, url);
-                case 5:
+                case 4:
                   collectionData = _context3.v;
                   return _context3.a(2, collectionData);
               }
@@ -1762,7 +1816,7 @@ var useTimesteps = function useTimesteps(sourceSelections) {
         refetchInterval: 5 * 60 * 1000
       };
     });
-  }, [sourceSelections]);
+  }, [sourceSelections, queryClient]);
   var results = useQueries({
     queries: queries,
     combine: function combine(queryResults) {
@@ -1834,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;
@@ -1854,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 _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
-            var data;
-            return _regenerator().w(function (_context5) {
-              while (1) switch (_context5.n) {
-                case 0:
-                  if (!resultsCollection.data[index]) {
-                    _context5.n = 2;
-                    break;
-                  }
-                  _context5.n = 1;
-                  return getCollectionInstances(id, url);
-                case 1:
-                  data = _context5.v;
-                  return _context5.a(2, data);
-                case 2:
-                  return _context5.a(2, {
-                    instances: []
-                  });
-              }
-            }, _callee5);
-          }));
-          function queryFn() {
-            return _queryFn5.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;
@@ -1932,61 +1965,61 @@ var useGetLocations = function useGetLocations(collections, enabled) {
       return {
         queryKey: ['edr-locations', collection.id, collection.url, (_collection$instanceI = collection.instanceId) != null ? _collection$instanceI : ''],
         queryFn: function () {
-          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
             var resolvedInstanceId, instances, resolved, locationsExplicitlyUnsupported, _locations, locations;
-            return _regenerator().w(function (_context6) {
-              while (1) switch (_context6.p = _context6.n) {
+            return _regenerator().w(function (_context5) {
+              while (1) switch (_context5.p = _context5.n) {
                 case 0:
                   resolvedInstanceId = collection.instanceId;
                   if (!(resolvedInstanceId && referenceTimeUtils.isRelativeReferenceTime(resolvedInstanceId))) {
-                    _context6.n = 4;
+                    _context5.n = 4;
                     break;
                   }
-                  _context6.p = 1;
-                  _context6.n = 2;
+                  _context5.p = 1;
+                  _context5.n = 2;
                   return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collection.id, collection.url));
                 case 2:
-                  instances = _context6.v;
+                  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;
-                  _context6.n = 4;
+                  _context5.n = 4;
                   break;
                 case 3:
-                  _context6.p = 3;
-                  _context6.v;
+                  _context5.p = 3;
+                  _context5.v;
                   resolvedInstanceId = undefined;
                 case 4:
                   if (!resolvedInstanceId) {
-                    _context6.n = 8;
+                    _context5.n = 8;
                     break;
                   }
-                  _context6.p = 5;
-                  _context6.n = 6;
+                  _context5.p = 5;
+                  _context5.n = 6;
                   return getInstanceLocations(collection.id, resolvedInstanceId, collection.url);
                 case 6:
-                  _locations = _context6.v;
-                  return _context6.a(2, Object.assign({}, _locations, {
+                  _locations = _context5.v;
+                  return _context5.a(2, Object.assign({}, _locations, {
                     id: collection.id,
                     name: collection.name
                   }));
                 case 7:
-                  _context6.p = 7;
-                  _context6.v;
+                  _context5.p = 7;
+                  _context5.v;
                 case 8:
-                  _context6.n = 9;
+                  _context5.n = 9;
                   return getCollectionLocations(collection.id, collection.url);
                 case 9:
-                  locations = _context6.v;
-                  return _context6.a(2, Object.assign({}, locations, {
+                  locations = _context5.v;
+                  return _context5.a(2, Object.assign({}, locations, {
                     id: collection.id,
                     name: collection.name
                   }));
               }
-            }, _callee6, null, [[5, 7], [1, 3]]);
+            }, _callee5, null, [[5, 7], [1, 3]]);
           }));
           function queryFn() {
-            return _queryFn6.apply(this, arguments);
+            return _queryFn5.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2027,6 +2060,7 @@ var useGetLocations = function useGetLocations(collections, enabled) {
 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,
@@ -2035,55 +2069,61 @@ var useCheckPositionQuerySupportBySource = function useCheckPositionQuerySupport
       return {
         queryKey: ['edr-position-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
             var _details$data_queries, _instance$data_querie, instances, instance, details;
-            return _regenerator().w(function (_context7) {
-              while (1) switch (_context7.p = _context7.n) {
+            return _regenerator().w(function (_context6) {
+              while (1) switch (_context6.p = _context6.n) {
                 case 0:
-                  _context7.p = 0;
+                  _context6.p = 0;
                   if (!instanceId) {
-                    _context7.n = 2;
+                    _context6.n = 2;
                     break;
                   }
-                  _context7.n = 1;
-                  return getCollectionInstances(collectionId, url);
+                  _context6.n = 1;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url));
                 case 1:
-                  instances = _context7.v;
+                  instances = _context6.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context7.a(2, {
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie = instance.data_queries) != null && _instance$data_querie.position)
                   });
                 case 2:
-                  _context7.n = 3;
+                  _context6.n = 3;
                   return getCollectionDetails(collectionId, url);
                 case 3:
-                  details = _context7.v;
-                  return _context7.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:
-                  _context7.p = 4;
-                  _context7.v;
-                  return _context7.a(2, {
+                  _context6.p = 4;
+                  _context6.v;
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee7, null, [[0, 4]]);
+            }, _callee6, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn7.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) {
@@ -2117,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,
@@ -2125,55 +2166,60 @@ var useCheckRadiusQuerySupportBySource = function useCheckRadiusQuerySupportBySo
       return {
         queryKey: ['edr-radius-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
             var _details$data_queries2, _instance$data_querie2, instances, instance, details;
-            return _regenerator().w(function (_context8) {
-              while (1) switch (_context8.p = _context8.n) {
+            return _regenerator().w(function (_context7) {
+              while (1) switch (_context7.p = _context7.n) {
                 case 0:
-                  _context8.p = 0;
+                  _context7.p = 0;
                   if (!instanceId) {
-                    _context8.n = 2;
+                    _context7.n = 2;
                     break;
                   }
-                  _context8.n = 1;
-                  return getCollectionInstances(collectionId, url);
+                  _context7.n = 1;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url));
                 case 1:
-                  instances = _context8.v;
+                  instances = _context7.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context8.a(2, {
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie2 = instance.data_queries) != null && _instance$data_querie2.radius)
                   });
                 case 2:
-                  _context8.n = 3;
+                  _context7.n = 3;
                   return getCollectionDetails(collectionId, url);
                 case 3:
-                  details = _context8.v;
-                  return _context8.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:
-                  _context8.p = 4;
-                  _context8.v;
-                  return _context8.a(2, {
+                  _context7.p = 4;
+                  _context7.v;
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee8, null, [[0, 4]]);
+            }, _callee7, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn8.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) {
@@ -2223,20 +2269,20 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
         return {
           queryKey: ['edr-grid-points-disabled', collectionId],
           queryFn: function () {
-            var _queryFn9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
-              return _regenerator().w(function (_context9) {
-                while (1) switch (_context9.n) {
+            var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+              return _regenerator().w(function (_context8) {
+                while (1) switch (_context8.n) {
                   case 0:
-                    return _context9.a(2, {
+                    return _context8.a(2, {
                       sourceId: collectionId,
                       gridPoint: undefined,
                       allGridPoints: []
                     });
                 }
-              }, _callee9);
+              }, _callee8);
             }));
             function queryFn() {
-              return _queryFn9.apply(this, arguments);
+              return _queryFn8.apply(this, arguments);
             }
             return queryFn;
           }(),
@@ -2261,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 _queryFn0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+          var _queryFn9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
             var minimalParameters, minimalVerticalRange, rawData, allGridPoints, nearestPoint, minSquaredDistance;
-            return _regenerator().w(function (_context0) {
-              while (1) switch (_context0.p = _context0.n) {
+            return _regenerator().w(function (_context9) {
+              while (1) switch (_context9.p = _context9.n) {
                 case 0:
                   if (supportsRadius) {
-                    _context0.n = 1;
+                    _context9.n = 1;
                     break;
                   }
-                  return _context0.a(2, {
+                  return _context9.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
                 case 1:
-                  _context0.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
@@ -2284,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 = '';
-                  _context0.n = 2;
+                  _context9.n = 2;
                   return getEdrCollectionForRadius(collectionId, url, instanceId, centerCoordinates, radiusKm, minimalParameters, datetime, minimalVerticalRange);
                 case 2:
-                  rawData = _context0.v;
+                  rawData = _context9.v;
                   allGridPoints = extractGridPointsFromCoverage(rawData); // Find the nearest grid point to the center coordinates
                   minSquaredDistance = Infinity;
                   allGridPoints.forEach(function (point) {
@@ -2302,24 +2348,24 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
                       nearestPoint = point;
                     }
                   });
-                  return _context0.a(2, {
+                  return _context9.a(2, {
                     sourceId: collectionId,
                     gridPoint: nearestPoint,
                     allGridPoints: allGridPoints
                   });
                 case 3:
-                  _context0.p = 3;
-                  _context0.v;
-                  return _context0.a(2, {
+                  _context9.p = 3;
+                  _context9.v;
+                  return _context9.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
               }
-            }, _callee0, null, [[1, 3]]);
+            }, _callee9, null, [[1, 3]]);
           }));
           function queryFn() {
-            return _queryFn0.apply(this, arguments);
+            return _queryFn9.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2627,6 +2673,7 @@ var initialSoundingsViewState = {
   },
   shouldHideLocationMarkers: false,
   isTimeSliderVisible: true,
+  isLegendVisible: true,
   profileDataPreferences: DEFAULT_PROFILE_DATA_PREFERENCES,
   syncGroupsIds: []
 };
@@ -2696,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();
@@ -2718,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;
       }
     },
@@ -2776,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) {
@@ -2954,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;
@@ -3008,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,
@@ -3199,13 +3259,15 @@ var MenuOptions;
   MenuOptions["profileData"] = "profileData";
 })(MenuOptions || (MenuOptions = {}));
 var SoundingsMenuBar = function SoundingsMenuBar(_ref) {
-  var _sx;
+  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, {
@@ -3260,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)
     })]
   });
 };
@@ -3304,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,
@@ -3338,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
   });
 };
@@ -3956,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);
@@ -4310,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),
@@ -4525,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)
@@ -4542,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');
     }
   }
 };
@@ -4685,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,
@@ -4708,6 +4799,7 @@ var drawStaticLines = function drawStaticLines(_ref) {
       xScale: xScale,
       yScale: yScale,
       svg: svg,
+      labelSvg: bijvoetLabelSvg,
       height: height,
       d3GraphId: d3GraphId
     });
@@ -4796,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,
@@ -4817,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,
@@ -4826,9 +4936,16 @@ 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,
@@ -4837,6 +4954,13 @@ var Soundings = function Soundings(_ref) {
       diagramType: diagramType,
       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;
@@ -4847,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,
@@ -4866,7 +4996,8 @@ var Soundings = function Soundings(_ref) {
       yScale: yScale,
       minPressure: minPressure,
       maxPressure: maxPressure,
-      svg: svg,
+      svg: zoomContent,
+      bijvoetLabelSvg: bijvoetLabelLayer,
       d3GraphId: scopedGraphId
     });
     data.forEach(function (features, index) {
@@ -4882,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) {
@@ -4896,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, scopedGraphId, margin]);
+  }, [data, diagramType, width, height, scopedGraphId, margin, publishVerticalZoom, resetVerticalZoom]);
   useEffect(function () {
     var _svgRectRef$current;
     if (!showTooltip || !svgRef.current) {
@@ -4943,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: {
@@ -5165,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];
@@ -5182,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;
 };
 
@@ -5444,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;
@@ -5458,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);
@@ -5475,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);
@@ -5504,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 + ")");
     }
@@ -5562,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:
@@ -5597,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,
@@ -5606,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);
@@ -5619,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();
@@ -5658,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) {
@@ -5697,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: {
@@ -5972,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();
@@ -6010,7 +6263,6 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
     if (isClosingViaClick) {
       preserveWindBarbsGrowBackHeight();
     }
-    setSoundingsIsClosed(!isOpen);
   }, [preserveWindBarbsGrowBackHeight]);
   var panels = soundingPanelsInOrder.flatMap(function (_ref2) {
     var id = _ref2.id,
@@ -6054,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,
@@ -6068,7 +6321,7 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
                   right: 25,
                   top: 0
                 },
-                height: soundingsIsClosed ? previousHeight != null ? previousHeight : diagramSize : diagramSize
+                height: windBarbsHeight
               }
             });
           }
@@ -6261,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);
@@ -6293,6 +6566,9 @@ 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);
@@ -6307,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);
@@ -6973,7 +7241,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
                 fontSize: "small"
               })
             })]
-          }), jsx(Box, {
+          }), isLegendVisible ? jsx(Box, {
             sx: {
               display: 'flex',
               justifyContent: 'center',
@@ -6989,7 +7257,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
               sourceResolvedInstanceIds: sourceResolvedInstanceIds,
               sourceSelections: sourceSelections
             })
-          }), jsx(Box, {
+          }) : null, jsx(Box, {
             sx: {
               flex: 1,
               minHeight: 0,
@@ -7272,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,