@eodash/eodash 5.0.0-alpha.2.1 → 5.0.0-alpha.2.10

package/core/client/composables/DefineEodash.js

@@ -0,0 +1,67 @@
+import store from "@/store";
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
+
+/**
+ * Sets user defined instance on runtime. Consumes `/@fs/config.js` and assign
+ * it to `eodash`
+ *
+ * @async
+ * @param {string | undefined} runtimeConfig
+ * @returns {Promise<import("@/types").Eodash>}
+ * @see {@linkplain '@/eodash.js'}
+ */
+export const useEodashRuntime = async (runtimeConfig) => {
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+  /** @param {import("@/types").Eodash} config */
+  const assignInstance = (config) => {
+    /** @type {(keyof import("@/types").Eodash)[]} */ (
+      Object.keys(eodash)
+    ).forEach((key) => {
+      //@ts-expect-error to do
+      eodash[key] = config[key];
+    });
+  };
+
+  if (runtimeConfig) {
+    assignInstance(
+      (
+        await import(
+          /* @vite-ignore */ new URL(runtimeConfig, import.meta.url).href
+        )
+      ).default,
+    );
+    return eodash;
+  }
+
+  try {
+    const configJs = "/config.js";
+    assignInstance(
+      (await import(/* @vite-ignore */ new URL(configJs, import.meta.url).href))
+        .default,
+    );
+  } catch {
+    try {
+      assignInstance(
+        await import("user:config").then(async (m) => await m["default"]),
+      );
+    } catch {
+      console.error("no dashboard configuration defined");
+    }
+  }
+  return eodash;
+};
+
+/**
+ * @param {((
+ *       store: import("@/types").EodashStore,
+ *     ) => Promise<import("@/types").Eodash>)
+ *   | import("@/types").Eodash} config
+ */
+export const createEodash = async (config) => {
+  if (config instanceof Function) {
+    return await config(store);
+  } else {
+    return config;
+  }
+};

package/core/client/composables/DefineWidgets.js

@@ -0,0 +1,161 @@
+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;
+ *   layout: { x: number; y: number; h: number; w: number };
+ * }} DefinedWidget
+ */
+
+/** @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;
+})();
+
+/**
+ * Composable that converts widgets Configurations to defined imported widgets
+ *
+ * @param {(
+ *       | import("@/types").Widget
+ *       | import("@/types").BackgroundWidget
+ *       | Omit<import("@/types").Widget, "layout">
+ *       | undefined
+ *     )[]
+ *   | undefined} widgetConfigs
+ * @returns {ReactiveDefinedWidget[]}
+ */
+export const useDefineWidgets = (widgetConfigs) => {
+  /** @type {ReactiveDefinedWidget[]} */
+  const definedWidgets = [];
+
+  for (const config of widgetConfigs ?? []) {
+    /** @type {ReactiveDefinedWidget} */
+    const definedWidget = shallowRef({
+      component: null,
+      props: {},
+      title: "",
+      id: Symbol(),
+      layout: { x: 0, y: 0, h: 0, w: 0 },
+    });
+
+    if ("defineWidget" in (config ?? {})) {
+      const { selectedStac } = storeToRefs(useSTAcStore());
+      watch(
+        selectedStac,
+        (updatedStac) => {
+          let definedConfig =
+            /** @type {import("@/types").FunctionalWidget} */ (
+              config
+            )?.defineWidget(updatedStac);
+          if (definedConfig) {
+            definedConfig = reactive(definedConfig);
+          }
+          definedWidget.value =
+            definedWidget.value.id === definedConfig?.id
+              ? definedWidget.value
+              : getWidgetDefinition(definedConfig);
+        },
+        { immediate: true },
+      );
+    } else {
+      definedWidget.value = getWidgetDefinition(
+        /** @type {import("@/types").StaticWidget} */ (config),
+      );
+    }
+    definedWidgets.push(definedWidget);
+  }
+  return definedWidgets;
+};
+
+/**
+ * Converts a static widget configuration to a defined imported widget
+ *
+ * @param {import("@/types").StaticWidget
+ *   | Omit<import("@/types").StaticWidget, "layout">
+ *   | undefined
+ *   | null} [config]
+ * @returns {DefinedWidget}
+ */
+const getWidgetDefinition = (config) => {
+  /** @type {DefinedWidget} */
+  const importedWidget = {
+    component: null,
+    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,
+      });
+      importedWidget.props = reactive(
+        /** @type {import("@/types").InternalComponentWidget} * */ (config)
+          ?.widget.properties ?? {},
+      );
+
+      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:
+      if (!config) {
+        return importedWidget;
+      } else {
+        console.error("Widget type not found");
+      }
+      break;
+  }
+  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/client/composables/index.js

