@opengeoweb/workspace 9.9.0 → 9.10.0

package/index.esm.js

@@ -4,7 +4,7 @@ import { syncGroupsTypes, syncGroupsActions, layerActions, mapStoreActions, uiAc
 import { createApiInstance, createNonAuthApiInstance, getApi, createFakeApiInstance, ApiProvider, useApiContext } from '@opengeoweb/api';
 import { getLeaves, MosaicContext, getAndAssertNodeAtPathExists, createBalancedTreeFromLeaves, MosaicWindow, Mosaic } from 'react-mosaic-component';
 import { debounce, takeEvery, takeLatest, all, put, delay, select, call, takeLeading } from 'redux-saga/effects';
-import { isAxiosError, getAxiosErrorMessage, withEggs, ConfirmationServiceProvider, useConfirmationDialog, CustomIconButton, AlertBanner, CustomTooltip, SearchHighlight, ToggleMenu, getHeight, usePrevious, renderCounter, ToolContainer, CustomToggleButton, ConfirmationDialog } from '@opengeoweb/shared';
+import { isAxiosError, getAxiosErrorMessage, withEggs, ConfirmationServiceProvider, useConfirmationDialog, CustomIconButton, AlertBanner, CustomTooltip, SearchHighlight, ToggleMenu, usePrevious, renderCounter, ToolContainer, CustomToggleButton, ConfirmationDialog } from '@opengeoweb/shared';
 import { snackbarActions, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import * as React from 'react';
 import React__default, { useCallback } from 'react';
@@ -17,6 +17,7 @@ import { getSagaExtension } from '@redux-eggs/saga-extension';
 import { produce } from 'immer';
 import { LinearProgress, Typography, ListItem, ListItemButton, ListItemIcon, ListItemText, Grid, useTheme, Chip, Stack, debounce as debounce$1, TextField, InputAdornment, Box, Backdrop, Menu, ListSubheader, MenuItem, Tabs } from '@mui/material';
 import 'react-mosaic-component/react-mosaic-component.css';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { Box as Box$1 } from '@mui/system';
 import { ReactHookFormTextField, ReactHookFormHiddenInput, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
@@ -5718,31 +5719,6 @@ var WorkspaceSelectListRow = function WorkspaceSelectListRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(Delete, null))))))));
 };
 
-// Gets element height incl padding, border and margins
-var useGetElementHeight = function useGetElementHeight(ref, defaultHeight) {
-  var _React$useState = React__default.useState(defaultHeight),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    height = _React$useState2[0],
-    setHeight = _React$useState2[1];
-  React__default.useLayoutEffect(function () {
-    var element = ref === null || ref === void 0 ? void 0 : ref.current;
-    if (element) {
-      setHeight(element.offsetHeight);
-    }
-    var observer = new ResizeObserver(function () {
-      var height = getHeight(element);
-      height && setHeight(height);
-    });
-    observer.observe(element);
-    return function () {
-      observer.disconnect();
-    };
-  }, [ref]);
-  return {
-    height: height
-  };
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5915,7 +5891,7 @@ var SearchField = function SearchField(_ref3) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var DEFAULT_FILTER_HEIGHT = 85;
-var WorkspaceFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var WorkspaceFilter = function WorkspaceFilter(_ref) {
   var filters = _ref.filters,
     _ref$onClickFilterChi = _ref.onClickFilterChip,
     onClickFilterChip = _ref$onClickFilterChi === void 0 ? function () {} : _ref$onClickFilterChi,
@@ -5924,7 +5900,6 @@ var WorkspaceFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isAllSelected = _ref.isAllSelected,
     searchQuery = _ref.searchQuery;
   return /*#__PURE__*/React.createElement(Box, {
-    ref: ref,
     sx: {
       marginBottom: '8px'
     }
@@ -5938,7 +5913,7 @@ var WorkspaceFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChipClick: onClickFilterChip,
     isAllSelected: isAllSelected
   })));
