@opengeoweb/soundings 14.5.1 → 15.0.0

package/index.esm.js

@@ -7,7 +7,7 @@ import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericSel
 import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, webmapUtils } from '@opengeoweb/webmap';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import { ReactSortable } from 'react-sortablejs';
-import { ArrowDropDownDown, DragHandle, Layers, Sources } from '@opengeoweb/theme';
+import { ArrowDropDownDown, DragHandle, Layers, Sources, Visibility, VisibilityOff } from '@opengeoweb/theme';
 import * as d3 from 'd3';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
@@ -683,8 +683,7 @@ const drawSoundingsTooltip = ({
     return getParamHtml(dataSet.hoveredDewpoint, index, '°C', index === interpolatedData.length - 1, dataSet.color);
   }).join(''));
   // Wind
-  windRefd3?.style('display', 'block').style('left', `${width + margin.left + margin.right - 55}px`) // -55 to account for width of element
-  .style('top', `${pressureY}px`).html(() => {
+  windRefd3?.style('display', 'block').style('left', `${width + margin.left + margin.right}px`).style('top', `${pressureY}px`).html(() => {
     const windSpeedStrings = interpolatedData.map((dataSet, index) => {
       return getParamHtml(dataSet.hoveredWindSpeed, index, 'm/s', index === interpolatedData.length - 1, dataSet.color, true);
     });
@@ -1870,6 +1869,19 @@ const soundingsStyle = {
   }
 };
 const WIND_BARB_OFFSET_X = 35;
+/**
+ * Check if the sounding data is effectively empty.
+ * Data can be empty in two ways:
+ * 1. No sources selected: data = []
+ * 2. No locations selected: data = [[], []] (sources exist but all have empty arrays)
+ */
+const isDataEmpty = data => {
+  if (!data || data.length === 0) {
+    return true;
+  }
+  // Check if all inner arrays are empty (no locations selected)
+  return data.every(features => features.length === 0);
+};
 const WindBarbs = ({
   d3GraphId,
   data,
@@ -1951,7 +1963,8 @@ const WindBarbs = ({
         columnOffsetX: index * WIND_BARB_OFFSET_X
       });
     });
-    tooltipDataRef.current = constructTooltipData(data);
+    // Clear or update tooltip data based on whether we have actual data
+    tooltipDataRef.current = isDataEmpty(data) ? null : constructTooltipData(data);
     // Update previous inner height after drawing so animation uses the prior value
     prevInnerHeightRef.current = height;
     // eslint-disable-next-line consistent-return, @typescript-eslint/explicit-function-return-type
@@ -1964,6 +1977,11 @@ const WindBarbs = ({
       windRef.current && (windRef.current.style.display = 'none');
       return;
     }
+    // Hide tooltip when data is empty (all sources/locations removed)
+    if (isDataEmpty(data)) {
+      windRef.current.style.display = 'none';
+      return;
+    }
     const rect = svgRectRef.current ?? svgRef.current.getBoundingClientRect();
     if (clientY == null || clientY < rect.top || clientY > rect.bottom) {
       windRef.current.style.display = 'none';
@@ -1991,15 +2009,12 @@ const WindBarbs = ({
       tooltipData: tooltipDataRef.current,
       diagramType
     });
-  }, [clientY, showTooltip, diagramType]);
-  useEffect(() => {
-    // Reset the tooltips when filteredData changes
-    if (windRef.current) {
-      windRef.current.style.display = 'none';
-    }
-  }, [data]);
+  }, [clientY, showTooltip, diagramType, data]);
   return jsxs(Box, {
     ref: canvasRef,
+    sx: {
+      position: 'relative'
+    },
     children: [jsx("svg", {
       ref: svgRef
     }), jsx(Box, {
@@ -2258,21 +2273,19 @@ const SoundingsAccordion = React.forwardRef(({
 });
 
 const SortableAccordions = ({
+  soundingPanelsInOrder,
   data,
   size,
   chosenDiagramType,
   setChosenDiagramType,
-  viewRef
+  viewRef,
+  onOrderChange
 }) => {
-  const [accordions, setAccordions] = React.useState([{
-    id: 'soundings'
-  }, {
-    id: 'windBarbs'
-  }]);
   const [soundingsIsClosed, setSoundingsIsClosed] = React.useState(false);
   const [previousHeight, setPreviousHeight] = React.useState(size);
   const createPanel = React.useCallback(id => {
-    switch (id) {
+    const normalizedId = id.toLowerCase().replace(/\s+/g, '');
+    switch (normalizedId) {
       case 'soundings':
         return jsx(SoundingsAccordion, {
           accordionIsOpen: true,
@@ -2286,7 +2299,7 @@ const SortableAccordions = ({
           setSoundingsIsClosed: setSoundingsIsClosed,
           size: size,
           children: jsx(Soundings, {
-            d3GraphId: id,
+            d3GraphId: normalizedId,
             data: data,
             diagramType: chosenDiagramType,
             svgDimensions: {
@@ -2301,13 +2314,13 @@ const SortableAccordions = ({
             }
           })
         });
-      case 'windBarbs':
+      case 'windbarbs':
         return jsx(SoundingsAccordion, {
           maxWidth: 200,
           name: "Wind Barbs",
           children: jsx(WindBarbs, {
             animateResize: Boolean(soundingsIsClosed && previousHeight),
-            d3GraphId: id,
+            d3GraphId: normalizedId,
             data: data,
             diagramType: chosenDiagramType,
             svgDimensions: {
@@ -2339,18 +2352,31 @@ const SortableAccordions = ({
       direction: "horizontal",
       draggable: ".sortable-item",
       handle: ".drag-handle",
-      list: accordions,
-      setList: setAccordions,
+      list: soundingPanelsInOrder.map(panel => ({
+        ...panel
+      })),
+      setList: list => onOrderChange(list.map(({
+        id,
+        name,
+        isDisplayed
+      }) => ({
+        id,
+        name,
+        isDisplayed
+      }))),
       style: {
         display: 'flex',
         gap: 4,
         width: '100%'
       },
       tag: "div",
-      children: accordions.map(({
+      children: soundingPanelsInOrder.filter(entry => entry.isDisplayed).flatMap(({
         id
       }) => {
         const panel = createPanel(id);
+        if (!panel) {
+          return [];
+        }
         return panel ? jsx(React.Fragment, {
           children: React.cloneElement(panel, {
             accordionId: id,
@@ -3029,7 +3055,11 @@ const useGetCollectionLocations = (collections, enabled) => {
 const initialSoundingsState = {
   selectedSources: {},
   selectedLocations: {},
-  selectedTime: new Date().toISOString()
+  selectedTime: new Date().toISOString(),
+  soundingPanels: {
+    order: [],
+    entities: {}
+  }
 };
 const slice = createSlice({
   initialState: initialSoundingsState,
@@ -3057,6 +3087,20 @@ const slice = createSlice({
         selectedTime
       } = payloadAction.payload;
       draft.selectedTime = selectedTime;
+    },
+    addSoundingPanelsFromPreset: (draft, payloadAction) => {
+      const {
+        order,
+        entities
+      } = payloadAction.payload;
+      draft.soundingPanels.order = order;
+      draft.soundingPanels.entities = entities;
+    },
+    changeSoundingPanelOrder: (draft, payloadAction) => {
+      const {
+        newOrderOfIds
+      } = payloadAction.payload;
+      draft.soundingPanels.order = newOrderOfIds;
     }
   }
 });
@@ -3112,6 +3156,16 @@ const getSelectedSourcesAmount = createSelector(getSelectedSources, activeSource
 const getSelectedSourcesIds = createSelector(getSelectedSources, activeSources => {
   return activeSources.map(source => source.collectionId);
 }, selectorMemoizationOptions);
+const getSoundingPanelsInOrder = createSelector(getSoundingsStore, store => {
+  const {
+    order = [],
+    entities = {}
+  } = store.soundingPanels || {
+    order: [],
+    entities: {}
+  };
+  return order.map(id => entities[id]);
+}, selectorMemoizationOptions);
 
 var MenuOptions;
 (function (MenuOptions) {
@@ -3512,6 +3566,13 @@ const SoundingsConnect = ({
     data,
     isPending
   } = useMultipleSources(sourceSelections, locationSelections, selectedTime);
+  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store));
+  const changeOrder = newOrder => {
+    const orderedIds = newOrder.map(collection => collection.id);
+    dispatch(soundingsActions.changeSoundingPanelOrder({
+      newOrderOfIds: orderedIds
+    }));
+  };
   return jsxs(Fragment, {
     children: [!!error && jsx(AlertBanner, {
       shouldClose: true,
@@ -3568,8 +3629,10 @@ const SoundingsConnect = ({
               children: jsx(SortableAccordions, {
                 chosenDiagramType: chosenDiagramType,
                 data: data,
+                onOrderChange: changeOrder,
                 setChosenDiagramType: setChosenDiagramType,
                 size: size,
+                soundingPanelsInOrder: soundingPanelsInOrder,
                 viewRef: viewRef
               })
             })
@@ -4005,27 +4068,114 @@ const LocationsMenuConnect = ({
   });
 };
 
+var SoundingManagerDummyPreset = {
+	order: [
+		"soundings",
+		"windbarbs"
+	],
+	entities: {
+		soundings: {
+			id: "soundings",
+			name: "Soundings",
+			isDisplayed: true
+		},
+		windbarbs: {
+			id: "windbarbs",
+			name: "Wind Barbs",
+			isDisplayed: true
+		}
+	}
+};
+var preset = {
+	SoundingManagerDummyPreset: SoundingManagerDummyPreset
+};
+
+const SoundingManagerListItem = ({
+  name,
+  isDisplayed
+}) => {
+  return jsx(Card, {
+    className: "sortable-item",
+    sx: {
+      margin: '4px 0 2px',
+      backgroundColor: isDisplayed ? 'white' : 'rgb(232, 232, 232)'
+    },
+    children: jsxs(Grid, {
+      alignItems: "center",
+      container: true,
+      direction: "row",
+      justifyContent: "flex-start",
+      sx: {
+        height: '32px'
+      },
+      children: [jsx(IconButton, {
+        "aria-label": "drag-handle",
+        className: "drag-handle",
+        size: "small",
+        sx: {
+          width: '24px',
+          height: '24px',
+          paddingRight: '8px',
+          paddingLeft: '8px'
+        },
+        children: jsx(DragHandle, {
+          fontSize: "small"
+        })
+      }), jsx(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: isDisplayed ? jsx(Visibility, {}) : jsx(VisibilityOff, {})
+      }), jsxs(Box, {
+        sx: {
+          paddingRight: '8px',
+          paddingLeft: '8px'
+        },
+        children: [" ", name, " "]
+      })]
+    })
+  });
+};
+
 const SoundingsManager = ({
   isOpen,
   onClose,
   onMouseDown,
-  order
+  order,
+  soundingPanelsInOrder,
+  onOrderChange
 }) => {
+  const sortableList = React.useMemo(() => soundingPanelsInOrder.map(collection => ({
+    ...collection
+  })), [soundingPanelsInOrder]);
   return jsx(ToolContainerDraggable, {
     isOpen: isOpen,
     minWidth: 300,
     onClose: onClose,
     onMouseDown: onMouseDown,
     order: order,
-    startPosition: {
-      top: 40,
-      left: 50
-    },
-    startSize: {
-      width: 320
-    },
-    title: "Sounding Manager",
-    children: "Soundings Manager"
+    title: "Soundings Manager",
+    children: jsx(ReactSortable, {
+      animation: 200,
+      direction: "vertical",
+      draggable: ".sortable-item",
+      handle: ".drag-handle",
+      list: sortableList,
+      setList: onOrderChange,
+      style: {
+        padding: '5px'
+      },
+      tag: "div",
+      children: sortableList.map(({
+        id,
+        name,
+        isDisplayed
+      }) => jsx(SoundingManagerListItem, {
+        isDisplayed: isDisplayed,
+        name: name
+      }, id))
+    })
   });
 };
 
@@ -4036,11 +4186,25 @@ const SoundingsManagerConnect = () => {
     dialogOrder,
     setDialogOrder
   } = useSetupDialog(uiTypes.DialogTypes.SoundingsManager);
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    const data = preset.SoundingManagerDummyPreset;
+    dispatch(soundingsActions.addSoundingPanelsFromPreset(data));
+  }, [dispatch]);
+  const soundingPanelsInOrder = useSelector(store => getSoundingPanelsInOrder(store));
+  const changeOrder = newOrder => {
+    const orderedIds = newOrder.map(collection => collection.id);
+    dispatch(soundingsActions.changeSoundingPanelOrder({
+      newOrderOfIds: orderedIds
+    }));
+  };
   return jsx(SoundingsManager, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
     onMouseDown: setDialogOrder,
-    order: dialogOrder
+    onOrderChange: changeOrder,
+    order: dialogOrder,
+    soundingPanelsInOrder: soundingPanelsInOrder
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/soundings",
-  "version": "14.5.1",
+  "version": "15.0.0",
   "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": "14.5.1",
+    "@opengeoweb/api": "15.0.0",
     "@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": "14.5.1",
+    "@opengeoweb/shared": "15.0.0",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "14.5.1",
+    "@opengeoweb/store": "15.0.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "14.5.1",
+    "@opengeoweb/theme": "15.0.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "14.5.1",
+    "@opengeoweb/time-slider": "15.0.0",
     "react-window": "^1.8.10",
-    "@opengeoweb/webmap": "14.5.1",
+    "@opengeoweb/webmap": "15.0.0",
     "lodash": "^4.17.21",
     "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "14.5.1",
+    "@opengeoweb/webmap-react": "15.0.0",
     "react-resizable-layout": "^0.7.3",
     "react-sortablejs": "^6.1.4"
   },

package/src/lib/components/Soundings/SortableAccordions.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
 import type { SoundingFeature } from '../../api/edr-api/types';
+import type { SoundingPanel } from '../../store/types';
 interface SortableAccordionsProps {
+    soundingPanelsInOrder: SoundingPanel[];
     data: SoundingFeature[][];
     size: number;
     chosenDiagramType: 'SKEWT' | 'BIJVOET' | 'EMAGRAM';
     setChosenDiagramType: (data: 'SKEWT' | 'BIJVOET' | 'EMAGRAM') => void;
     viewRef: React.RefObject<HTMLDivElement>;
+    onOrderChange: (newOrder: {
+        id: string;
+        name: string;
+        isDisplayed: boolean;
+    }[]) => void;
 }
-export declare const SortableAccordions: ({ data, size, chosenDiagramType, setChosenDiagramType, viewRef, }: SortableAccordionsProps) => React.ReactElement;
+export declare const SortableAccordions: ({ soundingPanelsInOrder, data, size, chosenDiagramType, setChosenDiagramType, viewRef, onOrderChange, }: SortableAccordionsProps) => React.ReactElement;
 export {};

package/src/lib/components/SoundingsManager/SoundingManagerConnect.intergration.spec.d.ts

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

package/src/lib/components/SoundingsManager/SoundingManagerListItem.d.ts

@@ -0,0 +1,4 @@
+export declare const SoundingManagerListItem: ({ name, isDisplayed, }: {
+    name: string;
+    isDisplayed: boolean;
+}) => React.ReactElement;

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

@@ -1,8 +1,16 @@
+import React from 'react';
+import type { SoundingPanel } from '../../store/types';
 interface SoundingsManagerProps {
     isOpen: boolean;
     onClose: () => void;
     onMouseDown: () => void;
     order: number;
+    soundingPanelsInOrder: SoundingPanel[];
+    onOrderChange: (newOrder: {
+        id: string;
+        name: string;
+        isDisplayed: boolean;
+    }[]) => void;
 }
-export declare const SoundingsManager: ({ isOpen, onClose, onMouseDown, order, }: SoundingsManagerProps) => React.ReactElement;
+export declare const SoundingsManager: ({ isOpen, onClose, onMouseDown, order, soundingPanelsInOrder, onOrderChange, }: SoundingsManagerProps) => React.ReactElement;
 export {};

package/src/lib/components/SoundingsManager/SoundingsManagerConnect.d.ts

@@ -1 +1,2 @@
+import React from 'react';
 export declare const SoundingsManagerConnect: () => React.ReactElement;

package/src/lib/components/SoundingsManager/SoundingsManagerListItem.spec.d.ts

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

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

@@ -1,8 +1,12 @@
 import type { Draft, PayloadAction } from '@reduxjs/toolkit';
-import type { SoundingsStore, UpdateLocationPayload, UpdateSourcePayload, UpdateTimePayload } from './types';
+import type { SoundingPanels, SoundingsStore, UpdateLocationPayload, UpdateSourcePayload, UpdateTimePayload } from './types';
 export declare const initialSoundingsState: SoundingsStore;
 export declare const soundingsReducer: import("redux").Reducer<SoundingsStore>, soundingsActions: import("@reduxjs/toolkit").CaseReducerActions<{
     updateSelectedSource: (draft: Draft<SoundingsStore>, payloadAction: PayloadAction<UpdateSourcePayload>) => void;
     updateSelectedLocation: (draft: Draft<SoundingsStore>, payloadAction: PayloadAction<UpdateLocationPayload>) => void;
     updateSelectedTime: (draft: Draft<SoundingsStore>, payloadAction: PayloadAction<UpdateTimePayload>) => void;
+    addSoundingPanelsFromPreset: (draft: Draft<SoundingsStore>, payloadAction: PayloadAction<SoundingPanels>) => void;
+    changeSoundingPanelOrder: (draft: Draft<SoundingsStore>, payloadAction: PayloadAction<{
+        newOrderOfIds: string[];
+    }>) => void;
 }, "soundings">;

package/src/lib/store/reducer.spec.d.ts

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

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

@@ -165,3 +165,24 @@ export declare const getSelectedSourcesIds: ((state: SoundingsModuleState) => st
     memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
 };
+export declare const getSoundingPanelsInOrder: ((state: SoundingsModuleState) => import("./types").SoundingPanel[]) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: SoundingsStore) => import("./types").SoundingPanel[];
+    memoizedResultFunc: ((resultFuncArgs_0: SoundingsStore) => import("./types").SoundingPanel[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => import("./types").SoundingPanel[];
+    dependencies: [(store: SoundingsModuleState) => SoundingsStore];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+};

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

@@ -27,6 +27,15 @@ export interface UpdateTimePayload {
 }
 /** [lon, lat] */
 export type Coordinates = [number, number];
+export interface SoundingPanel {
+    id: string;
+    name: string;
+    isDisplayed: boolean;
+}
+export interface SoundingPanels {
+    order: string[];
+    entities: Record<string, SoundingPanel>;
+}
 export interface SoundingsStore {
     /** key: sourceId */
     selectedSources: Record<string, SourceSelection>;
@@ -34,6 +43,7 @@ export interface SoundingsStore {
     selectedLocations: Record<string, string | Coordinates | undefined>;
     /** ISO date, e.g., 2025-01-02T12:00:00.000Z */
     selectedTime: string;
+    soundingPanels: SoundingPanels;
 }
 export interface SoundingsModuleState {
     soundings: SoundingsStore;