@opengeoweb/soundings 12.6.0 → 12.7.0

package/index.esm.js

@@ -1,13 +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 } from '@tanstack/react-query';
 import { getHeaders, handleResponse } from '@opengeoweb/api';
 import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval } from '@opengeoweb/webmap';
-import { range } from 'lodash';
+import { range, minBy } from 'lodash';
 import { timesliderTranslations, TIMESLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/timeslider';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
@@ -23,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",
@@ -31,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",
@@ -39,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",
@@ -47,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,
@@ -158,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);
@@ -229,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,
@@ -237,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) => {
@@ -271,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
@@ -283,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,
@@ -300,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]);
 };
@@ -314,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];
 };
@@ -830,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',
@@ -857,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);
@@ -938,7 +971,8 @@ const drawDryAdiabats = ({
   xScale,
   yScale,
   svg,
-  dp
+  dp,
+  diagramType
 }) => {
   for (let Tbase = -40; Tbase < 240; Tbase += 10) {
     let Pnew = staticPressureArray[0];
@@ -950,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);
@@ -981,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)');
   }
 };
 
@@ -1008,7 +1044,8 @@ const drawIsohumes = ({
   height,
   xScale,
   yScale,
-  svg
+  svg,
+  diagramType
 }) => {
   for (const isohumeVal of isohumeValues) {
     const Px = [];
@@ -1018,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');
   }
 };
@@ -1054,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');
   }
 };
@@ -1081,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) {
@@ -1089,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 = ({
@@ -1115,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');
@@ -1145,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);
@@ -1167,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)
@@ -1184,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]);
@@ -1204,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 = ({
@@ -1234,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)');
   }
 };
 
@@ -1307,6 +1351,7 @@ const drawStaticLines = ({
     });
   } else {
     drawIsotherms({
+      diagramType,
       staticPressureArray,
       height,
       xScale,
@@ -1314,6 +1359,7 @@ const drawStaticLines = ({
       svg
     });
     drawMoistAdiabats({
+      diagramType,
       staticPressureArray,
       minTemperature,
       maxTemperature,
@@ -1327,6 +1373,7 @@ const drawStaticLines = ({
       dp
     });
     drawDryAdiabats({
+      diagramType,
       staticPressureArray,
       height,
       xScale,
@@ -1335,6 +1382,7 @@ const drawStaticLines = ({
       dp
     });
     drawIsohumes({
+      diagramType,
       staticPressureArray,
       height,
       xScale,
@@ -1389,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
@@ -1518,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) {
@@ -1559,7 +1607,7 @@ const Soundings = ({
       windRef.current.style.display = 'none';
     }
   }, [data]);
-  return jsxs(Card, {
+  return jsxs(Box, {
     ref: canvasRef,
     sx: {
       position: 'relative',
@@ -1902,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 {
@@ -1920,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 {
@@ -1950,23 +1998,34 @@ const getParameterMappings = parameterMappings => {
   return Object.keys(parameterMappings).map(key => parameterMappings[key]);
 };
 const useMultipleSources = (sources, locations, datetime) => {
-  const queries = useMemo(() => sources.map(({
-    collectionId,
-    url,
-    instanceId,
-    parameterMappings
-  }) => {
-    const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', datetime || '', parameterMappings || defaultParameterMappings);
-    return queryParams;
-  }), [datetime, locations, sources]);
+  const {
+    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,
@@ -1994,8 +2053,18 @@ const useTimesteps = sourceSelections => {
   const results = useQueries({
     queries,
     combine: queryResults => {
-      const timestepArrays = queryResults.map(result => result.data).filter(steps => !!steps);
-      return timestepArrays;
+      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;
@@ -2312,6 +2381,16 @@ const getSelectedSourcesIds = createSelector(getSelectedSources, activeSources =
   return activeSources.map(source => source.collectionId);
 }, selectorMemoizationOptions);
 
+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);
@@ -2321,13 +2400,22 @@ const SoundingsTimeSliderConnect = () => {
       selectedTime
     }));
   }, [dispatch]);
-  const timesteps = useTimesteps(sourceSelections);
+  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: mergedTimesteps,
-    selectedTime: selectedTime,
+    selectedTime: validSelectedTime,
     updateSelectedTime: updateSelectedTime
   });
 };
@@ -2416,9 +2504,84 @@ 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'
 }) => {
+  const [chosenDiagramType, setChosenDiagramType] = React.useState(diagramType);
   const selectedTime = useSelector(getSelectedTime);
   const sourceSelections = useSelector(getSelectedSources);
   const locationSelections = useSelector(getLocationSelections);
@@ -2448,18 +2611,33 @@ 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
-          }
-        }
+      }), 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, {})]
     })]
   });
@@ -2820,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;
@@ -2854,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/soundings",
-  "version": "12.6.0",
+  "version": "12.7.0",
   "description": "GeoWeb soundings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,21 +8,21 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/api": "12.6.0",
