@opengeoweb/soundings 15.0.0 → 15.2.0

package/index.esm.js

@@ -1,8 +1,9 @@
 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 { range, minBy, isEqual } from 'lodash';
 import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomToggleButton, dateUtils, CustomSlider, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomToggleButton, dateUtils, SwitchButton, CustomSlider, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
 import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericSelectors, mapSelectors, genericActions, syncGroupsActions, mapActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
 import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, webmapUtils } from '@opengeoweb/webmap';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
@@ -16,9 +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 { range, minBy } from 'lodash';
-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",
@@ -30,7 +30,10 @@ var en = {
 	options: "Options",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Coming soon",
+	"soundings-toggle-location-markers-label": "Markers",
+	"soundings-toggle-location-markers-tooltip": "Show/hide location markers"
 };
 var no = {
 	sources: "Kilder",
@@ -42,7 +45,10 @@ var no = {
 	options: "Valg",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Kommer snart",
+	"soundings-toggle-location-markers-label": "ikke oversatt",
+	"soundings-toggle-location-markers-tooltip": "ikke oversatt"
 };
 var nl = {
 	sources: "Bronnen",
@@ -54,7 +60,10 @@ var nl = {
 	options: "Opties",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Binnenkort beschikbaar",
+	"soundings-toggle-location-markers-label": "Kaart locaties",
+	"soundings-toggle-location-markers-tooltip": "Toon/Verberg locatie punten"
 };
 var fi = {
 	sources: "Lähteet",
@@ -66,7 +75,10 @@ var fi = {
 	options: "Valinnat",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"coming-soon": "Tulossa pian",
+	"soundings-toggle-location-markers-label": "Merkit",
+	"soundings-toggle-location-markers-tooltip": "Näytä/piilota kohdemerkit"
 };
 var soundingsTranslations = {
 	en: en,
@@ -917,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');
     }
   }
@@ -2039,7 +2051,8 @@ const SoundingsAccordion = React.forwardRef(({
   children,
   setSoundingsIsClosed,
   setPreviousHeight,
-  size
+  size,
+  isDisplayed
 }, aspectRatioRef) => {
   const containerRef = React.useRef(null);
   const widthRef = React.useRef(null);
@@ -2156,6 +2169,7 @@ const SoundingsAccordion = React.forwardRef(({
     };
   }, [autoSizing, minWidth, setContainerWidth]);
   const cardStyleWhenAuto = {
+    display: isDisplayed ? 'block' : 'none',
     width: 'auto',
     flex: '1 1 100%',
     minWidth: 0,
@@ -2163,12 +2177,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',
@@ -2283,7 +2299,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':
@@ -2293,6 +2309,7 @@ const SortableAccordions = ({
             diagramType: chosenDiagramType,
             setDiagramType: setChosenDiagramType
           }),
+          isDisplayed: isDisplayed,
           name: "Soundings",
           ref: viewRef,
           setPreviousHeight: setPreviousHeight,
@@ -2316,6 +2333,7 @@ const SortableAccordions = ({
         });
       case 'windbarbs':
         return jsx(SoundingsAccordion, {
+          isDisplayed: isDisplayed,
           maxWidth: 200,
           name: "Wind Barbs",
           children: jsx(WindBarbs, {
@@ -2370,16 +2388,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",
@@ -2850,10 +2870,28 @@ const useMultipleSources = (sources, locations, datetime) => {
       parameterMappings,
       verticalRange
     }, index) => {
-      // If acceptance time logic is needed, it could come here.
-      const dateToUse = datetime &&
-      // Only use selected time if exact match if found
-      timesteps[index].includes(new Date(datetime).toISOString()) ? datetime : '';
+      // Find the best matching timestep for this source
+      let dateToUse = '';
+      if (datetime && timesteps[index] && timesteps[index].length > 0) {
+        const requestedTime = new Date(datetime).getTime();
+        const availableTimesteps = timesteps[index];
+        // Check for exact match first
+        if (availableTimesteps.includes(new Date(datetime).toISOString())) {
+          dateToUse = datetime;
+        } else {
+          // Find nearest timestep (prefer earlier timesteps if equidistant)
+          let nearestTimestep = availableTimesteps[0];
+          let minDiff = Math.abs(new Date(availableTimesteps[0]).getTime() - requestedTime);
+          for (const timestep of availableTimesteps) {
+            const diff = Math.abs(new Date(timestep).getTime() - requestedTime);
+            if (diff < minDiff) {
+              minDiff = diff;
+              nearestTimestep = timestep;
+            }
+          }
+          dateToUse = nearestTimestep;
+        }
+      }
       const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dateToUse || '', parameterMappings || defaultParameterMappings, verticalRange || '');
       return queryParams;
     });
@@ -3035,6 +3073,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.
@@ -3056,15 +3136,48 @@ const initialSoundingsState = {
   selectedSources: {},
   selectedLocations: {},
   selectedTime: new Date().toISOString(),
+  diagramType: 'SKEWT',
   soundingPanels: {
-    order: [],
-    entities: {}
-  }
+    order: ['soundings', 'windbarbs'],
+    entities: {
+      soundings: {
+        id: 'soundings',
+        name: 'Soundings',
+        isDisplayed: true
+      },
+      windbarbs: {
+        id: 'windbarbs',
+        name: 'Wind Barbs',
+        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;
+      if (preset) {
+        draft.selectedSources = preset.selectedSources ?? {};
+        draft.selectedLocations = preset.selectedLocations ?? {};
+        draft.selectedTime = preset.selectedTime ?? new Date().toISOString();
+        draft.diagramType = preset.diagramType ?? 'SKEWT';
+        draft.soundingPanels = preset.soundingPanels ?? initialSoundingsState.soundingPanels;
+        draft.shouldHideLocationMarkers = preset.shouldHideLocationMarkers ?? false;
+      }
+    },
     updateSelectedSource: (draft, payloadAction) => {
       const {
         sourceId,
@@ -3088,11 +3201,20 @@ const slice = createSlice({
       } = payloadAction.payload;
       draft.selectedTime = selectedTime;
     },
+    updateDiagramType: (draft, payloadAction) => {
+      draft.diagramType = payloadAction.payload.diagramType;
+    },
+    toggleLocationMarkers: (draft, payloadAction) => {
+      const {
+        shouldHideLocationMarkers
+      } = payloadAction.payload;
+      draft.shouldHideLocationMarkers = shouldHideLocationMarkers;
+    },
     addSoundingPanelsFromPreset: (draft, payloadAction) => {
       const {
         order,
         entities
-      } = payloadAction.payload;
+      } = payloadAction.payload.panels;
       draft.soundingPanels.order = order;
       draft.soundingPanels.entities = entities;
     },
@@ -3101,13 +3223,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");
@@ -3126,12 +3321,23 @@ 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);
 const getLocationSelections = createSelector(getSoundingsStore, store => store.selectedLocations, selectorMemoizationOptions);
-const getSelectedTime = createSelector(getSoundingsStore, store => store.selectedTime, selectorMemoizationOptions);
+const getSelectedTime = createSelector(getSoundingsStore, store => store.selectedTime ?? new Date().toISOString(), selectorMemoizationOptions);
+const getDiagramType = createSelector(getSoundingsStore, store => store.diagramType ?? 'SKEWT', selectorMemoizationOptions);
+const getShouldHideLocationMarkers = createSelector(getSoundingsStore, store => store.shouldHideLocationMarkers ?? false, selectorMemoizationOptions);
 const getSelectedSources = createSelector(getSoundingsStore, store => {
   const sources = store.selectedSources;
   const activeSources = Object.keys(sources).reduce((list, key) => {
@@ -3139,11 +3345,11 @@ const getSelectedSources = createSelector(getSoundingsStore, store => {
     if (value.isChecked === true) {
       return list.concat({
         collectionId: key,
-        url: value.url,
+        url: value.url ?? '',
         instanceId: value.instanceId,
         verticalRange: value.verticalRange,
         parameterMappings: value.parameterMappings,
-        name: value.name || ''
+        name: value.name ?? ''
       });
     }
     return list;
@@ -3156,17 +3362,138 @@ const getSelectedSourcesAmount = createSelector(getSelectedSources, activeSource
 const getSelectedSourcesIds = createSelector(getSelectedSources, activeSources => {
   return activeSources.map(source => source.collectionId);
 }, selectorMemoizationOptions);
+const getSoundingsPreset = createSelector(getSoundingsStore, soundingsStore => {
+  const {
+    selectedTime,
+    selectedSources,
+    ...rest
+  } = soundingsStore;
+  const filteredSources = Object.entries(selectedSources).reduce((acc, [key, value]) => {
+    const {
+      instanceId,
+      ...sourceWithoutInstance
+    } = value;
+    return {
+      ...acc,
+      [key]: sourceWithoutInstance
+    };
+  }, {});
+  return {
+    ...rest,
+    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);
 
+var selectors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getDiagramType: getDiagramType,
+  getLocationSelections: getLocationSelections,
+  getSelectedSources: getSelectedSources,
+  getSelectedSourcesAmount: getSelectedSourcesAmount,
+  getSelectedSourcesIds: getSelectedSourcesIds,
+  getSelectedTime: getSelectedTime,
+  getShouldHideLocationMarkers: getShouldHideLocationMarkers,
+  getSoundingPanelsInOrder: getSoundingPanelsInOrder,
+  getSoundingsCollections: getSoundingsCollections,
+  getSoundingsPreset: getSoundingsPreset,
+  getSourceSelections: getSourceSelections
+});
+
+/* *
+ * 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)
+ * */
+var SoundingsActionOrigin;
+(function (SoundingsActionOrigin) {
+  SoundingsActionOrigin["soundingsManager"] = "soundingsManager";
+  SoundingsActionOrigin["soundingsComponent"] = "soundingsComponent";
+})(SoundingsActionOrigin || (SoundingsActionOrigin = {}));
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get SoundingsActionOrigin () { return SoundingsActionOrigin; }
+});
+
+const SoundingsMarkersSwitch = ({
+  shouldHideMarkers,
+  toggleMarkers
+}) => {
+  const {
+    t
+  } = useSoundingsTranslation();
+  return jsxs(Box, {
+    sx: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'flex-start',
+      'label:first-of-type': {
+        marginLeft: '5px',
+        marginRight: '-5px'
+      },
+      'label:last-of-type': {
+        marginLeft: '-5px'
+      },
+      '.switch-button label': {
+        display: 'none'
+      },
+      '.markers-label': {
+        display: 'none'
+      },
+      '@media (min-width: 720px)': {
+        minWidth: '146px',
+        '.markers-label, .switch-button label': {
+          display: 'initial'
+        }
+      }
+    },
+    children: [jsx(Typography, {
+      className: "markers-label",
+      sx: {
+        marginTop: '4px'
+      },
+      variant: "body2",
+      children: t('soundings-toggle-location-markers-label')
+    }), jsx(Box, {
+      sx: {
+        marginTop: '-5px'
+      },
+      children: jsx(SwitchButton, {
+        activeLabel: "ON",
+        checked: !shouldHideMarkers,
+        inActiveLabel: "OFF",
+        onChange: event => {
+          toggleMarkers(!event.target.checked);
+        },
+        tooltip: t('soundings-toggle-location-markers-tooltip')
+      })
+    })]
+  });
+};
+
 var MenuOptions;
 (function (MenuOptions) {
   MenuOptions["soundingsManager"] = "Sd Manager";
@@ -3180,7 +3507,9 @@ const buttonStyle = {
 const SoundingsMenuBar = ({
   handleClick,
   isOpen,
-  selectedSourcesAmount = 0
+  selectedSourcesAmount = 0,
+  shouldHideMarkers,
+  toggleMarkers
 }) => {
   const {
     t
@@ -3219,6 +3548,9 @@ const SoundingsMenuBar = ({
       sx: buttonStyle,
       variant: "tool",
       children: t('locations')
+    }), jsx(SoundingsMarkersSwitch, {
+      shouldHideMarkers: shouldHideMarkers,
+      toggleMarkers: toggleMarkers
     })]
   });
 };
@@ -3228,13 +3560,26 @@ 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 sourcesAmount = useSelector(state => getSelectedSourcesAmount(state, viewId));
+  const shouldHideLocationMarkers = useSelector(state => getShouldHideLocationMarkers(state, viewId));
+  const toggleLocationMarkers = React.useCallback(shouldHide => {
+    dispatch(soundingsActions.toggleLocationMarkers({
+      shouldHideLocationMarkers: shouldHide,
+      panelId: viewId,
+      origin: SoundingsActionOrigin.soundingsComponent
+    }));
+  }, [dispatch, viewId]);
   const dispatchActiveMapId = React.useCallback((dialogType, isOpen, activeMapId) => void dispatch(uiActions.setActiveMapIdForDialog({
     type: dialogType,
     mapId: viewId,
@@ -3257,12 +3602,14 @@ 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,
     isOpen: isOpen,
-    selectedSourcesAmount: sourcesAmount
+    selectedSourcesAmount: sourcesAmount,
+    shouldHideMarkers: shouldHideLocationMarkers,
+    toggleMarkers: toggleLocationMarkers
   });
 };
 
@@ -3402,24 +3749,33 @@ const roundToClosestTimestep = (timeToRound, availableSteps) => {
   }
   return timeToRound;
 };
-const SoundingsTimeSliderConnect = () => {
-  const selectedTime = useSelector(getSelectedTime);
-  const sourceSelections = useSelector(getSelectedSources);
+const SoundingsTimeSliderConnect = ({
+  viewId
+}) => {
+  const selectedTime = useSelector(state => getSelectedTime(state, viewId));
+  const sourceSelections = useSelector(state => getSelectedSources(state, viewId));
   const dispatch = useDispatch();
-  const updateSelectedTime = React.useCallback(selectedTime => {
+  const updateSelectedTime = React.useCallback((selectedTime, isInitialCorrection = false) => {
     dispatch(soundingsActions.updateSelectedTime({
-      selectedTime
+      selectedTime,
+      panelId: viewId,
+      origin: isInitialCorrection ? SoundingsActionOrigin.soundingsManager : SoundingsActionOrigin.soundingsComponent
     }));
-  }, [dispatch]);
+  }, [dispatch, viewId]);
   const {
     data: timesteps
   } = useTimesteps(sourceSelections);
   const mergedTimesteps = [...new Set(timesteps.flat())].sort();
+  const hasInitializedTime = React.useRef(false);
   // Ensure that the selected time is always one of the available timesteps
   const validSelectedTime = roundToClosestTimestep(selectedTime, mergedTimesteps);
   useEffect(() => {
     if (selectedTime !== validSelectedTime) {
-      updateSelectedTime(validSelectedTime);
+      const isInitial = !hasInitializedTime.current;
+      updateSelectedTime(validSelectedTime, isInitial);
+      if (isInitial) {
+        hasInitializedTime.current = true;
+      }
     }
   }, [selectedTime, updateSelectedTime, validSelectedTime]);
   return jsx(SoundingsTimeSlider, {
@@ -3458,33 +3814,86 @@ const useGetSize = viewRef => {
 };
 const SoundingsConnect = ({
   viewId,
-  diagramType = 'SKEWT'
+  soundingsPreset
 }) => {
   const viewRef = React.useRef(null);
   const size = useGetSize(viewRef);
-  const [chosenDiagramType, setChosenDiagramType] = React.useState(diagramType);
   const geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
   const dispatch = useDispatch();
-  const selectedTime = useSelector(getSelectedTime);
-  const sourceSelections = useSelector(getSelectedSources);
-  const locationSelections = useSelector(getLocationSelections);
-  const selectedFeature = useSelector(state => genericSelectors.getSelectedFeature(state.syncGroups, viewId));
-  const selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, viewId));
+  const soundingsPresetRef = React.useRef();
+  const presetJustLoadedRef = React.useRef(false);
+  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({
+        panelId: viewId,
+        preset: soundingsPreset
+      }));
+      setTimeout(() => {
+        presetJustLoadedRef.current = false;
+        initialLocationsRef.current = {};
+      }, 500);
+    } else if (!soundingsPreset) {
+      soundingsPresetRef.current = undefined;
+      initialLocationsRef.current = {};
+      previousLocationsRef.current = {};
+    }
+  }, [dispatch, soundingsPreset, viewId]);
+  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,
+      panelId: viewId,
+      origin: SoundingsActionOrigin.soundingsComponent
+    }));
+  }, [dispatch, viewId]);
+  const selectedFeature = useSelector(state => genericSelectors.getSelectedFeature(state.syncGroups, viewId), shallowEqual);
+  const selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, viewId), shallowEqual);
+  const firstMapId = selectedMapIds[0];
   const selectedMapPin = useSelector(state =>
   // mapPins are synced so we can arbitrarily choose the first linked map
-  mapSelectors.getPinLocation(state, selectedMapIds[0]));
-  const collections = useMemo(() => sourceSelections.map(({
-    collectionId,
-    url,
-    name
-  }) => ({
-    id: collectionId,
-    url,
-    name: name || collectionId
-  })), [sourceSelections]);
+  mapSelectors.getPinLocation(state, firstMapId), shallowEqual);
+  const collectionsRef = React.useRef();
+  const collections = useMemo(() => {
+    const newCollections = sourceSelections.map(({
+      collectionId,
+      url,
+      name
+    }) => ({
+      id: collectionId,
+      url,
+      name: name || collectionId
+    }));
+    if (isEqual(newCollections, collectionsRef.current)) {
+      return collectionsRef.current;
+    }
+    collectionsRef.current = newCollections;
+    return newCollections;
+  }, [sourceSelections]);
   const {
-    data: locationData
+    data: rawLocationData
   } = useGetCollectionLocations(collections, true);
+  // Stabilize locationData to prevent infinite loops caused by new array references
+  const locationDataRef = React.useRef();
+  const locationData = useMemo(() => {
+    if (isEqual(rawLocationData, locationDataRef.current)) {
+      return locationDataRef.current;
+    }
+    locationDataRef.current = rawLocationData;
+    return rawLocationData;
+  }, [rawLocationData]);
   /* Make sure the map pin is visible when linking new maps */
   useEffect(() => {
     const toggleMapPinVisibility = displayMapPin => {
@@ -3502,25 +3911,26 @@ const SoundingsConnect = ({
     };
   }, [dispatch, selectedMapIds]);
   // construct and send geojson to map for drawing locations
-  useEffect(() => {
-    const geoJsonForMap = {
-      type: 'FeatureCollection',
-      features: (locationData || []).flatMap(({
-        id: serviceId,
-        features
-      }) => features.map(feature => ({
-        type: 'Feature',
-        geometry: feature.geometry,
+  const geoJsonForMap = useMemo(() => ({
+    type: 'FeatureCollection',
+    features: (locationData || []).flatMap(({
+      id: serviceId,
+      features
+    }) => features.map(feature => ({
+      type: 'Feature',
+      geometry: feature.geometry,
+      id: feature.id,
+      properties: {
+        name: feature.properties.name,
+        mapFeatureClass: MapFeatureClass.ObservationStation,
+        highlightSelectedFeature: selectedFeature?.id === feature.id,
         id: feature.id,
-        properties: {
-          name: feature.properties.name,
-          mapFeatureClass: MapFeatureClass.ObservationStation,
-          highlightSelectedFeature: selectedFeature?.id === feature.id,
-          id: feature.id,
-          serviceId
-        }
-      })))
-    };
+        serviceId,
+        hidden: shouldHideLocationMarkers
+      }
+    })))
+  }), [locationData, selectedFeature?.id, shouldHideLocationMarkers]);
+  useEffect(() => {
     dispatch(genericActions.addSharedData({
       panelId: viewId,
       data: {
@@ -3530,7 +3940,7 @@ const SoundingsConnect = ({
         }]
       }
     }));
-  }, [dispatch, geojsonLayerId, locationData, selectedFeature?.id, viewId]);
+  }, [dispatch, geojsonLayerId, geoJsonForMap, viewId]);
   useEffect(() => () => {
     if (viewId) {
       dispatch(syncGroupsActions.deleteSharedData({
@@ -3541,35 +3951,143 @@ const SoundingsConnect = ({
   // Map location selection has changed. Update soundings location
   // since the location menu may be out of sync
   useEffect(() => {
+    if (presetJustLoadedRef.current) {
+      return;
+    }
     const serviceId = selectedFeature?.serviceId;
-    if (serviceId) {
-      dispatch(soundingsActions.updateSelectedLocation({
-        sourceId: serviceId,
-        location: selectedFeature?.id
-      }));
+    const featureId = selectedFeature?.id;
+    if (serviceId && featureId) {
+      const currentLocation = locationSelectionsRef.current[serviceId];
+      const initialLocation = initialLocationsRef.current[serviceId];
+      if (currentLocation !== featureId && initialLocation !== featureId) {
+        dispatch(soundingsActions.updateSelectedLocation({
+          sourceId: serviceId,
+          location: featureId,
+          panelId: viewId,
+          origin: SoundingsActionOrigin.soundingsComponent
+        }));
+      }
     }
-  }, [dispatch, selectedFeature?.id, selectedFeature?.serviceId]);
-  // Map pin change on its own implies position selection
+  }, [dispatch, selectedFeature?.id, selectedFeature?.serviceId, viewId]);
+  // Use ref to avoid circular dependency when reading locationSelections
+  const locationSelectionsRef = React.useRef(locationSelections);
+  React.useEffect(() => {
+    locationSelectionsRef.current = locationSelections;
+  }, [locationSelections]);
+  // Makes position requests for all user-selected sources for the current map pin position.
+  // Map pin change on its own implies a new position selection.
   useEffect(() => {
-    // Use first source. Multiple sources will be implemented later.
-    // https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4254
-    const source = sourceSelections[0];
-    if (source?.collectionId && !selectedFeature?.id && selectedMapPin?.lon && selectedMapPin.lat) {
-      dispatch(soundingsActions.updateSelectedLocation({
-        sourceId: source.collectionId,
-        location: [selectedMapPin.lon, selectedMapPin.lat]
-      }));
+    if (presetJustLoadedRef.current) {
+      return;
+    }
+    if (!selectedFeature?.id && !selectedMapPin?.id && selectedMapPin?.lon && selectedMapPin.lat) {
+      const newLocation = [selectedMapPin.lon, selectedMapPin.lat];
+      // Update location for all selected sources
+      sourceSelections.forEach(source => {
+        if (source?.collectionId) {
+          const currentLocation = locationSelectionsRef.current[source.collectionId];
+          const isSameLocation = Array.isArray(currentLocation) && currentLocation[0] === newLocation[0] && currentLocation[1] === newLocation[1];
+          if (!isSameLocation) {
+            dispatch(soundingsActions.updateSelectedLocation({
+              sourceId: source.collectionId,
+              location: newLocation,
+              panelId: viewId,
+              origin: SoundingsActionOrigin.soundingsComponent
+            }));
+          }
+        }
+      });
     }
-  }, [selectedMapPin, selectedFeature?.id, sourceSelections, dispatch]);
+  }, [selectedMapPin, selectedFeature?.id, sourceSelections, dispatch, viewId]);
+  useEffect(() => {
+    if (!locationData || locationData.length === 0) {
+      return;
+    }
+    if (selectedMapIds.length === 0) {
+      return;
+    }
+    let changedSourceId;
+    for (const source of sourceSelections) {
+      if (source?.collectionId) {
+        const currentLocation = locationSelections[source.collectionId];
+        const previousLocation = previousLocationsRef.current[source.collectionId];
+        if (currentLocation !== previousLocation) {
+          changedSourceId = source.collectionId;
+          if (!presetJustLoadedRef.current) {
+            break;
+          }
+        }
+      }
+    }
+    if (!changedSourceId) {
+      return;
+    }
+    const selectedLocation = locationSelections[changedSourceId];
+    if (!selectedLocation) {
+      return;
+    }
+    previousLocationsRef.current = {
+      ...previousLocationsRef.current,
+      [changedSourceId]: selectedLocation
+    };
+    const serviceData = locationData.find(service => service.id === changedSourceId);
+    if (!serviceData) {
+      return;
+    }
+    if (typeof selectedLocation === 'string') {
+      const foundFeature = serviceData.features.find(feature => feature.id === selectedLocation);
+      if (foundFeature?.geometry.type === 'Point') {
+        const [lon, lat] = foundFeature.geometry.coordinates;
+        const mapPinNeedsUpdate = selectedMapPin?.id !== selectedLocation || selectedMapPin?.lon !== lon || selectedMapPin?.lat !== lat;
+        const featureNeedsUpdate = selectedFeature?.id !== selectedLocation;
+        if (mapPinNeedsUpdate) {
+          selectedMapIds.forEach(mapId => {
+            dispatch(mapActions.setMapPinLocation({
+              mapId,
+              mapPinLocation: {
+                lon,
+                lat,
+                id: selectedLocation
+              }
+            }));
+          });
+        }
+        if (featureNeedsUpdate) {
+          dispatch(genericActions.addSharedData({
+            panelId: viewId,
+            data: {
+              selectedFeatureId: selectedLocation
+            }
+          }));
+        }
+      }
+    } else if (Array.isArray(selectedLocation)) {
+      const [lon, lat] = selectedLocation;
+      const needsUpdate = selectedMapPin?.lon !== lon || selectedMapPin?.lat !== lat;
+      if (needsUpdate) {
+        selectedMapIds.forEach(mapId => {
+          dispatch(mapActions.setMapPinLocation({
+            mapId,
+            mapPinLocation: {
+              lon,
+              lat
+            }
+          }));
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locationData, locationSelections, sourceSelections, selectedMapIds, dispatch, viewId]);
   const {
     error,
     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({
+      panelId: viewId,
       newOrderOfIds: orderedIds
     }));
   };
@@ -3627,7 +4145,7 @@ const SoundingsConnect = ({
             },
             children: jsx(SharedMouseYProvider, {
               children: jsx(SortableAccordions, {
-                chosenDiagramType: chosenDiagramType,
+                chosenDiagramType: diagramType,
                 data: data,
                 onOrderChange: changeOrder,
                 setChosenDiagramType: setChosenDiagramType,
@@ -3642,7 +4160,9 @@ const SoundingsConnect = ({
               flex: '0 0 auto',
               height: `${TIMESLIDER_HEIGHT}px`
             },
-            children: jsx(SoundingsTimeSliderConnect, {})
+            children: jsx(SoundingsTimeSliderConnect, {
+              viewId: viewId
+            })
           })]
         })
       })]
@@ -3718,6 +4238,7 @@ const SoundingsSourceMenu = ({
           instanceId,
           url
         } = sourceSelections[collection.id] || {};
+        const sourceUrl = url || collection.url;
         const hasInstances = collection.instances.length > 0;
         const selectedInstanceId = instanceId || collection.instances[0]?.id || undefined;
         return jsxs(ListItem, {
@@ -3732,7 +4253,7 @@ const SoundingsSourceMenu = ({
               onChange: event => {
                 const verticalRange = selectedInstanceId !== undefined ? extractVerticalRange(collection, selectedInstanceId) : '';
                 updateCollection(collection.id, {
-                  url,
+                  url: sourceUrl,
                   isChecked: event.target.checked,
                   instanceId: selectedInstanceId,
                   verticalRange
@@ -3748,7 +4269,7 @@ const SoundingsSourceMenu = ({
               const instanceId = event.target.value;
               const verticalRange = extractVerticalRange(collection, instanceId);
               updateCollection(collection.id, {
-                url,
+                url: sourceUrl,
                 instanceId,
                 verticalRange
               });
@@ -3811,35 +4332,52 @@ const SoundingsSourceDialogConnect = ({
     dialogOrder,
     setDialogOrder
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsSources);
+  const panelId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsSources));
   const updateCollection = React.useCallback((sourceId, value) => {
     dispatch(soundingsActions.updateSelectedSource({
       sourceId,
-      value
+      value,
+      panelId,
+      origin: SoundingsActionOrigin.soundingsComponent
     }));
-  }, [dispatch]);
-  const sourceSelections = useSelector(getSourceSelections);
+  }, [dispatch, panelId]);
+  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;
+      }
+      const newValue = {
+        url: collection.url,
+        isChecked: currentSelection?.isChecked || false,
+        parameterMappings: collection.parameterMappings,
+        ...(collection.name && collection.name !== '' ? {
+          name: collection.name
+        } : {})
+      };
       dispatch(soundingsActions.updateSelectedSource({
         sourceId: collection.id,
-        value: {
-          url: collection.url,
-          isChecked: sourceSelections[collection.id]?.isChecked || false,
-          parameterMappings: collection.parameterMappings,
-          ...(collection.name && collection.name !== '' ? {
-            name: collection.name
-          } : {})
-        }
+        value: newValue,
+        panelId,
+        origin: SoundingsActionOrigin.soundingsManager
       }));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, soundingsCollections]);
+  }, [dispatch, collections, panelId]);
   const {
     data,
     isPending,
     error
-  } = useGetCollectionsInstances(soundingsCollections, isDialogOpen);
+  } = useGetCollectionsInstances(collections, isDialogOpen);
   return jsx(SoundingsSourceMenu, {
     error: error,
     handleClose: onCloseDialog,
@@ -3853,6 +4391,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,
@@ -3944,45 +4520,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%'
             }
           })
         })
@@ -4001,35 +4550,25 @@ 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 selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, panelId));
+  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]);
-  const handleFeatureSelect = (panelId, featureId) => {
-    dispatch(genericActions.addSharedData({
-      panelId,
-      data: {
-        selectedFeatureId: featureId
-      }
-    }));
-  };
-  const setMapPinLocation = mapPinLocation => {
-    selectedMapIds.forEach(mapId => {
-      dispatch(mapActions.setMapPinLocation({
-        mapId,
-        mapPinLocation
-      }));
-    });
-  };
   return jsx(LocationsMenu, {
     error: error,
     isLoading: isPending,
@@ -4043,27 +4582,9 @@ const LocationsMenuConnect = ({
     updateSelectedLocation: (sourceId, locationId) => {
       dispatch(soundingsActions.updateSelectedLocation({
         sourceId,
-        location: locationId
+        location: locationId,
+        panelId
       }));
-      // Use first source. Multiple sources will be implemented later.
-      // https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4254
-      const isFirstSource = sourceId === selectedSourceIds[0];
-      if (!isFirstSource) {
-        return;
-      }
-      if (locationId) {
-        handleFeatureSelect(panelId, locationId);
-      }
-      const foundFeature = services[0].features.find(feature => feature.id === locationId);
-      // check type for typescript
-      if (foundFeature?.geometry.type === 'Point') {
-        const [lon, lat] = foundFeature.geometry.coordinates;
-        setMapPinLocation({
-          lon,
-          lat,
-          id: locationId
-        });
-      }
     }
   });
 };
@@ -4091,8 +4612,10 @@ var preset = {
 };
 
 const SoundingManagerListItem = ({
+  id,
   name,
-  isDisplayed
+  isDisplayed,
+  onToggleVisibility
 }) => {
   return jsx(Card, {
     className: "sortable-item",
@@ -4126,7 +4649,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',
@@ -4144,7 +4676,8 @@ const SoundingsManager = ({
   onMouseDown,
   order,
   soundingPanelsInOrder,
-  onOrderChange
+  onOrderChange,
+  onToggleVisibility
 }) => {
   const sortableList = React.useMemo(() => soundingPanelsInOrder.map(collection => ({
     ...collection
@@ -4172,8 +4705,10 @@ const SoundingsManager = ({
         name,
         isDisplayed
       }) => jsx(SoundingManagerListItem, {
+        id: id,
         isDisplayed: isDisplayed,
-        name: name
+        name: name,
+        onToggleVisibility: onToggleVisibility
       }, id))
     })
   });
@@ -4187,22 +4722,33 @@ const SoundingsManagerConnect = () => {
     setDialogOrder
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsManager);
   const dispatch = useDispatch();
+  const panelId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsManager));
   React.useEffect(() => {
     const data = preset.SoundingManagerDummyPreset;
-    dispatch(soundingsActions.addSoundingPanelsFromPreset(data));
-  }, [dispatch]);
-  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store));
+    dispatch(soundingsActions.addSoundingPanelsFromPreset({
+      panelId,
+      panels: data
+    }));
+  }, [dispatch, panelId]);
+  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store, panelId));
   const changeOrder = newOrder => {
     const orderedIds = newOrder.map(collection => collection.id);
     dispatch(soundingsActions.changeSoundingPanelOrder({
+      panelId,
       newOrderOfIds: orderedIds
     }));
   };
+  const toggleVisibility = id => {
+    dispatch(soundingsActions.toggleSoundingPanelVisibility({
+      id
+    }));
+  };
   return jsx(SoundingsManager, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
     onMouseDown: setDialogOrder,
     onOrderChange: changeOrder,
+    onToggleVisibility: toggleVisibility,
     order: dialogOrder,
     soundingPanelsInOrder: soundingPanelsInOrder
   });
@@ -4211,7 +4757,7 @@ const SoundingsManagerConnect = () => {
 const soundingsLookUp = payload => {
   if (payload.componentType === 'Soundings') {
     return jsx(SoundingsConnect, {
-      diagramType: payload.diagramType ? payload.diagramType : 'SKEWT',
+      soundingsPreset: payload.initialProps,
       viewId: payload.id
     });
   }
@@ -4246,4 +4792,4 @@ const createMockStore = mockState => configureStore({
   middleware: getDefaultMiddleware => getDefaultMiddleware().concat(storeMiddlewares)
 });
 
-export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsConnect, SoundingsManagerConnect, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingDiagrams, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateInTestsAndStories, useSoundingsTranslation };
+export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsActionOrigin, SoundingsConnect, SoundingsManagerConnect, SoundingsSourceDialogConnect, types as SoundingsTypes, createMockStore, initSoundingsI18n, soundingDiagrams, soundingsActions, soundingsLookUp, soundingsReducer, soundingsReducersMap, selectors as soundingsSelectors, soundingsTranslations, translateInTestsAndStories, useSoundingsTranslation };