@opengeoweb/soundings 14.5.2 → 15.1.0

package/index.esm.js

@@ -1,13 +1,14 @@
 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';
 import { ReactSortable } from 'react-sortablejs';
-import { ArrowDropDownDown, DragHandle, Layers, Sources } from '@opengeoweb/theme';
+import { ArrowDropDownDown, DragHandle, Layers, Sources, Visibility, VisibilityOff } from '@opengeoweb/theme';
 import * as d3 from 'd3';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
@@ -16,7 +17,6 @@ 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';
 
@@ -30,7 +30,9 @@ var en = {
 	options: "Options",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"soundings-toggle-location-markers-label": "Markers",
+	"soundings-toggle-location-markers-tooltip": "Show/hide location markers"
 };
 var no = {
 	sources: "Kilder",
@@ -42,7 +44,9 @@ var no = {
 	options: "Valg",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"soundings-toggle-location-markers-label": "ikke oversatt",
+	"soundings-toggle-location-markers-tooltip": "ikke oversatt"
 };
 var nl = {
 	sources: "Bronnen",
@@ -54,7 +58,9 @@ var nl = {
 	options: "Opties",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"soundings-toggle-location-markers-label": "Kaart locaties",
+	"soundings-toggle-location-markers-tooltip": "Toon/Verberg locatie punten"
 };
 var fi = {
 	sources: "Lähteet",
@@ -66,7 +72,9 @@ var fi = {
 	options: "Valinnat",
 	"diagram-SKEWT": "Skew-T",
 	"diagram-BIJVOET": "Bijvoet",
-	"diagram-EMAGRAM": "Emagram"
+	"diagram-EMAGRAM": "Emagram",
+	"soundings-toggle-location-markers-label": "Merkit",
+	"soundings-toggle-location-markers-tooltip": "Näytä/piilota kohdemerkit"
 };
 var soundingsTranslations = {
 	en: en,
@@ -683,8 +691,7 @@ const drawSoundingsTooltip = ({
     return getParamHtml(dataSet.hoveredDewpoint, index, '°C', index === interpolatedData.length - 1, dataSet.color);
   }).join(''));
   // Wind
-  windRefd3?.style('display', 'block').style('left', `${width + margin.left + margin.right - 55}px`) // -55 to account for width of element
-  .style('top', `${pressureY}px`).html(() => {
+  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);
     });
@@ -1870,6 +1877,19 @@ const soundingsStyle = {
   }
 };
 const WIND_BARB_OFFSET_X = 35;
+/**
+ * Check if the sounding data is effectively empty.
+ * Data can be empty in two ways:
+ * 1. No sources selected: data = []
+ * 2. No locations selected: data = [[], []] (sources exist but all have empty arrays)
+ */
+const isDataEmpty = data => {
+  if (!data || data.length === 0) {
+    return true;
+  }
+  // Check if all inner arrays are empty (no locations selected)
+  return data.every(features => features.length === 0);
+};
 const WindBarbs = ({
   d3GraphId,
   data,
@@ -1951,7 +1971,8 @@ const WindBarbs = ({
         columnOffsetX: index * WIND_BARB_OFFSET_X
       });
     });
-    tooltipDataRef.current = constructTooltipData(data);
+    // Clear or update tooltip data based on whether we have actual data
+    tooltipDataRef.current = isDataEmpty(data) ? null : constructTooltipData(data);
     // Update previous inner height after drawing so animation uses the prior value
     prevInnerHeightRef.current = height;
     // eslint-disable-next-line consistent-return, @typescript-eslint/explicit-function-return-type
@@ -1964,6 +1985,11 @@ const WindBarbs = ({
       windRef.current && (windRef.current.style.display = 'none');
       return;
     }
+    // Hide tooltip when data is empty (all sources/locations removed)
+    if (isDataEmpty(data)) {
+      windRef.current.style.display = 'none';
+      return;
+    }
     const rect = svgRectRef.current ?? svgRef.current.getBoundingClientRect();
     if (clientY == null || clientY < rect.top || clientY > rect.bottom) {
       windRef.current.style.display = 'none';
@@ -1991,15 +2017,12 @@ const WindBarbs = ({
       tooltipData: tooltipDataRef.current,
       diagramType
     });
-  }, [clientY, showTooltip, diagramType]);
-  useEffect(() => {
-    // Reset the tooltips when filteredData changes
-    if (windRef.current) {
-      windRef.current.style.display = 'none';
-    }
-  }, [data]);
+  }, [clientY, showTooltip, diagramType, data]);
   return jsxs(Box, {
     ref: canvasRef,
+    sx: {
+      position: 'relative'
+    },
     children: [jsx("svg", {
       ref: svgRef
     }), jsx(Box, {
@@ -2258,21 +2281,19 @@ const SoundingsAccordion = React.forwardRef(({
 });
 
 const SortableAccordions = ({
+  soundingPanelsInOrder,
   data,
   size,
   chosenDiagramType,
   setChosenDiagramType,
-  viewRef
+  viewRef,
+  onOrderChange
 }) => {
-  const [accordions, setAccordions] = React.useState([{
-    id: 'soundings'
-  }, {
-    id: 'windBarbs'
-  }]);
   const [soundingsIsClosed, setSoundingsIsClosed] = React.useState(false);
   const [previousHeight, setPreviousHeight] = React.useState(size);
   const createPanel = React.useCallback(id => {
-    switch (id) {
+    const normalizedId = id.toLowerCase().replace(/\s+/g, '');
+    switch (normalizedId) {
       case 'soundings':
         return jsx(SoundingsAccordion, {
           accordionIsOpen: true,
@@ -2286,7 +2307,7 @@ const SortableAccordions = ({
           setSoundingsIsClosed: setSoundingsIsClosed,
           size: size,
           children: jsx(Soundings, {
-            d3GraphId: id,
+            d3GraphId: normalizedId,
             data: data,
             diagramType: chosenDiagramType,
             svgDimensions: {
@@ -2301,13 +2322,13 @@ const SortableAccordions = ({
             }
           })
         });
-      case 'windBarbs':
+      case 'windbarbs':
         return jsx(SoundingsAccordion, {
           maxWidth: 200,
           name: "Wind Barbs",
           children: jsx(WindBarbs, {
             animateResize: Boolean(soundingsIsClosed && previousHeight),
-            d3GraphId: id,
+            d3GraphId: normalizedId,
             data: data,
             diagramType: chosenDiagramType,
             svgDimensions: {
@@ -2339,18 +2360,31 @@ const SortableAccordions = ({
       direction: "horizontal",
       draggable: ".sortable-item",
       handle: ".drag-handle",
-      list: accordions,
-      setList: setAccordions,
+      list: soundingPanelsInOrder.map(panel => ({
+        ...panel
+      })),
+      setList: list => onOrderChange(list.map(({
+        id,
+        name,
+        isDisplayed
+      }) => ({
+        id,
+        name,
+        isDisplayed
+      }))),
       style: {
         display: 'flex',
         gap: 4,
         width: '100%'
       },
       tag: "div",
-      children: accordions.map(({
+      children: soundingPanelsInOrder.filter(entry => entry.isDisplayed).flatMap(({
         id
       }) => {
         const panel = createPanel(id);
+        if (!panel) {
+          return [];
+        }
         return panel ? jsx(React.Fragment, {
           children: React.cloneElement(panel, {
             accordionId: id,
@@ -2824,10 +2858,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;
     });
@@ -3029,12 +3081,40 @@ const useGetCollectionLocations = (collections, enabled) => {
 const initialSoundingsState = {
   selectedSources: {},
   selectedLocations: {},
-  selectedTime: new Date().toISOString()
+  selectedTime: new Date().toISOString(),
+  diagramType: 'SKEWT',
+  soundingPanels: {
+    order: ['soundings', 'windbarbs'],
+    entities: {
+      soundings: {
+        id: 'soundings',
+        name: 'Soundings',
+        isDisplayed: true
+      },
+      windbarbs: {
+        id: 'windbarbs',
+        name: 'Wind Barbs',
+        isDisplayed: true
+      }
+    }
+  },
+  shouldHideLocationMarkers: false
 };
 const slice = createSlice({
   initialState: initialSoundingsState,
   name: 'soundings',
   reducers: {
+    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,
@@ -3057,6 +3137,29 @@ const slice = createSlice({
         selectedTime
       } = 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;
+      draft.soundingPanels.order = order;
+      draft.soundingPanels.entities = entities;
+    },
+    changeSoundingPanelOrder: (draft, payloadAction) => {
+      const {
+        newOrderOfIds
+      } = payloadAction.payload;
+      draft.soundingPanels.order = newOrderOfIds;
     }
   }
 });
@@ -3087,7 +3190,9 @@ 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) => {
@@ -3095,11 +3200,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;
@@ -3112,6 +3217,135 @@ 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 getSoundingPanelsInOrder = createSelector(getSoundingsStore, store => {
+  const {
+    order = [],
+    entities = {}
+  } = store.soundingPanels || {
+    order: [],
+    entities: {}
+  };
+  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,
+  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) {
@@ -3126,7 +3360,9 @@ const buttonStyle = {
 const SoundingsMenuBar = ({
   handleClick,
   isOpen,
-  selectedSourcesAmount = 0
+  selectedSourcesAmount = 0,
+  shouldHideMarkers,
+  toggleMarkers
 }) => {
   const {
     t
@@ -3165,6 +3401,9 @@ const SoundingsMenuBar = ({
       sx: buttonStyle,
       variant: "tool",
       children: t('locations')
+    }), jsx(SoundingsMarkersSwitch, {
+      shouldHideMarkers: shouldHideMarkers,
+      toggleMarkers: toggleMarkers
     })]
   });
 };
@@ -3181,6 +3420,14 @@ const MenuBarConnect = ({
   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 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,
@@ -3208,7 +3455,9 @@ const MenuBarConnect = ({
   return jsx(SoundingsMenuBar, {
     handleClick: handleClick,
     isOpen: isOpen,
-    selectedSourcesAmount: sourcesAmount
+    selectedSourcesAmount: sourcesAmount,
+    shouldHideMarkers: shouldHideLocationMarkers,
+    toggleMarkers: toggleLocationMarkers
   });
 };
 
@@ -3348,24 +3597,33 @@ const roundToClosestTimestep = (timeToRound, availableSteps) => {
   }
   return timeToRound;
 };
-const SoundingsTimeSliderConnect = () => {
+const SoundingsTimeSliderConnect = ({
+  viewId
+}) => {
   const selectedTime = useSelector(getSelectedTime);
   const sourceSelections = useSelector(getSelectedSources);
   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, {
@@ -3404,33 +3662,80 @@ 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 soundingsPresetRef = React.useRef();
+  const presetJustLoadedRef = React.useRef(false);
+  const initialLocationsRef = React.useRef({});
+  const previousLocationsRef = React.useRef({});
+  React.useLayoutEffect(() => {
+    if (soundingsPreset && !isEqual(soundingsPreset, soundingsPresetRef.current)) {
+      soundingsPresetRef.current = soundingsPreset;
+      presetJustLoadedRef.current = true;
+      initialLocationsRef.current = soundingsPreset.selectedLocations || {};
+      previousLocationsRef.current = {};
+      dispatch(soundingsActions.registerSoundingsPreset(soundingsPreset));
+      setTimeout(() => {
+        presetJustLoadedRef.current = false;
+        initialLocationsRef.current = {};
+      }, 500);
+    } else if (!soundingsPreset) {
+      soundingsPresetRef.current = undefined;
+      initialLocationsRef.current = {};
+      previousLocationsRef.current = {};
+    }
+  }, [dispatch, soundingsPreset, viewId]);
   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 sourceSelections = useSelector(getSelectedSources, shallowEqual);
+  const locationSelections = useSelector(getLocationSelections, shallowEqual);
+  const diagramType = useSelector(getDiagramType);
+  const shouldHideLocationMarkers = useSelector(getShouldHideLocationMarkers);
+  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 => {
@@ -3448,25 +3753,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: {
@@ -3476,7 +3782,7 @@ const SoundingsConnect = ({
         }]
       }
     }));
-  }, [dispatch, geojsonLayerId, locationData, selectedFeature?.id, viewId]);
+  }, [dispatch, geojsonLayerId, geoJsonForMap, viewId]);
   useEffect(() => () => {
     if (viewId) {
       dispatch(syncGroupsActions.deleteSharedData({
@@ -3487,31 +3793,145 @@ 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, 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;
+          }
+        }
+      }
     }
-  }, [selectedMapPin, selectedFeature?.id, sourceSelections, dispatch]);
+    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 changeOrder = newOrder => {
+    const orderedIds = newOrder.map(collection => collection.id);
+    dispatch(soundingsActions.changeSoundingPanelOrder({
+      newOrderOfIds: orderedIds
+    }));
+  };
   return jsxs(Fragment, {
     children: [!!error && jsx(AlertBanner, {
       shouldClose: true,
@@ -3566,10 +3986,12 @@ const SoundingsConnect = ({
             },
             children: jsx(SharedMouseYProvider, {
               children: jsx(SortableAccordions, {
-                chosenDiagramType: chosenDiagramType,
+                chosenDiagramType: diagramType,
                 data: data,
+                onOrderChange: changeOrder,
                 setChosenDiagramType: setChosenDiagramType,
                 size: size,
+                soundingPanelsInOrder: soundingPanelsInOrder,
                 viewRef: viewRef
               })
             })
@@ -3579,7 +4001,9 @@ const SoundingsConnect = ({
               flex: '0 0 auto',
               height: `${TIMESLIDER_HEIGHT}px`
             },
-            children: jsx(SoundingsTimeSliderConnect, {})
+            children: jsx(SoundingsTimeSliderConnect, {
+              viewId: viewId
+            })
           })]
         })
       })]
@@ -3655,6 +4079,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, {
@@ -3669,7 +4094,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
@@ -3685,7 +4110,7 @@ const SoundingsSourceMenu = ({
               const instanceId = event.target.value;
               const verticalRange = extractVerticalRange(collection, instanceId);
               updateCollection(collection.id, {
-                url,
+                url: sourceUrl,
                 instanceId,
                 verticalRange
               });
@@ -3748,30 +4173,39 @@ 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]);
+  }, [dispatch, panelId]);
   const sourceSelections = useSelector(getSourceSelections);
   // Set mappings for each collection
   React.useEffect(() => {
     soundingsCollections?.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,
+        origin: SoundingsActionOrigin.soundingsManager
       }));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, soundingsCollections]);
+  }, [dispatch, soundingsCollections, panelId]);
   const {
     data,
     isPending,
@@ -3941,8 +4375,6 @@ const LocationsMenuConnect = ({
   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 {
     data,
     isPending,
@@ -3951,22 +4383,6 @@ const LocationsMenuConnect = ({
   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,
@@ -3982,50 +4398,118 @@ const LocationsMenuConnect = ({
         sourceId,
         location: locationId
       }));
-      // 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
-        });
-      }
     }
   });
 };
 
+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 = ({
+  name,
+  isDisplayed
+}) => {
+  return jsx(Card, {
+    className: "sortable-item",
+    sx: {
+      margin: '4px 0 2px',
+      backgroundColor: isDisplayed ? 'white' : 'rgb(232, 232, 232)'
+    },
+    children: jsxs(Grid, {
+      alignItems: "center",
+      container: true,
+      direction: "row",
+      justifyContent: "flex-start",
+      sx: {
+        height: '32px'
+      },
+      children: [jsx(IconButton, {
+        "aria-label": "drag-handle",
+        className: "drag-handle",
+        size: "small",
+        sx: {
+          width: '24px',
+          height: '24px',
+          paddingRight: '8px',
+          paddingLeft: '8px'
+        },
+        children: jsx(DragHandle, {
+          fontSize: "small"
+        })
+      }), jsx(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: isDisplayed ? jsx(Visibility, {}) : jsx(VisibilityOff, {})
+      }), jsxs(Box, {
+        sx: {
+          paddingRight: '8px',
+          paddingLeft: '8px'
+        },
+        children: [" ", name, " "]
+      })]
+    })
+  });
+};
+
 const SoundingsManager = ({
   isOpen,
   onClose,
   onMouseDown,
-  order
+  order,
+  soundingPanelsInOrder,
+  onOrderChange
 }) => {
+  const sortableList = React.useMemo(() => soundingPanelsInOrder.map(collection => ({
+    ...collection
+  })), [soundingPanelsInOrder]);
   return jsx(ToolContainerDraggable, {
     isOpen: isOpen,
     minWidth: 300,
     onClose: onClose,
     onMouseDown: onMouseDown,
     order: order,
-    startPosition: {
-      top: 40,
-      left: 50
-    },
-    startSize: {
-      width: 320
-    },
-    title: "Sounding Manager",
-    children: "Soundings Manager"
+    title: "Soundings Manager",
+    children: jsx(ReactSortable, {
+      animation: 200,
+      direction: "vertical",
+      draggable: ".sortable-item",
+      handle: ".drag-handle",
+      list: sortableList,
+      setList: onOrderChange,
+      style: {
+        padding: '5px'
+      },
+      tag: "div",
+      children: sortableList.map(({
+        id,
+        name,
+        isDisplayed
+      }) => jsx(SoundingManagerListItem, {
+        isDisplayed: isDisplayed,
+        name: name
+      }, id))
+    })
   });
 };
 
@@ -4036,18 +4520,32 @@ const SoundingsManagerConnect = () => {
     dialogOrder,
     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 changeOrder = newOrder => {
+    const orderedIds = newOrder.map(collection => collection.id);
+    dispatch(soundingsActions.changeSoundingPanelOrder({
+      newOrderOfIds: orderedIds
+    }));
+  };
   return jsx(SoundingsManager, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
     onMouseDown: setDialogOrder,
-    order: dialogOrder
+    onOrderChange: changeOrder,
+    order: dialogOrder,
+    soundingPanelsInOrder: soundingPanelsInOrder
   });
 };
 
 const soundingsLookUp = payload => {
   if (payload.componentType === 'Soundings') {
     return jsx(SoundingsConnect, {
-      diagramType: payload.diagramType ? payload.diagramType : 'SKEWT',
+      soundingsPreset: payload.initialProps,
       viewId: payload.id
     });
   }
@@ -4082,4 +4580,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 };