@opengeoweb/time-series 15.1.0 → 15.3.0

package/index.esm.js

@@ -3,7 +3,7 @@ import React, { useCallback, useState, useMemo, useEffect, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { CustomIconButton, dateUtils, TooltipSelect, CustomAccordion, CustomTooltip, CustomToggleButton, ToolContainerDraggable, ToggleMenu, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, 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, syncGroupsActions, genericActions, mapActions, layerActions } from '@opengeoweb/store';
+import { mapUtils, selectorMemoizationOptions, genericSelectors, uiSelectors, uiTypes, uiActions, useSetupDialog, mapSelectors, mapListener, serviceListener, layersListener, syncGroupsListener, genericListener, openlayersListener, uiReducer, syncGroupsReducer, layerReducer, serviceReducer, mapReducer, loadingIndicatorActions, syncGroupsActions, genericActions, 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';
@@ -11,7 +11,7 @@ import { Info, ArrowDropDownDown, Copy, Delete, Visibility, VisibilityOff, TimeS
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import '@opengeoweb/core';
-import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
+import { createEntityAdapter, createSlice, createAction, createSelector, createListenerMiddleware, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { produce } from 'immer';
 import { v4 } from 'uuid';
 import { center } from '@turf/turf';
@@ -21,8 +21,7 @@ import { handleResponse } from '@opengeoweb/api';
 import Box$1 from '@mui/material/Box';
 import { useFormContext } from 'react-hook-form';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField, ReactHookFormSelect } from '@opengeoweb/form-fields';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { VariableSizeList, FixedSizeList } from 'react-window';
+import { List as List$1, useListRef } from 'react-window';
 import { webmapUtils } from '@opengeoweb/webmap';
 import ReactECharts from 'echarts-for-react';
 
@@ -1121,9 +1120,15 @@ date) {
 };
 // 1 day to past, 10 days to future
 var clipInterval = [1 * 24, 10 * 24];
-var constructTimeInterval = function constructTimeInterval(collection, instance, parameter) {
+var constructTimeInterval = function constructTimeInterval(collection, instance, syncgroupTimeState) {
   var _instance$extent$temp, _instance$extent2, _collection$extent4;
   var interval = (_instance$extent$temp = (_instance$extent2 = instance.extent) == null || (_instance$extent2 = _instance$extent2.temporal) == null ? void 0 : _instance$extent2.interval[0]) != null ? _instance$extent$temp : collection == null || (_collection$extent4 = collection.extent) == null || (_collection$extent4 = _collection$extent4.temporal) == null ? void 0 : _collection$extent4.interval[0];
+  // If syncgroupTimeState is set, use this instead of the fixed timerange.
+  if ((syncgroupTimeState == null ? void 0 : syncgroupTimeState.start) !== undefined && (syncgroupTimeState == null ? void 0 : syncgroupTimeState.end) !== undefined) {
+    var timeRangeStartIso = dateUtils.dateToString(dateUtils.fromUnix(syncgroupTimeState.start));
+    var timeRangeEndIso = dateUtils.dateToString(dateUtils.fromUnix(syncgroupTimeState.end));
+    return timeRangeStartIso + "/" + timeRangeEndIso;
+  }
   var _clipEdrInterval = clipEdrInterval(interval, clipInterval[0], clipInterval[1]),
     start = _clipEdrInterval[0],
     end = _clipEdrInterval[1];
@@ -1181,23 +1186,7 @@ var getLocationPositionPath = function getLocationPositionPath(collectionId, ins
   return "/collections/" + collectionId;
 };
 
-/* *
- * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
+var _excluded$3 = ["services"];
 var patchableParameterProperties = {
   color: true,
   plotType: true,
@@ -1218,156 +1207,78 @@ var timeseriesSelectServiceFilterChipsAdapter = createEntityAdapter({
   }
 });
 var initialState = {
-  plotPreset: undefined,
-  services: undefined,
-  timeseriesSelect: {
-    currentParameterInfo: undefined,
-    filters: {
-      searchFilter: '',
-      serviceFilterChips: timeseriesSelectServiceFilterChipsAdapter.getInitialState(),
-      allServiceFilterChipsEnabled: true
+  byId: {},
+  services: []
+};
+var createPanelState = function createPanelState() {
+  return {
+    plotPreset: undefined,
+    timeseriesSelect: {
+      currentParameterInfo: undefined,
+      filters: {
+        searchFilter: '',
+        serviceFilterChips: timeseriesSelectServiceFilterChipsAdapter.getInitialState(),
+        allServiceFilterChipsEnabled: true
+      },
+      servicePopup: {
+        isOpen: false,
+        variant: 'add'
+      }
     },
-    servicePopup: {
-      isOpen: false,
-      variant: 'add'
+    locationData: {
+      isMapPinDisabled: false,
+      shouldHideLocationMarkers: false,
+      isLegendVisible: true
     }
-  },
-  locationData: {
-    isMapPinDisabled: false,
-    shouldHideLocationMarkers: false,
-    isLegendVisible: true
-  }
+  };
 };
-var slice = createSlice({
-  initialState: initialState,
-  name: 'timeseries',
+var initialPanelState = createPanelState();
+var panelSlice = createSlice({
+  initialState: createPanelState(),
+  name: 'timeseriesPanel',
   reducers: {
     loadUserAddedTimeSeriesServices: function loadUserAddedTimeSeriesServices(draft, payloadAction) {
-      var _draft$services, _draft$services3;
-      // Make sure to initialize services to empty array (if not set)
-      if (!((_draft$services = draft.services) != null && _draft$services.length)) {
-        draft.services = [];
-      }
-      var newServices = [];
-      payloadAction.payload.forEach(function (service) {
-        var _draft$services2;
-        var existingService = (_draft$services2 = draft.services) == null ? void 0 : _draft$services2.find(function (el) {
-          return el.url === service.url;
+      var _draft$timeseriesSele, _draft$timeseriesSele2;
+      var servicesPayload = Array.isArray(payloadAction.payload) ? payloadAction.payload : payloadAction.payload.timeSeriesServices;
+      var existingIds = new Set((_draft$timeseriesSele = (_draft$timeseriesSele2 = draft.timeseriesSelect) == null ? void 0 : _draft$timeseriesSele2.filters.serviceFilterChips.ids) != null ? _draft$timeseriesSele : []);
+      var newServices = servicesPayload.map(function (service) {
+        var _service$scope;
+        var id = service.scope === 'system' ? service.id : generateServiceId();
+        return Object.assign({}, service, {
+          id: id,
+          scope: (_service$scope = service.scope) != null ? _service$scope : 'user'
         });
-        if (!existingService) {
-          var newService = Object.assign({}, service, {
-            id: service.scope === 'system' ? service.id : generateServiceId(),
-            scope: 'user'
-          });
-          newServices.push(newService);
-        }
-      });
-      (_draft$services3 = draft.services) == null || _draft$services3.push.apply(_draft$services3, newServices);
-      // Add filterchips for any new services that were added
-      timeSeriesReducer(draft, {
-        payload: newServices.map(function (service) {
-          return {
-            serviceId: service.id,
-            serviceName: service.name,
-            serviceUrl: service.url,
-            type: service.type,
-            scope: service.scope
-          };
-        }),
-        type: timeSeriesActions.setServiceFilterChipsInStore.type
+      }).filter(function (service) {
+        return !existingIds.has(service.id);
       });
+      if (newServices.length) {
+        panelSlice.caseReducers.setServiceFilterChipsInStore(draft, {
+          payload: newServices.map(function (service) {
+            return {
+              serviceId: service.id,
+              serviceName: service.name,
+              serviceUrl: service.url,
+              type: service.type,
+              scope: service.scope || 'user'
+            };
+          }),
+          type: timeSeriesActions.setServiceFilterChipsInStore.type
+        });
+      }
     },
     registerTimeSeriesPreset: function registerTimeSeriesPreset(draft, action) {
-      var _draft$services4, _timeSeriesPresetWith;
-      // Make sure to initialize services to empty array (if not set)
-      if (!((_draft$services4 = draft.services) != null && _draft$services4.length)) {
-        draft.services = [];
-      }
-      var newServicesAdded = [];
-      var timeSeriesPresetWithParameterIds = produce(action.payload, function (draftPreset) {
-        var _draftPreset$services;
-        if (!draftPreset.plotPreset) {
-          console.warn('missing draft plotpresets', draftPreset);
-          return;
-        }
-        // Make sure to initialize services to empty array (if not set)
-        if (!((_draftPreset$services = draftPreset.services) != null && _draftPreset$services.length)) {
-          draftPreset.services = [];
-        }
-        draftPreset.plotPreset.parameters.forEach(function (draftParameter) {
-          // Add parameter id to plotPreset.parameters
-          draftParameter.id = generateParameterId();
-          // Add opacity value to plotPreset.parameters
-          draftParameter.opacity = draftParameter.opacity || 70;
-          // Check if service is already in the services list
-          var serviceFromStore = getServiceById(draft.services, draftParameter.serviceId);
-          if (!serviceFromStore) {
-            var _draft$services5;
-            // The service is not in the store. Add it based on the preset
-            var serviceFromAction = getServiceById(draftPreset.services, draftParameter.serviceId);
-            if (!serviceFromAction) {
-              console.error("A parameter from the preset has a service with id " + draftParameter.serviceId + " which is not in the store or in the preset");
-              return;
-            }
-            // Now check if the url is already in the store, it might be there with a different id
-            var reUseAbleService = (_draft$services5 = draft.services) == null ? void 0 : _draft$services5.find(function (storeService) {
-              return storeService.url === serviceFromAction.url;
-            });
-            if (!reUseAbleService) {
-              var _draft$services6;
-              // The url and or serviceId were not yet in the services state
-              (_draft$services6 = draft.services) == null || _draft$services6.push(Object.assign({}, serviceFromAction, {
-                scope: 'system'
-              }));
-              newServicesAdded.push({
-                serviceId: serviceFromAction.id,
-                serviceUrl: serviceFromAction.url,
-                serviceName: serviceFromAction.name,
-                type: serviceFromAction.type,
-                scope: 'system'
-              });
-            } else {
-              // The same url is already in the store, but has the wrong id. Adjust the parameters serviceId.
-              draftParameter.serviceId = reUseAbleService.id;
-              // Make sure the service has correct scope as it might have been added by user previously
-              reUseAbleService.scope = 'system';
-            }
-          }
-        });
-      });
-      // Check if all the services from the preset are now in the store. Some services might not be used in the parameter.
-      timeSeriesPresetWithParameterIds == null || (_timeSeriesPresetWith = timeSeriesPresetWithParameterIds.services) == null || _timeSeriesPresetWith.forEach(function (serviceFromPreset) {
-        var _draft$services7;
-        var serviceFromAction = (_draft$services7 = draft.services) == null ? void 0 : _draft$services7.find(function (serviceFromStore) {
-          return serviceFromPreset.url === serviceFromStore.url;
-        });
-        // The service from the preset was not added yet because it was not used in any parameter
-        if (!serviceFromAction) {
-          var _draft$services8, _draft$services9;
-          // Check if the id was already taken, if it was generate a new one.
-          var uniqueServiceId = (_draft$services8 = draft.services) != null && _draft$services8.find(function (service) {
-            return serviceFromPreset.id === service.id;
-          }) ? generateServiceId() : serviceFromPreset.id;
-          // Finally push the new (and unused) service to the store
-          (_draft$services9 = draft.services) == null || _draft$services9.push(Object.assign({}, serviceFromPreset, {
-            id: uniqueServiceId,
-            scope: 'system'
-          }));
-          newServicesAdded.push({
-            serviceId: uniqueServiceId,
-            serviceUrl: serviceFromPreset.url,
-            serviceName: serviceFromPreset.name,
-            type: serviceFromPreset.type,
-            scope: 'system'
-          });
-        } else {
-          // Make sure the service has correct scope as it might have been added by user previously
-          serviceFromAction.scope = 'system';
-        }
+      var _action$payload$servi;
+      draft.plotPreset = action.payload.plotPreset;
+      var newServicesAdded = ((_action$payload$servi = action.payload.services) != null ? _action$payload$servi : []).map(function (service) {
+        return {
+          serviceId: service.id,
+          serviceUrl: service.url,
+          serviceName: service.name,
+          type: service.type,
+          scope: service.scope || 'system'
+        };
       });
-      draft.plotPreset = timeSeriesPresetWithParameterIds.plotPreset;
-      // Add filterchips for any new services that were added
-      timeSeriesReducer(draft, {
+      panelSlice.caseReducers.setServiceFilterChipsInStore(draft, {
         payload: newServicesAdded,
         type: timeSeriesActions.setServiceFilterChipsInStore.type
       });
@@ -1482,8 +1393,8 @@ var slice = createSlice({
     },
     // Select a filter chip - if this means all will be selected, ensure all gets set to selected
     setServiceFilterChipSelected: function setServiceFilterChipSelected(draft, action) {
-      var _draft$timeseriesSele;
-      var serviceFilterChipsById = (_draft$timeseriesSele = draft.timeseriesSelect) == null ? void 0 : _draft$timeseriesSele.filters.serviceFilterChips.entities;
+      var _draft$timeseriesSele3;
+      var serviceFilterChipsById = (_draft$timeseriesSele3 = draft.timeseriesSelect) == null ? void 0 : _draft$timeseriesSele3.filters.serviceFilterChips.entities;
       if (serviceFilterChipsById) {
         var activeServices = compact(Object.values(serviceFilterChipsById));
         var countSelectedServices = activeServices.filter(function (service) {
@@ -1491,7 +1402,10 @@ var slice = createSlice({
         }).length;
         var isAllServicesGoingToBeEnabled = countSelectedServices === activeServices.length - 1;
         if (isAllServicesGoingToBeEnabled) {
-          slice.caseReducers.setAllServiceFilterChipSelected(draft);
+          panelSlice.caseReducers.setAllServiceFilterChipSelected(draft, {
+            type: timeSeriesActions.setAllServiceFilterChipSelected.type,
+            payload: {}
+          });
           return;
         }
         var service = serviceFilterChipsById[action.payload.serviceId];
@@ -1499,7 +1413,7 @@ var slice = createSlice({
       }
     },
     // Select all filter chips
-    setAllServiceFilterChipSelected: function setAllServiceFilterChipSelected(draft) {
+    setAllServiceFilterChipSelected: function setAllServiceFilterChipSelected(draft, _action) {
       if (draft.timeseriesSelect) {
         var serviceFilterChipsById = draft.timeseriesSelect.filters.serviceFilterChips.entities;
         var servicesToTurnOn = compact(Object.values(serviceFilterChipsById)).filter(function (service) {
@@ -1533,6 +1447,10 @@ var slice = createSlice({
           };
         });
         timeseriesSelectServiceFilterChipsAdapter.updateMany(draft.timeseriesSelect.filters.serviceFilterChips, updates);
+        var selectedService = serviceFilterChipsById[action.payload.serviceId];
+        if (selectedService) {
+          selectedService.enabled = true;
+        }
         draft.timeseriesSelect.filters.allServiceFilterChipsEnabled = false;
       }
     },
@@ -1545,7 +1463,10 @@ var slice = createSlice({
         }).length;
         var isAllServicesGoingToBeDisabled = countPressedServices === 1;
         if (isAllServicesGoingToBeDisabled) {
-          slice.caseReducers.setAllServiceFilterChipSelected(draft);
+          panelSlice.caseReducers.setAllServiceFilterChipSelected(draft, {
+            type: timeSeriesActions.setAllServiceFilterChipSelected.type,
+            payload: {}
+          });
           return;
         }
         var service = serviceFilterChipsById[action.payload.serviceId];
@@ -1555,11 +1476,11 @@ var slice = createSlice({
     setServiceFilterChipsInStore: function setServiceFilterChipsInStore(draft, action) {
       action.payload.forEach(function (service) {
         if (draft.timeseriesSelect) {
-          var _draft$timeseriesSele2;
+          var _draft$timeseriesSele4;
           draft.timeseriesSelect.filters.serviceFilterChips.entities[service.serviceId] = {
             serviceId: service.serviceId,
             serviceName: service.serviceName || service.serviceId,
-            enabled: (_draft$timeseriesSele2 = draft.timeseriesSelect) == null ? void 0 : _draft$timeseriesSele2.filters.allServiceFilterChipsEnabled,
+            enabled: (_draft$timeseriesSele4 = draft.timeseriesSelect) == null ? void 0 : _draft$timeseriesSele4.filters.allServiceFilterChipsEnabled,
             scope: service.scope || 'system',
             type: service.type,
             serviceUrl: service.serviceUrl,
@@ -1586,90 +1507,41 @@ var slice = createSlice({
       }
     },
     addServices: function addServices(draft, action) {
-      var _draft$services0;
-      if (!((_draft$services0 = draft.services) != null && _draft$services0.length)) {
-        draft.services = action.payload.timeSeriesServices;
-      } else {
-        var filteredServices = action.payload.timeSeriesServices.reduce(function (acc, service) {
-          if (!draft.services.some(function (existingService) {
-            return existingService.url === service.url;
-          })) {
-            var hasDuplicateId = draft.services.some(function (existingService) {
-              return existingService.id === service.id;
-            });
-            if (hasDuplicateId) {
-              acc.push(Object.assign({}, service, {
-                id: generateServiceId()
-              }));
-            } else {
-              acc.push(service);
-            }
-          }
-          return acc;
-        }, []);
-        draft.services = [].concat(draft.services, filteredServices);
-      }
-      var newServicesAdded = draft.services.map(function (service) {
+      var newServicesAdded = action.payload.timeSeriesServices.map(function (service) {
         return {
           serviceId: service.id,
           serviceUrl: service.url,
           serviceName: service.name,
           type: service.type,
-          scope: 'system'
+          scope: service.scope || 'system'
         };
       });
       // Add filterchips for any new services that were added
-      timeSeriesReducer(draft, {
+      panelSlice.caseReducers.setServiceFilterChipsInStore(draft, {
         payload: newServicesAdded,
         type: timeSeriesActions.setServiceFilterChipsInStore.type
       });
     },
     upsertService: function upsertService(draft, action) {
-      var _draft$services1;
-      var newService = {
-        id: action.payload.id || generateServiceId(),
-        description: action.payload.description,
-        url: action.payload.url,
-        name: action.payload.name,
-        type: action.payload.type,
-        scope: 'user'
-      };
-      if (!((_draft$services1 = draft.services) != null && _draft$services1.length)) {
-        draft.services = [newService];
-      } else if (action.payload.isUpdate) {
-        var index = draft.services.findIndex(function (el) {
-          return el.id === action.payload.id;
-        });
-        if (index >= 0) {
-          draft.services[index] = newService;
-        }
-      } else {
-        draft.services = [].concat(draft.services, [newService]);
-      }
       // Add filterchips for any new services that were added
-      timeSeriesReducer(draft, {
+      panelSlice.caseReducers.setServiceFilterChipsInStore(draft, {
         payload: [{
-          serviceId: newService.id,
-          serviceUrl: newService.url,
-          serviceName: newService.name,
-          type: newService.type,
+          serviceId: action.payload.id || generateServiceId(),
+          serviceUrl: action.payload.url,
+          serviceName: action.payload.name,
+          type: action.payload.type,
           scope: 'user'
         }],
         type: timeSeriesActions.setServiceFilterChipsInStore.type
       });
     },
     removeService: function removeService(draft, action) {
-      if (draft.services) {
-        draft.services = draft.services.filter(function (el) {
-          return el.id !== action.payload.id;
-        });
-        timeSeriesReducer(draft, {
-          payload: action.payload,
-          type: timeSeriesActions.removeServiceFilterChipFromStore.type
-        });
-      }
+      panelSlice.caseReducers.removeServiceFilterChipFromStore(draft, {
+        payload: action.payload,
+        type: timeSeriesActions.removeServiceFilterChipFromStore.type
+      });
     },
-    closeServicePopup: function closeServicePopup(draft) {
+    closeServicePopup: function closeServicePopup(draft, _action) {
       if (draft.timeseriesSelect) {
         draft.timeseriesSelect.servicePopup.isOpen = false;
       }
@@ -1708,8 +1580,316 @@ var slice = createSlice({
     }
   }
 });
-var timeSeriesReducer = slice.reducer,
-  timeSeriesActions = slice.actions;
+var resetTimeSeriesPanels = createAction('timeseriesPanel/resetPanels');
+var timeSeriesActions = Object.assign({}, panelSlice.actions, {
+  resetTimeSeriesPanels: resetTimeSeriesPanels
+});
+var resolvePanelId = function resolvePanelId(action) {
+  var _action$payload3;
+  return (_action$payload3 = action.payload) == null ? void 0 : _action$payload3.panelId;
+};
+var normalizeTimeSeriesState = function normalizeTimeSeriesState(state) {
+  if ('byId' in state) {
+    return state;
+  }
+  var legacyServices = state.services || [];
+  state.services;
+    var panelState = _objectWithoutPropertiesLoose(state, _excluded$3);
+  return Object.assign({}, initialState, {
+    services: legacyServices,
+    byId: Object.assign({}, initialState.byId, {
+      "default": panelState
+    })
+  });
+};
+var toServiceFilterChip = function toServiceFilterChip(service) {
+  return {
+    serviceId: service.id,
+    serviceUrl: service.url,
+    serviceName: service.name,
+    type: service.type,
+    scope: service.scope || 'system'
+  };
+};
+var addServiceFilterChipsToPanel = function addServiceFilterChipsToPanel(panelState, servicesToAdd) {
+  var _panelState$timeserie;
+  if (!servicesToAdd.length) {
+    return panelState;
+  }
+  var existingChips = ((_panelState$timeserie = panelState.timeseriesSelect) == null ? void 0 : _panelState$timeserie.filters.serviceFilterChips.entities) || {};
+  var servicesMissingChips = servicesToAdd.filter(function (service) {
+    return !existingChips[service.id];
+  });
+  if (!servicesMissingChips.length) {
+    return panelState;
+  }
+  return panelSlice.reducer(panelState, timeSeriesActions.setServiceFilterChipsInStore(servicesMissingChips.map(toServiceFilterChip)));
+};
+var removeServiceFilterChipsFromPanel = function removeServiceFilterChipsFromPanel(panelState, serviceIdsToRemove) {
+  if (!serviceIdsToRemove.length) {
+    return panelState;
+  }
+  return serviceIdsToRemove.reduce(function (nextState, id) {
+    return panelSlice.reducer(nextState, timeSeriesActions.removeServiceFilterChipFromStore({
+      id: id
+    }));
+  }, panelState);
+};
+var timeSeriesReducer = function timeSeriesReducer(state, action) {
+  var _Object$assign2, _Object$assign3;
+  var normalizedState = normalizeTimeSeriesState(state != null ? state : initialState);
+  var isTimeSeriesAction = typeof action.type === 'string' && action.type.startsWith(panelSlice.name + "/");
+  if (action.type === resetTimeSeriesPanels.type) {
+    return Object.assign({}, normalizedState, {
+      byId: {}
+    });
+  }
+  if (!isTimeSeriesAction) {
+    return normalizedState;
+  }
+  var panelId = resolvePanelId(action);
+  var serviceActionTypes = new Set([timeSeriesActions.loadUserAddedTimeSeriesServices.type, timeSeriesActions.addServices.type, timeSeriesActions.upsertService.type, timeSeriesActions.removeService.type, timeSeriesActions.registerTimeSeriesPreset.type]);
+  var nextServices = normalizedState.services;
+  if (action.type === timeSeriesActions.loadUserAddedTimeSeriesServices.type) {
+    var payload = action.payload;
+    var servicesPayload = Array.isArray(payload) ? payload : payload.timeSeriesServices;
+    var newServices = [];
+    servicesPayload.forEach(function (service) {
+      var existingService = nextServices.find(function (el) {
+        return el.url === service.url;
+      });
+      if (!existingService) {
+        var _service$scope2;
+        newServices.push(Object.assign({}, service, {
+          id: service.scope === 'system' ? service.id : generateServiceId(),
+          scope: (_service$scope2 = service.scope) != null ? _service$scope2 : 'user'
+        }));
+      }
+    });
+    if (newServices.length) {
+      nextServices = [].concat(nextServices, newServices);
+    }
+  }
+  if (action.type === timeSeriesActions.addServices.type) {
+    var timeSeriesServices = action.payload.timeSeriesServices;
+    var filteredServices = timeSeriesServices.reduce(function (acc, service) {
+      if (!nextServices.some(function (existing) {
+        return existing.url === service.url;
+      })) {
+        var hasDuplicateId = nextServices.some(function (existing) {
+          return existing.id === service.id;
+        });
+        if (hasDuplicateId) {
+          acc.push(Object.assign({}, service, {
+            id: generateServiceId()
+          }));
+        } else {
+          acc.push(service);
+        }
+      }
+      return acc;
+    }, []);
+    if (filteredServices.length) {
+      nextServices = [].concat(nextServices, filteredServices);
+    }
+  }
+  if (action.type === timeSeriesActions.upsertService.type) {
+    var _payload = action.payload;
+    var newService = {
+      id: _payload.id || generateServiceId(),
+      description: _payload.description,
+      url: _payload.url,
+      name: _payload.name,
+      type: _payload.type,
+      scope: 'user'
+    };
+    if (_payload.isUpdate) {
+      var index = nextServices.findIndex(function (el) {
+        return el.id === _payload.id;
+      });
+      if (index >= 0) {
+        nextServices = [].concat(nextServices.slice(0, index), [newService], nextServices.slice(index + 1));
+      }
+    } else {
+      nextServices = [].concat(nextServices, [newService]);
+    }
+  }
+  if (action.type === timeSeriesActions.removeService.type) {
+    var id = action.payload.id;
+    nextServices = nextServices.filter(function (service) {
+      return service.id !== id;
+    });
+  }
+  var previousServices = normalizedState.services;
+  var addedServices = nextServices.filter(function (service) {
+    return !previousServices.some(function (existing) {
+      return existing.url === service.url;
+    });
+  });
+  var updatedServices = nextServices.filter(function (service) {
+    var previous = previousServices.find(function (existing) {
+      return existing.id === service.id;
+    });
+    return previous && (previous.name !== service.name || previous.url !== service.url || previous.type !== service.type || previous.scope !== service.scope);
+  });
+  var removedServiceIds = previousServices.filter(function (service) {
+    return !nextServices.some(function (existing) {
+      return existing.id === service.id;
+    });
+  }).map(function (service) {
+    return service.id;
+  });
+  var servicesToSync = [].concat(addedServices, updatedServices.filter(function (service) {
+    return !addedServices.some(function (added) {
+      return added.id === service.id;
+    });
+  }));
+  var syncServiceChipsAcrossPanels = function syncServiceChipsAcrossPanels(byId, overrideServicesToSync, overrideRemovedServiceIds) {
+    var servicesForSync = overrideServicesToSync != null ? overrideServicesToSync : servicesToSync;
+    var removedIdsForSync = removedServiceIds;
+    var shouldSync = servicesForSync.length > 0 || removedIdsForSync.length > 0;
+    if (!shouldSync) {
+      return byId;
+    }
+    var nextById = {};
+    var didChange = false;
+    Object.entries(byId).forEach(function (_ref) {
+      var id = _ref[0],
+        panelState = _ref[1];
+      var nextPanelState = panelState;
+      nextPanelState = addServiceFilterChipsToPanel(nextPanelState, servicesForSync);
+      nextPanelState = removeServiceFilterChipsFromPanel(nextPanelState, removedIdsForSync);
+      if (nextPanelState !== panelState) {
+        didChange = true;
+      }
+      nextById[id] = nextPanelState;
+    });
+    return didChange ? nextById : byId;
+  };
+  if (action.type === timeSeriesActions.registerTimeSeriesPreset.type) {
+    var _normalizedState$byId, _payload2$services, _Object$assign;
+    var _payload2 = action.payload;
+    if (!panelId) {
+      return Object.assign({}, normalizedState, {
+        services: nextServices,
+        byId: syncServiceChipsAcrossPanels(normalizedState.byId)
+      });
+    }
+    var _currentPanelState = (_normalizedState$byId = normalizedState.byId[panelId]) != null ? _normalizedState$byId : createPanelState();
+    var newServicesAdded = [];
+    var presetServices = (_payload2$services = _payload2.services) != null ? _payload2$services : [];
+    var timeSeriesPresetWithParameterIds = produce(_payload2, function (draftPreset) {
+      draftPreset.plotPreset.parameters.forEach(function (draftParameter) {
+        draftParameter.id = generateParameterId();
+        draftParameter.opacity = draftParameter.opacity || 70;
+        var serviceFromStore = getServiceById(nextServices, draftParameter.serviceId);
+        if (!serviceFromStore) {
+          var serviceFromPreset = getServiceById(presetServices, draftParameter.serviceId);
+          if (!serviceFromPreset) {
+            console.error("A parameter from the preset has a service with id " + draftParameter.serviceId + " which is not in the store or in the preset");
+            return;
+          }
+          var reUseAbleService = nextServices.find(function (storeService) {
+            return storeService.url === serviceFromPreset.url;
+          });
+          if (!reUseAbleService) {
+            nextServices = [].concat(nextServices, [Object.assign({}, serviceFromPreset, {
+              scope: 'system'
+            })]);
+            newServicesAdded.push({
+              serviceId: serviceFromPreset.id,
+              serviceUrl: serviceFromPreset.url,
+              serviceName: serviceFromPreset.name,
+              type: serviceFromPreset.type,
+              scope: 'system'
+            });
+          } else {
+            draftParameter.serviceId = reUseAbleService.id;
+            nextServices = nextServices.map(function (service) {
+              return service.id === reUseAbleService.id ? Object.assign({}, service, {
+                scope: 'system'
+              }) : service;
+            });
+          }
+        }
+      });
+    });
+    presetServices.forEach(function (serviceFromPreset) {
+      var serviceFromStore = nextServices.find(function (service) {
+        return service.url === serviceFromPreset.url;
+      });
+      if (!serviceFromStore) {
+        var uniqueServiceId = nextServices.some(function (service) {
+          return service.id === serviceFromPreset.id;
+        }) ? generateServiceId() : serviceFromPreset.id;
+        nextServices = [].concat(nextServices, [Object.assign({}, serviceFromPreset, {
+          id: uniqueServiceId,
+          scope: 'system'
+        })]);
+        newServicesAdded.push({
+          serviceId: uniqueServiceId,
+          serviceUrl: serviceFromPreset.url,
+          serviceName: serviceFromPreset.name,
+          type: serviceFromPreset.type,
+          scope: 'system'
+        });
+      } else {
+        nextServices = nextServices.map(function (service) {
+          return service.id === serviceFromStore.id ? Object.assign({}, service, {
+            scope: 'system'
+          }) : service;
+        });
+      }
+    });
+    var _nextPanelState = produce(_currentPanelState, function (draft) {
+      draft.plotPreset = timeSeriesPresetWithParameterIds.plotPreset;
+      panelSlice.caseReducers.setServiceFilterChipsInStore(draft, {
+        payload: newServicesAdded,
+        type: timeSeriesActions.setServiceFilterChipsInStore.type
+      });
+    });
+    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) {
+      return nextServices.find(function (nextService) {
+        return nextService.id === service.serviceId;
+      });
+    }), presetServices.map(function (service) {
+      return nextServices.find(function (nextService) {
+        return nextService.url === service.url || nextService.id === service.id;
+      });
+    })).filter(function (service) {
+      return !!service;
+    }).map(function (service) {
+      return [service.id, service];
+    })).values());
+    return Object.assign({}, normalizedState, {
+      services: nextServices,
+      byId: syncServiceChipsAcrossPanels(updatedById, servicesToSyncFromPreset)
+    });
+  }
+  if (!panelId) {
+    if (serviceActionTypes.has(action.type)) {
+      return Object.assign({}, normalizedState, {
+        services: nextServices,
+        byId: syncServiceChipsAcrossPanels(normalizedState.byId)
+      });
+    }
+    return normalizedState;
+  }
+  var currentPanelState = normalizedState.byId[panelId];
+  var basePanelState = currentPanelState != null ? currentPanelState : createPanelState();
+  if (normalizedState.services.length) {
+    basePanelState = addServiceFilterChipsToPanel(basePanelState, normalizedState.services);
+  }
+  var nextPanelState = panelSlice.reducer(basePanelState, action);
+  if (nextPanelState === currentPanelState && nextServices === normalizedState.services) {
+    return normalizedState;
+  }
+  return Object.assign({}, normalizedState, {
+    services: nextServices,
+    byId: serviceActionTypes.has(action.type) ? syncServiceChipsAcrossPanels(Object.assign({}, normalizedState.byId, (_Object$assign2 = {}, _Object$assign2[panelId] = nextPanelState, _Object$assign2))) : Object.assign({}, normalizedState.byId, (_Object$assign3 = {}, _Object$assign3[panelId] = nextPanelState, _Object$assign3))
+  });
+};
 var generateTimeSeriesId = function generateTimeSeriesId() {
   return "timeseriesid_" + v4();
 };
@@ -1737,20 +1917,36 @@ var generateServiceId = function generateServiceId() {
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var getPlotState = function getPlotState(state) {
-  var _state$timeSeries;
-  return (_state$timeSeries = state.timeSeries) == null ? void 0 : _state$timeSeries.plotPreset;
+var getPanelState = function getPanelState(state, panelId) {
+  var timeSeriesState = state.timeSeries;
+  if (!timeSeriesState) {
+    return undefined;
+  }
+  if ('byId' in timeSeriesState) {
+    var _timeSeriesState$byId;
+    if (!panelId) {
+      return undefined;
+    }
+    return (_timeSeriesState$byId = timeSeriesState.byId) == null ? void 0 : _timeSeriesState$byId[panelId];
+  }
+  return timeSeriesState;
 };
-var getTimeSeriesState = function getTimeSeriesState(state) {
-  return state.timeSeries;
+var getPlotState = function getPlotState(state, panelId) {
+  var _getPanelState;
+  return (_getPanelState = getPanelState(state, panelId)) == null ? void 0 : _getPanelState.plotPreset;
 };
-var getMapId = function getMapId(state) {
-  var _state$timeSeries2;
-  return (_state$timeSeries2 = state.timeSeries) == null || (_state$timeSeries2 = _state$timeSeries2.plotPreset) == null ? void 0 : _state$timeSeries2.mapId;
+var getTimeSeriesState = function getTimeSeriesState(state, panelId) {
+  return getPanelState(state, panelId);
 };
-var getPlotWithParameters = createSelector(getPlotState, function (_, selectPlotId) {
+var getMapId = function getMapId(state, panelId) {
+  var _getPanelState2;
+  return (_getPanelState2 = getPanelState(state, panelId)) == null || (_getPanelState2 = _getPanelState2.plotPreset) == null ? void 0 : _getPanelState2.mapId;
+};
+var getPlotWithParameters = createSelector([function (state, _selectPlotId, panelId) {
+  return getPlotState(state, panelId);
+}, function (_, selectPlotId) {
   return selectPlotId;
-}, function (plotPreset, selectPlotId) {
+}], function (plotPreset, selectPlotId) {
   if (!plotPreset || !selectPlotId) {
     return undefined;
   }
@@ -1767,13 +1963,26 @@ var getPlotWithParameters = createSelector(getPlotState, function (_, selectPlot
     parameters: parameters
   });
 });
-var getService = createSelector(getTimeSeriesState, function (_, serviceId) {
+var getService = createSelector([function (state, _serviceId, _panelId) {
+  return state.timeSeries;
+}, function (_, serviceId) {
   return serviceId;
-}, function (timeSeriesState, serviceId) {
-  return timeSeriesState != null && timeSeriesState.services ? getServiceById(timeSeriesState.services, serviceId) : undefined;
+}], function (timeSeriesState, serviceId) {
+  if (!timeSeriesState || !('byId' in timeSeriesState)) {
+    return undefined;
+  }
+  return getServiceById(timeSeriesState.services || [], serviceId);
 });
-var getServices = createSelector(getTimeSeriesState, function (timeSeriesState) {
-  return timeSeriesState == null ? void 0 : timeSeriesState.services;
+var getServices = createSelector([function (state, _panelId) {
+  return state.timeSeries;
+}], function (timeSeriesState) {
+  if (!timeSeriesState) {
+    return [];
+  }
+  if ('byId' in timeSeriesState) {
+    return timeSeriesState.services;
+  }
+  return [];
 }, selectorMemoizationOptions);
 /**
  * Returns search filter string
@@ -1805,18 +2014,31 @@ var getParametersInUse = createSelector(getTimeSeriesState, function (store) {
  * @returns {ActiveServiceObjectEntities} returnType: ActiveServiceObjectEntitiesobject of active services
  */
 // cast to usable type - selectEntities returns Dictionary<ActiveServiceObject> which is not usable inside of the code
-var getServiceFilterChips = function getServiceFilterChips(store) {
-  return getServiceFilterChipsDictionary(store);
-};
-var _timeseriesSelectServ = timeseriesSelectServiceFilterChipsAdapter.getSelectors(function (store) {
-    var _store$timeSeries;
-    return (store == null || (_store$timeSeries = store.timeSeries) == null || (_store$timeSeries = _store$timeSeries.timeseriesSelect) == null || (_store$timeSeries = _store$timeSeries.filters) == null ? void 0 : _store$timeSeries.serviceFilterChips) || {
-      entities: {},
-      ids: []
-    };
-  }),
-  getServiceFilterChipsDictionary = _timeseriesSelectServ.selectEntities,
-  getServiceFilterChipsById = _timeseriesSelectServ.selectById;
+var getServiceFilterChipsState = function getServiceFilterChipsState(store, panelId) {
+  var _getTimeSeriesState;
+  return ((_getTimeSeriesState = getTimeSeriesState(store, panelId)) == null || (_getTimeSeriesState = _getTimeSeriesState.timeseriesSelect) == null || (_getTimeSeriesState = _getTimeSeriesState.filters) == null ? void 0 : _getTimeSeriesState.serviceFilterChips) || {
+    entities: {},
+    ids: []
+  };
+};
+var makeServiceFilterChipsSelectors = function makeServiceFilterChipsSelectors(panelId) {
+  return timeseriesSelectServiceFilterChipsAdapter.getSelectors(function (store) {
+    return getServiceFilterChipsState(store, panelId);
+  });
+};
+var getServiceFilterChips = function getServiceFilterChips(store, panelId) {
+  return makeServiceFilterChipsSelectors(panelId).selectEntities(store);
+};
+var getServiceFilterChipsById = function getServiceFilterChipsById(store, id, panelId) {
+  return makeServiceFilterChipsSelectors(panelId).selectById(store, id);
+};
+/**
+ * Returns whether all service filter chips are enabled
+ *
+ * Example getAllFilterChipsEnabled(store);
+ * @param {object} store store: object - store object
+ * @returns {boolean} returnType: boolean
+ */
 var getAllFilterChipsEnabled = createSelector(getTimeSeriesState, function (store) {
   var _store$timeseriesSele2;
   return (store == null || (_store$timeseriesSele2 = store.timeseriesSelect) == null || (_store$timeseriesSele2 = _store$timeseriesSele2.filters) == null ? void 0 : _store$timeseriesSele2.allServiceFilterChipsEnabled) || false;
@@ -1860,9 +2082,11 @@ var getParameterInfoParameter = createSelector(getTimeSeriesState, function (sto
  * @param {string} parameterId parameterId
  * @returns {Parameter} returnType: Parameter
  */
-var getParameterById = createSelector(getTimeSeriesState, function (store, parameterId) {
-  return parameterId;
+var getParameterById = createSelector([function (store, _parameterId, panelId) {
+  return getTimeSeriesState(store, panelId);
 }, function (store, parameterId) {
+  return parameterId;
+}], function (store, parameterId) {
   if (store != null && store.plotPreset) {
     var _store$plotPreset$par2;
     return (_store$plotPreset$par2 = store.plotPreset.parameters) == null ? void 0 : _store$plotPreset$par2.find(function (parameter) {
@@ -1873,7 +2097,7 @@ var getParameterById = createSelector(getTimeSeriesState, function (store, param
 });
 var getServicePopupDetails = createSelector(getTimeSeriesState, function (store) {
   var _store$timeseriesSele6;
-  return (store == null || (_store$timeseriesSele6 = store.timeseriesSelect) == null ? void 0 : _store$timeseriesSele6.servicePopup) || initialState.timeseriesSelect.servicePopup;
+  return (store == null || (_store$timeseriesSele6 = store.timeseriesSelect) == null ? void 0 : _store$timeseriesSele6.servicePopup) || initialPanelState.timeseriesSelect.servicePopup;
 });
 var getTimeSeriesPreset = createSelector(getPlotState, getServices, function (plotState, services) {
   if (!plotState || !services) {
@@ -1961,6 +2185,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getIsLegendVisible: getIsLegendVisible,
   getIsMapPinDisabled: getIsMapPinDisabled,
   getMapId: getMapId,
+  getPanelState: getPanelState,
   getParameterById: getParameterById,
   getParameterInfoParameter: getParameterInfoParameter,
   getParametersInUse: getParametersInUse,
@@ -1970,7 +2195,6 @@ var selectors = /*#__PURE__*/Object.freeze({
   getService: getService,
   getServiceFilterChips: getServiceFilterChips,
   getServiceFilterChipsById: getServiceFilterChipsById,
-  getServiceFilterChipsDictionary: getServiceFilterChipsDictionary,
   getServicePopupDetails: getServicePopupDetails,
   getServices: getServices,
   getShouldHideLocationMarkers: getShouldHideLocationMarkers,
@@ -2008,47 +2232,50 @@ var types = /*#__PURE__*/Object.freeze({
 
 var ParameterInfoButtonConnect = function ParameterInfoButtonConnect(_ref) {
   var parameter = _ref.parameter,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
+    panelId = _ref.panelId;
   var dispatch = useDispatch();
+  var currentSourcePanelId = useSelector(function (store) {
+    return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeSeriesInfo);
+  });
   var isOpenInStore = useSelector(function (store) {
     return uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.TimeSeriesInfo);
   });
   var currentParameterDisplayed = useSelector(function (store) {
-    return getParameterInfoParameter(store);
+    return getParameterInfoParameter(store, panelId);
   });
   var isActive = parameter.id ? parameter.id === (currentParameterDisplayed == null ? void 0 : currentParameterDisplayed.id) : parameter.propertyName === (currentParameterDisplayed == null ? void 0 : currentParameterDisplayed.propertyName) && parameter.serviceId === (currentParameterDisplayed == null ? void 0 : currentParameterDisplayed.serviceId) && parameter.collectionId === (currentParameterDisplayed == null ? void 0 : currentParameterDisplayed.collectionId);
   var toggleInfoDialog = React.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
+    dispatch(uiActions.setToggleOpenDialog({
       type: uiTypes.DialogTypes.TimeSeriesInfo,
-      mapId: '',
-      setOpen: !isOpenInStore,
-      source: source
+      setOpen: currentSourcePanelId !== panelId ? true : !isOpenInStore,
+      sourcePanelId: panelId
     }));
-  }, [dispatch, isOpenInStore, source]);
+  }, [dispatch, isOpenInStore, currentSourcePanelId, panelId]);
   var setCurrentParameterInfoDisplayed = React.useCallback(function () {
     dispatch(timeSeriesActions.setCurrentParameterInfoDisplayed({
+      panelId: panelId,
       parameter: parameter.id || parameter
     }));
     dispatch(uiActions.orderDialog({
       type: uiTypes.DialogTypes.TimeSeriesInfo
     }));
-  }, [dispatch, parameter]);
+  }, [dispatch, panelId, parameter]);
+  var isOpenForPanel = isOpenInStore && currentSourcePanelId === panelId;
   var onClick = useCallback(function () {
     if (isActive) {
       toggleInfoDialog();
     }
-    if (!isActive && isOpenInStore) {
+    if (!isActive && isOpenForPanel) {
       setCurrentParameterInfoDisplayed();
     }
-    if (!isActive && !isOpenInStore) {
+    if (!isActive && !isOpenForPanel) {
       setCurrentParameterInfoDisplayed();
       toggleInfoDialog();
     }
-  }, [isActive, toggleInfoDialog, isOpenInStore, setCurrentParameterInfoDisplayed]);
+  }, [isActive, toggleInfoDialog, isOpenForPanel, setCurrentParameterInfoDisplayed]);
   return jsx(ParameterInfoButton, {
     isActive: isActive,
-    isOpenInStore: isOpenInStore,
+    isOpenInStore: isOpenForPanel,
     onClick: onClick
   });
 };
@@ -3027,7 +3254,7 @@ var useGetCollectionsAndInstanceDetails = function useGetCollectionsAndInstanceD
     }
   });
 };
-var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selectedLocation, services, splitGeoJsonByCollection, t) {
+var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState) {
   var _useState = useState([]),
     plotsWithData = _useState[0],
     setPlotsWithData = _useState[1];
@@ -3060,7 +3287,7 @@ var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selecte
       };
       // Construct timeinterval that needs to be fetched
       // Create here so if new data is advertised by the collection/instance a new request is made
-      var intervalParam = constructTimeInterval(collection, instanceInfo);
+      var intervalParam = constructTimeInterval(collection, instanceInfo, syncgroupTimeState);
       return {
         queryKey: generateTimeSeriesQueryKeys(['get-parameter-data', 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 () {
@@ -3099,7 +3326,7 @@ var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selecte
         retry: false
       };
     });
-  }, [collectionDetails, geojsonMap, plotsWithoutData.parameters, selectedLocation, collectionsList, isDetailsFetching]);
+  }, [plotsWithoutData.parameters, collectionsList, collectionDetails, syncgroupTimeState, selectedLocation, isDetailsFetching, geojsonMap]);
   var results = useQueries({
     queries: queries,
     combine: function combine(results) {
@@ -3417,7 +3644,8 @@ var ParameterNameSelect = function ParameterNameSelect(_ref) {
 };
 
 var TimeSeriesManagerRowAccordion = function TimeSeriesManagerRowAccordion(_ref) {
-  var plotIsEnabled = _ref.plotIsEnabled,
+  var panelId = _ref.panelId,
+    plotIsEnabled = _ref.plotIsEnabled,
     rowIsEnabled = _ref.rowIsEnabled,
     parameter = _ref.parameter,
     styles = _ref.styles,
@@ -3540,6 +3768,7 @@ var TimeSeriesManagerRowAccordion = function TimeSeriesManagerRowAccordion(_ref)
           },
           children: [jsx(Grid, {
             children: jsx(ParameterInfoButtonConnect, {
+              panelId: panelId,
               parameter: parameter
             })
           }), jsx(Grid, {
@@ -3624,7 +3853,8 @@ var RowLayout = function RowLayout(_ref) {
 
 var ParameterList = function ParameterList(_ref) {
   var _plot$parameters, _plot$parameters2;
-  var plot = _ref.plot,
+  var panelId = _ref.panelId,
+    plot = _ref.plot,
     plotIsEnabled = _ref.plotIsEnabled,
     deleteParameter = _ref.deleteParameter,
     toggleParameter = _ref.toggleParameter,
@@ -3666,6 +3896,7 @@ var ParameterList = function ParameterList(_ref) {
         children: [jsx(Box, {
           className: "medium-timeseriesmanager",
           children: jsx(TimeSeriesManagerRowAccordion, {
+            panelId: panelId,
             addParameter: addParameter,
             deleteParameter: deleteParameter,
             parameter: parameter,
@@ -3681,6 +3912,7 @@ var ParameterList = function ParameterList(_ref) {
             container: true,
             justifyContent: "space-between",
             children: [jsx(ParameterInfoButtonConnect, {
+              panelId: panelId,
               parameter: parameter
             }), ' ', jsx(CustomIconButton, {
               "data-testid": "duplicateButton",
@@ -3792,36 +4024,36 @@ var TimeSeriesSelectButtonConnect = function TimeSeriesSelectButtonConnect(_ref)
     onClick = _ref.onClick,
     t = _ref.t,
     plotId = _ref.plotId,
-    selectPlotId = _ref.selectPlotId;
+    selectPlotId = _ref.selectPlotId,
+    panelId = _ref.panelId;
   var dispatch = useDispatch();
-  var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.TimeSeriesSelect);
+  var currentSourcePanelId = useSelector(function (store) {
+    return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeSeriesSelect);
   });
   var isOpenInStore = useSelector(function (store) {
     return uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.TimeSeriesSelect);
   });
-  var mapId = useSelector(getMapId);
   var handleClick = function handleClick() {
     onClick();
-    var openDialogForDifferentMap = currentActiveMapId !== mapId;
-    var dialogIsNotOpenForCurrentMap = openDialogForDifferentMap || !isOpenInStore;
-    if (dialogIsNotOpenForCurrentMap) {
-      dispatch(uiActions.setActiveMapIdForDialog({
+    var openDialogForDifferentPanel = currentSourcePanelId !== panelId;
+    var dialogIsNotOpenForCurrentPanel = openDialogForDifferentPanel || !isOpenInStore;
+    if (dialogIsNotOpenForCurrentPanel) {
+      dispatch(uiActions.setToggleOpenDialog({
         type: uiTypes.DialogTypes.TimeSeriesSelect,
-        mapId: mapId,
         setOpen: true,
-        source: 'app'
+        sourcePanelId: panelId
       }));
     }
   };
   var isSelectOpenForCurrentPlot = plotId === selectPlotId;
+  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: !!isOpenInStore && isSelectOpenForCurrentPlot,
+      selected: !!isOpenForPanel && isSelectOpenForCurrentPlot,
       sx: {
         marginLeft: '4px',
         height: '24px!important',
@@ -3838,7 +4070,8 @@ var TimeSeriesSelectButtonConnect = function TimeSeriesSelectButtonConnect(_ref)
 };
 
 var PlotRows = function PlotRows(_ref) {
-  var plot = _ref.plot,
+  var panelId = _ref.panelId,
+    plot = _ref.plot,
     rowIndex = _ref.rowIndex,
     showTooltip = _ref.showTooltip,
     deletePlot = _ref.deletePlot,
@@ -3903,6 +4136,7 @@ var PlotRows = function PlotRows(_ref) {
         onClick: function onClick() {
           return setSelectPlotId(plot.plotId);
         },
+        panelId: panelId,
         plotId: plot.plotId,
         selectPlotId: selectPlotId,
         t: t
@@ -3982,6 +4216,7 @@ var PlotRows = function PlotRows(_ref) {
       timeout: "auto",
       unmountOnExit: true,
       children: jsx(ParameterList, {
+        panelId: panelId,
         addParameter: addParameter,
         deleteParameter: deleteParameter,
         moveParameter: moveParameter,
@@ -4084,7 +4319,8 @@ var timeSeriesManagerStyle = {
   }
 };
 var TimeSeriesManager = function TimeSeriesManager(_ref) {
-  var onClose = _ref.onClose,
+  var panelId = _ref.panelId,
+    onClose = _ref.onClose,
     isOpen = _ref.isOpen,
     onMouseDown = _ref.onMouseDown,
     order = _ref.order,
@@ -4220,6 +4456,7 @@ var TimeSeriesManager = function TimeSeriesManager(_ref) {
             addParameter: addParameter,
             deleteParameter: deleteParameter,
             deletePlot: deletePlot,
+            panelId: panelId,
             moveParameter: moveParameter,
             patchParameter: patchParameter,
             plot: plot,
@@ -4506,7 +4743,12 @@ var ParameterInfoList = function ParameterInfoList(_ref6) {
 
 var ParameterInfoDialogConnect = function ParameterInfoDialogConnect() {
   var _collection$dataQueri;
-  var currentParameterInfoDisplayed = useSelector(getParameterInfoParameter);
+  var panelId = useSelector(function (store) {
+    return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeSeriesInfo);
+  });
+  var currentParameterInfoDisplayed = useSelector(function (store) {
+    return getParameterInfoParameter(store, panelId);
+  });
   var relatedService = useSelector(function (store) {
     return getService(store, (currentParameterInfoDisplayed == null ? void 0 : currentParameterInfoDisplayed.serviceId) || '');
   }) || {
@@ -4788,30 +5030,34 @@ var Rows = function Rows(_ref2) {
   });
 };
 
-var ServiceOptionsButtonConnect = function ServiceOptionsButtonConnect() {
+var ServiceOptionsButtonConnect = function ServiceOptionsButtonConnect(_ref) {
+  var panelId = _ref.panelId;
   var dispatch = useDispatch();
   var services = useSelector(function (store) {
     return getServices(store);
   });
   var parametersInUse = useSelector(function (store) {
-    return getParametersInUse(store);
+    return getParametersInUse(store, panelId);
   });
   var openNewServicePopup = React.useCallback(function () {
     dispatch(timeSeriesActions.setServicePopup({
+      panelId: panelId,
       isOpen: true,
       variant: 'add'
     }));
-  }, [dispatch]);
+  }, [dispatch, panelId]);
   var openServicePopup = React.useCallback(function (variant, serviceId, url) {
     dispatch(timeSeriesActions.setServicePopup({
+      panelId: panelId,
       isOpen: true,
       variant: variant,
       serviceId: serviceId,
       url: url
     }));
-  }, [dispatch]);
+  }, [dispatch, panelId]);
   var removeService = React.useCallback(function (id, message) {
     dispatch(timeSeriesActions.removeService({
+      panelId: panelId,
       id: id
     }));
     if (message) {
@@ -4820,7 +5066,7 @@ var ServiceOptionsButtonConnect = function ServiceOptionsButtonConnect() {
         message: message
       }));
     }
-  }, [dispatch]);
+  }, [dispatch, panelId]);
   return jsx(ToggleMenu, {
     menuPosition: "bottom",
     children: jsx(ServiceOptionsDialog, {
@@ -5273,6 +5519,7 @@ var ServicePopup = function ServicePopup(props) {
 // when the dialog is open
 var ServicePopupDialogConnect = function ServicePopupDialogConnect(_ref) {
   var isOpen = _ref.isOpen,
+    panelId = _ref.panelId,
     _ref$serviceId = _ref.serviceId,
     serviceId = _ref$serviceId === void 0 ? '' : _ref$serviceId,
     variant = _ref.variant,
@@ -5287,13 +5534,15 @@ var ServicePopupDialogConnect = function ServicePopupDialogConnect(_ref) {
     return getService(store, serviceId);
   });
   var popupState = useSelector(function (store) {
-    return getServicePopupDetails(store);
+    return getServicePopupDetails(store, panelId);
   });
   var serviceSetService = React.useCallback(function (payload) {
-    dispatch(timeSeriesActions.upsertService(Object.assign({}, payload, {
+    dispatch(timeSeriesActions.upsertService(Object.assign({
+      panelId: panelId
+    }, payload, {
       isUpdate: popupState.variant === 'edit'
     })));
-  }, [dispatch, popupState]);
+  }, [dispatch, panelId, popupState]);
   var showSnackbar = React.useCallback(function (message) {
     dispatch(snackbarActions.openSnackbar({
       type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
@@ -5313,23 +5562,27 @@ var ServicePopupDialogConnect = function ServicePopupDialogConnect(_ref) {
   });
 };
 
-var ServicePopupConnect = function ServicePopupConnect() {
+var ServicePopupConnect = function ServicePopupConnect(_ref) {
+  var panelId = _ref.panelId;
   var dispatch = useDispatch();
   var _useSelector = useSelector(function (store) {
-      return getServicePopupDetails(store);
+      return getServicePopupDetails(store, panelId);
     }),
     isOpen = _useSelector.isOpen,
     url = _useSelector.url,
     serviceId = _useSelector.serviceId,
     variant = _useSelector.variant;
   var setServicePopupClosed = React.useCallback(function () {
-    dispatch(timeSeriesActions.closeServicePopup());
-  }, [dispatch]);
+    dispatch(timeSeriesActions.closeServicePopup({
+      panelId: panelId
+    }));
+  }, [dispatch, panelId]);
   if (!isOpen) {
     return null;
   }
   return jsx(ServicePopupDialogConnect, {
     isOpen: isOpen,
+    panelId: panelId,
     serviceId: serviceId,
     setServicePopupClosed: setServicePopupClosed,
     url: url,
@@ -5337,15 +5590,17 @@ var ServicePopupConnect = function ServicePopupConnect() {
   });
 };
 
-var SearchFieldConnect = function SearchFieldConnect() {
+var SearchFieldConnect = function SearchFieldConnect(_ref) {
+  var panelId = _ref.panelId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
   var searchFilter = useSelector(function (state) {
-    return getSearchFilter(state);
+    return getSearchFilter(state, panelId);
   });
   var toggleServicePopup = function toggleServicePopup(url) {
     dispatch(timeSeriesActions.setServicePopup({
+      panelId: panelId,
       isOpen: true,
       url: url,
       variant: 'save'
@@ -5353,7 +5608,8 @@ var SearchFieldConnect = function SearchFieldConnect() {
   };
   var setSearchFilter = function setSearchFilter(filterText) {
     dispatch(timeSeriesActions.setSearchFilter({
-      filterText: filterText
+      filterText: filterText,
+      panelId: panelId
     }));
   };
   return jsx(SearchField, {
@@ -5424,12 +5680,211 @@ var filterCollectionsParametersFromService = function filterCollectionsParameter
   }, []);
 };
 
-var DEFAULT_DIALOG_HEIGHT = 500;
-var DEFAULT_PADDING_TOP = 6;
-var DEFAULT_RESULTS_HEIGHT = 22;
-var DEFAULT_COLLECTION_ROW_HEIGHT = 48; // listItem height + 4px marginTop
-var DEFAULT_PARAMETER_ROW_HEIGHT = 34; // listItem height
-var DEFAULT_PARAMTER_LIST_PADDING_BOTTOM = 0;
+var RowComponent$1 = function RowComponent(_ref) {
+  var index = _ref.index,
+    style = _ref.style,
+    filteredCollectionList = _ref.filteredCollectionList,
+    collectionListItemDetails = _ref.collectionListItemDetails,
+    setCollectionListItemDetails = _ref.setCollectionListItemDetails,
+    handleAddOrRemoveClick = _ref.handleAddOrRemoveClick,
+    searchFilter = _ref.searchFilter,
+    panelId = _ref.panelId,
+    selectPlot = _ref.selectPlot,
+    t = _ref.t;
+  var collectionListItem = filteredCollectionList[index];
+  var collectionId = collectionListItem.collectionId;
+  return jsxs(Box, {
+    style: style,
+    children: [jsx(ListItem, {
+      sx: {
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        height: '44px',
+        marginTop: 0.5,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderRadius: '3px',
+        padding: 0,
+        zIndex: 10,
+        overflow: 'hidden',
+        borderColor: 'geowebColors.cards.cardContainerBorder',
+        '.MuiListItemText-primary': {
+          fontSize: '12px',
+          fontWeight: 500,
+          textOverflow: 'ellipsis',
+          overflow: 'hidden'
+        }
+      },
+      children: jsxs(ListItemButton, {
+        onClick: function onClick() {
+          var _Object$assign;
+          var currentState = collectionListItemDetails[collectionId];
+          setCollectionListItemDetails(Object.assign({}, collectionListItemDetails, (_Object$assign = {}, _Object$assign[collectionId] = !currentState, _Object$assign)));
+        },
+        sx: {
+          height: '100%',
+          paddingLeft: '24px',
+          paddingRight: '8px'
+        },
+        children: [jsxs(Grid, {
+          container: true,
+          size: "grow",
+          sx: {
+            justifyContent: 'space-between',
+            alignItems: 'center'
+          },
+          children: [jsxs(Grid, {
+            size: "grow",
+            children: [jsx(Box, {
+              sx: fontStyling(),
+              children: jsx(SearchHighlight, {
+                search: searchFilter,
+                text: collectionListItem.collectionTitle || collectionListItem.collectionId
+              })
+            }), jsx(Box, {
+              sx: fontStyling(false),
+              children: jsx(SearchHighlight, {
+                search: searchFilter,
+                text: collectionListItem.serviceName
+              })
+            })]
+          }), jsx(Grid, {
+            children: jsx(ListItemText, {
+              primary: collectionListItem.parameters.length + " " + t('timeseries-results'),
+              sx: {
+                paddingLeft: 1,
+                paddingRight: 5,
+                textAlign: 'right'
+              }
+            })
+          })]
+        }), collectionListItemDetails[collectionId] ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})]
+      })
+    }), jsx(Collapse, {
+      "in": collectionListItemDetails[collectionId],
+      unmountOnExit: true,
+      children: jsxs(List, {
+        sx: {
+          paddingBottom: DEFAULT_PARAMTER_LIST_PADDING_BOTTOM + "px",
+          paddingTop: 0,
+          backgroundColor: 'geowebColors.cards.cardContainer',
+          borderWidth: DEFAULT_PARAMTER_LIST_BORDER_BOTTOM + "px",
+          borderStyle: 'none solid solid solid',
+          borderColor: 'geowebColors.cards.cardContainerBorder',
+          borderBottomLeftRadius: '3px',
+          borderBottomRightRadius: '3px',
+          boxShadow: 1,
+          top: -5
+        },
+        children: [(collectionListItem == null ? void 0 : collectionListItem.parameters.length) < 1 && jsx(ListItem, {
+          role: "listitem",
+          sx: {
+            height: DEFAULT_PARAMETER_ROW_HEIGHT + 4 + "px",
+            minHeight: '36px',
+            paddingLeft: '40px',
+            paddingRight: '4px',
+            paddingTop: '13px',
+            ' .MuiListItemText-primary': {
+              fontSize: '12px',
+              fontWeight: 500,
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden'
+            }
+          },
+          children: jsx(ListItemText, {
+            secondary: t('timeseries-no-params'),
+            sx: {
+              paddingLeft: 1,
+              paddingRight: 1
+            }
+          })
+        }), collectionListItem.parameters.map(function (parameter) {
+          var plotParameter = selectPlot.parameters.find(function (plotParameter) {
+            return collectionListItem.serviceId === plotParameter.serviceId && collectionListItem.collectionId === plotParameter.collectionId && parameter.propertyName === plotParameter.propertyName;
+          });
+          var plotHasParameter = Boolean(plotParameter);
+          var paramDisplayName = parameter.propertyLabel ? parameter.propertyLabel + "   (" + parameter.propertyName + ")" : parameter.propertyName;
+          return jsx(ListItem, {
+            "aria-label": paramDisplayName,
+            role: "listitem",
+            sx: {
+              paddingLeft: '40px',
+              paddingRight: '4px',
+              ':not(:first-of-type)': {
+                borderTopColor: 'geowebColors.cards.cardContainerBorder',
+                borderTopStyle: 'solid',
+                borderTopWidth: '1px',
+                height: DEFAULT_PARAMETER_ROW_HEIGHT + "px",
+                minHeight: '32px'
+              },
+              ':first-of-type': {
+                height: DEFAULT_PARAMETER_ROW_HEIGHT + 4 + "px",
+                minHeight: '36px',
+                paddingTop: '13px'
+              },
+              ':hover': {
+                backgroundColor: 'geowebColors.cards.cardContainerMouseOver'
+              }
+            },
+            children: jsxs(Grid, {
+              container: true,
+              size: "grow",
+              sx: {
+                justifyContent: 'space-between',
+                alignItems: 'center'
+              },
+              children: [jsx(Grid, {
+                size: "grow",
+                children: jsx(Box, {
+                  sx: fontStyling(),
+                  children: jsx(SearchHighlight, {
+                    search: searchFilter,
+                    text: paramDisplayName
+                  })
+                })
+              }), jsx(Grid, {
+                children: jsxs(Box, {
+                  sx: {
+                    marginRight: '8px'
+                  },
+                  children: [jsx(ParameterInfoButtonConnect, {
+                    panelId: panelId,
+                    parameter: plotParameter != null ? plotParameter : Object.assign({}, parameter, {
+                      plotId: selectPlot.plotId
+                    })
+                  }), jsx(CustomToggleButton, {
+                    fullWidth: true,
+                    onClick: function onClick() {
+                      var parameterWithPlotId = Object.assign({}, parameter, {
+                        plotId: selectPlot.plotId,
+                        id: plotParameter == null ? void 0 : plotParameter.id
+                      });
+                      handleAddOrRemoveClick(parameterWithPlotId, plotHasParameter);
+                    },
+                    selected: plotHasParameter,
+                    sx: {
+                      width: '60px',
+                      height: '24px !important',
+                      marginLeft: '4px'
+                    },
+                    variant: "tool",
+                    children: plotHasParameter ? 'Remove' : 'Add'
+                  })]
+                })
+              })]
+            })
+          }, parameter.propertyName);
+        })]
+      })
+    })]
+  });
+};
+var DEFAULT_DIALOG_HEIGHT = 500;
+var DEFAULT_PADDING_TOP = 6;
+var DEFAULT_RESULTS_HEIGHT = 22;
+var DEFAULT_COLLECTION_ROW_HEIGHT = 48; // listItem height + 4px marginTop
+var DEFAULT_PARAMETER_ROW_HEIGHT = 34; // listItem height
+var DEFAULT_PARAMTER_LIST_PADDING_BOTTOM = 0;
 var DEFAULT_PARAMTER_LIST_BORDER_BOTTOM = 1;
 var fontStyling = function fontStyling(primary) {
   if (primary === void 0) {
@@ -5445,35 +5900,34 @@ var fontStyling = function fontStyling(primary) {
     overflow: 'hidden'
   };
 };
-var TimeSeriesSelectList = function TimeSeriesSelectList(_ref) {
-  var selectPlot = _ref.selectPlot,
-    collectionListItemDetails = _ref.collectionListItemDetails,
-    collectionList = _ref.collectionList,
-    handleAddOrRemoveClick = _ref.handleAddOrRemoveClick,
-    setCollectionListItemDetails = _ref.setCollectionListItemDetails,
-    searchFilter = _ref.searchFilter,
-    filterChipsServices = _ref.filterChipsServices,
-    allFilterChipsEnabled = _ref.allFilterChipsEnabled;
-  var listRef = React.useRef(null);
+var TimeSeriesSelectList = function TimeSeriesSelectList(_ref2) {
+  var selectPlot = _ref2.selectPlot,
+    panelId = _ref2.panelId,
+    collectionListItemDetails = _ref2.collectionListItemDetails,
+    collectionList = _ref2.collectionList,
+    handleAddOrRemoveClick = _ref2.handleAddOrRemoveClick,
+    setCollectionListItemDetails = _ref2.setCollectionListItemDetails,
+    searchFilter = _ref2.searchFilter,
+    filterChipsServices = _ref2.filterChipsServices,
+    allFilterChipsEnabled = _ref2.allFilterChipsEnabled;
   var _React$useState = React.useState([]),
     filteredCollectionList = _React$useState[0],
     setFilteredCollectionList = _React$useState[1];
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
   React.useEffect(function () {
-    var _listRef$current;
     if (!collectionList) {
       return;
     }
     var filterResults = filterCollectionsParametersFromService(collectionList, searchFilter, filterChipsServices, allFilterChipsEnabled);
     setFilteredCollectionList(filterResults);
-    // Needed to recalculate the height of the list elements now that some collections/parameters have been filtered out
-    listRef == null || (_listRef$current = listRef.current) == null || _listRef$current.resetAfterIndex(0);
   }, [searchFilter, collectionList, filterChipsServices, allFilterChipsEnabled]);
   return jsxs(Box, {
     "data-testid": "timeseriesSelectList",
     sx: {
-      flex: 1
+      flex: 1,
+      minHeight: 0,
+      overflow: 'hidden'
     },
     children: [jsxs(Box, {
       sx: {
@@ -5481,219 +5935,32 @@ var TimeSeriesSelectList = function TimeSeriesSelectList(_ref) {
         fontSize: '12px'
       },
       children: [filteredCollectionList.length, " ", t('timeseries-results')]
-    }), jsx(AutoSizer, {
-      children: function children(_ref2) {
-        var _ref2$height = _ref2.height,
-          height = _ref2$height === void 0 ? 0 : _ref2$height,
-          _ref2$width = _ref2.width,
-          width = _ref2$width === void 0 ? 0 : _ref2$width;
-        return jsx(VariableSizeList, {
-          height: height - DEFAULT_RESULTS_HEIGHT - DEFAULT_PADDING_TOP,
-          itemCount: filteredCollectionList.length,
-          itemSize: function itemSize(index) {
-            var collectionId = filteredCollectionList[index].collectionId;
-            if (!collectionListItemDetails[collectionId]) {
-              return DEFAULT_COLLECTION_ROW_HEIGHT;
-            }
-            if (filteredCollectionList[index].parameters.length < 1) {
-              return DEFAULT_PARAMETER_ROW_HEIGHT + DEFAULT_COLLECTION_ROW_HEIGHT + DEFAULT_PARAMTER_LIST_PADDING_BOTTOM + DEFAULT_PARAMTER_LIST_BORDER_BOTTOM;
-            }
-            return filteredCollectionList[index].parameters.length * DEFAULT_PARAMETER_ROW_HEIGHT + DEFAULT_COLLECTION_ROW_HEIGHT + DEFAULT_PARAMTER_LIST_PADDING_BOTTOM + DEFAULT_PARAMTER_LIST_BORDER_BOTTOM;
-          },
-          ref: listRef,
-          width: width,
-          children: function children(_ref3) {
-            var index = _ref3.index,
-              style = _ref3.style;
-            var collectionListItem = filteredCollectionList[index];
-            var collectionId = collectionListItem.collectionId;
-            return jsxs(Box, {
-              style: style,
-              children: [jsx(ListItem, {
-                sx: {
-                  backgroundColor: 'geowebColors.cards.cardContainer',
-                  height: '44px',
-                  marginTop: 0.5,
-                  borderWidth: '1px',
-                  borderStyle: 'solid',
-                  borderRadius: '3px',
-                  padding: 0,
-                  zIndex: 10,
-                  overflow: 'hidden',
-                  borderColor: 'geowebColors.cards.cardContainerBorder',
-                  '.MuiListItemText-primary': {
-                    fontSize: '12px',
-                    fontWeight: 500,
-                    textOverflow: 'ellipsis',
-                    overflow: 'hidden'
-                  }
-                },
-                children: jsxs(ListItemButton, {
-                  onClick: function onClick() {
-                    var _Object$assign, _listRef$current2;
-                    var currentState = collectionListItemDetails[collectionId];
-                    setCollectionListItemDetails(Object.assign({}, collectionListItemDetails, (_Object$assign = {}, _Object$assign[collectionId] = !currentState, _Object$assign)));
-                    listRef == null || (_listRef$current2 = listRef.current) == null || _listRef$current2.resetAfterIndex(index);
-                  },
-                  sx: {
-                    height: '100%',
-                    paddingLeft: '24px',
-                    paddingRight: '8px'
-                  },
-                  children: [jsxs(Grid, {
-                    container: true,
-                    size: "grow",
-                    sx: {
-                      justifyContent: 'space-between',
-                      alignItems: 'center'
-                    },
-                    children: [jsxs(Grid, {
-                      size: "grow",
-                      children: [jsx(Box, {
-                        sx: fontStyling(),
-                        children: jsx(SearchHighlight, {
-                          search: searchFilter,
-                          text: collectionListItem.collectionTitle || collectionListItem.collectionId
-                        })
-                      }), jsx(Box, {
-                        sx: fontStyling(false),
-                        children: jsx(SearchHighlight, {
-                          search: searchFilter,
-                          text: collectionListItem.serviceName
-                        })
-                      })]
-                    }), jsx(Grid, {
-                      children: jsx(ListItemText, {
-                        primary: collectionListItem.parameters.length + " " + t('timeseries-results'),
-                        sx: {
-                          paddingLeft: 1,
-                          paddingRight: 5,
-                          textAlign: 'right'
-                        }
-                      })
-                    })]
-                  }), collectionListItemDetails[collectionId] ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})]
-                })
-              }), jsx(Collapse, {
-                "in": collectionListItemDetails[collectionId],
-                unmountOnExit: true,
-                children: jsxs(List, {
-                  sx: {
-                    paddingBottom: DEFAULT_PARAMTER_LIST_PADDING_BOTTOM + "px",
-                    paddingTop: 0,
-                    backgroundColor: 'geowebColors.cards.cardContainer',
-                    borderWidth: DEFAULT_PARAMTER_LIST_BORDER_BOTTOM + "px",
-                    borderStyle: 'none solid solid solid',
-                    borderColor: 'geowebColors.cards.cardContainerBorder',
-                    borderBottomLeftRadius: '3px',
-                    borderBottomRightRadius: '3px',
-                    boxShadow: 1,
-                    top: -5
-                  },
-                  children: [(collectionListItem == null ? void 0 : collectionListItem.parameters.length) < 1 && jsx(ListItem, {
-                    role: "listitem",
-                    sx: {
-                      height: DEFAULT_PARAMETER_ROW_HEIGHT + 4 + "px",
-                      minHeight: '36px',
-                      paddingLeft: '40px',
-                      paddingRight: '4px',
-                      paddingTop: '13px',
-                      ' .MuiListItemText-primary': {
-                        fontSize: '12px',
-                        fontWeight: 500,
-                        whiteSpace: 'nowrap',
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden'
-                      }
-                    },
-                    children: jsx(ListItemText, {
-                      secondary: t('timeseries-no-params'),
-                      sx: {
-                        paddingLeft: 1,
-                        paddingRight: 1
-                      }
-                    })
-                  }), collectionListItem.parameters.map(function (parameter) {
-                    var plotParameter = selectPlot.parameters.find(function (plotParameter) {
-                      return collectionListItem.serviceId === plotParameter.serviceId && collectionListItem.collectionId === plotParameter.collectionId && parameter.propertyName === plotParameter.propertyName;
-                    });
-                    var plotHasParameter = Boolean(plotParameter);
-                    var paramDisplayName = parameter.propertyLabel ? parameter.propertyLabel + "   (" + parameter.propertyName + ")" : parameter.propertyName;
-                    return jsx(ListItem, {
-                      "aria-label": paramDisplayName,
-                      role: "listitem",
-                      sx: {
-                        paddingLeft: '40px',
-                        paddingRight: '4px',
-                        ':not(:first-of-type)': {
-                          borderTopColor: 'geowebColors.cards.cardContainerBorder',
-                          borderTopStyle: 'solid',
-                          borderTopWidth: '1px',
-                          height: DEFAULT_PARAMETER_ROW_HEIGHT + "px",
-                          minHeight: '32px'
-                        },
-                        ':first-of-type': {
-                          height: DEFAULT_PARAMETER_ROW_HEIGHT + 4 + "px",
-                          minHeight: '36px',
-                          paddingTop: '13px'
-                        },
-                        ':hover': {
-                          backgroundColor: 'geowebColors.cards.cardContainerMouseOver'
-                        }
-                      },
-                      children: jsxs(Grid, {
-                        container: true,
-                        size: "grow",
-                        sx: {
-                          justifyContent: 'space-between',
-                          alignItems: 'center'
-                        },
-                        children: [jsx(Grid, {
-                          size: "grow",
-                          children: jsx(Box, {
-                            sx: fontStyling(),
-                            children: jsx(SearchHighlight, {
-                              search: searchFilter,
-                              text: paramDisplayName
-                            })
-                          })
-                        }), jsx(Grid, {
-                          children: jsxs(Box, {
-                            sx: {
-                              marginRight: '8px'
-                            },
-                            children: [jsx(ParameterInfoButtonConnect, {
-                              parameter: plotParameter != null ? plotParameter : Object.assign({}, parameter, {
-                                plotId: selectPlot.plotId
-                              })
-                            }), jsx(CustomToggleButton, {
-                              fullWidth: true,
-                              onClick: function onClick() {
-                                var parameterWithPlotId = Object.assign({}, parameter, {
-                                  plotId: selectPlot.plotId,
-                                  id: plotParameter == null ? void 0 : plotParameter.id
-                                });
-                                handleAddOrRemoveClick(parameterWithPlotId, plotHasParameter);
-                              },
-                              selected: plotHasParameter,
-                              sx: {
-                                width: '60px',
-                                height: '24px !important',
-                                marginLeft: '4px'
-                              },
-                              variant: "tool",
-                              children: plotHasParameter ? 'Remove' : 'Add'
-                            })]
-                          })
-                        })]
-                      })
-                    }, parameter.propertyName);
-                  })]
-                })
-              })]
-            });
-          }
-        });
+    }), jsx(List$1, {
+      rowComponent: RowComponent$1,
+      rowCount: filteredCollectionList.length,
+      rowHeight: function rowHeight(index) {
+        var collectionId = filteredCollectionList[index].collectionId;
+        if (!collectionListItemDetails[collectionId]) {
+          return DEFAULT_COLLECTION_ROW_HEIGHT;
+        }
+        if (filteredCollectionList[index].parameters.length < 1) {
+          return DEFAULT_PARAMETER_ROW_HEIGHT + DEFAULT_COLLECTION_ROW_HEIGHT + DEFAULT_PARAMTER_LIST_PADDING_BOTTOM + DEFAULT_PARAMTER_LIST_BORDER_BOTTOM;
+        }
+        return filteredCollectionList[index].parameters.length * DEFAULT_PARAMETER_ROW_HEIGHT + DEFAULT_COLLECTION_ROW_HEIGHT + DEFAULT_PARAMTER_LIST_PADDING_BOTTOM + DEFAULT_PARAMTER_LIST_BORDER_BOTTOM;
+      },
+      rowProps: {
+        collectionListItemDetails: collectionListItemDetails,
+        setCollectionListItemDetails: setCollectionListItemDetails,
+        filteredCollectionList: filteredCollectionList,
+        handleAddOrRemoveClick: handleAddOrRemoveClick,
+        searchFilter: searchFilter,
+        panelId: panelId,
+        selectPlot: selectPlot,
+        t: t
+      },
+      style: {
+        width: '100%',
+        height: "calc(100% - " + (DEFAULT_RESULTS_HEIGHT + DEFAULT_PADDING_TOP) + "px)"
       }
     })]
   });
@@ -5703,20 +5970,21 @@ var TimeSeriesSelectListConnect = /*#__PURE__*/memo(function (_ref) {
   var selectPlot = _ref.selectPlot,
     handleAddOrRemoveClick = _ref.handleAddOrRemoveClick,
     services = _ref.services,
-    isOpen = _ref.isOpen;
+    isOpen = _ref.isOpen,
+    panelId = _ref.panelId;
   var _useGetServiceCollect = useGetServiceCollectionDetails(services, isOpen),
     collectionList = _useGetServiceCollect.data;
   var _useState = useState({}),
     collectionListItemDetails = _useState[0],
     setCollectionListItemDetails = _useState[1];
   var filterChipsServices = useSelector(function (store) {
-    return getServiceFilterChips(store);
+    return getServiceFilterChips(store, panelId);
   });
   var allFilterChipsEnabled = useSelector(function (store) {
-    return getAllFilterChipsEnabled(store);
+    return getAllFilterChipsEnabled(store, panelId);
   });
   var searchFilter = useSelector(function (state) {
-    return getSearchFilter(state);
+    return getSearchFilter(state, panelId);
   });
   return jsx(TimeSeriesSelectList, {
     allFilterChipsEnabled: allFilterChipsEnabled,
@@ -5724,6 +5992,7 @@ var TimeSeriesSelectListConnect = /*#__PURE__*/memo(function (_ref) {
     collectionListItemDetails: collectionListItemDetails,
     filterChipsServices: filterChipsServices,
     handleAddOrRemoveClick: handleAddOrRemoveClick,
+    panelId: panelId,
     searchFilter: searchFilter,
     selectPlot: selectPlot,
     setCollectionListItemDetails: setCollectionListItemDetails
@@ -5770,24 +6039,28 @@ var ServiceChip = function ServiceChip(_ref) {
 
 var ServiceChipConnect = function ServiceChipConnect(_ref) {
   var service = _ref.service,
-    isAllSelected = _ref.isAllSelected;
+    isAllSelected = _ref.isAllSelected,
+    panelId = _ref.panelId;
   var dispatch = useDispatch();
   var serviceId = service.serviceId;
   var toggleChip = function toggleChip() {
     if (service.enabled) {
       if (isAllSelected) {
         dispatch(timeSeriesActions.setOnlyThisServiceFilterChipSelected({
-          serviceId: serviceId
+          serviceId: serviceId,
+          panelId: panelId
         }));
         return;
       }
       dispatch(timeSeriesActions.setServiceFilterChipUnselected({
-        serviceId: serviceId
+        serviceId: serviceId,
+        panelId: panelId
       }));
       return;
     }
     dispatch(timeSeriesActions.setServiceFilterChipSelected({
-      serviceId: serviceId
+      serviceId: serviceId,
+      panelId: panelId
     }));
   };
   return jsx(ServiceChip, {
@@ -5798,13 +6071,16 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 var AllChipConnect = function AllChipConnect(_ref2) {
-  var isAllSelected = _ref2.isAllSelected;
+  var isAllSelected = _ref2.isAllSelected,
+    panelId = _ref2.panelId;
   var dispatch = useDispatch();
   return jsx(ServiceChip, {
     isSelected: isAllSelected,
     toggleChip: function toggleChip() {
       if (!isAllSelected) {
-        dispatch(timeSeriesActions.setAllServiceFilterChipSelected());
+        dispatch(timeSeriesActions.setAllServiceFilterChipSelected({
+          panelId: panelId
+        }));
       }
     }
   });
@@ -5812,7 +6088,8 @@ var AllChipConnect = function AllChipConnect(_ref2) {
 
 var TimeSeriesServiceList = function TimeSeriesServiceList(_ref) {
   var filterChipsServicesById = _ref.filterChipsServicesById,
-    isAllSelected = _ref.isAllSelected;
+    isAllSelected = _ref.isAllSelected,
+    panelId = _ref.panelId;
   var activeServices = Object.values(filterChipsServicesById);
   return jsx(Box, {
     "data-testid": "serviceList",
@@ -5831,10 +6108,12 @@ var TimeSeriesServiceList = function TimeSeriesServiceList(_ref) {
         fontSize: '0.875rem'
       },
       children: [activeServices.length ? jsx(AllChipConnect, {
-        isAllSelected: isAllSelected
+        isAllSelected: isAllSelected,
+        panelId: panelId
       }) : null, activeServices.map(function (service) {
         return jsx(ServiceChipConnect, {
           isAllSelected: isAllSelected,
+          panelId: panelId,
           service: service
         }, service.serviceUrl);
       })]
@@ -5854,21 +6133,24 @@ var sortByService = function sortByService(serviceObj) {
     return Object.assign({}, result, (_Object$assign = {}, _Object$assign[key] = value, _Object$assign));
   }, {});
 };
-var TimeSeriesServiceListConnect = function TimeSeriesServiceListConnect() {
+var TimeSeriesServiceListConnect = function TimeSeriesServiceListConnect(_ref4) {
+  var panelId = _ref4.panelId;
   var filterChipsServices = useSelector(function (store) {
-    return getServiceFilterChips(store);
+    return getServiceFilterChips(store, panelId);
   });
   var isAllFilterchipsEnabled = useSelector(function (store) {
-    return getAllFilterChipsEnabled(store);
+    return getAllFilterChipsEnabled(store, panelId);
   });
   return jsx(TimeSeriesServiceList, {
     filterChipsServicesById: sortByService(filterChipsServices),
-    isAllSelected: isAllFilterchipsEnabled
+    isAllSelected: isAllFilterchipsEnabled,
+    panelId: panelId
   });
 };
 
 var TimeSeriesSelect = function TimeSeriesSelect(_ref) {
-  var onClose = _ref.onClose,
+  var panelId = _ref.panelId,
+    onClose = _ref.onClose,
     isOpen = _ref.isOpen,
     onMouseDown = _ref.onMouseDown,
     order = _ref.order,
@@ -5916,28 +6198,38 @@ var TimeSeriesSelect = function TimeSeriesSelect(_ref) {
         padding: '6px 8px',
         height: "calc(100% - " + (error ? 48 : 0) + "px)",
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        minHeight: 0
       },
-      children: [jsx(SearchFieldConnect, {}), jsx(Box, {
+      children: [jsx(SearchFieldConnect, {
+        panelId: panelId
+      }), jsx(Box, {
         sx: {
           position: 'absolute',
           margin: '64px 0 0 calc(100% - 40px)',
           zIndex: 2,
           "float": 'right'
         },
-        children: jsx(ServiceOptionsButtonConnect, {})
+        children: jsx(ServiceOptionsButtonConnect, {
+          panelId: panelId
+        })
       }), jsx(Box, {
         sx: {
           paddingBottom: '6px',
           paddingRight: '32px'
         },
-        children: jsx(TimeSeriesServiceListConnect, {})
+        children: jsx(TimeSeriesServiceListConnect, {
+          panelId: panelId
+        })
       }), jsx(TimeSeriesSelectListConnect, {
         handleAddOrRemoveClick: handleAddOrRemoveClick,
         isOpen: isOpen,
+        panelId: panelId,
         selectPlot: selectPlot,
         services: services
-      }), jsx(ServicePopupConnect, {})]
+      }), jsx(ServicePopupConnect, {
+        panelId: panelId
+      })]
     })]
   });
 };
@@ -5952,16 +6244,19 @@ var TimeSeriesSelectConnect = function TimeSeriesSelectConnect(_ref) {
     dialogOrder = _useSetupDialog.dialogOrder,
     isDialogOpen = _useSetupDialog.isDialogOpen,
     onCloseDialog = _useSetupDialog.onCloseDialog;
+  var activePanelId = useSelector(function (state) {
+    return uiSelectors.getSourcePanelId(state, DIALOG_TYPE);
+  });
   var dispatch = useDispatch();
   var plot = useSelector(function (state) {
-    return getPlotWithParameters(state, selectPlotId);
+    return getPlotWithParameters(state, selectPlotId, panelId);
   });
   // If select dialog for a plot is open but the plot is deleted, close the dialog
   React.useEffect(function () {
-    if (isDialogOpen && !plot) {
+    if (isDialogOpen && activePanelId === panelId && !plot) {
       onCloseDialog();
     }
-  }, [plot, isDialogOpen, onCloseDialog]);
+  }, [plot, isDialogOpen, onCloseDialog, activePanelId, panelId]);
   var handleAddOrRemoveClick = React.useCallback(function (parameter, plotHasParameter) {
     if (plotHasParameter) {
       dispatch(timeSeriesActions.deleteParameter({
@@ -5980,12 +6275,14 @@ var TimeSeriesSelectConnect = function TimeSeriesSelectConnect(_ref) {
   var services = useSelector(function (state) {
     return getServices(state);
   });
+  var isDialogOpenForPanel = isDialogOpen && activePanelId === panelId;
   return plot && services && services.length > 0 ? jsx(TimeSeriesSelect, {
     handleAddOrRemoveClick: handleAddOrRemoveClick,
-    isOpen: isDialogOpen,
+    isOpen: isDialogOpenForPanel,
     onClose: onCloseDialog,
     onMouseDown: setDialogOrder,
     order: dialogOrder,
+    panelId: panelId,
     selectPlot: plot,
     services: services
   }) : null;
@@ -5996,7 +6293,7 @@ var origin = TimeSeriesActionOrigin.timeSeriesManager;
 var TimeSeriesManagerConnect = function TimeSeriesManagerConnect(_ref) {
   var preloadedTimeseriesServices = _ref.preloadedTimeseriesServices;
   var panelId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.TimeSeriesManager);
+    return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeSeriesManager);
   });
   var _useSetupDialog = useSetupDialog(DIALOG_TYPE_MANAGER),
     setDialogOrder = _useSetupDialog.setDialogOrder,
@@ -6010,15 +6307,14 @@ var TimeSeriesManagerConnect = function TimeSeriesManagerConnect(_ref) {
     setSelectPlotId = _useState[1];
   var dispatch = useDispatch();
   var confirmDialog = useConfirmationDialog();
-  var plotState = useSelector(getPlotState);
+  var plotState = useSelector(function (state) {
+    return getPlotState(state, panelId);
+  });
   React.useEffect(function () {
-    var addServices = function addServices(timeSeriesServices) {
+    if (preloadedTimeseriesServices) {
       dispatch(timeSeriesActions.addServices({
-        timeSeriesServices: timeSeriesServices
+        timeSeriesServices: preloadedTimeseriesServices
       }));
-    };
-    if (preloadedTimeseriesServices) {
-      addServices(preloadedTimeseriesServices);
     }
   }, [preloadedTimeseriesServices, dispatch]);
   var showSnackbar = React.useCallback(function (message) {
@@ -6126,6 +6422,7 @@ var TimeSeriesManagerConnect = function TimeSeriesManagerConnect(_ref) {
       onClose: onCloseDialog,
       onMouseDown: setDialogOrder,
       order: dialogOrder,
+      panelId: panelId,
       patchParameter: patchParameter,
       plotState: plotState,
       selectPlotId: selectPlotId,
@@ -6270,7 +6567,7 @@ var LocationInfo = function LocationInfo(_ref) {
     return Math.abs(lat) + "\xB0 " + latHemisphere + ", " + Math.abs(lon) + "\xB0 " + lonHemisphere;
   };
   var formattedCoordinates = useMemo(function () {
-    if (location && location.geometry.type === 'Point') {
+    if ((location == null ? void 0 : location.geometry.type) === 'Point') {
       var latitude = location.geometry.coordinates[1];
       var longitude = location.geometry.coordinates[0];
       return getFormattedCoordinates(latitude, longitude);
@@ -6455,10 +6752,12 @@ var ParameterInfoText = function ParameterInfoText(_ref6) {
 };
 
 var LocationInfoConnect = function LocationInfoConnect() {
-  var services = useSelector(getServices);
   var panelId = useSelector(function (store) {
     return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeSeriesLocationInfo);
   });
+  var services = useSelector(function (state) {
+    return getServices(state);
+  });
   var selectedMapIds = useSelector(function (state) {
     return genericSelectors.getLinkedMaps(state, panelId);
   });
@@ -6524,11 +6823,14 @@ timeseriesListener.startListening({
   matcher: isAnyOf(timeSeriesActions.loadUserAddedTimeSeriesServices, timeSeriesActions.upsertService, timeSeriesActions.removeService, timeSeriesActions.registerTimeSeriesPreset),
   effect: function () {
     var _effect = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(action, listenerApi) {
+      var _listenerApi$getState;
+      var services;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            setUserAddedEDRServices(listenerApi.getState().timeSeries.services || []);
-          case 1:
+            services = ((_listenerApi$getState = listenerApi.getState().timeSeries) == null ? void 0 : _listenerApi$getState.services) || [];
+            setUserAddedEDRServices(services);
+          case 2:
           case "end":
             return _context.stop();
         }
@@ -6629,13 +6931,17 @@ var LocationInfoButtonConnect = function LocationInfoButtonConnect(_ref) {
   var isOpenInStore = useSelector(function (store) {
     return uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.TimeSeriesLocationInfo);
   });
+  var currentSourcePanelId = useSelector(function (store) {
+    return uiSelectors.getSourcePanelId(store, uiTypes.DialogTypes.TimeSeriesLocationInfo);
+  });
   var handleClick = function handleClick() {
     dispatch(uiActions.setToggleOpenDialog({
       type: uiTypes.DialogTypes.TimeSeriesLocationInfo,
-      setOpen: !isOpenInStore,
+      setOpen: currentSourcePanelId !== panelId ? true : !isOpenInStore,
       sourcePanelId: panelId
     }));
   };
+  var isOpenForPanel = isOpenInStore && currentSourcePanelId === panelId;
   return jsx(CustomTooltip, {
     title: t('timeseries-location-info-title'),
     children: jsx("span", {
@@ -6644,7 +6950,7 @@ var LocationInfoButtonConnect = function LocationInfoButtonConnect(_ref) {
         icon: jsx(Info, {}),
         longText: t('timeseries-location-info-button'),
         onClick: handleClick,
-        selected: isOpenInStore,
+        selected: isOpenForPanel,
         variant: "tool"
       })
     })
@@ -7360,6 +7666,34 @@ var useChartHeight = function useChartHeight(_ref) {
     updateHeight: updateHeight
   };
 };
+var applyDataZoomState = function applyDataZoomState(option, dataZoomState) {
+  if (!dataZoomState || !(option != null && option.dataZoom) || !Array.isArray(option.dataZoom)) {
+    return option;
+  }
+  return Object.assign({}, option, {
+    dataZoom: option.dataZoom.map(function (dz) {
+      return Object.assign({}, dz, {
+        start: dataZoomState.start,
+        end: dataZoomState.end
+      });
+    })
+  });
+};
+var extractDataZoomState = function extractDataZoomState(params) {
+  if (params.batch && params.batch.length > 0) {
+    return {
+      start: params.batch[0].start,
+      end: params.batch[0].end
+    };
+  }
+  if (params.start !== undefined && params.end !== undefined) {
+    return {
+      start: params.start,
+      end: params.end
+    };
+  }
+  return null;
+};
 var TimeSeriesChart = function TimeSeriesChart(_ref2) {
   var plotsWithData = _ref2.plotsWithData,
     _ref2$animation = _ref2.animation,
@@ -7370,14 +7704,18 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
   var _useThemeContext = useThemeContext(),
     namedTheme = _useThemeContext.namedTheme;
   var isDark = (namedTheme == null ? void 0 : namedTheme.theme.palette.mode) === 'dark';
+  var dataZoomStateRef = React.useRef(null);
   var enabledPlots = plotsWithData.filter(function (plot) {
     return plot.enabled === undefined || plot.enabled;
   });
   var option = getOption(enabledPlots);
+  var optionWithZoom = React.useMemo(function () {
+    return applyDataZoomState(option, dataZoomStateRef.current);
+  }, [option]);
   var _useChartHeight = useChartHeight({
       plotsWithData: enabledPlots,
       shouldShowLegend: shouldShowLegend,
-      option: option
+      option: optionWithZoom
     }),
     chartHeight = _useChartHeight.chartHeight,
     chartRef = _useChartHeight.chartRef,
@@ -7390,6 +7728,12 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
       // noop, prevent flickering when toggling legend
       onEvents: {
         finished: function finished() {},
+        datazoom: function datazoom(params) {
+          var newState = extractDataZoomState(params);
+          if (newState) {
+            dataZoomStateRef.current = newState;
+          }
+        },
         legendselectchanged: function legendselectchanged(params) {
           if (!option.legend) {
             return;
@@ -7402,7 +7746,7 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
           }
         }
       },
-      option: Object.assign({}, option, {
+      option: Object.assign({}, optionWithZoom, {
         animation: animation
       }),
       ref: chartRef,
@@ -7424,10 +7768,11 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref) {
     isLoading = _ref.isLoading,
     _ref$shouldShowLegend = _ref.shouldShowLegend,
     shouldShowLegend = _ref$shouldShowLegend === void 0 ? true : _ref$shouldShowLegend,
-    onToggleLegendParam = _ref.onToggleLegendParam;
+    onToggleLegendParam = _ref.onToggleLegendParam,
+    syncgroupTimeState = _ref.syncgroupTimeState;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
-  var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t),
+  var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState),
     plotsWithData = _useGetPlotsWithData.data,
     isFetchingPlots = _useGetPlotsWithData.isFetching,
     error = _useGetPlotsWithData.error;
@@ -7454,36 +7799,35 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref) {
     })]
   });
 }, function (previousProps, nextProps) {
+  var _previousProps$syncgr, _nextProps$syncgroupT, _previousProps$syncgr2, _nextProps$syncgroupT2;
   var samePreset = previousProps.plotPreset === nextProps.plotPreset;
   var sameLocation = isEqual(previousProps.selectedLocation, nextProps.selectedLocation);
   var sameGeoJson = isEqual(previousProps.splitGeoJsonByCollection, nextProps.splitGeoJsonByCollection);
   var sameLegend = previousProps.shouldShowLegend === nextProps.shouldShowLegend;
-  return samePreset && sameLocation && sameGeoJson && sameLegend;
+  var sameTime = ((_previousProps$syncgr = previousProps.syncgroupTimeState) == null ? void 0 : _previousProps$syncgr.start) === ((_nextProps$syncgroupT = nextProps.syncgroupTimeState) == null ? void 0 : _nextProps$syncgroupT.start) && ((_previousProps$syncgr2 = previousProps.syncgroupTimeState) == null ? void 0 : _previousProps$syncgr2.end) === ((_nextProps$syncgroupT2 = nextProps.syncgroupTimeState) == null ? void 0 : _nextProps$syncgroupT2.end);
+  return samePreset && sameLocation && sameGeoJson && sameLegend && sameTime;
 });
 
 var TOOLTIP_TITLE = 'Timeseries Manager';
 var TimeSeriesManagerMapButtonConnect = function TimeSeriesManagerMapButtonConnect(_ref) {
-  var viewId = _ref.viewId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var viewId = _ref.viewId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
-  var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, DIALOG_TYPE_MANAGER);
+  var currentSourcePanelId = useSelector(function (store) {
+    return uiSelectors.getSourcePanelId(store, DIALOG_TYPE_MANAGER);
   });
   var isOpenInStore = useSelector(function (store) {
     return uiSelectors.getisDialogOpen(store, DIALOG_TYPE_MANAGER);
   });
   var openTimeSeriesManagerDialog = React.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
+    dispatch(uiActions.setToggleOpenDialog({
       type: DIALOG_TYPE_MANAGER,
-      mapId: viewId,
-      setOpen: currentActiveMapId !== viewId ? true : !isOpenInStore,
-      source: source
+      setOpen: currentSourcePanelId !== viewId ? true : !isOpenInStore,
+      sourcePanelId: viewId
     }));
-  }, [currentActiveMapId, dispatch, isOpenInStore, viewId, source]);
-  var isOpen = currentActiveMapId === viewId && isOpenInStore;
+  }, [currentSourcePanelId, dispatch, isOpenInStore, viewId]);
+  var isOpen = currentSourcePanelId === viewId && isOpenInStore;
   return jsx(CustomTooltip, {
     title: TOOLTIP_TITLE,
     children: jsx("span", {
@@ -7505,29 +7849,43 @@ var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
-  var timeSeriesLocation = useSelector(getCurrentLocation);
+  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(getIsMapPinDisabled);
+  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: !isLocationsDialogOpen,
+      setOpen: currentSourcePanelId !== panelId ? true : !isLocationsDialogOpen,
       sourcePanelId: panelId
     }));
   };
   React.useEffect(function () {
     return function () {
-      if (isLocationsDialogOpen) {
+      if (isLocationsDialogOpenRef.current && currentSourcePanelIdRef.current === panelId) {
         dispatch(uiActions.setToggleOpenDialog({
           setOpen: false,
-          type: uiTypes.DialogTypes.TimeseriesLocations
+          type: uiTypes.DialogTypes.TimeseriesLocations,
+          sourcePanelId: panelId
         }));
       }
     };
-  }, [dispatch, isLocationsDialogOpen]);
+  }, [dispatch, panelId]);
   return jsx(CustomTooltip, {
     title: selectedLocationName || t('timeseries-select-location'),
     children: jsx("span", {
@@ -7544,7 +7902,7 @@ var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
         }),
         longText: selectedLocationName || t('timeseries-location'),
         onClick: toggleLocationsDialog,
-        selected: isLocationsDialogOpen,
+        selected: isLocationsDialogOpen ? currentSourcePanelId === panelId : null,
         shortText: selectedLocationName || t('timeseries-location')
       })
     })
@@ -7584,7 +7942,9 @@ var useMapPin = function useMapPin(_ref2) {
   var selectedMapIds = useSelector(function (state) {
     return genericSelectors.getLinkedMaps(state, panelId);
   });
-  var isMapPinDisabled = useSelector(getIsMapPinDisabled);
+  var isMapPinDisabled = useSelector(function (state) {
+    return getIsMapPinDisabled(state, panelId);
+  });
   /* Make sure the mappin is visible when linking new maps */
   useEffect(function () {
     var toggleMapPinVisibility = function toggleMapPinVisibility(displayMapPin) {
@@ -7604,6 +7964,7 @@ var useMapPin = function useMapPin(_ref2) {
   var toggleDisableMapPin = function toggleDisableMapPin() {
     var newDisableMapPinState = !isMapPinDisabled;
     dispatch(timeSeriesActions.disableMapPin({
+      panelId: panelId,
       isMapPinDisabled: newDisableMapPinState
     }));
     selectedMapIds.forEach(function (mapId) {
@@ -7619,23 +7980,38 @@ var useMapPin = function useMapPin(_ref2) {
   };
 };
 var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
-  var _sharedGeoJSON$featur;
+  var _linkedMapIds$, _sharedGeoJSON$featur;
   var panelId = _ref3.panelId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
   var geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
-  var shouldShowLegend = useSelector(getIsLegendVisible);
-  var services = useSelector(getServices);
-  var shouldHideLocationMarkers = useSelector(getShouldHideLocationMarkers);
-  var plotPresetState = useSelector(getPlotState);
-  var activeMapId = useSelector(function (store) {
-    return uiSelectors.getActiveWindowId(store);
-  });
-  var timeSeriesLocation = useSelector(getCurrentLocation);
-  var selectedFeature = useSelector(function (state) {
+  var shouldShowLegend = useSelector(function (state) {
+    return getIsLegendVisible(state, panelId);
+  });
+  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.getLinkedMaps(state, panelId);
+  });
+  var panelMapId = (_linkedMapIds$ = linkedMapIds == null ? void 0 : linkedMapIds[0]) != null ? _linkedMapIds$ : plotPresetState == null ? void 0 : plotPresetState.mapId;
+  var timeSeriesLocation = useSelector(function (state) {
+    return getCurrentLocation(state, panelId);
+  });
+  var selectedFeatureFromPanel = useSelector(function (state) {
     return genericSelectors.getSelectedFeature(state.syncGroups, panelId);
   });
+  var selectedFeatureFromMap = useSelector(function (state) {
+    return panelMapId ? genericSelectors.getSelectedFeature(state.syncGroups, panelMapId) : null;
+  });
+  var selectedFeature = selectedFeatureFromPanel != null ? selectedFeatureFromPanel : selectedFeatureFromMap;
   var allMaps = useSelector(function (store) {
     return mapSelectors.getAllMapsByIds(store);
   });
@@ -7659,9 +8035,10 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
   }, [dispatch, panelId]);
   var setTimeSeriesLocation = useCallback(function (location) {
     dispatch(timeSeriesActions.setCurrentLocation({
+      panelId: panelId,
       location: location
     }));
-  }, [dispatch]);
+  }, [dispatch, panelId]);
   var memoizedSelectedFeature = React.useMemo(function () {
     if (!selectedFeature) {
       return null;
@@ -7675,9 +8052,9 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFeature == null ? void 0 : selectedFeature.lat, selectedFeature == null ? void 0 : selectedFeature.lon]);
   useEffect(function () {
-    if (!memoizedSelectedFeature && activeMapId) {
-      var _allMaps$activeMapId;
-      var activeMapCoordinates = (_allMaps$activeMapId = allMaps[activeMapId]) == null ? void 0 : _allMaps$activeMapId.mapPinLocation;
+    if (!memoizedSelectedFeature && panelMapId) {
+      var _allMaps$panelMapId;
+      var activeMapCoordinates = (_allMaps$panelMapId = allMaps[panelMapId]) == null ? void 0 : _allMaps$panelMapId.mapPinLocation;
       if ((activeMapCoordinates == null ? void 0 : activeMapCoordinates.lat) !== undefined && (activeMapCoordinates == null ? void 0 : activeMapCoordinates.lon) !== undefined) {
         setTimeSeriesLocation(activeMapCoordinates);
       }
@@ -7692,7 +8069,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       };
       setTimeSeriesLocation(validLocation);
     }
-  }, [activeMapId, selectedFeature, setTimeSeriesLocation, memoizedSelectedFeature, allMaps]);
+  }, [panelMapId, selectedFeature, setTimeSeriesLocation, memoizedSelectedFeature, allMaps]);
   useEffect(function () {
     return function () {
       if (panelId) {
@@ -7743,11 +8120,13 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
   }, [dispatch, geojsonLayerId, shouldHideLocationMarkers, locationsData, memoizedSelectedFeature, panelId, stableServices, setTimeSeriesLocation]);
   var toggleLocationMarkers = function toggleLocationMarkers(shouldHide) {
     dispatch(timeSeriesActions.toggleLocationMarkers({
+      panelId: panelId,
       shouldHideLocationMarkers: shouldHide
     }));
   };
   var toggleLegend = function toggleLegend() {
     dispatch(timeSeriesActions.toggleLegend({
+      panelId: panelId,
       isLegendVisible: !shouldShowLegend
     }));
   };
@@ -7757,6 +8136,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       panelId: panelId
     }));
   };
+  var syncgroupTimeState = useSyncgroupTimeState(panelId, 1000);
   return jsxs(Stack, {
     "data-testid": "TimeSeriesConnect",
     sx: {
@@ -7820,7 +8200,8 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
         selectedLocation: timeSeriesLocation,
         services: services,
         shouldShowLegend: shouldShowLegend,
-        splitGeoJsonByCollection: geoJSONWithService || []
+        splitGeoJsonByCollection: geoJSONWithService || [],
+        syncgroupTimeState: syncgroupTimeState
       })
     })]
   });
@@ -7837,17 +8218,20 @@ var TimeSeriesConnectWrapper = function TimeSeriesConnectWrapper(_ref) {
   React.useEffect(function () {
     var localStorageServices = getUserAddedEDRServices();
     dispatch(timeSeriesActions.loadUserAddedTimeSeriesServices(localStorageServices));
-  }, [dispatch, timeSeriesPreset, timeSeriesPresetRef]);
+  }, [dispatch, panelId, timeSeriesPreset, timeSeriesPresetRef]);
   React.useEffect(function () {
     // Check if the preset has changed
     if (!isEqual(timeSeriesPreset, timeSeriesPresetRef.current)) {
       timeSeriesPresetRef.current = timeSeriesPreset;
-      timeSeriesPreset && dispatch(timeSeriesActions.registerTimeSeriesPreset(timeSeriesPreset));
+      timeSeriesPreset && dispatch(timeSeriesActions.registerTimeSeriesPreset(Object.assign({}, timeSeriesPreset, {
+        panelId: panelId
+      })));
       hideLocationMarkers !== undefined && dispatch(timeSeriesActions.toggleLocationMarkers({
+        panelId: panelId,
         shouldHideLocationMarkers: hideLocationMarkers
       }));
     }
-  }, [dispatch, timeSeriesPreset, timeSeriesPresetRef, hideLocationMarkers]);
+  }, [dispatch, timeSeriesPreset, timeSeriesPresetRef, hideLocationMarkers, panelId]);
   return jsx(TimeSeriesConnect, {
     panelId: panelId
   });
@@ -8140,164 +8524,126 @@ var LocationListItem = function LocationListItem(_ref) {
   });
 };
 
-var renderRow = function renderRow(features, handleChange, selectedLocation, isDisabled) {
-  if (isDisabled === void 0) {
-    isDisabled = false;
-  }
-  return function (props) {
-    var _feature$properties;
-    var index = props.index,
-      style = props.style;
-    var feature = features[index];
-    return jsx("div", {
-      style: Object.assign({}, style),
-      children: jsx(LocationListItem, {
-        handleChange: handleChange,
-        isDisabled: isDisabled,
-        location: (_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name,
-        selectedLocation: selectedLocation
-      }, feature.id)
-    });
-  };
+var RowComponent = function RowComponent(_ref) {
+  var _feature$properties;
+  var index = _ref.index,
+    style = _ref.style,
+    handleChange = _ref.handleChange,
+    selectedLocation = _ref.selectedLocation,
+    features = _ref.features,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  var feature = features[index];
+  return jsx("div", {
+    style: Object.assign({}, style),
+    children: jsx(LocationListItem, {
+      handleChange: handleChange,
+      isDisabled: isDisabled,
+      location: (_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name,
+      selectedLocation: selectedLocation
+    }, feature.id)
+  });
 };
-
-var FocusableListOuter = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  // Track last interaction modality to conditionally show focus ring only for keyboard navigation.
-  var lastInteractionWasKeyboard = React.useRef(false);
+function useFocusVisible() {
+  var lastWasKeyboard = React.useRef(false);
+  var _React$useState = React.useState(false),
+    focusVisible = _React$useState[0],
+    setFocusVisible = _React$useState[1];
   React.useEffect(function () {
-    var handleKey = function handleKey(e) {
-      // Ignore modifier-only keys; any navigation key sets keyboard modality.
-      if (e.key) {
-        lastInteractionWasKeyboard.current = true;
-      }
+    var onKey = function onKey() {
+      lastWasKeyboard.current = true;
     };
-    var handlePointer = function handlePointer() {
-      lastInteractionWasKeyboard.current = false;
+    var onPointer = function onPointer() {
+      lastWasKeyboard.current = false;
     };
-    window.addEventListener('keydown', handleKey, {
+    window.addEventListener('keydown', onKey, {
       capture: true
     });
-    window.addEventListener('mousedown', handlePointer, {
+    window.addEventListener('pointerdown', onPointer, {
       capture: true
     });
-    window.addEventListener('pointerdown', handlePointer, {
+    window.addEventListener('mousedown', onPointer, {
       capture: true
     });
-    window.addEventListener('touchstart', handlePointer, {
+    window.addEventListener('touchstart', onPointer, {
       capture: true
     });
-    // Listen for custom selection event to remove focus styling after keyboard activation.
-    var handleSelection = function handleSelection() {
-      setIsFocusVisible(false);
-    };
-    window.addEventListener('location-list-selection', handleSelection);
     return function () {
-      window.removeEventListener('keydown', handleKey, {
+      window.removeEventListener('keydown', onKey, {
         capture: true
       });
-      window.removeEventListener('mousedown', handlePointer, {
+      window.removeEventListener('pointerdown', onPointer, {
         capture: true
       });
-      window.removeEventListener('pointerdown', handlePointer, {
+      window.removeEventListener('mousedown', onPointer, {
         capture: true
       });
-      window.removeEventListener('touchstart', handlePointer, {
+      window.removeEventListener('touchstart', onPointer, {
         capture: true
       });
-      window.removeEventListener('location-list-selection', handleSelection);
     };
   }, []);
-  var handleKeyDown = function handleKeyDown(e) {
-    var el = ref && typeof ref === 'object' && 'current' in ref ? ref.current : null;
-    if (!el) {
-      return;
-    }
-    var lineHeight = 40; // matches itemSize
-    var pageHeight = el.clientHeight;
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        el.scrollTop += lineHeight;
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        el.scrollTop -= lineHeight;
-        break;
-      case 'PageDown':
-        e.preventDefault();
-        el.scrollTop += pageHeight;
-        break;
-      case 'PageUp':
-        e.preventDefault();
-        el.scrollTop -= pageHeight;
-        break;
-      case 'Home':
-        e.preventDefault();
-        el.scrollTop = 0;
-        break;
-      case 'End':
-        e.preventDefault();
-        el.scrollTop = el.scrollHeight;
-        break;
-    }
-  };
-  // merge any existing style prop with our outline override
-  var mergedStyle = Object.assign({}, props.style, {
-    outline: 'none',
-    transition: 'box-shadow 120ms ease, background-color 120ms ease'
-  });
-  var _React$useState = React.useState(false),
-    isFocusVisible = _React$useState[0],
-    setIsFocusVisible = _React$useState[1];
-  var onFocus = function onFocus() {
-    if (lastInteractionWasKeyboard.current) {
-      setIsFocusVisible(true);
+  return {
+    focusVisible: focusVisible,
+    onFocus: function onFocus() {
+      if (lastWasKeyboard.current) {
+        setFocusVisible(true);
+      }
+    },
+    onBlur: function onBlur() {
+      return setFocusVisible(false);
+    },
+    clear: function clear() {
+      return setFocusVisible(false);
     }
   };
-  var onBlur = function onBlur() {
-    return setIsFocusVisible(false);
-  };
-  if (isFocusVisible) {
-    mergedStyle.boxShadow = '0 0 0 2px var(--focus-ring-color, #1976d2)';
-    mergedStyle.backgroundColor = 'rgba(25,118,210,0.06)';
-  }
-  return jsx("div", Object.assign({}, props, {
-    "aria-label": "Locations list",
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onKeyDown: handleKeyDown,
-    // Remove focus styling immediately on mouse interaction
-    onMouseDown: function onMouseDown() {
-      setIsFocusVisible(false);
-    },
-    ref: ref,
+}
+var FocusableListWrapper = function FocusableListWrapper(_ref2) {
+  var children = _ref2.children,
+    onKeyDown = _ref2.onKeyDown,
+    ariaLabel = _ref2['aria-label'];
+  var fv = useFocusVisible();
+  return jsx("div", {
+    "aria-label": ariaLabel,
+    onBlur: fv.onBlur,
+    onFocus: fv.onFocus,
+    onKeyDown: onKeyDown,
+    onMouseDown: fv.clear,
     role: "listbox",
-    style: mergedStyle,
-    tabIndex: 0
-  }));
-});
-var LocationDropdown = function LocationDropdown(_ref) {
+    style: Object.assign({
+      outline: 'none',
+      transition: 'box-shadow 120ms ease, background-color 120ms ease'
+    }, fv.focusVisible ? {
+      boxShadow: '0 0 0 2px var(--focus-ring-color, #1976d2)',
+      backgroundColor: 'rgba(25,118,210,0.06)'
+    } : null),
+    tabIndex: 0,
+    children: children
+  });
+};
+var LocationDropdown = function LocationDropdown(_ref3) {
   var _combinedSelectedLoca;
-  var geoJson = _ref.geoJson,
-    splitGeoJson = _ref.splitGeoJson,
-    handleChange = _ref.handleChange,
-    selectedLocation = _ref.selectedLocation,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    defaultExpanded = _ref.defaultExpanded;
+  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 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$properties;
-    return selectedLocation === ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name);
+    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$properties2;
-        return (_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.name.toLowerCase().includes(searchTerm.toLowerCase());
+        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, {
@@ -8308,6 +8654,40 @@ var LocationDropdown = function LocationDropdown(_ref) {
   }, [searchTerm, splitGeoJson]);
   var listContainerRef = React.useRef(null);
   var heightObserver = useResizeObserver(listContainerRef, filteredResults);
+  var handleKeyDown = function handleKeyDown(e) {
+    var _listContainerRef$cur, _listContainerRef$cur2;
+    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;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        next += lineHeight;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        next -= lineHeight;
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        next += page;
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        next -= page;
+        break;
+      case 'Home':
+        e.preventDefault();
+        next = 0;
+        break;
+      default:
+        return;
+    }
+    listContainerRef == null || (_listContainerRef$cur2 = listContainerRef.current) == null || _listContainerRef$cur2.scrollTo({
+      top: Math.max(0, next),
+      behavior: 'smooth'
+    });
+  };
   return jsx(Box, {
     "data-testid": "locationDropdownContainer",
     ref: listContainerRef,
@@ -8341,8 +8721,8 @@ var LocationDropdown = function LocationDropdown(_ref) {
         var collectionGeoJson = object.geoJson;
         // Find location from the collection that matches the selected location
         var collectionSelectedLocation = collectionGeoJson.features.find(function (feature) {
-          var _feature$properties3;
-          return selectedLocationNames.includes((_feature$properties3 = feature.properties) == null ? void 0 : _feature$properties3.name);
+          var _feature$properties4;
+          return selectedLocationNames.includes((_feature$properties4 = feature.properties) == null ? void 0 : _feature$properties4.name);
         });
         return jsx(Box, {
           "data-testid": "serviceDropdown",
@@ -8359,13 +8739,25 @@ var LocationDropdown = function LocationDropdown(_ref) {
             },
             title: collectionName,
             title2: serviceName,
-            children: jsx(FixedSizeList, {
-              height: heightObserver,
-              itemCount: collectionGeoJson.features.length,
-              itemSize: 40,
-              outerElementType: FocusableListOuter,
-              width: "100%",
-              children: renderRow(collectionGeoJson.features, handleChange, collectionSelectedLocation == null || (_collectionSelectedLo = collectionSelectedLocation.properties) == null ? void 0 : _collectionSelectedLo.name, isDisabled)
+            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%'
+                }
+              })
             })
           })
         }, collectionName + "-" + serviceName);
@@ -8375,6 +8767,7 @@ var LocationDropdown = function LocationDropdown(_ref) {
 };
 
 var _excluded = ["occurrences"];
+var emptyMapIdList = [];
 var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
   var _timeSeriesLocation$o;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
@@ -8389,16 +8782,20 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
     dialogOrder = _useSetupDialog.dialogOrder,
     setDialogOrder = _useSetupDialog.setDialogOrder;
   var geoJSONWithService = useSelector(function (state) {
-    return getGeoJSONWithService(state, panelId);
+    return panelId ? getGeoJSONWithService(state, panelId) : undefined;
   });
   var sharedGeoJSON = useSelector(function (state) {
-    return genericSelectors.selectSharedData(state, panelId);
+    return panelId ? genericSelectors.selectSharedData(state, panelId) : undefined;
   });
   var selectedMapIds = useSelector(function (state) {
-    return genericSelectors.getLinkedMaps(state, panelId);
+    return panelId ? genericSelectors.getLinkedMaps(state, panelId) : emptyMapIdList;
+  });
+  var isMapPinDisabled = useSelector(function (state) {
+    return panelId ? getIsMapPinDisabled(state, panelId) : false;
+  });
+  var timeSeriesLocation = useSelector(function (state) {
+    return panelId ? getCurrentLocation(state, panelId) : undefined;
   });
-  var isMapPinDisabled = useSelector(getIsMapPinDisabled);
-  var timeSeriesLocation = useSelector(getCurrentLocation);
   var setSelectedFeatureIndex = function setSelectedFeatureIndex(selectedFeatureIndex) {
     dispatch(layerActions.setSelectedFeature({
       layerId: geojsonLayerId,
@@ -8414,10 +8811,14 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
     }));
   };
   var setTimeSeriesLocation = useCallback(function (location) {
+    if (!panelId) {
+      return;
+    }
     dispatch(timeSeriesActions.setCurrentLocation({
+      panelId: panelId,
       location: location
     }));
-  }, [dispatch]);
+  }, [dispatch, panelId]);
   var setMapPinLocation = function setMapPinLocation(mapPinLocation) {
     selectedMapIds.forEach(function (mapId) {
       dispatch(mapActions.setMapPinLocation({
@@ -8432,6 +8833,9 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
   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;
+    if (!panelId) {
+      return;
+    }
     if (!(geojson != null && (_geojson$features = geojson.features) != null && _geojson$features.length)) {
       return;
     }
@@ -8467,6 +8871,9 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
       var newMapPin = _objectWithoutPropertiesLoose(location, _excluded);
     setMapPinLocation(newMapPin);
   };
+  if (!panelId) {
+    return null;
+  }
   return jsx(ToolContainerDraggable, {
     bounds: "parent",
     isOpen: isDialogOpen,