+    "@opengeoweb/api": "12.7.0",
     "@tanstack/react-query": "^5.69.2",
     "react": "^18.3.1",
     "d3": "^7.9.0",
     "react-i18next": "^15.1.1",
     "i18next": "^25.0.1",
-    "@opengeoweb/shared": "12.6.0",
+    "@opengeoweb/shared": "12.7.0",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "12.6.0",
+    "@opengeoweb/store": "12.7.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "12.6.0",
+    "@opengeoweb/theme": "12.7.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/timeslider": "12.6.0",
+    "@opengeoweb/timeslider": "12.7.0",
     "react-window": "^1.8.10",
-    "@opengeoweb/webmap": "12.6.0",
+    "@opengeoweb/webmap": "12.7.0",
     "lodash": "^4.17.21"
   },
   "module": "./index.esm.js",

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

@@ -22,7 +22,11 @@ export declare const useMultipleSources: (sources: SourceType[], locations: Reco
     isPending: boolean;
     error: Error | null | undefined;
 };
-export declare const useTimesteps: (sourceSelections: SourceType[]) => string[][];
+export declare const useTimesteps: (sourceSelections: SourceType[]) => {
+    data: string[][];
+    error: Error | null;
+    isPending: boolean;
+};
 export declare const useGetCollectionsInstances: (collections?: SoundingsCollection[], isDialogOpen?: boolean) => {
     data: SoundingsCollectionsWithInstances[] | undefined;
     isPending: boolean;

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

@@ -31,4 +31,5 @@ export type SoundingsInstance = EDRInstance;
 export interface SoundingsInstances {
     instances: SoundingsInstance[];
 }
-export type SoundingDiagramType = 'SKEWT' | 'BIJVOET';
+export declare const soundingDiagrams: readonly ["SKEWT", "BIJVOET", "EMAGRAM"];
+export type SoundingDiagramType = (typeof soundingDiagrams)[number];

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

@@ -9,4 +9,5 @@ interface SoundingsStoreWrapperProps {
     store?: Store;
 }
 export declare const SoundingsStoreProvider: React.FC<SoundingsStoreWrapperProps>;
+export declare const SoundingsStoryStoreProvider: React.FC<SoundingsStoreWrapperProps>;
 export {};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SoundingDiagramType } from '../../api/edr-api/types';
+interface DiagramTypeButtonProps {
+    diagramType: SoundingDiagramType;
+    setDiagramType: (diagramType: SoundingDiagramType) => void;
+}
+export declare const DiagramTypeButton: ({ diagramType, setDiagramType, }: DiagramTypeButtonProps) => React.ReactElement;
+export {};

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

@@ -3,7 +3,9 @@ import { Soundings } from './Soundings';
 declare const meta: Meta<typeof Soundings>;
 export default meta;
 type Story = StoryObj<typeof Soundings>;
-export declare const SoundingsExample: Story;
-export declare const SoundingsExampleDark: Story;
+export declare const SoundingsSkewTExample: Story;
+export declare const SoundingsSkewTExampleDark: Story;
+export declare const SoundingsEmagramExample: Story;
+export declare const SoundingsEmagramExampleDark: Story;
 export declare const SoundingsBijvoetExample: Story;
 export declare const SoundingsBijvoetExampleDark: Story;

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

@@ -1,6 +1,8 @@
 import React from 'react';
+import { SoundingDiagramType } from '../../api/edr-api/types';
 interface SoundingsConnectProps {
     viewId: string;
+    diagramType?: SoundingDiagramType;
 }
-export declare const SoundingsConnect: ({ viewId, }: SoundingsConnectProps) => React.ReactElement;
+export declare const SoundingsConnect: ({ viewId, diagramType, }: SoundingsConnectProps) => React.ReactElement;
 export {};

package/src/lib/components/Soundings/SoundingsConnect.stories.d.ts

@@ -1,8 +1,13 @@
+import { StoryObj } from '@storybook/react/*';
+import { SoundingsConnect } from '..';
 declare const _default: {
     title: string;
     tags: string[];
 };
 export default _default;
