@opengeoweb/layer-select 12.6.0 → 12.7.0

package/index.esm.js

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, AlertBanner, ToggleMenu, CustomDialog } from '@opengeoweb/shared';
-import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, Copy } from '@opengeoweb/theme';
+import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, AlertBanner, ToggleMenu, CustomDialog, sessionStorageProvider } from '@opengeoweb/shared';
+import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, MeteoGate, Copy } from '@opengeoweb/theme';
 import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, mapListener, serviceListener, layersListener, openlayersListener, uiReducer, layerReducer, serviceReducer, mapReducer, useSetupDialog, mapSelectors, layerTypes } from '@opengeoweb/store';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { compact, countBy, partition } from 'lodash';
@@ -12,8 +12,8 @@ import { Switch, Grid, List, Box, Typography, useTheme, Backdrop, CircularProgre
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { FixedSizeList } from 'react-window';
-import { getDimensionsList, LayerInfoButton } from '@opengeoweb/webmap-react';
-import { LayerType, webmapUtils, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities, clearImageCacheForAllMaps } from '@opengeoweb/webmap';
+import { getDimensionsList, LayerInfoButton, clearImageCacheForAllMaps } from '@opengeoweb/webmap-react';
+import { LayerType, webmapUtils, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities } from '@opengeoweb/webmap';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
 
@@ -2600,6 +2600,37 @@ var ServiceOptionsButton = function ServiceOptionsButton(_ref) {
   });
 };
 
+var DataExplorerButtonConnect = function DataExplorerButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var dialogType = uiTypes.DialogTypes.DataExplorer;
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
+  });
+  var openDataExplorerDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      setOpen: !isOpenInStore,
+      source: source,
+      mapId: mapId
+    }));
+  }, [mapId, dialogType, dispatch, source, isOpenInStore]);
+  return jsx(CustomTooltip, {
+    title: "MeteoGate Data Explorer",
+    children: jsx(CustomIconButton, {
+      variant: "tool",
+      "data-testid": "dataExplorerButton",
+      onClick: openDataExplorerDialog,
+      isSelected: isOpenInStore,
+      children: jsx(MeteoGate, {
+        sx: {}
+      })
+    })
+  });
+};
+
 var LayerSelect = function LayerSelect(_ref) {
   var mapId = _ref.mapId,
     bounds = _ref.bounds,
@@ -2619,8 +2650,10 @@ var LayerSelect = function LayerSelect(_ref) {
       height: 500
     } : _ref$startSize,
     _ref$isMultiMap = _ref.isMultiMap,
-    isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap;
-  var initialServiceListHeight = 37;
+    isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap,
+    _ref$hasDataExplorer = _ref.hasDataExplorer,
+    hasDataExplorer = _ref$hasDataExplorer === void 0 ? false : _ref$hasDataExplorer;
+  var initialServiceListHeight = hasDataExplorer ? 52 : 37;
   var _React$useState = React.useState(startSize.height),
     height = _React$useState[0],
     setHeight = _React$useState[1];
@@ -2689,10 +2722,21 @@ var LayerSelect = function LayerSelect(_ref) {
         margin: '8px 8px 0 16px',
         zIndex: 2
       },
-      children: jsx(KeywordFilterButtonConnect, {
-        mapId: mapId,
-        isMultiMap: isMultiMap,
-        source: source
+      children: jsxs(Grid, {
+        container: true,
+        children: [jsx(Grid, {
+          size: 12,
+          children: jsx(KeywordFilterButtonConnect, {
+            mapId: mapId,
+            isMultiMap: isMultiMap,
+            source: source
+          })
+        }), hasDataExplorer && jsx(Grid, {
+          size: 12,
+          children: jsx(DataExplorerButtonConnect, {
+            mapId: mapId
+          })
+        })]
       })
     }), jsx(Box, {
       sx: {
@@ -2704,6 +2748,9 @@ var LayerSelect = function LayerSelect(_ref) {
         mapId: mapId
       })
     }), jsx(Box, {
+      sx: hasDataExplorer ? {
+        minHeight: '52px'
+      } : {},
       children: jsx(ServiceListConnect, {
         setHeight: handleHeightChange
       })
@@ -3172,6 +3219,8 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
     onCloseDialog = _useSetupDialog.onCloseDialog,
     setDialogOrder = _useSetupDialog.setDialogOrder,
     uiSource = _useSetupDialog.uiSource;
+  var config = sessionStorageProvider.getConfig();
+  var hasDataExplorer = !!config.GW_DATAEXPLORER_CONFIGURATION_FILENAME;
   return jsxs(Fragment, {
     children: [jsx(LayerSelect, {
       mapId: mapId || initialMapId,
@@ -3182,7 +3231,8 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
       onMouseDown: setDialogOrder,
       order: dialogOrder,
       source: uiSource,
-      isMultiMap: isMultiMap
+      isMultiMap: isMultiMap,
+      hasDataExplorer: hasDataExplorer
     }), jsx(KeywordFilterResultsConnect, {
       mapId: mapId || initialMapId,
       isMultiMap: isMultiMap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/layer-select",
-  "version": "12.6.0",
+  "version": "12.7.0",
   "description": "GeoWeb layer select library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,15 +8,15 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "12.6.0",
-    "@opengeoweb/store": "12.6.0",
+    "@opengeoweb/shared": "12.7.0",
+    "@opengeoweb/store": "12.7.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "12.6.0",
-    "@opengeoweb/webmap-react": "12.6.0",
-    "@opengeoweb/webmap": "12.6.0",
+    "@opengeoweb/theme": "12.7.0",
+    "@opengeoweb/webmap-react": "12.7.0",
+    "@opengeoweb/webmap": "12.7.0",
     "react-window": "^1.8.10",
-    "@opengeoweb/snackbar": "12.6.0",
-    "@opengeoweb/form-fields": "12.6.0",
+    "@opengeoweb/snackbar": "12.7.0",
+    "@opengeoweb/form-fields": "12.7.0",
     "react-hook-form": "^7.50.1",
     "@reduxjs/toolkit": "^2.6.1",
     "lodash": "^4.17.21",

package/src/lib/components/LayerSelect/DataExplorerButtonConnect.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { uiTypes } from '@opengeoweb/store';
+interface DataExplorerButtonConnectProps {
+    mapId: string;
+    source?: uiTypes.Source;
+}
+export declare const DataExplorerButtonConnect: React.FC<DataExplorerButtonConnectProps>;
+export {};

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

@@ -15,6 +15,7 @@ interface LayerSelectProps {
     source?: uiTypes.Source;
     startSize?: Size;
     isMultiMap?: boolean;
+    hasDataExplorer?: boolean;
 }
 export declare const LayerSelect: React.FC<LayerSelectProps>;
 export {};

package/src/lib/components/LayerSelect/LayerSelect.stories.d.ts

@@ -6,5 +6,9 @@ type Story = StoryObj<typeof LayerSelect>;
 export declare const Component: Story;
 export declare const LayerSelectDemoLightTheme: Story;
 export declare const LayerSelectDemoDarkTheme: Story;
+export declare const LayerSelectWithDataExplorerDemoLightTheme: Story;
+export declare const LayerSelectWithDataExplorerDemoDarkTheme: Story;
 export declare const LayerSelectDemoSmallLightTheme: Story;
 export declare const LayerSelectDemoSmallDarkTheme: Story;
+export declare const LayerSelectWithDataExplorerDemoSmallLightTheme: Story;
+export declare const LayerSelectWithDataExplorerDemoSmallDarkTheme: Story;