@opengeoweb/time-series 19.2.0 → 19.4.0

package/dist/index.esm.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { CustomIconButton, dateUtils, TooltipSelect, referenceTimeUtils, CustomAccordion, CustomTooltip, CustomToggleButton, ToolContainerDraggable, ToggleMenu, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, useResizeObserver } from '@opengeoweb/shared';
+import { CustomIconButton, dateUtils, TooltipSelect, referenceTimeUtils, CustomAccordion, CustomTooltip, CustomToggleButton, ToolContainerDraggable, ToggleMenu, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, LegendToggleButton, useResizeObserver } from '@opengeoweb/shared';
 import { snackbarActions, snackbarTypes, snackbarListener, snackbarReducer } from '@opengeoweb/snackbar';
 import { mapUtils, selectorMemoizationOptions, genericSelectors, uiSelectors, uiTypes, uiActions, useSetupDialog, mapSelectors, mapListener, serviceListener, layersListener, syncGroupsListener, genericListener, openlayersListener, uiReducer, syncGroupsReducer, layerReducer, serviceReducer, mapReducer, loadingIndicatorActions, useRegisterFeatureSyncSource, useUpdateFeatureSyncLayers, useSyncgroupTimeState, mapActions, layerActions } from '@opengeoweb/store';
 import { useTheme, MenuItem, LinearProgress, Grid, Box, Typography, ClickAwayListener, Input, Collapse, Button, List, ListItem, ListItemText, InputAdornment, ListItemButton, styled, Card, Stack, Tooltip, ListItemIcon, Checkbox } from '@mui/material';
 import { isString, trim, trimStart, compact, chain, groupBy, countBy, sortBy, uniqBy, isEqual } from 'lodash';
 import { ReactSortable } from 'react-sortablejs';
-import { Info, ArrowDropDownDown, Copy, Delete, Visibility, VisibilityOff, TimeSeriesSelect as TimeSeriesSelect$1, DragHandle, ChevronUp, ChevronDown, Add, DimensionsTime, DrawRegion, Cached, Edit, useThemeContext, EChartsDarkTheme, EChartsLightTheme, Layers, Location, LockLocked, LockUnlocked, Menu } from '@opengeoweb/theme';
+import { Info, ArrowDropDownDown, Copy, Delete, Visibility, VisibilityOff, TimeSeriesSelect as TimeSeriesSelect$1, DragHandle, ChevronUp, ChevronDown, Add, DimensionsTime, DrawRegion, Cached, Edit, Location, useThemeContext, EChartsDarkTheme, EChartsLightTheme, Layers, LockLocked, LockUnlocked } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import '@opengeoweb/core';
@@ -2582,7 +2582,8 @@ var createGeoJsonArrays = function createGeoJsonArrays(locations, services, hide
       });
       return acc;
     }, initialAccumulator),
-    obj = _locations$reduce.obj;
+    obj = _locations$reduce.obj,
+    collectionMap = _locations$reduce.collectionMap;
   var combinedGeoJson = {
     type: 'FeatureCollection',
     features: Object.keys(obj).map(function (key) {
@@ -2601,7 +2602,8 @@ var createGeoJsonArrays = function createGeoJsonArrays(locations, services, hide
     })
   };
   return {
-    combinedGeoJson: combinedGeoJson
+    combinedGeoJson: combinedGeoJson,
+    splitGeoJsonByCollection: Object.values(collectionMap)
   };
 };
 var getNearbyLocation = function getNearbyLocation(parameter, service, selectedLocation, geojsonMap) {
@@ -6797,6 +6799,27 @@ var createMockStore = function createMockStore(mockState) {
   });
 };
 
+/* *
+ * 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)
+ * */
+var TIME_SERIES_CONTAINER_BREAKPOINT_PX = '720px';
+var TIME_SERIES_CONTAINER_NAME = 'time-series-container';
+
+var _styled;
 var _excluded$1 = ["icon", "shortText", "longText"];
 var TimeSeriesTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
@@ -6815,30 +6838,27 @@ var TimeSeriesTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_re
     })]
   }));
 });
