@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

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

@@ -0,0 +1,79 @@
+import {
+  mapEl,
+  mapCompareEl,
+  registeredProjections,
+  activeTemplate,
+} from "@/store/states";
+import { getProjectionCode } from "@/eodashSTAC/helpers";
+import log from "loglevel";
+
+/**
+ * Returns the current layers of {@link mapEl}
+ * @returns {Record<string,any>[]}
+ */
+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);
+};
+
+/**
+ *
+ * @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

@@ -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 { indicator } from "@/store/states";
+import { extractCollectionUrls } from "@/eodashSTAC/helpers";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { EodashCollection } from "@/eodashSTAC/EodashCollection";
+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 = await 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/store/states.js

@@ -0,0 +1,37 @@
+/** 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());
+
+/** Currently selected indicator */
+export const indicator = ref("");
+
+/**
+ * Current map position
+ *
+ * @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);
+
+export const activeTemplate = ref("");

package/core/client/{types.d.ts → types.ts}

@@ -32,7 +32,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
    */
   onMounted?: (
     el: Element | null,
-    store: ReturnType<typeof import("./store/stac").useSTAcStore>,
+    store: ReturnType<typeof import("./store/stac.js").useSTAcStore>,
   ) => Promise<void> | void;
   /**
    * Triggered when the web component is unmounted from the DOM.
@@ -43,7 +43,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
    */
   onUnmounted?: (
     el: Element | null,
-    store: ReturnType<typeof import("./store/stac").useSTAcStore>,
+    store: ReturnType<typeof import("./store/stac.js").useSTAcStore>,
   ) => Promise<void> | void;
 }
 
@@ -170,7 +170,7 @@ export type BackgroundWidget<T extends ExecutionTime = "compiletime"> =
  *
  * @group Eodash
  */
-export interface Template<T extends ExecutionTime = "compiletime"> {
+export interface SingleTemplate<T extends ExecutionTime = "compiletime"> {
   /** Gap between widgets */
   gap?: number;
   /** Loading widget */
@@ -184,8 +184,13 @@ export interface Template<T extends ExecutionTime = "compiletime"> {
   widgets: Widget<T>[];
 }
 
+export type MultiTemplates<T extends ExecutionTime = "compiletime"> = Record<
+  string,
+  SingleTemplate<T>
+>;
+
 /** @ignore */
-export type StacEndpoint = `${"https://" | "http://"}${string}/catalog.json`;
+export type StacEndpoint = `${string}/catalog.json`;
 
 /** @group Eodash */
 type ExecutionTime = "runtime" | "compiletime";
@@ -195,7 +200,7 @@ type ExecutionTime = "runtime" | "compiletime";
  *
  * @group Eodash
  */
-export interface Eodash<T extends ExecutionTime = "compiletime"> {
+export type Eodash<T extends ExecutionTime = "compiletime"> = {
   /** Instance ID. */
   id?: string;
   /** Root STAC catalog endpoint */
@@ -228,9 +233,16 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
     /** Text applied to the footer. */
     footerText?: string;
   };
-  /** Template configuration */
-  template: Template<T>;
-}
+} & (
+  | {
+      /** Template configuration */
+      template: SingleTemplate<T>;
+    }
+  | {
+      /** Multiple templates configuration */
+      templates: MultiTemplates<T>;
+    }
+);
 /////////
 
 /// eodash store types
@@ -244,29 +256,63 @@ export interface EodashStore {
     datetime: import("vue").Ref<string>;
     /** Currently selected indicator */
     indicator: import("vue").Ref<string>;
+
+    registeredProjections: `EPSG${number}`[];
+
+    /** available projection to be rendered by the Map */
+    availableMapProjection: import("vue").Ref<string>;
   };
   actions: {
-    /** returns the layers of the `eox-map`
-     * @param `eox-map` element selector
+    /**
+     * returns the layers of the `eox-map`
+     * @param [el] - `eox-map` element selector
      */
-    getLayers: (el: string) => object[];
+    getLayers: (el?: string) => object[];
+
+    /**
+     * Register EPSG projection in `eox-map` and adds it to  `availableMapProjection`
+     * */
+    registerProjection: (
+      code?: number | string | { name: string; def: string },
+    ) => Promise<void>;
+
+    /** Change `eox-map` projection from an EPSG code or a registered projection code */
+    changeMapProjection: (
+      code?: number | string | { name: string; def: string },
+    ) => Promise<void>;
   };
+
   /** Pinia store definition used to navigate the root STAC catalog. */
   stac: {
     useSTAcStore: typeof import("./store/stac.js").useSTAcStore;
   };
 }
 ///////
+
+/** @group WebComponent */
+type EodashConstructor = import("vue").VueElementConstructor<
+  import("vue").ExtractPropTypes<{ config: string }>
+>;
 /**
- * The project's entry point should export this function as a default to
- * instantiate eodash
+ * Eodash Web Component constructor
  *
- * @param config
- * @group Eodash
+ * @group WebComponent
  */
-export declare const createEodash: (
-  config: ((store: EodashStore) => Eodash | Promise<Eodash>) | Eodash,
-) => Eodash | Promise<Eodash>;
+export declare const Eodash: EodashConstructor;
+/**
+ * Registers `eo-dash` as Custom Element in the window
+ *
+ * @group WebComponent
+ */
+export declare function register(): void;
 
