@eodash/eodash 5.0.0-alpha.1.13 → 5.0.0-alpha.1.14

package/bin/serverConfig.js

@@ -9,7 +9,8 @@ import {
   cachePath, publicPath, userConfig,
   buildTargetPath,
   logger,
-  rootPath
+  rootPath,
+  internalWidgetsPath
 } from "./utils.js";
 import { readFile } from "fs/promises";
 import { defineConfig, searchForWorkspaceRoot } from "vite"
@@ -61,7 +62,8 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
       alias: {
         '@': fileURLToPath(new URL('../core', import.meta.url)),
         '^': fileURLToPath(new URL('../widgets', import.meta.url)),
-        "user:config": entryPath
+        "user:config": entryPath,
+        "user:widgets": internalWidgetsPath
       },
       extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
     },
@@ -78,7 +80,7 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
     },
     root: fileURLToPath(new URL('..', import.meta.url)),
     optimizeDeps: mode === "development" ? {
-      include: ["webfontloader", "vuetify", "vue", "pinia"],
+      include: ["webfontloader", "vuetify", "vue", "pinia", "stac-js", "urijs"],
       noDiscovery: true,
     } : {},
     /** @type {string|false} */
@@ -100,7 +102,7 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
  * @type {import("vite").ServerHook}
  */
 async function configureServer(server) {
-  server.watcher.add([entryPath, runtimeConfigPath])
+  server.watcher.add([entryPath, runtimeConfigPath, path.join(internalWidgetsPath, "**/*.vue")])
 
   let updatedPath = ''
   const loggerInfo = logger.info

package/bin/utils.js

@@ -21,6 +21,7 @@ const pkg = JSON.parse(
  * @property {string | false} publicDir
  * @property {string} outDir
  * @property {string} entryPoint
+ * @property {string} widgets
  * @property {string} cacheDir
  * @property {string} runtime
  * @property {string} base
@@ -33,7 +34,8 @@ cli.version(pkg.version, '-v, --version', 'output the current version')
   .option('--publicDir <path>', 'path to statically served assets folder')
   .option('--no-publicDir', 'stop serving static assets')
   .option('--outDir <path>', 'minified output folder')
-  .option('-e, --entryPoint <path>', 'file exporting `defineConfig`')
+  .option('-e, --entryPoint <path>', 'file exporting `createEodash`')
+  .option('-w, --widgets <path>', 'folder that contains vue components as internal widgets')
   .option('--cacheDir <path>', 'cache folder')
   .option('-r, --runtime <path>', 'file exporting eodash client runtime config')
   .option('-b, --base <path>', 'base public path')
@@ -52,6 +54,7 @@ export const appPath = fileURLToPath(new URL("..", import.meta.url)),
   srcPath = path.join(rootPath, "/src"),
   runtimeConfigPath = userConfig.runtime ? path.resolve(rootPath, userConfig.runtime) : path.join(srcPath, "./runtime.js"),
   entryPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/main.js"),
+  internalWidgetsPath = userConfig.widgets ? path.resolve(rootPath, userConfig.widgets) : path.join(srcPath, "widgets"),
   dotEodashPath = path.join(rootPath, "/.eodash"),
   buildTargetPath = userConfig.outDir ? path.resolve(rootPath, userConfig.outDir) : path.join(dotEodashPath, '/dist'),
   cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
@@ -84,6 +87,7 @@ async function getUserConfig(options, command) {
     entryPoint: options.entryPoint ?? config?.entryPoint,
     outDir: options.outDir ?? config?.outDir,
     publicDir: options.publicDir ?? config?.publicDir,
-    runtime: options.runtime ?? config?.runtime
+    runtime: options.runtime ?? config?.runtime,
+    widgets: options.widgets ?? config?.widgets
   }
 }

package/core/composables/DefineWidgets.js

@@ -2,8 +2,6 @@ import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
 import { useSTAcStore } from '@/store/stac'
 import { storeToRefs } from 'pinia'
 
-
-
 /**
  * @typedef {{
  *   component:import('vue').Component | null;
@@ -17,14 +15,24 @@ import { storeToRefs } from 'pinia'
  * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
 */
 
+const internalWidgets = (() => {
+  /**
+   * @type {Record<string,() => Promise<import('vue').Component>>}
+   */
+  const importMap = {
+    ...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)));
+    delete importMap[key];
+  }
+  return importMap
+})();
 
 
-/**
- * import map to all vue components inside `widgets` directory.
- * @type {Record<string,() => Promise<import('vue').Component>>}
- */
-const internalWidgets = import.meta.glob('^/**/*.vue')
-
 /**
  * Composable that converts widgets Configurations to defined imported widgets
  * @param { (import("@/types").Widget | import("@/types").BackgroundWidget | undefined)[] |
@@ -46,7 +54,6 @@ export const useDefineWidgets = (widgetConfigs) => {
       props: {},
       title: '',
       id: Symbol(),
-      no: '4'
     })
 
     if ('defineWidget' in (config ?? {})) {
@@ -84,7 +91,7 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case 'internal':
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[`/widgets/${/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name}.vue`],
+        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
         suspensible: true
       })
       importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.props ?? {})

package/core/composables/index.js

@@ -2,10 +2,11 @@
 // setup functions or vue composition api components
 
 import { reactive } from "vue"
-import { currentUrl } from "@/store/States"
+import { currentUrl, datetime, mapInstance, indicator } from "@/store/States"
 import eodashConfig from "@/eodash"
 import { useTheme } from "vuetify/lib/framework.mjs"
-
+import { useRouter } from "vue-router"
+import { onMounted, onUnmounted, watch } from "vue"
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -145,3 +146,50 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   })
   return theme
 }
+
+
+/**
+ * Composable that initiates route query params to store
+ * STAC related values
+ */
+export const useRouteParams = () => {
+  const router = useRouter()
+  /**
+   * @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()
+    const currentQuery = router.currentRoute.value.query
+    router.push({
+      query: {
+        ...currentQuery,
+        x, y, z
+      }
+    })
+
+  }
+  onMounted(() => {
+    watch([datetime, mapInstance, currentUrl, indicator], ([updatedDate, updatedMap, updatedUrl, updatedIndicator]) => {
+      const [x, y] = updatedMap?.getView().getCenter() ?? [0, 0]
+      const currentQuery = router.currentRoute.value.query
+      router.push({
+        query: {
+          ...currentQuery,
+          indicator: updatedIndicator,
+          x,
+          y,
+          z: updatedMap?.getView().getZoom(),
+          datetime: updatedDate,
+          url: updatedUrl,
+        }
+      })
+      updatedMap?.on("moveend", handleMoveEnd)
+    })
+  })
+
+  onUnmounted(() => {
+    mapInstance.value?.un("moveend", handleMoveEnd)
+  })
+}

package/core/eodash.js

@@ -1,9 +1,5 @@
 import { reactive } from "vue";
-import { currentUrl, mapInstance } from './store/States';
-/**
- * @type {Function | null}
- */
-let handleMoveEnd = null;
+import { currentUrl } from './store/States';
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app,
@@ -31,34 +27,10 @@ const eodash = reactive({
   template: {
     background: {
       id: Symbol(),
+      type: "internal",
       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'
+        name: 'EodashMap'
+      }
     },
     widgets: [
       {

package/core/main.js

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

package/core/store/Actions.js

@@ -1,28 +0,0 @@
-/**
- * loads font in the app using `webfontloader`
- * @param {string} [family="Roboto"]
- * @param {string} [link]
- * @returns {Promise<string>} - font family name
- * @see {@link "https://github.com/typekit/webfontloader "}
- */
-export const loadFont = async (family = "Roboto", link) => {
-  const WebFontLoader = (await import('webfontloader')).default;
-  if (link) {
-    WebFontLoader.load({
-      custom: {
-        // Use FVD notation to include families https://github.com/typekit/fvd
-        families: [family],
-        // Path to stylesheet that defines font-face
-        urls: [link],
-      },
-    });
-  }
-  else {
-    WebFontLoader.load({
-      google: {
-        families: [family]
-      }
-    });
-  }
-  return family;
-};

package/core/store/States.js

@@ -10,3 +10,13 @@ export const currentUrl = ref('');
  * @type {import("vue").Ref<import('openlayers').Map | null>}
  */
 export const mapInstance = ref(null);
+
+/**
+ * currently selected datetime
+ */
+export const datetime = ref(new Date().toISOString());
+
+/**
+ * Currently selected indicator
+ */
+export const indicator = ref("")

package/core/store/stac.js

@@ -3,6 +3,7 @@ import { inject, ref } from 'vue';
 import axios from 'axios';
 import { useAbsoluteUrl } from '@/composables/index';
 import { eodashKey } from '@/store/Keys';
+import { assignIndicator } from '@/utils';
 
 export const useSTAcStore = defineStore('stac', () => {
   /**
@@ -14,7 +15,7 @@ export const useSTAcStore = defineStore('stac', () => {
   /**
    * selected STAC object.
    * @type {import('vue').Ref<import('stac-ts').StacCatalog |
-   * import('stac-ts').StacCollection |import('stac-ts').StacItem
+   *  import('stac-ts').StacCollection |import('stac-ts').StacItem
    * | null>}
    */
   const selectedStac = ref(null);
@@ -54,6 +55,7 @@ export const useSTAcStore = defineStore('stac', () => {
 
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
+      assignIndicator(selectedStac.value)
     }).catch(err => console.error(err));
   }
 

package/core/types.d.ts

@@ -323,10 +323,16 @@ export interface EodashStore {
     * OpenLayers map instance
     */
     mapInstance: Ref<Map | null>
+    /**
+    * currently selected datetime
+    */
+    datetime: Ref<string>
+    /**
+     * Currently selected indicator
+     */
+    indicator: Ref<string>
   }
-  actions: {
-    loadFont: (family?: string, link?: string) => Promise<string>;
-  };
+  actions: {};
   /**
    *  Pinia store definition used to navigate the root STAC catalog.
    */
@@ -376,6 +382,7 @@ export interface EodashConfig {
    * file exporting eodash client runtime config
    */
   runtime?: string
+  widgets?: string
 }
 /**
  * project entry point should export this function as a default
@@ -383,4 +390,5 @@ export interface EodashConfig {
  *
  * @param  configCallback
  */
-export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Eodash
+export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Promise<Eodash>
+export declare const store: EodashStore

package/core/utils/eodashSTAC.js

@@ -0,0 +1,129 @@
+import { Collection, Item } from 'stac-js';
+import { toAbsolute } from 'stac-js/src/http.js';
+
+export class EodashCollection {
+  /** @type {string | undefined} */
+  #collectionUrl = undefined;
+  #collectionStac = undefined;
+  /** @type {*} */
+  selectedItem = null;
+
+  /**
+   * @param {string} collectionUrl
+   */
+  constructor(collectionUrl) {
+    this.#collectionUrl = collectionUrl;
+  }
+  /**
+   * @param {*} item
+   * @returns
+   * @async
+   */
+  createLayersJson = async (item = null) => {
+    let stacItem;
+    if (item instanceof Date) {
+      // if collectionStac not yet initialized we do it here
+      if (!this.#collectionStac) {
+        const response = await fetch(this.#collectionUrl);
+        const stac = await response.json();
+        this.#collectionStac = new Collection(stac);
+      }
+      stacItem = this.getItems().sort((a, b) => {
+        //@ts-expect-error
+        const distanceA = Math.abs(new Date(a.datetime) - item);
+        //@ts-expect-error
+        const distanceB = Math.abs(new Date(b.datetime) - item);
+        return distanceA - distanceB;
+      })[0];
+      this.selectedItem = stacItem;
+    } else {
+      stacItem = item;
+    }
+    const response = await fetch(
+      stacItem
+        ? toAbsolute(stacItem.href, this.#collectionUrl)
+        : this.#collectionUrl
+    );
+    const stac = await response.json();
+
+    // TODO get auxiliary layers from collection
+    let layersJson = [
+      {
+        type: 'Tile',
+        properties: {
+          id: 'OSM',
+        },
+        source: {
+          type: 'OSM',
+        },
+      },
+    ];
+
+    if (!stacItem) {
+      // no specific item was requested; render last item
+      this.#collectionStac = new Collection(stac);
+      const items = this.getItems();
+      this.selectedItem = items[items.length - 1];
+      layersJson = await this.createLayersJson(this.selectedItem);
+      return layersJson;
+    } else {
+      // specific item was requested
+      const item = new Item(stac);
+      this.selectedItem = item;
+      //@ts-expect-error
+      layersJson.unshift(this.buildJson(item));
+      return layersJson;
+    }
+  }
+
+  /**
+   * @param {*} item
+   */
+  buildJson(item) {
+    let json;
+    // TODO implement other types, such as COG
+    if (/** @type {import('stac-ts').StacLink[]} */(item.links).find((l) => l.rel === 'wms' || l.rel === 'wmts')) {
+      json = {
+        type: 'STAC',
+        displayWebMapLink: true,
+        displayFootprint: false,
+        data: item,
+      };
+    } else {
+      // fall back to rendering the feature
+      json = {
+        type: 'Vector',
+        source: {
+          type: 'Vector',
+          url: 'data:,' + encodeURIComponent(JSON.stringify(item.geometry)),
+          format: 'GeoJSON',
+        },
+      };
+    }
+
+    return json;
+  }
+
+  getItems() {
+    return (
+      //@ts-expect-error
+       // eslint-disable-next-line
+     /** @type {import('stac-ts').StacLink[]}*/(this.#collectionStac?.links)
+        .filter((i) => i.rel === 'item')
+        // sort by `datetime`, where oldest is first in array
+        .sort((a, b) => ( /** @type {number} */(a.datetime) <  /** @type {number} */(b.datetime) ? -1 : 1))
+    );
+  }
+
+  getDates() {
+    return (
+     //@ts-expect-error
+      // eslint-disable-next-line
+      /** @type {import('stac-ts').StacLink[]}*/ (this.#collectionStac?.links)
+        .filter((i) => i.rel === 'item')
+        // sort by `datetime`, where oldest is first in array
+        .sort((a, b) => ( /** @type {number} */(a.datetime) < /** @type {number} */(b.datetime) ? -1 : 1))
+        .map((i) => new Date( /** @type {number} */(i.datetime)))
+    );
+  }
+}

package/core/utils/index.js

@@ -0,0 +1,48 @@
+import { indicator } from '@/store/States';
+
+/**
+ * loads font in the app using `webfontloader`
+ * @param {string} [family="Roboto"]
+ * @param {string} [link]
+ * @returns {Promise<string>} - font family name
+ * @see {@link "https://github.com/typekit/webfontloader "}
+ */
+export const loadFont = async (family = "Roboto", link) => {
+  const WebFontLoader = (await import('webfontloader')).default;
+  if (link) {
+    WebFontLoader.load({
+      custom: {
+        // Use FVD notation to include families https://github.com/typekit/fvd
+        families: [family],
+        // Path to stylesheet that defines font-face
+        urls: [link],
+      },
+    });
+  }
+  else {
+    WebFontLoader.load({
+      google: {
+        families: [family]
+      }
+    });
+  }
+  return family;
+};
+
+
+/**
+ * @param {import('stac-ts').StacCatalog | import('stac-ts').StacCollection | import('stac-ts').StacItem | null} selectedSTAC
+ * @see {@link indicator}
+ */
+export const assignIndicator = (selectedSTAC) => {
+  const code = /** @type {string | undefined} */ (selectedSTAC?.code);
+  const subcode = /** @type {string | string[] | undefined} */ (selectedSTAC?.subcode);
+
+  if (selectedSTAC?.code || selectedSTAC?.subcode) {
+    indicator.value = code ? code :
+      Array.isArray(subcode) ? subcode[0] : subcode ?? ""
+  } else {
+    indicator.value = ""
+  }
+  console.log(indicator.value,/** @type {string} */(selectedSTAC?.code)),/** @type {string[]} */(selectedSTAC?.subcode)
+}

package/core/views/Dashboard.vue

@@ -6,16 +6,18 @@
 
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
-import { useUpdateTheme } from "@/composables";
+import { useRouteParams, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from '@/store/stac';
 import { defineAsyncComponent } from "vue";
 import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
-import { loadFont } from '@/store/Actions'
+import { loadFont } from '@/utils'
 import { useSeoMeta } from "@unhead/vue"
 
 
 const eodash = await useEodashRuntime()
 
+useRouteParams()
+
 const theme = useUpdateTheme('dashboardTheme', eodash.brand?.theme)
 theme.global.name.value = 'dashboardTheme'
 
@@ -36,6 +38,10 @@ useSeoMeta(eodash.brand.meta ?? {})
 </script>
 
 <style scoped lang="scss">
+html {
+  overflow: hidden;
+}
+
 * {
   font-family: v-bind('fontFamily');
 }

package/core/vite-env.d.ts

@@ -11,19 +11,18 @@ declare interface Window {
 declare module '@eox/stacinfo' {
   export const EOxStacInfo: CustomElementConstructor
 }
+declare module '@eox/map' {
+  export const EOxMap: CustomElementConstructor
+}
 declare module 'user:config' {
   const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
   export default eodash
 }
-declare module '@eox/chart' {
-  export const EOxChart: CustomElementConstructor
-}
-declare module '@eox/layercontrol' {
-  export const EOxLayerControl: CustomElementConstructor
-}
-declare module '@eox/timecontrol' {
-  export const EOxTimeControl: CustomElementConstructor
+declare module "stac-js" {
+  const STAC: any, Collection: any, Item: any
+  export { STAC, Collection, Item }
 }
-declare module '@eox/jsonform' {
-  export const EOxJSONForm: CustomElementConstructor
+declare module "stac-js/src/http.js" {
+  const toAbsolute: any
+  export { toAbsolute }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.1.13",
+  "version": "5.0.0-alpha.1.14",
   "type": "module",
   "types": "./core/types.d.ts",
   "files": [
@@ -30,16 +30,20 @@
   },
   "dependencies": {
     "@eox/layout": "^0.1.0",
+    "@eox/map": "^1.4.0",
     "@eox/stacinfo": "^0.3.0",
     "@mdi/font": "7.0.96",
     "@unhead/vue": "^1.8.20",
     "@vitejs/plugin-vue": "^5.0.0",
+    "@web-comp/core": "^1.0.2",
+    "@web-comp/date-picker": "^1.0.8",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.6.2",
     "commander": "^12.0.0",
     "core-js": "^3.29.0",
     "pinia": "^2.0.0",
     "sass": "^1.60.0",
+    "stac-js": "^0.0.9",
     "stac-ts": "^1.0.3",
     "vite": "^5.1.5",
     "vite-plugin-vuetify": "^2.0.0",

package/widgets/EodashDatePicker.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="fill-height fill-width align-center justify-center">
+    <div v-if="inline" class="fill-height fill-width">
+      <!-- <p class="text-subtitle-1 ma-1 pa-2">currently selected date is {{ currentDate }}</p> -->
+      <v-text-field base-color="primary" density="comfortable" type="date" bg-color="surface" color="primary"
+        validate-on="input" min="1980-01-01" :max="new Date().toISOString().split(`T`)[0]" label="Select Date"
+        :value="currentDate" v-model="currentDate" />
+    </div>
+
+    <v-date-picker v-else v-model="currentDate" color="primary" elevation="0" bg-color="surface" location="center"
+      class="overflow-auto fill-height fill-width" :max="new Date()" position="relative"
+      show-adjacent-months></v-date-picker>
+  </span>
+</template>
+<script setup>
+import { computed } from "vue";
+import { datetime } from "@/store/States"
+
+const props = defineProps(["inline"])
+const currentDate = computed({
+  get() {
+    return props.inline ? datetime.value.split("T")[0] : new Date(datetime.value) ?? new Date()
+  },
+  /** @param {Date | string} updatedDate */
+  set(updatedDate) {
+    if (props.inline) {
+      updatedDate = new Date(updatedDate) ?? new Date()
+    }
+    datetime.value = /** @type {Date} */ (updatedDate).toISOString()
+  }
+})
+</script>

package/widgets/EodashMap.vue

@@ -0,0 +1,54 @@
+<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 "@/store/Keys";
+import { mapInstance, datetime } 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)
+
+const properties = {
+  class: "fill-height fill-width overflow-none",
+  center: [15, 48],
+  layers: [{ type: "Tile", source: { type: "OSM" } }],
+}
+const link = () => import("@eox/map")
+
+/** @type {import("openlayers").EventsListenerFunctionType}*/
+let handleMoveEnd;
+
+/** @type {import("@/types").WebComponentProps["onMounted"]} */
+const onMounted = (el, store, router) => {
+  datetime.value = /** @type {string} */ (router.currentRoute.value.query["datetime"] ?? "");
+  mapInstance.value =  /** @type {any} */(el).map;
+
+  const { selectedStac } = storeToRefs(store)
+
+  watch([selectedStac, datetime], async ([updatedStac, updatedTime]) => {
+    if (updatedStac) {
+      const parentCollUrl = toAbsolute(updatedStac.links[1].href, 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, _router) => {
+  mapInstance.value?.un('moveend', handleMoveEnd);
+}
+
+
+
+</script>