@eodash/eodash 5.0.0-alpha.2.17 → 5.0.0-alpha.2.19

package/core/client/App.vue

@@ -15,6 +15,8 @@ import Dashboard from "@/views/Dashboard.vue";
 import ErrorAlert from "./components/ErrorAlert.vue";
 import { onErrorCaptured, ref } from "vue";
 
+// window.setEodashLoglevel("DEBUG")
+
 const error = ref("");
 onErrorCaptured((e, inst, info) => {
   error.value = `

package/core/client/composables/EodashMap.js

@@ -2,6 +2,15 @@ import { EodashCollection } from "@/utils/eodashSTAC";
 import { setMapProjFromCol } from "@/utils/helpers";
 import { onMounted, onUnmounted, watch } from "vue";
 import log from "loglevel";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+
+/**
+ * Holder for previous compare map view as it is overwritten by sync
+ * @type { {map:import("ol").View } | null} mapElement
+ */
+let viewHolder = null;
+
 /**
  * Description placeholder
  *
@@ -38,64 +47,27 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
 };
 
 /**
- *  Adds data layers extracted from eodash collections to Analysis Group
- *
- * @param { Record<string,any>[] | undefined} layersCollection
+ * Creates full layer configuration from indicator and time information
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * } selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {string} [updatedTime]
  */
-const updateLayersConfig = async (
-  layersCollection,
+
+const createLayersConfig = async (
+  selectedIndicator,
   eodashCols,
   updatedTime,
 ) => {
   log.debug(
-    "Updating layer configuration",
-    layersCollection,
+    "Creating layers config",
+    selectedIndicator,
     eodashCols,
     updatedTime,
   );
-  /** @type {Record<string,any>[]} */
-  const analysisLayers = [];
-
-  for (const ec of eodashCols) {
-    let layers;
-    if (updatedTime) {
-      layers = await ec.createLayersJson(new Date(updatedTime));
-    } else {
-      layers = await ec.createLayersJson();
-    }
-
-    if (layers) {
-      analysisLayers.push(...layers);
-    }
-  }
-  // Add expand to all analysis layers
-  analysisLayers.forEach((dl) => {
-    dl.properties.layerControlExpand = true;
-    dl.properties.layerControlToolsExpand = true;
-  });
-
-  const dataLayersGroup = layersCollection?.find(
-    (lyr) => lyr?.properties.id === "AnalysisGroup",
-  );
-  if (dataLayersGroup) {
-    dataLayersGroup.layers = analysisLayers;
-  }
-
-  return layersCollection;
-};
-
-/**
- * @param {import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- *  } selectedIndicator
- */
-
-const createLayersConfig = async (selectedIndicator) => {
-  log.debug("Creating layers config", selectedIndicator);
   const layersCollection = [];
   const dataLayers = {
     type: "Group",
@@ -107,6 +79,21 @@ const createLayersConfig = async (selectedIndicator) => {
     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();
+    }
+    // Add expand to all analysis layers
+    layers.forEach((dl) => {
+      dl.properties.layerControlExpand = true;
+      dl.properties.layerControlToolsExpand = true;
+    });
+    dataLayers.layers.push(...layers);
+  }
+
   layersCollection.push(dataLayers);
   const indicatorLayers =
     //@ts-expect-error indicator is collection
@@ -212,12 +199,16 @@ const createLayersConfig = async (selectedIndicator) => {
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {import("vue").Ref<string>} datetime
+ * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} partnerMap
  */
 export const useInitMap = (
   mapElement,
   selectedIndicator,
   eodashCols,
   datetime,
+  mapLayers,
+  partnerMap,
 ) => {
   log.debug(
     "InitMap",
@@ -228,69 +219,117 @@ export const useInitMap = (
   );
 
   const stopIndicatorWatcher = watch(
-    selectedIndicator,
-    async (updatedStac) => {
-      log.debug(
-        "SelectedIndicator watch triggered",
-        selectedIndicator,
-        updatedStac,
-      );
+    [selectedIndicator, datetime],
+    async ([updatedStac, updatedTime], [previousStac, previousTime]) => {
       if (updatedStac) {
-        const layersCollection = await createLayersConfig(updatedStac);
-
-        // updates layersCollection in place
-        await updateLayersConfig(layersCollection, eodashCols, datetime.value);
-
-        // Set projection based on indicator level information
-        setMapProjFromCol(updatedStac);
-
-        // Try to move map view to extent
-        // Sanitize extent,
-        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;
-
-        // TODO: resetting layers to empty array first because smart layer update has issues
         log.debug(
-          "WARN: Map configuration being completely, should be changed once smart update of config is reworked",
+          "Selected Indicator watch triggered",
+          updatedStac,
+          updatedTime,
         );
-        /** @type {any} */
-        (mapElement.value).layers = [];
-        /** @type {any} */
-        (mapElement.value).layers = layersCollection;
-      }
-    },
-    { immediate: true },
-  );
 
-  const stopDatetimeWatcher = watch(
-    datetime,
-    async (updatedTime, previousTime) => {
-      if (updatedTime && updatedTime !== previousTime) {
-        const layersCollection = await updateLayersConfig(
-          [...(mapElement.value?.layers ?? [])],
+        if (mapElement?.value?.id === "main") {
+          // Making sure main map gets the viewer that seems to be
+          // removed when the second map is no longer rendered
+          if (viewHolder !== null) {
+            // Set view to previous compare view
+            mapElement?.value?.map.setView(viewHolder);
+            viewHolder = null;
+          }
+        }
+        let layersCollection = [];
+
+        const onlyTimeChanged =
+          updatedStac?.id === previousStac?.id && updatedTime !== previousTime;
+
+        const { selectedCompareStac } = storeToRefs(useSTAcStore());
+        if (mapElement?.value?.id === "main") {
+          // Main map being initialized
+          // Set projection based on indicator level information for both maps
+          await setMapProjFromCol(updatedStac);
+        } else {
+          // Compare map being initialized
+          if (selectedCompareStac.value !== null) {
+            // save view of compare map
+            viewHolder = mapElement?.value?.map.getView();
+            /** @type {any} */
+            (mapElement.value).sync = partnerMap.value;
+          }
+        }
+
+        // We re-crate the configuration if time changed
+        if (onlyTimeChanged) {
+          layersCollection = await createLayersConfig(
+            updatedStac,
+            eodashCols,
+            updatedTime,
+          );
+          log.debug(
+            "Assigned layers after changing time only",
+            JSON.parse(JSON.stringify(layersCollection)),
+          );
+          mapLayers.value = layersCollection;
+          return;
+        }
+
+        /** @type {Record<string,any>[]} */
+        layersCollection = await createLayersConfig(
+          updatedStac,
           eodashCols,
-          updatedTime,
+          datetime.value,
         );
-        /** @type {any} */
-        (mapElement.value).layers = layersCollection?.reverse();
+
+        // We try to set the current time selection to latest extent date
+        let endInterval = null;
+        const interval = updatedStac?.extent?.temporal?.interval;
+        if (interval && interval.length > 0 && interval[0].length > 1) {
+          // @ts-expect-error this is the defined STAC structure
+          endInterval = new Date(interval[0][1]);
+          log.debug(
+            "Indicator load: found stac extent, setting time to latest value",
+            endInterval,
+          );
+        }
+        if (
+          endInterval !== null &&
+          endInterval.toISOString() !== datetime.value
+        ) {
+          datetime.value = endInterval.toISOString();
+        }
+
+        // Try to move map view to extent only when main
+        // indicator and map changes
+        if (mapElement?.value?.id === "main") {
+          // Sanitize extent,
+          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;
+        }
+
+        log.debug(
+          "Assigned layers",
+          JSON.parse(JSON.stringify(layersCollection)),
+        );
+
+        mapLayers.value = layersCollection;
       }
     },
+    { immediate: true },
   );
 
   onUnmounted(() => {
     stopIndicatorWatcher();
-    stopDatetimeWatcher();
   });
 };

package/core/client/eodash.js

@@ -1,9 +1,5 @@
 import { reactive } from "vue";
 import { currentUrl } from "./store/States";
-import log from "loglevel";
-
-/* set log level */
-log.setLevel("debug", true);
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app, and used as an
@@ -13,9 +9,9 @@ log.setLevel("debug", true);
  */
 export const eodash = reactive({
   id: "demo",
-  stacEndpoint: "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
-  // stacEndpoint: "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
-  //stacEndpoint: "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
+  stacEndpoint:
+    // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+    "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -50,7 +46,7 @@ export const eodash = reactive({
       widget: {
         name: "EodashMap",
         properties: {
-          // enableCompare: true,
+          enableCompare: true,
         },
       },
     },
@@ -59,11 +55,11 @@ export const eodash = reactive({
         id: Symbol(),
         type: "internal",
         title: "Indicators",
-        layout: { x: 0, y: 0, w: 3, h: 8 },
+        layout: { x: 0, y: 0, w: 3, h: 6 },
         widget: {
           name: "EodashItemFilter",
           properties: {
-            // enableCompare: true,
+            enableCompare: true,
             aggregateResults: "collection_group",
           },
         },
@@ -72,18 +68,38 @@ export const eodash = reactive({
         id: Symbol(),
         type: "internal",
         title: "Layer Control",
-        layout: { x: 0, y: 8, w: 3, h: 4 },
+        layout: { x: 0, y: 6, w: 3, h: 6 },
         widget: {
           name: "EodashLayerControl",
         },
       },
+      /*
+      {
+        defineWidget: (selectedCompareStac) => {
+          return selectedCompareStac
+            ? {
+                id: Symbol(),
+                title: "Layer Control Comparison",
+                layout: { x: 9, y: 6, w: 3, h: 6 },
+                type: "internal",
+                widget: {
+                  name: "EodashLayerControl",
+                  properties: {
+                    map: "second",
+                  },
+                },
+              }
+            : null;
+        },
+      },
+      */
       {
         defineWidget: (selectedSTAC) => {
           return selectedSTAC
             ? {
                 id: "Information",
                 title: "Information",
-                layout: { x: 9, y: 0, w: 3, h: 12 },
+                layout: { x: 9, y: 0, w: 3, h: 6 },
                 type: "web-component",
                 widget: {
                   link: async () => await import("@eox/stacinfo"),
@@ -128,6 +144,10 @@ export const eodash = reactive({
                 title: "Datepicker",
                 widget: {
                   name: "EodashDatePicker",
+                  properties: {
+                    hintText: `<b>Hint:</b> closest available date is displayed <br />
+                      on map (see Analysis Layers)`,
+                  },
                 },
               }
             : null;

package/core/client/plugins/index.js

@@ -4,13 +4,14 @@ import eodash from "@/eodash";
 import VCalendar from "v-calendar";
 import { eodashKey } from "@/utils/keys";
 import store from "../store";
+import log from "loglevel";
 
 export const pinia = createPinia();
 
 /** @param {import("vue").App} app */
 export function registerPlugins(app) {
   window.eodashStore = store;
-
+  window.setEodashLoglevel = log.setLevel;
   app
     .use(vuetify)
     .use(pinia)

package/core/client/store/Actions.js

@@ -8,6 +8,12 @@ import log from "loglevel";
  */
 export const getLayers = () => mapEl.value?.layers.toReversed();
 
+/**
+ * Returns the current layers of {@link mapCompareEl}
+ * @returns {Record<string,any>[]}
+ */
+export const getCompareLayers = () => mapCompareEl.value?.layers.toReversed();
+
 /**
  * Register EPSG projection in `eox-map`
  * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/

package/core/client/utils/createLayers.js

@@ -1,4 +1,5 @@
 import { registerProjection } from "@/store/Actions";
+import { mapEl } from "@/store/States";
 import {
   extractRoles,
   getProjectionCode,
@@ -72,7 +73,7 @@ export async function createLayersFromAssets(
 
   if (geoTIFFSources.length && typeof geoTIFFIdx === "number") {
     const geotiffSourceID = collectionId + ";:;GeoTIFF";
-    log.debug("Creating Vector layer from GeoJSON", geotiffSourceID);
+    log.debug("Creating WebGLTile layer from GeoTIFF", geotiffSourceID);
     log.debug("Configured Sources", geoTIFFSources);
     const layer = {
       type: "WebGLTile",
@@ -100,12 +101,14 @@ export async function createLayersFromAssets(
  * @param {import('stac-ts').StacItem} item
  * @param {string} title
  * @param {Record<string,any>} [layerDatetime]
+ * @param {string | null} [legendInfo]
  */
 export const createLayersFromLinks = async (
   collectionId,
   title,
   item,
   layerDatetime,
+  legendInfo,
 ) => {
   log.debug("Creating layers from links");
   /** @type {Record<string,any>[]} */
@@ -114,6 +117,10 @@ export const createLayersFromLinks = async (
   const wmtsArray = item.links.filter((l) => l.rel === "wmts");
   const xyzArray = item.links.filter((l) => l.rel === "xyz") ?? [];
 
+  // Taking projection code from main map view, as main view defines
+  // projection for comparison map
+  const viewProjectionCode = mapEl?.value?.projection || "EPSG:3857";
+
   for (const wmsLink of wmsArray ?? []) {
     // Registering setting sub wms link projection
 
@@ -122,12 +129,16 @@ export const createLayersFromLinks = async (
       (wmsLink?.["proj:epsg"] || wmsLink?.["eodash:proj4_def"]);
 
     await registerProjection(wmsLinkProjection);
-    const projectionCode = getProjectionCode(wmsLinkProjection || "EPSG:4326");
+
+    const linkProjectionCode =
+      getProjectionCode(wmsLinkProjection) || "EPSG:4326";
+    // Projection code need to be based on map view projection to make sure
+    // tiles are reloaded when changing projection
     const linkId = createLayerID(
       collectionId,
       item.id,
       wmsLink,
-      projectionCode,
+      viewProjectionCode,
     );
     log.debug("WMS Layer added", linkId);
     let json = {
@@ -140,7 +151,7 @@ export const createLayersFromLinks = async (
       source: {
         type: "TileWMS",
         url: wmsLink.href,
-        projection: projectionCode,
+        projection: linkProjectionCode,
         tileGrid: {
           tileSize: [512, 512],
         },
@@ -155,6 +166,10 @@ export const createLayersFromLinks = async (
       // Expand all dimensions into the params attribute
       Object.assign(json.source.params, wmsLink["wms:dimensions"]);
     }
+    if (legendInfo !== null) {
+      // @ts-expect-error once we have a eox-map config type we can remove this
+      json.properties.description = legendInfo;
+    }
     jsonArray.push(json);
   }
 
@@ -175,8 +190,14 @@ export const createLayersFromLinks = async (
       collectionId,
       item.id,
       wmtsLink,
-      projectionCode,
+      viewProjectionCode,
+    );
+    const dimensions = /** @type { {style:any} & Record<string,any> } */ (
+      wmtsLink["wmts:dimensions"] || {}
     );
+    let { style, ...dimensionsWithoutStyle } = { ...dimensions };
+    let extractedStyle = /** @type { string } */ (style || "default");
+
     if (wmtsLink.title === "wmts capabilities") {
       log.debug(
         "Warning: WMTS Layer from capabilities added, function needs to be updated",
@@ -194,14 +215,14 @@ export const createLayersFromLinks = async (
           // TODO: Hard coding url as the current one set is for capabilities
           url: "https://wmts.marine.copernicus.eu/teroWmts",
           layer: wmtsLink["wmts:layer"],
-          style: wmtsLink.style || "default",
+          style: extractedStyle,
           // TODO: Hard coding matrixSet until we find solution to wmts creation from capabilities
           matrixSet: "EPSG:3857",
           projection: projectionCode,
           tileGrid: {
             tileSize: [128, 128],
           },
-          dimensions: wmtsLink["wmts:dimensions"],
+          dimensions: dimensionsWithoutStyle,
         },
       };
     } else {
@@ -218,15 +239,15 @@ export const createLayersFromLinks = async (
         },
         source: {
           type: "WMTS",
-          url: wmtsLink,
+          url: wmtsLink.href,
           layer: wmtsLink["wmts:layer"],
-          style: wmtsLink.style || "default",
+          style: extractedStyle,
           matrixSet: wmtsLink.matrixSet || "EPSG:3857",
           projection: projectionCode,
           tileGrid: {
             tileSize: [512, 512],
           },
-          dimensions: wmtsLink["wmts:dimensions"],
+          dimensions: dimensionsWithoutStyle,
         },
       };
     }
@@ -245,7 +266,7 @@ export const createLayersFromLinks = async (
       collectionId,
       item.id,
       xyzLink,
-      projectionCode,
+      viewProjectionCode,
     );
     log.debug("XYZ Layer added", linkId);
     let json = {

package/core/client/utils/eodashSTAC.js

@@ -9,7 +9,11 @@ import {
   generateFeatures,
   replaceLayer,
 } from "./helpers";
-import { getLayers, registerProjection } from "@/store/Actions";
+import {
+  getLayers,
+  getCompareLayers,
+  registerProjection,
+} from "@/store/Actions";
 import { createLayersFromAssets, createLayersFromLinks } from "./createLayers";
 import axios from "@/plugins/axios";
 import log from "loglevel";
@@ -183,11 +187,20 @@ export class EodashCollection {
       Object.keys(dataAssets).length;
 
     if (isSupported) {
+      // Checking for potential legend asset
+      let legendInfo = null;
+      if (this.#collectionStac?.assets?.legend?.href) {
+        legendInfo = `
+          <div style="text-align:center; width: 100%">
+            <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
+          </div>`;
+      }
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
         item,
         layerDatetime,
+        legendInfo,
       );
       jsonArray.push(
         ...links,
@@ -296,8 +309,9 @@ export class EodashCollection {
    *
    * @param {string} datetime
    * @param {string} layer
+   * @param {string} map
    */
-  async updateLayerJson(datetime, layer) {
+  async updateLayerJson(datetime, layer, map) {
     await this.fetchCollection();
 
     // get the link of the specified date
@@ -318,12 +332,15 @@ export class EodashCollection {
     // create json layers from the item
     const newLayers = await this.createLayersJson(specifiedLink);
 
-    const curentLayers = getLayers();
+    let currentLayers = getLayers();
+    if (map === "second") {
+      currentLayers = getCompareLayers();
+    }
 
-    const oldLayer = findLayer(curentLayers, layer);
+    const oldLayer = findLayer(currentLayers, layer);
 
     const updatedLayers = replaceLayer(
-      curentLayers,
+      currentLayers,
       /** @type {Record<string,any> & { properties:{ id:string; title:string } } } */
       (oldLayer),
       newLayers,