+type Story = StoryObj<typeof SoundingsConnect>;
+export declare const SoundingsConnectStory: Story;
+export declare const SoundingsConnectStoryDark: Story;
 export declare const SoundingsConnectLoading: {
     (): React.ReactElement;
     parameters: {

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import * as d3 from 'd3';
+import { i18n, TFunction } from 'i18next';
 import { SoundingDiagramType } from '../../api/edr-api/types';
 import { ScalesType } from './types';
 export declare const SOUNDING_COLORS: string[];
@@ -38,6 +39,7 @@ interface PlotSounding {
     svg: d3.Selection<SVGElement, unknown, HTMLElement, undefined>;
     diagramType: SoundingDiagramType;
 }
+export declare const getDiagramName: (t: TFunction<'soundings', i18n>, diagramType: SoundingDiagramType) => string;
 export declare const initializeSvg: ({ svgRef, width, height, margin, diagramType, }: InitializeSvg) => d3.Selection<SVGGElement, unknown, null, undefined>;
 export declare const createScales: (diagramType: SoundingDiagramType, width: number, height: number, minPressure: number, maxPressure: number, minTemperature: number, maxTemperature: number) => [ScalesType, ScalesType];
 export declare const drawAxes: ({ svg, xScale, yScale, height, diagramType, }: DrawAxis) => void;

package/src/lib/components/StaticLines/drawDryAdiabats.d.ts

@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import { ScalesType } from '../Soundings/types';
+import { SoundingDiagramType } from '../../api/edr-api/types';
 interface DrawDryAdiabatsProps {
     staticPressureArray: number[];
     height: number;
@@ -7,8 +8,9 @@ interface DrawDryAdiabatsProps {
     yScale: ScalesType;
     dp: number;
     svg: d3.Selection<SVGElement, unknown, HTMLElement, unknown>;
+    diagramType: SoundingDiagramType;
 }
-export declare const drawDryAdiabats: ({ staticPressureArray, height, xScale, yScale, svg, dp, }: DrawDryAdiabatsProps) => void;
+export declare const drawDryAdiabats: ({ staticPressureArray, height, xScale, yScale, svg, dp, diagramType, }: DrawDryAdiabatsProps) => void;
 interface DrawDryAdiabatsBijvoetProps {
     staticPressureArray: number[];
     xScale: ScalesType;

package/src/lib/components/StaticLines/drawIsohumes.d.ts

@@ -1,13 +1,15 @@
 import * as d3 from 'd3';
 import { ScalesType } from '../Soundings/types';
+import { SoundingDiagramType } from '../../api/edr-api/types';
 interface DrawIsohumesProps {
     staticPressureArray: number[];
     height: number;
     xScale: ScalesType;
     yScale: ScalesType;
     svg: d3.Selection<SVGElement, unknown, HTMLElement, unknown>;
+    diagramType: SoundingDiagramType;
 }
-export declare const drawIsohumes: ({ staticPressureArray, height, xScale, yScale, svg, }: DrawIsohumesProps) => void;
+export declare const drawIsohumes: ({ staticPressureArray, height, xScale, yScale, svg, diagramType, }: DrawIsohumesProps) => void;
 interface DrawIsohumesBijvoetProps {
     staticPressureArray: number[];
     height: number;

package/src/lib/components/StaticLines/drawIsotherms.d.ts

@@ -1,13 +1,15 @@
 import * as d3 from 'd3';
 import { ScalesType } from '../Soundings/types';
+import { SoundingDiagramType } from '../../api/edr-api/types';
 interface DrawIsothermsProps {
     staticPressureArray: number[];
     height: number;
     xScale: ScalesType;
     yScale: ScalesType;
     svg: d3.Selection<SVGElement, unknown, HTMLElement, unknown>;
+    diagramType: SoundingDiagramType;
 }
-export declare const drawIsotherms: ({ staticPressureArray, height, xScale, yScale, svg, }: DrawIsothermsProps) => void;
+export declare const drawIsotherms: ({ staticPressureArray, height, xScale, yScale, svg, diagramType, }: DrawIsothermsProps) => void;
 interface DrawIsothermsBijvoetProps {
     staticPressureArray: number[];
     xScale: ScalesType;

package/src/lib/components/StaticLines/drawMoistAdiabats.d.ts

@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import { ScalesType } from '../Soundings/types';
+import { SoundingDiagramType } from '../../api/edr-api/types';
 interface DrawMoistAdiabatsProps {
     staticPressureArray: number[];
     minTemperature: number;
@@ -12,8 +13,9 @@ interface DrawMoistAdiabatsProps {
     xScale: ScalesType;
     yScale: ScalesType;
     svg: d3.Selection<SVGElement, unknown, HTMLElement, unknown>;
+    diagramType: SoundingDiagramType;
 }
-export declare const drawMoistAdiabats: ({ staticPressureArray, minTemperature, maxTemperature, minPressure, maxPressure, width, height, xScale, yScale, svg, dp, }: DrawMoistAdiabatsProps) => void;
+export declare const drawMoistAdiabats: ({ staticPressureArray, minTemperature, maxTemperature, minPressure, maxPressure, width, height, xScale, yScale, svg, dp, diagramType, }: DrawMoistAdiabatsProps) => void;
 interface DrawMoistAdiabatsBijvoetProps {
     minPressure: number;
     maxPressure: number;

package/src/lib/utils/soundingsLookUp.d.ts

@@ -1,8 +1,10 @@
+import { SoundingDiagramType } from '../api/edr-api/types';
 export declare const soundingsComponentType = "Soundings";
 export interface SoundingsLookUpPayload {
     componentType: typeof soundingsComponentType;
     id: string;
     title?: string;
+    diagramType?: SoundingDiagramType;
     initialProps: Record<string, unknown>;
 }
 export declare const soundingsLookUp: (payload: SoundingsLookUpPayload) => React.JSX.Element | null;