@eodash/eodash 5.0.0-rc.3 → 5.1.0

package/core/client/store/stac.js

@@ -1,20 +1,28 @@
 import { defineStore } from "pinia";
-import { inject, ref } from "vue";
+import { ref } from "vue";
 import axios from "@/plugins/axios";
-import { useAbsoluteUrl, useCompareAbsoluteUrl } from "@/composables/index";
-import { eodashKey } from "@/utils/keys";
-import { indicator } from "@/store/states";
-import { extractCollectionUrls } from "@/eodashSTAC/helpers";
+import {
+  useAbsoluteUrl,
+  useCompareAbsoluteUrl,
+  useGetSubCodeId,
+} from "@/composables/index";
+import { compareIndicator, comparePoi, indicator, poi } from "@/store/states";
 import {
   eodashCollections,
   eodashCompareCollections,
   collectionsPalette,
-  switchToCompare,
 } from "@/utils/states";
-import { EodashCollection } from "@/eodashSTAC/EodashCollection";
 import log from "loglevel";
+import { toAbsolute } from "stac-js/src/http.js";
+import { updateEodashCollections } from "@/utils";
 
 export const useSTAcStore = defineStore("stac", () => {
+  /**
+   * STAC catalog endpoint URL
+   * @type {import("vue").Ref<import("@/types").StacEndpoint | null>}
+   */
+  const stacEndpoint = ref(null);
+
   /**
    * Links of the root STAC catalog
    *
@@ -26,9 +34,7 @@ export const useSTAcStore = defineStore("stac", () => {
    * Selected STAC object.
    *
    * @type {import("vue").Ref<
-   *   | import("stac-ts").StacCatalog
    *   | import("stac-ts").StacCollection
-   *   | import("stac-ts").StacItem
    *   | null
    * >}
    */
@@ -38,15 +44,19 @@ export const useSTAcStore = defineStore("stac", () => {
    * 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));
+  /**
+   * Initializes the store by assigning the STAC endpoint.
+   * @param {import("@/types").StacEndpoint} endpoint
+   */
+  function init(endpoint) {
+    stacEndpoint.value = endpoint;
+  }
 
   /**
    * Fetches root stac catalog and assign it to `stac`
@@ -56,7 +66,19 @@ export const useSTAcStore = defineStore("stac", () => {
    * @returns {Promise<void>}
    * @see {@link stac}
    */
-  async function loadSTAC(url = eodash.stacEndpoint) {
+  async function loadSTAC(url) {
+    if (!url) {
+      if (!stacEndpoint.value) {
+        throw new Error("STAC endpoint is not defined in eodash configuration");
+      }
+      url = stacEndpoint.value;
+    }
+
+    if (!url) {
+      stac.value = null;
+      return;
+    }
+
     log.debug("Loading STAC endpoint", url);
     await axios
       .get(url)
@@ -81,44 +103,40 @@ export const useSTAcStore = defineStore("stac", () => {
    * Fetches selected stac object and assign it to `selectedStac`
    *
    * @param {string} relativePath - Stac link href
+   * @param {boolean} [isPoi=false] - If true, the STAC is loaded for a point of interest
    * @returns {Promise<void>}
    * @see {@link selectedStac}
    */
-  async function loadSelectedSTAC(relativePath = "") {
-    const absoluteUrl = useAbsoluteUrl(relativePath);
+  async function loadSelectedSTAC(relativePath = "", isPoi = false) {
+    if (!stacEndpoint.value) {
+      return Promise.reject(new Error("STAC endpoint is not defined"));
+    }
+    const absoluteUrl = useAbsoluteUrl(relativePath, stacEndpoint.value);
+    if (isPoi) {
+      // construct absolute URL of a poi
+      absoluteUrl.value = constructPoiUrl(relativePath, indicator.value);
+    }
 
     await axios
       .get(absoluteUrl.value)
       .then(async (resp) => {
-        // init eodash collections
-        const collectionUrls = extractCollectionUrls(
+        await updateEodashCollections(
+          eodashCollections,
           resp.data,
           absoluteUrl.value,
+          collectionsPalette,
         );
-
-        await Promise.all(
-          collectionUrls.map((cu, idx) => {
-            const ec = new EodashCollection(cu);
-            ec.fetchCollection();
-            ec.color = collectionsPalette[idx % collectionsPalette.length];
-            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 ?? "";
-          switchToCompare.value = true;
-        });
+        selectedStac.value = resp.data;
+        // set indicator and poi
+        indicator.value = isPoi
+          ? indicator.value
+          : useGetSubCodeId(selectedStac.value);
+        poi.value = isPoi ? (selectedStac.value?.id ?? "") : "";
       })
       .catch((err) => {
         throw new Error("error loading the selected STAC", err);
       });
   }
-
   /**
    * Fetches selected stac object and assign it to `selectedCompareStac`
    *
@@ -126,32 +144,31 @@ export const useSTAcStore = defineStore("stac", () => {
    * @returns {Promise<void>}
    * @see {@link selectedCompareStac}
    */
-  async function loadSelectedCompareSTAC(relativePath = "") {
-    const absoluteUrl = useCompareAbsoluteUrl(relativePath);
+  async function loadSelectedCompareSTAC(relativePath = "", isPOI = false) {
+    if (!stacEndpoint.value) {
+      return Promise.reject(
+        new Error("STAC endpoint is not defined in eodash configuration"),
+      );
+    }
+    const absoluteUrl = useCompareAbsoluteUrl(relativePath, stacEndpoint.value);
+    if (isPOI) {
+      // construct absolute URL of a poi
+      absoluteUrl.value = constructPoiUrl(relativePath, compareIndicator.value);
+    }
     await axios
       .get(absoluteUrl.value)
       .then(async (resp) => {
-        // init eodash collections
-        const collectionUrls = await extractCollectionUrls(
+        await updateEodashCollections(
+          eodashCompareCollections,
           resp.data,
           absoluteUrl.value,
+          [...collectionsPalette].reverse(),
         );
-
-        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;
-          switchToCompare.value = false;
-        });
+        selectedCompareStac.value = resp.data;
+        compareIndicator.value = isPOI
+          ? compareIndicator.value
+          : useGetSubCodeId(selectedCompareStac.value);
+        comparePoi.value = isPOI ? (selectedCompareStac.value?.id ?? "") : "";
       })
       .catch((err) => {
         throw new Error("error loading the selected comparison STAC", err);
@@ -163,11 +180,31 @@ export const useSTAcStore = defineStore("stac", () => {
    *
    */
   async function resetSelectedCompareSTAC() {
+    eodashCompareCollections.splice(0, eodashCompareCollections.length);
     selectedCompareStac.value = null;
   }
 
+  /**
+   * Construct absolute URL of a point of interest (POI)
+   *
+   * @param {string} relativePath - The relative path to the POI
+   * @param {string} indicatorStr - selected indicator id or subcode
+   */
+  function constructPoiUrl(relativePath, indicatorStr) {
+    if (!stacEndpoint.value) {
+      throw new Error("STAC endpoint is not defined in eodash configuration");
+    }
+    // construct absolute URL of a poi
+    const indicatorUrl =
+      stac.value?.find((link) => useGetSubCodeId(link) === indicatorStr)
+        ?.href ?? "";
+    const absoluteIndicatorUrl = toAbsolute(indicatorUrl, stacEndpoint.value);
+    return toAbsolute(relativePath, absoluteIndicatorUrl);
+  }
+
   return {
     stac,
+    init,
     loadSTAC,
     loadSelectedSTAC,
     loadSelectedCompareSTAC,

package/core/client/store/states.js

@@ -2,7 +2,7 @@
 import log from "loglevel";
 log.setLevel(log.levels.WARN, true);
 
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 /** Currently selected STAC endpoint */
 export const currentUrl = ref("");
@@ -15,6 +15,8 @@ export const datetime = ref(new Date().toISOString());
 
 /** Currently selected indicator */
 export const indicator = ref("");
+/** Currently selected compare indicator */
+export const compareIndicator = ref("");
 
 /**
  * Current map position
@@ -28,10 +30,18 @@ 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<import("@eox/map").EOxMap | null>} */
+export const mapEl = shallowRef(null);
 
-/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
-export const mapCompareEl = ref(null);
+/** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
+export const mapCompareEl = shallowRef(null);
 
 export const activeTemplate = ref("");
+/**
+ * Selected point of interest, used for location collections
+ */
+export const poi = ref("");
+/**
+ * Selected point of interest for comparison, used for location collections
+ */
+export const comparePoi = ref("");

package/core/client/types.ts

@@ -1,5 +1,5 @@
 /** @group Eodash */
-export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
+export interface WebComponentProps {
   /**
    * Imports web component file, either using a URL or an import function.
    *
@@ -14,7 +14,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
    *   import maps are not available in runtime config
    *   :::
    */
-  link?: T extends "runtime" ? string : string | (() => Promise<unknown>);
+  link?: string | (() => Promise<unknown>);
   /**
    * Exported Constructor, needs to be provided if the web component is not
    * registered in by the [link](#link) provided
@@ -58,33 +58,47 @@ export interface WidgetsContainerProps {
  * @group Eodash
  * */
 export interface Layout {
-  /** Horizontal start position. Integer between 1 and 12 */
-  x: number;
-  /** Vertical start position. Integer between 1 and 12 */
-  y: number;
-  /** Width. Integer between 1 and 12 */
-  w: number;
-  /** Height. Integer between 1 and 12 */
-  h: number;
+  /**
+   * Horizontal start position. Integer between 1 and 12 or numbers seperated by "/" for different breakpoints
+   * @example "3/2/1"
+   */
+  x: number | string;
+  /**
+   *  Vertical start position. Integer between 1 and 12 or numbers seperated by "/" for different breakpoints
+   * @example "3/2/1"
+   */
+  y: number | string;
+  /**
+   *  Width. Integer between 1 and 12 or numbers seperated by "/" for different breakpoints
+   * @example "3/2/1"
+   */
+  w: number | string;
+  /**
+   * Height. Integer between 1 and 12 or numbers seperated by "/" for different breakpoints
+   * @example "3/2/1"
+   */
+  h: number | string;
 }
 /**
  * Widget type: `web-component` API
  *
  * @group Eodash
  */
-export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
+export interface WebComponentWidget {
   id: number | string | symbol;
   title: string;
   /** Widget position and size. */
   layout: Layout;
-  widget: WebComponentProps<T>;
+  widget: WebComponentProps;
   type: "web-component";
 }
 // Internal Widget Interfaces
 /** @group Widgets */
 export interface TEodashMap {
   name: "EodashMap";
-  properties?: InstanceType<typeof import("^/EodashMap.vue").default>["$props"];
+  properties?: InstanceType<
+    typeof import("^/EodashMap/index.vue").default
+  >["$props"];
 }
 
 /** @group Widgets */
@@ -123,7 +137,7 @@ export interface TEodashStacInfo {
 export interface TEodashProcess {
   name: "EodashProcess";
   properties?: InstanceType<
-    typeof import("^/EodashProcess.vue").default
+    typeof import("^/EodashProcess/index.vue").default
   >["$props"];
 }
 
@@ -219,7 +233,7 @@ export interface IFrameWidget {
   type: "iframe";
 }
 /** @group Eodash */
-export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
+export interface FunctionalWidget {
   /**
    * Provides a functional definition of widgets, gets triggered whenever a STAC
    * object is selected, and only renders the returned configuration if the `id`
@@ -228,20 +242,17 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
    * @param selectedSTAC - Currently selected STAC object
    */
   defineWidget: (
-    selectedSTAC:
-      | import("stac-ts").StacCatalog
-      | import("stac-ts").StacCollection
-      | import("stac-ts").StacItem
-      | null,
-  ) => StaticWidget<T> | undefined | null;
+    selectedSTAC: import("stac-ts").StacCollection | null,
+    selectedCompareSTAC?: import("stac-ts").StacCollection | null,
+  ) => StaticWidget | undefined | null | false;
 }
 /**
  * There are 3 types of Widgets:
  *
  * @group Eodash
  */
-export type StaticWidget<T extends ExecutionTime = "compiletime"> =
-  | WebComponentWidget<T>
+export type StaticWidget =
+  | WebComponentWidget
   | InternalComponentWidget
   | IFrameWidget;
 /**
@@ -256,16 +267,14 @@ export type StaticWidget<T extends ExecutionTime = "compiletime"> =
  *
  * @group Eodash
  */
-export type Widget<T extends ExecutionTime = "compiletime"> =
-  | StaticWidget<T>
-  | FunctionalWidget<T>;
+export type Widget = StaticWidget | FunctionalWidget;
 
 /** @group Eodash */
-export type BackgroundWidget<T extends ExecutionTime = "compiletime"> =
-  | Omit<WebComponentWidget<T>, "layout" | "title" | "slidable">
+export type BackgroundWidget =
+  | Omit<WebComponentWidget, "layout" | "title" | "slidable">
   | Omit<InternalComponentWidget, "layout" | "title" | "slidable">
   | Omit<IFrameWidget, "layout" | "title" | "slidable">
-  | Omit<FunctionalWidget<T>, "layout" | "slidable">;
+  | Omit<FunctionalWidget, "layout" | "slidable">;
 /**
  * Dashboard rendered widgets specification. 3 types of widgets are supported:
  * `"iframe"`, `"internal"`, and `"web-component"`. A specific object should be
@@ -273,30 +282,25 @@ export type BackgroundWidget<T extends ExecutionTime = "compiletime"> =
  *
  * @group Eodash
  */
-export interface Template<T extends ExecutionTime = "compiletime"> {
+export interface Template {
   /** Gap between widgets */
   gap?: number;
   /** Loading widget */
-  loading?: BackgroundWidget<T>;
+  loading?: BackgroundWidget;
   /**
    * Widget rendered as the dashboard background. Has the same specifications of
    * {@link Widget} without the `title` and `layout` properties
    */
-  background?: BackgroundWidget<T>;
+  background?: BackgroundWidget;
   /** Array of widgets that will be rendered as dashboard panels. */
-  widgets: Widget<T>[];
+  widgets: Widget[];
 }
 /** @group Eodash */
-export type MultiTemplates<T extends ExecutionTime = "compiletime"> = Record<
-  string,
-  Template<T>
->;
+export type MultiTemplates = Record<string, Template>;
 
 /** @ignore */
 export type StacEndpoint = `${string}/catalog.json`;
 
-/** @group Eodash */
-type ExecutionTime = "runtime" | "compiletime";
 /** @group Eodash */
 export interface EodashFont {
   /**
@@ -312,9 +316,13 @@ export interface EodashFont {
  *
  * @group Eodash
  */
-export type Eodash<T extends ExecutionTime = "compiletime"> = {
+export type Eodash = {
   /** Instance ID. */
   id?: string;
+  /** Object containing potential special configuration options */
+  options?: {
+    useSubCode?: boolean;
+  };
   /** Root STAC catalog endpoint */
   stacEndpoint: StacEndpoint;
   /** Brand specifications. */
@@ -338,7 +346,7 @@ export type Eodash<T extends ExecutionTime = "compiletime"> = {
      * Dashboard theme as a custom [vuetifyJs
      * theme](https://vuetifyjs.com/en/features/theme/).
      */
-    theme?: import("vuetify/lib/index.mjs").ThemeDefinition & {
+    theme?: import("vuetify").ThemeDefinition & {
       collectionsPalette?: string[];
     };
     /** Text applied to the footer. */
@@ -347,11 +355,11 @@ export type Eodash<T extends ExecutionTime = "compiletime"> = {
 } & (
   | {
       /** Template configuration */
-      template: Template<T>;
+      template: Template;
     }
   | {
       /** Multiple templates configuration */
-      templates: MultiTemplates<T>;
+      templates: MultiTemplates;
     }
 );
 /////////
@@ -436,3 +444,11 @@ export type EodashStyleJson = import("ol/style/flat").FlatStyleLike & {
   jsonform?: import("json-schema").JSONSchema7;
   tooltip?: { id: string; title?: string; appendix?: string }[];
 };
+
+export type LayersEventBusKeys =
+  | "layers:updated"
+  | "time:updated"
+  | "process:updated"
+  | "compareLayers:updated"
+  | "compareTime:updated"
+  | "compareProcess:updated";

package/core/client/utils/index.js

@@ -1,5 +1,13 @@
 import log from "loglevel";
 import { collectionsPalette } from "./states";
+import {
+  extractCollectionUrls,
+  generateLinksFromItems,
+  revokeCollectionBlobUrls,
+} from "@/eodashSTAC/helpers";
+import { EodashCollection } from "@/eodashSTAC/EodashCollection";
+import { toAbsolute } from "stac-js/src/http.js";
+import { readParquetItems } from "@/eodashSTAC/parquet";
 import WebFontLoader from "webfontloader";
 
 /**
@@ -141,3 +149,74 @@ export const setCollectionsPalette = (colors) => {
   collectionsPalette.splice(0, collectionsPalette.length);
   collectionsPalette.push(...colors);
 };
+
+/**
+ * Updates the eodash collections by fetching and processing collection data from specified URLs
+ * @param {import("stac-ts").StacCollection} selectedStac - The indicator object
+ * @param {string} absoluteUrl - The absolute indicator URL
+ * @param {import('@/eodashSTAC/EodashCollection').EodashCollection[]} eodashCollections  - The array of existing eodash collections to be updated
+ * @param {string[]} colorPalette - The color palette to assign to each collection
+ * @async
+ * @description This function extracts collection URLs from the indicator, fetches collection data,
+ * processes parquet items if available, and updates the eodashCollections array with new collection data.
+ * Each collection is assigned a color from a predefined palette.
+ */
+export const updateEodashCollections = async (
+  eodashCollections,
+  selectedStac,
+  absoluteUrl,
+  colorPalette,
+) => {
+  // init eodash collections
+  const collectionUrls = extractCollectionUrls(selectedStac, absoluteUrl);
+
+  await Promise.all(
+    collectionUrls.map((cu, idx) => {
+      return new Promise((resolve, _reject) => {
+        const ec = new EodashCollection(cu);
+        ec.fetchCollection().then((col) => {
+          // assign color from the palette
+          ec.color = colorPalette[idx % colorPalette.length];
+
+          const parquetAsset = Object.values(col.assets ?? {}).find(
+            (asset) =>
+              asset.type === "application/vnd.apache.parquet" &&
+              asset.roles?.includes("collection-mirror"),
+          );
+
+          if (!parquetAsset) {
+            resolve(ec);
+            return;
+          }
+
+          readParquetItems(toAbsolute(parquetAsset.href, cu)).then((items) => {
+            col.links.push(...generateLinksFromItems(items));
+            resolve(ec);
+          });
+        });
+      });
+    }),
+  ).then(async (collections) => {
+    // revoke old blob urls in the previous collections. see generateLinksFromItems in "../eodashSTAC/helpers.js"
+    eodashCollections.forEach((ec) => {
+      revokeCollectionBlobUrls(ec);
+    });
+    // empty array from old collections
+    eodashCollections.splice(0, eodashCollections.length);
+    // update eodashCollections
+    eodashCollections.push(...collections);
+  });
+};
+/**
+ *
+ * @param {Element | string} selector
+ */
+export const getElement = (selector) => {
+  const eoDash = document.querySelector("eo-dash");
+  if (!eoDash) {
+    //@ts-expect-error selectior can be a string or an Element
+    return document.querySelector(selector);
+  }
+  //@ts-expect-error selectior can be a string or an Element
+  return eoDash.shadowRoot?.querySelector(selector);
+};

package/core/client/utils/keys.js

@@ -1,8 +1,8 @@
 /**
  * `eodash` injection key.
- *
+ * @type {import("vue").InjectionKey<import("@/types").Eodash>}
  * @see {@link "@/plugins/index.js"}
  */
 export const eodashKey = Symbol("eodash");
-/** @type {import("@vueuse/core").EventBusKey<"layers:updated"|"time:updated">} */
+/** @type {import("@vueuse/core").EventBusKey<import("@/types").LayersEventBusKeys>} */
 export const eoxLayersKey = Symbol("eoxMapLayers");

package/core/client/utils/states.js

@@ -3,7 +3,10 @@ import {
   mdiCurrencyEur,
   mdiHospitalBoxOutline,
   mdiImageFilterHdr,
+  mdiLeaf,
+  mdiLightningBolt,
   mdiSetCenter,
+  mdiSnowflake,
   mdiWater,
   mdiWeatherWindy,
 } from "@mdi/js";
@@ -27,8 +30,8 @@ export const eodashCollections = shallowReactive([]);
  */
 export const eodashCompareCollections = shallowReactive([]);
 
-/** whether the map postion was set in URL params on first load */
-export const posIsSetFromUrl = ref(false);
+/** whether it's the first load of the app, used to track if there are params in the url */
+export const isFirstLoad = ref(false);
 
 /**
  * Current value of the layer control JSON form for the latest layer the user interacted with.
@@ -66,13 +69,21 @@ export const dataThemesBrands = {
     icon: mdiWater,
     color: "#73A6C7",
   },
+  oceans: {
+    icon: mdiWater,
+    color: "#6DA2C5",
+  },
   land: {
     icon: mdiImageFilterHdr,
     color: "#019E73",
   },
   health: {
     icon: mdiHospitalBoxOutline,
-    color: "#497FA9",
+    color: "#32322C",
+  },
+  "covid-19": {
+    icon: mdiHospitalBoxOutline,
+    color: "#32322C",
   },
   combined: {
     icon: mdiSetCenter,
@@ -82,10 +93,24 @@ export const dataThemesBrands = {
     icon: mdiWeatherWindy,
     color: "#475faf",
   },
+  atmosphere: {
+    icon: mdiWeatherWindy,
+    color: "#475faf",
+  },
   economy: {
     icon: mdiCurrencyEur,
     color: "#8E81AF",
   },
+  biomass: {
+    icon: mdiLeaf,
+    color: "#009E73",
+  },
+  extremes: {
+    icon: mdiLightningBolt,
+    color: "#a1280a",
+  },
+  cryosphere: {
+    icon: mdiSnowflake,
+    color: "#42C7B8",
+  },
 };
-/** used for switching in and out of compare mode @see {@link widgets/EodashMapBtns.vue} */
-export const switchToCompare = ref(true);