@opengeoweb/soundings 15.2.0 → 16.0.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,14 +1,14 @@
 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 { range, minBy, isEqual } from 'lodash';
+import { Menu, ListSubheader, Typography, MenuItem, Box, Stack, Card, IconButton, Tooltip, LinearProgress, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
+import { range, isEqual } from 'lodash';
 import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomToggleButton, dateUtils, SwitchButton, CustomSlider, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
-import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericSelectors, mapSelectors, genericActions, syncGroupsActions, mapActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
-import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, webmapUtils } from '@opengeoweb/webmap';
+import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, genericSelectors, useSyncgroupTimeState, mapSelectors, syncGroupsActions, mapActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { ArrowDropDownDown, DragHandle, Layers, Sources, Close, Visibility, VisibilityOff } from '@opengeoweb/theme';
+import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, handleDateUtilsISOString, webmapUtils } from '@opengeoweb/webmap';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import { ReactSortable } from 'react-sortablejs';
-import { ArrowDropDownDown, DragHandle, Layers, Sources, Visibility, VisibilityOff } from '@opengeoweb/theme';
 import * as d3 from 'd3';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { timesliderTranslations, TIME_SLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/time-slider';
 import { useResizable } from 'react-resizable-layout';
 import { useQueries } from '@tanstack/react-query';
-import { getHeaders, handleResponse } from '@opengeoweb/api';
+import { withJsonFormat, getHeaders, handleResponse } from '@opengeoweb/api';
 import { createSlice, createAction, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { List as List$1 } from 'react-window';
 
@@ -32,6 +32,7 @@ var en = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Coming soon",
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Markers",
 	"soundings-toggle-location-markers-tooltip": "Show/hide location markers"
 };
@@ -47,8 +48,9 @@ var no = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Kommer snart",
-	"soundings-toggle-location-markers-label": "ikke oversatt",
-	"soundings-toggle-location-markers-tooltip": "ikke oversatt"
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
+	"soundings-toggle-location-markers-label": "Lokasjoner",
+	"soundings-toggle-location-markers-tooltip": "Vis/skjul lokasjoner"
 };
 var nl = {
 	sources: "Bronnen",
@@ -62,6 +64,7 @@ var nl = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Binnenkort beschikbaar",
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Kaart locaties",
 	"soundings-toggle-location-markers-tooltip": "Toon/Verberg locatie punten"
 };
@@ -77,6 +80,7 @@ var fi = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Tulossa pian",
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Merkit",
 	"soundings-toggle-location-markers-tooltip": "Näytä/piilota kohdemerkit"
 };
@@ -326,7 +330,7 @@ const getDiagramName = (t, diagramType) => {
   }
 };
 // vfx code
