@opengeoweb/core 8.3.1 → 8.4.0

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, useRef, useLayoutEffect } from 'react';
+import React__default, { useState, forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useRef, useLayoutEffect } from 'react';
 import { Grid, Box as Box$2, MenuItem, Typography, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup, Snackbar } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateStartSize, CustomToggleButton, SearchHighlight, dateUtils, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, Copy, None, FastForward, AutoUpdateActive, Both, Info, Visibility, VisibilityOff, Delete, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, DragHandle as DragHandle$1, Cached, Add, MapAdd, Filter, Search, Clear, Edit, Close, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, Provider } from 'react-redux';
 import { uiTypes, uiSelectors, uiActions, layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, layerSelectSelectors, layerSelectActions, filterLayers, getUserAddedServices, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, syncConstants, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
 import { ReactSortable } from 'react-sortablejs';
-import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, clearImageCache, WMLayer } from '@opengeoweb/webmap';
+import { WMGetServiceFromStore, getCapabilities, webmapUtils, LayerType, clearImageCache, WMLayer } from '@opengeoweb/webmap';
 import { jsx } from 'react/jsx-runtime';
 import Box$3 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
@@ -3914,93 +3914,40 @@ Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
 var DimensionSelect = function DimensionSelect(_ref) {
-  var layerId = _ref.layerId,
-    onLayerChangeDimension = _ref.onLayerChangeDimension,
+  var onLayerChangeDimension = _ref.onLayerChangeDimension,
     _ref$layerDimensions = _ref.layerDimensions,
     layerDimensions = _ref$layerDimensions === void 0 ? [] : _ref$layerDimensions,
-    isEnabled = _ref.isEnabled,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? false : _ref$isEnabled,
     icon = _ref.icon,
     nameMappings = _ref.nameMappings,
     valueMappings = _ref.valueMappings,
     _ref$tooltipPrefix = _ref.tooltipPrefix,
-    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Dimensions: ' : _ref$tooltipPrefix;
-  var _React$useState = React.useState(layerDimensions.length ? layerDimensions[0].name : ''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    activeDimName = _React$useState2[0],
-    setActiveDimName = _React$useState2[1];
-  React.useEffect(function () {
-    var activeDim = layerDimensions.find(function (d) {
-      return d.name === activeDimName;
-    });
-    if (!activeDim) {
-      setActiveDimName(layerDimensions.length ? layerDimensions[0].name : '');
-    }
-  }, [layerDimensions, activeDimName]);
-  React.useEffect(function () {
-    var activeDim = layerDimensions.find(function (d) {
-      return d.name === activeDimName;
-    });
-    if (activeDim) {
-      onLayerChangeDimension(activeDim.name, activeDim.currentValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!layerDimensions.length || !layerId) {
-    return null;
-  }
-  var getValuesToDisplay = function getValuesToDisplay() {
-    var activeWMJSDim = webmapUtils.getWMJSDimensionForLayerAndDimension(layerId, activeDimName) || webmapUtils.getWMJSDimensionForLayerAndDimension(layerId, layerDimensions[0].name);
-    if (!activeWMJSDim) {
-      return null;
-    }
-    var availableDimValues = [];
-    for (var j = 0; j < activeWMJSDim.size(); j += 1) {
-      availableDimValues.push(activeWMJSDim.getValueForIndex(j));
-    }
-    availableDimValues.reverse();
-    // Only display last 100 values, to avoid performance issues
-    // TODO: (2020-06-29 Tineke van Rijn) replace this with lazy loading
-    return availableDimValues.slice(0, 100);
-  };
-  var valuesToDisplay = getValuesToDisplay();
-  if (valuesToDisplay === null) {
-    return null;
-  }
-  var activeDim = layerDimensions.find(function (dim) {
-    return dim.name === activeDimName;
-  });
-  if (!activeDim) {
-    return null;
-  }
-  var selectDimensionValue = function selectDimensionValue(event) {
-    event.stopPropagation();
-    if (activeDim) {
-      onLayerChangeDimension(activeDim.name, event.target.value, layerTypes.LayerActionOrigin.layerManager);
-    }
-  };
-  var onChangeActiveDimensionName = function onChangeActiveDimensionName(event) {
-    event.stopPropagation();
-    setActiveDimName(event.target.value);
-  };
-  var dimNameList = layerDimensions.map(function (dimension) {
-    return {
-      value: dimension.name
-    };
-  });
-  var dimNameCurrentIndex = layerDimensions.findIndex(function (value) {
-    return value.name === activeDim.name;
-  });
-  var dimValueList = valuesToDisplay.map(function (value) {
-    return {
-      value: value
-    };
+    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Dimensions: ' : _ref$tooltipPrefix,
+    SingleValueComponent = _ref.SingleValueComponent;
+  var _a, _b;
+  var _useState = useState((_a = layerDimensions === null || layerDimensions === void 0 ? void 0 : layerDimensions[0]) === null || _a === void 0 ? void 0 : _a.name),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedDimensionName = _useState2[0],
+    setSelectedDimensionName = _useState2[1];
+  var selectedDimension = layerDimensions.find(function (dimension) {
+    return dimension.name === selectedDimensionName;
   });
-  var dimValueCurrentIndex = valuesToDisplay.findIndex(function (value) {
-    return value === activeDim.currentValue;
+  var dimensionNames = layerDimensions.map(function (dimension) {
+    return dimension.name;
   });
-  if (dimValueCurrentIndex === -1) {
+  var selectedDimensionDoesntExist = !dimensionNames.includes(selectedDimensionName);
+  React.useEffect(function () {
+    var _a, _b;
+    if (selectedDimensionDoesntExist) {
+      setSelectedDimensionName((_b = (_a = layerDimensions === null || layerDimensions === void 0 ? void 0 : layerDimensions[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '');
+    }
+  }, [layerDimensions, selectedDimensionDoesntExist]);
+  if (selectedDimensionDoesntExist) {
     return null;
   }
+  var collapseDimensionDropdown = SingleValueComponent && layerDimensions.length === 1;
+  var collapseValueDropdown = SingleValueComponent && ((_b = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _b === void 0 ? void 0 : _b.length) === 1;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -4009,21 +3956,63 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React.createElement(TooltipSelect, {
+  }, collapseDimensionDropdown ? /*#__PURE__*/React.createElement(SingleValueComponent, Object.assign({}, layerDimensions[0], {
+    nameMappings: nameMappings,
+    valueMappings: valueMappings,
+    position: "dimension"
+  })) : /*#__PURE__*/React.createElement(SelectDimension, {
+    selectedDimensionName: selectedDimensionName,
+    setSelectedDimensionName: setSelectedDimensionName,
+    dimensionNames: dimensionNames,
+    tooltipPrefix: tooltipPrefix,
+    isEnabled: isEnabled,
+    icon: icon,
+    nameMappings: nameMappings
+  }), collapseValueDropdown ? /*#__PURE__*/React.createElement(SingleValueComponent, Object.assign({}, layerDimensions[0], {
+    nameMappings: nameMappings,
+    valueMappings: valueMappings,
+    position: "value"
+  })) : /*#__PURE__*/React.createElement(SelectDimensionValue, {
+    selectedDimension: selectedDimension,
+    onLayerChangeDimension: onLayerChangeDimension,
+    tooltipPrefix: tooltipPrefix,
+    isEnabled: isEnabled,
+    icon: icon,
+    valueMappings: valueMappings
+  })));
+};
+var SelectDimension = function SelectDimension(_ref2) {
+  var selectedDimensionName = _ref2.selectedDimensionName,
+    setSelectedDimensionName = _ref2.setSelectedDimensionName,
+    icon = _ref2.icon,
+    nameMappings = _ref2.nameMappings,
+    tooltipPrefix = _ref2.tooltipPrefix,
+    isEnabled = _ref2.isEnabled,
+    dimensionNames = _ref2.dimensionNames;
+  return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(activeDimName),
+    tooltip: "".concat(tooltipPrefix).concat(selectedDimensionName),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectDimension'
       }
     },
     isEnabled: isEnabled,
-    value: activeDimName,
-    list: dimNameList,
-    currentIndex: dimNameCurrentIndex,
-    onChange: onChangeActiveDimensionName,
-    onChangeMouseWheel: function onChangeMouseWheel(e) {
-      return setActiveDimName(e.value);
+    value: selectedDimensionName,
+    list: dimensionNames.map(function (name) {
+      return {
+        value: name
+      };
+    }),
+    currentIndex: dimensionNames.findIndex(function (name) {
+      return name === selectedDimensionName;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setSelectedDimensionName(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setSelectedDimensionName(event.value);
     },
     style: {
       maxWidth: '50%'
@@ -4031,14 +4020,31 @@ var DimensionSelect = function DimensionSelect(_ref) {
     IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Dimension"), layerDimensions.map(function (dimension) {
+  }, "Dimension"), dimensionNames.map(function (name) {
     return /*#__PURE__*/React.createElement(MenuItem, {
-      key: dimension.name,
-      value: dimension.name
-    }, nameMappings && dimension.name && nameMappings[dimension.name] || dimension.name);
-  })), /*#__PURE__*/React.createElement(TooltipSelect, {
+      key: name,
+      value: name
+    }, (nameMappings === null || nameMappings === void 0 ? void 0 : nameMappings[name]) || name);
+  }));
+};
+var SelectDimensionValue = function SelectDimensionValue(_ref3) {
+  var isEnabled = _ref3.isEnabled,
+    tooltipPrefix = _ref3.tooltipPrefix,
+    selectedDimension = _ref3.selectedDimension,
+    icon = _ref3.icon,
+    onLayerChangeDimension = _ref3.onLayerChangeDimension,
+    valueMappings = _ref3.valueMappings;
+  var _a;
+  var dimensionValues = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
+  if (!(selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.name) || !(dimensionValues === null || dimensionValues === void 0 ? void 0 : dimensionValues.length)) {
+    return null;
+  }
+  var setDimensionValue = function setDimensionValue(dimensionValue) {
+    onLayerChangeDimension(selectedDimension.name, dimensionValue, layerTypes.LayerActionOrigin.layerManager);
+  };
+  return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(activeDimName, " ").concat(activeDim.currentValue, " ").concat(activeDim.units),
+    tooltip: "".concat(tooltipPrefix).concat(selectedDimension.name, " ").concat(selectedDimension.currentValue, " ").concat(selectedDimension.units),
     inputProps: {
       SelectDisplayProps: {
         'data-testid': 'selectDimensionValue'
@@ -4046,12 +4052,21 @@ var DimensionSelect = function DimensionSelect(_ref) {
       'data-testid': 'selectDimensionValue-input'
     },
     isEnabled: isEnabled,
-    value: activeDim && activeDim.currentValue,
-    list: dimValueList,
-    currentIndex: dimValueCurrentIndex,
-    onChange: selectDimensionValue,
-    onChangeMouseWheel: function onChangeMouseWheel(e) {
-      return onLayerChangeDimension(activeDim.name, e.value, layerTypes.LayerActionOrigin.layerManager);
+    value: selectedDimension.currentValue,
+    list: dimensionValues.map(function (dimensionValue) {
+      return {
+        value: dimensionValue
+      };
+    }),
+    currentIndex: dimensionValues.findIndex(function (dimensionValue) {
+      return dimensionValue === selectedDimension.currentValue;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setDimensionValue(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setDimensionValue(event.value);
     },
     style: {
       maxWidth: '50%'
@@ -4059,12 +4074,13 @@ var DimensionSelect = function DimensionSelect(_ref) {
     IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Dimension value (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
+  }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(function (dimensionValue) {
+    var _a;
     return /*#__PURE__*/React.createElement(MenuItem, {
-      key: dimValue,
-      value: dimValue
-    }, valueMappings && activeDim.name && valueMappings[activeDim.name] && valueMappings[activeDim.name](dimValue) || /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(dimValue), "\xA0", /*#__PURE__*/React.createElement("i", null, "".concat(activeDim.units))));
-  }))));
+      key: dimensionValue,
+      value: dimensionValue
+    }, ((_a = valueMappings === null || valueMappings === void 0 ? void 0 : valueMappings[selectedDimension.name]) === null || _a === void 0 ? void 0 : _a.call(valueMappings, dimensionValue)) || /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(dimensionValue), "\xA0", /*#__PURE__*/React.createElement("i", null, "".concat(selectedDimension.units))));
+  }));
 };
 
 var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
@@ -4402,7 +4418,11 @@ var RenderStyles = function RenderStyles(_ref) {
   if (layerStyles && layerStyles.length > 0) {
     styles.push.apply(styles, _toConsumableArray(layerStyles));
   }
-  var currentStyle = currentLayerStyle !== '' ? currentLayerStyle : styles[0].name;
+  var layerStyleNames = layerStyles.map(function (style) {
+    return style.name;
+  });
+  var layerStyleExists = layerStyleNames.includes(currentLayerStyle);
+  var currentStyle = layerStyleExists ? currentLayerStyle : styles[0].name;
   var selectStyle = function selectStyle(event) {
     event.stopPropagation();
     onChangeLayerStyle(event.target.value);
@@ -5026,7 +5046,6 @@ var LayerRow = function LayerRow(_ref7) {
     item: true,
     className: columnClasses.column5
   }, layerDimensionLayout || /*#__PURE__*/React__default.createElement(DimensionSelect, {
-    layerId: layerId,
     layerDimensions: layerUtils.filterNonTimeDimensions(layer.dimensions),
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue) {
       var dimension = {
@@ -5346,8 +5365,10 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref2) {
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
     layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+  if (!layerDimensions.length || !layerId) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(DimensionSelect, {
-    layerId: layerId,
     layerDimensions: layerDimensions,
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue, origin) {
       var dimension = {
@@ -10592,25 +10613,14 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
     layerChangeDimension = _useLayerDimensions.layerChangeDimension;
-  var filteredDimensions = dimensionsToShow ? layerDimensions.filter(function (dimension) {
-    var _a;
-    return dimensionsToShow.includes((_a = dimension.name) !== null && _a !== void 0 ? _a : '');
-  }) : layerDimensions;
-  if (dimensionsToShow) {
-    // also sort according to the filter array
-    filteredDimensions.sort(function (a, b) {
-      return dimensionsToShow.indexOf(a.name) - dimensionsToShow.indexOf(b.name);
+  var filteredDimensions = dimensionsToShow ? dimensionsToShow.map(function (dimensionName) {
+    return layerDimensions.find(function (dimension) {
+      return dimension.name === dimensionName;
     });
-  }
-  var singleValue = filteredDimensions.length === 1 && SingleValueComponent;
-  if (singleValue) {
-    return /*#__PURE__*/React.createElement(SingleValueComponent, Object.assign({
-      value: filteredDimensions[0].currentValue
-    }, props));
-  }
+  }).filter(Boolean) : layerDimensions;
   return /*#__PURE__*/React.createElement(DimensionSelect, Object.assign({
-    layerId: layerId,
     layerDimensions: filteredDimensions,
+    SingleValueComponent: SingleValueComponent,
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue, origin) {
       var dimension = {
         name: dimensionName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   "peerDependencies": {
     "@mui/material": "5.12.0",
     "@mui/system": "5.14.14",
-    "@opengeoweb/api": "8.3.1",
-    "@opengeoweb/form-fields": "8.3.1",
-    "@opengeoweb/shared": "8.3.1",
-    "@opengeoweb/store": "8.3.1",
-    "@opengeoweb/theme": "8.3.1",
-    "@opengeoweb/webmap": "8.3.1",
-    "@opengeoweb/webmap-react": "8.3.1",
+    "@opengeoweb/api": "8.4.0",
+    "@opengeoweb/form-fields": "8.4.0",
+    "@opengeoweb/shared": "8.4.0",
+    "@opengeoweb/store": "8.4.0",
+    "@opengeoweb/theme": "8.4.0",
+    "@opengeoweb/webmap": "8.4.0",
+    "@opengeoweb/webmap-react": "8.4.0",
     "@redux-eggs/redux-toolkit": "2.2.0",
     "@redux-eggs/saga-extension": "2.2.0",
     "@reduxjs/toolkit": "1.9.7",

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect.d.ts

@@ -1,11 +1,20 @@
 import * as React from 'react';
 import { mapTypes, layerTypes } from '@opengeoweb/store';
-interface DimensionSelectProps {
-    layerId: string;
+import { ElementType, FC } from 'react';
+export interface SingleValueComponentProps extends mapTypes.Dimension {
+    position: 'dimension' | 'value';
+    nameMappings?: {
+        [dimensionName: string]: string;
+    };
+    valueMappings?: {
+        [dimensionName: string]: (value: string) => string;
+    };
+}
+export interface DimensionSelectProps {
     layerDimensions?: mapTypes.Dimension[];
     onLayerChangeDimension: (dimensionName: string, dimensionValue: string, origin?: layerTypes.LayerActionOrigin.layerManager) => void;
     isEnabled?: boolean;
-    icon?: React.ElementType;
+    icon?: ElementType;
     nameMappings?: {
         [dimensionName: string]: string;
     };
@@ -13,6 +22,7 @@ interface DimensionSelectProps {
         [dimensionName: string]: (value: string) => string;
     };
     tooltipPrefix?: string;
+    SingleValueComponent?: React.FC<SingleValueComponentProps>;
 }
-declare const DimensionSelect: React.FC<DimensionSelectProps>;
+declare const DimensionSelect: FC<DimensionSelectProps>;
 export default DimensionSelect;

package/src/lib/components/LayerManager/LayerManagerUtils.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { mapTypes } from '@opengeoweb/store';
+import { SingleValueComponentProps } from './LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect';
 import { Size, ToolbarButtonSettings } from './LayerManagerHeaderOptions';
 export declare const columnClasses: {
     column1: string;
@@ -223,9 +224,7 @@ export interface LayerManagerCustomSettings {
         };
         dimensions?: {
             dimensionsToShow?: string[];
-            SingleValueComponent?: React.FC<{
-                value: string;
-            }>;
+            SingleValueComponent?: React.FC<SingleValueComponentProps>;
             icon?: React.ElementType;
             tooltipPrefix?: string;
             nameMappings?: {