@opengeoweb/soundings 19.4.0 → 19.5.0

package/dist/index.esm.js

@@ -212,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;
@@ -227,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;
 };
 
@@ -1202,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;
+      }()
+    });
   }
 };
 
@@ -1791,7 +1830,7 @@ var useTimesteps = function useTimesteps(sourceSelections) {
                   return _context3.a(2, instanceData);
                 case 3:
                   _context3.n = 4;
-                  return getCollectionDetails(collectionId, url);
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionDetails(collectionId, url));
                 case 4:
                   collectionData = _context3.v;
                   return _context3.a(2, collectionData);
@@ -1857,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({
@@ -1965,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 _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+          var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
             var resolvedInstanceId, instances, resolved, locationsExplicitlyUnsupported, _locations, locations;
-            return _regenerator().w(function (_context5) {
-              while (1) switch (_context5.p = _context5.n) {
+            return _regenerator().w(function (_context4) {
+              while (1) switch (_context4.p = _context4.n) {
                 case 0:
                   resolvedInstanceId = collection.instanceId;
                   if (!(resolvedInstanceId && referenceTimeUtils.isRelativeReferenceTime(resolvedInstanceId))) {
-                    _context5.n = 4;
+                    _context4.n = 4;
                     break;
                   }
-                  _context5.p = 1;
-                  _context5.n = 2;
+                  _context4.p = 1;
+                  _context4.n = 2;
                   return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collection.id, collection.url));
                 case 2:
-                  instances = _context5.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;
-                  _context5.n = 4;
+                  _context4.n = 4;
                   break;
                 case 3:
-                  _context5.p = 3;
-                  _context5.v;
+                  _context4.p = 3;
+                  _context4.v;
                   resolvedInstanceId = undefined;
                 case 4:
                   if (!resolvedInstanceId) {
-                    _context5.n = 8;
+                    _context4.n = 8;
                     break;
                   }
-                  _context5.p = 5;
-                  _context5.n = 6;
+                  _context4.p = 5;
+                  _context4.n = 6;
                   return getInstanceLocations(collection.id, resolvedInstanceId, collection.url);
                 case 6:
-                  _locations = _context5.v;
-                  return _context5.a(2, Object.assign({}, _locations, {
+                  _locations = _context4.v;
+                  return _context4.a(2, Object.assign({}, _locations, {
                     id: collection.id,
                     name: collection.name
                   }));
                 case 7:
-                  _context5.p = 7;
-                  _context5.v;
+                  _context4.p = 7;
+                  _context4.v;
                 case 8:
-                  _context5.n = 9;
+                  _context4.n = 9;
                   return getCollectionLocations(collection.id, collection.url);
                 case 9:
-                  locations = _context5.v;
-                  return _context5.a(2, Object.assign({}, locations, {
+                  locations = _context4.v;
+                  return _context4.a(2, Object.assign({}, locations, {
                     id: collection.id,
                     name: collection.name
                   }));
               }
-            }, _callee5, null, [[5, 7], [1, 3]]);
+            }, _callee4, null, [[5, 7], [1, 3]]);
           }));
           function queryFn() {
-            return _queryFn5.apply(this, arguments);
+            return _queryFn4.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2069,48 +2088,48 @@ var useCheckPositionQuerySupportBySource = function useCheckPositionQuerySupport
       return {
         queryKey: ['edr-position-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
             var _details$data_queries, _instance$data_querie, instances, instance, details;
-            return _regenerator().w(function (_context6) {
-              while (1) switch (_context6.p = _context6.n) {
+            return _regenerator().w(function (_context5) {
+              while (1) switch (_context5.p = _context5.n) {
                 case 0:
-                  _context6.p = 0;
+                  _context5.p = 0;
                   if (!instanceId) {
-                    _context6.n = 2;
+                    _context5.n = 2;
                     break;
                   }
-                  _context6.n = 1;
+                  _context5.n = 1;
                   return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url));
                 case 1:
-                  instances = _context6.v;
+                  instances = _context5.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context6.a(2, {
+                  return _context5.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie = instance.data_queries) != null && _instance$data_querie.position)
                   });
                 case 2:
-                  _context6.n = 3;
-                  return getCollectionDetails(collectionId, url);
+                  _context5.n = 3;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionDetails(collectionId, url));
                 case 3:
-                  details = _context6.v;
-                  return _context6.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:
-                  _context6.p = 4;
-                  _context6.v;
-                  return _context6.a(2, {
+                  _context5.p = 4;
+                  _context5.v;
+                  return _context5.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee6, null, [[0, 4]]);
+            }, _callee5, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn6.apply(this, arguments);
+            return _queryFn5.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2166,48 +2185,48 @@ var useCheckRadiusQuerySupportBySource = function useCheckRadiusQuerySupportBySo
       return {
         queryKey: ['edr-radius-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
             var _details$data_queries2, _instance$data_querie2, instances, instance, details;
-            return _regenerator().w(function (_context7) {
-              while (1) switch (_context7.p = _context7.n) {
+            return _regenerator().w(function (_context6) {
+              while (1) switch (_context6.p = _context6.n) {
                 case 0:
-                  _context7.p = 0;
+                  _context6.p = 0;
                   if (!instanceId) {
-                    _context7.n = 2;
+                    _context6.n = 2;
                     break;
                   }
-                  _context7.n = 1;
+                  _context6.n = 1;
                   return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collectionId, url));
                 case 1:
-                  instances = _context7.v;
+                  instances = _context6.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context7.a(2, {
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie2 = instance.data_queries) != null && _instance$data_querie2.radius)
                   });
                 case 2:
-                  _context7.n = 3;
-                  return getCollectionDetails(collectionId, url);
+                  _context6.n = 3;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionDetails(collectionId, url));
                 case 3:
-                  details = _context7.v;
-                  return _context7.a(2, {
+                  details = _context6.v;
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: !!(details != null && (_details$data_queries2 = details.data_queries) != null && _details$data_queries2.radius)
                   });
                 case 4:
-                  _context7.p = 4;
-                  _context7.v;
-                  return _context7.a(2, {
+                  _context6.p = 4;
+                  _context6.v;
+                  return _context6.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee7, null, [[0, 4]]);
+            }, _callee6, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn7.apply(this, arguments);
+            return _queryFn6.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2269,20 +2288,20 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
         return {
           queryKey: ['edr-grid-points-disabled', collectionId],
           queryFn: function () {
-            var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
-              return _regenerator().w(function (_context8) {
-                while (1) switch (_context8.n) {
+            var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+              return _regenerator().w(function (_context7) {
+                while (1) switch (_context7.n) {
                   case 0:
-                    return _context8.a(2, {
+                    return _context7.a(2, {
                       sourceId: collectionId,
                       gridPoint: undefined,
                       allGridPoints: []
                     });
                 }
-              }, _callee8);
+              }, _callee7);
             }));
             function queryFn() {
-              return _queryFn8.apply(this, arguments);
+              return _queryFn7.apply(this, arguments);
             }
             return queryFn;
           }(),
@@ -2307,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 _queryFn9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+          var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
             var minimalParameters, minimalVerticalRange, rawData, allGridPoints, nearestPoint, minSquaredDistance;
-            return _regenerator().w(function (_context9) {
-              while (1) switch (_context9.p = _context9.n) {
+            return _regenerator().w(function (_context8) {
+              while (1) switch (_context8.p = _context8.n) {
                 case 0:
                   if (supportsRadius) {
-                    _context9.n = 1;
+                    _context8.n = 1;
                     break;
                   }
-                  return _context9.a(2, {
+                  return _context8.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
                 case 1:
-                  _context9.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
@@ -2330,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 = '';
-                  _context9.n = 2;
+                  _context8.n = 2;
                   return getEdrCollectionForRadius(collectionId, url, instanceId, centerCoordinates, radiusKm, minimalParameters, datetime, minimalVerticalRange);
                 case 2:
-                  rawData = _context9.v;
+                  rawData = _context8.v;
                   allGridPoints = extractGridPointsFromCoverage(rawData); // Find the nearest grid point to the center coordinates
                   minSquaredDistance = Infinity;
                   allGridPoints.forEach(function (point) {
@@ -2348,24 +2367,24 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
                       nearestPoint = point;
                     }
                   });
-                  return _context9.a(2, {
+                  return _context8.a(2, {
                     sourceId: collectionId,
                     gridPoint: nearestPoint,
                     allGridPoints: allGridPoints
                   });
                 case 3:
-                  _context9.p = 3;
-                  _context9.v;
-                  return _context9.a(2, {
+                  _context8.p = 3;
+                  _context8.v;
+                  return _context8.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
               }
-            }, _callee9, null, [[1, 3]]);
+            }, _callee8, null, [[1, 3]]);
           }));
           function queryFn() {
-            return _queryFn9.apply(this, arguments);
+            return _queryFn8.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2767,6 +2786,9 @@ var slice = createSlice({
         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) {
@@ -2897,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;
@@ -3046,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);
@@ -3069,6 +3114,8 @@ var selectors = /*#__PURE__*/Object.freeze({
   getDiagramType: getDiagramType,
   getIsLegendVisible: getIsLegendVisible,
   getIsTimeSliderVisible: getIsTimeSliderVisible,
+  getLocationMenuPosition: getLocationMenuPosition,
+  getLocationMenuSize: getLocationMenuSize,
   getLocationSelections: getLocationSelections,
   getPanelCustomWidth: getPanelCustomWidth,
   getPanelIsOpen: getPanelIsOpen,
@@ -3417,13 +3464,21 @@ 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,
@@ -4502,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);
@@ -4515,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)");
@@ -4617,6 +4672,7 @@ var drawIsothermsBijvoet = function drawIsothermsBijvoet(_ref2) {
     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$;
@@ -4627,7 +4683,6 @@ 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)");
@@ -4865,113 +4920,472 @@ 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 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);
+/* *
+ * 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 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() {
+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)");
@@ -5051,7 +5465,7 @@ var Soundings = function Soundings(_ref) {
       d3.select(bijvoetLabelTarget).attr('transform', transform.toString());
     };
     // Allow zooming and panning
-    var zoomBehavior = d3.zoom().scaleExtent([1, 7]).extent([[0, 0], [width, height]]).translateExtent([[0, 0], [width, height]]).on('zoom', function (event) {
+    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;
@@ -5208,401 +5622,148 @@ var useMaxLabelCount = function useMaxLabelCount(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);
-      }
-    })]
-  });
-};
-
-/* *
- * 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, useWidth) {
-  if (useWidth === void 0) {
-    useWidth = true;
-  }
-  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 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;
-};
-
-/* *
- * 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 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");
@@ -5621,137 +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,
-    _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 = 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 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 _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)';
@@ -6496,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 = {};
@@ -6503,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 = {};
@@ -7624,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];
@@ -7651,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
     },
@@ -7773,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,
@@ -7846,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,