@eodash/eodash 5.0.0-alpha.2.26 → 5.0.0-alpha.2.27

package/core/client/asWebComponent.js

@@ -1,12 +1,11 @@
 import App from "./App.vue";
 import { defineCustomElement } from "vue";
 import { registerPlugins } from "./plugins";
-
 /**
  *  @type {import("vue").VueElementConstructor<
  *  import("vue").ExtractPropTypes<{ config: string }>>}
  * */
-export const Eodash = defineCustomElement(App, {
+export const EodashConstructor = defineCustomElement(App, {
   shadowRoot: false,
   configureApp(app) {
     registerPlugins(app);
@@ -14,7 +13,7 @@ export const Eodash = defineCustomElement(App, {
 });
 
 export function register() {
-  customElements.define("eo-dash", Eodash);
+  customElements.define("eo-dash", EodashConstructor);
 }
 
 export { default as store } from "@/store";

package/core/client/components/DashboardLayout.vue

@@ -1,9 +1,10 @@
 <template>
   <v-main>
-    <eox-layout :gap="eodash.template.gap ?? 2">
+    <eox-layout :gap="gap" :style="`padding: ${gap}px`">
       <eox-layout-item
-        v-if="bgWidget.component"
+        v-if="bgWidget?.component"
         class="bg-panel bg-surface"
+        :style="`margin: -${gap + 1}px;`"
         x="0"
         y="0"
         h="12"
@@ -12,14 +13,15 @@
         <Suspense suspensible>
           <component
             id="bg-widget"
-            :is="bgWidget.component"
-            v-bind="bgWidget.props"
+            :is="bgWidget?.component"
+            v-bind="bgWidget?.props"
           />
         </Suspense>
       </eox-layout-item>
       <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
         <Transition name="fade">
           <eox-layout-item
+            :id="importedWidget.value.id.toString()"
             v-if="importedWidget.value.component"
             :key="importedWidget.value.id"
             class="panel bg-surface"
@@ -42,27 +44,21 @@
   </v-main>
 </template>
 <script setup>
-import { eodashKey } from "@/utils/keys";
-import { inject } from "vue";
-import { useDefineWidgets } from "@/composables/DefineWidgets";
 import "@eox/layout";
+import { useDefineTemplate } from "@/composables/DefineTemplate";
 
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
-
-const [bgWidget] = useDefineWidgets([eodash.template?.background]);
-
-const importedWidgets = useDefineWidgets(eodash.template?.widgets);
+const { bgWidget, importedWidgets, gap } = useDefineTemplate();
 </script>
 <style scoped>
 .panel {
   position: relative;
   overflow: visible;
   z-index: 1;
-  border-radius: 0px;
 }
 
 .bg-panel {
   z-index: 0;
+  border-radius: 0px !important;
 }
 
 .fade-enter-active,
@@ -74,4 +70,30 @@ const importedWidgets = useDefineWidgets(eodash.template?.widgets);
 .fade-leave-to {
   opacity: 0;
 }
+:deep(.bg-surface) {
+  backdrop-filter: blur(9.5px) !important;
+  background-color: rgba(
+    var(--v-theme-surface),
+    var(--v-surface-opacity, 0.8)
+  ) !important;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgb(var(--v-theme-surface));
+  scrollbar-color: rgba(var(--v-theme-on-surface), 0.2) transparent;
+  scrollbar-width: thin;
+}
+:deep(.bg-primary) {
+  backdrop-filter: blur(9.5px) !important;
+  background-color: rgba(
+    var(--v-theme-primary),
+    var(--v-primary-opacity, 0.8)
+  ) !important;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgb(var(--v-theme-primary));
+  scrollbar-color: rgba(var(--v-theme-on-primary), 0.2) transparent;
+  scrollbar-width: thin;
+}
 </style>

package/core/client/components/Loading.vue

@@ -4,9 +4,9 @@
       <ErrorAlert v-model="error" />
       <Suspense>
         <component
-          v-if="loading.component"
-          :is="loading.component"
-          v-bind="loading.props"
+          v-if="loading?.component"
+          :is="loading?.component"
+          v-bind="loading?.props"
         ></component>
         <div v-else class="text-center">Loading...</div>
         <template #fallback>
@@ -17,14 +17,11 @@
   </v-row>
 </template>
 <script setup>
-import { inject, onErrorCaptured, ref } from "vue";
-import { eodashKey } from "@/utils/keys";
-import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { onErrorCaptured, ref } from "vue";
 import ErrorAlert from "./ErrorAlert.vue";
+import { useDefineTemplate } from "@/composables/DefineTemplate";
 
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
-
-const [loading] = useDefineWidgets([eodash.template.loading]);
+const { loading } = useDefineTemplate();
 
 const error = ref("");
 onErrorCaptured((e, inst, info) => {

package/core/client/components/MobileLayout.vue

@@ -3,7 +3,7 @@
     <Suspense suspensible>
       <component
         id="bg-widget"
-        v-if="bgWidget.component"
+        v-if="bgWidget?.component"
         :is="bgWidget.component"
         v-bind="bgWidget.props"
       ></component>
@@ -16,9 +16,11 @@
         id="overlay"
         class="pa-2 panel bg-surface"
       >
-        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
-          >&#x2715;</v-btn
-        >
+        <div class="d-flex py-2 justify-end align-end">
+          <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
+            >&#x2715;</v-btn
+          >
+        </div>
         <Suspense suspensible>
           <div class="component-container" v-show="activeIdx === idx">
             <component
@@ -48,18 +50,11 @@
   </v-main>
 </template>
 <script setup>
-import { eodashKey } from "@/utils/keys";
-import { inject, ref, onMounted } from "vue";
-import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { useDefineTemplate } from "@/composables/DefineTemplate";
+import { ref, onMounted } from "vue";
 import { useLayout } from "vuetify";
 
-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 { bgWidget, importedWidgets } = useDefineTemplate();
 const { mainRect } = useLayout();
 
 const activeIdx = ref(-1);
@@ -106,4 +101,11 @@ onMounted(() => {
   position: relative;
   z-index: 10;
 }
+:deep(.bg-surface) {
+  backdrop-filter: blur(9.5px) !important;
+  background-color: rgba(
+    var(--v-theme-surface),
+    var(--v-surface-opacity, 0.8)
+  ) !important;
+}
 </style>

package/core/client/composables/DefineEodash.js

@@ -3,8 +3,7 @@ import { eodashKey } from "@/utils/keys";
 import { inject } from "vue";
 
 /**
- * Sets user defined instance on runtime. Consumes `/@fs/config.js` and assign
- * it to `eodash`
+ * Handles importing user defined instance of Eodash
  *
  * @async
  * @param {string | undefined} runtimeConfig
@@ -15,6 +14,17 @@ export const useEodashRuntime = async (runtimeConfig) => {
   const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
   /** @param {import("@/types").Eodash} config */
   const assignInstance = (config) => {
+    if ("template" in config) {
+      //@ts-expect-error to do
+      delete eodash.templates;
+      //@ts-expect-error to do
+      eodash.template = config.template;
+    } else if ("templates" in config) {
+      //@ts-expect-error to do
+      delete eodash.template;
+      //@ts-expect-error to do
+      eodash.templates = config.templates;
+    }
     /** @type {(keyof import("@/types").Eodash)[]} */ (
       Object.keys(eodash)
     ).forEach((key) => {
@@ -54,7 +64,7 @@ export const useEodashRuntime = async (runtimeConfig) => {
 
 /**
  * @param {((
- *       store: import("@/types").EodashStore,
+ *       store: typeof import("@/store").default,
  *     ) => (Promise<import("@/types").Eodash> | import("@/types").Eodash))
  *   | import("@/types").Eodash} config
  */

package/core/client/composables/DefineTemplate.js

@@ -0,0 +1,67 @@
+import { eodashKey } from "@/utils/keys";
+import { inject, ref, shallowReactive, shallowRef, toRefs, watch } from "vue";
+import { useDefineWidgets } from "./DefineWidgets";
+import { activeTemplate } from "@/store/states";
+import { createSharedComposable } from "@vueuse/core";
+import log from "loglevel";
+
+/**
+ * @typedef {{
+ * bgWidget:ReturnType< typeof import("./DefineWidgets").useDefineWidgets>[number]| import("vue").ShallowRef<null>
+ * loading: ReturnType< typeof import("./DefineWidgets").useDefineWidgets>[number]| import("vue").ShallowRef<null>
+ * importedWidgets:ReturnType< typeof import("./DefineWidgets").useDefineWidgets>
+ * gap: import("vue").Ref<number>
+ * }} DefinedTemplate
+ **/
+
+const useTemplate = () => {
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+  /** @type {DefinedTemplate} */
+  const definedTemplate = shallowReactive({
+    bgWidget: shallowRef(null),
+    importedWidgets: [],
+    loading: shallowRef(null),
+    gap: ref(16),
+  });
+
+  if ("template" in eodash) {
+    [definedTemplate.bgWidget] = useDefineWidgets([eodash.template.background]);
+    [definedTemplate.loading] = useDefineWidgets([eodash.template.loading]);
+    definedTemplate.importedWidgets = useDefineWidgets(eodash.template.widgets);
+    definedTemplate.gap.value = eodash.template.gap ?? 16;
+  } else {
+    watch(
+      activeTemplate,
+      (template) => {
+        log.debug("Active template watcher triggered, changing to:", template);
+        if (!template) {
+          template = Object.keys(eodash.templates)[0];
+          activeTemplate.value = template ?? "";
+          log.debug("No template found, setting to first template", template);
+        }
+
+        if (!template || !eodash.templates[template]) {
+          console.error(`[eodash] template not found`);
+          return;
+        }
+
+        const templateConfig = eodash.templates[template];
+        [definedTemplate.bgWidget] = useDefineWidgets([
+          templateConfig.background,
+        ]);
+
+        [definedTemplate.loading] = useDefineWidgets([templateConfig.loading]);
+
+        definedTemplate.importedWidgets = useDefineWidgets(
+          templateConfig.widgets,
+        );
+        definedTemplate.gap.value = templateConfig.gap ?? 16;
+      },
+      { immediate: true },
+    );
+  }
+  return toRefs(definedTemplate);
+};
+
+export const useDefineTemplate = createSharedComposable(useTemplate);

package/core/client/composables/DefineWidgets.js

@@ -13,7 +13,9 @@ import { storeToRefs } from "pinia";
  */
 
 /** @typedef {import("vue").ShallowRef<DefinedWidget>} ReactiveDefinedWidget */
-
+/**
+ * Widgets import map that is created from eodash internals and user defined widgets
+ */
 const internalWidgets = (() => {
   /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
@@ -44,7 +46,6 @@ const internalWidgets = (() => {
  *       | undefined
  *     )[]
  *   | undefined} widgetConfigs
- * @returns {ReactiveDefinedWidget[]}
  */
 export const useDefineWidgets = (widgetConfigs) => {
   /** @type {ReactiveDefinedWidget[]} */

package/core/client/composables/EodashMap.js

@@ -1,10 +1,12 @@
-import { EodashCollection } from "@/utils/eodashSTAC";
-import { setMapProjFromCol } from "@/utils/helpers";
-import { onMounted, onUnmounted, watch } from "vue";
+import { EodashCollection } from "@/eodashSTAC/EodashCollection";
+import { setMapProjFromCol } from "@/eodashSTAC/triggers";
+import { nextTick, onMounted, onUnmounted, watch } from "vue";
 import log from "loglevel";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-
+import { useEventBus } from "@vueuse/core";
+import { eoxLayersKey } from "@/utils/keys";
+import { posIsSetFromUrl } from "@/utils/states";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { {map:import("ol").View } | null} mapElement
@@ -12,7 +14,7 @@ import { storeToRefs } from "pinia";
 let viewHolder = null;
 
 /**
- * Description placeholder
+ * Handles updating {@link mapPosition} on movement on the map
  *
  * @param {import("vue").Ref<HTMLElement & Record<string,any> & {map:import("ol").Map } | null>} mapElement
  * @param {import("vue").Ref<(number | undefined)[]>} mapPosition
@@ -32,6 +34,9 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
       !Number.isNaN(z)
     ) {
       mapPosition.value = [lonlat[0], lonlat[1], z];
+      if (posIsSetFromUrl.value) {
+        posIsSetFromUrl.value = false;
+      }
     }
   };
 
@@ -73,7 +78,7 @@ const createLayersConfig = async (
     type: "Group",
     properties: {
       id: "AnalysisGroup",
-      title: "Analysis Layers",
+      title: "Data Layers",
       layerControlExpand: true,
     },
     layers: /** @type {Record<string,any>[]}*/ ([]),
@@ -98,7 +103,10 @@ const createLayersConfig = async (
   const indicatorLayers =
     //@ts-expect-error indicator is collection
     await EodashCollection.getIndicatorLayers(selectedIndicator);
-
+  const geodbLayer = EodashCollection.getGeoDBLayer(eodashCols);
+  if (geodbLayer) {
+    dataLayers.layers.push(geodbLayer);
+  }
   const baseLayers = {
     type: "Group",
     properties: {
@@ -193,7 +201,7 @@ const createLayersConfig = async (
 };
 
 /**
- * Description placeholder
+ * Initializes the map and updates it based on changes in the selected indicator and datetime,
  *
  * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} mapElement
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
@@ -217,6 +225,7 @@ export const useInitMap = (
     eodashCols.values,
     datetime.value,
   );
+  const layersEvent = useEventBus(eoxLayersKey);
 
   const stopIndicatorWatcher = watch(
     [selectedIndicator, datetime],
@@ -269,6 +278,9 @@ export const useInitMap = (
             JSON.parse(JSON.stringify(layersCollection)),
           );
           mapLayers.value = layersCollection;
+          await nextTick(() => {
+            layersEvent.emit("time:updated", mapLayers.value);
+          });
           return;
         }
 
@@ -299,14 +311,18 @@ export const useInitMap = (
 
         // Try to move map view to extent only when main
         // indicator and map changes
-        if (mapElement?.value?.id === "main") {
+        if (
+          mapElement?.value?.id === "main" &&
+          updatedStac.extent?.spatial.bbox &&
+          !posIsSetFromUrl.value
+        ) {
           // Sanitize extent,
           const b = updatedStac.extent?.spatial.bbox[0];
           const sanitizedExtent = [
-            b[0] > -180 ? b[0] : -180,
-            b[1] > -90 ? b[1] : -90,
-            b[2] < 180 ? b[2] : 180,
-            b[3] < 90 ? b[3] : 90,
+            b?.[0] > -180 ? b?.[0] : -180,
+            b?.[1] > -90 ? b?.[1] : -90,
+            b?.[2] < 180 ? b?.[2] : 180,
+            b?.[3] < 90 ? b?.[3] : 90,
           ];
 
           const reprojExtent = mapElement.value?.transformExtent(
@@ -314,9 +330,12 @@ export const useInitMap = (
             "EPSG:4326",
             mapElement.value?.map?.getView().getProjection(),
           );
-          /** @type {any} */
+          /** @type {import("@eox/map").EOxMap} */
           (mapElement.value).zoomExtent = reprojExtent;
         }
+        if (posIsSetFromUrl.value) {
+          posIsSetFromUrl.value = false;
+        }
 
         log.debug(
           "Assigned layers",
@@ -324,6 +343,12 @@ export const useInitMap = (
         );
 
         mapLayers.value = layersCollection;
+        // Emit event to update layers
+        await nextTick(() => {
+          mapElement.value?.updateComplete.then(() => {
+            layersEvent.emit("layers:updated", mapLayers.value);
+          });
+        });
       }
     },
     { immediate: true },