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

package/README.md

@@ -4,7 +4,7 @@ A package for creating earth observation dashboards. To learn more about eodash
 
 ## Usage
 
-Checkout the [documentation](https://eodash.github.io/eodash/get-started.html) for a detailed guide.
+Checkout the [documentation](https://eodash.github.io/eodash/) for a detailed guide.
 
 ## Get Started
 

package/core/client/composables/EodashMap.js

@@ -0,0 +1,296 @@
+import { EodashCollection } from "@/utils/eodashSTAC";
+import { setMapProjFromCol } from "@/utils/helpers";
+import { onMounted, onUnmounted, watch } from "vue";
+import log from "loglevel";
+/**
+ * Description placeholder
+ *
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> & {map:import("ol").Map } | null>} mapElement
+ * @param {import("vue").Ref<(number | undefined)[]>} mapPosition
+ */
+export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
+  /** @type {import("openlayers").EventsListenerFunctionType} */
+  const handleMoveEnd = (evt) => {
+    const map = /** @type {import("openlayers").Map | undefined} */ (
+      /** @type {any} */ (evt).map
+    );
+    const lonlat = mapElement.value?.lonLatCenter;
+    const z = map?.getView().getZoom();
+    if (
+      lonlat &&
+      !Number.isNaN(lonlat[0]) &&
+      !Number.isNaN(lonlat[1]) &&
+      !Number.isNaN(z)
+    ) {
+      mapPosition.value = [lonlat[0], lonlat[1], z];
+    }
+  };
+
+  onMounted(() => {
+    /** @type {import('ol/Map').default} */
+    (mapElement.value?.map)?.on("moveend", handleMoveEnd);
+  });
+
+  onUnmounted(() => {
+    /** @type {import('ol/Map').default} */
+    (mapElement.value?.map)?.un("moveend", handleMoveEnd);
+  });
+};
+
+/**
+ *  Adds data layers extracted from eodash collections to Analysis Group
+ *
+ * @param { Record<string,any>[] | undefined} layersCollection
+ * @param {EodashCollection[]} eodashCols
+ * @param {string} [updatedTime]
+ */
+const updateLayersConfig = async (
+  layersCollection,
+  eodashCols,
+  updatedTime,
+) => {
+  log.debug(
+    "Updating layer configuration",
+    layersCollection,
+    eodashCols,
+    updatedTime,
+  );
+  /** @type {Record<string,any>[]} */
+  const analysisLayers = [];
+
+  for (const ec of eodashCols) {
+    let layers;
+    if (updatedTime) {
+      layers = await ec.createLayersJson(new Date(updatedTime));
+    } else {
+      layers = await ec.createLayersJson();
+    }
+
+    if (layers) {
+      analysisLayers.push(...layers);
+    }
+  }
+  // Add expand to all analysis layers
+  analysisLayers.forEach((dl) => {
+    dl.properties.layerControlExpand = true;
+    dl.properties.layerControlToolsExpand = true;
+  });
+
+  const dataLayersGroup = layersCollection?.find(
+    (lyr) => lyr?.properties.id === "AnalysisGroup",
+  );
+  if (dataLayersGroup) {
+    dataLayersGroup.layers = analysisLayers;
+  }
+
+  return layersCollection;
+};
+
+/**
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ *  } selectedIndicator
+ */
+
+const createLayersConfig = async (selectedIndicator) => {
+  log.debug("Creating layers config", selectedIndicator);
+  const layersCollection = [];
+  const dataLayers = {
+    type: "Group",
+    properties: {
+      id: "AnalysisGroup",
+      title: "Analysis Layers",
+      layerControlExpand: true,
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  layersCollection.push(dataLayers);
+  const indicatorLayers =
+    //@ts-expect-error indicator is collection
+    await EodashCollection.getIndicatorLayers(selectedIndicator);
+
+  const baseLayers = {
+    type: "Group",
+    properties: {
+      id: "BaseLayersGroup",
+      title: "Base Layers",
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  const indicatorBaseLayers = indicatorLayers.filter(
+    (l) => l.properties.group === "baselayer",
+  );
+
+  if (indicatorBaseLayers.length) {
+    // Only one baselayer can be set to visible, let's first set all to
+    // false that have not a dedicated property visible, then check
+    // if there are more then one visible and only allow one
+    let counter = 0;
+    let lastPos = 0;
+    for (let indx = 0; indx < indicatorBaseLayers.length; indx++) {
+      const bl = indicatorBaseLayers[indx];
+      if (!("visible" in bl.properties)) {
+        bl.properties.visible = false;
+      }
+
+      if (bl.properties.visible) {
+        counter++;
+        lastPos = indx;
+      }
+    }
+
+    // if none visible set the last one as visible
+    if (counter === 0) {
+      indicatorBaseLayers[0].properties.visible = true;
+    }
+
+    // disable all apart from last
+    if (counter > 0) {
+      indicatorBaseLayers.forEach((bl, indx) => {
+        if (indx !== lastPos) {
+          bl.properties.visible = false;
+        } else {
+          bl.properties.visible = true;
+        }
+      });
+    }
+
+    baseLayers.layers.push(...indicatorBaseLayers);
+
+    // Add exclusive to baselayers and make sure only one is selected
+    baseLayers.layers.forEach((bl) => {
+      bl.properties.layerControlExclusive = true;
+    });
+  } else {
+    // Default to some baselayer
+    baseLayers.layers.push({
+      type: "Tile",
+      properties: {
+        id: "osm",
+        title: "Background",
+        layerControlExclusive: true,
+      },
+      source: {
+        type: "OSM",
+      },
+    });
+  }
+
+  if (baseLayers.layers.length) {
+    layersCollection.push(baseLayers);
+  }
+
+  const overlayLayers = {
+    type: "Group",
+    properties: {
+      id: "OverlayGroup",
+      title: "Overlay Layers",
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  const indicatorOverlays = indicatorLayers.filter(
+    (l) => l.properties.group === "overlay",
+  );
+
+  if (indicatorOverlays.length) {
+    overlayLayers.layers.push(...indicatorOverlays);
+    layersCollection.unshift(overlayLayers);
+  }
+
+  return layersCollection;
+};
+
+/**
+ * Description placeholder
+ *
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} mapElement
+ * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
+ * @param {EodashCollection[]} eodashCols
+ * @param {import("vue").Ref<string>} datetime
+ */
+export const useInitMap = (
+  mapElement,
+  selectedIndicator,
+  eodashCols,
+  datetime,
+) => {
+  log.debug(
+    "InitMap",
+    mapElement.value,
+    selectedIndicator.value,
+    eodashCols.values,
+    datetime.value,
+  );
+
+  const stopIndicatorWatcher = watch(
+    selectedIndicator,
+    async (updatedStac) => {
+      log.debug(
+        "SelectedIndicator watch triggered",
+        selectedIndicator,
+        updatedStac,
+      );
+      if (updatedStac) {
+        const layersCollection = await createLayersConfig(updatedStac);
+
+        // updates layersCollection in place
+        await updateLayersConfig(layersCollection, eodashCols, datetime.value);
+
+        // Set projection based on indicator level information
+        setMapProjFromCol(updatedStac);
+
+        // Try to move map view to extent
+        // Sanitize extent,
+        const b = updatedStac.extent?.spatial.bbox[0];
+        const sanitizedExtent = [
+          b[0] > -180 ? b[0] : -180,
+          b[1] > -90 ? b[1] : -90,
+          b[2] < 180 ? b[2] : 180,
+          b[3] < 90 ? b[3] : 90,
+        ];
+        const reprojExtent = mapElement.value?.transformExtent(
+          sanitizedExtent,
+          "EPSG:4326",
+          mapElement.value?.map?.getView().getProjection(),
+        );
+        /** @type {any} */
+        (mapElement.value).zoomExtent = reprojExtent;
+
+        // TODO: resetting layers to empty array first because smart layer update has issues
+        log.debug(
+          "WARN: Map configuration being completely, should be changed once smart update of config is reworked",
+        );
+        /** @type {any} */
+        (mapElement.value).layers = [];
+        /** @type {any} */
+        (mapElement.value).layers = layersCollection;
+      }
+    },
+    { immediate: true },
+  );
+
+  const stopDatetimeWatcher = watch(
+    datetime,
+    async (updatedTime, previousTime) => {
+      if (updatedTime && updatedTime !== previousTime) {
+        const layersCollection = await updateLayersConfig(
+          [...(mapElement.value?.layers ?? [])],
+          eodashCols,
+          updatedTime,
+        );
+        /** @type {any} */
+        (mapElement.value).layers = layersCollection?.reverse();
+      }
+    },
+  );
+
+  onUnmounted(() => {
+    stopIndicatorWatcher();
+    stopDatetimeWatcher();
+  });
+};

package/core/client/composables/index.js

@@ -12,6 +12,7 @@ import eodash from "@/eodash";
 import { useTheme } from "vuetify/lib/framework.mjs";
 import { onMounted, watch } from "vue";
 import { useSTAcStore } from "@/store/stac";
+import log from "loglevel";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -102,50 +103,60 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
 };
 
 /** Composable that syncs store and URLSearchParameters */
-
 export const useURLSearchParametersSync = () => {
   onMounted(async () => {
     // Analyze currently set url params when first loaded and set them in the store
     if (window.location.search) {
       const searchParams = new URLSearchParams(window.location.search);
+
       /** @type {number | undefined} */
       let x,
         /** @type {number | undefined} */
         y,
         /** @type {number | undefined} */
         z;
-      searchParams.forEach(async (value, key) => {
+      for (const [key, value] of searchParams) {
         switch (key) {
           case "indicator": {
+            log.debug("Found indicator key in url");
             const { loadSelectedSTAC, stac } = useSTAcStore();
             const match = stac?.find((link) => link.id == value);
             if (match) {
+              log.debug("Found match, loading stac item", match);
               await loadSelectedSTAC(match.href);
             }
             break;
           }
+
           case "x":
             x = Number(value);
             break;
+
           case "y":
             y = Number(value);
             break;
+
           case "z":
             z = Number(value);
             break;
+
           case "datetime":
             try {
-              datetime.value = new Date(value).toISOString();
+              const datetimeiso = new Date(value).toISOString();
+              log.debug("Valid datetime found", datetimeiso);
+              datetime.value = datetimeiso;
             } catch {
               datetime.value = new Date().toISOString();
             }
             break;
+
           default:
             break;
         }
-      });
+      }
 
       if (x && y && z) {
+        log.debug("Coordinates found, applying map poisition", x, y, z);
         mapPosition.value = [x, y, z];
       }
     }

package/core/client/eodash.js

@@ -1,5 +1,9 @@
 import { reactive } from "vue";
 import { currentUrl } from "./store/States";
+import log from "loglevel";
+
+/* set log level */
+log.setLevel("debug", true);
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app, and used as an
@@ -9,8 +13,9 @@ import { currentUrl } from "./store/States";
  */
 export const eodash = reactive({
   id: "demo",
-  stacEndpoint:
-    "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  stacEndpoint: "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
+  // stacEndpoint: "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  //stacEndpoint: "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",

package/core/client/plugins/axios.js

@@ -0,0 +1,8 @@
+import Axios from "axios";
+import { setupCache } from "axios-cache-interceptor";
+
+const instance = Axios.create();
+
+export const axios = setupCache(instance, { cacheTakeover: false });
+
+export default axios;

package/core/client/store/Actions.js

@@ -1,4 +1,6 @@
-import { mapEl, registeredProjections } from "@/store/States";
+import { mapEl, mapCompareEl, registeredProjections } from "@/store/States";
+import { getProjectionCode } from "@/utils/helpers";
+import log from "loglevel";
 
 /**
  * Returns the current layers of {@link mapEl}
@@ -8,31 +10,50 @@ export const getLayers = () => mapEl.value?.layers.toReversed();
 
 /**
  * Register EPSG projection in `eox-map`
- * @param {string|number} [code]*/
-export const registerProjection = async (code) => {
-  code = typeof code === "number" ? `EPSG:${code}` : code;
+ * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/
+export const registerProjection = async (projection) => {
+  let code = getProjectionCode(projection);
   if (!code || registeredProjections.includes(code)) {
     return;
   }
-
+  log.debug("Unregistered projection found, registering it", code);
   registeredProjections.push(code);
-  await mapEl.value?.registerProjectionFromCode(code);
+  if (typeof projection === "object") {
+    // registering whole projection definition
+    await mapEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+  } else {
+    await mapEl.value?.registerProjectionFromCode(code);
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjectionFromCode(code);
+  }
 };
 /**
- * Change `eox-map` projection from an `EPSG` code
- *  @param {string|number} [code]*/
-export const changeMapProjection = async (code) => {
-  code = typeof code === "number" ? `EPSG:${code}` : code;
+ * Change `eox-map` projection from an `EPSG` projection
+ *  @param {string|number|{name: string, def: string}} [projection]*/
+export const changeMapProjection = async (projection) => {
+  let code = getProjectionCode(projection);
 
   if (!code) {
     mapEl.value?.setAttribute("projection", "EPSG:3857");
+    mapCompareEl.value?.setAttribute("projection", "EPSG:3857");
     return;
   }
 
   if (!registeredProjections.includes(code)) {
-    await registerProjection(code);
+    await registerProjection(projection);
   }
 
   code = mapEl.value?.getAttribute("projection") === code ? "EPSG:3857" : code;
   mapEl.value?.setAttribute("projection", code);
+  mapCompareEl.value?.setAttribute("projection", code);
 };

package/core/client/store/States.js

@@ -1,3 +1,7 @@
+/** setting default log level globally to warning */
+import log from "loglevel";
+log.setLevel(log.levels.WARN, true);
+
 import { ref } from "vue";
 
 /** Currently selected STAC endpoint */
@@ -22,7 +26,10 @@ export const mapPosition = ref([]);
 export const registeredProjections = ["EPSG:4326", "EPSG:3857"];
 
 /** available projection to be rendered by `EodashMap` */
-export const availableMapProjection = ref("");
+export const availableMapProjection = ref("EPSG:3857");
 
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 export const mapEl = ref(null);
+
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+export const mapCompareEl = ref(null);

package/core/client/store/stac.js

@@ -1,9 +1,13 @@
 import { defineStore } from "pinia";
 import { inject, ref } from "vue";
-import axios from "axios";
+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 { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { EodashCollection } from "@/utils/eodashSTAC";
+import log from "loglevel";
 
 export const useSTAcStore = defineStore("stac", () => {
   /**
@@ -49,6 +53,7 @@ export const useSTAcStore = defineStore("stac", () => {
    * @see {@link stac}
    */
   async function loadSTAC(url = eodash.stacEndpoint) {
+    log.debug("Loading STAC endpoint", url);
     await axios
       .get(url)
       .then((resp) => {
@@ -60,6 +65,7 @@ export const useSTAcStore = defineStore("stac", () => {
           }
           return link;
         });
+        log.debug("Setting selected STAC", links);
         stac.value = links;
       })
       .catch((err) => {
@@ -80,9 +86,28 @@ export const useSTAcStore = defineStore("stac", () => {
 
     await axios
       .get(absoluteUrl.value)
-      .then((resp) => {
-        selectedStac.value = resp.data;
-        indicator.value = selectedStac.value?.id ?? "";
+      .then(async (resp) => {
+        // init eodash collections
+        const collectionUrls = extractCollectionUrls(
+          resp.data,
+          absoluteUrl.value,
+        );
+
+        await Promise.all(
+          collectionUrls.map((cu) => {
+            const ec = new EodashCollection(cu);
+            ec.fetchCollection();
+            return ec;
+          }),
+        ).then((collections) => {
+          // empty array from old collections
+          eodashCollections.splice(0, eodashCollections.length);
+          // update eodashCollections
+          eodashCollections.push(...collections);
+
+          selectedStac.value = resp.data;
+          indicator.value = selectedStac.value?.id ?? "";
+        });
       })
       .catch((err) => {
         throw new Error("error loading the selected STAC", err);
@@ -102,19 +127,47 @@ export const useSTAcStore = defineStore("stac", () => {
 
     await axios
       .get(absoluteUrl.value)
-      .then((resp) => {
-        selectedCompareStac.value = resp.data;
+      .then(async (resp) => {
+        // init eodash collections
+        const collectionUrls = extractCollectionUrls(
+          resp.data,
+          absoluteUrl.value,
+        );
+
+        await Promise.all(
+          collectionUrls.map((cu) => {
+            const ec = new EodashCollection(cu);
+            ec.fetchCollection();
+            return ec;
+          }),
+        ).then((collections) => {
+          // empty array from old collections
+          eodashCompareCollections.splice(0, eodashCompareCollections.length);
+          // update eodashCompareCollections
+          eodashCompareCollections.push(...collections);
+
+          selectedCompareStac.value = resp.data;
+        });
       })
       .catch((err) => {
         throw new Error("error loading the selected comparison STAC", err);
       });
   }
 
+  /**
+   * Reset selected compare stac object
+   *
+   */
+  async function resetSelectedCompareSTAC() {
+    selectedCompareStac.value = null;
+  }
+
   return {
     stac,
     loadSTAC,
     loadSelectedSTAC,
     loadSelectedCompareSTAC,
+    resetSelectedCompareSTAC,
     selectedStac,
     selectedCompareStac,
   };

package/core/client/types.d.ts

@@ -260,10 +260,14 @@ export interface EodashStore {
     /**
      * Register EPSG projection in `eox-map` and adds it to {@link EodashStore.states.availableMapProjection `availableMapProjection`` }
      * */
-    registerProjection: (code?: number | string) => Promise<void>;
+    registerProjection: (
+      code?: number | string | { name: string; def: string },
+    ) => Promise<void>;
 
     /** Change `eox-map` projection from an `EPSG` code */
-    changeMapProjection: (code?: number | string) => Promise<void>;
+    changeMapProjection: (
+      code?: number | string | { name: string; def: string },
+    ) => Promise<void>;
   };
 
   /** Pinia store definition used to navigate the root STAC catalog. */