@opengeoweb/soundings 19.3.0 → 19.5.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';
 
 /* *
@@ -200,8 +212,27 @@ var dTdp = function dTdp(pressure, temperature) {
   var dTdp2 = dTdp1 / (1.0 + Rs / (7.0 * EPSILON) + Math.pow(Lv / temperature, 2) * Rs * EPSILON / (R_AIR * HEATCP));
   return dTdp2;
 };
+var MAX_THETA_CACHE_SIZE = 50000;
+var thetaFromPressTempCache = new Map();
+var buildThetaCacheKey = function buildThetaCacheKey(pressure, temperature, basePressure) {
+  return pressure.toFixed(6) + "|" + temperature.toFixed(6) + "|" + basePressure.toFixed(6);
+};
+var setThetaCacheValue = function setThetaCacheValue(key, value) {
+  if (thetaFromPressTempCache.size >= MAX_THETA_CACHE_SIZE) {
+    var oldestKey = thetaFromPressTempCache.keys().next().value;
+    if (oldestKey !== undefined) {
+      thetaFromPressTempCache["delete"](oldestKey);
+    }
+  }
+  thetaFromPressTempCache.set(key, value);
+};
 var calculateThetaFromPressTemp = function calculateThetaFromPressTemp(pressure, temperature, basePressure) {
   var base = basePressure || REFERENCE_PRESSURE;
+  var cacheKey = buildThetaCacheKey(pressure, temperature, base);
+  var cachedValue = thetaFromPressTempCache.get(cacheKey);
+  if (cachedValue !== undefined) {
+    return cachedValue;
+  }
   var dpPascal = pressure > base ? pressToPascal(-10) : pressToPascal(10); // hPa steps to Pa steps
   var numberOfSteps = Math.round((base - pressure) / dpPascal) < 1 ? 1 : Math.round((base - pressure) / dpPascal);
   var pstep = (base - pressure) / numberOfSteps;
@@ -215,6 +246,7 @@ var calculateThetaFromPressTemp = function calculateThetaFromPressTemp(pressure,
     tempN += k1 / 6.0 + k2 / 3.0 + k3 / 3.0 + k4 / 6.0;
     pressureN += pstep;
   }
+  setThetaCacheValue(cacheKey, tempN);
   return tempN;
 };
 
@@ -310,6 +342,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 +478,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 +491,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 +504,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 +528,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 +576,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,
@@ -1145,6 +1222,25 @@ var soundingsQueryOptions = {
       }(),
       refetchInterval: 5 * 60 * 1000
     });
+  },
+  getCollectionDetails: function getCollectionDetails$1(collectionId, url) {
+    return queryOptions({
+      queryKey: ['edr-soundings-collection-details', collectionId, url],
+      queryFn: function () {
+        var _queryFn2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+          return _regenerator().w(function (_context2) {
+            while (1) switch (_context2.n) {
+              case 0:
+                return _context2.a(2, getCollectionDetails(collectionId, url));
+            }
+          }, _callee2);
+        }));
+        function queryFn() {
+          return _queryFn2.apply(this, arguments);
+        }
+        return queryFn;
+      }()
+    });
   }
 };
 
@@ -1702,6 +1798,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 +1808,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 +1822,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 3:
+                  _context3.n = 4;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionDetails(collectionId, url));
                 case 4:
-                  _context3.n = 5;
-                  return getCollectionDetails(collectionId, url);
-                case 5:
                   collectionData = _context3.v;
                   return _context3.a(2, collectionData);
               }
@@ -1762,7 +1855,7 @@ var useTimesteps = function useTimesteps(sourceSelections) {
         refetchInterval: 5 * 60 * 1000
       };
     });
-  }, [sourceSelections]);
+  }, [sourceSelections, queryClient]);
   var results = useQueries({
     queries: queries,
     combine: function combine(queryResults) {
@@ -1803,29 +1896,9 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
     return collectionIds.map(function (_ref4) {
       var id = _ref4.id,
         url = _ref4.url;
-      return {
-        queryKey: ['edr-soundings-collection-details', id, url],
-        queryFn: function () {
-          var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-            var data;
-            return _regenerator().w(function (_context4) {
-              while (1) switch (_context4.n) {
-                case 0:
-                  _context4.n = 1;
-                  return getCollectionDetails(id, url);
-                case 1:
-                  data = _context4.v;
-                  return _context4.a(2, data);
-              }
-            }, _callee4);
-          }));
-          function queryFn() {
-            return _queryFn4.apply(this, arguments);
-          }
-          return queryFn;
-        }(),
+      return Object.assign({}, soundingsQueryOptions.getCollectionDetails(id, url), {
         enabled: isDialogOpen
-      };
+      });
     });
   }, [collectionIds, isDialogOpen]);
   var resultsCollection = useQueries({
@@ -1834,10 +1907,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 +1930,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 +1984,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 _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
             var resolvedInstanceId, instances, resolved, locationsExplicitlyUnsupported, _locations, locations;
-            return _regenerator().w(function (_context6) {
-              while (1) switch (_context6.p = _context6.n) {
+            return _regenerator().w(function (_context4) {
+              while (1) switch (_context4.p = _context4.n) {
                 case 0:
                   resolvedInstanceId = collection.instanceId;
                   if (!(resolvedInstanceId && referenceTimeUtils.isRelativeReferenceTime(resolvedInstanceId))) {
-                    _context6.n = 4;
+                    _context4.n = 4;
                     break;
                   }
-                  _context6.p = 1;
-                  _context6.n = 2;
+                  _context4.p = 1;
+                  _context4.n = 2;
                   return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collection.id, collection.url));
                 case 2:
-                  instances = _context6.v;
+                  instances = _context4.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;
+                  _context4.n = 4;
                   break;
                 case 3:
-                  _context6.p = 3;
-                  _context6.v;
+                  _context4.p = 3;
+                  _context4.v;
                   resolvedInstanceId = undefined;
                 case 4:
                   if (!resolvedInstanceId) {
-                    _context6.n = 8;
+                    _context4.n = 8;
                     break;
                   }
-                  _context6.p = 5;
-                  _context6.n = 6;
+                  _context4.p = 5;
+                  _context4.n = 6;
                   return getInstanceLocations(collection.id, resolvedInstanceId, collection.url);
                 case 6:
-                  _locations = _context6.v;
-                  return _context6.a(2, Object.assign({}, _locations, {
+                  _locations = _context4.v;
+                  return _context4.a(2, Object.assign({}, _locations, {
                     id: collection.id,
                     name: collection.name
                   }));
                 case 7:
-                  _context6.p = 7;
-                  _context6.v;
+                  _context4.p = 7;
+                  _context4.v;
                 case 8:
-                  _context6.n = 9;
+                  _context4.n = 9;
                   return getCollectionLocations(collection.id, collection.url);
                 case 9:
-                  locations = _context6.v;
-                  return _context6.a(2, Object.assign({}, locations, {
+                  locations = _context4.v;
+                  return _context4.a(2, Object.assign({}, locations, {
                     id: collection.id,
                     name: collection.name
                   }));
               }
-            }, _callee6, null, [[5, 7], [1, 3]]);
+            }, _callee4, null, [[5, 7], [1, 3]]);
           }));
           function queryFn() {
-            return _queryFn6.apply(this, arguments);
+            return _queryFn4.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2027,6 +2079,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 +2088,61 @@ var useCheckPositionQuerySupportBySource = function useCheckPositionQuerySupport
       return {
         queryKey: ['edr-position-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
             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 (_context5) {
+              while (1) switch (_context5.p = _context5.n) {
                 case 0:
-                  _context7.p = 0;
+                  _context5.p = 0;
                   if (!instanceId) {
-                    _context7.n = 2;
+                    _context5.n = 2;
                     break;
                   }
-                  _context7.n = 1;
-                  return getCollectionInstances(collectionId, url);
+                  _context5.n = 1;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url));
                 case 1:
-                  instances = _context7.v;
+                  instances = _context5.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context7.a(2, {
+                  return _context5.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie = instance.data_queries) != null && _instance$data_querie.position)
                   });
                 case 2:
-                  _context7.n = 3;
-                  return getCollectionDetails(collectionId, url);
+                  _context5.n = 3;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionDetails(collectionId, url));
                 case 3:
-                  details = _context7.v;
-                  return _context7.a(2, {
+                  details = _context5.v;
+                  return _context5.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, {
+                  _context5.p = 4;
+                  _context5.v;
+                  return _context5.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee7, null, [[0, 4]]);
+            }, _callee5, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn7.apply(this, arguments);
+            return _queryFn5.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 +2176,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 +2185,60 @@ var useCheckRadiusQuerySupportBySource = function useCheckRadiusQuerySupportBySo
       return {
         queryKey: ['edr-radius-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
             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 (_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_querie2 = instance.data_queries) != null && _instance$data_querie2.radius)
                   });
                 case 2:
-                  _context8.n = 3;
-                  return getCollectionDetails(collectionId, url);
+                  _context6.n = 3;
+                  return queryClient.fetchQuery(soundingsQueryOptions.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_queries2 = details.data_queries) != null && _details$data_queries2.radius)
                   });
                 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
+        placeholderData: function placeholderData(prev) {
+          return prev;
+        }
       };
     });
-  }, [sources]);
+  }, [sources, queryClient]);
   return useQueries({
     queries: queries,
     combine: function combine(queryResults) {
@@ -2223,20 +2288,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 _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+              return _regenerator().w(function (_context7) {
+                while (1) switch (_context7.n) {
                   case 0:
-                    return _context9.a(2, {
+                    return _context7.a(2, {
                       sourceId: collectionId,
                       gridPoint: undefined,
                       allGridPoints: []
                     });
                 }
-              }, _callee9);
+              }, _callee7);
             }));
             function queryFn() {
-              return _queryFn9.apply(this, arguments);
+              return _queryFn7.apply(this, arguments);
             }
             return queryFn;
           }(),
@@ -2261,22 +2326,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 _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
             var minimalParameters, minimalVerticalRange, rawData, allGridPoints, nearestPoint, minSquaredDistance;
-            return _regenerator().w(function (_context0) {
-              while (1) switch (_context0.p = _context0.n) {
+            return _regenerator().w(function (_context8) {
+              while (1) switch (_context8.p = _context8.n) {
                 case 0:
                   if (supportsRadius) {
-                    _context0.n = 1;
+                    _context8.n = 1;
                     break;
                   }
-                  return _context0.a(2, {
+                  return _context8.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
                 case 1:
-                  _context0.p = 1;
+                  _context8.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 +2349,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;
+                  _context8.n = 2;
                   return getEdrCollectionForRadius(collectionId, url, instanceId, centerCoordinates, radiusKm, minimalParameters, datetime, minimalVerticalRange);
                 case 2:
-                  rawData = _context0.v;
+                  rawData = _context8.v;
                   allGridPoints = extractGridPointsFromCoverage(rawData); // Find the nearest grid point to the center coordinates
                   minSquaredDistance = Infinity;
                   allGridPoints.forEach(function (point) {
@@ -2302,24 +2367,24 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
                       nearestPoint = point;
                     }
                   });
-                  return _context0.a(2, {
+                  return _context8.a(2, {
                     sourceId: collectionId,
                     gridPoint: nearestPoint,
                     allGridPoints: allGridPoints
                   });
                 case 3:
-                  _context0.p = 3;
-                  _context0.v;
-                  return _context0.a(2, {
+                  _context8.p = 3;
+                  _context8.v;
+                  return _context8.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
               }
-            }, _callee0, null, [[1, 3]]);
+            }, _callee8, null, [[1, 3]]);
           }));
           function queryFn() {
-            return _queryFn0.apply(this, arguments);
+            return _queryFn8.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2627,6 +2692,7 @@ var initialSoundingsViewState = {
   },
   shouldHideLocationMarkers: false,
   isTimeSliderVisible: true,
+  isLegendVisible: true,
   profileDataPreferences: DEFAULT_PROFILE_DATA_PREFERENCES,
   syncGroupsIds: []
 };
@@ -2696,7 +2762,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,7 +2784,11 @@ 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;
+        panel.locationMenuSize = preset.locationMenuSize;
+        panel.locationMenuPosition = preset.locationMenuPosition;
+        panel.isLocationsDialogOpen = preset.isLocationsDialogOpen;
       }
     },
     setSoundingsCollections: function setSoundingsCollections(draft, payloadAction) {
@@ -2776,6 +2846,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) {
@@ -2842,6 +2919,23 @@ var slice = createSlice({
         customWidth: customWidth
       });
     },
+    setLocationMenuSizeAndPosition: function setLocationMenuSizeAndPosition(draft, payloadAction) {
+      var panel = resolveSoundingsView(draft, payloadAction);
+      if (!panel) {
+        return;
+      }
+      panel.locationMenuSize = payloadAction.payload.size;
+      if (payloadAction.payload.position !== undefined) {
+        panel.locationMenuPosition = payloadAction.payload.position;
+      }
+    },
+    setLocationsMenuOpen: function setLocationsMenuOpen(draft, payloadAction) {
+      var panel = resolveSoundingsView(draft, payloadAction);
+      if (!panel) {
+        return;
+      }
+      panel.isLocationsDialogOpen = payloadAction.payload.isLocationsDialogOpen;
+    },
     notifyViewClosed: function notifyViewClosed(draft) {
       var _draft$resizeOnViewCl;
       draft.resizeOnViewCloseSignal = ((_draft$resizeOnViewCl = draft.resizeOnViewCloseSignal) != null ? _draft$resizeOnViewCl : 0) + 1;
@@ -2954,6 +3048,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;
@@ -2987,6 +3085,12 @@ var getSelectedSourcesIds = createSelector(getSelectedSources, function (activeS
     return source.collectionId;
   });
 }, selectorMemoizationOptions);
+var getLocationMenuSize = createSelector(getSoundingsViewState, function (store) {
+  return store.locationMenuSize;
+}, selectorMemoizationOptions);
+var getLocationMenuPosition = createSelector(getSoundingsViewState, function (store) {
+  return store.locationMenuPosition;
+}, selectorMemoizationOptions);
 var getSoundingsPreset = createSelector(getSoundingsViewState, function (soundingsStore) {
   return Object.assign({}, soundingsStore);
 }, selectorMemoizationOptions);
@@ -3008,7 +3112,10 @@ var getSoundingPanelsInOrder = createSelector(getSoundingsViewState, function (s
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getDiagramType: getDiagramType,
+  getIsLegendVisible: getIsLegendVisible,
   getIsTimeSliderVisible: getIsTimeSliderVisible,
+  getLocationMenuPosition: getLocationMenuPosition,
+  getLocationMenuSize: getLocationMenuSize,
   getLocationSelections: getLocationSelections,
   getPanelCustomWidth: getPanelCustomWidth,
   getPanelIsOpen: getPanelIsOpen,
@@ -3199,13 +3306,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 +3369,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 +3430,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,
@@ -3328,19 +3464,29 @@ var MenuBarConnect = function MenuBarConnect(_ref) {
         dispatchActiveMapId(uiTypes.DialogTypes.SoundingsSources, isSourcesOpenInStore, currentActiveMapIdSources);
         break;
       case MenuOptions.locations:
-        dispatchActiveMapId(uiTypes.DialogTypes.SoundingsLocations, isLocationsOpenInStore, currentActiveMapIdLocations);
-        break;
+        {
+          var newIsLocationsOpen = currentActiveMapIdLocations !== viewId ? true : !isLocationsOpenInStore;
+          dispatchActiveMapId(uiTypes.DialogTypes.SoundingsLocations, isLocationsOpenInStore, currentActiveMapIdLocations);
+          dispatch(soundingsActions.setLocationsMenuOpen({
+            viewId: viewId,
+            isLocationsDialogOpen: newIsLocationsOpen,
+            origin: SoundingsActionOrigin.soundingsComponent
+          }));
+          break;
+        }
       case MenuOptions.profileData:
         dispatchActiveMapId(uiTypes.DialogTypes.SoundingsProfileData, isProfileDataOpenInStore, currentActiveMapIdProfileData);
         break;
     }
-  }, [dispatchActiveMapId, isSoundingsManagerOpenInStore, currentActiveMapIdsoundingsManager, isSourcesOpenInStore, currentActiveMapIdSources, isLocationsOpenInStore, currentActiveMapIdLocations, isProfileDataOpenInStore, currentActiveMapIdProfileData]);
+  }, [dispatch, dispatchActiveMapId, viewId, isSoundingsManagerOpenInStore, currentActiveMapIdsoundingsManager, isSourcesOpenInStore, currentActiveMapIdSources, isLocationsOpenInStore, currentActiveMapIdLocations, isProfileDataOpenInStore, currentActiveMapIdProfileData]);
   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 +4102,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 +4456,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),
@@ -4413,6 +4557,7 @@ var drawDryAdiabatsBijvoet = function drawDryAdiabatsBijvoet(_ref2) {
     yScale = _ref2.yScale,
     svg = _ref2.svg,
     d3GraphId = _ref2.d3GraphId;
+  var lineGenerator = d3.line();
   for (var Tbase = -20; Tbase < 40; Tbase += 5) {
     var Px = [];
     var tempKelvin = tempToKelvin(Tbase);
@@ -4426,7 +4571,6 @@ var drawDryAdiabatsBijvoet = function drawDryAdiabatsBijvoet(_ref2) {
       var Tpx = xScale(theta);
       Px.push([Tpx, Ppx]);
     }
-    var lineGenerator = d3.line();
     var daPathString = lineGenerator(Px);
     var strID = Tbase + "-dryadiabat";
     svg.append('path').attr('id', strID).attr('d', daPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'green').style('opacity', 0.3).attr('clip-path', "url(#clip-" + d3GraphId + "-BIJVOETd3)");
@@ -4525,8 +4669,10 @@ var drawIsothermsBijvoet = function drawIsothermsBijvoet(_ref2) {
     xScale = _ref2.xScale,
     yScale = _ref2.yScale,
     svg = _ref2.svg,
+    labelSvg = _ref2.labelSvg,
     height = _ref2.height,
     d3GraphId = _ref2.d3GraphId;
+  var lineGenerator = d3.line();
   // lines of constant temperature (2 degree interval from -150...+40C)
   for (var temp = -150; temp <= 40; temp += 2) {
     var _points$;
@@ -4537,12 +4683,11 @@ var drawIsothermsBijvoet = function drawIsothermsBijvoet(_ref2) {
       var theta = calculateThetaFromPressTemp(pressToPascal(pressure), Tiso, REFERENCE_PRESSURE);
       points.push([xScale(theta), yScale(pressure)]);
     }
-    var lineGenerator = d3.line();
     var pathString = lineGenerator(points);
     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 +4830,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 +4854,7 @@ var drawStaticLines = function drawStaticLines(_ref) {
       xScale: xScale,
       yScale: yScale,
       svg: svg,
+      labelSvg: bijvoetLabelSvg,
       height: height,
       d3GraphId: d3GraphId
     });
@@ -4773,105 +4920,503 @@ var drawStaticLines = function drawStaticLines(_ref) {
   }
 };
 
-var shadow$1 = '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)';
-var soundingsStyle$1 = {
-  tooltip: {
-    display: 'block',
-    position: 'absolute',
-    borderRadius: '1.5px',
-    backgroundColor: 'geowebColors.soundings.tooltip.background',
-    boxShadow: shadow$1,
-    padding: '2px 4px',
-    pointerEvents: 'none',
-    zIndex: 500
-  },
-  pressure: {
-    fontSize: '10px'
-  },
-  temperature: {
-    fontSize: '12px',
-    fontWeight: 'bold'
-  },
-  dewPoint: {
-    fontSize: '12px',
-    fontWeight: 'bold'
-  }};
-var Soundings = function Soundings(_ref) {
-  var d3GraphId = _ref.d3GraphId,
-    data = _ref.data,
-    svgDimensions = _ref.svgDimensions,
-    _ref$showTooltip = _ref.showTooltip,
-    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);
-  var tempRef = useRef(null);
-  var dewpointRef = useRef(null);
-  // Refs to store current scale/data for shared mouse effect
-  var yScaleRef = useRef(null);
-  var marginRef = useRef(null);
-  var widthRef = useRef(0);
-  var svgRectRef = useRef(null);
-  var tooltipDataRef = useRef(null);
-  var _useSharedMouseY = useSharedMouseY(),
-    clientY = _useSharedMouseY.clientY;
-  // Set SVG dimensions (required props; no optional chaining needed)
-  var baseWidth = svgDimensions.width,
-    baseHeight = svgDimensions.height,
-    margin = svgDimensions.margin;
-  var width = baseWidth - (margin.left + margin.right);
-  var height = baseHeight - (margin.top + margin.bottom);
-  useEffect(function () {
-    if (!svgRef.current) {
-      return;
-    }
-    var svg = initializeSvg$1({
-      svgRef: svgRef,
-      width: width,
-      height: height,
-      margin: margin,
-      diagramType: diagramType,
-      d3GraphId: scopedGraphId
-    });
-    var svgRectangle = svgRef.current.getBoundingClientRect();
-    svgRectRef.current = svgRectangle;
-    marginRef.current = margin;
-    widthRef.current = width;
-    var minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
-    var maxT = maxTemperature;
-    var _createScales = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT),
-      xScale = _createScales[0],
-      yScale = _createScales[1];
-    yScaleRef.current = yScale;
-    drawAxes$1({
-      svg: svg,
-      xScale: xScale,
-      yScale: yScale,
-      height: height,
-      diagramType: diagramType
-    });
-    drawStaticLines({
-      diagramType: diagramType,
-      dp: dp,
-      staticPressureArray: staticPressureArray,
-      minTemperature: minT,
-      maxTemperature: maxT,
-      height: height,
-      width: width,
-      xScale: xScale,
-      yScale: yScale,
-      minPressure: minPressure,
-      maxPressure: maxPressure,
-      svg: svg,
-      d3GraphId: scopedGraphId
-    });
-    data.forEach(function (features, index) {
-      var color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
-      var temperatureValues = features.map(function (feature) {
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var windSymbolDefinitions = {
+  calm: "<svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M25 45C36.0456 45 45 36.0456 45 25C45 13.9543 36.0456 5 25 5C13.9543 5 5 13.9543 5 25C5 36.0456 13.9543 45 25 45Z\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
+  lightAir: "<svg width=\"14\" height=\"48\" viewBox=\"0 0 14 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.22656 4.89307V48.0001M7.22656 43.0262V44.6842\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
+  fiveKnots: "<svg width=\"15\" height=\"49\" viewBox=\"0 0 15 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.26953 5.57324V48.608M8.26953 40.5757L0.269531 42.2309\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  tenKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17.0781 4.64502V44.9031L1.07812 47.9999\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  fifteenKnots: "<svg width=\"23\" height=\"50\" viewBox=\"0 0 23 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.4727 5.55469V45.8128L0.472656 48.9095M16.4727 38.0708L9.61551 39.6192\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
+  twentyKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.8555 4.71924V44.9773L0.855469 48.0741M16.8555 38.4093L0.855469 41.5061\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  twentyFiveKnots: "<svg width=\"23\" height=\"51\" viewBox=\"0 0 23 51\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.2383 4.94434V46.1541L0.238281 49.3241M16.2383 40.3787L0.238281 43.5486M16.2383 33.9801L9.38114 35.5651\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  thirtyKnots: "<svg width=\"23\" height=\"50\" viewBox=\"0 0 23 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.1914 5.64502V45.9031L0.191406 48.9999M16.1914 40.3459L0.191406 43.4427M16.1914 34.9407L0.191406 38.0375\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  thirtyFiveKnots: "<svg width=\"19\" height=\"50\" viewBox=\"0 0 19 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.0028 4.96729V45.2253L1.16406 48.3221M12.0028 39.6443L1.16406 42.7411M12.0028 34.4793L1.16406 37.576M12.0028 29.2735L7.35761 30.8219\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  fortyKnots: "<svg width=\"24\" height=\"50\" viewBox=\"0 0 24 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.5391 5.40311V45.6612L0.539062 48.7579M16.5391 40.4525L0.539062 43.5493M16.5391 35.0449L0.539062 38.1417M16.5391 30.2009L0.539062 33.2976\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  fortyFiveKnots: "<svg width=\"23\" height=\"50\" viewBox=\"0 0 23 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.4492 5.4043V45.6624L0.449219 48.7591M16.4492 40.1513L0.449219 43.2481M16.4492 34.7124L0.449219 37.8091M16.4492 29.2013L0.449219 32.2981M16.4492 24.3066L9.59208 25.855\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  fiftyKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.9062 5.27002V45.5281L0.90625 48.6249L16.9062 37.7861\" fill=\"black\"/>\n<path d=\"M16.9053 5.27002V45.5281L4.35132 47.2337L16.9053 37.7861\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
+  fiftyFiveKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.728 5.55371V45.8118L0.894531 48.9085L16.728 38.0698\" fill=\"black\"/>\n<path d=\"M16.73 5.55371V45.8118L4.33984 47.5245L16.73 38.0698\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.7292 32.7358C13.6376 33.3406 8.8125 34.2842 8.8125 34.2842\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  sixtyKnots: "<svg width=\"23\" height=\"49\" viewBox=\"0 0 23 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.2891 5.27051V45.5286L0.289062 48.6253L16.2891 37.7866\" fill=\"black\"/>\n<path d=\"M16.2897 5.27051V45.5286L3.7422 47.2478L16.2897 37.7866\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.2891 34.6899L0.289062 37.7867\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  sixtyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L9.5 28.5\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  seventyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
+  seventyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 22C13.8251 22.6048 9 23.5484 9 23.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  eightyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  eightyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 17C13.8251 17.6048 9 18.5484 9 18.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
+  ninetyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
+  ninetyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 12C13.8251 12.6048 9 13.5484 9 13.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
+  hundredFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 25C13.8251 25.6048 9 26.5484 9 26.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
+  hundredTenKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredFifteenKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 21C13.8251 21.6048 9 22.5484 9 22.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredTwentyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredTwentyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 17C13.8251 17.6048 9 18.5484 9 18.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
+  hundredThirtyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredThirtyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 13C13.8251 13.6048 9 14.5484 9 14.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredFortyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 13C10.7518 14.1718 1 16 1 16\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredFortyFiveKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 5.26807V25.3971V45.5261L1 48.6229L17 37.7842\" fill=\"black\"/>\n<path d=\"M16.9984 5.26807V30M16.9984 37.7842L4.35938 47.2985L16.9984 45.5261V37.5M16.9984 30C16.9984 30 5.67406 37.7842 4 39M16.9984 30V31.5M4 39C9.07621 38.4142 16.9984 37.5 16.9984 37.5M4 39C9.07621 36.0711 16.9984 31.5 16.9984 31.5M4 39C9.07682 36.6569 17 33 17 33M4 39C9.07621 37.2426 16.9984 34.5 16.9984 34.5M4 39C9.07621 37.8284 16.9984 36 16.9984 36M16.9984 37.5V36M16.9984 31.5V34.5M16.9984 34.5V36\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 12C13.8251 12.6048 9 13.5484 9 13.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 27C10.7518 28.1718 1 30 1 30\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 23C10.7518 24.1718 1 26 1 26\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 19C10.7518 20.1718 1 22 1 22\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 15C10.7518 16.1718 1 18 1 18\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
+  hundredFiftyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V19M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M16.9984 28V26.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34M16.9984 19C16.9984 19 8 25.5 4 29M16.9984 19V20.5M4 29C9.07621 28.0237 16.9984 26.5 16.9984 26.5M4 29C9.07621 25.6805 16.9984 20.5 16.9984 20.5M4 29C9.07621 26.4616 16.9984 22.5 16.9984 22.5M4 29C9.07621 27.0474 16.9984 24 16.9984 24M4 29C9.07621 27.5355 16.9984 25.25 16.9984 25.25M16.9984 26.5V25.25M16.9984 20.5V22.5M16.9984 22.5V24M16.9984 24V25.25\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>"
+};
+var windSpeedRanges = [{
+  min: 0,
+  max: 1,
+  symbol: windSymbolDefinitions.calm
+}, {
+  min: 1,
+  max: 4.5,
+  symbol: windSymbolDefinitions.lightAir
+}, {
+  min: 4.5,
+  max: 7.5,
+  symbol: windSymbolDefinitions.fiveKnots
+}, {
+  min: 7.5,
+  max: 12.5,
+  symbol: windSymbolDefinitions.tenKnots
+}, {
+  min: 12.5,
+  max: 17.5,
+  symbol: windSymbolDefinitions.fifteenKnots
+}, {
+  min: 17.5,
+  max: 22.5,
+  symbol: windSymbolDefinitions.twentyKnots
+}, {
+  min: 22.5,
+  max: 27.5,
+  symbol: windSymbolDefinitions.twentyFiveKnots
+}, {
+  min: 27.5,
+  max: 32.5,
+  symbol: windSymbolDefinitions.thirtyKnots
+}, {
+  min: 32.5,
+  max: 37.5,
+  symbol: windSymbolDefinitions.thirtyFiveKnots
+}, {
+  min: 37.5,
+  max: 42.5,
+  symbol: windSymbolDefinitions.fortyKnots
+}, {
+  min: 42.5,
+  max: 47.5,
+  symbol: windSymbolDefinitions.fortyFiveKnots
+}, {
+  min: 47.5,
+  max: 52.5,
+  symbol: windSymbolDefinitions.fiftyKnots
+}, {
+  min: 52.5,
+  max: 57.5,
+  symbol: windSymbolDefinitions.fiftyFiveKnots
+}, {
+  min: 57.5,
+  max: 62.5,
+  symbol: windSymbolDefinitions.sixtyKnots
+}, {
+  min: 62.5,
+  max: 67.5,
+  symbol: windSymbolDefinitions.sixtyFiveKnots
+}, {
+  min: 67.5,
+  max: 72.5,
+  symbol: windSymbolDefinitions.seventyKnots
+}, {
+  min: 72.5,
+  max: 77.5,
+  symbol: windSymbolDefinitions.seventyFiveKnots
+}, {
+  min: 77.5,
+  max: 82.5,
+  symbol: windSymbolDefinitions.eightyKnots
+}, {
+  min: 82.5,
+  max: 87.5,
+  symbol: windSymbolDefinitions.eightyFiveKnots
+}, {
+  min: 87.5,
+  max: 92.5,
+  symbol: windSymbolDefinitions.ninetyKnots
+}, {
+  min: 92.5,
+  max: 97.5,
+  symbol: windSymbolDefinitions.ninetyFiveKnots
+}, {
+  min: 97.5,
+  max: 102.5,
+  symbol: windSymbolDefinitions.hundredKnots
+}, {
+  min: 102.5,
+  max: 107.5,
+  symbol: windSymbolDefinitions.hundredFiveKnots
+}, {
+  min: 107.5,
+  max: 112.5,
+  symbol: windSymbolDefinitions.hundredTenKnots
+}, {
+  min: 112.5,
+  max: 117.5,
+  symbol: windSymbolDefinitions.hundredFifteenKnots
+}, {
+  min: 117.5,
+  max: 122.5,
+  symbol: windSymbolDefinitions.hundredTwentyKnots
+}, {
+  min: 122.5,
+  max: 127.5,
+  symbol: windSymbolDefinitions.hundredTwentyFiveKnots
+}, {
+  min: 127.5,
+  max: 132.5,
+  symbol: windSymbolDefinitions.hundredThirtyKnots
+}, {
+  min: 132.5,
+  max: 137.5,
+  symbol: windSymbolDefinitions.hundredThirtyFiveKnots
+}, {
+  min: 137.5,
+  max: 142.5,
+  symbol: windSymbolDefinitions.hundredFortyKnots
+}, {
+  min: 142.5,
+  max: 147.5,
+  symbol: windSymbolDefinitions.hundredFortyFiveKnots
+}, {
+  min: 147.5,
+  max: 152,
+  symbol: windSymbolDefinitions.hundredFiftyKnots
+}];
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var MIN_VERTICAL_SCALE = 1;
+var MAX_VERTICAL_SCALE = 7;
+var DEFAULT_THINNING_BASE = 1.15;
+var MIN_THINNING_BASE = 1.08;
+var EXTRA_REVEAL_EXPONENT = 0.5; // Decrease this number to reveal more barbs earlier as you zoom in
+var extendIsoBar = function extendIsoBar(path, horizontalBarbMargin) {
+  var match = /^M([\d.-]+),([\d.-]+)\s*L([\d.-]+),([\d.-]+)/.exec(path);
+  if (match) {
+    var startX = parseFloat(match[1]);
+    var startY = parseFloat(match[2]);
+    var endX = parseFloat(match[3]);
+    var endY = parseFloat(match[4]);
+    return "M" + startX + "," + startY + "L" + (endX + horizontalBarbMargin * 3) + "," + endY;
+  }
+  return path;
+};
+var extendXAxis = function extendXAxis(path, horizontalBarbMargin) {
+  var match = /^M([\d.-]+),([\d.-]+)H([\d.-]+)/.exec(path);
+  if (match) {
+    var endX = parseFloat(match[3]);
+    return path.replace(/H[\d.-]+/, "H" + (endX + horizontalBarbMargin * 3));
+  }
+  return path;
+};
+var drawWindBarbs = function drawWindBarbs(_ref) {
+  var _rootSvg$node;
+  var svgRef = _ref.svgRef,
+    plotGroup = _ref.plotGroup,
+    yScale = _ref.yScale,
+    data = _ref.data,
+    width = _ref.width,
+    margin = _ref.margin,
+    _ref$barbColor = _ref.barbColor,
+    barbColor = _ref$barbColor === void 0 ? 'black' : _ref$barbColor,
+    _ref$columnOffsetX = _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;
+  var visibleItems = getVisibleWindItemsForVerticalScale(data, verticalScale).filter(function (item) {
+    return item.pressure >= 150;
+  });
+  // Measure width and height and make extra room for one column
+  // of windbarbs
+  var rootSvg = d3.select(svgRef.current);
+  var currentWidth = (_rootSvg$node = rootSvg.node()) == null ? void 0 : _rootSvg$node.getBoundingClientRect().width;
+  if (!currentWidth) {
+    return;
+  }
+  // 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 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);
+  });
+  // Expand root SVG width to make room for barbs column at the right
+  rootSvg.attr('width', currentWidth + margin.left + horizontalBarbMargin);
+  // 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 + 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);
+    if (windSymbol) {
+      var _innerGroup$node;
+      // Inner group will have rotation and scaling applied to it
+      var innerGroup = group.append('g');
+      (_innerGroup$node = innerGroup.node()) == null || _innerGroup$node.appendChild(windSymbol);
+      // Update stroke color
+      innerGroup.selectAll('*').attr('stroke', barbColor);
+      // Only update the fill for the paths that already used a fill
+      // in their original svg form.
+      innerGroup.selectAll('*').each(function (_d, i, nodes) {
+        var el = d3.select(nodes[i]);
+        var currentFill = el.attr('fill');
+        if (currentFill && currentFill !== 'none') {
+          el.attr('fill', barbColor);
+        }
+      });
+      var bbox = windSymbol.getBBox();
+      // Central point
+      var cx = bbox.x + bbox.width / 2;
+      var cy = bbox.y + bbox.height / 2;
+      var rotation = 180 + data.windDirection;
+      var y = yScale(data.pressure);
+      // 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 + ")");
+    }
+  });
+};
+var removeItemsExponential = function removeItemsExponential(array, base) {
+  if (base === void 0) {
+    base = DEFAULT_THINNING_BASE;
+  }
+  var indicesToKeep = [];
+  var i = 0;
+  var nextIndex = 0;
+  while (nextIndex < array.length) {
+    nextIndex = Math.floor(Math.pow(base, i));
+    indicesToKeep.push(nextIndex);
+    i += 1;
+  }
+  return array.filter(function (_, index) {
+    return indicesToKeep.includes(index);
+  });
+};
+var getVisibleWindItemsForVerticalScale = function getVisibleWindItemsForVerticalScale(data, verticalScale) {
+  var reversedData = [].concat(data).reverse();
+  var baselineItems = removeItemsExponential(reversedData);
+  var maxDetailItems = removeItemsExponential(reversedData, MIN_THINNING_BASE);
+  var baselineSet = new Set(baselineItems);
+  var maxDetailSet = new Set(maxDetailItems);
+  // Candidate additions are fixed and ordered; zooming in reveals a prefix only.
+  var extraCandidates = reversedData.filter(function (item) {
+    return maxDetailSet.has(item) && !baselineSet.has(item);
+  });
+  var clampedScale = Math.max(MIN_VERTICAL_SCALE, Math.min(MAX_VERTICAL_SCALE, verticalScale));
+  var normalizedScale = (clampedScale - MIN_VERTICAL_SCALE) / (MAX_VERTICAL_SCALE - MIN_VERTICAL_SCALE);
+  // Use a front-loaded curve so extra barbs appear earlier when zooming in,
+  // while still keeping zoom level 1 unchanged and monotonic.
+  var revealProgress = Math.pow(normalizedScale, EXTRA_REVEAL_EXPONENT);
+  var extraCount = Math.floor(revealProgress * extraCandidates.length);
+  var extraSet = new Set(extraCandidates.slice(0, extraCount));
+  return reversedData.filter(function (item) {
+    return baselineSet.has(item) || extraSet.has(item);
+  });
+};
+var getWindSymbol = function getWindSymbol(value) {
+  var matchedRange = windSpeedRanges.find(function (_ref2) {
+    var min = _ref2.min,
+      max = _ref2.max;
+    return value >= min && value < max;
+  });
+  // Out of range
+  if (!matchedRange) {
+    return null;
+  }
+  // SVG string to actual SVG element
+  var parser = new DOMParser();
+  var svgDoc = parser.parseFromString(matchedRange.symbol, 'image/svg+xml');
+  var svgNode = svgDoc.documentElement;
+  // Return the parsed SVG node
+  return svgNode;
+};
+
+var shadow$1 = '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)';
+var soundingsStyle$1 = {
+  tooltip: {
+    display: 'block',
+    position: 'absolute',
+    borderRadius: '1.5px',
+    backgroundColor: 'geowebColors.soundings.tooltip.background',
+    boxShadow: shadow$1,
+    padding: '2px 4px',
+    pointerEvents: 'none',
+    zIndex: 500
+  },
+  pressure: {
+    fontSize: '10px'
+  },
+  temperature: {
+    fontSize: '12px',
+    fontWeight: 'bold'
+  },
+  dewPoint: {
+    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,
+    svgDimensions = _ref.svgDimensions,
+    _ref$showTooltip = _ref.showTooltip,
+    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);
+  var tempRef = useRef(null);
+  var dewpointRef = useRef(null);
+  // Refs to store current scale/data for shared mouse effect
+  var yScaleRef = useRef(null);
+  var marginRef = useRef(null);
+  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,
+    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,
+    margin = svgDimensions.margin;
+  var width = baseWidth - (margin.left + margin.right);
+  var height = baseHeight - (margin.top + margin.bottom);
+  useEffect(function () {
+    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: 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;
+    widthRef.current = width;
+    var minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
+    var maxT = maxTemperature;
+    var _createScales = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT),
+      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: axisLayer,
+      xScale: xScale,
+      yScale: yScale,
+      height: height,
+      diagramType: diagramType
+    });
+    applyAxisClips();
+    drawStaticLines({
+      diagramType: diagramType,
+      dp: dp,
+      staticPressureArray: staticPressureArray,
+      minTemperature: minT,
+      maxTemperature: maxT,
+      height: height,
+      width: width,
+      xScale: xScale,
+      yScale: yScale,
+      minPressure: minPressure,
+      maxPressure: maxPressure,
+      svg: zoomContent,
+      bijvoetLabelSvg: bijvoetLabelLayer,
+      d3GraphId: scopedGraphId
+    });
+    data.forEach(function (features, index) {
+      var color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
+      var temperatureValues = features.map(function (feature) {
         return feature.properties.temp;
       });
       var pressureValues = features.map(function (feature) {
@@ -4882,10 +5427,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 +5442,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([MIN_VERTICAL_SCALE, MAX_VERTICAL_SCALE]).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) {
@@ -4925,477 +5540,230 @@ var Soundings = function Soundings(_ref) {
       dewpointRef.current && (dewpointRef.current.style.display = 'none');
       return;
     }
-    if (!yScaleRef.current || !marginRef.current || !tooltipDataRef.current) {
-      return;
-    }
-    // Synthetic event with shared clientY
-    var synthetic = {
-      clientX: rect.left + rect.width / 2,
-      clientY: clientY,
-      pageY: clientY + window.scrollY,
-      target: svgRef.current,
-      currentTarget: svgRef.current
-    };
-    var pressureRefd3 = d3.select(pressureRef.current);
-    var tempRefd3 = d3.select(tempRef.current);
-    var dewpointRefd3 = d3.select(dewpointRef.current);
-    var minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
-    var maxT = maxTemperature;
-    var _createScales2 = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT),
-      yScale = _createScales2[1];
-    drawSoundingsTooltip({
-      event: synthetic,
-      yScale: yScale,
-      svgRectangle: rect,
-      margin: marginRef.current,
-      width: widthRef.current,
-      pressureRefd3: pressureRefd3,
-      tempRefd3: tempRefd3,
-      dewpointRefd3: dewpointRefd3,
-      tooltipData: tooltipDataRef.current,
-      diagramType: diagramType
-    });
-  }, [clientY, showTooltip, diagramType, data, width, height]);
-  return jsxs(Box, {
-    ref: canvasRef,
-    sx: {
-      position: 'relative'
-    },
-    children: [jsx("svg", {
-      ref: svgRef
-    }), jsx(Box, {
-      "data-testid": "pressure-tooltip",
-      ref: pressureRef,
-      sx: Object.assign({}, soundingsStyle$1.tooltip, soundingsStyle$1.pressure)
-    }), jsx(Box, {
-      "data-testid": "temperature-tooltip",
-      ref: tempRef,
-      sx: Object.assign({}, soundingsStyle$1.tooltip, soundingsStyle$1.temperature)
-    }), jsx(Box, {
-      "data-testid": "dewpoint-tooltip",
-      ref: dewpointRef,
-      sx: Object.assign({}, soundingsStyle$1.tooltip, soundingsStyle$1.dewPoint)
-    })]
-  });
-};
-
-var TIMESLIDER_HEIGHT = 135;
-var LABEL_MIN_WIDTH = 48;
-var useMaxLabelCount = function useMaxLabelCount(ref) {
-  var _React$useState = React.useState(0),
-    width = _React$useState[0],
-    setWidth = _React$useState[1];
-  React.useLayoutEffect(function () {
-    var resizeObserver;
-    if (ref.current) {
-      resizeObserver = new ResizeObserver(function (entry) {
-        var _entry$0$target$getBo = entry[0].target.getBoundingClientRect(),
-          width = _entry$0$target$getBo.width;
-        setWidth(width);
-      });
-      resizeObserver.observe(ref.current);
-    }
-    return function () {
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  }, [ref]);
-  var maxLabelCount = Math.max(1, Math.floor(width / LABEL_MIN_WIDTH));
-  return maxLabelCount;
-};
-var shouldHideLabel = function shouldHideLabel(nItems, index, maxLabelCount) {
-  var nthLabelsToShow = Math.ceil(nItems / maxLabelCount);
-  return nItems > maxLabelCount &&
-  // hide labels if too many items
-  index !== nItems - 1 && (
-  // not last item (always shown)
-  // only show every nth label, skip label within last n/2 items so end doesn't get cluttered
-  index % nthLabelsToShow !== 0 || nItems - 1 - index < nthLabelsToShow / 2);
-};
-var SoundingsTimeSlider = function SoundingsTimeSlider(_ref) {
-  var timesteps = _ref.timesteps,
-    selectedTime = _ref.selectedTime,
-    updateSelectedTime = _ref.updateSelectedTime;
-  var sliderRef = React.useRef(null);
-  var maxLabelCount = useMaxLabelCount(sliderRef);
-  var _useSoundingsTranslat = useSoundingsTranslation(),
-    i18n = _useSoundingsTranslat.i18n;
-  var marks = timesteps.filter(function (date) {
-    return dateUtils.isValidIsoDateString(date);
-  }).map(function (date, index, arr) {
-    return {
-      value: dateUtils.unix(dateUtils.getUtcFromString(date)),
-      label: shouldHideLabel(arr.length, index, maxLabelCount) ? '' : dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
-    };
-  });
-  var currentTimeIndex = React.useMemo(function () {
-    if (timesteps.length === 0) {
-      return -1;
-    }
-    var selectedUtc = dateUtils.getUtcFromString(selectedTime);
-    if (!selectedUtc) {
-      return 0;
-    }
-    var selectedUnix = dateUtils.unix(selectedUtc);
-    var indexByExactTimestamp = timesteps.findIndex(function (time) {
-      var utcTime = dateUtils.getUtcFromString(time);
-      if (!utcTime) {
-        return false;
-      }
-      return dateUtils.unix(utcTime) === selectedUnix;
-    });
-    if (indexByExactTimestamp !== -1) {
-      return indexByExactTimestamp;
-    }
-    var indexByExactString = timesteps.findIndex(function (time) {
-      return time === selectedTime;
-    });
-    if (indexByExactString !== -1) {
-      return indexByExactString;
-    }
-    // If selected time is not a sounding timestep, anchor on the nearest timestep
-    // so forward/backward navigation continues from the expected point in time.
-    return timesteps.reduce(function (nearestIndex, time, index) {
-      var utcTime = dateUtils.getUtcFromString(time);
-      if (!utcTime) {
-        return nearestIndex;
-      }
-      var currentDiff = Math.abs(dateUtils.unix(utcTime) - selectedUnix);
-      var nearestUtc = dateUtils.getUtcFromString(timesteps[nearestIndex]);
-      if (!nearestUtc) {
-        return index;
-      }
-      var nearestDiff = Math.abs(dateUtils.unix(nearestUtc) - selectedUnix);
-      return currentDiff < nearestDiff ? index : nearestIndex;
-    }, 0);
-  }, [selectedTime, timesteps]);
-  var onStepBackward = React.useCallback(function () {
-    var precedingIndex = Math.max(currentTimeIndex - 1, 0);
-    updateSelectedTime(timesteps[precedingIndex]);
-  }, [currentTimeIndex, updateSelectedTime, timesteps]);
-  var onStepForward = React.useCallback(function () {
-    var followingIndex = Math.min(currentTimeIndex + 1, timesteps.length - 1);
-    updateSelectedTime(timesteps[followingIndex]);
-  }, [currentTimeIndex, updateSelectedTime, timesteps]);
-  return jsxs("div", {
-    ref: sliderRef,
-    style: {
-      display: 'flex',
-      paddingTop: '32px',
-      marginRight: '80px',
-      marginLeft: '24px',
-      height: TIMESLIDER_HEIGHT + "px"
+    if (!yScaleRef.current || !marginRef.current || !tooltipDataRef.current) {
+      return;
+    }
+    // Synthetic event with shared clientY
+    var synthetic = {
+      clientX: rect.left + rect.width / 2,
+      clientY: clientY,
+      pageY: clientY + window.scrollY,
+      target: svgRef.current,
+      currentTarget: svgRef.current
+    };
+    var pressureRefd3 = d3.select(pressureRef.current);
+    var tempRefd3 = d3.select(tempRef.current);
+    var dewpointRefd3 = d3.select(dewpointRef.current);
+    var minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
+    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,
+      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, verticalZoom.scale, verticalZoom.y]);
+  return jsxs(Box, {
+    ref: canvasRef,
+    sx: {
+      position: 'relative'
     },
-    children: [jsxs("div", {
-      style: {
-        minWidth: '60px',
-        marginTop: '2px',
-        display: 'flex',
-        gap: '4px'
-      },
-      children: [jsx(BackwardForwardStepButton, {
-        isDisabled: marks.length === 0,
-        isForwardStep: false,
-        onClickBFButton: onStepBackward
-      }), jsx(BackwardForwardStepButton, {
-        isDisabled: marks.length === 0,
-        isForwardStep: true,
-        onClickBFButton: onStepForward
-      })]
-    }), marks.length === 0 ? jsx(CustomSlider, {
-      disabled: true,
-      max: 1,
-      min: 0,
-      orientation: "horizontal",
-      value: 0.5
-    }) : jsx(CustomSlider, {
-      extraStyles: {
-        margin: '0px 20px 0px 20px',
-        '.MuiSlider-markLabel': {
-          transform: 'translate(-90%, 20px) rotate(-45deg)',
-          transformOrigin: 'top center'
-        }
-      },
-      marks: marks,
-      max: marks[marks.length - 1].value,
-      min: marks[0].value,
-      onChange: function onChange(_, value) {
-        updateSelectedTime(dateUtils.fromUnix(value).toISOString());
-      },
-      orientation: "horizontal",
-      slotProps: {
-        // Workaround for MUI bug where labels are just draggable area and clicking on one
-        // does not necessarily select the described timestep
-        markLabel: {
-          onPointerDown: function onPointerDown(event) {
-            event.preventDefault();
-            var markIndex = event.currentTarget.getAttribute('data-index');
-            var mark = marks[Number(markIndex)];
-            var value = mark.value;
-            updateSelectedTime(dateUtils.fromUnix(value).toISOString());
-          }
-        }
-      },
-      step: null,
-      value: dateUtils.unix(dateUtils.getUtcFromString(selectedTime)),
-      valueLabelDisplay: "on",
-      valueLabelFormat: function valueLabelFormat(value) {
-        return dateUtils.dateToString(dateUtils.fromUnix(value), "yyyy iii dd MMM HH:mm 'UTC'", true, i18n.language);
-      }
+    children: [jsx("svg", {
+      ref: svgRef
+    }), jsx(Box, {
+      "data-testid": "pressure-tooltip",
+      ref: pressureRef,
+      sx: Object.assign({}, soundingsStyle$1.tooltip, soundingsStyle$1.pressure)
+    }), jsx(Box, {
+      "data-testid": "temperature-tooltip",
+      ref: tempRef,
+      sx: Object.assign({}, soundingsStyle$1.tooltip, soundingsStyle$1.temperature)
+    }), jsx(Box, {
+      "data-testid": "dewpoint-tooltip",
+      ref: dewpointRef,
+      sx: Object.assign({}, soundingsStyle$1.tooltip, soundingsStyle$1.dewPoint)
     })]
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var OFFSET_HEIGHT = 100; // Space reserved in layout
-var useSoundingsDiagramSize = function useSoundingsDiagramSize(ref) {
+var TIMESLIDER_HEIGHT = 135;
+var LABEL_MIN_WIDTH = 48;
+var useMaxLabelCount = function useMaxLabelCount(ref) {
   var _React$useState = React.useState(0),
-    size = _React$useState[0],
-    setSize = _React$useState[1];
+    width = _React$useState[0],
+    setWidth = _React$useState[1];
   React.useLayoutEffect(function () {
-    var container = ref.current;
-    if (!container) {
-      return undefined;
-    }
-    var resizeObserver = new ResizeObserver(function (entries) {
-      if (!entries.length) {
-        return;
-      }
-      var _entries$0$contentRec = entries[0].contentRect,
-        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));
-      setSize(nextSize > 0 ? nextSize : 0);
-    });
-    resizeObserver.observe(container);
-    return function () {
-      resizeObserver.disconnect();
-    };
-  }, [ref]);
-  return size;
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var animateResizeTransform = function animateResizeTransform(svg, marginLocal, innerHeight, prevInnerHeightRef) {
-  var prevInnerHeight = typeof prevInnerHeightRef.current === 'number' ? prevInnerHeightRef.current : 0;
-  var scaleYStart = prevInnerHeight > 0 && innerHeight > 0 ? prevInnerHeight / innerHeight : 0;
-  svg.attr('transform', "translate(" + marginLocal.left + "," + marginLocal.top + ") scale(1," + scaleYStart + ")").transition().duration(300).attr('transform', "translate(" + marginLocal.left + "," + marginLocal.top + ") scale(1,1)");
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var windSymbolDefinitions = {
-  calm: "<svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M25 45C36.0456 45 45 36.0456 45 25C45 13.9543 36.0456 5 25 5C13.9543 5 5 13.9543 5 25C5 36.0456 13.9543 45 25 45Z\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
-  lightAir: "<svg width=\"14\" height=\"48\" viewBox=\"0 0 14 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.22656 4.89307V48.0001M7.22656 43.0262V44.6842\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
-  fiveKnots: "<svg width=\"15\" height=\"49\" viewBox=\"0 0 15 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.26953 5.57324V48.608M8.26953 40.5757L0.269531 42.2309\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  tenKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17.0781 4.64502V44.9031L1.07812 47.9999\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  fifteenKnots: "<svg width=\"23\" height=\"50\" viewBox=\"0 0 23 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.4727 5.55469V45.8128L0.472656 48.9095M16.4727 38.0708L9.61551 39.6192\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
-  twentyKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.8555 4.71924V44.9773L0.855469 48.0741M16.8555 38.4093L0.855469 41.5061\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  twentyFiveKnots: "<svg width=\"23\" height=\"51\" viewBox=\"0 0 23 51\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.2383 4.94434V46.1541L0.238281 49.3241M16.2383 40.3787L0.238281 43.5486M16.2383 33.9801L9.38114 35.5651\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  thirtyKnots: "<svg width=\"23\" height=\"50\" viewBox=\"0 0 23 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.1914 5.64502V45.9031L0.191406 48.9999M16.1914 40.3459L0.191406 43.4427M16.1914 34.9407L0.191406 38.0375\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  thirtyFiveKnots: "<svg width=\"19\" height=\"50\" viewBox=\"0 0 19 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.0028 4.96729V45.2253L1.16406 48.3221M12.0028 39.6443L1.16406 42.7411M12.0028 34.4793L1.16406 37.576M12.0028 29.2735L7.35761 30.8219\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  fortyKnots: "<svg width=\"24\" height=\"50\" viewBox=\"0 0 24 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.5391 5.40311V45.6612L0.539062 48.7579M16.5391 40.4525L0.539062 43.5493M16.5391 35.0449L0.539062 38.1417M16.5391 30.2009L0.539062 33.2976\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  fortyFiveKnots: "<svg width=\"23\" height=\"50\" viewBox=\"0 0 23 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.4492 5.4043V45.6624L0.449219 48.7591M16.4492 40.1513L0.449219 43.2481M16.4492 34.7124L0.449219 37.8091M16.4492 29.2013L0.449219 32.2981M16.4492 24.3066L9.59208 25.855\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  fiftyKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.9062 5.27002V45.5281L0.90625 48.6249L16.9062 37.7861\" fill=\"black\"/>\n<path d=\"M16.9053 5.27002V45.5281L4.35132 47.2337L16.9053 37.7861\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
-  fiftyFiveKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.728 5.55371V45.8118L0.894531 48.9085L16.728 38.0698\" fill=\"black\"/>\n<path d=\"M16.73 5.55371V45.8118L4.33984 47.5245L16.73 38.0698\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.7292 32.7358C13.6376 33.3406 8.8125 34.2842 8.8125 34.2842\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  sixtyKnots: "<svg width=\"23\" height=\"49\" viewBox=\"0 0 23 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16.2891 5.27051V45.5286L0.289062 48.6253L16.2891 37.7866\" fill=\"black\"/>\n<path d=\"M16.2897 5.27051V45.5286L3.7422 47.2478L16.2897 37.7866\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.2891 34.6899L0.289062 37.7867\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  sixtyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L9.5 28.5\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  seventyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>",
-  seventyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 22C13.8251 22.6048 9 23.5484 9 23.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  eightyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  eightyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 17C13.8251 17.6048 9 18.5484 9 18.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
-  ninetyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
-  ninetyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 32.0788L1 35.1756M17 26.8862L1 29.983\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 22C10.7518 23.1718 1 25 1 25\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 12C13.8251 12.6048 9 13.5484 9 13.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>\n",
-  hundredFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 25C13.8251 25.6048 9 26.5484 9 26.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
-  hundredTenKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredFifteenKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 21C13.8251 21.6048 9 22.5484 9 22.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredTwentyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredTwentyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 17C13.8251 17.6048 9 18.5484 9 18.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>\n",
-  hundredThirtyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredThirtyFiveKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M16.9167 13C13.8251 13.6048 9 14.5484 9 14.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredFortyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V28M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M17 25C10.7518 26.1718 1 28 1 28\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 21C10.7518 22.1718 1 24 1 24\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 17C10.7518 18.1718 1 20 1 20\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 13C10.7518 14.1718 1 16 1 16\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredFortyFiveKnots: "<svg width=\"24\" height=\"49\" viewBox=\"0 0 24 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 5.26807V25.3971V45.5261L1 48.6229L17 37.7842\" fill=\"black\"/>\n<path d=\"M16.9984 5.26807V30M16.9984 37.7842L4.35938 47.2985L16.9984 45.5261V37.5M16.9984 30C16.9984 30 5.67406 37.7842 4 39M16.9984 30V31.5M4 39C9.07621 38.4142 16.9984 37.5 16.9984 37.5M4 39C9.07621 36.0711 16.9984 31.5 16.9984 31.5M4 39C9.07682 36.6569 17 33 17 33M4 39C9.07621 37.2426 16.9984 34.5 16.9984 34.5M4 39C9.07621 37.8284 16.9984 36 16.9984 36M16.9984 37.5V36M16.9984 31.5V34.5M16.9984 34.5V36\" stroke=\"black\" stroke-width=\"1.8\"/>\n<path d=\"M16.9167 12C13.8251 12.6048 9 13.5484 9 13.5484\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 27C10.7518 28.1718 1 30 1 30\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 23C10.7518 24.1718 1 26 1 26\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 19C10.7518 20.1718 1 22 1 22\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n<path d=\"M17 15C10.7518 16.1718 1 18 1 18\" stroke=\"black\" stroke-width=\"1.8\" stroke-miterlimit=\"16\"/>\n</svg>",
-  hundredFiftyKnots: "<svg width=\"24\" height=\"47\" viewBox=\"0 0 24 47\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842\" fill=\"black\"/>\n<path d=\"M16.9984 3.26807V19M16.9984 35.7842L4.35938 45.2985L16.9984 43.5261V35.5M16.9984 28C16.9984 28 5.67406 35.7842 4 37M16.9984 28V29.5M16.9984 28V26.5M4 37C9.07621 36.4142 16.9984 35.5 16.9984 35.5M4 37C9.07621 34.0711 16.9984 29.5 16.9984 29.5M4 37C9.07682 34.6569 17 31 17 31M4 37C9.07621 35.2426 16.9984 32.5 16.9984 32.5M4 37C9.07621 35.8284 16.9984 34 16.9984 34M16.9984 35.5V34M16.9984 29.5V32.5M16.9984 32.5V34M16.9984 19C16.9984 19 8 25.5 4 29M16.9984 19V20.5M4 29C9.07621 28.0237 16.9984 26.5 16.9984 26.5M4 29C9.07621 25.6805 16.9984 20.5 16.9984 20.5M4 29C9.07621 26.4616 16.9984 22.5 16.9984 22.5M4 29C9.07621 27.0474 16.9984 24 16.9984 24M4 29C9.07621 27.5355 16.9984 25.25 16.9984 25.25M16.9984 26.5V25.25M16.9984 20.5V22.5M16.9984 22.5V24M16.9984 24V25.25\" stroke=\"black\" stroke-width=\"1.8\"/>\n</svg>"
+    var resizeObserver;
+    if (ref.current) {
+      resizeObserver = new ResizeObserver(function (entry) {
+        var _entry$0$target$getBo = entry[0].target.getBoundingClientRect(),
+          width = _entry$0$target$getBo.width;
+        setWidth(width);
+      });
+      resizeObserver.observe(ref.current);
+    }
+    return function () {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [ref]);
+  var maxLabelCount = Math.max(1, Math.floor(width / LABEL_MIN_WIDTH));
+  return maxLabelCount;
+};
+var shouldHideLabel = function shouldHideLabel(nItems, index, maxLabelCount) {
+  var nthLabelsToShow = Math.ceil(nItems / maxLabelCount);
+  return nItems > maxLabelCount &&
+  // hide labels if too many items
+  index !== nItems - 1 && (
+  // not last item (always shown)
+  // only show every nth label, skip label within last n/2 items so end doesn't get cluttered
+  index % nthLabelsToShow !== 0 || nItems - 1 - index < nthLabelsToShow / 2);
+};
+var SoundingsTimeSlider = function SoundingsTimeSlider(_ref) {
+  var timesteps = _ref.timesteps,
+    selectedTime = _ref.selectedTime,
+    updateSelectedTime = _ref.updateSelectedTime;
+  var sliderRef = React.useRef(null);
+  var maxLabelCount = useMaxLabelCount(sliderRef);
+  var _useSoundingsTranslat = useSoundingsTranslation(),
+    i18n = _useSoundingsTranslat.i18n;
+  var marks = timesteps.filter(function (date) {
+    return dateUtils.isValidIsoDateString(date);
+  }).map(function (date, index, arr) {
+    return {
+      value: dateUtils.unix(dateUtils.getUtcFromString(date)),
+      label: shouldHideLabel(arr.length, index, maxLabelCount) ? '' : dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
+    };
+  });
+  var currentTimeIndex = React.useMemo(function () {
+    if (timesteps.length === 0) {
+      return -1;
+    }
+    var selectedUtc = dateUtils.getUtcFromString(selectedTime);
+    if (!selectedUtc) {
+      return 0;
+    }
+    var selectedUnix = dateUtils.unix(selectedUtc);
+    var indexByExactTimestamp = timesteps.findIndex(function (time) {
+      var utcTime = dateUtils.getUtcFromString(time);
+      if (!utcTime) {
+        return false;
+      }
+      return dateUtils.unix(utcTime) === selectedUnix;
+    });
+    if (indexByExactTimestamp !== -1) {
+      return indexByExactTimestamp;
+    }
+    var indexByExactString = timesteps.findIndex(function (time) {
+      return time === selectedTime;
+    });
+    if (indexByExactString !== -1) {
+      return indexByExactString;
+    }
+    // If selected time is not a sounding timestep, anchor on the nearest timestep
+    // so forward/backward navigation continues from the expected point in time.
+    return timesteps.reduce(function (nearestIndex, time, index) {
+      var utcTime = dateUtils.getUtcFromString(time);
+      if (!utcTime) {
+        return nearestIndex;
+      }
+      var currentDiff = Math.abs(dateUtils.unix(utcTime) - selectedUnix);
+      var nearestUtc = dateUtils.getUtcFromString(timesteps[nearestIndex]);
+      if (!nearestUtc) {
+        return index;
+      }
+      var nearestDiff = Math.abs(dateUtils.unix(nearestUtc) - selectedUnix);
+      return currentDiff < nearestDiff ? index : nearestIndex;
+    }, 0);
+  }, [selectedTime, timesteps]);
+  var onStepBackward = React.useCallback(function () {
+    var precedingIndex = Math.max(currentTimeIndex - 1, 0);
+    updateSelectedTime(timesteps[precedingIndex]);
+  }, [currentTimeIndex, updateSelectedTime, timesteps]);
+  var onStepForward = React.useCallback(function () {
+    var followingIndex = Math.min(currentTimeIndex + 1, timesteps.length - 1);
+    updateSelectedTime(timesteps[followingIndex]);
+  }, [currentTimeIndex, updateSelectedTime, timesteps]);
+  return jsxs("div", {
+    ref: sliderRef,
+    style: {
+      display: 'flex',
+      paddingTop: '32px',
+      marginRight: '80px',
+      marginLeft: '24px',
+      height: TIMESLIDER_HEIGHT + "px"
+    },
+    children: [jsxs("div", {
+      style: {
+        minWidth: '60px',
+        marginTop: '2px',
+        display: 'flex',
+        gap: '4px'
+      },
+      children: [jsx(BackwardForwardStepButton, {
+        isDisabled: marks.length === 0,
+        isForwardStep: false,
+        onClickBFButton: onStepBackward
+      }), jsx(BackwardForwardStepButton, {
+        isDisabled: marks.length === 0,
+        isForwardStep: true,
+        onClickBFButton: onStepForward
+      })]
+    }), marks.length === 0 ? jsx(CustomSlider, {
+      disabled: true,
+      max: 1,
+      min: 0,
+      orientation: "horizontal",
+      value: 0.5
+    }) : jsx(CustomSlider, {
+      extraStyles: {
+        margin: '0px 20px 0px 20px',
+        '.MuiSlider-markLabel': {
+          transform: 'translate(-90%, 20px) rotate(-45deg)',
+          transformOrigin: 'top center'
+        }
+      },
+      marks: marks,
+      max: marks[marks.length - 1].value,
+      min: marks[0].value,
+      onChange: function onChange(_, value) {
+        updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+      },
+      orientation: "horizontal",
+      slotProps: {
+        // Workaround for MUI bug where labels are just draggable area and clicking on one
+        // does not necessarily select the described timestep
+        markLabel: {
+          onPointerDown: function onPointerDown(event) {
+            event.preventDefault();
+            var markIndex = event.currentTarget.getAttribute('data-index');
+            var mark = marks[Number(markIndex)];
+            var value = mark.value;
+            updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+          }
+        }
+      },
+      step: null,
+      value: dateUtils.unix(dateUtils.getUtcFromString(selectedTime)),
+      valueLabelDisplay: "on",
+      valueLabelFormat: function valueLabelFormat(value) {
+        return dateUtils.dateToString(dateUtils.fromUnix(value), "yyyy iii dd MMM HH:mm 'UTC'", true, i18n.language);
+      }
+    })]
+  });
 };
-var windSpeedRanges = [{
-  min: 0,
-  max: 1,
-  symbol: windSymbolDefinitions.calm
-}, {
-  min: 1,
-  max: 4.5,
-  symbol: windSymbolDefinitions.lightAir
-}, {
-  min: 4.5,
-  max: 7.5,
-  symbol: windSymbolDefinitions.fiveKnots
-}, {
-  min: 7.5,
-  max: 12.5,
-  symbol: windSymbolDefinitions.tenKnots
-}, {
-  min: 12.5,
-  max: 17.5,
-  symbol: windSymbolDefinitions.fifteenKnots
-}, {
-  min: 17.5,
-  max: 22.5,
-  symbol: windSymbolDefinitions.twentyKnots
-}, {
-  min: 22.5,
-  max: 27.5,
-  symbol: windSymbolDefinitions.twentyFiveKnots
-}, {
-  min: 27.5,
-  max: 32.5,
-  symbol: windSymbolDefinitions.thirtyKnots
-}, {
-  min: 32.5,
-  max: 37.5,
-  symbol: windSymbolDefinitions.thirtyFiveKnots
-}, {
-  min: 37.5,
-  max: 42.5,
-  symbol: windSymbolDefinitions.fortyKnots
-}, {
-  min: 42.5,
-  max: 47.5,
-  symbol: windSymbolDefinitions.fortyFiveKnots
-}, {
-  min: 47.5,
-  max: 52.5,
-  symbol: windSymbolDefinitions.fiftyKnots
-}, {
-  min: 52.5,
-  max: 57.5,
-  symbol: windSymbolDefinitions.fiftyFiveKnots
-}, {
-  min: 57.5,
-  max: 62.5,
-  symbol: windSymbolDefinitions.sixtyKnots
-}, {
-  min: 62.5,
-  max: 67.5,
-  symbol: windSymbolDefinitions.sixtyFiveKnots
-}, {
-  min: 67.5,
-  max: 72.5,
-  symbol: windSymbolDefinitions.seventyKnots
-}, {
-  min: 72.5,
-  max: 77.5,
-  symbol: windSymbolDefinitions.seventyFiveKnots
-}, {
-  min: 77.5,
-  max: 82.5,
-  symbol: windSymbolDefinitions.eightyKnots
-}, {
-  min: 82.5,
-  max: 87.5,
-  symbol: windSymbolDefinitions.eightyFiveKnots
-}, {
-  min: 87.5,
-  max: 92.5,
-  symbol: windSymbolDefinitions.ninetyKnots
-}, {
-  min: 92.5,
-  max: 97.5,
-  symbol: windSymbolDefinitions.ninetyFiveKnots
-}, {
-  min: 97.5,
-  max: 102.5,
-  symbol: windSymbolDefinitions.hundredKnots
-}, {
-  min: 102.5,
-  max: 107.5,
-  symbol: windSymbolDefinitions.hundredFiveKnots
-}, {
-  min: 107.5,
-  max: 112.5,
-  symbol: windSymbolDefinitions.hundredTenKnots
-}, {
-  min: 112.5,
-  max: 117.5,
-  symbol: windSymbolDefinitions.hundredFifteenKnots
-}, {
-  min: 117.5,
-  max: 122.5,
-  symbol: windSymbolDefinitions.hundredTwentyKnots
-}, {
-  min: 122.5,
-  max: 127.5,
-  symbol: windSymbolDefinitions.hundredTwentyFiveKnots
-}, {
-  min: 127.5,
-  max: 132.5,
-  symbol: windSymbolDefinitions.hundredThirtyKnots
-}, {
-  min: 132.5,
-  max: 137.5,
-  symbol: windSymbolDefinitions.hundredThirtyFiveKnots
-}, {
-  min: 137.5,
-  max: 142.5,
-  symbol: windSymbolDefinitions.hundredFortyKnots
-}, {
-  min: 142.5,
-  max: 147.5,
-  symbol: windSymbolDefinitions.hundredFortyFiveKnots
-}, {
-  min: 147.5,
-  max: 152,
-  symbol: windSymbolDefinitions.hundredFiftyKnots
-}];
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -5414,134 +5782,59 @@ var windSpeedRanges = [{
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var extendIsoBar = function extendIsoBar(path, horizontalBarbMargin) {
-  var match = /^M([\d.-]+),([\d.-]+)\s*L([\d.-]+),([\d.-]+)/.exec(path);
-  if (match) {
-    var startX = parseFloat(match[1]);
-    var startY = parseFloat(match[2]);
-    var endX = parseFloat(match[3]);
-    var endY = parseFloat(match[4]);
-    return "M" + startX + "," + startY + "L" + (endX + horizontalBarbMargin * 3) + "," + endY;
-  }
-  return path;
-};
-var extendXAxis = function extendXAxis(path, horizontalBarbMargin) {
-  var match = /^M([\d.-]+),([\d.-]+)H([\d.-]+)/.exec(path);
-  if (match) {
-    var endX = parseFloat(match[3]);
-    return path.replace(/H[\d.-]+/, "H" + (endX + horizontalBarbMargin * 3));
-  }
-  return path;
-};
-var drawWindBarbs = function drawWindBarbs(_ref) {
-  var _rootSvg$node;
-  var svgRef = _ref.svgRef,
-    plotGroup = _ref.plotGroup,
-    yScale = _ref.yScale,
-    data = _ref.data,
-    width = _ref.width,
-    margin = _ref.margin,
-    _ref$barbColor = _ref.barbColor,
-    barbColor = _ref$barbColor === void 0 ? 'black' : _ref$barbColor,
-    _ref$columnOffsetX = _ref.columnOffsetX,
-    columnOffsetX = _ref$columnOffsetX === void 0 ? 0 : _ref$columnOffsetX;
-  var barbsSize = 40;
-  var scalingFactor = 0.5;
-  var horizontalBarbMargin = barbsSize * scalingFactor + 5;
-  var visibleItems = removeItemsExponential(data.reverse()).filter(function (item) {
-    return item.pressure >= 150;
-  });
-  // Measure width and height and make extra room for one column
-  // of windbarbs
-  var rootSvg = d3.select(svgRef.current);
-  var currentWidth = (_rootSvg$node = rootSvg.node()) == null ? void 0 : _rootSvg$node.getBoundingClientRect().width;
-  if (!currentWidth) {
-    return;
+var OFFSET_HEIGHT = 100; // Space reserved in layout
+var useSoundingsDiagramSize = function useSoundingsDiagramSize(ref, useWidth) {
+  if (useWidth === void 0) {
+    useWidth = true;
   }
-  // Add extra width to all isobars needed for the windbarbs
-  d3.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) {
-    var path = d3.select(nodes[i]).attr('d');
-    var newD = extendXAxis(path, horizontalBarbMargin);
-    d3.select(nodes[i]).attr('d', newD);
-  });
-  // Expand root SVG width to make room for barbs column at the right
-  rootSvg.attr('width', currentWidth + margin.left + horizontalBarbMargin);
-  // 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)");
-  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);
-    if (windSymbol) {
-      var _innerGroup$node;
-      // Inner group will have rotation and scaling applied to it
-      var innerGroup = group.append('g');
-      (_innerGroup$node = innerGroup.node()) == null || _innerGroup$node.appendChild(windSymbol);
-      // Update stroke color
-      innerGroup.selectAll('*').attr('stroke', barbColor);
-      // Only update the fill for the paths that already used a fill
-      // in their original svg form.
-      innerGroup.selectAll('*').each(function (_d, i, nodes) {
-        var el = d3.select(nodes[i]);
-        var currentFill = el.attr('fill');
-        if (currentFill && currentFill !== 'none') {
-          el.attr('fill', barbColor);
-        }
-      });
-      var bbox = windSymbol.getBBox();
-      // Central point
-      var cx = bbox.x + bbox.width / 2;
-      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) + ")");
-      // Rotate accordingly, and scale
-      innerGroup.attr('transform', "rotate(" + rotation + ") scale(" + scalingFactor + ") translate(" + -cx + ", " + -cy + ")");
+  var _React$useState = React.useState(0),
+    size = _React$useState[0],
+    setSize = _React$useState[1];
+  React.useLayoutEffect(function () {
+    var container = ref.current;
+    if (!container) {
+      return undefined;
     }
-  });
-};
-var removeItemsExponential = function removeItemsExponential(array) {
-  var base = 1.15;
-  var indicesToKeep = [];
-  var i = 0;
-  var nextIndex = 0;
-  while (nextIndex < array.length) {
-    nextIndex = Math.floor(Math.pow(base, i));
-    indicesToKeep.push(nextIndex);
-    i += 1;
-  }
-  return array.filter(function (_, index) {
-    return indicesToKeep.includes(index);
-  });
+    var resizeObserver = new ResizeObserver(function (entries) {
+      if (!entries.length) {
+        return;
+      }
+      var _entries$0$contentRec = entries[0].contentRect,
+        width = _entries$0$contentRec.width,
+        height = _entries$0$contentRec.height;
+      var availableHeight = height - TIMESLIDER_HEIGHT + OFFSET_HEIGHT;
+      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, useWidth]);
+  return size;
 };
-var getWindSymbol = function getWindSymbol(value) {
-  var matchedRange = windSpeedRanges.find(function (_ref2) {
-    var min = _ref2.min,
-      max = _ref2.max;
-    return value >= min && value < max;
-  });
-  // Out of range
-  if (!matchedRange) {
-    return null;
-  }
-  // SVG string to actual SVG element
-  var parser = new DOMParser();
-  var svgDoc = parser.parseFromString(matchedRange.symbol, 'image/svg+xml');
-  var svgNode = svgDoc.documentElement;
-  // Return the parsed SVG node
-  return svgNode;
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var animateResizeTransform = function animateResizeTransform(svg, marginLocal, innerHeight, prevInnerHeightRef) {
+  var prevInnerHeight = typeof prevInnerHeightRef.current === 'number' ? prevInnerHeightRef.current : 0;
+  var scaleYStart = prevInnerHeight > 0 && innerHeight > 0 ? prevInnerHeight / innerHeight : 0;
+  svg.attr('transform', "translate(" + marginLocal.left + "," + marginLocal.top + ") scale(1," + scaleYStart + ")").transition().duration(300).attr('transform', "translate(" + marginLocal.left + "," + marginLocal.top + ") scale(1,1)");
 };
 
 var shadow = '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)';
@@ -5562,6 +5855,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 +5894,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 +5907,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 +5920,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 +5960,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 +6014,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 +6298,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 +6346,6 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
     if (isClosingViaClick) {
       preserveWindBarbsGrowBackHeight();
     }
-    setSoundingsIsClosed(!isOpen);
   }, [preserveWindBarbsGrowBackHeight]);
   var panels = soundingPanelsInOrder.flatMap(function (_ref2) {
     var id = _ref2.id,
@@ -6054,9 +6389,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 +6404,7 @@ var SoundingsPanels = function SoundingsPanels(_ref) {
                   right: 25,
                   top: 0
                 },
-                height: soundingsIsClosed ? previousHeight != null ? previousHeight : diagramSize : diagramSize
+                height: windBarbsHeight
               }
             });
           }
@@ -6243,6 +6579,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
       // Skip re-registering if the incoming preset already matches the current
       // soundings store state (e.g. workspace initialProps updated after a save)
       if (!isEqual(soundingsPreset, currentSoundingsPreset)) {
+        var _soundingsPreset$isLo;
         presetJustLoadedRef.current = true;
         initialLocationsRef.current = soundingsPreset.selectedLocations || {};
         previousLocationsRef.current = {};
@@ -6250,6 +6587,11 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
           viewId: viewId,
           preset: soundingsPreset
         }));
+        dispatch(uiActions.setActiveMapIdForDialog({
+          type: uiTypes.DialogTypes.SoundingsLocations,
+          mapId: viewId,
+          setOpen: (_soundingsPreset$isLo = soundingsPreset.isLocationsDialogOpen) != null ? _soundingsPreset$isLo : false
+        }));
         setTimeout(function () {
           presetJustLoadedRef.current = false;
           initialLocationsRef.current = {};
@@ -6261,6 +6603,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 +6655,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 +6672,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 +7330,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
                 fontSize: "small"
               })
             })]
-          }), jsx(Box, {
+          }), isLegendVisible ? jsx(Box, {
             sx: {
               display: 'flex',
               justifyContent: 'center',
@@ -6989,7 +7346,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
               sourceResolvedInstanceIds: sourceResolvedInstanceIds,
               sourceSelections: sourceSelections
             })
-          }), jsx(Box, {
+          }) : null, jsx(Box, {
             sx: {
               flex: 1,
               minHeight: 0,
@@ -7272,6 +7629,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,
@@ -7334,7 +7713,10 @@ var LocationsMenu = function LocationsMenu(_ref2) {
     _ref2$order = _ref2.order,
     order = _ref2$order === void 0 ? 0 : _ref2$order,
     isLoading = _ref2.isLoading,
-    error = _ref2.error;
+    error = _ref2.error,
+    locationMenuSize = _ref2.locationMenuSize,
+    onSizeChange = _ref2.onSizeChange,
+    locationMenuPosition = _ref2.locationMenuPosition;
   var _useState = useState(''),
     searchFilter = _useState[0],
     setSearchFilter = _useState[1];
@@ -7361,13 +7743,26 @@ var LocationsMenu = function LocationsMenu(_ref2) {
     isOpen: isOpen,
     minWidth: 264,
     onClose: onClose,
+    onDragEnd: function onDragEnd(position, size) {
+      if (typeof size.width === 'number' && typeof size.height === 'number') {
+        onSizeChange == null || onSizeChange({
+          width: size.width,
+          height: size.height
+        }, position);
+      }
+    },
     onMouseDown: onMouseDown,
     order: order,
+    resetPositionOnOpen: true,
+    startDraggablePosition: locationMenuPosition != null ? locationMenuPosition : {
+      x: 0,
+      y: 0
+    },
     startPosition: {
       top: 60,
       left: 200
     },
-    startSize: {
+    startSize: locationMenuSize != null ? locationMenuSize : {
       width: 320,
       height: 500
     },
@@ -7483,6 +7878,12 @@ var LocationsMenuConnect = function LocationsMenuConnect(_ref) {
       dispatch(soundingsActions.setSoundingsCollections(soundingsCollections));
     }
   }, [dispatch, soundingsCollections]);
+  var locationMenuSize = useSelector(function (state) {
+    return getLocationMenuSize(state, viewId);
+  });
+  var locationMenuPosition = useSelector(function (state) {
+    return getLocationMenuPosition(state, viewId);
+  });
   var _useGetLocations = useGetLocations(collections, isDialogOpen),
     data = _useGetLocations.data,
     isPending = _useGetLocations.isPending,
@@ -7556,12 +7957,31 @@ var LocationsMenuConnect = function LocationsMenuConnect(_ref) {
       }
     }
   }, [dispatch, viewId, services, selectedSourceIds, locationSelections, selectedMapIds, ownedFeatureLayerIds]);
+  var handleSizeChange = useCallback(function (size, position) {
+    dispatch(soundingsActions.setLocationMenuSizeAndPosition({
+      size: size,
+      position: position,
+      viewId: viewId,
+      origin: SoundingsActionOrigin.soundingsComponent
+    }));
+  }, [dispatch, viewId]);
+  var handleClose = useCallback(function () {
+    onCloseDialog();
+    dispatch(soundingsActions.setLocationsMenuOpen({
+      viewId: viewId,
+      isLocationsDialogOpen: false,
+      origin: SoundingsActionOrigin.soundingsComponent
+    }));
+  }, [dispatch, onCloseDialog, viewId]);
   return jsx(LocationsMenu, {
     error: error,
     isLoading: isPending,
     isOpen: isDialogOpen,
-    onClose: onCloseDialog,
+    locationMenuPosition: locationMenuPosition,
+    locationMenuSize: locationMenuSize,
+    onClose: handleClose,
     onMouseDown: setDialogOrder,
+    onSizeChange: handleSizeChange,
     order: dialogOrder,
     selectedLocations: locationSelections,
     selectedSourcesAmount: sourcesAmount,