@opengeoweb/time-series 13.2.1 → 14.0.0

package/index.esm.js

@@ -6,7 +6,7 @@ import { mapUtils, selectorMemoizationOptions, genericSelectors, uiSelectors, ui
 import { snackbarActions, snackbarTypes, snackbarListener, snackbarReducer } from '@opengeoweb/snackbar';
 import { dateUtils, CustomTooltip, CustomToggleButton, TooltipSelect, CustomIconButton, CustomAccordion, ToolContainerDraggable, SearchHighlight, SearchField, ToggleMenu, CustomDialog, AlertBanner, useConfirmationDialog, SwitchButton } from '@opengeoweb/shared';
 import { MenuItem, useTheme, LinearProgress, Grid, Box, Typography, ClickAwayListener, Input, Collapse, ListItem, ListItemButton, ListItemText, List, Button, InputAdornment, Card, styled, Stack, Tooltip, ListItemIcon, Checkbox } from '@mui/material';
-import { trim, trimStart, isString, compact, chain, groupBy, sortBy, uniqBy, isEqual } from 'lodash';
+import { isString, trim, trimStart, compact, chain, groupBy, sortBy, uniqBy, isEqual } from 'lodash';
 import { ReactSortable } from 'react-sortablejs';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -17,10 +17,10 @@ import { produce } from 'immer';
 import { v4 } from 'uuid';
 import * as turf from '@turf/turf';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
-import { useQueries, useQuery } from '@tanstack/react-query';
+import { useQueries, useQueryClient, useQuery, queryOptions } from '@tanstack/react-query';
 import { handleResponse } from '@opengeoweb/api';
-import { VariableSizeList, FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList, FixedSizeList } from 'react-window';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField, ReactHookFormSelect } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
 import Box$1 from '@mui/material/Box';
