@eodash/eodash 5.0.0-alpha.1.9 → 5.0.0-alpha.2

package/widgets/EodashItemFilter.vue

@@ -0,0 +1,60 @@
+<template>
+  <DynamicWebComponent :link="link" tag-name="eox-itemfilter" :properties="properties" :on-mounted="onMounted" />
+</template>
+<script setup>
+import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
+import { indicator } from "@/store/States";
+
+const link = () => import("@eox/itemfilter");
+
+const properties = {
+  config: {
+    titleProperty: "title",
+    filterProperties: [
+      {
+        keys: ["title", "themes"],
+        title: "Search",
+        type: "text",
+        expanded: true,
+      },
+      {
+        key: "themes",
+        title: "Theme",
+        type: "multiselect",
+        featured: true,
+      },
+    ],
+    aggregateResults: "themes",
+    enableHighlighting: true,
+  },
+};
+
+/** @type {import("../core/types").WebComponentProps["onMounted"]}*/
+const onMounted = (el, store) => {
+  /**
+   * @typedef {object} Item
+   * @property {string} href
+   * */
+  /** @type {any} */ (el).apply(
+  // Only list child elements in list
+  store.stac?.filter((item) => item.rel === "child")
+);
+  // Check if selected indicator was already set in store
+  if (indicator && indicator.value !== "") {
+    const match = store.stac?.find((item) => item.id === indicator.value);
+    if (match) {
+      //@ts-expect-error
+      (el).selectedResult = match;
+      store.loadSelectedSTAC(match.href);
+    }
+  }
+  /** @type {any} */ (el).config.onSelect =
+    /**
+     * @param {Item} item
+     * */
+    async (item) => {
+      console.log(item);
+      await store.loadSelectedSTAC(item.href);
+    };
+};
+</script>

package/widgets/EodashMap.vue

@@ -0,0 +1,82 @@
+<template>
+  <DynamicWebComponent :link="link" tag-name="eox-map" :properties="properties" :on-mounted="onMounted"
+    :on-unmounted="onUnmounted" />
+</template>
+<script setup>
+import { inject, watch } from "vue";
+import { toAbsolute } from "stac-js/src/http.js";
+import { EodashCollection } from "@/utils/eodashSTAC";
+import { eodashKey } from "@/utils/keys";
+import { datetime, mapPosition } from "@/store/States";
+import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
+import { storeToRefs } from "pinia";
+import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
+
+const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
+
+/** @type {Record<string,unknown>} */
+const properties = {
+  class: "fill-height fill-width overflow-none",
+  center: [15, 48],
+  layers: [{ type: "Tile", source: { type: "OSM" } }],
+};
+// Check if selected indicator was already set in store
+if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
+  // TODO: do further checks for invalid values?
+  properties.center = [mapPosition.value?.[0], mapPosition.value[1]];
+  properties.zoom = mapPosition.value[2];
+}
+
+const link = () => import("@eox/map");
+
+/** @type {import("openlayers").EventsListenerFunctionType}*/
+const handleMoveEnd = (evt) => {
+  const map = /** @type {import("openlayers").Map | undefined} */ (
+    /** @type {*} */ (evt).map
+  );
+  const [x, y] = map?.getView().getCenter() ?? [0, 0];
+  const z = map?.getView().getZoom();
+  if (!Number.isNaN(x) && !Number.isNaN(y) && !Number.isNaN(z)) {
+    mapPosition.value = [x, y, z];
+  }
+};
+
+/** @type {import("@/types").WebComponentProps["onMounted"]} */
+const onMounted = (el, store) => {
+  /** @type {any} */
+  (el)?.map?.on("moveend", handleMoveEnd);
+
+  const { selectedStac } = storeToRefs(store);
+
+  watch(
+    [selectedStac, datetime],
+    async ([updatedStac, updatedTime]) => {
+      if (updatedStac) {
+        const parentCollUrl = toAbsolute(
+          `./${updatedStac.id}/collection.json`,
+          eodashConfig.stacEndpoint
+        );
+        const childCollUrl = toAbsolute(
+          updatedStac.links[1].href,
+          parentCollUrl
+        );
+        const eodash = new EodashCollection(childCollUrl);
+        if (updatedTime) {
+          /** @type {any} */ (el).layers = await eodash.createLayersJson(
+          new Date(updatedTime)
+        );
+        } else {
+          /** @type {any} */ (el).layers = await eodash.createLayersJson();
+        }
+      }
+    },
+    { immediate: true }
+  );
+};
+
+/** @type {import("@/types").WebComponentProps["onUnmounted"]} */
+const onUnmounted = (el, _store) => {
+  /** @type {any} */
+  (el)?.map?.un("moveend", handleMoveEnd);
+};
+</script>

package/widgets/WidgetsContainer.vue

