@eodash/eodash 5.0.0-alpha.2.14 → 5.0.0-alpha.2.16

package/core/client/utils/createLayers.js

@@ -1,5 +1,5 @@
 import { registerProjection } from "@/store/Actions";
-import { extractRoles } from "./helpers";
+import { extractRoles, getProjectionCode } from "./helpers";
 
 /**
  * @param {string} id
@@ -7,6 +7,7 @@ import { extractRoles } from "./helpers";
  * @param {Record<string,import("stac-ts").StacAsset>} assets
  * @param {import("ol/layer/WebGLTile").Style} [style]
  * @param {Record<string, unknown>} [layerConfig]
+ * @param {Record<string, unknown>} [layerDatetime]
  **/
 export async function createLayersFromDataAssets(
   id,
@@ -14,14 +15,17 @@ export async function createLayersFromDataAssets(
   assets,
   style,
   layerConfig,
+  layerDatetime,
 ) {
   let jsonArray = [];
   let geoTIFFSources = [];
   for (const ast in assets) {
     // register projection if exists
-    await registerProjection(
-      /** @type {number | undefined} */ (assets[ast]?.["proj:epsg"]),
-    );
+    const assetProjection =
+      /** @type {string | number | {name: string, def: string, extent?:number[]} | undefined} */ (
+        assets[ast]?.["proj:epsg"] || assets[ast]?.["eodash:proj4_def"]
+      );
+    await registerProjection(assetProjection);
 
     if (assets[ast]?.type === "application/geo+json") {
       const layer = {
@@ -34,6 +38,7 @@ export async function createLayersFromDataAssets(
         properties: {
           id,
           title,
+          layerDatetime,
           ...(layerConfig && {
             layerConfig: {
               ...layerConfig,
@@ -41,9 +46,13 @@ export async function createLayersFromDataAssets(
             },
           }),
         },
-        ...(!style?.variables && {style}),
+        ...(!style?.variables && { style }),
       };
-      extractRoles(layer.properties, assets[ast]?.roles ?? []);
+      extractRoles(
+        layer.properties,
+        assets[ast]?.roles ?? [],
+        /** @type {string} */ (assets[ast].id || assets[ast].title || ""),
+      );
       jsonArray.push(layer);
     } else if (assets[ast]?.type === "image/tiff") {
       geoTIFFSources.push({ url: assets[ast].href });
@@ -62,6 +71,7 @@ export async function createLayersFromDataAssets(
         id,
         title,
         layerConfig,
+        layerDatetime,
       },
       style,
     });
@@ -74,59 +84,156 @@ export async function createLayersFromDataAssets(
  * @param {import('stac-ts').StacItem} item
  * @param {string} id
  * @param {string} title
+ * @param {Record<string,any>} [layerDatetime]
  */
-export const createLayersFromLinks = (id, title, item) => {
+export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
   /** @type {Record<string,any>[]} */
   const jsonArray = [];
   const wmsArray = item.links.filter((l) => l.rel === "wms");
-  const xyzArray = item.links.filter((l) => l.rel === "xyz");
+  const wmtsArray = item.links.filter((l) => l.rel === "wmts");
+  const xyzArray = item.links.filter((l) => l.rel === "xyz") ?? [];
+
+  for (const wmsLink of wmsArray ?? []) {
+    // Registering setting sub wms link projection
+
+    const wmsLinkProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (wmsLink?.["proj:epsg"] || wmsLink?.["eodash:proj4_def"]);
+
+    await registerProjection(wmsLinkProjection);
+    const projectionCode = getProjectionCode(wmsLinkProjection || "EPSG:4326");
+    let json = {
+      type: "Tile",
+      properties: {
+        id,
+        title: wmsLink.title || title || item.id,
+        layerDatetime,
+      },
+      source: {
+        type: "TileWMS",
+        url: wmsLink.href,
+        projection: projectionCode,
+        params: {
+          LAYERS: wmsLink["wms:layers"],
+          TILED: true,
+        },
+      },
+    };
 
-  if (wmsArray.length) {
-    wmsArray.forEach((link) => {
-      let json = {
+    extractRoles(
+      json.properties,
+      /** @type {string[]} */ (wmsLink.roles),
+      /** @type {string} */ (wmsLink.id) ||
+        /** @type {string} */ (wmsLink.title) ||
+        "",
+    );
+
+    if ("wms:dimensions" in wmsLink) {
+      // Expand all dimensions into the params attribute
+      Object.assign(json.source.params, wmsLink["wms:dimensions"]);
+    }
+    jsonArray.push(json);
+  }
+
+  for (const wmtsLink of wmtsArray ?? []) {
+    // Registering setting sub wmts link projection
+
+    const wmtsLinkProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (wmtsLink?.["proj:epsg"] || wmtsLink?.["eodash:proj4_def"]);
+
+    await registerProjection(wmtsLinkProjection);
+    const projectionCode = getProjectionCode(wmtsLinkProjection || "EPSG:3857");
+    // TODO: WARNING! This is a temporary project specific implementation
+    // that needs to be removed once catalog and wmts creation from capabilities
+    // combined with custom view projections is solved
+    let json;
+    if (wmtsLink.title === "wmts capabilities") {
+      json = {
         type: "Tile",
         properties: {
-          id: id || link.id,
-          title: title || link.title || item.id,
+          id,
+          title: title || item.id,
+          layerDatetime,
         },
         source: {
-          type: "TileWMS",
-          url: link.href,
-          params: {
-            LAYERS: link["wms:layers"],
-            TILED: true,
+          type: "WMTS",
+          // TODO: Hard coding url as the current one set is for capabilities
+          url: "https://wmts.marine.copernicus.eu/teroWmts",
+          layer: wmtsLink["wmts:layer"],
+          style: wmtsLink.style || "default",
+          // TODO: Hard coding matrixSet until we find solution to wmts creation from capabilities
+          matrixSet: "EPSG:3857",
+          projection: projectionCode,
+          tileGrid: {
+            tileSize: [128, 128],
           },
+          dimensions: wmtsLink["wmts:dimensions"],
         },
       };
-
-      extractRoles(json.properties, /** @type {string[]} */ (link.roles));
-
-      if ("wms:dimensions" in link) {
-        // Expand all dimensions into the params attribute
-        Object.assign(json.source.params, link["wms:dimensions"]);
-      }
-      jsonArray.push(json);
-    });
-  }
-
-  if (xyzArray.length) {
-    xyzArray.forEach((link) => {
-      let json = {
+    } else {
+      json = {
         type: "Tile",
         properties: {
-          id: link.id || item.id,
-          title: title || link.title || item.id,
-          roles: link.roles,
+          id,
+          title: wmtsLink.title || title || item.id,
+          layerDatetime,
         },
         source: {
-          type: "XYZ",
-          url: link.href,
+          type: "WMTS",
+          url: wmtsLink,
+          layer: wmtsLink["wmts:layer"],
+          style: wmtsLink.style || "default",
+          matrixSet: wmtsLink.matrixSet || "EPSG:3857",
+          projection: projectionCode,
+          tileGrid: {
+            tileSize: [128, 128],
+          },
+          dimensions: wmtsLink["wmts:dimensions"],
         },
       };
+    }
 
-      extractRoles(json.properties, /** @type {string[]} */ (link.roles));
-      jsonArray.push(json);
-    });
+    extractRoles(
+      json.properties,
+      /** @type {string[]} */ (wmtsLink.roles),
+      /** @type {string} */ (wmtsLink.id) ||
+        /** @type {string} */ (wmtsLink.title) ||
+        "",
+    );
+
+    jsonArray.push(json);
+  }
+
+  for (const xyzLink of xyzArray ?? []) {
+    const xyzLinkProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (xyzLink?.["proj:epsg"] || xyzLink?.["eodash:proj4_def"]);
+
+    await registerProjection(xyzLinkProjection);
+
+    const projectionCode = getProjectionCode(xyzLinkProjection || "EPSG:3857");
+    let json = {
+      type: "Tile",
+      properties: {
+        id,
+        title: xyzLink.title || title || item.id,
+        roles: xyzLink.roles,
+        layerDatetime,
+      },
+      source: {
+        type: "XYZ",
+        url: xyzLink.href,
+        projection: projectionCode,
+      },
+    };
+
+    extractRoles(
+      json.properties,
+      /** @type {string[]} */ (xyzLink.roles),
+      /** @type {string} */ (xyzLink.id || xyzLink.title || ""),
+    );
+    jsonArray.push(json);
   }
   return jsonArray;
 };

package/core/client/utils/eodashSTAC.js

@@ -1,13 +1,16 @@
 import { Collection, Item } from "stac-js";
 import { toAbsolute } from "stac-js/src/http.js";
 import {
+  createLayerID,
   extractLayerConfig,
+  extractLayerDatetime,
   extractRoles,
   fetchStyle,
+  findLayer,
   generateFeatures,
-  setMapProjFromCol,
+  replaceLayer,
 } from "./helpers";
-import { registerProjection } from "@/store/Actions";
+import { getLayers, registerProjection } from "@/store/Actions";
 import {
   createLayersFromDataAssets,
   createLayersFromLinks,
@@ -20,6 +23,11 @@ export class EodashCollection {
   /** @type {import("stac-ts").StacCollection | undefined} */
   #collectionStac;
 
+  //  read only
+  get collectionStac() {
+    return this.#collectionStac;
+  }
+
   /**
    * @type {import("stac-ts").StacLink
    *   | import("stac-ts").StacItem
@@ -52,13 +60,7 @@ export class EodashCollection {
     let layersJson = [];
 
     // Load collectionstac if not yet initialized
-    if (!this.#collectionStac) {
-      stac = await axios.get(this.#collectionUrl).then((resp) => resp.data);
-      this.#collectionStac = new Collection(stac);
-    }
-
-    // set availabe map projection
-    setMapProjFromCol(this.#collectionStac);
+    stac = await this.fetchCollection();
 
     const isGeoDB = stac?.endpointtype === "GeoDB";
 
@@ -94,7 +96,8 @@ export class EodashCollection {
       // specific item was requested
       const item = new Item(stac);
       this.selectedItem = item;
-      const title = this.#collectionStac.title || this.#collectionStac.id;
+      const title =
+        this.#collectionStac?.title || this.#collectionStac?.id || "";
       layersJson.unshift(
         ...(await this.buildJsonArray(item, stacItemUrl, title, isGeoDB)),
       );
@@ -107,11 +110,18 @@ export class EodashCollection {
    * @param {string} itemUrl
    * @param {string} title
    * @param {boolean} isGeoDB
+   * @param {string} [itemDatetime]
    * @returns {Promise<Record<string,any>[]>} arrays
    * */
-  async buildJsonArray(item, itemUrl, title, isGeoDB) {
+  async buildJsonArray(item, itemUrl, title, isGeoDB, itemDatetime) {
+    await this.fetchCollection();
+    // registering top level indicator projection
+    const indicatorProjection =
+      item?.["proj:epsg"] || item?.["eodash:proj4_def"];
     await registerProjection(
-      /** @type {number | undefined} */ (item?.["proj:epsg"]),
+      /** @type {number | string | {name: string, def: string; extent: number[] | undefined;} } */ (
+        indicatorProjection
+      ),
     );
 
     const jsonArray = [];
@@ -123,7 +133,7 @@ export class EodashCollection {
         {
           type: "Vector",
           properties: {
-            id: item.id,
+            id: createLayerID(this.#collectionStac?.id ?? "", item.id, false),
             title: this.#collectionStac?.title || item.id,
           },
           source: {
@@ -152,6 +162,11 @@ export class EodashCollection {
       await fetchStyle(item, itemUrl),
     );
 
+    const layerDatetime = extractLayerDatetime(
+      this.getItems(),
+      item.properties?.datetime ?? itemDatetime,
+    );
+
     const dataAssets = Object.keys(item?.assets ?? {}).reduce((data, ast) => {
       if (item.assets[ast].roles?.includes("data")) {
         data[ast] = item.assets[ast];
@@ -159,19 +174,25 @@ export class EodashCollection {
       return data;
     }, /** @type {Record<string,import('stac-ts').StacAsset>} */ ({}));
     const isSupported =
-      item.links.some((link) => ["wms", "xyz"].includes(link.rel)) ||
+      item.links.some((link) => ["wms", "xyz", "wmts"].includes(link.rel)) ||
       Object.keys(dataAssets).length;
 
     if (isSupported) {
+      const links = await createLayersFromLinks(
+        createLayerID(this.#collectionStac?.id ?? "", item.id, false),
+        title,
+        item,
+        layerDatetime,
+      );
       jsonArray.push(
-        ...createLayersFromLinks(item.id, title, item),
-
+        ...links,
         ...(await createLayersFromDataAssets(
-          `${item.collection}_${item.id}_assets`,
+          createLayerID(this.#collectionStac?.id ?? "", item.id, true),
           title || this.#collectionStac?.title || item.id,
           dataAssets,
           style,
           layerConfig,
+          layerDatetime,
         )),
       );
     } else {
@@ -182,19 +203,33 @@ export class EodashCollection {
         displayFootprint: false,
         data: item,
         properties: {
-          id: item.id,
+          id: createLayerID(this.#collectionStac?.id ?? "", item.id, false),
           title: title || item.id,
           layerConfig,
         },
         style,
       };
-      extractRoles(json.properties, /** @type {string[]} */ (item?.roles));
+      extractRoles(
+        json.properties,
+        /** @type {string[]} */ (item?.roles),
+        item.id || /** @type {string} */ (item.title) || "" + " STAC",
+      );
       jsonArray.push(json);
     }
 
     return jsonArray;
   }
 
+  async fetchCollection() {
+    if (!this.#collectionStac) {
+      const col = await axios
+        .get(this.#collectionUrl)
+        .then((resp) => resp.data);
+      this.#collectionStac = new Collection(col);
+    }
+    return this.#collectionStac;
+  }
+
   getItems() {
     return (
       this.#collectionStac?.links
@@ -254,4 +289,44 @@ export class EodashCollection {
         })[0]
       : this.getItems()?.at(-1);
   }
+
+  /**
+   *
+   * @param {string} datetime
+   * @param {string} layer
+   */
+  async updateLayerJson(datetime, layer) {
+    await this.fetchCollection();
+
+    // get the link of the specified date
+    const specifiedLink = this.getItems()?.find(
+      (item) =>
+        typeof item.datetime === "string" &&
+        new Date(item.datetime).toISOString() === datetime,
+    );
+
+    if (!specifiedLink) {
+      console.warn(
+        "[eodash] no Item found for the provided datetime",
+        datetime,
+      );
+      return;
+    }
+
+    // create json layers from the item
+    const newLayers = await this.createLayersJson(specifiedLink);
+
+    const curentLayers = getLayers();
+
+    const oldLayer = findLayer(curentLayers, layer);
+
+    const updatedLayers = replaceLayer(
+      curentLayers,
+      /** @type {Record<string,any> & { properties:{ id:string; title:string } } } */
+      (oldLayer),
+      newLayers,
+    );
+
+    return updatedLayers;
+  }
 }

package/core/client/utils/helpers.js

@@ -60,23 +60,27 @@ export function extractLayerConfig(style) {
  */
 export const setMapProjFromCol = (STAcCollection) => {
   // if a projection exists on the collection level
-  if (STAcCollection?.["proj:epsg"]) {
+
+  const projection =
+    /** @type {number | string | {name: string, def: string} | undefined} */
+    (
+      STAcCollection?.["eodash:mapProjection"] ||
+        STAcCollection?.["proj:epsg"] ||
+        STAcCollection?.["eodash:proj4_def"]
+    );
+  if (projection) {
+    const projectionCode = getProjectionCode(projection);
     if (
       availableMapProjection.value &&
-      availableMapProjection.value !== STAcCollection?.["proj:epsg"]
+      availableMapProjection.value !== projectionCode
     ) {
-      changeMapProjection(
-        /** @type {number} */
-        (STAcCollection["proj:epsg"]),
-      );
+      changeMapProjection(projection);
     }
     // set it for `EodashMapBtns`
-    availableMapProjection.value = /** @type {string} */ (
-      STAcCollection["proj:epsg"]
-    );
+    availableMapProjection.value = /** @type {string} */ (projectionCode);
   } else {
     // reset to default projection
-    changeMapProjection((availableMapProjection.value = ""));
+    changeMapProjection((availableMapProjection.value = "EPSG:3857"));
   }
 };
 
@@ -114,14 +118,17 @@ export function extractCollectionUrls(stacObject, basepath) {
  * Assign extracted roles to layer properties
  * @param {Record<string,any>} properties
  * @param {string[]} roles
+ * @param {string} id - unique ID for baselayers and overlays
  * */
-export const extractRoles = (properties, roles) => {
+export const extractRoles = (properties, roles, id) => {
   roles?.forEach((role) => {
     if (role === "visible") {
       properties.visible = true;
     }
     if (role === "overlay" || role === "baselayer") {
       properties.group = role;
+      const [colId, itemId, isAsset, _random] = properties.id.split(";:;");
+      properties.id = [colId, itemId, isAsset, id].join(";:;");
     }
     return properties;
   });
@@ -146,3 +153,174 @@ export const fetchStyle = async (item, itemUrl) => {
     return styleJson;
   }
 };
+
+/**
+ * Return projection code which is to be registered in `eox-map`
+ * @param {string|number|{name: string, def: string}} [projection]
+ * @returns {string}
+ */
+export const getProjectionCode = (projection) => {
+  let code = projection;
+  switch (typeof projection) {
+    case "number":
+      code = `EPSG:${projection}`;
+      break;
+    case "string":
+      code = projection;
+      break;
+    case "object":
+      code = projection?.name;
+  }
+  return /** @type {string} */ (code);
+};
+
+/**
+ * @param {import("stac-ts").StacLink[]} [links]
+ * @param {string|null} [current]
+ **/
+export const extractLayerDatetime = (links, current) => {
+  if (!current || !links?.length) {
+    return undefined;
+  }
+
+  // check if links has a datetime value
+  const hasDatetime = links.some((l) => typeof l.datetime === "string");
+  if (!hasDatetime) {
+    return undefined;
+  }
+
+  /** @type {string[]} */
+  const values = [];
+  try {
+    current = new Date(current).toISOString();
+
+    links.reduce((vals, link) => {
+      if (link.datetime && link.rel === "item") {
+        vals.push(
+          new Date(/** @type {string} */ (link.datetime)).toISOString(),
+        );
+      }
+      return vals;
+    }, values);
+  } catch (e) {
+    console.warn("[eodash] not supported datetime format was provided", e);
+    return undefined;
+  }
+  // not enough values
+  if (values.length <= 1) {
+    return undefined;
+  }
+
+  // item datetime is not included in the item links datetime
+  if (!values.includes(current)) {
+    return undefined;
+  }
+
+  return {
+    values,
+    current,
+    slider: false,
+    disablePlay: true,
+  };
+};
+
+/**
+ * Find layer by ID
+ *  @param {string} layer
+ *  @param {Record<string, any>[]} layers
+ *  @returns {Record<string,any> | undefined}
+ **/
+export const findLayer = (layers, layer) => {
+  for (const lyr of layers) {
+    if (lyr.type === "Group") {
+      const found = findLayer(lyr.layers, layer);
+      if (!found) {
+        continue;
+      }
+      return found;
+    }
+    if (lyr.properties.id === layer) {
+      return lyr;
+    }
+  }
+};
+
+/**
+ * @param {Record<string,any>[]} currentLayers
+ * @param {Record<string,any>} oldLayer
+ * @param {Record<string,any>[]} newLayers
+ * @returns {Record<string,any>[] | undefined}
+ */
+export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
+  const oldLayerIdx = currentLayers.findIndex(
+    (l) => l.properties.id === oldLayer.properties.id,
+  );
+  if (oldLayerIdx !== -1) {
+    currentLayers.splice(oldLayerIdx, 1, ...newLayers);
+    return currentLayers;
+  }
+
+  for (const l of currentLayers) {
+    if (l.type === "Group") {
+      const updatedGroupLyrs = replaceLayer(l.layers, oldLayer, newLayers);
+      if (updatedGroupLyrs?.length) {
+        l.layers = updatedGroupLyrs;
+        return currentLayers;
+      }
+    }
+  }
+};
+/**
+ * @param {import('./eodashSTAC.js').EodashCollection[]} indicators
+ * @param {import('ol/layer').Layer} layer
+ */
+export const getColFromLayer = async (indicators, layer) => {
+  // init cols
+  const collections = await Promise.all(
+    indicators.map((ind) => ind.fetchCollection()),
+  );
+  const [collectionId, itemId, _asset, _random] = layer.get("id").split(";:;");
+
+  const chosen = collections.find((col) => {
+    const isInd =
+      col.id === collectionId &&
+      col.links?.some(
+        (link) => link.rel === "item" && link.href.includes(itemId),
+      );
+    return isInd ?? false;
+  });
+  return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
+};
+/**
+ *
+ * @param {string} colId
+ * @param {string} itemId
+ * @param {boolean} isAsset
+ * @returns
+ */
+export const createLayerID = (colId, itemId, isAsset) => {
+  return `${colId ?? ""};:;${itemId ?? ""};:;${isAsset ? "_asset" : ""};:;${Math.random().toString(16).slice(2)}`;
+};
+
+/**
+ * creates a structured clone from the layers and
+ * removes all properties from the clone
+ * except the ID and title
+ *
+ * @param {Record<string,any>[]} layers
+ */
+export const removeUnneededProperties = (layers) => {
+  const cloned = structuredClone(layers);
+  cloned.forEach((layer) => {
+    const id = layer.properties.id;
+    const title = layer.properties.title;
+    layer.properties = { id, title };
+    if (layer["interactions"]) {
+      delete layer["interactions"]
+    }
+    if (layer.type === "Group") {
+      layer.layers = removeUnneededProperties(layer.layers);
+    }
+  });
+  return cloned;
+};