@eodash/eodash 5.0.0 → 5.2.0

package/core/client/eodashSTAC/EodashCollection.js

@@ -7,7 +7,9 @@ import {
   fetchStyle,
   findLayer,
   generateFeatures,
+  getDatetimeProperty,
   replaceLayer,
+  extractLayerLegend,
 } from "./helpers";
 import {
   getLayers,
@@ -57,10 +59,10 @@ export class EodashCollection {
     /**
      * @type {import("stac-ts").StacLink | undefined}
      **/
-    let stacItem;
+    let itemLink;
 
     /**
-     * @type {import("stac-ts").StacCollection | undefined}
+     * @type {import("stac-ts").StacCollection | import("stac-ts").StacItem | undefined}
      **/
     let stac;
     // TODO get auxiliary layers from collection
@@ -70,22 +72,26 @@ export class EodashCollection {
     // Load collectionstac if not yet initialized
     stac = await this.fetchCollection();
 
-    const isGeoDB = stac?.endpointtype === "GeoDB";
+    const isObservationPoint = stac?.endpointtype === "GeoDB";
 
     if (linkOrDate instanceof Date) {
       // if collectionStac not yet initialized we do it here
-      stacItem = this.getItem(linkOrDate);
+      itemLink = this.getItem(linkOrDate);
     } else {
-      stacItem = linkOrDate;
+      itemLink = linkOrDate;
+    }
+    let stacItemUrl = "";
+    if (itemLink?.href.startsWith("blob:")) {
+      stacItemUrl = itemLink.href;
+    } else {
+      stacItemUrl = itemLink
+        ? toAbsolute(itemLink.href, this.#collectionUrl)
+        : this.#collectionUrl;
     }
-
-    const stacItemUrl = stacItem
-      ? toAbsolute(stacItem.href, this.#collectionUrl)
-      : this.#collectionUrl;
 
     stac = await axios.get(stacItemUrl).then((resp) => resp.data);
 
-    if (!stacItem) {
+    if (!itemLink) {
       // no specific item was requested; render last item
       this.#collectionStac = new Collection(stac);
       this.selectedItem = this.getItem();
@@ -105,7 +111,12 @@ export class EodashCollection {
       const title =
         this.#collectionStac?.title || this.#collectionStac?.id || "";
       layersJson.unshift(
-        ...(await this.buildJsonArray(item, stacItemUrl, title, isGeoDB)),
+        ...(await this.buildJsonArray(
+          item,
+          stacItemUrl,
+          title,
+          isObservationPoint,
+        )),
       );
       return layersJson;
     }
@@ -115,20 +126,19 @@ export class EodashCollection {
    * @param {import("stac-ts").StacItem} item
    * @param {string} itemUrl
    * @param {string} title
-   * @param {boolean} isGeoDB
+   * @param {boolean} isObservationPoint
    * @param {string} [itemDatetime]
    * @returns {Promise<Record<string,any>[]>} layers
    * */
-  async buildJsonArray(item, itemUrl, title, isGeoDB, itemDatetime) {
+  async buildJsonArray(item, itemUrl, title, isObservationPoint, itemDatetime) {
     log.debug(
       "Building JSON array",
       item,
       itemUrl,
       title,
-      isGeoDB,
+      isObservationPoint,
       itemDatetime,
     );
-    await this.fetchCollection();
     // registering top level indicator projection
     const indicatorProjection =
       item?.["proj:epsg"] || item?.["eodash:proj4_def"];
@@ -140,8 +150,8 @@ export class EodashCollection {
 
     const jsonArray = [];
 
-    if (isGeoDB) {
-      // handled by getGeoDBLayer
+    if (isObservationPoint) {
+      // handled by getObservationPointsLayer
       return [];
     }
 
@@ -158,7 +168,9 @@ export class EodashCollection {
 
     const layerDatetime = extractLayerDatetime(
       this.getItems(),
-      item.properties?.datetime ?? itemDatetime,
+      item.properties?.datetime ??
+        item.properties.start_datetime ??
+        itemDatetime,
     );
 
     const dataAssets = Object.keys(item?.assets ?? {}).reduce((data, ast) => {
@@ -173,24 +185,12 @@ export class EodashCollection {
 
     if (isSupported) {
       // Checking for potential legend asset
-      let extraProperties = null;
-      if (this.#collectionStac?.assets?.legend?.href) {
-        extraProperties = {
-          description: `<div style="width: 100%">
-            <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
-          </div>`,
-        };
-      }
-      // Check if collection has eox:colorlegend definition, if yes overwrite legend description
-      if (this.#collectionStac && this.#collectionStac["eox:colorlegend"]) {
-        extraProperties = {
-          layerLegend: this.#collectionStac["eox:colorlegend"],
-        };
-      }
+      let extraProperties = extractLayerLegend(this.#collectionStac);
       extraProperties = {
         ...extraProperties,
         ...(this.color && { color: this.color }),
       };
+
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
@@ -198,8 +198,8 @@ export class EodashCollection {
         layerDatetime,
         extraProperties,
       );
+
       jsonArray.push(
-        ...links,
         ...(await createLayersFromAssets(
           this.#collectionStac?.id ?? "",
           title || this.#collectionStac?.title || item.id,
@@ -210,6 +210,8 @@ export class EodashCollection {
           layerDatetime,
           extraProperties,
         )),
+        ...links,
+        // We add the links after the assets so they are layered underneath assets
       );
     } else {
       // fallback to STAC
@@ -247,14 +249,21 @@ export class EodashCollection {
     return this.#collectionStac;
   }
 
+  /**
+   * Returns all item links sorted by datetime ascendingly
+   */
   getItems() {
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    const items = this.#collectionStac?.links.filter((i) => i.rel === "item");
+    if (!datetimeProperty) {
+      return items;
+    }
     return (
-      this.#collectionStac?.links
-        .filter((i) => i.rel === "item")
+      items
         // sort by `datetime`, where oldest is first in array
-        .sort((a, b) =>
-          /** @type {number} */ (a.datetime) <
-          /** @type {number} */ (b.datetime)
+        ?.sort((a, b) =>
+          /** @type {number} */ (a[datetimeProperty]) <
+          /** @type {number} */ (b[datetimeProperty])
             ? -1
             : 1,
         )
@@ -262,22 +271,16 @@ export class EodashCollection {
   }
 
   getDates() {
-    return (
-      this.#collectionStac?.links
-        .filter((i) => i.rel === "item")
-        // sort by `datetime`, where oldest is first in array
-        .sort((a, b) =>
-          /** @type {number} */ (a.datetime) <
-          /** @type {number} */ (b.datetime)
-            ? -1
-            : 1,
-        )
-        .map((i) => new Date(/** @type {number} */ (i.datetime)))
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    if (!datetimeProperty) {
+      return [];
+    }
+    return this.getItems()?.map(
+      (i) => new Date(/** @type {number} */ (i[datetimeProperty])),
     );
   }
 
   async getExtent() {
-    await this.fetchCollection();
     return this.#collectionStac?.extent;
   }
 
@@ -287,14 +290,19 @@ export class EodashCollection {
    *  @param {Date} [date]
    **/
   getItem(date) {
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    if (!datetimeProperty) {
+      // in case no datetime property is found, return the first item
+      return this.getItems()?.[0];
+    }
     return date
       ? this.getItems()?.sort((a, b) => {
           const distanceA = Math.abs(
-            new Date(/** @type {number} */ (a.datetime)).getTime() -
+            new Date(/** @type {number} */ (a[datetimeProperty])).getTime() -
               date.getTime(),
           );
           const distanceB = Math.abs(
-            new Date(/** @type {number} */ (b.datetime)).getTime() -
+            new Date(/** @type {number} */ (b[datetimeProperty])).getTime() -
               date.getTime(),
           );
           return distanceA - distanceB;
@@ -323,12 +331,16 @@ export class EodashCollection {
    */
   async updateLayerJson(datetime, layer, map) {
     await this.fetchCollection();
-
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    if (!datetimeProperty) {
+      console.warn("[eodash] no datetime property found in collection");
+      return;
+    }
     // get the link of the specified date
     const specifiedLink = this.getItems()?.find(
       (item) =>
-        typeof item.datetime === "string" &&
-        new Date(item.datetime).toISOString() === datetime,
+        typeof item[datetimeProperty] === "string" &&
+        new Date(item[datetimeProperty]).toISOString() === datetime,
     );
 
     if (!specifiedLink) {
@@ -348,12 +360,13 @@ export class EodashCollection {
     }
 
     /** @type {string | undefined} */
-    const oldLayerID = findLayer(currentLayers, layer)?.properties.id;
+    const oldLayerID = findLayer(currentLayers, layer)?.properties?.id;
 
     if (!oldLayerID) {
       return;
     }
 
+    //@ts-expect-error TODO
     const updatedLayers = replaceLayer(currentLayers, oldLayerID, newLayers);
 
     return updatedLayers;
@@ -395,16 +408,18 @@ export class EodashCollection {
   }
 
   /**
-   * Returns GeoDB layer from a list of EodashCollections
+   * Returns Observation points layer from a list of EodashCollections
    *
    * @param {EodashCollection[]} eodashCollections
    *
    **/
-  static getGeoDBLayer(eodashCollections) {
+  static getObservationPointsLayer(eodashCollections) {
     const allFeatures = [];
     for (const collection of eodashCollections) {
-      const isGeoDB = collection.#collectionStac?.endpointtype === "GeoDB";
-      if (!isGeoDB) {
+      const isObservationPoint =
+        collection.#collectionStac?.endpointtype === "GeoDB" ||
+        /**@type {boolean} */ (collection.#collectionStac?.locations);
+      if (!isObservationPoint) {
         continue;
       }
       const collectionFeatures = generateFeatures(
@@ -414,6 +429,7 @@ export class EodashCollection {
           geoDBID: collection.#collectionStac?.geoDBID,
           themes: collection.#collectionStac?.themes ?? [],
         },
+        collection.#collectionStac?.locations ? "child" : "item",
       ).features;
 
       if (collectionFeatures.length) {
@@ -475,13 +491,19 @@ export class EodashCollection {
               "circle-radius": 10,
               "circle-fill-color": "#00417077",
               "circle-stroke-color": "#004170",
-              "fill-color": "#0417077",
+              "fill-color": "#00417077",
               "stroke-color": "#004170",
             },
           },
         ];
       })(),
-      interactions: [],
+      interactions: (() => {
+        const oldLayer = findLayer([...getLayers()], "geodb-collection");
+        if (!oldLayer || !oldLayer.interactions?.length) {
+          return [];
+        }
+        return [...oldLayer.interactions];
+      })(),
     };
   }
 }

package/core/client/eodashSTAC/createLayers.js

@@ -95,6 +95,36 @@ export async function createLayersFromAssets(
         url: assets[ast].href,
         attributions: assets[ast].attribution,
       });
+    } else if (assets[ast]?.type === "application/geodb+json") {
+      const responseData = await (await fetch(assets[ast].href)).json();
+      if (
+        !responseData ||
+        !Array.isArray(responseData) ||
+        responseData.length === 0
+      ) {
+        console.error(
+          "[eodash] GeoDB response data is not in expected format",
+          responseData,
+        );
+        continue;
+      }
+      const features = responseData.map((item) => {
+        return {
+          type: "Feature",
+          geometry: item.geometry,
+          // we pass the item making sure to remove geometry to avoid duplication
+          properties: { ...item, geometry: undefined },
+        };
+      });
+      const geojson = {
+        type: "FeatureCollection",
+        features: features,
+      };
+      geoJsonSources.push(
+        encodeURI(
+          "data:application/json;charset=utf-8," + JSON.stringify(geojson),
+        ),
+      );
     }
   }
 

package/core/client/eodashSTAC/helpers.js

@@ -6,14 +6,15 @@ import { getStyleVariablesState } from "./triggers.js";
 /**
  *  @param {import("stac-ts").StacLink[]} [links]
  *  @param {Record<string,any>} [extraProperties]
+ * @param {string} [rel = "item"]
  **/
-export function generateFeatures(links, extraProperties = {}) {
+export function generateFeatures(links, extraProperties = {}, rel = "item") {
   /**
    * @type {import("geojson").Feature[]}
    */
   const features = [];
   links?.forEach((element) => {
-    if (element.rel === "item" && "latlng" in element) {
+    if (element.rel === rel && "latlng" in element) {
       const [lat, lon] = /** @type {string} */ (element.latlng)
         .split(",")
         .map((it) => Number(it));
@@ -177,9 +178,9 @@ export const extractLayerDatetime = (links, currentStep) => {
   }
 
   // check if links has a datetime value
-  // TODO: consider datetime ranges
-  const hasDatetime = links.some((l) => typeof l.datetime === "string");
-  if (!hasDatetime) {
+  const dateProperty = getDatetimeProperty(links);
+
+  if (!dateProperty) {
     return undefined;
   }
 
@@ -187,11 +188,10 @@ export const extractLayerDatetime = (links, currentStep) => {
   const controlValues = [];
   try {
     currentStep = new Date(currentStep).toISOString();
-
     links.reduce((vals, link) => {
-      if (link.datetime && link.rel === "item") {
+      if (link[dateProperty] && link.rel === "item") {
         vals.push(
-          new Date(/** @type {string} */ (link.datetime)).toISOString(),
+          new Date(/** @type {string} */ (link[dateProperty])).toISOString(),
         );
       }
       return vals;
@@ -207,7 +207,12 @@ export const extractLayerDatetime = (links, currentStep) => {
 
   // item datetime is not included in the item links datetime
   if (!controlValues.includes(currentStep)) {
-    return undefined;
+    const currentStepTime = new Date(currentStep).getTime();
+    currentStep = controlValues.reduce((a, b) => {
+      const aDiff = Math.abs(new Date(a).getTime() - currentStepTime);
+      const bDiff = Math.abs(new Date(b).getTime() - currentStepTime);
+      return bDiff < aDiff ? b : a;
+    });
   }
 
   return {
@@ -216,15 +221,15 @@ export const extractLayerDatetime = (links, currentStep) => {
     slider: true,
     navigation: true,
     play: false,
-    displayFormat: "DD.MM.YYYY HH:MM",
+    displayFormat: "DD.MM.YYYY HH:mm",
   };
 };
 
 /**
  * Find JSON layer by ID
  *  @param {string} layer
- *  @param {Record<string, any>[]} layers
- *  @returns {Record<string,any> | undefined}
+ *  @param {import("@eox/map").EoxLayer[]} layers
+ *  @returns {import("@eox/map").EoxLayer | undefined}
  **/
 export const findLayer = (layers, layer) => {
   for (const lyr of layers) {
@@ -235,7 +240,7 @@ export const findLayer = (layers, layer) => {
       }
       return found;
     }
-    if (lyr.properties.id === layer) {
+    if (lyr.properties?.id === layer) {
       return lyr;
     }
   }
@@ -243,14 +248,14 @@ export const findLayer = (layers, layer) => {
 
 /**
  * Removes the layer with the id provided and injects an array of layers in its position
- * @param {Record<string,any>[]} currentLayers
+ * @param {import("@eox/map").EoxLayer[]} currentLayers
  * @param {string} oldLayer - id of the layer to be replaced
- * @param {Record<string,any>[]} newLayers - array of layers to replace the old layer
- * @returns {Record<string,any>[] | undefined}
+ *  @param {import("@eox/map").EoxLayer[]} newLayers - array of layers to replace the old layer
+ * @returns {import("@eox/map").EoxLayer[]}
  */
 export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
   const oldLayerIdx = currentLayers.findIndex(
-    (l) => l.properties.id === oldLayer,
+    (l) => l.properties?.id === oldLayer,
   );
 
   if (oldLayerIdx !== -1) {
@@ -258,10 +263,9 @@ export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
       "Replacing layer",
       oldLayer,
       "with",
-      newLayers.map((l) => l.properties.id),
+      newLayers.map((l) => l.properties?.id),
     );
     currentLayers.splice(oldLayerIdx, 1, ...newLayers);
-    return currentLayers;
   }
 
   for (const l of currentLayers) {
@@ -269,10 +273,10 @@ export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
       const updatedGroupLyrs = replaceLayer(l.layers, oldLayer, newLayers);
       if (updatedGroupLyrs?.length) {
         l.layers = updatedGroupLyrs;
-        return currentLayers;
       }
     }
   }
+  return currentLayers;
 };
 
 /**
@@ -281,18 +285,21 @@ export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
  * @param {import('../eodashSTAC/EodashCollection.js').EodashCollection[]} indicators
  * @param {import('ol/layer').Layer} layer
  */
-export const getColFromLayer = async (indicators, layer) => {
+export const getColFromLayer = (indicators, layer) => {
   // init cols
-  const collections = await Promise.all(
-    indicators.map((ind) => ind.fetchCollection()),
-  );
+  const collections = indicators.map((ind) => ind.collectionStac);
   const [collectionId, itemId, ..._other] = 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),
+      col?.id === collectionId &&
+      col?.links?.some(
+        (link) =>
+          link.rel === "item" &&
+          (link.href.includes(itemId) ||
+            link.id === itemId ||
+            //@ts-expect-error attaching the item in link when parsing .parquet items, see @/eodashSTAC/parquet.js
+            (link["item"] && link["item"].id === itemId)),
       );
     return isInd;
   });
@@ -306,7 +313,7 @@ export const getColFromLayer = async (indicators, layer) => {
  * @param {string} collectionId
  * @param {string} itemId
  * @param {import('stac-ts').StacLink} link
- * @param {string} projectionCode
+ * @param {string | import("ol/proj").ProjectionLike} projectionCode
  *
  */
 export const createLayerID = (collectionId, itemId, link, projectionCode) => {
@@ -419,6 +426,87 @@ export async function mergeGeojsons(geojsonUrls) {
   );
 }
 
+/**
+ *
+ * @param {import("stac-ts").StacItem[]} items
+ */
+export function generateLinksFromItems(items) {
+  /**
+   * @param {string|Date} datetime
+   * @returns
+   */
+  function formateDatetime(datetime) {
+    if (datetime instanceof Date) {
+      return datetime.toISOString();
+    }
+    if (typeof datetime === "string") {
+      const date = new Date(datetime);
+      return date.toISOString();
+    }
+    return datetime;
+  }
+
+  return items.map((item) => {
+    const itemBlob = new Blob([JSON.stringify(item)], {
+      type: "application/geo+json",
+    });
+    // urls are revoked when updating the collection. see updateEodashCollections in "../utils/index.js"
+    const itemUrl = URL.createObjectURL(itemBlob);
+    return {
+      id: item.id,
+      rel: "item",
+      type: "application/geo+json",
+      title: item.id,
+      href: itemUrl,
+      ...(item.properties.datetime && {
+        datetime: formateDatetime(item.properties.datetime),
+      }),
+      ...(item.properties.start_datetime && {
+        start_datetime: formateDatetime(item.properties.start_datetime),
+      }),
+      ...(item.properties.end_datetime && {
+        end_datetime: formateDatetime(item.properties.end_datetime),
+      }),
+      //@ts-expect-error projection extension
+      ...(item.properties?.["proj:epsg"] && {
+        "proj:epsg": /** @type {number} **/ (item.properties["proj:epsg"]),
+      }),
+      //@ts-expect-error eodash projection
+      ...(item.properties?.["eodash:proj4_def"] && {
+        "eodash:proj4_def": item.properties["eodash:proj4_def"],
+      }),
+
+      ...(item.geometry?.type == "Point" &&
+        item.geometry?.coordinates.length && {
+          latlng: item.geometry.coordinates.reverse().join(","),
+        }),
+      ...(Object.values(item.assets ?? {}).some(
+        (asset) =>
+          asset.href.startsWith("s3://veda-data-store") &&
+          asset.type === "image/tiff; application=geotiff",
+      ) && {
+        cog_href: Object.values(item.assets ?? {}).find((asset) =>
+          asset.href.startsWith("s3://veda-data-store"),
+        )?.href,
+      }),
+    };
+  });
+}
+
+/**
+ * @param {import("../eodashSTAC/EodashCollection.js").EodashCollection} collection
+ */
+export function revokeCollectionBlobUrls(collection) {
+  collection.collectionStac?.links.forEach((link) => {
+    if (!(link.rel === "item" && link.type === "application/geo+json")) {
+      return;
+    }
+    if (link.href.startsWith("blob:")) {
+      URL.revokeObjectURL(link.href);
+    }
+  });
+}
+
 /**
  * adds tooltip to the layer if the style has tooltip property
  * @param {Record<string,any>} layer
@@ -441,3 +529,46 @@ export const addTooltipInteraction = (layer, style) => {
     ];
   }
 };
+
+/**
+ *
+ * @param {import("stac-ts").StacLink[]} [links]
+ */
+export function getDatetimeProperty(links) {
+  if (!links?.length) {
+    return undefined;
+  }
+  // TODO: consider other properties for datetime ranges
+  const datetimeProperties = ["datetime", "start_datetime", "end_datetime"];
+  for (const prop of datetimeProperties) {
+    const propExists = links.some(
+      (l) => l[prop] && typeof l[prop] === "string",
+    );
+    if (!propExists) {
+      continue;
+    }
+    return prop;
+  }
+}
+
+/**
+ * @param {import ("stac-ts").StacCollection | undefined | null} collection
+ * @returns {object}
+ */
+export function extractLayerLegend(collection) {
+  let extraProperties = {};
+  if (collection?.assets?.legend?.href) {
+    extraProperties = {
+      description: `<div style="width: 100%">
+          <img src="${collection.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
+        </div>`,
+    };
+  }
+  // Check if collection has eox:colorlegend definition, if yes overwrite legend description
+  if (collection && collection["eox:colorlegend"]) {
+    extraProperties = {
+      layerLegend: collection["eox:colorlegend"],
+    };
+  }
+  return extraProperties;
+}