@eodash/eodash 5.0.0-alpha.2.5 → 5.0.0-alpha.2.7

package/core/client/utils/eodashSTAC.js

@@ -1,26 +1,58 @@
-import { Collection, Item } from 'stac-js';
-import { toAbsolute } from 'stac-js/src/http.js';
-import { generateFeatures } from './helpers'
-import axios from 'axios';
+import { Collection, Item } from "stac-js";
+import { toAbsolute } from "stac-js/src/http.js";
+import { generateFeatures } from "./helpers";
+import axios from "axios";
 
+/**
+ * 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;
+}
 export class EodashCollection {
   /** @type {string} */
-  #collectionUrl = '';
+  #collectionUrl = "";
   /** @type {import("stac-ts").StacCollection | undefined} */
   #collectionStac;
-  /** @type {import("stac-ts").StacLink | undefined } */
-  selectedItem;
-
   /**
-   * @param {string} collectionUrl
+   * @type {import("stac-ts").StacLink
+   *   | import("stac-ts").StacItem
+   *   | undefined}
    */
+  selectedItem;
+
+  /** @param {string} collectionUrl */
   constructor(collectionUrl) {
     this.#collectionUrl = collectionUrl;
   }
   /**
-   * @param {*} item
-   * @returns
    * @async
+   * @param {any} item
+   * @returns
    */
   createLayersJson = async (item = null) => {
     /** @type {import("stac-ts").StacLink | undefined} */
@@ -30,20 +62,20 @@ export class EodashCollection {
     // TODO get auxiliary layers from collection
     /** @type {object[]} */
     let layersJson = [
-      {
-        type: 'Tile',
+      /*{
+        type: "Tile",
         properties: {
-          id: 'OSM',
+          id: "OSM",
         },
         source: {
-          type: 'OSM',
+          type: "OSM",
         },
-      },
+      },*/
     ];
     // Load collectionstac if not yet initialized
     if (!this.#collectionStac) {
       const response = await axios.get(this.#collectionUrl);
-      stac = await response.data
+      stac = await response.data;
       this.#collectionStac = new Collection(stac);
     }
 
@@ -57,7 +89,6 @@ export class EodashCollection {
         },
         source: {
           type: "Vector",
-          // @ts-ignore
           url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
           format: "GeoJSON",
         },
@@ -67,15 +98,21 @@ export class EodashCollection {
           "circle-stroke-color": "#004170",
           "fill-color": "#00417077",
           "stroke-color": "#004170",
-        }
+        },
       });
       return layersJson;
     } else {
       if (item 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() - item.getTime());
-          const distanceB = Math.abs(new Date(/** @type {number} */(b.datetime)).getTime() - item.getTime());
+          const distanceA = Math.abs(
+            new Date(/** @type {number} */ (a.datetime)).getTime() -
+              item.getTime(),
+          );
+          const distanceB = Math.abs(
+            new Date(/** @type {number} */ (b.datetime)).getTime() -
+              item.getTime(),
+          );
           return distanceA - distanceB;
         })[0];
         this.selectedItem = stacItem;
@@ -85,7 +122,7 @@ export class EodashCollection {
       const response = await fetch(
         stacItem
           ? toAbsolute(stacItem.href, this.#collectionUrl)
-          : this.#collectionUrl
+          : this.#collectionUrl,
       );
       stac = await response.json();
 
@@ -98,71 +135,115 @@ export class EodashCollection {
           layersJson = await this.createLayersJson(this.selectedItem);
         } else {
           if (import.meta.env.DEV) {
-            console.warn('[eodash] the selected collection does not include any items')
+            console.warn(
+              "[eodash] the selected collection does not include any items",
+            );
           }
         }
-        return layersJson;
+        return [];
       } else {
         // specific item was requested
         const item = new Item(stac);
         this.selectedItem = item;
-        layersJson.unshift(this.buildJson(item));
+        layersJson.unshift(...this.buildJsonArray(item));
         return layersJson;
       }
     }
-  }
+  };
 
