@eodash/eodash 5.0.0-alpha.2.4 → 5.0.0-alpha.2.6

package/core/client/utils/eodashSTAC.js

@@ -1,48 +1,85 @@
-import { Collection, Item } from 'stac-js';
-import { toAbsolute } from 'stac-js/src/http.js';
-import { generateFeatures } from './helpers'
+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 | undefined} */
-  #collectionUrl = undefined;
-  #collectionStac = undefined;
-  /** @type {*} */
-  selectedItem = null;
-
+  /** @type {string} */
+  #collectionUrl = "";
+  /** @type {import("stac-ts").StacCollection | undefined} */
+  #collectionStac;
   /**
-   * @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) => {
-    let stacItem, stac;
+    /** @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 = [
-      {
-        type: 'Tile',
+      /*{
+        type: "Tile",
         properties: {
-          id: 'OSM',
+          id: "OSM",
         },
         source: {
-          type: 'OSM',
+          type: "OSM",
         },
-      },
+      },*/
     ];
     // Load collectionstac if not yet initialized
     if (!this.#collectionStac) {
-      //@ts-expect-error
-      const response = await fetch(this.#collectionUrl);
-      stac = await response.json();
+      const response = await axios.get(this.#collectionUrl);
+      stac = await response.data;
       this.#collectionStac = new Collection(stac);
     }
 
-    if(stac && stac.endpointtype === "GeoDB") {
+    if (stac && stac.endpointtype === "GeoDB") {
       // Special handling of point based data
       const allFeatures = generateFeatures(stac.links);
       layersJson.unshift({
@@ -52,7 +89,6 @@ export class EodashCollection {
         },
         source: {
           type: "Vector",
-          // @ts-ignore
           url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
           format: "GeoJSON",
         },
@@ -62,17 +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) => {
-          //@ts-expect-error
-          const distanceA = Math.abs(new Date(a.datetime) - item);
-          //@ts-expect-error
-          const distanceB = Math.abs(new Date(b.datetime) - item);
+        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(),
+          );
           return distanceA - distanceB;
         })[0];
         this.selectedItem = stacItem;
@@ -82,83 +122,128 @@ export class EodashCollection {
       const response = await fetch(
         stacItem
           ? toAbsolute(stacItem.href, this.#collectionUrl)
-          : this.#collectionUrl
+          : this.#collectionUrl,
       );
       stac = await response.json();
-      
+
       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];
-        layersJson = await this.createLayersJson(this.selectedItem);
-        return layersJson;
+        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;
-        //@ts-expect-error
-        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 (
-      //@ts-expect-error
-       // eslint-disable-next-line
-     /** @type {import('stac-ts').StacLink[]}*/(this.#collectionStac?.links)
-        .filter((i) => i.rel === 'item')
+      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))
+        .sort((a, b) =>
+          /** @type {number} */ (a.datetime) <
+          /** @type {number} */ (b.datetime)
+            ? -1
+            : 1,
+        )
     );
   }
 
   getDates() {
     return (
-     //@ts-expect-error
-      // eslint-disable-next-line
-      /** @type {import('stac-ts').StacLink[]}*/ (this.#collectionStac?.links)
-        .filter((i) => i.rel === 'item')
+      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)))
+        .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,27 +1,38 @@
 /**
- * loads font in the app using `webfontloader`
- * @param {string} [family="Roboto"]
+ * Loads font in the app using `webfontloader`
+ *
+ * @param {string} [family]
  * @param {string} [link]
- * @returns {Promise<string>} - font family name
- * @see {@link "https://github.com/typekit/webfontloader "}
+ * @param {boolean} [isWebComponent]
+ * @returns {Promise<string>} - Font family name
+ * @see {@link "https://github.com/typekit/webfontloader"}
  */
-export const loadFont = async (family = "Roboto", link) => {
-  const WebFontLoader = (await import('webfontloader')).default;
-  if (link) {
+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],
       },
-    });
-  }
-  else {
-    WebFontLoader.load({
-      google: {
-        families: [family]
-      }
+      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;

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,10 +2,12 @@
   <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent @vue:mounted="onTemplateMount?.(hiddenElements)"
-      :style="`height: ${eodash.brand.noLayout ? (onTemplateMount ? '100%' : '90dvh') : 'calc(100dvh - ' + mainRect['top'] + mainRect['bottom'] + 'px)'}`" />
+    <TemplateComponent
+      @vue:mounted="onTemplateMount?.(hiddenElements)"
+      class="template"
+    />
     <template #fallback>
-      <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
+      <div class="loading-container">
         <Loading />
       </div>
     </template>
@@ -16,73 +18,99 @@
 <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)
+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 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)`;
 
-/** @type {import("vue").Ref<InstanceType<typeof
- *  import("@/components/Header.vue").default >|null>}
- **/
 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(() => {
-  const htmlTag = /** @type {HTMLElement}  */(document.querySelector('html'))
-  htmlTag.style.overflow = 'hidden';
-
   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 = `
-  error: ${e}.
+  ${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

@@ -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 };
 }