@eodash/eodash 5.0.0-alpha.2.8 → 5.0.0-processing

package/core/client/composables/index.js

@@ -1,11 +1,20 @@
 // functions of this folder can only be consumed inside setup stores,
 // setup functions or vue composition api components
 
-import { currentUrl, indicator, mapPosition } from "@/store/States";
+import {
+  currentCompareUrl,
+  currentUrl,
+  datetime,
+  indicator,
+  mapPosition,
+} from "@/store/States";
 import eodash from "@/eodash";
 import { useTheme } from "vuetify/lib/framework.mjs";
-import { onMounted, watch } from "vue";
+import { onMounted, onUnmounted, watch } from "vue";
 import { useSTAcStore } from "@/store/stac";
+import log from "loglevel";
+import { useEventBus } from "@vueuse/core";
+import { eoxLayersKey } from "@/utils/keys";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -36,6 +45,35 @@ export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   return currentUrl;
 };
 
+/**
+ * Use the absolute compare URL from a relative link
+ *
+ * @param {string} [rel=''] Default is `''`
+ * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
+ *   root stac catalog. Default is `eodash.stacEndpoint`
+ * @returns {import("vue").Ref<string>} - Returns `currentUrl`
+ * @see {@link '@/store/States.js'}
+ */
+export const useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
+  if (!rel || rel.includes("http")) {
+    currentCompareUrl.value = base;
+    return currentCompareUrl;
+  }
+
+  const st = base.split("/");
+  const arr = rel.split("/");
+  st.pop();
+
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] == ".") continue;
+    if (arr[i] == "..") st.pop();
+    else st.push(arr[i]);
+  }
+
+  currentCompareUrl.value = st.join("/");
+  return currentCompareUrl;
+};
+
 /**
  * Updates an existing Vuetify theme. updates only the values provided in the
  * `ThemeDefinition`
@@ -67,53 +105,82 @@ 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 ("URLSearchParams" in window) {
+    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) => {
-        if (key === "indicator") {
-          const { loadSelectedSTAC, stac } = useSTAcStore();
-          const match = stac?.find((link) => link.id == value);
-          if (match) {
-            await loadSelectedSTAC(match.href);
+      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 {
+              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 (key === "x") {
-          x = Number(value);
-        }
-        if (key === "y") {
-          y = Number(value);
-        }
-        if (key === "z") {
-          z = Number(value);
-        }
-      });
+      }
+
       if (x && y && z) {
+        log.debug("Coordinates found, applying map poisition", x, y, z);
         mapPosition.value = [x, y, z];
       }
     }
+
     watch(
-      [indicator, mapPosition],
-      ([updatedIndicator, updatedMapPosition]) => {
+      [indicator, mapPosition, datetime],
+      ([updatedIndicator, updatedMapPosition, updatedDatetime]) => {
         if ("URLSearchParams" in window) {
           const searchParams = new URLSearchParams(window.location.search);
           if (updatedIndicator !== "") {
             searchParams.set("indicator", updatedIndicator);
           }
+
           if (updatedMapPosition && updatedMapPosition.length === 3) {
             searchParams.set("x", updatedMapPosition[0]?.toFixed(4) ?? "");
             searchParams.set("y", updatedMapPosition[1]?.toFixed(4) ?? "");
             searchParams.set("z", updatedMapPosition[2]?.toFixed(4) ?? "");
           }
+
+          if (updatedDatetime) {
+            searchParams.set("datetime", updatedDatetime.split("T")?.[0] ?? "");
+          }
           const newRelativePathQuery =
             window.location.pathname + "?" + searchParams.toString();
           history.pushState(null, "", newRelativePathQuery);
@@ -129,8 +196,24 @@ export const makePanelTransparent = (root) => {
     const eoxItem = root.value?.parentElement;
     if (eoxItem?.tagName === "EOX-LAYOUT-ITEM") {
       eoxItem.classList.remove("bg-surface");
-      eoxItem.style.background = "transparent";
-      eoxItem.style.border = "transparent";
     }
   });
 };
+
+/**
+ * Listens to the `layers:updated` and `time:updated` events and calls
+ *
+ * @param {import("@vueuse/core").EventBusListener<
+ * "layers:updated"|"time:updated",
+ * {layers:Record<string,any>[]| undefined}
+ * >} listener
+ */
+export const useOnLayersUpdate = (listener) => {
+  const layersEvents = useEventBus(eoxLayersKey);
+
+  const unsubscribe = layersEvents.on(listener);
+
+  onUnmounted(() => {
+    unsubscribe();
+  });
+};