@@ -50,6 +50,7 @@ var en = {
 	"timeseries-dimension": "Dimension",
 	"timeseries-dimension-id": "Dimension ID",
 	"timeseries-dimension-value": "Dimension value",
+	"timeseries-dimension-none": "None",
 	"timeseries-reference-time": "Reference Time",
 	"timeseries-type": "Type",
 	"timeseries-line": "Line",
@@ -102,6 +103,7 @@ var en = {
 	"timeseries-service-saved-successfully": "Service \"{{ service }}\" has been saved succesfully",
 	"timeseries-info-title": "TS Info",
 	"timeseries-info-name": "Name",
+	"timeseries-info-label": "Label",
 	"timeseries-info-service": "Service",
 	"timeseries-info-service-url": "Service URL",
 	"timeseries-info-service-type": "Service type",
@@ -377,6 +379,7 @@ var nl = {
 	"timeseries-dimension": "Dimensie",
 	"timeseries-dimension-id": "Dimensie ID",
 	"timeseries-dimension-value": "Dimensie waarde",
+	"timeseries-dimension-none": "Geen",
 	"timeseries-reference-time": "Referentie Tijd",
 	"timeseries-type": "Type",
 	"timeseries-line": "Lijn",
@@ -429,6 +432,7 @@ var nl = {
 	"timeseries-service-saved-successfully": "Service \"{{ service }}\" is succesvol opgeslagen",
 	"timeseries-info-title": "TS Info",
 	"timeseries-info-name": "Naam",
+	"timeseries-info-label": "Label",
 	"timeseries-info-service": "Service",
 	"timeseries-info-service-type": "Service type",
 	"timeseries-info-service-url": "Service URL",
@@ -911,22 +915,14 @@ var createUrl = function createUrl(baseUrl, pathToAdd, queryParameters) {
   return urlObject.toString();
 };
 var supportedOutputFormat = 'CoverageJSON';
-var getBaseQueryParamArray = function getBaseQueryParamArray(parameter, instance, collection, clipInterval) {
-  var _instance$extent, _collection$collectio, _instance$extent2, _collection$collectio2;
-  if (clipInterval === void 0) {
-    clipInterval = [1 * 24, 10 * 24];
-  }
+var getBaseQueryParamArray = function getBaseQueryParamArray(parameter, instance, collection, intervalParam) {
+  var _instance$extent, _collection$extent;
   var res = [];
   res.push(['parameter-name', parameter.propertyName]);
-  var interval = ((_instance$extent = instance.extent) == null || (_instance$extent = _instance$extent.temporal) == null ? void 0 : _instance$extent.interval[0]) || ((_collection$collectio = collection.collectionDetails.extent) == null || (_collection$collectio = _collection$collectio.temporal) == null ? void 0 : _collection$collectio.interval[0]);
-  // ----->  This will also set datetime parameter to the EDR query    <-----
-  var _clipEdrInterval = clipEdrInterval(interval, clipInterval[0], clipInterval[1]),
-    start = _clipEdrInterval[0],
-    end = _clipEdrInterval[1];
-  if (interval != null && interval.length) {
-    res.push(['datetime', start + "/" + end]);
+  if (intervalParam) {
+    res.push(['datetime', intervalParam]);
   }
-  var crs = ((_instance$extent2 = instance.extent) == null ? void 0 : _instance$extent2.spatial.crs) || ((_collection$collectio2 = collection.collectionDetails.extent) == null ? void 0 : _collection$collectio2.spatial.crs);
+  var crs = ((_instance$extent = instance.extent) == null ? void 0 : _instance$extent.spatial.crs) || ((_collection$extent = collection.extent) == null || (_collection$extent = _collection$extent.spatial) == null ? void 0 : _collection$extent.crs);
   if (crs) {
     res.push(['crs', crs]);
   }
@@ -998,73 +994,45 @@ var constructParameterObject = function constructParameterObject(serviceId, coll
   return Object.keys(parametersById).map(function (parameterId) {
     var _parameter$unit$label, _parameter$unit, _COLOR_MAP$parameter$;
     var parameter = parametersById[parameterId];
-    return {
+    return Object.assign({
       plotType: 'line',
-      propertyName: parameter.id || parameterId,
+      propertyName: parameter.id || parameterId
+    }, parameter != null && parameter.label ? {
+      propertyLabel: parameter == null ? void 0 : parameter.label
+    } : {}, {
       unit: (_parameter$unit$label = (_parameter$unit = parameter.unit) == null ? void 0 : _parameter$unit.label) != null ? _parameter$unit$label : ' ',
       serviceId: serviceId,
       collectionId: collectionId,
       color: (_COLOR_MAP$parameter$ = COLOR_MAP[parameter.id]) != null ? _COLOR_MAP$parameter$ : 'A',
       opacity: 70
-    };
+    });
   });
 };
-var getParametersFromCollections = function getParametersFromCollections(service, collections, instances) {
+var getCollectionDetails = function getCollectionDetails(service, collection, instances) {
+  var _collection$extent2;
+  return Object.assign({
+    serviceId: service.id,
+    serviceName: service.name || service.id,
+    collectionId: collection.id,
+    parameters: constructParameterObject(service.id, collection.id, collection.parameter_names),
+    customDimensions: ((_collection$extent2 = collection.extent) == null ? void 0 : _collection$extent2.custom) || [],
+    dataQueries: collection.data_queries || {},
+    extent: collection.extent || {}
+  }, {});
+};
+var getServiceCollectionDetails = function getServiceCollectionDetails(service, collections) {
   var collectionsParameters = [];
-  var serviceCollections = [];
   if (!collections || collections.length === 0) {
     // If no collections are provided, return an empty array
     return collectionsParameters;
   }
   // Only use parameters from collections that support /locations or /position
-  // Either directly or through the latest instance
-  var _loop2 = function _loop2() {
-    var _collection$data_quer, _collection$data_quer2, _instances$find, _collection$data_quer3, _latestInstance$data_, _latestInstance$data_2;
-    var collection = _step.value;
-    var hasDirectSupport = !!((_collection$data_quer = collection.data_queries) != null && _collection$data_quer.locations) || !!((_collection$data_quer2 = collection.data_queries) != null && _collection$data_quer2.position);
-    var latestInstance = instances == null || (_instances$find = instances.find(function (item) {
-      return item.serviceId === service.id && item.collectionId === collection.id;
-    })) == null ? void 0 : _instances$find.latestInstance;
-    var hasInstanceSupport = !!((_collection$data_quer3 = collection.data_queries) != null && _collection$data_quer3.instances) && (!!(latestInstance != null && (_latestInstance$data_ = latestInstance.data_queries) != null && _latestInstance$data_.locations) || !!(latestInstance != null && (_latestInstance$data_2 = latestInstance.data_queries) != null && _latestInstance$data_2.position));
-    if (hasDirectSupport || hasInstanceSupport) {
-      serviceCollections.push(collection);
-    }
-  };
   for (var _iterator = _createForOfIteratorHelperLoose(collections), _step; !(_step = _iterator()).done;) {
-    _loop2();
-  }
-  var _loop = function _loop() {
-    var _collection$extent;
-    var collection = _serviceCollections[_i];
-    var instance = instances == null ? void 0 : instances.find(function (item) {
-      return item.serviceId === service.id && item.collectionId === collection.id;
-    });
-    var latestInstance = instance == null ? void 0 : instance.latestInstance;
-    var allInstances = instance == null ? void 0 : instance.allInstances;
-    // Workaround for non-standard EDR servers, like interpol.met.no
-    var paramNames = {};
-    if (latestInstance != null && latestInstance.parameters) {
-      for (var _iterator2 = _createForOfIteratorHelperLoose(latestInstance.parameters), _step2; !(_step2 = _iterator2()).done;) {
-        var param = _step2.value;
-        paramNames[param.id] = param;
-      }
+    var _collection$data_quer, _collection$data_quer2;
+    var collection = _step.value;
+    if ((_collection$data_quer = collection.data_queries) != null && _collection$data_quer.locations || (_collection$data_quer2 = collection.data_queries) != null && _collection$data_quer2.position) {
+      collectionsParameters.push(getCollectionDetails(service, collection));
     }
-    var hasParamNames = Object.keys(paramNames).length > 0;
-    // If the latest instance has parameters, use those, otherwise use the collection's parameter_names
-    // This is to ensure that we always have a parameter source to work with
-    var parameterSource = (latestInstance == null ? void 0 : latestInstance.parameter_names) || (hasParamNames ? paramNames : collection.parameter_names);
-    collectionsParameters.push({
-      serviceId: service.id,
-      serviceName: service.name || service.id,
-      collectionId: collection.id,
-      parameters: constructParameterObject(service.id, collection.id, parameterSource),
-      customDimensions: ((_collection$extent = collection.extent) == null ? void 0 : _collection$extent.custom) || [],
-      collectionDetails: collection,
-      allInstances: allInstances
-    });
-  };
-  for (var _i = 0, _serviceCollections = serviceCollections; _i < _serviceCollections.length; _i++) {
-    _loop();
   }
   return collectionsParameters;
 };
@@ -1080,15 +1048,6 @@ var getServiceById = function getServiceById(services, serviceId) {
     return service.id === serviceId;
   }) : undefined;
 };
-var getDetailsForCollectionId = function getDetailsForCollectionId(collections, collectionId) {
-  var collection = collections.find(function (collection) {
-    return collection.collectionId === collectionId;
-  });
-  if (collection) {
-    return collection;
-  }
-  return undefined;
-};
 var HOUR_IN_MILLISECONDS = 3600 * 1000;
 /**
  * This function clips the dates in the EDR interval string to a less wide  time range.
@@ -1104,12 +1063,6 @@ var clipEdrInterval = function clipEdrInterval(interval, maxHoursBefore,
 maxHoursAfter,
 // 10 days to the future
 date) {
-  if (maxHoursBefore === void 0) {
-    maxHoursBefore = 1 * 24;
-  }
-  if (maxHoursAfter === void 0) {
-    maxHoursAfter = 10 * 24;
-  }
   if (date === void 0) {
     date = Date.now();
   }
@@ -1128,6 +1081,16 @@ date) {
   var end = dateUtils.dateToString(clippedEndDate);
   return [start, end];
 };
+// 1 day to past, 10 days to future
+var clipInterval = [1 * 24, 10 * 24];
+var constructTimeInterval = function constructTimeInterval(collection, instance, parameter) {
+  var _instance$extent2, _collection$extent3;
+  var interval = ((_instance$extent2 = instance.extent) == null || (_instance$extent2 = _instance$extent2.temporal) == null ? void 0 : _instance$extent2.interval[0]) || (collection == null || (_collection$extent3 = collection.extent) == null || (_collection$extent3 = _collection$extent3.temporal) == null ? void 0 : _collection$extent3.interval[0]);
+  var _clipEdrInterval = clipEdrInterval(interval, clipInterval[0], clipInterval[1]),
+    start = _clipEdrInterval[0],
+    end = _clipEdrInterval[1];
+  return start + "/" + end;
+};
 var EARTH_RADIUS = 6371;
 /**
  * Find nearest point to the target location in timeseries.
@@ -1550,11 +1513,7 @@ var slice = createSlice({
         service.enabled = false;
       }
     },
-    setServiceFilterChipsInStore: function setServiceFilterChipsInStore(
-    // eslint-disable-next-line no-unused-vars
-    draft,
-    // eslint-disable-next-line no-unused-vars
-    action) {
+    setServiceFilterChipsInStore: function setServiceFilterChipsInStore(draft, action) {
       action.payload.forEach(function (service) {
         if (draft.timeseriesSelect) {
           var _draft$timeseriesSele2;
@@ -2196,206 +2155,44 @@ var ParameterOpacitySelect = function ParameterOpacitySelect(_ref) {
   });
 };
 
+/* *
+ * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
 var isTimeSeriesLocation = function isTimeSeriesLocation(obj) {
   return 'id' in obj;
 };
 
-var getLocations = function getLocations(serviceUrl, collectionId) {
-  var url = createUrl(serviceUrl, "/collections/" + collectionId + "/locations");
-  return fetch(url).then(handleResponse);
-};
-var getServiceInformation = function getServiceInformation(serviceUrl) {
-  var url = createUrl(serviceUrl);
-  return fetch(url).then(handleResponse);
-};
-var getCollections = function getCollections(serviceUrl) {
-  var url = createUrl(serviceUrl, '/collections');
-  return fetch(url).then(handleResponse);
-};
-var getCollection = function getCollection(serviceUrl, collectionId) {
-  var url = createUrl(serviceUrl, "/collections/" + collectionId);
-  return fetch(url).then(handleResponse);
-};
-var getInstances = function getInstances(serviceUrl, collectionId) {
-  var url = createUrl(serviceUrl, "/collections/" + collectionId + "/instances");
-  return fetch(url).then(handleResponse);
-};
-var getInstanceDetails = function getInstanceDetails(serviceUrl, collectionId, instanceId) {
-  var url = createUrl(serviceUrl, "/collections/" + collectionId + "/instances/" + instanceId);
-  return fetch(url).then(handleResponse);
-};
-var getSupportedInstances = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(serviceUrl, collectionId, useCollectionFallback) {
-    var _collection$data_quer;
-    var collection, _yield$getInstances, instances;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (!(!serviceUrl || !collectionId)) {
-            _context.next = 2;
-            break;
-          }
-          return _context.abrupt("return", []);
-        case 2:
-          _context.next = 4;
-          return getCollection(serviceUrl, collectionId);
-        case 4:
-          collection = _context.sent;
-          if (!((_collection$data_quer = collection.data_queries) != null && _collection$data_quer.instances)) {
-            _context.next = 11;
-            break;
-          }
-          _context.next = 8;
-          return getInstances(serviceUrl, collectionId);
-        case 8:
-          _yield$getInstances = _context.sent;
-          instances = _yield$getInstances.instances;
-          return _context.abrupt("return", listSupportedInstances(instances));
-        case 11:
-          return _context.abrupt("return", useCollectionFallback ? [collection] : []);
-        case 12:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return function getSupportedInstances(_x, _x2, _x3) {
-    return _ref.apply(this, arguments);
-  };
-}();
-var fetchParametersForService = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(service) {
-    var url, serviceId, _yield$getCollections, collections, latestInstances, supportedInstances;
-    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          url = service.url, serviceId = service.id;
-          _context3.next = 3;
-          return getCollections(url);
-        case 3:
-          _yield$getCollections = _context3.sent;
-          collections = _yield$getCollections.collections;
-          _context3.next = 7;
-          return Promise.all(collections.map(/*#__PURE__*/function () {
-            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(collection) {
-              var _collection$data_quer2;
-              var allInstances, instance, details;
-              return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
-                  case 0:
-                    if (!((_collection$data_quer2 = collection.data_queries) != null && _collection$data_quer2.instances)) {
-                      _context2.next = 10;
-                      break;
-                    }
-                    _context2.next = 3;
-                    return getSupportedInstances(url, collection.id);
-                  case 3:
-                    allInstances = _context2.sent;
-                    instance = latestInstance(allInstances);
-                    if (!instance) {
-                      _context2.next = 10;
-                      break;
-                    }
-                    _context2.next = 8;
-                    return getInstanceDetails(url, collection.id, instance.id);
-                  case 8:
-                    details = _context2.sent;
-                    return _context2.abrupt("return", {
-                      latestInstance: Object.assign({}, instance, details),
-                      collectionDetails: collection,
-                      allInstances: allInstances,
-                      collectionId: collection.id,
-                      serviceId: serviceId
-                    });
-                  case 10:
-                    return _context2.abrupt("return", null);
-                  case 11:
-                  case "end":
-                    return _context2.stop();
-                }
-              }, _callee2);
-            }));
-            return function (_x5) {
-              return _ref3.apply(this, arguments);
-            };
-          }()));
-        case 7:
-          latestInstances = _context3.sent;
-          supportedInstances = latestInstances.filter(function (inst) {
-            return inst !== null;
-          });
-          return _context3.abrupt("return", getParametersFromCollections(service, collections, supportedInstances));
-        case 10:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  }));
-  return function fetchParametersForService(_x4) {
-    return _ref2.apply(this, arguments);
-  };
-}();
-var getLocation = function getLocation(serviceUrl, collectionId, instanceId, locationId, queryParamArr) {
-  var path = getLocationPositionPath(collectionId, instanceId);
-  var url = createUrl(serviceUrl, path + "/locations/" + locationId, queryParamArr);
-  return fetch(url).then(handleResponse);
-};
-var getPosition = function getPosition(serviceUrl, collectionId, instanceId, position, queryParamArr) {
-  var path = getLocationPositionPath(collectionId, instanceId);
-  var lat = position.lat,
-    lon = position.lon;
-  var url = createUrl(serviceUrl, path + "/position", [].concat(queryParamArr, [['coords', "POINT(" + lon + " " + lat + ")"]]));
-  return fetch(url).then(handleResponse);
-};
-var fetchEdrParameter = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(serviceUrl, parameter, location, instance, collection) {
-    var _instance$data_querie, _collection$collectio, _instance$data_querie2, _collection$collectio2;
-    var collectionId, queryParamArr, locationId, result, _result;
-    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          collectionId = parameter.collectionId;
-          queryParamArr = getBaseQueryParamArray(parameter, instance, collection);
-          if (!(isTimeSeriesLocation(location) && ((_instance$data_querie = instance.data_queries) != null && _instance$data_querie.locations || (_collection$collectio = collection.collectionDetails.data_queries) != null && _collection$collectio.locations))) {
-            _context4.next = 11;
-            break;
-          }
-          locationId = location.id;
-          if (!locationId) {
-            _context4.next = 9;
-            break;
-          }
-          _context4.next = 7;
-          return getLocation(serviceUrl, collectionId, instance.id, locationId, queryParamArr);
-        case 7:
-          result = _context4.sent;
-          return _context4.abrupt("return", result);
-        case 9:
-          _context4.next = 16;
-          break;
-        case 11:
-          if (!((_instance$data_querie2 = instance.data_queries) != null && _instance$data_querie2.position || (_collection$collectio2 = collection.collectionDetails.data_queries) != null && _collection$collectio2.position)) {
-            _context4.next = 16;
-            break;
-          }
-          _context4.next = 14;
-          return getPosition(serviceUrl, collectionId, instance.id, location, queryParamArr);
-        case 14:
-          _result = _context4.sent;
-          return _context4.abrupt("return", _result);
-        case 16:
-          return _context4.abrupt("return", null);
-        case 17:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  }));
-  return function fetchEdrParameter(_x6, _x7, _x8, _x9, _x0) {
-    return _ref4.apply(this, arguments);
-  };
-}();
-
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
 var createGeoJsonArrays = function createGeoJsonArrays(locations, services, hideFeatures, memoizedSelectedFeature) {
   var initialAccumulator = {
     obj: {},
@@ -2460,7 +2257,6 @@ var createGeoJsonArrays = function createGeoJsonArrays(locations, services, hide
                 features: []
               }
             };
-            // eslint-disable-next-line no-param-reassign
             acc.collectionMap[collectionName] = newGeoJsonWithService;
           }
           acc.collectionMap[collectionName].geoJson.features.push(feature);
