@opengeoweb/soundings 12.5.0 → 12.7.0

package/index.esm.js

@@ -1,11 +1,13 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Card, Box, Stack, LinearProgress, List, ListItem, ListItemIcon, Checkbox, MenuItem, ListItemText, Typography, Grid, ListItemButton } from '@mui/material';
+import { Box, Stack, Menu, ListSubheader, Typography, MenuItem, LinearProgress, Card, List, ListItem, ListItemIcon, Checkbox, ListItemText, 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 { useQueries, useQuery } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
 import { getHeaders, handleResponse } from '@opengeoweb/api';
+import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval } from '@opengeoweb/webmap';
+import { range, minBy } from 'lodash';
 import { timesliderTranslations, TIMESLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/timeslider';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
@@ -21,7 +23,11 @@ var en = {
 	noInstancesAvailable: "No instances found",
 	noServicesFound: "No source available",
 	locations: "Locations",
-	"locations-menu-warning": "You have to choose your sources in the sources menu"
+	"locations-menu-warning": "You have to choose your sources in the sources menu",
+	options: "Options",
+	"diagram-SKEWT": "Skew-T",
+	"diagram-BIJVOET": "Bijvoet",
+	"diagram-EMAGRAM": "Emagram"
 };
 var no = {
 	sources: "Kilder",
@@ -29,7 +35,11 @@ var no = {
 	noInstancesAvailable: "Ingen instanser funnet",
 	noServicesFound: "Ingen tjenester funnet",
 	locations: "Lokasjoner",
-	"locations-menu-warning": "Du må velge kilder i kilde-menyen"
+	"locations-menu-warning": "Du må velge kilder i kilde-menyen",
+	options: "Valg",
+	"diagram-SKEWT": "Skew-T",
+	"diagram-BIJVOET": "Bijvoet",
+	"diagram-EMAGRAM": "Emagram"
 };
 var nl = {
 	sources: "Bronnen",
@@ -37,7 +47,11 @@ var nl = {
 	noInstancesAvailable: "Geen exemplaren gevonden",
 	noServicesFound: "Geen bron beschikbaar",
 	locations: "Locaties",
-	"locations-menu-warning": "Selecteer eerst een bron in het bron menu"
+	"locations-menu-warning": "Selecteer eerst een bron in het bron menu",
+	options: "Opties",
+	"diagram-SKEWT": "Skew-T",
+	"diagram-BIJVOET": "Bijvoet",
+	"diagram-EMAGRAM": "Emagram"
 };
 var fi = {
 	sources: "Lähteet",
@@ -45,7 +59,11 @@ var fi = {
 	noInstancesAvailable: "Tapauksia ei löytynyt",
 	noServicesFound: "Lähdettä ei ole saatavilla",
 	locations: "Locations",
-	"locations-menu-warning": "Valitse ensin lähde lähdevalikosta"
+	"locations-menu-warning": "Valitse ensin lähde lähdevalikosta",
+	options: "Valinnat",
+	"diagram-SKEWT": "Skew-T",
+	"diagram-BIJVOET": "Bijvoet",
+	"diagram-EMAGRAM": "Emagram"
 };
 var soundingsTranslations = {
 	en: en,
@@ -156,7 +174,7 @@ const calculateThetaFromPressTemp = (pressure, temperature, basePressure) => {
   const pstep = (base - pressure) / numberOfSteps;
   let tempN = temperature;
   let pressureN = pressure;
-  for (let n = 0; n < numberOfSteps; n += 1) {
+  for (let step = 0; step < numberOfSteps; step += 1) {
     const k1 = pstep * dTdp(pressureN, tempN);
     const k2 = pstep * dTdp(pressureN + 0.5 * pstep, tempN + 0.5 * k1);
     const k3 = pstep * dTdp(pressureN + 0.5 * pstep, tempN + 0.5 * k2);
@@ -227,6 +245,22 @@ const drawIsobars = ({
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const SOUNDING_COLORS = ['#4487f3', '#c3213c', '#509a00'];
+const getDiagramName = (t, diagramType) => {
+  switch (diagramType) {
+    case 'BIJVOET':
+      {
+        return t('diagram-BIJVOET');
+      }
+    case 'EMAGRAM':
+      {
+        return t('diagram-EMAGRAM');
+      }
+    default:
+      {
+        return t('diagram-SKEWT');
+      }
+  }
+};
 // vfx code
 const initializeSvg = ({
   svgRef,
@@ -235,10 +269,9 @@ const initializeSvg = ({
   margin,
   diagramType
 }) => {
-  const diagram = diagramType === 'BIJVOET' ? 'bijvoet' : 'skewT';
-  const svg = d3.select(svgRef.current).attr('width', width + (margin.left + margin.right)).attr('height', height + (margin.top + margin.bottom)).attr('id', diagram).attr('data-testid', diagram).append('g').attr('transform', `translate(${margin.left + margin.right},${margin.top})`);
-  svg.append('clipPath').attr('id', `clip-${diagram}d3`).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', '#ffffff00').attr('opacity', 1).attr('id', `${diagram}d3`).attr('clip-path', `url(#clip-${diagram}d3)`);
+  const svg = d3.select(svgRef.current).attr('width', width + (margin.left + margin.right)).attr('height', height + (margin.top + margin.bottom)).attr('id', diagramType).attr('data-testid', diagramType).append('g').attr('transform', `translate(${margin.left + margin.right},${margin.top})`);
+  svg.append('clipPath').attr('id', `clip-${diagramType}d3`).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', '#ffffff00').attr('opacity', 1).attr('id', `${diagramType}d3`).attr('clip-path', `url(#clip-${diagramType}d3)`);
   return svg;
 };
 const createScales = (diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature) => {
@@ -269,9 +302,9 @@ const drawAxes = ({
     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 () {
+    svg.selectAll('g[type="x-axis"] .tick').filter(function isMiddle() {
       return parseInt(d3.select(this).select('text').text(), 10) === xMiddleValue;
-    }).each(function () {
+    }).each(function txt() {
       const unitPart = '°C';
       d3.select(this).select('text')
       // tspan necessary to use a different font-size
@@ -281,7 +314,7 @@ const drawAxes = ({
   // Create y-axis with intervals
   // Make sure all zeroes are printed (1000 vs 1k)
   const formatTicks = d3.format('.0f');
-  svg.append('g').attr('type', 'y-axis').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');
+  svg.append('g').attr('type', 'y-axis').call(d3.axisLeft(yScale).tickValues(isobarValues).tickFormat(formatTicks).tickSizeInner(0).tickSizeOuter(0)).call(gee => gee.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,
@@ -298,6 +331,9 @@ const mapToPlot = (diagramType, filteredPressureValues, filteredTemperatureValue
     return d3.zip(filteredPressureValues, thetaValues).map(([pressure, theta]) => [xScale(theta), yScale(pressure)]);
   }
   const Px = d3.zip(filteredPressureValues, filteredTemperatureValues).map(([pressure, temperature]) => [xScale(temperature), yScale(pressure)]);
+  if (diagramType === 'EMAGRAM') {
+    return Px.map(([x, y]) => [x, y]);
+  }
   // Skew/shear transformation for skew-t
   return Px.map(([x, y]) => [x + height - y, y]);
 };
@@ -312,17 +348,16 @@ const plotSounding = ({
   svg,
   diagramType
 }) => {
-  const diagram = diagramType === 'BIJVOET' ? 'bijvoet' : 'skewT';
   const [filteredPressureValues, filteredTemperatureValues] = filterDomainRangeForParameter(pressureValues, temperatureValues);
   // Map temp and pressure to pixels
   const Px = mapToPlot(diagramType, filteredPressureValues, filteredTemperatureValues, xScale, yScale, height);
   const lineGenerator = d3.line();
   const pathString = lineGenerator(Px);
-  svg.append('path').attr('d', pathString).attr('id', 'dataline').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-${diagram}d3)`);
+  svg.append('path').attr('d', pathString).attr('id', 'dataline').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-${diagramType}d3)`);
 };
 // 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 filteredPressureDomain = pressureDomain.filter((_value, index) => !isNaN(parameterDomain[index]) && parameterDomain[index] !== null);
   const filteredParameterDomain = parameterDomain.filter(value => !isNaN(value) && value !== null);
   return [filteredPressureDomain, filteredParameterDomain];
 };
@@ -828,16 +863,16 @@ const drawWindBarbs = ({
     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');
+  d3.selectAll('path[type="isobar"]').each((_d, i, nodes) => {
+    const path = d3.select(nodes[i]).attr('d');
     const newD = extendIsoBar(path, horizontalBarbMargin);
-    d3.select(this).attr('d', newD).attr('clip-path', null);
+    d3.select(nodes[i]).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');
+  d3.select('g[type="x-axis"] path.domain').each((_d, i, nodes) => {
+    const path = d3.select(nodes[i]).attr('d');
     const newD = extendXAxis(path, horizontalBarbMargin);
-    d3.select(this).attr('d', newD);
+    d3.select(nodes[i]).attr('d', newD);
   });
   svg.attr('width', currentWidth + margin.left + horizontalBarbMargin);
   const barbGroup = svg.append('g').attr('class', 'wind-group').attr('transform',
@@ -855,8 +890,8 @@ const drawWindBarbs = ({
       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);
+      innerGroup.selectAll('*').each((_d, i, nodes) => {
+        const el = d3.select(nodes[i]);
         const currentFill = el.attr('fill');
         if (currentFill && currentFill !== 'none') {
           el.attr('fill', barbColor);
@@ -936,7 +971,8 @@ const drawDryAdiabats = ({
   xScale,
   yScale,
   svg,
-  dp
+  dp,
+  diagramType
 }) => {
   for (let Tbase = -40; Tbase < 240; Tbase += 10) {
     let Pnew = staticPressureArray[0];
@@ -948,13 +984,15 @@ const drawDryAdiabats = ({
       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];
+    if (diagramType === 'SKEWT') {
+      // 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)');
+    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-${diagramType}d3)`);
   }
 };
 const tempPresDryAiabat = (pressure, pres0, temp0) => temp0 * (pressure / pres0) ** (2.0 / 7.0);
@@ -979,7 +1017,7 @@ const drawDryAdiabatsBijvoet = ({
     const lineGenerator = d3.line();
     const daPathString = lineGenerator(Px);
     const strID = `${Tbase}-dryadiabat`;
-    svg.append('path').attr('id', strID).attr('d', daPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'green').style('opacity', 0.3).attr('clip-path', 'url(#clip-bijvoetd3)');
+    svg.append('path').attr('id', strID).attr('d', daPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'green').style('opacity', 0.3).attr('clip-path', 'url(#clip-BIJVOETd3)');
   }
 };
 
@@ -1006,7 +1044,8 @@ const drawIsohumes = ({
   height,
   xScale,
   yScale,
-  svg
+  svg,
+  diagramType
 }) => {
   for (const isohumeVal of isohumeValues) {
     const Px = [];
@@ -1016,14 +1055,16 @@ const drawIsohumes = ({
       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];
+    if (diagramType === 'SKEWT') {
+      // 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('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-${diagramType}d3)`);
     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');
   }
 };
@@ -1052,7 +1093,7 @@ const drawIsohumesBijvoet = ({
     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-bijvoetd3)');
+    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-BIJVOETd3)');
     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');
   }
 };
@@ -1079,7 +1120,8 @@ const drawIsotherms = ({
   height,
   xScale,
   yScale,
-  svg
+  svg,
+  diagramType
 }) => {
   //  lines of constant temperature (10 degree interval from -80...+40C)
   for (let temp = -80; temp <= 40; temp += 10) {
@@ -1087,12 +1129,11 @@ const drawIsotherms = ({
     for (const pressure of staticPressureArray) {
       const Ppx = yScale(pressure);
       const Tpx = xScale(temp);
-      const skewedX = Tpx + (height - Ppx);
-      points.push([skewedX, Ppx]);
+      points.push([diagramType === 'SKEWT' ? Tpx + (height - Ppx) : Tpx, 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)');
+    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-${diagramType}d3)`);
   }
 };
 const drawIsothermsBijvoet = ({
@@ -1113,8 +1154,8 @@ const drawIsothermsBijvoet = ({
     }
     const lineGenerator = d3.line();
     const pathString = lineGenerator(points);
-    const strID = `${temp}-isotherm-bijvoet`;
-    svg.append('path').attr('id', strID).attr('d', pathString).style('fill', 'none').style('stroke-width', temp % 10 === 0 ? 2 : 1).style('stroke', temp === 0 ? '#D27D2D' : 'orange').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-bijvoetd3)');
+    const strID = `${temp}-isotherm-BIJVOET`;
+    svg.append('path').attr('id', strID).attr('d', pathString).style('fill', 'none').style('stroke-width', temp % 10 === 0 ? 2 : 1).style('stroke', temp === 0 ? '#D27D2D' : 'orange').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-BIJVOETd3)');
     // only show value every 10 degrees and if isotherm reaches bottom of plot
     if (temp % 10 === 0 && points[0] && points[0][1] === height) {
       svg.append('text').text(temp).attr('text-anchor', 'middle').attr('x', `${points[0][0]}px`).attr('y', `${height + 12}px`).attr('fill', temp === 0 ? '#D27D2D' : 'orange').attr('font-size', '10px');
@@ -1143,7 +1184,7 @@ const CP = 1.03e3;
 const L_CONST = 2.5e6;
 const RD = 287.0;
 const RV = 461.0;
-const moistAdiabaticLapserate = (minTemp, pressure, temperature, dp) => {
+const moistAdiabaticLapserate = (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);
@@ -1165,7 +1206,8 @@ const drawMoistAdiabats = ({
   xScale,
   yScale,
   svg,
-  dp
+  dp,
+  diagramType
 }) => {
   /* We need the moist adiabat to cross the isotherm at 1000hPa
      Therefore we start the calculations from 1000hPa and work upwards (towards 0)
@@ -1182,19 +1224,21 @@ const drawMoistAdiabats = ({
     // 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);
+        const DPDT = moistAdiabaticLapserate(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];
+    if (diagramType === 'SKEWT') {
+      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)');
+    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-${diagramType}d3)`);
     // Now work backwards from 1000hPa to calculate most adiabat until the bottom of the plot
     const PxBottom = [];
     PxBottom.push([Tpx1000, Ppx1000]);
@@ -1202,17 +1246,19 @@ const drawMoistAdiabats = ({
     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);
+      const DPDT = moistAdiabaticLapserate(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];
+    if (diagramType === 'SKEWT') {
+      // 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)');
+    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-${diagramType}d3)`);
   }
 };
 const drawMoistAdiabatsBijvoet = ({
@@ -1232,7 +1278,7 @@ const drawMoistAdiabatsBijvoet = ({
     const lineGenerator = d3.line();
     const isoPathString = lineGenerator(Px);
     const strID = `${Tbase}-moistadiabat`;
-    svg.append('path').attr('id', strID).attr('d', isoPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'purple').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-bijvoetd3)');
+    svg.append('path').attr('id', strID).attr('d', isoPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'purple').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-BIJVOETd3)');
   }
 };
 
@@ -1305,6 +1351,7 @@ const drawStaticLines = ({
     });
   } else {
     drawIsotherms({
+      diagramType,
       staticPressureArray,
       height,
       xScale,
@@ -1312,6 +1359,7 @@ const drawStaticLines = ({
       svg
     });
     drawMoistAdiabats({
+      diagramType,
       staticPressureArray,
       minTemperature,
       maxTemperature,
@@ -1325,6 +1373,7 @@ const drawStaticLines = ({
       dp
     });
     drawDryAdiabats({
+      diagramType,
       staticPressureArray,
       height,
       xScale,
@@ -1333,6 +1382,7 @@ const drawStaticLines = ({
       dp
     });
     drawIsohumes({
+      diagramType,
       staticPressureArray,
       height,
       xScale,
@@ -1387,7 +1437,7 @@ const Soundings = ({
     width: svgDimensions?.width || 812,
     height: svgDimensions?.height || 802,
     margin: {
-      top: svgDimensions?.margin?.top || 12,
+      top: svgDimensions?.margin?.top || 4,
       right: svgDimensions?.margin?.right || 20,
       bottom: svgDimensions?.margin?.bottom || 25,
       left: svgDimensions?.margin?.left || 20
@@ -1516,7 +1566,7 @@ const Soundings = ({
       svg.on('mousemove', null);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showTooltip, data]);
+  }, [showTooltip, data, diagramType]);
   useEffect(() => {
     const handleMouseLeave = () => {
       if (pressureRef.current) {
@@ -1557,7 +1607,7 @@ const Soundings = ({
       windRef.current.style.display = 'none';
     }
   }, [data]);
-  return jsxs(Card, {
+  return jsxs(Box, {
     ref: canvasRef,
     sx: {
       position: 'relative',
@@ -1617,7 +1667,7 @@ const Soundings = ({
 const getCollectionLocations = (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/locations`, {
   headers: getHeaders()
 }).then(handleResponse);
-const getCollectionInstance = (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/instances`, {
+const getCollectionInstances = (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/instances`, {
   headers: getHeaders()
 }).then(handleResponse);
 const getEdrCollectionForLocation = (collectionId, baseUrl, instanceId, locationId, parameters, datetime) => {
@@ -1690,6 +1740,32 @@ relHumidity) {
 // Parsing and conversion function
 function parseCoverageCollection(response, parameterMappings) {
   const features = [];
+  const pressureArray = [];
+  const tempArray = [];
+  const dewpointArray = [];
+  const windDirArray = [];
+  const windSpeedArray = [];
+  const windUArray = [];
+  const windVArray = [];
+  const specificHumidityArray = [];
+  const relativeHumidityArray = [];
+  const emtpyDataArray = {
+    time: '',
+    xCoord: NaN,
+    yCoord: NaN,
+    data: {
+      pressureArray,
+      tempArray,
+      dewpointArray,
+      windDirArray,
+      windSpeedArray,
+      windUArray,
+      windVArray,
+      specificHumidityArray,
+      relativeHumidityArray
+    }
+  };
+  const data = {};
   const {
     t: tAxis,
     x: xAxis,
@@ -1706,60 +1782,139 @@ function parseCoverageCollection(response, parameterMappings) {
     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 coverageIdentifier = `${time}-${xCoord}-${yCoord}`;
+    if (data[coverageIdentifier] === undefined) {
+      data[coverageIdentifier] = {
+        ...emtpyDataArray
+      };
+    }
+    data[coverageIdentifier].time = time;
+    data[coverageIdentifier].xCoord = xCoord;
+    data[coverageIdentifier].yCoord = yCoord;
     const zValues = coverage.domain.axes.z.values;
     zValues.forEach((_, zIndex) => {
-      const temp = parseFloat(ranges[parameterMappings.temperature]?.values[zIndex]);
-      const pressureFromRange = parseFloat(ranges[parameterMappings.pressure]?.values[zIndex]);
-      const pressure = !Number.isNaN(pressureFromRange) ? pressureFromRange : parseFloat(zValues[zIndex]);
-      // Extract dewpoint - use fallback calculations if no dewpoint in parameter mappings
-      let dewpoint = NaN;
-      if (parameterMappings.dewpoint) {
-        dewpoint = parseFloat(ranges[parameterMappings.dewpoint]?.values[zIndex]);
-      } else if (parameterMappings.specificHumidity) {
-        const specificHumidity = parseFloat(ranges[parameterMappings.specificHumidity]?.values[zIndex]);
-        dewpoint = dewpointFromSpecificHumidity(specificHumidity / 1000,
-        // from g/kg to kg/kg
-        pressToPascal(pressure));
-      } else if (parameterMappings.relativeHumidity) {
-        const relativeHumidity = parseFloat(ranges[parameterMappings.relativeHumidity]?.values[zIndex]);
-        dewpoint = dewpointFromRelativeHumidity(temp, relativeHumidity);
+      if (data[coverageIdentifier].data.pressureArray.length === zIndex || ranges[parameterMappings.pressure]?.values[zIndex]) {
+        const pressureFromRange = parseFloat(ranges[parameterMappings.pressure]?.values[zIndex]);
+        const pressure = !Number.isNaN(pressureFromRange) ? pressureFromRange : parseFloat(zValues[zIndex]);
+        data[coverageIdentifier].data.pressureArray[zIndex] = pressure;
       }
-      // Extract wind speed and direction - use fallback calculations if no speed and direction in parameter mappings
-      let windSpeed = NaN;
-      if (parameterMappings.windSpeed) {
-        windSpeed = parseFloat(ranges[parameterMappings.windSpeed]?.values[zIndex]);
-      } else if (parameterMappings.windU && parameterMappings.windV) {
-        const windU = parseFloat(ranges[parameterMappings.windU]?.values[zIndex]);
-        const windV = parseFloat(ranges[parameterMappings.windV]?.values[zIndex]);
-        windSpeed = Math.sqrt(windU ** 2 + windV ** 2);
+      if (ranges[parameterMappings.temperature]) {
+        data[coverageIdentifier].data.tempArray.push(parseFloat(ranges[parameterMappings.temperature]?.values[zIndex]));
       }
-      let windDirection = NaN;
-      if (parameterMappings.windDirection) {
-        windDirection = parseFloat(ranges[parameterMappings.windDirection]?.values[zIndex]);
-      } else if (parameterMappings.windU && parameterMappings.windV) {
-        const windU = parseFloat(ranges[parameterMappings.windU]?.values[zIndex]);
-        const windV = parseFloat(ranges[parameterMappings.windV]?.values[zIndex]);
-        windDirection = (Math.atan2(-windU, -windV) * (180 / Math.PI) + 360) % 360;
+      if (parameterMappings.dewpoint && ranges[parameterMappings.dewpoint]) {
+        data[coverageIdentifier].data.dewpointArray.push(parseFloat(ranges[parameterMappings.dewpoint]?.values[zIndex]));
+      } else if (parameterMappings.specificHumidity && ranges[parameterMappings.specificHumidity]) {
+        data[coverageIdentifier].data.specificHumidityArray.push(parseFloat(ranges[parameterMappings.specificHumidity]?.values[zIndex]));
+      } else if (parameterMappings.relativeHumidity && ranges[parameterMappings.relativeHumidity]) {
+        data[coverageIdentifier].data.relativeHumidityArray.push(parseFloat(ranges[parameterMappings.relativeHumidity]?.values[zIndex]));
+      }
+      if (parameterMappings.windSpeed && ranges[parameterMappings.windSpeed]) {
+        data[coverageIdentifier].data.windSpeedArray.push(parseFloat(ranges[parameterMappings.windSpeed]?.values[zIndex]));
+      }
+      if (parameterMappings.windDirection && ranges[parameterMappings.windDirection]) {
+        data[coverageIdentifier].data.windDirArray.push(parseFloat(ranges[parameterMappings.windDirection]?.values[zIndex]));
+      }
+      if (parameterMappings.windU && ranges[parameterMappings.windU]) {
+        data[coverageIdentifier].data.windUArray.push(parseFloat(ranges[parameterMappings.windU]?.values[zIndex]));
+      }
+      if (parameterMappings.windV && ranges[parameterMappings.windV]) {
+        data[coverageIdentifier].data.windVArray.push(parseFloat(ranges[parameterMappings.windV]?.values[zIndex]));
+      }
+    });
+  });
+  // For now we only accept one data set per call so we only take the first one
+  const firstCollectionIdentifier = Object.keys(data)[0];
+  const collectionData = data[firstCollectionIdentifier].data;
+  collectionData.pressureArray.forEach((pressure, index) => {
+    // Extract dewpoint - use fallback calculations if no dewpoint in parameter mappings
+    let dewpoint = NaN;
+    if (parameterMappings.dewpoint) {
+      dewpoint = collectionData.dewpointArray[index];
+    } else if (parameterMappings.specificHumidity) {
+      const specificHumidity = collectionData.specificHumidityArray[index];
+      dewpoint = dewpointFromSpecificHumidity(specificHumidity / 1000,
+      // from g/kg to kg/kg
+      pressToPascal(pressure));
+    } else if (parameterMappings.relativeHumidity) {
+      const relativeHumidity = collectionData.relativeHumidityArray[index];
+      dewpoint = dewpointFromRelativeHumidity(tempArray[index], relativeHumidity);
+    }
+    // Extract wind speed and direction - use fallback calculations if no speed and direction in parameter mappings
+    let windSpeed = NaN;
+    if (parameterMappings.windSpeed) {
+      windSpeed = collectionData.windSpeedArray[index];
+    } else if (parameterMappings.windU && parameterMappings.windV) {
+      const windU = collectionData.windUArray[index];
+      const windV = collectionData.windVArray[index];
+      windSpeed = Math.sqrt(windU ** 2 + windV ** 2);
+    }
+    let windDirection = NaN;
+    if (parameterMappings.windDirection) {
+      windDirection = collectionData.windDirArray[index];
+    } else if (parameterMappings.windU && parameterMappings.windV) {
+      const windU = collectionData.windUArray[index];
+      const windV = collectionData.windVArray[index];
+      windDirection = (Math.atan2(-windU, -windV) * (180 / Math.PI) + 360) % 360;
+    }
+    features.push({
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [data[firstCollectionIdentifier].xCoord, data[firstCollectionIdentifier].yCoord]
+      },
+      properties: {
+        time: data[firstCollectionIdentifier].time,
+        temp: tempArray[index],
+        dewpoint,
+        pressure: pressureArray[index],
+        windSpeed,
+        windDirection
       }
-      features.push({
-        type: 'Feature',
-        geometry: {
-          type: 'Point',
-          coordinates: [xCoord, yCoord]
-        },
-        properties: {
-          time,
-          temp,
-          dewpoint,
-          pressure,
-          windSpeed,
-          windDirection
-        }
-      });
     });
   });
   return features;
 }
+/**
+ * Parse duration with repeats
+ * @param dateString e.g. 'R67/2025-04-22T09:00:00Z/PT60M'
+ * @returns Array of ISO datetime strings, e.g., ['2025-04-22T09:00:00.000Z', ...]
+ */
+const parseDurationWithRepeats = dateString => {
+  const parts = dateString.split('/');
+  const numOfRepeats = Number(parts[0].substring(1));
+  const start = new Date(parts[1]).getTime();
+  const interval = parseISO8601IntervalToDateInterval(parts[2]).getTime();
+  const iterations = range(numOfRepeats);
+  const dateStrings = iterations.map(i => start + i * interval).map(millis => new Date(millis).toISOString());
+  return dateStrings;
+};
+const getTimestepsFromInstance = instance => {
+  const timeExtentValues = instance?.extent?.temporal?.values;
+  if (!timeExtentValues) {
+    return [];
+  }
+  try {
+    // parse the time extent, if needed
+    if (timeExtentValues.length === 1) {
+      const timeExtent = timeExtentValues[0];
+      // duration with repeats
+      if (timeExtent.match(/^R\d+\/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z\/\S+$/)) {
+        return parseDurationWithRepeats(timeExtent);
+      }
+      // format without repeats
+      const parseObject = new ParseISOTimeRangeDuration(timeExtent);
+      const timeValues = range(parseObject.getTimeSteps()).map(timestep => parseObject.getDateAtTimeStep(timestep).toISOString());
+      return timeValues;
+    }
+    // If more than one value, assume time extent is given as individual timesteps.
+    // Pass through toISOString to ensure consistent timestamp format.
+    const isoFormattedValues = timeExtentValues.map(value => new Date(value).toISOString());
+    return isoFormattedValues;
+  } catch (error) {
+    console.warn(error);
+  }
+  return [];
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1795,8 +1950,8 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
     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 === '') {
+        // No collection, location or time selected, don't do EDR call but return empty array
+        if (collectionId === undefined || location === '' || datetime === '') {
           return [];
         }
         try {
@@ -1813,8 +1968,8 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
   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) {
+      // No collection, position or time selected, don't do EDR call but return empty array
+      if (collectionId === undefined || location === undefined || datetime === '') {
         return [];
       }
       try {
@@ -1827,17 +1982,6 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
     }
   };
 };
-const useFakeTime = (collectionId, baseUrl, instanceId) => {
-  return useQuery({
-    queryKey: ['temporary-instance-call', collectionId, instanceId],
-    queryFn: async () => {
-      return fetch(`${baseUrl}/collections/${collectionId}/instances/${instanceId}`, {
-        headers: getHeaders()
-      }).then(handleResponse).then(data => collectionId === undefined || data === undefined ? '' : data.extent.temporal.interval[0][0]);
-    },
-    enabled: !!collectionId && !!instanceId
-  });
-};
 const defaultParameterMappings = {
   temperature: 'temperature',
   windDirection: 'winddirection',
@@ -1854,34 +1998,34 @@ const getParameterMappings = parameterMappings => {
   return Object.keys(parameterMappings).map(key => parameterMappings[key]);
 };
 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]?.url, sources[0]?.instanceId);
   const {
-    data: date1
-  } = useFakeTime(sources[1]?.collectionId, sources[1]?.url, sources[1]?.instanceId);
-  const {
-    data: date2
-  } = useFakeTime(sources[2]?.collectionId, sources[2]?.url, sources[2]?.instanceId);
-  const dates = useMemo(() => [date0, date1, date2], [date0, date1, date2]);
-  const queries = useMemo(() => sources.map(({
-    collectionId,
-    url,
-    instanceId,
-    parameterMappings
-  }, index) => {
-    const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dates[index] || '', parameterMappings || defaultParameterMappings);
-    return queryParams;
-  }), [dates, datetime, locations, sources]);
+    data: timesteps,
+    error: timestepsError,
+    isPending: timestepsPending
+  } = useTimesteps(sources);
+  const queries = useMemo(() => {
+    return sources.map(({
+      collectionId,
+      url,
+      instanceId,
+      parameterMappings
+    }, index) => {
+      // If acceptance time logic is needed, it could come here.
+      const dateToUse = datetime &&
+      // Only use selected time if exact match if found
+      timesteps[index].includes(new Date(datetime).toISOString()) ? datetime : '';
+      const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dateToUse || '', parameterMappings || defaultParameterMappings);
+      return queryParams;
+    });
+  }, [datetime, locations, sources, timesteps]);
   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;
+      const isPending = timestepsPending || queryResults.some(result => result.isPending);
+      const error = timestepsError || queryResults.find(result => result?.error)?.error;
       return {
         data,
         isPending,
@@ -1890,6 +2034,41 @@ const useMultipleSources = (sources, locations, datetime) => {
     }
   });
 };
+const useTimesteps = sourceSelections => {
+  const queries = React.useMemo(() => sourceSelections.map(({
+    collectionId,
+    instanceId,
+    url
+  }) => ({
+    queryKey: ['edr-soundings-instances', collectionId],
+    queryFn: async () => {
+      const data = await getCollectionInstances(collectionId, url);
+      return data;
+    },
+    select: data => {
+      const instance = data.instances.find(instance => instance.id === instanceId);
+      return getTimestepsFromInstance(instance);
+    }
+  })), [sourceSelections]);
+  const results = useQueries({
+    queries,
+    combine: queryResults => {
+      const data = queryResults.map(result => result.data || []);
+      // The underlying query is generic, so we rewrap the error to be more specific
+      const foundError = queryResults.find(result => result?.error)?.error;
+      const error = foundError ? new Error('Error fetching timesteps by collection', {
+        cause: foundError
+      }) : null;
+      const isPending = queryResults.some(result => result.isPending);
+      return {
+        data,
+        error,
+        isPending
+      };
+    }
+  });
+  return results;
+};
 const useGetCollectionsInstances = (collections, isDialogOpen) => {
   const collectionIds = useMemo(() => collections?.map(collection => {
     return {
@@ -1904,7 +2083,7 @@ const useGetCollectionsInstances = (collections, isDialogOpen) => {
     return {
       queryKey: ['edr-soundings-instances', id],
       queryFn: async () => {
-        const data = await getCollectionInstance(id, url);
+        const data = await getCollectionInstances(id, url);
         return data;
       },
       enabled: isDialogOpen
@@ -2002,6 +2181,16 @@ const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
 });
 const useSoundingsTranslation = () => useTranslation(ns);
 
+const MAX_LABEL_COUNT = 15;
+const shouldHideLabel = (nItems, index) => {
+  const nthLabelsToShow = Math.ceil(nItems / MAX_LABEL_COUNT);
+  return nItems > MAX_LABEL_COUNT &&
+  // hide labels if too many items
+  index !== nItems - 1 && (
+  // not last item (always shown)
+  // only show every nth label, skip label within last n/2 items so end doesn't get cluttered
+  index % nthLabelsToShow !== 0 || nItems - 1 - index < nthLabelsToShow / 2);
+};
 const SoundingsTimeSlider = ({
   timesteps,
   selectedTime,
@@ -2010,9 +2199,9 @@ const SoundingsTimeSlider = ({
   const {
     i18n
   } = useSoundingsTranslation();
-  const marks = timesteps.filter(date => dateUtils.isValidIsoDateString(date)).map(date => ({
+  const marks = timesteps.filter(date => dateUtils.isValidIsoDateString(date)).map((date, index, arr) => ({
     value: dateUtils.unix(dateUtils.getUtcFromString(date)),
-    label: dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
+    label: shouldHideLabel(arr.length, index) ? '' : dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
   }));
   const onStepBackward = React.useCallback(() => {
     const currentIndex = timesteps.indexOf(selectedTime);
@@ -2027,12 +2216,15 @@ const SoundingsTimeSlider = ({
   return jsxs("div", {
     style: {
       display: 'flex',
-      marginTop: '17px'
+      marginTop: '40px',
+      marginRight: '4rem'
     },
     children: [jsxs("div", {
       style: {
         minWidth: '60px',
-        marginTop: '2px'
+        marginTop: '2px',
+        display: 'flex',
+        gap: '4px'
       },
       children: [jsx(BackwardForwardStepButton, {
         isForwardStep: false,
@@ -2051,7 +2243,7 @@ const SoundingsTimeSlider = ({
       disabled: true
     }) : jsx(CustomSlider, {
       orientation: "horizontal",
-      valueLabelDisplay: "auto",
+      valueLabelDisplay: "on",
       valueLabelFormat: value => dateUtils.dateToString(dateUtils.fromUnix(value), "yyyy iii dd MMM HH:mm 'UTC'", true, i18n.language),
       marks: marks,
       step: null,
@@ -2061,6 +2253,21 @@ const SoundingsTimeSlider = ({
       onChange: (_, value) => {
         updateSelectedTime(dateUtils.fromUnix(value).toISOString());
       },
+      // Workaround for MUI bug where labels are just draggable area and clicking on one
+      // does not necessarily select the described timestep
+      slotProps: {
+        markLabel: {
+          onPointerDown: event => {
+            event.preventDefault();
+            const markIndex = event.currentTarget.getAttribute('data-index');
+            const mark = marks[Number(markIndex)];
+            const {
+              value
+            } = mark;
+            updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+          }
+        }
+      },
       extraStyles: {
         margin: '0px 20px 0px 20px',
         '.MuiSlider-markLabel': {
@@ -2174,19 +2381,41 @@ const getSelectedSourcesIds = createSelector(getSelectedSources, activeSources =
   return activeSources.map(source => source.collectionId);
 }, selectorMemoizationOptions);
 
-const SoundingsTimeSliderConnect = ({
-  timesteps
-}) => {
+const roundToClosestTimestep = (timeToRound, availableSteps) => {
+  if (availableSteps.length > 0 && !availableSteps.includes(timeToRound)) {
+    const selectionValue = dateUtils.unix(new Date(timeToRound));
+    const closestTimestep = minBy(availableSteps, timeValue =>
+    // distance to selected time
+    Math.abs(selectionValue - dateUtils.unix(new Date(timeValue))));
+    return closestTimestep || availableSteps[0];
+  }
+  return timeToRound;
+};
+const SoundingsTimeSliderConnect = () => {
   const selectedTime = useSelector(getSelectedTime);
+  const sourceSelections = useSelector(getSelectedSources);
   const dispatch = useDispatch();
   const updateSelectedTime = React.useCallback(selectedTime => {
     dispatch(soundingsActions.updateSelectedTime({
       selectedTime
     }));
   }, [dispatch]);
+  const {
+    data: timesteps
+  } = useTimesteps(sourceSelections);
+  const mergedTimesteps = Array.from(new Set(timesteps.flat())).sort();
+  // TODO: next line should work in Storybook but does not: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4025
+  // const mergedTimesteps =  [...new Set(timestepArrays.flat())].sort();
+  // Ensure that the selected time is always one of the available timesteps
+  const validSelectedTime = roundToClosestTimestep(selectedTime, mergedTimesteps);
+  useEffect(() => {
+    if (selectedTime !== validSelectedTime) {
+      updateSelectedTime(validSelectedTime);
+    }
+  }, [selectedTime, updateSelectedTime, validSelectedTime]);
   return jsx(SoundingsTimeSlider, {
-    timesteps: timesteps,
-    selectedTime: selectedTime,
+    timesteps: mergedTimesteps,
+    selectedTime: validSelectedTime,
     updateSelectedTime: updateSelectedTime
   });
 };
@@ -2275,18 +2504,92 @@ const MenuBarConnect = ({
   });
 };
 
+const soundingDiagrams = ['SKEWT', 'BIJVOET', 'EMAGRAM'];
+
+const DiagramTypeButton = ({
+  diagramType,
+  setDiagramType
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const isOpen = Boolean(anchorEl);
+  const handleClick = event => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+  return jsxs(CustomToggleButton, {
+    variant: "tool",
+    selected: isOpen,
+    onClick: handleClick,
+    "data-testid": "soundings-diagramtype-options-toolbutton",
+    disableRipple: true,
+    size: "small",
+    sx: {
+      height: '24px !important',
+      width: '75px'
+    },
+    role: "button",
+    children: [getDiagramName(t, diagramType), jsxs(Menu, {
+      autoFocus: false,
+      slotProps: {
+        backdrop: {
+          style: {
+            opacity: 0,
+            transition: 'none'
+          }
+        }
+      },
+      open: isOpen,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: 21,
+        horizontal: 6
+      },
+      sx: {
+        '& .MuiMenu-list': {
+          padding: 0
+        },
+        '& .MuiMenuItem-root': {
+          fontSize: 16
+        }
+      },
+      children: [jsx(ListSubheader, {
+        sx: {
+          paddingTop: '8px'
+        },
+        children: jsx(Typography, {
+          sx: {
+            letterSpacing: '0.4px',
+            fontSize: 12
+          },
+          children: t('options')
+        })
+      }), soundingDiagrams.map(id => jsx(MenuItem, {
+        onClick: () => {
+          setDiagramType(id);
+        },
+        selected: diagramType === id,
+        children: getDiagramName(t, id)
+      }, id))]
+    })]
+  });
+};
+
+const size = 600;
 const SoundingsConnect = ({
-  viewId
+  viewId,
+  diagramType = 'SKEWT'
 }) => {
-  // TODO: use in follow-up: https://gitlab.com/opengeoweb/opengeoweb/-/issues/5991
-  // const selectedTime = useSelector(getSelectedTime);
+  const [chosenDiagramType, setChosenDiagramType] = React.useState(diagramType);
+  const selectedTime = useSelector(getSelectedTime);
   const sourceSelections = useSelector(getSelectedSources);
   const locationSelections = useSelector(getLocationSelections);
   const {
     error,
     data,
     isPending
-  } = useMultipleSources(sourceSelections, locationSelections);
+  } = useMultipleSources(sourceSelections, locationSelections, selectedTime);
   return jsxs(Fragment, {
     children: [error && jsx(AlertBanner, {
       title: error.message,
@@ -2308,24 +2611,34 @@ const SoundingsConnect = ({
         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: []
-      })]
+      }), jsxs(Card, {
+        children: [jsx(Box, {
+          sx: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            paddingTop: '2px',
+            paddingRight: '2px',
+            width: size
+          },
+          children: jsx(DiagramTypeButton, {
+            diagramType: chosenDiagramType,
+            setDiagramType: setChosenDiagramType
+          })
+        }), jsx(Soundings, {
+          data: data,
+          svgDimensions: {
+            width: size,
+            height: size,
+            margin: {
+              bottom: 0,
+              left: 0,
+              right: 0,
+              top: 0
+            }
+          },
+          diagramType: chosenDiagramType
+        })]
+      }), jsx(SoundingsTimeSliderConnect, {})]
     })]
   });
 };
@@ -2379,7 +2692,8 @@ const SoundingsSourceMenu = ({
       children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(collection => {
         const {
           isChecked,
-          instanceId
+          instanceId,
+          url
         } = sourceSelections[collection.id] || {};
         const hasInstances = collection.instances.length > 0;
         const selectedInstanceId = instanceId || collection.instances[0]?.id || undefined;
@@ -2392,6 +2706,7 @@ const SoundingsSourceMenu = ({
             children: jsx(Checkbox, {
               checked: !!isChecked,
               onChange: event => updateCollection(collection.id, {
+                url,
                 isChecked: event.target.checked,
                 instanceId: selectedInstanceId
               }),
@@ -2405,6 +2720,7 @@ const SoundingsSourceMenu = ({
             skipLocalStyling: false,
             value: selectedInstanceId || t('noInstancesAvailable'),
             onChange: event => updateCollection(collection.id, {
+              url,
               instanceId: event.target.value
             }),
             renderValue: value => jsx(Box, {
@@ -2682,7 +2998,8 @@ const soundingsComponentType = 'Soundings';
 const soundingsLookUp = payload => {
   if (payload.componentType === soundingsComponentType) {
     return jsx(SoundingsConnect, {
-      viewId: payload.id
+      viewId: payload.id,
+      diagramType: payload.diagramType ? payload.diagramType : 'SKEWT'
     });
   }
   return null;
@@ -2716,4 +3033,4 @@ const createMockStore = mockState => configureStore({
   middleware: getDefaultMiddleware => getDefaultMiddleware().concat(storeMiddlewares)
 });
 
-export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsConnect, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingsComponentType, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };
+export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsConnect, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingDiagrams, soundingsComponentType, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };