@opengeoweb/soundings 19.2.0 → 19.3.0

package/dist/index.esm.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Stack, Box, Tooltip, Typography, styled, Card, IconButton, Menu, ListSubheader, MenuItem, LinearProgress, List as List$1, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton, Switch, ToggleButtonGroup, ToggleButton } from '@mui/material';
 import { range, isEqual } from 'lodash';
-import React, { useMemo, useRef, useEffect, useState, Fragment as Fragment$1, useCallback } from 'react';
+import React, { useMemo, useRef, useEffect, useId, useState, Fragment as Fragment$1, useCallback } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { dateUtils, referenceTimeUtils, safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, SwitchButton, CustomToggleButton, CustomSlider, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
-import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, useRegisterFeatureSyncSource, genericSelectors, useSyncgroupTimeState, mapSelectors, mapActions, useUpdateFeatureSyncLayers, useSetupDialog, layerActions, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { dateUtils, referenceTimeUtils, safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, SwitchButton, CustomToggleButton, CustomSlider, AlertBanner, ToolContainerDraggable, TooltipSelect, AlertIcon, useResizeObserver, SearchField, CustomAccordion } from '@opengeoweb/shared';
+import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, useRegisterFeatureSyncSource, genericSelectors, useSyncgroupTimeState, mapSelectors, mapActions, useUpdateFeatureSyncLayers, layerActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
 import { Layers, Sources, Location, Equalizer, ArrowDropDownDown, DragHandle, Close, Visibility, VisibilityOff } from '@opengeoweb/theme';
 import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, handleDateUtilsISOString, webmapUtils } from '@opengeoweb/webmap';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import * as d3 from 'd3';
-import { useQueries } from '@tanstack/react-query';
+import { queryOptions, useQueryClient, useQueries } from '@tanstack/react-query';
 import { withJsonFormat, getHeaders, handleResponse } from '@opengeoweb/api';
 import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
 import i18n from 'i18next';
@@ -139,6 +139,8 @@ var REFERENCE_PRESSURE = 1000 * 100; // 1000hPa = 100000Pa
 var EARTH_MEAN_RADIUS = 6371; // [km]
 var MAX_PROXIMITY_RADIUS = 100; // [km]
 var SAME_POINT_DISTANCE_KM = 0.05;
+var SOUNDINGS_CONTAINER_BREAKPOINT_PX = '600px';
+var SOUNDINGS_CONTAINER_NAME = 'soundings-container';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -717,13 +719,13 @@ var SoundingsLegend = function SoundingsLegend(_ref) {
   return jsx(Stack, {
     direction: "row",
     spacing: 1,
-    useFlexGap: true,
     sx: {
       justifyContent: 'center',
       flexWrap: 'wrap',
       paddingLeft: 2,
       paddingTop: 0.5
     },
+    useFlexGap: true,
     children: sourceSelections.map(function (source, index) {
       var resolvedInstanceId = sourceResolvedInstanceIds == null ? void 0 : sourceResolvedInstanceIds[source.collectionId];
       var title = getLegendTitle(source, resolvedInstanceId);
@@ -985,77 +987,92 @@ var getCollectionLocations = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-var getCollectionInstances = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(collectionId, baseUrl) {
+var getInstanceLocations = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(collectionId, instanceId, baseUrl) {
     return _regenerator().w(function (_context2) {
       while (1) switch (_context2.n) {
         case 0:
-          return _context2.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances"), {
+          return _context2.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId + "/locations"), {
             headers: getHeaders()
           }).then(handleResponse));
       }
     }, _callee2);
   }));
-  return function getCollectionInstances(_x3, _x4) {
+  return function getInstanceLocations(_x3, _x4, _x5) {
     return _ref2.apply(this, arguments);
   };
 }();
-var getCollectionDetails = /*#__PURE__*/function () {
+var getCollectionInstances = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(collectionId, baseUrl) {
     return _regenerator().w(function (_context3) {
       while (1) switch (_context3.n) {
         case 0:
-          return _context3.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId), {
+          return _context3.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances"), {
             headers: getHeaders()
           }).then(handleResponse));
       }
     }, _callee3);
   }));
-  return function getCollectionDetails(_x5, _x6) {
+  return function getCollectionInstances(_x6, _x7) {
     return _ref3.apply(this, arguments);
   };
 }();
-var getInstanceDetails = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(collectionId, instanceId, baseUrl) {
+var getCollectionDetails = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(collectionId, baseUrl) {
     return _regenerator().w(function (_context4) {
       while (1) switch (_context4.n) {
         case 0:
-          return _context4.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId), {
+          return _context4.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId), {
             headers: getHeaders()
           }).then(handleResponse));
       }
     }, _callee4);
   }));
-  return function getInstanceDetails(_x7, _x8, _x9) {
+  return function getCollectionDetails(_x8, _x9) {
     return _ref4.apply(this, arguments);
   };
 }();
-var getEdrCollectionForLocation = /*#__PURE__*/function () {
-  var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(collectionId, baseUrl, instanceId, locationId, parameters, datetime, verticalRange) {
-    var url;
+var getInstanceDetails = /*#__PURE__*/function () {
+  var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(collectionId, instanceId, baseUrl) {
     return _regenerator().w(function (_context5) {
       while (1) switch (_context5.n) {
+        case 0:
+          return _context5.a(2, fetch(withJsonFormat(baseUrl + "/collections/" + collectionId + "/instances/" + instanceId), {
+            headers: getHeaders()
+          }).then(handleResponse));
+      }
+    }, _callee5);
+  }));
+  return function getInstanceDetails(_x0, _x1, _x10) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+var getEdrCollectionForLocation = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(collectionId, baseUrl, instanceId, locationId, parameters, datetime, verticalRange) {
+    var url;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
         case 0:
           url = new URL(baseUrl + "/collections/" + collectionId + (instanceId ? "/instances/" + instanceId : '') + "/locations/" + locationId);
           url.searchParams.append('parameter-name', parameters.join(','));
           url.searchParams.append('datetime', datetime);
           url.searchParams.append('z', verticalRange);
           url.searchParams.append('f', 'CoverageJSON');
-          return _context5.a(2, fetch(url.toString(), {
+          return _context6.a(2, fetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
-    }, _callee5);
+    }, _callee6);
   }));