-  /**
-   * @param {*} item
-   */
-  buildJson(item) {
-    let json;
-    // TODO implement other types, such as COG
-    if (/** @type {import('stac-ts').StacLink[]} */(item.links)
-      .find((l) => l.rel === 'wms' || l.rel === 'wmts' || l.rel === 'xyz')) {
-      json = {
-        type: 'STAC',
+  /** @param {import("stac-ts").StacItem} item */
+  buildJsonArray(item) {
+    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.
+    const wms = item.links.find((l) => l.rel === "wms");
+    // const projDef = false; // TODO: add capability to find projection in item
+    if (wms) {
+      let json = {
+        type: "Tile",
+        properties: {
+          id: item.id,
+        },
+        source: {
+          // 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: wms.href,
+          params: {
+            LAYERS: wms["wms:layers"],
+            TILED: true,
+          },
+        },
+      };
+      if ("wms:dimensions" in wms) {
+        // @ts-expect-error: waiting for eox-map to provide type definition
+        json.source.params.time = wms["wms:dimensions"];
+      }
+      jsonArray.push(json);
+    } else if (item.links.find((l) => l.rel === "wmts" || l.rel === "xyz")) {
+      jsonArray.push({
+        type: "STAC",
         displayWebMapLink: true,
         displayFootprint: false,
         data: item,
         properties: {
           id: item.id,
         },
-      };
+      });
     } else {
       // fall back to rendering the feature
-      json = {
-        type: 'Vector',
+      jsonArray.push({
+        type: "Vector",
         source: {
-          type: 'Vector',
-          url: 'data:,' + encodeURIComponent(JSON.stringify(item.geometry)),
-          format: 'GeoJSON',
+          type: "Vector",
+          url: "data:," + encodeURIComponent(JSON.stringify(item.geometry)),
+          format: "GeoJSON",
         },
         properties: {
           id: item.id,
         },
-      };
+      });
     }
 
-    return json;
+    return jsonArray;
   }
 
   getItems() {
     return (
       this.#collectionStac?.links
-        .filter((i) => i.rel === 'item')
+        .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))
+        .sort((a, b) =>
+          /** @type {number} */ (a.datetime) <
+          /** @type {number} */ (b.datetime)
+            ? -1
+            : 1,
+        )
     );
   }
 
   getDates() {
     return (
       this.#collectionStac?.links
-        .filter((i) => i.rel === 'item')
+        .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)))
+        .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

@@ -1,37 +1,35 @@
-
-/**
- * @param {import("stac-ts").StacLink[]} links
- */
+/** @param {import("stac-ts").StacLink[]} links */
 export function generateFeatures(links) {
   /**
    * @type {{
-   * type:string;
-   * geometry:{
-   * type: string;
-   * coordinates: [number, number],
-   * }
+   *   type: string;
+   *   geometry: {
+   *     type: string;
+   *     coordinates: [number, number];
+   *   };
    * }[]}
    */
   const features = [];
-  links.forEach(element => {
+  links.forEach((element) => {
     if (element.rel === "item" && "latlng" in element) {
-      //@ts-expect-error
-      const [lat, lon] = element.latlng.split(",").map((/** @type {string} */it) => Number(it))
+      const [lat, lon] = /** @type {string} */ (element.latlng)
+        .split(",")
+        .map((it) => Number(it));
       features.push({
-        type: 'Feature',
+        type: "Feature",
         geometry: {
-          type: 'Point',
+          type: "Point",
           coordinates: [lon, lat],
         },
-      })
+      });
     }
   });
   const geojsonObject = {
-    'type': 'FeatureCollection',
-    'crs': {
-      'type': 'name',
-      'properties': {
-        'name': 'EPSG:4326',
+    type: "FeatureCollection",
+    crs: {
+      type: "name",
+      properties: {
+        name: "EPSG:4326",
       },
     },
     features,

package/core/client/utils/index.js

@@ -1,14 +1,19 @@
 /**
- * loads font in the app using `webfontloader`
+ * Loads font in the app using `webfontloader`
+ *
  * @param {string} [family]
  * @param {string} [link]
  * @param {boolean} [isWebComponent]
- * @returns {Promise<string>} - font family name
+ * @returns {Promise<string>} - Font family name
  * @see {@link "https://github.com/typekit/webfontloader"}
  */
-export const loadFont = async (family = '', link = '', isWebComponent = false) => {
+export const loadFont = async (
+  family = "",
+  link = "",
+  isWebComponent = false,
+) => {
   if (family && link) {
-    const WebFontLoader = (await import('webfontloader')).default;
+    const WebFontLoader = (await import("webfontloader")).default;
     WebFontLoader.load({
       classes: false,
       custom: {
@@ -18,15 +23,29 @@ export const loadFont = async (family = '', link = '', isWebComponent = false) =
         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)
+        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}`)
-      }
+        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/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

@@ -2,7 +2,10 @@
   <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent @vue:mounted="onTemplateMount?.(hiddenElements)" class="template" />
+    <TemplateComponent
+      @vue:mounted="onTemplateMount?.(hiddenElements)"
+      class="template"
+    />
     <template #fallback>
       <div class="loading-container">
         <Loading />
@@ -15,71 +18,85 @@
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
-import { useSTAcStore } from '@/store/stac';
+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 { loadFont } from "@/utils";
 import Loading from "@/components/Loading.vue";
 import ErrorAlert from "@/components/ErrorAlert.vue";
 
 const props = defineProps({
   config: {
-    type: String
+    type: String,
   },
   onTemplateMount: {
-    type: Function
-  }
-})
-const eodash = await useEodashRuntime(props.config)
+    type: Function,
+  },
+});
+const eodash = await useEodashRuntime(props.config);
 
 useURLSearchParametersSync();
 
-const theme = useUpdateTheme('dashboardTheme', eodash.brand?.theme)
-theme.global.name.value = 'dashboardTheme'
+const theme = useUpdateTheme("dashboardTheme", eodash.brand?.theme);
+theme.global.name.value = "dashboardTheme";
 
-await loadFont(eodash.brand?.font?.family, eodash.brand?.font?.link, !!props.onTemplateMount)
+await loadFont(
+  eodash.brand?.font?.family,
+  eodash.brand?.font?.link,
+  !!props.onTemplateMount,
+);
 
-const { loadSTAC } = useSTAcStore()
-await loadSTAC()
+const { loadSTAC } = useSTAcStore();
+await loadSTAC();
 
-const { smAndDown } = useDisplay()
-const TemplateComponent = smAndDown.value ?
-  defineAsyncComponent(() => import(`@/components/MobileLayout.vue`)) :
-  defineAsyncComponent(() => import(`@/components/DashboardLayout.vue`))
+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 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>}
- **/
+/**
+ * @type {import("vue").Ref<InstanceType<
+ *   typeof import("@/components/Footer.vue").default
+ * > | null>}
+ */
 const footerRef = ref(null);
 
-const hiddenElements = [headerRef, footerRef]
+const hiddenElements = [headerRef, footerRef];
 
 onMounted(() => {
   if (props.onTemplateMount && !eodash.brand.noLayout) {
-    hiddenElements.forEach(element => {
+    hiddenElements.forEach((element) => {
       /** @type {HTMLElement} */
-      // @ts-expect-error
-      (element.value.$el).style.opacity = "0"
-    })
+      (
+        /** @type {import("vue").ComponentPublicInstance} */
+        (element.value).$el
+      ).style.opacity = "0";
+    });
   }
-})
+});
 
-const error = ref('')
+const error = ref("");
 onErrorCaptured((e, comp, info) => {
   error.value = `
   ${e}.
   component: ${comp?.$.type.name}.
   info: ${info}.
-  `
-})
-
+  `;
+});
 </script>
 <style>
 html {
@@ -87,7 +104,7 @@ html {
 }
 
 .template {
-  height: v-bind("templateHeight")
+  height: v-bind("templateHeight");
 }
 
 .loading-container {

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

@@ -1,31 +1,33 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
 }
 declare interface Window {
-  eodashStore: import("@/types").EodashStore
+  eodashStore: import("@/types").EodashStore;
 }
-declare module '@eox/stacinfo' {
-  export const EOxStacInfo: CustomElementConstructor
+declare module "@eox/stacinfo" {
+  export const EOxStacInfo: CustomElementConstructor;
 }
-declare module '@eox/map' {
-  export const EOxMap: CustomElementConstructor
+declare module "@eox/map" {
+  export const EOxMap: CustomElementConstructor;
 }
-declare module '@eox/itemfilter' {
-  export const EOxItemFilter: CustomElementConstructor
+declare module "@eox/itemfilter" {
+  export const EOxItemFilter: CustomElementConstructor;
 }
-declare module 'user:config' {
+declare module "user:config" {
   const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
-  export default eodash
+  export default eodash;
 }
 declare module "stac-js" {
-  const STAC: any, Collection: any, Item: any
-  export { STAC, Collection, Item }
+  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: any
-  export { toAbsolute }
+  const toAbsolute: (...args: string[]) => string;
+  export { toAbsolute };
 }

package/dist/client/{DashboardLayout-BYROtP-7.js → DashboardLayout-Cbci3g7o.js}

@@ -1,5 +1,5 @@
-import { _ as b, 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 p, a4 as c, d as h, a5 as g, F as f, a7 as v, ab as w } from "./asWebComponent-CbdGxelK.js";
-import { V as k } from "./VMain-C9XV5Lyg.js";
+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-DeaU3QoK.js";
+import { V as k } from "./VMain-Bu1bPjvK.js";
 class A extends HTMLElement {
   static get observedAttributes() {
     return ["gap"];
@@ -78,10 +78,10 @@ const L = ["gap"], $ = {
           gap: n(a).template.gap ?? 2
         }, [
           n(s).component ? (t(), u("eox-layout-item", $, [
-            (t(), r(p, { suspensible: "" }, {
+            (t(), r(c, { suspensible: "" }, {
               default: l(() => [
                 (t(), r(
-                  c(n(s).component),
+                  p(n(s).component),
                   h({ id: "bg-widget" }, n(s).props),
                   null,
                   16
@@ -95,10 +95,10 @@ const L = ["gap"], $ = {
           (t(!0), u(
             f,
             null,
-            v(n(o), (e, y) => (t(), r(
+            v(n(o), (e, b) => (t(), r(
               w,
               {
-                key: y,
+                key: b,
                 name: "fade"
               },
               {
@@ -112,12 +112,12 @@ const L = ["gap"], $ = {
                     y: e.value.layout.y
                   }, [
                     (t(), r(
-                      p,
+                      c,
                       { suspensible: "" },
                       {
                         default: l(() => [
                           (t(), r(
-                            c(e.value.component),
+                            p(e.value.component),
                             h({
                               key: e.value.id,
                               ref_for: !0
@@ -150,7 +150,7 @@ const L = ["gap"], $ = {
       /* STABLE */
     }));
   }
-}, V = /* @__PURE__ */ b(M, [["__scopeId", "data-v-d836e339"]]);
+}, V = /* @__PURE__ */ y(M, [["__scopeId", "data-v-34c69bd3"]]);
 export {
   V as default
 };