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

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

package/core/client/utils/helpers.js

@@ -0,0 +1,172 @@
+import { changeMapProjection, registerProjection } from "@/store/Actions";
+import { availableMapProjection } from "@/store/States";
+import { toAbsolute } from "stac-js/src/http.js";
+
+/** @param {import("stac-ts").StacLink[]} links */
+export function generateFeatures(links) {
+  /**
+   * @type {{
+   *   type: string;
+   *   geometry: {
+   *     type: string;
+   *     coordinates: [number, number];
+   *   };
+   * }[]}
+   */
+  const features = [];
+  links.forEach((element) => {
+    if (element.rel === "item" && "latlng" in element) {
+      const [lat, lon] = /** @type {string} */ (element.latlng)
+        .split(",")
+        .map((it) => Number(it));
+      features.push({
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [lon, lat],
+        },
+      });
+    }
+  });
+  const geojsonObject = {
+    type: "FeatureCollection",
+    crs: {
+      type: "name",
+      properties: {
+        name: "EPSG:4326",
+      },
+    },
+    features,
+  };
+  return geojsonObject;
+}
+
+/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: object } } [style] */
+export function extractLayerConfig(style) {
+  /** @type {Record<string,unknown>} */
+  let layerConfig = {};
+  if (style?.jsonform) {
+    layerConfig = { schema: style.jsonform, type: "style" };
+    delete style?.jsonform;
+  }
+  return { layerConfig, style };
+}
+/**
+ * @param {string} id
+ * @param {string} title
+ * @param {Record<string,import("stac-ts").StacAsset>} assets
+ * @param {import("ol/layer/WebGLTile").Style} [style]
+ * @param {Record<string, unknown>} [layerConfig]
+ **/
+export async function createLayersFromDataAssets(
+  id,
+  title,
+  assets,
+  style,
+  layerConfig,
+) {
+  let jsonArray = [];
+  let geoTIFFSources = [];
+  for (const ast in assets) {
+    // register projection if exists
+    await registerProjection(
+      /** @type {number | undefined} */ (assets[ast]?.["proj:epsg"]),
+    );
+
+    if (assets[ast]?.type === "application/geo+json") {
+      jsonArray.push({
+        type: "Vector",
+        source: {
+          type: "Vector",
+          url: assets[ast].href,
+          format: "GeoJSON",
+        },
+        properties: {
+          id,
+          title,
+          layerConfig: {
+            ...layerConfig,
+            style,
+          },
+        },
+      });
+    } else if (assets[ast]?.type === "image/tiff") {
+      geoTIFFSources.push({ url: assets[ast].href });
+    }
+  }
+  if (geoTIFFSources.length) {
+    jsonArray.push({
+      type: "WebGLTile",
+      source: {
+        type: "GeoTIFF",
+        normalize: style?.variables ? false : true,
+        sources: geoTIFFSources,
+      },
+      properties: {
+        id,
+        title,
+        layerConfig,
+      },
+      style,
+    });
+  }
+  return jsonArray;
+}
+
+/**
+ * checks if there's a projection on the Collection and
+ * updates {@link availableMapProjection}
+ * @param {import('stac-ts').StacCollection} STAcCollection
+ */
+export const setMapProjFromCol = (STAcCollection) => {
+  // if a projection exists on the collection level
+  if (STAcCollection?.["proj:epsg"]) {
+    if (
+      availableMapProjection.value &&
+      availableMapProjection.value !== STAcCollection?.["proj:epsg"]
+    ) {
+      changeMapProjection(
+        /** @type {number} */
+        (STAcCollection["proj:epsg"]),
+      );
+    }
+    // set it for `EodashMapBtns`
+    availableMapProjection.value = /** @type {string} */ (
+      STAcCollection["proj:epsg"]
+    );
+  } else {
+    // reset to default projection
+    changeMapProjection((availableMapProjection.value = ""));
+  }
+};
+
+/**
+ * Function to extract collection urls from an indicator
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * } stacObject
+ * @param {string} basepath
+ * @returns {string[]}
+ */
+export function extractCollectionUrls(stacObject, basepath) {
+  const collectionUrls = [];
+  // Support for two structure types, flat and indicator, simplified here:
+  // Flat assumes Catalog-Collection-Item
+  // Indicator assumes Catalog-Collection-Collection-Item
+  // TODO: this is not the most stable test approach,
+  // we should discuss potential other approaches
+
+  if (stacObject?.links && stacObject?.links[1].rel === "item") {
+    collectionUrls.push(basepath);
+  } else if (stacObject?.links[1].rel === "child") {
+    // TODO: Iterate through all children to create collections
+    stacObject.links.forEach((link) => {
+      if (link.rel === "child") {
+        collectionUrls.push(toAbsolute(link.href, basepath));
+      }
+    });
+  }
+  return collectionUrls;
+}