-const initializeSvg = ({
+const initializeSvg$1 = ({
   svgRef,
   width,
   height,
@@ -345,7 +349,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 +362,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 +701,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 +1235,7 @@ const Soundings = ({
     if (!svgRef.current) {
       return;
     }
-    const svg = initializeSvg({
+    const svg = initializeSvg$1({
       svgRef,
       width,
       height,
@@ -1245,9 +1249,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 +1338,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 +1742,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 +1849,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 +1931,7 @@ const WindBarbs = ({
     }
     const root = d3.select(svgRef.current);
     root.selectAll('*').remove();
-    const svg = initializeSvg({
+    const svg = initializeSvg$1({
       svgRef,
       width,
       height,
@@ -1947,7 +1949,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 +2042,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 +2606,14 @@ const SortableAccordions = ({
             }
           })
         });
+      case 'hodograph':
+        return jsx(SoundingsAccordion, {
+          maxWidth: 500,
+          name: "Hodograph",
+          children: jsx(HodographCollection, {
+            data: data
+          })
+        });
       default:
         return null;
     }
@@ -2487,6 +2748,40 @@ const SoundingsLegend = ({
   });
 };
 
+/* *
+ * 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 getTimeMismatchInfo = (isTimeSynced, warningTimeInUse, sourceTimesteps) => {
+  if (!isTimeSynced || !warningTimeInUse) {
+    return undefined;
+  }
+  const requestedTimestamp = new Date(warningTimeInUse).getTime();
+  const allSourceTimesteps = sourceTimesteps.flat().map(timestep => new Date(timestep).getTime()).filter(time => Number.isFinite(time)).sort((aTime, bTime) => aTime - bTime);
+  if (allSourceTimesteps.length === 0) {
+    return undefined;
+  }
+  const firstAvailableTime = allSourceTimesteps[0];
+  const lastAvailableTime = allSourceTimesteps[allSourceTimesteps.length - 1];
+  const isOutsideOverallSoundingsRange = requestedTimestamp < firstAvailableTime || requestedTimestamp > lastAvailableTime;
+  return isOutsideOverallSoundingsRange ? {
+    mismatch: true
+  } : undefined;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2504,13 +2799,13 @@ const SoundingsLegend = ({
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const getCollectionLocations = async (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/locations`, {
+const getCollectionLocations = async (collectionId, baseUrl) => fetch(withJsonFormat(`${baseUrl}/collections/${collectionId}/locations`), {
   headers: getHeaders()
 }).then(handleResponse);
-const getCollectionInstances = async (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/instances`, {
+const getCollectionInstances = async (collectionId, baseUrl) => fetch(withJsonFormat(`${baseUrl}/collections/${collectionId}/instances`), {
   headers: getHeaders()
 }).then(handleResponse);
-const getCollectionDetails = async (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}`, {
+const getCollectionDetails = async (collectionId, baseUrl) => fetch(withJsonFormat(`${baseUrl}/collections/${collectionId}`), {
   headers: getHeaders()
 }).then(handleResponse);
 const getEdrCollectionForLocation = async (collectionId, baseUrl, instanceId, locationId, parameters, datetime, verticalRange) => {
@@ -2558,6 +2853,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 +2878,34 @@ 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;
+};
+const getNearestTimestep = (requestedDatetime, availableTimesteps) => {
+  if (!requestedDatetime || availableTimesteps.length === 0) {
+    return '';
+  }
+  const requestedTime = new Date(requestedDatetime).getTime();
+  let nearestTimestep = availableTimesteps[0];
+  let nearestTimestepMs = new Date(nearestTimestep).getTime();
+  let minDiff = Math.abs(nearestTimestepMs - requestedTime);
+  for (const timestep of availableTimesteps) {
+    const timestepMs = new Date(timestep).getTime();
+    const diff = Math.abs(timestepMs - requestedTime);
+    if (diff < minDiff || diff === minDiff && timestepMs < nearestTimestepMs) {
+      minDiff = diff;
+      nearestTimestep = timestep;
+      nearestTimestepMs = timestepMs;
+    }
+  }
+  return nearestTimestep;
+};
 // Parsing and conversion function
-function parseCoverageCollection(response, parameterMappings) {
+function parseCoverageCollection(response, parameterMappings, windSpeedUnit) {
   const features = [];
   const pressureArray = [];
   const tempArray = [];
@@ -2687,13 +3009,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 +3125,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 +3138,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 +3156,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');
@@ -2856,7 +3179,7 @@ const defaultParameterMappings = {
 const getParameterMappings = parameterMappings => {
   return Object.keys(parameterMappings).map(key => parameterMappings[key]);
 };
-const useMultipleSources = (sources, locations, datetime) => {
+const useMultipleSources = (sources, locations, datetime, timeSelectionMode = 'nearestWithinRange') => {
   const {
     data: timesteps,
     error: timestepsError,
@@ -2868,34 +3191,34 @@ const useMultipleSources = (sources, locations, datetime) => {
       url,
       instanceId,
       parameterMappings,
+      windSpeedUnit,
       verticalRange
     }, index) => {
-      // Find the best matching timestep for this source
+      // Per source: choose either exact match or nearest-in-range timestep.
       let dateToUse = '';
       if (datetime && timesteps[index] && timesteps[index].length > 0) {
         const requestedTime = new Date(datetime).getTime();
-        const availableTimesteps = timesteps[index];
-        // Check for exact match first
-        if (availableTimesteps.includes(new Date(datetime).toISOString())) {
-          dateToUse = datetime;
-        } else {
-          // Find nearest timestep (prefer earlier timesteps if equidistant)
-          let nearestTimestep = availableTimesteps[0];
-          let minDiff = Math.abs(new Date(availableTimesteps[0]).getTime() - requestedTime);
-          for (const timestep of availableTimesteps) {
-            const diff = Math.abs(new Date(timestep).getTime() - requestedTime);
-            if (diff < minDiff) {
-              minDiff = diff;
-              nearestTimestep = timestep;
+        if (Number.isFinite(requestedTime)) {
+          const exactMatch = timesteps[index].find(timestep => new Date(timestep).getTime() === requestedTime);
+          if (timeSelectionMode === 'exact') {
+            dateToUse = exactMatch || '';
+          } else {
+            const availableTimes = timesteps[index].map(timestep => new Date(timestep).getTime()).filter(time => Number.isFinite(time)).sort((aTime, bTime) => aTime - bTime);
+            if (availableTimes.length > 0) {
+              const firstAvailableTime = availableTimes[0];
+              const lastAvailableTime = availableTimes[availableTimes.length - 1];
+              const isWithinSourceRange = requestedTime >= firstAvailableTime && requestedTime <= lastAvailableTime;
+              if (isWithinSourceRange) {
+                dateToUse = getNearestTimestep(datetime, timesteps[index]);
+              }
             }
           }
-          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]);
+  }, [datetime, locations, sources, timeSelectionMode, timesteps]);
   return useQueries({
     queries,
     combine: queryResults => {
@@ -2935,7 +3258,8 @@ const useTimesteps = sourceSelections => {
         return getTimestepsFromInstanceOrCollection(instance);
       }
       return getTimestepsFromInstanceOrCollection(data);
-    }
+    },
+    refetchInterval: 5 * 60 * 1000
   })), [sourceSelections]);
   const results = useQueries({
     queries,
@@ -3138,7 +3462,7 @@ const initialSoundingsState = {
   selectedTime: new Date().toISOString(),
   diagramType: 'SKEWT',
   soundingPanels: {
-    order: ['soundings', 'windbarbs'],
+    order: ['soundings', 'windbarbs', 'hodograph'],
     entities: {
       soundings: {
         id: 'soundings',
@@ -3149,6 +3473,11 @@ const initialSoundingsState = {
         id: 'windbarbs',
         name: 'Wind Barbs',
         isDisplayed: true
+      },
+      hodograph: {
+        id: 'hodograph',
+        name: 'Hodograph',
+        isDisplayed: true
       }
     }
   },
@@ -3174,7 +3503,23 @@ const slice = createSlice({
         draft.selectedLocations = preset.selectedLocations ?? {};
         draft.selectedTime = preset.selectedTime ?? new Date().toISOString();
         draft.diagramType = preset.diagramType ?? 'SKEWT';
-        draft.soundingPanels = preset.soundingPanels ?? initialSoundingsState.soundingPanels;
+        // Ensure we show all available panels, even if not stored in preset
+        if (preset.soundingPanels) {
+          draft.soundingPanels = {
+            ...preset.soundingPanels
+          };
+          initialSoundingsState.soundingPanels.order.forEach(panel => {
+            if (!preset.soundingPanels.order.find(presetPanel => panel === presetPanel)) {
+              draft.soundingPanels.order = [...draft.soundingPanels.order, panel];
+              draft.soundingPanels.entities = {
+                ...draft.soundingPanels.entities,
+                [panel]: initialSoundingsState.soundingPanels.entities[panel]
+              };
+            }
+          });
+        } else {
+          draft.soundingPanels = initialSoundingsState.soundingPanels;
+        }
         draft.shouldHideLocationMarkers = preset.shouldHideLocationMarkers ?? false;
       }
     },
@@ -3258,6 +3603,46 @@ const normalizeSoundingsState = state => {
 };
 const soundingsReducer = (state, action) => {
   const normalizedState = normalizeSoundingsState(state ?? initialState);
+  if (action.type === 'GENERIC_SYNC_SETTIME') {
+    const {
+      source,
+      targets: targetsFromAction
+    } = action.payload;
+    const targets = [...targetsFromAction];
+    if (source?.payload) {
+      targets.unshift({
+        targetId: source.payload.sourceId,
+        value: source.payload.value
+      });
+    }
+    let hasChanges = false;
+    const nextById = {
+      ...normalizedState.byId
+    };
+    targets.forEach(({
+      targetId,
+      value
+    }) => {
+      if (!targetId || !value?.currentTime || !nextById[targetId]) {
+        return;
+      }
+      if (nextById[targetId].selectedTime === value.currentTime) {
+        return;
+      }
+      hasChanges = true;
+      nextById[targetId] = {
+        ...nextById[targetId],
+        selectedTime: value.currentTime
+      };
+    });
+    if (hasChanges) {
+      return {
+        ...normalizedState,
+        byId: nextById
+      };
+    }
+    return normalizedState;
+  }
   if (action.type === setSoundingsCollections.type) {
     const collections = action.payload;
     if (collections === normalizedState.soundingsCollections) {
@@ -3349,6 +3734,7 @@ const getSelectedSources = createSelector(getSoundingsStore, store => {
         instanceId: value.instanceId,
         verticalRange: value.verticalRange,
         parameterMappings: value.parameterMappings,
+        windSpeedUnit: value.windSpeedUnit ?? 'ms',
         name: value.name ?? ''
       });
     }
@@ -3660,16 +4046,53 @@ const SoundingsTimeSlider = ({
     value: dateUtils.unix(dateUtils.getUtcFromString(date)),
     label: shouldHideLabel(arr.length, index, maxLabelCount) ? '' : dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
   }));
+  const currentTimeIndex = React.useMemo(() => {
+    if (timesteps.length === 0) {
+      return -1;
+    }
+    const selectedUtc = dateUtils.getUtcFromString(selectedTime);
+    if (!selectedUtc) {
+      return 0;
+    }
+    const selectedUnix = dateUtils.unix(selectedUtc);
+    const indexByExactTimestamp = timesteps.findIndex(time => {
+      const utcTime = dateUtils.getUtcFromString(time);
+      if (!utcTime) {
+        return false;
+      }
+      return dateUtils.unix(utcTime) === selectedUnix;
+    });
+    if (indexByExactTimestamp !== -1) {
+      return indexByExactTimestamp;
+    }
+    const indexByExactString = timesteps.findIndex(time => 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((nearestIndex, time, index) => {
+      const utcTime = dateUtils.getUtcFromString(time);
+      if (!utcTime) {
+        return nearestIndex;
+      }
+      const currentDiff = Math.abs(dateUtils.unix(utcTime) - selectedUnix);
+      const nearestUtc = dateUtils.getUtcFromString(timesteps[nearestIndex]);
+      if (!nearestUtc) {
+        return index;
+      }
+      const nearestDiff = Math.abs(dateUtils.unix(nearestUtc) - selectedUnix);
+      return currentDiff < nearestDiff ? index : nearestIndex;
+    }, 0);
+  }, [selectedTime, timesteps]);
   const onStepBackward = React.useCallback(() => {
-    const currentIndex = timesteps.indexOf(selectedTime);
-    const precedingIndex = Math.max(currentIndex - 1, 0);
+    const precedingIndex = Math.max(currentTimeIndex - 1, 0);
     updateSelectedTime(timesteps[precedingIndex]);
-  }, [selectedTime, updateSelectedTime, timesteps]);
+  }, [currentTimeIndex, updateSelectedTime, timesteps]);
   const onStepForward = React.useCallback(() => {
-    const currentIndex = timesteps.indexOf(selectedTime);
-    const followingIndex = Math.min(currentIndex + 1, timesteps.length - 1);
+    const followingIndex = Math.min(currentTimeIndex + 1, timesteps.length - 1);
     updateSelectedTime(timesteps[followingIndex]);
-  }, [selectedTime, updateSelectedTime, timesteps]);
+  }, [currentTimeIndex, updateSelectedTime, timesteps]);
   return jsxs("div", {
     ref: sliderRef,
     style: {
@@ -3739,47 +4162,50 @@ const SoundingsTimeSlider = ({
   });
 };
 
-const roundToClosestTimestep = (timeToRound, availableSteps) => {
-  if (availableSteps.length > 0 && !availableSteps.includes(timeToRound)) {
-    const selectionValue = dateUtils.unix(new Date(timeToRound));
-    const closestTimestep = minBy(availableSteps, timeValue =>
-    // distance to selected time
-    Math.abs(selectionValue - dateUtils.unix(new Date(timeValue))));
-    return closestTimestep || availableSteps[0];
-  }
-  return timeToRound;
-};
 const SoundingsTimeSliderConnect = ({
-  viewId
+  viewId,
+  timeInUse,
+  syncEnabled = false
 }) => {
-  const selectedTime = useSelector(state => getSelectedTime(state, viewId));
+  const selectedTimeInStore = useSelector(state => getSelectedTime(state, viewId));
+  const selectedTime = timeInUse || selectedTimeInStore;
   const sourceSelections = useSelector(state => getSelectedSources(state, viewId));
   const dispatch = useDispatch();
-  const updateSelectedTime = React.useCallback((selectedTime, isInitialCorrection = false) => {
+  const updateSelectedTime = React.useCallback(selectedTime => {
+    if (syncEnabled) {
+      dispatch(genericActions.setTime({
+        sourceId: viewId,
+        origin: 'SoundingsTimeSliderConnect',
+        value: {
+          currentTime: handleDateUtilsISOString(selectedTime)
+        }
+      }));
+      return;
+    }
     dispatch(soundingsActions.updateSelectedTime({
       selectedTime,
       panelId: viewId,
-      origin: isInitialCorrection ? SoundingsActionOrigin.soundingsManager : SoundingsActionOrigin.soundingsComponent
+      origin: SoundingsActionOrigin.soundingsComponent
     }));
-  }, [dispatch, viewId]);
+  }, [dispatch, syncEnabled, viewId]);
   const {
     data: timesteps
   } = useTimesteps(sourceSelections);
   const mergedTimesteps = [...new Set(timesteps.flat())].sort();
-  const hasInitializedTime = React.useRef(false);
-  // Ensure that the selected time is always one of the available timesteps
-  const validSelectedTime = roundToClosestTimestep(selectedTime, mergedTimesteps);
-  useEffect(() => {
-    if (selectedTime !== validSelectedTime) {
-      const isInitial = !hasInitializedTime.current;
-      updateSelectedTime(validSelectedTime, isInitial);
-      if (isInitial) {
-        hasInitializedTime.current = true;
-      }
+  const validSelectedTime = mergedTimesteps.length > 0 && !mergedTimesteps.includes(selectedTimeInStore) ? getNearestTimestep(selectedTimeInStore, mergedTimesteps) : selectedTimeInStore;
+  React.useEffect(() => {
+    // Local mode: keep selectedTime aligned with available timesteps.
+    if (syncEnabled || selectedTimeInStore === validSelectedTime) {
+      return;
     }
-  }, [selectedTime, updateSelectedTime, validSelectedTime]);
+    dispatch(soundingsActions.updateSelectedTime({
+      selectedTime: validSelectedTime,
+      panelId: viewId,
+      origin: SoundingsActionOrigin.soundingsComponent
+    }));
+  }, [dispatch, selectedTimeInStore, syncEnabled, validSelectedTime, viewId]);
   return jsx(SoundingsTimeSlider, {
-    selectedTime: validSelectedTime,
+    selectedTime: selectedTime,
     timesteps: mergedTimesteps,
     updateSelectedTime: updateSelectedTime
   });
@@ -3816,6 +4242,9 @@ const SoundingsConnect = ({
   viewId,
   soundingsPreset
 }) => {
+  const {
+    t
+  } = useSoundingsTranslation();
   const viewRef = React.useRef(null);
   const size = useGetSize(viewRef);
   const geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
@@ -3852,6 +4281,25 @@ const SoundingsConnect = ({
   const locationSelections = useSelector(state => getLocationSelections(state, viewId), shallowEqual);
   const diagramType = useSelector(state => getDiagramType(state, viewId));
   const shouldHideLocationMarkers = useSelector(state => getShouldHideLocationMarkers(state, viewId));
+  const selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, viewId), shallowEqual);
+  const firstLinkedMapId = selectedMapIds[0];
+  const {
+    data: sourceTimesteps
+  } = useTimesteps(sourceSelections);
+  const syncgroupTimeState = useSyncgroupTimeState(viewId, 0);
+  const syncgroupSelectedTime = useMemo(() => {
+    if (syncgroupTimeState?.current === undefined || !Number.isFinite(syncgroupTimeState.current)) {
+      return undefined;
+    }
+    return dateUtils.fromUnix(syncgroupTimeState.current).toISOString();
+  }, [syncgroupTimeState]);
+  const isTimeSynced = !!syncgroupSelectedTime;
+  const selectedTimeInUse = syncgroupSelectedTime || selectedTime;
+  const timeMismatchInfo = useMemo(() => {
+    return getTimeMismatchInfo(isTimeSynced, selectedTimeInUse, sourceTimesteps);
+  }, [isTimeSynced, selectedTimeInUse, sourceTimesteps]);
+  const mismatchKey = timeMismatchInfo ? selectedTimeInUse || '' : '';
+  const [isTimeMismatchDismissed, setIsTimeMismatchDismissed] = React.useState(false);
   const setChosenDiagramType = React.useCallback(diagramType => {
     dispatch(soundingsActions.updateDiagramType({
       diagramType,
@@ -3860,11 +4308,9 @@ const SoundingsConnect = ({
     }));
   }, [dispatch, viewId]);
   const selectedFeature = useSelector(state => genericSelectors.getSelectedFeature(state.syncGroups, viewId), shallowEqual);
-  const selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, viewId), shallowEqual);
-  const firstMapId = selectedMapIds[0];
   const selectedMapPin = useSelector(state =>
   // mapPins are synced so we can arbitrarily choose the first linked map
-  mapSelectors.getPinLocation(state, firstMapId), shallowEqual);
+  mapSelectors.getPinLocation(state, firstLinkedMapId), shallowEqual);
   const collectionsRef = React.useRef();
   const collections = useMemo(() => {
     const newCollections = sourceSelections.map(({
@@ -4082,13 +4528,17 @@ const SoundingsConnect = ({
     error,
     data,
     isPending
-  } = useMultipleSources(sourceSelections, locationSelections, selectedTime);
+  } = useMultipleSources(sourceSelections, locationSelections, selectedTimeInUse, 'exact');
+  useEffect(() => {
+    setIsTimeMismatchDismissed(false);
+  }, [mismatchKey]);
   const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store, viewId));
   const changeOrder = newOrder => {
     const orderedIds = newOrder.map(collection => collection.id);
     dispatch(soundingsActions.changeSoundingPanelOrder({
       panelId: viewId,
-      newOrderOfIds: orderedIds
+      newOrderOfIds: orderedIds,
+      origin: SoundingsActionOrigin.soundingsComponent
     }));
   };
   return jsxs(Fragment, {
@@ -4099,14 +4549,18 @@ const SoundingsConnect = ({
       color: "secondary",
       sx: {
         position: 'absolute',
-        width: '100%'
+        top: 0,
+        left: 0,
+        width: '100%',
+        zIndex: 20
       }
     }), jsxs(Stack, {
       sx: {
         padding: '12px',
         width: '100%',
         height: '100%',
-        backgroundColor: 'geowebColors.background.surfaceApp'
+        backgroundColor: 'geowebColors.background.surfaceApp',
+        position: 'relative'
       },
       children: [jsx(Box, {
         paddingLeft: 5,
@@ -4116,7 +4570,8 @@ const SoundingsConnect = ({
       }), jsx(Card, {
         sx: {
           width: '100%',
-          height: '100%'
+          height: '100%',
+          position: 'relative'
         },
         children: jsxs(Stack, {
           spacing: 1,
@@ -4125,7 +4580,30 @@ const SoundingsConnect = ({
             height: '100%',
             display: 'flex'
           },
-          children: [jsx(Box, {
+          children: [!!timeMismatchInfo && !isTimeMismatchDismissed && jsxs(Box, {
+            sx: {
+              flex: '0 0 auto',
+              position: 'relative'
+            },
+            children: [jsx(AlertBanner, {
+              severity: "warning",
+              title: t('soundings-time-mismatch-title')
+            }), jsx(IconButton, {
+              "aria-label": "Close warning",
+              onClick: () => setIsTimeMismatchDismissed(true),
+              size: "small",
+              sx: {
+                position: 'absolute',
+                right: 8,
+                top: 10,
+                padding: 0.25,
+                zIndex: 1
+              },
+              children: jsx(Close, {
+                fontSize: "small"
+              })
+            })]
+          }), jsx(Box, {
             sx: {
               display: 'flex',
               justifyContent: 'center',
@@ -4161,6 +4639,8 @@ const SoundingsConnect = ({
               height: `${TIMESLIDER_HEIGHT}px`
             },
             children: jsx(SoundingsTimeSliderConnect, {
+              syncEnabled: isTimeSynced,
+              timeInUse: selectedTimeInUse,
               viewId: viewId
             })
           })]
@@ -4360,6 +4840,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 +5070,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 +5182,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": "16.0.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": "16.0.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": "16.0.0",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "15.2.0",
+    "@opengeoweb/store": "16.0.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "15.2.0",
+    "@opengeoweb/theme": "16.0.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "15.2.0",
+    "@opengeoweb/time-slider": "16.0.0",
     "react-window": "^2.2.6",
-    "@opengeoweb/webmap": "15.2.0",
+    "@opengeoweb/webmap": "16.0.0",
     "lodash": "^4.17.21",
     "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "15.2.0",
+    "@opengeoweb/webmap-react": "16.0.0",
     "react-resizable-layout": "^0.7.3",
     "react-sortablejs": "^6.1.4"
   },

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

@@ -17,7 +17,7 @@ export declare const defaultParameterMappings: {
     relativeHumidity: string;
 };
 export declare const getParameterMappings: (parameterMappings: Record<string, string>) => string[];
-export declare const useMultipleSources: (sources: SourceType[], locations: Record<string, string | undefined | Coordinates>, datetime?: string) => {
+export declare const useMultipleSources: (sources: SourceType[], locations: Record<string, string | undefined | Coordinates>, datetime?: string, timeSelectionMode?: "exact" | "nearestWithinRange") => {
     data: SoundingFeature[][];
     isPending: boolean;
     error: Error | null | undefined;

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

@@ -1,6 +1,8 @@
 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 const getNearestTimestep: (requestedDatetime: string, availableTimesteps: string[]) => string;
+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/components/Soundings/SoundingsConnect.stories.d.ts

@@ -8,6 +8,7 @@ export default _default;
 type Story = StoryObj<typeof SoundingsConnect>;
 export declare const SoundingsConnectStory: Story;
 export declare const SoundingsConnectStoryDark: Story;
+export declare const SoundingsConnectWarningStory: Story;
 export declare const SoundingsClosedWindBarbsOpenStory: Story;
 export declare const SoundingsClosedWindBarbsOpenStoryDark: Story;
 export declare const SoundingsConnectLoading: {

package/src/lib/components/Soundings/timeMismatchUtils.d.ts

@@ -0,0 +1,4 @@
+export interface TimeMismatchInfo {
+    mismatch: true;
+}
+export declare const getTimeMismatchInfo: (isTimeSynced: boolean, warningTimeInUse: string | undefined, sourceTimesteps: string[][]) => TimeMismatchInfo | undefined;

package/src/lib/components/SoundingsTimeSlider/SoundingsTimeSliderConnect.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 interface SoundingsTimeSliderConnectProps {
     viewId: string;
+    timeInUse?: string;
+    syncEnabled?: boolean;
 }
-export declare const SoundingsTimeSliderConnect: ({ viewId, }: SoundingsTimeSliderConnectProps) => React.ReactElement;
+export declare const SoundingsTimeSliderConnect: ({ viewId, timeInUse, syncEnabled, }: SoundingsTimeSliderConnectProps) => React.ReactElement;
 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 {