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

package/core/client/types.d.ts

@@ -45,6 +45,28 @@ export interface WidgetsContainerProps {
 }
 
 // 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
@@ -55,24 +77,7 @@ export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
   /**
    * Widget position and size.
    */
-  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
-  },
+  layout: Layout,
   widget: WebComponentProps<T>
   type: 'web-component'
 }
@@ -88,24 +93,7 @@ export interface InternalComponentWidget {
   /**
   * Widget position and size.
   */
-  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
-  }
+  layout: Layout
   widget: {
     /**
      * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder. Referenced
@@ -133,24 +121,7 @@ export interface IFrameWidget {
   /**
   * Widget position and size.
   */
-  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
-  }
+  layout: Layout
   widget: {
     /**
      * The URL of the page to embed
@@ -170,32 +141,21 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
    * @param selectedSTAC - Currently selected STAC object
    */
   defineWidget: (selectedSTAC: import("stac-ts").StacCatalog |
-    import("stac-ts").StacCollection | import("stac-ts").StacItem | null) => Omit<StaticWidget<T>, 'layout' | 'slidable'> | undefined | null
-  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
-  }
+    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
 /**
- * @group Eodash
+ *  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>
 
@@ -221,8 +181,7 @@ export interface Template<T extends ExecutionTime = "compiletime"> {
   loading?: BackgroundWidget<T>
   /**
    * Widget rendered as the dashboard background.
-   * Has the same specifications of `Widget` without the `title` and  `layout` properties
-   * @see {@link Widget}
+   * Has the same specifications of {@link Widget} without the `title` and  `layout` properties
    */
   background?: BackgroundWidget<T>
   /**
@@ -235,10 +194,9 @@ export interface Template<T extends ExecutionTime = "compiletime"> {
 export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
 /**
- * @ignore
  * @group Eodash
  */
-export type ExecutionTime = "runtime" | "compiletime";
+type ExecutionTime = "runtime" | "compiletime";
 
 /**
  * Eodash instance API
@@ -262,16 +220,15 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
     /** custom error message to alert the users if something crashes */
     errorMessage?: string
     /**
-     * Automatically fetches the specified font family from google fonts. if the [link](#font-link) property is specified
-     * the font family will be fetched from the provided source instead.
+     *  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;
+      link: string;
       /**
-       * Font family. Use FVD notation to include families. see https://github.com/typekit/fvd
+       * Font family name.
        */
       family: string
     }
@@ -326,7 +283,7 @@ export interface EodashStore {
    *  Pinia store definition used to navigate the root STAC catalog.
    */
   stac: {
-    useSTAcStore: typeof import("./store/stac").useSTAcStore
+    useSTAcStore: typeof import("./store/stac.js").useSTAcStore
   }
 }
 ///////

package/core/client/utils/eodashSTAC.js

@@ -1,13 +1,15 @@
 import { Collection, Item } from 'stac-js';
 import { toAbsolute } from 'stac-js/src/http.js';
 import { generateFeatures } from './helpers'
+import axios from 'axios';
 
 export class EodashCollection {
-  /** @type {string | undefined} */
-  #collectionUrl = undefined;
-  #collectionStac = undefined;
-  /** @type {*} */
-  selectedItem = null;
+  /** @type {string} */
+  #collectionUrl = '';
+  /** @type {import("stac-ts").StacCollection | undefined} */
+  #collectionStac;
+  /** @type {import("stac-ts").StacLink | undefined } */
+  selectedItem;
 
   /**
    * @param {string} collectionUrl
@@ -21,8 +23,12 @@ export class EodashCollection {
    * @async
    */
   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',
@@ -36,13 +42,12 @@ export class EodashCollection {
     ];
     // 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({
@@ -68,11 +73,9 @@ export class EodashCollection {
     } 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;
@@ -85,19 +88,24 @@ export class EodashCollection {
           : 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);
+        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 layersJson;
       } else {
         // specific item was requested
         const item = new Item(stac);
         this.selectedItem = item;
-        //@ts-expect-error
         layersJson.unshift(this.buildJson(item));
         return layersJson;
       }
@@ -141,9 +149,7 @@ export class EodashCollection {
 
   getItems() {
     return (
-      //@ts-expect-error
-       // eslint-disable-next-line
-     /** @type {import('stac-ts').StacLink[]}*/(this.#collectionStac?.links)
+      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))
@@ -152,9 +158,7 @@ export class EodashCollection {
 
   getDates() {
     return (
-     //@ts-expect-error
-      // eslint-disable-next-line
-      /** @type {import('stac-ts').StacLink[]}*/ (this.#collectionStac?.links)
+      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))

package/core/client/utils/index.js

@@ -1,26 +1,30 @@
 /**
  * loads font in the app using `webfontloader`
- * @param {string} [family="Roboto"]
+ * @param {string} [family]
  * @param {string} [link]
+ * @param {boolean} [isWebComponent]
  * @returns {Promise<string>} - font family name
- * @see {@link "https://github.com/typekit/webfontloader "}
+ * @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}`)
       }
     });
   }

package/core/client/views/Dashboard.vue

@@ -2,10 +2,9 @@
   <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>
@@ -38,7 +37,7 @@ useURLSearchParametersSync();
 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()
@@ -51,10 +50,9 @@ const TemplateComponent = smAndDown.value ?
 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>}
@@ -64,9 +62,6 @@ const footerRef = ref(null);
 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 => {
       /** @type {HTMLElement} */
@@ -79,10 +74,26 @@ onMounted(() => {
 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/dist/client/DashboardLayout-BYROtP-7.js

@@ -0,0 +1,156 @@
+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";
+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(p, { suspensible: "" }, {
+              default: l(() => [
+                (t(), r(
+                  c(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, y) => (t(), r(
+              w,
+              {
+                key: y,
+                name: "fade"
+              },
+              {
+                default: l(() => [
+                  e.value.component ? (t(), u("eox-layout-item", {
+                    key: e.value.id,
+                    class: "panel",
+                    h: e.value.layout.h,
+                    w: e.value.layout.w,
+                    x: e.value.layout.x,
+                    y: e.value.layout.y
+                  }, [
+                    (t(), r(
+                      p,
+                      { suspensible: "" },
+                      {
+                        default: l(() => [
+                          (t(), r(
+                            c(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__ */ b(M, [["__scopeId", "data-v-d836e339"]]);
+export {
+  V as default
+};

package/dist/client/{DynamicWebComponent-C4Hotc4H.js → DynamicWebComponent-BQhxFPM0.js}

@@ -1,5 +1,5 @@
-import { aY as i, aZ as m, r as p, Z as d, a_ as f, _ as c, a5 as g, $ as _, d as y, a3 as k } from "./asWebComponent-Bvb3xkxI.js";
-const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
+import { b6 as i, aZ as m, r as p, Z as d, b7 as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-CbdGxelK.js";
+const h = { class: "d-flex flex-column fill-height overflow-auto" }, C = {
   __name: "DynamicWebComponent",
   props: {
     link: {
@@ -38,10 +38,10 @@ const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
       e.onMounted?.(r.value, s);
     }), f(() => {
       e.onUnmounted?.(r.value, s);
-    }), (n, x) => (c(), g("span", h, [
-      (c(), _(
+    }), (n, w) => (c(), g("span", h, [
+      (c(), y(
         k(o.tagName),
-        y(o.properties, {
+        _(o.properties, {
           ref_key: "elementRef",
           ref: r
         }),
@@ -53,5 +53,5 @@ const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
   }
 };
 export {
-  N as default
+  C as default
 };