@eodash/eodash 5.0.0-alpha.2.1 → 5.0.0-alpha.2.10

package/core/client/store/stac.js

@@ -0,0 +1,81 @@
+import { defineStore } from "pinia";
+import { inject, ref } from "vue";
+import axios from "axios";
+import { useAbsoluteUrl } from "@/composables/index";
+import { eodashKey } from "@/utils/keys";
+import { indicator } from "@/store/States";
+
+export const useSTAcStore = defineStore("stac", () => {
+  /**
+   * Links of the root STAC catalog
+   *
+   * @type {import("vue").Ref<import("stac-ts").StacLink[] | null>}
+   */
+  const stac = ref(null);
+
+  /**
+   * Selected STAC object.
+   *
+   * @type {import("vue").Ref<
+   *   | import("stac-ts").StacCatalog
+   *   | import("stac-ts").StacCollection
+   *   | import("stac-ts").StacItem
+   *   | null
+   * >}
+   */
+  const selectedStac = 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) {
+    await axios
+      .get(url)
+      .then((resp) => {
+        const links = /** @type {import("stac-ts").StacCatalog} */ (
+          resp.data
+        ).links.map((link) => {
+          if (!link.title) {
+            link.title = `${link.rel} ${link.href}`;
+          }
+          return link;
+        });
+        stac.value = links;
+      })
+      .catch((err) => {
+        throw new Error("error loading assigned STAC endpoint", err);
+      });
+  }
+
+  /**
+   * Fetches selected stac object and assign it to `selectedStac`
+   *
+   * @async
+   * @param {string} relativePath - Stac link href
+   * @returns {Promise<void>}
+   * @see {@link selectedStac}
+   */
+  async function loadSelectedSTAC(relativePath = "") {
+    const absoluteUrl = useAbsoluteUrl(relativePath);
+
+    await axios
+      .get(absoluteUrl.value)
+      .then((resp) => {
+        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 };
+});

package/core/client/types.d.ts

@@ -0,0 +1,287 @@
+/** @group Eodash */
+export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
+  /**
+   * Imports web component file, either using a URL or an import function.
+   *
+   * @example
+   *   importing `eox-itemfilter` web component, after installing `@eox/itemfilter` it can be
+   *   referenced:
+   *   ```js
+   *   link: async() => import("@eox/itemfilter")
+   *   ```
+   *
+   *   ::: warning
+   *   import maps are not available in runtime config
+   *   :::
+   */
+  link: T extends "runtime" ? string : string | (() => Promise<unknown>);
+  /**
+   * Exported Constructor, needs to be provided if the web component is not
+   * registered in by the [link](#link) provided
+   */
+  constructorProp?: string;
+  tagName: `${string}-${string}`;
+  /** Object defining all the properties and attributes of the web component */
+  properties?: Record<string, unknown>;
+  /**
+   * Triggered when the web component is mounted in the DOM.
+   *
+   * @param el - Web component
+   * @param store - Return value of the core STAC pinia store in
+   *   `/core/client/store/stac.ts`
+   */
+  onMounted?: (
+    el: Element | null,
+    store: ReturnType<typeof import("./store/stac").useSTAcStore>,
+  ) => Promise<void> | void;
+  /**
+   * Triggered when the web component is unmounted from the DOM.
+   *
+   * @param el - Web component
+   * @param store - Return value of the core STAC pinia store in
+   *   `/core/client/store/stac.ts`
+   */
+  onUnmounted?: (
+    el: Element | null,
+    store: ReturnType<typeof import("./store/stac").useSTAcStore>,
+  ) => Promise<void> | void;
+}
+
+/** @ignore */
+export interface WidgetsContainerProps {
+  widgets: Omit<Widget, "layout">[];
+}
+
+// eodash types:
+/** Properties of EOxLayoutItem used for setting the position and size of panels */
+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;
+}
+/**
+ * Widget type: `web-component` API
+ *
+ * @group Eodash
+ */
+export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
+  id: number | string | symbol;
+  title: string;
+  /** Widget position and size. */
+  layout: Layout;
+  widget: WebComponentProps<T>;
+  type: "web-component";
+}
+
+/**
+ * Widget type: `internal` API. Internal widgets are Vue components provided by
+ * eodash.
+ *
+ * @group Eodash
+ */
+export interface InternalComponentWidget {
+  id: number | string | symbol;
+  title: string;
+  /** Widget position and size. */
+  layout: Layout;
+  widget: {
+    /**
+     * Internal Vue Components inside the
+     * [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder.
+     * Referenced using their name without the .vue extention
+     */
+    name: string;
+    /** Specified Vue component props */
+    properties?: Record<string, unknown>;
+  };
+  type: "internal";
+}
+
+/** Widget type: `iframe` API Renders an external HTML file as a widget. */
+/** @group Eodash */
+export interface IFrameWidget {
+  id: number | string | symbol;
+  title: string;
+  /** Widget position and size. */
+  layout: Layout;
+  widget: {
+    /** The URL of the page to embed */
+    src: string;
+  };
+  type: "iframe";
+}
+/** @group Eodash */
+export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
+  /**
+   * Provides a functional definition of widgets, gets triggered whenever a STAC
+   * object is selected, and only renders the returned configuration if the `id`
+   * doesn't match the currently rendered `id`
+   *
+   * @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;
+}
+/**
+ * There are 3 types of Widgets:
+ *
+ * @group Eodash
+ */
+export type StaticWidget<T extends ExecutionTime = "compiletime"> =
+  | WebComponentWidget<T>
+  | InternalComponentWidget
+  | IFrameWidget;
+/**
+ * Widgets can be defined in 2 forms:
+ *
+ * 1. {@link StaticWidget} : This is defined as an object once, and is considered
+ *    the default form.
+ * 2. {@link FunctionalWidget} : a special form which contains the
+ *    {@link FunctionalWidget.defineWidget `defineWidget`} function that runs
+ *    when {@link EodashStore.stac `loadSelectedSTAC`} function is triggered, and
+ *    returns a value of a Static Widget or null or undefined.
+ *
+ * @group Eodash
+ */
+export type Widget<T extends ExecutionTime = "compiletime"> =
+  | StaticWidget<T>
+  | FunctionalWidget<T>;
+
+/** @group Eodash */
+export type BackgroundWidget<T extends ExecutionTime = "compiletime"> =
+  | Omit<WebComponentWidget<T>, "layout" | "title" | "slidable">
+  | Omit<InternalComponentWidget, "layout" | "title" | "slidable">
+  | Omit<IFrameWidget, "layout" | "title" | "slidable">
+  | Omit<FunctionalWidget<T>, "layout" | "slidable">;
+/**
+ * Dashboard rendered widgets specification. 3 types of widgets are supported:
+ * `"iframe"`, `"internal"`, and `"web-component"`. A specific object should be
+ * provided based on the type of the widget.
+ *
+ * @group Eodash
+ */
+export interface Template<T extends ExecutionTime = "compiletime"> {
+  /** Gap between widgets */
+  gap?: number;
+  /** Loading widget */
+  loading?: BackgroundWidget<T>;
+  /**
+   * Widget rendered as the dashboard background. Has the same specifications of
+   * {@link Widget} without the `title` and `layout` properties
+   */
+  background?: BackgroundWidget<T>;
+  /** Array of widgets that will be rendered as dashboard panels. */
+  widgets: Widget<T>[];
+}
+
+/** @ignore */
+export type StacEndpoint = `${"https://" | "http://"}${string}/catalog.json`;
+
+/** @group Eodash */
+type ExecutionTime = "runtime" | "compiletime";
+
+/**
+ * Eodash instance API
+ *
+ * @group Eodash
+ */
+export interface Eodash<T extends ExecutionTime = "compiletime"> {
+  /** Instance ID. */
+  id?: string;
+  /** Root STAC catalog endpoint */
+  stacEndpoint: StacEndpoint;
+  /** Brand specifications. */
+  brand: {
+    /** Removes the dashboard layout */
+    noLayout?: boolean;
+    /** Custom error message to alert the users if something crashes */
+    errorMessage?: string;
+    /** Fetches the specified font family from the specified `link` property. */
+    font?: {
+      /**
+       * Link to stylesheet that defines font-face. Could be either a relative
+       * or absolute URL.
+       */
+      link: string;
+      /** Font family name. */
+      family: string;
+    };
+    /** Title that will be shown in the app header */
+    name: string;
+    /** Brand logo */
+    logo?: string;
+    /**
+     * Dashboard theme as a custom [vuetifyJs
+     * theme](https://vuetifyjs.com/en/features/theme/).
+     */
+    theme?: import("vuetify/lib/index.mjs").ThemeDefinition;
+    /** Text applied to the footer. */
+    footerText?: string;
+  };
+  /** Template configuration */
+  template: Template<T>;
+}
+/////////
+
+/// eodash store types
+/** @group EodashStore */
+export interface EodashStore {
+  /** Stateful Reactive variables */
+  states: {
+    /** Currently selected STAC endpoint */
+    currentUrl: import("vue").Ref<string>;
+    /** Currently selected datetime */
+    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 [el] - `eox-map` element selector
+     */
+    getLayers: (el?: string) => object[];
+
+    /**
+     * Register EPSG projection in `eox-map` and adds it to {@link EodashStore.states.availableMapProjection `availableMapProjection`` }
+     * */
+    registerProjection: (code?: number | string) => Promise<void>;
+
+    /** Change `eox-map` projection from an `EPSG` code */
+    changeMapProjection: (code?: number | string) => Promise<void>;
+  };
+
+  /** Pinia store definition used to navigate the root STAC catalog. */
+  stac: {
+    useSTAcStore: typeof import("./store/stac.js").useSTAcStore;
+  };
+}
+///////
+/**
+ * The project's entry point should export this function as a default to
+ * instantiate eodash
+ *
+ * @param config
+ * @group Eodash
+ */
+export declare const createEodash: (
+  config: ((store: EodashStore) => Eodash | Promise<Eodash>) | Eodash,
+) => Eodash | Promise<Eodash>;
+
+/** @group EodashStore */
+export declare const store: EodashStore;