-var TimeSeriesTopRowButton = styled(TimeSeriesTopRowButtonUnstyled)({
-  height: '10px !important',
-  '@container time-series-container (width < 720px)': {
-    maxWidth: '90px',
-    '& .longText': {
-      display: 'none'
-    },
-    '& svg': {
-      marginRight: '0 !important'
-    }
-  },
-  '@container time-series-container (width >= 720px)': {
-    width: '130px',
-    '& .shortText': {
-      display: 'none'
-    }
+var TimeSeriesTopRowButton = styled(TimeSeriesTopRowButtonUnstyled)((_styled = {
+  height: '10px !important'
+}, _styled["@container " + TIME_SERIES_CONTAINER_NAME + " (width < " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+  maxWidth: '90px',
+  '& .longText': {
+    display: 'none'
   },
-  '& span': {
-    fontSize: '9pt',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden'
+  '& svg': {
+    marginRight: '0 !important'
   }
-});
+}, _styled["@container " + TIME_SERIES_CONTAINER_NAME + " (min-width: " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+  width: '130px',
+  '& .shortText': {
+    display: 'none'
+  }
+}, _styled['& span'] = {
+  fontSize: '9pt',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+}, _styled));
 
 var LocationInfoButtonConnect = function LocationInfoButtonConnect(_ref) {
   var panelId = _ref.panelId,
@@ -6873,13 +6893,78 @@ var LocationInfoButtonConnect = function LocationInfoButtonConnect(_ref) {
   });
 };
 
+var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
+  var _timeSeriesLocation$o, _sx;
+  var panelId = _ref.panelId;
+  var dispatch = useDispatch();
+  var _useTimeseriesTransla = useTimeseriesTranslation(),
+    t = _useTimeseriesTransla.t;
+  var timeSeriesLocation = useSelector(function (state) {
+    return getCurrentLocation(state, panelId);
+  });
+  var currentSourcePanelId = useSelector(function (store) {
+    return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeseriesLocations);
+  });
+  var isLocationsDialogOpen = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.TimeseriesLocations);
+  });
+  var isMapPinDisabled = useSelector(function (state) {
+    return getIsMapPinDisabled(state, panelId);
+  });
+  var isLocationsDialogOpenRef = React.useRef(isLocationsDialogOpen);
+  var currentSourcePanelIdRef = React.useRef(currentSourcePanelId);
+  React.useEffect(function () {
+    isLocationsDialogOpenRef.current = isLocationsDialogOpen;
+    currentSourcePanelIdRef.current = currentSourcePanelId;
+  }, [isLocationsDialogOpen, currentSourcePanelId]);
+  var selectedLocationName = typeof (timeSeriesLocation == null || (_timeSeriesLocation$o = timeSeriesLocation.occurrences) == null || (_timeSeriesLocation$o = _timeSeriesLocation$o[0]) == null || (_timeSeriesLocation$o = _timeSeriesLocation$o.properties) == null ? void 0 : _timeSeriesLocation$o.name) === 'string' ? timeSeriesLocation.occurrences[0].properties.name : '';
+  var toggleLocationsDialog = function toggleLocationsDialog() {
+    dispatch(uiActions.setToggleOpenDialog({
+      type: uiTypes.DialogTypes.TimeseriesLocations,
+      setOpen: currentSourcePanelId !== panelId ? true : !isLocationsDialogOpen,
+      sourcePanelId: panelId
+    }));
+  };
+  React.useEffect(function () {
+    return function () {
+      if (isLocationsDialogOpenRef.current && currentSourcePanelIdRef.current === panelId) {
+        dispatch(uiActions.setToggleOpenDialog({
+          setOpen: false,
+          type: uiTypes.DialogTypes.TimeseriesLocations,
+          sourcePanelId: panelId
+        }));
+      }
+    };
+  }, [dispatch, panelId]);
+  return jsx(CustomTooltip, {
+    title: selectedLocationName || t('timeseries-select-location'),
+    children: jsx("span", {
+      children: jsx(TimeSeriesTopRowButton, {
+        "aria-label": t('timeseries-location'),
+        "data-testid": "locationSelectButton",
+        disabled: isMapPinDisabled,
+        icon: jsx(Location, {
+          sx: (_sx = {}, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (width < " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+            display: 'none'
+          }, _sx)
+        }),
+        longText: selectedLocationName || t('timeseries-location'),
+        onClick: toggleLocationsDialog,
+        selected: isLocationsDialogOpen ? currentSourcePanelId === panelId : null,
+        shortText: selectedLocationName || t('timeseries-location')
+      })
+    })
+  });
+};
+
 var TimeSeriesMarkersSwitch = function TimeSeriesMarkersSwitch(_ref) {
+  var _sx;
   var shouldHideMarkers = _ref.shouldHideMarkers,
     toggleMarkers = _ref.toggleMarkers;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
   return jsxs(Box, {
-    sx: {
+    sx: (_sx = {
       display: 'flex',
       flexWrap: 'wrap',
       alignItems: 'flex-start',
@@ -6895,14 +6980,13 @@ var TimeSeriesMarkersSwitch = function TimeSeriesMarkersSwitch(_ref) {
       },
       '.markers-label': {
         display: 'none'
-      },
-      '@container time-series-container (min-width: 720px)': {
-        minWidth: '146px',
-        '.markers-label, .switch-button label': {
-          display: 'initial'
-        }
       }
-    },
+    }, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (min-width: " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+      minWidth: '146px',
+      '.markers-label, .switch-button label': {
+        display: 'initial'
+      }
+    }, _sx),
     children: [jsx(Typography, {
       className: "markers-label",
       sx: {
@@ -7825,6 +7909,109 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
   return samePreset && sameLocation && sameGeoJson && sameLegend && sameServices && sameTime;
 });
 
+/* *
+ * 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)
+ * */
+var getUniqueServicesFromPreset = function getUniqueServicesFromPreset(parameters, services) {
+  if (!parameters.length || !services.length) {
+    return [];
+  }
+  var options = parameters.map(function (_ref) {
+    var serviceId = _ref.serviceId,
+      collectionId = _ref.collectionId;
+    var service = services.find(function (item) {
+      return item.id === serviceId;
+    });
+    return service ? {
+      service: service,
+      collectionId: collectionId
+    } : null;
+  }).filter(function (item) {
+    return item !== null;
+  });
+  return options.filter(function (current, index, array) {
+    return index === array.findIndex(function (item) {
+      return item.service.id === current.service.id && item.collectionId === current.collectionId;
+    });
+  });
+};
+var useTimeSeriesLocations = function useTimeSeriesLocations(panelId) {
+  var _linkedMapIds$;
+  var services = useSelector(function (state) {
+    return getServices(state);
+  });
+  var shouldHideLocationMarkers = useSelector(function (state) {
+    return getShouldHideLocationMarkers(state, panelId);
+  });
+  var plotPresetState = useSelector(function (state) {
+    return getPlotState(state, panelId);
+  });
+  var linkedMapIds = useSelector(function (state) {
+    return genericSelectors.getLinkedTargetIds(state, panelId);
+  });
+  var panelMapId = (_linkedMapIds$ = linkedMapIds == null ? void 0 : linkedMapIds[0]) != null ? _linkedMapIds$ : plotPresetState == null ? void 0 : plotPresetState.mapId;
+  var selectedFeatureFromPanel = useSelector(function (state) {
+    return genericSelectors.getSelectedFeature(state, panelId);
+  });
+  var selectedFeatureFromMap = useSelector(function (state) {
+    return panelMapId ? genericSelectors.getSelectedFeature(state, panelMapId) : null;
+  });
+  var selectedFeature = selectedFeatureFromPanel != null ? selectedFeatureFromPanel : selectedFeatureFromMap;
+  var memoizedSelectedFeature = React.useMemo(function () {
+    if (!selectedFeature) {
+      return null;
+    }
+    return {
+      lat: selectedFeature.lat,
+      lon: selectedFeature.lon,
+      id: selectedFeature.id,
+      occurrences: selectedFeature.occurrences
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedFeature == null ? void 0 : selectedFeature.lat, selectedFeature == null ? void 0 : selectedFeature.lon]);
+  var parameters = React.useMemo(function () {
+    return (plotPresetState == null ? void 0 : plotPresetState.parameters) || [];
+  }, [plotPresetState == null ? void 0 : plotPresetState.parameters]);
+  var stableServices = React.useMemo(function () {
+    return services || [];
+  }, [services]);
+  var serviceListForLocations = React.useMemo(function () {
+    return getUniqueServicesFromPreset(parameters, stableServices);
+  }, [parameters, stableServices]);
+  var _useGetLocations = useGetLocations(serviceListForLocations),
+    locationsData = _useGetLocations.data,
+    isLocationsFetching = _useGetLocations.isFetching;
+  var locationsGeoJson = React.useMemo(function () {
+    return stableServices.length ? createGeoJsonArrays(locationsData, stableServices, shouldHideLocationMarkers, memoizedSelectedFeature) : {
+      combinedGeoJson: {
+        type: 'FeatureCollection',
+        features: []
+      },
+      splitGeoJsonByCollection: []
+    };
+  }, [locationsData, memoizedSelectedFeature, shouldHideLocationMarkers, stableServices]);
+  return {
+    combinedGeoJson: locationsGeoJson.combinedGeoJson,
+    isLocationsFetching: isLocationsFetching,
+    serviceListForLocations: serviceListForLocations,
+    splitGeoJsonByCollection: locationsGeoJson.splitGeoJsonByCollection
+  };
+};
+
 var TOOLTIP_TITLE = 'Timeseries Manager';
 var TimeSeriesManagerMapButtonConnect = function TimeSeriesManagerMapButtonConnect(_ref) {
   var viewId = _ref.viewId;
@@ -7860,102 +8047,9 @@ var TimeSeriesManagerMapButtonConnect = function TimeSeriesManagerMapButtonConne
   });
 };
 
-var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
-  var _timeSeriesLocation$o;
+var useMapPin = function useMapPin(_ref) {
   var panelId = _ref.panelId;
   var dispatch = useDispatch();
-  var _useTimeseriesTransla = useTimeseriesTranslation(),
-    t = _useTimeseriesTransla.t;
-  var timeSeriesLocation = useSelector(function (state) {
-    return getCurrentLocation(state, panelId);
-  });
-  var currentSourcePanelId = useSelector(function (store) {
-    return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeseriesLocations);
-  });
-  var isLocationsDialogOpen = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.TimeseriesLocations);
-  });
-  var isMapPinDisabled = useSelector(function (state) {
-    return getIsMapPinDisabled(state, panelId);
-  });
-  var isLocationsDialogOpenRef = React.useRef(isLocationsDialogOpen);
-  var currentSourcePanelIdRef = React.useRef(currentSourcePanelId);
-  React.useEffect(function () {
-    isLocationsDialogOpenRef.current = isLocationsDialogOpen;
-    currentSourcePanelIdRef.current = currentSourcePanelId;
-  }, [isLocationsDialogOpen, currentSourcePanelId]);
-  var selectedLocationName = typeof (timeSeriesLocation == null || (_timeSeriesLocation$o = timeSeriesLocation.occurrences) == null || (_timeSeriesLocation$o = _timeSeriesLocation$o[0]) == null || (_timeSeriesLocation$o = _timeSeriesLocation$o.properties) == null ? void 0 : _timeSeriesLocation$o.name) === 'string' ? timeSeriesLocation.occurrences[0].properties.name : '';
-  var toggleLocationsDialog = function toggleLocationsDialog() {
-    dispatch(uiActions.setToggleOpenDialog({
-      type: uiTypes.DialogTypes.TimeseriesLocations,
-      setOpen: currentSourcePanelId !== panelId ? true : !isLocationsDialogOpen,
-      sourcePanelId: panelId
-    }));
-  };
-  React.useEffect(function () {
-    return function () {
-      if (isLocationsDialogOpenRef.current && currentSourcePanelIdRef.current === panelId) {
-        dispatch(uiActions.setToggleOpenDialog({
-          setOpen: false,
-          type: uiTypes.DialogTypes.TimeseriesLocations,
-          sourcePanelId: panelId
-        }));
-      }
-    };
-  }, [dispatch, panelId]);
-  return jsx(CustomTooltip, {
-    title: selectedLocationName || t('timeseries-select-location'),
-    children: jsx("span", {
-      children: jsx(TimeSeriesTopRowButton, {
-        "aria-label": t('timeseries-location'),
-        "data-testid": "locationSelectButton",
-        disabled: isMapPinDisabled,
-        icon: jsx(Location, {
-          sx: {
-            '@container time-series-container (width < 720px)': {
-              display: 'none'
-            }
-          }
-        }),
-        longText: selectedLocationName || t('timeseries-location'),
-        onClick: toggleLocationsDialog,
-        selected: isLocationsDialogOpen ? currentSourcePanelId === panelId : null,
-        shortText: selectedLocationName || t('timeseries-location')
-      })
-    })
-  });
-};
-
-var getUniqueServicesFromPreset = function getUniqueServicesFromPreset(parameters, services) {
-  if (!parameters.length || !services.length) {
-    return [];
-  }
-  var options = parameters.map(function (_ref) {
-    var serviceId = _ref.serviceId,
-      collectionId = _ref.collectionId;
-    var service = services.find(function (item) {
-      return item.id === serviceId;
-    });
-    return service ? {
-      service: service,
-      collectionId: collectionId
-    } : null;
-  })
-  // Filter out null values
-  .filter(function (item) {
-    return item !== null;
-  });
-  // Remove duplicates
-  var uniqueOptions = options.filter(function (current, index, array) {
-    return index === array.findIndex(function (item) {
-      return item.service.id === current.service.id && item.collectionId === current.collectionId;
-    });
-  });
-  return uniqueOptions;
-};
-var useMapPin = function useMapPin(_ref2) {
-  var panelId = _ref2.panelId;
-  var dispatch = useDispatch();
   var selectedMapIds = useSelector(function (state) {
     return genericSelectors.getLinkedTargetIds(state, panelId);
   });
@@ -7996,9 +8090,9 @@ var useMapPin = function useMapPin(_ref2) {
     isMapPinDisabled: isMapPinDisabled
   };
 };