-});
+};
 
 var emptyWorkspaceListItem = {
   id: emptyMapWorkspace.id,
@@ -5947,63 +5922,12 @@ var emptyWorkspaceListItem = {
   viewType: emptyMapWorkspace.viewType,
   "abstract": emptyMapWorkspace["abstract"]
 };
-var DEFAULT_DIALOG_HEIGHT = 900;
 var MIN_HEIGHT_SCROLLABLE_LIST = 88; // Slightly less than 2 rows
 var LIST_PADDING_TOP = 8;
-var DEFAULT_PARENT_PADDING = 8;
 var DEFAULT_RESULTS_HEIGHT = 22;
-var useGetRequiredHeights = function useGetRequiredHeights(ref) {
-  // Used to store the height of the list dialog content
-  var _React$useState = React.useState(DEFAULT_DIALOG_HEIGHT),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dialogHeight = _React$useState2[0],
-    setDialogHeight = _React$useState2[1];
-  // Used to store the padding height surrounding the list and the filters
-  var _React$useState3 = React.useState(DEFAULT_PARENT_PADDING),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    parentPaddingHeight = _React$useState4[0],
-    setParentPaddingHeight = _React$useState4[1];
-  // Obtain the height of the results div
-  var resultsRef = React.useRef(null);
-  var _useGetElementHeight = useGetElementHeight(resultsRef, DEFAULT_RESULTS_HEIGHT),
-    resultsHeight = _useGetElementHeight.height;
-  // Obtain the height of the filters and search
-  var _useGetElementHeight2 = useGetElementHeight(ref, DEFAULT_FILTER_HEIGHT),
-    filterHeight = _useGetElementHeight2.height;
-  // Obtain the height of of the list dialog content
-  React.useLayoutEffect(function () {
-    var _a, _b, _c, _d;
-    var dialogElement = (_d = (_c = (_b = (_a = resultsRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement;
-    setDialogHeight(dialogElement.offsetHeight);
-    var observer = new ResizeObserver(function () {
-      var height = getHeight(dialogElement);
-      height && setDialogHeight(height);
-    });
-    observer.observe(dialogElement);
-    return function () {
-      observer.disconnect();
-    };
-  }, [resultsRef]);
-  // Obtain the padding height surrounding the list and the filters
-  React.useEffect(function () {
-    var _a, _b;
-    var parentElement = (_b = (_a = resultsRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
-    var style = getComputedStyle(parentElement);
-    var paddingTop = parseInt(style.paddingTop, 10);
-    paddingTop && setParentPaddingHeight(paddingTop);
-  }, []);
-  var heightOtherElements = filterHeight + resultsHeight + LIST_PADDING_TOP + 2 * parentPaddingHeight;
-  // row height = height + margin
-  var rowHeight = WORKSPACE_SELECT_LIST_ROW_HEIGHT + 4;
-  var availableSpaceForList = dialogHeight - heightOtherElements;
-  var listHeight = availableSpaceForList && availableSpaceForList < MIN_HEIGHT_SCROLLABLE_LIST ? MIN_HEIGHT_SCROLLABLE_LIST : availableSpaceForList;
-  return {
-    resultsRef: resultsRef,
-    rowHeight: rowHeight,
-    listHeight: listHeight
-  };
-};
-var WorkspaceSelectList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+// row height = height + margin
+var rowHeight = WORKSPACE_SELECT_LIST_ROW_HEIGHT + 4;
+var WorkspaceSelectList = function WorkspaceSelectList(_ref) {
   var workspacePresets = _ref.workspacePresets,
     currentSelectedId = _ref.currentSelectedId,
     onClickPreset = _ref.onClickPreset,
@@ -6015,49 +5939,53 @@ var WorkspaceSelectList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     newPreset = _ref$newPreset === void 0 ? emptyWorkspaceListItem : _ref$newPreset,
     _ref$testIdPrefix = _ref.testIdPrefix,
     testIdPrefix = _ref$testIdPrefix === void 0 ? 'workspace' : _ref$testIdPrefix;
-  var _useGetRequiredHeight = useGetRequiredHeights(ref),
-    resultsRef = _useGetRequiredHeight.resultsRef,
-    rowHeight = _useGetRequiredHeight.rowHeight,
-    listHeight = _useGetRequiredHeight.listHeight;
-  // Height of other elements in dialog besides the list:
-  // filter, results text , padding list top and 2x padding around dialog children (top & bottom)
-  var items = !hideNewWorkspace ? [newPreset].concat(_toConsumableArray(workspacePresets)) : workspacePresets;
-  // console.log(filterHeight, resultsHeight, parentPaddingHeight);
+  var items = React.useMemo(function () {
+    return !hideNewWorkspace ? [newPreset].concat(_toConsumableArray(workspacePresets)) : workspacePresets;
+  }, [hideNewWorkspace, newPreset, workspacePresets]);
   return /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "".concat(testIdPrefix, "-selectList")
+    "data-testid": "".concat(testIdPrefix, "-selectList"),
+    sx: {
+      height: "calc(100% - ".concat(DEFAULT_FILTER_HEIGHT, "px)"),
+      minHeight: MIN_HEIGHT_SCROLLABLE_LIST
+    }
   }, /*#__PURE__*/React.createElement(Box, {
-    ref: resultsRef,
     sx: {
       marginBottom: '4px',
       fontSize: '12px'
     }
-  }, workspacePresets.length, " results"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      paddingTop: "".concat(LIST_PADDING_TOP, "px")
-    }
-  }, /*#__PURE__*/React.createElement(FixedSizeList, {
-    height: listHeight,
-    itemCount: items.length,
-    itemSize: rowHeight,
-    width: "100%"
-  }, function (_ref2) {
-    var index = _ref2.index,
-      style = _ref2.style;
-    var preset = items[index];
-    return /*#__PURE__*/React.createElement("div", {
-      style: style,
-      key: preset.id || 'emptyPreset'
-    }, /*#__PURE__*/React.createElement(WorkspaceSelectListRow, {
-      workspacePreset: preset,
-      onClickPreset: onClickPreset,
-      onClickWorkspacePresetOption: onClickWorkspacePresetOption,
-      isEditable: isLoggedIn,
-      searchQuery: searchQuery,
-      isSelected: currentSelectedId === preset.id || currentSelectedId === '' && preset.id === undefined,
-      testIdPrefix: testIdPrefix
+  }, workspacePresets.length, " results"), /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref2) {
+    var _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? 0 : _ref2$height,
+      _ref2$width = _ref2.width,
+      width = _ref2$width === void 0 ? 0 : _ref2$width;
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        paddingTop: "".concat(LIST_PADDING_TOP, "px")
+      }
+    }, /*#__PURE__*/React.createElement(FixedSizeList, {
+      height: height - DEFAULT_RESULTS_HEIGHT,
+      width: width,
+      itemCount: items.length,
+      itemSize: rowHeight
+    }, function (_ref3) {
+      var index = _ref3.index,
+        style = _ref3.style;
+      var preset = items[index];
+      return /*#__PURE__*/React.createElement("div", {
+        style: style,
+        key: preset.id || 'emptyPreset'
+      }, /*#__PURE__*/React.createElement(WorkspaceSelectListRow, {
+        workspacePreset: preset,
+        onClickPreset: onClickPreset,
+        onClickWorkspacePresetOption: onClickWorkspacePresetOption,
+        isEditable: isLoggedIn,
+        searchQuery: searchQuery,
+        isSelected: currentSelectedId === preset.id || currentSelectedId === '' && preset.id === undefined,
+        testIdPrefix: testIdPrefix
+      }));
     }));
-  })));
-});
+  }));
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -6079,7 +6007,6 @@ var ERROR_TITLE = 'View presets not available';
 var ERROR_RETRY = 'Try again';
 var ViewPresetMenuListConnect = function ViewPresetMenuListConnect(_ref) {
   var panelId = _ref.panelId;
-  var filterRef = React.useRef(null);
   var viewPresets = useSelector(function (store) {
     return getFilteredViewPresetListForView(store, panelId);
   });
@@ -6219,7 +6146,10 @@ var ViewPresetMenuListConnect = function ViewPresetMenuListConnect(_ref) {
   });
   var shouldHideNewWorkspace = !isAllSelectedForFilters || viewPresetListSearchQuery.length > 0;
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "viewpreset-selectlist-connect"
+    "data-testid": "viewpreset-selectlist-connect",
+    style: {
+      height: '100%'
+    }
   }, isViewPresetsListFetching && ( /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary",
@@ -6236,15 +6166,15 @@ var ViewPresetMenuListConnect = function ViewPresetMenuListConnect(_ref) {
     }
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
-      padding: 1
+      padding: 1,
+      height: '100%'
     }
   }, !errorViewPresetsList && ( /*#__PURE__*/React.createElement(WorkspaceFilter, {
     filters: viewPresetListFilters,
     onClickFilterChip: onClickFilterChip,
     isAllSelected: isAllSelectedForFilters,
     searchQuery: viewPresetListSearchQuery,
-    onSearch: onSearchFilter,
-    ref: filterRef
+    onSearch: onSearchFilter
   })), /*#__PURE__*/React.createElement(WorkspaceSelectList, {
     workspacePresets: viewPresets,
     currentSelectedId: activeViewPresetId || undefined,
@@ -6257,8 +6187,7 @@ var ViewPresetMenuListConnect = function ViewPresetMenuListConnect(_ref) {
     isLoggedIn: isLoggedIn,
     hideNewWorkspace: shouldHideNewWorkspace,
     searchQuery: viewPresetListSearchQuery,
-    testIdPrefix: "viewpreset",
-    ref: filterRef
+    testIdPrefix: "viewpreset"
   })));
 };
 