package/core/client/utils/index.js

@@ -0,0 +1,51 @@
+/**
+ * Loads font in the app using `webfontloader`
+ *
+ * @param {string} [family]
+ * @param {string} [link]
+ * @param {boolean} [isWebComponent]
+ * @returns {Promise<string>} - Font family name
+ * @see {@link "https://github.com/typekit/webfontloader"}
+ */
+export const loadFont = async (
+  family = "",
+  link = "",
+  isWebComponent = false,
+) => {
+  if (family && link) {
+    const WebFontLoader = (await import("webfontloader")).default;
+    WebFontLoader.load({
+      classes: false,
+      custom: {
+        // Use FVD notation to include families https://github.com/typekit/fvd
+        families: [family],
+        // Path to stylesheet that defines font-face
+        urls: [link],
+      },
+      fontactive(familyName, _fvd) {
+        const stylesheet = new CSSStyleSheet();
+        const styles = isWebComponent
+          ? `eo-dash {font-family: ${familyName};}`
+          : `* {font-family: ${familyName};}`;
+        stylesheet.replaceSync(styles);
+        document.adoptedStyleSheets.push(stylesheet);
+      },
+      fontinactive(familyName, _fvd) {
+        throw new Error(`error loading font: ${familyName}`);
+      },
+    });
+  }
+  return family;
+};
+
+/**
+ *  @param {string} text
+ *  @param {import("vue").Ref<boolean>} showIcon
+ **/
+export const copyToClipBoard = async (text, showIcon) => {
+  await navigator.clipboard.writeText(text);
+  showIcon.value = true;
+  setTimeout(() => {
+    showIcon.value = false;
+  }, 2000);
+};

package/core/{utils → client/utils}/keys.js

@@ -1,6 +1,6 @@
 /**
- *  `eodash` injection key.
- * @type {Symbol}
+ * `eodash` injection key.
+ *
  * @see {@link "@/plugins/index.js"}
  */
 export const eodashKey = Symbol("eodash");

package/core/client/views/Dashboard.vue

@@ -0,0 +1,116 @@
+<template>
+  <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
+  <ErrorAlert v-model="error" />
+  <Suspense>
+    <TemplateComponent
+      @vue:mounted="onTemplateMount?.(hiddenElements)"
+      class="template"
+    />
+    <template #fallback>
+      <div class="loading-container">
+        <Loading />
+      </div>
+    </template>
+  </Suspense>
+  <FooterComponent ref="footerRef" 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 { loadFont } from "@/utils";
+import Loading from "@/components/Loading.vue";
+import ErrorAlert from "@/components/ErrorAlert.vue";
+
+const props = defineProps({
+  config: {
+    type: String,
+  },
+  onTemplateMount: {
+    type: Function,
+  },
+});
+const eodash = await useEodashRuntime(props.config);
+
+useURLSearchParametersSync();
+
+const theme = useUpdateTheme("dashboardTheme", eodash.brand?.theme);
+theme.global.name.value = "dashboardTheme";
+
+await loadFont(
+  eodash.brand?.font?.family,
+  eodash.brand?.font?.link,
+  !!props.onTemplateMount,
+);
+
+const { loadSTAC } = useSTAcStore();
+await loadSTAC();
+
+const { smAndDown } = useDisplay();
+const TemplateComponent = smAndDown.value
+  ? defineAsyncComponent(() => import(`@/components/MobileLayout.vue`))
+  : defineAsyncComponent(() => import(`@/components/DashboardLayout.vue`));
+
+const HeaderComponent = defineAsyncComponent(
+  () => import(`@/components/Header.vue`),
+);
+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 error = ref("");
+onErrorCaptured((e, comp, info) => {
+  error.value = `
+  ${e}.
+  component: ${comp?.$.type.name}.
+  info: ${info}.
+  `;
+});
+</script>
+<style>
+html {
+  overflow: hidden !important;
+}
+
+.template {
+  height: v-bind("templateHeight");
+}
+
+.loading-container {
+  height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>