@opengeoweb/time-series 19.3.0 → 19.5.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, Location, useThemeContext, EChartsDarkTheme, EChartsLightTheme, Layers, 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';
@@ -1447,6 +1447,18 @@ var panelSlice = createSlice({
       draft.locationData = Object.assign({}, draft.locationData, {
         currentLocation: location
       });
+    },
+    setLocationMenuSizeAndPosition: function setLocationMenuSizeAndPosition(draft, action) {
+      draft.locationData = Object.assign({}, draft.locationData, {
+        locationMenuSize: action.payload.size
+      }, action.payload.position !== undefined && {
+        locationMenuPosition: action.payload.position
+      });
+    },
+    setLocationsDialogOpen: function setLocationsDialogOpen(draft, action) {
+      draft.locationData = Object.assign({}, draft.locationData, {
+        isLocationsDialogOpen: action.payload.isLocationsDialogOpen
+      });
     }
   }
 });
@@ -1637,7 +1649,7 @@ var timeSeriesReducer = function timeSeriesReducer(state, action) {
     return didChange ? nextById : byId;
   };
   if (action.type === timeSeriesActions.registerTimeSeriesPreset.type) {
-    var _normalizedState$byId, _payload2$services, _Object$assign;
+    var _normalizedState$byId, _payload2$services, _Object$assign, _normalizedState$loca;
     var _payload2 = action.payload;
     if (!panelId) {
       return Object.assign({}, normalizedState, {
@@ -1717,6 +1729,18 @@ var timeSeriesReducer = function timeSeriesReducer(state, action) {
         payload: newServicesAdded,
         type: timeSeriesActions.setServiceFilterChipsInStore.type
       });
+      if (!draft.locationData) {
+        draft.locationData = {};
+      }
+      if (_payload2.locationMenuSize) {
+        draft.locationData.locationMenuSize = _payload2.locationMenuSize;
+      }
+      if (_payload2.locationMenuPosition) {
+        draft.locationData.locationMenuPosition = _payload2.locationMenuPosition;
+      }
+      if (_payload2.isLocationsDialogOpen !== undefined) {
+        draft.locationData.isLocationsDialogOpen = _payload2.isLocationsDialogOpen;
+      }
     });
     var updatedById = Object.assign({}, normalizedState.byId, (_Object$assign = {}, _Object$assign[panelId] = _nextPanelState, _Object$assign));
     var servicesToSyncFromPreset = Array.from(new Map([].concat(newServicesAdded.map(function (service) {
@@ -1734,7 +1758,8 @@ var timeSeriesReducer = function timeSeriesReducer(state, action) {
     })).values());
     return Object.assign({}, normalizedState, {
       services: nextServices,
-      byId: syncServiceChipsAcrossPanels(updatedById, servicesToSyncFromPreset)
+      byId: syncServiceChipsAcrossPanels(updatedById, servicesToSyncFromPreset),
+      locationDialogRestoreVersion: ((_normalizedState$loca = normalizedState.locationDialogRestoreVersion) != null ? _normalizedState$loca : 0) + 1
     });
   }
   if (!panelId) {
@@ -1969,7 +1994,45 @@ var getServicePopupDetails = createSelector(getTimeSeriesState, function (store)
   var _store$timeseriesSele6;
   return (store == null || (_store$timeseriesSele6 = store.timeseriesSelect) == null ? void 0 : _store$timeseriesSele6.servicePopup) || initialPanelState.timeseriesSelect.servicePopup;
 });
-var getTimeSeriesPreset = createSelector(getPlotState, getServices, function (plotState, services) {
+var getLocationDialogRestoreVersion = function getLocationDialogRestoreVersion(state) {
+  var ts = state.timeSeries;
+  if (!ts || !('byId' in ts)) {
+    return 0;
+  }
+  var version = ts.locationDialogRestoreVersion;
+  return typeof version === 'number' ? version : 0;
+};
+/**
+ * Returns the panelId of the first panel that has isLocationsDialogOpen: true or undefined.
+ * @param {object} state store: object - store object
+ * @returns {string | undefined} returnType: string | undefined
+ */
+var getDialogOpenPanelId = function getDialogOpenPanelId(state) {
+  var _Object$entries$find;
+  var ts = state.timeSeries;
+  if (!ts || !('byId' in ts)) {
+    return undefined;
+  }
+  var byId = ts.byId;
+  return (_Object$entries$find = Object.entries(byId).find(function (_ref) {
+    var _panel$locationData;
+    var panel = _ref[1];
+    return ((_panel$locationData = panel.locationData) == null ? void 0 : _panel$locationData.isLocationsDialogOpen) === true;
+  })) == null ? void 0 : _Object$entries$find[0];
+};
+var getLocationMenuSize = function getLocationMenuSize(state, panelId) {
+  var _getPanelState3;
+  return (_getPanelState3 = getPanelState(state, panelId)) == null || (_getPanelState3 = _getPanelState3.locationData) == null ? void 0 : _getPanelState3.locationMenuSize;
+};
+var getLocationMenuPosition = function getLocationMenuPosition(state, panelId) {
+  var _getPanelState4;
+  return (_getPanelState4 = getPanelState(state, panelId)) == null || (_getPanelState4 = _getPanelState4.locationData) == null ? void 0 : _getPanelState4.locationMenuPosition;
+};
+var getLocationsDialogOpen = function getLocationsDialogOpen(state, panelId) {
+  var _getPanelState$locati, _getPanelState5;
+  return (_getPanelState$locati = (_getPanelState5 = getPanelState(state, panelId)) == null || (_getPanelState5 = _getPanelState5.locationData) == null ? void 0 : _getPanelState5.isLocationsDialogOpen) != null ? _getPanelState$locati : false;
+};
+var getTimeSeriesPreset = createSelector(getPlotState, getServices, getLocationMenuSize, getLocationMenuPosition, getLocationsDialogOpen, function (plotState, services, locationMenuSize, locationMenuPosition, isLocationsDialogOpen) {
   if (!plotState || !services) {
     return undefined;
   }
@@ -1994,7 +2057,10 @@ var getTimeSeriesPreset = createSelector(getPlotState, getServices, function (pl
       parameters: presetParameters
     }),
     services: usedServices,
-    syncGroupsIds: []
+    syncGroupsIds: [],
+    locationMenuSize: locationMenuSize,
+    locationMenuPosition: locationMenuPosition,
+    isLocationsDialogOpen: isLocationsDialogOpen
   };
 });
 var getGeoJSONWithService = createSelector([getServices, function (state, panelId) {
@@ -2053,9 +2119,14 @@ var selectors = /*#__PURE__*/Object.freeze({
   getAllFilterChipsEnabled: getAllFilterChipsEnabled,
   getCurrentLocation: getCurrentLocation,
   getCurrentParameterInfoDisplayed: getCurrentParameterInfoDisplayed,
+  getDialogOpenPanelId: getDialogOpenPanelId,
   getGeoJSONWithService: getGeoJSONWithService,
   getIsLegendVisible: getIsLegendVisible,
   getIsMapPinDisabled: getIsMapPinDisabled,
+  getLocationDialogRestoreVersion: getLocationDialogRestoreVersion,
+  getLocationMenuPosition: getLocationMenuPosition,
+  getLocationMenuSize: getLocationMenuSize,
+  getLocationsDialogOpen: getLocationsDialogOpen,
   getMapId: getMapId,
   getPanelState: getPanelState,
   getParameterById: getParameterById,
@@ -3177,7 +3248,7 @@ var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selecte
       // Create here so if new data is advertised by the collection/instance a new request is made
       var intervalParam = constructTimeInterval(collection, instanceInfo, syncgroupTimeState);
       return {
-        queryKey: generateTimeSeriesQueryKeys(['get-parameter-data', parameter.plotId, parameter.propertyName, parameter.serviceId, parameter.collectionId, parameter.instanceId || 'undefined', ((_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.value) || 'undefined', intervalParam, selectedLocation.lat.toString() || 'undefined', selectedLocation.lon.toString() || 'undefined']),
+        queryKey: generateTimeSeriesQueryKeys(['get-parameter-data', parameter.id || 'undefined', parameter.plotId, parameter.propertyName, parameter.serviceId, parameter.collectionId, parameter.instanceId || 'undefined', ((_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.value) || 'undefined', intervalParam, selectedLocation.lat.toString() || 'undefined', selectedLocation.lon.toString() || 'undefined']),
         queryFn: function () {
           var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
             var edrResponse;
@@ -3792,14 +3863,16 @@ var ParameterList = function ParameterList(_ref) {
     },
     id: plot.plotId,
     list: plot.parameters ? (_plot$parameters = plot.parameters) == null ? void 0 : _plot$parameters.map(function (param) {
+      var _param$id, _param$instanceId;
       return {
-        id: param.plotId
+        id: (_param$id = param.id) != null ? _param$id : param.propertyName + "-" + param.collectionId + "-" + param.serviceId + "-" + ((_param$instanceId = param.instanceId) != null ? _param$instanceId : '')
       };
     }) : [],
     onEnd: onSortEnd,
     setList: function setList() {},
     swapThreshold: 0.3,
     children: (_plot$parameters2 = plot.parameters) == null ? void 0 : _plot$parameters2.map(function (parameter) {
+      var _parameter$id, _parameter$instanceId;
       var parameterIsEnabled = parameter.enabled !== false;
       var rowIsEnabled = plotIsEnabled && parameterIsEnabled;
       var styles = getStyles$1(rowIsEnabled);
@@ -3903,7 +3976,7 @@ var ParameterList = function ParameterList(_ref) {
           }),
           sx: styles.row
         })]
-      }, "" + parameter.id);
+      }, (_parameter$id = parameter.id) != null ? _parameter$id : parameter.propertyName + "-" + parameter.collectionId + "-" + parameter.serviceId + "-" + ((_parameter$instanceId = parameter.instanceId) != null ? _parameter$instanceId : ''));
     })
   });
 };
@@ -3963,22 +4036,24 @@ var TimeSeriesSelectButtonConnect = function TimeSeriesSelectButtonConnect(_ref)
   var isOpenForPanel = isOpenInStore && currentSourcePanelId === panelId;
   return jsx(CustomTooltip, {
     title: t('timeseries-add-param-to-plot'),
-    children: jsx(CustomToggleButton, {
-      "data-testid": "timeSeriesSelectButton",
-      disabled: !isEnabled,
-      onClick: handleClick,
-      selected: !!isOpenForPanel && isSelectOpenForCurrentPlot,
-      sx: {
-        marginLeft: '4px',
-        height: '24px!important',
-        width: '24px',
-        paddingLeft: '5px',
-        svg: {
-          marginLeft: '8px'
-        }
-      },
-      variant: "tool",
-      children: jsx(TimeSeriesSelect$1, {})
+    children: jsx("span", {
+      children: jsx(CustomToggleButton, {
+        "data-testid": "timeSeriesSelectButton",
+        disabled: !isEnabled,
+        onClick: handleClick,
+        selected: !!isOpenForPanel && isSelectOpenForCurrentPlot,
+        sx: {
+          marginLeft: '4px',
+          height: '24px!important',
+          width: '24px',
+          paddingLeft: '5px',
+          svg: {
+            marginLeft: '8px'
+          }
+        },
+        variant: "tool",
+        children: jsx(TimeSeriesSelect$1, {})
+      })
     })
   });
 };
@@ -6799,6 +6874,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,
@@ -6817,30 +6913,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,
@@ -6876,7 +6969,7 @@ var LocationInfoButtonConnect = function LocationInfoButtonConnect(_ref) {
 };
 
 var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
-  var _timeSeriesLocation$o;
+  var _timeSeriesLocation$o, _sx;
   var panelId = _ref.panelId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
@@ -6901,11 +6994,17 @@ var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
   }, [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() {
+    var newIsOpen = currentSourcePanelId !== panelId ? true : !isLocationsDialogOpen;
     dispatch(uiActions.setToggleOpenDialog({
       type: uiTypes.DialogTypes.TimeseriesLocations,
-      setOpen: currentSourcePanelId !== panelId ? true : !isLocationsDialogOpen,
+      setOpen: newIsOpen,
       sourcePanelId: panelId
     }));
+    dispatch(timeSeriesActions.setLocationsDialogOpen({
+      panelId: panelId,
+      isLocationsDialogOpen: newIsOpen,
+      origin: TimeSeriesActionOrigin.timeSeriesManager
+    }));
   };
   React.useEffect(function () {
     return function () {
@@ -6926,11 +7025,9 @@ var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
         "data-testid": "locationSelectButton",
         disabled: isMapPinDisabled,
         icon: jsx(Location, {
-          sx: {
-            '@container time-series-container (width < 720px)': {
-              display: 'none'
-            }
-          }
+          sx: (_sx = {}, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (width < " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+            display: 'none'
+          }, _sx)
         }),
         longText: selectedLocationName || t('timeseries-location'),
         onClick: toggleLocationsDialog,
@@ -6942,12 +7039,13 @@ var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
 };
 
 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',
@@ -6963,14 +7061,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: {
@@ -7019,9 +7116,9 @@ var createParameterNames = function createParameterNames(plotsWithData) {
   // count per plot how many duplicate names there are
   var perBaseNamePlotCounters = new Map();
   return parameters.map(function (parameter) {
-    var _parameter$id, _duplicateParameterCo, _plotCounters$get, _parameter$enabled3;
+    var _duplicateParameterCo, _plotCounters$get, _parameter$enabled3;
     var name = getParameterDisplayName(parameter);
-    var id = (_parameter$id = parameter.id) != null ? _parameter$id : '';
+    var id = getParameterKey$1(parameter);
     var totalCount = (_duplicateParameterCo = duplicateParameterCount.get(name)) != null ? _duplicateParameterCo : 0;
     if (totalCount === 1) {
       var _parameter$enabled;
@@ -7269,6 +7366,14 @@ var isTimeSeriesParam = function isTimeSeriesParam(param) {
 var getParameterDisplayName = function getParameterDisplayName(parameter) {
   return parameter.propertyName + " - " + parameter.collectionId;
 };
+// Stable unique key: uses id when present, otherwise a composite fallback.
+var getParameterKey$1 = function getParameterKey(parameter) {
+  var _parameter$instanceId, _parameter$dimension$, _parameter$dimension, _parameter$dimension$2, _parameter$dimension2;
+  if (parameter.id) {
+    return parameter.id;
+  }
+  return [parameter.plotId, parameter.propertyName, parameter.collectionId, (_parameter$instanceId = parameter.instanceId) != null ? _parameter$instanceId : '', (_parameter$dimension$ = (_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.id) != null ? _parameter$dimension$ : '', (_parameter$dimension$2 = (_parameter$dimension2 = parameter.dimension) == null ? void 0 : _parameter$dimension2.value) != null ? _parameter$dimension$2 : ''].join('|');
+};
 var roundDecimalValues = function roundDecimalValues(value) {
   if (isNaN(value) || value === null || value === undefined) {
     return 'no data';
@@ -7469,7 +7574,7 @@ var getSeries = function getSeries(plotCharts, parameterNames) {
         return Object.assign({
           data: getEChartsSeriesDataByTimestep(uniqueTimesteps, parameter),
           name: (_parameterNames$find = parameterNames.find(function (pName) {
-            return pName.id === parameter.id;
+            return pName.id === getParameterKey$1(parameter);
           })) == null ? void 0 : _parameterNames$find.name,
           type: type,
           xAxisIndex: plotIndex,
@@ -7535,6 +7640,44 @@ function getPlotCharts(plotsWithData) {
   return plotCharts;
 }
 
+// Guard: mocked ReactECharts (forwardRef) has no real prototype chain.
+var reactEChartsProto = ReactECharts.prototype;
+var echartsReactCoreProto = reactEChartsProto ? Object.getPrototypeOf(reactEChartsProto) : null;
+if (echartsReactCoreProto != null && echartsReactCoreProto.renderNewEcharts) {
+  var originalRenderNewEcharts = echartsReactCoreProto.renderNewEcharts;
+  echartsReactCoreProto.renderNewEcharts = /*#__PURE__*/function () {
+    var _patchedRenderNewEcharts = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            _context.p = 0;
+            _context.n = 1;
+            return originalRenderNewEcharts.call(this);
+          case 1:
+            _context.n = 4;
+            break;
+          case 2:
+            _context.p = 2;
+            _t = _context.v;
+            if (this.ele) {
+              _context.n = 3;
+              break;
+            }
+            return _context.a(2);
+          case 3:
+            throw _t;
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee, this, [[0, 2]]);
+    }));
+    function patchedRenderNewEcharts() {
+      return _patchedRenderNewEcharts.apply(this, arguments);
+    }
+    return patchedRenderNewEcharts;
+  }();
+}
 var useChartHeight = function useChartHeight(_ref) {
   var plotsWithData = _ref.plotsWithData,
     shouldShowLegend = _ref.shouldShowLegend,
@@ -7548,6 +7691,9 @@ var useChartHeight = function useChartHeight(_ref) {
     setChartHeight = _React$useState[1];
   var chartRef = React.useRef(null);
   var updateHeight = React.useCallback(function (echartsInstance) {
+    if (echartsInstance.isDisposed()) {
+      return;
+    }
     var legendApi = echartsInstance;
     if (legendApi.getModel() !== null) {
       var _option$grid;
@@ -7580,7 +7726,7 @@ var useChartHeight = function useChartHeight(_ref) {
   React.useEffect(function () {
     var _chartRef$current;
     var instance = (_chartRef$current = chartRef.current) == null ? void 0 : _chartRef$current.getEchartsInstance();
-    if (instance) {
+    if (instance && !instance.isDisposed()) {
       instance.setOption({
         legend: {
           top: 0,
@@ -7594,7 +7740,7 @@ var useChartHeight = function useChartHeight(_ref) {
     var onHeight = function onHeight() {
       var _chartRef$current2;
       var instance = (_chartRef$current2 = chartRef.current) == null ? void 0 : _chartRef$current2.getEchartsInstance();
-      if (instance) {
+      if (instance && !instance.isDisposed()) {
         updateHeight(instance);
       }
     };
@@ -8075,7 +8221,7 @@ var useMapPin = function useMapPin(_ref) {
   };
 };
 var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
-  var _linkedMapIds$;
+  var _linkedMapIds$, _sx;
   var panelId = _ref2.panelId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
@@ -8214,7 +8360,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
       height: '100%',
       backgroundColor: 'geowebColors.background.surfaceApp',
       containerType: 'inline-size',
-      containerName: 'time-series-container'
+      containerName: TIME_SERIES_CONTAINER_NAME
     },
     children: [jsxs(Stack, {
       direction: "row",
@@ -8247,16 +8393,23 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
       }), 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: {
@@ -8324,7 +8477,10 @@ var componentsLookUp = function componentsLookUp(_ref) {
           timeSeriesPreset: {
             plotPreset: initialProps.plotPreset,
             services: initialProps.services,
-            syncGroupsIds: initialProps.syncGroupsIds
+            syncGroupsIds: initialProps.syncGroupsIds,
+            locationMenuSize: initialProps.locationMenuSize,
+            locationMenuPosition: initialProps.locationMenuPosition,
+            isLocationsDialogOpen: initialProps.isLocationsDialogOpen
           }
         });
       }
@@ -8878,6 +9034,44 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
   var timeSeriesLocation = useSelector(function (state) {
     return panelId ? getCurrentLocation(state, panelId) : undefined;
   });
+  var locationMenuSize = useSelector(function (state) {
+    return panelId ? getLocationMenuSize(state, panelId) : undefined;
+  });
+  var locationMenuPosition = useSelector(function (state) {
+    return panelId ? getLocationMenuPosition(state, panelId) : undefined;
+  });
+  var locationDialogRestoreVersion = useSelector(function (state) {
+    return getLocationDialogRestoreVersion(state);
+  });
+  var dialogOpenPanelId = useSelector(function (state) {
+    return getDialogOpenPanelId(state);
+  });
+  useEffect(function () {
+    if (locationDialogRestoreVersion === 0) {
+      return;
+    }
+    if (dialogOpenPanelId) {
+      dispatch(uiActions.setToggleOpenDialog({
+        type: uiTypes.DialogTypes.TimeseriesLocations,
+        setOpen: true,
+        sourcePanelId: dialogOpenPanelId
+      }));
+    } else {
+      dispatch(uiActions.setToggleOpenDialog({
+        type: uiTypes.DialogTypes.TimeseriesLocations,
+        setOpen: false
+      }));
+    }
+  }, [locationDialogRestoreVersion, dialogOpenPanelId, dispatch]);
+  useEffect(function () {
+    if (!panelId) {
+      return;
+    }
+    dispatch(timeSeriesActions.setLocationsDialogOpen({
+      panelId: panelId,
+      isLocationsDialogOpen: isDialogOpen
+    }));
+  }, [isDialogOpen, panelId, dispatch]);
   var _useTimeSeriesLocatio = useTimeSeriesLocations(panelId || ''),
     combinedGeoJson = _useTimeSeriesLocatio.combinedGeoJson,
     splitGeoJsonByCollection = _useTimeSeriesLocatio.splitGeoJsonByCollection;
@@ -8898,6 +9092,34 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
       location: location
     }));
   }, [dispatch, panelId]);
+  var handleClose = useCallback(function () {
+    onCloseDialog();
+    if (!panelId) {
+      return;
+    }
+    dispatch(timeSeriesActions.setLocationsDialogOpen({
+      panelId: panelId,
+      isLocationsDialogOpen: false,
+      origin: TimeSeriesActionOrigin.timeSeriesManager
+    }));
+  }, [dispatch, onCloseDialog, panelId]);
+  var handleDragEnd = useCallback(function (position, size) {
+    if (!panelId || typeof size.width !== 'number' || typeof size.height !== 'number') {
+      return;
+    }
+    dispatch(timeSeriesActions.setLocationMenuSizeAndPosition({
+      panelId: panelId,
+      size: {
+        width: size.width,
+        height: size.height
+      },
+      position: {
+        x: position.x,
+        y: position.y
+      },
+      origin: TimeSeriesActionOrigin.timeSeriesManager
+    }));
+  }, [dispatch, panelId]);
   var setMapPinLocation = function setMapPinLocation(mapPinLocation) {
     selectedMapIds.forEach(function (mapId) {
       dispatch(mapActions.setMapPinLocation({
@@ -8953,14 +9175,20 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
     bounds: "parent",
     isOpen: isDialogOpen,
     minWidth: 264,
-    onClose: onCloseDialog,
+    onClose: handleClose,
+    onDragEnd: handleDragEnd,
     onMouseDown: setDialogOrder,
     order: dialogOrder,
+    resetPositionOnOpen: true,
+    startDraggablePosition: locationMenuPosition != null ? locationMenuPosition : {
+      x: 0,
+      y: 0
+    },
     startPosition: {
       top: 60,
       left: 200
     },
-    startSize: {
+    startSize: locationMenuSize != null ? locationMenuSize : {
       width: 320,
       height: 500
     },

package/dist/src/lib/components/ComponentsLookUp/componentsLookUp.d.ts

@@ -6,6 +6,15 @@ interface InitialTimeseriesProps {
     services: TimeSeriesService[];
     hideLocationMarkers?: boolean;
     syncGroupsIds: string[];
+    locationMenuSize?: {
+        width: number;
+        height: number;
+    };
+    locationMenuPosition?: {
+        x: number;
+        y: number;
+    };
+    isLocationsDialogOpen?: boolean;
 }
 export type SupportedComponentTypes = 'TimeSeries';
 export type InitialProps = InitialTimeseriesProps;

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/store/reducer.d.ts

@@ -1,6 +1,6 @@
 import type { Reducer } from '@reduxjs/toolkit';
 import type { TimeSeriesService } from '@opengeoweb/shared';
-import type { ServiceFilterChipsObject, SetCurrentParameterInfo, SetSearchFilterPayload, MovePlotPayload, SetTimeSeriesServicesPayload, TimeSeriesState, TimeSeriesStoreType, ParameterManipulationPayload, UpdateTitlePayload, MoveParameterPayload, SetTimeSeriesServicePopupPayload, UpsertTimeSeriesServicePayload, RemoveServiceFilterChipFromStorePayload, RemoveTimeSeriesServicePayload, ParameterActionPayload, PlotActionPayload, AddPlotPayload, ParameterPatchPayload, ToggleDisableMapPinPayload, ToggleLocationMarkersPayload, ToggleTimeSeriesLegendPayload, SetTimeSeriesLocationPayload, RegisterTimeSeriesPresetPayload } from './types';
+import type { ServiceFilterChipsObject, SetCurrentParameterInfo, SetSearchFilterPayload, MovePlotPayload, SetTimeSeriesServicesPayload, TimeSeriesState, TimeSeriesStoreType, ParameterManipulationPayload, UpdateTitlePayload, MoveParameterPayload, SetTimeSeriesServicePopupPayload, UpsertTimeSeriesServicePayload, RemoveServiceFilterChipFromStorePayload, RemoveTimeSeriesServicePayload, ParameterActionPayload, PlotActionPayload, AddPlotPayload, ParameterPatchPayload, ToggleDisableMapPinPayload, ToggleLocationMarkersPayload, ToggleTimeSeriesLegendPayload, SetTimeSeriesLocationPayload, RegisterTimeSeriesPresetPayload, SetLocationMenuSizeAndPositionPayload, SetLocationsDialogOpenPayload } from './types';
 export declare const timeseriesSelectServiceFilterChipsAdapter: import("@reduxjs/toolkit").EntityAdapter<ServiceFilterChipsObject, string>;
 export declare const initialState: TimeSeriesState;
 export declare const createPanelState: () => TimeSeriesStoreType;
@@ -49,6 +49,8 @@ export declare const timeSeriesActions: {
     toggleLocationMarkers: import("@reduxjs/toolkit").ActionCreatorWithPayload<ToggleLocationMarkersPayload, "timeseriesPanel/toggleLocationMarkers">;
     toggleLegend: import("@reduxjs/toolkit").ActionCreatorWithPayload<ToggleTimeSeriesLegendPayload, "timeseriesPanel/toggleLegend">;
     setCurrentLocation: import("@reduxjs/toolkit").ActionCreatorWithPayload<SetTimeSeriesLocationPayload, "timeseriesPanel/setCurrentLocation">;
+    setLocationMenuSizeAndPosition: import("@reduxjs/toolkit").ActionCreatorWithPayload<SetLocationMenuSizeAndPositionPayload, "timeseriesPanel/setLocationMenuSizeAndPosition">;
+    setLocationsDialogOpen: import("@reduxjs/toolkit").ActionCreatorWithPayload<SetLocationsDialogOpenPayload, "timeseriesPanel/setLocationsDialogOpen">;
 };
 export declare const timeSeriesReducer: Reducer<TimeSeriesState>;
 export declare const generateServiceId: () => string;

package/dist/src/lib/store/selectors.d.ts

@@ -264,13 +264,41 @@ export declare const getServicePopupDetails: ((state: TimeSeriesStateSlice, pane
     memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
 };
+export declare const getLocationDialogRestoreVersion: (state: TimeSeriesStateSlice) => number;
+/**
+ * Returns the panelId of the first panel that has isLocationsDialogOpen: true or undefined.
+ * @param {object} state store: object - store object
+ * @returns {string | undefined} returnType: string | undefined
+ */
+export declare const getDialogOpenPanelId: (state: TimeSeriesStateSlice) => string | undefined;
+export declare const getLocationMenuSize: (state: TimeSeriesStateSlice, panelId?: string) => {
+    width: number;
+    height: number;
+} | undefined;
+export declare const getLocationMenuPosition: (state: TimeSeriesStateSlice, panelId?: string) => {
+    x: number;
+    y: number;
+} | undefined;
+export declare const getLocationsDialogOpen: (state: TimeSeriesStateSlice, panelId?: string) => boolean;
 export declare const getTimeSeriesPreset: ((state: TimeSeriesStateSlice, panelId?: string | undefined) => TimeSeriesPreset | undefined) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
 } & {
-    resultFunc: (resultFuncArgs_0: PlotPreset | undefined, resultFuncArgs_1: TimeSeriesService[] | undefined) => TimeSeriesPreset | undefined;
-    memoizedResultFunc: ((resultFuncArgs_0: PlotPreset | undefined, resultFuncArgs_1: TimeSeriesService[] | undefined) => TimeSeriesPreset | undefined) & {
+    resultFunc: (resultFuncArgs_0: PlotPreset | undefined, resultFuncArgs_1: TimeSeriesService[] | undefined, resultFuncArgs_2: {
+        width: number;
+        height: number;
+    } | undefined, resultFuncArgs_3: {
+        x: number;
+        y: number;
+    } | undefined, resultFuncArgs_4: boolean) => TimeSeriesPreset | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: PlotPreset | undefined, resultFuncArgs_1: TimeSeriesService[] | undefined, resultFuncArgs_2: {
+        width: number;
+        height: number;
+    } | undefined, resultFuncArgs_3: {
+        x: number;
+        y: number;
+    } | undefined, resultFuncArgs_4: boolean) => TimeSeriesPreset | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
@@ -296,7 +324,13 @@ export declare const getTimeSeriesPreset: ((state: TimeSeriesStateSlice, panelId
     } & {
         memoize: typeof import("reselect").weakMapMemoize;
         argsMemoize: typeof import("reselect").weakMapMemoize;
-    }];
+    }, (state: TimeSeriesStateSlice, panelId?: string) => {
+        width: number;
+        height: number;
+    } | undefined, (state: TimeSeriesStateSlice, panelId?: string) => {
+        x: number;
+        y: number;
+    } | undefined, (state: TimeSeriesStateSlice, panelId?: string) => boolean];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;

package/dist/src/lib/store/types.d.ts

@@ -43,6 +43,15 @@ export interface TimeseriesLocationData {
     shouldHideLocationMarkers?: boolean;
     isLegendVisible?: boolean;
     currentLocation?: TimeSeriesLocation | undefined;
+    locationMenuSize?: {
+        width: number;
+        height: number;
+    };
+    locationMenuPosition?: {
+        x: number;
+        y: number;
+    };
+    isLocationsDialogOpen?: boolean;
 }
 export interface TimeSeriesStoreType {
     plotPreset?: PlotPreset;
@@ -53,11 +62,22 @@ export interface TimeSeriesStoreType {
 export interface TimeSeriesState {
     byId: Record<string, TimeSeriesStoreType>;
     services: TimeSeriesService[];
+    /** Increments whenever any panel's preset is registered; triggers dialog-state restore in LocationSelectDialogConnect. */
+    locationDialogRestoreVersion?: number;
 }
 export interface TimeSeriesPreset {
     plotPreset: PlotPreset;
     services: TimeSeriesService[];
     syncGroupsIds: string[];
+    locationMenuSize?: {
+        width: number;
+        height: number;
+    };
+    locationMenuPosition?: {
+        x: number;
+        y: number;
+    };
+    isLocationsDialogOpen?: boolean;
 }
 export interface TimeSeriesPayload {
     panelId?: string;
@@ -66,6 +86,15 @@ export interface TimeSeriesPayload {
 export interface RegisterTimeSeriesPresetPayload extends TimeSeriesPayload {
     plotPreset: PlotPreset;
     services?: TimeSeriesService[];
+    locationMenuSize?: {
+        width: number;
+        height: number;
+    };
+    locationMenuPosition?: {
+        x: number;
+        y: number;
+    };
+    isLocationsDialogOpen?: boolean;
 }
 export interface ParameterManipulationPayload extends TimeSeriesPayload {
     parameter: Parameter;
@@ -150,3 +179,16 @@ export interface SetTimeSeriesLocationPayload {
     panelId?: string;
     location: TimeSeriesLocation | undefined;
 }
+export interface SetLocationMenuSizeAndPositionPayload extends TimeSeriesPayload {
+    size: {
+        width: number;
+        height: number;
+    };
+    position?: {
+        x: number;
+        y: number;
+    };
+}
+export interface SetLocationsDialogOpenPayload extends TimeSeriesPayload {
+    isLocationsDialogOpen: boolean;
+}

package/package.json

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