@@ -7009,7 +6938,6 @@ var WorkspaceViewConnect = function WorkspaceViewConnect(_ref) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
-  var filterRef = React.useRef(null);
   var currentView = useSelector(function (store) {
     return getWorkspaceState(store);
   });
@@ -7141,7 +7069,10 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
   });
   var shouldHideNewWorkspace = !isAllSelected || workspaceSearchQuery.length > 0;
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "workspace-selectlist-connect"
+    "data-testid": "workspace-selectlist-connect",
+    style: {
+      height: '100%'
+    }
   }, isFetching && ( /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary",
@@ -7168,15 +7099,15 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
     }
   })))), /*#__PURE__*/React.createElement(Box, {
     sx: {
-      padding: 1
+      padding: 1,
+      height: '100%'
     }
   }, !error && ( /*#__PURE__*/React.createElement(WorkspaceFilter, {
     filters: workspaceListFilters,
     onClickFilterChip: onClickFilterChip,
     isAllSelected: isAllSelected,
     searchQuery: workspaceSearchQuery,
-    onSearch: searchFilter,
-    ref: filterRef
+    onSearch: searchFilter
   })), /*#__PURE__*/React.createElement(WorkspaceSelectList, {
     workspacePresets: workspacePresets,
     currentSelectedId: currentView.id || '',
@@ -7184,8 +7115,7 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
     onClickWorkspacePresetOption: onClickWorkspacePresetOption,
     hideNewWorkspace: shouldHideNewWorkspace,
     isLoggedIn: isLoggedIn,
-    searchQuery: workspaceSearchQuery,
-    ref: filterRef
+    searchQuery: workspaceSearchQuery
   })));
 };
 
