@eodash/eodash 5.0.0-alpha.2.13 → 5.0.0-alpha.2.15

package/widgets/EodashItemFilter.vue

@@ -17,6 +17,10 @@ import "@eox/itemfilter";
 import { onMounted, ref } from "vue";
 
 const props = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
   filtersTitle: {
     type: String,
     default: "Indicators",
@@ -35,8 +39,8 @@ const props = defineProps({
     default: "themes",
   },
   enableHighlighting: { type: Boolean, default: true },
-  expandMultipleFilters: { type: Boolean, default: false },
-  expandMultipleResults: { type: Boolean, default: false },
+  expandMultipleFilters: { type: Boolean, default: true },
+  expandMultipleResults: { type: Boolean, default: true },
   filterProperties: {
     /** @type {import("vue").PropType<{
      * keys:string[];
@@ -61,9 +65,18 @@ const props = defineProps({
 });
 /** @param {any} evt*/
 const onSelect = async (evt) => {
+  // reset the style of all compare buttons
+  eoxItemFilter.value?.shadowRoot
+    ?.querySelectorAll(".compareMapButton")
+    .forEach((res) => res.setAttribute("style", defaultStyle));
   const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
-  await store.loadSelectedSTAC(item.href);
-  console.log(item, store.selectedStac);
+  if (item) {
+    await store.loadSelectedSTAC(item.href);
+  } else {
+    // TODO: it is possible to unselect items now
+    // we need to consider how to reset to "default"
+    // if that happens here
+  }
 };
 const config = {
   titleProperty: props.titleProperty,
@@ -78,6 +91,69 @@ const eoxItemFilter = ref(null);
 
 const store = useSTAcStore();
 
+const defaultStyle =
+  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:white;";
+const highlightStyle =
+  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:#9bcaeb;";
+
+const injectCompareButtons = () => {
+  setTimeout(() => {
+    /** @type {any} */
+    (eoxItemFilter.value)?.shadowRoot
+      .querySelectorAll("details>summary")
+      .forEach((/** @type {HTMLElement} */ el) =>
+        el.setAttribute("style", "width: 100%"),
+      );
+    /** @type {any} */
+    (eoxItemFilter.value)?.shadowRoot
+      .querySelectorAll("details>div li")
+      .forEach((/** @type {HTMLElement} */ res) => {
+        let compareButton = document.createElement("button");
+        compareButton.className = "compareMapButton";
+        compareButton.dataset.id = res.children[0].id;
+
+        compareButton.onclick = async (
+          /** {Event & { currentTarget: HTMLElement }} */ evt,
+        ) => {
+          // reset the style of all compare buttons
+          eoxItemFilter.value?.shadowRoot
+            ?.querySelectorAll(".compareMapButton")
+            .forEach((res) => {
+              res.setAttribute("style", defaultStyle);
+            });
+          const currentTarget = /** @type {HTMLElement}*/ (evt.currentTarget);
+          currentTarget?.setAttribute("style", highlightStyle);
+          const selected = eoxItemFilter.value?.items.find(
+            (/** @type {HTMLElement} */ it) =>
+              it.id === currentTarget?.dataset.id,
+          );
+          if (selected) {
+            await store.loadSelectedCompareSTAC(selected.href);
+          }
+        };
+        compareButton.setAttribute("style", defaultStyle);
+        const svgIcon = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "svg",
+        );
+        const iconPath = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path",
+        );
+        svgIcon.setAttribute("width", "15");
+        svgIcon.setAttribute("height", "15");
+        svgIcon.setAttribute("viewBox", "0 0 24 24");
+        iconPath.setAttribute(
+          "d",
+          "M19,3H14V5H19V18L14,12V21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,18H5L10,12M10,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H10V23H12V1H10V3Z",
+        );
+        svgIcon.appendChild(iconPath);
+        compareButton.appendChild(svgIcon);
+        res.append(compareButton);
+      });
+  }, 100);
+};
+
 onMounted(() => {
   const style = document.createElement("style");
   style.innerHTML = `
@@ -96,5 +172,8 @@ onMounted(() => {
   const items = store.stac?.filter((item) => item.rel === "child");
   /** @type {any} */
   (eoxItemFilter.value).items = items;
+  if (props.enableCompare) {
+    injectCompareButtons();
+  }
 });
 </script>

package/widgets/EodashLayerControl.vue

@@ -1,18 +1,13 @@
 <template>
   <span class="d-flex flex-column fill-height overflow-auto pa-4">
-    <eox-layercontrol ref="eoxLayercontrol" />
+    <eox-layercontrol v-if="mapEl" :for="mapEl" ref="eoxLayercontrol" />
   </span>
 </template>
 <script setup>
 import "@eox/layercontrol";
 import "@eox/jsonform";
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { mapEl } from "@/store/States";
 /** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxLayercontrol = ref(null);
-
-onMounted(() => {
-  /** @type{ HTMLElement & Record<string,any> }*/
-  (eoxLayercontrol.value).for = mapEl.value;
-});
 </script>

package/widgets/EodashMap.vue

@@ -1,23 +1,55 @@
 <template>
-  <eox-map
+  <eox-map-compare
     class="fill-height fill-width overflow-none"
-    ref="eoxMap"
-    :config="eoxMapConfig"
-  />
+    :enabled="showCompare"
+  >
+    <eox-map
+      class="fill-height fill-width overflow-none"
+      slot="first"
+      sync="eox-map#compare"
+      ref="eoxMap"
+      id="main"
+      :config="eoxMapConfig"
+    />
+    <eox-map
+      class="fill-height fill-width overflow-none"
+      id="compare"
+      slot="second"
+      ref="compareMap"
+      :config="eoxCompareMapConfig"
+    />
+  </eox-map-compare>
 </template>
 <script setup>
-import { transformExtent } from "ol/proj";
 import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { EodashCollection } from "@/utils/eodashSTAC";
-import { extractCollectionUrls, uid } from "@/utils/helpers";
-import { currentUrl, datetime, mapEl, mapPosition } from "@/store/States";
+import { extractCollectionUrls } from "@/utils/helpers";
+import {
+  currentUrl,
+  currentCompareUrl,
+  datetime,
+  mapEl,
+  mapPosition,
+} from "@/store/States";
+import { transformExtent } from "ol/proj";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 import "@eox/map";
 import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 
+const props = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 /** @type {import("vue").Ref<(HTMLElement & Record<string,any>) | null>} */
 const eoxMap = ref(null);
+/** @type {import("vue").Ref<(HTMLElement & Record<string,any>) | null>} */
+const compareMap = ref(null);
+
+const showCompare = ref("first");
 
 const eoxMapConfig = reactive({
   /** @type {(number|undefined)[] | undefined} */
@@ -26,18 +58,6 @@ const eoxMapConfig = reactive({
   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: {
@@ -51,6 +71,14 @@ const eoxMapConfig = reactive({
   ],
 });
 
+const eoxCompareMapConfig = reactive({
+  /** @type {(number|undefined)[] | undefined} */
+  center: [15, 48],
+  /** @type {number | undefined} */
+  zoom: 4,
+  layers: [],
+});
+
 // Check if selected indicator was already set in store
 if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   // TODO: do further checks for invalid values?
@@ -72,6 +100,121 @@ const handleMoveEnd = (evt) => {
 };
 
 const store = useSTAcStore();
+/**
+ *
+ * @param {import("vue").Ref<string>} baseUrl
+ * @param {string} updatedTime
+ * @param {import("vue").Ref<
+ *   | import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * >} selectedStac
+ */
+const createLayersConfig = async (baseUrl, updatedTime, selectedStac) => {
+  const collectionUrls = extractCollectionUrls(
+    selectedStac.value,
+    baseUrl.value,
+  );
+  const eodashCollections = collectionUrls.map(
+    (cu) => new EodashCollection(cu),
+  );
+
+  const layersCollection = [];
+  const dataLayers = {
+    type: "Group",
+    properties: {
+      id: "AnalysisGroup",
+      title: "Analysis Layers",
+      layerControlExpand: true,
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  for (const ec of eodashCollections) {
+    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) => {
+    dl.properties.layerControlExpand = true;
+    dl.properties.layerControlToolsExpand = true;
+  });
+
+  layersCollection.push(dataLayers);
+  const indicator = new EodashCollection(currentUrl.value);
+  const indicatorLayers = await indicator.buildJsonArray(
+    //@ts-expect-error we use this function to generate collection level visualization
+    selectedStac.value,
+    currentUrl.value,
+    selectedStac.value?.title ?? "",
+    selectedStac.value?.endpointtype ?? false,
+  );
+
+  const baseLayers = {
+    type: "Group",
+    properties: {
+      id: "BaseLayersGroup",
+      title: "Base Layers",
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  const indicatorBaseLayers = indicatorLayers.filter(
+    (l) => l.properties.group === "baselayer",
+  );
+  if (indicatorBaseLayers.length) {
+    baseLayers.layers.push(...indicatorBaseLayers);
+
+    // Add exclusive to baselayers and make sure only one is selected
+    baseLayers.layers.forEach((bl) => {
+      bl.properties.layerControlExclusive = true;
+    });
+  } else {
+    // Default to some baselayer
+    baseLayers.layers.push({
+      type: "Tile",
+      properties: {
+        id: "osm",
+        title: "Background",
+        layerControlExclusive: true,
+      },
+      source: {
+        type: "OSM",
+      },
+    });
+  }
+
+  if (baseLayers.layers.length) {
+    layersCollection.push(baseLayers);
+  }
+
+  const overlayLayers = {
+    type: "Group",
+    properties: {
+      id: "OverlayGroup",
+      title: "Overlay Layers",
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  const indicatorOverlays = indicatorLayers.filter(
+    (l) => l.properties.group === "overlay",
+  );
+  if (indicatorOverlays.length) {
+    overlayLayers.layers.push(...indicatorOverlays);
+    layersCollection.unshift(overlayLayers);
+  }
+
+  return layersCollection;
+};
 
 onMounted(() => {
   mapEl.value = /** @type {HTMLElement & Record<string,any>} */ (eoxMap.value);
@@ -79,126 +222,51 @@ onMounted(() => {
   /** @type {import('ol/Map').default} */
   (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
 
-  const { selectedStac } = storeToRefs(store);
+  const { selectedStac, selectedCompareStac } = storeToRefs(store);
+  if (props.enableCompare) {
+    watch(
+      [selectedCompareStac, datetime],
+      async (
+        [updatedCompareStac, updatedTime],
+        [_previousCompareStac, _previousTime],
+      ) => {
+        if (updatedCompareStac) {
+          const compareLayersCollection = await createLayersConfig(
+            currentCompareUrl,
+            updatedTime,
+            selectedCompareStac,
+          );
+          /** @type {any} */
+          (compareMap.value).layers = compareLayersCollection;
+          showCompare.value = "";
+        }
+      },
+    );
+  }
 
   watch(
     [selectedStac, datetime],
     async ([updatedStac, updatedTime], [previousSTAC, _previousTime]) => {
       if (updatedStac) {
-        const collectionUrls = extractCollectionUrls(
-          selectedStac.value,
-          currentUrl.value,
-        );
-
-        const eodashCollections = collectionUrls.map(
-          (cu) => new EodashCollection(cu),
+        const layersCollection = await createLayersConfig(
+          currentUrl,
+          updatedTime,
+          selectedStac,
         );
-
-        const layersCollection = [];
-        const dataLayers = {
-          type: "Group",
-          properties: {
-            id: uid(),
-            title: "Analysis Layers",
-            layerControlExpand: true,
-          },
-          layers: /** @type {Record<string,any>[]}*/ ([]),
-        };
-
-        for (const ec of eodashCollections) {
-          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) => {
-          dl.properties.layerControlExpand = true;
-          dl.properties.layerControlToolsExpand = true;
-        });
-
-        layersCollection.push(dataLayers);
-        const indicator = new EodashCollection(currentUrl.value);
-        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,
-          currentUrl.value,
-          selectedStac.value?.title ?? "",
-          selectedStac.value?.endpointtype ?? false,
-        );
-
-        const baseLayers = {
-          type: "Group",
-          properties: {
-            id: uid(),
-            title: "Base Layers",
-          },
-          layers: /** @type {Record<string,any>[]}*/ ([]),
-        };
-
-        const indicatorBaseLayers = indicatorLayers.filter(
-          (l) => l.properties.group === "baselayer",
-        );
-        if (indicatorBaseLayers.length) {
-          baseLayers.layers.push(...indicatorBaseLayers);
-
-          // Add exclusive to baselayers and make sure only one is selected
-          baseLayers.layers.forEach((bl) => {
-            bl.properties.layerControlExclusive = true;
-          });
-        } else {
-          // Default to some baselayer
-          baseLayers.layers.push({
-            type: "Tile",
-            properties: {
-              id: "osm",
-              title: "Background",
-              layerControlExclusive: true,
-            },
-            source: {
-              type: "OSM",
-            },
-          });
-        }
-
-        if (baseLayers.layers.length) {
-          layersCollection.push(baseLayers);
-        }
-
-        const overlayLayers = {
-          type: "Group",
-          properties: {
-            id: uid(),
-            title: "Overlay Layers",
-          },
-          layers: /** @type {Record<string,any>[]}*/ ([]),
-        };
-
-        const indicatorOverlays = indicatorLayers.filter(
-          (l) => l.properties.group === "overlay",
-        );
-        if (indicatorOverlays.length) {
-          overlayLayers.layers.push(...indicatorOverlays);
-          layersCollection.unshift(overlayLayers);
-        }
-
         /** @type {any} */
         (eoxMap.value).layers = layersCollection;
 
         // only on different indicator selection and not on time change
         if (previousSTAC?.id !== updatedStac.id) {
+          showCompare.value = "first";
           // 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];
+          // @ts-expect-error we will need to change the approach to use
+          // native eox-map transformation once included
+          const b = updatedStac.extent?.spatial.bbox[0];
           const sanitizedExtent = [
             b[0] > -180 ? b[0] : -180,
             b[1] > -90 ? b[1] : -90,