@eodash/eodash 5.0.0-alpha → 5.0.0-alpha.1

package/core/components/MobileLayout.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-main class="overflow-none" style="height: 91dvh;">
+
+    <component :is="bgWidget.component" v-bind="bgWidget.props"></component>
+
+    <v-row no-gutters class="d-flex justify-center align-end">
+      <v-col v-for="(importedWidget, idx) in importedWidgets" :key="idx" :cols="cols"
+        class="flex-column fill-height fill-width elevation-1 align-start ma-0 justify-center">
+        <span class="d-flex pa-2 justify-center ma-0 panel-header align-center fill-width" @click="handleSelection(idx)">
+          {{ importedWidget.value.title }}
+        </span>
+        <div v-show="activeIdx === idx" class="overlay align-self-end overflow-auto pa-2">
+          <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1">&#x2715;</v-btn>
+          <component :key="importedWidget.value.id" :is="importedWidget.value.component" v-show="activeIdx === idx"
+            v-bind="importedWidget.value.props" />
+        </div>
+      </v-col>
+    </v-row>
+  </v-main>
+</template>
+<script setup>
+import { eodashConfigKey } from '@/store/Keys';
+import { inject } from 'vue';
+import { useDefineWidgets } from '@/composables/DefineWidgets'
+import { ref } from 'vue';
+
+const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey));
+
+//import widgets
+const widgetsConfig = eodashConfig.template.widgets
+const importedWidgets = useDefineWidgets(widgetsConfig)
+const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
+
+
+
+/**
+ * number of flex columns
+ */
+const cols = importedWidgets.length / 12
+
+/**
+ * index of the active tab
+ */
+const activeIdx = ref(-1)
+
+/**
+* @param {number} idx
+**/
+const handleSelection = (idx) => {
+  activeIdx.value = activeIdx.value === idx ? -1 : idx
+}
+</script>
+<style scoped lang='scss'>
+.panel-header {
+  height: auto;
+  margin: 0;
+  width: 100%;
+  position: relative;
+  bottom: 64px;
+  z-index: 10;
+  background: rgb(var(--v-theme-background));
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 64px;
+  bottom: 64px;
+  z-index: 1;
+  background: rgb(var(--v-theme-background));
+}
+
+.close-btn {
+  justify-self: end;
+}
+
+//
+</style>

package/core/composables/DefineConfig.js