@@ -7742,9 +7672,12 @@ var WorkspaceTopBar = function WorkspaceTopBar(_ref) {
     "aria-label": "workspace-bar-tabs",
     sx: {
       width: '100%',
+      height: '100%',
       minHeight: 'auto',
       '.MuiTabs-flexContainer': {
-        flexDirection: 'column'
+        flexDirection: 'column',
+        justifyContent: 'center',
+        height: '100%'
       }
     }
   }, /*#__PURE__*/React.createElement(WorkspaceTabConnect, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/workspace",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "GeoWeb Workspace library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -10,7 +10,7 @@
   "dependencies": {
     "react-redux": "^8.1.3",
     "@opengeoweb/shared": "*",
-    "@mui/material": "5.12.0",
+    "@mui/material": "~5.15.11",
     "@opengeoweb/form-fields": "*",
     "@opengeoweb/store": "*",
     "@opengeoweb/api": "*",
@@ -33,7 +33,9 @@
     "axios": "1.5.0",
     "@opengeoweb/taf": "*",
     "@opengeoweb/sigmet-airmet": "*",
-    "@opengeoweb/warnings": "*"
+    "@opengeoweb/warnings": "*",
+    "react-virtualized-auto-sizer": "^1.0.21",
+    "@opengeoweb/timeslider": "*"
   },
   "peerDependencies": {
     "react": "18"

package/src/lib/components/WorkspaceSelectList/WorkspaceSelectList.d.ts

@@ -13,6 +13,5 @@ export interface WorkspaceSelectListProps extends BoxProps {
     newPreset?: WorkspacePresetListItem;
     testIdPrefix?: string;
 }
-export declare const DEFAULT_DIALOG_HEIGHT = 900;
 declare const WorkspaceSelectList: React.FC<WorkspaceSelectListProps>;
 export default WorkspaceSelectList;

package/src/lib/storyUtils/componentsLookUp.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentsLookUpPayload as CoreComponentsLookUpPayload } from '@opengeoweb/core';
 import { ComponentsLookUpPayload as TimeseriesComponentsLookUpPayload } from '@opengeoweb/timeseries';
+import { ComponentsLookUpPayload as TimesliderComponentsLookUpPayload } from '@opengeoweb/timeslider';
 import { ComponentsLookUpPayload as TafComponentsLookUpPayload } from '@opengeoweb/taf';
 import { SigmetComponentsLookUpPayload, AirmetComponentsLookUpPayload } from '@opengeoweb/sigmet-airmet';
 import { ComponentsLookUpPayload as WarningListComponentsLookUpPayLoad } from '@opengeoweb/warnings';
@@ -9,4 +10,4 @@ import { ComponentsLookUpPayload as WarningListComponentsLookUpPayLoad } from '@
  * @param payload
  * @returns
  */
-export declare const componentsLookUp: (payload: CoreComponentsLookUpPayload | TimeseriesComponentsLookUpPayload | TafComponentsLookUpPayload | SigmetComponentsLookUpPayload | AirmetComponentsLookUpPayload | WarningListComponentsLookUpPayLoad) => React.ReactElement;
+export declare const componentsLookUp: (payload: CoreComponentsLookUpPayload | TimeseriesComponentsLookUpPayload | TafComponentsLookUpPayload | SigmetComponentsLookUpPayload | AirmetComponentsLookUpPayload | WarningListComponentsLookUpPayLoad | TimesliderComponentsLookUpPayload) => React.ReactElement;

package/src/lib/components/WorkspaceMenu/utils.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const useGetElementHeight: (ref: React.RefObject<HTMLDivElement>, defaultHeight: number) => {
-    height: number;
-};

package/src/lib/components/WorkspaceMenu/utils.spec.d.ts

@@ -1 +0,0 @@
-export {};