@opengeoweb/soundings 12.4.2 → 12.6.0

package/index.esm.js

@@ -4,8 +4,10 @@ import { Card, Box, Stack, LinearProgress, List, ListItem, ListItemIcon, Checkbo
 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 } from 'lodash';
 import { timesliderTranslations, TIMESLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/timeslider';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
@@ -54,6 +56,119 @@ var soundingsTranslations = {
 	fi: fi
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+// Define pressure and temperature values for static lines
+const maxPressure = 1050;
+const minPressure = 150;
+const staticPressureArray = [maxPressure];
+const dp = -5;
+const minTemperature = -40;
+const maxTemperature = 40.6;
+let pressure = maxPressure;
+while (pressure > minPressure) {
+  pressure += dp;
+  staticPressureArray.push(pressure);
+}
+// Bijvoet constants
+const T_KAPPA = 0.2857;
+const T_KTHETA = 332.0;
+const KELVIN = 273.156;
+const WV_CA = 17.56881;
+const WV_CB = 241.8945;
+const WV_CE = 610.7;
+const EPSILON = 0.622;
+const R_AIR = 287.04;
+const HEATCP = 1005;
+const REFERENCE_PRESSURE = 1000 * 100; // 1000hPa = 100000Pa
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const tempToKelvin = value => value + KELVIN;
+// Calculate pressure in Pa instead of hPa
+const pressToPascal = value => value * 100;
+const bijvoetInterpolationTheta = (minRange, maxRange) => {
+  return t => {
+    const min = minTemperature + KELVIN;
+    const max = maxTemperature + KELVIN;
+    const xCoord = (Math.sign(t - T_KTHETA) * Math.abs(t - T_KTHETA) ** T_KAPPA - Math.sign(min - T_KTHETA) * Math.abs(min - T_KTHETA) ** T_KAPPA) / (Math.sign(max - T_KTHETA) * Math.abs(max - T_KTHETA) ** T_KAPPA - Math.sign(min - T_KTHETA) * Math.abs(min - T_KTHETA) ** T_KAPPA);
+    return minRange * (1 - xCoord) + maxRange * xCoord;
+  };
+};
+const bijvoetInterpolationPres = (minRange, maxRange) => {
+  return t => {
+    const yCoord = (pressToPascal(t) ** T_KAPPA - pressToPascal(minPressure) ** T_KAPPA) / (pressToPascal(maxPressure) ** T_KAPPA - pressToPascal(minPressure) ** T_KAPPA);
+    return minRange * (1 - yCoord) + maxRange * yCoord;
+  };
+};
+// Returns pressure in hPa
+const pressureFromPosition = y => {
+  return (y * (pressToPascal(maxPressure) ** T_KAPPA - pressToPascal(minPressure) ** T_KAPPA) + pressToPascal(minPressure) ** T_KAPPA) ** (1 / T_KAPPA) / 100;
+};
+const calculateESat = temperature => {
+  const tempKelvin = temperature - KELVIN;
+  return WV_CE * Math.exp(WV_CA * tempKelvin / (tempKelvin + WV_CB));
+};
+const latHeat = temperature => {
+  return R_AIR / EPSILON * WV_CA * WV_CB * (temperature / (temperature - KELVIN + WV_CB)) ** 2;
+};
+const dTdp = (pressure, temperature) => {
+  const eSat = calculateESat(temperature);
+  const Rs = EPSILON * eSat / (pressure - eSat);
+  const Lv = latHeat(temperature);
+  const dTdp = 2.0 * temperature / (7.0 * pressure);
+  const dTdp1 = dTdp * (1.0 + Rs * Lv / (R_AIR * temperature));
+  const dTdp2 = dTdp1 / (1.0 + Rs / (7.0 * EPSILON) + (Lv / temperature) ** 2 * Rs * EPSILON / (R_AIR * HEATCP));
+  return dTdp2;
+};
+const calculateThetaFromPressTemp = (pressure, temperature, basePressure) => {
+  const base = basePressure || REFERENCE_PRESSURE;
+  const dpPascal = pressure > base ? pressToPascal(-10) : pressToPascal(10); // hPa steps to Pa steps
+  const numberOfSteps = Math.round((base - pressure) / dpPascal) < 1 ? 1 : Math.round((base - pressure) / dpPascal);
+  const pstep = (base - pressure) / numberOfSteps;
+  let tempN = temperature;
+  let pressureN = pressure;
+  for (let n = 0; n < numberOfSteps; n += 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);
+    const k4 = pstep * dTdp(pressureN + pstep, tempN + k3);
+    tempN += k1 / 6.0 + k2 / 3.0 + k3 / 3.0 + k4 / 6.0;
+    pressureN += pstep;
+  }
+  return tempN;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -73,22 +188,25 @@ var soundingsTranslations = {
  * */
 const isobarValues = [200, 300, 400, 500, 700, 850, 925, 1000];
 const drawIsobars = ({
+  diagramType,
   minTemperature,
   maxTemperature,
   xScale,
   yScale,
   svg
 }) => {
-  // Calculate X and Y coordinates for each pressure level
+  // For Bijvoet, the x-axis is NOT temperature but theta_es
+  const xmin = diagramType === 'BIJVOET' ? tempToKelvin(minTemperature) : minTemperature;
+  const xmax = diagramType === 'BIJVOET' ? tempToKelvin(maxTemperature) : maxTemperature;
   for (const pressureVal of isobarValues) {
     const Px = [];
-    const tempBounds = [minTemperature, maxTemperature];
+    const tempBounds = [xmin, xmax];
     for (const bound of tempBounds) {
       Px.push([xScale(bound), yScale(pressureVal)]);
     }
     const lineGenerator = d3.line();
     const isoPathString = lineGenerator(Px);
-    const strID = `${pressureVal}textId`;
+    const strID = `${pressureVal}-isobar`;
     svg.append('path').attr('id', strID).attr('type', 'isobar').attr('d', isoPathString).style('fill', 'none').style('stroke-width', 1.5).style('stroke', '#B5B51F').style('stroke-opacity', 0.5);
   }
 };
@@ -116,37 +234,56 @@ const initializeSvg = ({
   svgRef,
   width,
   height,
-  margin
+  margin,
+  diagramType
 }) => {
-  const svg = d3.select(svgRef.current).attr('width', width + (margin.left + margin.right)).attr('height', height + (margin.top + margin.bottom)).attr('id', 'skewT').attr('data-testid', 'skewT').append('g').attr('transform', `translate(${margin.left + margin.right},${margin.top})`);
-  svg.append('clipPath').attr('id', 'clip-skewTd3').append('rect').attr('width', width).attr('height', height).attr('x', 0).attr('y', 0);
-  svg.append('rect').attr('height', height).attr('width', width).attr('fill', '#ffffff00').attr('opacity', 1).attr('id', 'skewTd3').attr('clip-path', 'url(#clip-skewTd3)');
+  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)`);
   return svg;
 };
+const createScales = (diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature) => {
+  if (diagramType === 'BIJVOET') {
+    // Note, for Bijvoet, the x-axis is NOT temperature but theta_es
+    // Both axis aren't linear nor logarithmic, hence we need an interpolation function to determine (x,y) based on (theta_es,p)
+    // These scales work the same as for SkewT -> you pass in a pressure (or theta value) and you receive the location in the svg
+    const xScale = d3.scaleLinear().domain([0, 1]).range([0, width]).interpolate(bijvoetInterpolationTheta);
+    const yScale = d3.scaleLinear().domain([1, 0]).range([height, 0]).interpolate(bijvoetInterpolationPres);
+    return [xScale, yScale];
+  }
+  const xScale = d3.scaleLinear().domain([minTemperature, maxTemperature]).range([0, width]);
+  const yScale = d3.scaleLog().domain([maxPressure, minPressure]).range([height, 0]);
+  return [xScale, yScale];
+};
 const drawAxes = ({
   svg,
   xScale,
   yScale,
-  height
+  height,
+  diagramType
 }) => {
-  // Create x-axis with intervals
-  const xTicks = xScale.ticks(10);
-  const xMiddleValue = xTicks[Math.floor(xTicks.length / 2)];
-  svg.append('g').attr('type', 'x-axis').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).tickValues(xTicks).tickSizeInner(0).tickSizeOuter(0));
-  // Reformat in the case of the middle tick label
-  // to add the unit part
-  svg.selectAll('g[type="x-axis"] .tick').filter(function () {
-    return parseInt(d3.select(this).select('text').text(), 10) === xMiddleValue;
-  }).each(function () {
-    const unitPart = '°C';
-    d3.select(this).select('text')
-    // tspan necessary to use a different font-size
-    .append('tspan').text(unitPart).attr('font-size', '11px').attr('dy', '0.04em');
-  });
+  // For Bijvoet, we don't show an x-axis as we're interested in the isotherms only, not theta
+  if (diagramType !== 'BIJVOET') {
+    // Create x-axis with intervals
+    const xTicks = xScale.ticks(10);
+    const xMiddleValue = xTicks[Math.floor(xTicks.length / 2)];
+    svg.append('g').attr('type', 'x-axis').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).tickValues(xTicks).tickSizeInner(0).tickSizeOuter(0));
+    // Reformat in the case of the middle tick label
+    // to add the unit part
+    svg.selectAll('g[type="x-axis"] .tick').filter(function () {
+      return parseInt(d3.select(this).select('text').text(), 10) === xMiddleValue;
+    }).each(function () {
+      const unitPart = '°C';
+      d3.select(this).select('text')
+      // tspan necessary to use a different font-size
+      .append('tspan').text(unitPart).attr('font-size', '11px').attr('dy', '0.04em');
+    });
+  }
   // Create y-axis with intervals
   // Make sure all zeroes are printed (1000 vs 1k)
   const formatTicks = d3.format('.0f');
-  svg.append('g').call(d3.axisLeft(yScale).tickValues(isobarValues).tickFormat(formatTicks).tickSizeInner(0).tickSizeOuter(0)).call(g => g.select('.domain').remove()).append('text').attr('fill', 'currentColor').attr('x', '0').attr('y', yScale(400)).attr('font-size', '11px').attr('dy', '-0.9em').attr('text-anchor', 'left').text('hPa');
+  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');
 };
 const addLegends = ({
   svg,
@@ -157,6 +294,15 @@ const addLegends = ({
   // Add a legend for the dewpoint line
   svg.append('text').attr('x', width - 137).attr('y', 40).attr('fill', SOUNDING_COLORS[0]).text('Dewpoint (°C)');
 };
+const mapToPlot = (diagramType, filteredPressureValues, filteredTemperatureValues, xScale, yScale, height) => {
+  if (diagramType === 'BIJVOET') {
+    const thetaValues = filteredTemperatureValues.map((tempValue, index) => calculateThetaFromPressTemp(pressToPascal(filteredPressureValues[index]), tempToKelvin(tempValue)));
+    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)]);
+  // Skew/shear transformation for skew-t
+  return Px.map(([x, y]) => [x + height - y, y]);
+};
 const plotSounding = ({
   temperatureValues,
   pressureValues,
@@ -165,16 +311,16 @@ const plotSounding = ({
   xScale,
   yScale,
   height,
-  svg
+  svg,
+  diagramType
 }) => {
+  const diagram = diagramType === 'BIJVOET' ? 'bijvoet' : 'skewT';
   const [filteredPressureValues, filteredTemperatureValues] = filterDomainRangeForParameter(pressureValues, temperatureValues);
   // Map temp and pressure to pixels
-  const Px = d3.zip(filteredPressureValues, filteredTemperatureValues).map(([pressure, temperature]) => [xScale(temperature), yScale(pressure)]);
-  // Skew/shear transformation for skew-t
-  const skewedPx = Px.map(([x, y]) => [x + height - y, y]);
+  const Px = mapToPlot(diagramType, filteredPressureValues, filteredTemperatureValues, xScale, yScale, height);
   const lineGenerator = d3.line();
-  const pathString = lineGenerator(skewedPx);
-  svg.append('path').attr('d', pathString).attr('x', 0).attr('y', 0).style('fill', 'none').style('stroke-width', 2).style('stroke', color).style('stroke-opacity', 1).style('stroke-dasharray', lineStyle).attr('clip-path', 'url(#clip-skewTd3)');
+  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)`);
 };
 // Use this function to filter the pressure and parameter array so no NaN or null values are included
 const filterDomainRangeForParameter = (pressureDomain, parameterDomain) => {
@@ -248,6 +394,13 @@ const getParamHtml = (paramValue, colorIndex, unit, isLastElement, noDistance =
   }
   return `<p style="${noDistance ? 'margin: 0;' : 'margin-top: 0;'} color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
 };
+const extractPressureFromY = (diagramType, y, yScale) => {
+  if (diagramType === 'BIJVOET') {
+    const frac = yScale.invert(y);
+    return pressureFromPosition(frac);
+  }
+  return yScale.invert(y);
+};
 const drawSoundingsTooltip = ({
   event,
   yScale,
@@ -258,14 +411,15 @@ const drawSoundingsTooltip = ({
   windRefd3,
   margin,
   width,
-  tooltipData
+  tooltipData,
+  diagramType
 }) => {
   if (tooltipData.length === 0) {
     return;
   }
   const [, y] = d3.pointer(event);
   const pressureY = event.clientY - svgRectangle.top - 10;
-  const pressure = yScale.invert(y);
+  const pressure = extractPressureFromY(diagramType, y, yScale);
   const interpolatedData = tooltipData.map(dataSet => {
     return {
       hoveredPressure: dataSet.interpolatePressure(pressure),
@@ -658,12 +812,10 @@ const extendXAxis = (path, horizontalBarbMargin) => {
 };
 const drawWindBarbs = ({
   svgRef,
+  yScale,
   data,
   width,
-  height,
   margin,
-  minPressure,
-  maxPressure,
   barbColor = 'black'
 }) => {
   const barbsSize = 25;
@@ -690,7 +842,6 @@ const drawWindBarbs = ({
     d3.select(this).attr('d', newD);
   });
   svg.attr('width', currentWidth + margin.left + horizontalBarbMargin);
-  const pressureScale = d3.scaleLog().domain([maxPressure, minPressure]).range([height, 0]).clamp(true);
   const barbGroup = svg.append('g').attr('class', 'wind-group').attr('transform',
   // This translation should be revisited when implementing
   // the plotting of several datasets at once
@@ -718,7 +869,7 @@ const drawWindBarbs = ({
       const cx = bbox.x + bbox.width / 2;
       const cy = bbox.y + bbox.height / 2;
       const rotation = 180 + data.windDirection;
-      const y = pressureScale(data.pressure);
+      const y = yScale(data.pressure);
       // Place items in the correct vertical position
       // Correcting for barbSize
       group.attr('transform', `translate(0, ${y - barbsSize * scalingFactor / 8})`);
@@ -777,7 +928,7 @@ const getWindSymbol = value => {
 const CP$1 = 1.03e3;
 const Po = 1000.0;
 const dryAdiabaticLapserate = (theta, pressure, temperature, dp) => {
-  const Tt = (theta + 273.15) * (Po / pressure) ** (-287 / CP$1) - 273.15;
+  const Tt = (theta + KELVIN) * (Po / pressure) ** (-287 / CP$1) - KELVIN;
   const dt = Tt - temperature;
   return [dp, dt];
 };
@@ -808,6 +959,31 @@ const drawDryAdiabats = ({
     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)');
   }
 };
+const tempPresDryAiabat = (pressure, pres0, temp0) => temp0 * (pressure / pres0) ** (2.0 / 7.0);
+const drawDryAdiabatsBijvoet = ({
+  staticPressureArray,
+  xScale,
+  yScale,
+  svg
+}) => {
+  for (let Tbase = -20; Tbase < 40; Tbase += 5) {
+    const Px = [];
+    const tempKelvin = tempToKelvin(Tbase);
+    const tempDry = calculateThetaFromPressTemp(REFERENCE_PRESSURE, tempKelvin, 1000);
+    for (const pressure of staticPressureArray) {
+      const pres = pressToPascal(pressure); // Pressure in Pa
+      const tempPresDry = tempPresDryAiabat(pres, 1000, tempDry);
+      const theta = calculateThetaFromPressTemp(pres, tempPresDry);
+      const Ppx = yScale(pressure);
+      const Tpx = xScale(theta);
+      Px.push([Tpx, Ppx]);
+    }
+    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)');
+  }
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -853,6 +1029,35 @@ const drawIsohumes = ({
     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');
   }
 };
+const isohumeValuesBijvoet = [1, 2, 4, 7, 11, 16, 22, 29];
+const mixr2Tdew = (mixr, pressure) => {
+  const mixingRation = mixr < 1e-6 ? 1e-6 : mixr;
+  const eVap = pressure * mixingRation / (EPSILON + mixingRation);
+  return WV_CB / (WV_CA / Math.log(eVap / WV_CE) - 1.0) + KELVIN;
+};
+const drawIsohumesBijvoet = ({
+  staticPressureArray,
+  height,
+  xScale,
+  yScale,
+  svg
+}) => {
+  for (const isohumeVal of isohumeValuesBijvoet) {
+    const Px = [];
+    const mixr = isohumeVal * 1e-3;
+    for (const pressureVal of staticPressureArray) {
+      const pres = pressToPascal(pressureVal); // Pressure in Pa
+      const Tdew = mixr2Tdew(mixr, pres);
+      const theta = calculateThetaFromPressTemp(pres, Tdew, REFERENCE_PRESSURE);
+      Px.push([xScale(theta), yScale(pressureVal)]);
+    }
+    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('text').text(isohumeVal).attr('text-anchor', 'middle').attr('x', `${Px[0][0] + 20}px`).attr('y', `${height - 10}px`).attr('fill', '#5267A9').attr('font-size', '10px');
+  }
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -892,6 +1097,32 @@ const drawIsotherms = ({
     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)');
   }
 };
+const drawIsothermsBijvoet = ({
+  staticPressureArray,
+  xScale,
+  yScale,
+  svg,
+  height
+}) => {
+  // lines of constant temperature (10 degree interval from -80...+40C)
+  for (let temp = -150; temp <= 40; temp += 2) {
+    const points = [];
+    // start locatie van elke isotherm
+    const Tiso = tempToKelvin(temp);
+    for (const pressure of staticPressureArray) {
+      const theta = calculateThetaFromPressTemp(pressToPascal(pressure), Tiso, REFERENCE_PRESSURE);
+      points.push([xScale(theta), yScale(pressure)]);
+    }
+    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)');
+    // 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');
+    }
+  }
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -911,7 +1142,6 @@ const drawIsotherms = ({
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const CP = 1.03e3;
-const KELVIN = 273.15;
 const L_CONST = 2.5e6;
 const RD = 287.0;
 const RV = 461.0;
@@ -987,6 +1217,26 @@ const drawMoistAdiabats = ({
     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)');
   }
 };
+const drawMoistAdiabatsBijvoet = ({
+  minPressure,
+  maxPressure,
+  xScale,
+  yScale,
+  svg
+}) => {
+  for (let Tbase = -20; Tbase < 40; Tbase += 5) {
+    const theta = Tbase + KELVIN;
+    const Px = [];
+    const pressureBounds = [minPressure, maxPressure];
+    for (const bound of pressureBounds) {
+      Px.push([xScale(theta), yScale(bound)]);
+    }
+    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)');
+  }
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1006,6 +1256,7 @@ const drawMoistAdiabats = ({
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const drawStaticLines = ({
+  diagramType,
   dp,
   staticPressureArray,
   minTemperature,
@@ -1019,47 +1270,78 @@ const drawStaticLines = ({
   svg
 }) => {
   drawIsobars({
+    diagramType,
     minTemperature,
     maxTemperature,
     xScale,
     yScale,
     svg
   });
-  drawIsotherms({
-    staticPressureArray,
-    height,
-    xScale,
-    yScale,
-    svg
-  });
-  drawIsohumes({
-    staticPressureArray,
-    height,
-    xScale,
-    yScale,
-    svg
-  });
-  drawDryAdiabats({
-    staticPressureArray,
-    height,
-    xScale,
-    yScale,
-    svg,
-    dp
-  });
-  drawMoistAdiabats({
-    staticPressureArray,
-    minTemperature,
-    maxTemperature,
-    minPressure,
-    maxPressure,
-    width,
-    height,
-    xScale,
-    yScale,
-    svg,
-    dp
-  });
+  if (diagramType === 'BIJVOET') {
+    drawMoistAdiabatsBijvoet({
+      minPressure,
+      maxPressure,
+      xScale,
+      yScale,
+      svg
+    });
+    drawIsothermsBijvoet({
+      staticPressureArray,
+      xScale,
+      yScale,
+      svg,
+      height
+    });
+    drawDryAdiabatsBijvoet({
+      staticPressureArray,
+      xScale,
+      yScale,
+      svg
+    });
+    drawIsohumesBijvoet({
+      staticPressureArray,
+      height,
+      xScale,
+      yScale,
+      svg
+    });
+  } else {
+    drawIsotherms({
+      staticPressureArray,
+      height,
+      xScale,
+      yScale,
+      svg
+    });
+    drawMoistAdiabats({
+      staticPressureArray,
+      minTemperature,
+      maxTemperature,
+      minPressure,
+      maxPressure,
+      width,
+      height,
+      xScale,
+      yScale,
+      svg,
+      dp
+    });
+    drawDryAdiabats({
+      staticPressureArray,
+      height,
+      xScale,
+      yScale,
+      svg,
+      dp
+    });
+    drawIsohumes({
+      staticPressureArray,
+      height,
+      xScale,
+      yScale,
+      svg
+    });
+  }
 };
 
 const shadow = '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)';
@@ -1090,22 +1372,11 @@ const soundingsStyle = {
     fontWeight: 'bold'
   }
 };
-// Define pressure and temperature values for static lines
-const maxPressure = 1050;
-const minPressure = 150;
-const staticPressureArray = [maxPressure];
-const dp = -5;
-const minTemperature = -40;
-const maxTemperature = 40.6;
-let pressure = maxPressure;
-while (pressure > minPressure) {
-  pressure += dp;
-  staticPressureArray.push(pressure);
-}
 const Soundings = ({
   data,
   svgDimensions,
-  showTooltip = true
+  showTooltip = true,
+  diagramType = 'SKEWT'
 }) => {
   const svgRef = useRef(null);
   const canvasRef = useRef(null);
@@ -1139,21 +1410,23 @@ const Soundings = ({
       svgRef,
       width,
       height,
-      margin
+      margin,
+      diagramType
     });
     const svgRectangle = svgRef.current.getBoundingClientRect();
     // Set scales for temperature and pressure
-    const xScale = d3.scaleLinear().domain([minTemperature, maxTemperature]).range([0, width]);
-    const yScale = d3.scaleLog().domain([maxPressure, minPressure]).range([height, 0]);
+    const [xScale, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature);
     // Add axis'
     drawAxes({
       svg,
       xScale,
       yScale,
-      height
+      height,
+      diagramType
     });
     // Draw static lines
     drawStaticLines({
+      diagramType,
       dp,
       staticPressureArray,
       minTemperature,
@@ -1184,7 +1457,8 @@ const Soundings = ({
         xScale,
         yScale,
         height,
-        svg
+        svg,
+        diagramType
       });
       const dewpointValues = features.map(feature => feature.properties.dewpoint);
       // Dewpoint
@@ -1196,7 +1470,8 @@ const Soundings = ({
         xScale,
         yScale,
         height,
-        svg
+        svg,
+        diagramType
       });
       const windData = features.map(feature => ({
         windDirection: feature.properties.windDirection,
@@ -1205,12 +1480,10 @@ const Soundings = ({
       }));
       drawWindBarbs({
         svgRef,
+        yScale,
         data: windData,
         width,
-        height,
         margin,
-        minPressure,
-        maxPressure,
         barbColor: color
       });
     });
@@ -1232,7 +1505,8 @@ const Soundings = ({
           tempRefd3,
           dewpointRefd3,
           windRefd3,
-          tooltipData
+          tooltipData,
+          diagramType
         });
       });
     }
@@ -1342,15 +1616,14 @@ const Soundings = ({
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const BASE_URL = 'https://opendata.fmi.fi/edr';
-const getCollectionLocations = collectionId => fetch(`${BASE_URL}/collections/${collectionId}/locations`, {
+const getCollectionLocations = (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/locations`, {
   headers: getHeaders()
 }).then(handleResponse);
-const getCollectionInstance = collectionId => fetch(`${BASE_URL}/collections/${collectionId}/instances`, {
+const getCollectionInstances = (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/instances`, {
   headers: getHeaders()
 }).then(handleResponse);
-const getEdrCollectionForLocation = (collectionId, instanceId, locationId, parameters, datetime) => {
-  const url = new URL(`${BASE_URL}/collections/${collectionId}${instanceId ? `/instances/${instanceId}` : ''}/locations/${locationId}`);
+const getEdrCollectionForLocation = (collectionId, baseUrl, instanceId, locationId, parameters, datetime) => {
+  const url = new URL(`${baseUrl}/collections/${collectionId}${instanceId ? `/instances/${instanceId}` : ''}/locations/${locationId}`);
   url.searchParams.append('parameter-name', parameters.join(','));
   url.searchParams.append('datetime', datetime);
   url.searchParams.append('f', 'CoverageJSON');
@@ -1358,8 +1631,8 @@ const getEdrCollectionForLocation = (collectionId, instanceId, locationId, param
     headers: getHeaders()
   }).then(handleResponse);
 };
-const getEdrCollectionForPosition = (collectionId, instanceId, coordinates, parameters, datetime) => {
-  const url = new URL(`${BASE_URL}/collections/${collectionId}${instanceId ? `/instances/${instanceId}` : ''}/position`);
+const getEdrCollectionForPosition = (collectionId, baseUrl, instanceId, coordinates, parameters, datetime) => {
+  const url = new URL(`${baseUrl}/collections/${collectionId}${instanceId ? `/instances/${instanceId}` : ''}/position`);
   url.searchParams.append('coords', `POINT(${coordinates[0]} ${coordinates[1]})`);
   url.searchParams.append('parameter-name', parameters.join(','));
   url.searchParams.append('datetime', datetime);
@@ -1390,7 +1663,6 @@ const epsilon = 0.622; // Ratio of molecular weights of water vapour and dry air
 const e0 = 611.2; // Reference vapor pressure [Pa]
 const aConstant = 17.67;
 const bConstant = 243.5; // Constants for water, b in Celsius
-const tKelvinOffset = 273.15; // To convert Celsius to Kelvin
 const gConstant = 461.5; // Gas constant ratio between water vapour and air [J/(K*kg)]
 const hConstant = 2.5e6; // Latent heat for water vaporization [J/kg]
 // Formula to use when dewpoint is not available
@@ -1412,14 +1684,40 @@ function dewpointFromRelativeHumidity(tCelsius,
 // air temperature [°C]
 relHumidity) {
   // Convert to Kelvin
-  const tKelvin = tCelsius + tKelvinOffset;
+  const tKelvin = tCelsius + KELVIN;
   // Calculate dewpoint
   const dewpoint = tKelvin / (1 - tKelvin * Math.log(relHumidity * 0.01) * gConstant / hConstant);
   return dewpoint;
 }
 // Parsing and conversion function
-function parseCoverageCollection(response) {
+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,
@@ -1436,56 +1734,139 @@ function parseCoverageCollection(response) {
     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.temperature?.values[zIndex]);
-      const windums = parseFloat(ranges.windums?.values[zIndex]);
-      const windvms = parseFloat(ranges.windvms?.values[zIndex]);
-      let dewpoint = parseFloat(ranges.dewpoint?.values[zIndex]);
-      const relativeHumidity = parseFloat(ranges.relativehumidity?.values[zIndex]);
-      const specificHumidity = parseFloat(ranges.specifichumidity?.values[zIndex]);
-      let windSpeed = parseFloat(ranges.windSpeed?.values[zIndex]);
-      // Fallback calculations
-      if (Number.isNaN(windSpeed) && !Number.isNaN(windums) && !Number.isNaN(windvms)) {
-        // Fallback calculation
-        windSpeed = Math.sqrt(windums ** 2 + windvms ** 2);
+      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;
       }
-      let windDirection = parseFloat(ranges.windDirection?.values[zIndex]);
-      if (Number.isNaN(windDirection) && !Number.isNaN(windums) && !Number.isNaN(windvms)) {
-        // Fallback calculation
-        windDirection = (Math.atan2(-windums, -windvms) * (180 / Math.PI) + 360) % 360;
+      if (ranges[parameterMappings.temperature]) {
+        data[coverageIdentifier].data.tempArray.push(parseFloat(ranges[parameterMappings.temperature]?.values[zIndex]));
       }
-      const pressureFromRange = parseFloat(ranges.pressure?.values[zIndex]);
-      const pressure = !Number.isNaN(pressureFromRange) ? pressureFromRange : parseFloat(zValues[zIndex]);
-      if (dewpoint === null || Number.isNaN(dewpoint)) {
-        // Use dewpoint fallback calculations if not present
-        if (!Number.isNaN(specificHumidity)) {
-          dewpoint = dewpointFromSpecificHumidity(specificHumidity / 1000,
-          // from g/kg to kg/kg
-          pressure * 100);
-        } else if (!Number.isNaN(relativeHumidity)) {
-          dewpoint = dewpointFromRelativeHumidity(temp, relativeHumidity);
-        }
+      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");
@@ -1514,7 +1895,8 @@ const sortSoundingFeatures = data => {
     return featureB.properties.pressure - featureA.properties.pressure;
   });
 };
-const constructQueryParams = (collectionId, instanceId, location, datetime, parameters) => {
+const constructQueryParams = (collectionId, baseUrl, instanceId, location, datetime, parameterMappings) => {
+  const parameters = getParameterMappings(parameterMappings);
   if (typeof location === 'string') {
     // LOCATION call
     return {
@@ -1525,8 +1907,8 @@ const constructQueryParams = (collectionId, instanceId, location, datetime, para
           return [];
         }
         try {
-          const rawData = await getEdrCollectionForLocation(collectionId, instanceId, location, parameters, datetime);
-          const parsedData = parseCoverageCollection(rawData);
+          const rawData = await getEdrCollectionForLocation(collectionId, baseUrl, instanceId, location, parameters, datetime);
+          const parsedData = parseCoverageCollection(rawData, parameterMappings);
           return sortSoundingFeatures(parsedData);
         } catch (err) {
           throw new Error('Error fetching EDR data collection by location');
@@ -1543,8 +1925,8 @@ const constructQueryParams = (collectionId, instanceId, location, datetime, para
         return [];
       }
       try {
-        const rawData = await getEdrCollectionForPosition(collectionId, instanceId, location, parameters, datetime);
-        const parsedData = parseCoverageCollection(rawData);
+        const rawData = await getEdrCollectionForPosition(collectionId, baseUrl, instanceId, location, parameters, datetime);
+        const parsedData = parseCoverageCollection(rawData, parameterMappings);
         return sortSoundingFeatures(parsedData);
       } catch (err) {
         throw new Error('Error fetching EDR data collection by position');
@@ -1552,37 +1934,31 @@ const constructQueryParams = (collectionId, instanceId, location, datetime, para
     }
   };
 };
-const useFakeTime = (collectionId, instanceId) => {
-  return useQuery({
-    queryKey: ['temporary-instance-call', collectionId, instanceId],
-    queryFn: async () => {
-      return fetch(`https://opendata.fmi.fi/edr/collections/${collectionId}/instances/${instanceId}`, {
-        headers: getHeaders()
-      }).then(handleResponse).then(data => collectionId === undefined || data === undefined ? '' : data.extent.temporal.interval[0][0]);
-    },
-    enabled: !!collectionId && !!instanceId
-  });
+const defaultParameterMappings = {
+  temperature: 'temperature',
+  windDirection: 'winddirection',
+  windSpeed: 'windspeedms',
+  windU: 'windums',
+  windV: 'windvms',
+  pressure: 'pressure',
+  dewpoint: 'dewpoint',
+  humidity: 'humidity',
+  specificHumidity: 'specifichumidity',
+  relativeHumidity: 'relativehumidity'
+};
+const getParameterMappings = parameterMappings => {
+  return Object.keys(parameterMappings).map(key => parameterMappings[key]);
 };
