@opengeoweb/soundings 15.3.0 → 16.0.0

package/index.esm.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Menu, ListSubheader, Typography, MenuItem, Box, Stack, Card, IconButton, Tooltip, LinearProgress, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
-import { range, minBy, isEqual } from 'lodash';
+import { range, isEqual } from 'lodash';
 import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 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 { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, genericSelectors, useSyncgroupTimeState, mapSelectors, syncGroupsActions, mapActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { ArrowDropDownDown, DragHandle, Layers, Sources, Close, Visibility, VisibilityOff } from '@opengeoweb/theme';
+import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, handleDateUtilsISOString, webmapUtils } from '@opengeoweb/webmap';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import { ReactSortable } from 'react-sortablejs';
-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 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { timesliderTranslations, TIME_SLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/time-slider';
 import { useResizable } from 'react-resizable-layout';
 import { useQueries } from '@tanstack/react-query';
-import { getHeaders, handleResponse } from '@opengeoweb/api';
+import { withJsonFormat, getHeaders, handleResponse } from '@opengeoweb/api';
 import { createSlice, createAction, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { List as List$1 } from 'react-window';
 
@@ -32,6 +32,7 @@ var en = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Coming soon",
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Markers",
 	"soundings-toggle-location-markers-tooltip": "Show/hide location markers"
 };
@@ -47,8 +48,9 @@ var no = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Kommer snart",
-	"soundings-toggle-location-markers-label": "ikke oversatt",
-	"soundings-toggle-location-markers-tooltip": "ikke oversatt"
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
+	"soundings-toggle-location-markers-label": "Lokasjoner",
+	"soundings-toggle-location-markers-tooltip": "Vis/skjul lokasjoner"
 };
 var nl = {
 	sources: "Bronnen",
@@ -62,6 +64,7 @@ var nl = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Binnenkort beschikbaar",
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Kaart locaties",
 	"soundings-toggle-location-markers-tooltip": "Toon/Verberg locatie punten"
 };
@@ -77,6 +80,7 @@ var fi = {
 	"diagram-BIJVOET": "Bijvoet",
 	"diagram-EMAGRAM": "Emagram",
 	"coming-soon": "Tulossa pian",
+	"soundings-time-mismatch-title": "Selected time in the sounding view does not match map view time.",
 	"soundings-toggle-location-markers-label": "Merkit",
 	"soundings-toggle-location-markers-tooltip": "Näytä/piilota kohdemerkit"
 };
