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

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 Vector layer from GeoJSON", geotiffSourceID);
+    log.debug("Configured Sources", geoTIFFSources);
+    const layer = {
       type: "WebGLTile",
       source: {
         type: "GeoTIFF",
@@ -68,25 +82,32 @@ 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]
  */
-export const createLayersFromLinks = async (id, title, item, layerDatetime) => {
+export const createLayersFromLinks = async (
+  collectionId,
+  title,
+  item,
+  layerDatetime,
+) => {
+  log.debug("Creating layers from links");
   /** @type {Record<string,any>[]} */
   const jsonArray = [];
   const wmsArray = item.links.filter((l) => l.rel === "wms");
@@ -102,10 +123,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,21 +141,16 @@ 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"]);
@@ -148,11 +171,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 +205,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 +224,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 +240,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 +263,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: {
@@ -179,17 +184,18 @@ export class EodashCollection {
 
     if (isSupported) {
       const links = await createLayersFromLinks(
-        createLayerID(this.#collectionStac?.id ?? "", item.id, false),
+        this.#collectionStac?.id ?? "",
         title,
         item,
         layerDatetime,
       );
       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 +209,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 +217,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 +228,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 +267,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 +331,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) {
@@ -60,7 +61,7 @@ export function extractLayerConfig(style) {
  */
 export const setMapProjFromCol = (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,17 +70,25 @@ export const setMapProjFromCol = (STAcCollection) => {
         STAcCollection?.["eodash:proj4_def"]
     );
   if (projection) {
+    log.debug("Projection found", projection);
+    registerProjection(projection);
     const projectionCode = getProjectionCode(projection);
     if (
       availableMapProjection.value &&
       availableMapProjection.value !== projectionCode
     ) {
+      log.debug(
+        "Changing map projection",
+        availableMapProjection.value,
+        projectionCode,
+      );
       changeMapProjection(projection);
     }
     // set it for `EodashMapBtns`
     availableMapProjection.value = /** @type {string} */ (projectionCode);
   } else {
     // reset to default projection
+    log.debug("Resetting projection to default");
     changeMapProjection((availableMapProjection.value = "EPSG:3857"));
   }
 };
@@ -117,19 +126,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;
   });
 };
@@ -176,10 +189,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 +203,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,24 +214,24 @@ 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,
+    controlValues,
+    currentStep,
     slider: false,
     disablePlay: true,
   };
@@ -279,7 +292,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 +304,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 +384,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);

package/dist/client/{DashboardLayout-CCtyOil0.js → DashboardLayout-BR1lU9ER.js}

@@ -1,5 +1,5 @@
-import { _ as y, x as m, W as x, X as d, $ as t, a0 as r, a1 as l, a9 as _, a3 as n, a6 as u, a2 as c, a4 as p, d as h, a5 as g, F as f, a7 as v, ab as w } from "./asWebComponent-3OsFQJVx.js";
-import { V as k } from "./VMain-Ck81LJfb.js";
+import { _ as y, x as m, W as x, X as d, $ as t, a0 as r, a1 as l, a9 as _, a3 as n, a6 as u, a2 as c, a4 as p, d as h, a5 as g, F as f, a7 as v, ab as w } from "./asWebComponent-DhR2_xlP.js";
+import { V as k } from "./VMain-Df5VMG9r.js";
 class A extends HTMLElement {
   static get observedAttributes() {
     return ["gap"];

package/dist/client/{DynamicWebComponent-But2r1Sj.js → DynamicWebComponent-7z8VFsrZ.js}

@@ -1,4 +1,4 @@
-import { bL as i, aC as m, r as p, Z as d, aO as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-3OsFQJVx.js";
+import { bL as i, aD as m, r as p, Z as d, aQ as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-DhR2_xlP.js";
 const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
   __name: "DynamicWebComponent",
   props: {
@@ -38,7 +38,7 @@ const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
       e.onMounted?.(r.value, s);
     }), f(() => {
       e.onUnmounted?.(r.value, s);
-    }), (n, w) => (c(), g("span", h, [
+    }), (n, x) => (c(), g("span", h, [
       (c(), y(
         k(o.tagName),
         _(o.properties, {