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

package/core/client/utils/createLayers.js

@@ -1,25 +1,37 @@
 import { registerProjection } from "@/store/Actions";
-import { extractRoles, getProjectionCode } from "./helpers";
+import {
+  extractRoles,
+  getProjectionCode,
+  createLayerID,
+  createAssetID,
+} from "./helpers";
+import log from "loglevel";
 
 /**
- * @param {string} id
+ * @param {string} collectionId
  * @param {string} title
  * @param {Record<string,import("stac-ts").StacAsset>} assets
+ * @param {import("stac-ts").StacItem } item
  * @param {import("ol/layer/WebGLTile").Style} [style]
  * @param {Record<string, unknown>} [layerConfig]
  * @param {Record<string, unknown>} [layerDatetime]
  **/
-export async function createLayersFromDataAssets(
-  id,
+export async function createLayersFromAssets(
+  collectionId,
   title,
   assets,
+  item,
   style,
   layerConfig,
   layerDatetime,
 ) {
+  log.debug("Creating layers from assets");
   let jsonArray = [];
   let geoTIFFSources = [];
-  for (const ast in assets) {
+  /** @type {number|null} */
+  let geoTIFFIdx = null;
+
+  for (const [idx, ast] of Object.keys(assets).entries()) {
     // register projection if exists
     const assetProjection =
       /** @type {string | number | {name: string, def: string, extent?:number[]} | undefined} */ (
@@ -28,6 +40,8 @@ export async function createLayersFromDataAssets(
     await registerProjection(assetProjection);
 
     if (assets[ast]?.type === "application/geo+json") {
+      const assetId = createAssetID(collectionId, item.id, idx);
+      log.debug("Creating Vector layer from GeoJSON", assetId);
       const layer = {
         type: "Vector",
         source: {
@@ -36,7 +50,7 @@ export async function createLayersFromDataAssets(
           format: "GeoJSON",
         },
         properties: {
-          id,
+          id: assetId,
           title,
           layerDatetime,
           ...(layerConfig && {
@@ -48,19 +62,19 @@ export async function createLayersFromDataAssets(
         },
         ...(!style?.variables && { style }),
       };
-      extractRoles(
-        layer.properties,
-        assets[ast]?.roles ?? [],
-        /** @type {string} */ (assets[ast].id || assets[ast].title || ""),
-      );
+      extractRoles(layer.properties, assets[ast]);
       jsonArray.push(layer);
     } else if (assets[ast]?.type === "image/tiff") {
+      geoTIFFIdx = idx;
       geoTIFFSources.push({ url: assets[ast].href });
     }
   }
 
-  if (geoTIFFSources.length) {
-    jsonArray.push({
+  if (geoTIFFSources.length && typeof geoTIFFIdx === "number") {
+    const geotiffSourceID = collectionId + ";:;GeoTIFF";
+    log.debug("Creating WebGLTile layer from GeoTIFF", geotiffSourceID);
+    log.debug("Configured Sources", geoTIFFSources);
+    const layer = {
       type: "WebGLTile",
       source: {
         type: "GeoTIFF",
@@ -68,25 +82,34 @@ export async function createLayersFromDataAssets(
         sources: geoTIFFSources,
       },
       properties: {
-        id,
+        id: createAssetID(collectionId, item.id, geoTIFFIdx),
         title,
         layerConfig,
         layerDatetime,
       },
       style,
-    });
+    };
+    jsonArray.push(layer);
   }
 
   return jsonArray;
 }
 
 /**
+ * @param {string} collectionId
  * @param {import('stac-ts').StacItem} item
- * @param {string} id
  * @param {string} title
  * @param {Record<string,any>} [layerDatetime]
+ * @param {string | null} [legendInfo]
  */
-export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
+export const createLayersFromLinks = async (
+  collectionId,
+  title,
+  item,
+  layerDatetime,
+  legendInfo,
+) => {
+  log.debug("Creating layers from links");
   /** @type {Record<string,any>[]} */
   const jsonArray = [];
   const wmsArray = item.links.filter((l) => l.rel === "wms");
@@ -102,10 +125,17 @@ export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
 
     await registerProjection(wmsLinkProjection);
     const projectionCode = getProjectionCode(wmsLinkProjection || "EPSG:4326");
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      wmsLink,
+      projectionCode,
+    );
+    log.debug("WMS Layer added", linkId);
     let json = {
       type: "Tile",
       properties: {
-        id,
+        id: linkId,
         title: wmsLink.title || title || item.id,
         layerDatetime,
       },
@@ -113,25 +143,24 @@ export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
         type: "TileWMS",
         url: wmsLink.href,
         projection: projectionCode,
+        tileGrid: {
+          tileSize: [512, 512],
+        },
         params: {
           LAYERS: wmsLink["wms:layers"],
           TILED: true,
         },
       },
     };
-
-    extractRoles(
-      json.properties,
-      /** @type {string[]} */ (wmsLink.roles),
-      /** @type {string} */ (wmsLink.id) ||
-        /** @type {string} */ (wmsLink.title) ||
-        "",
-    );
-
+    extractRoles(json.properties, wmsLink);
     if ("wms:dimensions" in wmsLink) {
       // Expand all dimensions into the params attribute
       Object.assign(json.source.params, wmsLink["wms:dimensions"]);
     }
+    if (legendInfo !== null) {
+      // @ts-expect-error once we have a eox-map config type we can remove this
+      json.properties.description = legendInfo;
+    }
     jsonArray.push(json);
   }
 
@@ -148,11 +177,21 @@ export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
     // that needs to be removed once catalog and wmts creation from capabilities
     // combined with custom view projections is solved
     let json;
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      wmtsLink,
+      projectionCode,
+    );
     if (wmtsLink.title === "wmts capabilities") {
+      log.debug(
+        "Warning: WMTS Layer from capabilities added, function needs to be updated",
+        linkId,
+      );
       json = {
         type: "Tile",
         properties: {
-          id,
+          id: linkId,
           title: title || item.id,
           layerDatetime,
         },
@@ -172,10 +211,14 @@ export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
         },
       };
     } else {
+      log.debug(
+        "Warning: WMTS Layer from capabilities added, function needs to be updated",
+        linkId,
+      );
       json = {
         type: "Tile",
         properties: {
-          id,
+          id: linkId,
           title: wmtsLink.title || title || item.id,
           layerDatetime,
         },
@@ -187,21 +230,13 @@ export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
           matrixSet: wmtsLink.matrixSet || "EPSG:3857",
           projection: projectionCode,
           tileGrid: {
-            tileSize: [128, 128],
+            tileSize: [512, 512],
           },
           dimensions: wmtsLink["wmts:dimensions"],
         },
       };
     }
-
-    extractRoles(
-      json.properties,
-      /** @type {string[]} */ (wmtsLink.roles),
-      /** @type {string} */ (wmtsLink.id) ||
-        /** @type {string} */ (wmtsLink.title) ||
-        "",
-    );
-
+    extractRoles(json.properties, wmtsLink);
     jsonArray.push(json);
   }
 
@@ -211,12 +246,18 @@ export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
       (xyzLink?.["proj:epsg"] || xyzLink?.["eodash:proj4_def"]);
 
     await registerProjection(xyzLinkProjection);
-
     const projectionCode = getProjectionCode(xyzLinkProjection || "EPSG:3857");
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      xyzLink,
+      projectionCode,
+    );
+    log.debug("XYZ Layer added", linkId);
     let json = {
       type: "Tile",
       properties: {
-        id,
+        id: linkId,
         title: xyzLink.title || title || item.id,
         roles: xyzLink.roles,
         layerDatetime,
@@ -228,11 +269,7 @@ export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
       },
     };
 
-    extractRoles(
-      json.properties,
-      /** @type {string[]} */ (xyzLink.roles),
-      /** @type {string} */ (xyzLink.id || xyzLink.title || ""),
-    );
+    extractRoles(json.properties, xyzLink);
     jsonArray.push(json);
   }
   return jsonArray;

package/core/client/utils/eodashSTAC.js

@@ -1,7 +1,6 @@
 import { Collection, Item } from "stac-js";
 import { toAbsolute } from "stac-js/src/http.js";
 import {
-  createLayerID,
   extractLayerConfig,
   extractLayerDatetime,
   extractRoles,
@@ -11,11 +10,9 @@ import {
   replaceLayer,
 } from "./helpers";
 import { getLayers, registerProjection } from "@/store/Actions";
-import {
-  createLayersFromDataAssets,
-  createLayersFromLinks,
-} from "./createLayers";
-import axios from "axios";
+import { createLayersFromAssets, createLayersFromLinks } from "./createLayers";
+import axios from "@/plugins/axios";
+import log from "loglevel";
 
 export class EodashCollection {
   #collectionUrl = "";
@@ -114,6 +111,14 @@ export class EodashCollection {
    * @returns {Promise<Record<string,any>[]>} arrays
    * */
   async buildJsonArray(item, itemUrl, title, isGeoDB, itemDatetime) {
+    log.debug(
+      "Building JSON array",
+      item,
+      itemUrl,
+      title,
+      isGeoDB,
+      itemDatetime,
+    );
     await this.fetchCollection();
     // registering top level indicator projection
     const indicatorProjection =
@@ -133,7 +138,7 @@ export class EodashCollection {
         {
           type: "Vector",
           properties: {
-            id: createLayerID(this.#collectionStac?.id ?? "", item.id, false),
+            id: this.#collectionStac?.id ?? "",
             title: this.#collectionStac?.title || item.id,
           },
           source: {
@@ -178,18 +183,28 @@ export class EodashCollection {
       Object.keys(dataAssets).length;
 
     if (isSupported) {
+      // Checking for potential legend asset
+      let legendInfo = null;
+      if (this.#collectionStac?.assets?.legend?.href) {
+        legendInfo = `
+          <div style="text-align:center; width: 100%">
+            <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
+          </div>`;
+      }
       const links = await createLayersFromLinks(
-        createLayerID(this.#collectionStac?.id ?? "", item.id, false),
+        this.#collectionStac?.id ?? "",
         title,
         item,
         layerDatetime,
+        legendInfo,
       );
       jsonArray.push(
         ...links,
-        ...(await createLayersFromDataAssets(
-          createLayerID(this.#collectionStac?.id ?? "", item.id, true),
+        ...(await createLayersFromAssets(
+          this.#collectionStac?.id ?? "",
           title || this.#collectionStac?.title || item.id,
           dataAssets,
+          item,
           style,
           layerConfig,
           layerDatetime,
@@ -203,7 +218,7 @@ export class EodashCollection {
         displayFootprint: false,
         data: item,
         properties: {
-          id: createLayerID(this.#collectionStac?.id ?? "", item.id, false),
+          id: this.#collectionStac?.id ?? "",
           title: title || item.id,
           layerConfig,
         },
@@ -211,8 +226,8 @@ export class EodashCollection {
       };
       extractRoles(
         json.properties,
-        /** @type {string[]} */ (item?.roles),
-        item.id || /** @type {string} */ (item.title) || "" + " STAC",
+        //@ts-expect-error using the item incase no self link is found
+        item.links.find((link) => link.rel === "self") ?? item,
       );
       jsonArray.push(json);
     }
@@ -222,6 +237,7 @@ export class EodashCollection {
 
   async fetchCollection() {
     if (!this.#collectionStac) {
+      log.debug("Fetching collection file", this.#collectionUrl);
       const col = await axios
         .get(this.#collectionUrl)
         .then((resp) => resp.data);
@@ -260,12 +276,7 @@ export class EodashCollection {
   }
 
   async getExtent() {
-    if (!this.#collectionStac) {
-      const stac = await axios
-        .get(this.#collectionUrl)
-        .then((resp) => resp.data);
-      this.#collectionStac = new Collection(stac);
-    }
+    await this.fetchCollection();
     return this.#collectionStac?.extent;
   }
 
@@ -329,4 +340,43 @@ export class EodashCollection {
 
     return updatedLayers;
   }
+
+  /**
+   * Returns base layers and overlay layers of a STAC Collection
+   *
+   * @param {import("stac-ts").StacCollection} indicator */
+  static async getIndicatorLayers(indicator) {
+    const indicatorAssets = Object.keys(indicator?.assets ?? {}).reduce(
+      (assets, ast) => {
+        if (
+          indicator.assets?.[ast].roles?.includes("baselayer") ||
+          indicator.assets?.[ast].roles?.includes("overlay")
+        ) {
+          assets[ast] = indicator.assets[ast];
+        }
+        return assets;
+      },
+      /** @type {Record<string,import('stac-ts').StacAsset>} */ ({}),
+    );
+
+    return [
+      ...(await createLayersFromLinks(
+        indicator?.id ?? "",
+        indicator?.title || indicator.id,
+        //@ts-expect-error indicator instead of item
+        indicator,
+        // layerDatetime,
+      )),
+      ...(await createLayersFromAssets(
+        indicator?.id ?? "",
+        indicator?.title || indicator.id,
+        indicatorAssets,
+        //@ts-expect-error indicator instead of item
+        indicator,
+        // style,
+        // layerConfig,
+        // layerDatetime,
+      )),
+    ];
+  }
 }

package/core/client/utils/helpers.js

@@ -1,7 +1,8 @@
-import { changeMapProjection } from "@/store/Actions";
+import { changeMapProjection, registerProjection } from "@/store/Actions";
 import { availableMapProjection } from "@/store/States";
 import { toAbsolute } from "stac-js/src/http.js";
-import axios from "axios";
+import axios from "@/plugins/axios";
+import log from "loglevel";
 
 /** @param {import("stac-ts").StacLink[]} [links] */
 export function generateFeatures(links) {
@@ -48,8 +49,14 @@ export function extractLayerConfig(style) {
   let layerConfig = undefined;
   if (style?.jsonform) {
     layerConfig = { schema: style.jsonform, type: "style" };
+    style = { ...style };
     delete style.jsonform;
   }
+  log.debug(
+    "extracted layerConfig",
+    JSON.parse(JSON.stringify({ layerConfig, style })),
+  );
+
   return { layerConfig, style };
 }
 
@@ -58,9 +65,9 @@ export function extractLayerConfig(style) {
  * updates {@link availableMapProjection}
  * @param {import('stac-ts').StacCollection} [STAcCollection]
  */
-export const setMapProjFromCol = (STAcCollection) => {
+export const setMapProjFromCol = async (STAcCollection) => {
   // if a projection exists on the collection level
-
+  log.debug("Checking for available map projection in indicator");
   const projection =
     /** @type {number | string | {name: string, def: string} | undefined} */
     (
@@ -69,18 +76,23 @@ export const setMapProjFromCol = (STAcCollection) => {
         STAcCollection?.["eodash:proj4_def"]
     );
   if (projection) {
+    log.debug("Projection found", projection);
+    await registerProjection(projection);
     const projectionCode = getProjectionCode(projection);
-    if (
-      availableMapProjection.value &&
-      availableMapProjection.value !== projectionCode
-    ) {
-      changeMapProjection(projection);
+    if (availableMapProjection.value !== projectionCode) {
+      log.debug(
+        "Changing map projection",
+        availableMapProjection.value,
+        projectionCode,
+      );
+      await changeMapProjection(projection);
     }
     // set it for `EodashMapBtns`
     availableMapProjection.value = /** @type {string} */ (projectionCode);
   } else {
     // reset to default projection
-    changeMapProjection((availableMapProjection.value = "EPSG:3857"));
+    log.debug("Resetting projection to default EPSG:3857");
+    await changeMapProjection((availableMapProjection.value = ""));
   }
 };
 
@@ -117,19 +129,23 @@ 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
+ * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
  * */
-export const extractRoles = (properties, roles, id) => {
+export const extractRoles = (properties, linkOrAsset) => {
+  const roles = /** @type {string[]} */ (linkOrAsset.roles);
   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(";:;");
+      //remove all the properties and replace the random ID with baselayer
+      // provided ID
+      const [_colId, _itemId, _isAsset, _random, proj] =
+        properties.id.split(";:;");
+      properties.id = ["", "", "", "", linkOrAsset.id, proj].join(";:;");
     }
+
     return properties;
   });
 };
@@ -150,7 +166,9 @@ export const fetchStyle = async (item, itemUrl) => {
 
     /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
     const styleJson = await axios.get(url).then((resp) => resp.data);
-    return styleJson;
+
+    log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
+    return { ...styleJson };
   }
 };
 
@@ -176,10 +194,10 @@ export const getProjectionCode = (projection) => {
 
 /**
  * @param {import("stac-ts").StacLink[]} [links]
- * @param {string|null} [current]
+ * @param {string|null} [currentStep]
  **/
-export const extractLayerDatetime = (links, current) => {
-  if (!current || !links?.length) {
+export const extractLayerDatetime = (links, currentStep) => {
+  if (!currentStep || !links?.length) {
     return undefined;
   }
 
@@ -190,9 +208,9 @@ export const extractLayerDatetime = (links, current) => {
   }
 
   /** @type {string[]} */
-  const values = [];
+  const controlValues = [];
   try {
-    current = new Date(current).toISOString();
+    currentStep = new Date(currentStep).toISOString();
 
     links.reduce((vals, link) => {
       if (link.datetime && link.rel === "item") {
@@ -201,25 +219,25 @@ export const extractLayerDatetime = (links, current) => {
         );
       }
       return vals;
-    }, values);
+    }, controlValues);
   } catch (e) {
     console.warn("[eodash] not supported datetime format was provided", e);
     return undefined;
   }
-  // not enough values
-  if (values.length <= 1) {
+  // not enough controlValues
+  if (controlValues.length <= 1) {
     return undefined;
   }
 
   // item datetime is not included in the item links datetime
-  if (!values.includes(current)) {
+  if (!controlValues.includes(currentStep)) {
     return undefined;
   }
 
   return {
-    values,
-    current,
-    slider: false,
+    controlValues,
+    currentStep,
+    slider: true,
     disablePlay: true,
   };
 };
@@ -279,7 +297,7 @@ export const getColFromLayer = async (indicators, layer) => {
   const collections = await Promise.all(
     indicators.map((ind) => ind.fetchCollection()),
   );
-  const [collectionId, itemId, _asset, _random] = layer.get("id").split(";:;");
+  const [collectionId, itemId, ..._other] = layer.get("id").split(";:;");
 
   const chosen = collections.find((col) => {
     const isInd =
@@ -291,17 +309,72 @@ export const getColFromLayer = async (indicators, layer) => {
   });
   return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
 };
+
 /**
+ * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
+ * @param {string} collectionId
+ * @param {string} itemId
+ * @param {import('stac-ts').StacLink} link
+ * @param {string} projectionCode
  *
- * @param {string} colId
+ */
+export const createLayerID = (collectionId, itemId, link, projectionCode) => {
+  const linkId = link.id || link.title || link.href;
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${linkId ?? ""};:;${projectionCode ?? ""}`;
+  // If we are looking at base layers and overlays we remove the collection and item part
+  // as we want to make sure tiles are not reloaded when switching layers
+  if (
+    link.roles &&
+    // @ts-expect-error it seems roles it not defined for links yet
+    link.roles.find((r) => ["baselayer", "overlay"].includes(r))
+  ) {
+    lId = `${linkId ?? ""};:;${projectionCode ?? ""}`;
+  }
+  log.debug("Generated Layer ID", lId);
+  return lId;
+};
+
+/**
+ * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
+ * @param {string} collectionId
  * @param {string} itemId
- * @param {boolean} isAsset
- * @returns
+ * @param {number} index
+ *
  */
-export const createLayerID = (colId, itemId, isAsset) => {
-  return `${colId ?? ""};:;${itemId ?? ""};:;${isAsset ? "_asset" : ""};:;${Math.random().toString(16).slice(2)}`;
+export const createAssetID = (collectionId, itemId, index) => {
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${index ?? ""}`;
+  log.debug("Generated Asset ID", lId);
+  return lId;
 };
 
+/**
+ *
+ * @param {import("stac-ts").StacItem} item
+ * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
+ * @param {string} id - {@link createLayerID} & {@link extractRoles}
+ * @param {{ properties:{id:string}  & Record<string, any> }& Record<string,any>} layer
+ * @returns
+ */
+export function assignProjID(item, linkOrAsset, id, layer) {
+  const indicatorProjection =
+    /** @type { string | undefined} */
+    (item?.["proj:epsg"]) ||
+    /** @type { {name?: string} | undefined} */
+    (item?.["eodash:mapProjection"])?.name ||
+    "EPSG:3857";
+
+  const idArr = id.split(";:;");
+
+  idArr.pop();
+  idArr.push(indicatorProjection);
+  const updatedID = idArr.join(";:;");
+  layer.properties.id = updatedID;
+
+  log.debug("Updating layer id", updatedID);
+
+  return updatedID;
+}
+
 /**
  * creates a structured clone from the layers and
  * removes all properties from the clone
@@ -316,7 +389,7 @@ export const removeUnneededProperties = (layers) => {
     const title = layer.properties.title;
     layer.properties = { id, title };
     if (layer["interactions"]) {
-      delete layer["interactions"]
+      delete layer["interactions"];
     }
     if (layer.type === "Group") {
       layer.layers = removeUnneededProperties(layer.layers);