-var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
-  var _linkedMapIds$;
-  var panelId = _ref3.panelId;
+var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
+  var _linkedMapIds$, _sx;
+  var panelId = _ref2.panelId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
@@ -8007,7 +8101,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
     return getIsLegendVisible(state, panelId);
   });
   var services = useSelector(function (state) {
-    return getServices(state);
+    return getServices(state) || [];
   });
   var shouldHideLocationMarkers = useSelector(function (state) {
     return getShouldHideLocationMarkers(state, panelId);
@@ -8037,13 +8131,6 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
     }),
     toggleDisableMapPin = _useMapPin.toggleDisableMapPin,
     isMapPinDisabled = _useMapPin.isMapPinDisabled;
-  var geoJSONWithService = useSelector(function (state) {
-    return getGeoJSONWithService(state, panelId);
-  });
-  var geojson = useSelector(function (state) {
-    var _genericSelectors$sel;
-    return (_genericSelectors$sel = genericSelectors.selectFeatureSyncLayersForPanel(state, panelId)[0]) == null ? void 0 : _genericSelectors$sel.geojson;
-  });
   var isLoading = useCallback(function (startOrFinish) {
     dispatch(loadingIndicatorActions.setEDRIsLoading({
       id: panelId,
@@ -8088,34 +8175,21 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
     }
   }, [panelMapId, selectedFeature, setTimeSeriesLocation, memoizedSelectedFeature, allMaps]);
   useRegisterFeatureSyncSource(panelId);
-  var parameters = useMemo(function () {
-    return (plotPresetState == null ? void 0 : plotPresetState.parameters) || [];
-  }, [plotPresetState == null ? void 0 : plotPresetState.parameters]);
-  var stableServices = useMemo(function () {
-    return services || [];
-  }, [services]);
-  var serviceListForLocations = useMemo(function () {
-    return getUniqueServicesFromPreset(parameters, stableServices);
-  }, [parameters, stableServices]);
-  var _useGetLocations = useGetLocations(serviceListForLocations),
-    locationsData = _useGetLocations.data,
-    isLocationsFetching = _useGetLocations.isFetching;
-  var combinedGeoJson = useMemo(function () {
-    return stableServices.length ? createGeoJsonArrays(locationsData, stableServices, shouldHideLocationMarkers, memoizedSelectedFeature).combinedGeoJson : {
-      type: 'FeatureCollection',
-      features: []
-    };
-  }, [locationsData, memoizedSelectedFeature, shouldHideLocationMarkers, stableServices]);
+  var _useTimeSeriesLocatio = useTimeSeriesLocations(panelId),
+    combinedGeoJson = _useTimeSeriesLocatio.combinedGeoJson,
+    isLocationsFetching = _useTimeSeriesLocatio.isLocationsFetching,
+    serviceListForLocations = _useTimeSeriesLocatio.serviceListForLocations,
+    splitGeoJsonByCollection = _useTimeSeriesLocatio.splitGeoJsonByCollection;
   var featureSyncLayersById = useMemo(function () {
-    var _ref4;
-    return stableServices.length ? (_ref4 = {}, _ref4[geojsonLayerId] = {
+    var _ref3;
+    return serviceListForLocations.length ? (_ref3 = {}, _ref3[geojsonLayerId] = {
       id: geojsonLayerId,
       geojson: consolidateFeatures([{
         id: 'combined-layer',
         geoJSON: combinedGeoJson
       }])
-    }, _ref4) : {};
-  }, [combinedGeoJson, geojsonLayerId, stableServices]);
+    }, _ref3) : {};
+  }, [combinedGeoJson, geojsonLayerId, serviceListForLocations.length]);
   useUpdateFeatureSyncLayers(featureSyncLayersById, panelId);
   /* Set the loading state based on the locations fetching status */
   useEffect(function () {
@@ -8123,12 +8197,12 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
   }, [isLoading, isLocationsFetching]);
   /* Create GeoJSON arrays and draw the geojson layer based on the locationsData */
   useEffect(function () {
-    if (stableServices.length) {
+    if (serviceListForLocations.length) {
       if (combinedGeoJson.features.length === 0) {
         setTimeSeriesLocation(undefined);
       }
     }
-  }, [combinedGeoJson.features.length, setTimeSeriesLocation, stableServices]);
+  }, [combinedGeoJson.features.length, serviceListForLocations.length, setTimeSeriesLocation]);
   var toggleLocationMarkers = function toggleLocationMarkers(shouldHide) {
     dispatch(timeSeriesActions.toggleLocationMarkers({
       panelId: panelId,
@@ -8156,7 +8230,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       height: '100%',
       backgroundColor: 'geowebColors.background.surfaceApp',
       containerType: 'inline-size',
-      containerName: 'time-series-container'
+      containerName: TIME_SERIES_CONTAINER_NAME
     },
     children: [jsxs(Stack, {
       direction: "row",
@@ -8168,7 +8242,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       },
       children: [jsx(TimeSeriesManagerMapButtonConnect, {
         viewId: panelId
-      }), !!geojson && jsx(LocationSelectButtonConnect, {
+      }), !!serviceListForLocations.length && jsx(LocationSelectButtonConnect, {
         panelId: panelId
       }), jsx(LocationInfoButtonConnect, {
         panelId: panelId,
@@ -8189,29 +8263,36 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       }), jsx(TimeSeriesMarkersSwitch, {
         shouldHideMarkers: shouldHideLocationMarkers,
         toggleMarkers: toggleLocationMarkers
-      }), jsx(CustomTooltip, {
-        title: shouldShowLegend ? t('timeseries-legend-tooltip-hide') : t('timeseries-legend-tooltip-show'),
-        children: jsx("span", {
-          children: jsx(TimeSeriesTopRowButton, {
-            icon: jsx(Menu, {}),
-            longText: t('timeseries-legend'),
-            onClick: toggleLegend,
-            selected: shouldShowLegend
-          })
-        })
+      }), jsx(LegendToggleButton, {
+        hideTooltipText: t('timeseries-legend-tooltip-hide'),
+        isLegendVisible: shouldShowLegend,
+        legendLabel: t('timeseries-legend'),
+        onToggle: toggleLegend,
+        showTooltipText: t('timeseries-legend-tooltip-show'),
+        sx: (_sx = {}, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (width < " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+          maxWidth: '90px',
+          '& .longText': {
+            display: 'none'
+          },
+          '& svg': {
+            marginRight: '0 !important'
+          }
+        }, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (min-width: " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+          width: '130px'
+        }, _sx)
       })]
     }), !!timeSeriesLocation && !!plotPresetState && jsx(Box, {
       sx: {
         overflow: 'auto'
       },
-      children: !!services && jsx(TimeSeriesView, {
+      children: !!plotPresetState && jsx(TimeSeriesView, {
         isLoading: isLoading,
         onToggleLegendParam: onToggleLegendParam,
         plotPreset: plotPresetState,
         selectedLocation: timeSeriesLocation,
         services: services,
         shouldShowLegend: shouldShowLegend,
-        splitGeoJsonByCollection: geoJSONWithService || [],
+        splitGeoJsonByCollection: splitGeoJsonByCollection,
         syncgroupTimeState: syncgroupTimeState
       })
     })]
@@ -8552,7 +8633,7 @@ var RowComponent = function RowComponent(_ref) {
       handleChange: handleChange,
       isDisabled: isDisabled,
       location: (_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name,
-      selectedLocation: selectedLocation
+      selectedLocation: selectedLocation != null ? selectedLocation : ''
     }, feature.id)
   });
 };
@@ -8633,44 +8714,18 @@ var FocusableListWrapper = function FocusableListWrapper(_ref2) {
     children: children
   });
 };
