@opengeoweb/soundings 14.0.0 → 14.1.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } from 'react';
 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 { Box, Stack, Menu, ListSubheader, Typography, MenuItem, Tooltip, Card, LinearProgress, 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, genericSelectors, mapSelectors, genericActions, syncGroupsActions, mapActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
 import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, webmapUtils } from '@opengeoweb/webmap';
@@ -15,7 +15,8 @@ import i18n from 'i18next';
 export { default as i18n } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
-import { Sources } from '@opengeoweb/theme';
+import { Sources, ArrowDropDownDown } from '@opengeoweb/theme';
+import { useResizable } from 'react-resizable-layout';
 import { FixedSizeList } from 'react-window';
 
 var en = {
@@ -432,7 +433,8 @@ const createClampedInterpolationFunc = (interpolationFunc, domain) => {
 // Construct interpolation functions to use when hovering between data points
 // Ensure NaN/null values are removed and cut the domain to the upper and lower pressure bounds of the parameter
 const constructTooltipData = data => {
-  const tooltipData = data.map(features => {
+  const tooltipData = data.map((features, index) => {
+    const color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
     const pressureData = features.map(feature => feature.properties.pressure);
     const tempData = features.map(feature => feature.properties.temp);
     const dewpointData = features.map(feature => feature.properties.dewpoint);
@@ -453,19 +455,20 @@ const constructTooltipData = data => {
       interpolateTemperature: createClampedInterpolationFunc(interpolateTemperature, tempPressure),
       interpolateDewpoint: createClampedInterpolationFunc(interpolateDewpoint, dewpointPressure),
       interpolateWindSpeed: createClampedInterpolationFunc(interpolateWindSpeed, windSpeedPressure),
-      interpolateWindDirection: createClampedInterpolationFunc(interpolateWindDirection, windDirPressure)
+      interpolateWindDirection: createClampedInterpolationFunc(interpolateWindDirection, windDirPressure),
+      tooltipColor: color
     };
   });
   return tooltipData.filter(data => data.pressureData.length > 0);
 };
-const getParamHtml = (paramValue, colorIndex, unit, isLastElement, noDistance = false) => {
+const getParamHtml = (paramValue, colorIndex, unit, isLastElement, color, noDistance = false) => {
   if (colorIndex === 0) {
-    return `<p style="${noDistance || isLastElement ? 'margin: 0;' : 'margin-top: 0;'} color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
+    return `<p style="${noDistance || isLastElement ? 'margin: 0;' : 'margin-top: 0;'} color: ${color}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
   }
   if (isLastElement) {
-    return `<p style="${noDistance ? 'margin: 0;' : 'margin-bottom: 0;'}  color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}</p>`;
+    return `<p style="${noDistance ? 'margin: 0;' : 'margin-bottom: 0;'}  color: ${color}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}</p>`;
   }
-  return `<p style="${noDistance ? 'margin: 0;' : 'margin-top: 0;'} color: ${SOUNDING_COLORS[colorIndex]}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
+  return `<p style="${noDistance ? 'margin: 0;' : 'margin-top: 0;'} color: ${color}">${!isNaN(paramValue) && paramValue !== null ? `${paramValue.toFixed(1)}${unit}` : '-'}${noDistance ? '' : '<br/>'}</p>`;
 };
 const extractPressureFromY = (diagramType, y, yScale) => {
   if (diagramType === 'BIJVOET') {
@@ -499,7 +502,8 @@ const drawSoundingsTooltip = ({
       hoveredTemp: dataSet.interpolateTemperature(pressure),
       hoveredDewpoint: dataSet.interpolateDewpoint(pressure),
       hoveredWindDirection: dataSet.interpolateWindDirection(pressure),
-      hoveredWindSpeed: dataSet.interpolateWindSpeed(pressure)
+      hoveredWindSpeed: dataSet.interpolateWindSpeed(pressure),
+      color: dataSet.tooltipColor
     };
   });
   // Pressure
@@ -507,20 +511,20 @@ const drawSoundingsTooltip = ({
   .style('top', `${pressureY}px`).html(`${Math.round(pressure)}hPa`);
   // Temperature
   tempRefd3.style('display', 'block').style('left', `${0.75 * width + margin.left}px`).style('top', `${pressureY}px`).html(() => interpolatedData.map((dataSet, index) => {
-    return getParamHtml(dataSet.hoveredTemp, index, '°C', index === interpolatedData.length - 1);
+    return getParamHtml(dataSet.hoveredTemp, index, '°C', index === interpolatedData.length - 1, dataSet.color);
   }).join(''));
   // Dewpoint temperature
   dewpointRefd3.style('display', 'block').style('left', `${width / 3 + margin.left}px`).style('top', `${pressureY}px`).html(interpolatedData.map((dataSet, index) => {
-    return getParamHtml(dataSet.hoveredDewpoint, index, '°C', index === interpolatedData.length - 1);
+    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(() => {
     const windSpeedStrings = interpolatedData.map((dataSet, index) => {
-      return getParamHtml(dataSet.hoveredWindSpeed, index, 'm/s', index === interpolatedData.length - 1, true);
+      return getParamHtml(dataSet.hoveredWindSpeed, index, 'm/s', index === interpolatedData.length - 1, dataSet.color, true);
     });
     const windDirStrings = interpolatedData.map((dataSet, index) => {
-      return getParamHtml(dataSet.hoveredWindDirection, index, '°', index === interpolatedData.length - 1, index === interpolatedData.length - 1);
+      return getParamHtml(dataSet.hoveredWindDirection, index, '°', index === interpolatedData.length - 1, dataSet.color, index === interpolatedData.length - 1);
     });
     return windSpeedStrings.map((windSpeedString, index) => {
       return `${windSpeedString}${windDirStrings[index]}`;
@@ -1808,16 +1812,18 @@ function parseCoverageCollection(response, parameterMappings) {
     }
   };
   const data = {};
+  // Ensure we have an array of coverages. If only a Coverage has been returned, put it in an array so we can "loop"
+  const coverageData = response?.coverages ? response?.coverages : [response];
   const {
     t: tAxis,
     x: xAxis,
     y: yAxis,
     z: zAxis
-  } = response.coverages[0]?.domain.axes || {};
+  } = coverageData[0]?.domain.axes || {};
   if (!tAxis?.values || !xAxis?.values || !yAxis?.values || !zAxis?.values) {
     return features;
   }
-  response.coverages.forEach(coverage => {
+  coverageData.forEach(coverage => {
     const {
       ranges
     } = coverage;
@@ -2287,7 +2293,7 @@ const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
 });
 const useSoundingsTranslation = () => useTranslation(ns);
 
-const TIMESLIDER_HEIGHT = 108;
+const TIMESLIDER_HEIGHT = 176;
 const LABEL_MIN_WIDTH = 48;
 const useMaxLabelCount = ref => {
   const [width, setWidth] = React.useState(0);
@@ -2348,7 +2354,7 @@ const SoundingsTimeSlider = ({
     ref: sliderRef,
     style: {
       display: 'flex',
-      paddingTop: '16px',
+      paddingTop: '32px',
       marginRight: '80px',
       marginLeft: '24px',
       height: `${TIMESLIDER_HEIGHT}px`
@@ -2778,6 +2784,198 @@ const SoundingsLegend = ({
   });
 };
 
+const SoundingsAccordion = React.forwardRef(({
+  name,
+  minWidth = 24,
+  maxWidth,
+  accordionIsOpen,
+  diagramTypeButton,
+  children
+}, aspectRatioRef) => {
+  const containerRef = React.useRef(null);
+  const widthRef = React.useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [autoSizing, setAutoSizing] = React.useState(false);
+  const {
+    position: containerWidth,
+    setPosition: setContainerWidth,
+    separatorProps
+  } = useResizable({
+    containerRef,
+    axis: 'x',
+    min: minWidth,
+    max: maxWidth || undefined,
+    initial: minWidth,
+    onResizeStart: () => {
+      setAutoSizing(false);
+    },
+    onResizeEnd: ({
+      position
+    }) => {
+      if (position <= minWidth) {
+        widthRef.current = null;
+        return;
+      }
+      widthRef.current = position;
+    }
+  });
+  const openAccordion = () => {
+    if (widthRef.current != null) {
+      setAutoSizing(false);
+      setContainerWidth(Math.max(widthRef.current, minWidth));
+      setIsOpen(true);
+      return;
+    }
+    setAutoSizing(true);
+    setIsOpen(true);
+  };
+  const closeAccordion = React.useCallback(() => {
+    setContainerWidth(minWidth);
+    setIsOpen(false);
+    setAutoSizing(false);
+  }, [minWidth, setContainerWidth]);
+  React.useEffect(() => {
+    if (accordionIsOpen) {
+      setIsOpen(true);
+      setAutoSizing(true);
+    }
+  }, [accordionIsOpen]);
+  React.useLayoutEffect(() => {
+    if (autoSizing) {
+      return;
+    }
+    if (!isOpen && containerWidth > minWidth) {
+      setIsOpen(true);
+      return;
+    }
+    if (isOpen && containerWidth <= minWidth) {
+      setIsOpen(false);
+      setAutoSizing(false);
+    }
+  }, [autoSizing, containerWidth, isOpen, minWidth, setContainerWidth]);
+  React.useLayoutEffect(() => {
+    if (!autoSizing || !containerRef.current) {
+      return;
+    }
+    let raf1 = 0;
+    let raf2 = 0;
+    const measureContainerWidth = () => {
+      if (!containerRef.current) {
+        return;
+      }
+      const {
+        width
+      } = containerRef.current.getBoundingClientRect();
+      const calculatedWidth = Math.max(Math.round(width), minWidth);
+      setContainerWidth(calculatedWidth);
+      widthRef.current = calculatedWidth;
+      setAutoSizing(false); // stop autosizing; lock width now that we have measured it
+    };
+    // Use double requestAnimationFrame so layout paints before measuring
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(measureContainerWidth);
+    });
+    // eslint-disable-next-line consistent-return
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [autoSizing, minWidth, setContainerWidth]);
+  const cardStyleWhenAuto = {
+    width: 'auto',
+    flex: '1 1 100%',
+    minWidth: 0,
+    maxWidth: maxWidth || '100%',
+    boxSizing: 'border-box'
+  };
+  const cardStyleWhenLocked = {
+    width: containerWidth,
+    flex: '0 1 auto',
+    minWidth,
+    maxWidth: maxWidth || '100%',
+    boxSizing: 'border-box'
+  };
+  return jsx(Card, {
+    "data-testid": "soundings-accordion",
+    ref: containerRef,
+    sx: {
+      height: '100%',
+      position: 'relative',
+      ...(autoSizing ? cardStyleWhenAuto : cardStyleWhenLocked)
+    },
+    children: jsxs(Box, {
+      ref: aspectRatioRef,
+      sx: {
+        height: '100%',
+        width: '100%'
+      },
+      children: [!isOpen && jsxs(Box, {
+        "data-testid": "closed-accordion-header",
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          writingMode: 'vertical-lr',
+          transform: 'rotate(180deg)',
+          paddingBottom: '10px',
+          cursor: 'pointer'
+        },
+        onClick: openAccordion,
+        children: [name, jsx(ArrowDropDownDown, {
+          sx: {
+            transform: 'rotate(90deg)'
+          }
+        })]
+      }), isOpen && jsx(Box, {
+        "data-testid": "open-accordion-header",
+        children: jsxs(Stack, {
+          children: [jsxs(Box, {
+            sx: {
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              paddingRight: '10px',
+              overflow: 'hidden',
+              marginTop: '4px'
+            },
+            children: [diagramTypeButton && diagramTypeButton, jsx(Box, {
+              sx: {
+                cursor: 'pointer',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                marginLeft: '16px',
+                height: '100%'
+              },
+              onClick: closeAccordion,
+              children: name
+            }), jsx(ArrowDropDownDown, {})]
+          }), jsx(Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center'
+            },
+            children: children
+          })]
+        })
+      }), jsx(Box, {
+        "data-testid": "soundings-accordion-drag-handle",
+        ...separatorProps,
+        sx: {
+          height: '100%',
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          width: '5px',
+          cursor: 'col-resize'
+        }
+      })]
+    })
+  });
+});
+
 const DIAGRAM_TYPE_BUTTON_HEIGHT = 28;
 const useGetSize = (viewRef, legendRef) => {
   const [size, setSize] = React.useState(0);
@@ -2940,7 +3138,6 @@ const SoundingsConnect = ({
           viewId: viewId
         })
       }), jsxs(Card, {
-        ref: viewRef,
         sx: {
           width: '100%',
           height: '100%'
@@ -2958,38 +3155,50 @@ const SoundingsConnect = ({
           children: jsx(SoundingsLegend, {
             sourceSelections: sourceSelections
           })
-        }), jsx(Box, {
-          sx: {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            paddingTop: '2px',
-            paddingRight: '2px',
-            width: size
-          },
-          children: jsx(DiagramTypeButton, {
-            diagramType: chosenDiagramType,
-            setDiagramType: setChosenDiagramType
-          })
-        }), jsx(Soundings, {
-          data: data,
-          svgDimensions: {
-            width: size,
-            height: size,
-            margin: {
-              bottom: 0,
-              left: 0,
-              right: 0,
-              top: 0
-            }
-          },
-          diagramType: chosenDiagramType
-        }), jsx(Box, {
+        }), jsxs(Stack, {
           sx: {
-            position: 'absolute',
-            bottom: '8px',
-            width: '100%'
+            width: '100%',
+            height: '100%',
+            display: 'flex'
           },
-          children: jsx(SoundingsTimeSliderConnect, {})
+          spacing: 1,
+          children: [jsx(Box, {
+            sx: {
+              display: 'flex',
+              flexDirection: 'row',
+              width: '100%',
+              height: '100%',
+              padding: 1
+            },
+            children: jsx(SoundingsAccordion, {
+              ref: viewRef,
+              name: "Soundings",
+              diagramTypeButton: jsx(DiagramTypeButton, {
+                diagramType: chosenDiagramType,
+                setDiagramType: setChosenDiagramType
+              }),
+              accordionIsOpen: true,
+              children: jsx(Soundings, {
+                data: data,
+                svgDimensions: {
+                  width: size,
+                  height: size,
+                  margin: {
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    top: 0
+                  }
+                },
+                diagramType: chosenDiagramType
+              })
+            })
+          }), jsx(Box, {
+            sx: {
+              width: '100%'
+            },
+            children: jsx(SoundingsTimeSliderConnect, {})
+          })]
         })]
       })]
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/soundings",
-  "version": "14.0.0",
+  "version": "14.1.0",
   "description": "GeoWeb soundings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,24 +8,25 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/api": "14.0.0",
+    "@opengeoweb/api": "14.1.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.0.0",
+    "@opengeoweb/shared": "14.1.0",
     "@mui/material": "^7.0.1",
-    "@opengeoweb/store": "14.0.0",
+    "@opengeoweb/store": "14.1.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "14.0.0",
+    "@opengeoweb/theme": "14.1.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/time-slider": "14.0.0",
+    "@opengeoweb/time-slider": "14.1.0",
     "react-window": "^1.8.10",
-    "@opengeoweb/webmap": "14.0.0",
+    "@opengeoweb/webmap": "14.1.0",
     "lodash": "^4.17.21",
     "@types/geojson": "^7946.0.14",
-    "@opengeoweb/webmap-react": "14.0.0"
+    "@opengeoweb/webmap-react": "14.1.0",
+    "react-resizable-layout": "^0.7.3"
   },
   "devDependencies": {
     "eslint-plugin-storybook": "9.0.17"

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

@@ -1,7 +1,7 @@
-import { CoverageCollection } from '@opengeoweb/shared';
+import { Coverage, CoverageCollection, VerticalProfileDomain } from '@opengeoweb/shared';
 import { CollectionDetails, LocationsResponseFromBE, SoundingsInstances } from './types';
 export declare const getCollectionLocations: (collectionId: string, baseUrl: string) => Promise<LocationsResponseFromBE>;
 export declare const getCollectionInstances: (collectionId: string, baseUrl: string) => Promise<SoundingsInstances>;
 export declare const getCollectionDetails: (collectionId: string, baseUrl: string) => Promise<CollectionDetails>;
-export declare const getEdrCollectionForLocation: (collectionId: string, baseUrl: string, instanceId: string | undefined, locationId: string, parameters: string[], datetime: string, verticalRange: string) => Promise<CoverageCollection>;
-export declare const getEdrCollectionForPosition: (collectionId: string, baseUrl: string, instanceId: string | undefined, coordinates: [number, number], parameters: string[], datetime: string, verticalRange: string) => Promise<CoverageCollection>;
+export declare const getEdrCollectionForLocation: (collectionId: string, baseUrl: string, instanceId: string | undefined, locationId: string, parameters: string[], datetime: string, verticalRange: string) => Promise<CoverageCollection<VerticalProfileDomain> | Coverage<VerticalProfileDomain>>;
+export declare const getEdrCollectionForPosition: (collectionId: string, baseUrl: string, instanceId: string | undefined, coordinates: [number, number], parameters: string[], datetime: string, verticalRange: string) => Promise<CoverageCollection<VerticalProfileDomain> | Coverage<VerticalProfileDomain>>;

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

@@ -1,6 +1,6 @@
-import { CoverageCollection } from '@opengeoweb/shared';
+import { Coverage, CoverageCollection, VerticalProfileDomain } from '@opengeoweb/shared';
 import { CollectionDetails, SoundingFeature, SoundingsInstance } from './types';
-export declare function parseCoverageCollection(response: CoverageCollection, parameterMappings: Record<string, string>): SoundingFeature[];
+export declare function parseCoverageCollection(response: CoverageCollection<VerticalProfileDomain> | Coverage<VerticalProfileDomain>, parameterMappings: Record<string, string>): SoundingFeature[];
 /**
  * Parse duration with repeats
  * @param dateString e.g. 'R67/2025-04-22T09:00:00Z/PT60M'

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface SoundingsAccordionProps {
+    name: string;
+    minWidth?: number;
+    maxWidth?: number;
+    accordionIsOpen?: boolean;
+    diagramTypeButton?: React.ReactElement;
+    children?: React.ReactNode;
+}
+export declare const SoundingsAccordion: React.ForwardRefExoticComponent<SoundingsAccordionProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,8 @@
+import { StoryObj, Meta } from '@storybook/react-webpack5';
+import { SoundingsAccordion } from './SoundingsAccordion';
+declare const meta: Meta<typeof SoundingsAccordion>;
+export default meta;
+type Story = StoryObj<typeof SoundingsAccordion>;
+export declare const SoundingsAccordionClosed: Story;
+export declare const SoundingsAccordionOpen: Story;
+export declare const MultipleSoundingsAccordions: Story;

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

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

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

@@ -8,6 +8,7 @@ interface DrawSoundingsTooltipData {
     interpolateDewpoint: (value: number) => number;
     interpolateWindSpeed: (value: number) => number;
     interpolateWindDirection: (value: number) => number;
+    tooltipColor: string;
 }
 export declare const constructTooltipData: (data: SoundingFeature[][]) => DrawSoundingsTooltipData[];
 interface DrawSoundingsTooltipProps {

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

@@ -10,6 +10,11 @@ export declare const soundingsReducersMap: {
     ui: import("redux").Reducer<import("dist/libs/store/src/store/ui/types").UIStoreType>;
     drawingtools: import("redux").Reducer<import("dist/libs/store/src/store/drawingTool/reducer").DrawingToolState>;
     router: import("redux").Reducer<{}>;
+    common: import("redux").Reducer<{
+        auth: import("dist/libs/store/src/store/common/auth/types").AuthStore;
+    }, import("redux").UnknownAction, Partial<{
+        auth: import("dist/libs/store/src/store/common/auth/types").AuthStore | undefined;
+    }>>;
     soundings: import("redux").Reducer<import("./types").SoundingsStore>;
 };
 export declare const createMockStore: (mockState?: SoundingsModuleState | WebMapStateModuleState | UIModuleState) => Store;

package/src/lib/utils/storyUtils/SoundingsResponsiveView.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SoundingsResponsiveView: () => React.JSX.Element;