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

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,16 @@ import { EodashCollection } from "@/utils/eodashSTAC";
 import { setMapProjFromCol } from "@/utils/helpers";
 import { onMounted, onUnmounted, watch } from "vue";
 import log from "loglevel";
+import { datetime } from "@/store/States";
+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
  *
@@ -55,9 +65,17 @@ const updateLayersConfig = async (
     eodashCols,
     updatedTime,
   );
+  const dataLayersGroup = layersCollection?.find(
+    (lyr) => lyr?.properties.id === "AnalysisGroup",
+  );
   /** @type {Record<string,any>[]} */
   const analysisLayers = [];
 
+  if (!dataLayersGroup) {
+    log.debug("no AnalysisGroup layer found to be updated");
+    return layersCollection;
+  }
+
   for (const ec of eodashCols) {
     let layers;
     if (updatedTime) {
@@ -76,12 +94,7 @@ const updateLayersConfig = async (
     dl.properties.layerControlToolsExpand = true;
   });
 
-  const dataLayersGroup = layersCollection?.find(
-    (lyr) => lyr?.properties.id === "AnalysisGroup",
-  );
-  if (dataLayersGroup) {
-    dataLayersGroup.layers = analysisLayers;
-  }
+  dataLayersGroup.layers = analysisLayers;
 
   return layersCollection;
 };
@@ -202,6 +215,18 @@ const createLayersConfig = async (selectedIndicator) => {
     layersCollection.unshift(overlayLayers);
   }
 
+  // We try to set the current time selection
+  // to latest extent date
+  // @ts-expect-error it seems the temporal extent is not defined in type
+  const interval = selectedIndicator?.extent?.temporal?.interval;
+  if (interval && interval.length > 0 && interval[0].length > 1) {
+    const endInterval = new Date(interval[0][1]);
+    log.debug(
+      "Datepicker: found stac extent, setting time to latest value",
+      endInterval,
+    );
+    datetime.value = endInterval.toISOString();
+  }
   return layersCollection;
 };
 
@@ -212,12 +237,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,21 +257,62 @@ 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);
+        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) {
+            mapElement?.value?.map.setView(viewHolder);
+            viewHolder = null;
+          }
+        }
+        log.debug(
+          "Selected Indicator watch triggered",
+          updatedStac,
+          updatedTime,
+        );
+        let layersCollection = [];
 
-        // updates layersCollection in place
-        await updateLayersConfig(layersCollection, eodashCols, datetime.value);
+        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 old view to set later
+            viewHolder = mapElement?.value?.map.getView();
+            /** @type {any} */
+            (mapElement.value).sync = partnerMap.value;
+          }
+        }
+
+        if (onlyTimeChanged) {
+          layersCollection =
+            (await updateLayersConfig(
+              [...(mapElement.value?.layers ?? [])].reverse(),
+              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);
 
-        // Set projection based on indicator level information
-        setMapProjFromCol(updatedStac);
+        // updates layersCollection in place
+        await updateLayersConfig(layersCollection, eodashCols, updatedTime);
 
         // Try to move map view to extent
         // Sanitize extent,
@@ -253,6 +323,7 @@ export const useInitMap = (
           b[2] < 180 ? b[2] : 180,
           b[3] < 90 ? b[3] : 90,
         ];
+
         const reprojExtent = mapElement.value?.transformExtent(
           sanitizedExtent,
           "EPSG:4326",
@@ -261,36 +332,18 @@ export const useInitMap = (
         /** @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",
+          "Assigned layers",
+          JSON.parse(JSON.stringify(layersCollection)),
         );
-        /** @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 ?? [])],
-          eodashCols,
-          updatedTime,
-        );
-        /** @type {any} */
-        (mapElement.value).layers = layersCollection?.reverse();
+        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,8 @@ 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",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -59,7 +54,7 @@ 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: {
@@ -72,7 +67,7 @@ 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",
         },
@@ -128,6 +123,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/utils/createLayers.js

@@ -72,7 +72,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 +100,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>[]} */
@@ -155,6 +157,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);
   }
 

package/core/client/utils/eodashSTAC.js

@@ -183,11 +183,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,

package/core/client/utils/helpers.js

