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

package/core/types.d.ts

@@ -1,355 +0,0 @@
-/**
- * @group Eodash
- */
-export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
-  /**
-   * Imports web component file, either using a URL or an import function.
-   * @example
-   * importing `eox-itemfilter` web component, after installing `@eox/itemfilter` it can be
-   * referenced:
-   * ```js
-   * link: async() => import("@eox/itemfilter")
-   * ```
-   *
-   * ::: warning
-   * import maps are not available in runtime config
-   * :::
-   **/
-  link: T extends 'runtime' ? string : (string | (() => Promise<unknown>));
-  /**
-   *  Exported Constructor, needs to be provided if the web component is not registered in by the
-   * [link](#link) provided
-   **/
-  constructorProp?: string
-  tagName: `${string}-${string}`
-  /** Object defining all the properties and attributes of the web component */
-  properties?: Record<string, any>
-  /**
-   * Triggered when the web component is mounted in the DOM.
-   * @param el - web component
-   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
-   */
-  onMounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
-  /**
-   * Triggered when the web component is unmounted from the DOM.
-   * @param el - web component
-   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
-   */
-  onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
-}
-
-
-/** @ignore */
-export interface WidgetsContainerProps {
-  widgets: Omit<Widget, 'layout' | 'slidable'>[]
-}
-
-// eodash types:
-/**
- * Widget type: `web-component` API
- * @group Eodash
- */
-export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
-  id: number | string | symbol
-  title: string
-  /**
-   * Widget position and size.
-   */
-  layout: {
-    /**
-     *  Horizontal start position. Integer between 1 and 12
-     */
-    x: number
-    /**
-     *  Vertical start position. Integer between 1 and 12
-     */
-    y: number
-    /**
-     *  Width. Integer between 1 and 12
-     */
-    w: number
-    /**
-     *  Height. Integer between 1 and 12
-     */
-    h: number
-  },
-  /**
- * Enable/Disable widget sliding.
- */
-  slidable?: boolean
-  widget: WebComponentProps<T>
-  type: 'web-component'
-}
-
-/**
- * Widget type: `internal` API.
- * Internal widgets are Vue components provided by eodash.
- * @group Eodash
- */
-export interface InternalComponentWidget {
-  id: number | string | symbol
-  title: string
-  /**
-  * Widget position and size.
-  */
-  layout: {
-    /**
-     *  Horizontal start position. Integer between 1 and 12
-     */
-    x: number
-    /**
-     *  Vertical start position. Integer between 1 and 12
-     */
-    y: number
-    /**
-     *  Width. Integer between 1 and 12
-     */
-    w: number
-    /**
-     *  Height. Integer between 1 and 12
-     */
-    h: number
-  }
-  /**
-   * Enable/Disable widget sliding.
-   */
-  slidable?: boolean
-  widget: {
-    /**
-     * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder. Referenced
-     * using their name without the .vue extention
-     */
-    name: string;
-    /**
-     * Specified Vue component props
-     */
-    properties?: Record<string, unknown>
-  }
-  type: 'internal'
-}
-
-/**
- * Widget type: `iframe` API
- * Renders an external HTML file as a widget.
- */
-/**
- * @group Eodash
- */
-export interface IFrameWidget {
-  id: number | string | symbol
-  title: string
-  /**
-  * Widget position and size.
-  */
-  layout: {
-    /**
-     *  Horizontal start position. Integer between 1 and 12
-     */
-    x: number
-    /**
-     *  Vertical start position. Integer between 1 and 12
-     */
-    y: number
-    /**
-     *  Width. Integer between 1 and 12
-     */
-    w: number
-    /**
-     *  Height. Integer between 1 and 12
-     */
-    h: number
-  }
-  /**
-  * Enable/Disable widget sliding.
-  */
-  slidable?: boolean;
-  widget: {
-    /**
-     * The URL of the page to embed
-     */
-    src: string
-  }
-  type: 'iframe'
-}
-/**
- * @group Eodash
- */
-export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
-  /**
-   * Provides a functional definition of the widget,
-   * gets triggered whenever a STAC object is selected.
-   * @param selectedSTAC - Currently selected STAC object
-   */
-  defineWidget: (selectedSTAC: import("stac-ts").StacCatalog |
-    import("stac-ts").StacCollection | import("stac-ts").StacItem
-    | null) => Omit<StaticWidget<T>, 'layout' | 'slidable'>
-  layout: {
-    /**
-     *  Horizontal start position. Integer between 1 and 12
-     */
-    x: number
-    /**
-     *  Vertical start position. Integer between 1 and 12
-     */
-    y: number
-    /**
-     *  Width. Integer between 1 and 12
-     */
-    w: number
-    /**
-     *  Height. Integer between 1 and 12
-     */
-    h: number
-  }
-  /**
-  * Enable/Disable widget sliding.
-  */
-  slidable?: boolean
-}
-/**
- * @group Eodash
- */
-export type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentWidget<T> | InternalComponentWidget | IFrameWidget
-/**
- * @group Eodash
- */
-export type Widget<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
-
-
-/**
- * @group Eodash
- */
-export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, 'layout' | 'title' | 'slidable'> | Omit<InternalComponentWidget, 'layout' | 'title' | 'slidable'> | Omit<IFrameWidget, 'layout' | 'title' | 'slidable'> | Omit<FunctionalWidget<T>, 'layout' | 'slidable'>
-/**
- * Dashboard rendered widgets  specification.
- * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
- * A specific object should be provided based on the type of the widget.
- * @group Eodash
- */
-export interface Template<T extends ExecutionTime = "compiletime"> {
-  /**
-   * Gap between widgets
-   */
-  gap?: number;
-  /**
-   * loading widget
-   */
-  loading?: BackgroundWidget<T>
-  /**
-   * Widget rendered as the dashboard background.
-   * Has the same specifications of `Widget` without the `title` and  `layout` properties
-   * @see {@link Widget}
-   */
-  background?: BackgroundWidget<T>
-  /**
-   * Array of widgets that will be rendered as dashboard panels.
-   */
-  widgets: Widget<T>[]
-}
-
-/** @ignore */
-export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
-
-/**
- * @ignore
- * @group Eodash
- */
-export type ExecutionTime = "runtime" | "compiletime";
-
-/**
- * Eodash instance API
- * @group Eodash
- */
-export interface Eodash<T extends ExecutionTime = "compiletime"> {
-  /**
-   * Instance ID.
-   */
-  id?: string;
-  /**
-   * Root STAC catalog endpoint
-   **/
-  stacEndpoint: StacEndpoint
-  /**
-   * Brand specifications.
-   */
-  brand: {
-    /** Removes the dashboard layout */
-    noLayout?: boolean
-    /**
-     * Automatically fetches the specified font family from google fonts. if the [link](#font-link) property is specified
-     * the font family will be fetched from the provided source instead.
-     */
-    font?: {
-      /**
-       * Link to stylesheet that defines font-face. Could be either a relative or absolute URL.
-       */
-      link?: string;
-      /**
-       * Font family. Use FVD notation to include families. see https://github.com/typekit/fvd
-       */
-      family: string
-    }
-    /**
-     *  Title that will be shown in the app header
-     */
-    name: string;
-    /**
-     * Brand logo
-     */
-    logo?: string;
-    /**
-     * Dashboard theme as a custom [vuetifyJs theme](https://vuetifyjs.com/en/features/theme/).
-     */
-    theme?: import("vuetify/lib/index.mjs").ThemeDefinition
-    /**
-     * Text applied to the footer.
-     */
-    footerText?: string;
-  }
-  /**
-   * Template configuration
-   */
-  template: Template<T>
-}
-/////////
-
-/// eodash store types
-/**
- * @group EodashStore
- */
-export interface EodashStore {
-  /**
-   * Stateful Reactive variables
-   */
-  states: {
-    /**
-     * Currently selected STAC endpoint
-     */
-    currentUrl: import("vue").Ref<string>
-    /**
-    * currently selected datetime
-    */
-    datetime: import("vue").Ref<string>
-    /**
-     * Currently selected indicator
-     */
-    indicator: import("vue").Ref<string>
-  }
-  actions: {};
-  /**
-   *  Pinia store definition used to navigate the root STAC catalog.
-   */
-  stac: {
-    useSTAcStore: typeof import("./store/stac").useSTAcStore
-  }
-}
-///////
-/**
- * the project's entry point should export this function as a default
- * to instantiate eodash
- * @group Eodash
- * @param  configCallback
- */
-export declare const createEodash: typeof import("./composables/DefineEodash").createEodash
-/** @group EodashStore */
-export declare const store: EodashStore

