@eodash/eodash 5.0.0-alpha.1.14 → 5.0.0-alpha.1.15

package/core/eodash.js

@@ -1,5 +1,5 @@
 import { reactive } from "vue";
-import { currentUrl } from './store/States';
+import { currentUrl } from "./store/States";
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app,
@@ -7,103 +7,95 @@ import { currentUrl } from './store/States';
  * @type {import("./types").Eodash}
  */
 const eodash = reactive({
-  id: 'demo',
-  stacEndpoint: 'https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json',
+  id: "demo",
+  stacEndpoint: "https://esa-eodash.github.io/RACE-catalog/RACE/catalog.json",
   routes: [],
   brand: {
-    name: 'Demo',
+    name: "Demo",
     font: {
-      family: 'Poppins'
+      family: "Poppins",
     },
     theme: {
       colors: {
-        primary: '#004170',
-        secondary: '#00417044',
+        primary: "#004170",
+        secondary: "#00417044",
         surface: "#f0f0f0f0",
-      }
+      },
     },
-    meta: {}
+    meta: {},
+    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'
-      }
+        name: "EodashMap",
+      },
     },
     widgets: [
       {
         id: Symbol(),
-        title: 'Tools',
-        layout: { "x": 0, "y": 0, "w": 3, "h": 12 },
+        type: "internal",
+        title: "itemfilter",
+        layout: { x: 0, y: 0, w: 3, h: 12 },
+        slidable: false,
         widget: {
-          link: 'https://cdn.skypack.dev/@eox/itemfilter',
+          name: "EodashItemFilter",
+        },
+      },
+      {
+        id: Symbol(),
+        type: "internal",
+        title: "datepicker",
+        layout: { x: 5, y: 11, w: 2, h: 1 },
+        slidable: false,
+        widget: {
+          name: "EodashDatePicker",
           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,
-            }
+            inline: 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 },
+        title: "Information",
+        layout: { x: 9, y: 0, w: 3, h: 12 },
         widget: {
-          link: async () => await import('@eox/stacinfo'),
+          link: async () => await import("@eox/stacinfo"),
           properties: {
             for: currentUrl,
             allowHtml: "true",
-            styleOverride: "#properties li > .value {font-weight: normal !important;}",
+            styleOverride:
+              "#properties li > .value {font-weight: normal !important;}",
             header: "[]",
 
             subheader: "[]",
             properties: '["description"]',
             featured: "[]",
-            footer: "[]"
+            footer: "[]",
           },
-          tagName: 'eox-stacinfo'
+          tagName: "eox-stacinfo",
         },
-        type: 'web-component'
+        type: "web-component",
       },
-    ]
-  }
+    ],
+  },
 });
 
-
 export default eodash;

package/core/store/stac.js

@@ -3,7 +3,7 @@ import { inject, ref } from 'vue';
 import axios from 'axios';
 import { useAbsoluteUrl } from '@/composables/index';
 import { eodashKey } from '@/store/Keys';
-import { assignIndicator } from '@/utils';
+import { indicator } from '@/store/States';
 
 export const useSTAcStore = defineStore('stac', () => {
   /**
@@ -55,7 +55,7 @@ export const useSTAcStore = defineStore('stac', () => {
 
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
-      assignIndicator(selectedStac.value)
+      indicator.value = selectedStac.value?.id ?? "";
     }).catch(err => console.error(err));
   }
 

package/core/types.d.ts

@@ -1,16 +1,9 @@
-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";
-
 /**
  * @group Eodash
  */
 export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
   /**
-   * Imports web component file, either using a URL or an import funtion.
+   * 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:
@@ -36,19 +29,19 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
    * @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>, router: import("vue-router").Router) => (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 useSTAcStore>, router: Router) => (Promise<void> | void)
+  onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>, router: import("vue-router").Router) => (Promise<void> | void)
 }
 
 
 /** @ignore */
 export interface WidgetsContainerProps {
-  widgets: Omit<Widget, 'layout'>[]
+  widgets: Omit<Widget, 'layout' | 'slidable'>[]
 }
 
 // eodash types:
@@ -79,7 +72,11 @@ export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
      *  Height. Integer between 1 and 12
      */
     h: number
-  }
+  },
+  /**
+ * Enable/Disable widget sliding.
+ */
+  slidable?: boolean
   widget: WebComponentProps<T>
   type: 'web-component'
 }
