@opengeoweb/soundings 12.12.0 → 13.0.0

package/index.esm.js

@@ -3,17 +3,18 @@ import React, { useRef, useEffect, useMemo, useState, Fragment as Fragment$1 } f
 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 { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, dateUtils, CustomSlider, CustomToggleButton, AlertBanner, ToolContainerDraggable, StyledSelect, SearchField, CustomAccordion } from '@opengeoweb/shared';
+import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, genericActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
+import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, webmapUtils } from '@opengeoweb/webmap';
+import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import * as d3 from 'd3';
 import { useQueries } from '@tanstack/react-query';
 import { getHeaders, handleResponse } from '@opengeoweb/api';
-import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval } from '@opengeoweb/webmap';
 import { range, minBy } from 'lodash';
-import { timesliderTranslations, TIMESLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/timeslider';
+import { timesliderTranslations, TIME_SLIDER_NAMESPACE, BackwardForwardStepButton } from '@opengeoweb/time-slider';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { createSlice, createSelector, combineReducers, configureStore } from '@reduxjs/toolkit';
-import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
 import { Sources } from '@opengeoweb/theme';
 import { FixedSizeList } from 'react-window';
 
@@ -89,11 +90,12 @@ var soundingsTranslations = {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-// Define pressure and temperature values for static lines
+// Define pressure [hPa] and temperature [°C] values for static lines
 const maxPressure = 1050;
 const minPressure = 150;
 const staticPressureArray = [maxPressure];
 const dp = -5;
+const minEmagramTemperature = -80;
 const minTemperature = -40;
 const maxTemperature = 40.6;
 let pressure = maxPressure;
@@ -298,17 +300,64 @@ const drawAxes = ({
   if (diagramType !== 'BIJVOET') {
     // Create x-axis with intervals
     const xTicks = xScale.ticks(10);
-    const xMiddleValue = xTicks[Math.floor(xTicks.length / 2)];
+    const xNegativeDisplacement = () => {
+      if (diagramType === 'SKEWT') {
+        return '-0.25em';
+      }
+      if (diagramType === 'EMAGRAM') {
+        return '-.5em';
+      }
+      return '0em';
+    };
+    const xPositiveDisplacement = () => {
+      if (diagramType === 'SKEWT') {
+        return '-0.2em';
+      }
+      if (diagramType === 'EMAGRAM') {
+        return '0.0em';
+      }
+      return '0em';
+    };
+    const xStringToSignedNumber = xString => {
+      const str = xString.replace(/[^\d.-]/g, '');
+      const xStringHasSomeLeadingCharacters = xString.length > str.length;
+      const xValue = xStringHasSomeLeadingCharacters ? -parseInt(str, 10) : parseInt(xString, 10);
+      return xValue;
+    };
     svg.append('g').attr('type', 'x-axis').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).tickValues(xTicks).tickSizeInner(0).tickSizeOuter(0));
-    // Reformat in the case of the middle tick label
+    // Reformat in the case of the zero tick label
     // to add the unit part
-    svg.selectAll('g[type="x-axis"] .tick').filter(function isMiddle() {
-      return parseInt(d3.select(this).select('text').text(), 10) === xMiddleValue;
+    svg.selectAll('g[type="x-axis"] .tick').filter(function isZero() {
+      const xString = d3.select(this).select('text').text();
+      const xValue = xStringToSignedNumber(xString);
+      return xValue === 0; // Always true for SkewT and Emagram as they have a 0°C crossing
     }).each(function txt() {
       const unitPart = '°C';
       d3.select(this).select('text')
       // tspan necessary to use a different font-size
-      .append('tspan').text(unitPart).attr('font-size', '11px').attr('dy', '0.04em');
+      .append('tspan').text(unitPart).attr('font-size', '11px').attr('dy', '0.04em').attr('dx', '0.0em');
+    });
+    svg.selectAll('g[type="x-axis"] .tick').filter(function isLessThanZero() {
+      const xString = d3.select(this).select('text').text();
+      const xValue = xStringToSignedNumber(xString);
+      return xValue < 0;
+    }).each(function txt() {
+      d3.select(this).select('text').attr('dx', xNegativeDisplacement());
+    });
+    svg.selectAll('g[type="x-axis"] .tick').filter(function isGreaterThanZero() {
+      const xString = d3.select(this).select('text').text();
+      const xValue = xStringToSignedNumber(xString);
+      return xValue > 0;
+    }).each(function txt() {
+      d3.select(this).select('text').attr('dx', xPositiveDisplacement());
+    });
+    const xMiddleValue = xTicks[xTicks.length - 1];
+    svg.selectAll('g[type="x-axis"] .tick').filter(function isLast() {
+      const xString = d3.select(this).select('text').text();
+      const xValue = xStringToSignedNumber(xString);
+      return xValue === xMiddleValue;
+    }).each(function txt() {
+      d3.select(this).select('text').attr('dx', xNegativeDisplacement());
     });
   }
   // Create y-axis with intervals
@@ -965,7 +1014,8 @@ const drawDryAdiabats = ({
   dp,
   diagramType
 }) => {
-  for (let Tbase = -40; Tbase < 240; Tbase += 10) {
+  const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
+  for (let Tbase = minT; Tbase < 240; Tbase += 10) {
     let Pnew = staticPressureArray[0];
     let Tnew = Tbase;
     const Px = [];
@@ -1453,8 +1503,10 @@ const Soundings = ({
       diagramType
     });
     const svgRectangle = svgRef.current.getBoundingClientRect();
+    const minT = diagramType === 'EMAGRAM' ? minEmagramTemperature : minTemperature;
+    const maxT = maxTemperature;
     // Set scales for temperature and pressure
-    const [xScale, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minTemperature, maxTemperature);
+    const [xScale, yScale] = createScales(diagramType, width, height, minPressure, maxPressure, minT, maxT);
     // Add axis'
     drawAxes({
       svg,
@@ -1468,8 +1520,8 @@ const Soundings = ({
       diagramType,
       dp,
       staticPressureArray,
-      minTemperature,
-      maxTemperature,
+      minTemperature: minT,
+      maxTemperature: maxT,
       height,
       width,
       xScale,
@@ -1656,6 +1708,9 @@ const getCollectionLocations = (collectionId, baseUrl) => fetch(`${baseUrl}/coll
 const getCollectionInstances = (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}/instances`, {
   headers: getHeaders()
 }).then(handleResponse);
+const getCollectionDetails = (collectionId, baseUrl) => fetch(`${baseUrl}/collections/${collectionId}`, {
+  headers: getHeaders()
+}).then(handleResponse);
 const getEdrCollectionForLocation = (collectionId, baseUrl, instanceId, locationId, parameters, datetime, verticalRange) => {
   const url = new URL(`${baseUrl}/collections/${collectionId}${instanceId ? `/instances/${instanceId}` : ''}/locations/${locationId}`);
   url.searchParams.append('parameter-name', parameters.join(','));
@@ -1872,12 +1927,19 @@ const parseDurationWithRepeats = dateString => {
   const numOfRepeats = Number(parts[0].substring(1));
   const start = new Date(parts[1]).getTime();
   const interval = parseISO8601IntervalToDateInterval(parts[2]).getTime();
+  // If number of values too big, it will mess up the timeslider, set to 1500 max
+  if (numOfRepeats >= 1500) {
+    const iterations = range(1500);
+    const newStart = start + interval * (numOfRepeats - 1499); // Move start so its 1500 steps from end
+    const dateStrings = iterations.map(i => newStart + i * interval).map(millis => new Date(millis).toISOString());
+    return dateStrings;
+  }
   const iterations = range(numOfRepeats);
   const dateStrings = iterations.map(i => start + i * interval).map(millis => new Date(millis).toISOString());
   return dateStrings;
 };
-const getTimestepsFromInstance = instance => {
-  const timeExtentValues = instance?.extent?.temporal?.values;
+const getTimestepsFromInstanceOrCollection = instanceOrCollection => {
+  const timeExtentValues = instanceOrCollection?.extent?.temporal?.values;
   if (!timeExtentValues) {
     return [];
   }
@@ -1890,7 +1952,10 @@ const getTimestepsFromInstance = instance => {
       }
       // <start>/<end>[/P<period>]
       if (currentValue.match(/.*\/.*P?.*/)) {
-        const parseObject = new ParseISOTimeRangeDuration(currentValue);
+        const parts = currentValue.split('/');
+        // In case no period defined, set to default 1H
+        const defaultInterval = parts[2] === undefined ? 'PT1H' : undefined;
+        const parseObject = new ParseISOTimeRangeDuration(currentValue, defaultInterval);
         const timeValues = range(parseObject.getTimeSteps()).map(timestep => parseObject.getDateAtTimeStep(timestep).toISOString());
         return [...parsedSteps, ...timeValues];
       }
@@ -2033,12 +2098,21 @@ const useTimesteps = sourceSelections => {
   }) => ({
     queryKey: ['edr-soundings-instances', collectionId],
     queryFn: async () => {
-      const data = await getCollectionInstances(collectionId, url);
+      // If instance id passed, use this to fetch time extent
+      if (instanceId && instanceId !== '') {
+        const data = await getCollectionInstances(collectionId, url);
+        return data;
+      }
+      // Otherwise, use collection details
+      const data = await getCollectionDetails(collectionId, url);
       return data;
     },
     select: data => {
-      const instance = data.instances.find(instance => instance.id === instanceId);
-      return getTimestepsFromInstance(instance);
+      if (data.instances !== undefined) {
+        const instance = data.instances.find(instance => instance.id === instanceId);
+        return getTimestepsFromInstanceOrCollection(instance);
+      }
+      return getTimestepsFromInstanceOrCollection(data);
     }
   })), [sourceSelections]);
   const results = useQueries({
@@ -2067,19 +2141,57 @@ const useGetCollectionsInstances = (collections, isDialogOpen) => {
       url: collection.url
     };
   }) || [], [collections]);
-  const queries = useMemo(() => collectionIds.map(({
+  // Fetch collection details
+  const queriesCollection = useMemo(() => collectionIds.map(({
     id,
     url
   }) => {
     return {
-      queryKey: ['edr-soundings-instances', id],
+      queryKey: ['edr-soundings-collection-details', id, url],
       queryFn: async () => {
-        const data = await getCollectionInstances(id, url);
+        const data = await getCollectionDetails(id, url);
         return data;
       },
       enabled: isDialogOpen
     };
   }), [collectionIds, isDialogOpen]);
+  const resultsCollection = useQueries({
+    queries: queriesCollection,
+    combine: queryResults => {
+      const data = queryResults.map(result => {
+        return result.data?.data_queries?.instances !== undefined;
+      });
+      const isPending = queryResults.some(result => result.isPending);
+      const error = queryResults.find(result => result?.error)?.error;
+      return {
+        data,
+        isPending,
+        error
+      };
+    }
+  });
+  // Fetch instance details for collections that have instances
+  const queries = useMemo(() => {
+    return collectionIds.map(({
+      id,
+      url
+    }, index) => {
+      return {
+        queryKey: ['edr-soundings-instances', id, resultsCollection.data],
+        queryFn: async () => {
+          // Only fetch if there are instances for this collection
+          if (resultsCollection.data[index]) {
+            const data = await getCollectionInstances(id, url);
+            return data;
+          }
+          return {
+            instances: []
+          };
+        },
+        enabled: isDialogOpen && resultsCollection.data !== undefined
+      };
+    });
+  }, [collectionIds, isDialogOpen, resultsCollection]);
   const results = useQueries({
     queries,
     combine: queryResults => {
@@ -2102,12 +2214,16 @@ const useGetCollectionsInstances = (collections, isDialogOpen) => {
       instances: results.data[index] || []
     };
   });
+  const errorResult = results.error || resultsCollection.error;
+  const isPendingResult = results.isPending || resultsCollection.isPending;
   return {
     ...results,
+    isPending: isPendingResult,
+    error: errorResult,
     data: dataWithCollectionInfo
   };
 };
-const useGetCollectionLocations = (collections, isDialogOpen) => {
+const useGetCollectionLocations = (collections, enabled) => {
   const edrQueries = useMemo(() => collections?.map(collection => ({
     queryKey: ['edr-locations', collection.id],
     queryFn: async () => {
@@ -2118,8 +2234,8 @@ const useGetCollectionLocations = (collections, isDialogOpen) => {
         name: collection.name
       };
     },
-    enabled: isDialogOpen
-  })), [collections, isDialogOpen]);
+    enabled
+  })), [collections, enabled]);
   return useQueries({
     queries: edrQueries,
     combine: results => {
@@ -2158,14 +2274,14 @@ const initSoundingsI18n = () => {
     ns: SOUNDINGS_NAMESPACE,
     translations: soundingsTranslations
   }, {
-    ns: TIMESLIDER_NAMESPACE,
+    ns: TIME_SLIDER_NAMESPACE,
     translations: timesliderTranslations
   }, {
     ns: SHARED_NAMESPACE,
     translations: sharedTranslations
   }]);
 };
-const ns = [SOUNDINGS_NAMESPACE, TIMESLIDER_NAMESPACE, SHARED_NAMESPACE];
+const ns = [SOUNDINGS_NAMESPACE, TIME_SLIDER_NAMESPACE, SHARED_NAMESPACE];
 const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, {
   ns,
   ...params
@@ -2643,9 +2759,50 @@ const SoundingsConnect = ({
   diagramType = 'SKEWT'
 }) => {
   const [chosenDiagramType, setChosenDiagramType] = React.useState(diagramType);
+  const geojsonLayerId = React.useRef(webmapUtils.generateLayerId()).current;
+  const dispatch = useDispatch();
   const selectedTime = useSelector(getSelectedTime);
   const sourceSelections = useSelector(getSelectedSources);
   const locationSelections = useSelector(getLocationSelections);
+  const collections = sourceSelections.map(({
+    collectionId,
+    url,
+    name
+  }) => ({
+    id: collectionId,
+    url,
+    name: name || collectionId
+  }));
+  const {
+    data: locationData
+  } = useGetCollectionLocations(collections, true);
+  useEffect(() => {
+    const simpleGeoJson = {
+      type: 'FeatureCollection',
+      features: (locationData || []).flatMap(({
+        id: serviceId,
+        features
+      }) => features.map(feature => ({
+        type: 'Feature',
+        geometry: feature.geometry,
+        properties: {
+          ...feature.properties,
+          mapFeatureClass: MapFeatureClass.ObservationStation
+        },
+        id: feature.id,
+        serviceId // TODO: remove in follow-up if not needed https://gitlab.com/opengeoweb/opengeoweb/-/issues/6312
+      })))
+    };
+    dispatch(genericActions.addSharedData({
+      panelId: viewId,
+      data: {
+        features: [{
+          id: geojsonLayerId,
+          geoJSON: simpleGeoJson
+        }]
+      }
+    }));
+  }, [collections, dispatch, geojsonLayerId, locationData, sourceSelections, viewId]);
   const {
     error,
     data,

package/package.json

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

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

@@ -1,6 +1,7 @@
 import { CoverageCollection } from '@opengeoweb/shared';
-import { LocationsResponseFromBE, SoundingsInstances } from './types';
+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>;

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

@@ -1 +1,16 @@
+export declare const helsinkiLat = 60.192059;
+export declare const helsinkiLon = 24.945831;
+export declare const helsinki = "Helsinki";
+export declare const mockLocations: {
+    features: {
+        id: string;
+        geometry: {
+            type: string;
+            coordinates: number[];
+        };
+        properties: {
+            name: string;
+        };
+    }[];
+};
 export declare const fmiEdrCollectionsHandlers: import("msw").HttpHandler[];

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

@@ -33,7 +33,11 @@ export declare const useGetCollectionsInstances: (collections?: SoundingsCollect
     isPending: boolean;
     error: Error | null | undefined;
 };
-export declare const useGetCollectionLocations: (collections: SoundingsCollection[], isDialogOpen?: boolean) => {
+export declare const useGetCollectionLocations: <SoundingsCollectionLike extends {
+    id: string;
+    url: string;
+    name: string;
+}>(collections: SoundingsCollectionLike[], enabled?: boolean) => {
     data: ServiceWithLocations[] | undefined;
     isPending: boolean;
     error: Error | null | undefined;

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

@@ -1,5 +1,5 @@
 import { Geometry } from 'geojson';
-import { EDRInstance } from '@opengeoweb/shared';
+import { EDRInstance, EdrParameter } from '@opengeoweb/shared';
 export interface FeaturesFromBE {
     id: string;
     type: string;
@@ -31,5 +31,8 @@ export type SoundingsInstance = EDRInstance;
 export interface SoundingsInstances {
     instances: SoundingsInstance[];
 }
+export interface CollectionDetails extends EDRInstance {
+    parameter_names: Record<string, EdrParameter>;
+}
 export declare const soundingDiagrams: readonly ["SKEWT", "BIJVOET", "EMAGRAM"];
 export type SoundingDiagramType = (typeof soundingDiagrams)[number];

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

@@ -1,5 +1,5 @@
 import { CoverageCollection } from '@opengeoweb/shared';
-import { SoundingFeature, SoundingsInstance } from './types';
+import { CollectionDetails, SoundingFeature, SoundingsInstance } from './types';
 export declare function parseCoverageCollection(response: CoverageCollection, parameterMappings: Record<string, string>): SoundingFeature[];
 /**
  * Parse duration with repeats
@@ -7,4 +7,4 @@ export declare function parseCoverageCollection(response: CoverageCollection, pa
  * @returns Array of ISO datetime strings, e.g., ['2025-04-22T09:00:00.000Z', ...]
  */
 export declare const parseDurationWithRepeats: (dateString: string) => string[];
-export declare const getTimestepsFromInstance: (instance?: SoundingsInstance) => string[];
+export declare const getTimestepsFromInstanceOrCollection: (instanceOrCollection?: SoundingsInstance | CollectionDetails) => string[];

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

@@ -2,6 +2,7 @@ export declare const maxPressure = 1050;
 export declare const minPressure = 150;
 export declare const staticPressureArray: number[];
 export declare const dp = -5;
+export declare const minEmagramTemperature = -80;
 export declare const minTemperature = -40;
 export declare const maxTemperature = 40.6;
 export declare const T_KAPPA = 0.2857;