@opengeoweb/soundings 13.2.1 → 14.0.1

package/index.esm.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } f
 import { useSelector, useDispatch } from 'react-redux';
 import { Box, Stack, Menu, ListSubheader, Typography, MenuItem, Tooltip, LinearProgress, Card, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
 import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, dateUtils, CustomSlider, CustomToggleButton, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
-import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericSelectors, mapSelectors, genericActions, syncGroupsActions, mapActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
 import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, webmapUtils } from '@opengeoweb/webmap';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import * as d3 from 'd3';
@@ -246,7 +246,7 @@ const drawIsobars = ({
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const SOUNDING_COLORS = ['#4487f3', '#c3213c', '#509a00', '#ED6C06'];
+const SOUNDING_COLORS = ['#4487f3', '#c3213c', '#509a00', '#ED6C06', '#9810FA', '#FFDF20', '#312C85'];
 const getDiagramName = (t, diagramType) => {
   switch (diagramType) {
     case 'BIJVOET':
@@ -2012,7 +2012,7 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
           const rawData = await getEdrCollectionForLocation(collectionId, baseUrl, instanceId, location, parameters, datetime, verticalRange);
           const parsedData = parseCoverageCollection(rawData, parameterMappings);
           return sortSoundingFeatures(parsedData);
-        } catch (err) {
+        } catch (_err) {
           throw new Error('Error fetching EDR data collection by location');
         }
       }
@@ -2030,7 +2030,7 @@ const constructQueryParams = (collectionId, baseUrl, instanceId, location, datet
         const rawData = await getEdrCollectionForPosition(collectionId, baseUrl, instanceId, location, parameters, datetime, verticalRange);
         const parsedData = parseCoverageCollection(rawData, parameterMappings);
         return sortSoundingFeatures(parsedData);
-      } catch (err) {
+      } catch (_err) {
         throw new Error('Error fetching EDR data collection by position');
       }
     }
@@ -2452,9 +2452,9 @@ const slice = createSlice({
     updateSelectedLocation: (draft, payloadAction) => {
       const {
         sourceId,
-        locationId
+        location
       } = payloadAction.payload;
-      draft.selectedLocations[sourceId] = locationId;
+      draft.selectedLocations[sourceId] = location;
     },
     updateSelectedTime: (draft, payloadAction) => {
       const {
@@ -2539,9 +2539,7 @@ const SoundingsTimeSliderConnect = () => {
   const {
     data: timesteps
   } = useTimesteps(sourceSelections);
-  const mergedTimesteps = Array.from(new Set(timesteps.flat())).sort();
-  // TODO: next line should work in Storybook but does not: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4025
-  // const mergedTimesteps =  [...new Set(timestepArrays.flat())].sort();
+  const mergedTimesteps = [...new Set(timesteps.flat())].sort();
   // Ensure that the selected time is always one of the available timesteps
   const validSelectedTime = roundToClosestTimestep(selectedTime, mergedTimesteps);
   useEffect(() => {
@@ -2821,7 +2819,12 @@ const SoundingsConnect = ({
   const selectedTime = useSelector(getSelectedTime);
   const sourceSelections = useSelector(getSelectedSources);
   const locationSelections = useSelector(getLocationSelections);
-  const collections = sourceSelections.map(({
+  const selectedFeature = useSelector(state => genericSelectors.getSelectedFeature(state.syncGroups, viewId));
+  const selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, viewId));
+  const selectedMapPin = useSelector(state =>
+  // mapPins are synced so we can arbitrarily choose the first linked map
+  mapSelectors.getPinLocation(state, selectedMapIds[0]));
+  const collections = useMemo(() => sourceSelections.map(({
     collectionId,
     url,
     name
@@ -2829,12 +2832,29 @@ const SoundingsConnect = ({
     id: collectionId,
     url,
     name: name || collectionId
-  }));
+  })), [sourceSelections]);
   const {
     data: locationData
   } = useGetCollectionLocations(collections, true);
+  /* Make sure the map pin is visible when linking new maps */
   useEffect(() => {
-    const simpleGeoJson = {
+    const toggleMapPinVisibility = displayMapPin => {
+      selectedMapIds.forEach(mapId => {
+        dispatch(mapActions.toggleMapPinIsVisible({
+          mapId,
+          displayMapPin
+        }));
+      });
+    };
+    toggleMapPinVisibility(true);
+    return () => {
+      // Hide the map pin when the component is unmounted
+      toggleMapPinVisibility(false);
+    };
+  }, [dispatch, selectedMapIds]);
+  // construct and send geojson to map for drawing locations
+  useEffect(() => {
+    const geoJsonForMap = {
       type: 'FeatureCollection',
       features: (locationData || []).flatMap(({
         id: serviceId,
@@ -2842,12 +2862,14 @@ const SoundingsConnect = ({
       }) => features.map(feature => ({
         type: 'Feature',
         geometry: feature.geometry,
-        properties: {
-          ...feature.properties,
-          mapFeatureClass: MapFeatureClass.ObservationStation
-        },
         id: feature.id,
-        serviceId // TODO: remove in follow-up if not needed https://gitlab.com/opengeoweb/opengeoweb/-/issues/6312
+        properties: {
+          name: feature.properties.name,
+          mapFeatureClass: MapFeatureClass.ObservationStation,
+          highlightSelectedFeature: selectedFeature?.id === feature.id,
+          id: feature.id,
+          serviceId
+        }
       })))
     };
     dispatch(genericActions.addSharedData({
@@ -2855,11 +2877,41 @@ const SoundingsConnect = ({
       data: {
         features: [{
           id: geojsonLayerId,
-          geoJSON: simpleGeoJson
+          geoJSON: geoJsonForMap
         }]
       }
     }));
-  }, [collections, dispatch, geojsonLayerId, locationData, sourceSelections, viewId]);
+  }, [dispatch, geojsonLayerId, locationData, selectedFeature?.id, viewId]);
+  useEffect(() => () => {
+    if (viewId) {
+      dispatch(syncGroupsActions.deleteSharedData({
+        panelId: viewId
+      }));
+    }
+  }, [dispatch, viewId]);
+  // Map location selection has changed. Update soundings location
+  // since the location menu may be out of sync
+  useEffect(() => {
+    const serviceId = selectedFeature?.serviceId;
+    if (serviceId) {
+      dispatch(soundingsActions.updateSelectedLocation({
+        sourceId: serviceId,
+        location: selectedFeature?.id
+      }));
+    }
+  }, [dispatch, selectedFeature?.id, selectedFeature?.serviceId]);
+  // Map pin change on its own implies position selection
+  useEffect(() => {
+    // Use first source. Multiple sources will be implemented later.
+    // https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4254
+    const source = sourceSelections[0];
+    if (source?.collectionId && !selectedFeature?.id && selectedMapPin?.lon && selectedMapPin.lat) {
+      dispatch(soundingsActions.updateSelectedLocation({
+        sourceId: source.collectionId,
+        location: [selectedMapPin.lon, selectedMapPin.lat]
+      }));
+    }
+  }, [selectedMapPin, selectedFeature?.id, sourceSelections, dispatch]);
   const {
     error,
     data,
@@ -3298,6 +3350,8 @@ const LocationsMenuConnect = ({
   const locationSelections = useSelector(getLocationSelections);
   const selectedSourceIds = useSelector(getSelectedSourcesIds);
   const sourcesAmount = useSelector(getSelectedSourcesAmount);
+  const panelId = useSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.SoundingsLocations));
+  const selectedMapIds = useSelector(state => genericSelectors.getLinkedMaps(state, panelId));
   const {
     data,
     isPending,
@@ -3306,16 +3360,53 @@ const LocationsMenuConnect = ({
   const services = useMemo(() => {
     return data?.filter(service => selectedSourceIds.includes(service.id)) || [];
   }, [data, selectedSourceIds]);
+  const handleFeatureSelect = (panelId, featureId) => {
+    dispatch(genericActions.addSharedData({
+      panelId,
+      data: {
+        selectedFeatureId: featureId
+      }
+    }));
+  };
+  const setMapPinLocation = mapPinLocation => {
+    selectedMapIds.forEach(mapId => {
+      dispatch(mapActions.setMapPinLocation({
+        mapId,
+        mapPinLocation
+      }));
+    });
+  };
   return jsx(LocationsMenu, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
     services: services,
     selectedSourcesAmount: sourcesAmount,
     selectedLocations: locationSelections,
-    updateSelectedLocation: (sourceId, locationId) => void dispatch(soundingsActions.updateSelectedLocation({
-      sourceId,
-      locationId
-    })),
+    updateSelectedLocation: (sourceId, locationId) => {
+      dispatch(soundingsActions.updateSelectedLocation({
+        sourceId,
+        location: locationId
+      }));
+      // Use first source. Multiple sources will be implemented later.
+      // https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4254
+      const isFirstSource = sourceId === selectedSourceIds[0];
+      if (!isFirstSource) {
+        return;
+      }
+      if (locationId) {
+        handleFeatureSelect(panelId, locationId);
+      }
+      const foundFeature = services[0].features.find(feature => feature.id === locationId);
+      // check type for typescript
+      if (foundFeature?.geometry.type === 'Point') {
+        const [lon, lat] = foundFeature.geometry.coordinates;
+        setMapPinLocation({
+          lon,
+          lat,
+          id: locationId
+        });
+      }
+    },
     onMouseDown: setDialogOrder,
     order: dialogOrder,
     isLoading: isPending,
@@ -3323,9 +3414,8 @@ const LocationsMenuConnect = ({
   });
 };
 
-const soundingsComponentType = 'Soundings';
 const soundingsLookUp = payload => {
-  if (payload.componentType === soundingsComponentType) {
+  if (payload.componentType === 'Soundings') {
     return jsx(SoundingsConnect, {
       viewId: payload.id,
       diagramType: payload.diagramType ? payload.diagramType : 'SKEWT'
@@ -3362,4 +3452,4 @@ const createMockStore = mockState => configureStore({
   middleware: getDefaultMiddleware => getDefaultMiddleware().concat(storeMiddlewares)
 });
 
-export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsConnect, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingDiagrams, soundingsComponentType, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };
+export { LocationsMenuConnect, SOUNDINGS_NAMESPACE, SoundingsConnect, SoundingsSourceDialogConnect, createMockStore, initSoundingsI18n, soundingDiagrams, soundingsLookUp, soundingsReducersMap, soundingsTranslations, translateKeyOutsideComponents, useSoundingsTranslation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/soundings",
-  "version": "13.2.1",
+  "version": "14.0.1",
   "description": "GeoWeb soundings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,24 +8,24 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/api": "13.2.1",
+    "@opengeoweb/api": "14.0.1",
     "@tanstack/react-query": "^5.85.5",
     "react": "^18.3.1",
     "d3": "^7.9.0",
     "react-i18next": "^15.1.1",
     "i18next": "^25.0.1",
-    "@opengeoweb/shared": "13.2.1",
+    "@opengeoweb/shared": "14.0.1",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "13.2.1",
+    "@opengeoweb/store": "14.0.1",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "13.2.1",
+    "@opengeoweb/theme": "14.0.1",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "13.2.1",
+    "@opengeoweb/time-slider": "14.0.1",
     "react-window": "^1.8.10",
-    "@opengeoweb/webmap": "13.2.1",
+    "@opengeoweb/webmap": "14.0.1",
     "lodash": "^4.17.21",
     "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "13.2.1"
+    "@opengeoweb/webmap-react": "14.0.1"
   },
   "devDependencies": {
     "eslint-plugin-storybook": "9.0.17"

package/src/lib/api/edr-api/hooks.d.ts

@@ -1,10 +1,9 @@
 import { SoundingsCollection } from '@opengeoweb/shared';
 import { SoundingFeature } from './types';
-import { SourceType } from '../../store/types';
+import { Coordinates, SourceType } from '../../store/types';
 import { SoundingsCollectionsWithInstances } from '../../components/Soundings/types';
 import { ServiceWithLocations } from '../../components/MenuBar/LocationsMenu';
 export declare const sortSoundingFeatures: (data: SoundingFeature[]) => SoundingFeature[];
-type Coordinates = [number, number];
 export declare const defaultParameterMappings: {
     temperature: string;
     windDirection: string;
@@ -42,4 +41,3 @@ export declare const useGetCollectionLocations: <SoundingsCollectionLike extends
     isPending: boolean;
     error: Error | null | undefined;
 };
-export {};

package/src/lib/components/MenuBar/LocationsMenu.d.ts

@@ -1,4 +1,5 @@
 import { LocationsResponseFromBE } from '../../api/edr-api/types';
+import { Coordinates } from '../../store/types';
 export type ServiceWithLocations = LocationsResponseFromBE & {
     id: string;
     name: string;
@@ -6,7 +7,7 @@ export type ServiceWithLocations = LocationsResponseFromBE & {
 interface Props {
     services: ServiceWithLocations[];
     selectedSourcesAmount: number;
-    selectedLocations: Record<string, string | undefined>;
+    selectedLocations: Record<string, string | Coordinates | undefined>;
     isOpen: boolean;
     onClose: () => void;
     updateSelectedLocation: (sourceId: string, locationId: string | undefined) => void;

package/src/lib/store/selectors.d.ts

@@ -20,18 +20,18 @@ export declare const getSourceSelections: ((state: SoundingsModuleState) => Reco
     memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const getLocationSelections: ((state: SoundingsModuleState) => Record<string, string | undefined>) & {
+export declare const getLocationSelections: ((state: SoundingsModuleState) => Record<string, string | import("./types").Coordinates | undefined>) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
 } & {
-    resultFunc: (resultFuncArgs_0: SoundingsStore) => Record<string, string | undefined>;
-    memoizedResultFunc: ((resultFuncArgs_0: SoundingsStore) => Record<string, string | undefined>) & {
+    resultFunc: (resultFuncArgs_0: SoundingsStore) => Record<string, string | import("./types").Coordinates | undefined>;
+    memoizedResultFunc: ((resultFuncArgs_0: SoundingsStore) => Record<string, string | import("./types").Coordinates | undefined>) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
     };
-    lastResult: () => Record<string, string | undefined>;
+    lastResult: () => Record<string, string | import("./types").Coordinates | undefined>;
     dependencies: [(store: SoundingsModuleState) => SoundingsStore];
     recomputations: () => number;
     resetRecomputations: () => void;

package/src/lib/store/types.d.ts

@@ -20,16 +20,18 @@ export interface SourceSelection {
 }
 export interface UpdateLocationPayload {
     sourceId: string;
-    locationId: string | undefined;
+    location: string | Coordinates | undefined;
 }
 export interface UpdateTimePayload {
     selectedTime: string;
 }
+/** [lon, lat] */
+export type Coordinates = [number, number];
 export interface SoundingsStore {
     /** key: sourceId */
     selectedSources: Record<string, SourceSelection>;
-    /** key: sourceId, value: locationId */
-    selectedLocations: Record<string, string | undefined>;
+    /** key: sourceId, value: locationId or position coordinates */
+    selectedLocations: Record<string, string | Coordinates | undefined>;
     /** ISO date, e.g., 2025-01-02T12:00:00.000Z */
     selectedTime: string;
 }

package/src/lib/utils/soundingsLookUp.d.ts

@@ -1,7 +1,7 @@
 import { SoundingDiagramType } from '../api/edr-api/types';
-export declare const soundingsComponentType = "Soundings";
+export type SoundingsComponentType = 'Soundings';
 export interface SoundingsLookUpPayload {
-    componentType: typeof soundingsComponentType;
+    componentType: SoundingsComponentType;
     id: string;
     title?: string;
     diagramType?: SoundingDiagramType;