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

package/core/client/components/Loading.vue

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

package/core/client/components/MobileLayout.vue

@@ -1,59 +1,81 @@
 <template>
   <v-main class="overflow-hidden main">
     <Suspense suspensible>
-      <component id="bg-widget" v-if="bgWidget.component" :is="bgWidget.component" v-bind="bgWidget.props"></component>
+      <component
+        id="bg-widget"
+        v-if="bgWidget.component"
+        :is="bgWidget.component"
+        v-bind="bgWidget.props"
+      ></component>
     </Suspense>
 
     <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
-      <div v-if="importedWidget.value.component" v-show="activeIdx === idx" id="overlay" class="pa-2 panel">
-        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1">&#x2715;</v-btn>
+      <div
+        v-if="importedWidget.value.component"
+        v-show="activeIdx === idx"
+        id="overlay"
+        class="pa-2 panel"
+      >
+        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
+          >&#x2715;</v-btn
+        >
         <Suspense suspensible>
           <div class="component-container" v-show="activeIdx === idx">
-            <component :key="importedWidget.value.id" :is="importedWidget.value.component"
-              v-bind="importedWidget.value.props" />
+            <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" class="tabs" show-arrows v-model="activeIdx">
+    <v-tabs
+      ref="tabs"
+      align-tabs="center"
+      bg-color="surface"
+      class="tabs"
+      show-arrows
+      v-model="activeIdx"
+    >
       <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>
 </template>
 <script setup>
-import { eodashKey } from '@/utils/keys';
-import { inject, ref, onMounted } from 'vue';
-import { useDefineWidgets } from '@/composables/DefineWidgets'
-import { useLayout } from "vuetify"
+import { eodashKey } from "@/utils/keys";
+import { inject, ref, onMounted } from "vue";
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { useLayout } from "vuetify";
 
-const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
 //import widgets
-const widgetsConfig = eodash.template.widgets
-const importedWidgets = useDefineWidgets(widgetsConfig)
-const [bgWidget] = useDefineWidgets([eodash.template?.background])
+const widgetsConfig = eodash.template.widgets;
+const importedWidgets = useDefineWidgets(widgetsConfig);
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
 
-const { mainRect } = useLayout()
+const { mainRect } = useLayout();
 
-const activeIdx = ref(-1)
+const activeIdx = ref(-1);
 
-/** @type {import("vue").Ref<import("vuetify/components").VTabs|null>} */
-const tabs = ref(null)
-const tabsHeightFromBtm = ref('')
-const mainRectTopPx = ref('')
-const mainRectBtmPx = ref('')
+/** @type {import("vue").Ref<import("vuetify/components").VTabs | null>} */
+const tabs = ref(null);
+const tabsHeightFromBtm = ref("");
+const mainRectTopPx = ref("");
+const mainRectBtmPx = ref("");
 
 onMounted(() => {
-  mainRectTopPx.value = mainRect.value.top + 'px';
-  mainRectBtmPx.value = (mainRect.value.bottom || 48) + 'px';
-  tabsHeightFromBtm.value = mainRect.value.bottom + (/** @type {HTMLElement} */(tabs.value?.$el)?.clientHeight ?? 0) + "px"
-})
+  mainRectTopPx.value = mainRect.value.top + "px";
+  mainRectBtmPx.value = (mainRect.value.bottom || 48) + "px";
+  tabsHeightFromBtm.value =
+    mainRect.value.bottom + (tabs.value?.$el?.clientHeight ?? 0) + "px";
+});
 </script>
 <style scoped>
 .main {

package/core/client/composables/DefineEodash.js

@@ -2,57 +2,66 @@ import store from "@/store";
 import { eodashKey } from "@/utils/keys";
 import { inject } from "vue";
 
-
-
 /**
- * Sets user defined instance on runtime.
- * Consumes `/@fs/config.js` and assign it to `eodash`
+ * Sets user defined instance on runtime. Consumes `/@fs/config.js` and assign
+ * it to `eodash`
+ *
  * @async
- * @returns {Promise<import("@/types").Eodash>}
  * @param {string | undefined} runtimeConfig
+ * @returns {Promise<import("@/types").Eodash>}
  * @see {@linkplain '@/eodash.js'}
  */
 export const useEodashRuntime = async (runtimeConfig) => {
-  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
-  /**
-   * @param {import("@/types").Eodash} config
-   */
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+  /** @param {import("@/types").Eodash} config */
   const assignInstance = (config) => {
-       /** @type {(keyof import("@/types").Eodash)[]} */(Object.keys(eodash))
-      .forEach((key) => {
-        //@ts-expect-error
-        eodash[key] = config[key]
-      })
-  }
+    /** @type {(keyof import("@/types").Eodash)[]} */ (
+      Object.keys(eodash)
+    ).forEach((key) => {
+      //@ts-expect-error to do
+      eodash[key] = config[key];
+    });
+  };
 
   if (runtimeConfig) {
-    assignInstance((await import( /* @vite-ignore */new URL(runtimeConfig, import.meta.url).href)).default);
-    return eodash
+    assignInstance(
+      (
+        await import(
+          /* @vite-ignore */ new URL(runtimeConfig, import.meta.url).href
+        )
+      ).default,
+    );
+    return eodash;
   }
 
   try {
-    const configJs = '/config.js'
+    const configJs = "/config.js";
     assignInstance(
-      (await import( /* @vite-ignore */new URL(configJs, import.meta.url).href)).default
-    )
+      (await import(/* @vite-ignore */ new URL(configJs, import.meta.url).href))
+        .default,
+    );
   } catch {
     try {
-      assignInstance(await import("user:config").then(async m => await m['default']))
+      assignInstance(
+        await import("user:config").then(async (m) => await m["default"]),
+      );
     } catch {
-      console.error('no dashboard configuration defined')
+      console.error("no dashboard configuration defined");
     }
   }
