@opengeoweb/webmap-react 12.10.0 → 12.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "12.10.0",
+  "version": "12.11.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "12.10.0",
-    "@opengeoweb/theme": "12.10.0",
-    "@opengeoweb/shared": "12.10.0",
+    "@opengeoweb/webmap": "12.11.0",
+    "@opengeoweb/theme": "12.11.0",
+    "@opengeoweb/shared": "12.11.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",
@@ -27,6 +27,9 @@
     "@emotion/react": "*",
     "@emotion/styled": "*"
   },
+  "devDependencies": {
+    "eslint-plugin-storybook": "9.0.17"
+  },
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",

package/src/lib/components/LayerInfo/LayerInfoDialog.stories.d.ts

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

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

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

package/src/lib/components/MapDimensionSelect/DimensionSelectDialog.stories.d.ts

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 import MapDimensionSelect from './MapDimensionSelect';
 declare const _default: {
     title: string;

package/src/lib/components/MapDraw/storyComponents/storyUtils.d.ts

@@ -1,4 +1,3 @@
-import { FeatureCollection } from 'geojson';
 export declare const drawPolyStoryStyles: {
     MapDrawGeoJSONContainer: {
         display: string;

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

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

package/src/lib/components/MapDrawTool/MapDrawToolMultipleDrawTools.stories.d.ts

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

package/src/lib/components/MapDrawTool/storyExamplesMapDrawToolMultipleDrawTools.d.ts

@@ -4,7 +4,7 @@ import { MapDrawToolOptions } from './useMapDrawTool';
 export declare const firSelectionType = "fir";
 export declare const exampleIntersectionsMultiDrawTool: {
     title: string;
-    geojson: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
+    geojson: GeoJSON.FeatureCollection;
 }[];
 export declare const getDoubleControlToolIcon: (drawMode: DrawMode) => React.ReactElement;
 export declare const getFirTitle: (isNL: boolean) => string;

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

@@ -1,4 +1,4 @@
-import { Feature, FeatureCollection, GeoJsonProperties, Point } from 'geojson';
+import { FeatureCollection, GeoJsonProperties, Point } from 'geojson';
 import { Bbox } from '@opengeoweb/webmap';
 import { DrawMode, SelectionType } from './types';
 /**
@@ -55,7 +55,7 @@ export declare const intersectPolygonGeoJSONS: (intersectA: GeoJSON.FeatureColle
     fill: string;
     'fill-opacity': number;
 }) => GeoJSON.FeatureCollection;
-export declare const isPointFeatureCollection: (geojson: GeoJSON.FeatureCollection) => geojson is FeatureCollection<Point, GeoJsonProperties>;
+export declare const isPointFeatureCollection: (geojson: GeoJSON.FeatureCollection) => geojson is GeoJSON.FeatureCollection<Point>;
 /**
  * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
  * @param geoJSONs

package/src/lib/components/OpenLayers/OpenLayers.BaseLayer.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.Error.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.MapPin.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.Passive.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.RadarAnimation.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.RadarData.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.SetProjectionBBox.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.SetProjectionBBoxLocalState.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.ShiftToZoom.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.ShowLayerInfo.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.TiledBaseLayers.stories.d.ts

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

package/src/lib/components/OpenLayers/OpenLayersMapView.VFXData.stories.d.ts

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

package/src/lib/components/OpenLayers/context/MapContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Map } from 'ol';
 export interface MapContextType {
     map: Map | null;

package/src/lib/components/OpenLayers/context/TimeContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TimeContextType } from '../types/Timespan';
 export type ChangeRelevantTimestepsFn = (layerId: string, dimensionValues: string[]) => void;
 export type ResetPrefetchFn = (layerId: string) => void;

package/src/lib/components/OpenLayers/controls/OpenLayersGetFeatureInfo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MapLocation } from '../../../types/types';
 export interface OpenLayersGetFeatureInfoProps {
     displayMapPin?: boolean;

package/src/lib/components/OpenLayers/controls/OpenLayersZoomControl.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Extent } from 'ol/extent';
 interface OpenLayersZoomControlProps {
     homeExtent?: Extent;

package/src/lib/components/OpenLayers/draw/OpenLayersMapDraw.stories.d.ts

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

package/src/lib/components/OpenLayers/layers/FeatureLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Feature } from 'ol';
 import { StyleLike } from 'ol/style/Style';
 import { ClickOnFeature, HoverSelect } from '../utils/types';

package/src/lib/components/OpenLayers/layers/OpenLayersFeatureLayer.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { StyleLike } from 'ol/style/Style';
 import { FeatureCollection } from 'geojson';
 import { ClickOnFeature, HoverSelect } from '../utils/types';
 export interface OpenLayersFeatureLayerProps {
     featureCollection?: FeatureCollection;
-    style: StyleLike;
+    style?: StyleLike;
     zIndex?: number;
     hoverSelect?: HoverSelect;
     clickOnFeature?: ClickOnFeature;

package/src/lib/components/OpenLayers/layers/TiledWMSLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ImageLayer from 'ol/layer/Image';
 import { LayerFoundation } from '@opengeoweb/webmap';
 export interface TiledWMSLayerProps {

package/src/lib/components/OpenLayers/layers/TimeAwareEDRLocationLayer.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
+import { Dimension } from '@opengeoweb/webmap';
 import { OpenLayersFeatureLayerProps } from './OpenLayersFeatureLayer';
+import { OnInitializeLayerProps } from '../utils/types';
 interface TimeAwareEDRLocationLayerProps extends OpenLayersFeatureLayerProps {
-    currentTime: string | undefined;
-    timestep: number;
+    layerId?: string;
     edrBaseUrl: string;
-    collectionId: string;
     parameter: string;
+    dimensions?: Dimension[];
+    onInitializeLayer?: (payload: OnInitializeLayerProps) => void;
+    opacity?: number;
 }
 export declare const TimeAwareEDRLocationLayer: React.FC<TimeAwareEDRLocationLayerProps>;
 export {};

package/src/lib/components/OpenLayers/layers/TimeawareImageSourceWMSLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ImageLayer from 'ol/layer/Image';
 import { Dimension } from '@opengeoweb/webmap';
 import type { OnInitializeLayerProps } from '../utils/types';

package/src/lib/components/OpenLayers/layers/WMSLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import ImageLayer from 'ol/layer/Image';
 import { LayerFoundation } from '@opengeoweb/webmap';
 export interface WMSLayerProps {

package/src/lib/components/OpenLayers/layers/WMTSLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TileLayer from 'ol/layer/Tile';
 import { LayerFoundation } from '@opengeoweb/webmap';
 export interface WMTSLayerProps {

package/src/lib/components/OpenLayers/layers/XYZLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TileLayer from 'ol/layer/Tile';
 import { LayerFoundation } from '@opengeoweb/webmap';
 export interface XYZLayerProps {

package/src/lib/components/OpenLayers/tools/ClickOnMapTool.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyleLike } from 'ol/style/Style';
 export interface ClickOnMapToolProps {
     isActive: boolean;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WMLayer } from '@opengeoweb/webmap';
 import ImageLayer from 'ol/layer/Image';
 import { TimeawareImageSource } from './TimeawareImageSource';

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

@@ -1,6 +1,8 @@
 export declare const MAX_NUMBER_TO_PREFETCH = 200;
 export declare const MAX_NUMBER_STEPS_IN_TIMESLIDER_TO_PREFETCH = 10000;
 export declare const NUMBER_PREFETCH_WORKERS = 4;
+export declare const ENABLE_PREFETCH = true;
+export declare const ADD_SHOW_DIMS_OPTION = false;
 export declare const NUM_IMAGES_TO_CACHE = 10000;
 export declare const WMS_EXTENT_RATIO_TO_VIEWPORT = 1.2;
 export declare const TIMEAWAREIMAGEWRAPPER_IMAGEDIDNOTLOADSUCCESFULLY = "Image did not load succesfully";

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

@@ -1,7 +1,15 @@
 import { WMJSDimension, Dimension, WMLayer } from '@opengeoweb/webmap';
 import { Timespan } from '../types/Timespan';
 export declare const makeDimValuesToPrefetch: (wmTimeDim: WMJSDimension, stepsToCheck: number[], isAnimating: boolean) => string[];
-export declare const getDimensionParamsForWMS: (dimensions: Dimension[] | undefined, wmLayer: WMLayer | null) => Record<string, string>;
+/**
+ * We use the WMLayer dimension logic to obtain the dimension value to use in the WMS GetMap request. The input is the dimensions array which is typically the properties set for the layer component.
+ * The input time is descretized to the closest value which is available in the WMS layer.
+ *
+ * @param dimensions Array of dimension key/values to use as input
+ * @param wmLayer The layer for which we would like to do the request
+ * @returns A map which returns a key/value to use
+ */
+export declare const getDimensionParamsForWMS: (dimensions: Dimension[] | undefined, wmLayer: WMLayer | null) => Record<string, string> | undefined;
 /**
  * Calculates number of timesteps for given timespan
  * @param timespan Object of Timespan, with start/stop/end in milliseconds

package/src/lib/components/TanStackDemo/EDRLayerApi.stories.d.ts

@@ -7,11 +7,11 @@ export declare const EdrLayerAPICollection: {
     (): React.ReactElement;
     storyName: string;
 };
-export declare const EdrLayerAPILocations: {
+export declare const EdrLayerAPICubeOnObs: {
     (): React.ReactElement;
     storyName: string;
 };
-export declare const EdrLayerAPICubeOnObs: {
+export declare const EdrLayerAPIGetParameters: {
     (): React.ReactElement;
     storyName: string;
 };

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

@@ -0,0 +1,4 @@
+import { CoverageCollection, EDRInstance } from '@opengeoweb/shared';
+export declare const joinUrlParams: (params: string[]) => string;
+export declare const fetchEDRLayerCollection: (edrBaseUrlWithCollection: string, instanceId?: string) => Promise<EDRInstance>;
+export declare const fetchEDRLayerCollectionCube: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string, bbox?: string) => Promise<CoverageCollection>;

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

@@ -1,5 +1,8 @@
-import { ColorMap } from './edrOlLegendUtils';
-export declare const wowTemperatureLegendColors: ColorMap;
+export type ColorMap = string[];
+export declare const temperatureLegendColorsWoW: ColorMap;
+export declare const precipitationMMLegendColorsWoW: ColorMap;
+export declare const temperatureLegendColorsCWK: ColorMap;
 export declare const colorMaps: {
-    wowTemperatureLegendColors: ColorMap;
+    temperatureLegendColorsWoW: ColorMap;
+    temperatureLegendColorsCWK: ColorMap;
 };

package/src/lib/edr-layer-api/colormaps/edrOlLegendUtils.d.ts

@@ -1,6 +1,6 @@
 import { FeatureLike } from 'ol/Feature';
 import { Circle, Style } from 'ol/style';
-export type ColorMap = string[];
+import { ColorMap } from './colormaps';
 export interface EdrMapLegendEntry {
     min: number;
     max: number;
@@ -18,3 +18,4 @@ export declare const makeLegendFromColorMap: (props: {
 export declare const getLegendClass: (edrColorLegend: EdrOlColorLegend, value: number, clip?: boolean) => EdrMapLegendEntry | undefined;
 export declare const makeFeatureStyleDisc: (feature: FeatureLike, legend: EdrOlColorLegend) => Style;
 export declare const makeFeatureStyleLoading: (feature: FeatureLike) => Style;
+export declare const styleNameToStyleLike: ((styleName: string) => ((feature: FeatureLike) => Style)) & import("lodash").MemoizedFunction;

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

@@ -1,6 +1,7 @@
-import { EDRInstance, CoverageCollection } from '@opengeoweb/shared';
+import { EDRInstance, CoverageCollection, EdrParameters } from '@opengeoweb/shared';
 import { UseQueryResult } from '@tanstack/react-query';
-import { FeatureCollection } from 'geojson';
-export declare const useEDRCollection: (edrBaseUrl: string, collectionId: string, instanceId?: string) => UseQueryResult<EDRInstance, Error>;
-export declare const useEDRCollectionLocation: (edrBaseUrl: string, collectionId: string, instanceId?: string) => UseQueryResult<FeatureCollection, Error>;
-export declare const useEDRCollectionCube: (edrBaseUrl: string, collectionId: string, parameterName: string, datetime?: string, instanceId?: string, bbox?: string) => UseQueryResult<CoverageCollection, Error>;
+export interface EdrLayerInstance extends EDRInstance {
+    parameter_names?: EdrParameters;
+}
+export declare const useEDRLayerCollection: (edrBaseUrlWithCollection: string, instanceId?: string) => UseQueryResult<EdrLayerInstance, Error>;
+export declare const useEDRLayerCollectionCube: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string, bbox?: string) => UseQueryResult<CoverageCollection, Error>;

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

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

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

@@ -1,3 +1,4 @@
 export * from './hooks';
 export * from './colormaps';
+export { useGetEDRLayerInstance } from './utils/useGetEDRLayerInstance';
 export { fakeEdrLayerApiHandlers } from './fakeApi';

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

@@ -0,0 +1,11 @@
+import { WMLayer } from '@opengeoweb/webmap';
+import { OnInitializeLayerProps } from '../../components/OpenLayers/utils/types';
+/**
+ * Returns WMLayer instance in EDR mode. The layer will contains parsed dimensions and styles and keeps a state for these properties.
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(WMLayer | null)}
+ */
+export declare const useGetEDRWMLayerInstance: (serviceUrl: string, name: string, id?: string, onLayerError?: (layerId: string, message: string) => void) => WMLayer | null;
+export declare const useGetEDRLayerInstance: (edrBaseUrl: string, parameter: string, layerId?: string, onInitializeLayer?: (payload: OnInitializeLayerProps) => void) => WMLayer | null;

package/src/lib/edr-layer-api/utils/useGetEDRLayerInstance.spec.d.ts

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

package/src/lib/hooks/useHooksGetCapabilities.d.ts

@@ -55,6 +55,6 @@ export declare const useGetWMLayerInstance: (serviceUrl: string, name: string, i
 /**
  * Used for querying WMTS GetCapabilities documents
  * @param serviceUrl
- * @returns {UseQueryResult<string>}
+ * @returns
  */
 export declare const useQueryWMTSGetCapabilities: (serviceUrl: string) => UseQueryResult<string>;

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

@@ -3,5 +3,5 @@ import { UseTranslationResponse } from 'react-i18next';
 export declare const WEBMAP_REACT_NAMESPACE = "webmapreact";
 export declare const initWebmapReactTestI18n: () => void;
 export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined, ns?: string) => string;
-export declare const useWebmapReactTranslation: (ns?: Namespace) => UseTranslationResponse<Namespace, import("i18next").i18n>;
+export declare const useWebmapReactTranslation: (ns?: Namespace) => UseTranslationResponse<typeof ns, typeof i18n>;
 export { i18n };