@@ -2509,141 +2305,6 @@ var getNearbyLocation = function getNearbyLocation(parameter, service, selectedL
   }
   return null;
 };
-var getEdrParameter = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(presetParameter, serviceUrl, location, collection) {
-    var _collection$allInstan, _collection$allInstan2;
-    var instanceInfo, apiData, paramData, paramKey, unit;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          instanceInfo = presetParameter.instanceId && ((_collection$allInstan = collection.allInstances) == null ? void 0 : _collection$allInstan.find(function (inst) {
-            return inst.id === presetParameter.instanceId;
-          })) || ((_collection$allInstan2 = collection.allInstances) == null ? void 0 : _collection$allInstan2[0]) || {
-            id: ''
-          };
-          _context.next = 3;
-          return fetchEdrParameter(serviceUrl, presetParameter, location, instanceInfo, collection);
-        case 3:
-          apiData = _context.sent;
-          paramData = apiData != null && apiData.coverages ? apiData == null ? void 0 : apiData.coverages[0] : apiData;
-          if (!(!apiData || !(paramData != null && paramData.ranges) || !paramData.domain.axes.t || paramData.domain.axes.t.values.length === 0)) {
-            _context.next = 7;
-            break;
-          }
-          return _context.abrupt("return", null);
-        case 7:
-          // assume only one parameter
-          paramKey = Object.keys(paramData.ranges)[0];
-          unit = getUnit(apiData.parameters[paramKey], i18n.language, 'en');
-          return _context.abrupt("return", Object.assign({}, presetParameter, {
-            unit: unit,
-            timestep: paramData.domain.axes.t.values.map(function (str) {
-              return dateUtils.utc(str);
-            }),
-            value: paramData.ranges[paramKey].values
-          }));
-        case 10:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return function getEdrParameter(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-}();
-var getErrorMessage = function getErrorMessage(parameter) {
-  return parameter.propertyName + " - " + parameter.collectionId;
-};
-var fetchParameter = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(parameter, selectedLocation, service, geojsonMap, collection) {
-    var _selectedLocation$occ, occurrence, position, result, nearbyLocation;
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          if (collection) {
-            _context2.next = 2;
-            break;
-          }
-          throw new Error('No collection found for parameter');
-        case 2:
-          if (!isTimeSeriesLocation(selectedLocation)) {
-            _context2.next = 14;
-            break;
-          }
-          // The selected location contains a lisf of occurrences (combination of service and collection)
-          occurrence = (_selectedLocation$occ = selectedLocation.occurrences) == null ? void 0 : _selectedLocation$occ.find(function (occ) {
-            var _occ$properties, _occ$properties2;
-            return ((_occ$properties = occ.properties) == null ? void 0 : _occ$properties.collectionId) === parameter.collectionId && ((_occ$properties2 = occ.properties) == null ? void 0 : _occ$properties2.serviceId) === parameter.serviceId;
-          });
-          if (!occurrence) {
-            _context2.next = 14;
-            break;
-          }
-          _context2.prev = 5;
-          _context2.next = 8;
-          return getEdrParameter(parameter, service.url, {
-            id: occurrence.id,
-            lat: selectedLocation.lat,
-            lon: selectedLocation.lon
-          }, collection);
-        case 8:
-          return _context2.abrupt("return", _context2.sent);
-        case 11:
-          _context2.prev = 11;
-          _context2.t0 = _context2["catch"](5);
-          throw new Error(getErrorMessage(parameter));
-        case 14:
-          // Try a position query
-          position = {
-            lon: selectedLocation.lon,
-            lat: selectedLocation.lat
-          };
-          _context2.prev = 15;
-          _context2.next = 18;
-          return getEdrParameter(parameter, service.url, position, collection);
-        case 18:
-          result = _context2.sent;
-          if (!result) {
-            _context2.next = 21;
-            break;
-          }
-          return _context2.abrupt("return", result);
-        case 21:
-          _context2.next = 37;
-          break;
-        case 23:
-          _context2.prev = 23;
-          _context2.t1 = _context2["catch"](15);
-          // As a final option look for a nearby location
-          nearbyLocation = getNearbyLocation(parameter, service, selectedLocation, geojsonMap);
-          if (!nearbyLocation) {
-            _context2.next = 36;
-            break;
-          }
-          _context2.prev = 27;
-          _context2.next = 30;
-          return getEdrParameter(parameter, service.url, nearbyLocation, collection);
-        case 30:
-          return _context2.abrupt("return", _context2.sent);
-        case 33:
-          _context2.prev = 33;
-          _context2.t2 = _context2["catch"](27);
-          throw new Error(getErrorMessage(parameter));
-        case 36:
-          throw new Error(getErrorMessage(parameter));
-        case 37:
-          throw new Error(getErrorMessage(parameter));
-        case 38:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2, null, [[5, 11], [15, 23], [27, 33]]);
-  }));
-  return function fetchParameter(_x5, _x6, _x7, _x8, _x9) {
-    return _ref2.apply(this, arguments);
-  };
-}();
 var getPlotsWithParameters = function getPlotsWithParameters(plots, parameters) {
   var parametersByPlotId = groupBy(parameters, function (parameter) {
     return parameter.plotId;
@@ -2683,20 +2344,324 @@ var combineParametersWithData = function combineParametersWithData(parameters, d
     });
   });
 };
+var extractUsedCollections = function extractUsedCollections(plotsWithoutData, services) {
+  return plotsWithoutData.parameters.reduce(function (acc, param) {
+    var _Object$assign;
+    var serviceCollection = param.serviceId + "-" + param.collectionId;
+    if (acc.serviceCollection) {
+      return acc;
+    }
+    var service = services.find(function (service) {
+      return service.id === param.serviceId;
+    });
+    if (!service) {
+      return acc;
+    }
+    return Object.assign({}, acc, (_Object$assign = {}, _Object$assign[serviceCollection] = {
+      serviceId: param.serviceId,
+      service: service,
+      collectionId: param.collectionId
+    }, _Object$assign));
+  }, {});
+};
+var extractDataFromfetchEdrParameterResponse = function extractDataFromfetchEdrParameterResponse(edrResponse, parameter) {
+  // If coverage collection is returned, take the first
+  var paramData = edrResponse != null && edrResponse.coverages ? edrResponse == null ? void 0 : edrResponse.coverages[0] : edrResponse;
+  if (!edrResponse || !(paramData != null && paramData.ranges) || !paramData.domain.axes.t || paramData.domain.axes.t.values.length === 0) {
+    return null;
+  }
+  // assume only one parameter
+  var paramKey = Object.keys(paramData.ranges)[0];
+  var unit = getUnit(edrResponse.parameters[paramKey], i18n.language, 'en');
+  return Object.assign({}, parameter, {
+    unit: unit,
+    timestep: paramData.domain.axes.t.values.map(function (str) {
+      return dateUtils.utc(str);
+    }),
+    value: paramData.ranges[paramKey].values
+  });
+};
 