-  return eodash
-}
+  return eodash;
+};
 
 /**
- * @param {((store:import("@/types").EodashStore)=> Promise<import("@/types").Eodash>)
- * | import("@/types").Eodash}  config
+ * @param {((
+ *       store: import("@/types").EodashStore,
+ *     ) => Promise<import("@/types").Eodash>)
+ *   | import("@/types").Eodash} config
  */
 export const createEodash = async (config) => {
   if (config instanceof Function) {
-    return await config(store)
+    return await config(store);
   } else {
-    return config
+    return config;
   }
-}
+};

package/core/client/composables/DefineWidgets.js

@@ -1,141 +1,161 @@
-import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
-import { useSTAcStore } from '@/store/stac'
-import { storeToRefs } from 'pinia'
+import { defineAsyncComponent, reactive, shallowRef, watch } from "vue";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
 
 /**
  * @typedef {{
- *   component: import('vue').Component | null;
+ *   component: import("vue").Component | null;
  *   props: Record<string, unknown>;
  *   title: string;
  *   id: string | number | symbol;
- *   layout: { x: number; y: number; h: number; w: number }
+ *   layout: { x: number; y: number; h: number; w: number };
  * }} DefinedWidget
-*/
+ */
 
-/**
- * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
-*/
+/** @typedef {import("vue").ShallowRef<DefinedWidget>} ReactiveDefinedWidget */
 
 const internalWidgets = (() => {
-  /**
-   * @type {Record<string,() => Promise<import('vue').Component>>}
-   */
+  /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
-    ...import.meta.glob('^/**/*.vue'),
-    ...import.meta.glob("user:widgets/**/*.vue")
-  }
+    ...import.meta.glob("^/**/*.vue"),
+    ...import.meta.glob("user:widgets/**/*.vue"),
+  };
   for (const key in importMap) {
-    const newKey = /** @type {string} */(key.split('/').at(-1)).slice(0, -4)
-    Object.defineProperty(importMap, newKey,
-      /** @type {PropertyDescriptor} */(Object.getOwnPropertyDescriptor(importMap, key)));
+    const newKey = /** @type {string} */ (key.split("/").at(-1)).slice(0, -4);
+    Object.defineProperty(
+      importMap,
+      newKey,
+      /** @type {PropertyDescriptor} */ (
+        Object.getOwnPropertyDescriptor(importMap, key)
+      ),
+    );
     delete importMap[key];
   }
-  return importMap
+  return importMap;
 })();
 