@@ -49,8 +49,14 @@ export function extractLayerConfig(style) {
   let layerConfig = undefined;
   if (style?.jsonform) {
     layerConfig = { schema: style.jsonform, type: "style" };
+    style = { ...style };
     delete style.jsonform;
   }
+  log.debug(
+    "extracted layerConfig",
+    JSON.parse(JSON.stringify({ layerConfig, style })),
+  );
+
   return { layerConfig, style };
 }
 
@@ -59,7 +65,7 @@ export function extractLayerConfig(style) {
  * updates {@link availableMapProjection}
  * @param {import('stac-ts').StacCollection} [STAcCollection]
  */
-export const setMapProjFromCol = (STAcCollection) => {
+export const setMapProjFromCol = async (STAcCollection) => {
   // if a projection exists on the collection level
   log.debug("Checking for available map projection in indicator");
   const projection =
@@ -71,25 +77,22 @@ export const setMapProjFromCol = (STAcCollection) => {
     );
   if (projection) {
     log.debug("Projection found", projection);
-    registerProjection(projection);
+    await registerProjection(projection);
     const projectionCode = getProjectionCode(projection);
-    if (
-      availableMapProjection.value &&
-      availableMapProjection.value !== projectionCode
-    ) {
+    if (availableMapProjection.value !== projectionCode) {
       log.debug(
         "Changing map projection",
         availableMapProjection.value,
         projectionCode,
       );
-      changeMapProjection(projection);
+      await changeMapProjection(projection);
     }
     // set it for `EodashMapBtns`
     availableMapProjection.value = /** @type {string} */ (projectionCode);
   } else {
     // reset to default projection
-    log.debug("Resetting projection to default");
-    changeMapProjection((availableMapProjection.value = "EPSG:3857"));
+    log.debug("Resetting projection to default EPSG:3857");
+    await changeMapProjection((availableMapProjection.value = ""));
   }
 };
 
@@ -163,7 +166,9 @@ export const fetchStyle = async (item, itemUrl) => {
 
     /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
     const styleJson = await axios.get(url).then((resp) => resp.data);
-    return styleJson;
+
+    log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
+    return { ...styleJson };
   }
 };
 
@@ -232,7 +237,7 @@ export const extractLayerDatetime = (links, currentStep) => {
   return {
     controlValues,
     currentStep,
-    slider: false,
+    slider: true,
     disablePlay: true,
   };
 };

package/core/client/vite-env.d.ts

@@ -7,6 +7,7 @@ declare module "*.vue" {
 }
 declare interface Window {
   eodashStore: import("@/types").EodashStore;
+  setEodashLoglevel: typeof import("loglevel").setLevel;
 }
 declare module "@eox/stacinfo" {
   export const EOxStacInfo: CustomElementConstructor;

package/dist/client/{DashboardLayout-BR1lU9ER.js → DashboardLayout-Dk6lzKZA.js}

@@ -1,5 +1,5 @@
-import { _ as y, x as m, W as x, X as d, $ as t, a0 as r, a1 as l, a9 as _, a3 as n, a6 as u, a2 as c, a4 as p, d as h, a5 as g, F as f, a7 as v, ab as w } from "./asWebComponent-DhR2_xlP.js";
-import { V as k } from "./VMain-Df5VMG9r.js";
+import { _ as y, x as m, W as x, X as d, $ as t, a0 as r, a1 as l, a9 as _, a3 as n, a6 as u, a2 as c, a4 as p, d as h, a5 as g, F as f, a7 as v, ab as w } from "./asWebComponent-tNU8_fkz.js";
+import { V as k } from "./VMain-DOyRcpub.js";
 class A extends HTMLElement {
   static get observedAttributes() {
     return ["gap"];

package/dist/client/{DynamicWebComponent-7z8VFsrZ.js → DynamicWebComponent-BkMCGU7a.js}

@@ -1,4 +1,4 @@
-import { bL as i, aD as m, r as p, Z as d, aQ as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-DhR2_xlP.js";
+import { bM as i, aD as m, r as p, Z as d, aR as f, $ as c, a6 as g, a0 as y, d as _, a4 as k } from "./asWebComponent-tNU8_fkz.js";
 const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
   __name: "DynamicWebComponent",
   props: {