@@ -16,7 +16,7 @@ import 'animated-details'
 
 const props = defineProps({
   widgets: {
-    /** @type {import('vue').PropType<Omit<import("@/types").WidgetConfig,'layout'>[]>} */
+    /** @type {import('vue').PropType<Omit<import("@/types").Widget,'layout'>[]>} */
     type: Array,
     required: true,
   }

package/core/composables/DefineConfig.js

@@ -1,45 +0,0 @@
-import { eodashConfigKey } from "@/store/Keys"
-import { inject } from "vue"
-import store from '@/store'
-
-/**
- * Sets user defined configuration on runtime.
- * Consumes `/config.js` file from the base URL, and assign it to `eodashConfig`
- * @async
- * @returns {Promise<import("@/types").EodashConfig>}
- * @see {@linkplain '@/eodashConfig.js'}
- */
-export const useEodashRuntimeConfig = async () => {
-  const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
-  /**
-   * @param {import("@/types").EodashConfig} updatedConfig
-   */
-  const assignConfig = (updatedConfig) => {
-    /** @type {(keyof import("@/types").EodashConfig)[]} */(Object.keys(eodashConfig))
-      .forEach((key) => {
-        //@ts-expect-error
-        eodashConfig[key] = updatedConfig[key]
-      })
-  }
-
-  try {
-    assignConfig(
-      (await import( /* @vite-ignore */new URL('/config.js', import.meta.url).href)).default
-    )
-  } catch {
-    try {
-      assignConfig(await import("user:config").then(async m => await m['default']))
-    } catch {
-      console.error('no dashboard configuration assigned')
-    }
-  }
-  return eodashConfig
-}
-
-/**
- * @param {(store:import("@/types").EodashStore)=> import("@/types").EodashConfig
- * | Promise<import("@/types").EodashConfig>}  configCallback
- */
-export const defineCompiletimeConfig = async (configCallback) => {
-  return await configCallback(store)
-}

package/core/eodashConfig.js

@@ -1,136 +0,0 @@
-import { reactive } from "vue";
-import { currentUrl, mapInstance } from './store/States';
-/**
- * @type {Function | null}
- */
-let handleMoveEnd = null;
-
-/**
- * Reactive Edoash Config Object. provided globally in the app,
- * and used as an intermediate object to make user defined configurations reactive.
- * @type {import("./types").EodashConfig}
- */
-const eodashConfig = reactive({
-  id: 'demo',
-  stacEndpoint: 'https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json',
-  routes: [],
-  brand: {
-    name: 'Demo',
-    font: {
-      family: 'Poppins'
-    },
-    theme: {
-      colors: {
-        primary: '#004170',
-        secondary: '#00417044',
-        surface: "#f0f0f0f0",
-      }
-    }
-  },
-  template: {
-    background: {
-      id: Symbol(),
-      widget: {
-        link: 'https://cdn.skypack.dev/@eox/map',
-        properties: {
-          class: "fill-height fill-width overflow-none",
-          center: [15, 48],
-          layers: [{ type: "Tile", source: { type: "OSM" } }],
-        },
-        tagName: 'eox-map',
-        onMounted(el, _, router) {
-           /** @type {any} */(el).zoom = router.currentRoute.value.query['z'];
-
-          mapInstance.value =  /** @type {any} */(el).map;
-
-          mapInstance.value?.on('moveend', handleMoveEnd =
-          /** @param {any} evt  */(evt) => {
-              router.push({
-                query: {
-                  z: `${evt.map.getView().getZoom()}`
-                }
-              });
-            });
-        },
-        onUnmounted(_el, _store, _router) {
-          //@ts-expect-error
-          mapInstance.value?.un('moveend', handleMoveEnd);
-        }
-      },
-      type: 'web-component'
-    },
-    widgets: [
-      {
-        id: Symbol(),
-        title: 'Tools',
-        layout: { "x": 0, "y": 0, "w": 3, "h": 12 },
-        widget: {
-          link: 'https://cdn.skypack.dev/@eox/itemfilter',
-          properties: {
-            config: {
-              titleProperty: "title",
-              filterProperties: [
-                {
-                  keys: ["title", "themes"],
-                  title: "Search",
-                  type: "text",
-                  expanded: true,
-                },
-                {
-                  key: "themes",
-                  title: "Theme",
-                  type: "multiselect",
-                  featured: true
-                },
-              ],
-              aggregateResults: "themes",
-              enableHighlighting: true,
-            }
-          },
-          onMounted: async function (el, store, _) {
-            /**
-            * @typedef {object} Item
-            * @property {string} href
-            * */
-
-            /** @type {any} */(el).apply(store?.stac);
-            /** @type {any} */(el).config.onSelect =
-              /**
-               * @param {Item} item
-               * */
-              async (item) => {
-                console.log(item);
-                await store.loadSelectedSTAC(item.href);
-              };
-          },
-          tagName: 'eox-itemfilter'
-        },
-        type: 'web-component'
-      },
-      {
-        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'
-        },
-        type: 'web-component'
-      },
-    ]
-  }
-});
-
-
-export default eodashConfig;

package/core/plugins/router.js

@@ -1,20 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router';
-
-const routes = [
-  {
-    path: '/',
-    redirect: '/dashboard'
-  },
-  {
-    path: '/dashboard',
-    name: 'Dashboard',
-    component: () => import('@/views/Dashboard.vue'),
-  }
-];
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-});
-
-export default router;

package/core/store/Keys.js

@@ -1,6 +0,0 @@
-/**
- *  `eodashConfig` injection key.
- * @type {Symbol}
- * @see {@link "@/plugins/index.js"}
- */
-export const eodashConfigKey = Symbol("eodashConfig");