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

package/core/types.d.ts

@@ -1,279 +1,291 @@
-import { useSTAcStore } from "./store/stac"
-import type { Router } from "vue-router";
-import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
-import type { Ref } from "vue"
-import type { ThemeDefinition } from "vuetify/lib/index.mjs";
-import type { Map } from "openlayers";
 /**
- * Web Component configuration
+ * @group Eodash
  */
 export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
-  /** Web component definition file URL*/
+  /**
+   * 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 by the `link` provided */
+  /**
+   *  Exported Constructor, needs to be provided if the web component is not registered in by the
+   * [link](#link) provided
+   **/
   constructorProp?: string
-  /** Custom tag name */
   tagName: `${string}-${string}`
   /** Object defining all the properties and attributes of the web component */
   properties?: Record<string, any>
   /**
-   * Function that is triggered when the web component is mounted in the DOM.
+   * 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 useSTAcStore>, router: Router) => (Promise<void> | void)
+  onMounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
   /**
-   * Function that is triggered when the web component is unmounted from the DOM.
+   * 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 useSTAcStore>, router: Router) => (Promise<void> | void)
+  onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
 }
 
 
 /** @ignore */
 export interface WidgetsContainerProps {
-  widgets: Omit<WidgetConfig, 'layout'>[]
+  widgets: Omit<Widget, 'layout' | 'slidable'>[]
 }
 
-// eodash config types:
+// eodash types:
 /**
- * Widget type: `web-component` specification. The web component definition is imported using the `widget.link` property either from
- * an external endpoint, or an installed node_module.
- * Installed node_module web components import should be mapped in `/core/modulesMap.ts`,
- * then setting `widget.link`:`(import-map-key)` and `node_module`:`true`
+ * Widget type: `web-component` API
+ * @group Eodash
  */
-export interface WebComponentConfig<T extends ExecutionTime = "compiletime"> {
-  /**
- * Unique Identifier, triggers rerender when using `defineWidget`
- **/
+export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
   id: number | string | symbol
-  /**
-   * Widget title
-   */
   title: string
   /**
    * Widget position and size.
    */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
-  }
-  widget: WebComponentProps<T>
+  },
   /**
-   * Widget type
-   */
+ * Enable/Disable widget sliding.
+ */
+  slidable?: boolean
+  widget: WebComponentProps<T>
   type: 'web-component'
 }
 
 /**
- * Widget type: `internal` specification.
- * Internal widgets are Vue components inside the `/widgets` directory.
+ * Widget type: `internal` API.
+ * Internal widgets are Vue components provided by eodash.
+ * @group Eodash
  */