package/core/client/utils/eodashSTAC.js

@@ -0,0 +1,337 @@
+import { Collection, Item } from "stac-js";
+import { toAbsolute } from "stac-js/src/http.js";
+import {
+  createLayersFromDataAssets,
+  extractLayerConfig,
+  generateFeatures,
+  setMapProjFromCol,
+} from "./helpers";
+import axios from "axios";
+import { registerProjection } from "@/store/Actions";
+
+export class EodashCollection {
+  /** @type {string} */
+  #collectionUrl = "";
+  /** @type {import("stac-ts").StacCollection | undefined} */
+  #collectionStac;
+  /**
+   * @type {import("stac-ts").StacLink
+   *   | import("stac-ts").StacItem
+   *   | undefined}
+   */
+  selectedItem;
+
+  /** @param {string} collectionUrl */
+  constructor(collectionUrl) {
+    this.#collectionUrl = collectionUrl;
+  }
+  /**
+   * @async
+   * @param {import('stac-ts').StacLink | Date} [itemLinkOrDate]
+   * @returns
+   */
+  createLayersJson = async (itemLinkOrDate) => {
+    /** @type {import("stac-ts").StacLink | undefined} */
+    let stacItem,
+      /** @type {import("stac-ts").StacCollection | undefined} */
+      stac;
+    // TODO get auxiliary layers from collection
+    /** @type {object[]} */
+    let layersJson = [];
+
+    // Load collectionstac if not yet initialized
+    if (!this.#collectionStac) {
+      const response = await axios.get(this.#collectionUrl);
+      stac = await response.data;
+      this.#collectionStac = new Collection(stac);
+    }
+
+    // set availabe map projection
+    setMapProjFromCol(this.#collectionStac);
+
+    if (stac && stac.endpointtype === "GeoDB") {
+      // Special handling of point based data
+      const allFeatures = generateFeatures(stac.links);
+      layersJson.unshift({
+        type: "Vector",
+        properties: {
+          id: stac.id,
+          title: stac.title || stac.id,
+        },
+        source: {
+          type: "Vector",
+          url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
+          format: "GeoJSON",
+        },
+        style: {
+          "circle-radius": 5,
+          "circle-fill-color": "#00417077",
+          "circle-stroke-color": "#004170",
+          "fill-color": "#00417077",
+          "stroke-color": "#004170",
+        },
+      });
+
+      return layersJson;
+    } else {
+      if (itemLinkOrDate instanceof Date) {
+        // if collectionStac not yet initialized we do it here
+        stacItem = this.getItems()?.sort((a, b) => {
+          const distanceA = Math.abs(
+            new Date(/** @type {number} */ (a.datetime)).getTime() -
+              itemLinkOrDate.getTime(),
+          );
+          const distanceB = Math.abs(
+            new Date(/** @type {number} */ (b.datetime)).getTime() -
+              itemLinkOrDate.getTime(),
+          );
+          return distanceA - distanceB;
+        })[0];
+        this.selectedItem = stacItem;
+      } else {
+        stacItem = itemLinkOrDate;
+      }
+
+      const stacItemUrl = stacItem
+        ? toAbsolute(stacItem.href, this.#collectionUrl)
+        : this.#collectionUrl;
+      stac = await axios.get(stacItemUrl).then((resp) => resp.data);
+
+      if (!stacItem) {
+        // no specific item was requested; render last item
+        this.#collectionStac = new Collection(stac);
+        const items = this.getItems();
+        this.selectedItem = items?.[items.length - 1];
+        if (this.selectedItem) {
+          layersJson = await this.createLayersJson(this.selectedItem);
+        } else {
+          if (import.meta.env.DEV) {
+            console.warn(
+              "[eodash] the selected collection does not include any items",
+            );
+          }
+        }
+        return [];
+      } else {
+        // specific item was requested
+        const item = new Item(stac);
+        this.selectedItem = item;
+        const title = this.#collectionStac.title || this.#collectionStac.id;
+        layersJson.unshift(
+          ...(await this.buildJsonArray(item, stacItemUrl, title)),
+        );
+        return layersJson;
+      }
+    }
+  };
+
+  async getExtent() {
+    if (!this.#collectionStac) {
+      const response = await axios.get(this.#collectionUrl);
+      const stac = await response.data;
+      this.#collectionStac = new Collection(stac);
+    }
+    return this.#collectionStac?.extent;
+  }
+  /**
+   * @param {object} properties
+   * @param {[string]} roles
+   * */
+  extractRoles(properties, roles) {
+    roles?.forEach((role) => {
+      if (role === "visible") {
+        // @ts-expect-error visible does not need to exist in properties
+        properties.visible = true;
+      }
+      if (role === "overlay" || role === "baselayer") {
+        // @ts-expect-error group not expected to exist in properties
+        properties.group = role;
+      }
+    });
+  }
+  /**
+   * @param {import("stac-ts").StacItem} item
+   * @param {string} itemUrl
+   * @param {string} title
+   * */
+  async buildJsonArray(item, itemUrl, title) {
+    const jsonArray = [];
+    // TODO: this currently assumes only one layer will be extracted
+    //       from an item, although it think this is currently true
+    //       potentially this could return multiple layers
+    // TODO: implement other types, such as COG
+
+    // I propose following approach, we "manually" create configurations
+    // for the rendering options we know and expect.
+    // If we don't find any we fallback to using the STAC ol item that
+    // will try to extract anything it supports but for which we have
+    // less control.
+    let dataAssets = /** @type {Record<string,import('stac-ts').StacAsset>} */ ({});
+    if (item.assets) {
+      dataAssets = Object.keys(item.assets).reduce((data, ast) => {
+        if (item.assets[ast].roles?.includes("data")) {
+          data[ast] = item.assets[ast];
+        }
+        return data;
+      }, /** @type {Record<string,import('stac-ts').StacAsset>} */ ({}));
+    }
+
+    const { layerConfig, style } = extractLayerConfig(
+      await this.fetchStyle(item, itemUrl),
+    );
+    const wmsArray = item.links.filter((l) => l.rel === "wms");
+    const xyzArray = item.links.filter((l) => l.rel === "xyz");
+    const fallbackToStac = item.links.find((l) => l.rel === "wmts");
+
+    // TODO: add capability to find projection in item
+    await registerProjection(
+      /** @type {number | undefined} */ (item?.["proj:epsg"]),
+    );
+
+    if (wmsArray.length > 0) {
+      wmsArray.forEach((link) => {
+        let json = {
+          type: "Tile",
+          properties: {
+            id: link.id || item.id,
+            title: title || link.title || item.id,
+          },
+          source: {
+            // TODO: if no projection information is provided we should
+            // assume one, else for WMS requests it will try to get
+            // the map projection that might not be supported
+            // projection: projDef ? projDef : "EPSG:4326",
+            type: "TileWMS",
+            url: link.href,
+            params: {
+              LAYERS: link["wms:layers"],
+              TILED: true,
+            },
+          },
+        };
+        this.extractRoles(
+          json.properties,
+          /** @type {[string]} */ (link.roles),
+        );
+        if ("wms:dimensions" in link) {
+          // Expand all dimensions into the params attribute
+          json.source.params = Object.assign(
+            json.source.params,
+            link["wms:dimensions"],
+          );
+        }
+        jsonArray.push(json);
+      });
+    } else if (xyzArray.length > 0) {
+      xyzArray.forEach((link) => {
+        let json = {
+          type: "Tile",
+          properties: {
+            id: link.id || item.id,
+            title: title || link.title || item.id,
+            roles: link.roles,
+          },
+          source: {
+            type: "XYZ",
+            url: link.href,
+          },
+        };
+        this.extractRoles(
+          json.properties,
+          /** @type {[string]} */ (link.roles),
+        );
+        jsonArray.push(json);
+      });
+    } else if (fallbackToStac) {
+      jsonArray.push({
+        type: "STAC",
+        displayWebMapLink: true,
+        displayFootprint: false,
+        data: item,
+        properties: {
+          id: item.id,
+          title: title || item.id,
+        },
+      });
+    } else if (Object.keys(dataAssets).length) {
+      jsonArray.push(
+        ...(await createLayersFromDataAssets(
+          this.#collectionStac?.title || item.id,
+          this.#collectionStac?.title || item.id,
+          dataAssets,
+          style,
+          layerConfig,
+        )),
+      );
+    } else if (item.geometry) {
+      // fall back to rendering the feature
+      jsonArray.push({
+        type: "Vector",
+        source: {
+          type: "Vector",
+          url: "data:," + encodeURIComponent(JSON.stringify(item.geometry)),
+          format: "GeoJSON",
+        },
+        properties: {
+          id: item.id,
+          title: this.#collectionStac?.title || item.id,
+          layerConfig: {
+            ...layerConfig,
+            style,
+          },
+        },
+      });
+    }
+
+    return jsonArray;
+  }
+
+  getItems() {
+    return (
+      this.#collectionStac?.links
+        .filter((i) => i.rel === "item")
+        // sort by `datetime`, where oldest is first in array
+        .sort((a, b) =>
+          /** @type {number} */ (a.datetime) <
+          /** @type {number} */ (b.datetime)
+            ? -1
+            : 1,
+        )
+    );
+  }
+
+  /**
+   * @param {import("stac-ts").StacItem} item
+   * @param {string} itemUrl
+   **/
+  async fetchStyle(item, itemUrl) {
+    const styleLink = item.links.find((link) => link.rel.includes("style"));
+    if (styleLink) {
+      let url = "";
+      if (styleLink.href.startsWith("http")) {
+        url = styleLink.href;
+      } else {
+        url = toAbsolute(styleLink.href, itemUrl);
+      }
+
+      /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:object}} */
+      const styleJson = await axios.get(url).then((resp) => resp.data);
+      return styleJson;
+    }
+  }
+
+  getDates() {
+    return (
+      this.#collectionStac?.links
+        .filter((i) => i.rel === "item")
+        // sort by `datetime`, where oldest is first in array
+        .sort((a, b) =>
+          /** @type {number} */ (a.datetime) <
+          /** @type {number} */ (b.datetime)
+            ? -1
+            : 1,
+        )
+        .map((i) => new Date(/** @type {number} */ (i.datetime)))
+    );
+  }
+}