@eodash/eodash 5.0.0-alpha.2.4 → 5.0.0-alpha.2.6

package/widgets/EodashDatePicker.vue

@@ -1,57 +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/eodashSTAC";
 
-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,9 +1,13 @@
 <template>
-  <DynamicWebComponent :link="link" tag-name="eox-itemfilter" :properties="properties" :on-mounted="onMounted" />
+  <DynamicWebComponent
+    :link="link"
+    tag-name="eox-itemfilter"
+    :properties="properties"
+    :on-mounted="onMounted"
+  />
 </template>
 <script setup>
 import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
-import { indicator } from "@/store/States";
 
 const link = () => import("@eox/itemfilter");
 
@@ -15,43 +19,58 @@ const properties = {
         keys: ["title", "themes"],
         title: "Search",
         type: "text",
-        expanded: true,
+        // expanded: true,
       },
       {
         key: "themes",
-        title: "Theme",
+        title: "Theme Filter",
         type: "multiselect",
-        featured: true,
+        // featured: true,
+        // expanded: true
       },
     ],
     aggregateResults: "themes",
     enableHighlighting: true,
+    expandMultipleFilters: false,
+    expandMultipleResults: false,
   },
 };
 
-/** @type {import("@/types").WebComponentProps["onMounted"]}*/
+/** @type {import("@/types").WebComponentProps["onMounted"]} */
 const onMounted = (el, store) => {
+  /** @type {any} */ (el).style.height = "100%";
+
+  const style = document.createElement("style");
+  style.innerHTML = `
+    section {
+      margin: 0 !important;
+    }
+    section button#filter-reset {
+      padding: 0 8px;
+      top: 8px;
+      right: 8px;
+    }
+  `;
+  el?.shadowRoot?.appendChild(style);
+
+  const filterstitle = document.createElement("div");
+  filterstitle.setAttribute("slot", "filterstitle");
+  filterstitle.innerHTML = `<h4 style="margin: 14px 8px">Indicators</h4>`;
+  /** @type {any} */ (el).appendChild(filterstitle);
+  const resultstitle = document.createElement("div");
+  resultstitle.setAttribute("slot", "resultstitle");
+  /** @type {any} */ (el).appendChild(resultstitle);
+
   /**
    * @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);
-    }
-  }
+    // Only list child elements in list
+    store.stac?.filter((item) => item.rel === "child"),
+  );
   /** @type {any} */ (el).config.onSelect =
-    /**
-     * @param {Item} item
-     * */
+    /** @param {Item} item */
     async (item) => {
       console.log(item);
       await store.loadSelectedSTAC(item.href);

package/widgets/EodashMap.vue

@@ -1,11 +1,16 @@
 <template>
-  <DynamicWebComponent :link="link" tag-name="eox-map" :properties="properties" :on-mounted="onMounted"
-    :on-unmounted="onUnmounted" />
+  <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 { EodashCollection, extractCollectionUrls } from "@/utils/eodashSTAC";
 import { eodashKey } from "@/utils/keys";
 import { datetime, mapPosition } from "@/store/States";
 import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
@@ -14,26 +19,53 @@ import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 
 const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
 
-/** @type {Record<string,unknown>} */
+/** @type {Record<string, unknown>} */
 const properties = {
   class: "fill-height fill-width overflow-none",
   center: [15, 48],
-  layers: [{ type: "Tile", source: { type: "OSM" } }],
+  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",
+      },
+    },
+    {
+      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?
+  // TODO: can we expect the values to be in a specific projection
   properties.center = [mapPosition.value?.[0], mapPosition.value[1]];
   properties.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)) {
@@ -45,7 +77,6 @@ const handleMoveEnd = (evt) => {
 const onMounted = (el, store) => {
   /** @type {any} */
   (el)?.map?.on("moveend", handleMoveEnd);
-
   const { selectedStac } = storeToRefs(store);
 
   watch(
@@ -54,23 +85,59 @@ const onMounted = (el, store) => {
       if (updatedStac) {
         const parentCollUrl = toAbsolute(
           `./${updatedStac.id}/collection.json`,
-          eodashConfig.stacEndpoint
-        );
-        const childCollUrl = toAbsolute(
-          updatedStac.links[1].href,
-          parentCollUrl
+          eodashConfig.stacEndpoint,
         );
-        const eodash = new EodashCollection(childCollUrl);
-        if (updatedTime) {
-          /** @type {any} */ (el).layers = await eodash.createLayersJson(
-          new Date(updatedTime)
+        const collectionUrls = extractCollectionUrls(
+          selectedStac.value,
+          parentCollUrl,
         );
-        } else {
-          /** @type {any} */ (el).layers = await eodash.createLayersJson();
+        /** @type {import("@/utils/eodashSTAC").EodashCollection[]} */
+        const eodashCollections = [];
+        collectionUrls.forEach((cu) => {
+          eodashCollections.push(new EodashCollection(cu));
+        });
+        const layersCollection = [];
+        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) {
+            layersCollection.push(...layers);
+          }
         }
+        // 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
+        layersCollection.push({
+          type: "Tile",
+          properties: {
+            id: "osm",
+            title: "Background",
+          },
+          source: {
+            type: "OSM",
+          },
+        });
+
+        // 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} */
+        (el).layers = layersCollection;
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
 };
 

package/widgets/WidgetsContainer.vue

@@ -1,6 +1,12 @@
 <template>
-  <details is="animated-details" v-for="mod, idx in importedWidgets" ref="detailsEls" :key="idx" class="overflow-auto"
-    exclusive>
+  <details
+    is="animated-details"
+    v-for="(mod, idx) in importedWidgets"
+    ref="detailsEls"
+    :key="idx"
+    class="overflow-auto"
+    exclusive
+  >
     <summary ref="summaryEls">{{ mod.value.title }}</summary>
     <span :style="{ height: widgetHeight }" class="d-flex flex-column">
       <component :is="mod.value.component" v-bind="mod.value.props" />
@@ -8,41 +14,53 @@
   </details>
 </template>
 <script setup>
-import { useDefineWidgets } from '@/composables/DefineWidgets';
-import { nextTick, onMounted } from 'vue';
-import { ref } from 'vue';
-import { useLayout } from 'vuetify/lib/framework.mjs';
-import 'animated-details'
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { nextTick, onMounted } from "vue";
+import { ref } from "vue";
+import { useLayout } from "vuetify/lib/framework.mjs";
+import "animated-details";
 
 const props = defineProps({
   widgets: {
-    /** @type {import('vue').PropType<Omit<import("@/types").Widget,'layout'>[]>} */
+    /**
+     * @type {import("vue").PropType<
+     *   Omit<import("@/types").Widget, "layout">[]
+     * >}
+     */
     type: Array,
     required: true,
-  }
-})
+  },
+});
 
-const importedWidgets = useDefineWidgets(props.widgets)
+const importedWidgets = useDefineWidgets(props.widgets);
 
 /**
- *  details elements template ref
- * @type {import('vue').Ref<HTMLDetailsElement[]>}
- **/
-const detailsEls = ref([])
+ * Details elements template ref
+ *
+ * @type {import("vue").Ref<HTMLDetailsElement[]>}
+ */
+const detailsEls = ref([]);
 /**
- *  summary elements template ref
- * @type {import('vue').Ref<HTMLDetailsElement[]>}
- **/
-const summaryEls = ref([])
-const widgetHeight = ref('')
-const summariesHeights = ref(0)
+ * Summary elements template ref
+ *
+ * @type {import("vue").Ref<HTMLDetailsElement[]>}
+ */
+const summaryEls = ref([]);
+const widgetHeight = ref("");
+const summariesHeights = ref(0);
 
-
-const { mainRect } = useLayout()
+const { mainRect } = useLayout();
 onMounted(async () => {
   await nextTick(() => {
-    summariesHeights.value = summaryEls.value.reduce((acc, el) => acc += el.clientHeight, 0)
-    widgetHeight.value = ((detailsEls.value[0].parentElement?.scrollHeight ?? 0) - summariesHeights.value - mainRect.value['top']) + 'px'
-  })
-})
+    summariesHeights.value = summaryEls.value.reduce(
+      (acc, el) => (acc += el.clientHeight),
+      0,
+    );
+    widgetHeight.value =
+      (detailsEls.value[0].parentElement?.scrollHeight ?? 0) -
+      summariesHeights.value -
+      mainRect.value["top"] +
+      "px";
+  });
+});
 </script>