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

package/widgets/EodashItemFilter.vue

@@ -1,5 +1,10 @@
 <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";
@@ -31,10 +36,10 @@ const properties = {
   },
 };
 
-/** @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 {
@@ -59,15 +64,13 @@ 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")
-);
+    // 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>