@opengeoweb/soundings 13.1.0 → 13.2.1

package/index.esm.js

@@ -1604,7 +1604,7 @@ const Soundings = ({
       svg.on('mousemove', null);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showTooltip, data, diagramType]);
+  }, [showTooltip, data, diagramType, width, height]);
   useEffect(() => {
     const handleMouseLeave = () => {
       if (pressureRef.current) {
@@ -1648,8 +1648,7 @@ const Soundings = ({
   return jsxs(Box, {
     ref: canvasRef,
     sx: {
-      position: 'relative',
-      paddingBottom: '20px'
+      position: 'relative'
     },
     children: [jsx("svg", {
       ref: svgRef
@@ -2288,10 +2287,33 @@ const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
 });
 const useSoundingsTranslation = () => useTranslation(ns);
 
-const MAX_LABEL_COUNT = 15;
-const shouldHideLabel = (nItems, index) => {
-  const nthLabelsToShow = Math.ceil(nItems / MAX_LABEL_COUNT);
-  return nItems > MAX_LABEL_COUNT &&
+const TIMESLIDER_HEIGHT = 108;
+const LABEL_MIN_WIDTH = 48;
+const useMaxLabelCount = ref => {
+  const [width, setWidth] = React.useState(0);
+  React.useLayoutEffect(() => {
+    let resizeObserver;
+    if (ref.current) {
+      resizeObserver = new ResizeObserver(entry => {
+        const {
+          width
+        } = entry[0].target.getBoundingClientRect();
+        setWidth(width);
+      });
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [ref]);
+  const maxLabelCount = Math.max(1, Math.floor(width / LABEL_MIN_WIDTH));
+  return maxLabelCount;
+};
+const shouldHideLabel = (nItems, index, maxLabelCount) => {
+  const nthLabelsToShow = Math.ceil(nItems / maxLabelCount);
+  return nItems > maxLabelCount &&
   // hide labels if too many items
   index !== nItems - 1 && (
   // not last item (always shown)
@@ -2303,12 +2325,14 @@ const SoundingsTimeSlider = ({
   selectedTime,
   updateSelectedTime
 }) => {
+  const sliderRef = React.useRef(null);
+  const maxLabelCount = useMaxLabelCount(sliderRef);
   const {
     i18n
   } = useSoundingsTranslation();
   const marks = timesteps.filter(date => dateUtils.isValidIsoDateString(date)).map((date, index, arr) => ({
     value: dateUtils.unix(dateUtils.getUtcFromString(date)),
-    label: shouldHideLabel(arr.length, index) ? '' : dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
+    label: shouldHideLabel(arr.length, index, maxLabelCount) ? '' : dateUtils.dateToString(dateUtils.getUtcFromString(date), 'iii d. HH:mm', true, i18n.language)
   }));
   const onStepBackward = React.useCallback(() => {
     const currentIndex = timesteps.indexOf(selectedTime);
@@ -2321,10 +2345,13 @@ const SoundingsTimeSlider = ({
     updateSelectedTime(timesteps[followingIndex]);
   }, [selectedTime, updateSelectedTime, timesteps]);
   return jsxs("div", {
+    ref: sliderRef,
     style: {
       display: 'flex',
-      marginTop: '40px',
-      marginRight: '4rem'
+      paddingTop: '16px',
+      marginRight: '80px',
+      marginLeft: '24px',
+      height: `${TIMESLIDER_HEIGHT}px`
     },
     children: [jsxs("div", {
       style: {
@@ -2378,8 +2405,8 @@ const SoundingsTimeSlider = ({
       extraStyles: {
         margin: '0px 20px 0px 20px',
         '.MuiSlider-markLabel': {
-          rotate: '-45deg',
-          translate: '-41%'
+          transform: 'translate(-90%, 20px) rotate(-45deg)',
+          transformOrigin: 'top center'
         }
       }
     })]
@@ -2753,11 +2780,41 @@ const SoundingsLegend = ({
   });
 };
 
-const size = 600;
+const DIAGRAM_TYPE_BUTTON_HEIGHT = 28;
+const useGetSize = (viewRef, legendRef) => {
+  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);
+    }
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [legendRef, viewRef]);
+  return size;
+};
 const SoundingsConnect = ({
   viewId,
   diagramType = 'SKEWT'
 }) => {
+  const viewRef = React.useRef(null);
+  const legendRef = React.useRef(null);
+  const size = useGetSize(viewRef, legendRef);
   const [chosenDiagramType, setChosenDiagramType] = React.useState(diagramType);
   const geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
   const dispatch = useDispatch();
@@ -2818,11 +2875,12 @@ const SoundingsConnect = ({
         position: 'absolute',
         width: '100%'
       }
-    }), jsxs(Box, {
+    }), jsxs(Stack, {
       sx: {
-        padding: 2,
-        overflowY: 'scroll',
-        height: '100%'
+        padding: '12px',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'geowebColors.background.surfaceApp'
       },
       children: [jsx(Box, {
         paddingLeft: 5,
@@ -2830,14 +2888,21 @@ const SoundingsConnect = ({
           viewId: viewId
         })
       }), jsxs(Card, {
+        ref: viewRef,
+        sx: {
+          width: '100%',
+          height: '100%'
+        },
         children: [jsx(Box, {
           sx: {
             display: 'flex',
             justifyContent: 'center',
             paddingTop: '2px',
             paddingRight: '2px',
-            width: size
+            minHeight: '24px',
+            width: '100%'
           },
+          ref: legendRef,
           children: jsx(SoundingsLegend, {
             sourceSelections: sourceSelections
           })
@@ -2866,8 +2931,15 @@ const SoundingsConnect = ({
             }
           },
           diagramType: chosenDiagramType
+        }), jsx(Box, {
+          sx: {
+            position: 'absolute',
+            bottom: '8px',
+            width: '100%'
+          },
+          children: jsx(SoundingsTimeSliderConnect, {})
         })]
-      }), jsx(SoundingsTimeSliderConnect, {})]
+      })]
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/soundings",
-  "version": "13.1.0",
+  "version": "13.2.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.1.0",
+    "@opengeoweb/api": "13.2.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.1.0",
+    "@opengeoweb/shared": "13.2.1",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "13.1.0",
+    "@opengeoweb/store": "13.2.1",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "13.1.0",
+    "@opengeoweb/theme": "13.2.1",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "13.1.0",
+    "@opengeoweb/time-slider": "13.2.1",
     "react-window": "^1.8.10",
-    "@opengeoweb/webmap": "13.1.0",
+    "@opengeoweb/webmap": "13.2.1",
     "lodash": "^4.17.21",
     "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "13.1.0"
+    "@opengeoweb/webmap-react": "13.2.1"
   },
   "devDependencies": {
     "eslint-plugin-storybook": "9.0.17"

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

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