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

package/core/client/App.vue

@@ -15,6 +15,8 @@ import Dashboard from "@/views/Dashboard.vue";
 import ErrorAlert from "./components/ErrorAlert.vue";
 import { onErrorCaptured, ref } from "vue";
 
+// window.setEodashLoglevel("DEBUG")
+
 const error = ref("");
 onErrorCaptured((e, inst, info) => {
   error.value = `

package/core/client/composables/EodashMap.js

@@ -1,6 +1,16 @@
 import { EodashCollection } from "@/utils/eodashSTAC";
 import { setMapProjFromCol } from "@/utils/helpers";
 import { onMounted, onUnmounted, watch } from "vue";
+import log from "loglevel";
+import { datetime } from "@/store/States";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+
+/**
+ * Holder for previous compare map view as it is overwritten by sync
+ * @type { {map:import("ol").View } | null} mapElement
+ */
+let viewHolder = null;
 
 /**
  * Description placeholder
@@ -38,32 +48,33 @@ 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,
+  );
+  const dataLayersGroup = layersCollection?.find(
+    (lyr) => lyr?.properties.id === "AnalysisGroup",
+  );
+  /** @type {Record<string,any>[]} */
+  const analysisLayers = [];
+
+  if (!dataLayersGroup) {
+    log.debug("no AnalysisGroup layer found to be updated");
+    return layersCollection;
+  }
 
   for (const ec of eodashCols) {
     let layers;
@@ -72,26 +83,47 @@ 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);
+  dataLayersGroup.layers = analysisLayers;
 
-  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",
-  );
+  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 +137,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,11 +209,24 @@ const createLayersConfig = async (
   const indicatorOverlays = indicatorLayers.filter(
     (l) => l.properties.group === "overlay",
   );
+
   if (indicatorOverlays.length) {
     overlayLayers.layers.push(...indicatorOverlays);
     layersCollection.unshift(overlayLayers);
   }
 
+  // We try to set the current time selection
+  // to latest extent date
+  // @ts-expect-error it seems the temporal extent is not defined in type
+  const interval = selectedIndicator?.extent?.temporal?.interval;
+  if (interval && interval.length > 0 && interval[0].length > 1) {
+    const endInterval = new Date(interval[0][1]);
+    log.debug(
+      "Datepicker: found stac extent, setting time to latest value",
+      endInterval,
+    );
+    datetime.value = endInterval.toISOString();
+  }
   return layersCollection;
 };
 
@@ -184,62 +236,114 @@ 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
+ * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} partnerMap
  */
 export const useInitMap = (
   mapElement,
   selectedIndicator,
   eodashCols,
-  indicatorUrl,
   datetime,
+  mapLayers,
+  partnerMap,
 ) => {
-  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(),
-            );
+  log.debug(
+    "InitMap",
+    mapElement.value,
+    selectedIndicator.value,
+    eodashCols.values,
+    datetime.value,
+  );
+
+  const stopIndicatorWatcher = watch(
+    [selectedIndicator, datetime],
+    async ([updatedStac, updatedTime], [previousStac, previousTime]) => {
+      if (updatedStac) {
+        if (mapElement?.value?.id === "main") {
+          // Making sure main map gets the viewer that seems to be
+          // removed when the second map is no longer rendered
+          if (viewHolder !== null) {
+            mapElement?.value?.map.setView(viewHolder);
+            viewHolder = null;
+          }
+        }
+        log.debug(
+          "Selected Indicator watch triggered",
+          updatedStac,
+          updatedTime,
+        );
+        let layersCollection = [];
+
+        const onlyTimeChanged =
+          updatedStac?.id === previousStac?.id && updatedTime !== previousTime;
+
+        const { selectedCompareStac } = storeToRefs(useSTAcStore());
+        if (mapElement?.value?.id === "main") {
+          // Main map being initialized
+          // Set projection based on indicator level information for both maps
+          await setMapProjFromCol(updatedStac);
+        } else {
+          // Compare map being initialized
+          if (selectedCompareStac.value !== null) {
+            // save old view to set later
+            viewHolder = mapElement?.value?.map.getView();
             /** @type {any} */
-            (mapElement.value).zoomExtent = reprojExtent;
+            (mapElement.value).sync = partnerMap.value;
           }
         }
-      },
-      { immediate: true },
-    );
+
+        if (onlyTimeChanged) {
+          layersCollection =
+            (await updateLayersConfig(
+              [...(mapElement.value?.layers ?? [])].reverse(),
+              eodashCols,
+              updatedTime,
+            )) ?? [];
+          log.debug(
+            "Assigned layers after changing time only",
+            JSON.parse(JSON.stringify(layersCollection)),
+          );
+          mapLayers.value = layersCollection;
+          return;
+        }
+
+        /** @type {Record<string,any>[]} */
+        layersCollection = await createLayersConfig(updatedStac);
+
+        // updates layersCollection in place
+        await updateLayersConfig(layersCollection, eodashCols, updatedTime);
+
+        // 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;
+
+        log.debug(
+          "Assigned layers",
+          JSON.parse(JSON.stringify(layersCollection)),
+        );
+
+        mapLayers.value = layersCollection;
+      }
+    },
+    { immediate: true },
+  );
+
+  onUnmounted(() => {
+    stopIndicatorWatcher();
   });
 };

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

@@ -9,7 +9,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",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -53,7 +54,7 @@ export const eodash = reactive({
         id: Symbol(),
         type: "internal",
         title: "Indicators",
-        layout: { x: 0, y: 0, w: 3, h: 8 },
+        layout: { x: 0, y: 0, w: 3, h: 6 },
         widget: {
           name: "EodashItemFilter",
           properties: {
@@ -66,7 +67,7 @@ export const eodash = reactive({
         id: Symbol(),
         type: "internal",
         title: "Layer Control",
-        layout: { x: 0, y: 8, w: 3, h: 4 },
+        layout: { x: 0, y: 6, w: 3, h: 6 },
         widget: {
           name: "EodashLayerControl",
         },
@@ -122,6 +123,10 @@ export const eodash = reactive({
                 title: "Datepicker",
                 widget: {
                   name: "EodashDatePicker",
+                  properties: {
+                    hintText: `<b>Hint:</b> closest available date is displayed <br />
+                      on map (see Analysis Layers)`,
+                  },
                 },
               }
             : null;

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/plugins/index.js

@@ -4,13 +4,14 @@ import eodash from "@/eodash";
 import VCalendar from "v-calendar";
 import { eodashKey } from "@/utils/keys";
 import store from "../store";
+import log from "loglevel";
 
 export const pinia = createPinia();
 
 /** @param {import("vue").App} app */
 export function registerPlugins(app) {
   window.eodashStore = store;
-
+  window.setEodashLoglevel = log.setLevel;
   app
     .use(vuetify)
     .use(pinia)

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);