-export interface InternalComponentConfig {
-  /**
-  * Unique Identifier, triggers rerender when using `defineWidget`
-  **/
+export interface InternalComponentWidget {
   id: number | string | symbol
-  /**
-   * Widget title
-   */
   title: string
   /**
   * Widget position and size.
   */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
+  /**
+   * Enable/Disable widget sliding.
+   */
+  slidable?: boolean
   widget: {
     /**
-     * Internal Vue Component file name without the extention .vue
+     * 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
      */
-    props?: Record<string, unknown>
+    properties?: Record<string, unknown>
   }
-  /**
-  * Widget type.
-  */
   type: 'internal'
 }
 
 /**
- * Widget type: `iframe` specification.
+ * Widget type: `iframe` API
  * Renders an external HTML file as a widget.
  */
-export interface IFrameConfig {
-  /**
-   * Unique Identifier, triggers rerender when using `defineWidget`
-   **/
+/**
+ * @group Eodash
+ */
+export interface IFrameWidget {
   id: number | string | symbol
-  /**
-  * Widget title
-  */
   title: string
   /**
   * Widget position and size.
   */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
+  /**
+  * Enable/Disable widget sliding.
+  */
+  slidable?: boolean;
   widget: {
     /**
      * The URL of the page to embed
      */
     src: string
   }
-  /**
-  * Widget type
-  */
   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
+   * gets triggered whenever a STAC object is selected.
+   * @param selectedSTAC - Currently selected STAC object
    */
-  defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget<T>, 'layout'>
+  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 (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
+  /**
+  * Enable/Disable widget sliding.
+  */
+  slidable?: boolean
 }
-export type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentConfig<T> | InternalComponentConfig | IFrameConfig
-export type WidgetConfig<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
+/**
+ * @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>
 
 
-export type BackgroundWidgetConfig<T extends ExecutionTime = "compiletime"> = Omit<WebComponentConfig<T>, 'layout' | 'title'> | Omit<InternalComponentConfig, 'layout' | 'title'> | Omit<IFrameConfig, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
 /**
- * Dashboard rendered widgets configuration specification.
+ * @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 configuration should be provided based on the type of the widget.
+ * A specific object should be provided based on the type of the widget.
+ * @group Eodash
  */
-export interface TemplateConfig<T extends ExecutionTime = "compiletime"> {
+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 [WidgetConfig](../readme#widgetconfig) without the `title` and  `layout` properties
+   * Has the same specifications of `Widget` without the `title` and  `layout` properties
+   * @see {@link Widget}
    */
-  background?: BackgroundWidgetConfig<T>
+  background?: BackgroundWidget<T>
   /**
    * Array of widgets that will be rendered as dashboard panels.
    */
-  widgets: WidgetConfig<T>[]
+  widgets: Widget<T>[]
 }
 
-export type ExternalURL = `${'https://' | 'http://'}${string}`;
-export type InternalRoute = `/${string}`
+/** @ignore */
 export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
+/**
+ * @ignore
+ * @group Eodash
+ */
 export type ExecutionTime = "runtime" | "compiletime";
 
 /**
- * Eodash configuration specification.
+ * Eodash instance API
+ * @group Eodash
  */
-export interface EodashConfig<T extends ExecutionTime = "compiletime"> {
+export interface Eodash<T extends ExecutionTime = "compiletime"> {
   /**
-   * Configuration ID that defines the route of the dashboard.
-   * Rendered dashboard can be accessed on route `/dashboard/config-id`
+   * Instance ID.
    */
-  id: string;
+  id?: string;
   /**
    * Root STAC catalog endpoint
    **/
   stacEndpoint: StacEndpoint
-  /**
-  * Renderes to navigation buttons on the app header.
-  **/
-  routes?: Array<{
-    /**
-     * button title
-     **/
-    title: string,
-    /**
-     * external URL or inner path to navigate to.
-     **/
-    to: ExternalURL | InternalRoute
-  }>
   /**
    * Brand specifications.
    */
   brand: {
+    /** Removes the dashboard layout */
+    noLayout?: boolean
     /**
-     * Automatically fetches the specified font family from google fonts. if the `link` property is specified
+     * 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.
+       * 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 https://github.com/typekit/fvd
+       * Font family. Use FVD notation to include families. see https://github.com/typekit/fvd
        */
       family: string
     }
@@ -282,26 +294,29 @@ export interface EodashConfig<T extends ExecutionTime = "compiletime"> {
      */
     name: string;
     /**
-     * Alias that will be shown in the app footer if specified.
+     * Brand logo
      */
-    shortName?: string
+    logo?: string;
     /**
-     * brand logo
+     * Dashboard theme as a custom [vuetifyJs theme](https://vuetifyjs.com/en/features/theme/).
      */
-    logo?: string;
+    theme?: import("vuetify/lib/index.mjs").ThemeDefinition
     /**
-     * Dashboard theme as a custom vuetifyJs theme.
+     * Text applied to the footer.
      */
-    theme?: ThemeDefinition
+    footerText?: string;
   }
   /**
-   * Rendered widgets configuration
+   * Template configuration
    */
-  template: TemplateConfig<T>
+  template: Template<T>
 }
 /////////
 
 /// eodash store types
+/**
+ * @group EodashStore
+ */
 export interface EodashStore {
   /**
    * Stateful Reactive variables
@@ -310,22 +325,31 @@ export interface EodashStore {
     /**
      * Currently selected STAC endpoint
      */
-    currentUrl: Ref<string>
+    currentUrl: import("vue").Ref<string>
     /**
-    * OpenLayers map instance
+    * currently selected datetime
     */
-    mapInstance: Ref<Map | null>
+    datetime: import("vue").Ref<string>
+    /**
+     * Currently selected indicator
+     */
+    indicator: import("vue").Ref<string>
   }
-  // consider removing the actions ?
-  actions: {
-    loadFont: (family?: string, link?: string) => Promise<string>;
-  };
+  actions: {};
   /**
    *  Pinia store definition used to navigate the root STAC catalog.
    */
   stac: {
-    useSTAcStore: typeof useSTAcStore
+    useSTAcStore: typeof import("./store/stac").useSTAcStore
   }
 }
 ///////
-export declare const defineConfig: (configCallback: (store: EodashStore) => EodashConfig | Promise<EodashConfig>) => EodashConfig
+/**
+ * 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

@@ -0,0 +1,164 @@
+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

@@ -0,0 +1,40 @@
+
+/**
+ * @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;
+}