@eodash/eodash 5.0.0-alpha.2.4 → 5.0.0-alpha.2.6

package/core/client/composables/index.js

@@ -1,18 +1,19 @@
 // functions of this folder can only be consumed inside setup stores,
 // setup functions or vue composition api components
 
-import { reactive } from "vue";
 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"
+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) => {
@@ -36,126 +37,18 @@ export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
 };
 
 /**
- * Adds slide in and out functionality to Elements
- * @param {import('vue').Ref<HTMLElement[]|null>} elements - elements to add the functionality to
- * @param {import("@/types").Widget[]} configs
- */
-export const useSlidePanels = (elements, configs) => {
-  /**
-   * Sliding direction
-   */
-  const slideDirs = configs.map((m) =>
-    m.layout.x == 0
-      ? "left"
-      : m.layout.x == 12 - m.layout.w
-        ? "right"
-        : m.layout.y < 6
-          ? "up"
-          : "down"
-  );
-
-  /**
-   * Array of sliding button's style and icons
-   */
-  const slideBtns = slideDirs.map((dir, _idx) => {
-    const btn = reactive({
-      style: {},
-      icon: { in: "", out: "" },
-      active: false,
-      enabled: true,
-    });
-
-    // 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 = mdiChevronDoubleRight
-        btn.icon.out = mdiChevronDoubleLeft
-
-        break;
-      case "right":
-        btn.style = { top: "50%", left: "-11%" };
-        btn.icon.in = mdiChevronDoubleLeft
-        btn.icon.out = mdiChevronDoubleRight
-
-        break;
-      case "up":
-        btn.style = { right: "50%", bottom: "-17%" };
-        btn.icon.in = mdiChevronDoubleDown
-        btn.icon.out = mdiChevronDoubleUp
-
-        break;
-      case "down":
-        btn.style = { right: "50%", top: "-17%" };
-        btn.icon.in = mdiChevronDoubleUp
-        btn.icon.out = mdiChevronDoubleDown
-        break;
-
-      default:
-        console.error("sliding error");
-        break;
-    }
-    return btn;
-  });
-
-  /**
-   * Transforms the element's position based on the direction
-   * @param {number} idx - index of the pressed element
-   */
-  const slideInOut = (idx) => {
-    const parentStyle = /** @type {CSSStyleDeclaration} */ (
-      elements.value?.[idx].style
-    );
-    if (parentStyle?.transform.length) {
-      slideBtns[idx].active = false;
-      parentStyle.transform = "";
-    } else {
-      slideBtns[idx].active = true;
-      parentStyle.transition = "transform 0.3s ease-in-out";
-      switch (slideDirs[idx]) {
-        case "left":
-          parentStyle.transform = "translateX(-100%)";
-          break;
-        case "right":
-          parentStyle.transform = "translateX(100%)";
-          break;
-        case "up":
-          parentStyle.transform = `translateY(-${(configs[idx].layout.y / configs[idx].layout.h) * 100 + 100
-            }%)`;
-          break;
-        case "down":
-          parentStyle.transform = `translateY(${(Math.max(0, 12 - configs[idx].layout.y - configs[idx].layout.h) /
-            configs[idx].layout.h) *
-            100 +
-            100
-            }%)`;
-          break;
-
-        default:
-          console.error("sliding error");
-          break;
-      }
-    }
-  };
-  return { slideBtns, slideInOut };
-};
-
-/**
- * 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") {
@@ -163,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],
@@ -173,50 +66,59 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   return theme;
 };
 
-/**
- * Composable that syncs store and  URLSearchParameters
- */
+/** Composable that syncs store and URLSearchParameters */
 
 export const useURLSearchParametersSync = () => {
-  onMounted(() => {
+  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);
-      let x, y, z;
-      searchParams.forEach((value, key) => {
+      /** @type {number | undefined} */
+      let x,
+        /** @type {number | undefined} */
+        y,
+        /** @type {number | undefined} */
+        z;
+      searchParams.forEach(async (value, key) => {
         if (key === "indicator") {
-          indicator.value = value;
+          const { loadSelectedSTAC, stac } = useSTAcStore();
+          const match = stac?.find((link) => link.id == value);
+          if (match) {
+            await loadSelectedSTAC(match.href);
+          }
         }
         if (key === "x") {
-          x = value;
+          x = Number(value);
         }
         if (key === "y") {
-          y = value;
+          y = Number(value);
         }
         if (key === "z") {
-          z = value;
+          z = Number(value);
         }
-      })
-      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);
         }
-      })
+      },
+    );
   });
 };

package/core/client/eodash.js

