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

package/widgets/EodashDatePicker.vue

@@ -1,56 +1,161 @@
 <template>
-  <span class="fill-height fill-width align-center justify-center">
-    <div v-if="inline" class="fill-height fill-width">
-
-      <v-text-field ref="inlineDatePicker" 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>
+  <VCDatePicker v-model="currentDate" :masks="masks" :attributes="attributes">
+    <template #default="{ inputValue, inputEvents }">
+      <div
+        class="flex rounded-lg border border-gray-300 dark:border-gray-600"
+        style="margin: 2px"
+      >
+        <input
+          :value="inputValue"
+          v-on="inputEvents"
+          style="margin: 1px"
+          class="flex-grow px-1 py-1 bg-white dark:bg-gray-700"
+        />
+      </div>
+    </template>
+  </VCDatePicker>
+  <v-row align="center" justify="center" style="margin-top: 6px">
+    <v-btn
+      style="padding: 0px; margin-right: 4px"
+      density="compact"
+      v-tooltip:bottom="'Set date to oldest available dataset'"
+      @click="jumpDate(true)"
+    >
+      <v-icon :icon="[mdiRayEndArrow]" />
+    </v-btn>
+    <v-btn
+      style="padding: 0px; margin-left: 4px"
+      density="compact"
+      v-tooltip:bottom="'Set date to latest available dataset'"
+      @click="jumpDate(false)"
+    >
+      <v-icon :icon="[mdiRayStartArrow]" />
+    </v-btn>
+  </v-row>
 </template>
+
 <script setup>
-import { computed, ref, onMounted } from "vue";
-import { datetime } from "@/store/States"
+import { DatePicker as VCDatePicker } from "v-calendar";
+import "v-calendar/style.css";
+import { computed, ref, onMounted, watch, inject } from "vue";
+import { eodashKey } from "@/utils/keys";
+import { toAbsolute } from "stac-js/src/http.js";
+import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
+import { datetime } from "@/store/States";
+import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
+import { extractCollectionUrls } from "@/utils/helpers";
 