@@ -2744,6 +2748,40 @@ const SoundingsLegend = ({
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const getTimeMismatchInfo = (isTimeSynced, warningTimeInUse, sourceTimesteps) => {
+  if (!isTimeSynced || !warningTimeInUse) {
+    return undefined;
+  }
+  const requestedTimestamp = new Date(warningTimeInUse).getTime();
+  const allSourceTimesteps = sourceTimesteps.flat().map(timestep => new Date(timestep).getTime()).filter(time => Number.isFinite(time)).sort((aTime, bTime) => aTime - bTime);
+  if (allSourceTimesteps.length === 0) {
+    return undefined;
+  }
+  const firstAvailableTime = allSourceTimesteps[0];
+  const lastAvailableTime = allSourceTimesteps[allSourceTimesteps.length - 1];
+  const isOutsideOverallSoundingsRange = requestedTimestamp < firstAvailableTime || requestedTimestamp > lastAvailableTime;
+  return isOutsideOverallSoundingsRange ? {
+    mismatch: true
+  } : undefined;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2761,13 +2799,13 @@ const SoundingsLegend = ({
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const getCollectionLocations = async (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/locations`, {
+const getCollectionLocations = async (collectionId, baseUrl) => fetch(withJsonFormat(`${baseUrl}/collections/${collectionId}/locations`), {
   headers: getHeaders()
 }).then(handleResponse);
-const getCollectionInstances = async (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/instances`, {
+const getCollectionInstances = async (collectionId, baseUrl) => fetch(withJsonFormat(`${baseUrl}/collections/${collectionId}/instances`), {
   headers: getHeaders()
 }).then(handleResponse);
-const getCollectionDetails = async (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}`, {
+const getCollectionDetails = async (collectionId, baseUrl) => fetch(withJsonFormat(`${baseUrl}/collections/${collectionId}`), {
   headers: getHeaders()
 }).then(handleResponse);
 const getEdrCollectionForLocation = async (collectionId, baseUrl, instanceId, locationId, parameters, datetime, verticalRange) => {
@@ -2847,6 +2885,25 @@ const getWindSpeedInKts = (windSpeed, windSpeedUnit) => {
   // Formula to convert from m/s to kts
   return windSpeed * ktsConstant;
 };
+const getNearestTimestep = (requestedDatetime, availableTimesteps) => {
+  if (!requestedDatetime || availableTimesteps.length === 0) {
+    return '';
+  }
+  const requestedTime = new Date(requestedDatetime).getTime();
+  let nearestTimestep = availableTimesteps[0];
+  let nearestTimestepMs = new Date(nearestTimestep).getTime();
+  let minDiff = Math.abs(nearestTimestepMs - requestedTime);
+  for (const timestep of availableTimesteps) {
+    const timestepMs = new Date(timestep).getTime();
+    const diff = Math.abs(timestepMs - requestedTime);
+    if (diff < minDiff || diff === minDiff && timestepMs < nearestTimestepMs) {
+      minDiff = diff;
+      nearestTimestep = timestep;
+      nearestTimestepMs = timestepMs;
+    }
+  }
+  return nearestTimestep;
+};
 // Parsing and conversion function
 function parseCoverageCollection(response, parameterMappings, windSpeedUnit) {
   const features = [];
@@ -3122,7 +3179,7 @@ const defaultParameterMappings = {
 const getParameterMappings = parameterMappings => {
   return Object.keys(parameterMappings).map(key => parameterMappings[key]);
 };
-const useMultipleSources = (sources, locations, datetime) => {
+const useMultipleSources = (sources, locations, datetime, timeSelectionMode = 'nearestWithinRange') => {
   const {
     data: timesteps,
     error: timestepsError,
@@ -3137,32 +3194,31 @@ const useMultipleSources = (sources, locations, datetime) => {
       windSpeedUnit,
       verticalRange
     }, index) => {
-      // Find the best matching timestep for this source
+      // Per source: choose either exact match or nearest-in-range timestep.
       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;
+        if (Number.isFinite(requestedTime)) {
+          const exactMatch = timesteps[index].find(timestep => new Date(timestep).getTime() === requestedTime);
+          if (timeSelectionMode === 'exact') {
+            dateToUse = exactMatch || '';
+          } else {
+            const availableTimes = timesteps[index].map(timestep => new Date(timestep).getTime()).filter(time => Number.isFinite(time)).sort((aTime, bTime) => aTime - bTime);
+            if (availableTimes.length > 0) {
+              const firstAvailableTime = availableTimes[0];
+              const lastAvailableTime = availableTimes[availableTimes.length - 1];
+              const isWithinSourceRange = requestedTime >= firstAvailableTime && requestedTime <= lastAvailableTime;
+              if (isWithinSourceRange) {
+                dateToUse = getNearestTimestep(datetime, timesteps[index]);
+              }
             }
           }
-          dateToUse = nearestTimestep;
         }
       }
       const queryParams = constructQueryParams(collectionId, url, instanceId, locations[collectionId] || '', dateToUse || '', parameterMappings || defaultParameterMappings, windSpeedUnit || 'ms', verticalRange || '');
       return queryParams;
     });
-  }, [datetime, locations, sources, timesteps]);
+  }, [datetime, locations, sources, timeSelectionMode, timesteps]);
   return useQueries({
     queries,
     combine: queryResults => {
@@ -3202,7 +3258,8 @@ const useTimesteps = sourceSelections => {
         return getTimestepsFromInstanceOrCollection(instance);
       }
       return getTimestepsFromInstanceOrCollection(data);
-    }
+    },
+    refetchInterval: 5 * 60 * 1000
   })), [sourceSelections]);
   const results = useQueries({
     queries,
@@ -3446,7 +3503,23 @@ const slice = createSlice({
         draft.selectedLocations = preset.selectedLocations ?? {};
         draft.selectedTime = preset.selectedTime ?? new Date().toISOString();
         draft.diagramType = preset.diagramType ?? 'SKEWT';
-        draft.soundingPanels = preset.soundingPanels ?? initialSoundingsState.soundingPanels;
+        // Ensure we show all available panels, even if not stored in preset
+        if (preset.soundingPanels) {
+          draft.soundingPanels = {
+            ...preset.soundingPanels
+          };
+          initialSoundingsState.soundingPanels.order.forEach(panel => {
+            if (!preset.soundingPanels.order.find(presetPanel => panel === presetPanel)) {
+              draft.soundingPanels.order = [...draft.soundingPanels.order, panel];
+              draft.soundingPanels.entities = {
+                ...draft.soundingPanels.entities,
+                [panel]: initialSoundingsState.soundingPanels.entities[panel]
+              };
+            }
+          });
+        } else {
+          draft.soundingPanels = initialSoundingsState.soundingPanels;
+        }
         draft.shouldHideLocationMarkers = preset.shouldHideLocationMarkers ?? false;
       }
     },
@@ -3530,6 +3603,46 @@ const normalizeSoundingsState = state => {
 };
 const soundingsReducer = (state, action) => {
   const normalizedState = normalizeSoundingsState(state ?? initialState);
+  if (action.type === 'GENERIC_SYNC_SETTIME') {
+    const {
+      source,
+      targets: targetsFromAction
+    } = action.payload;
+    const targets = [...targetsFromAction];
+    if (source?.payload) {
+      targets.unshift({
+        targetId: source.payload.sourceId,
+        value: source.payload.value
+      });
+    }
+    let hasChanges = false;
+    const nextById = {
+      ...normalizedState.byId
+    };
+    targets.forEach(({
+      targetId,
+      value
+    }) => {
+      if (!targetId || !value?.currentTime || !nextById[targetId]) {
+        return;
+      }
+      if (nextById[targetId].selectedTime === value.currentTime) {
+        return;
+      }
+      hasChanges = true;
+      nextById[targetId] = {
+        ...nextById[targetId],
+        selectedTime: value.currentTime
+      };
+    });
+    if (hasChanges) {
+      return {
+        ...normalizedState,
+        byId: nextById
+      };
+    }
+    return normalizedState;
+  }
   if (action.type === setSoundingsCollections.type) {
     const collections = action.payload;
     if (collections === normalizedState.soundingsCollections) {
@@ -3933,16 +4046,53 @@ const SoundingsTimeSlider = ({
     value: dateUtils.unix(dateUtils.getUtcFromString(date)),
     label: shouldHideLabel(arr.length, index, maxLabelCount) ? '' : dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
   }));
+  const currentTimeIndex = React.useMemo(() => {
+    if (timesteps.length === 0) {
+      return -1;
+    }
+    const selectedUtc = dateUtils.getUtcFromString(selectedTime);
+    if (!selectedUtc) {
+      return 0;
+    }
+    const selectedUnix = dateUtils.unix(selectedUtc);
+    const indexByExactTimestamp = timesteps.findIndex(time => {
+      const utcTime = dateUtils.getUtcFromString(time);
+      if (!utcTime) {
+        return false;
+      }
+      return dateUtils.unix(utcTime) === selectedUnix;
+    });
+    if (indexByExactTimestamp !== -1) {
+      return indexByExactTimestamp;
+    }
+    const indexByExactString = timesteps.findIndex(time => time === selectedTime);
+    if (indexByExactString !== -1) {
+      return indexByExactString;
+    }
+    // If selected time is not a sounding timestep, anchor on the nearest timestep
+    // so forward/backward navigation continues from the expected point in time.
+    return timesteps.reduce((nearestIndex, time, index) => {
+      const utcTime = dateUtils.getUtcFromString(time);
+      if (!utcTime) {
+        return nearestIndex;
+      }
+      const currentDiff = Math.abs(dateUtils.unix(utcTime) - selectedUnix);
+      const nearestUtc = dateUtils.getUtcFromString(timesteps[nearestIndex]);
+      if (!nearestUtc) {
+        return index;
+      }
+      const nearestDiff = Math.abs(dateUtils.unix(nearestUtc) - selectedUnix);
+      return currentDiff < nearestDiff ? index : nearestIndex;
+    }, 0);
+  }, [selectedTime, timesteps]);
   const onStepBackward = React.useCallback(() => {
-    const currentIndex = timesteps.indexOf(selectedTime);
-    const precedingIndex = Math.max(currentIndex - 1, 0);
+    const precedingIndex = Math.max(currentTimeIndex - 1, 0);
     updateSelectedTime(timesteps[precedingIndex]);
-  }, [selectedTime, updateSelectedTime, timesteps]);
+  }, [currentTimeIndex, updateSelectedTime, timesteps]);
   const onStepForward = React.useCallback(() => {
-    const currentIndex = timesteps.indexOf(selectedTime);
-    const followingIndex = Math.min(currentIndex + 1, timesteps.length - 1);
+    const followingIndex = Math.min(currentTimeIndex + 1, timesteps.length - 1);
     updateSelectedTime(timesteps[followingIndex]);
-  }, [selectedTime, updateSelectedTime, timesteps]);
+  }, [currentTimeIndex, updateSelectedTime, timesteps]);
   return jsxs("div", {
     ref: sliderRef,
     style: {
@@ -4012,47 +4162,50 @@ const SoundingsTimeSlider = ({
   });
 };
 
-const roundToClosestTimestep = (timeToRound, availableSteps) => {
-  if (availableSteps.length > 0 && !availableSteps.includes(timeToRound)) {
-    const selectionValue = dateUtils.unix(new Date(timeToRound));
-    const closestTimestep = minBy(availableSteps, timeValue =>
-    // distance to selected time
-    Math.abs(selectionValue - dateUtils.unix(new Date(timeValue))));
-    return closestTimestep || availableSteps[0];
-  }
-  return timeToRound;
-};
 const SoundingsTimeSliderConnect = ({
-  viewId
+  viewId,
+  timeInUse,
+  syncEnabled = false
 }) => {
-  const selectedTime = useSelector(state => getSelectedTime(state, viewId));
+  const selectedTimeInStore = useSelector(state => getSelectedTime(state, viewId));
+  const selectedTime = timeInUse || selectedTimeInStore;
   const sourceSelections = useSelector(state => getSelectedSources(state, viewId));
   const dispatch = useDispatch();
-  const updateSelectedTime = React.useCallback((selectedTime, isInitialCorrection = false) => {
+  const updateSelectedTime = React.useCallback(selectedTime => {
+    if (syncEnabled) {
+      dispatch(genericActions.setTime({
+        sourceId: viewId,
+        origin: 'SoundingsTimeSliderConnect',
+        value: {
+          currentTime: handleDateUtilsISOString(selectedTime)
+        }
+      }));
+      return;
+    }
     dispatch(soundingsActions.updateSelectedTime({
       selectedTime,
       panelId: viewId,
-      origin: isInitialCorrection ? SoundingsActionOrigin.soundingsManager : SoundingsActionOrigin.soundingsComponent
+      origin: SoundingsActionOrigin.soundingsComponent
     }));
-  }, [dispatch, viewId]);
+  }, [dispatch, syncEnabled, 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) {
-      const isInitial = !hasInitializedTime.current;
-      updateSelectedTime(validSelectedTime, isInitial);
-      if (isInitial) {
-        hasInitializedTime.current = true;
-      }
+  const validSelectedTime = mergedTimesteps.length > 0 && !mergedTimesteps.includes(selectedTimeInStore) ? getNearestTimestep(selectedTimeInStore, mergedTimesteps) : selectedTimeInStore;
+  React.useEffect(() => {
+    // Local mode: keep selectedTime aligned with available timesteps.
+    if (syncEnabled || selectedTimeInStore === validSelectedTime) {
+      return;
     }
-  }, [selectedTime, updateSelectedTime, validSelectedTime]);
+    dispatch(soundingsActions.updateSelectedTime({
+      selectedTime: validSelectedTime,
+      panelId: viewId,
+      origin: SoundingsActionOrigin.soundingsComponent
+    }));
+  }, [dispatch, selectedTimeInStore, syncEnabled, validSelectedTime, viewId]);
   return jsx(SoundingsTimeSlider, {
-    selectedTime: validSelectedTime,
+    selectedTime: selectedTime,
     timesteps: mergedTimesteps,
     updateSelectedTime: updateSelectedTime
   });
@@ -4089,6 +4242,9 @@ const SoundingsConnect = ({
   viewId,
   soundingsPreset
 }) => {
+  const {
+    t
+  } = useSoundingsTranslation();
   const viewRef = React.useRef(null);
   const size = useGetSize(viewRef);
   const geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
@@ -4125,6 +4281,25 @@ const SoundingsConnect = ({
   const locationSelections = useSelector(state => getLocationSelections(state, viewId), shallowEqual);
   const diagramType = useSelector(state => getDiagramType(state, viewId));
   const shouldHideLocationMarkers = useSelector(state => getShouldHideLocationMarkers(state, viewId));
+  const selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, viewId), shallowEqual);
+  const firstLinkedMapId = selectedMapIds[0];
+  const {
+    data: sourceTimesteps
+  } = useTimesteps(sourceSelections);
+  const syncgroupTimeState = useSyncgroupTimeState(viewId, 0);
+  const syncgroupSelectedTime = useMemo(() => {
+    if (syncgroupTimeState?.current === undefined || !Number.isFinite(syncgroupTimeState.current)) {
+      return undefined;
+    }
+    return dateUtils.fromUnix(syncgroupTimeState.current).toISOString();
+  }, [syncgroupTimeState]);
+  const isTimeSynced = !!syncgroupSelectedTime;
+  const selectedTimeInUse = syncgroupSelectedTime || selectedTime;
+  const timeMismatchInfo = useMemo(() => {
+    return getTimeMismatchInfo(isTimeSynced, selectedTimeInUse, sourceTimesteps);
+  }, [isTimeSynced, selectedTimeInUse, sourceTimesteps]);
+  const mismatchKey = timeMismatchInfo ? selectedTimeInUse || '' : '';
+  const [isTimeMismatchDismissed, setIsTimeMismatchDismissed] = React.useState(false);
   const setChosenDiagramType = React.useCallback(diagramType => {
     dispatch(soundingsActions.updateDiagramType({
       diagramType,
@@ -4133,11 +4308,9 @@ const SoundingsConnect = ({
     }));
   }, [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, firstMapId), shallowEqual);
+  mapSelectors.getPinLocation(state, firstLinkedMapId), shallowEqual);
   const collectionsRef = React.useRef();
   const collections = useMemo(() => {
     const newCollections = sourceSelections.map(({
@@ -4355,7 +4528,10 @@ const SoundingsConnect = ({
     error,
     data,
     isPending
-  } = useMultipleSources(sourceSelections, locationSelections, selectedTime);
+  } = useMultipleSources(sourceSelections, locationSelections, selectedTimeInUse, 'exact');
+  useEffect(() => {
+    setIsTimeMismatchDismissed(false);
+  }, [mismatchKey]);
   const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store, viewId));
   const changeOrder = newOrder => {
     const orderedIds = newOrder.map(collection => collection.id);
@@ -4373,14 +4549,18 @@ const SoundingsConnect = ({
       color: "secondary",
       sx: {
         position: 'absolute',
-        width: '100%'
+        top: 0,
+        left: 0,
+        width: '100%',
+        zIndex: 20
       }
     }), jsxs(Stack, {
       sx: {
         padding: '12px',
         width: '100%',
         height: '100%',
-        backgroundColor: 'geowebColors.background.surfaceApp'
+        backgroundColor: 'geowebColors.background.surfaceApp',
+        position: 'relative'
       },
       children: [jsx(Box, {
         paddingLeft: 5,
@@ -4390,7 +4570,8 @@ const SoundingsConnect = ({
       }), jsx(Card, {
         sx: {
           width: '100%',
-          height: '100%'
+          height: '100%',
+          position: 'relative'
         },
         children: jsxs(Stack, {
           spacing: 1,
@@ -4399,7 +4580,30 @@ const SoundingsConnect = ({
             height: '100%',
             display: 'flex'
           },
-          children: [jsx(Box, {
+          children: [!!timeMismatchInfo && !isTimeMismatchDismissed && jsxs(Box, {
+            sx: {
+              flex: '0 0 auto',
+              position: 'relative'
+            },
+            children: [jsx(AlertBanner, {
+              severity: "warning",
+              title: t('soundings-time-mismatch-title')
+            }), jsx(IconButton, {
+              "aria-label": "Close warning",
+              onClick: () => setIsTimeMismatchDismissed(true),
+              size: "small",
+              sx: {
+                position: 'absolute',
+                right: 8,
+                top: 10,
+                padding: 0.25,
+                zIndex: 1
+              },
+              children: jsx(Close, {
+                fontSize: "small"
+              })
+            })]
+          }), jsx(Box, {
             sx: {
               display: 'flex',
               justifyContent: 'center',
@@ -4435,6 +4639,8 @@ const SoundingsConnect = ({
               height: `${TIMESLIDER_HEIGHT}px`
             },
             children: jsx(SoundingsTimeSliderConnect, {
+              syncEnabled: isTimeSynced,
+              timeInUse: selectedTimeInUse,
               viewId: viewId
             })
           })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/soundings",
-  "version": "15.3.0",
+  "version": "16.0.0",
   "description": "GeoWeb soundings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,24 +8,24 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/api": "15.3.0",
+    "@opengeoweb/api": "16.0.0",
     "@tanstack/react-query": "^5.85.5",
     "react": "^18.3.1",
     "d3": "^7.9.0",
     "react-i18next": "^15.1.1",
     "i18next": "^25.0.1",
-    "@opengeoweb/shared": "15.3.0",
+    "@opengeoweb/shared": "16.0.0",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "15.3.0",
+    "@opengeoweb/store": "16.0.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "15.3.0",
+    "@opengeoweb/theme": "16.0.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "15.3.0",
+    "@opengeoweb/time-slider": "16.0.0",
     "react-window": "^2.2.6",
-    "@opengeoweb/webmap": "15.3.0",
+    "@opengeoweb/webmap": "16.0.0",
     "lodash": "^4.17.21",
     "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "15.3.0",
+    "@opengeoweb/webmap-react": "16.0.0",
     "react-resizable-layout": "^0.7.3",
     "react-sortablejs": "^6.1.4"
   },

package/src/lib/api/edr-api/hooks.d.ts

@@ -17,7 +17,7 @@ export declare const defaultParameterMappings: {
     relativeHumidity: string;
 };
 export declare const getParameterMappings: (parameterMappings: Record<string, string>) => string[];
-export declare const useMultipleSources: (sources: SourceType[], locations: Record<string, string | undefined | Coordinates>, datetime?: string) => {
+export declare const useMultipleSources: (sources: SourceType[], locations: Record<string, string | undefined | Coordinates>, datetime?: string, timeSelectionMode?: "exact" | "nearestWithinRange") => {
     data: SoundingFeature[][];
     isPending: boolean;
     error: Error | null | undefined;

package/src/lib/api/edr-api/utils.d.ts

@@ -1,6 +1,7 @@
 import type { Coverage, CoverageCollection, VerticalProfileDomain } from '@opengeoweb/shared';
 import type { CollectionDetails, SoundingFeature, SoundingsInstance } from './types';
 export declare const getWindSpeedInKts: (windSpeed: number, windSpeedUnit: string) => number;
+export declare const getNearestTimestep: (requestedDatetime: string, availableTimesteps: string[]) => string;
 export declare function parseCoverageCollection(response: CoverageCollection<VerticalProfileDomain> | Coverage<VerticalProfileDomain>, parameterMappings: Record<string, string>, windSpeedUnit: string): SoundingFeature[];
 /**
  * Parse duration with repeats

package/src/lib/components/Soundings/SoundingsConnect.stories.d.ts

@@ -8,6 +8,7 @@ export default _default;
 type Story = StoryObj<typeof SoundingsConnect>;
 export declare const SoundingsConnectStory: Story;
 export declare const SoundingsConnectStoryDark: Story;
+export declare const SoundingsConnectWarningStory: Story;
 export declare const SoundingsClosedWindBarbsOpenStory: Story;
 export declare const SoundingsClosedWindBarbsOpenStoryDark: Story;
 export declare const SoundingsConnectLoading: {

package/src/lib/components/Soundings/timeMismatchUtils.d.ts

@@ -0,0 +1,4 @@
+export interface TimeMismatchInfo {
+    mismatch: true;
+}
+export declare const getTimeMismatchInfo: (isTimeSynced: boolean, warningTimeInUse: string | undefined, sourceTimesteps: string[][]) => TimeMismatchInfo | undefined;

package/src/lib/components/SoundingsTimeSlider/SoundingsTimeSliderConnect.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 interface SoundingsTimeSliderConnectProps {
     viewId: string;
+    timeInUse?: string;
+    syncEnabled?: boolean;
 }
-export declare const SoundingsTimeSliderConnect: ({ viewId, }: SoundingsTimeSliderConnectProps) => React.ReactElement;
+export declare const SoundingsTimeSliderConnect: ({ viewId, timeInUse, syncEnabled, }: SoundingsTimeSliderConnectProps) => React.ReactElement;
 export {};