@opengeoweb/core 9.35.0 → 9.36.0

package/README.md

@@ -24,11 +24,29 @@ import {
   LegendMapButtonConnect,
   CoreThemeStoreProvider,
 } from '@opengeoweb/core';
-import { mapActions } from '@opengeoweb/store';
+import {
+  genericListener,
+  mapStoreModuleConfig,
+  mapStoreReducers,
+  mapActions,
+  syncGroupsReducer,
+  uiReducer,
+} from '@opengeoweb/store';
 import { TimeSliderConnect } from '@opengeoweb/timeslider';
-import { createStore } from '@redux-eggs/redux-toolkit';
+import { configureStore } from '@reduxjs/toolkit';
 
-const store = createStore({});
+const store = configureStore({
+  reducer: {
+    ...mapStoreReducers,
+    ui: uiReducer,
+    syncronizationGroupStore: syncGroupsReducer,
+    snackbar: snackbarReducer,
+  },
+  middleware: [
+    ...mapStoreModuleConfig.middlewares!,
+    genericListener.middleware,
+  ],
+});
 
 const ConnectedMapWithTimeSlider = ({ mapId }) => {
   const dispatch = useDispatch();

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef } from 'react';
 import { Grid2, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, circularProgressClasses, ListItemIcon, Checkbox, Switch, Select } from '@mui/material';
-import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, useDebounce, dateUtils, withEggs, ErrorBoundary } from '@opengeoweb/shared';
+import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, useDebounce, dateUtils, ErrorBoundary } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { initReactI18next, useTranslation, I18nextProvider } from 'react-i18next';
@@ -11,11 +11,11 @@ import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, WEBMAP_NAMESPACE, webm
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericSelectors, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, syncGroupsSelectors, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, coreModuleConfig, routerUtils, routerModuleConfig } from '@opengeoweb/store';
+import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericSelectors, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, syncGroupsSelectors, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils } from '@opengeoweb/store';
 import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, getWMSGetFeatureInfoRequestURL, WMLayer } from '@opengeoweb/webmap';
 import { Box as Box$1, styled as styled$1 } from '@mui/system';
