@opengeoweb/soundings 14.3.0 → 14.4.0

package/index.esm.js

@@ -794,7 +794,7 @@ const translateInTestsAndStories = (key, params = undefined) => i18n.t(key, {
 });
 const useSoundingsTranslation = () => useTranslation(ns);
 
-const TIMESLIDER_HEIGHT = 176;
+const TIMESLIDER_HEIGHT = 135;
 const LABEL_MIN_WIDTH = 48;
 const useMaxLabelCount = ref => {
   const [width, setWidth] = React.useState(0);
@@ -2251,19 +2251,40 @@ const Soundings = ({
   });
 };
 
+const ACCORDION_MIN_WIDTH = 24;
 const SoundingsAccordion = React.forwardRef(({
   name,
-  minWidth = 24,
+  minWidth = ACCORDION_MIN_WIDTH,
   maxWidth,
   accordionIsOpen,
   diagramTypeButton,
   handleButtonComponent,
-  children
+  children,
+  setSoundingsIsClosed,
+  setPreviousHeight,
+  size
 }, aspectRatioRef) => {
   const containerRef = React.useRef(null);
   const widthRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const [autoSizing, setAutoSizing] = React.useState(false);
+  const hasWrittenInitialHeightRef = React.useRef(false);
+  // One-time initial write: when component is open and size is available
+  React.useLayoutEffect(() => {
+    if (!hasWrittenInitialHeightRef.current && isOpen && size != null) {
+      size && setPreviousHeight?.(size);
+      if (size > ACCORDION_MIN_WIDTH) {
+        hasWrittenInitialHeightRef.current = true;
+      }
+    }
+  }, [isOpen, size, setPreviousHeight]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setSoundingsIsClosed?.(true);
+    } else {
+      setSoundingsIsClosed?.(false);
+    }
+  }, [isOpen, setSoundingsIsClosed]);
   const {
     position: containerWidth,
     setPosition: setContainerWidth,
@@ -2276,6 +2297,7 @@ const SoundingsAccordion = React.forwardRef(({
     initial: minWidth,
     onResizeStart: () => {
       setAutoSizing(false);
+      size && setPreviousHeight?.(size);
     },
     onResizeEnd: ({
       position
@@ -2285,6 +2307,7 @@ const SoundingsAccordion = React.forwardRef(({
         return;
       }
       widthRef.current = position;
+      size && setPreviousHeight?.(size);
     }
   });
   const openAccordion = () => {
@@ -2298,10 +2321,14 @@ const SoundingsAccordion = React.forwardRef(({
     setIsOpen(true);
   };
   const closeAccordion = React.useCallback(() => {
+    // Persist the D3 size immediately to avoid render lag downstream
+    size && setPreviousHeight?.(size);
+    // Inform parent it's closing before toggling local state
+    setSoundingsIsClosed?.(true);
     setContainerWidth(minWidth);
     setIsOpen(false);
     setAutoSizing(false);
-  }, [minWidth, setContainerWidth]);
+  }, [minWidth, setContainerWidth, setPreviousHeight, setSoundingsIsClosed, size]);
   React.useEffect(() => {
     if (accordionIsOpen) {
       setIsOpen(true);
@@ -2314,13 +2341,15 @@ const SoundingsAccordion = React.forwardRef(({
     }
     if (!isOpen && containerWidth > minWidth) {
       setIsOpen(true);
+      setSoundingsIsClosed?.(false);
       return;
     }
     if (isOpen && containerWidth <= minWidth) {
       setIsOpen(false);
       setAutoSizing(false);
+      setSoundingsIsClosed?.(true);
     }
-  }, [autoSizing, containerWidth, isOpen, minWidth, setContainerWidth]);
+  }, [autoSizing, containerWidth, isOpen, minWidth, setContainerWidth, setSoundingsIsClosed]);
   React.useLayoutEffect(() => {
     if (!autoSizing || !containerRef.current) {
       return;
@@ -2895,11 +2924,13 @@ const extendXAxis = (path, horizontalBarbMargin) => {
 };
 const drawWindBarbs = ({
   svgRef,
+  plotGroup,
   yScale,
   data,
   width,
   margin,
-  barbColor = 'black'
+  barbColor = 'black',
+  columnOffsetX = 0
 }) => {
   const barbsSize = 40;
   const scalingFactor = 0.5;
@@ -2907,8 +2938,8 @@ const drawWindBarbs = ({
   const visibleItems = removeItemsExponential(data.reverse()).filter(item => item.pressure >= 150);
   // Measure width and height and make extra room for one column
   // of windbarbs
-  const svg = d3.select(svgRef.current);
-  const currentWidth = svg.node()?.getBoundingClientRect().width;
+  const rootSvg = d3.select(svgRef.current);
+  const currentWidth = rootSvg.node()?.getBoundingClientRect().width;
   if (!currentWidth) {
     return;
   }
@@ -2924,12 +2955,16 @@ const drawWindBarbs = ({
     const newD = extendXAxis(path, horizontalBarbMargin);
     d3.select(nodes[i]).attr('d', newD);
   });
-  svg.attr('width', currentWidth + margin.left + horizontalBarbMargin);
-  const windBarbColumnX = (currentWidth ?? width) - width + horizontalBarbMargin;
-  const barbGroup = svg.append('g').attr('class', 'wind-group').attr('transform',
+  // Expand root SVG width to make room for barbs column at the right
+  rootSvg.attr('width', currentWidth + margin.left + horizontalBarbMargin);
+  // Place the barbs just to the right of the plotting area.
+  // plotGroup's origin is already translated to (margin.left, margin.top),
+  // and its width equals `width`.
+  const windBarbColumnX = width + 5 + columnOffsetX;
+  const barbGroup = plotGroup.append('g').attr('class', 'wind-group').attr('transform',
   // This translation should be revisited when implementing
   // the plotting of several datasets at once
-  `translate(${windBarbColumnX}, ${margin.top})`);
+  `translate(${windBarbColumnX}, 0)`);
   barbGroup.selectAll('g').data(visibleItems).enter().append('g').attr('id', 'wind-barb').each(function handleBarb(data) {
     const group = d3.select(this);
     const windSymbol = getWindSymbol(data.windSpeed);
@@ -2992,6 +3027,29 @@ const getWindSymbol = value => {
   return svgNode;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const animateResizeTransform = (svg, marginLocal, innerHeight, prevInnerHeightRef) => {
+  const prevInnerHeight = typeof prevInnerHeightRef.current === 'number' ? prevInnerHeightRef.current : 0;
+  const scaleYStart = prevInnerHeight > 0 && innerHeight > 0 ? prevInnerHeight / innerHeight : 0;
+  svg.attr('transform', `translate(${marginLocal.left},${marginLocal.top}) scale(1,${scaleYStart})`).transition().duration(300).attr('transform', `translate(${marginLocal.left},${marginLocal.top}) scale(1,1)`);
+};
+
 const shadow = '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)';
 const soundingsStyle = {
   tooltip: {
@@ -3009,16 +3067,19 @@ const soundingsStyle = {
     fontWeight: 'bold'
   }
 };
+const WIND_BARB_OFFSET_X = 35;
 const WindBarbs = ({
   d3GraphId,
   data,
   svgDimensions,
   showTooltip = true,
-  diagramType = 'SKEWT'
+  diagramType = 'SKEWT',
+  animateResize = false
 }) => {
   const svgRef = useRef(null);
   const canvasRef = useRef(null);
   const windRef = useRef(null);
+  const prevInnerHeightRef = useRef(null);
   const svgDimensionsOptions = {
     width: svgDimensions?.width || 812,
     height: svgDimensions?.height || 802,
@@ -3029,7 +3090,6 @@ const WindBarbs = ({
       left: svgDimensions?.margin?.left || 20
     }
   };
-  // Set SVG dimensions
   const margin = svgDimensionsOptions?.margin;
   const baseWidth = svgDimensionsOptions?.width;
   const baseHeight = svgDimensionsOptions?.height;
@@ -3050,6 +3110,10 @@ const WindBarbs = ({
       diagramType,
       d3GraphId
     });
+    // When Soundings is dragged close, animate the Wind Barbs to resize back to the height where dragging started
+    if (animateResize) {
+      animateResizeTransform(svg, margin, height, prevInnerHeightRef);
+    }
     const svgRectangle = svgRef.current.getBoundingClientRect();
     const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
     const maxT = maxTemperature;
@@ -3072,11 +3136,13 @@ const WindBarbs = ({
       }));
       drawWindBarbs({
         svgRef,
+        plotGroup: svg,
         yScale,
         data: windData,
         width,
         margin: margin,
-        barbColor: color
+        barbColor: color,
+        columnOffsetX: index * WIND_BARB_OFFSET_X
       });
     });
     let handleMove = null;
@@ -3098,6 +3164,8 @@ const WindBarbs = ({
       };
       canvasRef.current.addEventListener('mousemove', handleMove);
     }
+    // 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
     return () => {
       root.selectAll('*').remove();
@@ -3161,6 +3229,8 @@ const SortableAccordions = ({
   }, {
     id: 'windBarbs'
   }]);
+  const [soundingsIsClosed, setSoundingsIsClosed] = React.useState(false);
+  const [previousHeight, setPreviousHeight] = React.useState(size);
   const createPanel = React.useCallback(id => {
     switch (id) {
       case 'soundings':
@@ -3168,6 +3238,9 @@ const SortableAccordions = ({
           ref: viewRef,
           name: "Soundings",
           accordionIsOpen: true,
+          setSoundingsIsClosed: setSoundingsIsClosed,
+          setPreviousHeight: setPreviousHeight,
+          size: size,
           diagramTypeButton: jsx(DiagramTypeButton, {
             diagramType: chosenDiagramType,
             setDiagramType: setChosenDiagramType
@@ -3179,10 +3252,10 @@ const SortableAccordions = ({
               width: size,
               height: size,
               margin: {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0
+                bottom: 25,
+                left: 25,
+                right: 25,
+                top: 25
               }
             },
             diagramType: chosenDiagramType
@@ -3198,20 +3271,21 @@ const SortableAccordions = ({
             diagramType: chosenDiagramType,
             svgDimensions: {
               width: 100,
-              height: size,
               margin: {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0
-              }
-            }
+                bottom: 25,
+                left: 25,
+                right: 25,
+                top: 25
+              },
+              height: soundingsIsClosed ? previousHeight ?? size : size
+            },
+            animateResize: Boolean(soundingsIsClosed && previousHeight)
           })
         });
       default:
         return null;
     }
-  }, [data, size, chosenDiagramType, setChosenDiagramType, viewRef]);
+  }, [viewRef, size, chosenDiagramType, setChosenDiagramType, data, soundingsIsClosed, previousHeight]);
   return jsx(Box, {
     sx: {
       display: 'flex',
@@ -3259,32 +3333,31 @@ const SortableAccordions = ({
   });
 };
 
-const DIAGRAM_TYPE_BUTTON_HEIGHT = 28;
-const useGetSize = (viewRef, legendRef) => {
+const useGetSize = viewRef => {
   const [size, setSize] = React.useState(0);
   React.useLayoutEffect(() => {
-    let resizeObserver;
-    if (viewRef.current) {
-      resizeObserver = new ResizeObserver(entry => {
-        const {
-          width,
-          height
-        } = entry[0].target.getBoundingClientRect();
-        const availableWidth = width; // currently ignoring the windbarbs as they will be moved to a separate panel
-        const legendHeight = legendRef.current?.getBoundingClientRect().height || 0;
-        const availableHeight = height - legendHeight - DIAGRAM_TYPE_BUTTON_HEIGHT - TIMESLIDER_HEIGHT;
-        // set size to the smallest of available width and height to keep the diagram square
-        const newSize = Math.min(availableWidth, availableHeight);
-        setSize(newSize);
-      });
-      resizeObserver.observe(viewRef.current);
+    const container = viewRef.current;
+    if (!container) {
+      return undefined;
     }
-    return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect();
+    const OFFSET_HEIGHT = 100; // Space reserved in layout
+    const resizeObserver = new ResizeObserver(entries => {
+      if (!entries.length) {
+        return;
       }
+      const {
+        width,
+        height
+      } = entries[0].contentRect;
+      const availableHeight = height - TIMESLIDER_HEIGHT + OFFSET_HEIGHT;
+      const nextSize = Math.floor(Math.min(width, availableHeight));
+      setSize(nextSize > 0 ? nextSize : 0);
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
     };
-  }, [legendRef, viewRef]);
+  }, [viewRef]);
   return size;
 };
 const SoundingsConnect = ({
@@ -3292,8 +3365,7 @@ const SoundingsConnect = ({
   diagramType = 'SKEWT'
 }) => {
   const viewRef = React.useRef(null);
-  const legendRef = React.useRef(null);
-  const size = useGetSize(viewRef, legendRef);
+  const size = useGetSize(viewRef);
   const [chosenDiagramType, setChosenDiagramType] = React.useState(diagramType);
   const geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
   const dispatch = useDispatch();
@@ -3420,44 +3492,52 @@ const SoundingsConnect = ({
         children: jsx(MenuBarConnect, {
           viewId: viewId
         })
-      }), jsxs(Card, {
+      }), jsx(Card, {
         sx: {
           width: '100%',
           height: '100%'
         },
-        children: [jsx(Box, {
-          sx: {
-            display: 'flex',
-            justifyContent: 'center',
-            paddingTop: '2px',
-            paddingRight: '2px',
-            minHeight: '24px',
-            width: '100%'
-          },
-          ref: legendRef,
-          children: jsx(SoundingsLegend, {
-            sourceSelections: sourceSelections
-          })
-        }), jsxs(Stack, {
+        children: jsxs(Stack, {
           sx: {
             width: '100%',
             height: '100%',
             display: 'flex'
           },
           spacing: 1,
-          children: [jsx(SortableAccordions, {
-            data: data,
-            size: size,
-            chosenDiagramType: chosenDiagramType,
-            setChosenDiagramType: setChosenDiagramType,
-            viewRef: viewRef
+          children: [jsx(Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'center',
+              paddingTop: '2px',
+              paddingRight: '2px',
+              minHeight: '24px',
+              width: '100%'
+            },
+            children: jsx(SoundingsLegend, {
+              sourceSelections: sourceSelections
+            })
           }), jsx(Box, {
             sx: {
+              flex: 1,
+              minHeight: 0,
               width: '100%'
             },
+            children: jsx(SortableAccordions, {
+              data: data,
+              size: size,
+              chosenDiagramType: chosenDiagramType,
+              setChosenDiagramType: setChosenDiagramType,
+              viewRef: viewRef
+            })
+          }), jsx(Box, {
+            sx: {
+              width: '100%',
+              flex: '0 0 auto',
+              height: `${TIMESLIDER_HEIGHT}px`
+            },
             children: jsx(SoundingsTimeSliderConnect, {})
           })]
-        })]
+        })
       })]
     })]
   });

package/package.json

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

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

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

package/src/lib/components/Soundings/SoundingsConnect.stories.d.ts

@@ -8,6 +8,8 @@ export default _default;
 type Story = StoryObj<typeof SoundingsConnect>;
 export declare const SoundingsConnectStory: Story;
 export declare const SoundingsConnectStoryDark: Story;
+export declare const SoundingsClosedWindBarbsOpenStory: Story;
+export declare const SoundingsClosedWindBarbsOpenStoryDark: Story;
 export declare const SoundingsConnectLoading: {
     (): React.ReactElement;
     parameters: {

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

@@ -11,5 +11,6 @@ export interface WindBarbsProps {
     };
     showTooltip?: boolean;
     diagramType?: SoundingDiagramType;
+    animateResize?: boolean;
 }
 export declare const WindBarbs: React.FC<WindBarbsProps>;

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

@@ -0,0 +1,4 @@
+import type { MutableRefObject } from 'react';
+import * as d3 from 'd3';
+import { Margin } from './drawUtils';
+export declare const animateResizeTransform: (svg: d3.Selection<SVGElement, unknown, HTMLElement, unknown>, marginLocal: Margin, innerHeight: number, prevInnerHeightRef: MutableRefObject<number | null>) => void;

package/src/lib/components/Soundings/animateResizeTransform.spec.d.ts

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

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

@@ -7,5 +7,8 @@ export interface SoundingsAccordionProps {
     diagramTypeButton?: React.ReactElement;
     handleButtonComponent?: React.ReactElement;
     children?: React.ReactNode;
+    setSoundingsIsClosed?: (isClosed: boolean) => void;
+    setPreviousHeight?: (size: number) => void;
+    size?: number;
 }
 export declare const SoundingsAccordion: React.ForwardRefExoticComponent<SoundingsAccordionProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const TIMESLIDER_HEIGHT = 176;
+export declare const TIMESLIDER_HEIGHT = 135;
 export interface SoundingsTimeSliderProps {
     timesteps: string[];
     selectedTime: string;

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

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import React from 'react';
 import { Margin } from '../Soundings/drawUtils';
 import { ScalesType } from '../Soundings/types';
@@ -8,12 +9,14 @@ export interface WindDataType {
 }
 export interface DrawWindBarbsProps {
     svgRef: React.MutableRefObject<SVGSVGElement | null>;
+    plotGroup: d3.Selection<SVGElement, unknown, HTMLElement, unknown>;
     yScale: ScalesType;
     data: WindDataType[];
     width: number;
     margin: Margin;
     barbColor?: string;
+    columnOffsetX?: number;
 }
-export declare const drawWindBarbs: ({ svgRef, yScale, data, width, margin, barbColor, }: DrawWindBarbsProps) => void;
+export declare const drawWindBarbs: ({ svgRef, plotGroup, yScale, data, width, margin, barbColor, columnOffsetX, }: DrawWindBarbsProps) => void;
 export declare const removeItemsExponential: (array: WindDataType[]) => WindDataType[];
 export declare const getWindSymbol: (value: number) => Node | null;