@eodash/eodash 5.0.0-alpha.2.10 → 5.0.0-alpha.2.11

package/core/client/utils/eodashSTAC.js

@@ -1,19 +1,26 @@
 import { Collection, Item } from "stac-js";
 import { toAbsolute } from "stac-js/src/http.js";
 import {
-  createLayersFromDataAssets,
   extractLayerConfig,
+  extractRoles,
+  fetchStyle,
   generateFeatures,
   setMapProjFromCol,
+  uid,
 } from "./helpers";
-import axios from "axios";
 import { registerProjection } from "@/store/Actions";
+import {
+  createLayersFromDataAssets,
+  createLayersFromLinks,
+} from "./createLayers";
+import axios from "axios";
 
 export class EodashCollection {
-  /** @type {string} */
   #collectionUrl = "";
+
   /** @type {import("stac-ts").StacCollection | undefined} */
   #collectionStac;
+
   /**
    * @type {import("stac-ts").StacLink
    *   | import("stac-ts").StacItem
@@ -25,262 +32,166 @@ export class EodashCollection {
   constructor(collectionUrl) {
     this.#collectionUrl = collectionUrl;
   }
+
   /**
    * @async
-   * @param {import('stac-ts').StacLink | Date} [itemLinkOrDate]
+   * @param {import('stac-ts').StacLink | Date} [linkOrDate]
    * @returns
    */
-  createLayersJson = async (itemLinkOrDate) => {
-    /** @type {import("stac-ts").StacLink | undefined} */
-    let stacItem,
-      /** @type {import("stac-ts").StacCollection | undefined} */
-      stac;
+  createLayersJson = async (linkOrDate) => {
+    /**
+     * @type {import("stac-ts").StacLink | undefined}
+     **/
+    let stacItem;
+
+    /**
+     * @type {import("stac-ts").StacCollection | undefined}
+     **/
+    let stac;
     // TODO get auxiliary layers from collection
-    /** @type {object[]} */
+    /** @type {Record<string,any>[]} */
     let layersJson = [];
 
     // Load collectionstac if not yet initialized
     if (!this.#collectionStac) {
-      const response = await axios.get(this.#collectionUrl);
-      stac = await response.data;
+      stac = await axios.get(this.#collectionUrl).then((resp) => resp.data);
       this.#collectionStac = new Collection(stac);
     }
 
     // set availabe map projection
     setMapProjFromCol(this.#collectionStac);
 
-    if (stac && stac.endpointtype === "GeoDB") {
-      // Special handling of point based data
-      const allFeatures = generateFeatures(stac.links);
-      layersJson.unshift({
-        type: "Vector",
-        properties: {
-          id: stac.id,
-          title: stac.title || stac.id,
-        },
-        source: {
-          type: "Vector",
-          url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
-          format: "GeoJSON",
-        },
-        style: {
-          "circle-radius": 5,
-          "circle-fill-color": "#00417077",
-          "circle-stroke-color": "#004170",
-          "fill-color": "#00417077",
-          "stroke-color": "#004170",
-        },
-      });
+    const isGeoDB = stac?.endpointtype === "GeoDB";
 
-      return layersJson;
+    if (linkOrDate instanceof Date) {
+      // if collectionStac not yet initialized we do it here
+      stacItem = this.getItem(linkOrDate);
     } else {
-      if (itemLinkOrDate instanceof Date) {
-        // if collectionStac not yet initialized we do it here
-        stacItem = this.getItems()?.sort((a, b) => {
-          const distanceA = Math.abs(
-            new Date(/** @type {number} */ (a.datetime)).getTime() -
-              itemLinkOrDate.getTime(),
-          );
-          const distanceB = Math.abs(
-            new Date(/** @type {number} */ (b.datetime)).getTime() -
-              itemLinkOrDate.getTime(),
-          );
-          return distanceA - distanceB;
-        })[0];
-        this.selectedItem = stacItem;
-      } else {
-        stacItem = itemLinkOrDate;
-      }
+      stacItem = linkOrDate;
+    }
+
+    const stacItemUrl = stacItem
+      ? toAbsolute(stacItem.href, this.#collectionUrl)
+      : this.#collectionUrl;
 
-      const stacItemUrl = stacItem
-        ? toAbsolute(stacItem.href, this.#collectionUrl)
-        : this.#collectionUrl;
-      stac = await axios.get(stacItemUrl).then((resp) => resp.data);
+    stac = await axios.get(stacItemUrl).then((resp) => resp.data);
+
+    if (!stacItem) {
+      // no specific item was requested; render last item
+      this.#collectionStac = new Collection(stac);
+      this.selectedItem = this.getItem();
 
-      if (!stacItem) {
-        // no specific item was requested; render last item
-        this.#collectionStac = new Collection(stac);
-        const items = this.getItems();
-        this.selectedItem = items?.[items.length - 1];
-        if (this.selectedItem) {
-          layersJson = await this.createLayersJson(this.selectedItem);
-        } else {
-          if (import.meta.env.DEV) {
-            console.warn(
-              "[eodash] the selected collection does not include any items",
-            );
-          }
-        }
-        return [];
+      if (this.selectedItem) {
+        layersJson = /** @type {Record<string,any>[]} */ (
+          await this.createLayersJson(this.selectedItem)
+        );
       } else {
-        // specific item was requested
-        const item = new Item(stac);
-        this.selectedItem = item;
-        const title = this.#collectionStac.title || this.#collectionStac.id;
-        layersJson.unshift(
-          ...(await this.buildJsonArray(item, stacItemUrl, title)),
+        console.warn(
+          "[eodash] the selected collection does not include any items",
         );
-        return layersJson;
       }
+      return [];
+    } else {
+      // specific item was requested
+      const item = new Item(stac);
+      this.selectedItem = item;
+      const title = this.#collectionStac.title || this.#collectionStac.id;
+      layersJson.unshift(
+        ...(await this.buildJsonArray(item, stacItemUrl, title, isGeoDB)),
+      );
+      return layersJson;
     }
   };
 
-  async getExtent() {
-    if (!this.#collectionStac) {
-      const response = await axios.get(this.#collectionUrl);
-      const stac = await response.data;
-      this.#collectionStac = new Collection(stac);
-    }
-    return this.#collectionStac?.extent;
-  }
-  /**
-   * @param {object} properties
-   * @param {[string]} roles
-   * */
-  extractRoles(properties, roles) {
-    roles?.forEach((role) => {
-      if (role === "visible") {
-        // @ts-expect-error visible does not need to exist in properties
-        properties.visible = true;
-      }
-      if (role === "overlay" || role === "baselayer") {
-        // @ts-expect-error group not expected to exist in properties
-        properties.group = role;
-      }
-    });
-  }
   /**
    * @param {import("stac-ts").StacItem} item
    * @param {string} itemUrl
    * @param {string} title
+   * @param {boolean} isGeoDB
+   * @returns {Promise<Record<string,any>[]>} arrays
    * */
-  async buildJsonArray(item, itemUrl, title) {
+  async buildJsonArray(item, itemUrl, title, isGeoDB) {
+    await registerProjection(
+      /** @type {number | undefined} */ (item?.["proj:epsg"]),
+    );
+
     const jsonArray = [];
-    // TODO: this currently assumes only one layer will be extracted
-    //       from an item, although it think this is currently true
-    //       potentially this could return multiple layers
-    // TODO: implement other types, such as COG
+
+    if (isGeoDB) {
+      const allFeatures = generateFeatures(this.#collectionStac?.links);
+
+      return [
+        {
+          type: "Vector",
+          properties: {
+            id: item.id,
+            title: this.#collectionStac?.title || item.id,
+          },
+          source: {
+            type: "Vector",
+            url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
+            format: "GeoJSON",
+          },
+          style: {
+            "circle-radius": 5,
+            "circle-fill-color": "#00417077",
+            "circle-stroke-color": "#004170",
+            "fill-color": "#00417077",
+            "stroke-color": "#004170",
+          },
+        },
+      ];
+    }
 
     // I propose following approach, we "manually" create configurations
     // for the rendering options we know and expect.
     // If we don't find any we fallback to using the STAC ol item that
     // will try to extract anything it supports but for which we have
     // less control.
-    let dataAssets = /** @type {Record<string,import('stac-ts').StacAsset>} */ ({});
-    if (item.assets) {
-      dataAssets = Object.keys(item.assets).reduce((data, ast) => {
-        if (item.assets[ast].roles?.includes("data")) {
-          data[ast] = item.assets[ast];
-        }
-        return data;
-      }, /** @type {Record<string,import('stac-ts').StacAsset>} */ ({}));
-    }
 
     const { layerConfig, style } = extractLayerConfig(
-      await this.fetchStyle(item, itemUrl),
+      await fetchStyle(item, itemUrl),
     );
-    const wmsArray = item.links.filter((l) => l.rel === "wms");
-    const xyzArray = item.links.filter((l) => l.rel === "xyz");
-    const fallbackToStac = item.links.find((l) => l.rel === "wmts");
 
-    // TODO: add capability to find projection in item
-    await registerProjection(
-      /** @type {number | undefined} */ (item?.["proj:epsg"]),
-    );
+    const dataAssets = Object.keys(item?.assets ?? {}).reduce((data, ast) => {
+      if (item.assets[ast].roles?.includes("data")) {
+        data[ast] = item.assets[ast];
+      }
+      return data;
+    }, /** @type {Record<string,import('stac-ts').StacAsset>} */ ({}));
 
-    if (wmsArray.length > 0) {
-      wmsArray.forEach((link) => {
-        let json = {
-          type: "Tile",
-          properties: {
-            id: link.id || item.id,
-            title: title || link.title || item.id,
-          },
-          source: {
-            // TODO: if no projection information is provided we should
-            // assume one, else for WMS requests it will try to get
-            // the map projection that might not be supported
-            // projection: projDef ? projDef : "EPSG:4326",
-            type: "TileWMS",
-            url: link.href,
-            params: {
-              LAYERS: link["wms:layers"],
-              TILED: true,
-            },
-          },
-        };
-        this.extractRoles(
-          json.properties,
-          /** @type {[string]} */ (link.roles),
-        );
-        if ("wms:dimensions" in link) {
-          // Expand all dimensions into the params attribute
-          json.source.params = Object.assign(
-            json.source.params,
-            link["wms:dimensions"],
-          );
-        }
-        jsonArray.push(json);
-      });
-    } else if (xyzArray.length > 0) {
-      xyzArray.forEach((link) => {
-        let json = {
-          type: "Tile",
-          properties: {
-            id: link.id || item.id,
-            title: title || link.title || item.id,
-            roles: link.roles,
-          },
-          source: {
-            type: "XYZ",
-            url: link.href,
-          },
-        };
-        this.extractRoles(
-          json.properties,
-          /** @type {[string]} */ (link.roles),
-        );
-        jsonArray.push(json);
-      });
-    } else if (fallbackToStac) {
-      jsonArray.push({
-        type: "STAC",
-        displayWebMapLink: true,
-        displayFootprint: false,
-        data: item,
-        properties: {
-          id: item.id,
-          title: title || item.id,
-        },
-      });
-    } else if (Object.keys(dataAssets).length) {
+    const isSupported =
+      item.links.some((link) => ["wms", "xyz"].includes(link.rel)) ||
+      Object.keys(dataAssets).length;
+
+    if (isSupported) {
       jsonArray.push(
+        ...createLayersFromLinks(uid(), title, item),
+
         ...(await createLayersFromDataAssets(
-          this.#collectionStac?.title || item.id,
-          this.#collectionStac?.title || item.id,
+          uid(),
+          title || this.#collectionStac?.title || item.id,
           dataAssets,
           style,
           layerConfig,
         )),
       );
-    } else if (item.geometry) {
-      // fall back to rendering the feature
-      jsonArray.push({
-        type: "Vector",
-        source: {
-          type: "Vector",
-          url: "data:," + encodeURIComponent(JSON.stringify(item.geometry)),
-          format: "GeoJSON",
-        },
+    } else {
+      // fallback to STAC
+      const json = {
+        type: "STAC",
+        displayWebMapLink: true,
+        displayFootprint: false,
+        data: item,
         properties: {
           id: item.id,
-          title: this.#collectionStac?.title || item.id,
-          layerConfig: {
-            ...layerConfig,
-            style,
-          },
+          title: title || item.id,
+          layerConfig,
         },
-      });
+        style,
+      };
+      extractRoles(json.properties, /** @type {string[]} */ (item?.roles));
+      jsonArray.push(json);
     }
 
     return jsonArray;
@@ -300,26 +211,6 @@ export class EodashCollection {
     );
   }
 
-  /**
-   * @param {import("stac-ts").StacItem} item
-   * @param {string} itemUrl
-   **/
-  async fetchStyle(item, itemUrl) {
-    const styleLink = item.links.find((link) => link.rel.includes("style"));
-    if (styleLink) {
-      let url = "";
-      if (styleLink.href.startsWith("http")) {
-        url = styleLink.href;
-      } else {
-        url = toAbsolute(styleLink.href, itemUrl);
-      }
-
-      /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:object}} */
-      const styleJson = await axios.get(url).then((resp) => resp.data);
-      return styleJson;
-    }
-  }
-
   getDates() {
     return (
       this.#collectionStac?.links
@@ -334,4 +225,35 @@ export class EodashCollection {
         .map((i) => new Date(/** @type {number} */ (i.datetime)))
     );
   }
+
+  async getExtent() {
+    if (!this.#collectionStac) {
+      const stac = await axios
+        .get(this.#collectionUrl)
+        .then((resp) => resp.data);
+      this.#collectionStac = new Collection(stac);
+    }
+    return this.#collectionStac?.extent;
+  }
+
+  /**
+   * Get closest Item Link from a certain date,
+   * get the latest if no date provided
+   *  @param {Date} [date]
+   **/
+  getItem(date) {
+    return date
+      ? this.getItems()?.sort((a, b) => {
+          const distanceA = Math.abs(
+            new Date(/** @type {number} */ (a.datetime)).getTime() -
+              date.getTime(),
+          );
+          const distanceB = Math.abs(
+            new Date(/** @type {number} */ (b.datetime)).getTime() -
+              date.getTime(),
+          );
+          return distanceA - distanceB;
+        })[0]
+      : this.getItems()?.at(-1);
+  }
 }

package/core/client/utils/helpers.js

@@ -1,8 +1,9 @@
-import { changeMapProjection, registerProjection } from "@/store/Actions";
+import { changeMapProjection } from "@/store/Actions";
 import { availableMapProjection } from "@/store/States";
 import { toAbsolute } from "stac-js/src/http.js";
+import axios from "axios";
 
-/** @param {import("stac-ts").StacLink[]} links */
+/** @param {import("stac-ts").StacLink[]} [links] */
 export function generateFeatures(links) {
   /**
    * @type {{
@@ -14,7 +15,7 @@ export function generateFeatures(links) {
    * }[]}
    */
   const features = [];
-  links.forEach((element) => {
+  links?.forEach((element) => {
     if (element.rel === "item" && "latlng" in element) {
       const [lat, lon] = /** @type {string} */ (element.latlng)
         .split(",")
@@ -41,82 +42,21 @@ export function generateFeatures(links) {
   return geojsonObject;
 }
 
-/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: object } } [style] */
+/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } } [style] */
 export function extractLayerConfig(style) {
-  /** @type {Record<string,unknown>} */
-  let layerConfig = {};
+  /** @type {Record<string,unknown> | undefined} */
+  let layerConfig = undefined;
   if (style?.jsonform) {
     layerConfig = { schema: style.jsonform, type: "style" };
-    delete style?.jsonform;
+    delete style.jsonform;
   }
   return { layerConfig, style };
 }
-/**
- * @param {string} id
- * @param {string} title
- * @param {Record<string,import("stac-ts").StacAsset>} assets
- * @param {import("ol/layer/WebGLTile").Style} [style]
- * @param {Record<string, unknown>} [layerConfig]
- **/
-export async function createLayersFromDataAssets(
-  id,
-  title,
-  assets,
-  style,
-  layerConfig,
-) {
-  let jsonArray = [];
-  let geoTIFFSources = [];
-  for (const ast in assets) {
-    // register projection if exists
-    await registerProjection(
-      /** @type {number | undefined} */ (assets[ast]?.["proj:epsg"]),
-    );
-
-    if (assets[ast]?.type === "application/geo+json") {
-      jsonArray.push({
-        type: "Vector",
-        source: {
-          type: "Vector",
-          url: assets[ast].href,
-          format: "GeoJSON",
-        },
-        properties: {
-          id,
-          title,
-          layerConfig: {
-            ...layerConfig,
-            style,
-          },
-        },
-      });
-    } else if (assets[ast]?.type === "image/tiff") {
-      geoTIFFSources.push({ url: assets[ast].href });
-    }
-  }
-  if (geoTIFFSources.length) {
-    jsonArray.push({
-      type: "WebGLTile",
-      source: {
-        type: "GeoTIFF",
-        normalize: style?.variables ? false : true,
-        sources: geoTIFFSources,
-      },
-      properties: {
-        id,
-        title,
-        layerConfig,
-      },
-      style,
-    });
-  }
-  return jsonArray;
-}
 
 /**
  * checks if there's a projection on the Collection and
  * updates {@link availableMapProjection}
- * @param {import('stac-ts').StacCollection} STAcCollection
+ * @param {import('stac-ts').StacCollection} [STAcCollection]
  */
 export const setMapProjFromCol = (STAcCollection) => {
   // if a projection exists on the collection level
@@ -170,3 +110,43 @@ export function extractCollectionUrls(stacObject, basepath) {
   }
   return collectionUrls;
 }
+
+export const uid = () =>
+  Date.now().toString(36) + Math.random().toString(36).substring(2);
+
+/**
+ * Assign extracted roles to layer properties
+ * @param {Record<string,any>} properties
+ * @param {string[]} roles
+ * */
+export const extractRoles = (properties, roles) => {
+  roles?.forEach((role) => {
+    if (role === "visible") {
+      properties.visible = true;
+    }
+    if (role === "overlay" || role === "baselayer") {
+      properties.group = role;
+    }
+    return properties;
+  });
+};
+
+/**
+ * @param {import("stac-ts").StacItem} item
+ * @param {string} itemUrl
+ **/
+export const fetchStyle = async (item, itemUrl) => {
+  const styleLink = item.links.find((link) => link.rel.includes("style"));
+  if (styleLink) {
+    let url = "";
+    if (styleLink.href.startsWith("http")) {
+      url = styleLink.href;
+    } else {
+      url = toAbsolute(styleLink.href, itemUrl);
+    }
+
+    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
+    const styleJson = await axios.get(url).then((resp) => resp.data);
+    return styleJson;
+  }
+};

package/dist/client/{DashboardLayout-C_3q8Y10.js → DashboardLayout-D5c2wAGC.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-DQrnLsI2.js";
-import { V as k } from "./VMain-OenWyy46.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-wn9bbgx9.js";
+import { V as k } from "./VMain-BDVUXNEk.js";
 class A extends HTMLElement {
   static get observedAttributes() {
     return ["gap"];

package/dist/client/{DynamicWebComponent-IiTTLBt-.js → DynamicWebComponent-CBuMCUIj.js}

@@ -1,5 +1,5 @@
-import { bC as i, aA as m, r as p, Z as d, aL as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-DQrnLsI2.js";
-const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
+import { bE as i, aA as m, r as p, Z as d, aM as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-wn9bbgx9.js";
+const h = { class: "d-flex flex-column fill-height overflow-auto" }, E = {
   __name: "DynamicWebComponent",
   props: {
     link: {
@@ -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, {
@@ -53,5 +53,5 @@ const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
   }
 };
 export {
-  N as default
+  E as default
 };