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

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>

package/core/client/vite-env.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}
+declare interface Window {
+  eodashStore: import("@/types").EodashStore;
+}
+declare module "@eox/stacinfo" {
+  export const EOxStacInfo: CustomElementConstructor;
+}
+declare module "@eox/layercontrol" {
+  export const EOxLayerControl: CustomElementConstructor;
+}
+declare module "@eox/jsonform" {
+  export const EOxJSONForm: CustomElementConstructor;
+}
+declare module "@eox/map" {
+  export const EOxMap: CustomElementConstructor;
+}
+declare module "@eox/itemfilter" {
+  export const EOxItemFilter: CustomElementConstructor;
+}
+declare module "user:config" {
+  const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
+  export default eodash;
+}
+declare module "stac-js" {
+  export const Collection: {
+    new (data?: object): import("stac-ts").StacCollection;
+  };
+  export const Item: { new (data?: object): import("stac-ts").StacItem };
+}
+declare module "stac-js/src/http.js" {
+  const toAbsolute: (...args: string[]) => string;
+  export { toAbsolute };
+}

package/dist/client/DashboardLayout-C_3q8Y10.js

@@ -0,0 +1,156 @@
+import { _ as y, x as m, W as x, X as d, $ as t, a0 as r, a1 as l, a9 as _, a3 as n, a6 as u, a2 as c, a4 as p, d as h, a5 as g, F as f, a7 as v, ab as w } from "./asWebComponent-DQrnLsI2.js";
+import { V as k } from "./VMain-OenWyy46.js";
+class A extends HTMLElement {
+  static get observedAttributes() {
+    return ["gap"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+    <style>
+      :host {
+        display: grid;
+        padding: ${this.getAttribute("gap") || 0}px;
+        height: 100%;
+        box-sizing: border-box;
+        gap: ${this.getAttribute("gap") || "0"}px;
+        grid-template-columns: repeat(12, 1fr);
+        grid-template-rows: repeat(12, 1fr);
+      }
+    </style>
+    <slot></slot>
+  `;
+  }
+  attributeChangedCallback(a, s, o) {
+    s !== o && (this[a] = o), this.render();
+  }
+}
+class C extends HTMLElement {
+  static get observedAttributes() {
+    return ["x", "y", "w", "h"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          background: lightgrey;
+          border: 1px solid darkgrey;
+          border-radius: 4px;
+          padding: 4px 8px;
+          overflow: hidden;
+
+
+          grid-column: ${parseInt(this.getAttribute("x")) + 1} / span ${this.getAttribute("w")};
+          grid-row: ${parseInt(this.getAttribute("y")) + 1} / span ${this.getAttribute("h")};
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+  attributeChangedCallback(a, s, o) {
+    s !== o && (this[a] = o), this.render();
+  }
+}
+customElements.define("eox-layout", A);
+customElements.define("eox-layout-item", C);
+const L = ["gap"], $ = {
+  key: 0,
+  class: "bg-panel",
+  x: "0",
+  y: "0",
+  h: "12",
+  w: "12"
+}, E = ["h", "w", "x", "y"], M = {
+  __name: "DashboardLayout",
+  setup(i) {
+    const a = (
+      /** @type {import("@/types").Eodash} */
+      m(x)
+    ), [s] = d([a.template?.background]), o = d(a.template?.widgets);
+    return (T, B) => (t(), r(k, null, {
+      default: l(() => [
+        _("eox-layout", {
+          gap: n(a).template.gap ?? 2
+        }, [
+          n(s).component ? (t(), u("eox-layout-item", $, [
+            (t(), r(c, { suspensible: "" }, {
+              default: l(() => [
+                (t(), r(
+                  p(n(s).component),
+                  h({ id: "bg-widget" }, n(s).props),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                ))
+              ]),
+              _: 1
+              /* STABLE */
+            }))
+          ])) : g("v-if", !0),
+          (t(!0), u(
+            f,
+            null,
+            v(n(o), (e, b) => (t(), r(
+              w,
+              {
+                key: b,
+                name: "fade"
+              },
+              {
+                default: l(() => [
+                  e.value.component ? (t(), u("eox-layout-item", {
+                    key: e.value.id,
+                    class: "panel bg-surface",
+                    h: e.value.layout.h,
+                    w: e.value.layout.w,
+                    x: e.value.layout.x,
+                    y: e.value.layout.y
+                  }, [
+                    (t(), r(
+                      c,
+                      { suspensible: "" },
+                      {
+                        default: l(() => [
+                          (t(), r(
+                            p(e.value.component),
+                            h({
+                              key: e.value.id,
+                              ref_for: !0
+                            }, e.value.props),
+                            null,
+                            16
+                            /* FULL_PROPS */
+                          ))
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      },
+                      1024
+                      /* DYNAMIC_SLOTS */
+                    ))
+                  ], 8, E)) : g("v-if", !0)
+                ]),
+                _: 2
+                /* DYNAMIC */
+              },
+              1024
+              /* DYNAMIC_SLOTS */
+            ))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ], 8, L)
+      ]),
+      _: 1
+      /* STABLE */
+    }));
+  }
+}, V = /* @__PURE__ */ y(M, [["__scopeId", "data-v-a859692c"]]);
+export {
+  V as default
+};

package/dist/{DynamicWebComponent-BrHVTesn.js → client/DynamicWebComponent-IiTTLBt-.js}

@@ -1,5 +1,5 @@
-import { aL as i, aM as m, r as p, C as d, aN as f, D as c, K as g, E as y, m as _, H as k } from "./asWebComponent-C8rb3b1D.js";
-const h = { class: "d-flex flex-column fill-height overflow-auto" }, x = {
+import { bC as i, aA as m, r as p, Z as d, aL as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-DQrnLsI2.js";
+const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
   __name: "DynamicWebComponent",
   props: {
     link: {
@@ -19,26 +19,26 @@ const h = { class: "d-flex flex-column fill-height overflow-auto" }, x = {
     onUnmounted: Function
   },
   async setup(o) {
-    let t, s;
+    let t, a;
     const e = (
-      /** @type {import("@/types").WebComponentProps}  */
+      /** @type {import("@/types").WebComponentProps} */
       o
     ), u = async () => typeof e.link == "string" ? await import(
       /* @vite-ignore */
       e.link
-    ) : await e.link(), l = customElements.get(e.tagName) ? null : ([t, s] = i(() => u().catch((n) => {
+    ) : await e.link(), l = customElements.get(e.tagName) ? null : ([t, a] = i(() => u().catch((n) => {
       console.error(n);
-    })), t = await t, s(), t);
+    })), t = await t, a(), t);
     if (!customElements.get(e.tagName) && e.constructorProp) {
       const n = l[e.constructorProp];
       customElements.define(e.tagName, n);
     }
-    const a = m(), r = p(null);
+    const s = m(), r = p(null);
     return d(() => {
-      e.onMounted?.(r.value, a);
+      e.onMounted?.(r.value, s);
     }), f(() => {
-      e.onUnmounted?.(r.value, a);
-    }), (n, N) => (c(), g("span", h, [
+      e.onUnmounted?.(r.value, s);
+    }), (n, w) => (c(), g("span", h, [
       (c(), y(
         k(o.tagName),
         _(o.properties, {
@@ -53,5 +53,5 @@ const h = { class: "d-flex flex-column fill-height overflow-auto" }, x = {
   }
 };
 export {
-  x as default
+  N as default
 };