@@ -0,0 +1,44 @@
+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<EodashConfig>}
+ * @see {@linkplain '@/eodashConfig.js'}
+ */
+export const useEodashRuntimeConfig = async () => {
+  const eodashConfig = /** @type {EodashConfig} */(inject(eodashConfigKey))
+  /**
+   * @param {EodashConfig} updatedConfig
+   */
+  const assignConfig = (updatedConfig) => {
+    /** @type {(keyof 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")).default)
+    } catch {
+      console.error('no dashboard configuration assigned')
+    }
+  }
+  return eodashConfig
+}
+
+/**
+ * @param {(store:EodashStore)=>EodashConfig} configCallback
+ */
+export const defineCompiletimeConfig = (configCallback) => {
+  return configCallback(store)
+}

package/core/composables/DefineWidgets.js

@@ -0,0 +1,118 @@
+import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
+import { useSTAcStore } from '@/store/stac'
+import { storeToRefs } from 'pinia'
+
+
+
+/**
+ * @typedef {{
+ *   component:import('vue').Component | null;
+ *   props: Record<string, unknown>;
+ *   title :string;
+ *   id:string|number|symbol;
+ * }} DefinedWidget
+*/
+
+/**
+ * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
+*/
+
+
+
+/**
+ * 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 { (WidgetConfig | BackgroundWidgetConfig | undefined)[] |
+ * WidgetsContainerProps['widgets'] | undefined} widgetConfigs
+ * @returns {Array<ReactiveDefinedWidget>}
+ **/
+export const useDefineWidgets = (widgetConfigs) => {
+  /**
+   * @type {Array<ReactiveDefinedWidget>}
+   */
+  const definedWidgets = []
+
+  for (const config of (widgetConfigs ?? [])) {
+    /**
+     * @type {ReactiveDefinedWidget}
+     */
+    const definedWidget = shallowRef({
+      component: null,
+      props: {},
+      title: '',
+      id: Symbol(),
+      no: '4'
+    })
+
+    if ('defineWidget' in (config ?? {})) {
+      const { selectedStac } = storeToRefs(useSTAcStore())
+      watch(selectedStac, (updatedStac) => {
+        const definedConfig = reactive(/** @type {FunctionalWidget} */
+          (config)?.defineWidget(updatedStac))
+        definedWidget.value = definedWidget.value.id === definedConfig.id ?
+          definedWidget.value : getWidgetDefinition(definedConfig);
+      }, { immediate: true })
+    } else {
+      definedWidget.value = getWidgetDefinition(/** @type {StaticWidget} */(config))
+    }
+    definedWidgets.push(definedWidget)
+  }
+  return definedWidgets
+}
+
+
+/**
+ * Converts a static widget configuration to a defined imported widget
+ * @param {StaticWidget| Omit<StaticWidget, "layout">| undefined} config
+ * @returns {DefinedWidget}
+ **/
+const getWidgetDefinition = (config) => {
+  /**
+   * @type {DefinedWidget}
+   */
+  const importedWidget = {
+    component: null,
+    props: {},
+    title: '',
+    id: Symbol(),
+  }
+  switch (config?.type) {
+    case 'internal':
+      importedWidget.component = defineAsyncComponent({
+        loader: internalWidgets[`/widgets/${/** @type {InternalComponentConfig} **/(config)?.widget.name}.vue`],
+        suspensible: true
+      })
+      importedWidget.props = reactive(/** @type {InternalComponentConfig} **/(config)?.widget.props ?? {})
+
+      break;
+
+    case 'web-component':
+      importedWidget.component = defineAsyncComponent({
+        loader: () => import('@/components/DynamicWebComponent.vue'),
+        suspensible: true
+      })
+      importedWidget.props = reactive(config.widget)
+
+      break;
+    case 'iframe':
+      importedWidget.component = defineAsyncComponent({
+        loader: () => import('@/components/IframeWrapper.vue'),
+        suspensible: true
+      })
+      importedWidget.props = reactive(config.widget)
+      break;
+
+    default:
+      console.error('Widget type not found')
+      break;
+  }
+  importedWidget.title = config?.title ?? ''
+  importedWidget.id = config?.id ?? importedWidget.id
+  return importedWidget
+}
+

package/core/composables/index.js

@@ -0,0 +1,147 @@
+// functions of this folder can only be consumed inside setup stores,
+// setup functions or vue composition api components
+
+import { reactive } from "vue"
+import { currentUrl } from "@/store/States"
+import eodashConfig from "@/eodashConfig"
+import { useTheme } from "vuetify/lib/framework.mjs"
+
+
+/**
+ * Creates an absolute URL from a relative link and assignes it to `currentUrl`
+ * @param {string} [rel = '']
+ * @param {string} [base = eodashConfig.stacEndpoint] - base URL, default value is the root stac catalog
+ * @returns {import('vue').Ref<string>} - returns `currentUrl`
+ * @see {@link '@/store/States.js'}
+ */
+export const useAbsoluteUrl = (rel = '', base = eodashConfig.stacEndpoint) => {
+  if (!rel || rel.includes('http')) {
+    currentUrl.value = base
+    return currentUrl
+  }
+
+  const st = base.split("/");
+  const arr = rel.split("/");
+  st.pop();
+
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] == ".")
+      continue;
+    if (arr[i] == "..")
+      st.pop();
+    else
+      st.push(arr[i]);
+  }
+
+  currentUrl.value = st.join("/");
+  return currentUrl
+}
+
+/**
+ * Adds slide in and out functionality to Elements
+ * @param {import('vue').Ref<HTMLElement[]|null>} elements - elements to add the functionality to
+ * @param {WidgetConfig[]} 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(d => {
+    const btn = reactive({ style: {}, icon: { in: '', out: '' }, active: false })
+    switch (d) {
+      case 'left':
+        btn.style = { 'top': '50%', 'right': '-11%' }
+        btn.icon.in = 'mdi-chevron-double-right'
+        btn.icon.out = 'mdi-chevron-double-left'
+
+        break;
+      case 'right':
+        btn.style = { 'top': '50%', 'left': '-11%' }
+        btn.icon.in = 'mdi-chevron-double-left'
+        btn.icon.out = 'mdi-chevron-double-right'
+
+        break;
+      case 'up':
+        btn.style = { 'right': '50%', 'bottom': '-17%' }
+        btn.icon.in = 'mdi-chevron-double-down'
+        btn.icon.out = 'mdi-chevron-double-up'
+
+        break;
+      case 'down':
+        btn.style = { 'right': '50%', 'top': '-17%' }
+        btn.icon.in = 'mdi-chevron-double-up'
+        btn.icon.out = 'mdi-chevron-double-down'
+        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`
+ * @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}
+ */
+export const useUpdateTheme = (themeName, themeDefinition = {}) => {
+  const theme = useTheme();
+
+  /** @type {Array<keyof import('vuetify').ThemeDefinition>} */(Object.keys(themeDefinition)).forEach((key) => {
+    if (key === 'dark') {
+      theme.themes.value[themeName][key] = /** @type {Boolean} */ (themeDefinition[key])
+    } else {
+      //@ts-expect-error
+      theme.themes.value[themeName][key] = {
+        ...theme.themes.value[themeName][key],
+        ...themeDefinition[key]
+      }
+    }
+  })
+  return theme
+}