-var useGetCollectionDetails = function useGetCollectionDetails(services) {
+var getLocations = function getLocations(serviceUrl, collectionId) {
+  var url = createUrl(serviceUrl, "/collections/" + collectionId + "/locations");
+  return fetch(url).then(handleResponse);
+};
+var getServiceInformation = function getServiceInformation(serviceUrl) {
+  var url = createUrl(serviceUrl);
+  return fetch(url).then(handleResponse);
+};
+var getCollections = function getCollections(serviceUrl) {
+  var url = createUrl(serviceUrl, '/collections');
+  return fetch(url).then(handleResponse);
+};
+var getCollection = function getCollection(serviceUrl, collectionId) {
+  var url = createUrl(serviceUrl, "/collections/" + collectionId);
+  return fetch(url).then(handleResponse);
+};
+var getInstances = function getInstances(serviceUrl, collectionId) {
+  var url = createUrl(serviceUrl, "/collections/" + collectionId + "/instances");
+  return fetch(url).then(handleResponse);
+};
+var getLocation = function getLocation(serviceUrl, collectionId, instanceId, locationId, queryParamArr) {
+  var path = getLocationPositionPath(collectionId, instanceId);
+  var url = createUrl(serviceUrl, path + "/locations/" + locationId, queryParamArr);
+  return fetch(url).then(handleResponse);
+};
+var getPosition = function getPosition(serviceUrl, collectionId, instanceId, position, queryParamArr) {
+  var path = getLocationPositionPath(collectionId, instanceId);
+  var lat = position.lat,
+    lon = position.lon;
+  var url = createUrl(serviceUrl, path + "/position", [].concat(queryParamArr, [['coords', "POINT(" + lon + " " + lat + ")"]]));
+  return fetch(url).then(handleResponse);
+};
+var getErrorMessage = function getErrorMessage(parameter) {
+  return parameter.propertyName + " - " + parameter.collectionId;
+};
+var fetchEdrParameter = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(parameter, location, service, geojsonMap, intervalParam, collection, instance) {
+    var _instance$data_querie, _collection$dataQueri;
+    var collectionId, queryParamArr, _location$occurrences, occurrence, _instance$data_querie2, _collection$dataQueri2, nearbyLocation;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          collectionId = parameter.collectionId;
+          queryParamArr = getBaseQueryParamArray(parameter, instance, collection, intervalParam);
+          if (!(isTimeSeriesLocation(location) && ((_instance$data_querie = instance.data_queries) != null && _instance$data_querie.locations || (_collection$dataQueri = collection.dataQueries) != null && _collection$dataQueri.locations))) {
+            _context.next = 14;
+            break;
+          }
+          // The selected location contains a list of occurrences (combination of service and collection)
+          occurrence = (_location$occurrences = location.occurrences) == null ? void 0 : _location$occurrences.find(function (occ) {
+            var _occ$properties, _occ$properties2;
+            return ((_occ$properties = occ.properties) == null ? void 0 : _occ$properties.collectionId) === parameter.collectionId && ((_occ$properties2 = occ.properties) == null ? void 0 : _occ$properties2.serviceId) === parameter.serviceId;
+          });
+          if (!(occurrence && occurrence.id)) {
+            _context.next = 14;
+            break;
+          }
+          _context.prev = 5;
+          _context.next = 8;
+          return getLocation(service.url, collectionId, instance.id, occurrence.id, queryParamArr);
+        case 8:
+          return _context.abrupt("return", _context.sent);
+        case 11:
+          _context.prev = 11;
+          _context.t0 = _context["catch"](5);
+          throw new Error(getErrorMessage(parameter));
+        case 14:
+          _context.prev = 14;
+          if (!((_instance$data_querie2 = instance.data_queries) != null && _instance$data_querie2.position || (_collection$dataQueri2 = collection.dataQueries) != null && _collection$dataQueri2.position)) {
+            _context.next = 19;
+            break;
+          }
+          _context.next = 18;
+          return getPosition(service.url, collectionId, instance.id, {
+            lon: location.lon,
+            lat: location.lat
+          }, queryParamArr);
+        case 18:
+          return _context.abrupt("return", _context.sent);
+        case 19:
+          _context.next = 35;
+          break;
+        case 21:
+          _context.prev = 21;
+          _context.t1 = _context["catch"](14);
+          // As a final option look for a nearby location
+          nearbyLocation = getNearbyLocation(parameter, service, location, geojsonMap);
+          if (!nearbyLocation) {
+            _context.next = 34;
+            break;
+          }
+          _context.prev = 25;
+          _context.next = 28;
+          return getLocation(service.url, collectionId, instance.id, nearbyLocation.id || '', queryParamArr);
+        case 28:
+          return _context.abrupt("return", _context.sent);
+        case 31:
+          _context.prev = 31;
+          _context.t2 = _context["catch"](25);
+          throw new Error(getErrorMessage(parameter));
+        case 34:
+          throw new Error(getErrorMessage(parameter));
+        case 35:
+          throw new Error(getErrorMessage(parameter));
+        case 36:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[5, 11], [14, 21], [25, 31]]);
+  }));
+  return function fetchEdrParameter(_x, _x2, _x3, _x4, _x5, _x6, _x7) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+// Ensures every timeseries query starts with the same query key
+var generateTimeSeriesQueryKeys = function generateTimeSeriesQueryKeys(queryKeys) {
+  return ['time-series'].concat(queryKeys);
+};
+var timeseriesEDRQueryOptions = {
+  getServiceInformationQuery: function getServiceInformationQuery(serviceUrl) {
+    return queryOptions({
+      queryKey: generateTimeSeriesQueryKeys(['get-service-information', serviceUrl]),
+      queryFn: function () {
+        var _queryFn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", getServiceInformation(serviceUrl));
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function queryFn() {
+          return _queryFn.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      enabled: !!serviceUrl
+    });
+  },
+  getCollectionsQuery: function getCollectionsQuery(serviceUrl) {
+    return queryOptions({
+      queryKey: generateTimeSeriesQueryKeys(['get-collections', serviceUrl]),
+      queryFn: function () {
+        var _queryFn2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+          var result;
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return getCollections(serviceUrl);
+              case 2:
+                result = _context2.sent;
+                return _context2.abrupt("return", result.collections);
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function queryFn() {
+          return _queryFn2.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      enabled: !!serviceUrl
+    });
+  },
+  getCollectionDetailsQuery: function getCollectionDetailsQuery(service, collectionId) {
+    return queryOptions({
+      queryKey: generateTimeSeriesQueryKeys(['get-collection-details', service == null ? void 0 : service.url, collectionId]),
+      queryFn: function () {
+        var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+          var collection;
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return getCollection(service.url, collectionId);
+              case 2:
+                collection = _context3.sent;
+                return _context3.abrupt("return", getCollectionDetails(service, collection));
+              case 4:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        function queryFn() {
+          return _queryFn3.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      enabled: !!service && !!(service != null && service.url) && service.url !== '' && !!collectionId && collectionId !== ''
+    });
+  },
+  getInstancesQuery: function getInstancesQuery(serviceUrl, collectionId, supportsInstances) {
+    if (supportsInstances === void 0) {
+      supportsInstances = true;
+    }
+    return queryOptions({
+      queryKey: generateTimeSeriesQueryKeys(['get-instances', serviceUrl, collectionId]),
+      queryFn: function () {
+        var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+          var _yield$getInstances, instances;
+          return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+            while (1) switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.next = 2;
+                return getInstances(serviceUrl, collectionId);
+              case 2:
+                _yield$getInstances = _context4.sent;
+                instances = _yield$getInstances.instances;
+                return _context4.abrupt("return", listSupportedInstances(instances));
+              case 5:
+              case "end":
+                return _context4.stop();
+            }
+          }, _callee4);
+        }));
+        function queryFn() {
+          return _queryFn4.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      enabled: supportsInstances && !!serviceUrl && serviceUrl !== '' && !!collectionId && collectionId !== ''
+    });
+  }
+};
+var useGetServiceInformation = function useGetServiceInformation(serviceUrl) {
+  return useQuery(timeseriesEDRQueryOptions.getServiceInformationQuery(serviceUrl));
+};
+var useGetCollections = function useGetCollections(serviceUrl) {
+  return useQuery(timeseriesEDRQueryOptions.getCollectionsQuery(serviceUrl));
+};
+var useGetDetailsForCollection = function useGetDetailsForCollection(service, collectionId) {
+  return useQuery(timeseriesEDRQueryOptions.getCollectionDetailsQuery(service, collectionId));
+};
+var useGetInstances = function useGetInstances(serviceUrl, collectionId, supportsInstances) {
+  if (supportsInstances === void 0) {
+    supportsInstances = true;
+  }
+  return useQuery(timeseriesEDRQueryOptions.getInstancesQuery(serviceUrl, collectionId, supportsInstances));
+};
+var useGetServiceCollectionDetails = function useGetServiceCollectionDetails(services, isOpen) {
+  var queryClient = useQueryClient();
   var queries = useMemo(function () {
     return services.map(function (service) {
       return {
-        queryKey: ['collection-details', service == null ? void 0 : service.id, service == null ? void 0 : service.url],
-        queryFn: function queryFn() {
-          return fetchParametersForService(service);
-        },
-        enabled: !!(service != null && service.id) && !!(service != null && service.url),
+        queryKey: generateTimeSeriesQueryKeys(['get-service-collections-details', service == null ? void 0 : service.id, service == null ? void 0 : service.url]),
+        queryFn: function () {
+          var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+            var collections;
+            return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+              while (1) switch (_context5.prev = _context5.next) {
+                case 0:
+                  _context5.next = 2;
+                  return queryClient.fetchQuery(timeseriesEDRQueryOptions.getCollectionsQuery(service.url));
+                case 2:
+                  collections = _context5.sent;
+                  return _context5.abrupt("return", getServiceCollectionDetails(service, collections));
+                case 4:
+                case "end":
+                  return _context5.stop();
+              }
+            }, _callee5);
+          }));
+          function queryFn() {
+            return _queryFn5.apply(this, arguments);
+          }
+          return queryFn;
+        }(),
+        enabled: isOpen && !!(service != null && service.id) && !!(service != null && service.url),
         refetchInterval: 10 * 60 * 1000
       };
     });
-  }, [services]);
+  }, [services, isOpen, queryClient]);
   return useQueries({
     queries: queries,
     combine: function combine(results) {
@@ -2720,46 +2685,144 @@ var useGetCollectionDetails = function useGetCollectionDetails(services) {
     }
   });
 };