-
 /**
  * Composable that converts widgets Configurations to defined imported widgets
- * @param { (import("@/types").Widget | import("@/types").BackgroundWidget | undefined)[] |
- * import("@/types").WidgetsContainerProps['widgets'] | undefined} widgetConfigs
- * @returns {Array<ReactiveDefinedWidget>}
- **/
+ *
+ * @param {(
+ *       | import("@/types").Widget
+ *       | import("@/types").BackgroundWidget
+ *       | Omit<import("@/types").Widget, "layout">
+ *       | undefined
+ *     )[]
+ *   | undefined} widgetConfigs
+ * @returns {ReactiveDefinedWidget[]}
+ */
 export const useDefineWidgets = (widgetConfigs) => {
-  /**
-   * @type {Array<ReactiveDefinedWidget>}
-   */
-  const definedWidgets = []
+  /** @type {ReactiveDefinedWidget[]} */
+  const definedWidgets = [];
 
-  for (const config of (widgetConfigs ?? [])) {
-    /**
-     * @type {ReactiveDefinedWidget}
-     */
+  for (const config of widgetConfigs ?? []) {
+    /** @type {ReactiveDefinedWidget} */
     const definedWidget = shallowRef({
       component: null,
       props: {},
-      title: '',
+      title: "",
       id: Symbol(),
-      layout: { x: 0, y: 0, h: 0, w: 0 }
-    })
+      layout: { x: 0, y: 0, h: 0, w: 0 },
+    });
 
-    if ('defineWidget' in (config ?? {})) {
-      const { selectedStac } = storeToRefs(useSTAcStore())
-      watch(selectedStac, (updatedStac) => {
-        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 })
+    if ("defineWidget" in (config ?? {})) {
+      const { selectedStac } = storeToRefs(useSTAcStore());
+      watch(
+        selectedStac,
+        (updatedStac) => {
+          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 {
-      definedWidget.value = getWidgetDefinition(/** @type {import("@/types").StaticWidget} */(config))
+      definedWidget.value = getWidgetDefinition(
+        /** @type {import("@/types").StaticWidget} */ (config),
+      );
     }
-    definedWidgets.push(definedWidget)
+    definedWidgets.push(definedWidget);
   }
-  return definedWidgets
-}
-
+  return definedWidgets;
+};
 
 /**
  * Converts a static widget configuration to a defined imported widget
- * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined | null} [config]
+ *
+ * @param {import("@/types").StaticWidget
+ *   | Omit<import("@/types").StaticWidget, "layout">
+ *   | undefined
+ *   | null} [config]
  * @returns {DefinedWidget}
- **/
+ */
 const getWidgetDefinition = (config) => {
-  /**
-   * @type {DefinedWidget}
-   */
+  /** @type {DefinedWidget} */
   const importedWidget = {
     component: null,
     props: {},
-    title: '',
+    title: "",
     id: Symbol(),
-    layout: reactive({ x: 0, y: 0, h: 0, w: 0 })
-  }
+    layout: reactive({ x: 0, y: 0, h: 0, w: 0 }),
+  };
   switch (config?.type) {
-    case 'internal':
+    case "internal":
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
+        loader:
+          internalWidgets[
+            /** @type {import("@/types").InternalComponentWidget} * */ (config)
+              ?.widget.name
+          ],
         suspensible: true,
-      })
-      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.properties ?? {})
+      });
+      importedWidget.props = reactive(
+        /** @type {import("@/types").InternalComponentWidget} * */ (config)
+          ?.widget.properties ?? {},
+      );
 
       break;
 
-    case 'web-component':
+    case "web-component":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('@/components/DynamicWebComponent.vue'),
+        loader: () => import("@/components/DynamicWebComponent.vue"),
         suspensible: true,
-      })
-      importedWidget.props = reactive(config.widget)
+      });
+      importedWidget.props = reactive(config.widget);
 
       break;
-    case 'iframe':
+    case "iframe":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('@/components/IframeWrapper.vue'),
+        loader: () => import("@/components/IframeWrapper.vue"),
         suspensible: true,
-      })
-      importedWidget.props = reactive(config.widget)
+      });
+      importedWidget.props = reactive(config.widget);
       break;
 
     default:
       if (!config) {
-        return importedWidget
+        return importedWidget;
       } else {
-        console.error('Widget type not found')
+        console.error("Widget type not found");
       }
       break;
   }
-  importedWidget.title = config?.title ?? ''
-  importedWidget.id = config?.id ?? importedWidget.id
+  importedWidget.title = config?.title ?? "";
+  importedWidget.id = config?.id ?? importedWidget.id;
 
   if ("layout" in config) {
-    importedWidget.layout.x = config.layout.x
-    importedWidget.layout.y = config.layout.y
-    importedWidget.layout.h = config.layout.h
-    importedWidget.layout.w = config.layout.w
+    importedWidget.layout.x = config.layout.x;
+    importedWidget.layout.y = config.layout.y;
+    importedWidget.layout.h = config.layout.h;
+    importedWidget.layout.w = config.layout.w;
   }
-  return importedWidget
-}
-
+  return importedWidget;
+};

package/core/client/composables/index.js

@@ -9,9 +9,11 @@ import { useSTAcStore } from "@/store/stac";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
- * @param {string} [rel = '']
- * @param {string} [base = eodash.stacEndpoint] - base URL, default value is the root stac catalog
- * @returns {import('vue').Ref<string>} - returns `currentUrl`
+ *
+ * @param {string} [rel=''] Default is `''`
+ * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
+ *   root stac catalog. Default is `eodash.stacEndpoint`
+ * @returns {import("vue").Ref<string>} - Returns `currentUrl`
  * @see {@link '@/store/States.js'}
  */
 export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
