@opengeoweb/soundings 15.2.0 → 15.3.0

package/README.md

@@ -15,6 +15,7 @@ There, you can specify the required details for each source under the `soundings
         "id": "harmonie_scandinavia_hybrid",
         "url": "https://opendata.fmi.fi/edr",
         "description": "MEPS/vertical coordinate model level",
+        "windSpeedUnit": "ms",
         "parameterMappings": {
           "temperature": "temperature",
           "windDirection": "winddirection",
@@ -28,6 +29,7 @@ There, you can specify the required details for each source under the `soundings
         "id": "harmonie_scandinavia_pressure",
         "url": "https://opendata.fmi.fi/edr",
         "description": "MEPS/vertical coordinate pressure",
+        "windSpeedUnit": "ms",
         "parameterMappings": {
           "temperature": "temperature",
           "windDirection": "winddirection",
@@ -39,7 +41,9 @@ There, you can specify the required details for each source under the `soundings
 ]
 ```
 
-Each source should have a name, id, source url and description and include parameter mappings telling the soundings API which EDR parameters to assign to which physical property.
+Each source should have a `name`, `id`, `source url`, `description`, `windSpeedUnit` and include parameter mappings telling the soundings API which EDR parameters to assign to which physical property.
+
+The `windSpeedUnit` is required to ensure correct derivation of the windbarbs and hodograph. This should contain either 'ms' or 'kts' depending on the unit served by the EDR service
 
 The following mappings are needed:
 

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Menu, ListSubheader, Typography, MenuItem, Box, Card, Stack, IconButton, Tooltip, LinearProgress, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
+import { Menu, ListSubheader, Typography, MenuItem, Box, Stack, Card, IconButton, Tooltip, LinearProgress, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
 import { range, minBy, isEqual } from 'lodash';
 import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -326,7 +326,7 @@ const getDiagramName = (t, diagramType) => {
   }
 };
 // vfx code
-const initializeSvg = ({
+const initializeSvg$1 = ({
   svgRef,
   width,
   height,
@@ -345,7 +345,7 @@ const initializeSvg = ({
   svg.append('rect').attr('height', height).attr('width', width).attr('fill', '#ffffff00').attr('opacity', 1).attr('id', `${d3GraphId}-${diagramType}d3`).attr('clip-path', `url(#clip-${d3GraphId}-${diagramType}d3)`);
   return svg;
 };
-const createScales = (diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature) => {
+const createScales$1 = (diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature) => {
   if (diagramType === 'BIJVOET') {
     // Note, for Bijvoet, the x-axis is NOT temperature but theta_es
     // Both axis aren't linear nor logarithmic, hence we need an interpolation function to determine (x,y) based on (theta_es,p)
@@ -358,7 +358,7 @@ const createScales = (diagramType, width, height, minPressure, maxPressure, minT
   const yScale = d3.scaleLog().domain([maxPressure, minPressure]).range([height, 0]);
   return [xScale, yScale];
 };
-const drawAxes = ({
+const drawAxes$1 = ({
   svg,
   xScale,
   yScale,
@@ -697,7 +697,7 @@ const drawSoundingsTooltip = ({
   // Wind
   windRefd3?.style('display', 'block').style('left', `${width + margin.left + margin.right}px`).style('top', `${pressureY}px`).html(() => {
     const windSpeedStrings = interpolatedData.map((dataSet, index) => {
-      return getParamHtml(dataSet.hoveredWindSpeed, index, 'm/s', index === interpolatedData.length - 1, dataSet.color, true);
+      return getParamHtml(dataSet.hoveredWindSpeed, index, 'kts', index === interpolatedData.length - 1, dataSet.color, true);
     });
     const windDirStrings = interpolatedData.map((dataSet, index) => {
       return getParamHtml(dataSet.hoveredWindDirection, index, '°', index === interpolatedData.length - 1, dataSet.color, index === interpolatedData.length - 1);
@@ -1231,7 +1231,7 @@ const Soundings = ({
     if (!svgRef.current) {
       return;
     }
-    const svg = initializeSvg({
+    const svg = initializeSvg$1({
       svgRef,
       width,
       height,
@@ -1245,9 +1245,9 @@ const Soundings = ({
     widthRef.current = width;
     const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
     const maxT = maxTemperature;
-    const [xScale, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minT, maxT);
+    const [xScale, yScale] = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT);
     yScaleRef.current = yScale;
-    drawAxes({
+    drawAxes$1({
       svg,
       xScale,
       yScale,
@@ -1334,7 +1334,7 @@ const Soundings = ({
     const dewpointRefd3 = d3.select(dewpointRef.current);
     const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
     const maxT = maxTemperature;
-    const [, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minT, maxT);
+    const [, yScale] = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT);
     drawSoundingsTooltip({
       event: synthetic,
       yScale,
@@ -1738,7 +1738,6 @@ const windSpeedRanges = [{
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const metersPerSecondToKnots = metersPerSecond => metersPerSecond * 1.94384;
 const extendIsoBar = (path, horizontalBarbMargin) => {
   const match = /^M([\d.-]+),([\d.-]+)\s*L([\d.-]+),([\d.-]+)/.exec(path);
   if (match) {
@@ -1846,11 +1845,10 @@ const removeItemsExponential = array => {
   return array.filter((_, index) => indicesToKeep.includes(index));
 };
 const getWindSymbol = value => {
-  const valueKts = metersPerSecondToKnots(value);
   const matchedRange = windSpeedRanges.find(({
     min,
     max
-  }) => valueKts >= min && valueKts < max);
+  }) => value >= min && value < max);
   // Out of range
   if (!matchedRange) {
     return null;
@@ -1929,7 +1927,7 @@ const WindBarbs = ({
     }
     const root = d3.select(svgRef.current);
     root.selectAll('*').remove();
-    const svg = initializeSvg({
+    const svg = initializeSvg$1({
       svgRef,
       width,
       height,
@@ -1947,7 +1945,7 @@ const WindBarbs = ({
     widthRef.current = width;
     const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
     const maxT = maxTemperature;
-    const [xScale, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minT, maxT);
+    const [xScale, yScale] = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT);
     yScaleRef.current = yScale;
     drawIsobars({
       diagramType,
@@ -2040,6 +2038,257 @@ const WindBarbs = ({
   });
 };
 
+/* *
+ * 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 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const initializeSvg = ({
+  svgRef,
+  widthHeight
+}) => {
+  const svg = d3.select(svgRef.current).attr('data-testid', 'hodograph').attr('width', '100%').attr('height', '100%').attr('viewBox', `0 0 ${widthHeight + 3} ${widthHeight + 3}`).attr('style', 'width: 100%; height: auto;');
+  const gSel = svg.select('g.hodograph');
+  if (gSel.empty()) {
+    svg.append('g').attr('class', 'hodograph');
+  }
+  return svg;
+};
+const createScales = widthHeight => {
+  const scaleRadius = d3.scaleLinear().domain([0, 100]).range([0, widthHeight / 2]);
+  const scaleAngle = d3.scaleLinear().domain([0, 360]).range([0, 2 * Math.PI]);
+  return [scaleRadius, scaleAngle];
+};
+const drawAxes = ({
+  svg,
+  scaleRadius,
+  scaleAngle,
+  widthHeight
+}) => {
+  // Draw circles
+  svg.select('g').selectAll('circle').data([10, 20, 30, 40, 50, 60, 70, 80, 90, 100]).join(enter => enter.append('circle').attr('cx', widthHeight / 2).attr('cy', widthHeight / 2).attr('fill', 'none').attr('stroke', 'gray').style('opacity', 0.6).attr('stroke-dasharray', data => data === 50 || data === 100 ? 'none' : '5, 4').attr('r', data => scaleRadius(data)));
+  // Draw windspeed scale
+  const speedTicks = scaleRadius.ticks(9);
+  svg.select('g').append('g').attr('type', 'windspeed').attr('transform', `translate(${widthHeight / 2}, ${widthHeight / 2})`) // origin transformed to center
+  .call(d3.axisBottom(scaleRadius).tickValues(speedTicks).tickSizeInner(0).tickSizeOuter(0))
+  // Draw unit label
+  .append('text').attr('fill', 'currentColor').attr('x', scaleRadius(90)).attr('y', '0').attr('font-size', '11px').attr('dy', '2.2em').attr('dx', '0.8em').attr('text-anchor', 'left').text('kts');
+};
+// Use this function to filter the pressure and parameter array so no NaN or null values are included
+const filterDomainRangeForHodograph = (pressureDomain, parameterDomain) => {
+  const filteredPressureDomain = pressureDomain.filter((_value, index) => parameterDomain[index] !== null && !isNaN(parameterDomain[index][0]) && parameterDomain[index][0] !== null && !isNaN(parameterDomain[index][1]) && parameterDomain[index][1] !== null);
+  const filteredParameterDomain = parameterDomain.filter(value => !isNaN(value[0]) && value[0] !== null && !isNaN(value[1]) && value[1] !== null);
+  // If first pressure value is smallest, reverse arrays to ensure we draw starting from surface
+  if (filteredPressureDomain[0] < filteredPressureDomain[filteredPressureDomain.length - 1]) {
+    return [filteredPressureDomain.reverse(), filteredParameterDomain.reverse()];
+  }
+  return [filteredPressureDomain, filteredParameterDomain];
+};
+const T0_SEA = 288.15; // Standard temperature in Kelvin (15 degrees Celsius)
+const P0_SEA = 101325; // Reference pressure (Pa)
+const R_GAS = 8.314462618; // Universal gas constant (J/mol K)
+const L_TEMP = 0.0065; // Temperature gradient (K/m) at sea level
+const G_ACC = 9.80665; // The gravitational acceleration in units of geopotential height (m/s2)
+const M_AIR = 0.0289647; // Mean molar mass of air at sea level (kg/mol)
+const exponent = R_GAS * L_TEMP / (G_ACC * M_AIR); // ≈ 0.1903
+// This function returns the altitude above MSL using the barometric formula in m
+// Pressure passed in is in hPa, which is converted to Pa (pressure * 100)
+const altitudeBarometricFromPressure = pressure => {
+  const altitude = T0_SEA / L_TEMP * ((P0_SEA / (pressure * 100)) ** exponent - 1);
+  return altitude;
+};
+const generateSegmentsBasedOnLevel = (pressure, windValues) => {
+  const segments = [[], [], [], [], []];
+  pressure.forEach((pressureVal, index) => {
+    // Ensure we ignore the last value
+    if (pressure[index + 1]) {
+      const heightInMeters = altitudeBarometricFromPressure(pressureVal);
+      // index 0, red line
+      if (heightInMeters < 1000) {
+        segments[0].push(windValues[index]);
+        segments[0].push(windValues[index + 1]);
+      }
+      // index 1, green line
+      if (heightInMeters >= 1000 && heightInMeters < 3000) {
+        segments[1].push(windValues[index]);
+        segments[1].push(windValues[index + 1]);
+      }
+      // index 2, yellow line
+      if (heightInMeters >= 3000 && heightInMeters < 6000) {
+        segments[2].push(windValues[index]);
+        segments[2].push(windValues[index + 1]);
+      }
+      // index 3, purple line
+      if (heightInMeters >= 6000 && heightInMeters < 9000) {
+        segments[3].push(windValues[index]);
+        segments[3].push(windValues[index + 1]);
+      }
+      // index 4, black line
+      if (heightInMeters >= 9000 && heightInMeters <= 19000) {
+        segments[4].push(windValues[index]);
+        segments[4].push(windValues[index + 1]);
+      }
+    }
+  });
+  return segments;
+};
+const HODOGRAPH_COLORS = ['red', 'olivedrab', 'orange', 'darkviolet', 'black'];
+const getColorForSegment = index => {
+  if (HODOGRAPH_COLORS[index]) {
+    return HODOGRAPH_COLORS[index];
+  }
+  return 'black';
+};
+const plotHodograph = ({
+  windValues,
+  pressureValues,
+  scaleAngle,
+  scaleRadius,
+  widthHeight,
+  svg,
+  index
+}) => {
+  // Filter out any NaN or null values
+  const [filteredPressureValues, filteredWindValues] = filterDomainRangeForHodograph(pressureValues, windValues);
+  // Construct path segments to be able to give each segment it's own color
+  const pathSegments = generateSegmentsBasedOnLevel(filteredPressureValues, filteredWindValues);
+  // index 0 = wind direction, index 1 = wind speed
+  const lineGenerator = d3.lineRadial().angle(dataPoint => scaleAngle(dataPoint[0])).radius(dataPoint => scaleRadius(dataPoint[1]));
+  svg.select('g.hodograph').selectAll(`path.dataline-${index}`).data(pathSegments).enter().append('path').classed(`dataline-${index}`, true).attr('data-testid', `hodograph-dataline-${index}`).attr('transform', `translate(${widthHeight / 2}, ${widthHeight / 2})`).attr('fill', 'none').attr('stroke', (data, segmentIndex) => getColorForSegment(segmentIndex)).attr('stroke-width', 2).style('stroke-opacity', 1).attr('d', data => lineGenerator(data));
+  // Adding a dot for the very first data point in the color used in the soundings graph
+  const firstDataPoint = filteredWindValues[0];
+  if (firstDataPoint) {
+    const color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
+    svg.select('g.hodograph').append('g').attr('transform', `translate(${widthHeight / 2}, ${widthHeight / 2})`) // origin transformed to center
+    .attr('fill', color).attr('stroke', 'none').attr('data-testid', `hodograph-datastart-${index}`).selectAll().data([firstDataPoint]).join('circle').attr('cx', dataPoint => {
+      const angle = scaleAngle(dataPoint[0]);
+      const radius = scaleRadius(dataPoint[1]);
+      return radius * Math.sin(angle);
+    }).attr('cy', dataPoint => {
+      const angle = scaleAngle(dataPoint[0]);
+      const radius = scaleRadius(dataPoint[1]);
+      return radius * -1 * Math.cos(angle);
+    }).attr('r', 3);
+  }
+};
+
+const Hodograph = ({
+  data
+}) => {
+  const svgRef = useRef(null);
+  const widthHeight = 400;
+  useEffect(() => {
+    if (!svgRef.current) {
+      return;
+    }
+    // Define svg
+    const svg = initializeSvg({
+      svgRef,
+      widthHeight
+    });
+    // Set scales for temperature and pressure
+    const [scaleRadius, scaleAngle] = createScales(widthHeight);
+    // Add axis'
+    drawAxes({
+      svg,
+      scaleRadius,
+      scaleAngle,
+      widthHeight
+    });
+    data.forEach((features, index) => {
+      const windValues = features?.map(feature => {
+        // Transform windDirectionFrom to windDirectionTo
+        const windDirectionTo = ((feature.properties.windDirection + 180) % 360 + 360) % 360;
+        return [windDirectionTo, feature.properties.windSpeed];
+      });
+      const pressureValues = features.map(feature => feature.properties.pressure);
+      // Draw Temperature
+      plotHodograph({
+        windValues,
+        pressureValues,
+        scaleAngle,
+        scaleRadius,
+        widthHeight,
+        svg,
+        index
+      });
+    });
+    // Allow zooming and panning
+    const zoomBehavior = d3.zoom().scaleExtent([1, 7]).translateExtent([[-0.2 * widthHeight, -0.2 * widthHeight], [1.2 * widthHeight, 1.2 * widthHeight]]).on('zoom', event => {
+      svg.select('g.hodograph').attr('transform', event.transform);
+    });
+    svg.call(zoomBehavior);
+    // eslint-disable-next-line consistent-return
+    return () => {
+      svg.on('zoom', null);
+      svg.select('g.hodograph').selectAll('*').remove();
+    };
+  }, [data, widthHeight]);
+  return jsx("svg", {
+    height: "100%",
+    ref: svgRef,
+    width: "100%"
+  });
+};
+
+const getLegendItem = (color, text) => {
+  return jsxs(Typography, {
+    sx: {
+      color: 'geowebColors.typographyAndIcons.text',
+      fontSize: '9px'
+    },
+    variant: "caption",
+    children: [jsx(Box, {
+      sx: {
+        width: '16px',
+        height: '4px',
+        backgroundColor: color,
+        display: 'inline-block',
+        marginRight: '4px',
+        marginBottom: '2px'
+      }
+    }), text]
+  });
+};
+const HodographLegend = () => {
+  return jsxs(Stack, {
+    direction: "column",
+    justifyContent: "center",
+    sx: {
+      flexWrap: 'wrap',
+      paddingLeft: 2,
+      paddingTop: 0.5
+    },
+    useFlexGap: true,
+    children: [getLegendItem(HODOGRAPH_COLORS[0], '0 - 1 km'), getLegendItem(HODOGRAPH_COLORS[1], '1 - 3 km'), getLegendItem(HODOGRAPH_COLORS[2], '3 - 6 km'), getLegendItem(HODOGRAPH_COLORS[3], '6 - 9 km'), getLegendItem(HODOGRAPH_COLORS[4], '9 - 19 km')]
+  });
+};
+
+const HodographCollection = ({
+  data
+}) => {
+  return jsxs(Box, {
+    sx: {
+      padding: '5px'
+    },
+    children: [jsx(Hodograph, {
+      data: data
+    }), jsx(HodographLegend, {})]
+  });
+};
+
 const ACCORDION_MIN_WIDTH = 24;
 const SoundingsAccordion = React.forwardRef(({
   name,
@@ -2353,6 +2602,14 @@ const SortableAccordions = ({
             }
           })
         });
+      case 'hodograph':
+        return jsx(SoundingsAccordion, {
+          maxWidth: 500,
+          name: "Hodograph",
+          children: jsx(HodographCollection, {
+            data: data
+          })
+        });
       default:
         return null;
     }
@@ -2558,6 +2815,7 @@ const aConstant = 17.67;
 const bConstant = 243.5; // Constants for water, b in Celsius
 const gConstant = 461.5; // Gas constant ratio between water vapour and air [J/(K*kg)]
 const hConstant = 2.5e6; // Latent heat for water vaporization [J/kg]
+const ktsConstant = 1.94384;
 // Formula to use when dewpoint is not available
 // Known as Magnus Formula
 // - Calculate vapor pressure
@@ -2582,8 +2840,15 @@ relHumidity) {
   const dewpoint = tKelvin / (1 - tKelvin * Math.log(relHumidity * 0.01) * gConstant / hConstant);
   return dewpoint;
 }
+const getWindSpeedInKts = (windSpeed, windSpeedUnit) => {
+  if (windSpeedUnit === 'kts') {
+    return windSpeed;
+  }
+  // Formula to convert from m/s to kts
+  return windSpeed * ktsConstant;
+};
 // Parsing and conversion function
-function parseCoverageCollection(response, parameterMappings) {
+function parseCoverageCollection(response, parameterMappings, windSpeedUnit) {
   const features = [];
   const pressureArray = [];
   const tempArray = [];
@@ -2687,13 +2952,14 @@ function parseCoverageCollection(response, parameterMappings) {
       dewpoint = dewpointFromRelativeHumidity(tempArray[index], relativeHumidity);
     }
     // Extract wind speed and direction - use fallback calculations if no speed and direction in parameter mappings
+    // Convert to kts if retrieved in m/s
     let windSpeed = NaN;
     if (parameterMappings.windSpeed) {
-      windSpeed = collectionData.windSpeedArray[index];
+      windSpeed = getWindSpeedInKts(collectionData.windSpeedArray[index], windSpeedUnit);
     } else if (parameterMappings.windU && parameterMappings.windV) {
       const windU = collectionData.windUArray[index];
       const windV = collectionData.windVArray[index];
-      windSpeed = Math.sqrt(windU ** 2 + windV ** 2);
+      windSpeed = getWindSpeedInKts(Math.sqrt(windU ** 2 + windV ** 2), windSpeedUnit);
     }
     let windDirection = NaN;
     if (parameterMappings.windDirection) {
@@ -2802,7 +3068,7 @@ const sortSoundingFeatures = data => {
     return featureB.properties.pressure - featureA.properties.pressure;
   });
 };
-const constructQueryParams = (collectionId, baseUrl, instanceId, location, datetime, parameterMappings, verticalRange) => {
+const constructQueryParams = (collectionId, baseUrl, instanceId, location, datetime, parameterMappings, windSpeedUnit, verticalRange) => {
   const parameters = getParameterMappings(parameterMappings);
   if (typeof location === 'string') {
     // LOCATION call
@@ -2815,7 +3081,7 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
         }
         try {
           const rawData = await getEdrCollectionForLocation(collectionId, baseUrl, instanceId, location, parameters, datetime, verticalRange);
-          const parsedData = parseCoverageCollection(rawData, parameterMappings);
+          const parsedData = parseCoverageCollection(rawData, parameterMappings, windSpeedUnit);
           return sortSoundingFeatures(parsedData);
         } catch (_err) {
           throw new Error('Error fetching EDR data collection by location');
@@ -2833,7 +3099,7 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
       }
       try {
         const rawData = await getEdrCollectionForPosition(collectionId, baseUrl, instanceId, location, parameters, datetime, verticalRange);
-        const parsedData = parseCoverageCollection(rawData, parameterMappings);
+        const parsedData = parseCoverageCollection(rawData, parameterMappings, windSpeedUnit);
         return sortSoundingFeatures(parsedData);
       } catch (_err) {
         throw new Error('Error fetching EDR data collection by position');
@@ -2868,6 +3134,7 @@ const useMultipleSources = (sources, locations, datetime) => {
       url,
       instanceId,
       parameterMappings,
+      windSpeedUnit,
       verticalRange
     }, index) => {
       // Find the best matching timestep for this source
@@ -2892,7 +3159,7 @@ const useMultipleSources = (sources, locations, datetime) => {
           dateToUse = nearestTimestep;
         }
       }
-      const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dateToUse || '', parameterMappings || defaultParameterMappings, verticalRange || '');
+      const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dateToUse || '', parameterMappings || defaultParameterMappings, windSpeedUnit || 'ms', verticalRange || '');
       return queryParams;
     });
   }, [datetime, locations, sources, timesteps]);
@@ -3138,7 +3405,7 @@ const initialSoundingsState = {
   selectedTime: new Date().toISOString(),
   diagramType: 'SKEWT',
   soundingPanels: {
-    order: ['soundings', 'windbarbs'],
+    order: ['soundings', 'windbarbs', 'hodograph'],
     entities: {
       soundings: {
         id: 'soundings',
@@ -3149,6 +3416,11 @@ const initialSoundingsState = {
         id: 'windbarbs',
         name: 'Wind Barbs',
         isDisplayed: true
+      },
+      hodograph: {
+        id: 'hodograph',
+        name: 'Hodograph',
+        isDisplayed: true
       }
     }
   },
@@ -3349,6 +3621,7 @@ const getSelectedSources = createSelector(getSoundingsStore, store => {
         instanceId: value.instanceId,
         verticalRange: value.verticalRange,
         parameterMappings: value.parameterMappings,
+        windSpeedUnit: value.windSpeedUnit ?? 'ms',
         name: value.name ?? ''
       });
     }
@@ -4088,7 +4361,8 @@ const SoundingsConnect = ({
     const orderedIds = newOrder.map(collection => collection.id);
     dispatch(soundingsActions.changeSoundingPanelOrder({
       panelId: viewId,
-      newOrderOfIds: orderedIds
+      newOrderOfIds: orderedIds,
+      origin: SoundingsActionOrigin.soundingsComponent
     }));
   };
   return jsxs(Fragment, {
@@ -4360,6 +4634,7 @@ const SoundingsSourceDialogConnect = ({
         url: collection.url,
         isChecked: currentSelection?.isChecked || false,
         parameterMappings: collection.parameterMappings,
+        windSpeedUnit: collection.windSpeedUnit,
         ...(collection.name && collection.name !== '' ? {
           name: collection.name
         } : {})
@@ -4589,28 +4864,6 @@ const LocationsMenuConnect = ({
   });
 };
 
-var SoundingManagerDummyPreset = {
-	order: [
-		"soundings",
-		"windbarbs"
-	],
-	entities: {
-		soundings: {
-			id: "soundings",
-			name: "Soundings",
-			isDisplayed: true
-		},
-		windbarbs: {
-			id: "windbarbs",
-			name: "Wind Barbs",
-			isDisplayed: true
-		}
-	}
-};
-var preset = {
-	SoundingManagerDummyPreset: SoundingManagerDummyPreset
-};
-
 const SoundingManagerListItem = ({
   id,
   name,
@@ -4723,24 +4976,20 @@ const SoundingsManagerConnect = () => {
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsManager);
   const dispatch = useDispatch();
   const panelId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsManager));
-  React.useEffect(() => {
-    const data = preset.SoundingManagerDummyPreset;
-    dispatch(soundingsActions.addSoundingPanelsFromPreset({
-      panelId,
-      panels: data
-    }));
-  }, [dispatch, panelId]);
   const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store, panelId));
   const changeOrder = newOrder => {
     const orderedIds = newOrder.map(collection => collection.id);
     dispatch(soundingsActions.changeSoundingPanelOrder({
       panelId,
-      newOrderOfIds: orderedIds
+      newOrderOfIds: orderedIds,
+      origin: 'soundingsManager'
     }));
   };
   const toggleVisibility = id => {
     dispatch(soundingsActions.toggleSoundingPanelVisibility({
-      id
+      id,
+      panelId,
+      origin: 'soundingsManager'
     }));
   };
   return jsx(SoundingsManager, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/soundings",
-  "version": "15.2.0",
+  "version": "15.3.0",
   "description": "GeoWeb soundings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,24 +8,24 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/api": "15.2.0",
+    "@opengeoweb/api": "15.3.0",
     "@tanstack/react-query": "^5.85.5",
     "react": "^18.3.1",
     "d3": "^7.9.0",
     "react-i18next": "^15.1.1",
     "i18next": "^25.0.1",
-    "@opengeoweb/shared": "15.2.0",
+    "@opengeoweb/shared": "15.3.0",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "15.2.0",
+    "@opengeoweb/store": "15.3.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "15.2.0",
+    "@opengeoweb/theme": "15.3.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "15.2.0",
+    "@opengeoweb/time-slider": "15.3.0",
     "react-window": "^2.2.6",
-    "@opengeoweb/webmap": "15.2.0",
+    "@opengeoweb/webmap": "15.3.0",
     "lodash": "^4.17.21",
     "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "15.2.0",
+    "@opengeoweb/webmap-react": "15.3.0",
     "react-resizable-layout": "^0.7.3",
     "react-sortablejs": "^6.1.4"
   },

package/src/lib/api/edr-api/utils.d.ts

@@ -1,6 +1,7 @@
 import type { Coverage, CoverageCollection, VerticalProfileDomain } from '@opengeoweb/shared';
 import type { CollectionDetails, SoundingFeature, SoundingsInstance } from './types';
-export declare function parseCoverageCollection(response: CoverageCollection<VerticalProfileDomain> | Coverage<VerticalProfileDomain>, parameterMappings: Record<string, string>): SoundingFeature[];
+export declare const getWindSpeedInKts: (windSpeed: number, windSpeedUnit: string) => number;
+export declare function parseCoverageCollection(response: CoverageCollection<VerticalProfileDomain> | Coverage<VerticalProfileDomain>, parameterMappings: Record<string, string>, windSpeedUnit: string): SoundingFeature[];
 /**
  * Parse duration with repeats
  * @param dateString e.g. 'R67/2025-04-22T09:00:00Z/PT60M'

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { HodographCollection } from './HodographCollection';
+declare const meta: Meta<typeof HodographCollection>;
+export default meta;
+type Story = StoryObj<typeof HodographCollection>;
+export declare const HodographStory: Story;
+export declare const HodographStoryDark: Story;

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const HodographLegend: () => React.ReactElement;

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

@@ -0,0 +1,53 @@
+import * as d3 from 'd3';
+import type { ScalesType } from '../Soundings/types';
+interface InitializeSvg {
+    svgRef: React.MutableRefObject<SVGSVGElement | null>;
+    widthHeight: number;
+}
+export declare const initializeSvg: ({ svgRef, widthHeight, }: InitializeSvg) => d3.Selection<SVGSVGElement | null, unknown, null, undefined>;
+export declare const createScales: (widthHeight: number) => [ScalesType, ScalesType];
+interface DrawAxis {
+    svg: d3.Selection<SVGSVGElement, unknown, HTMLElement, undefined>;
+    scaleRadius: ScalesType;
+    scaleAngle: ScalesType;
+    widthHeight: number;
+}
+export declare const drawAxes: ({ svg, scaleRadius, scaleAngle, widthHeight, }: DrawAxis) => void;
+export declare const filterDomainRangeForHodograph: (pressureDomain: number[], parameterDomain: [number, number][]) => [number[], [number, number][]];
+type PathSegments = [
+    [
+        number,
+        number
+    ][],
+    [
+        number,
+        number
+    ][],
+    [
+        number,
+        number
+    ][],
+    [
+        number,
+        number
+    ][],
+    [
+        number,
+        number
+    ][]
+];
+export declare const altitudeBarometricFromPressure: (pressure: number) => number;
+export declare const generateSegmentsBasedOnLevel: (pressure: number[], windValues: [number, number][]) => PathSegments;
+export declare const HODOGRAPH_COLORS: string[];
+export declare const getColorForSegment: (index: number) => string;
+interface PlotHodograph {
+    windValues: [number, number][];
+    pressureValues: number[];
+    scaleAngle: ScalesType;
+    scaleRadius: ScalesType;
+    widthHeight: number;
+    svg: d3.Selection<SVGSVGElement, unknown, HTMLElement, undefined>;
+    index: number;
+}
+export declare const plotHodograph: ({ windValues, pressureValues, scaleAngle, scaleRadius, widthHeight, svg, index, }: PlotHodograph) => void;
+export {};

package/src/lib/components/Hodograph/drawUtils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/store/types.d.ts

@@ -10,6 +10,7 @@ export interface SourceType {
     instanceId?: string;
     verticalRange?: string;
     parameterMappings?: Record<string, string>;
+    windSpeedUnit?: string;
     name?: string;
 }
 export interface SoundingsPayload {