-const props = defineProps({
-  inline: {
-    type: Boolean
+/**
+ * @param {boolean} reverse
+ */
+function jumpDate(reverse) {
+  if (attributes.value && attributes.value.length > 0) {
+    // We have potentially multiple collections we need to iterate (currently only one)
+    let latestDateMS = reverse ? Infinity : -Infinity;
+    attributes.value.forEach((coll) => {
+      if (coll?.dates) {
+        coll.dates.forEach((d) => {
+          // TODO: we need to handle time ranges and other options here
+          if (d instanceof Date) {
+            if (
+              (!reverse && d.getTime() > latestDateMS) ||
+              (reverse && d.getTime() < latestDateMS)
+            ) {
+              latestDateMS = d.getTime();
+            }
+          }
+        });
+      }
+    });
+    if (latestDateMS !== 0) {
+      currentDate.value = new Date(latestDateMS);
+    }
   }
-})
+}
+
+const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
+
+const masks = ref({
+  input: "YYYY-MM-DD",
+});
+
+/**
+ * Attributes displayed on datepicker
+ *
+ * @type {import("vue").Ref<
+ *   (
+ *     | import("v-calendar/dist/types/src/utils/attribute").AttributeConfig
+ *     | undefined
+ *   )[]
+ * >}
+ */
+const attributes = ref([]);
 
 const currentDate = computed({
   get() {
-    return props.inline ? datetime.value.split("T")[0] : new Date(datetime.value) ?? new Date()
+    return datetime.value ? 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 = new Date(updatedDate.getTime() - updatedDate.getTimezoneOffset() * 60000).toISOString()
+    if (updatedDate instanceof Date && !isNaN(updatedDate.getTime())) {
+      datetime.value = new Date(
+        updatedDate.getTime() - updatedDate.getTimezoneOffset() * 60000,
+      ).toISOString();
     } else {
-      datetime.value = new Date().toISOString()
+      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()
+/** @type {import("@/types").WebComponentProps["onMounted"]} */
 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
-})
+  const { selectedStac } = storeToRefs(useSTAcStore());
+  watch(
+    [selectedStac],
+    async ([updatedStac]) => {
+      if (updatedStac) {
+        const parentCollUrl = toAbsolute(
+          `./${updatedStac.id}/collection.json`,
+          eodashConfig.stacEndpoint,
+        );
+        const collectionUrls = extractCollectionUrls(
+          selectedStac.value,
+          parentCollUrl,
+        );
+        const wongPalette = [
+          "#009E73",
+          "#0072B2",
+          "#E69F00",
+          "#CC79A7",
+          "#56B4E9",
+          "#D55E00",
+        ];
+        for (let idx = 0; idx < collectionUrls.length; idx++) {
+          const stacCollection = await (
+            await fetch(collectionUrls[idx])
+          ).json();
+          const dates = stacCollection.links
+            .filter(
+              (/** @type {{ rel: string; datetime: string }} */ item) =>
+                item.rel === "item" && "datetime" in item,
+            )
+            .map(
+              (/** @type {{ datetime: string }} */ it) => new Date(it.datetime),
+            );
+          attributes.value = [
+            {
+              bar: {
+                style: {
+                  backgroundColor: wongPalette[idx % wongPalette.length],
+                },
+              },
+              dates,
+            },
+          ];
+        }
+      }
+    },
+    { immediate: true },
+  );
+});
 </script>

package/widgets/EodashItemFilter.vue

@@ -1,60 +1,95 @@
 <template>
-  <DynamicWebComponent :link="link" tag-name="eox-itemfilter" :properties="properties" :on-mounted="onMounted" />
+  <eox-itemfilter class="fill-height" :config="config" ref="eoxItemFilter">
+    <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
+
+    <h4 slot="resultstitle" style="margin: 14px 8px">{{ resultsTitle }}</h4>
+  </eox-itemfilter>
 </template>
 <script setup>
-import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
-import { indicator } from "@/store/States";
+import { useSTAcStore } from "@/store/stac";
+import "@eox/itemfilter";
+import { onMounted, ref } from "vue";
 
-const link = () => import("@eox/itemfilter");
+const props = defineProps({
+  filtersTitle: {
+    type: String,
+    default: "Indicators",
+  },
+  resultsTitle: {
+    type: String,
+    default: "",
+  },
+  titleProperty: {
+    type: String,
+    default: "title",
+  },
 
-const properties = {
-  config: {
-    titleProperty: "title",
-    filterProperties: [
+  aggregateResults: {
+    type: String,
+    default: "themes",
+  },
+  enableHighlighting: { type: Boolean, default: true },
+  expandMultipleFilters: { type: Boolean, default: false },
+  expandMultipleResults: { type: Boolean, default: false },
+  filterProperties: {
+    /** @type {import("vue").PropType<{
+     * keys:string[];
+     * title:string;
+     * type:string;
+     * expanded?:boolean
+     * }[]> }*/
+    type: Array,
+    default: () => [
       {
-        keys: ["title", "themes"],
+        keys: ["title", "themes", "description"],
         title: "Search",
         type: "text",
-        expanded: true,
       },
       {
         key: "themes",
-        title: "Theme",
+        title: "Theme Filter",
         type: "multiselect",
-        featured: true,
       },
     ],
-    aggregateResults: "themes",
-    enableHighlighting: true,
   },
+});
+
+const config = {
+  titleProperty: props.titleProperty,
+  filterProperties: props.filterProperties,
+  aggregateResults: props.aggregateResults,
+  enableHighlighting: props.enableHighlighting,
+  expandMultipleFilters: props.expandMultipleFilters,
+  expandMultipleResults: props.expandMultipleResults,
 };
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxItemFilter = ref(null);
+
+const store = useSTAcStore();
 
-/** @type {import("../core/types").WebComponentProps["onMounted"]}*/
-const onMounted = (el, store) => {
-  /**
-   * @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 selected indicator was already set in store
-  if (indicator && indicator.value !== "") {
-    const match = store.stac?.find((item) => item.id === indicator.value);
-    if (match) {
-      //@ts-expect-error
-      (el).selectedResult = match;
-      store.loadSelectedSTAC(match.href);
+onMounted(() => {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    section {
+      margin: 0 !important;
+    }
+    section button#filter-reset {
+      padding: 0 8px;
+      top: 8px;
+      right: 8px;
     }
-  }
-  /** @type {any} */ (el).config.onSelect =
-    /**
-     * @param {Item} item
-     * */
+  `;
+  eoxItemFilter.value?.shadowRoot?.appendChild(style);
+
+  eoxItemFilter.value?.apply(
+    // Only list child elements in list
+    store.stac?.filter((item) => item.rel === "child"),
+  );
+  /** @type {any} */ (eoxItemFilter.value).config.onSelect =
+    /** @param {import('stac-ts').StacLink} item */
     async (item) => {
-      console.log(item);
       await store.loadSelectedSTAC(item.href);
+      console.log(item, store.selectedStac);
     };
-};
+});
 </script>

package/widgets/EodashMap.vue

@@ -1,39 +1,80 @@
 <template>
-  <DynamicWebComponent :link="link" tag-name="eox-map" :properties="properties" :on-mounted="onMounted"
-    :on-unmounted="onUnmounted" />
+  <eox-map
+    class="fill-height fill-width overflow-none"
+    ref="eoxMap"
+    :config="eoxMapConfig"
+  />
 </template>
 <script setup>
-import { inject, watch } from "vue";
+import { transformExtent } from "ol/proj";
+import { inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { toAbsolute } from "stac-js/src/http.js";
 import { EodashCollection } from "@/utils/eodashSTAC";
+import { extractCollectionUrls } from "@/utils/helpers";
 import { eodashKey } from "@/utils/keys";
 import { datetime, mapPosition } from "@/store/States";
-import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
 import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
+import "@eox/map";
 import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 
-const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
+const eodashConfig = /** @type {import("@/types").Eodash} */ (
+  inject(eodashKey)
+);
 
-/** @type {Record<string,unknown>} */
-const properties = {
-  class: "fill-height fill-width overflow-none",
+/** @type {import("vue").Ref<(HTMLElement & Record<string,unknown>) | null>} */
+const eoxMap = ref(null);
+
+const eoxMapConfig = reactive({
+  /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
-  layers: [{ type: "Tile", source: { type: "OSM" } }],
-};
+  /** @type {number | undefined} */
+  zoom: 4,
+  // TODO: we should probably introduce some way of defining
+  layers: [
+    {
+      type: "Vector",
+      source: {
+        type: "Vector",
+        url: "https://openlayers.org/data/vector/ecoregions.json",
+        format: "GeoJSON",
+      },
+      properties: {
+        id: "Regions",
+        title: "Regions",
+      },
+    },
+    {
+      type: "Tile",
+      properties: {
+        id: "osm",
+        title: "Background",
+      },
+      source: {
+        type: "OSM",
+      },
+    },
+  ],
+});
+
 // Check if selected indicator was already set in store
 if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   // TODO: do further checks for invalid values?
-  properties.center = [mapPosition.value?.[0], mapPosition.value[1]];
-  properties.zoom = mapPosition.value[2];
+  // TODO: can we expect the values to be in a specific projection
+  eoxMapConfig.center = [mapPosition.value?.[0], mapPosition.value[1]];
+  eoxMapConfig.zoom = mapPosition.value[2];
 }
 
-const link = () => import("@eox/map");
-
-/** @type {import("openlayers").EventsListenerFunctionType}*/
+/** @type {import("openlayers").EventsListenerFunctionType} */
 const handleMoveEnd = (evt) => {
   const map = /** @type {import("openlayers").Map | undefined} */ (
-    /** @type {*} */ (evt).map
+    /** @type {any} */ (evt).map
   );
+  /*
+  const currentProj = map?.getView().getProjection();
+  const transFunc = getTransform(currentProj?.getCode(), 'EPSG:4326');
+  const [x, y] = transFunc(map?.getView().getCenter() ?? [0, 0], undefined, undefined);
+  */
   const [x, y] = map?.getView().getCenter() ?? [0, 0];
   const z = map?.getView().getZoom();
   if (!Number.isNaN(x) && !Number.isNaN(y) && !Number.isNaN(z)) {
@@ -41,42 +82,174 @@ const handleMoveEnd = (evt) => {
   }
 };
 
-/** @type {import("@/types").WebComponentProps["onMounted"]} */
-const onMounted = (el, store) => {
-  /** @type {any} */
-  (el)?.map?.on("moveend", handleMoveEnd);
+const store = useSTAcStore();
+
+onMounted(() => {
+  /** @type {import('ol/Map').default} */
+  (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
 
   const { selectedStac } = storeToRefs(store);
 
   watch(
     [selectedStac, datetime],
-    async ([updatedStac, updatedTime]) => {
+    async ([updatedStac, updatedTime], [previousSTAC, _previousTime]) => {
       if (updatedStac) {
         const parentCollUrl = toAbsolute(
           `./${updatedStac.id}/collection.json`,
-          eodashConfig.stacEndpoint
+          eodashConfig.stacEndpoint,
         );
-        const childCollUrl = toAbsolute(
-          updatedStac.links[1].href,
-          parentCollUrl
+        const collectionUrls = extractCollectionUrls(
+          selectedStac.value,
+          parentCollUrl,
         );
-        const eodash = new EodashCollection(childCollUrl);
-        if (updatedTime) {
-          /** @type {any} */ (el).layers = await eodash.createLayersJson(
-          new Date(updatedTime)
+        /** @type {import("@/utils/eodashSTAC").EodashCollection[]} */
+        const eodashCollections = [];
+        collectionUrls.forEach((cu) => {
+          eodashCollections.push(new EodashCollection(cu));
+        });
+        const uid = function () {
+          return (
+            Date.now().toString(36) + Math.random().toString(36).substring(2)
+          );
+        };
+        const layersCollection = [];
+        const dataLayers = {
+          type: "Group",
+          properties: {
+            id: uid(),
+            title: "Analysis Layers",
+            layerControlExpand: true,
+          },
+          layers: /** @type {object[]}*/ ([]),
+        };
+        for (let idx = 0; idx < eodashCollections.length; idx++) {
+          const ec = eodashCollections[idx];
+          let layers;
+          if (updatedTime) {
+            layers = await ec.createLayersJson(new Date(updatedTime));
+          } else {
+            layers = await ec.createLayersJson();
+          }
+          if (layers) {
+            dataLayers.layers.push(...layers);
+          }
+        }
+        // Add expand to all analysis layers
+        dataLayers.layers.forEach((dl) => {
+          // @ts-expect-error no type definition for eox-map config
+          dl.properties.layerControlExpand = true;
+          // @ts-expect-error no type definition for eox-map config
+          dl.properties.layerControlToolsExpand = true;
+        });
+
+        layersCollection.push(dataLayers);
+        // TODO: add base layers and overlays as defined in the top collection / indicator
+        // Probably best also to introduce background and overlay groups
+        // For now adding OSM as background
+        const indicator = new EodashCollection(parentCollUrl);
+        const indicatorLayers = await indicator.buildJsonArray(
+          // @ts-expect-error we pass a collection instead of an item, we want to reuse the layer extraction logic
+          selectedStac.value,
+          false,
+          false,
         );
+        const baseLayers = {
+          type: "Group",
+          properties: {
+            id: uid(),
+            title: "Base Layers",
+          },
+          layers: /** @type {object[]}*/ ([]),
+        };
+        const overlayLayers = {
+          type: "Group",
+          properties: {
+            id: uid(),
+            title: "Overlay Layers",
+          },
+          layers: /** @type {object[]}*/ ([]),
+        };
+        if (indicatorLayers && indicatorLayers.length > 0) {
+          baseLayers.layers.push(
+            ...indicatorLayers.filter(
+              // @ts-expect-error group is added by the buildJsonArray
+              (l) => l.properties.group === "baselayer",
+            ),
+          );
+          // Add exclusive to baselayers and make sure only one is selected
+          baseLayers.layers.forEach((bl) => {
+            // @ts-expect-error no type definition for eox-map config
+            bl.properties.layerControlExclusive = true;
+          });
+          overlayLayers.layers.push(
+            // @ts-expect-error group is added by the buildJsonArray
+            ...indicatorLayers.filter((l) => l.properties.group === "overlay"),
+          );
         } else {
-          /** @type {any} */ (el).layers = await eodash.createLayersJson();
+          // Default to some baselayer
+          baseLayers.layers.push({
+            type: "Tile",
+            properties: {
+              id: "osm",
+              title: "Background",
+            },
+            source: {
+              type: "OSM",
+            },
+          });
+        }
+        if (baseLayers.layers.length > 0) {
+          layersCollection.push(baseLayers);
+        }
+        if (overlayLayers.layers.length > 0) {
+          layersCollection.unshift(overlayLayers);
+        }
+
+        // TODO: we can check if the collection / indicator has a specific
+        //       projection it wants to be displayed in the map we can register
+        //       and set the attribute here, e.g. like following
+        /*
+        (el)?.registerProjection(
+          'EPSG:3031','+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs'
+        );
+        (el)?.projection = "EPSG:3031";
+        */
+
+        /** @type {any} */
+        (eoxMap.value).layers = layersCollection;
+
+        // only on different indicator selection and not on time change
+        if (previousSTAC?.id !== updatedStac.id) {
+          // Try to move map view to extent
+          const extent = await indicator.getExtent();
+          // Make sure for now we are always converting from 4326
+          // of stac items  into current map projection
+          // TODO: This might change if we decide to use 4326 as default for zoom and extent
+          // Sanitize extent
+          const b = extent.spatial.bbox[0];
+          const sanitizedExtent = [
+            b[0] > -180 ? b[0] : -180,
+            b[1] > -90 ? b[1] : -90,
+            b[2] < 180 ? b[2] : 180,
+            b[3] < 90 ? b[3] : 90,
+          ];
+          const reprojExtent = transformExtent(
+            sanitizedExtent,
+            "EPSG:4326",
+            // @ts-expect-error we should expect to have the view here
+            eoxMap.value?.map?.getView().getProjection(),
+          );
+          /** @type {any} */
+          (eoxMap.value).zoomExtent = reprojExtent;
         }
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
-};
+});
 
-/** @type {import("@/types").WebComponentProps["onUnmounted"]} */
-const onUnmounted = (el, _store) => {
-  /** @type {any} */
-  (el)?.map?.un("moveend", handleMoveEnd);
-};
+onUnmounted(() => {
+  /** @type {import('ol/Map').default} */
+  (eoxMap.value?.map)?.un("moveend", handleMoveEnd);
+});
 </script>

package/widgets/EodashMapBtns.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="rootRef" class="d-flex flex-column align-end justify-end my-3 pa-2">
+    <v-btn
+      v-if="exportMap"
+      class="map-btn"
+      :icon="[mdiMapPlus]"
+      @click="showMapState = !showMapState"
+    />
+    <ExportState v-if="exportMap" v-model="showMapState" />
+    <v-btn
+      class="map-btn"
+      :icon="[mdiEarthBox]"
+      v-if="changeProjection && !!availableMapProjection"
+      @click="changeMapProjection(availableMapProjection)"
+    />
+  </div>
+</template>
+<script setup>
+import { makePanelTransparent } from "@/composables";
+import { changeMapProjection } from "@/store/Actions";
+import { availableMapProjection } from "@/store/States";
+import { mdiEarthBox, mdiMapPlus } from "@mdi/js";
+import ExportState from "^/ExportState.vue";
+import { ref } from "vue";
+
+defineProps({
+  exportMap: {
+    type: Boolean,
+    default: true,
+  },
+  changeProjection: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const showMapState = ref(false);
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+makePanelTransparent(rootRef);
+</script>
+<style scoped>
+.map-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 25%;
+  margin: 4px;
+}
+</style>