@@ -0,0 +1,136 @@
+// functions of this folder can only be consumed inside setup stores,
+// setup functions or vue composition api components
+
+import { currentUrl, indicator, mapPosition } from "@/store/States";
+import eodash from "@/eodash";
+import { useTheme } from "vuetify/lib/framework.mjs";
+import { onMounted, watch } from "vue";
+import { useSTAcStore } from "@/store/stac";
+
+/**
+ * Creates an absolute URL from a relative link and assignes it to `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) => {
+  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;
+};
+
+/**
+ * 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. Default is `{}`
+ * @returns {import("vuetify").ThemeInstance}
+ */
+export const useUpdateTheme = (themeName, themeDefinition = {}) => {
+  const theme = useTheme();
+
+  /** @type {(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 to do
+      theme.themes.value[themeName][key] = {
+        ...theme.themes.value[themeName][key],
+        ...themeDefinition[key],
+      };
+    }
+  });
+  return theme;
+};
+
+/** Composable that syncs store and URLSearchParameters */
+
+export const useURLSearchParametersSync = () => {
+  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);
+      /** @type {number | undefined} */
+      let x,
+        /** @type {number | undefined} */
+        y,
+        /** @type {number | undefined} */
+        z;
+      searchParams.forEach(async (value, key) => {
+        if (key === "indicator") {
+          const { loadSelectedSTAC, stac } = useSTAcStore();
+          const match = stac?.find((link) => link.id == value);
+          if (match) {
+            await loadSelectedSTAC(match.href);
+          }
+        }
+        if (key === "x") {
+          x = Number(value);
+        }
+        if (key === "y") {
+          y = Number(value);
+        }
+        if (key === "z") {
+          z = Number(value);
+        }
+      });
+      if (x && y && z) {
+        mapPosition.value = [x, y, z];
+      }
+    }
+    watch(
+      [indicator, mapPosition],
+      ([updatedIndicator, updatedMapPosition]) => {
+        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) ?? "");
+          }
+          const newRelativePathQuery =
+            window.location.pathname + "?" + searchParams.toString();
+          history.pushState(null, "", newRelativePathQuery);
+        }
+      },
+    );
+  });
+};
+
+/** @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
+export const makePanelTransparent = (root) => {
+  onMounted(() => {
+    const eoxItem = root.value?.parentElement;
+    if (eoxItem?.tagName === "EOX-LAYOUT-ITEM") {
+      eoxItem.classList.remove("bg-surface");
+      eoxItem.style.background = "transparent";
+      eoxItem.style.border = "transparent";
+    }
+  });
+};

package/core/client/eodash.js

@@ -0,0 +1,136 @@
+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.
+ *
+ * @type {import("./types").Eodash}
+ */
+export const eodash = reactive({
+  id: "demo",
+  stacEndpoint:
+    "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  brand: {
+    noLayout: true,
+    name: "Demo",
+    theme: {
+      colors: {
+        primary: "#fff",
+        secondary: "#fff",
+        surface: "#fff",
+      },
+    },
+    footerText: "Demo configuration of eodash client",
+  },
+  template: {
+    loading: {
+      id: Symbol(),
+      type: "web-component",
+      widget: {
+        // https://uiball.com/ldrs/
+        link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+        tagName: "l-mirage",
+        properties: {
+          class: "align-self-center justify-self-center",
+          size: "120",
+          speed: "2.5",
+          color: "#004170",
+        },
+      },
+    },
+    background: {
+      id: Symbol(),
+      type: "internal",
+      widget: {
+        name: "EodashMap",
+      },
+    },
+    widgets: [
+      {
+        id: Symbol(),
+        type: "internal",
+        title: "Indicators",
+        layout: { x: 0, y: 0, w: 3, h: 8 },
+        widget: {
+          name: "EodashItemFilter",
+        },
+      },
+      {
+        id: Symbol(),
+        type: "web-component",
+        title: "Layer Control",
+        layout: { x: 0, y: 8, w: 3, h: 4 },
+        widget: {
+          link: async () => {
+            await import("@eox/layercontrol");
+            await import("@eox/jsonform");
+          },
+          tagName: "eox-layercontrol",
+          properties: {
+            for: "eox-map",
+            class: "pa-4",
+          },
+        },
+      },
+      {
+        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;
+        },
+      },
+      {
+        defineWidget: (selectedSTAC) => {
+          return selectedSTAC
+            ? {
+                id: "Datepicker",
+                type: "internal",
+                layout: { x: 5, y: 10, w: 1, h: 1 },
+                title: "Datepicker",
+                widget: {
+                  name: "EodashDatePicker",
+                },
+              }
+            : null;
+        },
+      },
+      {
+        defineWidget: (selected) => {
+          return selected
+            ? {
+                id: "Buttons",
+                layout: { x: 8, y: 0, w: 1, h: 1 },
+                title: "Buttons",
+                type: "internal",
+                widget: {
+                  name: "EodashMapBtns",
+                },
+              }
+            : null;
+        },
+      },
+    ],
+  },
+});
+
+export default eodash;

