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

package/README.md

@@ -4,7 +4,7 @@ A package for creating earth observation dashboards. To learn more about eodash
 
 ## Usage
 
-Checkout the [documentation](https://eodash.github.io/eodash/get-started.html) for a detailed guide.
+Checkout the [documentation](https://eodash.github.io/eodash/) for a detailed guide.
 
 ## Get Started
 

package/core/client/composables/EodashMap.js

@@ -0,0 +1,245 @@
+import { EodashCollection } from "@/utils/eodashSTAC";
+import { setMapProjFromCol } from "@/utils/helpers";
+import { onMounted, onUnmounted, watch } from "vue";
+
+/**
+ * Description placeholder
+ *
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> & {map:import("ol").Map } | null>} mapElement
+ * @param {import("vue").Ref<(number | undefined)[]>} mapPosition
+ */
+export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
+  /** @type {import("openlayers").EventsListenerFunctionType} */
+  const handleMoveEnd = (evt) => {
+    const map = /** @type {import("openlayers").Map | undefined} */ (
+      /** @type {any} */ (evt).map
+    );
+    const lonlat = mapElement.value?.lonLatCenter;
+    const z = map?.getView().getZoom();
+    if (
+      lonlat &&
+      !Number.isNaN(lonlat[0]) &&
+      !Number.isNaN(lonlat[1]) &&
+      !Number.isNaN(z)
+    ) {
+      mapPosition.value = [lonlat[0], lonlat[1], z];
+    }
+  };
+
+  onMounted(() => {
+    /** @type {import('ol/Map').default} */
+    (mapElement.value?.map)?.on("moveend", handleMoveEnd);
+  });
+
+  onUnmounted(() => {
+    /** @type {import('ol/Map').default} */
+    (mapElement.value?.map)?.un("moveend", handleMoveEnd);
+  });
+};
+
+/**
+ *
+ * @param {string} indicatorUrl
+ * @param {import("@/utils/eodashSTAC").EodashCollection[]} eodashCols
+ * @param {string} updatedTime
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ *  } selectedIndicator
+ */
+const createLayersConfig = async (
+  indicatorUrl,
+  eodashCols,
+  updatedTime,
+  selectedIndicator,
+) => {
+  const layersCollection = [];
+  const dataLayers = {
+    type: "Group",
+    properties: {
+      id: "AnalysisGroup",
+      title: "Analysis Layers",
+      layerControlExpand: true,
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  for (const ec of eodashCols) {
+    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(indicatorUrl);
+  const indicatorLayers = await indicator.buildJsonArray(
+    //@ts-expect-error we use this function to generate collection level visualization
+    selectedIndicator,
+    indicatorUrl,
+    selectedIndicator?.title ?? "",
+    selectedIndicator?.endpointtype === "GeoDB",
+  );
+
+  const baseLayers = {
+    type: "Group",
+    properties: {
+      id: "BaseLayersGroup",
+      title: "Base Layers",
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  const indicatorBaseLayers = indicatorLayers.filter(
+    (l) => l.properties.group === "baselayer",
+  );
+  // Only one baselayer can be set to visible, let's first set all to
+  // false that have not a dedicated property visible, then check
+  // if there are more then one visible and only allow one
+  let counter = 0;
+  let lastPos = 0;
+  indicatorBaseLayers.forEach((bl, indx) => {
+    if (!("visible" in bl.properties)) {
+      bl.properties.visible = false;
+    }
+    if (bl.properties.visible) {
+      counter++;
+      lastPos = indx;
+    }
+  });
+  // if none visible set the last one as visible
+  if (counter == 0 && indicatorBaseLayers.length > 0) {
+    indicatorBaseLayers[0].properties.visible = true;
+  }
+  // disable all apart from last
+  if (counter > 1) {
+    indicatorBaseLayers.forEach((bl, indx) => {
+      if (indx !== lastPos) {
+        bl.properties.visible = false;
+      }
+    });
+  }
+
+  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;
+};
+
+/**
+ * Description placeholder
+ *
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} mapElement
+ * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
+ * @param {EodashCollection[]} eodashCols
+ * @param {import("vue").Ref<string>} indicatorUrl
+ * @param {import("vue").Ref<string>} datetime
+ */
+export const useInitMap = (
+  mapElement,
+  selectedIndicator,
+  eodashCols,
+  indicatorUrl,
+  datetime,
+) => {
+  onMounted(() => {
+    watch(
+      [selectedIndicator, datetime],
+      async ([updatedStac, updatedTime], [previousSTAC, _previousTime]) => {
+        if (updatedStac) {
+          const layersCollection = await createLayersConfig(
+            indicatorUrl.value,
+            eodashCols,
+            updatedTime,
+            updatedStac,
+          );
+          /** @type {any} */
+          (mapElement.value).layers = layersCollection;
+
+          // only on different indicator selection and not on time change
+          if (previousSTAC?.id !== updatedStac.id) {
+            // Set projection based on indicator level information
+            setMapProjFromCol(
+              /** @type {import('stac-ts').StacCollection} */
+              (updatedStac),
+            );
+            // Try to move map view to extent
+            // 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
+            // // @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,
+              b[2] < 180 ? b[2] : 180,
+              b[3] < 90 ? b[3] : 90,
+            ];
+            const reprojExtent = mapElement.value?.transformExtent(
+              sanitizedExtent,
+              "EPSG:4326",
+              mapElement.value?.map?.getView().getProjection(),
+            );
+            /** @type {any} */
+            (mapElement.value).zoomExtent = reprojExtent;
+          }
+        }
+      },
+      { immediate: true },
+    );
+  });
+};

package/core/client/composables/index.js

@@ -114,7 +114,7 @@ export const useURLSearchParametersSync = () => {
         y,
         /** @type {number | undefined} */
         z;
-      searchParams.forEach(async (value, key) => {
+      for (const [key, value] of searchParams) {
         switch (key) {
           case "indicator": {
             const { loadSelectedSTAC, stac } = useSTAcStore();
@@ -143,7 +143,7 @@ export const useURLSearchParametersSync = () => {
           default:
             break;
         }
-      });
+      }
 
       if (x && y && z) {
         mapPosition.value = [x, y, z];

package/core/client/eodash.js

@@ -9,8 +9,7 @@ import { currentUrl } from "./store/States";
  */
 export const eodash = reactive({
   id: "demo",
-  stacEndpoint:
-    "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  stacEndpoint: "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",

package/core/client/store/Actions.js

@@ -1,4 +1,5 @@
-import { mapEl, registeredProjections } from "@/store/States";
+import { mapEl, mapCompareEl, registeredProjections } from "@/store/States";
+import { getProjectionCode } from "@/utils/helpers";
 
 /**
  * Returns the current layers of {@link mapEl}
@@ -8,31 +9,50 @@ export const getLayers = () => mapEl.value?.layers.toReversed();
 
 /**
  * Register EPSG projection in `eox-map`
- * @param {string|number} [code]*/
-export const registerProjection = async (code) => {
-  code = typeof code === "number" ? `EPSG:${code}` : code;
+ * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/
+export const registerProjection = async (projection) => {
+  let code = getProjectionCode(projection);
   if (!code || registeredProjections.includes(code)) {
     return;
   }
 
   registeredProjections.push(code);
-  await mapEl.value?.registerProjectionFromCode(code);
+  if (typeof projection === "object") {
+    // registering whole projection definition
+    await mapEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+  } else {
+    await mapEl.value?.registerProjectionFromCode(code);
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjectionFromCode(code);
+  }
 };
 /**
- * Change `eox-map` projection from an `EPSG` code
- *  @param {string|number} [code]*/
-export const changeMapProjection = async (code) => {
-  code = typeof code === "number" ? `EPSG:${code}` : code;
+ * Change `eox-map` projection from an `EPSG` projection
+ *  @param {string|number|{name: string, def: string}} [projection]*/
+export const changeMapProjection = async (projection) => {
+  let code = getProjectionCode(projection);
 
   if (!code) {
     mapEl.value?.setAttribute("projection", "EPSG:3857");
+    mapCompareEl.value?.setAttribute("projection", "EPSG:3857");
     return;
   }
 
   if (!registeredProjections.includes(code)) {
-    await registerProjection(code);
+    await registerProjection(projection);
   }
 
   code = mapEl.value?.getAttribute("projection") === code ? "EPSG:3857" : code;
   mapEl.value?.setAttribute("projection", code);
+  mapCompareEl.value?.setAttribute("projection", code);
 };

package/core/client/store/States.js

@@ -22,7 +22,10 @@ export const mapPosition = ref([]);
 export const registeredProjections = ["EPSG:4326", "EPSG:3857"];
 
 /** available projection to be rendered by `EodashMap` */
-export const availableMapProjection = ref("");
+export const availableMapProjection = ref("EPSG:3857");
 
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 export const mapEl = ref(null);
+
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+export const mapCompareEl = ref(null);

package/core/client/store/stac.js

@@ -4,6 +4,9 @@ import axios from "axios";
 import { useAbsoluteUrl, useCompareAbsoluteUrl } from "@/composables/index";
 import { eodashKey } from "@/utils/keys";
 import { indicator } from "@/store/States";
+import { extractCollectionUrls } from "@/utils/helpers";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { EodashCollection } from "@/utils/eodashSTAC";
 
 export const useSTAcStore = defineStore("stac", () => {
   /**
@@ -80,7 +83,26 @@ export const useSTAcStore = defineStore("stac", () => {
 
     await axios
       .get(absoluteUrl.value)
-      .then((resp) => {
+      .then(async (resp) => {
+        // init eodash collections
+        const collectionUrls = extractCollectionUrls(
+          resp.data,
+          absoluteUrl.value,
+        );
+
+        await Promise.all(
+          collectionUrls.map((cu) => {
+            const ec = new EodashCollection(cu);
+            ec.fetchCollection();
+            return ec;
+          }),
+        ).then((collections) => {
+          // empty array from old collections
+          eodashCollections.length = 0;
+          // update eodashCollections
+          eodashCollections.push(...collections);
+        });
+
         selectedStac.value = resp.data;
         indicator.value = selectedStac.value?.id ?? "";
       })
@@ -102,7 +124,26 @@ export const useSTAcStore = defineStore("stac", () => {
 
     await axios
       .get(absoluteUrl.value)
-      .then((resp) => {
+      .then(async (resp) => {
+        // init eodash collections
+        const collectionUrls = extractCollectionUrls(
+          resp.data,
+          absoluteUrl.value,
+        );
+
+        await Promise.all(
+          collectionUrls.map((cu) => {
+            const ec = new EodashCollection(cu);
+            ec.fetchCollection();
+            return ec;
+          }),
+        ).then((collections) => {
+          // empty array from old collections
+          eodashCompareCollections.length = 0;
+          // update eodashCompareCollections
+          eodashCompareCollections.push(...collections);
+        });
+
         selectedCompareStac.value = resp.data;
       })
       .catch((err) => {
@@ -110,11 +151,20 @@ export const useSTAcStore = defineStore("stac", () => {
       });
   }
 
+  /**
+   * Reset selected compare stac object
+   *
+   */
+  async function resetSelectedCompareSTAC() {
+    selectedCompareStac.value = null;
+  }
+
   return {
     stac,
     loadSTAC,
     loadSelectedSTAC,
     loadSelectedCompareSTAC,
+    resetSelectedCompareSTAC,
     selectedStac,
     selectedCompareStac,
   };

package/core/client/types.d.ts

@@ -260,10 +260,14 @@ export interface EodashStore {
     /**
      * Register EPSG projection in `eox-map` and adds it to {@link EodashStore.states.availableMapProjection `availableMapProjection`` }
      * */
-    registerProjection: (code?: number | string) => Promise<void>;
+    registerProjection: (
+      code?: number | string | { name: string; def: string },
+    ) => Promise<void>;
 
     /** Change `eox-map` projection from an `EPSG` code */
-    changeMapProjection: (code?: number | string) => Promise<void>;
+    changeMapProjection: (
+      code?: number | string | { name: string; def: string },
+    ) => Promise<void>;
   };
 
   /** Pinia store definition used to navigate the root STAC catalog. */