+var useGetCollectionsAndInstanceDetails = function useGetCollectionsAndInstanceDetails(queryData) {
+  var queryClient = useQueryClient();
+  var queries = useMemo(function () {
+    return Object.values(queryData).map(function (query) {
+      return {
+        queryKey: generateTimeSeriesQueryKeys(['get-collection-and-instances-details', query.service.url, query.collectionId]),
+        queryFn: function () {
+          var _queryFn6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+            var _collectionDetails$da, _collectionDetails$da2, _collectionDetails$da3;
+            var service, collectionId, collectionDetails, allInstances;
+            return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+              while (1) switch (_context6.prev = _context6.next) {
+                case 0:
+                  service = query.service, collectionId = query.collectionId;
+                  _context6.next = 3;
+                  return queryClient.fetchQuery(timeseriesEDRQueryOptions.getCollectionDetailsQuery(service, collectionId));
+                case 3:
+                  collectionDetails = _context6.sent;
+                  if (!(!!((_collectionDetails$da = collectionDetails.dataQueries) != null && _collectionDetails$da.instances) && (!!((_collectionDetails$da2 = collectionDetails.dataQueries) != null && _collectionDetails$da2.locations) || !!((_collectionDetails$da3 = collectionDetails.dataQueries) != null && _collectionDetails$da3.position)))) {
+                    _context6.next = 9;
+                    break;
+                  }
+                  _context6.next = 7;
+                  return queryClient.fetchQuery(timeseriesEDRQueryOptions.getInstancesQuery(service.url, collectionId));
+                case 7:
+                  allInstances = _context6.sent;
+                  return _context6.abrupt("return", Object.assign({}, collectionDetails, {
+                    allInstances: allInstances
+                  }));
+                case 9:
+                  return _context6.abrupt("return", collectionDetails);
+                case 10:
+                case "end":
+                  return _context6.stop();
+              }
+            }, _callee6);
+          }));
+          function queryFn() {
+            return _queryFn6.apply(this, arguments);
+          }
+          return queryFn;
+        }(),
+        enabled: !!query.service.url && !!query.collectionId,
+        refetchInterval: 5 * 60 * 1000
+      };
+    });
+  }, [queryClient, queryData]);
+  return useQueries({
+    queries: queries,
+    combine: function combine(results) {
+      var _results$find2;
+      var data = results.filter(function (query) {
+        return query.isSuccess && query.data;
+      }).flatMap(function (query) {
+        return query.data || [];
+      });
+      var isFetching = results.some(function (result) {
+        return result.isFetching;
+      });
+      var error = (_results$find2 = results.find(function (result) {
+        return result == null ? void 0 : result.error;
+      })) == null ? void 0 : _results$find2.error;
+      return {
+        data: data,
+        isFetching: isFetching,
+        error: error
+      };
+    }
+  });
+};
 var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selectedLocation, services, splitGeoJsonByCollection) {
-  var _useGetCollectionDeta = useGetCollectionDetails(services),
-    collections = _useGetCollectionDeta.data;
   var _useState = useState([]),
     plotsWithData = _useState[0],
     setPlotsWithData = _useState[1];
-  var serviceMap = useMemo(function () {
-    return services.reduce(function (acc, service) {
-      var _Object$assign;
-      return Object.assign({}, acc, (_Object$assign = {}, _Object$assign[service.id] = service, _Object$assign));
-    }, {});
-  }, [services]);
+  // Create array of collections we need to query for the data
+  var collectionsList = useMemo(function () {
+    return extractUsedCollections(plotsWithoutData, services);
+  }, [plotsWithoutData, services]);
+  // First fetch collection and any relevant instance data
+  var _useGetCollectionsAnd = useGetCollectionsAndInstanceDetails(collectionsList),
+    collectionDetails = _useGetCollectionsAnd.data;
   var geojsonMap = useMemo(function () {
     return new Map(splitGeoJsonByCollection.map(function (gjs) {
       return [gjs.serviceName + "_" + gjs.collectionName, gjs];
     }));
   }, [splitGeoJsonByCollection]);
-  var collectionsMap = useMemo(function () {
-    return collections == null ? void 0 : collections.reduce(function (acc, collection) {
-      var _Object$assign2;
-      return Object.assign({}, acc, (_Object$assign2 = {}, _Object$assign2[collection.collectionId] = collection, _Object$assign2));
-    }, {});
-  }, [collections]);
+  // Construct all queries to be executed
   var queries = useMemo(function () {
     return plotsWithoutData.parameters.map(function (parameter) {
-      var _parameter$dimension;
-      var service = serviceMap[parameter.serviceId];
-      var collection = collectionsMap == null ? void 0 : collectionsMap[parameter.collectionId];
+      var _collection$allInstan, _parameter$dimension;
+      var service = collectionsList[parameter.serviceId + "-" + parameter.collectionId].service;
+      var collection = collectionDetails == null ? void 0 : collectionDetails.find(function (collection) {
+        return collection.serviceId === parameter.serviceId && collection.collectionId === parameter.collectionId;
+      });
+      var instanceInfo = parameter.instanceId && (collection == null || (_collection$allInstan = collection.allInstances) == null ? void 0 : _collection$allInstan.find(function (inst) {
+        return inst.id === parameter.instanceId;
+      })) || latestInstance((collection == null ? void 0 : collection.allInstances) || []) || {
+        id: ''
+      };
+      // 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);
       return {
-        queryKey: ['parameter-data', parameter.propertyName, parameter.serviceId, parameter.collectionId, parameter.instanceId, (_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.value, selectedLocation.lat, selectedLocation.lon],
-        queryFn: function queryFn() {
-          var result = fetchParameter(parameter, selectedLocation, service, geojsonMap, collection);
-          return result;
-        },
+        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 () {
+          var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+            var edrResponse;
+            return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+              while (1) switch (_context7.prev = _context7.next) {
+                case 0:
+                  if (collection) {
+                    _context7.next = 2;
+                    break;
+                  }
+                  throw new Error('No collection found for parameter');
+                case 2:
+                  _context7.next = 4;
+                  return fetchEdrParameter(parameter, selectedLocation, service, geojsonMap, intervalParam, collection, instanceInfo);
+                case 4:
+                  edrResponse = _context7.sent;
+                  return _context7.abrupt("return", extractDataFromfetchEdrParameterResponse(edrResponse, parameter));
+                case 6:
+                case "end":
+                  return _context7.stop();
+              }
+            }, _callee7);
+          }));
+          function queryFn() {
+            return _queryFn7.apply(this, arguments);
+          }
+          return queryFn;
+        }(),
         enabled: !!parameter && !!selectedLocation.lon && !!selectedLocation.lat && !!service && !!collection,
         refetchInterval: 5 * 60 * 1000,
         retry: false
       };
     });