@@ -2,19 +2,17 @@ import { reactive } from "vue";
 import { currentUrl } from "./store/States";
 
 /**
- * Reactive Edoash Instance Object. provided globally in the app,
- * and used as an intermediate object to make user defined instances config reactive.
+ * Reactive Edoash Instance Object. provided globally in the app, and used as an
+ * intermediate object to make user defined instances config reactive.
+ *
  * @type {import("./types").Eodash}
  */
 export const eodash = reactive({
   id: "demo",
-  stacEndpoint: "https://esa-eodash.github.io/RACE-catalog/RACE/catalog.json",
+  stacEndpoint: "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
-    font: {
-      family: "Roboto",
-    },
     theme: {
       colors: {
         primary: "#fff",
@@ -36,9 +34,9 @@ export const eodash = reactive({
           class: "align-self-center justify-self-center",
           size: "120",
           speed: "2.5",
-          color: "#004170"
-        }
-      }
+          color: "#004170",
+        },
+      },
     },
     background: {
       id: Symbol(),
@@ -51,45 +49,54 @@ 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,
-          },
+        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",
+                },
+              }
+            : null;
         },
       },
       {
-        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: "[]",
-
-            subheader: "[]",
-            properties: '["description"]',
-            featured: "[]",
-            footer: "[]",
-          },
-          tagName: "eox-stacinfo",
+        defineWidget: (selectedSTAC) => {
+          return selectedSTAC
+            ? {
+                id: "Datepicker",
+                type: "internal",
+                layout: { x: 5, y: 10, w: 1, h: 1 },
+                title: "Datepicker",
+                widget: {
+                  name: "EodashDatePicker",
+                },
+              }
+            : null;
         },
-        type: "web-component",
       },
     ],
   },

package/core/client/main.js

@@ -1,2 +1,2 @@
-export { createEodash } from '@/composables/DefineEodash';
-export { default as store } from "@/store"
+export { createEodash } from "@/composables/DefineEodash";
+export { default as store } from "@/store";

package/core/client/plugins/index.js

@@ -1,18 +1,20 @@
-import vuetify from './vuetify';
-import { createPinia } from 'pinia';
-import eodash from '@/eodash';
-import { eodashKey } from '@/utils/keys';
-import store from '../store';
+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";
 
 export const pinia = createPinia();
 
-/**
- * @param {import('vue').App} app
- */
+/** @param {import("vue").App} app */
 export function registerPlugins(app) {
   window.eodashStore = store;
 
-  app.use(vuetify)
+  app
+    .use(vuetify)
     .use(pinia)
+    // Use plugin with optional defaults
+    .use(VCalendar, {})
     .provide(eodashKey, eodash);
 }

package/core/client/plugins/vuetify.js

@@ -1,15 +1,14 @@
 /**
- * plugins/vuetify.ts
+ * Plugins/vuetify.ts
  *
  * Framework documentation: https://vuetifyjs.com`
  */
 
 // Styles
-import 'vuetify/styles';
+import "vuetify/styles";
 
-
-import { createVuetify } from 'vuetify';
-import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js"
+import { createVuetify } from "vuetify";
+import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js";
 
 const vuetify = createVuetify({
   icons: {
@@ -17,7 +16,7 @@ const vuetify = createVuetify({
       // mapping v-date-picker and v-tabs default icons to `@mdi/js`
       next: [mdiChevronRight],
       prev: [mdiChevronLeft],
-      subgroup: [mdiMenuDown]
+      subgroup: [mdiMenuDown],
     },
   },
   theme: {
@@ -25,12 +24,12 @@ const vuetify = createVuetify({
       dashboardTheme: {},
       light: {
         colors: {
-          primary: '#1867C0',
-          secondary: '#5CBBF6',
+          primary: "#1867C0",
+          secondary: "#5CBBF6",
         },
       },
     },
   },
-})
+});
 
-export default vuetify
+export default vuetify;

package/core/client/render.js

@@ -1,13 +1,12 @@
-import { registerPlugins } from '@/plugins';
+import { registerPlugins } from "@/plugins";
 // Components
-import App from './App.vue';
+import App from "./App.vue";
 
 // Composables
-import { createApp } from 'vue';
-
+import { createApp } from "vue";
 
 const app = createApp(App);
 
 registerPlugins(app);
 
-app.mount('#app');
+app.mount("#app");

package/core/client/store/States.js

@@ -1,21 +1,16 @@
 import { ref } from "vue";
 
-/**
- * currently selected STAC endpoint
- */
-export const currentUrl = ref('');
-/**
- * currently selected datetime
- */
+/** Currently selected STAC endpoint */
+export const currentUrl = ref("");
+/** Currently selected datetime */
 export const datetime = ref(new Date().toISOString());
 
-/**
- * Currently selected indicator
- */
-export const indicator = ref("")
+/** Currently selected indicator */
+export const indicator = ref("");
 
 /**
  * Current map position
- * @type {import("vue").Ref<(number|undefined)[]>}
+ *
+ * @type {import("vue").Ref<(number | undefined)[]>}
  */
-export const mapPosition = ref([])
+export const mapPosition = ref([]);

package/core/client/store/index.js

@@ -1,17 +1,20 @@
 //export all actions, states, and pinia stores
 
-const storesImport = import.meta.glob('../store/**.js', { eager: true })
+const storesImport = import.meta.glob("../store/**.js", { eager: true });
 
