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

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

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

@@ -6,16 +6,18 @@
 
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
-import { useUpdateTheme } from "@/composables";
+import { useRouteParams, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from '@/store/stac';
 import { defineAsyncComponent } from "vue";
 import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
-import { loadFont } from '@/store/Actions'
+import { loadFont } from '@/utils'
 import { useSeoMeta } from "@unhead/vue"
 
 
 const eodash = await useEodashRuntime()
 
+useRouteParams()
+
 const theme = useUpdateTheme('dashboardTheme', eodash.brand?.theme)
 theme.global.name.value = 'dashboardTheme'
 
@@ -36,6 +38,10 @@ useSeoMeta(eodash.brand.meta ?? {})
 </script>
 
 <style scoped lang="scss">
+html {
+  overflow: hidden;
+}
+
 * {
   font-family: v-bind('fontFamily');
 }

package/core/vite-env.d.ts

@@ -11,19 +11,21 @@ declare interface Window {
 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 '@eox/chart' {
-  export const EOxChart: CustomElementConstructor
-}
-declare module '@eox/layercontrol' {
-  export const EOxLayerControl: CustomElementConstructor
-}
-declare module '@eox/timecontrol' {
-  export const EOxTimeControl: CustomElementConstructor
+declare module "stac-js" {
+  const STAC: any, Collection: any, Item: any
+  export { STAC, Collection, Item }
 }
-declare module '@eox/jsonform' {
-  export const EOxJSONForm: CustomElementConstructor
+declare module "stac-js/src/http.js" {
+  const toAbsolute: any
+  export { toAbsolute }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.1.13",
+  "version": "5.0.0-alpha.1.15",
   "type": "module",
   "types": "./core/types.d.ts",
   "files": [
@@ -24,22 +24,27 @@
     "preview": "vite preview",
     "lint": "eslint . --fix",
     "docs:generate": "typedoc --options typedoc.config.json",
-    "docs:dev": "vitepress dev docs",
+    "docs:dev": "vitepress dev docs --port 3333",
     "docs:build": "npm run docs:generate && vitepress build docs",
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
+    "@eox/itemfilter": "^0.14.0",
     "@eox/layout": "^0.1.0",
+    "@eox/map": "^1.4.0",
     "@eox/stacinfo": "^0.3.0",
     "@mdi/font": "7.0.96",
     "@unhead/vue": "^1.8.20",
     "@vitejs/plugin-vue": "^5.0.0",
+    "@web-comp/core": "^1.0.2",
+    "@web-comp/date-picker": "^1.0.8",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.6.2",
     "commander": "^12.0.0",
     "core-js": "^3.29.0",
     "pinia": "^2.0.0",
     "sass": "^1.60.0",
+    "stac-js": "^0.0.9",
     "stac-ts": "^1.0.3",
     "vite": "^5.1.5",
     "vite-plugin-vuetify": "^2.0.0",
@@ -68,4 +73,4 @@
   "bin": {
     "eodash": "./bin/app.js"
   }
-}
+}

package/widgets/EodashDatePicker.vue

@@ -0,0 +1,51 @@
+<template>
+  <span class="fill-height fill-width align-center justify-center">
+    <div v-if="inline" class="fill-height fill-width">
+
+      <v-text-field base-color="primary" class="fill-height fill-width pa-2 align-center" type="date" bg-color="surface"
+        color="primary" density="comfortable" label="Select Date" v-model="currentDate" variant="plain" hide-details />
+    </div>
+    <v-date-picker v-else ref="datePicker" :width="width" :height="height" hide-header v-model="currentDate"
+      color="primary" bg-color="surface" location="center" class="overflow-auto fill-height fill-width"
+      position="relative" show-adjacent-months></v-date-picker>
+  </span>
+</template>
+<script setup>
+import { computed, ref, onMounted } from "vue";
+import { datetime } from "@/store/States"
+
+const props = defineProps(["inline"])
+
+const currentDate = computed({
+  get() {
+    return props.inline ? datetime.value.split("T")[0] : new Date(datetime.value) ?? new Date()
+  },
+  /** @param {Date | string} updatedDate */
+  set(updatedDate) {
+    if (props.inline) {
+      updatedDate = new Date(updatedDate);
+    }
+    //@ts-expect-error
+    if (updatedDate instanceof Date && !isNaN(updatedDate)) {
+      datetime.value = updatedDate.toISOString()
+    } else {
+      datetime.value = new Date().toISOString()
+    }
+  }
+});
+
+/**
+ * @type {import("vue").Ref<import("vuetify/components").VDatePicker | null>}
+ **/
+const datePicker = ref(null)
+/** @type {import("vue").Ref<string|undefined>} */
+const width = ref()
+/** @type {import("vue").Ref<string|undefined>} */
+const height = ref()
+onMounted(() => {
+  /** @type {HTMLElement} */
+  const parentEl = datePicker.value?.$el.parentElement?.parentElement
+  width.value = parentEl?.clientWidth ? parentEl.clientWidth + "px" : undefined
+  height.value = parentEl?.clientHeight ? parentEl.clientHeight + "px" : undefined
+})
+</script>

package/widgets/EodashItemFilter.vue

@@ -0,0 +1,60 @@
+<template>
+  <DynamicWebComponent :link="link" tag-name="eox-itemfilter" :properties="properties" :on-mounted="onMounted" />
+</template>
+<script setup>
+import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
+
+const link = () => import("@eox/itemfilter");
+
+const 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,
+  },
+};
+
+/** @type {import("../core/types").WebComponentProps["onMounted"]}*/
+const onMounted = (el, store, router) => {
+  /**
+   * @typedef {object} Item
+   * @property {string} href
+   * */
+  /** @type {any} */ (el).apply(
+  // Only list child elements in list
+  store.stac?.filter((item) => item.rel === "child")
+);
+  // Check if indicator is selected
+  const { query } = router.currentRoute.value;
+  if ("indicator" in query) {
+    const match = store.stac?.find((item) => item.id === query.indicator);
+    if (match) {
+      //@ts-expect-error
+      (el).selectedResult = match;
+      store.loadSelectedSTAC(match.href);
+    }
+  }
+  /** @type {any} */ (el).config.onSelect =
+    /**
+     * @param {Item} item
+     * */
+    async (item) => {
+      console.log(item);
+      await store.loadSelectedSTAC(item.href);
+    };
+};
+</script>

package/widgets/EodashMap.vue

@@ -0,0 +1,72 @@
+<template>
+  <DynamicWebComponent :link="link" tag-name="eox-map" :properties="properties" :on-mounted="onMounted"
+    :on-unmounted="onUnmounted" />
+</template>
+<script setup>
+import { inject, watch } from "vue";
+import { toAbsolute } from "stac-js/src/http.js";
+import { EodashCollection } from "@/utils/eodashSTAC";
+import { eodashKey } from "@/store/Keys";
+import { mapInstance, datetime } from "@/store/States";
+import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
+
+const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
+
+const properties = {
+  class: "fill-height fill-width overflow-none",
+  center: [15, 48],
+  layers: [{ type: "Tile", source: { type: "OSM" } }],
+};
+const router = useRouter();
+const { query } = router.currentRoute.value;
+if ("x" in query && "y" in query) {
+  properties.center = [Number(query.x), Number(query.y)];
+}
+if ("z" in query) {
+  // @ts-ignore
+  properties.zoom = query.z;
+}
+const link = () => import("@eox/map");
+
+/** @type {import("openlayers").EventsListenerFunctionType}*/
+let handleMoveEnd;
+
+/** @type {import("@/types").WebComponentProps["onMounted"]} */
+const onMounted = (el, store, _router) => {
+  mapInstance.value = /** @type {any} */ (el).map;
+
+  const { selectedStac } = storeToRefs(store);
+
+  watch(
+    [selectedStac, datetime],
+    async ([updatedStac, updatedTime]) => {
+      if (updatedStac) {
+        const parentCollUrl = toAbsolute(
+          `./${updatedStac.id}/collection.json`,
+          eodashConfig.stacEndpoint
+        );
+        const childCollUrl = toAbsolute(
+          updatedStac.links[1].href,
+          parentCollUrl
+        );
+        const eodash = new EodashCollection(childCollUrl);
+        if (updatedTime) {
+          /** @type {any} */ (el).layers = await eodash.createLayersJson(
+          new Date(updatedTime)
+        );
+        } else {
+          /** @type {any} */ (el).layers = await eodash.createLayersJson();
+        }
+      }
+    },
+    { immediate: true }
+  );
+};
+/** @type {import("@/types").WebComponentProps["onUnmounted"]} */
+const onUnmounted = (_el, _store, _router) => {
+  mapInstance.value?.un("moveend", handleMoveEnd);
+};
+</script>