@opengeoweb/soundings 12.4.2 → 12.5.0

package/index.esm.js

@@ -54,6 +54,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 +186,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 +232,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 +292,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 +309,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 +392,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 +409,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 +810,10 @@ const extendXAxis = (path, horizontalBarbMargin) => {
 };
 const drawWindBarbs = ({
   svgRef,
+  yScale,
   data,
   width,
-  height,
   margin,
-  minPressure,
-  maxPressure,
   barbColor = 'black'
 }) => {
   const barbsSize = 25;
@@ -690,7 +840,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 +867,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 +926,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 +957,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 +1027,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 +1095,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 +1140,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 +1215,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 +1254,7 @@ const drawMoistAdiabats = ({
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const drawStaticLines = ({
+  diagramType,
   dp,
   staticPressureArray,
   minTemperature,
@@ -1019,47 +1268,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 +1370,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 +1408,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 +1455,8 @@ const Soundings = ({
         xScale,
         yScale,
         height,
-        svg
+        svg,
+        diagramType
       });
       const dewpointValues = features.map(feature => feature.properties.dewpoint);
       // Dewpoint
@@ -1196,7 +1468,8 @@ const Soundings = ({
         xScale,
         yScale,
         height,
-        svg
+        svg,
+        diagramType
       });
       const windData = features.map(feature => ({
         windDirection: feature.properties.windDirection,
@@ -1205,12 +1478,10 @@ const Soundings = ({
       }));
       drawWindBarbs({
         svgRef,
+        yScale,
         data: windData,
         width,
-        height,
         margin,
-        minPressure,
-        maxPressure,
         barbColor: color
       });
     });
@@ -1232,7 +1503,8 @@ const Soundings = ({
           tempRefd3,
           dewpointRefd3,
           windRefd3,
-          tooltipData
+          tooltipData,
+          diagramType
         });
       });
     }
@@ -1342,15 +1614,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 getCollectionInstance = (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 +1629,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 +1661,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,13 +1682,13 @@ 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 {
     t: tAxis,
@@ -1438,34 +1708,38 @@ function parseCoverageCollection(response) {
     const yCoord = coverage.domain.axes.y.values[0];
     const zValues = coverage.domain.axes.z.values;
     zValues.forEach((_, zIndex) => {
-      const temp = parseFloat(ranges.temperature?.values[zIndex]);
-      const windums = parseFloat(ranges.windums?.values[zIndex]);
-      const windvms = parseFloat(ranges.windvms?.values[zIndex]);
-      let dewpoint = parseFloat(ranges.dewpoint?.values[zIndex]);
-      const relativeHumidity = parseFloat(ranges.relativehumidity?.values[zIndex]);
-      const specificHumidity = parseFloat(ranges.specifichumidity?.values[zIndex]);
-      let windSpeed = parseFloat(ranges.windSpeed?.values[zIndex]);
-      // Fallback calculations
-      if (Number.isNaN(windSpeed) && !Number.isNaN(windums) && !Number.isNaN(windvms)) {
-        // Fallback calculation
-        windSpeed = Math.sqrt(windums ** 2 + windvms ** 2);
+      const temp = parseFloat(ranges[parameterMappings.temperature]?.values[zIndex]);
+      const pressureFromRange = parseFloat(ranges[parameterMappings.pressure]?.values[zIndex]);
+      const pressure = !Number.isNaN(pressureFromRange) ? pressureFromRange : parseFloat(zValues[zIndex]);
+      // Extract dewpoint - use fallback calculations if no dewpoint in parameter mappings
+      let dewpoint = NaN;
+      if (parameterMappings.dewpoint) {
+        dewpoint = parseFloat(ranges[parameterMappings.dewpoint]?.values[zIndex]);
+      } else if (parameterMappings.specificHumidity) {
+        const specificHumidity = parseFloat(ranges[parameterMappings.specificHumidity]?.values[zIndex]);
+        dewpoint = dewpointFromSpecificHumidity(specificHumidity / 1000,
+        // from g/kg to kg/kg
+        pressToPascal(pressure));
+      } else if (parameterMappings.relativeHumidity) {
+        const relativeHumidity = parseFloat(ranges[parameterMappings.relativeHumidity]?.values[zIndex]);
+        dewpoint = dewpointFromRelativeHumidity(temp, relativeHumidity);
       }
-      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;
+      // Extract wind speed and direction - use fallback calculations if no speed and direction in parameter mappings
+      let windSpeed = NaN;
+      if (parameterMappings.windSpeed) {
+        windSpeed = parseFloat(ranges[parameterMappings.windSpeed]?.values[zIndex]);
+      } else if (parameterMappings.windU && parameterMappings.windV) {
+        const windU = parseFloat(ranges[parameterMappings.windU]?.values[zIndex]);
+        const windV = parseFloat(ranges[parameterMappings.windV]?.values[zIndex]);
+        windSpeed = Math.sqrt(windU ** 2 + windV ** 2);
       }
-      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);
-        }
+      let windDirection = NaN;
+      if (parameterMappings.windDirection) {
+        windDirection = parseFloat(ranges[parameterMappings.windDirection]?.values[zIndex]);
+      } else if (parameterMappings.windU && parameterMappings.windV) {
+        const windU = parseFloat(ranges[parameterMappings.windU]?.values[zIndex]);
+        const windV = parseFloat(ranges[parameterMappings.windV]?.values[zIndex]);
+        windDirection = (Math.atan2(-windU, -windV) * (180 / Math.PI) + 360) % 360;
       }
       features.push({
         type: 'Feature',
@@ -1514,7 +1788,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 +1800,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 +1818,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,35 +1827,51 @@ const constructQueryParams = (collectionId, instanceId, location, datetime, para
     }
   };
 };
-const useFakeTime = (collectionId, instanceId) => {
+const useFakeTime = (collectionId, baseUrl, instanceId) => {
   return useQuery({
     queryKey: ['temporary-instance-call', collectionId, instanceId],
     queryFn: async () => {
-      return fetch(`https://opendata.fmi.fi/edr/collections/${collectionId}/instances/${instanceId}`, {
+      return fetch(`${baseUrl}/collections/${collectionId}/instances/${instanceId}`, {
         headers: getHeaders()
       }).then(handleResponse).then(data => collectionId === undefined || data === undefined ? '' : data.extent.temporal.interval[0][0]);
     },
     enabled: !!collectionId && !!instanceId
   });
 };
-const parameters = ['temperature', 'WindDirection', 'WindSpeedMS', 'windUMS', 'windVMS', 'Pressure', 'DewPoint', 'humidity', 'specifichumidity'];
+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 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);
+  } = useFakeTime(sources[0]?.collectionId, sources[0]?.url, sources[0]?.instanceId);
   const {
     data: date1
-  } = useFakeTime(sources[1]?.collectionId, sources[1]?.instanceId);
+  } = useFakeTime(sources[1]?.collectionId, sources[1]?.url, sources[1]?.instanceId);
   const {
     data: date2
-  } = useFakeTime(sources[2]?.collectionId, sources[2]?.instanceId);
+  } = useFakeTime(sources[2]?.collectionId, sources[2]?.url, sources[2]?.instanceId);
   const dates = useMemo(() => [date0, date1, date2], [date0, date1, date2]);
   const queries = useMemo(() => sources.map(({
     collectionId,
-    instanceId
+    url,
+    instanceId,
+    parameterMappings
   }, index) => {
-    const queryParams = constructQueryParams(collectionId, instanceId, locations[collectionId] || '', dates[index] || '', parameters);
+    const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dates[index] || '', parameterMappings || defaultParameterMappings);
     return queryParams;
   }), [dates, datetime, locations, sources]);
   return useQueries({
@@ -1600,12 +1891,20 @@ const useMultipleSources = (sources, locations, datetime) => {
   });
 };
 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 getCollectionInstance(id, url);
         return data;
       },
       enabled: isDialogOpen
@@ -1638,6 +1937,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");
@@ -1832,7 +2158,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,6 +2170,9 @@ 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
@@ -2139,6 +2470,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 +2504,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 +2530,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 +2546,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 +2636,7 @@ const LocationsMenu = ({
           })
         })
       }, service.id))]
-    })
+    })]
   });
 };
 
@@ -2295,34 +2651,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
   });
 };