@@ -35,16 +37,18 @@ export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
 };
 
 /**
- * Updates an existing Vuetify theme.
- * updates only the values provided in the `ThemeDefinition`
+ * Updates an existing Vuetify theme. updates only the values provided in the
+ * `ThemeDefinition`
+ *
  * @param {string} themeName - Name of the theme to be updated
- * @param {import('vuetify').ThemeDefinition} [themeDefinition = {}] - New defintion to be updated to
- * @returns {import('vuetify').ThemeInstance}
+ * @param {import("vuetify").ThemeDefinition} [themeDefinition={}] - New
+ *   defintion to be updated to. Default is `{}`
+ * @returns {import("vuetify").ThemeInstance}
  */
 export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   const theme = useTheme();
 
-  /** @type {Array<keyof import('vuetify').ThemeDefinition>} */ (
+  /** @type {(keyof import("vuetify").ThemeDefinition)[]} */ (
     Object.keys(themeDefinition)
   ).forEach((key) => {
     if (key === "dark") {
@@ -52,7 +56,7 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
         themeDefinition[key]
       );
     } else {
-      //@ts-expect-error
+      //@ts-expect-error to do
       theme.themes.value[themeName][key] = {
         ...theme.themes.value[themeName][key],
         ...themeDefinition[key],
@@ -62,27 +66,25 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   return theme;
 };
 
-/**
- * Composable that syncs store and  URLSearchParameters
- */
+/** Composable that syncs store and URLSearchParameters */
 
 export const useURLSearchParametersSync = () => {
   onMounted(async () => {
     // Analyze currently set url params when first loaded and set them in the store
-    if ('URLSearchParams' in window) {
+    if ("URLSearchParams" in window) {
       const searchParams = new URLSearchParams(window.location.search);
-      /** @type {number} */
+      /** @type {number | undefined} */
       let x,
-        /** @type {number} */
+        /** @type {number | undefined} */
         y,
-        /** @type {number} */
+        /** @type {number | undefined} */
         z;
       searchParams.forEach(async (value, key) => {
         if (key === "indicator") {
-          const { loadSelectedSTAC, stac } = useSTAcStore()
-          const match = stac?.find(link => link.id == value)
+          const { loadSelectedSTAC, stac } = useSTAcStore();
+          const match = stac?.find((link) => link.id == value);
           if (match) {
-            await loadSelectedSTAC(match.href)
+            await loadSelectedSTAC(match.href);
           }
         }
         if (key === "x") {
@@ -94,28 +96,40 @@ export const useURLSearchParametersSync = () => {
         if (key === "z") {
           z = Number(value);
         }
-      })
-      //@ts-expect-error
-      if (x !== undefined && y !== undefined && z !== undefined) {
+      });
+      if (x && y && z) {
         mapPosition.value = [x, y, z];
       }
     }
     watch(
       [indicator, mapPosition],
       ([updatedIndicator, updatedMapPosition]) => {
-        if ('URLSearchParams' in window) {
+        if ("URLSearchParams" in window) {
           const searchParams = new URLSearchParams(window.location.search);
           if (updatedIndicator !== "") {
             searchParams.set("indicator", updatedIndicator);
           }
           if (updatedMapPosition && updatedMapPosition.length === 3) {
-            searchParams.set("x", updatedMapPosition[0]?.toFixed(4) ?? '');
-            searchParams.set("y", updatedMapPosition[1]?.toFixed(4) ?? '');
-            searchParams.set("z", updatedMapPosition[2]?.toFixed(4) ?? '');
+            searchParams.set("x", updatedMapPosition[0]?.toFixed(4) ?? "");
+            searchParams.set("y", updatedMapPosition[1]?.toFixed(4) ?? "");
+            searchParams.set("z", updatedMapPosition[2]?.toFixed(4) ?? "");
           }
-          const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
-          history.pushState(null, '', newRelativePathQuery);
+          const newRelativePathQuery =
+            window.location.pathname + "?" + searchParams.toString();
+          history.pushState(null, "", newRelativePathQuery);
         }
-      })
+      },
+    );
+  });
+};
+
+/** @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
+export const makePanelTransparent = (root) => {
+  onMounted(() => {
+    const eoxItem = root.value?.parentElement;
+    if (eoxItem?.tagName === "EOX-LAYOUT-ITEM") {
+      eoxItem.style.background = "transparent";
+      eoxItem.style.border = "transparent";
+    }
   });
 };