@@ -113,16 +110,20 @@ export interface InternalComponentWidget {
      */
     h: number
   }
+  /**
+   * Enable/Disable widget sliding.
+   */
+  slidable?: boolean
   widget: {
     /**
-     * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder can be referenced
-     * using their 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>
   }
   type: 'internal'
 }
@@ -158,6 +159,10 @@ export interface IFrameWidget {
      */
     h: number
   }
+  /**
+  * Enable/Disable widget sliding.
+  */
+  slidable?: boolean;
   widget: {
     /**
      * The URL of the page to embed
@@ -172,10 +177,12 @@ export interface IFrameWidget {
 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 between 1 and 12
@@ -194,6 +201,10 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
      */
     h: number
   }
+  /**
+  * Enable/Disable widget sliding.
+  */
+  slidable?: boolean
 }
 /**
  * @group Eodash
@@ -208,7 +219,7 @@ export type Widget<T extends ExecutionTime = "compiletime"> = StaticWidget<T> |
 /**
  * @group Eodash
  */
-export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, 'layout' | 'title'> | Omit<InternalComponentWidget, 'layout' | 'title'> | Omit<IFrameWidget, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
+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"`.
@@ -220,9 +231,14 @@ 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](../readme#widget) without the `title` and  `layout` properties
+   * Has the same specifications of `Widget` without the `title` and  `layout` properties
+   * @see {@link Widget}
    */
   background?: BackgroundWidget<T>
   /**
@@ -238,6 +254,7 @@ export type InternalRoute = `/${string}`
 export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
 /**
+ * @ignore
  * @group Eodash
  */
 export type ExecutionTime = "runtime" | "compiletime";
@@ -256,7 +273,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
    **/
   stacEndpoint: StacEndpoint
   /**
-  * Renderes to navigation buttons on the app header.
+  * Renders navigation buttons on the app header.
   **/
   routes?: Array<{
     title: string,
@@ -272,7 +289,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
      */
     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;
       /**
@@ -285,19 +302,21 @@ export interface Eodash<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.
+     * meta tags configuration, using unhead's [useSeoMeta](https://unhead.unjs.io/usage/composables/use-seo-meta)
      */
-    theme?: ThemeDefinition
-
-    meta?: import("@unhead/vue").UseSeoMetaInput
+    meta?: import("@unhead/vue").UseSeoMetaInput;
+    /**
+     * Text applied to the footer.
+     */
+    footerText?: string;
   }
   /**
    * Template configuration
@@ -318,31 +337,31 @@ export interface EodashStore {
     /**
      * Currently selected STAC endpoint
      */
-    currentUrl: Ref<string>
+    currentUrl: import("vue").Ref<string>
     /**
     * OpenLayers map instance
     */
-    mapInstance: Ref<Map | null>
+    mapInstance: import("vue").Ref<import("openlayers").Map | null>
     /**
     * currently selected datetime
     */
-    datetime: Ref<string>
+    datetime: import("vue").Ref<string>
     /**
      * Currently selected indicator
      */
-    indicator: Ref<string>
+    indicator: import("vue").Ref<string>
   }
   actions: {};
   /**
    *  Pinia store definition used to navigate the root STAC catalog.
    */
   stac: {
-    useSTAcStore: typeof useSTAcStore
+    useSTAcStore: typeof import("./store/stac").useSTAcStore
   }
 }
 ///////
 /**
- * Eodash server, build and setup configuration
+ * Extending [Vite's](https://vitejs.dev/) config to configure eodash's server, build and setup.
  * @group EodashConfig
  */
 export interface EodashConfig {
@@ -361,31 +380,32 @@ export interface EodashConfig {
     open?: boolean
   }
   /**
-   * base public path
+   * Base public path
    */
   base?: string;
   /**
-   * build target folder path
+   * Build target folder path
    */
   outDir?: string;
-  /** path to statically served assets folder, can be set to `false`
-   *  to disable serving assets statically
+  /**
+   * Path to statically served assets folder, can be set to `false`
+   * to disable serving assets statically
    **/
   publicDir?: string | false;
   /**
-   * cache folder
+   * Cache folder
    */
   cacheDir?: string
-  /** specifies main entry file, exporting `createEodash`*/
+  /** Specifies main entry file, exporting `createEodash`*/
   entryPoint?: string
   /**
-   * file exporting eodash client runtime config
+   * File exporting eodash client runtime config
    */
   runtime?: string
   widgets?: string
 }
 /**
- * project entry point should export this function as a default
+ * the project's entry point should export this function as a default
  * to instantiate eodash
  *
  * @param  configCallback

package/core/utils/eodashSTAC.js

@@ -1,5 +1,6 @@
 import { Collection, Item } from 'stac-js';
 import { toAbsolute } from 'stac-js/src/http.js';
+import { generateFeatures } from './helpers'
 
 export class EodashCollection {
   /** @type {string | undefined} */