-import _, { isEqual, range } from 'lodash';
-import { LayerSelectButtonConnect, LayerSelectConnect, layerSelectConfig } from '@opengeoweb/layer-select';
+import _, { isEqual, debounce, range } from 'lodash';
+import { LayerSelectButtonConnect, LayerSelectConnect } from '@opengeoweb/layer-select';
 import axios from 'axios';
 import DOMPurify from 'dompurify';
 import { snackbarTypes, snackbarActions, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
@@ -4080,7 +4080,7 @@ var preset = {
 	timeSeriesServices: [
 		{
 			name: "KNMI OBS",
-			url: "https://gw-edr-dev-add-cfn.pub.dev.knmi.cloud/edr",
+			url: "https://gw-edr.pub.knmi.cloud/edr",
 			id: "knmi",
 			description: "KNMI EDR",
 			type: "EDR",
@@ -5640,6 +5640,12 @@ var MapViewConnect = function MapViewConnect(_ref) {
   var mapPinLocation = useSelector(function (store) {
     return mapSelectors.getPinLocation(store, mapId);
   });
+  var linkedPanelId = useSelector(function (store) {
+    return genericSelectors.selectLinkedPanelId(store, mapId);
+  });
+  var selectedFeatureCoordinates = useSelector(function (store) {
+    return genericSelectors.getSelectedFeature(store.syncronizationGroupStore, linkedPanelId);
+  });
   var disableMapPin = useSelector(function (store) {
     return mapSelectors.getDisableMapPin(store, mapId);
   });
@@ -5699,6 +5705,14 @@ var MapViewConnect = function MapViewConnect(_ref) {
   var setSelectedFeature = React.useCallback(function (payload) {
     dispatch(layerActions.setSelectedFeature(payload));
   }, [dispatch]);
+  var handleFeatureSelect = function handleFeatureSelect(mapId, featureId) {
+    dispatch(genericActions.addSharedData({
+      panelId: mapId,
+      data: {
+        selectedFeatureId: featureId || ''
+      }
+    }));
+  };
   var updateFeature = React.useCallback(function (_ref2) {
     var geojson = _ref2.geojson,
       reason = _ref2.reason,
@@ -5776,6 +5790,20 @@ var MapViewConnect = function MapViewConnect(_ref) {
     }));
   }, [dispatch, mapId]);
   var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
+  var _useSelector = useSelector(function (state) {
+      return genericSelectors.selectSharedData(state, linkedPanelId);
+    }),
+    hoverId = _useSelector.hoverId;
+  var debouncedSetHoverFeature = React.useMemo(function () {
+    return debounce(function (featureId) {
+      return dispatch(genericActions.addSharedData({
+        panelId: linkedPanelId,
+        data: {
+          hoverId: featureId
+        }
+      }));
+    }, 200);
+  }, [dispatch, linkedPanelId]);
   return jsx("div", {
     style: {
       height: '100%'
@@ -5783,10 +5811,16 @@ var MapViewConnect = function MapViewConnect(_ref) {
     ref: mapRef,
     children: jsxs(MapView, Object.assign({}, props, {
       mapId: mapId,
+      linkedFeatures: {
+        type: 'FeatureCollection',
+        features: linkedFeatures.flatMap(function (feature) {
+          return feature.geoJSON.features;
+        })
+      },
       isTimeScrollingEnabled: isTimeScrollingEnabled,
       srs: srs,
       bbox: bbox,
-      mapPinLocation: displayMapPin ? mapPinLocation : undefined,
+      mapPinLocation: displayMapPin ? selectedFeatureCoordinates || mapPinLocation : undefined,
       dimensions: mapDimensions,
       activeLayerId: activeLayerId,
       animationDelay: animationDelay,
@@ -5852,9 +5886,38 @@ var MapViewConnect = function MapViewConnect(_ref) {
         }, layer), layer.id);
       }), linkedFeatures == null ? void 0 : linkedFeatures.map(function (feature) {
         return jsx(MapViewLayer, {
-          id: "feature-" + (feature == null ? void 0 : feature.id),
-          geojson: feature == null ? void 0 : feature.geoJSON
-        }, feature == null ? void 0 : feature.id);
+          id: feature.id,
+          geojson: feature == null ? void 0 : feature.geoJSON,
+          onHoverFeature: function onHoverFeature(hoverInfo) {
+            if (hoverInfo === undefined && hoverId !== undefined) {
+              debouncedSetHoverFeature();
+            } else if (hoverInfo != null && hoverInfo.feature && feature.originalId !== hoverId) {
+              debouncedSetHoverFeature(feature.originalId);
+            }
+          },
+          onClickFeature: function onClickFeature(event) {
+            var _event$feature$proper;
+            var isClickOutsideFeature = !event || !event.feature;
+            if (isClickOutsideFeature) {
+              if (mapPinLocation) {
+                handleFeatureSelect(linkedPanelId, undefined);
+              }
+              return;
+            }
+            // Handle clicks on station
+            var clickedFeatureName = (_event$feature$proper = event.feature.properties) == null ? void 0 : _event$feature$proper.name;
+            var features = linkedFeatures[0].geoJSON.features;
+            var clickedFeatureIndex = features.findIndex(function (feature) {
+              var _feature$properties;
+              return ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name) === clickedFeatureName;
+            });
+            if (disableMapPin === false) {
+              var _selectedFeature$id;
+              var selectedFeature = features[clickedFeatureIndex];
+              handleFeatureSelect(linkedPanelId, (_selectedFeature$id = selectedFeature.id) == null ? void 0 : _selectedFeature$id.toString());
+            }
+          }
+        }, feature.id);
       }), featureLayers.map(function (layer) {
         return jsx(MapViewLayer, Object.assign({
           id: "featurelayer-" + layer.id,
@@ -8289,6 +8352,20 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     toggleTimeScroll = _ref.toggleTimeScroll;
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      var target = event.target;
+      if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && event.key === 's') {
+        toggleTimeScroll({
+          isTimeScrollingEnabled: !isTimeScrollingEnabled
+        });
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isTimeScrollingEnabled, toggleTimeScroll]);
   var _handleToggle = function handleToggle(groupCategory, groupId, sourceId) {
     var _syncGroupViewState$g = syncGroupViewState[groupCategory].groups.find(function (groupObject) {
         return groupObject.id === groupId;
@@ -8371,10 +8448,14 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
         },
         children: t('workspace-time-scroll-off')
       }), jsx(Switch, {
+        inputProps: {
+          'aria-label': 'workspace time scroll toggle'
+        },
         checked: isTimeScrollingEnabled,
         onChange: function onChange() {
           return toggleTimeScroll({
-            isTimeScrollingEnabled: !isTimeScrollingEnabled
+            isTimeScrollingEnabled: !isTimeScrollingEnabled,
+            origin: 'user'
           });
         }
       }), jsx(Typography, {
@@ -8610,14 +8691,14 @@ var CoreThemeProvider = function CoreThemeProvider(_ref) {
     children: children
   });
 };
-var ThemeWrapperWithModules = withEggs([].concat(coreModuleConfig, [layerSelectConfig]))(function (_ref2) {
+var ThemeWrapperWithModules = function ThemeWrapperWithModules(_ref2) {
   var theme = _ref2.theme,
     children = _ref2.children;
   return jsx(CoreThemeProvider, {
     theme: theme,
     children: children
   });
-});
+};
 /**
  * A Provider component which provides the GeoWeb theme and store for the core.
  * Note: Should only be used with core components, as the provided store is only for core.
@@ -8683,11 +8764,12 @@ var NavigateSetter = function NavigateSetter() {
   return null;
 };
 
-var RouterWrapperConnect = withEggs([routerModuleConfig])(function (props) {
+var RouterWrapperConnect = function RouterWrapperConnect(props) {
+  var children = props.children;
   return jsxs(Fragment, {
-    children: [jsx(NavigateSetter, {}), props.children]
+    children: [jsx(NavigateSetter, {}), children]
   });
-});
+};
 
 var Circle = styled$1('div')(function (_ref) {
   var isRecording = _ref.isRecording;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.35.0",
+  "version": "9.36.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/ComponentsLookUp/componentsLookUp.d.ts

@@ -25,7 +25,7 @@ export interface InitialTimeSeriesProps {
     plotPreset: PlotPreset;
     services: TimeSeriesService[];
 }
-export type InitialProps = InitialMapProps | InitialMultiMapProps | InitialHarmTempAndPrecipProps | ModelRunIntervalProps | mapTypes.MapPresetInitialProps | InitialSliderProps | InitialTimeSeriesProps;
+export type InitialProps = InitialMapProps | InitialMultiMapProps | InitialHarmTempAndPrecipProps | ModelRunIntervalProps | mapTypes.MapPresetInitialProps | InitialSliderProps | InitialTimeSeriesProps | Record<string, unknown>;
 /**
  * The lookup table is for registering your own components with the workspace.
  * @param payload