@opengeoweb/soundings 12.1.2 → 12.2.0

package/index.esm.js

@@ -1,10 +1,1140 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useRef, useEffect, useState, Fragment as Fragment$1, useMemo } from 'react';
+import * as d3 from 'd3';
+import { Card, List, ListItem, ListItemIcon, Checkbox, MenuItem, Box, ListItemText, ListSubheader, ListItemButton, Collapse, Button } from '@mui/material';
+import { useSetupDialog, uiTypes, uiSelectors, uiActions } from '@opengeoweb/store';
+import { ToolContainerDraggable, StyledSelect, dateUtils } from '@opengeoweb/shared';
+import 'i18next';
+import { useTranslation } from 'react-i18next';
+import { getHeaders, handleResponse } from '@opengeoweb/api';
+import { useQueries } from '@tanstack/react-query';
+import { ChevronDown, Sources } from '@opengeoweb/theme';
+import { useDispatch, useSelector } from 'react-redux';
 
-const Sounding = () => {
-  // eslint-disable-next-line i18next/no-literal-string
-  return jsx("div", {
-    children: "This is an example component"
+/* *
+ * 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 SOUNDING_COLORS = ['#4487f3'];
+// vfx code
+const initializeSvg = ({
+  svgRef,
+  width,
+  height,
+  margin
+}) => {
+  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', 'white').attr('opacity', 1).attr('id', 'skewTd3').attr('clip-path', 'url(#clip-skewTd3)');
+  return svg;
+};
+const drawAxes = ({
+  svg,
+  xScale,
+  yScale,
+  height,
+  width
+}) => {
+  // Create x-axis with intervals
+  svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).ticks(10)).append('text').attr('fill', '#000').attr('x', `${width - 8}px`).attr('y', `${12}px`).attr('dy', '1em').attr('font-size', '12px').attr('text-anchor', 'middle').text('°C');
+  // Create y-axis with intervals
+  svg.append('g').call(d3.axisLeft(yScale).ticks(0, '')).append('text').attr('fill', '#000').attr('transform', 'translate(0)').attr('y', `${0}px`).attr('x', `${ -16}px`).attr('font-size', '12px').attr('dy', '1em').attr('text-anchor', 'middle').text('hPa');
+};
+const addLegends = ({
+  svg,
+  width
+}) => {
+  // Add a legend for the temperature line
+  svg.append('text').attr('x', width - 160).attr('y', 20).attr('fill', SOUNDING_COLORS[0]).text('Temperature (°C)');
+  // 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 plotSounding = ({
+  temperatureValues,
+  pressureValues,
+  color,
+  lineStyle,
+  xScale,
+  yScale,
+  height,
+  svg
+}) => {
+  // Map temp and pressure to pixels
+  const Px = d3.zip(pressureValues, temperatureValues).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)');
+};
+
+/* *
+ * 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 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 dt = Tt - temperature;
+  return [dp, dt];
+};
+const drawDryAdiabats = ({
+  staticPressureArray,
+  height,
+  xScale,
+  yScale,
+  svg,
+  dp
+}) => {
+  for (let Tbase = -40; Tbase < 240; Tbase += 10) {
+    let Pnew = staticPressureArray[0];
+    let Tnew = Tbase;
+    const Px = [];
+    for (const pressure of staticPressureArray) {
+      const DPDT = dryAdiabaticLapserate(Tbase, Pnew, Tnew, dp);
+      Tnew += DPDT[1];
+      Pnew += DPDT[0];
+      Px.push([xScale(Tnew), yScale(pressure)]);
+    }
+    // Skew/shear transformation for skew-t
+    for (const PxElement of Px) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const lineGenerator = d3.line();
+    const daPathString = lineGenerator(Px);
+    svg.append('path').attr('d', daPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'green').style('opacity', 0.3).attr('clip-path', 'url(#clip-skewTd3)');
+  }
+};
+
+/* *
+ * 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 isobarValues = [200, 300, 400, 500, 700, 850, 925, 1000];
+const drawIsobars = ({
+  minTemperature,
+  maxTemperature,
+  xScale,
+  yScale,
+  svg
+}) => {
+  // Calculate X and Y coordinates for each pressure level
+  for (const pressureVal of isobarValues) {
+    const Px = [];
+    const tempBounds = [minTemperature, maxTemperature];
+    const Ppx = yScale(pressureVal);
+    for (const bound of tempBounds) {
+      Px.push([xScale(bound), yScale(pressureVal)]);
+    }
+    const lineGenerator = d3.line();
+    const isoPathString = lineGenerator(Px);
+    const strID = `${pressureVal}textId`;
+    svg.append('path').attr('id', strID).attr('d', isoPathString).style('fill', 'none').style('stroke-width', 1.5).style('stroke', '#B5B51F').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+    svg.append('text').text(pressureVal).attr('text-anchor', 'middle').attr('x', `${ -24}px`).attr('y', Ppx + 5) // Y-coordinate of the label
+    .attr('fill', '#000').attr('font-size', '12px');
+  }
+};
+
+/* *
+ * 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 isohumeValues = [0.001, 0.01, 0.1, 0.5, 1.0, 2.0, 5.0, 8.0, 12.0, 16.0, 20.0];
+const drawIsohumes = ({
+  staticPressureArray,
+  height,
+  xScale,
+  yScale,
+  svg
+}) => {
+  for (const isohumeVal of isohumeValues) {
+    const Px = [];
+    for (const pressureVal of staticPressureArray) {
+      const es = pressureVal * isohumeVal / (isohumeVal + 622.0);
+      const logthing = Math.log(es / 6.11);
+      const temp = 237.3 * logthing / (17.269 - logthing);
+      Px.push([xScale(temp), yScale(pressureVal)]);
+    }
+    // Skew/shear transformation for skew-t
+    for (const PxElement of Px) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const lineGenerator = d3.line();
+    const pathStringQ = lineGenerator(Px);
+    const strID = `${isohumeVal}isohume`;
+    svg.append('path').attr('id', strID).attr('d', pathStringQ).style('fill', 'none').style('stroke-width', 1).style('stroke-dasharray', '15, 8').style('stroke', '#5267A9').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+    svg.append('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");
+ * 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 drawIsotherms = ({
+  staticPressureArray,
+  height,
+  xScale,
+  yScale,
+  svg
+}) => {
+  //  lines of constant temperature (10 degree interval from -80...+40C)
+  for (let temp = -80; temp <= 40; temp += 10) {
+    const points = [];
+    for (const pressure of staticPressureArray) {
+      const Ppx = yScale(pressure);
+      const Tpx = xScale(temp);
+      const skewedX = Tpx + (height - Ppx);
+      points.push([skewedX, Ppx]);
+    }
+    const lineGenerator = d3.line();
+    const pathString = lineGenerator(points);
+    svg.append('path').attr('d', pathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'orange').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+  }
+};
+
+/* *
+ * 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 CP = 1.03e3;
+const KELVIN = 273.15;
+const L_CONST = 2.5e6;
+const RD = 287.0;
+const RV = 461.0;
+const moistAdiabaticLapserate = (minTemp, pressure, temperature, dp) => {
+  const kelvin = temperature + KELVIN;
+  const lsbc = L_CONST / RV * (1.0 / KELVIN - 1.0 / kelvin);
+  const rw = 6.11 * Math.exp(lsbc) * (0.622 / pressure);
+  const lrwbt = L_CONST * rw / (RD * kelvin);
+  const nume = RD * kelvin / (CP * pressure) * (1.0 + lrwbt);
+  const deno = 1.0 + lrwbt * (0.622 * L_CONST / (CP * kelvin));
+  const gradi = nume / deno;
+  const dt = dp * gradi;
+  return [dp, dt];
+};
+const drawMoistAdiabats = ({
+  staticPressureArray,
+  minTemperature,
+  maxTemperature,
+  minPressure,
+  maxPressure,
+  width,
+  height,
+  xScale,
+  yScale,
+  svg,
+  dp
+}) => {
+  /* We need the moist adiabat to cross the isotherm at 1000hPa
+     Therefore we start the calculations from 1000hPa and work upwards (towards 0)
+     then draw a separate line starting from 1000hPa working down (towards defined maxPressure) */
+  for (let Tbase = -40; Tbase < 240; Tbase += 10) {
+    let Pnew = 1000;
+    let Tnew = Tbase;
+    const Px = [];
+    // First calculate position of moist adiabat at a pressure of 1000hPa
+    const Temp = Tnew + -1 * minTemperature;
+    const Tpx1000 = width * Temp / (maxTemperature - minTemperature);
+    const Ppx1000 = height * (Math.log(Pnew) - Math.log(minPressure)) / (Math.log(maxPressure) - Math.log(minPressure));
+    Px.push([Tpx1000, Ppx1000]);
+    // Then calculate the rest of the moist adiabat for pressures <1000hPa
+    for (const pressure of staticPressureArray) {
+      if (pressure < 1000) {
+        const DPDT = moistAdiabaticLapserate(-80, Pnew, Tnew, dp);
+        Tnew += DPDT[1];
+        Pnew += DPDT[0];
+        Px.push([xScale(Tnew), yScale(pressure)]);
+      }
+    }
+    for (const PxElement of Px) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const lineGenerator = d3.line();
+    const maPathString = lineGenerator(Px);
+    // Draw this first section of the line
+    svg.append('path').attr('d', maPathString).style('fill', 'none').style('stroke-width', 1).style('stroke', 'purple').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+    // Now work backwards from 1000hPa to calculate most adiabat until the bottom of the plot
+    const PxBottom = [];
+    PxBottom.push([Tpx1000, Ppx1000]);
+    let PnewBottom = 1000;
+    let TnewBottom = Tbase;
+    const startIndex = staticPressureArray.findIndex(value => value === 1000);
+    for (let i = startIndex - 1; i >= 0; i -= 1) {
+      const DPDT = moistAdiabaticLapserate(-80, PnewBottom, TnewBottom, 5);
+      TnewBottom += DPDT[1];
+      PnewBottom += DPDT[0];
+      PxBottom.push([xScale(TnewBottom), yScale(staticPressureArray[i])]);
+    }
+    // Skew/shear transformation for skew-t
+    for (const PxElement of PxBottom) {
+      PxElement[0] = PxElement[0] + height - PxElement[1];
+    }
+    const maPathStringBottom = lineGenerator(PxBottom);
+    svg.append('path').attr('d', maPathStringBottom).style('fill', 'none').style('stroke-width', 1).style('stroke', 'purple').style('stroke-opacity', 0.5).attr('clip-path', 'url(#clip-skewTd3)');
+  }
+};
+
+/* *
+ * 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 drawStaticLines = ({
+  dp,
+  staticPressureArray,
+  minTemperature,
+  maxTemperature,
+  height,
+  width,
+  xScale,
+  yScale,
+  minPressure,
+  maxPressure,
+  svg
+}) => {
+  drawIsobars({
+    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
+  });
+};
+
+const Soundings = ({
+  data: {
+    features
+  },
+  svgDimensions
+  // tooltip
+}) => {
+  const svgRef = useRef(null);
+  const svgDimensionsOptions = {
+    width: svgDimensions?.width || 812,
+    height: svgDimensions?.height || 802,
+    margin: {
+      top: svgDimensions?.margin?.top || 12,
+      right: svgDimensions?.margin?.right || 20,
+      bottom: svgDimensions?.margin?.bottom || 25,
+      left: svgDimensions?.margin?.left || 20
+    }
+  };
+  // Set SVG dimensions
+  const margin = {
+    top: svgDimensionsOptions?.margin?.top,
+    right: svgDimensionsOptions?.margin?.right,
+    bottom: svgDimensionsOptions?.margin?.bottom,
+    left: svgDimensionsOptions?.margin?.left
+  };
+  const baseWidth = svgDimensionsOptions?.width;
+  const baseHeight = svgDimensionsOptions?.height;
+  const width = baseWidth - (margin.left + margin.right);
+  const height = baseHeight - (margin.top + margin.bottom);
+  useEffect(() => {
+    if (!svgRef.current) {
+      return;
+    }
+    // Define svg
+    const svg = initializeSvg({
+      svgRef,
+      width,
+      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;
+    let pressure = maxPressure;
+    while (pressure > minPressure) {
+      pressure += dp;
+      staticPressureArray.push(pressure);
+    }
+    // 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]);
+    // Add axis'
+    drawAxes({
+      svg,
+      xScale,
+      yScale,
+      height,
+      width
+    });
+    // Draw static lines
+    drawStaticLines({
+      dp,
+      staticPressureArray,
+      minTemperature,
+      maxTemperature,
+      height,
+      width,
+      xScale,
+      yScale,
+      minPressure,
+      maxPressure,
+      svg
+    });
+    // Add legends
+    addLegends({
+      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
+    });
+    // eslint-disable-next-line consistent-return
+    return () => {
+      svg.selectAll('*').remove();
+      // svg.on('mousemove', null)
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  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 useSoundingsTranslation = () => useTranslation(SOUNDINGS_NAMESPACE);
+
+const SoundingsSourceMenu = ({
+  soundingsCollections,
+  isOpen = false,
+  handleClose
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  const [currentSelection, setCurrentSelection] = React.useState({});
+  React.useEffect(() => {
+    const initialSelection = {};
+    soundingsCollections?.forEach(collection => {
+      const initialInstanceId = collection.instances.length > 0 ? collection.instances[0].id : undefined;
+      initialSelection[collection.id] = {
+        isChecked: false,
+        selectedInstanceId: initialInstanceId
+      };
+    });
+    setCurrentSelection(initialSelection);
+  }, [soundingsCollections]);
+  // TODO move to redux
+  const handleSelectionChange = (collectionId, update) => {
+    setCurrentSelection(prev => {
+      const currentCollectionState = prev[collectionId] || {};
+      return {
+        ...prev,
+        [collectionId]: {
+          ...currentCollectionState,
+          ...update
+        }
+      };
+    });
+  };
+  const getDisplayValue = (collection, instanceId) => {
+    if (!instanceId) {
+      return jsx(Fragment, {
+        children: t('noInstancesAvailable')
+      });
+    }
+    const instanceIndex = collection.instances.findIndex(i => i.id === instanceId);
+    if (instanceIndex === 0) {
+      return jsxs(Box, {
+        display: "flex",
+        children: [jsx(Box, {
+          sx: {
+            minWidth: 200
+          },
+          children: collection.name
+        }), jsx(Box, {
+          sx: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden'
+          },
+          children: t('latest')
+        })]
+      });
+    }
+    return jsxs(Box, {
+      display: "flex",
+      children: [jsx(Box, {
+        sx: {
+          minWidth: 200
+        },
+        children: collection.name
+      }), jsx(Box, {
+        sx: {
+          textOverflow: 'ellipsis',
+          overflow: 'hidden'
+        },
+        children: dateUtils.dateToIsoString(dateUtils.isoStringToDate(instanceId))
+      })]
+    });
+  };
+  return jsx(ToolContainerDraggable, {
+    startSize: {
+      width: 320
+    },
+    minWidth: 300,
+    title: t('sources'),
+    isOpen: isOpen,
+    onClose: () => handleClose(),
+    bounds: "parent",
+    children: jsx(List, {
+      sx: {
+        pr: 1
+      },
+      children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(collection => {
+        const currentCollectionState = currentSelection[collection.id];
+        const isChecked = currentCollectionState?.isChecked ?? false;
+        const selectedInstanceId = currentCollectionState?.selectedInstanceId ?? ''; // Use empty string for Select value if undefined
+        const hasInstances = collection.instances.length > 0;
+        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
+              }),
+              disableRipple: true
+            })
+          }), jsxs(StyledSelect, {
+            isEnabled: true,
+            skipLocalStyling: false,
+            value: selectedInstanceId,
+            onChange: event => handleSelectionChange(collection.id, {
+              selectedInstanceId: event.target.value
+            }),
+            renderValue: value => jsx(Box, {
+              sx: {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden'
+              },
+              children: getDisplayValue(collection, value)
+            }),
+            children: [!hasInstances && jsx(MenuItem, {
+              value: "",
+              disabled: true,
+              sx: {
+                fontSize: 12
+              },
+              children: t('noInstancesAvailable')
+            }), collection.instances.map((instance, index) => jsx(MenuItem, {
+              value: instance.id,
+              children: index === 0 ? t('latest') : dateUtils.dateToIsoString(dateUtils.isoStringToDate(instance.id)) || instance.id
+            }, instance.id))]
+          })]
+        }, collection.id);
+      }) : jsx(ListItem, {
+        children: jsx(ListItemText, {
+          primary: t('noServicesFound'),
+          sx: {
+            pl: 4
+          }
+        })
+      })
+    })
+  });
+};
+
+/* *
+ * 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 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`, {
+  headers: getHeaders()
+}).then(handleResponse);
+
+const SoundingsSourceDialogConnect = ({
+  soundingsCollections
+}) => {
+  const [soundingsCollectionsWithInstances, setSoundingsCollectionsWithInstances] = React.useState();
+  const {
+    isDialogOpen,
+    onCloseDialog
+  } = useSetupDialog(uiTypes.DialogTypes.SoundingsSources);
+  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,
+    handleClose: () => onCloseDialog()
+  });
+};
+
+const LocationsMenu = ({
+  services,
+  isOpen,
+  onClose
+}) => {
+  const [collapseMap, setCollapseMap] = useState({});
+  const {
+    t
+  } = useSoundingsTranslation();
+  return jsx(ToolContainerDraggable, {
+    startSize: {
+      width: 320,
+      height: 500
+    },
+    title: t('locations'),
+    headerSize: "medium",
+    isOpen: isOpen,
+    onClose: () => onClose(),
+    bounds: "parent",
+    children: jsx(List, {
+      disablePadding: true,
+      sx: {
+        maxHeight: '100%',
+        overflowY: 'auto'
+      },
+      children: services.map(service => jsxs(Fragment$1, {
+        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, {
+              sx: {
+                pl: 4
+              },
+              children: location.properties.name
+            }, `${service.id}-${location.id}`))
+          })
+        })]
+      }, service.id))
+    })
+  });
+};
+
+const LocationsMenuConnect = ({
+  soundingsCollections
+}) => {
+  const {
+    isDialogOpen,
+    onCloseDialog
+  } = useSetupDialog(uiTypes.DialogTypes.soundingsLocations);
+  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
+  });
+};
+
+var SoundingFeatures = [
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -4.74961,
+			dewpoint: -5.646749999999998,
+			pressure: 1000,
+			windSpeed: 9.291457267156751,
+			windDirection: -18.803465916723095
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -5.72214,
+			dewpoint: -5.740760000000001,
+			pressure: 925,
+			windSpeed: 11.482972536081412,
+			windDirection: 18.797638010822038
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -5.94461,
+			dewpoint: -6.284489999999999,
+			pressure: 850,
+			windSpeed: 10.355155067433804,
+			windDirection: 46.95919904362452
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -7.85121,
+			dewpoint: -7.903229999999999,
+			pressure: 700,
+			windSpeed: 10.216260991987234,
+			windDirection: 125.33681135255785
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -20.9667,
+			dewpoint: -22.12218,
+			pressure: 500,
+			windSpeed: 14.222681508365433,
+			windDirection: 120.16238041101973
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -48.8678,
+			dewpoint: -60.802800000000005,
+			pressure: 300,
+			windSpeed: 23.436991331013456,
+			windDirection: 128.0547684118523
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -58.3,
+			dewpoint: -69.68567999999999,
+			pressure: 250,
+			windSpeed: 28.155356371568097,
+			windDirection: 133.50317473958455
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -68.6166,
+			dewpoint: -71.9641,
+			pressure: 200,
+			windSpeed: 24.833678713593763,
+			windDirection: 137.492458365928
+		}
+	},
+	{
+		type: "Feature",
+		geometry: {
+			type: "Point",
+			coordinates: [
+				24.9727,
+				60.3294
+			]
+		},
+		properties: {
+			time: "2025-02-05T00:00:00Z",
+			temp: -69.4935,
+			dewpoint: -87.827772,
+			pressure: 50,
+			windSpeed: 35.1450619746217,
+			windDirection: 129.8915278264372
+		}
+	}
+];
+
+var MenuOptions;
+(function (MenuOptions) {
+  MenuOptions["sources"] = "sources";
+  MenuOptions["locations"] = "locations";
+})(MenuOptions || (MenuOptions = {}));
+const SoundingsMenuBar = ({
+  handleClick,
+  isOpen
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  return jsxs(Box, {
+    display: "flex",
+    gap: 1,
+    children: [jsx(Button, {
+      variant: isOpen[MenuOptions.sources] ? 'primary' : 'tertiary',
+      disableRipple: true,
+      "aria-pressed": isOpen[MenuOptions.sources],
+      "data-testid": "soundingsSourcesButton",
+      onClick: () => handleClick(MenuOptions.sources),
+      startIcon: jsx(Sources, {}),
+      size: "small",
+      children: t('sources')
+    }), jsx(Button, {
+      variant: isOpen[MenuOptions.locations] ? 'primary' : 'tertiary',
+      disableRipple: true,
+      "data-testid": "soundingsLocationsButton",
+      "aria-pressed": isOpen[MenuOptions.locations],
+      onClick: () => handleClick(MenuOptions.locations),
+      size: "small",
+      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 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
+  });
+};
+
+const SoundingsConnect = ({
+  viewId
+}) => {
+  return jsxs(Box, {
+    sx: {
+      padding: 2
+    },
+    children: [jsx(Box, {
+      paddingLeft: 5,
+      children: jsx(MenuBarConnect, {
+        viewId: viewId
+      })
+    }), jsx(Soundings
+    // TODO: use real data
+    , {
+      // TODO: use real data
+      data: {
+        features: SoundingFeatures
+      },
+      svgDimensions: {
+        width: 600,
+        height: 600,
+        margin: {
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        }
+      }
+    })]
+  });
+};
+
+const soundingsComponentType = 'Soundings';
+const soundingsLookUp = payload => {
+  if (payload.componentType === soundingsComponentType) {
+    return jsx(SoundingsConnect, {
+      viewId: payload.id
+    });
+  }
+  return null;
 };
 
-export { Sounding };
+export { LocationsMenuConnect, Soundings, SoundingsSourceDialogConnect, soundingsComponentType, soundingsLookUp };