@opengeoweb/soundings 12.3.0 → 12.4.2

package/index.esm.js

@@ -1,17 +1,19 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import React, { useRef, useEffect, useState, Fragment, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useSelector, useDispatch } from 'react-redux';
+import { Card, Box, Stack, LinearProgress, List, ListItem, ListItemIcon, Checkbox, MenuItem, ListItemText, Typography, Grid, ListItemButton } from '@mui/material';
+import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, dateUtils, CustomSlider, CustomToggleButton, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
+import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 import * as d3 from 'd3';
-import { Card, List, ListItem, ListItemIcon, Checkbox, MenuItem, Box, ListItemText, Typography, ListSubheader, ListItemButton, Collapse, Stack, LinearProgress } from '@mui/material';
-import { selectorMemoizationOptions, useSetupDialog, uiTypes, uiSelectors, uiActions, uiReducer, mapReducer } from '@opengeoweb/store';
-import { useDispatch, useSelector } from 'react-redux';
-import { ToolContainerDraggable, StyledSelect, dateUtils, CustomToggleButton, AlertBanner } from '@opengeoweb/shared';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import { getHeaders, handleResponse } from '@opengeoweb/api';
+import { timesliderTranslations, TIMESLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/timeslider';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
-import { useTranslation, initReactI18next } from 'react-i18next';
-import { getHeaders, handleResponse } from '@opengeoweb/api';
+import { useTranslation } from 'react-i18next';
 import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
-import { useQueries, useQuery } from '@tanstack/react-query';
-import { ChevronDown, Sources } from '@opengeoweb/theme';
+import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { Sources } from '@opengeoweb/theme';
+import { FixedSizeList } from 'react-window';
 
 var en = {
 	sources: "Sources",
@@ -108,7 +110,7 @@ const drawIsobars = ({
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const SOUNDING_COLORS = ['#4487f3'];
+const SOUNDING_COLORS = ['#4487f3', '#c3213c', '#509a00'];
 // vfx code
 const initializeSvg = ({
   svgRef,
@@ -118,7 +120,7 @@ const initializeSvg = ({
 }) => {
   const svg = d3.select(svgRef.current).attr('width', width + (margin.left + margin.right)).attr('height', height + (margin.top + margin.bottom)).attr('id', 'skewT').attr('data-testid', 'skewT').append('g').attr('transform', `translate(${margin.left + margin.right},${margin.top})`);
   svg.append('clipPath').attr('id', 'clip-skewTd3').append('rect').attr('width', width).attr('height', height).attr('x', 0).attr('y', 0);
-  svg.append('rect').attr('height', height).attr('width', width).attr('fill', 'none').attr('opacity', 1).attr('id', 'skewTd3').attr('clip-path', 'url(#clip-skewTd3)');
+  svg.append('rect').attr('height', height).attr('width', width).attr('fill', '#ffffff00').attr('opacity', 1).attr('id', 'skewTd3').attr('clip-path', 'url(#clip-skewTd3)');
   return svg;
 };
 const drawAxes = ({
@@ -165,14 +167,139 @@ const plotSounding = ({
   height,
   svg
 }) => {
+  const [filteredPressureValues, filteredTemperatureValues] = filterDomainRangeForParameter(pressureValues, temperatureValues);
   // Map temp and pressure to pixels
-  const Px = d3.zip(pressureValues, temperatureValues).map(([pressure, temperature]) => [xScale(temperature), yScale(pressure)]);
+  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 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)');
 };
+// Use this function to filter the pressure and parameter array so no NaN or null values are included
+const filterDomainRangeForParameter = (pressureDomain, parameterDomain) => {
+  const filteredPressureDomain = pressureDomain.filter((value, index) => !isNaN(parameterDomain[index]) && parameterDomain[index] !== null);
+  const filteredParameterDomain = parameterDomain.filter(value => !isNaN(value) && value !== null);
+  return [filteredPressureDomain, filteredParameterDomain];
+};
+
+/* *
+ * 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)
+ * */
+// Check if the value is outside the domain, if so, return NaN
+// Otherwise, return the interpolated value
+const createClampedInterpolationFunc = (interpolationFunc, domain) => {
+  return value => {
+    if (value < domain[domain.length - 1] || value > domain[0]) {
+      return NaN;
+    }
+    return interpolationFunc(value);
+  };
+};
+// Construct interpolation functions to use when hovering between data points
+// Ensure NaN/null values are removed and cut the domain to the upper and lower pressure bounds of the parameter
+const constructTooltipData = data => {
+  const tooltipData = data.map(features => {
+    const pressureData = features.map(feature => feature.properties.pressure);
+    const tempData = features.map(feature => feature.properties.temp);
+    const dewpointData = features.map(feature => feature.properties.dewpoint);
+    const windDirData = features.map(feature => feature.properties.windDirection);
+    const windSpeedData = features.map(feature => feature.properties.windSpeed);
+    const interpolatePressure = d3.scaleLinear().domain(pressureData).range(pressureData).clamp(true);
+    const [tempPressure, filteredTempData] = filterDomainRangeForParameter(pressureData, tempData);
+    const interpolateTemperature = d3.scaleLinear().domain(tempPressure).range(filteredTempData).clamp(true);
+    const [dewpointPressure, filteredDewpointData] = filterDomainRangeForParameter(pressureData, dewpointData);
+    const interpolateDewpoint = d3.scaleLinear().domain(dewpointPressure).range(filteredDewpointData).clamp(true);
+    const [windSpeedPressure, filteredWindSpeedData] = filterDomainRangeForParameter(pressureData, windSpeedData);
+    const interpolateWindSpeed = d3.scaleLinear().domain(windSpeedPressure).range(filteredWindSpeedData).clamp(true);
+    const [windDirPressure, filteredWindDirData] = filterDomainRangeForParameter(pressureData, windDirData);
+    const interpolateWindDirection = d3.scaleLinear().domain(windDirPressure).range(filteredWindDirData).clamp(true);
+    return {
+      pressureData,
+      interpolatePressure: createClampedInterpolationFunc(interpolatePressure, pressureData),
+      interpolateTemperature: createClampedInterpolationFunc(interpolateTemperature, tempPressure),
+      interpolateDewpoint: createClampedInterpolationFunc(interpolateDewpoint, dewpointPressure),
+      interpolateWindSpeed: createClampedInterpolationFunc(interpolateWindSpeed, windSpeedPressure),
+      interpolateWindDirection: createClampedInterpolationFunc(interpolateWindDirection, windDirPressure)
+    };
+  });
+  return tooltipData.filter(data => data.pressureData.length > 0);
+};
+const getParamHtml = (paramValue, colorIndex, unit, isLastElement, noDistance = false) => {
+  if (colorIndex === 0) {
+    return `<p style="${noDistance || isLastElement ? 'margin: 0;' : 'margin-top: 0;'} color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
+  }
+  if (isLastElement) {
+    return `<p style="${noDistance ? 'margin: 0;' : 'margin-bottom: 0;'}  color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}</p>`;
+  }
+  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 drawSoundingsTooltip = ({
+  event,
+  yScale,
+  svgRectangle,
+  pressureRefd3,
+  tempRefd3,
+  dewpointRefd3,
+  windRefd3,
+  margin,
+  width,
+  tooltipData
+}) => {
+  if (tooltipData.length === 0) {
+    return;
+  }
+  const [, y] = d3.pointer(event);
+  const pressureY = event.clientY - svgRectangle.top - 10;
+  const pressure = yScale.invert(y);
+  const interpolatedData = tooltipData.map(dataSet => {
+    return {
+      hoveredPressure: dataSet.interpolatePressure(pressure),
+      hoveredTemp: dataSet.interpolateTemperature(pressure),
+      hoveredDewpoint: dataSet.interpolateDewpoint(pressure),
+      hoveredWindDirection: dataSet.interpolateWindDirection(pressure),
+      hoveredWindSpeed: dataSet.interpolateWindSpeed(pressure)
+    };
+  });
+  // Pressure
+  pressureRefd3.style('display', 'block').style('left', `${margin.left + margin.right + 4}px`) // 4 to move it slightly away from y-axis
+  .style('top', `${pressureY}px`).html(`${Math.round(pressure)}hPa`);
+  // Temperature
+  tempRefd3.style('display', 'block').style('left', `${0.75 * width + margin.left}px`).style('top', `${pressureY}px`).html(() => interpolatedData.map((dataSet, index) => {
+    return getParamHtml(dataSet.hoveredTemp, index, '°C', index === interpolatedData.length - 1);
+  }).join(''));
+  // Dewpoint temperature
+  dewpointRefd3.style('display', 'block').style('left', `${width / 3 + margin.left}px`).style('top', `${pressureY}px`).html(interpolatedData.map((dataSet, index) => {
+    return getParamHtml(dataSet.hoveredDewpoint, index, '°C', index === interpolatedData.length - 1);
+  }).join(''));
+  // Wind
+  windRefd3.style('display', 'block').style('left', `${width + margin.left + margin.right - 55}px`) // -55 to account for width of element
+  .style('top', `${pressureY}px`).html(() => {
+    const windSpeedStrings = interpolatedData.map((dataSet, index) => {
+      return getParamHtml(dataSet.hoveredWindSpeed, index, 'm/s', index === interpolatedData.length - 1, true);
+    });
+    const windDirStrings = interpolatedData.map((dataSet, index) => {
+      return getParamHtml(dataSet.hoveredWindDirection, index, '°', index === interpolatedData.length - 1, index === interpolatedData.length - 1);
+    });
+    return windSpeedStrings.map((windSpeedString, index) => {
+      return `${windSpeedString}${windDirStrings[index]}`;
+    }).join('');
+  });
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -542,7 +669,7 @@ const drawWindBarbs = ({
   const barbsSize = 25;
   const scalingFactor = 0.5;
   const horizontalBarbMargin = barbsSize * scalingFactor;
-  const visibleItems = removeItemsByGrowthType(data.reverse(), GrowthType.EXPONENTIAL, 1.15, 1).filter(item => item.pressure >= 150);
+  const visibleItems = removeItemsExponential(data.reverse()).filter(item => item.pressure >= 150);
   // Measure width and height and make extra room for one column
   // of windbarbs
   const svg = d3.select(svgRef.current);
@@ -562,7 +689,7 @@ const drawWindBarbs = ({
     const newD = extendXAxis(path, horizontalBarbMargin);
     d3.select(this).attr('d', newD);
   });
-  svg.attr('width', currentWidth + margin.right + margin.left + barbsSize);
+  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
@@ -600,45 +727,14 @@ const drawWindBarbs = ({
     }
   });
 };
-const GrowthType = {
-  LINEAR: 'LINEAR',
-  EXPONENTIAL: 'EXPONENTIAL',
-  CUBIC: 'CUBIC'
-};
-const removeItemsByGrowthType = (array, growthType = 'LINEAR', base = 2, initial = 1) => {
-  if (!Object.values(GrowthType).includes(growthType)) {
-    throw new Error('Unsupported growth type');
-  }
-  if (!Array.isArray(array) || array.length === 0) {
-    return [];
-  }
-  if (growthType === GrowthType.LINEAR && base === 0) {
-    throw new Error('Base must be greater than 0');
-  }
-  if (growthType === GrowthType.EXPONENTIAL && base <= 1) {
-    throw new Error('Base must be greater than 1');
-  }
-  if (growthType === GrowthType.CUBIC && base <= 0) {
-    throw new Error('Base must be greater than 0');
-  }
+const removeItemsExponential = array => {
+  const base = 1.15;
   const indicesToKeep = [];
   let i = 0;
   let nextIndex = 0;
   while (nextIndex < array.length) {
-    switch (growthType) {
-      case GrowthType.LINEAR:
-        nextIndex = initial + i * base;
-        break;
-      case GrowthType.EXPONENTIAL:
-        nextIndex = Math.floor(initial * base ** i);
-        break;
-      case GrowthType.CUBIC:
-        nextIndex = initial + Math.floor(i ** 3 * base);
-        break;
-    }
-    if (nextIndex < array.length) {
-      indicesToKeep.push(nextIndex);
-    }
+    nextIndex = Math.floor(base ** i);
+    indicesToKeep.push(nextIndex);
     i += 1;
   }
   return array.filter((_, index) => indicesToKeep.includes(index));
@@ -966,14 +1062,58 @@ const drawStaticLines = ({
   });
 };
 
-const Soundings = ({
-  data: {
-    features
+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)';
+const soundingsStyle = {
+  tooltip: {
+    display: 'block',
+    position: 'absolute',
+    borderRadius: '1.5px',
+    backgroundColor: 'geowebColors.soundings.tooltip.background',
+    boxShadow: shadow,
+    padding: '2px 4px',
+    pointerEvents: 'none',
+    zIndex: 500
+  },
+  pressure: {
+    fontSize: '10px'
+  },
+  temperature: {
+    fontSize: '12px',
+    fontWeight: 'bold'
   },
-  svgDimensions
-  // tooltip
+  dewPoint: {
+    fontSize: '12px',
+    fontWeight: 'bold'
+  },
+  wind: {
+    fontSize: '12px',
+    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
 }) => {
   const svgRef = useRef(null);
+  const canvasRef = useRef(null);
+  const pressureRef = useRef(null);
+  const tempRef = useRef(null);
+  const dewpointRef = useRef(null);
+  const windRef = useRef(null);
+  // set default values
   const svgDimensionsOptions = {
     width: svgDimensions?.width || 812,
     height: svgDimensions?.height || 802,
@@ -985,12 +1125,7 @@ const Soundings = ({
     }
   };
   // Set SVG dimensions
-  const margin = {
-    top: svgDimensionsOptions?.margin?.top,
-    right: svgDimensionsOptions?.margin?.right,
-    bottom: svgDimensionsOptions?.margin?.bottom,
-    left: svgDimensionsOptions?.margin?.left
-  };
+  const margin = svgDimensionsOptions?.margin;
   const baseWidth = svgDimensionsOptions?.width;
   const baseHeight = svgDimensionsOptions?.height;
   const width = baseWidth - (margin.left + margin.right);
@@ -1006,18 +1141,7 @@ const Soundings = ({
       height,
       margin
     });
-    // Define pressure and temperature values for static lines
-    const maxPressure = 1050;
-    const minPressure = 150;
-    const staticPressureArray = [maxPressure];
-    const dp = -5;
-    const minTemperature = -40;
-    const maxTemperature = 40.6;
-    let pressure = maxPressure;
-    while (pressure > minPressure) {
-      pressure += dp;
-      staticPressureArray.push(pressure);
-    }
+    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]);
@@ -1047,217 +1171,157 @@ const Soundings = ({
       svg,
       width
     });
-    const temperatureValues = features.map(feature => feature.properties.temp);
-    const pressureValues = features.map(feature => feature.properties.pressure);
-    // Draw Temperature
-    plotSounding({
-      temperatureValues,
-      pressureValues,
-      color: SOUNDING_COLORS[0],
-      lineStyle: 'none',
-      xScale,
-      yScale,
-      height,
-      svg
-    });
-    const dewpointValues = features.map(feature => feature.properties.dewpoint);
-    // Dewpoint
-    plotSounding({
-      temperatureValues: dewpointValues,
-      color: SOUNDING_COLORS[0],
-      pressureValues,
-      lineStyle: '8, 2',
-      xScale,
-      yScale,
-      height,
-      svg
-    });
-    const windData = features.map(feature => ({
-      windDirection: feature.properties.windDirection,
-      windSpeed: feature.properties.windSpeed,
-      pressure: feature.properties.pressure
-    }));
-    drawWindBarbs({
-      svgRef,
-      data: windData,
-      width,
-      height,
-      margin,
-      minPressure,
-      maxPressure,
-      barbColor: SOUNDING_COLORS[0]
+    data.forEach((features, index) => {
+      const color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
+      const temperatureValues = features.map(feature => feature.properties.temp);
+      const pressureValues = features.map(feature => feature.properties.pressure);
+      // Draw Temperature
+      plotSounding({
+        temperatureValues,
+        pressureValues,
+        color,
+        lineStyle: 'none',
+        xScale,
+        yScale,
+        height,
+        svg
+      });
+      const dewpointValues = features.map(feature => feature.properties.dewpoint);
+      // Dewpoint
+      plotSounding({
+        temperatureValues: dewpointValues,
+        color,
+        pressureValues,
+        lineStyle: '8, 2',
+        xScale,
+        yScale,
+        height,
+        svg
+      });
+      const windData = features.map(feature => ({
+        windDirection: feature.properties.windDirection,
+        windSpeed: feature.properties.windSpeed,
+        pressure: feature.properties.pressure
+      }));
+      drawWindBarbs({
+        svgRef,
+        data: windData,
+        width,
+        height,
+        margin,
+        minPressure,
+        maxPressure,
+        barbColor: color
+      });
     });
+    // Attach mousemove event listener to update current coordinates
+    if (showTooltip) {
+      const pressureRefd3 = d3.select(pressureRef.current);
+      const tempRefd3 = d3.select(tempRef.current);
+      const dewpointRefd3 = d3.select(dewpointRef.current);
+      const windRefd3 = d3.select(windRef.current);
+      const tooltipData = constructTooltipData(data);
+      svg.on('mousemove', event => {
+        drawSoundingsTooltip({
+          event,
+          yScale,
+          svgRectangle,
+          margin,
+          width,
+          pressureRefd3,
+          tempRefd3,
+          dewpointRefd3,
+          windRefd3,
+          tooltipData
+        });
+      });
+    }
     const svgRefCur = svgRef.current;
     // eslint-disable-next-line consistent-return
     return () => {
       d3.select(svgRefCur).selectAll('.wind-group').remove();
       svg.selectAll('*').remove();
-      // svg.on('mousemove', null)
+      svg.on('mousemove', null);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [features]);
-  return jsx(Card, {
-    children: jsx("svg", {
-      ref: svgRef
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-const SOUNDINGS_NAMESPACE = 'soundings';
-const defaultLanguage = 'en';
-const initSoundingsI18n = () => {
-  void i18n.use(initReactI18next).init({
-    lng: defaultLanguage,
-    ns: SOUNDINGS_NAMESPACE,
-    interpolation: {
-      escapeValue: false
-    },
-    resources: {
-      en: {
-        [SOUNDINGS_NAMESPACE]: soundingsTranslations.en
-      },
-      nl: {
-        [SOUNDINGS_NAMESPACE]: soundingsTranslations.nl
-      },
-      fi: {
-        [SOUNDINGS_NAMESPACE]: soundingsTranslations.fi
-      },
-      no: {
-        [SOUNDINGS_NAMESPACE]: soundingsTranslations.no
+  }, [showTooltip, data]);
+  useEffect(() => {
+    const handleMouseLeave = () => {
+      if (pressureRef.current) {
+        pressureRef.current.style.display = 'none';
+      }
+      if (tempRef.current) {
+        tempRef.current.style.display = 'none';
       }
+      if (dewpointRef.current) {
+        dewpointRef.current.style.display = 'none';
+      }
+      if (windRef.current) {
+        windRef.current.style.display = 'none';
+      }
+    };
+    const canvasElement = canvasRef.current;
+    if (canvasElement) {
+      canvasElement.addEventListener('mouseleave', handleMouseLeave);
     }
-  });
-};
-const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
-  ns: [SOUNDINGS_NAMESPACE],
-  ...params
-});
-const useSoundingsTranslation = () => useTranslation(SOUNDINGS_NAMESPACE);
-
-const SoundingsSourceMenu = ({
-  soundingsCollections,
-  isOpen = false,
-  handleClose,
-  updateCollection,
-  sourceSelections
-}) => {
-  const {
-    t
-  } = useSoundingsTranslation();
-  const handleSelectionChange = (collectionId, update) => {
-    updateCollection(collectionId, update);
-  };
-  const getDisplayValue = instanceId => {
-    if (!instanceId) {
-      return t('noInstancesAvailable');
+    return () => {
+      if (canvasElement) {
+        canvasElement.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    // Reset the tooltips when filteredData changes
+    if (pressureRef.current) {
+      pressureRef.current.style.display = 'none';
     }
-    const instanceAsDate = dateUtils.isoStringToDate(instanceId);
-    return instanceAsDate ? dateUtils.dateToIsoString(instanceAsDate) : instanceId;
-  };
-  return jsx(ToolContainerDraggable, {
-    startSize: {
-      width: 320
+    if (tempRef.current) {
+      tempRef.current.style.display = 'none';
+    }
+    if (dewpointRef.current) {
+      dewpointRef.current.style.display = 'none';
+    }
+    if (windRef.current) {
+      windRef.current.style.display = 'none';
+    }
+  }, [data]);
+  return jsxs(Card, {
+    ref: canvasRef,
+    sx: {
+      position: 'relative',
+      paddingBottom: '20px'
     },
-    minWidth: 300,
-    title: t('sources'),
-    isOpen: isOpen,
-    onClose: () => handleClose(),
-    bounds: "parent",
-    children: jsx(List, {
+    children: [jsx("svg", {
+      ref: svgRef
+    }), jsx(Box, {
+      ref: pressureRef,
       sx: {
-        pr: 1
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.pressure
       },
-      children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(collection => {
-        const {
-          isChecked,
-          instanceId
-        } = sourceSelections[collection.id] || {};
-        const hasInstances = collection.instances.length > 0;
-        const selectedInstanceId = instanceId || collection.instances[0].id;
-        return jsxs(ListItem, {
-          disablePadding: true,
-          children: [jsx(ListItemIcon, {
-            sx: {
-              minWidth: 42
-            },
-            children: jsx(Checkbox, {
-              checked: !!isChecked,
-              onChange: event => handleSelectionChange(collection.id, {
-                isChecked: event.target.checked,
-                instanceId: selectedInstanceId
-              }),
-              disableRipple: true
-            })
-          }), jsxs(StyledSelect, {
-            isEnabled: true,
-            additionalStyling: {
-              width: 'calc(100% - 24px)'
-            },
-            skipLocalStyling: false,
-            value: selectedInstanceId,
-            onChange: event => handleSelectionChange(collection.id, {
-              instanceId: event.target.value
-            }),
-            renderValue: value => jsx(Box, {
-              sx: {
-                textOverflow: 'ellipsis',
-                overflow: 'hidden'
-              },
-              children: jsxs(Box, {
-                display: "flex",
-                children: [jsx(Box, {
-                  sx: {
-                    minWidth: 200
-                  },
-                  children: collection.name
-                }), jsx(Box, {
-                  sx: {
-                    textOverflow: 'ellipsis',
-                    overflow: 'hidden'
-                  },
-                  children: getDisplayValue(value)
-                })]
-              })
-            }),
-            children: [!hasInstances && jsx(MenuItem, {
-              value: "",
-              disabled: true,
-              sx: {
-                fontSize: 12
-              },
-              children: t('noInstancesAvailable')
-            }), collection.instances.map(instance => jsx(MenuItem, {
-              value: instance.id,
-              children: getDisplayValue(instance.id)
-            }, instance.id))]
-          })]
-        }, collection.id);
-      }) : jsx(ListItem, {
-        children: jsx(ListItemText, {
-          primary: t('noServicesFound'),
-          sx: {
-            pl: 4
-          }
-        })
-      })
-    })
+      "data-testid": "pressure-tooltip"
+    }), jsx(Box, {
+      ref: tempRef,
+      sx: {
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.temperature
+      },
+      "data-testid": "temperature-tooltip"
+    }), jsx(Box, {
+      ref: dewpointRef,
+      sx: {
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.dewPoint
+      },
+      "data-testid": "dewpoint-tooltip"
+    }), jsx(Box, {
+      ref: windRef,
+      sx: {
+        ...soundingsStyle.tooltip,
+        ...soundingsStyle.wind
+      },
+      "data-testid": "wind-tooltip"
+    })]
   });
 };
 
@@ -1282,7 +1346,7 @@ const BASE_URL = 'https://opendata.fmi.fi/edr';
 const getCollectionLocations = collectionId => fetch(`${BASE_URL}/collections/${collectionId}/locations`, {
   headers: getHeaders()
 }).then(handleResponse);
-const getCollectionInstance = (baseURL, collectionId) => fetch(`${baseURL}/collections/${collectionId}/instances`, {
+const getCollectionInstance = collectionId => fetch(`${BASE_URL}/collections/${collectionId}/instances`, {
   headers: getHeaders()
 }).then(handleResponse);
 const getEdrCollectionForLocation = (collectionId, instanceId, locationId, parameters, datetime) => {
@@ -1305,344 +1369,6 @@ const getEdrCollectionForPosition = (collectionId, instanceId, coordinates, para
   }).then(handleResponse);
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-const initialSoundingsState = {
-  selectedSources: {},
-  selectedLocations: {}
-};
-const slice = createSlice({
-  initialState: initialSoundingsState,
-  name: 'soundings',
-  reducers: {
-    updateSelectedSource: (draft, payloadAction) => {
-      const {
-        sourceId,
-        value
-      } = payloadAction.payload;
-      draft.selectedSources[sourceId] = {
-        ...draft.selectedSources[sourceId],
-        ...value
-      };
-    },
-    updateSelectedLocation: (draft, payloadAction) => {
-      const {
-        sourceId,
-        locationId
-      } = payloadAction.payload;
-      draft.selectedLocations[sourceId] = locationId;
-    }
-  }
-});
-const {
-  reducer: soundingsReducer,
-  actions: soundingsActions
-} = slice;
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-const getSoundingsStore = store => store?.soundings || initialSoundingsState;
-const getSourceSelections = createSelector(getSoundingsStore, store => {
-  return store.selectedSources;
-}, selectorMemoizationOptions);
-const getLocationSelections = createSelector(getSoundingsStore, store => store.selectedLocations, selectorMemoizationOptions);
-const getSelectedSources = createSelector(getSoundingsStore, store => {
-  const sources = store.selectedSources;
-  const activeSources = Object.keys(sources).reduce((list, key) => {
-    const value = sources[key];
-    if (value.isChecked === true) {
-      return list.concat({
-        collectionId: key,
-        instanceId: value.instanceId
-      });
-    }
-    return list;
-  }, []);
-  return activeSources;
-}, selectorMemoizationOptions);
-const getSelectedSourcesAmount = createSelector(getSelectedSources, activeSources => {
-  return activeSources.length;
-}, selectorMemoizationOptions);
-
-const SoundingsSourceDialogConnect = ({
-  soundingsCollections
-}) => {
-  const [soundingsCollectionsWithInstances, setSoundingsCollectionsWithInstances] = React.useState();
-  const dispatch = useDispatch();
-  const {
-    isDialogOpen,
-    onCloseDialog
-  } = useSetupDialog(uiTypes.DialogTypes.SoundingsSources);
-  const updateCollection = React.useCallback((sourceId, value) => {
-    dispatch(soundingsActions.updateSelectedSource({
-      sourceId,
-      value
-    }));
-  }, [dispatch]);
-  const sourceSelections = useSelector(getSourceSelections);
-  React.useEffect(() => {
-    if (soundingsCollections && isDialogOpen) {
-      try {
-        void Promise.all(soundingsCollections.map(async collection => {
-          const data = await getCollectionInstance(collection.url, collection.id);
-          return {
-            ...collection,
-            instances: data.instances.reverse()
-          }; // Reverse to get latest first
-        })).then(results => setSoundingsCollectionsWithInstances(results));
-      } catch (error) {
-        console.error('Error fetching soundings instances:', error);
-      }
-    }
-  }, [soundingsCollections, isDialogOpen]);
-  return jsx(SoundingsSourceMenu, {
-    soundingsCollections: soundingsCollectionsWithInstances,
-    isOpen: isDialogOpen,
-    updateCollection: (sourceId, value) => updateCollection(sourceId, value),
-    sourceSelections: sourceSelections,
-    handleClose: () => onCloseDialog()
-  });
-};
-
-const LocationsMenu = ({
-  services,
-  selectedLocations,
-  isOpen,
-  onClose,
-  updateSelectedLocation
-}) => {
-  const [collapseMap, setCollapseMap] = useState({});
-  const {
-    t
-  } = useSoundingsTranslation();
-  const isChecked = (sourceId, locationId) => selectedLocations[sourceId] === locationId;
-  return jsx(ToolContainerDraggable, {
-    startSize: {
-      width: 320,
-      height: 500
-    },
-    title: t('locations'),
-    isOpen: isOpen,
-    onClose: () => onClose(),
-    bounds: "parent",
-    children: jsxs(List, {
-      disablePadding: true,
-      sx: {
-        maxHeight: '100%',
-        overflowY: 'auto'
-      },
-      children: [services.length === 0 && jsx(Typography, {
-        sx: {
-          marginLeft: 1
-        },
-        children: t('locations-menu-warning')
-      }), services.map(service => jsxs(Fragment, {
-        children: [jsx(ListSubheader, {
-          disableGutters: true,
-          sx: {
-            borderBottom: '1px solid'
-          },
-          children: jsxs(ListItemButton, {
-            onClick: () => setCollapseMap({
-              ...collapseMap,
-              [service.id]: !collapseMap[service.id]
-            }),
-            children: [jsx(ListItemText, {
-              children: service.id
-            }), jsx(ListItemIcon, {
-              children: jsx(ChevronDown, {})
-            })]
-          })
-        }), jsx(Collapse, {
-          in: collapseMap[service.id],
-          children: jsx(List, {
-            component: "div",
-            disablePadding: true,
-            sx: {
-              overflowY: 'auto',
-              overflow: 'hidden'
-            },
-            children: service.features?.map(location => jsx(ListItem, {
-              disablePadding: true,
-              disableGutters: true,
-              children: jsxs(ListItemButton, {
-                onClick: () => {
-                  updateSelectedLocation(service.id, isChecked(service.id, location.id) ? undefined : location.id);
-                },
-                dense: true,
-                children: [jsx(ListItemIcon, {
-                  children: jsx(Checkbox, {
-                    edge: "start",
-                    checked: isChecked(service.id, location.id),
-                    tabIndex: -1,
-                    disableRipple: true,
-                    inputProps: {
-                      'aria-labelledby': location.id
-                    }
-                  })
-                }), jsx(ListItemText, {
-                  id: location.id,
-                  primary: location.properties.name
-                })]
-              })
-            }, `${service.id}-${location.id}`))
-          })
-        })]
-      }, service.id))]
-    })
-  });
-};
-
-const LocationsMenuConnect = ({
-  soundingsCollections
-}) => {
-  const dispatch = useDispatch();
-  const {
-    isDialogOpen,
-    onCloseDialog
-  } = useSetupDialog(uiTypes.DialogTypes.soundingsLocations);
-  const locationSelections = useSelector(getLocationSelections);
-  const sourceSelections = useSelector(getSourceSelections);
-  const selectedSourceIds = useMemo(() => Object.keys(sourceSelections).filter(key => sourceSelections[key].isChecked), [sourceSelections]);
-  const edrQueries = useMemo(() => soundingsCollections.map(collection => ({
-    queryKey: ['edr-locations', collection.id],
-    queryFn: async () => {
-      const locations = await getCollectionLocations(collection.id);
-      return {
-        ...locations,
-        id: collection.id
-      };
-    }
-  })), [soundingsCollections]);
-  const services = useQueries({
-    queries: edrQueries,
-    combine: results => results.map(result => result.data).filter(result => !!result)
-  });
-  return jsx(LocationsMenu, {
-    isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    services: services.filter(service => selectedSourceIds.includes(service.id)),
-    selectedLocations: locationSelections,
-    updateSelectedLocation: (sourceId, locationId) => void dispatch(soundingsActions.updateSelectedLocation({
-      sourceId,
-      locationId
-    }))
-  });
-};
-
-var MenuOptions;
-(function (MenuOptions) {
-  MenuOptions["sources"] = "sources";
-  MenuOptions["locations"] = "locations";
-})(MenuOptions || (MenuOptions = {}));
-const buttonStyle = {
-  height: '10px !important',
-  width: '130px'
-};
-const SoundingsMenuBar = ({
-  handleClick,
-  isOpen,
-  selectedSourcesAmount = 0
-}) => {
-  const {
-    t
-  } = useSoundingsTranslation();
-  return jsxs(Stack, {
-    direction: "row",
-    spacing: 1,
-    sx: {
-      marginBottom: '4px'
-    },
-    children: [jsxs(CustomToggleButton, {
-      variant: "tool",
-      selected: isOpen[MenuOptions.sources],
-      "data-testid": "soundingsSourcesButton",
-      onClick: () => handleClick(MenuOptions.sources),
-      size: "small",
-      sx: buttonStyle,
-      children: [jsx(Sources, {
-        sx: {
-          marginRight: '4px!important'
-        }
-      }), selectedSourcesAmount ? `${t('sources')} (${selectedSourcesAmount})` : t('sources')]
-    }), jsx(CustomToggleButton, {
-      variant: "tool",
-      "data-testid": "soundingsLocationsButton",
-      selected: isOpen[MenuOptions.locations],
-      onClick: () => handleClick(MenuOptions.locations),
-      size: "small",
-      sx: buttonStyle,
-      children: t('locations')
-    })]
-  });
-};
-
-const MenuBarConnect = ({
-  viewId,
-  source
-}) => {
-  const dispatch = useDispatch();
-  const currentActiveMapId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsSources));
-  const isSourcesOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsSources));
-  const isLocationsOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.soundingsLocations));
-  const sourcesAmount = useSelector(getSelectedSourcesAmount);
-  const dispatchActiveMapId = React.useCallback((dialogType, isOpen) => void dispatch(uiActions.setActiveMapIdForDialog({
-    type: dialogType,
-    mapId: viewId,
-    setOpen: currentActiveMapId !== viewId ? true : !isOpen,
-    source
-  })), [dispatch, currentActiveMapId, viewId, source]);
-  const handleClick = React.useCallback(menuType => {
-    switch (menuType) {
-      case MenuOptions.sources:
-        dispatchActiveMapId(uiTypes.DialogTypes.SoundingsSources, isSourcesOpenInStore);
-        break;
-      case MenuOptions.locations:
-        dispatchActiveMapId(uiTypes.DialogTypes.soundingsLocations, isLocationsOpenInStore);
-        break;
-    }
-  }, [dispatchActiveMapId, isSourcesOpenInStore, isLocationsOpenInStore]);
-  const isOpen = {
-    [MenuOptions.sources]: currentActiveMapId === viewId && isSourcesOpenInStore,
-    [MenuOptions.locations]: currentActiveMapId === viewId && isLocationsOpenInStore
-  };
-  return jsx(SoundingsMenuBar, {
-    isOpen: isOpen,
-    handleClick: handleClick,
-    selectedSourcesAmount: sourcesAmount
-  });
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1691,24 +1417,6 @@ relHumidity) {
   const dewpoint = tKelvin / (1 - tKelvin * Math.log(relHumidity * 0.01) * gConstant / hConstant);
   return dewpoint;
 }
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
 // Parsing and conversion function
 function parseCoverageCollection(response) {
   const features = [];
@@ -1839,64 +1547,438 @@ const constructQueryParams = (collectionId, instanceId, location, datetime, para
         const parsedData = parseCoverageCollection(rawData);
         return sortSoundingFeatures(parsedData);
       } catch (err) {
-        throw new Error('Error fetching EDR data collection by location');
+        throw new Error('Error fetching EDR data collection by position');
       }
     }
   };
 };
-const useEdrCollectionForLocationPosition = (collectionId, instanceId, location, datetime, parameters = ['temperature', 'WindDirection', 'WindSpeedMS', 'windUMS', 'windVMS', 'Pressure', 'DewPoint', 'humidity', 'specifichumidity']) => {
-  // TODO: Remove once we pass in the datetime coming from the timeslider!
-  const {
-    data
-  } = useQuery({
+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(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 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);
+    return queryParams;
+  }), [dates, datetime, locations, sources]);
+  return useQueries({
+    queries,
+    combine: queryResults => {
+      const data = queryResults.map(result => {
+        return result.data || [];
+      });
+      const isPending = queryResults.some(result => result.isPending);
+      const error = queryResults.find(result => result?.error)?.error;
+      return {
+        data,
+        isPending,
+        error
+      };
+    }
+  });
+};
+const useGetCollectionsInstances = (collections, isDialogOpen) => {
+  const collectionIds = useMemo(() => collections?.map(collection => collection.id) || [], [collections]);
+  const queries = useMemo(() => collectionIds.map(id => {
+    return {
+      queryKey: ['edr-soundings-instances', id],
+      queryFn: async () => {
+        const data = await getCollectionInstance(id);
+        return data;
+      },
+      enabled: isDialogOpen
+    };
+  }), [collectionIds, isDialogOpen]);
+  const results = useQueries({
+    queries,
+    combine: queryResults => {
+      const data = queryResults.map(result => {
+        const instances = result.data?.instances.sort((featureA, featureB) => featureB.id.localeCompare(featureA.id)) || []; // Sort to get latest first
+        return instances;
+      });
+      const isPending = queryResults.some(result => result.isPending);
+      const error = queryResults.find(result => result?.error)?.error;
+      return {
+        data,
+        isPending,
+        error
+      };
+    }
+  });
+  const dataWithCollectionInfo = collections?.map((collection, index) => {
+    return {
+      ...collection,
+      instances: results.data[index] || []
+    };
+  });
+  return {
+    ...results,
+    data: dataWithCollectionInfo
+  };
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const SOUNDINGS_NAMESPACE = 'soundings';
+const initSoundingsI18n = () => {
+  safelyInitI18nForTestsAndStories(i18n, SOUNDINGS_NAMESPACE, [{
+    ns: SOUNDINGS_NAMESPACE,
+    translations: soundingsTranslations
+  }, {
+    ns: TIMESLIDER_NAMESPACE,
+    translations: timesliderTranslations
+  }, {
+    ns: SHARED_NAMESPACE,
+    translations: sharedTranslations
+  }]);
+};
+const ns = [SOUNDINGS_NAMESPACE, TIMESLIDER_NAMESPACE, SHARED_NAMESPACE];
+const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
+  ns,
+  ...params
+});
+const useSoundingsTranslation = () => useTranslation(ns);
+
+const SoundingsTimeSlider = ({
+  timesteps,
+  selectedTime,
+  updateSelectedTime
+}) => {
+  const {
+    i18n
+  } = useSoundingsTranslation();
+  const marks = timesteps.filter(date => dateUtils.isValidIsoDateString(date)).map(date => ({
+    value: dateUtils.unix(dateUtils.getUtcFromString(date)),
+    label: dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
+  }));
+  const onStepBackward = React.useCallback(() => {
+    const currentIndex = timesteps.indexOf(selectedTime);
+    const precedingIndex = Math.max(currentIndex - 1, 0);
+    updateSelectedTime(timesteps[precedingIndex]);
+  }, [selectedTime, updateSelectedTime, timesteps]);
+  const onStepForward = React.useCallback(() => {
+    const currentIndex = timesteps.indexOf(selectedTime);
+    const followingIndex = Math.min(currentIndex + 1, timesteps.length - 1);
+    updateSelectedTime(timesteps[followingIndex]);
+  }, [selectedTime, updateSelectedTime, timesteps]);
+  return jsxs("div", {
+    style: {
+      display: 'flex',
+      marginTop: '17px'
+    },
+    children: [jsxs("div", {
+      style: {
+        minWidth: '60px',
+        marginTop: '2px'
+      },
+      children: [jsx(BackwardForwardStepButton, {
+        isForwardStep: false,
+        onClickBFButton: onStepBackward,
+        isDisabled: marks.length === 0
+      }), jsx(BackwardForwardStepButton, {
+        isForwardStep: true,
+        onClickBFButton: onStepForward,
+        isDisabled: marks.length === 0
+      })]
+    }), marks.length === 0 ? jsx(CustomSlider, {
+      min: 0,
+      max: 1,
+      value: 0.5,
+      orientation: "horizontal",
+      disabled: true
+    }) : jsx(CustomSlider, {
+      orientation: "horizontal",
+      valueLabelDisplay: "auto",
+      valueLabelFormat: value => dateUtils.dateToString(dateUtils.fromUnix(value), "yyyy iii dd MMM HH:mm 'UTC'", true, i18n.language),
+      marks: marks,
+      step: null,
+      min: marks[0].value,
+      max: marks[marks.length - 1].value,
+      value: dateUtils.unix(dateUtils.getUtcFromString(selectedTime)),
+      onChange: (_, value) => {
+        updateSelectedTime(dateUtils.fromUnix(value).toISOString());
+      },
+      extraStyles: {
+        margin: '0px 20px 0px 20px',
+        '.MuiSlider-markLabel': {
+          rotate: '-45deg',
+          translate: '-41%'
+        }
+      }
+    })]
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const initialSoundingsState = {
+  selectedSources: {},
+  selectedLocations: {},
+  selectedTime: new Date().toISOString()
+};
+const slice = createSlice({
+  initialState: initialSoundingsState,
+  name: 'soundings',
+  reducers: {
+    updateSelectedSource: (draft, payloadAction) => {
+      const {
+        sourceId,
+        value
+      } = payloadAction.payload;
+      draft.selectedSources[sourceId] = {
+        ...draft.selectedSources[sourceId],
+        ...value
+      };
+    },
+    updateSelectedLocation: (draft, payloadAction) => {
+      const {
+        sourceId,
+        locationId
+      } = payloadAction.payload;
+      draft.selectedLocations[sourceId] = locationId;
+    },
+    updateSelectedTime: (draft, payloadAction) => {
+      const {
+        selectedTime
+      } = payloadAction.payload;
+      draft.selectedTime = selectedTime;
+    }
+  }
+});
+const {
+  reducer: soundingsReducer,
+  actions: soundingsActions
+} = slice;
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const getSoundingsStore = store => store?.soundings || initialSoundingsState;
+const getSourceSelections = createSelector(getSoundingsStore, store => {
+  return store.selectedSources;
+}, selectorMemoizationOptions);
+const getLocationSelections = createSelector(getSoundingsStore, store => store.selectedLocations, selectorMemoizationOptions);
+const getSelectedTime = createSelector(getSoundingsStore, store => store.selectedTime, selectorMemoizationOptions);
+const getSelectedSources = createSelector(getSoundingsStore, store => {
+  const sources = store.selectedSources;
+  const activeSources = Object.keys(sources).reduce((list, key) => {
+    const value = sources[key];
+    if (value.isChecked === true) {
+      return list.concat({
+        collectionId: key,
+        instanceId: value.instanceId
+      });
+    }
+    return list;
+  }, []);
+  return activeSources;
+}, selectorMemoizationOptions);
+const getSelectedSourcesAmount = createSelector(getSelectedSources, activeSources => {
+  return activeSources.length;
+}, selectorMemoizationOptions);
+
+const SoundingsTimeSliderConnect = ({
+  timesteps
+}) => {
+  const selectedTime = useSelector(getSelectedTime);
+  const dispatch = useDispatch();
+  const updateSelectedTime = React.useCallback(selectedTime => {
+    dispatch(soundingsActions.updateSelectedTime({
+      selectedTime
+    }));
+  }, [dispatch]);
+  return jsx(SoundingsTimeSlider, {
+    timesteps: timesteps,
+    selectedTime: selectedTime,
+    updateSelectedTime: updateSelectedTime
+  });
+};
+
+var MenuOptions;
+(function (MenuOptions) {
+  MenuOptions["sources"] = "sources";
+  MenuOptions["locations"] = "locations";
+})(MenuOptions || (MenuOptions = {}));
+const buttonStyle = {
+  height: '10px !important',
+  width: '130px'
+};
+const SoundingsMenuBar = ({
+  handleClick,
+  isOpen,
+  selectedSourcesAmount = 0
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  return jsxs(Stack, {
+    direction: "row",
+    spacing: 1,
+    sx: {
+      marginBottom: '4px'
+    },
+    children: [jsxs(CustomToggleButton, {
+      variant: "tool",
+      selected: isOpen[MenuOptions.sources],
+      "data-testid": "soundingsSourcesButton",
+      onClick: () => handleClick(MenuOptions.sources),
+      size: "small",
+      sx: buttonStyle,
+      children: [jsx(Sources, {
+        sx: {
+          marginRight: '4px!important'
+        }
+      }), selectedSourcesAmount ? `${t('sources')} (${selectedSourcesAmount})` : t('sources')]
+    }), jsx(CustomToggleButton, {
+      variant: "tool",
+      "data-testid": "soundingsLocationsButton",
+      selected: isOpen[MenuOptions.locations],
+      onClick: () => handleClick(MenuOptions.locations),
+      size: "small",
+      sx: buttonStyle,
+      children: t('locations')
+    })]
+  });
+};
+
+const MenuBarConnect = ({
+  viewId,
+  source
+}) => {
+  const dispatch = useDispatch();
+  const currentActiveMapIdSources = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsSources));
+  const currentActiveMapIdLocations = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsLocations));
+  const isSourcesOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsSources));
+  const isLocationsOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsLocations));
+  const sourcesAmount = useSelector(getSelectedSourcesAmount);
+  const dispatchActiveMapId = React.useCallback((dialogType, isOpen, activeMapId) => void dispatch(uiActions.setActiveMapIdForDialog({
+    type: dialogType,
+    mapId: viewId,
+    setOpen: activeMapId !== viewId ? true : !isOpen,
+    source
+  })), [dispatch, viewId, source]);
+  const handleClick = React.useCallback(menuType => {
+    switch (menuType) {
+      case MenuOptions.sources:
+        dispatchActiveMapId(uiTypes.DialogTypes.SoundingsSources, isSourcesOpenInStore, currentActiveMapIdSources);
+        break;
+      case MenuOptions.locations:
+        dispatchActiveMapId(uiTypes.DialogTypes.SoundingsLocations, isLocationsOpenInStore, currentActiveMapIdLocations);
+        break;
+    }
+  }, [dispatchActiveMapId, isSourcesOpenInStore, currentActiveMapIdSources, isLocationsOpenInStore, currentActiveMapIdLocations]);
+  const isOpen = {
+    [MenuOptions.sources]: currentActiveMapIdSources === viewId && isSourcesOpenInStore,
+    [MenuOptions.locations]: currentActiveMapIdLocations === viewId && isLocationsOpenInStore
+  };
+  return jsx(SoundingsMenuBar, {
+    isOpen: isOpen,
+    handleClick: handleClick,
+    selectedSourcesAmount: sourcesAmount
   });
-  const datetime2 = collectionId === undefined || data === undefined ? '' : data.extent.temporal.interval[0][0];
-  // Up until here can be removed
-  // If position passed in, call positions hook
-  const queryParams = constructQueryParams(collectionId, instanceId, location, datetime2, parameters);
-  return useQuery(queryParams);
 };
 
 const SoundingsConnect = ({
   viewId
 }) => {
+  // TODO: use in follow-up: https://gitlab.com/opengeoweb/opengeoweb/-/issues/5991
+  // const selectedTime = useSelector(getSelectedTime);
   const sourceSelections = useSelector(getSelectedSources);
   const locationSelections = useSelector(getLocationSelections);
-  // TODO https://gitlab.com/opengeoweb/opengeoweb/-/issues/5916: Allow multiple sources to be selected
-  // For now, only select the first one
   const {
     error,
-    data: soundingData,
+    data,
     isPending
-  } = useEdrCollectionForLocationPosition(sourceSelections[0]?.collectionId, sourceSelections[0]?.instanceId, locationSelections[sourceSelections[0]?.collectionId] || '');
-  return jsxs(Fragment$1, {
+  } = useMultipleSources(sourceSelections, locationSelections);
+  return jsxs(Fragment, {
     children: [error && jsx(AlertBanner, {
       title: error.message,
       shouldClose: true
     }), isPending && jsx(LinearProgress, {
-      color: "secondary"
+      color: "secondary",
+      sx: {
+        position: 'absolute',
+        width: '100%'
+      }
     }), jsxs(Box, {
       sx: {
-        padding: 2
+        padding: 2,
+        overflowY: 'scroll',
+        height: '100%'
       },
       children: [jsx(Box, {
         paddingLeft: 5,
         children: jsx(MenuBarConnect, {
           viewId: viewId
         })
-      }), jsx(Soundings
-      // TODO: use real data
-      , {
-        // TODO: use real data
-        data: {
-          features: soundingData || []
-        },
+      }), jsx(Soundings, {
+        data: data,
         svgDimensions: {
           width: 600,
           height: 600,
@@ -1907,11 +1989,343 @@ 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: []
       })]
     })]
   });
 };
 
+const SoundingsSourceMenu = ({
+  soundingsCollections,
+  isOpen = false,
+  handleClose,
+  updateCollection,
+  sourceSelections,
+  onMouseDown = () => {},
+  order = 0,
+  isLoading = false,
+  error
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  const getDisplayValue = instanceId => {
+    const instanceAsDate = dateUtils.isoStringToDate(instanceId);
+    return instanceAsDate ? dateUtils.dateToIsoString(instanceAsDate) : instanceId;
+  };
+  return jsxs(ToolContainerDraggable, {
+    startSize: {
+      width: 320
+    },
+    startPosition: {
+      top: 40,
+      left: 50
+    },
+    minWidth: 300,
+    title: t('sources'),
+    isOpen: isOpen,
+    onClose: handleClose,
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: order,
+    className: "source-menu",
+    children: [isLoading && jsx(LinearProgress, {
+      sx: {
+        width: '100%',
+        position: 'absolute'
+      }
+    }), error && jsx(AlertBanner, {
+      title: error.message,
+      shouldClose: true
+    }), jsx(List, {
+      sx: {
+        pr: 1
+      },
+      children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(collection => {
+        const {
+          isChecked,
+          instanceId
+        } = sourceSelections[collection.id] || {};
+        const hasInstances = collection.instances.length > 0;
+        const selectedInstanceId = instanceId || collection.instances[0]?.id || undefined;
+        return jsxs(ListItem, {
+          disablePadding: true,
+          children: [jsx(ListItemIcon, {
+            sx: {
+              minWidth: 42
+            },
+            children: jsx(Checkbox, {
+              checked: !!isChecked,
+              onChange: event => updateCollection(collection.id, {
+                isChecked: event.target.checked,
+                instanceId: selectedInstanceId
+              }),
+              disableRipple: true
+            })
+          }), jsxs(StyledSelect, {
+            isEnabled: true,
+            additionalStyling: {
+              width: 'calc(100% - 42px)'
+            },
+            skipLocalStyling: false,
+            value: selectedInstanceId || t('noInstancesAvailable'),
+            onChange: event => updateCollection(collection.id, {
+              instanceId: event.target.value
+            }),
+            renderValue: value => jsx(Box, {
+              sx: {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden'
+              },
+              children: jsxs(Box, {
+                display: "flex",
+                children: [jsx(Box, {
+                  sx: {
+                    minWidth: 200
+                  },
+                  children: collection.name
+                }), jsx(Box, {
+                  sx: {
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden'
+                  },
+                  children: getDisplayValue(value)
+                })]
+              })
+            }),
+            children: [!hasInstances && jsx(MenuItem, {
+              value: t('noInstancesAvailable'),
+              disabled: true,
+              sx: {
+                fontSize: 12
+              },
+              children: t('noInstancesAvailable')
+            }), collection.instances.map(instance => jsx(MenuItem, {
+              value: instance.id,
+              children: getDisplayValue(instance.id)
+            }, instance.id))]
+          })]
+        }, collection.id);
+      }) : jsx(ListItem, {
+        children: jsx(ListItemText, {
+          primary: t('noServicesFound'),
+          sx: {
+            pl: 4
+          }
+        })
+      })
+    })]
+  });
+};
+
+const SoundingsSourceDialogConnect = ({
+  soundingsCollections
+}) => {
+  const dispatch = useDispatch();
+  const {
+    isDialogOpen,
+    onCloseDialog,
+    dialogOrder,
+    setDialogOrder
+  } = useSetupDialog(uiTypes.DialogTypes.SoundingsSources);
+  const updateCollection = React.useCallback((sourceId, value) => {
+    dispatch(soundingsActions.updateSelectedSource({
+      sourceId,
+      value
+    }));
+  }, [dispatch]);
+  const sourceSelections = useSelector(getSourceSelections);
+  const {
+    data,
+    isPending,
+    error
+  } = useGetCollectionsInstances(soundingsCollections, isDialogOpen);
+  return jsx(SoundingsSourceMenu, {
+    soundingsCollections: data,
+    isOpen: isDialogOpen,
+    updateCollection: updateCollection,
+    sourceSelections: sourceSelections,
+    handleClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    isLoading: isPending,
+    error: error
+  });
+};
+
+const LocationsMenu = ({
+  services,
+  selectedLocations,
+  isOpen,
+  onClose,
+  updateSelectedLocation,
+  onMouseDown = () => {},
+  order = 0
+}) => {
+  const [searchFilter, setSearchFilter] = useState('');
+  const {
+    t
+  } = useSoundingsTranslation();
+  const filteredResults = useMemo(() => {
+    return services?.map(service => {
+      const filteredFeatures = service.features ? service.features.filter(feature => {
+        return feature.properties?.name.toLowerCase().includes(searchFilter.toLowerCase());
+      }) : [];
+      return {
+        ...service,
+        features: filteredFeatures
+      };
+    });
+  }, [services, searchFilter]);
+  const isChecked = (sourceId, locationId) => selectedLocations[sourceId] === locationId;
+  return jsx(ToolContainerDraggable, {
+    startSize: {
+      width: 320,
+      height: 500
+    },
+    minWidth: 264,
+    title: t('locations'),
+    isOpen: isOpen,
+    startPosition: {
+      top: 60,
+      left: 200
+    },
+    onClose: onClose,
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: order,
+    children: services.length === 0 ? jsx(Typography, {
+      sx: {
+        margin: 1
+      },
+      children: t('locations-menu-warning')
+    }) : jsxs(Grid, {
+      container: true,
+      children: [jsx(Box, {
+        sx: {
+          width: '100%',
+          padding: 1,
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          backgroundColor: 'geowebColors.background.surfaceApp'
+        },
+        children: jsx(SearchField, {
+          searchFilter: searchFilter,
+          setSearchFilter: setSearchFilter,
+          small: true
+        })
+      }), filteredResults.map(service => jsx(Fragment$1, {
+        children: jsx(CustomAccordion, {
+          title: service.name,
+          sx: {
+            width: '100%',
+            margin: '0 8px 2px 8px',
+            '.MuiAccordionDetails-root': {
+              padding: 0
+            },
+            '.MuiAccordionSummary-root': {
+              minHeight: '40px'
+            },
+            '.MuiAccordionSummary-content': {
+              paddingLeft: 3
+            }
+          },
+          amountOfItems: service.features.length,
+          defaultExpanded: false,
+          children: jsx(FixedSizeList, {
+            itemSize: 40,
+            height: 320,
+            width: "100%",
+            itemCount: service.features.length,
+            children: ({
+              index,
+              style
+            }) => {
+              const location = service.features[index];
+              return jsx("div", {
+                style: style,
+                children: jsx(ListItem, {
+                  disablePadding: true,
+                  disableGutters: true,
+                  children: jsxs(ListItemButton, {
+                    onClick: () => {
+                      updateSelectedLocation(service.id, isChecked(service.id, location.id) ? undefined : location.id);
+                    },
+                    dense: true,
+                    children: [jsx(ListItemIcon, {
+                      children: jsx(Checkbox, {
+                        edge: "start",
+                        checked: isChecked(service.id, location.id),
+                        tabIndex: -1,
+                        disableRipple: true,
+                        slotProps: {
+                          input: {
+                            'aria-labelledby': location.id
+                          }
+                        }
+                      })
+                    }), jsx(ListItemText, {
+                      id: location.id,
+                      primary: location.properties.name
+                    })]
+                  })
+                })
+              }, `${service.id}-${location.id}`);
+            }
+          })
+        })
+      }, service.id))]
+    })
+  });
+};
+
+const LocationsMenuConnect = ({
+  soundingsCollections
+}) => {
+  const dispatch = useDispatch();
+  const {
+    isDialogOpen,
+    onCloseDialog,
+    dialogOrder,
+    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)
+  });
+  return jsx(LocationsMenu, {
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    services: services.filter(service => selectedSourceIds.includes(service.id)),
+    selectedLocations: locationSelections,
+    updateSelectedLocation: (sourceId, locationId) => void dispatch(soundingsActions.updateSelectedLocation({
+      sourceId,
+      locationId
+    })),
+    onMouseDown: setDialogOrder,
+    order: dialogOrder
+  });
+};
+
 const soundingsComponentType = 'Soundings';
 const soundingsLookUp = payload => {
   if (payload.componentType === soundingsComponentType) {
@@ -1941,14 +2355,13 @@ const soundingsLookUp = payload => {
  * */
 const soundingsReducersMap = {
   soundings: soundingsReducer,
-  webmap: mapReducer,
-  ui: uiReducer
+  ...storeReducerMap
 };
-const soundingsRootReuducer = combineReducers(soundingsReducersMap);
+const soundingsRootReducer = combineReducers(soundingsReducersMap);
 const createMockStore = mockState => configureStore({
-  reducer: soundingsRootReuducer,
+  reducer: soundingsRootReducer,
   preloadedState: mockState,
-  middleware: getDefaultMiddleware => getDefaultMiddleware()
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(storeMiddlewares)
 });
 
-export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, Soundings, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingsComponentType, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };
+export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsConnect, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingsComponentType, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };