@opengeoweb/soundings 12.10.0 → 12.11.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, LinearProgress, Card, List, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton } from '@mui/material';
+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 * as d3 from 'd3';
 import { useQueries } from '@tanstack/react-query';
@@ -244,7 +244,7 @@ const drawIsobars = ({
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const SOUNDING_COLORS = ['#4487f3', '#c3213c', '#509a00'];
+const SOUNDING_COLORS = ['#4487f3', '#c3213c', '#509a00', '#ED6C06'];
 const getDiagramName = (t, diagramType) => {
   switch (diagramType) {
     case 'BIJVOET':
@@ -316,15 +316,6 @@ const drawAxes = ({
   const formatTicks = d3.format('.0f');
   svg.append('g').attr('type', 'y-axis').call(d3.axisLeft(yScale).tickValues(isobarValues).tickFormat(formatTicks).tickSizeInner(0).tickSizeOuter(0)).call(gee => gee.select('.domain').remove()).append('text').attr('fill', 'currentColor').attr('x', '0').attr('y', yScale(400)).attr('font-size', '11px').attr('dy', '-0.9em').attr('text-anchor', 'left').text('hPa');
 };
-const addLegends = ({
-  svg,
-  width
-}) => {
-  // Add a legend for the temperature line
-  svg.append('text').attr('x', width - 160).attr('y', 20).attr('fill', SOUNDING_COLORS[0]).text('Temperature (°C)');
-  // Add a legend for the dewpoint line
-  svg.append('text').attr('x', width - 137).attr('y', 40).attr('fill', SOUNDING_COLORS[0]).text('Dewpoint (°C)');
-};
 const mapToPlot = (diagramType, filteredPressureValues, filteredTemperatureValues, xScale, yScale, height) => {
   if (diagramType === 'BIJVOET') {
     const thetaValues = filteredTemperatureValues.map((tempValue, index) => calculateThetaFromPressTemp(pressToPascal(filteredPressureValues[index]), tempToKelvin(tempValue)));
@@ -1487,11 +1478,6 @@ const Soundings = ({
       maxPressure,
       svg
     });
-    // Add legends
-    addLegends({
-      svg,
-      width
-    });
     data.forEach((features, index) => {
       const color = SOUNDING_COLORS[index] || SOUNDING_COLORS[0];
       const temperatureValues = features.map(feature => feature.properties.temp);
@@ -2373,7 +2359,8 @@ const getSelectedSources = createSelector(getSoundingsStore, store => {
         url: value.url,
         instanceId: value.instanceId,
         verticalRange: value.verticalRange,
-        parameterMappings: value.parameterMappings
+        parameterMappings: value.parameterMappings,
+        name: value.name || ''
       });
     }
     return list;
@@ -2582,6 +2569,74 @@ const DiagramTypeButton = ({
   });
 };
 
+/* *
+ * 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 getDisplayValue = (instanceId, stringFormat = 'ISO') => {
+  const instanceAsDate = dateUtils.isoStringToDate(instanceId);
+  if (instanceAsDate) {
+    return stringFormat === 'ISO' ? dateUtils.dateToIsoString(instanceAsDate) : dateUtils.dateToString(instanceAsDate, stringFormat, true);
+  }
+  return instanceId;
+};
+
+const getLegendTitle = source => {
+  const displayName = source.name || source.collectionId;
+  const displayInstance = getDisplayValue(source.instanceId || '', "yyyy-MM-dd HH:mm'Z'");
+  return `${displayName} ${displayInstance}`;
+};
+const SoundingsLegend = ({
+  sourceSelections
+}) => {
+  return jsx(Stack, {
+    useFlexGap: true,
+    spacing: 1,
+    direction: "row",
+    justifyContent: "center",
+    sx: {
+      flexWrap: 'wrap',
+      paddingLeft: 2,
+      paddingTop: 0.5
+    },
+    children: sourceSelections.map((source, index) => {
+      const title = getLegendTitle(source);
+      return jsx(Tooltip, {
+        title: title,
+        children: jsxs(Typography, {
+          variant: "caption",
+          sx: {
+            color: 'geowebColors.typographyAndIcons.text',
+            fontSize: '10px'
+          },
+          children: [jsx(Box, {
+            sx: {
+              width: '16px',
+              height: '8px',
+              backgroundColor: SOUNDING_COLORS[index],
+              display: 'inline-block',
+              marginRight: '4px'
+            }
+          }), title]
+        })
+      }, `${source.collectionId}-${source.instanceId}`);
+    })
+  });
+};
+
 const size = 600;
 const SoundingsConnect = ({
   viewId,
@@ -2619,6 +2674,17 @@ const SoundingsConnect = ({
         })
       }), jsxs(Card, {
         children: [jsx(Box, {
+          sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            paddingTop: '2px',
+            paddingRight: '2px',
+            width: size
+          },
+          children: jsx(SoundingsLegend, {
+            sourceSelections: sourceSelections
+          })
+        }), jsx(Box, {
           sx: {
             display: 'flex',
             justifyContent: 'flex-end',
@@ -2683,10 +2749,6 @@ const SoundingsSourceMenu = ({
   const {
     t
   } = useSoundingsTranslation();
-  const getDisplayValue = instanceId => {
-    const instanceAsDate = dateUtils.isoStringToDate(instanceId);
-    return instanceAsDate ? dateUtils.dateToIsoString(instanceAsDate) : instanceId;
-  };
   return jsxs(ToolContainerDraggable, {
     startSize: {
       width: 320
@@ -2829,7 +2891,10 @@ const SoundingsSourceDialogConnect = ({
         value: {
           url: collection.url,
           isChecked: sourceSelections[collection.id]?.isChecked || false,
-          parameterMappings: collection.parameterMappings
+          parameterMappings: collection.parameterMappings,
+          ...(collection.name && collection.name !== '' ? {
+            name: collection.name
+          } : {})
         }
       }));
     });

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 import { MenuOptions } from './MenuBar';
 interface Props {
     menu?: MenuOptions;
@@ -9,7 +9,7 @@ interface Props {
 declare const SoundingsMenuBarStory: ({ menu, isDefaultOpen, selectedSourcesAmount, }: Props) => React.ReactElement;
 declare const _default: {
     title: string;
-    component: ({ menu, isDefaultOpen, selectedSourcesAmount, }: Props) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    component: ({ menu, isDefaultOpen, selectedSourcesAmount, }: Props) => React.ReactElement;
 };
 export default _default;
 type Story = StoryObj<typeof SoundingsMenuBarStory>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Store } from '@reduxjs/toolkit';
 interface SoundingsTranslationsWrapperProps {
     children: React.ReactNode;

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Soundings } from './Soundings';
 declare const meta: Meta<typeof Soundings>;
 export default meta;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SourceType } from '../../store/types';
+export declare const getLegendTitle: (source: SourceType) => string;
+interface SoundingsLegendProps {
+    sourceSelections: SourceType[];
+}
+export declare const SoundingsLegend: ({ sourceSelections, }: SoundingsLegendProps) => React.ReactElement;
+export {};

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as d3 from 'd3';
 import { i18n, TFunction } from 'i18next';
 import { SoundingDiagramType } from '../../api/edr-api/types';
@@ -17,10 +16,6 @@ interface InitializeSvg {
     margin: Margin;
     diagramType: SoundingDiagramType;
 }
-interface AddLegends {
-    width: number;
-    svg: d3.Selection<SVGElement, unknown, HTMLElement, undefined>;
-}
 interface DrawAxis {
     svg: d3.Selection<SVGElement, unknown, HTMLElement, undefined>;
     xScale: ScalesType;
@@ -39,11 +34,10 @@ interface PlotSounding {
     svg: d3.Selection<SVGElement, unknown, HTMLElement, undefined>;
     diagramType: SoundingDiagramType;
 }
-export declare const getDiagramName: (t: TFunction<'soundings', i18n>, diagramType: SoundingDiagramType) => string;
+export declare const getDiagramName: (t: TFunction<"soundings", i18n>, diagramType: SoundingDiagramType) => string;
 export declare const initializeSvg: ({ svgRef, width, height, margin, diagramType, }: InitializeSvg) => d3.Selection<SVGGElement, unknown, null, undefined>;
 export declare const createScales: (diagramType: SoundingDiagramType, width: number, height: number, minPressure: number, maxPressure: number, minTemperature: number, maxTemperature: number) => [ScalesType, ScalesType];
 export declare const drawAxes: ({ svg, xScale, yScale, height, diagramType, }: DrawAxis) => void;
-export declare const addLegends: ({ svg, width }: AddLegends) => void;
 export declare const mapToPlot: (diagramType: SoundingDiagramType, filteredPressureValues: number[], filteredTemperatureValues: number[], xScale: ScalesType, yScale: ScalesType, height: number) => [number, number][];
 export declare const plotSounding: ({ temperatureValues, pressureValues, color, lineStyle, xScale, yScale, height, svg, diagramType, }: PlotSounding) => void;
 export declare const filterDomainRangeForParameter: (pressureDomain: number[], parameterDomain: number[]) => [number[], number[]];

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

@@ -0,0 +1 @@
+export declare const getDisplayValue: (instanceId: string, stringFormat?: string) => string;

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

@@ -2,14 +2,14 @@ import { Store } from '@reduxjs/toolkit';
 import { UIModuleState, WebMapStateModuleState } from '@opengeoweb/store';
 import { SoundingsModuleState } from './types';
 export declare const soundingsReducersMap: {
-    webmap: import("redux").Reducer<import("dist/libs/store/src/store/map/types").WebMapState, import("redux").UnknownAction, import("dist/libs/store/src/store/map/types").WebMapState>;
-    services: import("redux").Reducer<import("dist/libs/store/src/store/map/types").ServiceState, import("redux").UnknownAction, import("dist/libs/store/src/store/map/types").ServiceState>;
-    layers: import("redux").Reducer<import("dist/libs/store/src/store/map/types").LayerState, import("redux").UnknownAction, import("dist/libs/store/src/store/map/types").LayerState>;
-    syncGroups: import("redux").Reducer<import("dist/libs/store/src/store/generic/syncGroups/types").SynchronizationGroupState, import("redux").UnknownAction, import("dist/libs/store/src/store/generic/syncGroups/types").SynchronizationGroupState>;
-    loadingIndicator: import("redux").Reducer<import("@reduxjs/toolkit").EntityState<import("dist/libs/store/src/store/generic/loadingIndicator/types").LoadingIndicatorType, string>, import("redux").UnknownAction, import("@reduxjs/toolkit").EntityState<import("dist/libs/store/src/store/generic/loadingIndicator/types").LoadingIndicatorType, string>>;
-    ui: import("redux").Reducer<import("dist/libs/store/src/store/ui/types").UIStoreType, import("redux").UnknownAction, import("dist/libs/store/src/store/ui/types").UIStoreType>;
-    drawingtools: import("redux").Reducer<import("dist/libs/store/src/store/drawingTool/reducer").DrawingToolState, import("redux").UnknownAction, import("dist/libs/store/src/store/drawingTool/reducer").DrawingToolState>;
-    router: import("redux").Reducer<{}, import("redux").UnknownAction, {}>;
+    webmap: import("redux").Reducer<import("dist/libs/store/src/store/map/types").WebMapState>;
+    services: import("redux").Reducer<import("dist/libs/store/src/store/map/types").ServiceState>;
+    layers: import("redux").Reducer<import("dist/libs/store/src/store/map/types").LayerState>;
+    syncGroups: import("redux").Reducer<import("dist/libs/store/src/store/generic/syncGroups/types").SynchronizationGroupState>;
+    loadingIndicator: import("redux").Reducer<import("@reduxjs/toolkit").EntityState<import("dist/libs/store/src/store/generic/loadingIndicator/types").LoadingIndicatorType, string>>;
+    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<{}>;
     soundings: import("redux").Reducer<import("./types").SoundingsStore>;
 };
 export declare const createMockStore: (mockState?: SoundingsModuleState | WebMapStateModuleState | UIModuleState) => Store;

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

@@ -4,6 +4,7 @@ export interface SourceType {
     instanceId?: string;
     verticalRange?: string;
     parameterMappings?: Record<string, string>;
+    name?: string;
 }
 export interface UpdateSourcePayload {
     sourceId: string;
@@ -15,6 +16,7 @@ export interface SourceSelection {
     isChecked?: boolean;
     verticalRange?: string;
     parameterMappings?: Record<string, string>;
+    name?: string;
 }
 export interface UpdateLocationPayload {
     sourceId: string;