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

package/README.md

@@ -18,9 +18,19 @@ npm run preview
 
 ## Folder Structure
     .
-    ├── core               # Main source code that hosts the microfrontends and renders the dashboard
+    ├── bin                # CLI source code
+    ├── core               # Client source code that hosts the microfrontends and renders the dashboard
     ├── docs               # Documentation files
+    ├── tests              # CLI and component tests folder
     ├── widgets            # Vue componenets as internal widgets.
     ├── public             # Statically served directory
     └── README.md
 
+
+## Writing commits
+To ensure clear communication with the package consumers and enable machine-readable commits, we adhere to [The Conventional Commits](https://www.conventionalcommits.org/) specification that allows the generation of [semVer](https://semver.org) releases and associated change logs using [googleapis/release-please](https://github.com/googleapis/release-please).
+
+The most important prefixes you should have in mind are:
+* fix: which represents bug fixes, and correlates to a SemVer patch.
+* feat: which represents a new feature, and correlates to a SemVer minor.
+* feat!:, or fix!:, refactor!:, etc., which represent a breaking change (indicated by the !) and will result in a SemVer major.

package/bin/types.d.ts

@@ -40,6 +40,7 @@ export interface EodashConfig {
    * File exporting eodash client runtime config
    */
   runtime?: string
+  /** set a custom path for importing user defined internal widgets */
   widgets?: string
   /** builds eodash as a web component library */
   lib?: boolean

package/bin/utils.js

@@ -63,7 +63,7 @@ export const appPath = fileURLToPath(new URL("..", import.meta.url)),
   cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
 
 
-export const logger = createLogger()
+export const logger = createLogger(undefined, { prefix: '[eodash]' })
 
 /**
  * @param {Options} options

package/core/App.vue

@@ -1,19 +1,27 @@
 <template>
   <v-app>
     <Suspense>
-      <!-- main content -->
+
       <Dashboard />
 
-      <!-- loading state -->
       <template #fallback>
-        <Loading />
+        <ErrorAlert v-model="error" />
       </template>
     </Suspense>
   </v-app>
 </template>
 
 <script setup>
-import Loading from '@/components/Loading.vue';
 import Dashboard from '@/views/Dashboard.vue';
+import ErrorAlert from './components/ErrorAlert.vue';
+import { onErrorCaptured, ref } from 'vue';
 
+const error = ref('')
+onErrorCaptured((e, inst, info) => {
+  error.value = `
+  ${e}.
+  component: ${inst?.$.type.name}.
+  info: ${info}.
+  `
+})
 </script>

package/core/SuspensedDashboard.ce.vue

@@ -2,20 +2,19 @@
   <v-app>
     <Suspense>
       <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
+
       <template #fallback>
-        <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
-          <Loading />
-        </div>
+        <ErrorAlert @vue:mounted="setStylesFromHead()" v-model="error" />
       </template>
     </Suspense>
   </v-app>
 </template>
 <script setup>
 import Dashboard from '@/views/Dashboard.vue';
-import { createApp, getCurrentInstance } from "vue"
+import { createApp, getCurrentInstance, onErrorCaptured, ref } from "vue"
 import { registerPlugins } from '@/plugins';
 import { eodashKey } from '@/utils/keys';
-import Loading from '@/components/Loading.vue';
+import ErrorAlert from '@/components/ErrorAlert.vue';
 
 defineProps({
   config: {
@@ -62,4 +61,13 @@ ${//@ts-expect-error
   styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
   eodashComponent?.shadowRoot?.adoptedStyleSheets.push(styleSheet)
 }
+
+const error = ref('')
+onErrorCaptured((e, comp, info) => {
+  error.value = `
+  ${e}.
+  component: ${comp?.$.type.name}.
+  info: ${info}.
+  `
+})
 </script>

package/core/components/DashboardLayout.vue

@@ -1,21 +1,22 @@
 <template>
   <v-main>
     <eox-layout :gap="eodash.template.gap ?? 2">
-      <eox-layout-item style="z-index: 0;" x="0" y="0" h="12" w="12">
-        <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props" />
+      <eox-layout-item v-if="bgWidget.component" style="z-index: 0;" x="0" y="0" h="12" w="12">
+        <Suspense suspensible>
+          <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props" />
+        </Suspense>
       </eox-layout-item>
-      <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx"
-        style="position: relative; overflow: visible; z-index: 1; border-radius: 0px; background: rgb(var(--v-theme-surface))"
-        :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
+      <template v-for="(config, idx) in widgetsConfig" :key="idx">
+        <eox-layout-item v-if="importedWidgets[idx].value.component"
+          style="position: relative; overflow: visible; z-index: 1; border-radius: 0px; background: rgb(var(--v-theme-surface))"
+          :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
 
-        <v-btn v-if="slideBtns[idx].enabled" position="absolute" variant="tonal" :style="slideBtns[idx].style"
-          class="slide-btn" @click="slideInOut(idx)">
-          <v-icon :icon="slideBtns[idx].active ? slideBtns[idx].icon.in : slideBtns[idx].icon.out" />
-        </v-btn>
-        <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
-          v-bind="importedWidgets[idx].value.props" />
-
-      </eox-layout-item>
+          <Suspense suspensible>
+            <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
+              v-bind="importedWidgets[idx].value.props" />
+          </Suspense>
+        </eox-layout-item>
+      </template>
     </eox-layout>
   </v-main>
 </template>
@@ -23,8 +24,6 @@
 import { eodashKey } from '@/utils/keys';
 import { inject } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
-import { useSlidePanels } from '@/composables'
-import { ref } from 'vue';
 import '@eox/layout'
 
 const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
@@ -34,11 +33,4 @@ const [bgWidget] = useDefineWidgets([eodash.template?.background])
 const widgetsConfig = eodash.template?.widgets
 
 const importedWidgets = useDefineWidgets(widgetsConfig)
-/**
- * Layout items template ref
- * @type {import('vue').Ref<HTMLElement[]>}
- */
-const itemEls = ref([])
-
-const { slideBtns, slideInOut } = useSlidePanels(itemEls, widgetsConfig)
 </script>

package/core/components/ErrorAlert.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-alert v-if="error" translate="yes" location="start bottom" type="error" position="fixed" @click:close="error = ''"
+    variant="elevated" :icon="[mdiAlertCircle]" style="z-index: 10000;" closable :close-icon="[mdiClose]">
+    {{ errorMessage }}
+    <details is="animated-details">
+      <summary> Error </summary>
+      {{ error }}
+    </details>
+  </v-alert>
+</template>
+<script setup>
+import { eodashKey } from "@/utils/keys";
+import { mdiClose, mdiAlertCircle } from "@mdi/js"
+import { inject } from "vue";
+
+const error = defineModel({ type: String, required: true })
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+const errorMessage = eodash.brand.errorMessage ?? 'something went wrong, please try again later'
+</script>

package/core/components/Loading.vue

@@ -1,6 +1,7 @@
 <template>
   <v-row class="d-flex justify-center align-center ">
     <v-col class="flex-column justify-center align-center">
+      <ErrorAlert v-model="error" />
       <Suspense>
         <component v-if="loading.component" :is="loading.component" v-bind="loading.props"></component>
         <div v-else class="text-center">
@@ -16,12 +17,22 @@
   </v-row>
 </template>
 <script setup>
-import { inject } from 'vue';
+import { inject, onErrorCaptured, ref } from 'vue';
 import { eodashKey } from '@/utils/keys';
 import { useDefineWidgets } from '@/composables/DefineWidgets';
+import ErrorAlert from './ErrorAlert.vue';
 
 const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
 
 const [loading] = useDefineWidgets([eodash.template.loading])
 
+const error = ref('')
+onErrorCaptured((e, inst, info) => {
+  error.value = `
+  ${e}.
+  component: ${inst?.$.type.name}.
+  info: ${info}.
+  `
+})
+
 </script>

package/core/components/MobileLayout.vue

@@ -1,24 +1,32 @@
 <template>
   <v-main class="overflow-hidden" style="height: 91dvh;">
+    <Suspense suspensible>
+      <component id="bg-widget" v-if="bgWidget.component" :is="bgWidget.component" v-bind="bgWidget.props"></component>
+    </Suspense>
 
-    <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props"></component>
-
-    <div v-show="activeIdx === idx" id="overlay" class="pa-2" v-for="(importedWidget, idx) in importedWidgets"
-      :key="idx" :style="{
+    <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+      <div v-if="importedWidget.value.component" v-show="activeIdx === idx" id="overlay" class="pa-2" :style="{
         bottom: tabsHeightFromBtm, position: 'absolute', overflow: 'hidden',
         width: '100%', left: 0, top: mainRect.top + 'px', zIndex: 1, background: 'rgb(var(--v-theme-surface))'
       }">
-      <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
-      <component style="height: 94% !important;" :key="importedWidget.value.id" :is="importedWidget.value.component"
-        v-show="activeIdx === idx" v-bind="importedWidget.value.props" />
-    </div>
+        <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
+        <Suspense suspensible>
+          <div style="height: 90% !important;" v-show="activeIdx === idx">
+            <component :key="importedWidget.value.id" :is="importedWidget.value.component"
+              v-bind="importedWidget.value.props" />
+          </div>
+        </Suspense>
+      </div>
+    </template>
 
     <v-tabs ref="tabs" align-tabs="center" bg-color="surface"
       :style="{ position: 'relative', bottom: (mainRect.bottom || 48) + 'px', zIndex: 10 }" show-arrows
       v-model="activeIdx">
-      <v-tab v-for="(importedWidget, idx) in importedWidgets" :key="idx" :value="idx">
-        {{ importedWidget.value.title }}
-      </v-tab>
+      <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+        <v-tab v-if="importedWidget.value.component" :value="idx">
+          {{ importedWidget.value.title }}
+        </v-tab>
+      </template>
     </v-tabs>
 
   </v-main>

package/core/composables/DefineWidgets.js

@@ -60,9 +60,11 @@ export const useDefineWidgets = (widgetConfigs) => {
     if ('defineWidget' in (config ?? {})) {
       const { selectedStac } = storeToRefs(useSTAcStore())
       watch(selectedStac, (updatedStac) => {
-        const definedConfig = reactive(/** @type {import("@/types").FunctionalWidget} */
-          (config)?.defineWidget(updatedStac))
-        definedWidget.value = definedWidget.value.id === definedConfig.id ?
+        let definedConfig =  /** @type {import("@/types").FunctionalWidget} */(config)?.defineWidget(updatedStac)
+        if (definedConfig) {
+          definedConfig = reactive(definedConfig)
+        }
+        definedWidget.value = definedWidget.value.id === definedConfig?.id ?
           definedWidget.value : getWidgetDefinition(definedConfig);
       }, { immediate: true })
     } else {
@@ -76,7 +78,7 @@ export const useDefineWidgets = (widgetConfigs) => {
 
 /**
  * Converts a static widget configuration to a defined imported widget
- * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined} config
+ * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined | null} config
  * @returns {DefinedWidget}
  **/
 const getWidgetDefinition = (config) => {
@@ -119,7 +121,11 @@ const getWidgetDefinition = (config) => {
       break;
 
     default:
-      console.error('Widget type not found')
+      if (!config) {
+        return importedWidget
+      } else {
+        console.error('Widget type not found')
+      }
       break;
   }
   importedWidget.title = config?.title ?? ''

package/core/composables/index.js

@@ -6,6 +6,7 @@ import { currentUrl, indicator, mapPosition } from "@/store/States";
 import eodash from "@/eodash";
 import { useTheme } from "vuetify/lib/framework.mjs";
 import { onMounted, watch } from "vue";
+import { mdiChevronDoubleDown, mdiChevronDoubleLeft, mdiChevronDoubleRight, mdiChevronDoubleUp } from "@mdi/js"
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -56,41 +57,43 @@ export const useSlidePanels = (elements, configs) => {
   /**
    * Array of sliding button's style and icons
    */
-  const slideBtns = slideDirs.map((dir, idx) => {
+  const slideBtns = slideDirs.map((dir, _idx) => {
     const btn = reactive({
       style: {},
       icon: { in: "", out: "" },
       active: false,
       enabled: true,
     });
-    if (configs[idx].slidable === false) {
-      btn.enabled = false;
-      return btn;
-    }
+
+    // temp removal of `slidable` from the  widgets API
+    // if (configs[idx].slidable === false) {
+    //   btn.enabled = false;
+    //   return btn;
+    // }
 
     switch (dir) {
       case "left":
         btn.style = { top: "50%", right: "-11%" };
-        btn.icon.in = "mdi-chevron-double-right";
-        btn.icon.out = "mdi-chevron-double-left";
+        btn.icon.in = mdiChevronDoubleRight
+        btn.icon.out = mdiChevronDoubleLeft
 
         break;
       case "right":
         btn.style = { top: "50%", left: "-11%" };
-        btn.icon.in = "mdi-chevron-double-left";
-        btn.icon.out = "mdi-chevron-double-right";
+        btn.icon.in = mdiChevronDoubleLeft
+        btn.icon.out = mdiChevronDoubleRight
 
         break;
       case "up":
         btn.style = { right: "50%", bottom: "-17%" };
-        btn.icon.in = "mdi-chevron-double-down";
-        btn.icon.out = "mdi-chevron-double-up";
+        btn.icon.in = mdiChevronDoubleDown
+        btn.icon.out = mdiChevronDoubleUp
 
         break;
       case "down":
         btn.style = { right: "50%", top: "-17%" };
-        btn.icon.in = "mdi-chevron-double-up";
-        btn.icon.out = "mdi-chevron-double-down";
+        btn.icon.in = mdiChevronDoubleUp
+        btn.icon.out = mdiChevronDoubleDown
         break;
 
       default:

package/core/eodash.js

@@ -53,7 +53,6 @@ export const eodash = reactive({
         type: "internal",
         title: "itemfilter",
         layout: { x: 0, y: 0, w: 3, h: 12 },
-        slidable: false,
         widget: {
           name: "EodashItemFilter",
         },
@@ -63,7 +62,6 @@ export const eodash = reactive({
         type: "internal",
         title: "datepicker",
         layout: { x: 5, y: 11, w: 2, h: 1 },
-        slidable: false,
         widget: {
           name: "EodashDatePicker",
           properties: {

package/core/plugins/vuetify.js

@@ -5,15 +5,21 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css';
 import 'vuetify/styles';
 
 
 import { createVuetify } from 'vuetify';
-// import {} from "vuetify"
+import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js"
 
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 const vuetify = createVuetify({
+  icons: {
+    aliases: {
+      // remapping v-date-picker and v-tabs default icons to `@mdi/js`
+      next: [mdiChevronRight],
+      prev: [mdiChevronLeft],
+      subgroup: [mdiMenuDown]
+    },
+  },
   theme: {
     themes: {
       dashboardTheme: {},

package/core/store/stac.js

@@ -39,7 +39,9 @@ export const useSTAcStore = defineStore('stac', () => {
         return link
       })
       stac.value = links;
-    }).catch(err => console.error(err));
+    }).catch(err => {
+      throw new Error("error loading assigned STAC endpoint", err)
+    });
   }
 
   /**
@@ -56,7 +58,9 @@ export const useSTAcStore = defineStore('stac', () => {
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
       indicator.value = selectedStac.value?.id ?? "";
-    }).catch(err => console.error(err));
+    }).catch(err => {
+      throw new Error("error loading the selected STAC", err)
+    });
   }
 
   return { stac, loadSTAC, loadSelectedSTAC, selectedStac };

package/core/types.d.ts

@@ -23,7 +23,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
   constructorProp?: string
   tagName: `${string}-${string}`
   /** Object defining all the properties and attributes of the web component */
-  properties?: Record<string, any>
+  properties?: Record<string, unknown>
   /**
    * Triggered when the web component is mounted in the DOM.
    * @param el - web component
@@ -41,7 +41,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
 
 /** @ignore */
 export interface WidgetsContainerProps {
-  widgets: Omit<Widget, 'layout' | 'slidable'>[]
+  widgets: Omit<Widget, 'layout'>[]
 }
 
 // eodash types:
@@ -73,10 +73,6 @@ export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
      */
     h: number
   },
-  /**
- * Enable/Disable widget sliding.
- */
-  slidable?: boolean
   widget: WebComponentProps<T>
   type: 'web-component'
 }
@@ -110,10 +106,6 @@ export interface InternalComponentWidget {
      */
     h: number
   }
-  /**
-   * Enable/Disable widget sliding.
-   */
-  slidable?: boolean
   widget: {
     /**
      * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder. Referenced
@@ -159,10 +151,6 @@ export interface IFrameWidget {
      */
     h: number
   }
-  /**
-  * Enable/Disable widget sliding.
-  */
-  slidable?: boolean;
   widget: {
     /**
      * The URL of the page to embed
@@ -176,13 +164,13 @@ export interface IFrameWidget {
  */
 export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
   /**
-   * Provides a functional definition of the widget,
-   * gets triggered whenever a STAC object is selected.
+   * Provides a functional definition of widgets,
+   * gets triggered whenever a STAC object is selected, and only renders the returned configuration
+   * if the `id` doesn't match the currently rendered `id`
    * @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'>
+    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
@@ -201,10 +189,6 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
      */
     h: number
   }
-  /**
-  * Enable/Disable widget sliding.
-  */
-  slidable?: boolean
 }
 /**
  * @group Eodash
@@ -275,6 +259,8 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
   brand: {
     /** Removes the dashboard layout */
     noLayout?: boolean
+    /** 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.
@@ -348,7 +334,7 @@ export interface EodashStore {
  * the project's entry point should export this function as a default
  * to instantiate eodash
  * @group Eodash
- * @param  configCallback
+ * @param config
  */
 export declare const createEodash: (config: ((store: EodashStore) => Eodash | Promise<Eodash>) | Eodash) => Eodash | Promise<Eodash>
 

package/core/views/Dashboard.vue

@@ -1,10 +1,11 @@
 <template>
   <HeaderComponent 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)'}`" />
     <template #fallback>
-      <div v-if="onTemplateMount" style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
+      <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
         <Loading />
       </div>
     </template>
@@ -16,10 +17,11 @@
 import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from '@/store/stac';
-import { defineAsyncComponent, onMounted } from "vue";
+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: {
@@ -56,4 +58,13 @@ onMounted(() => {
   htmlTag.style.overflow = 'hidden';
 })
 
+const error = ref('')
+onErrorCaptured((e, comp, info) => {
+  error.value = `
+  error: ${e}.
+  component: ${comp?.$.type.name}.
+  info: ${info}.
+  `
+})
+
 </script>