-/** @group EodashStore */
-export declare const store: EodashStore;
+/**
+ * Eodash store @see EodashStore
+ *
+ * @group WebComponent
+ */
+export declare const store: typeof import("@/store").default;
+
+/////
+
+export * from "./main.js";

package/core/client/utils/keys.js

@@ -4,3 +4,5 @@
  * @see {@link "@/plugins/index.js"}
  */
 export const eodashKey = Symbol("eodash");
+/** @type {import("@vueuse/core").EventBusKey<"layers:updated"|"time:updated">} */
+export const eoxLayersKey = Symbol("eoxMapLayers");

package/core/client/utils/states.js

@@ -0,0 +1,22 @@
+import { ref, shallowReactive } from "vue";
+
+/**
+ * Array of eodash STAC Collections extracted from the current selected indicator.
+ * Updated in {@link file://./../store/stac.js `loadSelectedSTAC`} widget
+ *
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
+ * @private
+ */
+export const eodashCollections = shallowReactive([]);
+
+/**
+ * Array of eodash STAC Collections extracted from the current selected COMPARE indicator.
+ * Updated in {@link file://./../store/stac.js ` loadSelectedCompareSTAC`} widget
+ *
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
+ * @private
+ */
+export const eodashCompareCollections = shallowReactive([]);
+
+/** whether the map postion was set in URL params on first load */
+export const posIsSetFromUrl = ref(false);

package/core/client/views/Dashboard.vue

@@ -1,26 +1,23 @@
 <template>
-  <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
+  <HeaderComponent v-if="!eodash.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent
-      @vue:mounted="onTemplateMount?.(hiddenElements)"
-      class="template"
-    />
+    <TemplateComponent :style="{ height: templateHeight }" />
     <template #fallback>
       <div class="loading-container">
         <Loading />
       </div>
     </template>
   </Suspense>
-  <FooterComponent ref="footerRef" v-if="!eodash.brand.noLayout" />
+  <FooterComponent v-if="!eodash.brand.noLayout" />
 </template>
 
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from "@/store/stac";
-import { defineAsyncComponent, onErrorCaptured, onMounted, ref } from "vue";
-import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
+import { computed, defineAsyncComponent, onErrorCaptured, ref } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 import { loadFont } from "@/utils";
 import Loading from "@/components/Loading.vue";
 import ErrorAlert from "@/components/ErrorAlert.vue";
@@ -29,8 +26,9 @@ const props = defineProps({
   config: {
     type: String,
   },
-  onTemplateMount: {
-    type: Function,
+  isWebComponent: {
+    type: Boolean,
+    default: false,
   },
 });
 const eodash = await useEodashRuntime(props.config);
@@ -43,16 +41,18 @@ theme.global.name.value = "dashboardTheme";
 await loadFont(
   eodash.brand?.font?.family,
   eodash.brand?.font?.link,
-  !!props.onTemplateMount,
+  props.isWebComponent,
 );
 
 const { loadSTAC } = useSTAcStore();
 await loadSTAC();
 
 const { smAndDown } = useDisplay();
-const TemplateComponent = smAndDown.value
-  ? defineAsyncComponent(() => import(`@/components/MobileLayout.vue`))
-  : defineAsyncComponent(() => import(`@/components/DashboardLayout.vue`));
+const TemplateComponent = computed(() =>
+  smAndDown.value
+    ? defineAsyncComponent(() => import(`@/components/MobileLayout.vue`))
+    : defineAsyncComponent(() => import(`@/components/DashboardLayout.vue`)),
+);
 
 const HeaderComponent = defineAsyncComponent(
   () => import(`@/components/Header.vue`),
@@ -60,34 +60,8 @@ const HeaderComponent = defineAsyncComponent(
 const FooterComponent = defineAsyncComponent(
   () => import(`@/components/Footer.vue`),
 );
-const { mainRect } = useLayout();
-const templateHeight = eodash.brand.noLayout
-  ? props.onTemplateMount
-    ? "100%"
-    : "90dvh"
-  : `calc(100dvh - ${mainRect.value["top"] + mainRect.value["bottom"]}px)`;
-
-const headerRef = ref(null);
-/**
- * @type {import("vue").Ref<InstanceType<
- *   typeof import("@/components/Footer.vue").default
- * > | null>}
- */
-const footerRef = ref(null);
-
-const hiddenElements = [headerRef, footerRef];
 
-onMounted(() => {
-  if (props.onTemplateMount && !eodash.brand.noLayout) {
-    hiddenElements.forEach((element) => {
-      /** @type {HTMLElement} */
-      (
-        /** @type {import("vue").ComponentPublicInstance} */
-        (element.value).$el
-      ).style.opacity = "0";
-    });
-  }
-});
+const templateHeight = props.isWebComponent ? "100%" : "100dvh";
 
 const error = ref("");
 onErrorCaptured((e, comp, info) => {
@@ -99,18 +73,17 @@ onErrorCaptured((e, comp, info) => {
 });
 </script>
 <style>
-html {
-  overflow: hidden !important;
-}
-
-.template {
-  height: v-bind("templateHeight");
-}
-
 .loading-container {
   height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+div.v-application__wrap {
+  min-height: fit-content;
+}
+eo-dash {
+  overflow: hidden;
+}
 </style>