package/core/client/main.js

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

package/core/client/plugins/index.js

@@ -0,0 +1,20 @@
+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 */
+export function registerPlugins(app) {
+  window.eodashStore = store;
+
+  app
+    .use(vuetify)
+    .use(pinia)
+    // Use plugin with optional defaults
+    .use(VCalendar, {})
+    .provide(eodashKey, eodash);
+}

package/core/client/plugins/vuetify.js

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

package/core/client/render.js

@@ -0,0 +1,12 @@
+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/client/store/Actions.js

@@ -0,0 +1,62 @@
+import { registeredProjections } from "@/store/States";
+
+/**
+ * Returns the current layers of the `eox-map`
+ * @param {string} [el="eox-map"] - `eox-map` element selector
+ * @returns {object[]}
+ */
+export const getLayers = (el = "eox-map") =>
+  customElements.get("eo-dash")
+    ? document
+        .querySelector("eo-dash")
+        ?.shadowRoot?.querySelector(el)
+        //@ts-expect-error `layers` doesn't exist on type element
+        ?.layers.toReversed()
+    : //@ts-expect-error `layers` doesn't exist on type element
+      document.querySelector(el)?.layers.toReversed();
+
+/**
+ * Register EPSG projection in `eox-map`
+ * @param {string|number} [code]*/
+export const registerProjection = async (code) => {
+  code = typeof code === "number" ? `EPSG:${code}` : code;
+  if (!code || registeredProjections.includes(code)) {
+    return;
+  }
+  const eoxMap =
+    /** @type {HTMLElement & Record<string,any> | null | undefined} */ (
+      customElements.get("eo-dash")
+        ? document
+            .querySelector("eo-dash")
+            ?.shadowRoot?.querySelector("eox-map")
+        : document.querySelector("eox-map")
+    );
+
+  registeredProjections.push(code);
+  await eoxMap?.registerProjectionFromCode(code);
+};
+/**
+ * Change `eox-map` projection from an `EPSG` code
+ *  @param {string|number} [code]*/
+export const changeMapProjection = async (code) => {
+  code = typeof code === "number" ? `EPSG:${code}` : code;
+  const eoxMap =
+    /** @type {HTMLElement & Record<string,any> | null | undefined} */ (
+      customElements.get("eo-dash")
+        ? document
+            .querySelector("eo-dash")
+            ?.shadowRoot?.querySelector("eox-map")
+        : document.querySelector("eox-map")
+    );
+  if (!code) {
+    eoxMap?.setAttribute("projection", "EPSG:3857");
+    return;
+  }
+
+  if (!registeredProjections.includes(code)) {
+    await registerProjection(code);
+  }
+
+  code = eoxMap?.getAttribute("projection") === code ? "EPSG:3857" : code;
+  eoxMap?.setAttribute("projection", code);
+};

package/core/client/store/States.js

@@ -0,0 +1,21 @@
+import { ref } from "vue";
+
+/** 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("");
+
+/**
+ * Current map position
+ *
+ * @type {import("vue").Ref<(number | undefined)[]>}
+ */
+export const mapPosition = ref([]);
+
+export const registeredProjections = ["EPSG:4326", "EPSG:3857"];
+
+/** available projection to be rendered by `EodashMap` */
+export const availableMapProjection = ref("");

package/core/client/store/index.js

@@ -0,0 +1,20 @@
+//export all actions, states, and pinia stores
+
+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 `importedstore` cant be typed individually
+        stores[storeType] = importedstore;
+      }
+    }
+    return stores;
+  })()
+);
+
+export default store;