-  }, [collectionsMap, geojsonMap, plotsWithoutData.parameters, selectedLocation, serviceMap]);
+  }, [collectionDetails, geojsonMap, plotsWithoutData.parameters, selectedLocation, collectionsList]);
   var results = useQueries({
     queries: queries,
     combine: function combine(results) {
@@ -2798,7 +2861,7 @@ var useGetLocations = function useGetLocations(options) {
   var queries = useMemo(function () {
     return options.map(function (option) {
       return {
-        queryKey: ['timeseries-locations', option.service.id, option.collectionId],
+        queryKey: generateTimeSeriesQueryKeys(['get-timeseries-locations', option.service.id, option.collectionId]),
         queryFn: function queryFn() {
           return getLocations(option.service.url, option.collectionId);
         }
@@ -2808,15 +2871,15 @@ var useGetLocations = function useGetLocations(options) {
   var results = useQueries({
     queries: queries,
     combine: function combine(results) {
-      var _results$find2;
+      var _results$find3;
       var resultList = results.map(function (result, index) {
         var _result$data;
         if (result.isPending || result.isError) {
           return undefined;
         }
         var _queries$index$queryK = queries[index].queryKey,
-          serviceId = _queries$index$queryK[1],
-          collectionId = _queries$index$queryK[2];
+          serviceId = _queries$index$queryK[2],
+          collectionId = _queries$index$queryK[3];
         var features = result == null || (_result$data = result.data) == null ? void 0 : _result$data.features.map(function (feature) {
           var geometry = feature.geometry;
           var featureClass = getFeatureClass(geometry.type);
@@ -2848,9 +2911,9 @@ var useGetLocations = function useGetLocations(options) {
       var isFetching = results.some(function (result) {
         return result.isFetching;
       });
-      var error = (_results$find2 = results.find(function (result) {
+      var error = (_results$find3 = results.find(function (result) {
         return result == null ? void 0 : result.error;
-      })) == null ? void 0 : _results$find2.error;
+      })) == null ? void 0 : _results$find3.error;
       return {
         data: data,
         isFetching: isFetching,
@@ -2860,115 +2923,27 @@ var useGetLocations = function useGetLocations(options) {
   });
   return results;
 };
-var useGetServiceInformation = function useGetServiceInformation(serviceUrl) {
-  return useQuery({
-    queryKey: ['service-information', serviceUrl],
-    queryFn: function () {
-      var _queryFn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", getServiceInformation(serviceUrl));
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      function queryFn() {
-        return _queryFn.apply(this, arguments);
-      }
-      return queryFn;
-    }(),
-    enabled: !!serviceUrl
-  });
-};
-var useGetCollections = function useGetCollections(serviceUrl) {
-  return useQuery({
-    queryKey: ['collections', serviceUrl],
-    queryFn: function () {
-      var _queryFn2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-        var result;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return getCollections(serviceUrl);
-            case 2:
-              result = _context2.sent;
-              return _context2.abrupt("return", result.collections);
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      function queryFn() {
-        return _queryFn2.apply(this, arguments);
-      }
-      return queryFn;
-    }(),
-    enabled: !!serviceUrl
-  });
-};
-var useGetInstances = function useGetInstances(serviceUrl, collectionId) {
-  return useQuery({
-    queryKey: ['instances', serviceUrl, collectionId],
-    queryFn: function () {
-      var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var result;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              _context3.next = 2;
-              return getSupportedInstances(serviceUrl, collectionId, true);
-            case 2:
-              result = _context3.sent;
-              return _context3.abrupt("return", result);
-            case 4:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-      function queryFn() {
-        return _queryFn3.apply(this, arguments);
-      }
-      return queryFn;
-    }(),
-    enabled: !!serviceUrl && !!collectionId
-  });
-};
 
 var ParameterNameSelect = function ParameterNameSelect(_ref) {
   var rowIsEnabled = _ref.rowIsEnabled,
     parameter = _ref.parameter,
     patchParameter = _ref.patchParameter,
     t = _ref.t;
-  var serviceId = parameter.serviceId;
+  var serviceId = parameter.serviceId,
+    collectionId = parameter.collectionId;
   var service = useSelector(function (store) {
     return getService(store, serviceId);
   });
-  var _React$useState = React__default.useState([]),
-    parameterList = _React$useState[0],
-    setParameterList = _React$useState[1];
-  var _useGetCollectionDeta = useGetCollectionDetails([service]),
-    collections = _useGetCollectionDeta.data;
-  React__default.useEffect(function () {
-    if (collections) {
-      var params = getDetailsForCollectionId(collections, parameter.collectionId);
-      if (params) {
-        setParameterList(params.parameters);
-      }
-    }
-  }, [collections, parameter.collectionId]);
+  var _useGetDetailsForColl = useGetDetailsForCollection(service, collectionId),
+    collectionDetails = _useGetDetailsForColl.data;
+  var parameterList = (collectionDetails == null ? void 0 : collectionDetails.parameters) || [];
   var isFetching = parameterList.length === 0;
   return jsxs(TooltipSelect, {
     SelectDisplayProps: {
       'aria-label': 'timeseriesManager-parameterName'
     },
     value: parameter.propertyName,
-    tooltip: "Parameter: " + parameter.propertyName,
+    tooltip: "Parameter: " + parameter.propertyName + "  " + (parameter.propertyLabel ? '-' : '') + " " + (parameter.propertyLabel ? parameter.propertyLabel : ''),
     isEnabled: rowIsEnabled,
     onChange: function onChange(event) {
       var selectedParam = parameterList.find(function (parameter) {
@@ -2996,7 +2971,7 @@ var ParameterNameSelect = function ParameterNameSelect(_ref) {
     }), parameterList.map(function (parameter) {
       return jsx(MenuItem, {
         value: parameter.propertyName,
-        children: parameter.propertyName
+        children: parameter.propertyLabel || parameter.propertyName
       }, "parametermenu" + parameter.propertyName);
     })]
   });
@@ -3119,16 +3094,10 @@ var ParameterDimensionIdSelect = function ParameterDimensionIdSelect(_ref) {
         id: parameter.id,
         dimension: {
           id: event.target.value,
+          // Select the first value of selected dimension by default
           value: ''
         }
       };
-      // Select the first value of selected dimension by default
-      if (newParameter.dimension.id && newParameter.dimension.id !== REFERENCE_TIME_ID) {
-        var _customDimensions$fin;
-        newParameter.dimension.value = ((_customDimensions$fin = customDimensions.find(function (dimension) {
-          return dimension.id === newParameter.dimension.id;
-        })) == null ? void 0 : _customDimensions$fin.values[0]) || '';
-      }
       patchParameter(newParameter);
     },
     children: [jsx(MenuItem, {
@@ -3148,25 +3117,18 @@ var ParameterDimensionIdSelect = function ParameterDimensionIdSelect(_ref) {
   });
 };
 
+var defaultValue = 'none';
 var ParameterDimensionValueSelect = function ParameterDimensionValueSelect(_ref) {
-  var _parameter$dimension2, _parameter$dimension3, _parameter$dimension4, _parameter$dimension5, _parameter$dimension6;
+  var _parameter$dimension2, _parameter$dimension3, _parameter$dimension4, _parameter$dimension5, _parameter$dimension6, _parameter$dimension8, _parameter$dimension9;
   var rowIsEnabled = _ref.rowIsEnabled,
     parameter = _ref.parameter,
     customDimensions = _ref.customDimensions,
     patchParameter = _ref.patchParameter,
     t = _ref.t;
-  var _React$useState = React__default.useState(),
-    selectedDimension = _React$useState[0],
-    setSelectedDimension = _React$useState[1];
-  React__default.useEffect(function () {
-    if (customDimensions) {
-      setSelectedDimension(customDimensions.find(function (dimension) {
-        var _parameter$dimension;
-        return dimension.id === ((_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.id);
-      }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customDimensions, (_parameter$dimension2 = parameter.dimension) == null ? void 0 : _parameter$dimension2.id]);
+  var selectedDimension = customDimensions.find(function (dimension) {
+    var _parameter$dimension;
+    return dimension.id === ((_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.id);
+  }) || customDimensions[0];
   if (!selectedDimension || !customDimensions || customDimensions.length === 0) {
     return null;
   }
@@ -3174,15 +3136,16 @@ var ParameterDimensionValueSelect = function ParameterDimensionValueSelect(_ref)
     SelectDisplayProps: {
       'aria-label': 'timeseriesManager-dimensionValue'
     },
-    value: ((_parameter$dimension3 = parameter.dimension) == null ? void 0 : _parameter$dimension3.value) !== undefined ? (_parameter$dimension4 = parameter.dimension) == null ? void 0 : _parameter$dimension4.value : '',
+    value: ((_parameter$dimension2 = parameter.dimension) == null ? void 0 : _parameter$dimension2.value) === undefined || ((_parameter$dimension3 = parameter.dimension) == null ? void 0 : _parameter$dimension3.value) === '' ? defaultValue : (_parameter$dimension4 = parameter.dimension) == null ? void 0 : _parameter$dimension4.value,
     "data-testid": "parameterDimensionValueSelect",
     tooltip: t('timeseries-dimension-value') + ": " + (((_parameter$dimension5 = parameter.dimension) == null ? void 0 : _parameter$dimension5.value) !== undefined ? (_parameter$dimension6 = parameter.dimension) == null ? void 0 : _parameter$dimension6.value : ''),
     isEnabled: rowIsEnabled,
     onChange: function onChange(event) {
+      var _parameter$dimension7;
       var newParameter = {
         id: parameter.id,
         dimension: {
-          id: parameter.dimension.id,
+          id: ((_parameter$dimension7 = parameter.dimension) == null ? void 0 : _parameter$dimension7.id) || customDimensions[0].id,
           value: event.target.value
         }
       };
@@ -3191,7 +3154,11 @@ var ParameterDimensionValueSelect = function ParameterDimensionValueSelect(_ref)
     children: [jsx(MenuItem, {
       disabled: true,
       children: t('timeseries-dimension-value')
-    }), selectedDimension && selectedDimension.values && selectedDimension.values.map(function (value) {
+    }), (((_parameter$dimension8 = parameter.dimension) == null ? void 0 : _parameter$dimension8.value) === undefined || ((_parameter$dimension9 = parameter.dimension) == null ? void 0 : _parameter$dimension9.value) === '') && jsx(MenuItem, {
+      value: "none",
+      "data-testid": "timeseries-dimension-value-none",
+      children: t('timeseries-dimension-none')
+    }, "dimensionvaluemenu-none"), selectedDimension && selectedDimension.values && selectedDimension.values.map(function (value) {
       return jsx(MenuItem, {
         value: value,
         "data-testid": "timeseries-dimension-value-" + value,
@@ -3285,7 +3252,7 @@ var ReferenceTimeSelect = function ReferenceTimeSelect(_ref) {
 };
 
 var ParameterDimensionSelect = function ParameterDimensionSelect(_ref) {
-  var _parameter$dimension, _parameter$dimension2;
+  var _collectionDetails$da, _parameter$dimension, _parameter$dimension2, _parameter$dimension3;
   var rowIsEnabled = _ref.rowIsEnabled,
     parameter = _ref.parameter,
     patchParameter = _ref.patchParameter,
@@ -3295,24 +3262,16 @@ var ParameterDimensionSelect = function ParameterDimensionSelect(_ref) {
   var service = useSelector(function (store) {
     return getService(store, serviceId);
   });
-  var _React$useState = React__default.useState([]),
-    customDimensions = _React$useState[0],
-    setCustomDimensions = _React$useState[1];
   var _useState = useState([]),
     refTimeList = _useState[0],
     setRefTimeList = _useState[1];
-  var _useGetCollectionDeta = useGetCollectionDetails([service]),
-    collections = _useGetCollectionDeta.data;
-  var _useGetInstances = useGetInstances(service == null ? void 0 : service.url, collectionId),
+  var _useGetDetailsForColl = useGetDetailsForCollection(service, collectionId),
+    collectionDetails = _useGetDetailsForColl.data;
+  // Only do an instances call if instances are supported by the collection
+  var supportsInstances = !!(collectionDetails != null && (_collectionDetails$da = collectionDetails.dataQueries) != null && _collectionDetails$da.instances);
+  var _useGetInstances = useGetInstances(service == null ? void 0 : service.url, collectionId, supportsInstances),
     instances = _useGetInstances.data;
-  React__default.useEffect(function () {
-    if (collections) {
-      var params = getDetailsForCollectionId(collections, collectionId);
-      if (params != null && params.customDimensions) {
-        setCustomDimensions(params.customDimensions);
-      }
-    }
-  }, [collections, collectionId]);
+  var customDimensions = (collectionDetails == null ? void 0 : collectionDetails.customDimensions) || [];
   React__default.useEffect(function () {
     if (instances) {
       // Sort the reference times in descending order (newest first)
@@ -3322,13 +3281,10 @@ var ParameterDimensionSelect = function ParameterDimensionSelect(_ref) {
       setRefTimeList(sortedRefTimeList);
     }
   }, [instances]);
-  var paramInstanceId = parameter.instanceId || (refTimeList.length > 0 ? refTimeList[0].id : undefined);
   var hasReferenceTime = refTimeList.length > 0 && !refTimeList.some(function (value) {
     return value.id === 'unvalidated';
   });
-  if (!paramInstanceId) {
-    return null;
-  }
+  // Show nothing if no reference time and neither any custom dimensions
   if ((!customDimensions || customDimensions.length === 0) && !hasReferenceTime) {
     return null;
   }
@@ -3346,18 +3302,20 @@ var ParameterDimensionSelect = function ParameterDimensionSelect(_ref) {
       })
     }), jsx(Grid, {
       size: "grow",
-      children: (_parameter$dimension = parameter.dimension) != null && _parameter$dimension.id && ((_parameter$dimension2 = parameter.dimension) == null ? void 0 : _parameter$dimension2.id) !== REFERENCE_TIME_ID ? jsx(ParameterDimensionValueSelect, {
+      children:
+      // Show referene time select if no dimension selected yet and reference time is available OR if reference time has been selected
+      !((_parameter$dimension = parameter.dimension) != null && _parameter$dimension.id) && hasReferenceTime || (_parameter$dimension2 = parameter.dimension) != null && _parameter$dimension2.id && ((_parameter$dimension3 = parameter.dimension) == null ? void 0 : _parameter$dimension3.id) === REFERENCE_TIME_ID ? jsx(ReferenceTimeSelect, {
         rowIsEnabled: rowIsEnabled,
         parameter: parameter,
-        customDimensions: customDimensions,
         patchParameter: patchParameter,
-        t: t
-      }) : jsx(ReferenceTimeSelect, {
+        t: t,
+        refTimeList: refTimeList
+      }) : jsx(ParameterDimensionValueSelect, {
         rowIsEnabled: rowIsEnabled,
         parameter: parameter,
+        customDimensions: customDimensions,
         patchParameter: patchParameter,
-        t: t,
-        refTimeList: refTimeList
+        t: t
       })
     })]
   });
@@ -3708,7 +3666,6 @@ var ParameterList = function ParameterList(_ref) {
     })
   });
 };
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 var getStyles$1 = function getStyles(isEnabled) {
   return {
     plot: {
@@ -4174,9 +4131,9 @@ var filterCollectionsParametersFromService = function filterCollectionsParameter
     // Not found in collection - search in parameters
     var filteredParamters = collection.parameters.reduce(function (filteredParameterList, parameter) {
       var parameterContainsSearch = searchStringArray.every(function (search) {
-        var _parameter$propertyNa;
+        var _parameter$propertyNa, _parameter$propertyLa;
         var searchLowercase = search.toLowerCase();
-        var isSearchTextInParameterName = (_parameter$propertyNa = parameter.propertyName) == null ? void 0 : _parameter$propertyNa.toLowerCase().includes(searchLowercase);
+        var isSearchTextInParameterName = ((_parameter$propertyNa = parameter.propertyName) == null ? void 0 : _parameter$propertyNa.toLowerCase().includes(searchLowercase)) || ((_parameter$propertyLa = parameter.propertyLabel) == null ? void 0 : _parameter$propertyLa.toLowerCase().includes(searchLowercase));
         return isSearchTextInParameterName;
       });
       if (parameterContainsSearch) {
@@ -4385,6 +4342,7 @@ var TimeSeriesSelectList = function TimeSeriesSelectList(_ref) {
                       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, {
                       sx: {
                         paddingLeft: '40px',
@@ -4406,7 +4364,7 @@ var TimeSeriesSelectList = function TimeSeriesSelectList(_ref) {
                         }
                       },
                       role: "listitem",
-                      "aria-label": parameter.propertyName,
+                      "aria-label": paramDisplayName,
                       children: jsxs(Grid, {
                         container: true,
                         size: "grow",
@@ -4418,7 +4376,7 @@ var TimeSeriesSelectList = function TimeSeriesSelectList(_ref) {
                           children: jsx(Box, {
                             sx: fontStyling(),
                             children: jsx(SearchHighlight, {
-                              text: parameter.propertyName,
+                              text: paramDisplayName,
                               search: searchFilter
                             })
                           })
@@ -4428,7 +4386,7 @@ var TimeSeriesSelectList = function TimeSeriesSelectList(_ref) {
                               marginRight: '8px'
                             },
                             children: [jsx(ParameterInfoButtonConnect, {
-                              parameter: plotParameter || Object.assign({}, parameter, {
+                              parameter: plotParameter != null ? plotParameter : Object.assign({}, parameter, {
                                 plotId: selectPlot.plotId
                               })
                             }), jsx(CustomToggleButton, {
@@ -4467,9 +4425,10 @@ var TimeSeriesSelectList = function TimeSeriesSelectList(_ref) {
 var TimeSeriesSelectListConnect = /*#__PURE__*/memo(function (_ref) {
   var selectPlot = _ref.selectPlot,
     handleAddOrRemoveClick = _ref.handleAddOrRemoveClick,
-    services = _ref.services;
-  var _useGetCollectionDeta = useGetCollectionDetails(services),
-    collectionList = _useGetCollectionDeta.data;
+    services = _ref.services,
+    isOpen = _ref.isOpen;
+  var _useGetServiceCollect = useGetServiceCollectionDetails(services, isOpen),
+    collectionList = _useGetServiceCollect.data;
   var _useState = useState({}),
     collectionListItemDetails = _useState[0],
     setCollectionListItemDetails = _useState[1];
@@ -4818,7 +4777,9 @@ var Rows = function Rows(_ref2) {
           children: [jsx(CustomTooltip, {
             title: t('timeseries-update-service'),
             placement: "left",
-            PopperProps: tooltipPopperProps,
+            slotProps: {
+              popper: tooltipPopperProps
+            },
             children: jsx("span", {
               children: jsx(CustomIconButton, {
                 "aria-label": t('timeseries-update-service'),
@@ -4831,7 +4792,9 @@ var Rows = function Rows(_ref2) {
           }), userAddedService ? jsx(CustomTooltip, {
             title: t('timeseries-edit-service'),
             placement: "left",
-            PopperProps: tooltipPopperProps,
+            slotProps: {
+              popper: tooltipPopperProps
+            },
             children: jsx("span", {
               children: jsx(CustomIconButton, {
                 "aria-label": t('timeseries-edit-service'),
@@ -4844,7 +4807,9 @@ var Rows = function Rows(_ref2) {
           }) : jsx(CustomTooltip, {
             title: t('timeseries-show-service'),
             placement: "left",
-            PopperProps: tooltipPopperProps,
+            slotProps: {
+              popper: tooltipPopperProps
+            },
             children: jsx("span", {
               children: jsx(CustomIconButton, {
                 "aria-label": t('timeseries-show-service'),
@@ -4857,7 +4822,9 @@ var Rows = function Rows(_ref2) {
           }), userAddedService && jsx(Box, {
             children: jsx(CustomTooltip, {
               title: deleteServiceTitle(serviceHasParametersInUse, t),
-              PopperProps: tooltipPopperProps,
+              slotProps: {
+                popper: tooltipPopperProps
+              },
               placement: "left",
               children: jsx("span", {
                 children: jsx(CustomIconButton, {
@@ -5440,9 +5407,9 @@ var TimeSeriesSelect = function TimeSeriesSelect(_ref) {
     services = _ref.services;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
-  var _useGetCollectionDeta = useGetCollectionDetails(services),
-    isFetching = _useGetCollectionDeta.isFetching,
-    error = _useGetCollectionDeta.error;
+  var _useGetServiceCollect = useGetServiceCollectionDetails(services, isOpen),
+    isFetching = _useGetServiceCollect.isFetching,
+    error = _useGetServiceCollect.error;
   return jsxs(ToolContainerDraggable, {
     title: t('timeseries-select-for') + " " + selectPlot.title,
     startSize: {
@@ -5498,7 +5465,8 @@ var TimeSeriesSelect = function TimeSeriesSelect(_ref) {
       }), jsx(TimeSeriesSelectListConnect, {
         selectPlot: selectPlot,
         handleAddOrRemoveClick: handleAddOrRemoveClick,
-        services: services
+        services: services,
+        isOpen: isOpen
       }), jsx(ServicePopupConnect, {})]
     })]
   });
@@ -5556,7 +5524,11 @@ var TimeSeriesSelectConnect = function TimeSeriesSelectConnect(_ref) {
 var ParameterInfoDialog = function ParameterInfoDialog(_ref) {
   var onClose = _ref.onClose,
     currentParameterInfo = _ref.currentParameterInfo,
+    collectionInformation = _ref.collectionInformation,
+    isLoadingCollectionInformation = _ref.isLoadingCollectionInformation,
     instanceInformation = _ref.instanceInformation,
+    isLoadingInstanceInformation = _ref.isLoadingInstanceInformation,
+    supportsInstances = _ref.supportsInstances,
     relatedService = _ref.relatedService,
     isOpen = _ref.isOpen,
     _ref$onMouseDown = _ref.onMouseDown,
@@ -5587,7 +5559,10 @@ var ParameterInfoDialog = function ParameterInfoDialog(_ref) {
       sx: {
         padding: 2
       },
-      children: [jsx(ParameterInfoText$1, {
+      children: [currentParameterInfo.propertyLabel && jsx(ParameterInfoText$1, {
+        label: t('timeseries-info-label'),
+        value: currentParameterInfo.propertyLabel
+      }), jsx(ParameterInfoText$1, {
         label: t('timeseries-info-name'),
         value: currentParameterInfo.propertyName
       }), jsx(ParameterInfoText$1, {
@@ -5608,10 +5583,17 @@ var ParameterInfoDialog = function ParameterInfoDialog(_ref) {
         label: t('timeseries-collection'),
         value: currentParameterInfo.collectionId
       }), jsx(QueryInfoElement, {
-        instanceInformation: instanceInformation
-      }), jsx(InstanceInfoElement, {
-        instanceInformation: instanceInformation
-      })]
+        queryInformation: collectionInformation,
+        isLoadingCollectionInformation: isLoadingCollectionInformation
+      }), supportsInstances ? jsx(DimensionInfoElement, {
+        instanceInformation: instanceInformation,
+        isLoading: isLoadingInstanceInformation
+      }) :
+      // If no instances, display temporal and spatial extent here
+      collectionInformation && jsx(ParameterInfoList, {
+        label: currentParameterInfo.collectionId,
+        list: generateInfoList(collectionInformation, t)
+      }, currentParameterInfo.collectionId)]
     })
   });
 };
@@ -5641,18 +5623,19 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
   });
 };
 var QueryInfoElement = function QueryInfoElement(_ref3) {
-  var instanceInformation = _ref3.instanceInformation;
+  var queryInformation = _ref3.queryInformation,
+    isLoadingCollectionInformation = _ref3.isLoadingCollectionInformation;
   var _useTimeseriesTransla2 = useTimeseriesTranslation(),
     t = _useTimeseriesTransla2.t;
-  if (instanceInformation.isLoading) {
+  if (isLoadingCollectionInformation) {
     return jsx(LoadingIndicator, {
       subtitle: t('timeseries-info-queries'),
       textStyle: textStyle$1
     });
   }
-  var queryInfo = instanceInformation.instances.length === 0 ? t('timeseries-info-no-data-available') : function (_instance$data_querie, _instance$data_querie2) {
-    var instance = instanceInformation.instances[0];
-    var queries = [((_instance$data_querie = instance.data_queries) == null ? void 0 : _instance$data_querie.locations) && 'locations', ((_instance$data_querie2 = instance.data_queries) == null ? void 0 : _instance$data_querie2.position) && 'position'].filter(Boolean);
+  var queryInfo = !queryInformation ? t('timeseries-info-no-data-available') : function () {
+    var dataQueries = queryInformation.dataQueries;
+    var queries = [(dataQueries == null ? void 0 : dataQueries.locations) && 'locations', (dataQueries == null ? void 0 : dataQueries.position) && 'position'].filter(Boolean);
     return queries.length === 0 ? t('timeseries-info-no-data-available') : queries.join(', ');
   }();
   return jsxs(Fragment, {
@@ -5667,11 +5650,40 @@ var QueryInfoElement = function QueryInfoElement(_ref3) {
     })]
   });
 };
-var InstanceInfoElement = function InstanceInfoElement(_ref4) {
-  var instanceInformation = _ref4.instanceInformation;
+var generateInfoList = function generateInfoList(element, t) {
+  var _element$extent, _element$extent2;
+  var infoList = [];
+  if ((_element$extent = element.extent) != null && (_element$extent = _element$extent.temporal) != null && _element$extent.values) {
+    infoList.push({
+      label: t('timeseries-info-time'),
+      icon: jsx(DimensionsTime, {}),
+      value: element.extent.temporal.values.join(', ')
+    });
+  }
+  if ((_element$extent2 = element.extent) != null && (_element$extent2 = _element$extent2.spatial) != null && _element$extent2.bbox) {
+    // The EDR specification is unclear as to what the type of the bbox is so we cater for both implementations
+    // [number, number, number, number] | [[number, number, number, number]]
+    var bbox = typeof element.extent.spatial.bbox[0] === 'number' ? element.extent.spatial.bbox : element.extent.spatial.bbox[0];
+    var value = t('timeseries-info-bbox-rendering', {
+      west: bbox[0],
+      south: bbox[1],
+      east: bbox[2],
+      north: bbox[3]
+    });
+    infoList.push({
+      label: t('timeseries-info-bbox'),
+      icon: jsx(DrawRegion, {}),
+      value: value === 'timeseries-info-bbox-rendering' ? bbox.join(', ') : value
+    });
+  }
+  return infoList;
+};
+var DimensionInfoElement = function DimensionInfoElement(_ref4) {
+  var instanceInformation = _ref4.instanceInformation,
+    isLoading = _ref4.isLoading;
   var _useTimeseriesTransla3 = useTimeseriesTranslation(),
     t = _useTimeseriesTransla3.t;
-  if (instanceInformation.isLoading) {
+  if (isLoading) {
     return jsx(LoadingIndicator, {
       subtitle: t('timeseries-info-instance-dimensions'),
       textStyle: textStyle$1
@@ -5682,37 +5694,16 @@ var InstanceInfoElement = function InstanceInfoElement(_ref4) {
       variant: "subtitle2",
       sx: textStyle$1,
       children: t('timeseries-info-instance-dimensions')
-    }), instanceInformation.instances.length === 0 ? jsx(Typography, {
+    }), !instanceInformation || instanceInformation.length === 0 ? jsx(Typography, {
       variant: "body2",
       sx: textStyleWithMargin$1,
       children: t('timeseries-info-no-data-available')
-    }) : [].concat(instanceInformation.instances).sort().reverse().map(function (instance) {
-      var _instance$extent, _instance$extent2;
-      var infoList = [];
-      if ((_instance$extent = instance.extent) != null && (_instance$extent = _instance$extent.temporal) != null && _instance$extent.values) {
-        infoList.push({
-          label: t('timeseries-info-time'),
-          icon: jsx(DimensionsTime, {}),
-          value: instance.extent.temporal.values.join(', ')
-        });
-      }
-      if ((_instance$extent2 = instance.extent) != null && _instance$extent2.spatial.bbox) {
-        var value = t('timeseries-info-bbox-rendering', {
-          west: instance.extent.spatial.bbox[0],
-          south: instance.extent.spatial.bbox[1],
-          east: instance.extent.spatial.bbox[2],
-          north: instance.extent.spatial.bbox[3]
-        });
-        infoList.push({
-          label: t('timeseries-info-bbox'),
-          icon: jsx(DrawRegion, {}),
-          value: value === 'timeseries-info-bbox-rendering' ? instance.extent.spatial.bbox.join(', ') : value
-        });
-      }
+    }) : [].concat(instanceInformation).sort().reverse().map(function (element) {
+      var infoList = generateInfoList(element, t);
       return jsx(ParameterInfoList, {
-        label: instance.id,
+        label: element.id,
         list: infoList
-      }, instance.id);
+      }, element.id);
     })]
   });
 };
@@ -5791,32 +5782,20 @@ var ParameterInfoList = function ParameterInfoList(_ref6) {
 };
 
 var ParameterInfoDialogConnect = function ParameterInfoDialogConnect() {
-  var _useState = useState({
-      isLoading: false,
-      instances: []
-    }),
-    temporalInformation = _useState[0],
-    setTemporalInformation = _useState[1];
+  var _collection$dataQueri;
   var currentParameterInfoDisplayed = useSelector(getParameterInfoParameter);
   var relatedService = useSelector(function (store) {
     return getService(store, (currentParameterInfoDisplayed == null ? void 0 : currentParameterInfoDisplayed.serviceId) || '');
-  });
-  var _useGetInstances = useGetInstances(relatedService == null ? void 0 : relatedService.url, currentParameterInfoDisplayed == null ? void 0 : currentParameterInfoDisplayed.collectionId),
+  }) || {
+    url: ''
+  };
+  var _useGetDetailsForColl = useGetDetailsForCollection(relatedService, (currentParameterInfoDisplayed == null ? void 0 : currentParameterInfoDisplayed.collectionId) || ''),
+    collection = _useGetDetailsForColl.data,
+    isFetchingCollection = _useGetDetailsForColl.isFetching;
+  var supportsInstances = !!(collection != null && (_collection$dataQueri = collection.dataQueries) != null && _collection$dataQueri.instances);
+  var _useGetInstances = useGetInstances(relatedService == null ? void 0 : relatedService.url, (currentParameterInfoDisplayed == null ? void 0 : currentParameterInfoDisplayed.collectionId) || '', supportsInstances),
     instances = _useGetInstances.data,
-    isFetching = _useGetInstances.isFetching;
-  useEffect(function () {
-    if (isFetching) {
-      setTemporalInformation({
-        isLoading: true
-      });
-    }
-    if (instances) {
-      setTemporalInformation({
-        isLoading: false,
-        instances: instances
-      });
-    }
-  }, [instances, isFetching]);
+    isFetchingInstances = _useGetInstances.isFetching;
   var _useSetupDialog = useSetupDialog(uiTypes.DialogTypes.TimeSeriesInfo),
     dialogOrder = _useSetupDialog.dialogOrder,
     onCloseDialog = _useSetupDialog.onCloseDialog,
@@ -5828,7 +5807,11 @@ var ParameterInfoDialogConnect = function ParameterInfoDialogConnect() {
   }
   return jsx(ParameterInfoDialog, {
     isOpen: isDialogOpen,
-    instanceInformation: temporalInformation,
+    collectionInformation: collection,
+    isLoadingCollectionInformation: isFetchingCollection,
+    supportsInstances: supportsInstances,
+    instanceInformation: instances,
+    isLoadingInstanceInformation: isFetchingInstances,
     onClose: onCloseDialog,
     onMouseDown: setDialogOrder,
     order: dialogOrder,
@@ -5987,6 +5970,25 @@ var TimeSeriesManagerConnect = function TimeSeriesManagerConnect(_ref) {
   });
 };
 
+var extractUsedServices = function extractUsedServices(services, feature) {
+  var _feature$properties;
+  if (!services || !(feature != null && (_feature$properties = feature.properties) != null && _feature$properties.occurrences) || feature.properties.occurrences.length < 1) {
+    return [];
+  }
+  var usedServices = [];
+  feature.properties.occurrences.forEach(function (occ) {
+    var _occ$properties, _occ$properties2;
+    if (occ != null && (_occ$properties = occ.properties) != null && _occ$properties.serviceId && occ != null && (_occ$properties2 = occ.properties) != null && _occ$properties2.collectionId) {
+      var service = services.find(function (el) {
+        return el.id === occ.properties.serviceId;
+      });
+      if (service) {
+        usedServices.push(service);
+      }
+    }
+  });
+  return usedServices;
+};
 var LocationInfo = function LocationInfo(_ref) {
   var feature = _ref.feature,
     mapPinLocation = _ref.mapPinLocation,
@@ -6000,8 +6002,9 @@ var LocationInfo = function LocationInfo(_ref) {
   var _useState = useState([]),
     parameters = _useState[0],
     setParameters = _useState[1];
-  var _useGetCollectionDeta = useGetCollectionDetails(services || []),
-    collections = _useGetCollectionDeta.data;
+  var usedServices = extractUsedServices(services, feature);
+  var _useGetServiceCollect = useGetServiceCollectionDetails(usedServices, isOpen),
+    collections = _useGetServiceCollect.data;
   useEffect(function () {
     if (!feature || !feature.properties || !feature.properties.occurrences || feature.properties.occurrences.length < 1) {
       setParameters(function (prev) {
@@ -6038,12 +6041,14 @@ var LocationInfo = function LocationInfo(_ref) {
               parameters: []
             };
           }
-          var collection = getDetailsForCollectionId(collections, occ.properties.collectionId);
+          var collection = collections.find(function (collection) {
+            return collection.collectionId === occ.properties.collectionId;
+          });
           if (collection && collection.parameters) {
             return {
               loading: false,
               parameters: collection.parameters.map(function (parameter) {
-                return parameter.propertyName;
+                return parameter.propertyLabel || parameter.propertyName;
               })
             };
           }
@@ -6077,8 +6082,8 @@ var LocationInfo = function LocationInfo(_ref) {
     // Internal properties
     var propertyBlacklist = ['parameterName', 'mapFeatureClass'];
     var _loop = function _loop() {
-      var _feature$properties2;
-      var occ = feature == null || (_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.occurrences[i];
+      var _feature$properties3;
+      var occ = feature == null || (_feature$properties3 = feature.properties) == null ? void 0 : _feature$properties3.occurrences[i];
       var collectionInfo = {
         properties: Object.assign({}, occ.properties, {
           locationId: occ.id
@@ -6090,8 +6095,8 @@ var LocationInfo = function LocationInfo(_ref) {
       });
       calculated.collections.push(collectionInfo);
     };
-    for (var i = 0; i < (feature == null || (_feature$properties = feature.properties) == null ? void 0 : _feature$properties.occurrences.length); i += 1) {
-      var _feature$properties;
+    for (var i = 0; i < (feature == null || (_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.occurrences.length); i += 1) {
+      var _feature$properties2;
       _loop();
     }
     return calculated;
@@ -7523,7 +7528,6 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       };
       setTimeSeriesLocation(validLocation);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeMapId, selectedFeature, setTimeSeriesLocation, memoizedSelectedFeature, allMaps]);
   useEffect(function () {
     return function () {
@@ -7868,8 +7872,10 @@ var LocationListItem = function LocationListItem(_ref) {
             minWidth: '42px'
           },
           children: jsx(Checkbox, {
-            inputProps: {
-              'aria-label': location
+            slotProps: {
+              input: {
+                'aria-label': location
+              }
             },
             color: "secondary",
             checked: selectedLocation === location,
@@ -8086,7 +8092,7 @@ var LocationSelectDialogConnect = function LocationSelectDialogConnect() {
       lat: lat,
       lon: lon,
       id: feature.id,
-      occurrences: (_feature$properties = feature.properties) == null ? void 0 : _feature$properties.occurrences.map(function (occ) {
+      occurrences: (_feature$properties = feature.properties) == null || (_feature$properties = _feature$properties.occurrences) == null ? void 0 : _feature$properties.map(function (occ) {
         var _occ$properties, _occ$properties2, _occ$properties3, _occ$properties4;
         return {
           id: occ.id,