package/core/utils/eodashSTAC.js

@@ -1,164 +0,0 @@
-import { Collection, Item } from 'stac-js';
-import { toAbsolute } from 'stac-js/src/http.js';
-import { generateFeatures } from './helpers'
-
-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, stac;
-    // TODO get auxiliary layers from collection
-    let layersJson = [
-      {
-        type: 'Tile',
-        properties: {
-          id: 'OSM',
-        },
-        source: {
-          type: 'OSM',
-        },
-      },
-    ];
-    // Load collectionstac if not yet initialized
-    if (!this.#collectionStac) {
-      //@ts-expect-error
-      const response = await fetch(this.#collectionUrl);
-      stac = await response.json();
-      this.#collectionStac = new Collection(stac);
-    }
-
-    if(stac && stac.endpointtype === "GeoDB") {
-      // Special handling of point based data
-      const allFeatures = generateFeatures(stac.links);
-      layersJson.unshift({
-        type: "Vector",
-        properties: {
-          id: stac.id,
-        },
-        source: {
-          type: "Vector",
-          // @ts-ignore
-          url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
-          format: "GeoJSON",
-        },
-        style: {
-          "circle-radius": 5,
-          "circle-fill-color": "#00417077",
-          "circle-stroke-color": "#004170",
-          "fill-color": "#00417077",
-          "stroke-color": "#004170",
-        }
-      });
-      return layersJson;
-    } else {
-      if (item instanceof Date) {
-        // if collectionStac not yet initialized we do it here
-        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
-      );
-      stac = await response.json();
-      
-      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' || l.rel === 'xyz')) {
-      json = {
-        type: 'STAC',
-        displayWebMapLink: true,
-        displayFootprint: false,
-        data: item,
-        properties: {
-          id: item.id,
-        },
-      };
-    } else {
-      // fall back to rendering the feature
-      json = {
-        type: 'Vector',
-        source: {
-          type: 'Vector',
-          url: 'data:,' + encodeURIComponent(JSON.stringify(item.geometry)),
-          format: 'GeoJSON',
-        },
-        properties: {
-          id: item.id,
-        },
-      };
-    }
-
-    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/helpers.js

@@ -1,40 +0,0 @@
-
-/**
- * @param {import("stac-ts").StacLink[]} links
- */
-export function generateFeatures(links) {
-  /**
-   * @type {{
-   * type:string;
-   * geometry:{
-   * type: string;
-   * coordinates: [number, number],
-   * }
-   * }[]}
-   */
-  const features = [];
-  links.forEach(element => {
-    if (element.rel === "item" && "latlng" in element) {
-      //@ts-expect-error
-      const [lat, lon] = element.latlng.split(",").map((/** @type {string} */it) => Number(it))
-      features.push({
-        type: 'Feature',
-        geometry: {
-          type: 'Point',
-          coordinates: [lon, lat],
-        },
-      })
-    }
-  });
-  const geojsonObject = {
-    'type': 'FeatureCollection',
-    'crs': {
-      'type': 'name',
-      'properties': {
-        'name': 'EPSG:4326',
-      },
-    },
-    features,
-  };
-  return geojsonObject;
-}

package/core/utils/index.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/views/Dashboard.vue

@@ -1,59 +0,0 @@
-<template>
-  <HeaderComponent v-if="!eodash.brand.noLayout" />
-  <Suspense>
-    <TemplateComponent @vue:mounted="onTemplateMount?.()"
-      :style="`height: ${eodash.brand.noLayout ? '90dvh' : 'calc(100dvh - ' + mainRect['top'] + mainRect['bottom'] + 'px)'}`" />
-    <template #fallback>
-      <div v-if="onTemplateMount" style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
-        <Loading />
-      </div>
-    </template>
-  </Suspense>
-  <FooterComponent v-if="!eodash.brand.noLayout" />
-</template>
-
-<script setup>
-import { useEodashRuntime } from "@/composables/DefineEodash";
-import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
-import { useSTAcStore } from '@/store/stac';
-import { defineAsyncComponent, onMounted } from "vue";
-import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
-import { loadFont } from '@/utils'
-import Loading from "@/components/Loading.vue";
-
-const props = defineProps({
-  config: {
-    type: String
-  },
-  onTemplateMount: {
-    type: Function
-  }
-})
-
-const eodash = await useEodashRuntime(props.config)
-
-useURLSearchParametersSync();
-
-const theme = useUpdateTheme('dashboardTheme', eodash.brand?.theme)
-theme.global.name.value = 'dashboardTheme'
-
-await loadFont(eodash.brand?.font?.family, eodash.brand?.font?.link)
-
-const { loadSTAC } = useSTAcStore()
-await loadSTAC()
-
-const { smAndDown } = useDisplay()
-const TemplateComponent = smAndDown.value ?
-  defineAsyncComponent(() => import(`@/components/MobileLayout.vue`)) :
-  defineAsyncComponent(() => import(`@/components/DashboardLayout.vue`))
-
-const HeaderComponent = defineAsyncComponent(() => import(`@/components/Header.vue`))
-const FooterComponent = defineAsyncComponent(() => import(`@/components/Footer.vue`))
-const { mainRect } = useLayout()
-
-onMounted(() => {
-  const htmlTag = /** @type {HTMLElement}  */(document.querySelector('html'))
-  htmlTag.style.overflow = 'hidden';
-})
-
-</script>

package/core/vite-env.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-declare interface Window {
-  eodashStore: import("@/types").EodashStore
-}
-declare module '@eox/stacinfo' {
-  export const EOxStacInfo: CustomElementConstructor
-}
-declare module '@eox/map' {
-  export const EOxMap: CustomElementConstructor
-}
-declare module '@eox/itemfilter' {
-  export const EOxItemFilter: CustomElementConstructor
-}
-declare module 'user:config' {
-  const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
-  export default eodash
-}
-declare module "stac-js" {
-  const STAC: any, Collection: any, Item: any
-  export { STAC, Collection, Item }
-}
-declare module "stac-js/src/http.js" {
-  const toAbsolute: any
-  export { toAbsolute }
-}