-const parameters = ['temperature', 'WindDirection', 'WindSpeedMS', 'windUMS', 'windVMS', 'Pressure', 'DewPoint', 'humidity', 'specifichumidity'];
 const useMultipleSources = (sources, locations, datetime) => {
-  // TODO: Remove once we pass in the datetime coming from the timeslider!
-  const {
-    data: date0
-  } = useFakeTime(sources[0]?.collectionId, sources[0]?.instanceId);
-  const {
-    data: date1
-  } = useFakeTime(sources[1]?.collectionId, sources[1]?.instanceId);
-  const {
-    data: date2
-  } = useFakeTime(sources[2]?.collectionId, sources[2]?.instanceId);
-  const dates = useMemo(() => [date0, date1, date2], [date0, date1, date2]);
   const queries = useMemo(() => sources.map(({
     collectionId,
-    instanceId
-  }, index) => {
-    const queryParams = constructQueryParams(collectionId, instanceId, locations[collectionId] || '', dates[index] || '', parameters);
+    url,
+    instanceId,
+    parameterMappings
+  }) => {
+    const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', datetime || '', parameterMappings || defaultParameterMappings);
     return queryParams;
-  }), [dates, datetime, locations, sources]);
+  }), [datetime, locations, sources]);
   return useQueries({
     queries,
     combine: queryResults => {
@@ -1599,13 +1975,46 @@ 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 timestepArrays = queryResults.map(result => result.data).filter(steps => !!steps);
+      return timestepArrays;
+    }
+  });
+  return results;
+};
 const useGetCollectionsInstances = (collections, isDialogOpen) => {
-  const collectionIds = useMemo(() => collections?.map(collection => collection.id) || [], [collections]);
-  const queries = useMemo(() => collectionIds.map(id => {
+  const collectionIds = useMemo(() => collections?.map(collection => {
+    return {
+      id: collection.id,
+      url: collection.url
+    };
+  }) || [], [collections]);
+  const queries = useMemo(() => collectionIds.map(({
+    id,
+    url
+  }) => {
     return {
       queryKey: ['edr-soundings-instances', id],
       queryFn: async () => {
-        const data = await getCollectionInstance(id);
+        const data = await getCollectionInstances(id, url);
         return data;
       },
       enabled: isDialogOpen
@@ -1638,6 +2047,33 @@ const useGetCollectionsInstances = (collections, isDialogOpen) => {
     data: dataWithCollectionInfo
   };
 };
+const useGetCollectionLocations = (collections, isDialogOpen) => {
+  const edrQueries = useMemo(() => collections?.map(collection => ({
+    queryKey: ['edr-locations', collection.id],
+    queryFn: async () => {
+      const locations = await getCollectionLocations(collection.id, collection.url);
+      return {
+        ...locations,
+        id: collection.id,
+        name: collection.name
+      };
+    },
+    enabled: isDialogOpen
+  })), [collections, isDialogOpen]);
+  return useQueries({
+    queries: edrQueries,
+    combine: results => {
+      const data = results.map(result => result.data).filter(result => !!result);
+      const isPending = results.some(result => result.isPending);
+      const error = results.find(result => result?.error)?.error;
+      return {
+        data,
+        isPending,
+        error
+      };
+    }
+  });
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1676,6 +2112,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,
@@ -1684,9 +2130,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);
@@ -1701,12 +2147,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,
@@ -1725,7 +2174,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,
@@ -1735,6 +2184,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': {
@@ -1832,7 +2296,9 @@ const getSelectedSources = createSelector(getSoundingsStore, store => {
     if (value.isChecked === true) {
       return list.concat({
         collectionId: key,
-        instanceId: value.instanceId
+        url: value.url,
+        instanceId: value.instanceId,
+        parameterMappings: value.parameterMappings
       });
     }
     return list;
@@ -1842,19 +2308,25 @@ const getSelectedSources = createSelector(getSoundingsStore, store => {
 const getSelectedSourcesAmount = createSelector(getSelectedSources, activeSources => {
   return activeSources.length;
 }, selectorMemoizationOptions);
+const getSelectedSourcesIds = createSelector(getSelectedSources, activeSources => {
+  return activeSources.map(source => source.collectionId);
+}, selectorMemoizationOptions);
 
-const SoundingsTimeSliderConnect = ({
-  timesteps
-}) => {
+const SoundingsTimeSliderConnect = () => {
   const selectedTime = useSelector(getSelectedTime);
+  const sourceSelections = useSelector(getSelectedSources);
   const dispatch = useDispatch();
   const updateSelectedTime = React.useCallback(selectedTime => {
     dispatch(soundingsActions.updateSelectedTime({
       selectedTime
     }));
   }, [dispatch]);
+  const 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();
   return jsx(SoundingsTimeSlider, {
-    timesteps: timesteps,
+    timesteps: mergedTimesteps,
     selectedTime: selectedTime,
     updateSelectedTime: updateSelectedTime
   });
@@ -1947,15 +2419,14 @@ const MenuBarConnect = ({
 const SoundingsConnect = ({
   viewId
 }) => {
-  // TODO: use in follow-up: https://gitlab.com/opengeoweb/opengeoweb/-/issues/5991
-  // const selectedTime = useSelector(getSelectedTime);
+  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,
@@ -1989,12 +2460,7 @@ const SoundingsConnect = ({
             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: []
-      })]
+      }), jsx(SoundingsTimeSliderConnect, {})]
     })]
   });
 };
@@ -2048,7 +2514,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;
@@ -2061,6 +2528,7 @@ const SoundingsSourceMenu = ({
             children: jsx(Checkbox, {
               checked: !!isChecked,
               onChange: event => updateCollection(collection.id, {
+                url,
                 isChecked: event.target.checked,
                 instanceId: selectedInstanceId
               }),
@@ -2074,6 +2542,7 @@ const SoundingsSourceMenu = ({
             skipLocalStyling: false,
             value: selectedInstanceId || t('noInstancesAvailable'),
             onChange: event => updateCollection(collection.id, {
+              url,
               instanceId: event.target.value
             }),
             renderValue: value => jsx(Box, {
@@ -2139,6 +2608,20 @@ const SoundingsSourceDialogConnect = ({
     }));
   }, [dispatch]);
   const sourceSelections = useSelector(getSourceSelections);
+  // Set mappings for each collection
+  React.useEffect(() => {
+    soundingsCollections?.forEach(collection => {
+      dispatch(soundingsActions.updateSelectedSource({
+        sourceId: collection.id,
+        value: {
+          url: collection.url,
+          isChecked: sourceSelections[collection.id]?.isChecked || false,
+          parameterMappings: collection.parameterMappings
+        }
+      }));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, soundingsCollections]);
   const {
     data,
     isPending,
@@ -2159,12 +2642,15 @@ const SoundingsSourceDialogConnect = ({
 
 const LocationsMenu = ({
   services,
+  selectedSourcesAmount,
   selectedLocations,
   isOpen,
   onClose,
   updateSelectedLocation,
   onMouseDown = () => {},
-  order = 0
+  order = 0,
+  isLoading,
+  error
 }) => {
   const [searchFilter, setSearchFilter] = useState('');
   const {
@@ -2182,7 +2668,7 @@ const LocationsMenu = ({
     });
   }, [services, searchFilter]);
   const isChecked = (sourceId, locationId) => selectedLocations[sourceId] === locationId;
-  return jsx(ToolContainerDraggable, {
+  return jsxs(ToolContainerDraggable, {
     startSize: {
       width: 320,
       height: 500
@@ -2198,7 +2684,15 @@ const LocationsMenu = ({
     bounds: "parent",
     onMouseDown: onMouseDown,
     order: order,
-    children: services.length === 0 ? jsx(Typography, {
+    children: [isLoading && jsx(LinearProgress, {
+      sx: {
+        width: '100%',
+        position: 'absolute'
+      }
+    }), error && jsx(AlertBanner, {
+      title: error.message,
+      shouldClose: true
+    }), selectedSourcesAmount === 0 ? jsx(Typography, {
       sx: {
         margin: 1
       },
@@ -2280,7 +2774,7 @@ const LocationsMenu = ({
           })
         })
       }, service.id))]
-    })
+    })]
   });
 };
 
@@ -2295,34 +2789,30 @@ const LocationsMenuConnect = ({
     setDialogOrder
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsLocations);
   const locationSelections = useSelector(getLocationSelections);
-  const sourceSelections = useSelector(getSourceSelections);
-  const selectedSourceIds = useMemo(() => Object.keys(sourceSelections).filter(key => sourceSelections[key].isChecked), [sourceSelections]);
-  const edrQueries = useMemo(() => soundingsCollections.map(collection => ({
-    queryKey: ['edr-locations', collection.id],
-    queryFn: async () => {
-      const locations = await getCollectionLocations(collection.id);
-      return {
-        ...locations,
-        id: collection.id,
-        name: collection.name
-      };
-    }
-  })), [soundingsCollections]);
-  const services = useQueries({
-    queries: edrQueries,
-    combine: results => results.map(result => result.data).filter(result => !!result)
-  });
+  const selectedSourceIds = useSelector(getSelectedSourcesIds);
+  const sourcesAmount = useSelector(getSelectedSourcesAmount);
+  const {
+    data,
+    isPending,
+    error
+  } = useGetCollectionLocations(soundingsCollections, isDialogOpen);
+  const services = useMemo(() => {
+    return data?.filter(service => selectedSourceIds.includes(service.id)) || [];
+  }, [data, selectedSourceIds]);
   return jsx(LocationsMenu, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
-    services: services.filter(service => selectedSourceIds.includes(service.id)),
+    services: services,
+    selectedSourcesAmount: sourcesAmount,
     selectedLocations: locationSelections,
     updateSelectedLocation: (sourceId, locationId) => void dispatch(soundingsActions.updateSelectedLocation({
       sourceId,
       locationId
     })),
     onMouseDown: setDialogOrder,
-    order: dialogOrder
+    order: dialogOrder,
+    isLoading: isPending,
+    error: error
   });
 };