-  return function getEdrCollectionForLocation(_x0, _x1, _x10, _x11, _x12, _x13, _x14) {
-    return _ref5.apply(this, arguments);
+  return function getEdrCollectionForLocation(_x11, _x12, _x13, _x14, _x15, _x16, _x17) {
+    return _ref6.apply(this, arguments);
   };
 }();
 var getEdrCollectionForPosition = /*#__PURE__*/function () {
-  var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(collectionId, baseUrl, instanceId, coordinates, parameters, datetime, verticalRange) {
+  var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(collectionId, baseUrl, instanceId, coordinates, parameters, datetime, verticalRange) {
     var url;
-    return _regenerator().w(function (_context6) {
-      while (1) switch (_context6.n) {
+    return _regenerator().w(function (_context7) {
+      while (1) switch (_context7.n) {
         case 0:
           url = new URL(baseUrl + "/collections/" + collectionId + (instanceId ? "/instances/" + instanceId : '') + "/position");
           url.searchParams.append('coords', "POINT(" + coordinates[0] + " " + coordinates[1] + ")");
@@ -1065,14 +1082,14 @@ var getEdrCollectionForPosition = /*#__PURE__*/function () {
             url.searchParams.append('z', verticalRange);
           }
           url.searchParams.append('f', 'CoverageJSON');
-          return _context6.a(2, fetch(url.toString(), {
+          return _context7.a(2, fetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
-    }, _callee6);
+    }, _callee7);
   }));
-  return function getEdrCollectionForPosition(_x15, _x16, _x17, _x18, _x19, _x20, _x21) {
-    return _ref6.apply(this, arguments);
+  return function getEdrCollectionForPosition(_x18, _x19, _x20, _x21, _x22, _x23, _x24) {
+    return _ref7.apply(this, arguments);
   };
 }();
 /**
@@ -1081,10 +1098,10 @@ var getEdrCollectionForPosition = /*#__PURE__*/function () {
  * Returns a CoverageCollection with coverages for each grid point within the radius.
  */
 var getEdrCollectionForRadius = /*#__PURE__*/function () {
-  var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(collectionId, baseUrl, instanceId, centerCoordinates, radiusKm, parameters, datetime, verticalRange) {
+  var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(collectionId, baseUrl, instanceId, centerCoordinates, radiusKm, parameters, datetime, verticalRange) {
     var url;
-    return _regenerator().w(function (_context7) {
-      while (1) switch (_context7.n) {
+    return _regenerator().w(function (_context8) {
+      while (1) switch (_context8.n) {
         case 0:
           url = new URL(baseUrl + "/collections/" + collectionId + (instanceId ? "/instances/" + instanceId : '') + "/radius");
           url.searchParams.append('coords', "POINT(" + centerCoordinates[0] + " " + centerCoordinates[1] + ")");
@@ -1097,17 +1114,40 @@ var getEdrCollectionForRadius = /*#__PURE__*/function () {
             url.searchParams.append('z', verticalRange);
           }
           url.searchParams.append('f', 'CoverageJSON');
-          return _context7.a(2, fetch(url.toString(), {
+          return _context8.a(2, fetch(url.toString(), {
             headers: getHeaders()
           }).then(handleResponse));
       }
-    }, _callee7);
+    }, _callee8);
   }));
-  return function getEdrCollectionForRadius(_x22, _x23, _x24, _x25, _x26, _x27, _x28, _x29) {
-    return _ref7.apply(this, arguments);
+  return function getEdrCollectionForRadius(_x25, _x26, _x27, _x28, _x29, _x30, _x31, _x32) {
+    return _ref8.apply(this, arguments);
   };
 }();
 
+var soundingsQueryOptions = {
+  getCollectionInstances: function getCollectionInstances$1(collectionId, url) {
+    return queryOptions({
+      queryKey: ['edr-soundings-instances', collectionId, url],
+      queryFn: function () {
+        var _queryFn = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
+              case 0:
+                return _context.a(2, getCollectionInstances(collectionId, url));
+            }
+          }, _callee);
+        }));
+        function queryFn() {
+          return _queryFn.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      refetchInterval: 5 * 60 * 1000
+    });
+  }
+};
+
 var epsilon = 0.622; // Ratio of molecular weights of water vapour and dry air
 var e0 = 611.2; // Reference vapor pressure [Pa]
 var aConstant = 17.67;
@@ -1625,28 +1665,12 @@ var useResolvedSourceSelections = function useResolvedSourceSelections(sources)
       var collectionId = _ref2.collectionId,
         url = _ref2.url,
         instanceId = _ref2.instanceId;
-      return {
-        queryKey: ['edr-soundings-instances', collectionId],
-        queryFn: function () {
-          var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-            return _regenerator().w(function (_context3) {
-              while (1) switch (_context3.n) {
-                case 0:
-                  return _context3.a(2, getCollectionInstances(collectionId, url));
-              }
-            }, _callee3);
-          }));
-          function queryFn() {
-            return _queryFn3.apply(this, arguments);
-          }
-          return queryFn;
-        }(),
+      return Object.assign({}, soundingsQueryOptions.getCollectionInstances(collectionId, url), {
         enabled: referenceTimeUtils.isRelativeReferenceTime(instanceId),
-        refetchInterval: 5 * 60 * 1000,
         select: function select(data) {
           return data.instances;
         }
-      };
+      });
     });
   }, [sources]);
   var instancesBySource = useQueries({
@@ -1686,42 +1710,42 @@ var useTimesteps = function useTimesteps(sourceSelections) {
       return {
         queryKey: ['edr-soundings-instance', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+          var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
             var _instanceData$extent, instanceData, timeExtentValues, allInstancesData, collectionData;
-            return _regenerator().w(function (_context4) {
-              while (1) switch (_context4.n) {
+            return _regenerator().w(function (_context3) {
+              while (1) switch (_context3.n) {
                 case 0:
                   if (!(instanceId && instanceId !== '')) {
-                    _context4.n = 4;
+                    _context3.n = 4;
                     break;
                   }
-                  _context4.n = 1;
+                  _context3.n = 1;
                   return getInstanceDetails(collectionId, instanceId, url);
                 case 1:
-                  instanceData = _context4.v;
+                  instanceData = _context3.v;
                   timeExtentValues = instanceData == null || (_instanceData$extent = instanceData.extent) == null || (_instanceData$extent = _instanceData$extent.temporal) == null ? void 0 : _instanceData$extent.values;
                   if (timeExtentValues) {
-                    _context4.n = 3;
+                    _context3.n = 3;
                     break;
                   }
-                  _context4.n = 2;
+                  _context3.n = 2;
                   return getCollectionInstances(collectionId, url);
                 case 2:
-                  allInstancesData = _context4.v;
-                  return _context4.a(2, allInstancesData);
+                  allInstancesData = _context3.v;
+                  return _context3.a(2, allInstancesData);
                 case 3:
-                  return _context4.a(2, instanceData);
+                  return _context3.a(2, instanceData);
                 case 4:
-                  _context4.n = 5;
+                  _context3.n = 5;
                   return getCollectionDetails(collectionId, url);
                 case 5:
-                  collectionData = _context4.v;
-                  return _context4.a(2, collectionData);
+                  collectionData = _context3.v;
+                  return _context3.a(2, collectionData);
               }
-            }, _callee4);
+            }, _callee3);
           }));
           function queryFn() {
-            return _queryFn4.apply(this, arguments);
+            return _queryFn3.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -1782,21 +1806,21 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
       return {
         queryKey: ['edr-soundings-collection-details', id, url],
         queryFn: function () {
-          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+          var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
             var data;
-            return _regenerator().w(function (_context5) {
-              while (1) switch (_context5.n) {
+            return _regenerator().w(function (_context4) {
+              while (1) switch (_context4.n) {
                 case 0:
-                  _context5.n = 1;
+                  _context4.n = 1;
                   return getCollectionDetails(id, url);
                 case 1:
-                  data = _context5.v;
-                  return _context5.a(2, data);
+                  data = _context4.v;
+                  return _context4.a(2, data);
               }
-            }, _callee5);
+            }, _callee4);
           }));
           function queryFn() {
-            return _queryFn5.apply(this, arguments);
+            return _queryFn4.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -1833,29 +1857,29 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
       return {
         queryKey: ['edr-soundings-instances', id, resultsCollection.data],
         queryFn: function () {
-          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
             var data;
-            return _regenerator().w(function (_context6) {
-              while (1) switch (_context6.n) {
+            return _regenerator().w(function (_context5) {
+              while (1) switch (_context5.n) {
                 case 0:
                   if (!resultsCollection.data[index]) {
-                    _context6.n = 2;
+                    _context5.n = 2;
                     break;
                   }
-                  _context6.n = 1;
+                  _context5.n = 1;
                   return getCollectionInstances(id, url);
                 case 1:
-                  data = _context6.v;
-                  return _context6.a(2, data);
+                  data = _context5.v;
+                  return _context5.a(2, data);
                 case 2:
-                  return _context6.a(2, {
+                  return _context5.a(2, {
                     instances: []
                   });
               }
-            }, _callee6);
+            }, _callee5);
           }));
           function queryFn() {
-            return _queryFn6.apply(this, arguments);
+            return _queryFn5.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -1900,37 +1924,76 @@ var useGetCollectionsInstances = function useGetCollectionsInstances(collections
     data: dataWithCollectionInfo
   });
 };
-var useGetCollectionLocations = function useGetCollectionLocations(collections, enabled) {
+var useGetLocations = function useGetLocations(collections, enabled) {
+  var queryClient = useQueryClient();
   var edrQueries = useMemo(function () {
     return collections == null ? void 0 : collections.map(function (collection) {
+      var _collection$instanceI;
       return {
-        queryKey: ['edr-locations', collection.id],
+        queryKey: ['edr-locations', collection.id, collection.url, (_collection$instanceI = collection.instanceId) != null ? _collection$instanceI : ''],
         queryFn: function () {
-          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
-            var locations;
-            return _regenerator().w(function (_context7) {
-              while (1) switch (_context7.n) {
+          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+            var resolvedInstanceId, instances, resolved, locationsExplicitlyUnsupported, _locations, locations;
+            return _regenerator().w(function (_context6) {
+              while (1) switch (_context6.p = _context6.n) {
                 case 0:
-                  _context7.n = 1;
+                  resolvedInstanceId = collection.instanceId;
+                  if (!(resolvedInstanceId && referenceTimeUtils.isRelativeReferenceTime(resolvedInstanceId))) {
+                    _context6.n = 4;
+                    break;
+                  }
+                  _context6.p = 1;
+                  _context6.n = 2;
+                  return queryClient.fetchQuery(soundingsQueryOptions.getCollectionInstances(collection.id, collection.url));
+                case 2:
+                  instances = _context6.v;
+                  resolved = referenceTimeUtils.resolveReferenceTimeInstance(instances.instances, resolvedInstanceId); // Skip instance-level only when data_queries is present but explicitly excludes locations — if data_queries is absent, try instance-level anyway
+                  locationsExplicitlyUnsupported = (resolved == null ? void 0 : resolved.data_queries) !== undefined && !resolved.data_queries.locations;
+                  resolvedInstanceId = locationsExplicitlyUnsupported ? undefined : resolved == null ? void 0 : resolved.id;
+                  _context6.n = 4;
+                  break;
+                case 3:
+                  _context6.p = 3;
+                  _context6.v;
+                  resolvedInstanceId = undefined;
+                case 4:
+                  if (!resolvedInstanceId) {
+                    _context6.n = 8;
+                    break;
+                  }
+                  _context6.p = 5;
+                  _context6.n = 6;
+                  return getInstanceLocations(collection.id, resolvedInstanceId, collection.url);
+                case 6:
+                  _locations = _context6.v;
+                  return _context6.a(2, Object.assign({}, _locations, {
+                    id: collection.id,
+                    name: collection.name
+                  }));
+                case 7:
+                  _context6.p = 7;
+                  _context6.v;
+                case 8:
+                  _context6.n = 9;
                   return getCollectionLocations(collection.id, collection.url);
-                case 1:
-                  locations = _context7.v;
-                  return _context7.a(2, Object.assign({}, locations, {
+                case 9:
+                  locations = _context6.v;
+                  return _context6.a(2, Object.assign({}, locations, {
                     id: collection.id,
                     name: collection.name
                   }));
               }
-            }, _callee7);
+            }, _callee6, null, [[5, 7], [1, 3]]);
           }));
           function queryFn() {
-            return _queryFn7.apply(this, arguments);
+            return _queryFn6.apply(this, arguments);
           }
           return queryFn;
         }(),
         enabled: enabled
       };
     });
-  }, [collections, enabled]);
+  }, [collections, enabled, queryClient]);
   return useQueries({
     queries: edrQueries,
     combine: function combine(results) {
@@ -1972,48 +2035,48 @@ var useCheckPositionQuerySupportBySource = function useCheckPositionQuerySupport
       return {
         queryKey: ['edr-position-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
             var _details$data_queries, _instance$data_querie, instances, instance, details;
-            return _regenerator().w(function (_context8) {
-              while (1) switch (_context8.p = _context8.n) {
+            return _regenerator().w(function (_context7) {
+              while (1) switch (_context7.p = _context7.n) {
                 case 0:
-                  _context8.p = 0;
+                  _context7.p = 0;
                   if (!instanceId) {
-                    _context8.n = 2;
+                    _context7.n = 2;
                     break;
                   }
-                  _context8.n = 1;
+                  _context7.n = 1;
                   return getCollectionInstances(collectionId, url);
                 case 1:
-                  instances = _context8.v;
+                  instances = _context7.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context8.a(2, {
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie = instance.data_queries) != null && _instance$data_querie.position)
                   });
                 case 2:
-                  _context8.n = 3;
+                  _context7.n = 3;
                   return getCollectionDetails(collectionId, url);
                 case 3:
-                  details = _context8.v;
-                  return _context8.a(2, {
+                  details = _context7.v;
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: !!(details != null && (_details$data_queries = details.data_queries) != null && _details$data_queries.position)
                   });
                 case 4:
-                  _context8.p = 4;
-                  _context8.v;
-                  return _context8.a(2, {
+                  _context7.p = 4;
+                  _context7.v;
+                  return _context7.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee8, null, [[0, 4]]);
+            }, _callee7, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn8.apply(this, arguments);
+            return _queryFn7.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2062,48 +2125,48 @@ var useCheckRadiusQuerySupportBySource = function useCheckRadiusQuerySupportBySo
       return {
         queryKey: ['edr-radius-support', collectionId, instanceId || ''],
         queryFn: function () {
-          var _queryFn9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+          var _queryFn8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
             var _details$data_queries2, _instance$data_querie2, instances, instance, details;
-            return _regenerator().w(function (_context9) {
-              while (1) switch (_context9.p = _context9.n) {
+            return _regenerator().w(function (_context8) {
+              while (1) switch (_context8.p = _context8.n) {
                 case 0:
-                  _context9.p = 0;
+                  _context8.p = 0;
                   if (!instanceId) {
-                    _context9.n = 2;
+                    _context8.n = 2;
                     break;
                   }
-                  _context9.n = 1;
+                  _context8.n = 1;
                   return getCollectionInstances(collectionId, url);
                 case 1:
-                  instances = _context9.v;
+                  instances = _context8.v;
                   instance = instances.instances.find(function (i) {
                     return i.id === instanceId;
                   });
-                  return _context9.a(2, {
+                  return _context8.a(2, {
                     collectionId: collectionId,
                     supported: !!(instance != null && (_instance$data_querie2 = instance.data_queries) != null && _instance$data_querie2.radius)
                   });
                 case 2:
-                  _context9.n = 3;
+                  _context8.n = 3;
                   return getCollectionDetails(collectionId, url);
                 case 3:
-                  details = _context9.v;
-                  return _context9.a(2, {
+                  details = _context8.v;
+                  return _context8.a(2, {
                     collectionId: collectionId,
                     supported: !!(details != null && (_details$data_queries2 = details.data_queries) != null && _details$data_queries2.radius)
                   });
                 case 4:
-                  _context9.p = 4;
-                  _context9.v;
-                  return _context9.a(2, {
+                  _context8.p = 4;
+                  _context8.v;
+                  return _context8.a(2, {
                     collectionId: collectionId,
                     supported: false
                   });
               }
-            }, _callee9, null, [[0, 4]]);
+            }, _callee8, null, [[0, 4]]);
           }));
           function queryFn() {
-            return _queryFn9.apply(this, arguments);
+            return _queryFn8.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -2160,20 +2223,20 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
         return {
           queryKey: ['edr-grid-points-disabled', collectionId],
           queryFn: function () {
-            var _queryFn0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
-              return _regenerator().w(function (_context0) {
-                while (1) switch (_context0.n) {
+            var _queryFn9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+              return _regenerator().w(function (_context9) {
+                while (1) switch (_context9.n) {
                   case 0:
-                    return _context0.a(2, {
+                    return _context9.a(2, {
                       sourceId: collectionId,
                       gridPoint: undefined,
                       allGridPoints: []
                     });
                 }
-              }, _callee0);
+              }, _callee9);
             }));
             function queryFn() {
-              return _queryFn0.apply(this, arguments);
+              return _queryFn9.apply(this, arguments);
             }
             return queryFn;
           }(),
@@ -2198,22 +2261,22 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
       return {
         queryKey: ['edr-grid-points-radius', collectionId, instanceId || '', centerCoordinates.join(','), radiusKm.toString(), datetime],
         queryFn: function () {
-          var _queryFn1 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+          var _queryFn0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
             var minimalParameters, minimalVerticalRange, rawData, allGridPoints, nearestPoint, minSquaredDistance;
-            return _regenerator().w(function (_context1) {
-              while (1) switch (_context1.p = _context1.n) {
+            return _regenerator().w(function (_context0) {
+              while (1) switch (_context0.p = _context0.n) {
                 case 0:
                   if (supportsRadius) {
-                    _context1.n = 1;
+                    _context0.n = 1;
                     break;
                   }
-                  return _context1.a(2, {
+                  return _context0.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
                 case 1:
-                  _context1.p = 1;
+                  _context0.p = 1;
                   // Optimization: Only request a single parameter to minimize data transfer
                   // We only need the grid point coordinates, not the actual sounding data
                   minimalParameters = parameters.slice(0, 1); // Just one parameter
@@ -2221,10 +2284,10 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
                   // (Don't hardcode '1000' as that only works for pressure-level sources,
                   // not for hybrid/model-level sources which use levels 1-65)
                   minimalVerticalRange = '';
-                  _context1.n = 2;
+                  _context0.n = 2;
                   return getEdrCollectionForRadius(collectionId, url, instanceId, centerCoordinates, radiusKm, minimalParameters, datetime, minimalVerticalRange);
                 case 2:
-                  rawData = _context1.v;
+                  rawData = _context0.v;
                   allGridPoints = extractGridPointsFromCoverage(rawData); // Find the nearest grid point to the center coordinates
                   minSquaredDistance = Infinity;
                   allGridPoints.forEach(function (point) {
@@ -2239,24 +2302,24 @@ var useGridPointsFromRadius = function useGridPointsFromRadius(sources, radiusSu
                       nearestPoint = point;
                     }
                   });
-                  return _context1.a(2, {
+                  return _context0.a(2, {
                     sourceId: collectionId,
                     gridPoint: nearestPoint,
                     allGridPoints: allGridPoints
                   });
                 case 3:
-                  _context1.p = 3;
-                  _context1.v;
-                  return _context1.a(2, {
+                  _context0.p = 3;
+                  _context0.v;
+                  return _context0.a(2, {
                     sourceId: collectionId,
                     gridPoint: undefined,
                     allGridPoints: []
                   });
               }
-            }, _callee1, null, [[1, 3]]);
+            }, _callee0, null, [[1, 3]]);
           }));
           function queryFn() {
-            return _queryFn1.apply(this, arguments);
+            return _queryFn0.apply(this, arguments);
           }
           return queryFn;
         }(),
@@ -3034,12 +3097,13 @@ var useSoundingsTranslation = function useSoundingsTranslation() {
 };
 
 var SoundingsMarkersSwitch = function SoundingsMarkersSwitch(_ref) {
+  var _sx;
   var shouldHideMarkers = _ref.shouldHideMarkers,
     toggleMarkers = _ref.toggleMarkers;
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
   return jsxs(Box, {
-    sx: {
+    sx: (_sx = {
       display: 'flex',
       flexWrap: 'wrap',
       alignItems: 'flex-start',
@@ -3055,14 +3119,13 @@ var SoundingsMarkersSwitch = function SoundingsMarkersSwitch(_ref) {
       },
       '.markers-label': {
         display: 'none'
-      },
-      '@container soundings-container (min-width: 560px)': {
-        minWidth: '146px',
-        '.markers-label, .switch-button label': {
-          display: 'initial'
-        }
       }
-    },
+    }, _sx["@container " + SOUNDINGS_CONTAINER_NAME + " (min-width: " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+      minWidth: '146px',
+      '.markers-label, .switch-button label': {
+        display: 'initial'
+      }
+    }, _sx),
     children: [jsx(Typography, {
       className: "markers-label",
       sx: {
@@ -3087,6 +3150,7 @@ var SoundingsMarkersSwitch = function SoundingsMarkersSwitch(_ref) {
   });
 };
 
+var _styled;
 var _excluded = ["icon", "shortText", "longText"];
 var SoundingsTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
@@ -3105,30 +3169,27 @@ var SoundingsTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_ref
     })]
   }));
 });
-var SoundingsTopRowButton = styled(SoundingsTopRowButtonUnstyled)({
-  height: '10px !important',
-  '@container soundings-container (width < 560px)': {
-    maxWidth: '90px',
-    '& .longText': {
-      display: 'none'
-    },
-    '& svg': {
-      marginRight: '0 !important'
-    }
+var SoundingsTopRowButton = styled(SoundingsTopRowButtonUnstyled)((_styled = {
+  height: '10px !important'
+}, _styled["@container " + SOUNDINGS_CONTAINER_NAME + " (width < " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+  maxWidth: '90px',
+  '& .longText': {
+    display: 'none'
   },
-  '@container soundings-container (width >= 560px)': {
-    width: '130px',
-    '& .shortText': {
-      display: 'none'
-    }
-  },
-  '& span': {
-    fontSize: '9pt',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden'
+  '& svg': {
+    marginRight: '0 !important'
   }
-});
+}, _styled["@container " + SOUNDINGS_CONTAINER_NAME + " (min-width: " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+  width: '130px',
+  '& .shortText': {
+    display: 'none'
+  }
+}, _styled['& span'] = {
+  fontSize: '9pt',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+}, _styled));
 
 var MenuOptions;
 (function (MenuOptions) {
@@ -3138,6 +3199,7 @@ var MenuOptions;
   MenuOptions["profileData"] = "profileData";
 })(MenuOptions || (MenuOptions = {}));
 var SoundingsMenuBar = function SoundingsMenuBar(_ref) {
+  var _sx;
   var handleClick = _ref.handleClick,
     isOpen = _ref.isOpen,
     _ref$selectedSourcesA = _ref.selectedSourcesAmount,
@@ -3149,9 +3211,12 @@ var SoundingsMenuBar = function SoundingsMenuBar(_ref) {
   return jsxs(Stack, {
     direction: "row",
     spacing: 1,
-    sx: {
-      marginBottom: '4px'
-    },
+    sx: (_sx = {
+      marginBottom: '4px',
+      overflowX: 'auto'
+    }, _sx["@container " + SOUNDINGS_CONTAINER_NAME + " (min-width: " + SOUNDINGS_CONTAINER_BREAKPOINT_PX + ")"] = {
+      overflowX: 'initial'
+    }, _sx),
     children: [jsx(SoundingsTopRowButton, {
       "data-testid": "soundingsManagerButton",
       icon: jsx(Layers, {}),
@@ -3930,13 +3995,13 @@ var getLegendItem = function getLegendItem(color, text) {
 var HodographLegend = function HodographLegend() {
   return jsxs(Stack, {
     direction: "column",
-    useFlexGap: true,
     sx: {
       justifyContent: 'center',
       flexWrap: 'wrap',
       paddingLeft: 2,
       paddingTop: 0.5
     },
+    useFlexGap: true,
     children: [getLegendItem(HODOGRAPH_COLORS[0], '0 - 1 km'), getLegendItem(HODOGRAPH_COLORS[1], '1 - 3 km'), getLegendItem(HODOGRAPH_COLORS[2], '3 - 6 km'), getLegendItem(HODOGRAPH_COLORS[3], '6 - 9 km'), getLegendItem(HODOGRAPH_COLORS[4], '9 - 19 km')]
   });
 };
@@ -4739,6 +4804,8 @@ var Soundings = function Soundings(_ref) {
     showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
     _ref$diagramType = _ref.diagramType,
     diagramType = _ref$diagramType === void 0 ? 'SKEWT' : _ref$diagramType;
+  var instanceId = useId().replace(/:/g, '_');
+  var scopedGraphId = d3GraphId + "-" + instanceId;
   var svgRef = useRef(null);
   var canvasRef = useRef(null);
   var pressureRef = useRef(null);
@@ -4768,7 +4835,7 @@ var Soundings = function Soundings(_ref) {
       height: height,
       margin: margin,
       diagramType: diagramType,
-      d3GraphId: d3GraphId
+      d3GraphId: scopedGraphId
     });
     var svgRectangle = svgRef.current.getBoundingClientRect();
     svgRectRef.current = svgRectangle;
@@ -4800,7 +4867,7 @@ var Soundings = function Soundings(_ref) {
       minPressure: minPressure,
       maxPressure: maxPressure,
       svg: svg,
-      d3GraphId: d3GraphId
+      d3GraphId: scopedGraphId
     });
     data.forEach(function (features, index) {
       var color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
@@ -4842,7 +4909,7 @@ var Soundings = function Soundings(_ref) {
     return function () {
       d3.select(svgRefCur).selectAll('*').remove();
     };
-  }, [data, diagramType, width, height, d3GraphId, margin]);
+  }, [data, diagramType, width, height, scopedGraphId, margin]);
   useEffect(function () {
     var _svgRectRef$current;
     if (!showTooltip || !svgRef.current) {
@@ -5859,10 +5926,10 @@ var SoundingsProfileDataTable = function SoundingsProfileDataTable(_ref2) {
             py: 4
           },
           children: jsx(Typography, {
-            variant: "body2",
             sx: {
               color: 'text.secondary'
             },
+            variant: "body2",
             children: t('no-sounding-data-available')
           })
         }) : jsx(Box, {
@@ -5884,7 +5951,9 @@ var SoundingsProfileDataTable = function SoundingsProfileDataTable(_ref2) {
             },
             style: {
               height: '100%',
-              width: '100%'
+              width: '100%',
+              minWidth: tableMinWidth,
+              overflowX: 'hidden'
             }
           })
         })]
@@ -6212,6 +6281,9 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var locationSelections = useSelector(function (state) {
     return getLocationSelections(state, viewId);
   }, shallowEqual);
+  var soundingsCollections = useSelector(function (state) {
+    return getSoundingsCollections(state);
+  });
   var diagramType = useSelector(function (state) {
     return getDiagramType(state, viewId);
   });
@@ -6224,6 +6296,9 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var selectedMapIds = useSelector(function (state) {
     return genericSelectors.getLinkedTargetIds(state, viewId);
   }, shallowEqual);
+  var ownedFeatureLayerIds = useSelector(function (state) {
+    return genericSelectors.selectFeatureSyncLayerIdsForPanel(state, viewId);
+  }, shallowEqual);
   var linkedPanelIdsByMapId = useSelector(function (state) {
     return Object.fromEntries(selectedMapIds.map(function (mapId) {
       return [mapId, genericSelectors.selectLinkedPanelIdsForMap(state, mapId)];
@@ -6270,23 +6345,23 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   // Ref for reading selectedMapPin in effects without causing dependency loops
   var selectedMapPinRef = React.useRef(selectedMapPin);
   selectedMapPinRef.current = selectedMapPin;
-  // Get map bbox and SRS for zoom-dependent overlap prevention
-  var mapBbox = useSelector(function (state) {
-    return mapSelectors.getBbox(state, firstLinkedMapId);
-  }, shallowEqual);
-  var mapSrs = useSelector(function (state) {
-    return mapSelectors.getSrs(state, firstLinkedMapId);
-  });
   var collectionsRef = React.useRef(undefined);
   var collections = useMemo(function () {
+    // Only use instanceId for location fetching when the preset configures it, so collection-level sources (e.g. harmonie) are not affected
+    var presetMap = new Map(soundingsCollections.map(function (collection) {
+      return [collection.id, collection];
+    }));
     var newCollections = sourceSelections.map(function (_ref2) {
+      var _presetMap$get;
       var collectionId = _ref2.collectionId,
         url = _ref2.url,
-        name = _ref2.name;
+        name = _ref2.name,
+        instanceId = _ref2.instanceId;
       return {
         id: collectionId,
         url: url,
-        name: name || collectionId
+        name: name || collectionId,
+        instanceId: ((_presetMap$get = presetMap.get(collectionId)) == null ? void 0 : _presetMap$get.instanceId) !== undefined ? instanceId : undefined
       };
     });
     if (isEqual(newCollections, collectionsRef.current)) {
@@ -6294,9 +6369,9 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     }
     collectionsRef.current = newCollections;
     return newCollections;
-  }, [sourceSelections]);
-  var _useGetCollectionLoca = useGetCollectionLocations(collections, true),
-    rawLocationData = _useGetCollectionLoca.data;
+  }, [sourceSelections, soundingsCollections]);
+  var _useGetLocations = useGetLocations(collections, true),
+    rawLocationData = _useGetLocations.data;
   var _useCheckPositionQuer = useCheckPositionQuerySupportBySource(resolvedSourceSelections),
     positionQuerySupportBySource = _useCheckPositionQuer.data;
   var _useCheckRadiusQueryS = useCheckRadiusQuerySupportBySource(resolvedSourceSelections),
@@ -6317,10 +6392,11 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     sourceSelections.forEach(function (source) {
       var selection = locationSelections == null ? void 0 : locationSelections[source.collectionId];
       if (typeof selection === 'string') {
+        var _sourceLocations$feat;
         var sourceLocations = locationData == null ? void 0 : locationData.find(function (service) {
           return service.id === source.collectionId;
         });
-        var feature = sourceLocations == null ? void 0 : sourceLocations.features.find(function (feature) {
+        var feature = sourceLocations == null || (_sourceLocations$feat = sourceLocations.features) == null ? void 0 : _sourceLocations$feat.find(function (feature) {
           return feature.id === selection;
         });
         if ((feature == null ? void 0 : feature.geometry.type) === 'Point') {
@@ -6335,6 +6411,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   var sourceLocationNames = useMemo(function () {
     var result = {};
     sourceSelections.forEach(function (source) {
+      var _sourceLocations$feat2;
       var selection = locationSelections == null ? void 0 : locationSelections[source.collectionId];
       if (typeof selection !== 'string') {
         return;
@@ -6342,7 +6419,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
       var sourceLocations = locationData == null ? void 0 : locationData.find(function (service) {
         return service.id === source.collectionId;
       });
-      var feature = sourceLocations == null ? void 0 : sourceLocations.features.find(function (feature) {
+      var feature = sourceLocations == null || (_sourceLocations$feat2 = sourceLocations.features) == null ? void 0 : _sourceLocations$feat2.find(function (feature) {
         return feature.id === selection;
       });
       var name = feature == null ? void 0 : feature.properties.name;
@@ -6396,7 +6473,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     var locationFeatures = (locationData || []).flatMap(function (_ref3) {
       var serviceId = _ref3.id,
         features = _ref3.features;
-      return features.map(function (feature) {
+      return (features != null ? features : []).map(function (feature) {
         // Check if this feature is highlighted by its source (for sources without position support)
         var isHighlightedBySource = highlightedFeaturesBySource[serviceId] === feature.id;
         // Get the source index to determine color (same color as sounding diagram)
@@ -6512,54 +6589,20 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     });
     // Small fixed offset for markers sharing same grid position (~200m)
     var SOURCE_OVERLAP_OFFSET_DEG = 0.002;
-    // Calculate zoom-dependent minimum separation from clicked marker
-    // Handle different map projections for bbox interpretation
-    var MARKER_DIAMETER_PIXELS = 5; // Small separation - only push when very close to clicked marker
-    var ASSUMED_MAP_WIDTH_PIXELS = 800;
-    var MIN_CLICKED_SEPARATION_DEG = 0.005; // Minimum ~500m
-    var minClickedSeparationDeg = MIN_CLICKED_SEPARATION_DEG;
-    if ((mapBbox == null ? void 0 : mapBbox.right) != null && (mapBbox == null ? void 0 : mapBbox.left) != null) {
-      var bboxExtent = mapBbox.right - mapBbox.left;
-      var extentDeg;
-      // Convert bbox extent to degrees based on map projection
-      if (mapSrs === 'EPSG:4326') {
-        // Geographic projection - bbox already in degrees
-        extentDeg = bboxExtent;
-      } else if (mapSrs === 'EPSG:3857') {
-        // Web Mercator - convert meters to degrees
-        var WEB_MERCATOR_MAX = 20037508.34; // Half of Earth's circumference in meters
-        extentDeg = bboxExtent * 180 / WEB_MERCATOR_MAX;
-      } else if (Math.abs(bboxExtent) > 360) {
-        // Other projections: use heuristic based on magnitude
-        // If extent > 360, assume it's in meters/similar units
-        // Likely meters - use Web Mercator conversion as approximation
-        var _WEB_MERCATOR_MAX = 20037508.34;
-        extentDeg = bboxExtent * 180 / _WEB_MERCATOR_MAX;
-      } else {
-        // Likely already in degrees or degree-like units
-        extentDeg = bboxExtent;
-      }
-      minClickedSeparationDeg = Math.max(MIN_CLICKED_SEPARATION_DEG, extentDeg / ASSUMED_MAP_WIDTH_PIXELS * MARKER_DIAMETER_PIXELS);
-    }
-    var clickedLon = targetLocation[0],
-      clickedLat = targetLocation[1];
-    // Place markers at their true geographic positions with two adjustments:
-    // 1. Offset if multiple sources share the same grid point
-    // 2. Push away from clicked marker if too close (zoom-dependent)
+    // Place markers at their true geographic positions.
+    // The only adjustment is a small fixed offset when multiple sources share the same grid point.
     return gridPoints.map(function (item) {
       var source = item.source,
         sourceIndex = item.sourceIndex,
         gridPoint = item.gridPoint;
       var baseLon = gridPoint[0],
         baseLat = gridPoint[1];
-      // Step 1: Handle source overlap (multiple sources at same grid position)
       var key = baseLon.toFixed(6) + "," + baseLat.toFixed(6);
       var group = positionGroups.get(key) || [];
       var lon = baseLon;
       var lat = baseLat;
       if (group.length > 1) {
         // Multiple sources share this grid point - offset in circle around it
-        // Direction is based on index (arbitrary but consistent)
         var indexInGroup = group.findIndex(function (gr) {
           return gr.sourceIndex === sourceIndex;
         });
@@ -6567,25 +6610,6 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         lon = baseLon + SOURCE_OVERLAP_OFFSET_DEG * Math.cos(offsetAngle);
         lat = baseLat + SOURCE_OVERLAP_OFFSET_DEG * Math.sin(offsetAngle);
       }
-      // Step 2: Check overlap with clicked marker
-      // Account for longitude convergence at higher latitudes (1° lon = cos(lat) * 1° lat in distance)
-      var meanLat = (lat + clickedLat) / 2;
-      var cosLat = Math.cos(meanLat * Math.PI / 180);
-      var deltaLon = lon - clickedLon;
-      var deltaLat = lat - clickedLat;
-      // Scale longitude difference by cos(lat) for accurate distance
-      var scaledDeltaLon = deltaLon * cosLat;
-      var distanceToClicked = Math.sqrt(scaledDeltaLon * scaledDeltaLon + deltaLat * deltaLat);
-      if (distanceToClicked < minClickedSeparationDeg) {
-        // Too close to clicked marker - push outward preserving direction
-        // Direction is from clicked point to marker's current position (in scaled coordinates)
-        var directionAngle = distanceToClicked > 0.0001 ? Math.atan2(deltaLat, scaledDeltaLon) :
-        // If exactly on clicked point, use direction to original grid point
-        Math.atan2(baseLat - clickedLat, (baseLon - clickedLon) * cosLat);
-        // When applying offset, divide lon component by cos(lat) to get correct degree offset
-        lon = clickedLon + minClickedSeparationDeg * Math.cos(directionAngle) / cosLat;
-        lat = clickedLat + minClickedSeparationDeg * Math.sin(directionAngle);
-      }
       return {
         type: 'Feature',
         geometry: {
@@ -6602,7 +6626,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         }
       };
     });
-  }, [isFreePositionClick, targetLocation, gridPointData, sourceSelections, shouldHideLocationMarkers, mapBbox, mapSrs]);
+  }, [isFreePositionClick, targetLocation, gridPointData, sourceSelections, shouldHideLocationMarkers]);
   // Combine location features with grid point features for dispatch to map
   var combinedGeoJson = useMemo(function () {
     if (gridPointFeatures.length === 0) {
@@ -6646,7 +6670,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     var allNearestFeatures = [];
     sourceSelections.forEach(function (source) {
       if (source.collectionId && targetLocation) {
-        var _sourceData$features, _positionQuerySupport;
+        var _sourceData$features, _positionQuerySupport, _radiusQuerySupportBy, _gridPointData$source;
         // Get features owned by this source
         var sourceData = locationData == null ? void 0 : locationData.find(function (service) {
           return service.id === source.collectionId;
@@ -6665,17 +6689,29 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         // Detect if user clicked directly on a location marker owned by this source
         // A direct click means selectedFeature has an id that matches a feature owned by this source
         var isDirectClickOnOwnedMarker = !!(currentSelectedFeature != null && currentSelectedFeature.id) && (nearestOwnedFeature == null ? void 0 : nearestOwnedFeature.id) === (currentSelectedFeature == null ? void 0 : currentSelectedFeature.id);
+        // When clicking a free position, snap to the nearest grid point from the radius query
+        // so the sounding data comes from an actual model grid point rather than an arbitrary coordinate.
+        var supportsRadius = (_radiusQuerySupportBy = radiusQuerySupportBySource[source.collectionId]) != null ? _radiusQuerySupportBy : false;
+        var isGridPointMarkerClick = typeof (currentMapPin == null ? void 0 : currentMapPin.id) === 'string' && currentMapPin.id.startsWith('grid-point-');
+        var isLocalFreePositionClick = !(currentSelectedFeature != null && currentSelectedFeature.id) || isGridPointMarkerClick;
+        var gridPoint = isLocalFreePositionClick && supportsRadius ? gridPointData == null || (_gridPointData$source = gridPointData[source.collectionId]) == null ? void 0 : _gridPointData$source.gridPoint : undefined;
+        var radiusPending = isLocalFreePositionClick && supportsRadius && !(gridPointData != null && gridPointData[source.collectionId]);
         // Determine the location to use:
         // 1. If user clicked directly on a marker owned by this source: use that marker's ID (location query)
-        // 2. If position query is supported AND not a direct click: use exact clicked coordinates (position query)
+        // 2. If position query is supported AND not a direct click: use nearest grid point coordinates
+        //    if available (from radius query), otherwise fall back to exact clicked coordinates
         // 3. If position query is NOT supported: fall back to nearest location marker (location query)
         var newLocation = locationSelectionsRef.current[source.collectionId];
         if (isDirectClickOnOwnedMarker && nearestOwnedFeature) {
           // Direct click on marker - use location query with marker ID
           newLocation = nearestOwnedFeature.id;
         } else if (supportsPosition && targetLocation) {
-          // Use position query with exact coordinates
-          newLocation = targetLocation;
+          if (radiusPending) {
+            // Radius query in flight — defer until gridPointData arrives
+            return;
+          }
+          // Snap to nearest grid point when available, otherwise use exact clicked coordinates
+          newLocation = gridPoint != null ? gridPoint : targetLocation;
         } else if (nearestOwnedFeature) {
           // Fall back to location query with nearest marker
           newLocation = nearestOwnedFeature.id;
@@ -6716,7 +6752,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
       isProcessingLocationUpdateRef.current = false;
     }, 0);
     // Note: selectedFeature and selectedMapPin are read from refs to avoid dependency cycles
-  }, [dispatch, locationData, positionQuerySupportBySource, targetLocation, sourceSelections, viewId, updateHighlightedFeaturesBySource]);
+  }, [dispatch, locationData, positionQuerySupportBySource, radiusQuerySupportBySource, gridPointData, targetLocation, sourceSelections, viewId, updateHighlightedFeaturesBySource]);
   // Effect 2 was removed - it was redundant with effect 1 which handles all cases
   // (with or without selectedFeature, falls back to targetLocation if no nearby feature)
   useEffect(function () {
@@ -6759,7 +6795,8 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         return;
       }
       if (typeof selectedLocation === 'string') {
-        var foundFeature = serviceData.features.find(function (feature) {
+        var _serviceData$features;
+        var foundFeature = (_serviceData$features = serviceData.features) == null ? void 0 : _serviceData$features.find(function (feature) {
           return feature.id === selectedLocation;
         });
         if ((foundFeature == null ? void 0 : foundFeature.geometry.type) === 'Point') {
@@ -6796,29 +6833,35 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
             });
           }
           if (featureNeedsUpdate) {
-            dispatch(genericActions.addFeatureSyncState({
-              panelId: viewId,
-              data: {
-                selectedFeatureId: selectedLocation
-              }
-            }));
+            ownedFeatureLayerIds.forEach(function (layerId) {
+              dispatch(layerActions.setSelectedFeatures({
+                layerId: layerId,
+                selectedFeatureIds: [selectedLocation]
+              }));
+            });
           }
         }
       } else if (Array.isArray(selectedLocation)) {
         var _lon = selectedLocation[0],
           _lat = selectedLocation[1];
         var _currentMapPin = selectedMapPinRef.current;
-        var needsUpdate = (_currentMapPin == null ? void 0 : _currentMapPin.lon) !== _lon || (_currentMapPin == null ? void 0 : _currentMapPin.lat) !== _lat;
-        if (needsUpdate) {
-          selectedMapIds.forEach(function (mapId) {
-            dispatch(mapActions.setMapPinLocation({
-              mapId: mapId,
-              mapPinLocation: {
-                lon: _lon,
-                lat: _lat
-              }
-            }));
-          });
+        // When locationSelections was snapped to a grid point (differs from the clicked
+        // position), keep the map pin at the clicked position so targetLocation stays at the
+        // click and the legend can compute a meaningful distance to the data origin.
+        var isGridPointSnap = targetLocationRef.current !== undefined && !isEqual(selectedLocation, targetLocationRef.current);
+        if (!isGridPointSnap) {
+          var needsUpdate = (_currentMapPin == null ? void 0 : _currentMapPin.lon) !== _lon || (_currentMapPin == null ? void 0 : _currentMapPin.lat) !== _lat;
+          if (needsUpdate) {
+            selectedMapIds.forEach(function (mapId) {
+              dispatch(mapActions.setMapPinLocation({
+                mapId: mapId,
+                mapPinLocation: {
+                  lon: _lon,
+                  lat: _lat
+                }
+              }));
+            });
+          }
         }
       }
     });
@@ -6826,7 +6869,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
     setTimeout(function () {
       isProcessingLocationUpdateRef.current = false;
     }, 0);
-  }, [locationData, locationSelections, sourceSelections, selectedMapIds, dispatch, viewId, updateHighlightedFeaturesBySource
+  }, [locationData, locationSelections, sourceSelections, selectedMapIds, ownedFeatureLayerIds, dispatch, viewId, updateHighlightedFeaturesBySource
   // Note: highlightedFeaturesBySource intentionally excluded - we use highlightedFeaturesBySourceRef.current
   // inside this effect, and including the state would cause infinite loops since we call
   // updateHighlightedFeaturesBySource within the effect
@@ -6875,7 +6918,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
         backgroundColor: 'geowebColors.background.surfaceApp',
         position: 'relative',
         containerType: 'inline-size',
-        containerName: 'soundings-container'
+        containerName: SOUNDINGS_CONTAINER_NAME
       },
       children: [jsx(Box, {
         sx: {
@@ -6981,6 +7024,7 @@ var SoundingsConnect = function SoundingsConnect(_ref) {
   });
 };
 
+var defaultInstanceId = 'latest-0';
 var extractVerticalRange = function extractVerticalRange(collection, selectedInstanceId) {
   return getVerticalRangeFromInstance(collection.instances.find(function (instance) {
     return instance.id === selectedInstanceId;
@@ -7007,7 +7051,11 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
     order = _ref$order === void 0 ? 0 : _ref$order,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    error = _ref.error;
+    error = _ref.error,
+    _ref$startSize = _ref.startSize,
+    startSize = _ref$startSize === void 0 ? {
+      width: 320
+    } : _ref$startSize;
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
   return jsxs(ToolContainerDraggable, {
@@ -7022,9 +7070,7 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
       top: 40,
       left: 50
     },
-    startSize: {
-      width: 320
-    },
+    startSize: startSize,
     title: t('sources'),
     children: [!!isLoading && jsx(LinearProgress, {
       sx: {
@@ -7039,14 +7085,16 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
         pr: 1
       },
       children: soundingsCollections && soundingsCollections.length > 0 ? soundingsCollections.map(function (collection) {
-        var _collection$instances;
         var _ref2 = sourceSelections[collection.id] || {},
           isChecked = _ref2.isChecked,
           instanceId = _ref2.instanceId,
           url = _ref2.url;
         var sourceUrl = url || collection.url;
         var hasInstances = collection.instances.length > 0;
-        var selectedInstanceId = instanceId || ((_collection$instances = collection.instances[0]) == null ? void 0 : _collection$instances.id) || undefined;
+        var selectedInstanceId = hasInstances ? instanceId || defaultInstanceId : undefined;
+        var hasNonExistingInstanceId = selectedInstanceId && !referenceTimeUtils.isRelativeReferenceTime(selectedInstanceId) && !collection.instances.some(function (instance) {
+          return instance.id === selectedInstanceId;
+        });
         return jsxs(ListItem, {
           disablePadding: true,
           children: [jsx(ListItemIcon, {
@@ -7066,7 +7114,7 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
                 });
               }
             })
-          }), jsxs(StyledSelect, {
+          }), jsxs(TooltipSelect, {
             additionalStyling: {
               width: 'calc(100% - 42px)'
             },
@@ -7081,31 +7129,54 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
               });
             },
             renderValue: function renderValue(value) {
-              return jsx(Box, {
+              return jsxs(Box, {
                 sx: {
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden'
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  gap: 1
                 },
-                children: jsxs(Box, {
+                children: [jsx(Box, {
+                  sx: {
+                    flex: '4 1 0',
+                    minWidth: 0,
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap'
+                  },
+                  children: collection.name
+                }), jsxs(Box, {
                   sx: {
-                    display: 'flex'
+                    flex: '1 1 0',
+                    minWidth: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 0.5
                   },
                   children: [jsx(Box, {
                     sx: {
-                      minWidth: 200
-                    },
-                    children: collection.name
-                  }), jsx(Box, {
-                    sx: {
+                      minWidth: 0,
                       textOverflow: 'ellipsis',
-                      overflow: 'hidden'
+                      overflow: 'hidden',
+                      whiteSpace: 'nowrap'
                     },
                     children: getSelectedDisplayValue(value)
-                  })]
-                })
+                  }), hasNonExistingInstanceId ? jsx(Box, {
+                    sx: {
+                      '& .MuiSvgIcon-root': {
+                        fill: 'currentcolor!important'
+                      }
+                    },
+                    children: jsx(AlertIcon, {
+                      severity: "error"
+                    })
+                  }) : null]
+                })]
               });
             },
             skipLocalStyling: false,
+            tooltip: collection.name + ": " + getSelectedDisplayValue(selectedInstanceId || t('noInstancesAvailable')),
             value: selectedInstanceId || t('noInstancesAvailable'),
             children: [!hasInstances && jsx(MenuItem, {
               disabled: true,
@@ -7120,10 +7191,12 @@ var SoundingsSourceMenu = function SoundingsSourceMenu(_ref) {
                 value: option.token,
                 children: option.label
               }, option.token);
-            }), collection.instances.map(function (instance) {
-              return jsx(MenuItem, {
+            }), referenceTimeUtils.extendCollectionInstances(collection.instances, selectedInstanceId).map(function (instance, currentIndex) {
+              return jsxs(MenuItem, {
                 value: instance.id,
-                children: getDisplayValue(instance.id)
+                children: [getDisplayValue(instance.id), currentIndex === collection.instances.length && jsx(AlertIcon, {
+                  severity: "error"
+                })]
               }, instance.id);
             })]
           })]
@@ -7267,6 +7340,7 @@ var LocationsMenu = function LocationsMenu(_ref2) {
     setSearchFilter = _useState[1];
   var _useSoundingsTranslat = useSoundingsTranslation(),
     t = _useSoundingsTranslat.t;
+  var listContainerRef = useRef(null);
   var filteredResults = useMemo(function () {
     return services == null ? void 0 : services.map(function (service) {
       var filteredFeatures = service.features ? service.features.filter(function (feature) {
@@ -7278,6 +7352,7 @@ var LocationsMenu = function LocationsMenu(_ref2) {
       });
     });
   }, [services, searchFilter]);
+  var heightObserver = useResizeObserver(listContainerRef, filteredResults);
   var isChecked = function isChecked(sourceId, locationId) {
     return selectedLocations[sourceId] === locationId;
   };
@@ -7310,58 +7385,65 @@ var LocationsMenu = function LocationsMenu(_ref2) {
         margin: 1
       },
       children: t('locations-menu-warning')
-    }) : jsxs(Grid, {
-      container: true,
-      children: [jsx(Box, {
-        sx: {
-          width: '100%',
-          padding: 1,
-          position: 'sticky',
-          top: 0,
-          zIndex: 1,
-          backgroundColor: 'geowebColors.background.surfaceApp'
-        },
-        children: jsx(SearchField, {
-          searchFilter: searchFilter,
-          setSearchFilter: setSearchFilter,
-          small: true
-        })
-      }), filteredResults.map(function (service) {
-        return jsx(Fragment$1, {
-          children: jsx(CustomAccordion, {
-            amountOfItems: service.features.length,
-            defaultExpanded: false,
-            sx: {
-              width: '100%',
-              margin: '0 8px 2px 8px',
-              '.MuiAccordionDetails-root': {
-                padding: 0
-              },
-              '.MuiAccordionSummary-root': {
-                minHeight: '40px'
-              },
-              '.MuiAccordionSummary-content': {
-                paddingLeft: 3
-              }
-            },
-            title: service.name,
-            children: jsx(List, {
-              rowComponent: RowComponent,
-              rowCount: service.features.length,
-              rowHeight: 40,
-              rowProps: {
-                service: service,
-                isChecked: isChecked,
-                updateSelectedLocation: updateSelectedLocation
+    }) : jsx(Box, {
+      ref: listContainerRef,
+      sx: {
+        width: '100%',
+        height: '100%'
+      },
+      children: jsxs(Grid, {
+        container: true,
+        children: [jsx(Box, {
+          sx: {
+            width: '100%',
+            padding: 1,
+            position: 'sticky',
+            top: 0,
+            zIndex: 1,
+            backgroundColor: 'geowebColors.background.surfaceApp'
+          },
+          children: jsx(SearchField, {
+            searchFilter: searchFilter,
+            setSearchFilter: setSearchFilter,
+            small: true
+          })
+        }), filteredResults.map(function (service) {
+          return jsx(Fragment$1, {
+            children: jsx(CustomAccordion, {
+              amountOfItems: service.features.length,
+              defaultExpanded: false,
+              sx: {
+                width: '100%',
+                margin: '0 8px 2px 8px',
+                '.MuiAccordionDetails-root': {
+                  padding: 0
+                },
+                '.MuiAccordionSummary-root': {
+                  minHeight: '40px'
+                },
+                '.MuiAccordionSummary-content': {
+                  paddingLeft: 3
+                }
               },
-              style: {
-                height: 320,
-                width: '100%'
-              }
+              title: service.name,
+              children: jsx(List, {
+                rowComponent: RowComponent,
+                rowCount: service.features.length,
+                rowHeight: 40,
+                rowProps: {
+                  service: service,
+                  isChecked: isChecked,
+                  updateSelectedLocation: updateSelectedLocation
+                },
+                style: {
+                  height: heightObserver,
+                  width: '100%'
+                }
+              })
             })
-          })
-        }, service.id);
-      })]
+          }, service.id);
+        })]
+      })
     })]
   });
 };
@@ -7401,10 +7483,10 @@ var LocationsMenuConnect = function LocationsMenuConnect(_ref) {
       dispatch(soundingsActions.setSoundingsCollections(soundingsCollections));
     }
   }, [dispatch, soundingsCollections]);
-  var _useGetCollectionLoca = useGetCollectionLocations(collections, isDialogOpen),
-    data = _useGetCollectionLoca.data,
-    isPending = _useGetCollectionLoca.isPending,
-    error = _useGetCollectionLoca.error;
+  var _useGetLocations = useGetLocations(collections, isDialogOpen),
+    data = _useGetLocations.data,
+    isPending = _useGetLocations.isPending,
+    error = _useGetLocations.error;
   var services = useMemo(function () {
     return (data == null ? void 0 : data.filter(function (service) {
       return selectedSourceIds.includes(service.id);