@eodash/eodash 5.0.0-alpha.2.26 → 5.0.0-alpha.2.27

package/core/client/{utils/eodashSTAC.js → eodashSTAC/EodashCollection.js}

@@ -13,7 +13,7 @@ import {
   getLayers,
   getCompareLayers,
   registerProjection,
-} from "@/store/Actions";
+} from "@/store/actions";
 import { createLayersFromAssets, createLayersFromLinks } from "./createLayers";
 import axios from "@/plugins/axios";
 import log from "loglevel";
@@ -24,11 +24,6 @@ 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
@@ -36,6 +31,11 @@ export class EodashCollection {
    */
   selectedItem;
 
+  //  read only
+  get collectionStac() {
+    return this.#collectionStac;
+  }
+
   /** @param {string} collectionUrl */
   constructor(collectionUrl) {
     this.#collectionUrl = collectionUrl;
@@ -84,9 +84,7 @@ export class EodashCollection {
       this.selectedItem = this.getItem();
 
       if (this.selectedItem) {
-        layersJson = /** @type {Record<string,any>[]} */ (
-          await this.createLayersJson(this.selectedItem)
-        );
+        layersJson = await this.createLayersJson(this.selectedItem);
       } else {
         console.warn(
           "[eodash] the selected collection does not include any items",
@@ -112,7 +110,7 @@ export class EodashCollection {
    * @param {string} title
    * @param {boolean} isGeoDB
    * @param {string} [itemDatetime]
-   * @returns {Promise<Record<string,any>[]>} arrays
+   * @returns {Promise<Record<string,any>[]>} layers
    * */
   async buildJsonArray(item, itemUrl, title, isGeoDB, itemDatetime) {
     log.debug(
@@ -136,29 +134,8 @@ export class EodashCollection {
     const jsonArray = [];
 
     if (isGeoDB) {
-      const allFeatures = generateFeatures(this.#collectionStac?.links);
-
-      return [
-        {
-          type: "Vector",
-          properties: {
-            id: this.#collectionStac?.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",
-          },
-        },
-      ];
+      // handled by getGeoDBLayer
+      return [];
     }
 
     // I propose following approach, we "manually" create configurations
@@ -191,7 +168,7 @@ export class EodashCollection {
       let extraProperties = null;
       if (this.#collectionStac?.assets?.legend?.href) {
         extraProperties = {
-          description: `<div style="text-align:center; width: 100%">
+          description: `<div style="width: 100%">
             <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
           </div>`,
         };
@@ -345,14 +322,14 @@ export class EodashCollection {
       currentLayers = getCompareLayers();
     }
 
-    const oldLayer = findLayer(currentLayers, layer);
+    /** @type {string | undefined} */
+    const oldLayerID = findLayer(currentLayers, layer)?.properties.id;
 
-    const updatedLayers = replaceLayer(
-      currentLayers,
-      /** @type {Record<string,any> & { properties:{ id:string; title:string } } } */
-      (oldLayer),
-      newLayers,
-    );
+    if (!oldLayerID) {
+      return;
+    }
+
+    const updatedLayers = replaceLayer(currentLayers, oldLayerID, newLayers);
 
     return updatedLayers;
   }
@@ -395,4 +372,61 @@ export class EodashCollection {
       )),
     ];
   }
+
+  /**
+   * Returns GeoDB layer from a list of EodashCollections
+   *
+   * @param {EodashCollection[]} eodashCollections
+   *
+   **/
+  static getGeoDBLayer(eodashCollections) {
+    const allFeatures = [];
+    for (const collection of eodashCollections) {
+      const isGeoDB = collection.#collectionStac?.endpointtype === "GeoDB";
+      if (!isGeoDB) {
+        continue;
+      }
+      const collectionFeatures = generateFeatures(
+        collection.#collectionStac?.links,
+      ).features;
+      if (collectionFeatures.length) {
+        allFeatures.push(
+          generateFeatures(collection.#collectionStac?.links).features,
+        );
+      }
+    }
+    if (allFeatures.length) {
+      const featureCollection = {
+        type: "FeatureCollection",
+        crs: {
+          type: "name",
+          properties: {
+            name: "EPSG:4326",
+          },
+        },
+        features: allFeatures.flat(),
+      };
+      return {
+        type: "Vector",
+        properties: {
+          id: "geodb-collection",
+          title: "GeoDB Collection",
+        },
+        source: {
+          type: "Vector",
+          url: "data:," + encodeURIComponent(JSON.stringify(featureCollection)),
+          format: "GeoJSON",
+        },
+        style: {
+          "circle-radius": 5,
+          "circle-fill-color": "#00417077",
+          "circle-stroke-color": "#004170",
+          "fill-color": "#00417077",
+          "stroke-color": "#004170",
+        },
+        interactions: [],
+      };
+    }
+    return null;
+  }
 }

package/core/client/{utils → eodashSTAC}/createLayers.js

@@ -1,5 +1,5 @@
-import { registerProjection } from "@/store/Actions";
-import { mapEl } from "@/store/States";
+import { registerProjection } from "@/store/actions";
+import { mapEl } from "@/store/states";
 import {
   extractRoles,
   getProjectionCode,
@@ -65,10 +65,11 @@ export async function createLayersFromAssets(
         },
         ...(!style?.variables && { style }),
       };
+
       extractRoles(layer.properties, assets[ast]);
-      if (extraProperties !== null) {
-        layer.properties = { ...layer.properties, ...extraProperties };
-      }
+
+      layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
+
       jsonArray.push(layer);
     } else if (assets[ast]?.type === "image/tiff") {
       geoTIFFIdx = idx;
@@ -96,7 +97,7 @@ export async function createLayersFromAssets(
       },
       style,
     };
-    if (extraProperties !== null) {
+    if (extraProperties) {
       layer.properties = { ...layer.properties, ...extraProperties };
     }
     jsonArray.push(layer);
@@ -150,10 +151,11 @@ export const createLayersFromLinks = async (
       viewProjectionCode,
     );
     log.debug("WMS Layer added", linkId);
-    const tileSize =
+    const tileSize = /** @type {number[]} */ (
       "wms:tilesize" in wmsLink
         ? [wmsLink["wms:tilesize"], wmsLink["wms:tilesize"]]
-        : [512, 512];
+        : [512, 512]
+    );
     let json = {
       type: "Tile",
       properties: {

package/core/client/{utils → eodashSTAC}/helpers.js

@@ -1,5 +1,3 @@
-import { changeMapProjection, registerProjection } from "@/store/Actions";
-import { availableMapProjection } from "@/store/States";
 import { toAbsolute } from "stac-js/src/http.js";
 import axios from "@/plugins/axios";
 import log from "loglevel";
@@ -7,13 +5,7 @@ import log from "loglevel";
 /** @param {import("stac-ts").StacLink[]} [links] */
 export function generateFeatures(links) {
   /**
-   * @type {{
-   *   type: string;
-   *   geometry: {
-   *     type: string;
-   *     coordinates: [number, number];
-   *   };
-   * }[]}
+   * @type {import("geojson").Feature[]}
    */
   const features = [];
   links?.forEach((element) => {
@@ -27,6 +19,7 @@ export function generateFeatures(links) {
           type: "Point",
           coordinates: [lon, lat],
         },
+        properties: { id: element.id },
       });
     }
   });
@@ -43,7 +36,10 @@ export function generateFeatures(links) {
   return geojsonObject;
 }
 
-/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
+/**
+ * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
+ *
+ *  @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
 export function extractLayerConfig(style) {
   /** @type {Record<string,unknown> | undefined} */
   let layerConfig = undefined;
@@ -64,42 +60,6 @@ export function extractLayerConfig(style) {
   return { layerConfig, style };
 }
 
-/**
- * checks if there's a projection on the Collection and
- * updates {@link availableMapProjection}
- * @param {import('stac-ts').StacCollection} [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} */
-    (
-      STAcCollection?.["eodash:mapProjection"] ||
-        STAcCollection?.["proj:epsg"] ||
-        STAcCollection?.["eodash:proj4_def"]
-    );
-  if (projection) {
-    log.debug("Projection found", projection);
-    await registerProjection(projection);
-    const projectionCode = getProjectionCode(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
-    log.debug("Resetting projection to default EPSG:3857");
-    await changeMapProjection((availableMapProjection.value = ""));
-  }
-};
-
 /**
  * Function to extract collection urls from an indicator
  * @param {import("stac-ts").StacCatalog
@@ -108,25 +68,24 @@ export const setMapProjFromCol = async (STAcCollection) => {
  *   | null
  * } stacObject
  * @param {string} basepath
- * @returns {string[]}
  */
 export function extractCollectionUrls(stacObject, basepath) {
+  /** @type {string[]} */
   const collectionUrls = [];
   // Support for two structure types, flat and indicator, simplified here:
   // Flat assumes Catalog-Collection-Item
   // Indicator assumes Catalog-Collection-Collection-Item
-  // TODO: this is not the most stable test approach,
-  // we should discuss potential other approaches
-  if (stacObject?.links && stacObject?.links[1]?.rel === "item") {
+
+  const children = stacObject?.links?.filter(
+    (link) => link.rel === "child" && link.type?.includes("json"),
+  );
+  if (!children?.length) {
     collectionUrls.push(basepath);
-  } else if (stacObject?.links[1]?.rel === "child") {
-    // TODO: Iterate through all children to create collections
-    stacObject.links.forEach((link) => {
-      if (link.rel === "child") {
-        collectionUrls.push(toAbsolute(link.href, basepath));
-      }
-    });
+    return collectionUrls;
   }
+  children.forEach((link) => {
+    collectionUrls.push(toAbsolute(link.href, basepath));
+  });
   return collectionUrls;
 }
 
@@ -143,11 +102,6 @@ export const extractRoles = (properties, linkOrAsset) => {
     }
     if (role === "overlay" || role === "baselayer") {
       properties.group = role;
-      //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;
@@ -155,8 +109,10 @@ export const extractRoles = (properties, linkOrAsset) => {
 };
 
 /**
+ * Extracts style JSON from a STAC Item
  * @param {import("stac-ts").StacItem} item
  * @param {string} itemUrl
+ * @returns
  **/
 export const fetchStyle = async (item, itemUrl) => {
   const styleLink = item.links.find((link) => link.rel.includes("style"));
@@ -197,6 +153,7 @@ export const getProjectionCode = (projection) => {
 };
 
 /**
+ * Extracts layercontrol LayerDatetime property from STAC Links
  * @param {import("stac-ts").StacLink[]} [links]
  * @param {string|null} [currentStep]
  **/
@@ -206,6 +163,7 @@ 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) {
     return undefined;
@@ -242,12 +200,13 @@ export const extractLayerDatetime = (links, currentStep) => {
     controlValues,
     currentStep,
     slider: true,
-    disablePlay: true,
+    play: false,
+    displayFormat: "DD MMMM YYYY",
   };
 };
 
 /**
- * Find layer by ID
+ * Find JSON layer by ID
  *  @param {string} layer
  *  @param {Record<string, any>[]} layers
  *  @returns {Record<string,any> | undefined}
@@ -268,16 +227,24 @@ 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 {Record<string,any>} oldLayer
- * @param {Record<string,any>[]} newLayers
+ * @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}
  */
 export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
   const oldLayerIdx = currentLayers.findIndex(
-    (l) => l.properties.id === oldLayer.properties.id,
+    (l) => l.properties.id === oldLayer,
   );
+
   if (oldLayerIdx !== -1) {
+    log.debug(
+      "Replacing layer",
+      oldLayer,
+      "with",
+      newLayers.map((l) => l.properties.id),
+    );
     currentLayers.splice(oldLayerIdx, 1, ...newLayers);
     return currentLayers;
   }
@@ -292,8 +259,11 @@ export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
     }
   }
 };
+
 /**
- * @param {import('./eodashSTAC.js').EodashCollection[]} indicators
+ * Extracts the STAC collection which the layer was created from.
+ *
+ * @param {import('../eodashSTAC/EodashCollection.js').EodashCollection[]} indicators
  * @param {import('ol/layer').Layer} layer
  */
 export const getColFromLayer = async (indicators, layer) => {
@@ -309,13 +279,15 @@ export const getColFromLayer = async (indicators, layer) => {
       col.links?.some(
         (link) => link.rel === "item" && link.href.includes(itemId),
       );
-    return isInd ?? false;
+    return isInd;
   });
   return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
 };
 
 /**
- * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
+ * Generates layer specific ID from STAC Links
+ * related functions are: {@link assignProjID} & {@link createAssetID}
+ *
  * @param {string} collectionId
  * @param {string} itemId
  * @param {import('stac-ts').StacLink} link
@@ -328,9 +300,8 @@ export const createLayerID = (collectionId, itemId, link, 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))
+    /** @type {string[]} */
+    (link.roles)?.find((r) => ["baselayer", "overlay"].includes(r))
   ) {
     lId = `${linkId ?? ""};:;${projectionCode ?? ""}`;
   }
@@ -339,7 +310,8 @@ export const createLayerID = (collectionId, itemId, link, projectionCode) => {
 };
 
 /**
- * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
+ * Generates layer specific ID from STAC assets, related functions are: {@link assignProjID} & {@link createLayerID}
+ *
  * @param {string} collectionId
  * @param {string} itemId
  * @param {number} index
@@ -352,7 +324,7 @@ export const createAssetID = (collectionId, itemId, index) => {
 };
 
 /**
- *
+ * Assigns projection code to the layer ID
  * @param {import("stac-ts").StacItem} item
  * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
  * @param {string} id - {@link createLayerID} & {@link extractRoles}

package/core/client/eodashSTAC/triggers.js

@@ -0,0 +1,43 @@
+/*
+ * eodashSTAC helpers that utilizes the app states or actions
+ */
+import { changeMapProjection, registerProjection } from "@/store/actions";
+import log from "loglevel";
+import { getProjectionCode } from "./helpers";
+import { availableMapProjection } from "@/store/states";
+
+/**
+ * checks if there's a projection on the Collection and
+ * updates {@link availableMapProjection}
+ * @param {import('stac-ts').StacCollection} [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} */
+    (
+      STAcCollection?.["eodash:mapProjection"] ||
+        STAcCollection?.["proj:epsg"] ||
+        STAcCollection?.["eodash:proj4_def"]
+    );
+  if (projection) {
+    log.debug("Projection found", projection);
+    await registerProjection(projection);
+    const projectionCode = getProjectionCode(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
+    log.debug("Resetting projection to default EPSG:3857");
+    await changeMapProjection((availableMapProjection.value = ""));
+  }
+};

package/core/client/plugins/vuetify.js

@@ -8,7 +8,7 @@
 import "vuetify/styles";
 
 import { createVuetify } from "vuetify";
-import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js";
+import { mdiChevronLeft, mdiChevronRight, mdiMenuDown, mdiPlus } from "@mdi/js";
 
 const vuetify = createVuetify({
   icons: {
@@ -17,6 +17,7 @@ const vuetify = createVuetify({
       next: [mdiChevronRight],
       prev: [mdiChevronLeft],
       subgroup: [mdiMenuDown],
+      plus: [mdiPlus],
     },
   },
   theme: {

package/core/client/store/{Actions.js → actions.js}

@@ -1,5 +1,10 @@
-import { mapEl, mapCompareEl, registeredProjections } from "@/store/States";
-import { getProjectionCode } from "@/utils/helpers";
+import {
+  mapEl,
+  mapCompareEl,
+  registeredProjections,
+  activeTemplate,
+} from "@/store/states";
+import { getProjectionCode } from "@/eodashSTAC/helpers";
 import log from "loglevel";
 
 /**
@@ -63,3 +68,12 @@ export const changeMapProjection = async (projection) => {
   mapEl.value?.setAttribute("projection", code);
   mapCompareEl.value?.setAttribute("projection", code);
 };
+
+/**
+ *
+ * @param {string} template
+ */
+export const setActiveTemplate = (template) => {
+  activeTemplate.value = template;
+  log.debug("Setting active template to", template);
+};

package/core/client/store/index.js

@@ -1,20 +1,6 @@
 //export all actions, states, and pinia stores
+import { useSTAcStore } from "./stac";
+import * as actions from "./actions";
+import * as states from "./states";
 
-const storesImport = import.meta.glob("../store/**.js", { eager: true });
-
-const store = /** @type {import("@/types").EodashStore} */ (
-  (() => {
-    const stores = {};
-    for (const [filePath, importedstore] of Object.entries(storesImport)) {
-      const storeType =
-        filePath.split("/").at(-1)?.slice(0, -3).toLowerCase() ?? "";
-      if (!["keys"].includes(storeType)) {
-        //@ts-expect-error `importedstore` cant be typed individually
-        stores[storeType] = importedstore;
-      }
-    }
-    return stores;
-  })()
-);
-
-export default store;
+export default { stac: { useSTAcStore }, actions, states };

package/core/client/store/stac.js

@@ -3,10 +3,10 @@ import { inject, ref } from "vue";
 import axios from "@/plugins/axios";
 import { useAbsoluteUrl, useCompareAbsoluteUrl } from "@/composables/index";
 import { eodashKey } from "@/utils/keys";
-import { indicator } from "@/store/States";
-import { extractCollectionUrls } from "@/utils/helpers";
+import { indicator } from "@/store/states";
+import { extractCollectionUrls } from "@/eodashSTAC/helpers";
 import { eodashCollections, eodashCompareCollections } from "@/utils/states";
-import { EodashCollection } from "@/utils/eodashSTAC";
+import { EodashCollection } from "@/eodashSTAC/EodashCollection";
 import log from "loglevel";
 
 export const useSTAcStore = defineStore("stac", () => {
@@ -126,7 +126,7 @@ export const useSTAcStore = defineStore("stac", () => {
       .get(absoluteUrl.value)
       .then(async (resp) => {
         // init eodash collections
-        const collectionUrls = extractCollectionUrls(
+        const collectionUrls = await extractCollectionUrls(
           resp.data,
           absoluteUrl.value,
         );

package/core/client/store/{States.js → states.js}

@@ -33,3 +33,5 @@ export const mapEl = ref(null);
 
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 export const mapCompareEl = ref(null);
+
+export const activeTemplate = ref("");