@eodash/eodash 5.0.0-processing → 5.0.0-rc

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,13 +1,10 @@
 <template>
   <v-main>
-    <eox-layout
-      :gap="eodash.template.gap ?? 16"
-      :style="`padding: ${eodash.template.gap || 16}px`"
-    >
+    <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: -${eodash.template.gap ?? 16}px;`"
+        :style="`margin: -${gap + 1}px;`"
         x="0"
         y="0"
         h="12"
@@ -16,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"
@@ -46,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,
@@ -78,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,11 +1,12 @@
-import { EodashCollection } from "@/utils/eodashSTAC";
-import { setMapProjFromCol } from "@/utils/helpers";
+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
@@ -13,7 +14,7 @@ import { eoxLayersKey } from "@/utils/keys";
 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
@@ -33,6 +34,9 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
       !Number.isNaN(z)
     ) {
       mapPosition.value = [lonlat[0], lonlat[1], z];
+      if (posIsSetFromUrl.value) {
+        posIsSetFromUrl.value = false;
+      }
     }
   };
 
@@ -74,7 +78,7 @@ const createLayersConfig = async (
     type: "Group",
     properties: {
       id: "AnalysisGroup",
-      title: "Analysis Layers",
+      title: "Data Layers",
       layerControlExpand: true,
     },
     layers: /** @type {Record<string,any>[]}*/ ([]),
@@ -99,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: {
@@ -194,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
@@ -306,15 +313,16 @@ export const useInitMap = (
         // indicator and map changes
         if (
           mapElement?.value?.id === "main" &&
-          updatedStac.extent?.spatial.bbox
+          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(
@@ -322,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",

package/core/client/composables/EodashProcess.js

@@ -2,10 +2,10 @@ import { isMulti } from "@eox/jsonform/src/custom-inputs/spatial/utils";
 import { nextTick, onMounted, watch } from "vue";
 import mustache from "mustache";
 import axios from "axios";
-import { extractLayerConfig } from "@/utils/helpers";
+import { extractLayerConfig } from "@/eodashSTAC/helpers";
 import log from "loglevel";
-import { getLayers } from "@/store/Actions";
-import { mapEl } from "@/store/States";
+import { getLayers } from "@/store/actions";
+import { mapEl } from "@/store/states";
 
 /**
  * Polls the process status and fetches a result item when the process is successful.
@@ -81,23 +81,19 @@ export async function pollProcessStatus({
  * @param {import("vue").Ref<boolean>} autoExec
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} jsonformEl
  * @param {import("vue").Ref<Record<string,any> | null>} jsonformSchema
- * @param {import("vue").Ref<boolean>} isProcessed
  * @param {() => Promise<void>} startProcess
  **/
 export function useAutoExec(
   autoExec,
   jsonformEl,
   jsonformSchema,
-  isProcessed,
   startProcess,
 ) {
   /**
    * @param {CustomEvent} _e
    **/
   const onJsonFormChange = async (_e) => {
-    if (!isProcessed.value) {
-      await startProcess();
-    }
+    await startProcess();
   };
 
   const addEventListener = async () => {
@@ -382,10 +378,10 @@ export async function getChartValues(links, jsonformValue, specUrl) {
   const spec = await axios.get(specUrl).then((resp) => {
     return resp.data;
   });
-  //@ts-expect-error NamedData
-  const dataName = spec?.data?.name;
+  // //@ts-expect-error NamedData
+  // const dataName = spec?.data?.name;
   const dataLinks = links.filter(
-    (link) => link.rel === "service" && dataName && link.id === dataName,
+    (link) => link.rel === "service", // && dataName && link.id === dataName,
   );
 
   /** @type {Record<string,any>}  */
@@ -460,6 +456,9 @@ export async function handleProcesses({
       { ...(jsonformValue ?? {}) },
       specUrl,
     );
+    if (chartSpec.value && !("background" in chartSpec.value)) {
+      chartSpec.value["background"] = "transparent";
+    }
     const geotiffLayer = await processGeoTiff(
       serviceLinks,
       jsonformValue,

package/core/client/composables/index.js

@@ -1,20 +1,22 @@
 // functions of this folder can only be consumed inside setup stores,
-// setup functions or vue composition api components
+// setup functions or vue composition api components https://vuejs.org/guide/reusability/composables
 
 import {
+  activeTemplate,
   currentCompareUrl,
   currentUrl,
   datetime,
   indicator,
   mapPosition,
-} from "@/store/States";
+} from "@/store/states";
 import eodash from "@/eodash";
 import { useTheme } from "vuetify/lib/framework.mjs";
-import { onMounted, onUnmounted, watch } from "vue";
+import { inject, onMounted, onUnmounted, watch } from "vue";
 import { useSTAcStore } from "@/store/stac";
 import log from "loglevel";
+import { eodashKey, eoxLayersKey } from "@/utils/keys";
 import { useEventBus } from "@vueuse/core";
-import { eoxLayersKey } from "@/utils/keys";
+import { posIsSetFromUrl } from "@/utils/states";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -23,11 +25,11 @@ import { eoxLayersKey } from "@/utils/keys";
  * @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'}
+ * @see {@link '@/store/states.js'}
  */
 export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   if (!rel || rel.includes("http")) {
-    currentUrl.value = base;
+    currentUrl.value = rel;
     return currentUrl;
   }
 
@@ -52,7 +54,7 @@ export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
  * @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'}
+ * @see {@link '@/store/states.js'}
  */
 export const useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   if (!rel || rel.includes("http")) {
@@ -119,6 +121,10 @@ export const useURLSearchParametersSync = () => {
         z;
       for (const [key, value] of searchParams) {
         switch (key) {
+          case "template": {
+            activeTemplate.value = value;
+            break;
+          }
           case "indicator": {
             log.debug("Found indicator key in url");
             const { loadSelectedSTAC, stac } = useSTAcStore();
@@ -160,12 +166,20 @@ export const useURLSearchParametersSync = () => {
       if (x && y && z) {
         log.debug("Coordinates found, applying map poisition", x, y, z);
         mapPosition.value = [x, y, z];
+        if (!posIsSetFromUrl.value) {
+          posIsSetFromUrl.value = true;
+        }
       }
     }
 
     watch(
-      [indicator, mapPosition, datetime],
-      ([updatedIndicator, updatedMapPosition, updatedDatetime]) => {
+      [indicator, mapPosition, datetime, activeTemplate],
+      ([
+        updatedIndicator,
+        updatedMapPosition,
+        updatedDatetime,
+        updatedTemplate,
+      ]) => {
         if ("URLSearchParams" in window) {
           const searchParams = new URLSearchParams(window.location.search);
           if (updatedIndicator !== "") {
@@ -181,6 +195,9 @@ export const useURLSearchParametersSync = () => {
           if (updatedDatetime) {
             searchParams.set("datetime", updatedDatetime.split("T")?.[0] ?? "");
           }
+          if (updatedTemplate) {
+            searchParams.set("template", updatedTemplate);
+          }
           const newRelativePathQuery =
             window.location.pathname + "?" + searchParams.toString();
           history.pushState(null, "", newRelativePathQuery);
@@ -190,7 +207,10 @@ export const useURLSearchParametersSync = () => {
   });
 };
 
-/** @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
+/**
+ * Converts eox-layout-item to transparent
+ *
+ *  @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
 export const makePanelTransparent = (root) => {
   onMounted(() => {
     const eoxItem = root.value?.parentElement;
@@ -200,6 +220,11 @@ export const makePanelTransparent = (root) => {
   });
 };
 
+export const useGetTemplates = () => {
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+  return "template" in eodash ? [] : Object.keys(eodash.templates);
+};
+
 /**
  * Listens to the `layers:updated` and `time:updated` events and calls
  *