@@ -20,32 +21,7 @@ export class EodashCollection {
    * @async
    */
   createLayersJson = async (item = null) => {
-    let stacItem;
-    if (item instanceof Date) {
-      // if collectionStac not yet initialized we do it here
-      if (!this.#collectionStac) {
-        const response = await fetch(this.#collectionUrl);
-        const stac = await response.json();
-        this.#collectionStac = new Collection(stac);
-      }
-      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
-    );
-    const stac = await response.json();
-
+    let stacItem, stac;
     // TODO get auxiliary layers from collection
     let layersJson = [
       {
@@ -58,21 +34,73 @@ export class EodashCollection {
         },
       },
     ];
-
-    if (!stacItem) {
-      // no specific item was requested; render last item
+    // 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);
-      const items = this.getItems();
-      this.selectedItem = items[items.length - 1];
-      layersJson = await this.createLayersJson(this.selectedItem);
+    }
+
+    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 {
-      // specific item was requested
-      const item = new Item(stac);
-      this.selectedItem = item;
-      //@ts-expect-error
-      layersJson.unshift(this.buildJson(item));
-      return layersJson;
+      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;
+      }
     }
   }
 
@@ -82,12 +110,16 @@ export class EodashCollection {
   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')) {
+    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
@@ -98,6 +130,9 @@ export class EodashCollection {
           url: 'data:,' + encodeURIComponent(JSON.stringify(item.geometry)),
           format: 'GeoJSON',
         },
+        properties: {
+          id: item.id,
+        },
       };
     }
 

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;
+}

package/core/utils/index.js

@@ -1,5 +1,3 @@
-import { indicator } from '@/store/States';
-
 /**
  * loads font in the app using `webfontloader`
  * @param {string} [family="Roboto"]
@@ -28,21 +26,3 @@ export const loadFont = async (family = "Roboto", link) => {
   }
   return family;
 };
-
-
-/**
- * @param {import('stac-ts').StacCatalog | import('stac-ts').StacCollection | import('stac-ts').StacItem | null} selectedSTAC
- * @see {@link indicator}
- */
-export const assignIndicator = (selectedSTAC) => {
-  const code = /** @type {string | undefined} */ (selectedSTAC?.code);
-  const subcode = /** @type {string | string[] | undefined} */ (selectedSTAC?.subcode);
-
-  if (selectedSTAC?.code || selectedSTAC?.subcode) {
-    indicator.value = code ? code :
-      Array.isArray(subcode) ? subcode[0] : subcode ?? ""
-  } else {
-    indicator.value = ""
-  }
-  console.log(indicator.value,/** @type {string} */(selectedSTAC?.code)),/** @type {string[]} */(selectedSTAC?.subcode)
-}

package/core/vite-env.d.ts

@@ -14,6 +14,9 @@ declare module '@eox/stacinfo' {
 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