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

package/core/client/composables/EodashMap.js

@@ -1,7 +1,7 @@
 import { EodashCollection } from "@/utils/eodashSTAC";
 import { setMapProjFromCol } from "@/utils/helpers";
 import { onMounted, onUnmounted, watch } from "vue";
-
+import log from "loglevel";
 /**
  * Description placeholder
  *
@@ -38,32 +38,25 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
 };
 
 /**
+ *  Adds data layers extracted from eodash collections to Analysis Group
  *
- * @param {string} indicatorUrl
- * @param {import("@/utils/eodashSTAC").EodashCollection[]} eodashCols
- * @param {string} updatedTime
- * @param {import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- *  } selectedIndicator
+ * @param { Record<string,any>[] | undefined} layersCollection
+ * @param {EodashCollection[]} eodashCols
+ * @param {string} [updatedTime]
  */
-const createLayersConfig = async (
-  indicatorUrl,
+const updateLayersConfig = async (
+  layersCollection,
   eodashCols,
   updatedTime,
-  selectedIndicator,
 ) => {
-  const layersCollection = [];
-  const dataLayers = {
-    type: "Group",
-    properties: {
-      id: "AnalysisGroup",
-      title: "Analysis Layers",
-      layerControlExpand: true,
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
+  log.debug(
+    "Updating layer configuration",
+    layersCollection,
+    eodashCols,
+    updatedTime,
+  );
+  /** @type {Record<string,any>[]} */
+  const analysisLayers = [];
 
   for (const ec of eodashCols) {
     let layers;
@@ -72,26 +65,52 @@ const createLayersConfig = async (
     } else {
       layers = await ec.createLayersJson();
     }
+
     if (layers) {
-      dataLayers.layers.push(...layers);
+      analysisLayers.push(...layers);
     }
   }
   // Add expand to all analysis layers
-  dataLayers.layers.forEach((dl) => {
+  analysisLayers.forEach((dl) => {
     dl.properties.layerControlExpand = true;
     dl.properties.layerControlToolsExpand = true;
   });
 
-  layersCollection.push(dataLayers);
-
-  const indicator = new EodashCollection(indicatorUrl);
-  const indicatorLayers = await indicator.buildJsonArray(
-    //@ts-expect-error we use this function to generate collection level visualization
-    selectedIndicator,
-    indicatorUrl,
-    selectedIndicator?.title ?? "",
-    selectedIndicator?.endpointtype === "GeoDB",
+  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",
@@ -105,34 +124,41 @@ const createLayersConfig = async (
   const indicatorBaseLayers = indicatorLayers.filter(
     (l) => l.properties.group === "baselayer",
   );
-  // 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;
-  indicatorBaseLayers.forEach((bl, 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.length > 0) {
-    indicatorBaseLayers[0].properties.visible = true;
-  }
-  // disable all apart from last
-  if (counter > 1) {
-    indicatorBaseLayers.forEach((bl, indx) => {
-      if (indx !== lastPos) {
+
+  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 (indicatorBaseLayers.length) {
+      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
@@ -170,6 +196,7 @@ const createLayersConfig = async (
   const indicatorOverlays = indicatorLayers.filter(
     (l) => l.properties.group === "overlay",
   );
+
   if (indicatorOverlays.length) {
     overlayLayers.layers.push(...indicatorOverlays);
     layersCollection.unshift(overlayLayers);
@@ -184,62 +211,86 @@ const createLayersConfig = async (
  * @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>} indicatorUrl
  * @param {import("vue").Ref<string>} datetime
  */
 export const useInitMap = (
   mapElement,
   selectedIndicator,
   eodashCols,
-  indicatorUrl,
   datetime,
 ) => {
-  onMounted(() => {
-    watch(
-      [selectedIndicator, datetime],
-      async ([updatedStac, updatedTime], [previousSTAC, _previousTime]) => {
-        if (updatedStac) {
-          const layersCollection = await createLayersConfig(
-            indicatorUrl.value,
-            eodashCols,
-            updatedTime,
-            updatedStac,
-          );
-          /** @type {any} */
-          (mapElement.value).layers = layersCollection;
-
-          // only on different indicator selection and not on time change
-          if (previousSTAC?.id !== updatedStac.id) {
-            // Set projection based on indicator level information
-            setMapProjFromCol(
-              /** @type {import('stac-ts').StacCollection} */
-              (updatedStac),
-            );
-            // Try to move map view to extent
-            // Make sure for now we are always converting from 4326
-            // of stac items  into current map projection
-            // TODO: This might change if we decide to use 4326 as default for zoom and extent
-            // Sanitize extent
-            // // @ts-expect-error we will need to change the approach to use
-            // // native eox-map transformation once included
-            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;
-          }
-        }
-      },
-      { immediate: true },
-    );
+  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,12 +103,12 @@ 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} */
@@ -117,35 +118,45 @@ export const useURLSearchParametersSync = () => {
       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
@@ -10,6 +14,8 @@ import { currentUrl } from "./store/States";
 export const eodash = reactive({
   id: "demo",
   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,5 +1,6 @@
 import { mapEl, mapCompareEl, registeredProjections } from "@/store/States";
 import { getProjectionCode } from "@/utils/helpers";
+import log from "loglevel";
 
 /**
  * Returns the current layers of {@link mapEl}
@@ -15,7 +16,7 @@ export const registerProjection = async (projection) => {
   if (!code || registeredProjections.includes(code)) {
     return;
   }
-
+  log.debug("Unregistered projection found, registering it", code);
   registeredProjections.push(code);
   if (typeof projection === "object") {
     // registering whole projection definition

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 */

package/core/client/store/stac.js

@@ -1,12 +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", () => {
   /**
@@ -52,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) => {
@@ -63,6 +65,7 @@ export const useSTAcStore = defineStore("stac", () => {
           }
           return link;
         });
+        log.debug("Setting selected STAC", links);
         stac.value = links;
       })
       .catch((err) => {
@@ -98,13 +101,13 @@ export const useSTAcStore = defineStore("stac", () => {
           }),
         ).then((collections) => {
           // empty array from old collections
-          eodashCollections.length = 0;
+          eodashCollections.splice(0, eodashCollections.length);
           // update eodashCollections
           eodashCollections.push(...collections);
-        });
 
-        selectedStac.value = resp.data;
-        indicator.value = selectedStac.value?.id ?? "";
+          selectedStac.value = resp.data;
+          indicator.value = selectedStac.value?.id ?? "";
+        });
       })
       .catch((err) => {
         throw new Error("error loading the selected STAC", err);
@@ -139,12 +142,12 @@ export const useSTAcStore = defineStore("stac", () => {
           }),
         ).then((collections) => {
           // empty array from old collections
-          eodashCompareCollections.length = 0;
+          eodashCompareCollections.splice(0, eodashCompareCollections.length);
           // update eodashCompareCollections
           eodashCompareCollections.push(...collections);
-        });
 
-        selectedCompareStac.value = resp.data;
+          selectedCompareStac.value = resp.data;
+        });
       })
       .catch((err) => {
         throw new Error("error loading the selected comparison STAC", err);