-const store = /** @type {import("@/types").EodashStore} */((() => {
-  const stores = {}
-  for (const [filePath, importedstore] of Object.entries(storesImport)) {
-    const storeType = filePath.split('/').at(-1)?.slice(0, -3).toLowerCase() ?? ''
-    if (!['keys'].includes(storeType)) {
-      //@ts-expect-error
-      stores[storeType] = importedstore;
+const store = /** @type {import("@/types").EodashStore} */ (
+  (() => {
+    const stores = {};
+    for (const [filePath, importedstore] of Object.entries(storesImport)) {
+      const storeType =
+        filePath.split("/").at(-1)?.slice(0, -3).toLowerCase() ?? "";
+      if (!["keys"].includes(storeType)) {
+        //@ts-expect-error `importedstore` cant be typed individually
+        stores[storeType] = importedstore;
+      }
     }
-  }
-  return stores;
-})());
+    return stores;
+  })()
+);
 
 export default store;

package/core/client/store/stac.js

@@ -1,66 +1,80 @@
-import { defineStore } from 'pinia';
-import { inject, ref } from 'vue';
-import axios from 'axios';
-import { useAbsoluteUrl } from '@/composables/index';
-import { eodashKey } from '@/utils/keys';
-import { indicator } from '@/store/States';
+import { defineStore } from "pinia";
+import { inject, ref } from "vue";
+import axios from "axios";
+import { useAbsoluteUrl } from "@/composables/index";
+import { eodashKey } from "@/utils/keys";
+import { indicator } from "@/store/States";
 
-export const useSTAcStore = defineStore('stac', () => {
+export const useSTAcStore = defineStore("stac", () => {
   /**
-   * links of the root STAC catalog
-   * @type {import("vue").Ref<import('stac-ts').StacLink[]|null>}
+   * Links of the root STAC catalog
+   *
+   * @type {import("vue").Ref<import("stac-ts").StacLink[] | null>}
    */
   const stac = ref(null);
 
   /**
-   * selected STAC object.
-   * @type {import('vue').Ref<import('stac-ts').StacCatalog |
-   *  import('stac-ts').StacCollection |import('stac-ts').StacItem
-   * | null>}
+   * Selected STAC object.
+   *
+   * @type {import("vue").Ref<
+   *   | import("stac-ts").StacCatalog
+   *   | import("stac-ts").StacCollection
+   *   | import("stac-ts").StacItem
+   *   | null
+   * >}
    */
   const selectedStac = ref(null);
 
-
-  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
   /**
-   * fetches root stac catalog and assign it to `stac`
+   * Fetches root stac catalog and assign it to `stac`
+   *
    * @async
-   * @param {import("@/types").StacEndpoint} [url = eodash.stacEndpoint]
+   * @param {import("@/types").StacEndpoint} [url=eodash.stacEndpoint] Default
+   *   is `eodash.stacEndpoint`
    * @returns {Promise<void>}
    * @see {@link stac}
    */
   async function loadSTAC(url = eodash.stacEndpoint) {
-    await axios.get(url).then(resp => {
-      const links = /** @type {import('stac-ts').StacCatalog} */(resp.data).links.map(link => {
-        if (!link.title) {
-          link.title = `${link.rel} ${link.href}`
-        }
-        return link
+    await axios
+      .get(url)
+      .then((resp) => {
+        const links = /** @type {import("stac-ts").StacCatalog} */ (
+          resp.data
+        ).links.map((link) => {
+          if (!link.title) {
+            link.title = `${link.rel} ${link.href}`;
+          }
+          return link;
+        });
+        stac.value = links;
       })
-      stac.value = links;
-    }).catch(err => {
-      throw new Error("error loading assigned STAC endpoint", err)
-    });
+      .catch((err) => {
+        throw new Error("error loading assigned STAC endpoint", err);
+      });
   }
 
   /**
-   * fetches selected stac object and assign it to `selectedStac`
+   * Fetches selected stac object and assign it to `selectedStac`
+   *
    * @async
-   * @param {string} relativePath - stac link href
+   * @param {string} relativePath - Stac link href
    * @returns {Promise<void>}
    * @see {@link selectedStac}
    */
-  async function loadSelectedSTAC(relativePath = '') {
-
+  async function loadSelectedSTAC(relativePath = "") {
     const absoluteUrl = useAbsoluteUrl(relativePath);
 
-    await axios.get(absoluteUrl.value).then(resp => {
-      selectedStac.value = resp.data;
-      indicator.value = selectedStac.value?.id ?? "";
-    }).catch(err => {
-      throw new Error("error loading the selected STAC", err)
-    });
+    await axios
+      .get(absoluteUrl.value)
+      .then((resp) => {
+        selectedStac.value = resp.data;
+        indicator.value = selectedStac.value?.id ?? "";
+      })
+      .catch((err) => {
+        throw new Error("error loading the selected STAC", err);
+      });
   }
 
   return { stac, loadSTAC, loadSelectedSTAC, selectedStac };