@opengeoweb/soundings 12.2.0 → 12.4.1

package/index.esm.js

@@ -1,15 +1,97 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useRef, useEffect, useState, Fragment as Fragment$1, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useSelector, useDispatch } from 'react-redux';
+import { Card, Box, Stack, LinearProgress, List, ListItem, ListItemIcon, Checkbox, MenuItem, ListItemText, Typography, Grid, ListItemButton } from '@mui/material';
+import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, dateUtils, CustomSlider, CustomToggleButton, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
+import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 import * as d3 from 'd3';
-import { Card, List, ListItem, ListItemIcon, Checkbox, MenuItem, Box, ListItemText, ListSubheader, ListItemButton, Collapse, Button } from '@mui/material';
-import { useSetupDialog, uiTypes, uiSelectors, uiActions } from '@opengeoweb/store';
-import { ToolContainerDraggable, StyledSelect, dateUtils } from '@opengeoweb/shared';
-import 'i18next';
-import { useTranslation } from 'react-i18next';
+import { useQueries, useQuery } from '@tanstack/react-query';
 import { getHeaders, handleResponse } from '@opengeoweb/api';
-import { useQueries } from '@tanstack/react-query';
-import { ChevronDown, Sources } from '@opengeoweb/theme';
-import { useDispatch, useSelector } from 'react-redux';
+import { timesliderTranslations, TIMESLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/timeslider';
+import i18n from 'i18next';
+export { default as i18n } from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
+import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { Sources } from '@opengeoweb/theme';
+import { FixedSizeList } from 'react-window';
+
+var en = {
+	sources: "Sources",
+	latest: "Latest",
+	noInstancesAvailable: "No instances found",
+	noServicesFound: "No source available",
+	locations: "Locations",
+	"locations-menu-warning": "You have to choose your sources in the sources menu"
+};
+var no = {
+	sources: "Kilder",
+	latest: "Siste",
+	noInstancesAvailable: "Ingen instanser funnet",
+	noServicesFound: "Ingen tjenester funnet",
+	locations: "Lokasjoner",
+	"locations-menu-warning": "Du må velge kilder i kilde-menyen"
+};
+var nl = {
+	sources: "Bronnen",
+	latest: "Nieuwste",
+	noInstancesAvailable: "Geen exemplaren gevonden",
+	noServicesFound: "Geen bron beschikbaar",
+	locations: "Locaties",
+	"locations-menu-warning": "Selecteer eerst een bron in het bron menu"
+};
+var fi = {
+	sources: "Lähteet",
+	latest: "Viimeisin",
+	noInstancesAvailable: "Tapauksia ei löytynyt",
+	noServicesFound: "Lähdettä ei ole saatavilla",
+	locations: "Locations",
+	"locations-menu-warning": "Valitse ensin lähde lähdevalikosta"
+};
+var soundingsTranslations = {
+	en: en,
+	no: no,
+	nl: nl,
+	fi: fi
+};
+
+/* *
+ * 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)
+ * */
+const isobarValues = [200, 300, 400, 500, 700, 850, 925, 1000];
+const drawIsobars = ({
+  minTemperature,
+  maxTemperature,
+  xScale,
+  yScale,
+  svg
+}) => {
+  // Calculate X and Y coordinates for each pressure level
+  for (const pressureVal of isobarValues) {
+    const Px = [];
+    const tempBounds = [minTemperature, maxTemperature];
+    for (const bound of tempBounds) {
+      Px.push([xScale(bound), yScale(pressureVal)]);
+    }
+    const lineGenerator = d3.line();
+    const isoPathString = lineGenerator(Px);
+    const strID = `${pressureVal}textId`;
+    svg.append('path').attr('id', strID).attr('type', 'isobar').attr('d', isoPathString).style('fill', 'none').style('stroke-width', 1.5).style('stroke', '#B5B51F').style('stroke-opacity', 0.5);
+  }
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -28,7 +110,7 @@ import { useDispatch, useSelector } from 'react-redux';
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const SOUNDING_COLORS = ['#4487f3'];
+const SOUNDING_COLORS = ['#4487f3', '#c3213c', '#509a00'];
 // vfx code
 const initializeSvg = ({
   svgRef,
@@ -38,20 +120,33 @@ const initializeSvg = ({
 }) => {
   const svg = d3.select(svgRef.current).attr('width', width + (margin.left + margin.right)).attr('height', height + (margin.top + margin.bottom)).attr('id', 'skewT').attr('data-testid', 'skewT').append('g').attr('transform', `translate(${margin.left + margin.right},${margin.top})`);
   svg.append('clipPath').attr('id', 'clip-skewTd3').append('rect').attr('width', width).attr('height', height).attr('x', 0).attr('y', 0);
-  svg.append('rect').attr('height', height).attr('width', width).attr('fill', 'white').attr('opacity', 1).attr('id', 'skewTd3').attr('clip-path', 'url(#clip-skewTd3)');
+  svg.append('rect').attr('height', height).attr('width', width).attr('fill', '#ffffff00').attr('opacity', 1).attr('id', 'skewTd3').attr('clip-path', 'url(#clip-skewTd3)');
   return svg;
 };
 const drawAxes = ({
   svg,
   xScale,
   yScale,
-  height,
-  width
+  height
 }) => {
   // Create x-axis with intervals
-  svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).ticks(10)).append('text').attr('fill', '#000').attr('x', `${width - 8}px`).attr('y', `${12}px`).attr('dy', '1em').attr('font-size', '12px').attr('text-anchor', 'middle').text('°C');
+  const xTicks = xScale.ticks(10);
+  const xMiddleValue = xTicks[Math.floor(xTicks.length / 2)];
+  svg.append('g').attr('type', 'x-axis').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).tickValues(xTicks).tickSizeInner(0).tickSizeOuter(0));
+  // Reformat in the case of the middle tick label
+  // to add the unit part
+  svg.selectAll('g[type="x-axis"] .tick').filter(function () {
+    return parseInt(d3.select(this).select('text').text(), 10) === xMiddleValue;
+  }).each(function () {
+    const unitPart = '°C';
+    d3.select(this).select('text')
+    // tspan necessary to use a different font-size
+    .append('tspan').text(unitPart).attr('font-size', '11px').attr('dy', '0.04em');
+  });
   // Create y-axis with intervals
-  svg.append('g').call(d3.axisLeft(yScale).ticks(0, '')).append('text').attr('fill', '#000').attr('transform', 'translate(0)').attr('y', `${0}px`).attr('x', `${ -16}px`).attr('font-size', '12px').attr('dy', '1em').attr('text-anchor', 'middle').text('hPa');
+  // Make sure all zeroes are printed (1000 vs 1k)
+  const formatTicks = d3.format('.0f');
+  svg.append('g').call(d3.axisLeft(yScale).tickValues(isobarValues).tickFormat(formatTicks).tickSizeInner(0).tickSizeOuter(0)).call(g => g.select('.domain').remove()).append('text').attr('fill', 'currentColor').attr('x', '0').attr('y', yScale(400)).attr('font-size', '11px').attr('dy', '-0.9em').attr('text-anchor', 'left').text('hPa');
 };
 const addLegends = ({
   svg,
@@ -72,14 +167,595 @@ const plotSounding = ({
   height,
   svg
 }) => {
+  const [filteredPressureValues, filteredTemperatureValues] = filterDomainRangeForParameter(pressureValues, temperatureValues);
   // Map temp and pressure to pixels
-  const Px = d3.zip(pressureValues, temperatureValues).map(([pressure, temperature]) => [xScale(temperature), yScale(pressure)]);
+  const Px = d3.zip(filteredPressureValues, filteredTemperatureValues).map(([pressure, temperature]) => [xScale(temperature), yScale(pressure)]);
   // Skew/shear transformation for skew-t
   const skewedPx = Px.map(([x, y]) => [x + height - y, y]);
   const lineGenerator = d3.line();
   const pathString = lineGenerator(skewedPx);
   svg.append('path').attr('d', pathString).attr('x', 0).attr('y', 0).style('fill', 'none').style('stroke-width', 2).style('stroke', color).style('stroke-opacity', 1).style('stroke-dasharray', lineStyle).attr('clip-path', 'url(#clip-skewTd3)');
 };
+// Use this function to filter the pressure and parameter array so no NaN or null values are included
+const filterDomainRangeForParameter = (pressureDomain, parameterDomain) => {
+  const filteredPressureDomain = pressureDomain.filter((value, index) => !isNaN(parameterDomain[index]) && parameterDomain[index] !== null);
+  const filteredParameterDomain = parameterDomain.filter(value => !isNaN(value) && value !== null);
+  return [filteredPressureDomain, filteredParameterDomain];
+};
+
+/* *
+ * 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)
+ * */
+// Check if the value is outside the domain, if so, return NaN
+// Otherwise, return the interpolated value
+const createClampedInterpolationFunc = (interpolationFunc, domain) => {
+  return value => {
+    if (value < domain[domain.length - 1] || value > domain[0]) {
+      return NaN;
+    }
+    return interpolationFunc(value);
+  };
+};
+// Construct interpolation functions to use when hovering between data points
+// Ensure NaN/null values are removed and cut the domain to the upper and lower pressure bounds of the parameter
+const constructTooltipData = data => {
+  const tooltipData = data.map(features => {
+    const pressureData = features.map(feature => feature.properties.pressure);
+    const tempData = features.map(feature => feature.properties.temp);
+    const dewpointData = features.map(feature => feature.properties.dewpoint);
+    const windDirData = features.map(feature => feature.properties.windDirection);
+    const windSpeedData = features.map(feature => feature.properties.windSpeed);
+    const interpolatePressure = d3.scaleLinear().domain(pressureData).range(pressureData).clamp(true);
+    const [tempPressure, filteredTempData] = filterDomainRangeForParameter(pressureData, tempData);
+    const interpolateTemperature = d3.scaleLinear().domain(tempPressure).range(filteredTempData).clamp(true);
+    const [dewpointPressure, filteredDewpointData] = filterDomainRangeForParameter(pressureData, dewpointData);
+    const interpolateDewpoint = d3.scaleLinear().domain(dewpointPressure).range(filteredDewpointData).clamp(true);
+    const [windSpeedPressure, filteredWindSpeedData] = filterDomainRangeForParameter(pressureData, windSpeedData);
+    const interpolateWindSpeed = d3.scaleLinear().domain(windSpeedPressure).range(filteredWindSpeedData).clamp(true);
+    const [windDirPressure, filteredWindDirData] = filterDomainRangeForParameter(pressureData, windDirData);
+    const interpolateWindDirection = d3.scaleLinear().domain(windDirPressure).range(filteredWindDirData).clamp(true);
+    return {
+      pressureData,
+      interpolatePressure: createClampedInterpolationFunc(interpolatePressure, pressureData),
+      interpolateTemperature: createClampedInterpolationFunc(interpolateTemperature, tempPressure),
+      interpolateDewpoint: createClampedInterpolationFunc(interpolateDewpoint, dewpointPressure),
+      interpolateWindSpeed: createClampedInterpolationFunc(interpolateWindSpeed, windSpeedPressure),
+      interpolateWindDirection: createClampedInterpolationFunc(interpolateWindDirection, windDirPressure)
+    };
+  });
+  return tooltipData.filter(data => data.pressureData.length > 0);
+};
+const getParamHtml = (paramValue, colorIndex, unit, isLastElement, noDistance = false) => {
+  if (colorIndex === 0) {
+    return `<p style="${noDistance || isLastElement ? 'margin: 0;' : 'margin-top: 0;'} color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
+  }
+  if (isLastElement) {
+    return `<p style="${noDistance ? 'margin: 0;' : 'margin-bottom: 0;'}  color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}</p>`;
+  }
+  return `<p style="${noDistance ? 'margin: 0;' : 'margin-top: 0;'} color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
+};
+const drawSoundingsTooltip = ({
+  event,
+  yScale,
+  svgRectangle,
+  pressureRefd3,
+  tempRefd3,
+  dewpointRefd3,
+  windRefd3,
+  margin,
+  width,
+  tooltipData
+}) => {
+  if (tooltipData.length === 0) {
+    return;
+  }
+  const [, y] = d3.pointer(event);
+  const pressureY = event.clientY - svgRectangle.top - 10;
+  const pressure = yScale.invert(y);
+  const interpolatedData = tooltipData.map(dataSet => {
+    return {
+      hoveredPressure: dataSet.interpolatePressure(pressure),
+      hoveredTemp: dataSet.interpolateTemperature(pressure),
+      hoveredDewpoint: dataSet.interpolateDewpoint(pressure),
+      hoveredWindDirection: dataSet.interpolateWindDirection(pressure),
+      hoveredWindSpeed: dataSet.interpolateWindSpeed(pressure)
+    };
+  });
+  // Pressure
+  pressureRefd3.style('display', 'block').style('left', `${margin.left + margin.right + 4}px`) // 4 to move it slightly away from y-axis
+  .style('top', `${pressureY}px`).html(`${Math.round(pressure)}hPa`);
+  // Temperature
+  tempRefd3.style('display', 'block').style('left', `${0.75 * width + margin.left}px`).style('top', `${pressureY}px`).html(() => interpolatedData.map((dataSet, index) => {
+    return getParamHtml(dataSet.hoveredTemp, index, '°C', index === interpolatedData.length - 1);
+  }).join(''));
+  // Dewpoint temperature
+  dewpointRefd3.style('display', 'block').style('left', `${width / 3 + margin.left}px`).style('top', `${pressureY}px`).html(interpolatedData.map((dataSet, index) => {
+    return getParamHtml(dataSet.hoveredDewpoint, index, '°C', index === interpolatedData.length - 1);
+  }).join(''));
+  // Wind
+  windRefd3.style('display', 'block').style('left', `${width + margin.left + margin.right - 55}px`) // -55 to account for width of element
+  .style('top', `${pressureY}px`).html(() => {
+    const windSpeedStrings = interpolatedData.map((dataSet, index) => {
+      return getParamHtml(dataSet.hoveredWindSpeed, index, 'm/s', index === interpolatedData.length - 1, true);
+    });
+    const windDirStrings = interpolatedData.map((dataSet, index) => {
+      return getParamHtml(dataSet.hoveredWindDirection, index, '°', index === interpolatedData.length - 1, index === interpolatedData.length - 1);
+    });
+    return windSpeedStrings.map((windSpeedString, index) => {
+      return `${windSpeedString}${windDirStrings[index]}`;
+    }).join('');
+  });
+};
+
+/* *
+ * 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)
+ * */
+const windSymbolDefinitions = {
+  calm: `<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>
+`,
+  lightAir: `<svg width="14" height="48" viewBox="0 0 14 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.22656 4.89307V48.0001M7.22656 43.0262V44.6842" stroke="black" stroke-width="1.8"/>
+</svg>
+`,
+  fiveKnots: `<svg width="15" height="49" viewBox="0 0 15 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.26953 5.57324V48.608M8.26953 40.5757L0.269531 42.2309" stroke="black" stroke-width="1.8"/>
+</svg>`,
+  tenKnots: `<svg width="24" height="49" viewBox="0 0 24 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0781 4.64502V44.9031L1.07812 47.9999" stroke="black" stroke-width="1.8"/>
+</svg>`,
+  fifteenKnots: `<svg width="23" height="50" viewBox="0 0 23 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4727 5.55469V45.8128L0.472656 48.9095M16.4727 38.0708L9.61551 39.6192" stroke="black" stroke-width="1.8"/>
+</svg>
+`,
+  twentyKnots: `<svg width="24" height="49" viewBox="0 0 24 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8555 4.71924V44.9773L0.855469 48.0741M16.8555 38.4093L0.855469 41.5061" stroke="black" stroke-width="1.8"/>
+</svg>`,
+  twentyFiveKnots: `<svg width="23" height="51" viewBox="0 0 23 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>`,
+  thirtyKnots: `<svg width="23" height="50" viewBox="0 0 23 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>`,
+  thirtyFiveKnots: `<svg width="19" height="50" viewBox="0 0 19 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>`,
+  fortyKnots: `<svg width="24" height="50" viewBox="0 0 24 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>`,
+  fortyFiveKnots: `<svg width="23" height="50" viewBox="0 0 23 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>`,
+  fiftyKnots: `<svg width="24" height="49" viewBox="0 0 24 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9062 5.27002V45.5281L0.90625 48.6249L16.9062 37.7861" fill="black"/>
+<path d="M16.9053 5.27002V45.5281L4.35132 47.2337L16.9053 37.7861" stroke="black" stroke-width="1.8"/>
+</svg>
+`,
+  fiftyFiveKnots: `<svg width="24" height="49" viewBox="0 0 24 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.728 5.55371V45.8118L0.894531 48.9085L16.728 38.0698" fill="black"/>
+<path d="M16.73 5.55371V45.8118L4.33984 47.5245L16.73 38.0698" stroke="black" stroke-width="1.8"/>
+<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"/>
+</svg>`,
+  sixtyKnots: `<svg width="23" height="49" viewBox="0 0 23 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2891 5.27051V45.5286L0.289062 48.6253L16.2891 37.7866" fill="black"/>
+<path d="M16.2897 5.27051V45.5286L3.7422 47.2478L16.2897 37.7866" stroke="black" stroke-width="1.8"/>
+<path d="M16.2891 34.6899L0.289062 37.7867" stroke="black" stroke-width="1.8"/>
+</svg>`,
+  sixtyFiveKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<path d="M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842" stroke="black" stroke-width="1.8"/>
+<path d="M17 32.0788L1 35.1756M17 26.8862L9.5 28.5" stroke="black" stroke-width="1.8"/>
+</svg>`,
+  seventyKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<path d="M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842" stroke="black" stroke-width="1.8"/>
+<path d="M17 32.0788L1 35.1756M17 26.8862L1 29.983" stroke="black" stroke-width="1.8"/>
+</svg>`,
+  seventyFiveKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<path d="M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842" stroke="black" stroke-width="1.8"/>
+<path d="M17 32.0788L1 35.1756M17 26.8862L1 29.983" stroke="black" stroke-width="1.8"/>
+<path d="M16.9167 22C13.8251 22.6048 9 23.5484 9 23.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  eightyKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<path d="M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842" stroke="black" stroke-width="1.8"/>
+<path d="M17 32.0788L1 35.1756M17 26.8862L1 29.983" stroke="black" stroke-width="1.8"/>
+<path d="M17 22C10.7518 23.1718 1 25 1 25" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  eightyFiveKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<path d="M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842" stroke="black" stroke-width="1.8"/>
+<path d="M16.9167 17C13.8251 17.6048 9 18.5484 9 18.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 32.0788L1 35.1756M17 26.8862L1 29.983" stroke="black" stroke-width="1.8"/>
+<path d="M17 22C10.7518 23.1718 1 25 1 25" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>
+`,
+  ninetyKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<path d="M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842" stroke="black" stroke-width="1.8"/>
+<path d="M17 32.0788L1 35.1756M17 26.8862L1 29.983" stroke="black" stroke-width="1.8"/>
+<path d="M17 22C10.7518 23.1718 1 25 1 25" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 17C10.7518 18.1718 1 20 1 20" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>
+`,
+  ninetyFiveKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<path d="M16.9984 3.26807V43.5261L4.35938 45.2985L16.9984 35.7842" stroke="black" stroke-width="1.8"/>
+<path d="M17 32.0788L1 35.1756M17 26.8862L1 29.983" stroke="black" stroke-width="1.8"/>
+<path d="M17 22C10.7518 23.1718 1 25 1 25" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 17C10.7518 18.1718 1 20 1 20" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M16.9167 12C13.8251 12.6048 9 13.5484 9 13.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+</svg>
+`,
+  hundredFiveKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M16.9167 25C13.8251 25.6048 9 26.5484 9 26.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>
+`,
+  hundredTenKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M17 25C10.7518 26.1718 1 28 1 28" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredFifteenKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M17 25C10.7518 26.1718 1 28 1 28" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M16.9167 21C13.8251 21.6048 9 22.5484 9 22.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredTwentyKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M17 25C10.7518 26.1718 1 28 1 28" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 21C10.7518 22.1718 1 24 1 24" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredTwentyFiveKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M17 25C10.7518 26.1718 1 28 1 28" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 21C10.7518 22.1718 1 24 1 24" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M16.9167 17C13.8251 17.6048 9 18.5484 9 18.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>
+`,
+  hundredThirtyKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M17 25C10.7518 26.1718 1 28 1 28" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 21C10.7518 22.1718 1 24 1 24" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 17C10.7518 18.1718 1 20 1 20" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredThirtyFiveKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M17 25C10.7518 26.1718 1 28 1 28" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 21C10.7518 22.1718 1 24 1 24" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 17C10.7518 18.1718 1 20 1 20" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M16.9167 13C13.8251 13.6048 9 14.5484 9 14.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredFortyKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+<path d="M17 25C10.7518 26.1718 1 28 1 28" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 21C10.7518 22.1718 1 24 1 24" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 17C10.7518 18.1718 1 20 1 20" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 13C10.7518 14.1718 1 16 1 16" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredFortyFiveKnots: `<svg width="24" height="49" viewBox="0 0 24 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 5.26807V25.3971V45.5261L1 48.6229L17 37.7842" fill="black"/>
+<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"/>
+<path d="M16.9167 12C13.8251 12.6048 9 13.5484 9 13.5484" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 27C10.7518 28.1718 1 30 1 30" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 23C10.7518 24.1718 1 26 1 26" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 19C10.7518 20.1718 1 22 1 22" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+<path d="M17 15C10.7518 16.1718 1 18 1 18" stroke="black" stroke-width="1.8" stroke-miterlimit="16"/>
+</svg>`,
+  hundredFiftyKnots: `<svg width="24" height="47" viewBox="0 0 24 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.26807V23.3971V43.5261L1 46.6229L17 35.7842" fill="black"/>
+<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"/>
+</svg>`
+};
+const 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)
+ * */
+const metersPerSecondToKnots = metersPerSecond => metersPerSecond * 1.94384;
+const extendIsoBar = (path, horizontalBarbMargin) => {
+  const match = path.match(/^M([\d.-]+),([\d.-]+)\s*L([\d.-]+),([\d.-]+)/);
+  if (match) {
+    const startX = parseFloat(match[1]);
+    const startY = parseFloat(match[2]);
+    const endX = parseFloat(match[3]);
+    const endY = parseFloat(match[4]);
+    return `M${startX},${startY}L${endX + horizontalBarbMargin * 3},${endY}`;
+  }
+  return path;
+};
+const extendXAxis = (path, horizontalBarbMargin) => {
+  const match = path.match(/^M([\d.-]+),([\d.-]+)H([\d.-]+)/);
+  if (match) {
+    const endX = parseFloat(match[3]);
+    return path.replace(/H[\d.-]+/, `H${endX + horizontalBarbMargin * 3}`);
+  }
+  return path;
+};
+const drawWindBarbs = ({
+  svgRef,
+  data,
+  width,
+  height,
+  margin,
+  minPressure,
+  maxPressure,
+  barbColor = 'black'
+}) => {
+  const barbsSize = 25;
+  const scalingFactor = 0.5;
+  const horizontalBarbMargin = barbsSize * scalingFactor;
+  const visibleItems = removeItemsExponential(data.reverse()).filter(item => item.pressure >= 150);
+  // Measure width and height and make extra room for one column
+  // of windbarbs
+  const svg = d3.select(svgRef.current);
+  const currentWidth = svg.node()?.getBoundingClientRect().width;
+  if (!currentWidth) {
+    return;
+  }
+  // Add extra width to all isobars needed for the windbarbs
+  d3.selectAll('path[type="isobar"]').each(function () {
+    const path = d3.select(this).attr('d');
+    const newD = extendIsoBar(path, horizontalBarbMargin);
+    d3.select(this).attr('d', newD).attr('clip-path', null);
+  });
+  // Add extra width to x-axis needed for the windbarbs
+  d3.select('g[type="x-axis"] path.domain').each(function () {
+    const path = d3.select(this).attr('d');
+    const newD = extendXAxis(path, horizontalBarbMargin);
+    d3.select(this).attr('d', newD);
+  });
+  svg.attr('width', currentWidth + margin.left + horizontalBarbMargin);
+  const pressureScale = d3.scaleLog().domain([maxPressure, minPressure]).range([height, 0]).clamp(true);
+  const barbGroup = svg.append('g').attr('class', 'wind-group').attr('transform',
+  // This translation should be revisited when implementing
+  // the plotting of several datasets at once
+  `translate(${(currentWidth ?? width) + horizontalBarbMargin}, ${margin.top})`);
+  barbGroup.selectAll('g').data(visibleItems).enter().append('g').attr('id', 'wind-barb').each(function handleBarb(data) {
+    const group = d3.select(this);
+    const windSymbol = getWindSymbol(data.windSpeed);
+    if (windSymbol) {
+      // Inner group will have rotation and scaling applied to it
+      const innerGroup = group.append('g');
+      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 () {
+        const el = d3.select(this);
+        const currentFill = el.attr('fill');
+        if (currentFill && currentFill !== 'none') {
+          el.attr('fill', barbColor);
+        }
+      });
+      const bbox = windSymbol.getBBox();
+      // Central point
+      const cx = bbox.x + bbox.width / 2;
+      const cy = bbox.y + bbox.height / 2;
+      const rotation = 180 + data.windDirection;
+      const y = pressureScale(data.pressure);
+      // Place items in the correct vertical position
+      // Correcting for barbSize
+      group.attr('transform', `translate(0, ${y - barbsSize * scalingFactor / 8})`);
+      // Rotate accordingly, and scale
+      innerGroup.attr('transform', `rotate(${rotation}) scale(${scalingFactor}) translate(${-cx}, ${-cy})`);
+    }
+  });
+};
+const removeItemsExponential = array => {
+  const base = 1.15;
+  const indicesToKeep = [];
+  let i = 0;
+  let nextIndex = 0;
+  while (nextIndex < array.length) {
+    nextIndex = Math.floor(base ** i);
+    indicesToKeep.push(nextIndex);
+    i += 1;
+  }
+  return array.filter((_, index) => indicesToKeep.includes(index));
+};
+const getWindSymbol = value => {
+  const valueKts = metersPerSecondToKnots(value);
+  const matchedRange = windSpeedRanges.find(({
+    min,
+    max
+  }) => valueKts >= min && valueKts < max);
+  // Out of range
+  if (!matchedRange) {
+    return null;
+  }
+  // SVG string to actual SVG element
+  const parser = new DOMParser();
+  const svgDoc = parser.parseFromString(matchedRange.symbol, 'image/svg+xml');
+  const svgNode = svgDoc.documentElement;
+  // Return the parsed SVG node
+  return svgNode;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -133,48 +809,6 @@ const drawDryAdiabats = ({
   }
 };
 
-/* *
- * 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)
- * */
-const isobarValues = [200, 300, 400, 500, 700, 850, 925, 1000];
-const drawIsobars = ({
-  minTemperature,
-  maxTemperature,
-  xScale,
-  yScale,
-  svg
-}) => {
-  // Calculate X and Y coordinates for each pressure level
-  for (const pressureVal of isobarValues) {
-    const Px = [];
-    const tempBounds = [minTemperature, maxTemperature];
-    const Ppx = yScale(pressureVal);
-    for (const bound of tempBounds) {
-      Px.push([xScale(bound), yScale(pressureVal)]);
-    }
-    const lineGenerator = d3.line();
-    const isoPathString = lineGenerator(Px);
-    const strID = `${pressureVal}textId`;
-    svg.append('path').attr('id', strID).attr('d', isoPathString).style('fill', 'none').style('stroke-width', 1.5).style('stroke', '#B5B51F').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
-    svg.append('text').text(pressureVal).attr('text-anchor', 'middle').attr('x', `${ -24}px`).attr('y', Ppx + 5) // Y-coordinate of the label
-    .attr('fill', '#000').attr('font-size', '12px');
-  }
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -428,14 +1062,58 @@ const drawStaticLines = ({
   });
 };
 
-const Soundings = ({
-  data: {
-    features
+const 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)';
+const soundingsStyle = {
+  tooltip: {
+    display: 'block',
+    position: 'absolute',
+    borderRadius: '1.5px',
+    backgroundColor: 'geowebColors.soundings.tooltip.background',
+    boxShadow: shadow,
+    padding: '2px 4px',
+    pointerEvents: 'none',
+    zIndex: 500
+  },
+  pressure: {
+    fontSize: '10px'
+  },
+  temperature: {
+    fontSize: '12px',
+    fontWeight: 'bold'
+  },
+  dewPoint: {
+    fontSize: '12px',
+    fontWeight: 'bold'
   },
-  svgDimensions
-  // tooltip
+  wind: {
+    fontSize: '12px',
+    fontWeight: 'bold'
+  }
+};
+// Define pressure and temperature values for static lines
+const maxPressure = 1050;
+const minPressure = 150;
+const staticPressureArray = [maxPressure];
+const dp = -5;
+const minTemperature = -40;
+const maxTemperature = 40.6;
+let pressure = maxPressure;
+while (pressure > minPressure) {
+  pressure += dp;
+  staticPressureArray.push(pressure);
+}
+const Soundings = ({
+  data,
+  svgDimensions,
+  showTooltip = true
 }) => {
   const svgRef = useRef(null);
+  const canvasRef = useRef(null);
+  const pressureRef = useRef(null);
+  const tempRef = useRef(null);
+  const dewpointRef = useRef(null);
+  const windRef = useRef(null);
+  // set default values
   const svgDimensionsOptions = {
     width: svgDimensions?.width || 812,
     height: svgDimensions?.height || 802,
@@ -447,12 +1125,7 @@ const Soundings = ({
     }
   };
   // Set SVG dimensions
-  const margin = {
-    top: svgDimensionsOptions?.margin?.top,
-    right: svgDimensionsOptions?.margin?.right,
-    bottom: svgDimensionsOptions?.margin?.bottom,
-    left: svgDimensionsOptions?.margin?.left
-  };
+  const margin = svgDimensionsOptions?.margin;
   const baseWidth = svgDimensionsOptions?.width;
   const baseHeight = svgDimensionsOptions?.height;
   const width = baseWidth - (margin.left + margin.right);
@@ -468,18 +1141,7 @@ const Soundings = ({
       height,
       margin
     });
-    // Define pressure and temperature values for static lines
-    const maxPressure = 1050;
-    const minPressure = 150;
-    const staticPressureArray = [maxPressure];
-    const dp = -5;
-    const minTemperature = -40;
-    const maxTemperature = 40;
-    let pressure = maxPressure;
-    while (pressure > minPressure) {
-      pressure += dp;
-      staticPressureArray.push(pressure);
-    }
+    const svgRectangle = svgRef.current.getBoundingClientRect();
     // Set scales for temperature and pressure
     const xScale = d3.scaleLinear().domain([minTemperature, maxTemperature]).range([0, width]);
     const yScale = d3.scaleLog().domain([maxPressure, minPressure]).range([height, 0]);
@@ -488,8 +1150,7 @@ const Soundings = ({
       svg,
       xScale,
       yScale,
-      height,
-      width
+      height
     });
     // Draw static lines
     drawStaticLines({
@@ -510,42 +1171,157 @@ const Soundings = ({
       svg,
       width
     });
-    const temperatureValues = features.map(feature => feature.properties.temp);
-    const pressureValues = features.map(feature => feature.properties.pressure);
-    // Draw Temperature
-    plotSounding({
-      temperatureValues,
-      pressureValues,
-      color: SOUNDING_COLORS[0],
-      lineStyle: 'none',
-      xScale,
-      yScale,
-      height,
-      svg
-    });
-    const dewpointValues = features.map(feature => feature.properties.dewpoint);
-    // Dewpoint
-    plotSounding({
-      temperatureValues: dewpointValues,
-      color: SOUNDING_COLORS[0],
-      pressureValues,
-      lineStyle: '8, 2',
-      xScale,
-      yScale,
-      height,
-      svg
+    data.forEach((features, index) => {
+      const color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
+      const temperatureValues = features.map(feature => feature.properties.temp);
+      const pressureValues = features.map(feature => feature.properties.pressure);
+      // Draw Temperature
+      plotSounding({
+        temperatureValues,
+        pressureValues,
+        color,
+        lineStyle: 'none',
+        xScale,
+        yScale,
+        height,
+        svg
+      });
+      const dewpointValues = features.map(feature => feature.properties.dewpoint);
+      // Dewpoint
+      plotSounding({
+        temperatureValues: dewpointValues,
+        color,
+        pressureValues,
+        lineStyle: '8, 2',
+        xScale,
+        yScale,
+        height,
+        svg
+      });
+      const windData = features.map(feature => ({
+        windDirection: feature.properties.windDirection,
+        windSpeed: feature.properties.windSpeed,
+        pressure: feature.properties.pressure
+      }));
+      drawWindBarbs({
+        svgRef,
+        data: windData,
+        width,
+        height,
+        margin,
+        minPressure,
+        maxPressure,
+        barbColor: color
+      });
     });
+    // Attach mousemove event listener to update current coordinates
+    if (showTooltip) {
+      const pressureRefd3 = d3.select(pressureRef.current);
+      const tempRefd3 = d3.select(tempRef.current);
+      const dewpointRefd3 = d3.select(dewpointRef.current);
+      const windRefd3 = d3.select(windRef.current);
+      const tooltipData = constructTooltipData(data);
+      svg.on('mousemove', event => {
+        drawSoundingsTooltip({
+          event,
+          yScale,
+          svgRectangle,
+          margin,
+          width,
+          pressureRefd3,
+          tempRefd3,
+          dewpointRefd3,
+          windRefd3,
+          tooltipData
+        });
+      });
+    }
+    const svgRefCur = svgRef.current;
     // eslint-disable-next-line consistent-return
     return () => {
+      d3.select(svgRefCur).selectAll('.wind-group').remove();
       svg.selectAll('*').remove();
-      // svg.on('mousemove', null)
+      svg.on('mousemove', null);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showTooltip, data]);
+  useEffect(() => {
+    const handleMouseLeave = () => {
+      if (pressureRef.current) {
+        pressureRef.current.style.display = 'none';
+      }
+      if (tempRef.current) {
+        tempRef.current.style.display = 'none';
+      }
+      if (dewpointRef.current) {
+        dewpointRef.current.style.display = 'none';
+      }
+      if (windRef.current) {
+        windRef.current.style.display = 'none';
+      }
+    };
+    const canvasElement = canvasRef.current;
+    if (canvasElement) {
+      canvasElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+    return () => {
+      if (canvasElement) {
+        canvasElement.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
   }, []);
-  return jsx(Card, {
-    children: jsx("svg", {
+  useEffect(() => {
+    // Reset the tooltips when filteredData changes
+    if (pressureRef.current) {
+      pressureRef.current.style.display = 'none';
+    }
+    if (tempRef.current) {
+      tempRef.current.style.display = 'none';
+    }
+    if (dewpointRef.current) {
+      dewpointRef.current.style.display = 'none';
+    }
+    if (windRef.current) {
+      windRef.current.style.display = 'none';
+    }
+  }, [data]);
+  return jsxs(Card, {
+    ref: canvasRef,
+    sx: {
+      position: 'relative',
+      paddingBottom: '20px'
+    },
+    children: [jsx("svg", {
       ref: svgRef
-    })
+    }), jsx(Box, {
+      ref: pressureRef,
+      sx: {
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.pressure
+      },
+      "data-testid": "pressure-tooltip"
+    }), jsx(Box, {
+      ref: tempRef,
+      sx: {
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.temperature
+      },
+      "data-testid": "temperature-tooltip"
+    }), jsx(Box, {
+      ref: dewpointRef,
+      sx: {
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.dewPoint
+      },
+      "data-testid": "dewpoint-tooltip"
+    }), jsx(Box, {
+      ref: windRef,
+      sx: {
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.wind
+      },
+      "data-testid": "wind-tooltip"
+    })]
   });
 };
 
@@ -562,104 +1338,720 @@ const Soundings = ({
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const SOUNDINGS_NAMESPACE = 'soundings';
-const useSoundingsTranslation = () => useTranslation(SOUNDINGS_NAMESPACE);
+const BASE_URL = 'https://opendata.fmi.fi/edr';
+const getCollectionLocations = collectionId => fetch(`${BASE_URL}/collections/${collectionId}/locations`, {
+  headers: getHeaders()
+}).then(handleResponse);
+const getCollectionInstance = collectionId => fetch(`${BASE_URL}/collections/${collectionId}/instances`, {
+  headers: getHeaders()
+}).then(handleResponse);
+const getEdrCollectionForLocation = (collectionId, instanceId, locationId, parameters, datetime) => {
+  const url = new URL(`${BASE_URL}/collections/${collectionId}${instanceId ? `/instances/${instanceId}` : ''}/locations/${locationId}`);
+  url.searchParams.append('parameter-name', parameters.join(','));
+  url.searchParams.append('datetime', datetime);
+  url.searchParams.append('f', 'CoverageJSON');
+  return fetch(url.toString(), {
+    headers: getHeaders()
+  }).then(handleResponse);
+};
+const getEdrCollectionForPosition = (collectionId, instanceId, coordinates, parameters, datetime) => {
+  const url = new URL(`${BASE_URL}/collections/${collectionId}${instanceId ? `/instances/${instanceId}` : ''}/position`);
+  url.searchParams.append('coords', `POINT(${coordinates[0]} ${coordinates[1]})`);
+  url.searchParams.append('parameter-name', parameters.join(','));
+  url.searchParams.append('datetime', datetime);
+  url.searchParams.append('f', 'CoverageJSON');
+  return fetch(url.toString(), {
+    headers: getHeaders()
+  }).then(handleResponse);
+};
 
-const SoundingsSourceMenu = ({
-  soundingsCollections,
-  isOpen = false,
-  handleClose
-}) => {
-  const {
-    t
-  } = useSoundingsTranslation();
-  const [currentSelection, setCurrentSelection] = React.useState({});
-  React.useEffect(() => {
-    const initialSelection = {};
-    soundingsCollections?.forEach(collection => {
-      const initialInstanceId = collection.instances.length > 0 ? collection.instances[0].id : undefined;
-      initialSelection[collection.id] = {
-        isChecked: false,
-        selectedInstanceId: initialInstanceId
-      };
-    });
-    setCurrentSelection(initialSelection);
-  }, [soundingsCollections]);
-  // TODO move to redux
-  const handleSelectionChange = (collectionId, update) => {
-    setCurrentSelection(prev => {
-      const currentCollectionState = prev[collectionId] || {};
-      return {
-        ...prev,
-        [collectionId]: {
-          ...currentCollectionState,
-          ...update
+/* *
+ * 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)
+ * */
+const epsilon = 0.622; // Ratio of molecular weights of water vapour and dry air
+const e0 = 611.2; // Reference vapor pressure [Pa]
+const aConstant = 17.67;
+const bConstant = 243.5; // Constants for water, b in Celsius
+const tKelvinOffset = 273.15; // To convert Celsius to Kelvin
+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]
+// Formula to use when dewpoint is not available
+// Known as Magnus Formula
+// - Calculate vapor pressure
+// - Use inverse of the Clausius-Clapeyron equation
+function dewpointFromSpecificHumidity(specificHumidity,
+// specific humidity [kg/kg]
+pressure) {
+  // Step 1: Calculate vapor pressure (Pa)
+  const vaporPressure = specificHumidity * pressure / (epsilon + (1 - epsilon) * specificHumidity);
+  // Step 2: Calculate dew point in Celsius
+  const lnRatio = Math.log(vaporPressure / e0);
+  const dewpoint = bConstant * lnRatio / (aConstant - lnRatio);
+  return dewpoint; // dew point in Celsius
+}
+// Formula to use when dewpoint is not available
+function dewpointFromRelativeHumidity(tCelsius,
+// air temperature [°C]
+relHumidity) {
+  // Convert to Kelvin
+  const tKelvin = tCelsius + tKelvinOffset;
+  // Calculate dewpoint
+  const dewpoint = tKelvin / (1 - tKelvin * Math.log(relHumidity * 0.01) * gConstant / hConstant);
+  return dewpoint;
+}
+// Parsing and conversion function
+function parseCoverageCollection(response) {
+  const features = [];
+  const {
+    t: tAxis,
+    x: xAxis,
+    y: yAxis,
+    z: zAxis
+  } = response.coverages[0]?.domain.axes || {};
+  if (!tAxis?.values || !xAxis?.values || !yAxis?.values || !zAxis?.values) {
+    return features;
+  }
+  response.coverages.forEach(coverage => {
+    const {
+      ranges
+    } = coverage;
+    const time = coverage.domain.axes.t?.values[0];
+    const xCoord = coverage.domain.axes.x.values[0];
+    const yCoord = coverage.domain.axes.y.values[0];
+    const zValues = coverage.domain.axes.z.values;
+    zValues.forEach((_, zIndex) => {
+      const temp = parseFloat(ranges.temperature?.values[zIndex]);
+      const windums = parseFloat(ranges.windums?.values[zIndex]);
+      const windvms = parseFloat(ranges.windvms?.values[zIndex]);
+      let dewpoint = parseFloat(ranges.dewpoint?.values[zIndex]);
+      const relativeHumidity = parseFloat(ranges.relativehumidity?.values[zIndex]);
+      const specificHumidity = parseFloat(ranges.specifichumidity?.values[zIndex]);
+      let windSpeed = parseFloat(ranges.windSpeed?.values[zIndex]);
+      // Fallback calculations
+      if (Number.isNaN(windSpeed) && !Number.isNaN(windums) && !Number.isNaN(windvms)) {
+        // Fallback calculation
+        windSpeed = Math.sqrt(windums ** 2 + windvms ** 2);
+      }
+      let windDirection = parseFloat(ranges.windDirection?.values[zIndex]);
+      if (Number.isNaN(windDirection) && !Number.isNaN(windums) && !Number.isNaN(windvms)) {
+        // Fallback calculation
+        windDirection = (Math.atan2(-windums, -windvms) * (180 / Math.PI) + 360) % 360;
+      }
+      const pressureFromRange = parseFloat(ranges.pressure?.values[zIndex]);
+      const pressure = !Number.isNaN(pressureFromRange) ? pressureFromRange : parseFloat(zValues[zIndex]);
+      if (dewpoint === null || Number.isNaN(dewpoint)) {
+        // Use dewpoint fallback calculations if not present
+        if (!Number.isNaN(specificHumidity)) {
+          dewpoint = dewpointFromSpecificHumidity(specificHumidity / 1000,
+          // from g/kg to kg/kg
+          pressure * 100);
+        } else if (!Number.isNaN(relativeHumidity)) {
+          dewpoint = dewpointFromRelativeHumidity(temp, relativeHumidity);
         }
-      };
+      }
+      features.push({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [xCoord, yCoord]
+        },
+        properties: {
+          time,
+          temp,
+          dewpoint,
+          pressure,
+          windSpeed,
+          windDirection
+        }
+      });
     });
+  });
+  return features;
+}
+
+/* *
+ * 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)
+ * */
+const sortSoundingFeatures = data => {
+  return data.sort((featureA, featureB) => {
+    // Sort by date (ascending)
+    if (featureA.properties.time !== featureB.properties.time) {
+      return featureA.properties.time > featureB.properties.time ? 1 : -1;
+    }
+    // Sort by pressure (descending)
+    return featureB.properties.pressure - featureA.properties.pressure;
+  });
+};
+const constructQueryParams = (collectionId, instanceId, location, datetime, parameters) => {
+  if (typeof location === 'string') {
+    // LOCATION call
+    return {
+      queryKey: ['edr-soundings-for-location', collectionId, instanceId || '', location, parameters.join(), datetime],
+      queryFn: async () => {
+        // No collection or location selected, don't do EDR call but return empty array
+        if (collectionId === undefined || location === '') {
+          return [];
+        }
+        try {
+          const rawData = await getEdrCollectionForLocation(collectionId, instanceId, location, parameters, datetime);
+          const parsedData = parseCoverageCollection(rawData);
+          return sortSoundingFeatures(parsedData);
+        } catch (err) {
+          throw new Error('Error fetching EDR data collection by location');
+        }
+      }
+    };
+  }
+  // POSITION call
+  return {
+    queryKey: ['edr-soundings-for-position', collectionId, location.join(), parameters.join(), datetime],
+    queryFn: async () => {
+      // No collection or position selected, don't do EDR call but return empty array
+      if (collectionId === undefined || location === undefined) {
+        return [];
+      }
+      try {
+        const rawData = await getEdrCollectionForPosition(collectionId, instanceId, location, parameters, datetime);
+        const parsedData = parseCoverageCollection(rawData);
+        return sortSoundingFeatures(parsedData);
+      } catch (err) {
+        throw new Error('Error fetching EDR data collection by position');
+      }
+    }
   };
-  const getDisplayValue = (collection, instanceId) => {
-    if (!instanceId) {
-      return jsx(Fragment, {
-        children: t('noInstancesAvailable')
+};
+const useFakeTime = (collectionId, instanceId) => {
+  return useQuery({
+    queryKey: ['temporary-instance-call', collectionId, instanceId],
+    queryFn: async () => {
+      return fetch(`https://opendata.fmi.fi/edr/collections/${collectionId}/instances/${instanceId}`, {
+        headers: getHeaders()
+      }).then(handleResponse).then(data => collectionId === undefined || data === undefined ? '' : data.extent.temporal.interval[0][0]);
+    },
+    enabled: !!collectionId && !!instanceId
+  });
+};
+const parameters = ['temperature', 'WindDirection', 'WindSpeedMS', 'windUMS', 'windVMS', 'Pressure', 'DewPoint', 'humidity', 'specifichumidity'];
+const useMultipleSources = (sources, locations, datetime) => {
+  // TODO: Remove once we pass in the datetime coming from the timeslider!
+  const {
+    data: date0
+  } = useFakeTime(sources[0]?.collectionId, sources[0]?.instanceId);
+  const {
+    data: date1
+  } = useFakeTime(sources[1]?.collectionId, sources[1]?.instanceId);
+  const {
+    data: date2
+  } = useFakeTime(sources[2]?.collectionId, sources[2]?.instanceId);
+  const dates = useMemo(() => [date0, date1, date2], [date0, date1, date2]);
+  const queries = useMemo(() => sources.map(({
+    collectionId,
+    instanceId
+  }, index) => {
+    const queryParams = constructQueryParams(collectionId, instanceId, locations[collectionId] || '', dates[index] || '', parameters);
+    return queryParams;
+  }), [dates, datetime, locations, sources]);
+  return useQueries({
+    queries,
+    combine: queryResults => {
+      const data = queryResults.map(result => {
+        return result.data || [];
       });
+      const isPending = queryResults.some(result => result.isPending);
+      const error = queryResults.find(result => result?.error)?.error;
+      return {
+        data,
+        isPending,
+        error
+      };
     }
-    const instanceIndex = collection.instances.findIndex(i => i.id === instanceId);
-    if (instanceIndex === 0) {
-      return jsxs(Box, {
-        display: "flex",
-        children: [jsx(Box, {
-          sx: {
-            minWidth: 200
-          },
-          children: collection.name
-        }), jsx(Box, {
-          sx: {
-            textOverflow: 'ellipsis',
-            overflow: 'hidden'
-          },
-          children: t('latest')
-        })]
+  });
+};
+const useGetCollectionsInstances = (collections, isDialogOpen) => {
+  const collectionIds = useMemo(() => collections?.map(collection => collection.id) || [], [collections]);
+  const queries = useMemo(() => collectionIds.map(id => {
+    return {
+      queryKey: ['edr-soundings-instances', id],
+      queryFn: async () => {
+        const data = await getCollectionInstance(id);
+        return data;
+      },
+      enabled: isDialogOpen
+    };
+  }), [collectionIds, isDialogOpen]);
+  const results = useQueries({
+    queries,
+    combine: queryResults => {
+      const data = queryResults.map(result => {
+        const instances = result.data?.instances.sort((featureA, featureB) => featureB.id.localeCompare(featureA.id)) || []; // Sort to get latest first
+        return instances;
       });
+      const isPending = queryResults.some(result => result.isPending);
+      const error = queryResults.find(result => result?.error)?.error;
+      return {
+        data,
+        isPending,
+        error
+      };
     }
-    return jsxs(Box, {
-      display: "flex",
-      children: [jsx(Box, {
-        sx: {
-          minWidth: 200
-        },
-        children: collection.name
-      }), jsx(Box, {
+  });
+  const dataWithCollectionInfo = collections?.map((collection, index) => {
+    return {
+      ...collection,
+      instances: results.data[index] || []
+    };
+  });
+  return {
+    ...results,
+    data: dataWithCollectionInfo
+  };
+};
+
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const SOUNDINGS_NAMESPACE = 'soundings';
+const initSoundingsI18n = () => {
+  safelyInitI18nForTestsAndStories(i18n, SOUNDINGS_NAMESPACE, [{
+    ns: SOUNDINGS_NAMESPACE,
+    translations: soundingsTranslations
+  }, {
+    ns: TIMESLIDER_NAMESPACE,
+    translations: timesliderTranslations
+  }, {
+    ns: SHARED_NAMESPACE,
+    translations: sharedTranslations
+  }]);
+};
+const ns = [SOUNDINGS_NAMESPACE, TIMESLIDER_NAMESPACE, SHARED_NAMESPACE];
+const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
+  ns,
+  ...params
+});
+const useSoundingsTranslation = () => useTranslation(ns);
+
+const SoundingsTimeSlider = ({
+  timesteps,
+  selectedTime,
+  updateSelectedTime
+}) => {
+  const {
+    i18n
+  } = useSoundingsTranslation();
+  const marks = timesteps.filter(date => dateUtils.isValidIsoDateString(date)).map(date => ({
+    value: dateUtils.unix(dateUtils.getUtcFromString(date)),
+    label: dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
+  }));
+  const onStepBackward = React.useCallback(() => {
+    const currentIndex = timesteps.indexOf(selectedTime);
+    const precedingIndex = Math.max(currentIndex - 1, 0);
+    updateSelectedTime(timesteps[precedingIndex]);
+  }, [selectedTime, updateSelectedTime, timesteps]);
+  const onStepForward = React.useCallback(() => {
+    const currentIndex = timesteps.indexOf(selectedTime);
+    const followingIndex = Math.min(currentIndex + 1, timesteps.length - 1);
+    updateSelectedTime(timesteps[followingIndex]);
+  }, [selectedTime, updateSelectedTime, timesteps]);
+  return jsxs("div", {
+    style: {
+      display: 'flex',
+      marginTop: '17px'
+    },
+    children: [jsxs("div", {
+      style: {
+        minWidth: '60px',
+        marginTop: '2px'
+      },
+      children: [jsx(BackwardForwardStepButton, {
+        isForwardStep: false,
+        onClickBFButton: onStepBackward,
+        isDisabled: marks.length === 0
+      }), jsx(BackwardForwardStepButton, {
+        isForwardStep: true,
+        onClickBFButton: onStepForward,
+        isDisabled: marks.length === 0
+      })]
+    }), marks.length === 0 ? jsx(CustomSlider, {
+      min: 0,
+      max: 1,
+      value: 0.5,
+      orientation: "horizontal",
+      disabled: true
+    }) : jsx(CustomSlider, {
+      orientation: "horizontal",
+      valueLabelDisplay: "auto",
+      valueLabelFormat: value => dateUtils.dateToString(dateUtils.fromUnix(value), "yyyy iii dd MMM HH:mm 'UTC'", true, i18n.language),
+      marks: marks,
+      step: null,
+      min: marks[0].value,
+      max: marks[marks.length - 1].value,
+      value: dateUtils.unix(dateUtils.getUtcFromString(selectedTime)),
+      onChange: (_, value) => {
+        updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+      },
+      extraStyles: {
+        margin: '0px 20px 0px 20px',
+        '.MuiSlider-markLabel': {
+          rotate: '-45deg',
+          translate: '-41%'
+        }
+      }
+    })]
+  });
+};
+
+/* *
+ * 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)
+ * */
+const initialSoundingsState = {
+  selectedSources: {},
+  selectedLocations: {},
+  selectedTime: new Date().toISOString()
+};
+const slice = createSlice({
+  initialState: initialSoundingsState,
+  name: 'soundings',
+  reducers: {
+    updateSelectedSource: (draft, payloadAction) => {
+      const {
+        sourceId,
+        value
+      } = payloadAction.payload;
+      draft.selectedSources[sourceId] = {
+        ...draft.selectedSources[sourceId],
+        ...value
+      };
+    },
+    updateSelectedLocation: (draft, payloadAction) => {
+      const {
+        sourceId,
+        locationId
+      } = payloadAction.payload;
+      draft.selectedLocations[sourceId] = locationId;
+    },
+    updateSelectedTime: (draft, payloadAction) => {
+      const {
+        selectedTime
+      } = payloadAction.payload;
+      draft.selectedTime = selectedTime;
+    }
+  }
+});
+const {
+  reducer: soundingsReducer,
+  actions: soundingsActions
+} = slice;
+
+/* *
+ * 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)
+ * */
+const getSoundingsStore = store => store?.soundings || initialSoundingsState;
+const getSourceSelections = createSelector(getSoundingsStore, store => {
+  return store.selectedSources;
+}, selectorMemoizationOptions);
+const getLocationSelections = createSelector(getSoundingsStore, store => store.selectedLocations, selectorMemoizationOptions);
+const getSelectedTime = createSelector(getSoundingsStore, store => store.selectedTime, selectorMemoizationOptions);
+const getSelectedSources = createSelector(getSoundingsStore, store => {
+  const sources = store.selectedSources;
+  const activeSources = Object.keys(sources).reduce((list, key) => {
+    const value = sources[key];
+    if (value.isChecked === true) {
+      return list.concat({
+        collectionId: key,
+        instanceId: value.instanceId
+      });
+    }
+    return list;
+  }, []);
+  return activeSources;
+}, selectorMemoizationOptions);
+const getSelectedSourcesAmount = createSelector(getSelectedSources, activeSources => {
+  return activeSources.length;
+}, selectorMemoizationOptions);
+
+const SoundingsTimeSliderConnect = ({
+  timesteps
+}) => {
+  const selectedTime = useSelector(getSelectedTime);
+  const dispatch = useDispatch();
+  const updateSelectedTime = React.useCallback(selectedTime => {
+    dispatch(soundingsActions.updateSelectedTime({
+      selectedTime
+    }));
+  }, [dispatch]);
+  return jsx(SoundingsTimeSlider, {
+    timesteps: timesteps,
+    selectedTime: selectedTime,
+    updateSelectedTime: updateSelectedTime
+  });
+};
+
+var MenuOptions;
+(function (MenuOptions) {
+  MenuOptions["sources"] = "sources";
+  MenuOptions["locations"] = "locations";
+})(MenuOptions || (MenuOptions = {}));
+const buttonStyle = {
+  height: '10px !important',
+  width: '130px'
+};
+const SoundingsMenuBar = ({
+  handleClick,
+  isOpen,
+  selectedSourcesAmount = 0
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  return jsxs(Stack, {
+    direction: "row",
+    spacing: 1,
+    sx: {
+      marginBottom: '4px'
+    },
+    children: [jsxs(CustomToggleButton, {
+      variant: "tool",
+      selected: isOpen[MenuOptions.sources],
+      "data-testid": "soundingsSourcesButton",
+      onClick: () => handleClick(MenuOptions.sources),
+      size: "small",
+      sx: buttonStyle,
+      children: [jsx(Sources, {
         sx: {
-          textOverflow: 'ellipsis',
-          overflow: 'hidden'
-        },
-        children: dateUtils.dateToIsoString(dateUtils.isoStringToDate(instanceId))
+          marginRight: '4px!important'
+        }
+      }), selectedSourcesAmount ? `${t('sources')} (${selectedSourcesAmount})` : t('sources')]
+    }), jsx(CustomToggleButton, {
+      variant: "tool",
+      "data-testid": "soundingsLocationsButton",
+      selected: isOpen[MenuOptions.locations],
+      onClick: () => handleClick(MenuOptions.locations),
+      size: "small",
+      sx: buttonStyle,
+      children: t('locations')
+    })]
+  });
+};
+
+const MenuBarConnect = ({
+  viewId,
+  source
+}) => {
+  const dispatch = useDispatch();
+  const currentActiveMapIdSources = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsSources));
+  const currentActiveMapIdLocations = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsLocations));
+  const isSourcesOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsSources));
+  const isLocationsOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsLocations));
+  const sourcesAmount = useSelector(getSelectedSourcesAmount);
+  const dispatchActiveMapId = React.useCallback((dialogType, isOpen, activeMapId) => void dispatch(uiActions.setActiveMapIdForDialog({
+    type: dialogType,
+    mapId: viewId,
+    setOpen: activeMapId !== viewId ? true : !isOpen,
+    source
+  })), [dispatch, viewId, source]);
+  const handleClick = React.useCallback(menuType => {
+    switch (menuType) {
+      case MenuOptions.sources:
+        dispatchActiveMapId(uiTypes.DialogTypes.SoundingsSources, isSourcesOpenInStore, currentActiveMapIdSources);
+        break;
+      case MenuOptions.locations:
+        dispatchActiveMapId(uiTypes.DialogTypes.SoundingsLocations, isLocationsOpenInStore, currentActiveMapIdLocations);
+        break;
+    }
+  }, [dispatchActiveMapId, isSourcesOpenInStore, currentActiveMapIdSources, isLocationsOpenInStore, currentActiveMapIdLocations]);
+  const isOpen = {
+    [MenuOptions.sources]: currentActiveMapIdSources === viewId && isSourcesOpenInStore,
+    [MenuOptions.locations]: currentActiveMapIdLocations === viewId && isLocationsOpenInStore
+  };
+  return jsx(SoundingsMenuBar, {
+    isOpen: isOpen,
+    handleClick: handleClick,
+    selectedSourcesAmount: sourcesAmount
+  });
+};
+
+const SoundingsConnect = ({
+  viewId
+}) => {
+  // TODO: use in follow-up: https://gitlab.com/opengeoweb/opengeoweb/-/issues/5991
+  // const selectedTime = useSelector(getSelectedTime);
+  const sourceSelections = useSelector(getSelectedSources);
+  const locationSelections = useSelector(getLocationSelections);
+  const {
+    error,
+    data,
+    isPending
+  } = useMultipleSources(sourceSelections, locationSelections);
+  return jsxs(Fragment, {
+    children: [error && jsx(AlertBanner, {
+      title: error.message,
+      shouldClose: true
+    }), isPending && jsx(LinearProgress, {
+      color: "secondary",
+      sx: {
+        position: 'absolute',
+        width: '100%'
+      }
+    }), jsxs(Box, {
+      sx: {
+        padding: 2,
+        overflowY: 'scroll',
+        height: '100%'
+      },
+      children: [jsx(Box, {
+        paddingLeft: 5,
+        children: jsx(MenuBarConnect, {
+          viewId: viewId
+        })
+      }), jsx(Soundings, {
+        data: data,
+        svgDimensions: {
+          width: 600,
+          height: 600,
+          margin: {
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0
+          }
+        }
+      }), jsx(SoundingsTimeSliderConnect
+      // TODO: use real timesteps https://gitlab.com/opengeoweb/opengeoweb/-/issues/5991
+      , {
+        // TODO: use real timesteps https://gitlab.com/opengeoweb/opengeoweb/-/issues/5991
+        timesteps: []
       })]
-    });
+    })]
+  });
+};
+
+const SoundingsSourceMenu = ({
+  soundingsCollections,
+  isOpen = false,
+  handleClose,
+  updateCollection,
+  sourceSelections,
+  onMouseDown = () => {},
+  order = 0,
+  isLoading = false,
+  error
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  const getDisplayValue = instanceId => {
+    const instanceAsDate = dateUtils.isoStringToDate(instanceId);
+    return instanceAsDate ? dateUtils.dateToIsoString(instanceAsDate) : instanceId;
   };
-  return jsx(ToolContainerDraggable, {
+  return jsxs(ToolContainerDraggable, {
     startSize: {
       width: 320
     },
+    startPosition: {
+      top: 40,
+      left: 50
+    },
     minWidth: 300,
     title: t('sources'),
     isOpen: isOpen,
-    onClose: () => handleClose(),
+    onClose: handleClose,
     bounds: "parent",
-    children: jsx(List, {
+    onMouseDown: onMouseDown,
+    order: order,
+    className: "source-menu",
+    children: [isLoading && jsx(LinearProgress, {
+      sx: {
+        width: '100%',
+        position: 'absolute'
+      }
+    }), error && jsx(AlertBanner, {
+      title: error.message,
+      shouldClose: true
+    }), jsx(List, {
       sx: {
         pr: 1
       },
       children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(collection => {
-        const currentCollectionState = currentSelection[collection.id];
-        const isChecked = currentCollectionState?.isChecked ?? false;
-        const selectedInstanceId = currentCollectionState?.selectedInstanceId ?? ''; // Use empty string for Select value if undefined
+        const {
+          isChecked,
+          instanceId
+        } = sourceSelections[collection.id] || {};
         const hasInstances = collection.instances.length > 0;
+        const selectedInstanceId = instanceId || collection.instances[0]?.id || undefined;
         return jsxs(ListItem, {
           disablePadding: true,
           children: [jsx(ListItemIcon, {
@@ -667,36 +2059,54 @@ const SoundingsSourceMenu = ({
               minWidth: 42
             },
             children: jsx(Checkbox, {
-              checked: isChecked,
-              onChange: event => handleSelectionChange(collection.id, {
-                isChecked: event.target.checked
+              checked: !!isChecked,
+              onChange: event => updateCollection(collection.id, {
+                isChecked: event.target.checked,
+                instanceId: selectedInstanceId
               }),
               disableRipple: true
             })
           }), jsxs(StyledSelect, {
             isEnabled: true,
+            additionalStyling: {
+              width: 'calc(100% - 42px)'
+            },
             skipLocalStyling: false,
-            value: selectedInstanceId,
-            onChange: event => handleSelectionChange(collection.id, {
-              selectedInstanceId: event.target.value
+            value: selectedInstanceId || t('noInstancesAvailable'),
+            onChange: event => updateCollection(collection.id, {
+              instanceId: event.target.value
             }),
             renderValue: value => jsx(Box, {
               sx: {
                 textOverflow: 'ellipsis',
                 overflow: 'hidden'
               },
-              children: getDisplayValue(collection, value)
+              children: jsxs(Box, {
+                display: "flex",
+                children: [jsx(Box, {
+                  sx: {
+                    minWidth: 200
+                  },
+                  children: collection.name
+                }), jsx(Box, {
+                  sx: {
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden'
+                  },
+                  children: getDisplayValue(value)
+                })]
+              })
             }),
             children: [!hasInstances && jsx(MenuItem, {
-              value: "",
+              value: t('noInstancesAvailable'),
               disabled: true,
               sx: {
                 fontSize: 12
               },
               children: t('noInstancesAvailable')
-            }), collection.instances.map((instance, index) => jsx(MenuItem, {
+            }), collection.instances.map(instance => jsx(MenuItem, {
               value: instance.id,
-              children: index === 0 ? t('latest') : dateUtils.dateToIsoString(dateUtils.isoStringToDate(instance.id)) || instance.id
+              children: getDisplayValue(instance.id)
             }, instance.id))]
           })]
         }, collection.id);
@@ -708,125 +2118,168 @@ const SoundingsSourceMenu = ({
           }
         })
       })
-    })
+    })]
   });
 };
 
-/* *
- * 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)
- * */
-const BASE_URL = 'https://opendata.fmi.fi/edr';
-const getCollectionLocations = collectionId => fetch(`${BASE_URL}/collections/${collectionId}/locations`, {
-  headers: getHeaders()
-}).then(handleResponse);
-const getCollectionInstance = (baseURL, collectionId) => fetch(`${baseURL}/collections/${collectionId}/instances`, {
-  headers: getHeaders()
-}).then(handleResponse);
-
 const SoundingsSourceDialogConnect = ({
   soundingsCollections
 }) => {
-  const [soundingsCollectionsWithInstances, setSoundingsCollectionsWithInstances] = React.useState();
+  const dispatch = useDispatch();
   const {
     isDialogOpen,
-    onCloseDialog
+    onCloseDialog,
+    dialogOrder,
+    setDialogOrder
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsSources);
-  React.useEffect(() => {
-    if (soundingsCollections && isDialogOpen) {
-      try {
-        void Promise.all(soundingsCollections.map(async collection => {
-          const data = await getCollectionInstance(collection.url, collection.id);
-          return {
-            ...collection,
-            instances: data.instances.reverse()
-          }; // Reverse to get latest first
-        })).then(results => setSoundingsCollectionsWithInstances(results));
-      } catch (error) {
-        console.error('Error fetching soundings instances:', error);
-      }
-    }
-  }, [soundingsCollections, isDialogOpen]);
+  const updateCollection = React.useCallback((sourceId, value) => {
+    dispatch(soundingsActions.updateSelectedSource({
+      sourceId,
+      value
+    }));
+  }, [dispatch]);
+  const sourceSelections = useSelector(getSourceSelections);
+  const {
+    data,
+    isPending,
+    error
+  } = useGetCollectionsInstances(soundingsCollections, isDialogOpen);
   return jsx(SoundingsSourceMenu, {
-    soundingsCollections: soundingsCollectionsWithInstances,
+    soundingsCollections: data,
     isOpen: isDialogOpen,
-    handleClose: () => onCloseDialog()
+    updateCollection: updateCollection,
+    sourceSelections: sourceSelections,
+    handleClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    isLoading: isPending,
+    error: error
   });
 };
 
 const LocationsMenu = ({
   services,
+  selectedLocations,
   isOpen,
-  onClose
+  onClose,
+  updateSelectedLocation,
+  onMouseDown = () => {},
+  order = 0
 }) => {
-  const [collapseMap, setCollapseMap] = useState({});
+  const [searchFilter, setSearchFilter] = useState('');
   const {
     t
   } = useSoundingsTranslation();
+  const filteredResults = useMemo(() => {
+    return services?.map(service => {
+      const filteredFeatures = service.features ? service.features.filter(feature => {
+        return feature.properties?.name.toLowerCase().includes(searchFilter.toLowerCase());
+      }) : [];
+      return {
+        ...service,
+        features: filteredFeatures
+      };
+    });
+  }, [services, searchFilter]);
+  const isChecked = (sourceId, locationId) => selectedLocations[sourceId] === locationId;
   return jsx(ToolContainerDraggable, {
     startSize: {
       width: 320,
       height: 500
     },
+    minWidth: 264,
     title: t('locations'),
-    headerSize: "medium",
     isOpen: isOpen,
-    onClose: () => onClose(),
+    startPosition: {
+      top: 60,
+      left: 200
+    },
+    onClose: onClose,
     bounds: "parent",
-    children: jsx(List, {
-      disablePadding: true,
+    onMouseDown: onMouseDown,
+    order: order,
+    children: services.length === 0 ? jsx(Typography, {
       sx: {
-        maxHeight: '100%',
-        overflowY: 'auto'
+        margin: 1
       },
-      children: services.map(service => jsxs(Fragment$1, {
-        children: [jsx(ListSubheader, {
-          disableGutters: true,
+      children: t('locations-menu-warning')
+    }) : jsxs(Grid, {
+      container: true,
+      children: [jsx(Box, {
+        sx: {
+          width: '100%',
+          padding: 1,
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          backgroundColor: 'geowebColors.background.surfaceApp'
+        },
+        children: jsx(SearchField, {
+          searchFilter: searchFilter,
+          setSearchFilter: setSearchFilter,
+          small: true
+        })
+      }), filteredResults.map(service => jsx(Fragment$1, {
+        children: jsx(CustomAccordion, {
+          title: service.name,
           sx: {
-            borderBottom: '1px solid'
-          },
-          children: jsxs(ListItemButton, {
-            onClick: () => setCollapseMap({
-              ...collapseMap,
-              [service.id]: !collapseMap[service.id]
-            }),
-            children: [jsx(ListItemText, {
-              children: service.id
-            }), jsx(ListItemIcon, {
-              children: jsx(ChevronDown, {})
-            })]
-          })
-        }), jsx(Collapse, {
-          in: collapseMap[service.id],
-          children: jsx(List, {
-            component: "div",
-            disablePadding: true,
-            sx: {
-              overflowY: 'auto',
-              overflow: 'hidden'
+            width: '100%',
+            margin: '0 8px 2px 8px',
+            '.MuiAccordionDetails-root': {
+              padding: 0
             },
-            children: service.features?.map(location => jsx(ListItem, {
-              sx: {
-                pl: 4
-              },
-              children: location.properties.name
-            }, `${service.id}-${location.id}`))
+            '.MuiAccordionSummary-root': {
+              minHeight: '40px'
+            },
+            '.MuiAccordionSummary-content': {
+              paddingLeft: 3
+            }
+          },
+          amountOfItems: service.features.length,
+          defaultExpanded: false,
+          children: jsx(FixedSizeList, {
+            itemSize: 40,
+            height: 320,
+            width: "100%",
+            itemCount: service.features.length,
+            children: ({
+              index,
+              style
+            }) => {
+              const location = service.features[index];
+              return jsx("div", {
+                style: style,
+                children: jsx(ListItem, {
+                  disablePadding: true,
+                  disableGutters: true,
+                  children: jsxs(ListItemButton, {
+                    onClick: () => {
+                      updateSelectedLocation(service.id, isChecked(service.id, location.id) ? undefined : location.id);
+                    },
+                    dense: true,
+                    children: [jsx(ListItemIcon, {
+                      children: jsx(Checkbox, {
+                        edge: "start",
+                        checked: isChecked(service.id, location.id),
+                        tabIndex: -1,
+                        disableRipple: true,
+                        slotProps: {
+                          input: {
+                            'aria-labelledby': location.id
+                          }
+                        }
+                      })
+                    }), jsx(ListItemText, {
+                      id: location.id,
+                      primary: location.properties.name
+                    })]
+                  })
+                })
+              }, `${service.id}-${location.id}`);
+            }
           })
-        })]
-      }, service.id))
+        })
+      }, service.id))]
     })
   });
 };
@@ -834,17 +2287,24 @@ const LocationsMenu = ({
 const LocationsMenuConnect = ({
   soundingsCollections
 }) => {
+  const dispatch = useDispatch();
   const {
     isDialogOpen,
-    onCloseDialog
-  } = useSetupDialog(uiTypes.DialogTypes.soundingsLocations);
+    onCloseDialog,
+    dialogOrder,
+    setDialogOrder
+  } = useSetupDialog(uiTypes.DialogTypes.SoundingsLocations);
+  const locationSelections = useSelector(getLocationSelections);
+  const sourceSelections = useSelector(getSourceSelections);
+  const selectedSourceIds = useMemo(() => Object.keys(sourceSelections).filter(key => sourceSelections[key].isChecked), [sourceSelections]);
   const edrQueries = useMemo(() => soundingsCollections.map(collection => ({
     queryKey: ['edr-locations', collection.id],
     queryFn: async () => {
       const locations = await getCollectionLocations(collection.id);
       return {
         ...locations,
-        id: collection.id
+        id: collection.id,
+        name: collection.name
       };
     }
   })), [soundingsCollections]);
@@ -855,275 +2315,14 @@ const LocationsMenuConnect = ({
   return jsx(LocationsMenu, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
-    services: services
-  });
-};
-
-var SoundingFeatures = [
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -4.74961,
-			dewpoint: -5.646749999999998,
-			pressure: 1000,
-			windSpeed: 9.291457267156751,
-			windDirection: -18.803465916723095
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -5.72214,
-			dewpoint: -5.740760000000001,
-			pressure: 925,
-			windSpeed: 11.482972536081412,
-			windDirection: 18.797638010822038
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -5.94461,
-			dewpoint: -6.284489999999999,
-			pressure: 850,
-			windSpeed: 10.355155067433804,
-			windDirection: 46.95919904362452
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -7.85121,
-			dewpoint: -7.903229999999999,
-			pressure: 700,
-			windSpeed: 10.216260991987234,
-			windDirection: 125.33681135255785
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -20.9667,
-			dewpoint: -22.12218,
-			pressure: 500,
-			windSpeed: 14.222681508365433,
-			windDirection: 120.16238041101973
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -48.8678,
-			dewpoint: -60.802800000000005,
-			pressure: 300,
-			windSpeed: 23.436991331013456,
-			windDirection: 128.0547684118523
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -58.3,
-			dewpoint: -69.68567999999999,
-			pressure: 250,
-			windSpeed: 28.155356371568097,
-			windDirection: 133.50317473958455
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -68.6166,
-			dewpoint: -71.9641,
-			pressure: 200,
-			windSpeed: 24.833678713593763,
-			windDirection: 137.492458365928
-		}
-	},
-	{
-		type: "Feature",
-		geometry: {
-			type: "Point",
-			coordinates: [
-				24.9727,
-				60.3294
-			]
-		},
-		properties: {
-			time: "2025-02-05T00:00:00Z",
-			temp: -69.4935,
-			dewpoint: -87.827772,
-			pressure: 50,
-			windSpeed: 35.1450619746217,
-			windDirection: 129.8915278264372
-		}
-	}
-];
-
-var MenuOptions;
-(function (MenuOptions) {
-  MenuOptions["sources"] = "sources";
-  MenuOptions["locations"] = "locations";
-})(MenuOptions || (MenuOptions = {}));
-const SoundingsMenuBar = ({
-  handleClick,
-  isOpen
-}) => {
-  const {
-    t
-  } = useSoundingsTranslation();
-  return jsxs(Box, {
-    display: "flex",
-    gap: 1,
-    children: [jsx(Button, {
-      variant: isOpen[MenuOptions.sources] ? 'primary' : 'tertiary',
-      disableRipple: true,
-      "aria-pressed": isOpen[MenuOptions.sources],
-      "data-testid": "soundingsSourcesButton",
-      onClick: () => handleClick(MenuOptions.sources),
-      startIcon: jsx(Sources, {}),
-      size: "small",
-      children: t('sources')
-    }), jsx(Button, {
-      variant: isOpen[MenuOptions.locations] ? 'primary' : 'tertiary',
-      disableRipple: true,
-      "data-testid": "soundingsLocationsButton",
-      "aria-pressed": isOpen[MenuOptions.locations],
-      onClick: () => handleClick(MenuOptions.locations),
-      size: "small",
-      children: t('locations')
-    })]
-  });
-};
-
-const MenuBarConnect = ({
-  viewId,
-  source
-}) => {
-  const dispatch = useDispatch();
-  const currentActiveMapId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsSources));
-  const isSourcesOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsSources));
-  const isLocationsOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.soundingsLocations));
-  const dispatchActiveMapId = React.useCallback((dialogType, isOpen) => void dispatch(uiActions.setActiveMapIdForDialog({
-    type: dialogType,
-    mapId: viewId,
-    setOpen: currentActiveMapId !== viewId ? true : !isOpen,
-    source
-  })), [dispatch, currentActiveMapId, viewId, source]);
-  const handleClick = React.useCallback(menuType => {
-    switch (menuType) {
-      case MenuOptions.sources:
-        dispatchActiveMapId(uiTypes.DialogTypes.SoundingsSources, isSourcesOpenInStore);
-        break;
-      case MenuOptions.locations:
-        dispatchActiveMapId(uiTypes.DialogTypes.soundingsLocations, isLocationsOpenInStore);
-        break;
-    }
-  }, [dispatchActiveMapId, isSourcesOpenInStore, isLocationsOpenInStore]);
-  const isOpen = {
-    [MenuOptions.sources]: currentActiveMapId === viewId && isSourcesOpenInStore,
-    [MenuOptions.locations]: currentActiveMapId === viewId && isLocationsOpenInStore
-  };
-  return jsx(SoundingsMenuBar, {
-    isOpen: isOpen,
-    handleClick: handleClick
-  });
-};
-
-const SoundingsConnect = ({
-  viewId
-}) => {
-  return jsxs(Box, {
-    sx: {
-      padding: 2
-    },
-    children: [jsx(Box, {
-      paddingLeft: 5,
-      children: jsx(MenuBarConnect, {
-        viewId: viewId
-      })
-    }), jsx(Soundings
-    // TODO: use real data
-    , {
-      // TODO: use real data
-      data: {
-        features: SoundingFeatures
-      },
-      svgDimensions: {
-        width: 600,
-        height: 600,
-        margin: {
-          bottom: 0,
-          left: 0,
-          right: 0,
-          top: 0
-        }
-      }
-    })]
+    services: services.filter(service => selectedSourceIds.includes(service.id)),
+    selectedLocations: locationSelections,
+    updateSelectedLocation: (sourceId, locationId) => void dispatch(soundingsActions.updateSelectedLocation({
+      sourceId,
+      locationId
+    })),
+    onMouseDown: setDialogOrder,
+    order: dialogOrder
   });
 };
 
@@ -1137,4 +2336,32 @@ const soundingsLookUp = payload => {
   return null;
 };
 
-export { LocationsMenuConnect, Soundings, SoundingsSourceDialogConnect, soundingsComponentType, soundingsLookUp };
+/* *
+ * 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)
+ * */
+const soundingsReducersMap = {
+  soundings: soundingsReducer,
+  ...storeReducerMap
+};
+const soundingsRootReducer = combineReducers(soundingsReducersMap);
+const createMockStore = mockState => configureStore({
+  reducer: soundingsRootReducer,
+  preloadedState: mockState,
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(storeMiddlewares)
+});
+
+export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsConnect, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingsComponentType, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };