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

package/core/{eodash.js → client/eodash.js}

@@ -12,9 +12,6 @@ export const eodash = reactive({
   brand: {
     noLayout: true,
     name: "Demo",
-    font: {
-      family: "Roboto",
-    },
     theme: {
       colors: {
         primary: "#fff",
@@ -51,46 +48,51 @@ export const eodash = reactive({
       {
         id: Symbol(),
         type: "internal",
-        title: "itemfilter",
-        layout: { x: 0, y: 0, w: 3, h: 12 },
+        title: "Indicators",
+        layout: { x: 0, y: 0, w: 2, h: 12 },
         widget: {
           name: "EodashItemFilter",
         },
       },
       {
-        id: Symbol(),
-        type: "internal",
-        title: "datepicker",
-        layout: { x: 5, y: 11, w: 2, h: 1 },
-        widget: {
-          name: "EodashDatePicker",
-          properties: {
-            inline: true,
-          },
-        },
-      },
-      {
-        id: Symbol(),
-        title: "Information",
-        layout: { x: 9, y: 0, w: 3, h: 12 },
-        widget: {
-          link: async () => await import("@eox/stacinfo"),
-          properties: {
-            for: currentUrl,
-            allowHtml: "true",
-            styleOverride:
-              "#properties li > .value {font-weight: normal !important;}",
-            header: "[]",
+        defineWidget: (selectedSTAC) => {
+          return selectedSTAC ? {
+            id: "Information",
+            title: "Information",
+            layout: { x: 9, y: 0, w: 3, h: 12 },
+            type: "web-component",
+            widget: {
+              link: async () => await import("@eox/stacinfo"),
+              properties: {
+                for: currentUrl,
+                allowHtml: "true",
+                styleOverride:
+                  "#properties li > .value {font-weight: normal !important;}",
+                header: "[]",
 
-            subheader: "[]",
-            properties: '["description"]',
-            featured: "[]",
-            footer: "[]",
-          },
-          tagName: "eox-stacinfo",
-        },
-        type: "web-component",
+                subheader: "[]",
+                properties: '["description"]',
+                featured: "[]",
+                footer: "[]",
+              },
+              tagName: "eox-stacinfo",
+            }
+          } : null
+        }
       },
+      {
+        defineWidget: (selectedSTAC) => {
+          return selectedSTAC ? {
+            id: "Datepicker",
+            type: "internal",
+            layout: { x: 5, y: 10, w: 1, h: 1 },
+            title: "Datepicker",
+            widget: {
+              name: "EodashDatePicker",
+            },
+          } : null
+        }
+      }
     ],
   },
 });

package/core/{plugins → client/plugins}/index.js

@@ -1,6 +1,7 @@
 import vuetify from './vuetify';
 import { createPinia } from 'pinia';
 import eodash from '@/eodash';
+import VCalendar from 'v-calendar';
 import { eodashKey } from '@/utils/keys';
 import store from '../store';
 
@@ -14,5 +15,7 @@ export function registerPlugins(app) {
 
   app.use(vuetify)
     .use(pinia)
+    // Use plugin with optional defaults
+    .use(VCalendar, {})
     .provide(eodashKey, eodash);
 }

package/core/{plugins → client/plugins}/vuetify.js

@@ -14,7 +14,7 @@ import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js"
 const vuetify = createVuetify({
   icons: {
     aliases: {
-      // remapping v-date-picker and v-tabs default icons to `@mdi/js`
+      // mapping v-date-picker and v-tabs default icons to `@mdi/js`
       next: [mdiChevronRight],
       prev: [mdiChevronLeft],
       subgroup: [mdiMenuDown]

package/core/{types.d.ts → client/types.d.ts}

@@ -27,13 +27,13 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
   /**
    * Triggered when the web component is mounted in the DOM.
    * @param el - web component
-   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
+   * @param store - return value of the core STAC pinia store in `/core/client/store/stac.ts`
    */
   onMounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
   /**
    * Triggered when the web component is unmounted from the DOM.
    * @param el - web component
-   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
+   * @param store - return value of the core STAC pinia store in `/core/client/store/stac.ts`
    */
   onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
 }
@@ -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/{utils → 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

@@ -0,0 +1,32 @@
+/**
+ * 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;
+};

package/core/{views → client/views}/Dashboard.vue

@@ -1,16 +1,15 @@
 <template>
-  <HeaderComponent v-if="!eodash.brand.noLayout" />
+  <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent @vue:mounted="onTemplateMount?.()"
-      :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>
   </Suspense>
-  <FooterComponent v-if="!eodash.brand.noLayout" />
+  <FooterComponent ref="footerRef" v-if="!eodash.brand.noLayout" />
 </template>
 
 <script setup>
@@ -31,7 +30,6 @@ const props = defineProps({
     type: Function
   }
 })
-
 const eodash = await useEodashRuntime(props.config)
 
 useURLSearchParametersSync();
@@ -39,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()
@@ -52,19 +50,50 @@ 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)`
+
+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(() => {
-  const htmlTag = /** @type {HTMLElement}  */(document.querySelector('html'))
-  htmlTag.style.overflow = 'hidden';
+  if (props.onTemplateMount && !eodash.brand.noLayout) {
+    hiddenElements.forEach(element => {
+      /** @type {HTMLElement} */
+      // @ts-expect-error
+      (element.value.$el).style.opacity = "0"
+    })
+  }
 })
 
 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>