package/core/eodashConfig.js

@@ -0,0 +1,136 @@
+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 {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/main.js

@@ -0,0 +1,4 @@
+// Plugins
+import { defineCompiletimeConfig } from '@/composables/DefineConfig';
+
+export { defineCompiletimeConfig as defineConfig }

package/core/plugins/index.js

@@ -0,0 +1,27 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify';
+import router from './router';
+import { createPinia } from 'pinia';
+import eodashConfig from '@/eodashConfig';
+import { eodashConfigKey } from '@/store/Keys';
+import store from '../store';
+
+export const pinia = createPinia();
+
+/**
+ * @param {import('vue').App} app
+ */
+export function registerPlugins(app) {
+  window.eodashStore = store;
+
+  app.use(vuetify)
+    .use(router)
+    .use(pinia)
+    .provide(eodashConfigKey, eodashConfig);
+}

package/core/plugins/router.js

@@ -0,0 +1,20 @@
+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(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

package/core/plugins/vuetify.js

@@ -0,0 +1,27 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
+
+
+import { createVuetify } from 'vuetify';
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    themes: {
+      dashboardTheme: {},
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+});

package/core/render.js

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

package/core/store/Actions.js

@@ -0,0 +1,28 @@
+/**
+ * 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/Keys.js

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

package/core/store/States.js

@@ -0,0 +1,12 @@
+import { ref } from "vue";
+
+/**
+ * currently selected STAC endpoint
+ */
+export const currentUrl = ref('');
+
+/**
+ * ol map object. Updated by the config file.
+ * @type {import("vue").Ref<import('openlayers').Map | null>}
+ */
+export const mapInstance = ref(null);

package/core/store/index.js

@@ -0,0 +1,23 @@
+//export all actions, states, and pinia stores
+/**
+ * @template {keyof EodashStore} [K = keyof EodashStore]
+* @typedef {Record<K,EodashStore[K]>} EodashStoreImports
+*/
+
+const storesImport = /**@type {EodashStoreImports} */(import.meta.glob('../store/**.js', { eager: true }))
+/**
+ * @type {EodashStore}
+ */
+const store = (() => {
+  const stores = /** @type {EodashStore}*/({});
+  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;
+    }
+  }
+  return stores;
+})();
+
+export default store;