-var LocationDropdown = function LocationDropdown(_ref3) {
-  var _combinedSelectedLoca;
-  var geoJson = _ref3.geoJson,
-    splitGeoJson = _ref3.splitGeoJson,
-    handleChange = _ref3.handleChange,
-    selectedLocation = _ref3.selectedLocation,
-    _ref3$isDisabled = _ref3.isDisabled,
-    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
-    defaultExpanded = _ref3.defaultExpanded;
+var FocusableList = function FocusableList(_ref3) {
+  var rowCount = _ref3.rowCount,
+    rowHeight = _ref3.rowHeight,
+    rowProps = _ref3.rowProps,
+    style = _ref3.style;
   var listRef = useListRef(null);
-  var _React$useState2 = React.useState(''),
-    searchTerm = _React$useState2[0],
-    setSearchTerm = _React$useState2[1];
-  var combinedSelectedLocation = geoJson == null ? void 0 : geoJson.features.find(function (feature) {
-    var _feature$properties2;
-    return selectedLocation === ((_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.name);
-  });
-  var selectedLocationNames = combinedSelectedLocation ? Object.keys(combinedSelectedLocation == null || (_combinedSelectedLoca = combinedSelectedLocation.properties) == null ? void 0 : _combinedSelectedLoca.names) : [];
-  var filteredResults = useMemo(function () {
-    return splitGeoJson == null ? void 0 : splitGeoJson.map(function (dataset) {
-      var filteredFeatures = dataset.geoJson.features.filter(function (feature) {
-        var _feature$properties3;
-        return (_feature$properties3 = feature.properties) == null ? void 0 : _feature$properties3.name.toLowerCase().includes(searchTerm.toLowerCase());
-      });
-      return Object.assign({}, dataset, {
-        geoJson: Object.assign({}, dataset.geoJson, {
-          features: filteredFeatures
-        })
-      });
-    });
-  }, [searchTerm, splitGeoJson]);
-  var listContainerRef = React.useRef(null);
-  var heightObserver = useResizeObserver(listContainerRef, filteredResults);
   var handleKeyDown = function handleKeyDown(e) {
-    var _listContainerRef$cur, _listContainerRef$cur2;
+    var _listRef$current, _element$scrollTop;
     var lineHeight = 40;
-    var page = 8 * lineHeight; // or compute from measured height if you want
-    var next = (listContainerRef == null || (_listContainerRef$cur = listContainerRef.current) == null ? void 0 : _listContainerRef$cur.scrollTop) || 0;
+    var page = 8 * lineHeight;
+    var element = (_listRef$current = listRef.current) == null ? void 0 : _listRef$current.element;
+    var next = (_element$scrollTop = element == null ? void 0 : element.scrollTop) != null ? _element$scrollTop : 0;
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
@@ -8695,18 +8750,62 @@ var LocationDropdown = function LocationDropdown(_ref3) {
       default:
         return;
     }
-    listContainerRef == null || (_listContainerRef$cur2 = listContainerRef.current) == null || _listContainerRef$cur2.scrollTo({
+    element == null || element.scrollTo({
       top: Math.max(0, next),
       behavior: 'smooth'
     });
   };
+  return jsx(FocusableListWrapper, {
+    "aria-label": "Locations list",
+    onKeyDown: handleKeyDown,
+    children: jsx(List$1, {
+      listRef: listRef,
+      rowComponent: RowComponent,
+      rowCount: rowCount,
+      rowHeight: rowHeight,
+      rowProps: rowProps,
+      style: style
+    })
+  });
+};
+var LocationDropdown = function LocationDropdown(_ref4) {
+  var _combinedSelectedLoca;
+  var geoJson = _ref4.geoJson,
+    splitGeoJson = _ref4.splitGeoJson,
+    handleChange = _ref4.handleChange,
+    selectedLocation = _ref4.selectedLocation,
+    _ref4$isDisabled = _ref4.isDisabled,
+    isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
+    defaultExpanded = _ref4.defaultExpanded;
+  var _React$useState2 = React.useState(''),
+    searchTerm = _React$useState2[0],
+    setSearchTerm = _React$useState2[1];
+  var combinedSelectedLocation = geoJson == null ? void 0 : geoJson.features.find(function (feature) {
+    var _feature$properties2;
+    return selectedLocation === ((_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.name);
+  });
+  var selectedLocationNames = combinedSelectedLocation ? Object.keys(combinedSelectedLocation == null || (_combinedSelectedLoca = combinedSelectedLocation.properties) == null ? void 0 : _combinedSelectedLoca.names) : [];
+  var filteredResults = useMemo(function () {
+    return splitGeoJson == null ? void 0 : splitGeoJson.map(function (dataset) {
+      var filteredFeatures = dataset.geoJson.features.filter(function (feature) {
+        var _feature$properties3;
+        return (_feature$properties3 = feature.properties) == null ? void 0 : _feature$properties3.name.toLowerCase().includes(searchTerm.toLowerCase());
+      });
+      return Object.assign({}, dataset, {
+        geoJson: Object.assign({}, dataset.geoJson, {
+          features: filteredFeatures
+        })
+      });
+    });
+  }, [searchTerm, splitGeoJson]);
+  var listContainerRef = React.useRef(null);
+  var heightObserver = useResizeObserver(listContainerRef, filteredResults);
   return jsx(Box, {
     "data-testid": "locationDropdownContainer",
     ref: listContainerRef,
     sx: {
       width: '100%',
       height: '100%',
-      overflowY: 'auto',
       backgroundColor: 'geowebColors.background.surface'
     },
     children: jsxs(Grid, {
@@ -8745,31 +8844,28 @@ var LocationDropdown = function LocationDropdown(_ref3) {
             amountOfItems: collectionGeoJson.features.length || 0,
             "data-testid": "locationDropdownCollectionAccordion",
             defaultExpanded: defaultExpanded || false,
+            detailsSx: {
+              padding: 0
+            },
             sx: {
               mx: 1,
               mb: 1
             },
             title: collectionName,
             title2: serviceName,
-            children: jsx(FocusableListWrapper, {
-              "aria-label": "Locations list",
-              onKeyDown: handleKeyDown,
-              children: jsx(List$1, {
-                listRef: listRef,
-                rowComponent: RowComponent,
-                rowCount: collectionGeoJson.features.length,
-                rowHeight: 40,
-                rowProps: {
-                  handleChange: handleChange,
-                  selectedLocation: collectionSelectedLocation == null || (_collectionSelectedLo = collectionSelectedLocation.properties) == null ? void 0 : _collectionSelectedLo.name,
-                  features: collectionGeoJson.features,
-                  isDisabled: isDisabled
-                },
-                style: {
-                  height: heightObserver,
-                  width: '100%'
-                }
-              })
+            children: jsx(FocusableList, {
+              rowCount: collectionGeoJson.features.length,
+              rowHeight: 40,
+              rowProps: {
+                handleChange: handleChange,
+                selectedLocation: collectionSelectedLocation == null || (_collectionSelectedLo = collectionSelectedLocation.properties) == null ? void 0 : _collectionSelectedLo.name,
+                features: collectionGeoJson.features,
+                isDisabled: isDisabled
+              },
+              style: {
+                height: heightObserver,
+                width: '100%'
+              }
             })
           })
         }, collectionName + "-" + serviceName);
@@ -8793,12 +8889,6 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
     onCloseDialog = _useSetupDialog.onCloseDialog,
     dialogOrder = _useSetupDialog.dialogOrder,
     setDialogOrder = _useSetupDialog.setDialogOrder;
-  var geoJSONWithService = useSelector(function (state) {
-    return panelId ? getGeoJSONWithService(state, panelId) : undefined;
-  });
-  var sharedFeature = useSelector(function (state) {
-    return panelId ? genericSelectors.selectFeatureSyncLayersForPanel(state, panelId)[0] : undefined;
-  });
   var featureSyncLayerIds = useSelector(function (state) {
     return panelId ? genericSelectors.selectFeatureSyncLayerIdsForPanel(state, panelId) : emptyMapIdList;
   });
@@ -8811,6 +8901,9 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
   var timeSeriesLocation = useSelector(function (state) {
     return panelId ? getCurrentLocation(state, panelId) : undefined;
   });
+  var _useTimeSeriesLocatio = useTimeSeriesLocations(panelId || ''),
+    combinedGeoJson = _useTimeSeriesLocatio.combinedGeoJson,
+    splitGeoJsonByCollection = _useTimeSeriesLocatio.splitGeoJsonByCollection;
   var setSelectedFeatureIds = function setSelectedFeatureIds(selectedFeatureIds) {
     featureSyncLayerIds.forEach(function (layerId) {
       dispatch(layerActions.setSelectedFeatures({
@@ -8836,20 +8929,19 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
       }));
     });
   };
-  var geojson = sharedFeature == null ? void 0 : sharedFeature.geojson;
   var selectedLocationName = typeof (timeSeriesLocation == null || (_timeSeriesLocation$o = timeSeriesLocation.occurrences) == null || (_timeSeriesLocation$o = _timeSeriesLocation$o[0]) == null || (_timeSeriesLocation$o = _timeSeriesLocation$o.properties) == null ? void 0 : _timeSeriesLocation$o.name) === 'string' ? timeSeriesLocation.occurrences[0].properties.name : '';
   var onChangeLocation = function onChangeLocation(newSelectedLocation) {
-    var _geojson$features, _feature$properties;
+    var _feature$properties;
     if (!panelId) {
       return;
     }
-    if (!(geojson != null && (_geojson$features = geojson.features) != null && _geojson$features.length)) {
+    if (!combinedGeoJson.features.length) {
       return;
     }
-    var selectedFeatureIndex = geojson.features.findIndex(function (feature) {
+    var selectedFeatureIndex = combinedGeoJson.features.findIndex(function (feature) {
       return Object.keys(feature.properties.names).includes(newSelectedLocation);
     });
-    var feature = geojson.features[selectedFeatureIndex];
+    var feature = combinedGeoJson.features[selectedFeatureIndex];
     setSelectedFeatureIds(feature != null && feature.id ? [String(feature.id)] : []);
     var _getFeatureCenterPoin = getFeatureCenterPoint(feature),
       lon = _getFeatureCenterPoin[0],
@@ -8897,11 +8989,11 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
     },
     title: t('locations'),
     children: jsx(LocationDropdown, {
-      geoJson: geojson,
+      geoJson: combinedGeoJson,
       handleChange: onChangeLocation,
       isDisabled: isMapPinDisabled,
       selectedLocation: selectedLocationName,
-      splitGeoJson: geoJSONWithService
+      splitGeoJson: splitGeoJsonByCollection
     })
   });
 };

package/dist/src/lib/components/TimeSeries/TimeSeriesConnect.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-import type { TimeSeriesService } from '@opengeoweb/shared';
-import type { Parameter } from './types';
-import type { GetLocationsOption } from '../../utils/timeseries-api/hooks';
-export declare const getUniqueServicesFromPreset: (parameters: Parameter[], services: TimeSeriesService[]) => GetLocationsOption[];
 export interface TimeSeriesConnectProps {
     panelId: string;
 }

package/dist/src/lib/components/TimeSeries/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const TIME_SERIES_CONTAINER_BREAKPOINT_PX = "720px";
+export declare const TIME_SERIES_CONTAINER_NAME = "time-series-container";

package/dist/src/lib/components/TimeSeries/useTimeSeriesLocations.d.ts

@@ -0,0 +1,12 @@
+import type { TimeSeriesService } from '@opengeoweb/shared';
+import type { GeoJsonWithService, Parameter } from './types';
+import type { GetLocationsOption } from '../../utils/timeseries-api/hooks';
+export declare const getUniqueServicesFromPreset: (parameters: Parameter[], services: TimeSeriesService[]) => GetLocationsOption[];
+interface UseTimeSeriesLocationsResult {
+    combinedGeoJson: GeoJSON.FeatureCollection;
+    isLocationsFetching: boolean;
+    serviceListForLocations: GetLocationsOption[];
+    splitGeoJsonByCollection: GeoJsonWithService[];
+}
+export declare const useTimeSeriesLocations: (panelId: string) => UseTimeSeriesLocationsResult;
+export {};

package/dist/src/lib/components/TimeSeries/utils.d.ts

@@ -8,6 +8,7 @@ export type PlotErrorsMap = Record<Plot['plotId'], string[]>;
 export type FailedParametersMap = Record<Plot['plotId'], FailedParameterInfo[]>;
 export declare const createGeoJsonArrays: (locations: (FeatureCollection<GeometryObject, UseGetLocationReturnTypeProperties> | undefined)[], services: TimeSeriesService[] | undefined, hideFeatures: boolean, memoizedSelectedFeature: TimeSeriesLocation | null) => {
     combinedGeoJson: FeatureCollection<GeometryObject, syncGroupsTypes.PotentialDataProperties>;
+    splitGeoJsonByCollection: GeoJsonWithService[];
 };
 export declare const getNearbyLocation: (parameter: Parameter, service: TimeSeriesService, selectedLocation: PointerLocation, geojsonMap: Map<string, GeoJsonWithService>) => TimeSeriesLocation | null;
 export declare const getPlotsWithParameters: (plots: Plot[], parameters: ParameterWithData[], plotErrors?: PlotErrorsMap, failedParameters?: FailedParametersMap) => PlotWithData[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/time-series",
-  "version": "19.2.0",
+  "version": "19.4.0",
   "description": "GeoWeb time-series library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {