@eodash/eodash 5.0.0-alpha.2.3 → 5.0.0-alpha.2.5

package/README.md

@@ -1,13 +1,19 @@
+# @eodash/eodash [![Version](https://badgen.net/npm/v/@eodash/eodash)](https://www.npmjs.com/package/@eodash/eodash)
+
+A package for creating earth observation dashboards. To learn more about eodash ecosystem visit [eodash.org](https://eodash.org)
+## Usage
+Checkout the [documentation](https://eodash.github.io/eodash/get-started.html) for a detailed guide.
+
 ## Get Started
 Install all the required dependecies after cloning or downloading the repository using Node v18 or higher:
 ```bash
 npm run install
 ```
-Run the dev server and the app will open your default browser window to the landing page:
+Run the dev server:
 ```bash
 npm run dev
 ```
-To compile and minify for production:
+To compile and minify a demo instance:
 ```bash
 npm run build
 ```
@@ -15,13 +21,16 @@ To preview the compiled production files :
 ```bash
 npm run preview
 ```
+To compile and minify a demo instance as a web component library:
+```bash
+npm run build -- --lib
+```
 
 ## Folder Structure
     .
-    ├── bin                # CLI source code
-    ├── core               # Client source code that hosts the microfrontends and renders the dashboard
+    ├── core               # CLI & Client source code 
     ├── docs               # Documentation files
-    ├── tests              # CLI and component tests folder
+    ├── tests              # CLI & Client component tests folder
     ├── widgets            # Vue componenets as internal widgets.
     ├── public             # Statically served directory
     └── README.md

package/core/{SuspensedDashboard.ce.vue → client/SuspensedDashboard.ce.vue}

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app ref="vAppRef">
     <Suspense>
       <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
 
@@ -20,7 +20,10 @@ defineProps({
   config: {
     type: String,
   }
-})
+});
+
+/** @type { import("vue").Ref<import("vuetify/components").VApp| null > } */
+const vAppRef = ref(null)
 const app = createApp({})
 registerPlugins(app)
 
@@ -30,8 +33,9 @@ Object.assign(inst.appContext, app._context)
 //@ts-expect-error
 Object.assign(inst.provides, app._context.provides)
 
-function setStylesFromHead() {
-  const eodashComponent = document.querySelector('eo-dash')
+/** @param {import("vue").Ref<HTMLElement | import("vue").ComponentPublicInstance>[]} [hiddenElements] */
+function setStylesFromHead(hiddenElements) {
+  const eodashShadowRoot = vAppRef.value?.$el.getRootNode()
   const styleSheet = new CSSStyleSheet()
   const head = document.querySelector('head')
   let stylesStr = ''
@@ -43,23 +47,33 @@ function setStylesFromHead() {
     }
 
     if (child.tagName == 'LINK' && child.getAttribute('rel')?.includes('stylesheet')) {
-      eodashComponent?.shadowRoot?.appendChild(child.cloneNode(true))
+      eodashShadowRoot?.appendChild(child.cloneNode(true))
     }
   });
 
-  stylesStr += `\n * {
-    font-family:${
-      //@ts-expect-error
-      /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
-  }
-${//@ts-expect-error
-  /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey]).brand.noLayout ?
+  stylesStr += `\n
+      ${//@ts-expect-error
+        /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey]).brand.noLayout ?
       `div.v-application__wrap {
-  min-height: fit-content;
-}`: ""}
-  `
+          min-height: fit-content;
+        }`: ""}
+        `
   styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
-  eodashComponent?.shadowRoot?.adoptedStyleSheets.push(styleSheet)
+  eodashShadowRoot?.adoptedStyleSheets.push(styleSheet);
+
+  //@ts-expect-error
+  if (hiddenElements && !(/** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.noLayout)) {
+    hiddenElements.forEach(element => {
+      if (element.value) {
+        if (element.value instanceof HTMLElement) {
+          element.value.style.opacity = "1"
+        } else {
+          /** @type {HTMLElement} */
+          (element.value.$el).style.opacity = "1"
+        }
+      }
+    })
+  }
 }
 
 const error = ref('')

package/core/client/components/DashboardLayout.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-main>
+    <eox-layout :gap="eodash.template.gap ?? 2">
+      <eox-layout-item v-if="bgWidget.component" class="bg-panel" x="0" y="0" h="12" w="12">
+        <Suspense suspensible>
+          <component id="bg-widget" :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 v-if="importedWidget.value.component" :key="importedWidget.value.id" class="panel"
+            :h="importedWidget.value.layout.h" :w="importedWidget.value.layout.w" :x="importedWidget.value.layout.x"
+            :y="importedWidget.value.layout.y">
+            <Suspense suspensible>
+              <component :key="importedWidget.value.id" :is="importedWidget.value.component"
+                v-bind="importedWidget.value.props" />
+            </Suspense>
+          </eox-layout-item>
+        </Transition>
+      </template>
+    </eox-layout>
+  </v-main>
+</template>
+<script setup>
+import { eodashKey } from '@/utils/keys';
+import { inject } from 'vue';
+import { useDefineWidgets } from '@/composables/DefineWidgets'
+import '@eox/layout'
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
+
+const [bgWidget] = useDefineWidgets([eodash.template?.background])
+
+const importedWidgets = useDefineWidgets(eodash.template?.widgets)
+</script>
+<style scoped>
+.panel {
+  position: relative;
+  overflow: visible;
+  z-index: 1;
+  border-radius: 0px;
+  background: rgb(var(--v-theme-surface))
+}
+
+.bg-panel {
+  z-index: 0;
+
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/core/{components → client/components}/ErrorAlert.vue

@@ -1,6 +1,6 @@
 <template>
   <v-alert v-if="error" translate="yes" location="start bottom" type="error" position="fixed" @click:close="error = ''"
-    variant="elevated" :icon="[mdiAlertCircle]" style="z-index: 10000;" closable :close-icon="[mdiClose]">
+    variant="elevated" :icon="[mdiAlertCircle]" class="alert" closable :close-icon="[mdiClose]">
     {{ errorMessage }}
     <details is="animated-details">
       <summary> Error </summary>
@@ -17,3 +17,8 @@ const error = defineModel({ type: String, required: true })
 const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 const errorMessage = eodash.brand.errorMessage ?? 'something went wrong, please try again later'
 </script>
+<style scoped>
+.alert {
+  z-index: 10000;
+}
+</style>

package/core/{components → client/components}/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <v-footer ref="footer" :height="mdAndDown ? '48px' : 'auto'" color="secondary" app
     class="d-flex justify-space-between">
-    <p class="pt-0" style="font-size: 0.8rem;">
+    <p class="pt-0 footer-text">
       {{ eodash.brand.footerText ?? "" }}
     </p>
     <div>
@@ -29,3 +29,8 @@ const { mdAndDown } = useDisplay()
 const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`
 const base64Logo = window.btoa(eoxLogo)
 </script>
+<style scoped>
+.footer-text {
+  font-size: 0.8rem;
+}
+</style>

package/core/{components → client/components}/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app-bar color="primary">
     <v-app-bar-title>{{ title }}</v-app-bar-title>
-    <v-img class="mx-12" style="max-width: 140px;" :src="eodash.brand?.logo" />
+    <v-img class="mx-12 logo" :src="eodash.brand?.logo" />
   </v-app-bar>
 </template>
 <script setup>
@@ -12,3 +12,8 @@ const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
 const title = eodash.brand?.name
 </script>
+<style scoped>
+.logo {
+  max-width: 140px;
+}
+</style>

package/core/{components → client/components}/IframeWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <iframe :src="src" style="width: 100%; height: 100%"></iframe>
+  <iframe :src="src" class="fill-height fill-width"></iframe>
 </template>
 <script setup>
 defineProps({

package/core/{components → client/components}/MobileLayout.vue

@@ -1,17 +1,14 @@
 <template>
-  <v-main class="overflow-hidden" style="height: 91dvh;">
+  <v-main class="overflow-hidden main">
     <Suspense suspensible>
       <component id="bg-widget" v-if="bgWidget.component" :is="bgWidget.component" v-bind="bgWidget.props"></component>
     </Suspense>
 
     <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
-      <div v-if="importedWidget.value.component" v-show="activeIdx === idx" id="overlay" class="pa-2" :style="{
-        bottom: tabsHeightFromBtm, position: 'absolute', overflow: 'hidden',
-        width: '100%', left: 0, top: mainRect.top + 'px', zIndex: 1, background: 'rgb(var(--v-theme-surface))'
-      }">
-        <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
+      <div v-if="importedWidget.value.component" v-show="activeIdx === idx" id="overlay" class="pa-2 panel">
+        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1">&#x2715;</v-btn>
         <Suspense suspensible>
-          <div style="height: 90% !important;" v-show="activeIdx === idx">
+          <div class="component-container" v-show="activeIdx === idx">
             <component :key="importedWidget.value.id" :is="importedWidget.value.component"
               v-bind="importedWidget.value.props" />
           </div>
@@ -19,9 +16,7 @@
       </div>
     </template>
 
-    <v-tabs ref="tabs" align-tabs="center" bg-color="surface"
-      :style="{ position: 'relative', bottom: (mainRect.bottom || 48) + 'px', zIndex: 10 }" show-arrows
-      v-model="activeIdx">
+    <v-tabs ref="tabs" align-tabs="center" bg-color="surface" class="tabs" show-arrows v-model="activeIdx">
       <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
         <v-tab v-if="importedWidget.value.component" :value="idx">
           {{ importedWidget.value.title }}
@@ -51,7 +46,43 @@ const activeIdx = ref(-1)
 /** @type {import("vue").Ref<import("vuetify/components").VTabs|null>} */
 const tabs = ref(null)
 const tabsHeightFromBtm = ref('')
+const mainRectTopPx = ref('')
+const mainRectBtmPx = ref('')
+
 onMounted(() => {
+  mainRectTopPx.value = mainRect.value.top + 'px';
+  mainRectBtmPx.value = (mainRect.value.bottom || 48) + 'px';
   tabsHeightFromBtm.value = mainRect.value.bottom + (/** @type {HTMLElement} */(tabs.value?.$el)?.clientHeight ?? 0) + "px"
 })
 </script>
+<style scoped>
+.main {
+  height: 91dvh;
+}
+
+.panel {
+  top: v-bind("mainRectTopPx");
+  bottom: v-bind("tabsHeightFromBtm");
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  left: 0;
+  z-index: 1;
+  background: rgb(var(--v-theme-surface));
+}
+
+.component-container {
+  height: 90%;
+}
+
+.close-btn {
+  height: 5%;
+  position: relative;
+}
+
+.tabs {
+  bottom: v-bind("mainRectBtmPx");
+  position: relative;
+  z-index: 10;
+}
+</style>

package/core/{composables → client/composables}/DefineEodash.js

@@ -31,8 +31,9 @@ export const useEodashRuntime = async (runtimeConfig) => {
   }
 
   try {
+    const configJs = '/config.js'
     assignInstance(
-      (await import( /* @vite-ignore */new URL('/config.js', import.meta.url).href)).default
+      (await import( /* @vite-ignore */new URL(configJs, import.meta.url).href)).default
     )
   } catch {
     try {

package/core/{composables → client/composables}/DefineWidgets.js

@@ -1,14 +1,14 @@
 import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
 import { useSTAcStore } from '@/store/stac'
 import { storeToRefs } from 'pinia'
-import Loading from '@/components/Loading.vue';
 
 /**
  * @typedef {{
- *   component:import('vue').Component | null;
+ *   component: import('vue').Component | null;
  *   props: Record<string, unknown>;
- *   title :string;
- *   id:string|number|symbol;
+ *   title: string;
+ *   id: string | number | symbol;
+ *   layout: { x: number; y: number; h: number; w: number }
  * }} DefinedWidget
 */
 
@@ -55,6 +55,7 @@ export const useDefineWidgets = (widgetConfigs) => {
       props: {},
       title: '',
       id: Symbol(),
+      layout: { x: 0, y: 0, h: 0, w: 0 }
     })
 
     if ('defineWidget' in (config ?? {})) {
@@ -78,7 +79,7 @@ export const useDefineWidgets = (widgetConfigs) => {
 
 /**
  * Converts a static widget configuration to a defined imported widget
- * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined | null} config
+ * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined | null} [config]
  * @returns {DefinedWidget}
  **/
 const getWidgetDefinition = (config) => {
@@ -90,13 +91,13 @@ const getWidgetDefinition = (config) => {
     props: {},
     title: '',
     id: Symbol(),
+    layout: reactive({ x: 0, y: 0, h: 0, w: 0 })
   }
   switch (config?.type) {
     case 'internal':
       importedWidget.component = defineAsyncComponent({
         loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
         suspensible: true,
-        loadingComponent: Loading
       })
       importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.properties ?? {})
 
@@ -106,7 +107,6 @@ const getWidgetDefinition = (config) => {
       importedWidget.component = defineAsyncComponent({
         loader: () => import('@/components/DynamicWebComponent.vue'),
         suspensible: true,
-        loadingComponent: Loading
       })
       importedWidget.props = reactive(config.widget)
 
@@ -115,7 +115,6 @@ const getWidgetDefinition = (config) => {
       importedWidget.component = defineAsyncComponent({
         loader: () => import('@/components/IframeWrapper.vue'),
         suspensible: true,
-        loadingComponent: Loading
       })
       importedWidget.props = reactive(config.widget)
       break;
@@ -130,6 +129,13 @@ const getWidgetDefinition = (config) => {
   }
   importedWidget.title = config?.title ?? ''
   importedWidget.id = config?.id ?? importedWidget.id
+
+  if ("layout" in config) {
+    importedWidget.layout.x = config.layout.x
+    importedWidget.layout.y = config.layout.y
+    importedWidget.layout.h = config.layout.h
+    importedWidget.layout.w = config.layout.w
+  }
   return importedWidget
 }
 

package/core/{composables → client/composables}/index.js

@@ -1,12 +1,11 @@
 // 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`
@@ -35,116 +34,6 @@ export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   return currentUrl;
 };
 
-/**
- * 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`
@@ -178,25 +67,35 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
  */
 
 export const useURLSearchParametersSync = () => {
-  onMounted(() => {
+  onMounted(async () => {
     // Analyze currently set url params when first loaded and set them in the store
     if ('URLSearchParams' in window) {
       const searchParams = new URLSearchParams(window.location.search);
-      let x, y, z;
-      searchParams.forEach((value, key) => {
+      /** @type {number} */
+      let x,
+        /** @type {number} */
+        y,
+        /** @type {number} */
+        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);
         }
       })
+      //@ts-expect-error
       if (x !== undefined && y !== undefined && z !== undefined) {
         mapPosition.value = [x, y, z];
       }