@opengeoweb/soundings 12.1.2 → 12.3.0

package/index.esm.js

@@ -1,10 +1,1954 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import React, { useRef, useEffect, useState, Fragment, useMemo } from 'react';
+import * as d3 from 'd3';
+import { Card, List, ListItem, ListItemIcon, Checkbox, MenuItem, Box, ListItemText, Typography, ListSubheader, ListItemButton, Collapse, Stack, LinearProgress } from '@mui/material';
+import { selectorMemoizationOptions, useSetupDialog, uiTypes, uiSelectors, uiActions, uiReducer, mapReducer } from '@opengeoweb/store';
+import { useDispatch, useSelector } from 'react-redux';
+import { ToolContainerDraggable, StyledSelect, dateUtils, CustomToggleButton, AlertBanner } from '@opengeoweb/shared';
+import i18n from 'i18next';
+export { default as i18n } from 'i18next';
+import { useTranslation, initReactI18next } from 'react-i18next';
+import { getHeaders, handleResponse } from '@opengeoweb/api';
+import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import { ChevronDown, Sources } from '@opengeoweb/theme';
 
-const Sounding = () => {
-  // eslint-disable-next-line i18next/no-literal-string
-  return jsx("div", {
-    children: "This is an example component"
+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");
+ * 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 SOUNDING_COLORS = ['#4487f3'];
+// vfx code
+const initializeSvg = ({
+  svgRef,
+  width,
+  height,
+  margin
+}) => {
+  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', 'none').attr('opacity', 1).attr('id', 'skewTd3').attr('clip-path', 'url(#clip-skewTd3)');
+  return svg;
+};
+const drawAxes = ({
+  svg,
+  xScale,
+  yScale,
+  height
+}) => {
+  // Create x-axis with intervals
+  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
+  // 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,
+  width
+}) => {
+  // Add a legend for the temperature line
+  svg.append('text').attr('x', width - 160).attr('y', 20).attr('fill', SOUNDING_COLORS[0]).text('Temperature (°C)');
+  // Add a legend for the dewpoint line
+  svg.append('text').attr('x', width - 137).attr('y', 40).attr('fill', SOUNDING_COLORS[0]).text('Dewpoint (°C)');
+};
+const plotSounding = ({
+  temperatureValues,
+  pressureValues,
+  color,
+  lineStyle,
+  xScale,
+  yScale,
+  height,
+  svg
+}) => {
+  // Map temp and pressure to pixels
+  const Px = d3.zip(pressureValues, temperatureValues).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)');
+};
+
+/* *
+ * 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 = removeItemsByGrowthType(data.reverse(), GrowthType.EXPONENTIAL, 1.15, 1).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.right + margin.left + barbsSize);
+  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 GrowthType = {
+  LINEAR: 'LINEAR',
+  EXPONENTIAL: 'EXPONENTIAL',
+  CUBIC: 'CUBIC'
+};
+const removeItemsByGrowthType = (array, growthType = 'LINEAR', base = 2, initial = 1) => {
+  if (!Object.values(GrowthType).includes(growthType)) {
+    throw new Error('Unsupported growth type');
+  }
+  if (!Array.isArray(array) || array.length === 0) {
+    return [];
+  }
+  if (growthType === GrowthType.LINEAR && base === 0) {
+    throw new Error('Base must be greater than 0');
+  }
+  if (growthType === GrowthType.EXPONENTIAL && base <= 1) {
+    throw new Error('Base must be greater than 1');
+  }
+  if (growthType === GrowthType.CUBIC && base <= 0) {
+    throw new Error('Base must be greater than 0');
+  }
+  const indicesToKeep = [];
+  let i = 0;
+  let nextIndex = 0;
+  while (nextIndex < array.length) {
+    switch (growthType) {
+      case GrowthType.LINEAR:
+        nextIndex = initial + i * base;
+        break;
+      case GrowthType.EXPONENTIAL:
+        nextIndex = Math.floor(initial * base ** i);
+        break;
+      case GrowthType.CUBIC:
+        nextIndex = initial + Math.floor(i ** 3 * base);
+        break;
+    }
+    if (nextIndex < array.length) {
+      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");
+ * 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 CP$1 = 1.03e3;
+const Po = 1000.0;
+const dryAdiabaticLapserate = (theta, pressure, temperature, dp) => {
+  const Tt = (theta + 273.15) * (Po / pressure) ** (-287 / CP$1) - 273.15;
+  const dt = Tt - temperature;
+  return [dp, dt];
+};
+const drawDryAdiabats = ({
+  staticPressureArray,
+  height,
+  xScale,
+  yScale,
+  svg,
+  dp
+}) => {
+  for (let Tbase = -40; Tbase < 240; Tbase += 10) {
+    let Pnew = staticPressureArray[0];
+    let Tnew = Tbase;
+    const Px = [];
+    for (const pressure of staticPressureArray) {
+      const DPDT = dryAdiabaticLapserate(Tbase, Pnew, Tnew, dp);
+      Tnew += DPDT[1];
+      Pnew += DPDT[0];
+      Px.push([xScale(Tnew), yScale(pressure)]);
+    }
+    // Skew/shear transformation for skew-t
+    for (const PxElement of Px) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const lineGenerator = d3.line();
+    const daPathString = lineGenerator(Px);
+    svg.append('path').attr('d', daPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'green').style('opacity', 0.3).attr('clip-path', 'url(#clip-skewTd3)');
+  }
+};
+
+/* *
+ * 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 isohumeValues = [0.001, 0.01, 0.1, 0.5, 1.0, 2.0, 5.0, 8.0, 12.0, 16.0, 20.0];
+const drawIsohumes = ({
+  staticPressureArray,
+  height,
+  xScale,
+  yScale,
+  svg
+}) => {
+  for (const isohumeVal of isohumeValues) {
+    const Px = [];
+    for (const pressureVal of staticPressureArray) {
+      const es = pressureVal * isohumeVal / (isohumeVal + 622.0);
+      const logthing = Math.log(es / 6.11);
+      const temp = 237.3 * logthing / (17.269 - logthing);
+      Px.push([xScale(temp), yScale(pressureVal)]);
+    }
+    // Skew/shear transformation for skew-t
+    for (const PxElement of Px) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const lineGenerator = d3.line();
+    const pathStringQ = lineGenerator(Px);
+    const strID = `${isohumeVal}isohume`;
+    svg.append('path').attr('id', strID).attr('d', pathStringQ).style('fill', 'none').style('stroke-width', 1).style('stroke-dasharray', '15, 8').style('stroke', '#5267A9').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+    svg.append('text').text(isohumeVal).attr('text-anchor', 'middle').attr('x', `${Px[0][0] + 20}px`).attr('y', `${height - 10}px`).attr('fill', '#5267A9').attr('font-size', '10px');
+  }
+};
+
+/* *
+ * 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 drawIsotherms = ({
+  staticPressureArray,
+  height,
+  xScale,
+  yScale,
+  svg
+}) => {
+  //  lines of constant temperature (10 degree interval from -80...+40C)
+  for (let temp = -80; temp <= 40; temp += 10) {
+    const points = [];
+    for (const pressure of staticPressureArray) {
+      const Ppx = yScale(pressure);
+      const Tpx = xScale(temp);
+      const skewedX = Tpx + (height - Ppx);
+      points.push([skewedX, Ppx]);
+    }
+    const lineGenerator = d3.line();
+    const pathString = lineGenerator(points);
+    svg.append('path').attr('d', pathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'orange').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+  }
+};
+
+/* *
+ * 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 CP = 1.03e3;
+const KELVIN = 273.15;
+const L_CONST = 2.5e6;
+const RD = 287.0;
+const RV = 461.0;
+const moistAdiabaticLapserate = (minTemp, pressure, temperature, dp) => {
+  const kelvin = temperature + KELVIN;
+  const lsbc = L_CONST / RV * (1.0 / KELVIN - 1.0 / kelvin);
+  const rw = 6.11 * Math.exp(lsbc) * (0.622 / pressure);
+  const lrwbt = L_CONST * rw / (RD * kelvin);
+  const nume = RD * kelvin / (CP * pressure) * (1.0 + lrwbt);
+  const deno = 1.0 + lrwbt * (0.622 * L_CONST / (CP * kelvin));
+  const gradi = nume / deno;
+  const dt = dp * gradi;
+  return [dp, dt];
+};
+const drawMoistAdiabats = ({
+  staticPressureArray,
+  minTemperature,
+  maxTemperature,
+  minPressure,
+  maxPressure,
+  width,
+  height,
+  xScale,
+  yScale,
+  svg,
+  dp
+}) => {
+  /* We need the moist adiabat to cross the isotherm at 1000hPa
+     Therefore we start the calculations from 1000hPa and work upwards (towards 0)
+     then draw a separate line starting from 1000hPa working down (towards defined maxPressure) */
+  for (let Tbase = -40; Tbase < 240; Tbase += 10) {
+    let Pnew = 1000;
+    let Tnew = Tbase;
+    const Px = [];
+    // First calculate position of moist adiabat at a pressure of 1000hPa
+    const Temp = Tnew + -1 * minTemperature;
+    const Tpx1000 = width * Temp / (maxTemperature - minTemperature);
+    const Ppx1000 = height * (Math.log(Pnew) - Math.log(minPressure)) / (Math.log(maxPressure) - Math.log(minPressure));
+    Px.push([Tpx1000, Ppx1000]);
+    // Then calculate the rest of the moist adiabat for pressures <1000hPa
+    for (const pressure of staticPressureArray) {
+      if (pressure < 1000) {
+        const DPDT = moistAdiabaticLapserate(-80, Pnew, Tnew, dp);
+        Tnew += DPDT[1];
+        Pnew += DPDT[0];
+        Px.push([xScale(Tnew), yScale(pressure)]);
+      }
+    }
+    for (const PxElement of Px) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const lineGenerator = d3.line();
+    const maPathString = lineGenerator(Px);
+    // Draw this first section of the line
+    svg.append('path').attr('d', maPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'purple').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+    // Now work backwards from 1000hPa to calculate most adiabat until the bottom of the plot
+    const PxBottom = [];
+    PxBottom.push([Tpx1000, Ppx1000]);
+    let PnewBottom = 1000;
+    let TnewBottom = Tbase;
+    const startIndex = staticPressureArray.findIndex(value => value === 1000);
+    for (let i = startIndex - 1; i >= 0; i -= 1) {
+      const DPDT = moistAdiabaticLapserate(-80, PnewBottom, TnewBottom, 5);
+      TnewBottom += DPDT[1];
+      PnewBottom += DPDT[0];
+      PxBottom.push([xScale(TnewBottom), yScale(staticPressureArray[i])]);
+    }
+    // Skew/shear transformation for skew-t
+    for (const PxElement of PxBottom) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const maPathStringBottom = lineGenerator(PxBottom);
+    svg.append('path').attr('d', maPathStringBottom).style('fill', 'none').style('stroke-width', 1).style('stroke', 'purple').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+  }
+};
+
+/* *
+ * 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 drawStaticLines = ({
+  dp,
+  staticPressureArray,
+  minTemperature,
+  maxTemperature,
+  height,
+  width,
+  xScale,
+  yScale,
+  minPressure,
+  maxPressure,
+  svg
+}) => {
+  drawIsobars({
+    minTemperature,
+    maxTemperature,
+    xScale,
+    yScale,
+    svg
+  });
+  drawIsotherms({
+    staticPressureArray,
+    height,
+    xScale,
+    yScale,
+    svg
+  });
+  drawIsohumes({
+    staticPressureArray,
+    height,
+    xScale,
+    yScale,
+    svg
+  });
+  drawDryAdiabats({
+    staticPressureArray,
+    height,
+    xScale,
+    yScale,
+    svg,
+    dp
+  });
+  drawMoistAdiabats({
+    staticPressureArray,
+    minTemperature,
+    maxTemperature,
+    minPressure,
+    maxPressure,
+    width,
+    height,
+    xScale,
+    yScale,
+    svg,
+    dp
+  });
+};
+
+const Soundings = ({
+  data: {
+    features
+  },
+  svgDimensions
+  // tooltip
+}) => {
+  const svgRef = useRef(null);
+  const svgDimensionsOptions = {
+    width: svgDimensions?.width || 812,
+    height: svgDimensions?.height || 802,
+    margin: {
+      top: svgDimensions?.margin?.top || 12,
+      right: svgDimensions?.margin?.right || 20,
+      bottom: svgDimensions?.margin?.bottom || 25,
+      left: svgDimensions?.margin?.left || 20
+    }
+  };
+  // Set SVG dimensions
+  const margin = {
+    top: svgDimensionsOptions?.margin?.top,
+    right: svgDimensionsOptions?.margin?.right,
+    bottom: svgDimensionsOptions?.margin?.bottom,
+    left: svgDimensionsOptions?.margin?.left
+  };
+  const baseWidth = svgDimensionsOptions?.width;
+  const baseHeight = svgDimensionsOptions?.height;
+  const width = baseWidth - (margin.left + margin.right);
+  const height = baseHeight - (margin.top + margin.bottom);
+  useEffect(() => {
+    if (!svgRef.current) {
+      return;
+    }
+    // Define svg
+    const svg = initializeSvg({
+      svgRef,
+      width,
+      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.6;
+    let pressure = maxPressure;
+    while (pressure > minPressure) {
+      pressure += dp;
+      staticPressureArray.push(pressure);
+    }
+    // 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]);
+    // Add axis'
+    drawAxes({
+      svg,
+      xScale,
+      yScale,
+      height
+    });
+    // Draw static lines
+    drawStaticLines({
+      dp,
+      staticPressureArray,
+      minTemperature,
+      maxTemperature,
+      height,
+      width,
+      xScale,
+      yScale,
+      minPressure,
+      maxPressure,
+      svg
+    });
+    // Add legends
+    addLegends({
+      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
+    });
+    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: SOUNDING_COLORS[0]
+    });
+    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)
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [features]);
+  return jsx(Card, {
+    children: jsx("svg", {
+      ref: svgRef
+    })
+  });
+};
+
+/* *
+ * 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 defaultLanguage = 'en';
+const initSoundingsI18n = () => {
+  void i18n.use(initReactI18next).init({
+    lng: defaultLanguage,
+    ns: SOUNDINGS_NAMESPACE,
+    interpolation: {
+      escapeValue: false
+    },
+    resources: {
+      en: {
+        [SOUNDINGS_NAMESPACE]: soundingsTranslations.en
+      },
+      nl: {
+        [SOUNDINGS_NAMESPACE]: soundingsTranslations.nl
+      },
+      fi: {
+        [SOUNDINGS_NAMESPACE]: soundingsTranslations.fi
+      },
+      no: {
+        [SOUNDINGS_NAMESPACE]: soundingsTranslations.no
+      }
+    }
+  });
+};
+const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
+  ns: [SOUNDINGS_NAMESPACE],
+  ...params
+});
+const useSoundingsTranslation = () => useTranslation(SOUNDINGS_NAMESPACE);
+
+const SoundingsSourceMenu = ({
+  soundingsCollections,
+  isOpen = false,
+  handleClose,
+  updateCollection,
+  sourceSelections
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  const handleSelectionChange = (collectionId, update) => {
+    updateCollection(collectionId, update);
+  };
+  const getDisplayValue = instanceId => {
+    if (!instanceId) {
+      return t('noInstancesAvailable');
+    }
+    const instanceAsDate = dateUtils.isoStringToDate(instanceId);
+    return instanceAsDate ? dateUtils.dateToIsoString(instanceAsDate) : instanceId;
+  };
+  return jsx(ToolContainerDraggable, {
+    startSize: {
+      width: 320
+    },
+    minWidth: 300,
+    title: t('sources'),
+    isOpen: isOpen,
+    onClose: () => handleClose(),
+    bounds: "parent",
+    children: jsx(List, {
+      sx: {
+        pr: 1
+      },
+      children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(collection => {
+        const {
+          isChecked,
+          instanceId
+        } = sourceSelections[collection.id] || {};
+        const hasInstances = collection.instances.length > 0;
+        const selectedInstanceId = instanceId || collection.instances[0].id;
+        return jsxs(ListItem, {
+          disablePadding: true,
+          children: [jsx(ListItemIcon, {
+            sx: {
+              minWidth: 42
+            },
+            children: jsx(Checkbox, {
+              checked: !!isChecked,
+              onChange: event => handleSelectionChange(collection.id, {
+                isChecked: event.target.checked,
+                instanceId: selectedInstanceId
+              }),
+              disableRipple: true
+            })
+          }), jsxs(StyledSelect, {
+            isEnabled: true,
+            additionalStyling: {
+              width: 'calc(100% - 24px)'
+            },
+            skipLocalStyling: false,
+            value: selectedInstanceId,
+            onChange: event => handleSelectionChange(collection.id, {
+              instanceId: event.target.value
+            }),
+            renderValue: value => jsx(Box, {
+              sx: {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden'
+              },
+              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: "",
+              disabled: true,
+              sx: {
+                fontSize: 12
+              },
+              children: t('noInstancesAvailable')
+            }), collection.instances.map(instance => jsx(MenuItem, {
+              value: instance.id,
+              children: getDisplayValue(instance.id)
+            }, instance.id))]
+          })]
+        }, collection.id);
+      }) : jsx(ListItem, {
+        children: jsx(ListItemText, {
+          primary: t('noServicesFound'),
+          sx: {
+            pl: 4
+          }
+        })
+      })
+    })
+  });
+};
+
+/* *
+ * 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 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);
+};
+
+/* *
+ * 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: {}
+};
+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;
+    }
+  }
+});
+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 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 SoundingsSourceDialogConnect = ({
+  soundingsCollections
+}) => {
+  const [soundingsCollectionsWithInstances, setSoundingsCollectionsWithInstances] = React.useState();
+  const dispatch = useDispatch();
+  const {
+    isDialogOpen,
+    onCloseDialog
+  } = useSetupDialog(uiTypes.DialogTypes.SoundingsSources);
+  const updateCollection = React.useCallback((sourceId, value) => {
+    dispatch(soundingsActions.updateSelectedSource({
+      sourceId,
+      value
+    }));
+  }, [dispatch]);
+  const sourceSelections = useSelector(getSourceSelections);
+  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]);
+  return jsx(SoundingsSourceMenu, {
+    soundingsCollections: soundingsCollectionsWithInstances,
+    isOpen: isDialogOpen,
+    updateCollection: (sourceId, value) => updateCollection(sourceId, value),
+    sourceSelections: sourceSelections,
+    handleClose: () => onCloseDialog()
+  });
+};
+
+const LocationsMenu = ({
+  services,
+  selectedLocations,
+  isOpen,
+  onClose,
+  updateSelectedLocation
+}) => {
+  const [collapseMap, setCollapseMap] = useState({});
+  const {
+    t
+  } = useSoundingsTranslation();
+  const isChecked = (sourceId, locationId) => selectedLocations[sourceId] === locationId;
+  return jsx(ToolContainerDraggable, {
+    startSize: {
+      width: 320,
+      height: 500
+    },
+    title: t('locations'),
+    isOpen: isOpen,
+    onClose: () => onClose(),
+    bounds: "parent",
+    children: jsxs(List, {
+      disablePadding: true,
+      sx: {
+        maxHeight: '100%',
+        overflowY: 'auto'
+      },
+      children: [services.length === 0 && jsx(Typography, {
+        sx: {
+          marginLeft: 1
+        },
+        children: t('locations-menu-warning')
+      }), services.map(service => jsxs(Fragment, {
+        children: [jsx(ListSubheader, {
+          disableGutters: true,
+          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'
+            },
+            children: service.features?.map(location => 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,
+                    inputProps: {
+                      'aria-labelledby': location.id
+                    }
+                  })
+                }), jsx(ListItemText, {
+                  id: location.id,
+                  primary: location.properties.name
+                })]
+              })
+            }, `${service.id}-${location.id}`))
+          })
+        })]
+      }, service.id))]
+    })
+  });
+};
+
+const LocationsMenuConnect = ({
+  soundingsCollections
+}) => {
+  const dispatch = useDispatch();
+  const {
+    isDialogOpen,
+    onCloseDialog
+  } = 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
+      };
+    }
+  })), [soundingsCollections]);
+  const services = useQueries({
+    queries: edrQueries,
+    combine: results => results.map(result => result.data).filter(result => !!result)
+  });
+  return jsx(LocationsMenu, {
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    services: services.filter(service => selectedSourceIds.includes(service.id)),
+    selectedLocations: locationSelections,
+    updateSelectedLocation: (sourceId, locationId) => void dispatch(soundingsActions.updateSelectedLocation({
+      sourceId,
+      locationId
+    }))
+  });
+};
+
+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: {
+          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 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 sourcesAmount = useSelector(getSelectedSourcesAmount);
+  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,
+    selectedSourcesAmount: sourcesAmount
+  });
+};
+
+/* *
+ * 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;
+}
+
+/* *
+ * 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)
+ * */
+// 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 location');
+      }
+    }
+  };
+};
+const useEdrCollectionForLocationPosition = (collectionId, instanceId, location, datetime, parameters = ['temperature', 'WindDirection', 'WindSpeedMS', 'windUMS', 'windVMS', 'Pressure', 'DewPoint', 'humidity', 'specifichumidity']) => {
+  // TODO: Remove once we pass in the datetime coming from the timeslider!
+  const {
+    data
+  } = useQuery({
+    queryKey: ['temporary-instance-call', collectionId, instanceId],
+    queryFn: async () => {
+      return fetch(`https://opendata.fmi.fi/edr/collections/${collectionId}/instances/${instanceId}`, {
+        headers: getHeaders()
+      }).then(handleResponse);
+    }
   });
+  const datetime2 = collectionId === undefined || data === undefined ? '' : data.extent.temporal.interval[0][0];
+  // Up until here can be removed
+  // If position passed in, call positions hook
+  const queryParams = constructQueryParams(collectionId, instanceId, location, datetime2, parameters);
+  return useQuery(queryParams);
+};
+
+const SoundingsConnect = ({
+  viewId
+}) => {
+  const sourceSelections = useSelector(getSelectedSources);
+  const locationSelections = useSelector(getLocationSelections);
+  // TODO https://gitlab.com/opengeoweb/opengeoweb/-/issues/5916: Allow multiple sources to be selected
+  // For now, only select the first one
+  const {
+    error,
+    data: soundingData,
+    isPending
+  } = useEdrCollectionForLocationPosition(sourceSelections[0]?.collectionId, sourceSelections[0]?.instanceId, locationSelections[sourceSelections[0]?.collectionId] || '');
+  return jsxs(Fragment$1, {
+    children: [error && jsx(AlertBanner, {
+      title: error.message,
+      shouldClose: true
+    }), isPending && jsx(LinearProgress, {
+      color: "secondary"
+    }), 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: soundingData || []
+        },
+        svgDimensions: {
+          width: 600,
+          height: 600,
+          margin: {
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0
+          }
+        }
+      })]
+    })]
+  });
+};
+
+const soundingsComponentType = 'Soundings';
+const soundingsLookUp = payload => {
+  if (payload.componentType === soundingsComponentType) {
+    return jsx(SoundingsConnect, {
+      viewId: payload.id
+    });
+  }
+  return null;
+};
+
+/* *
+ * 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,
+  webmap: mapReducer,
+  ui: uiReducer
 };
+const soundingsRootReuducer = combineReducers(soundingsReducersMap);
+const createMockStore = mockState => configureStore({
+  reducer: soundingsRootReuducer,
+  preloadedState: mockState,
+  middleware: getDefaultMiddleware => getDefaultMiddleware()
+});
 
-export { Sounding };
+export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, Soundings, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingsComponentType, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };