@opengeoweb/soundings 15.1.0 → 15.3.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Menu, ListSubheader, Typography, MenuItem, Box, Card, Stack, IconButton, Tooltip, LinearProgress, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
+import { Menu, ListSubheader, Typography, MenuItem, Box, Stack, Card, IconButton, Tooltip, LinearProgress, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
 import { range, minBy, isEqual } from 'lodash';
 import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -17,8 +17,8 @@ import { timesliderTranslations, TIME_SLIDER_NAMESPACE, BackwardForwardStepButto
 import { useResizable } from 'react-resizable-layout';
 import { useQueries } from '@tanstack/react-query';
 import { getHeaders, handleResponse } from '@opengeoweb/api';
-import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
-import { FixedSizeList } from 'react-window';
+import { createSlice, createAction, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
+import { List as List$1 } from 'react-window';
 
 var en = {
 	sources: "Sources",
@@ -31,6 +31,7 @@ var en = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Coming soon",
 	"soundings-toggle-location-markers-label": "Markers",
 	"soundings-toggle-location-markers-tooltip": "Show/hide location markers"
 };
@@ -45,6 +46,7 @@ var no = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Kommer snart",
 	"soundings-toggle-location-markers-label": "ikke oversatt",
 	"soundings-toggle-location-markers-tooltip": "ikke oversatt"
 };
@@ -59,6 +61,7 @@ var nl = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Binnenkort beschikbaar",
 	"soundings-toggle-location-markers-label": "Kaart locaties",
 	"soundings-toggle-location-markers-tooltip": "Toon/Verberg locatie punten"
 };
@@ -73,6 +76,7 @@ var fi = {
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Tulossa pian",
 	"soundings-toggle-location-markers-label": "Merkit",
 	"soundings-toggle-location-markers-tooltip": "Näytä/piilota kohdemerkit"
 };
@@ -322,7 +326,7 @@ const getDiagramName = (t, diagramType) => {
   }
 };
 // vfx code
-const initializeSvg = ({
+const initializeSvg$1 = ({
   svgRef,
   width,
   height,
@@ -341,7 +345,7 @@ const initializeSvg = ({
   svg.append('rect').attr('height', height).attr('width', width).attr('fill', '#ffffff00').attr('opacity', 1).attr('id', `${d3GraphId}-${diagramType}d3`).attr('clip-path', `url(#clip-${d3GraphId}-${diagramType}d3)`);
   return svg;
 };
-const createScales = (diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature) => {
+const createScales$1 = (diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature) => {
   if (diagramType === 'BIJVOET') {
     // Note, for Bijvoet, the x-axis is NOT temperature but theta_es
     // Both axis aren't linear nor logarithmic, hence we need an interpolation function to determine (x,y) based on (theta_es,p)
@@ -354,7 +358,7 @@ const createScales = (diagramType, width, height, minPressure, maxPressure, minT
   const yScale = d3.scaleLog().domain([maxPressure, minPressure]).range([height, 0]);
   return [xScale, yScale];
 };
-const drawAxes = ({
+const drawAxes$1 = ({
   svg,
   xScale,
   yScale,
@@ -693,7 +697,7 @@ const drawSoundingsTooltip = ({
   // Wind
   windRefd3?.style('display', 'block').style('left', `${width + margin.left + margin.right}px`).style('top', `${pressureY}px`).html(() => {
     const windSpeedStrings = interpolatedData.map((dataSet, index) => {
-      return getParamHtml(dataSet.hoveredWindSpeed, index, 'm/s', index === interpolatedData.length - 1, dataSet.color, true);
+      return getParamHtml(dataSet.hoveredWindSpeed, index, 'kts', index === interpolatedData.length - 1, dataSet.color, true);
     });
     const windDirStrings = interpolatedData.map((dataSet, index) => {
       return getParamHtml(dataSet.hoveredWindDirection, index, '°', index === interpolatedData.length - 1, dataSet.color, index === interpolatedData.length - 1);
@@ -925,7 +929,7 @@ const drawIsothermsBijvoet = ({
     const pathString = lineGenerator(points);
     const strID = `${temp}-isotherm-BIJVOET`;
     svg.append('path').attr('id', strID).attr('d', pathString).style('fill', 'none').style('stroke-width', temp % 10 === 0 ? 2 : 1).style('stroke', temp === 0 ? '#D27D2D' : 'orange').style('stroke-opacity', 0.5).attr('clip-path', `url(#clip-${d3GraphId}-BIJVOETd3)`);
-    if (temp % 10 === 0 && points[0] && points[0][1] === height) {
+    if (temp % 10 === 0 && points[0]?.[1] === height) {
       svg.append('text').text(temp).attr('text-anchor', 'middle').attr('x', `${points[0][0]}px`).attr('y', `${height + 12}px`).attr('fill', temp === 0 ? '#D27D2D' : 'orange').attr('font-size', '10px');
     }
   }
@@ -1227,7 +1231,7 @@ const Soundings = ({
     if (!svgRef.current) {
       return;
     }
-    const svg = initializeSvg({
+    const svg = initializeSvg$1({
       svgRef,
       width,
       height,
@@ -1241,9 +1245,9 @@ const Soundings = ({
     widthRef.current = width;
     const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
     const maxT = maxTemperature;
-    const [xScale, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minT, maxT);
+    const [xScale, yScale] = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT);
     yScaleRef.current = yScale;
-    drawAxes({
+    drawAxes$1({
       svg,
       xScale,
       yScale,
@@ -1330,7 +1334,7 @@ const Soundings = ({
     const dewpointRefd3 = d3.select(dewpointRef.current);
     const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
     const maxT = maxTemperature;
-    const [, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minT, maxT);
+    const [, yScale] = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT);
     drawSoundingsTooltip({
       event: synthetic,
       yScale,
@@ -1734,7 +1738,6 @@ const windSpeedRanges = [{
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const metersPerSecondToKnots = metersPerSecond => metersPerSecond * 1.94384;
 const extendIsoBar = (path, horizontalBarbMargin) => {
   const match = /^M([\d.-]+),([\d.-]+)\s*L([\d.-]+),([\d.-]+)/.exec(path);
   if (match) {
@@ -1842,11 +1845,10 @@ const removeItemsExponential = array => {
   return array.filter((_, index) => indicesToKeep.includes(index));
 };
 const getWindSymbol = value => {
-  const valueKts = metersPerSecondToKnots(value);
   const matchedRange = windSpeedRanges.find(({
     min,
     max
-  }) => valueKts >= min && valueKts < max);
+  }) => value >= min && value < max);
   // Out of range
   if (!matchedRange) {
     return null;
@@ -1925,7 +1927,7 @@ const WindBarbs = ({
     }
     const root = d3.select(svgRef.current);
     root.selectAll('*').remove();
-    const svg = initializeSvg({
+    const svg = initializeSvg$1({
       svgRef,
       width,
       height,
@@ -1943,7 +1945,7 @@ const WindBarbs = ({
     widthRef.current = width;
     const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
     const maxT = maxTemperature;
-    const [xScale, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minT, maxT);
+    const [xScale, yScale] = createScales$1(diagramType, width, height, minPressure, maxPressure, minT, maxT);
     yScaleRef.current = yScale;
     drawIsobars({
       diagramType,
@@ -2036,6 +2038,257 @@ const WindBarbs = ({
   });
 };
 
+/* *
+ * 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 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const initializeSvg = ({
+  svgRef,
+  widthHeight
+}) => {
+  const svg = d3.select(svgRef.current).attr('data-testid', 'hodograph').attr('width', '100%').attr('height', '100%').attr('viewBox', `0 0 ${widthHeight + 3} ${widthHeight + 3}`).attr('style', 'width: 100%; height: auto;');
+  const gSel = svg.select('g.hodograph');
+  if (gSel.empty()) {
+    svg.append('g').attr('class', 'hodograph');
+  }
+  return svg;
+};
+const createScales = widthHeight => {
+  const scaleRadius = d3.scaleLinear().domain([0, 100]).range([0, widthHeight / 2]);
+  const scaleAngle = d3.scaleLinear().domain([0, 360]).range([0, 2 * Math.PI]);
+  return [scaleRadius, scaleAngle];
+};
+const drawAxes = ({
+  svg,
+  scaleRadius,
+  scaleAngle,
+  widthHeight
+}) => {
+  // Draw circles
+  svg.select('g').selectAll('circle').data([10, 20, 30, 40, 50, 60, 70, 80, 90, 100]).join(enter => enter.append('circle').attr('cx', widthHeight / 2).attr('cy', widthHeight / 2).attr('fill', 'none').attr('stroke', 'gray').style('opacity', 0.6).attr('stroke-dasharray', data => data === 50 || data === 100 ? 'none' : '5, 4').attr('r', data => scaleRadius(data)));
+  // Draw windspeed scale
+  const speedTicks = scaleRadius.ticks(9);
+  svg.select('g').append('g').attr('type', 'windspeed').attr('transform', `translate(${widthHeight / 2}, ${widthHeight / 2})`) // origin transformed to center
+  .call(d3.axisBottom(scaleRadius).tickValues(speedTicks).tickSizeInner(0).tickSizeOuter(0))
+  // Draw unit label
+  .append('text').attr('fill', 'currentColor').attr('x', scaleRadius(90)).attr('y', '0').attr('font-size', '11px').attr('dy', '2.2em').attr('dx', '0.8em').attr('text-anchor', 'left').text('kts');
+};
+// Use this function to filter the pressure and parameter array so no NaN or null values are included
+const filterDomainRangeForHodograph = (pressureDomain, parameterDomain) => {
+  const filteredPressureDomain = pressureDomain.filter((_value, index) => parameterDomain[index] !== null && !isNaN(parameterDomain[index][0]) && parameterDomain[index][0] !== null && !isNaN(parameterDomain[index][1]) && parameterDomain[index][1] !== null);
+  const filteredParameterDomain = parameterDomain.filter(value => !isNaN(value[0]) && value[0] !== null && !isNaN(value[1]) && value[1] !== null);
+  // If first pressure value is smallest, reverse arrays to ensure we draw starting from surface
+  if (filteredPressureDomain[0] < filteredPressureDomain[filteredPressureDomain.length - 1]) {
+    return [filteredPressureDomain.reverse(), filteredParameterDomain.reverse()];
+  }
+  return [filteredPressureDomain, filteredParameterDomain];
+};
+const T0_SEA = 288.15; // Standard temperature in Kelvin (15 degrees Celsius)
+const P0_SEA = 101325; // Reference pressure (Pa)
+const R_GAS = 8.314462618; // Universal gas constant (J/mol K)
+const L_TEMP = 0.0065; // Temperature gradient (K/m) at sea level
+const G_ACC = 9.80665; // The gravitational acceleration in units of geopotential height (m/s2)
+const M_AIR = 0.0289647; // Mean molar mass of air at sea level (kg/mol)
+const exponent = R_GAS * L_TEMP / (G_ACC * M_AIR); // ≈ 0.1903
+// This function returns the altitude above MSL using the barometric formula in m
+// Pressure passed in is in hPa, which is converted to Pa (pressure * 100)
+const altitudeBarometricFromPressure = pressure => {
+  const altitude = T0_SEA / L_TEMP * ((P0_SEA / (pressure * 100)) ** exponent - 1);
+  return altitude;
+};
+const generateSegmentsBasedOnLevel = (pressure, windValues) => {
+  const segments = [[], [], [], [], []];
+  pressure.forEach((pressureVal, index) => {
+    // Ensure we ignore the last value
+    if (pressure[index + 1]) {
+      const heightInMeters = altitudeBarometricFromPressure(pressureVal);
+      // index 0, red line
+      if (heightInMeters < 1000) {
+        segments[0].push(windValues[index]);
+        segments[0].push(windValues[index + 1]);
+      }
+      // index 1, green line
+      if (heightInMeters >= 1000 && heightInMeters < 3000) {
+        segments[1].push(windValues[index]);
+        segments[1].push(windValues[index + 1]);
+      }
+      // index 2, yellow line
+      if (heightInMeters >= 3000 && heightInMeters < 6000) {
+        segments[2].push(windValues[index]);
+        segments[2].push(windValues[index + 1]);
+      }
+      // index 3, purple line
+      if (heightInMeters >= 6000 && heightInMeters < 9000) {
+        segments[3].push(windValues[index]);
+        segments[3].push(windValues[index + 1]);
+      }
+      // index 4, black line
+      if (heightInMeters >= 9000 && heightInMeters <= 19000) {
+        segments[4].push(windValues[index]);
+        segments[4].push(windValues[index + 1]);
+      }
+    }
+  });
+  return segments;
+};
+const HODOGRAPH_COLORS = ['red', 'olivedrab', 'orange', 'darkviolet', 'black'];
+const getColorForSegment = index => {
+  if (HODOGRAPH_COLORS[index]) {
+    return HODOGRAPH_COLORS[index];
+  }
+  return 'black';
+};
+const plotHodograph = ({
+  windValues,
+  pressureValues,
+  scaleAngle,
+  scaleRadius,
+  widthHeight,
+  svg,
+  index
+}) => {
+  // Filter out any NaN or null values
+  const [filteredPressureValues, filteredWindValues] = filterDomainRangeForHodograph(pressureValues, windValues);
+  // Construct path segments to be able to give each segment it's own color
+  const pathSegments = generateSegmentsBasedOnLevel(filteredPressureValues, filteredWindValues);
+  // index 0 = wind direction, index 1 = wind speed
+  const lineGenerator = d3.lineRadial().angle(dataPoint => scaleAngle(dataPoint[0])).radius(dataPoint => scaleRadius(dataPoint[1]));
+  svg.select('g.hodograph').selectAll(`path.dataline-${index}`).data(pathSegments).enter().append('path').classed(`dataline-${index}`, true).attr('data-testid', `hodograph-dataline-${index}`).attr('transform', `translate(${widthHeight / 2}, ${widthHeight / 2})`).attr('fill', 'none').attr('stroke', (data, segmentIndex) => getColorForSegment(segmentIndex)).attr('stroke-width', 2).style('stroke-opacity', 1).attr('d', data => lineGenerator(data));
+  // Adding a dot for the very first data point in the color used in the soundings graph
+  const firstDataPoint = filteredWindValues[0];
+  if (firstDataPoint) {
+    const color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
+    svg.select('g.hodograph').append('g').attr('transform', `translate(${widthHeight / 2}, ${widthHeight / 2})`) // origin transformed to center
+    .attr('fill', color).attr('stroke', 'none').attr('data-testid', `hodograph-datastart-${index}`).selectAll().data([firstDataPoint]).join('circle').attr('cx', dataPoint => {
+      const angle = scaleAngle(dataPoint[0]);
+      const radius = scaleRadius(dataPoint[1]);
+      return radius * Math.sin(angle);
+    }).attr('cy', dataPoint => {
+      const angle = scaleAngle(dataPoint[0]);
+      const radius = scaleRadius(dataPoint[1]);
+      return radius * -1 * Math.cos(angle);
+    }).attr('r', 3);
+  }
+};
+
+const Hodograph = ({
+  data
+}) => {
+  const svgRef = useRef(null);
+  const widthHeight = 400;
+  useEffect(() => {
+    if (!svgRef.current) {
+      return;
+    }
+    // Define svg
+    const svg = initializeSvg({
+      svgRef,
+      widthHeight
+    });
+    // Set scales for temperature and pressure
+    const [scaleRadius, scaleAngle] = createScales(widthHeight);
+    // Add axis'
+    drawAxes({
+      svg,
+      scaleRadius,
+      scaleAngle,
+      widthHeight
+    });
+    data.forEach((features, index) => {
+      const windValues = features?.map(feature => {
+        // Transform windDirectionFrom to windDirectionTo
+        const windDirectionTo = ((feature.properties.windDirection + 180) % 360 + 360) % 360;
+        return [windDirectionTo, feature.properties.windSpeed];
+      });
+      const pressureValues = features.map(feature => feature.properties.pressure);
+      // Draw Temperature
+      plotHodograph({
+        windValues,
+        pressureValues,
+        scaleAngle,
+        scaleRadius,
+        widthHeight,
+        svg,
+        index
+      });
+    });
+    // Allow zooming and panning
+    const zoomBehavior = d3.zoom().scaleExtent([1, 7]).translateExtent([[-0.2 * widthHeight, -0.2 * widthHeight], [1.2 * widthHeight, 1.2 * widthHeight]]).on('zoom', event => {
+      svg.select('g.hodograph').attr('transform', event.transform);
+    });
+    svg.call(zoomBehavior);
+    // eslint-disable-next-line consistent-return
+    return () => {
+      svg.on('zoom', null);
+      svg.select('g.hodograph').selectAll('*').remove();
+    };
+  }, [data, widthHeight]);
+  return jsx("svg", {
+    height: "100%",
+    ref: svgRef,
+    width: "100%"
+  });
+};
+
+const getLegendItem = (color, text) => {
+  return jsxs(Typography, {
+    sx: {
+      color: 'geowebColors.typographyAndIcons.text',
+      fontSize: '9px'
+    },
+    variant: "caption",
+    children: [jsx(Box, {
+      sx: {
+        width: '16px',
+        height: '4px',
+        backgroundColor: color,
+        display: 'inline-block',
+        marginRight: '4px',
+        marginBottom: '2px'
+      }
+    }), text]
+  });
+};
+const HodographLegend = () => {
+  return jsxs(Stack, {
+    direction: "column",
+    justifyContent: "center",
+    sx: {
+      flexWrap: 'wrap',
+      paddingLeft: 2,
+      paddingTop: 0.5
+    },
+    useFlexGap: true,
+    children: [getLegendItem(HODOGRAPH_COLORS[0], '0 - 1 km'), getLegendItem(HODOGRAPH_COLORS[1], '1 - 3 km'), getLegendItem(HODOGRAPH_COLORS[2], '3 - 6 km'), getLegendItem(HODOGRAPH_COLORS[3], '6 - 9 km'), getLegendItem(HODOGRAPH_COLORS[4], '9 - 19 km')]
+  });
+};
+
+const HodographCollection = ({
+  data
+}) => {
+  return jsxs(Box, {
+    sx: {
+      padding: '5px'
+    },
+    children: [jsx(Hodograph, {
+      data: data
+    }), jsx(HodographLegend, {})]
+  });
+};
+
 const ACCORDION_MIN_WIDTH = 24;
 const SoundingsAccordion = React.forwardRef(({
   name,
@@ -2047,7 +2300,8 @@ const SoundingsAccordion = React.forwardRef(({
   children,
   setSoundingsIsClosed,
   setPreviousHeight,
-  size
+  size,
+  isDisplayed
 }, aspectRatioRef) => {
   const containerRef = React.useRef(null);
   const widthRef = React.useRef(null);
@@ -2164,6 +2418,7 @@ const SoundingsAccordion = React.forwardRef(({
     };
   }, [autoSizing, minWidth, setContainerWidth]);
   const cardStyleWhenAuto = {
+    display: isDisplayed ? 'block' : 'none',
     width: 'auto',
     flex: '1 1 100%',
     minWidth: 0,
@@ -2171,12 +2426,14 @@ const SoundingsAccordion = React.forwardRef(({
     boxSizing: 'border-box'
   };
   const cardStyleWhenLocked = {
+    display: isDisplayed ? 'block' : 'none',
     width: containerWidth,
     flex: '0 1 auto',
     minWidth,
     maxWidth: maxWidth || '100%',
     boxSizing: 'border-box'
   };
+  //
   return jsx(Card, {
     className: "sortable-item",
     "data-autosizing": autoSizing ? 'true' : 'false',
@@ -2291,7 +2548,7 @@ const SortableAccordions = ({
 }) => {
   const [soundingsIsClosed, setSoundingsIsClosed] = React.useState(false);
   const [previousHeight, setPreviousHeight] = React.useState(size);
-  const createPanel = React.useCallback(id => {
+  const createPanel = React.useCallback((id, isDisplayed) => {
     const normalizedId = id.toLowerCase().replace(/\s+/g, '');
     switch (normalizedId) {
       case 'soundings':
@@ -2301,6 +2558,7 @@ const SortableAccordions = ({
             diagramType: chosenDiagramType,
             setDiagramType: setChosenDiagramType
           }),
+          isDisplayed: isDisplayed,
           name: "Soundings",
           ref: viewRef,
           setPreviousHeight: setPreviousHeight,
@@ -2324,6 +2582,7 @@ const SortableAccordions = ({
         });
       case 'windbarbs':
         return jsx(SoundingsAccordion, {
+          isDisplayed: isDisplayed,
           maxWidth: 200,
           name: "Wind Barbs",
           children: jsx(WindBarbs, {
@@ -2343,6 +2602,14 @@ const SortableAccordions = ({
             }
           })
         });
+      case 'hodograph':
+        return jsx(SoundingsAccordion, {
+          maxWidth: 500,
+          name: "Hodograph",
+          children: jsx(HodographCollection, {
+            data: data
+          })
+        });
       default:
         return null;
     }
@@ -2378,16 +2645,18 @@ const SortableAccordions = ({
         width: '100%'
       },
       tag: "div",
-      children: soundingPanelsInOrder.filter(entry => entry.isDisplayed).flatMap(({
-        id
+      children: soundingPanelsInOrder.flatMap(({
+        id,
+        isDisplayed
       }) => {
-        const panel = createPanel(id);
+        const panel = createPanel(id, isDisplayed);
         if (!panel) {
           return [];
         }
         return panel ? jsx(React.Fragment, {
           children: React.cloneElement(panel, {
             accordionId: id,
+            isDisplayed,
             handleButtonComponent: jsx(IconButton, {
               "aria-label": "drag-handle",
               className: "drag-handle",
@@ -2546,6 +2815,7 @@ const aConstant = 17.67;
 const bConstant = 243.5; // Constants for water, b in Celsius
 const gConstant = 461.5; // Gas constant ratio between water vapour and air [J/(K*kg)]
 const hConstant = 2.5e6; // Latent heat for water vaporization [J/kg]
+const ktsConstant = 1.94384;
 // Formula to use when dewpoint is not available
 // Known as Magnus Formula
 // - Calculate vapor pressure
@@ -2570,8 +2840,15 @@ relHumidity) {
   const dewpoint = tKelvin / (1 - tKelvin * Math.log(relHumidity * 0.01) * gConstant / hConstant);
   return dewpoint;
 }
+const getWindSpeedInKts = (windSpeed, windSpeedUnit) => {
+  if (windSpeedUnit === 'kts') {
+    return windSpeed;
+  }
+  // Formula to convert from m/s to kts
+  return windSpeed * ktsConstant;
+};
 // Parsing and conversion function
-function parseCoverageCollection(response, parameterMappings) {
+function parseCoverageCollection(response, parameterMappings, windSpeedUnit) {
   const features = [];
   const pressureArray = [];
   const tempArray = [];
@@ -2675,13 +2952,14 @@ function parseCoverageCollection(response, parameterMappings) {
       dewpoint = dewpointFromRelativeHumidity(tempArray[index], relativeHumidity);
     }
     // Extract wind speed and direction - use fallback calculations if no speed and direction in parameter mappings
+    // Convert to kts if retrieved in m/s
     let windSpeed = NaN;
     if (parameterMappings.windSpeed) {
-      windSpeed = collectionData.windSpeedArray[index];
+      windSpeed = getWindSpeedInKts(collectionData.windSpeedArray[index], windSpeedUnit);
     } else if (parameterMappings.windU && parameterMappings.windV) {
       const windU = collectionData.windUArray[index];
       const windV = collectionData.windVArray[index];
-      windSpeed = Math.sqrt(windU ** 2 + windV ** 2);
+      windSpeed = getWindSpeedInKts(Math.sqrt(windU ** 2 + windV ** 2), windSpeedUnit);
     }
     let windDirection = NaN;
     if (parameterMappings.windDirection) {
@@ -2790,7 +3068,7 @@ const sortSoundingFeatures = data => {
     return featureB.properties.pressure - featureA.properties.pressure;
   });
 };
-const constructQueryParams = (collectionId, baseUrl, instanceId, location, datetime, parameterMappings, verticalRange) => {
+const constructQueryParams = (collectionId, baseUrl, instanceId, location, datetime, parameterMappings, windSpeedUnit, verticalRange) => {
   const parameters = getParameterMappings(parameterMappings);
   if (typeof location === 'string') {
     // LOCATION call
@@ -2803,7 +3081,7 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
         }
         try {
           const rawData = await getEdrCollectionForLocation(collectionId, baseUrl, instanceId, location, parameters, datetime, verticalRange);
-          const parsedData = parseCoverageCollection(rawData, parameterMappings);
+          const parsedData = parseCoverageCollection(rawData, parameterMappings, windSpeedUnit);
           return sortSoundingFeatures(parsedData);
         } catch (_err) {
           throw new Error('Error fetching EDR data collection by location');
@@ -2821,7 +3099,7 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
       }
       try {
         const rawData = await getEdrCollectionForPosition(collectionId, baseUrl, instanceId, location, parameters, datetime, verticalRange);
-        const parsedData = parseCoverageCollection(rawData, parameterMappings);
+        const parsedData = parseCoverageCollection(rawData, parameterMappings, windSpeedUnit);
         return sortSoundingFeatures(parsedData);
       } catch (_err) {
         throw new Error('Error fetching EDR data collection by position');
@@ -2856,6 +3134,7 @@ const useMultipleSources = (sources, locations, datetime) => {
       url,
       instanceId,
       parameterMappings,
+      windSpeedUnit,
       verticalRange
     }, index) => {
       // Find the best matching timestep for this source
@@ -2880,7 +3159,7 @@ const useMultipleSources = (sources, locations, datetime) => {
           dateToUse = nearestTimestep;
         }
       }
-      const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dateToUse || '', parameterMappings || defaultParameterMappings, verticalRange || '');
+      const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dateToUse || '', parameterMappings || defaultParameterMappings, windSpeedUnit || 'ms', verticalRange || '');
       return queryParams;
     });
   }, [datetime, locations, sources, timesteps]);
@@ -3061,6 +3340,48 @@ const useGetCollectionLocations = (collections, enabled) => {
   });
 };
 
+/* *
+ * 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 emptyPanelIds = [];
+const toStringArray = value => {
+  if (!Array.isArray(value)) {
+    return emptyPanelIds;
+  }
+  return value.filter(item => typeof item === 'string');
+};
+const getRegisteredPanelIds = state => {
+  if (!state) {
+    return emptyPanelIds;
+  }
+  const registeredPanelIds = toStringArray(state.registeredPanelIds);
+  if (registeredPanelIds.length > 0) {
+    return registeredPanelIds;
+  }
+  return Object.keys(state.byId);
+};
+const isRegisteredPanelId = (state, panelId) => {
+  if (!panelId) {
+    return false;
+  }
+  return getRegisteredPanelIds(state).includes(panelId);
+};
+const getPanelIdFromAction = action => action.payload?.panelId;
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3084,7 +3405,7 @@ const initialSoundingsState = {
   selectedTime: new Date().toISOString(),
   diagramType: 'SKEWT',
   soundingPanels: {
-    order: ['soundings', 'windbarbs'],
+    order: ['soundings', 'windbarbs', 'hodograph'],
     entities: {
       soundings: {
         id: 'soundings',
@@ -3095,17 +3416,31 @@ const initialSoundingsState = {
         id: 'windbarbs',
         name: 'Wind Barbs',
         isDisplayed: true
+      },
+      hodograph: {
+        id: 'hodograph',
+        name: 'Hodograph',
+        isDisplayed: true
       }
     }
   },
   shouldHideLocationMarkers: false
 };
+const initialState = {
+  byId: {},
+  registeredPanelIds: [],
+  soundingsCollections: []
+};
 const slice = createSlice({
   initialState: initialSoundingsState,
   name: 'soundings',
   reducers: {
+    registerSoundingsPanel: (draft, _payloadAction) => {
+    },
     registerSoundingsPreset: (draft, payloadAction) => {
-      const preset = payloadAction.payload;
+      const {
+        preset
+      } = payloadAction.payload;
       if (preset) {
         draft.selectedSources = preset.selectedSources ?? {};
         draft.selectedLocations = preset.selectedLocations ?? {};
@@ -3151,7 +3486,7 @@ const slice = createSlice({
       const {
         order,
         entities
-      } = payloadAction.payload;
+      } = payloadAction.payload.panels;
       draft.soundingPanels.order = order;
       draft.soundingPanels.entities = entities;
     },
@@ -3160,13 +3495,86 @@ const slice = createSlice({
         newOrderOfIds
       } = payloadAction.payload;
       draft.soundingPanels.order = newOrderOfIds;
+    },
+    toggleSoundingPanelVisibility: (draft, payloadAction) => {
+      const {
+        id
+      } = payloadAction.payload;
+      const panel = draft.soundingPanels.entities[id];
+      if (panel) {
+        panel.isDisplayed = !panel.isDisplayed;
+      }
     }
   }
 });
-const {
-  reducer: soundingsReducer,
-  actions: soundingsActions
-} = slice;
+const setSoundingsCollections = createAction('soundings/setCollections');
+const soundingsActions = {
+  ...slice.actions,
+  setSoundingsCollections
+};
+const shouldHandlePanelAction = (state, action) => {
+  return isRegisteredPanelId(state, getPanelIdFromAction(action));
+};
+const normalizeSoundingsState = state => {
+  if ('byId' in state) {
+    return state;
+  }
+  return {
+    ...initialState,
+    byId: {
+      ...initialState.byId,
+      default: state
+    },
+    registeredPanelIds: ['default']
+  };
+};
+const soundingsReducer = (state, action) => {
+  const normalizedState = normalizeSoundingsState(state ?? initialState);
+  if (action.type === setSoundingsCollections.type) {
+    const collections = action.payload;
+    if (collections === normalizedState.soundingsCollections) {
+      return normalizedState;
+    }
+    return {
+      ...normalizedState,
+      soundingsCollections: collections
+    };
+  }
+  if (action.type === slice.actions.registerSoundingsPanel.type) {
+    const {
+      panelId
+    } = action.payload;
+    if (!panelId) {
+      return normalizedState;
+    }
+    if (normalizedState.registeredPanelIds?.includes(panelId)) {
+      return normalizedState;
+    }
+    return {
+      ...normalizedState,
+      registeredPanelIds: [...(normalizedState.registeredPanelIds ?? []), panelId]
+    };
+  }
+  if (!shouldHandlePanelAction(normalizedState, action)) {
+    return normalizedState;
+  }
+  const panelId = getPanelIdFromAction(action);
+  if (!panelId) {
+    return normalizedState;
+  }
+  const currentPanelState = normalizedState.byId[panelId];
+  const nextPanelState = slice.reducer(currentPanelState ?? initialSoundingsState, action);
+  if (nextPanelState === currentPanelState) {
+    return normalizedState;
+  }
+  return {
+    ...normalizedState,
+    byId: {
+      ...normalizedState.byId,
+      [panelId]: nextPanelState
+    }
+  };
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3185,7 +3593,16 @@ const {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const getSoundingsStore = store => store?.soundings || initialSoundingsState;
+const emptySoundingsCollections = [];
+const getSoundingsStore = (store, panelId) => {
+  const soundingsState = store?.soundings;
+  if (!panelId || !isRegisteredPanelId(soundingsState, panelId)) {
+    return initialSoundingsState;
+  }
+  const panelStore = soundingsState?.byId[panelId];
+  return panelStore ?? initialSoundingsState;
+};
+const getSoundingsCollections = store => store?.soundings?.soundingsCollections || emptySoundingsCollections;
 const getSourceSelections = createSelector(getSoundingsStore, store => {
   return store.selectedSources;
 }, selectorMemoizationOptions);
@@ -3204,6 +3621,7 @@ const getSelectedSources = createSelector(getSoundingsStore, store => {
         instanceId: value.instanceId,
         verticalRange: value.verticalRange,
         parameterMappings: value.parameterMappings,
+        windSpeedUnit: value.windSpeedUnit ?? 'ms',
         name: value.name ?? ''
       });
     }
@@ -3238,14 +3656,15 @@ const getSoundingsPreset = createSelector(getSoundingsStore, soundingsStore => {
     selectedSources: filteredSources
   };
 }, selectorMemoizationOptions);
+const EMPTY_SOUDINGS_PANELS = {
+  order: [],
+  entities: {}
+};
 const getSoundingPanelsInOrder = createSelector(getSoundingsStore, store => {
   const {
     order = [],
     entities = {}
-  } = store.soundingPanels || {
-    order: [],
-    entities: {}
-  };
+  } = store.soundingPanels || EMPTY_SOUDINGS_PANELS;
   return order.map(id => entities[id]);
 }, selectorMemoizationOptions);
 
@@ -3259,6 +3678,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getSelectedTime: getSelectedTime,
   getShouldHideLocationMarkers: getShouldHideLocationMarkers,
   getSoundingPanelsInOrder: getSoundingPanelsInOrder,
+  getSoundingsCollections: getSoundingsCollections,
   getSoundingsPreset: getSoundingsPreset,
   getSourceSelections: getSourceSelections
 });
@@ -3413,14 +3833,19 @@ const MenuBarConnect = ({
   source
 }) => {
   const dispatch = useDispatch();
+  React.useEffect(() => {
+    dispatch(soundingsActions.registerSoundingsPanel({
+      panelId: viewId
+    }));
+  }, [dispatch, viewId]);
   const currentActiveMapIdSources = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsSources));
   const currentActiveMapIdLocations = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsLocations));
   const currentActiveMapIdsoundingsManager = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsManager));
   const isSourcesOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsSources));
   const isLocationsOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsLocations));
   const isSoundingsManagerOpenInStore = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.SoundingsManager));
-  const sourcesAmount = useSelector(getSelectedSourcesAmount);
-  const shouldHideLocationMarkers = useSelector(getShouldHideLocationMarkers);
+  const sourcesAmount = useSelector(state => getSelectedSourcesAmount(state, viewId));
+  const shouldHideLocationMarkers = useSelector(state => getShouldHideLocationMarkers(state, viewId));
   const toggleLocationMarkers = React.useCallback(shouldHide => {
     dispatch(soundingsActions.toggleLocationMarkers({
       shouldHideLocationMarkers: shouldHide,
@@ -3450,7 +3875,7 @@ const MenuBarConnect = ({
   const isOpen = {
     [MenuOptions.sources]: currentActiveMapIdSources === viewId && isSourcesOpenInStore,
     [MenuOptions.locations]: currentActiveMapIdLocations === viewId && isLocationsOpenInStore,
-    [MenuOptions.soundingsManager]: isSoundingsManagerOpenInStore
+    [MenuOptions.soundingsManager]: currentActiveMapIdsoundingsManager === viewId && isSoundingsManagerOpenInStore
   };
   return jsx(SoundingsMenuBar, {
     handleClick: handleClick,
@@ -3600,8 +4025,8 @@ const roundToClosestTimestep = (timeToRound, availableSteps) => {
 const SoundingsTimeSliderConnect = ({
   viewId
 }) => {
-  const selectedTime = useSelector(getSelectedTime);
-  const sourceSelections = useSelector(getSelectedSources);
+  const selectedTime = useSelector(state => getSelectedTime(state, viewId));
+  const sourceSelections = useSelector(state => getSelectedSources(state, viewId));
   const dispatch = useDispatch();
   const updateSelectedTime = React.useCallback((selectedTime, isInitialCorrection = false) => {
     dispatch(soundingsActions.updateSelectedTime({
@@ -3673,12 +4098,18 @@ const SoundingsConnect = ({
   const initialLocationsRef = React.useRef({});
   const previousLocationsRef = React.useRef({});
   React.useLayoutEffect(() => {
+    dispatch(soundingsActions.registerSoundingsPanel({
+      panelId: viewId
+    }));
     if (soundingsPreset && !isEqual(soundingsPreset, soundingsPresetRef.current)) {
       soundingsPresetRef.current = soundingsPreset;
       presetJustLoadedRef.current = true;
       initialLocationsRef.current = soundingsPreset.selectedLocations || {};
       previousLocationsRef.current = {};
-      dispatch(soundingsActions.registerSoundingsPreset(soundingsPreset));
+      dispatch(soundingsActions.registerSoundingsPreset({
+        panelId: viewId,
+        preset: soundingsPreset
+      }));
       setTimeout(() => {
         presetJustLoadedRef.current = false;
         initialLocationsRef.current = {};
@@ -3689,11 +4120,11 @@ const SoundingsConnect = ({
       previousLocationsRef.current = {};
     }
   }, [dispatch, soundingsPreset, viewId]);
-  const selectedTime = useSelector(getSelectedTime);
-  const sourceSelections = useSelector(getSelectedSources, shallowEqual);
-  const locationSelections = useSelector(getLocationSelections, shallowEqual);
-  const diagramType = useSelector(getDiagramType);
-  const shouldHideLocationMarkers = useSelector(getShouldHideLocationMarkers);
+  const selectedTime = useSelector(state => getSelectedTime(state, viewId));
+  const sourceSelections = useSelector(state => getSelectedSources(state, viewId), shallowEqual);
+  const locationSelections = useSelector(state => getLocationSelections(state, viewId), shallowEqual);
+  const diagramType = useSelector(state => getDiagramType(state, viewId));
+  const shouldHideLocationMarkers = useSelector(state => getShouldHideLocationMarkers(state, viewId));
   const setChosenDiagramType = React.useCallback(diagramType => {
     dispatch(soundingsActions.updateDiagramType({
       diagramType,
@@ -3925,11 +4356,13 @@ const SoundingsConnect = ({
     data,
     isPending
   } = useMultipleSources(sourceSelections, locationSelections, selectedTime);
-  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store));
+  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store, viewId));
   const changeOrder = newOrder => {
     const orderedIds = newOrder.map(collection => collection.id);
     dispatch(soundingsActions.changeSoundingPanelOrder({
-      newOrderOfIds: orderedIds
+      panelId: viewId,
+      newOrderOfIds: orderedIds,
+      origin: SoundingsActionOrigin.soundingsComponent
     }));
   };
   return jsxs(Fragment, {
@@ -4182,10 +4615,17 @@ const SoundingsSourceDialogConnect = ({
       origin: SoundingsActionOrigin.soundingsComponent
     }));
   }, [dispatch, panelId]);
-  const sourceSelections = useSelector(getSourceSelections);
+  const soundingsCollectionsFromStore = useSelector(state => getSoundingsCollections(state));
+  const collections = soundingsCollections ?? soundingsCollectionsFromStore;
+  const sourceSelections = useSelector(state => getSourceSelections(state, panelId));
   // Set mappings for each collection
   React.useEffect(() => {
-    soundingsCollections?.forEach(collection => {
+    if (soundingsCollections && soundingsCollections.length > 0) {
+      dispatch(soundingsActions.setSoundingsCollections(soundingsCollections));
+    }
+  }, [dispatch, soundingsCollections]);
+  React.useEffect(() => {
+    collections?.forEach(collection => {
       const currentSelection = sourceSelections[collection.id];
       if (currentSelection?.url && currentSelection?.parameterMappings) {
         return;
@@ -4194,6 +4634,7 @@ const SoundingsSourceDialogConnect = ({
         url: collection.url,
         isChecked: currentSelection?.isChecked || false,
         parameterMappings: collection.parameterMappings,
+        windSpeedUnit: collection.windSpeedUnit,
         ...(collection.name && collection.name !== '' ? {
           name: collection.name
         } : {})
@@ -4201,16 +4642,17 @@ const SoundingsSourceDialogConnect = ({
       dispatch(soundingsActions.updateSelectedSource({
         sourceId: collection.id,
         value: newValue,
+        panelId,
         origin: SoundingsActionOrigin.soundingsManager
       }));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, soundingsCollections, panelId]);
+  }, [dispatch, collections, panelId]);
   const {
     data,
     isPending,
     error
-  } = useGetCollectionsInstances(soundingsCollections, isDialogOpen);
+  } = useGetCollectionsInstances(collections, isDialogOpen);
   return jsx(SoundingsSourceMenu, {
     error: error,
     handleClose: onCloseDialog,
@@ -4224,6 +4666,44 @@ const SoundingsSourceDialogConnect = ({
   });
 };
 
+const RowComponent = ({
+  index,
+  style,
+  service,
+  isChecked,
+  updateSelectedLocation
+}) => {
+  const location = service.features[index];
+  return jsx("div", {
+    style: style,
+    children: jsx(ListItem, {
+      disableGutters: true,
+      disablePadding: true,
+      children: jsxs(ListItemButton, {
+        dense: true,
+        onClick: () => {
+          updateSelectedLocation(service.id, isChecked(service.id, location.id) ? undefined : location.id);
+        },
+        children: [jsx(ListItemIcon, {
+          children: jsx(Checkbox, {
+            checked: isChecked(service.id, location.id),
+            disableRipple: true,
+            edge: "start",
+            slotProps: {
+              input: {
+                'aria-labelledby': location.id
+              }
+            },
+            tabIndex: -1
+          })
+        }), jsx(ListItemText, {
+          id: location.id,
+          primary: location.properties.name
+        })]
+      })
+    })
+  }, `${service.id}-${location.id}`);
+};
 const LocationsMenu = ({
   services,
   selectedSourcesAmount,
@@ -4315,45 +4795,18 @@ const LocationsMenu = ({
             }
           },
           title: service.name,
-          children: jsx(FixedSizeList, {
-            height: 320,
-            itemCount: service.features.length,
-            itemSize: 40,
-            width: "100%",
-            children: ({
-              index,
-              style
-            }) => {
-              const location = service.features[index];
-              return jsx("div", {
-                style: style,
-                children: jsx(ListItem, {
-                  disableGutters: true,
-                  disablePadding: true,
-                  children: jsxs(ListItemButton, {
-                    dense: true,
-                    onClick: () => {
-                      updateSelectedLocation(service.id, isChecked(service.id, location.id) ? undefined : location.id);
-                    },
-                    children: [jsx(ListItemIcon, {
-                      children: jsx(Checkbox, {
-                        checked: isChecked(service.id, location.id),
-                        disableRipple: true,
-                        edge: "start",
-                        slotProps: {
-                          input: {
-                            'aria-labelledby': location.id
-                          }
-                        },
-                        tabIndex: -1
-                      })
-                    }), jsx(ListItemText, {
-                      id: location.id,
-                      primary: location.properties.name
-                    })]
-                  })
-                })
-              }, `${service.id}-${location.id}`);
+          children: jsx(List$1, {
+            rowComponent: RowComponent,
+            rowCount: service.features.length,
+            rowHeight: 40,
+            rowProps: {
+              service,
+              isChecked,
+              updateSelectedLocation
+            },
+            style: {
+              height: 320,
+              width: '100%'
             }
           })
         })
@@ -4372,14 +4825,22 @@ const LocationsMenuConnect = ({
     dialogOrder,
     setDialogOrder
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsLocations);
-  const locationSelections = useSelector(getLocationSelections);
-  const selectedSourceIds = useSelector(getSelectedSourcesIds);
-  const sourcesAmount = useSelector(getSelectedSourcesAmount);
+  const panelId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsLocations));
+  const locationSelections = useSelector(state => getLocationSelections(state, panelId));
+  const selectedSourceIds = useSelector(state => getSelectedSourcesIds(state, panelId));
+  const sourcesAmount = useSelector(state => getSelectedSourcesAmount(state, panelId));
+  const soundingsCollectionsFromStore = useSelector(state => getSoundingsCollections(state));
+  const collections = soundingsCollections ?? soundingsCollectionsFromStore;
+  React.useEffect(() => {
+    if (soundingsCollections && soundingsCollections.length > 0) {
+      dispatch(soundingsActions.setSoundingsCollections(soundingsCollections));
+    }
+  }, [dispatch, soundingsCollections]);
   const {
     data,
     isPending,
     error
-  } = useGetCollectionLocations(soundingsCollections, isDialogOpen);
+  } = useGetCollectionLocations(collections, isDialogOpen);
   const services = useMemo(() => {
     return data?.filter(service => selectedSourceIds.includes(service.id)) || [];
   }, [data, selectedSourceIds]);
@@ -4396,37 +4857,18 @@ const LocationsMenuConnect = ({
     updateSelectedLocation: (sourceId, locationId) => {
       dispatch(soundingsActions.updateSelectedLocation({
         sourceId,
-        location: locationId
+        location: locationId,
+        panelId
       }));
     }
   });
 };
 
-var SoundingManagerDummyPreset = {
-	order: [
-		"soundings",
-		"windbarbs"
-	],
-	entities: {
-		soundings: {
-			id: "soundings",
-			name: "Soundings",
-			isDisplayed: true
-		},
-		windbarbs: {
-			id: "windbarbs",
-			name: "Wind Barbs",
-			isDisplayed: true
-		}
-	}
-};
-var preset = {
-	SoundingManagerDummyPreset: SoundingManagerDummyPreset
-};
-
 const SoundingManagerListItem = ({
+  id,
   name,
-  isDisplayed
+  isDisplayed,
+  onToggleVisibility
 }) => {
   return jsx(Card, {
     className: "sortable-item",
@@ -4460,7 +4902,16 @@ const SoundingManagerListItem = ({
           display: 'flex',
           alignItems: 'center'
         },
-        children: isDisplayed ? jsx(Visibility, {}) : jsx(VisibilityOff, {})
+        children: jsx(IconButton, {
+          "aria-label": "toggle-visibility",
+          onClick: () => onToggleVisibility(id),
+          size: "small",
+          sx: {
+            width: '24px',
+            height: '24px'
+          },
+          children: isDisplayed ? jsx(Visibility, {}) : jsx(VisibilityOff, {})
+        })
       }), jsxs(Box, {
         sx: {
           paddingRight: '8px',
@@ -4478,7 +4929,8 @@ const SoundingsManager = ({
   onMouseDown,
   order,
   soundingPanelsInOrder,
-  onOrderChange
+  onOrderChange,
+  onToggleVisibility
 }) => {
   const sortableList = React.useMemo(() => soundingPanelsInOrder.map(collection => ({
     ...collection
@@ -4506,8 +4958,10 @@ const SoundingsManager = ({
         name,
         isDisplayed
       }) => jsx(SoundingManagerListItem, {
+        id: id,
         isDisplayed: isDisplayed,
-        name: name
+        name: name,
+        onToggleVisibility: onToggleVisibility
       }, id))
     })
   });
@@ -4521,15 +4975,21 @@ const SoundingsManagerConnect = () => {
     setDialogOrder
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsManager);
   const dispatch = useDispatch();
-  React.useEffect(() => {
-    const data = preset.SoundingManagerDummyPreset;
-    dispatch(soundingsActions.addSoundingPanelsFromPreset(data));
-  }, [dispatch]);
-  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store));
+  const panelId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsManager));
+  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store, panelId));
   const changeOrder = newOrder => {
     const orderedIds = newOrder.map(collection => collection.id);
     dispatch(soundingsActions.changeSoundingPanelOrder({
-      newOrderOfIds: orderedIds
+      panelId,
+      newOrderOfIds: orderedIds,
+      origin: 'soundingsManager'
+    }));
+  };
+  const toggleVisibility = id => {
+    dispatch(soundingsActions.toggleSoundingPanelVisibility({
+      id,
+      panelId,
+      origin: 'soundingsManager'
     }));
   };
   return jsx(SoundingsManager, {
@@ -4537,6 +4997,7 @@ const SoundingsManagerConnect = () => {
     onClose: onCloseDialog,
     onMouseDown: setDialogOrder,
     onOrderChange: changeOrder,
+    onToggleVisibility: toggleVisibility,
     order: dialogOrder,
     soundingPanelsInOrder: soundingPanelsInOrder
   });