package/core/client/eodash.js

@@ -1,5 +1,6 @@
 import { reactive } from "vue";
 import { currentUrl } from "./store/States";
+
 /**
  * Reactive Edoash Instance Object. provided globally in the app, and used as an
  * intermediate object to make user defined instances config reactive.
@@ -8,7 +9,10 @@ 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",
+    // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
+    "https://santilland.github.io/process_example/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -42,6 +46,9 @@ export const eodash = reactive({
       type: "internal",
       widget: {
         name: "EodashMap",
+        properties: {
+          enableCompare: true,
+        },
       },
     },
     widgets: [
@@ -49,31 +56,78 @@ export const eodash = reactive({
         id: Symbol(),
         type: "internal",
         title: "Indicators",
-        layout: { x: 0, y: 0, w: 2, h: 12 },
+        layout: { x: 0, y: 0, w: 3, h: 6 },
         widget: {
           name: "EodashItemFilter",
+          properties: {
+            enableCompare: true,
+            aggregateResults: "collection_group",
+          },
+        },
+      },
+      {
+        id: Symbol(),
+        type: "internal",
+        title: "Layer Control",
+        layout: { x: 0, y: 6, w: 3, h: 6 },
+        widget: {
+          name: "EodashLayerControl",
         },
       },
+      /*
+      {
+        defineWidget: (selectedCompareStac) => {
+          return selectedCompareStac
+            ? {
+                id: Symbol(),
+                title: "Layer Control Comparison",
+                layout: { x: 9, y: 6, w: 3, h: 6 },
+                type: "internal",
+                widget: {
+                  name: "EodashLayerControl",
+                  properties: {
+                    map: "second",
+                  },
+                },
+              }
+            : null;
+        },
+      },
+      */
       {
         defineWidget: (selectedSTAC) => {
           return selectedSTAC
             ? {
                 id: "Information",
                 title: "Information",
-                layout: { x: 9, y: 0, w: 3, h: 12 },
+                layout: { x: 9, y: 0, w: 3, h: 6 },
                 type: "web-component",
                 widget: {
                   link: async () => await import("@eox/stacinfo"),
                   properties: {
                     for: currentUrl,
                     allowHtml: "true",
-                    styleOverride:
-                      "#properties li > .value {font-weight: normal !important;}",
-                    header: "[]",
+                    styleOverride: `.single-property {columns: 1!important;}
+                      h1 {margin:0px!important;font-size:16px!important;}
+                      header h1:after {
+                        content:' ';
+                        display:block;
+                        border:1px solid #d0d0d0;
+                      }
+                      h2 {font-size:15px}
+                      h3 {font-size:14px}
+                      summary {cursor: pointer;}
+                      #properties li > .value { font-weight: normal !important;}
+                      main {padding-bottom: 10px;}
+                      .footer-container {line-height:1;}
+                      .footer-container button {margin-top: -10px;}
+                      .footer-container small {font-size:10px;line-height:1;}`,
+                    header: '["title"]',
+                    tags: '["themes"]',
                     subheader: "[]",
-                    properties: '["description"]',
-                    featured: "[]",
-                    footer: "[]",
+                    properties: '["satellite","sensor","agency","extent"]',
+                    featured: '["description","providers","assets","links"]',
+                    footer: '["sci:citation"]',
                   },
                   tagName: "eox-stacinfo",
                 },
@@ -91,6 +145,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;
@@ -100,7 +158,7 @@ export const eodash = reactive({
         defineWidget: (selected) => {
           return selected
             ? {
-                id: Symbol(),
+                id: "Buttons",
                 layout: { x: 8, y: 0, w: 1, h: 1 },
                 title: "Buttons",
                 type: "internal",
@@ -111,6 +169,21 @@ export const eodash = reactive({
             : null;
         },
       },
+      {
+        defineWidget: (indicator) => {
+          return indicator
+            ? {
+                id: "process",
+                layout: { x: 9, y: 6, w: 3, h: 6 },
+                title: "Process",
+                type: "internal",
+                widget: {
+                  name: "EodashProcess",
+                },
+              }
+            : 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,14 +1,65 @@
+import { mapEl, mapCompareEl, registeredProjections } from "@/store/States";
+import { getProjectionCode } from "@/utils/helpers";
+import log from "loglevel";
+
 /**
- * Returns the current layers of the `eox-map`
- * @param {string} [el="eox-map"] - `eox-map` element selector
- * @returns {object[]}
+ * Returns the current layers of {@link mapEl}
+ * @returns {Record<string,any>[]}
  */
-export const getLayers = (el = "eox-map") =>
-  customElements.get("eo-dash")
-    ? document
-        .querySelector("eo-dash")
-        ?.shadowRoot?.querySelector(el)
-        //@ts-expect-error `layers` doesn't exist on type element
-        ?.layers.toReversed()
-    : //@ts-expect-error `layers` doesn't exist on type element
-      document.querySelector(el)?.layers.toReversed();
+export const getLayers = () => mapEl.value?.layers.toReversed();
+
+/**
+ * Returns the current layers of {@link mapCompareEl}
+ * @returns {Record<string,any>[]}
+ */
+export const getCompareLayers = () => mapCompareEl.value?.layers.toReversed();
+
+/**
+ * Register EPSG projection in `eox-map`
+ * @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);
+  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` 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(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,7 +1,15 @@
+/** 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 */
 export const currentUrl = ref("");
+
+/** Currently selected compare STAC endpoint */
+export const currentCompareUrl = ref("");
+
 /** Currently selected datetime */
 export const datetime = ref(new Date().toISOString());
 
@@ -14,3 +22,14 @@ export const indicator = ref("");
  * @type {import("vue").Ref<(number | undefined)[]>}
  */
 export const mapPosition = ref([]);
+
+export const registeredProjections = ["EPSG:4326", "EPSG:3857"];
+
+/** available projection to be rendered by `EodashMap` */
+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 { useAbsoluteUrl } from "@/composables/index";
+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", () => {
   /**
@@ -25,18 +29,30 @@ export const useSTAcStore = defineStore("stac", () => {
    */
   const selectedStac = ref(null);
 
+  /**
+   * Selected STAC object.
+   *
+   * @type {import("vue").Ref<
+   *   | import("stac-ts").StacCatalog
+   *   | import("stac-ts").StacCollection
+   *   | import("stac-ts").StacItem
+   *   | null
+   * >}
+   */
+  const selectedCompareStac = ref(null);
+
   const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
   /**
    * Fetches root stac catalog and assign it to `stac`
    *
-   * @async
    * @param {import("@/types").StacEndpoint} [url=eodash.stacEndpoint] Default
    *   is `eodash.stacEndpoint`
    * @returns {Promise<void>}
    * @see {@link stac}
    */
   async function loadSTAC(url = eodash.stacEndpoint) {
+    log.debug("Loading STAC endpoint", url);
     await axios
       .get(url)
       .then((resp) => {
@@ -48,6 +64,7 @@ export const useSTAcStore = defineStore("stac", () => {
           }
           return link;
         });
+        log.debug("Setting selected STAC", links);
         stac.value = links;
       })
       .catch((err) => {
@@ -58,7 +75,6 @@ export const useSTAcStore = defineStore("stac", () => {
   /**
    * Fetches selected stac object and assign it to `selectedStac`
    *
-   * @async
    * @param {string} relativePath - Stac link href
    * @returns {Promise<void>}
    * @see {@link selectedStac}
@@ -68,14 +84,88 @@ 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);
       });
   }
 
-  return { stac, loadSTAC, loadSelectedSTAC, selectedStac };
+  /**
+   * Fetches selected stac object and assign it to `selectedCompareStac`
+   *
+   * @param {string} relativePath - Stac link href
+   * @returns {Promise<void>}
+   * @see {@link selectedCompareStac}
+   */
+  async function loadSelectedCompareSTAC(relativePath = "") {
+    const absoluteUrl = useCompareAbsoluteUrl(relativePath);
+
+    await axios
+      .get(absoluteUrl.value)
+      .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,
+  };
 });