@eodash/eodash 5.6.1 → 5.7.0

package/widgets/EodashLayerControl.vue

@@ -24,7 +24,7 @@
 <script setup>
 import "color-legend-element";
 import "@eox/timecontrol";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
 import { getColFromLayer } from "@/eodashSTAC/helpers";
 import {
@@ -36,6 +36,7 @@ import {
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 import { bandsEditorInterface } from "@/utils/bands-editor";
+import { useEmitLayersUpdate } from "@/composables";
 
 if (!customElements.get("eox-layercontrol")) {
   await import("@eox/layercontrol");
@@ -70,6 +71,7 @@ const config = {
 };
 
 const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+
 const showControls = computed(() => {
   if (props.map === "second") {
     return mapCompareEl.value !== null && selectedCompareStac.value !== null;
@@ -84,9 +86,20 @@ const mapElement = props.map === "second" ? mapCompareEl : mapEl;
 /** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxLayercontrol = ref(null);
 
+// eox-timecontrol re-fires datetime:updated after layer reassignment;
+// dedupe by (collectionId, datetime)
+const processedDatetimes = new Map();
+watch([selectedStac, selectedCompareStac], () => processedDatetimes.clear());
+
 /** @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt */
 const handleDatetimeUpdate = async (evt) => {
   const { layer, datetime } = evt.detail;
+  const collectionId = layer.get("id")?.split(";:;")[0] ?? layer.get("id");
+  if (processedDatetimes.get(collectionId) === datetime) return;
+  // First event per collection is eox-timecontrol's mount echo.
+  const isFirstEvent = !processedDatetimes.has(collectionId);
+  processedDatetimes.set(collectionId, datetime);
+  if (isFirstEvent) return;
 
   const ec = await getColFromLayer(eodashCols, layer);
 
@@ -97,9 +110,10 @@ const handleDatetimeUpdate = async (evt) => {
     updatedLayers = await ec.updateLayerJson(
       datetime,
       layer.get("id"),
-      props.map,
+      mapElement.value?.layers ?? [],
     );
   }
+  if (!updatedLayers?.length) return;
   /** @type {Record<String,any>[] | undefined} */
   const dataLayers = updatedLayers?.find(
     (l) => l?.properties?.id === "AnalysisGroup",
@@ -111,9 +125,14 @@ const handleDatetimeUpdate = async (evt) => {
       dl.properties.layerControlExpand = true;
       dl.properties.layerControlToolsExpand = true;
     });
-    // assign layers to the map
     /** @type {HTMLElement & Record<string,any>} */
     (mapElement.value).layers = updatedLayers;
+    // Emit after layer assignment so listeners resolve against the new layer.
+    await useEmitLayersUpdate(
+      props.map === "second" ? "compareLayertime:updated" : "layertime:updated",
+      mapElement.value,
+      updatedLayers,
+    );
   }
 };
 

package/widgets/EodashMap/EodashMapBtns.vue

@@ -80,6 +80,28 @@
         {{ isGlobe ? "switch to 2D" : "switch to 3D" }}
       </div>
     </button>
+    <button
+      v-if="enableFeedback && eodash?.brand?.feedback"
+      class="primary small circle small-elevate"
+      @click="showFeedback = !showFeedback"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24">
+          <path :d="mdiMessageQuestion" />
+        </svg>
+      </i>
+      <div class="tooltip left">Provide Feedback</div>
+    </button>
+    <div
+      v-if="showFeedback && enableFeedback && eodash?.brand?.feedback"
+      class="feedback-container small-elevate"
+    >
+      <eox-feedback
+        :endpoint="eodash?.brand?.feedback?.endpoint"
+        .schema="eodash?.brand?.feedback?.schema"
+        @close="showFeedback = false"
+      ></eox-feedback>
+    </div>
     <eox-geosearch
       v-if="mapEl && !isGlobe && enableSearch"
       :for="mapEl"
@@ -110,7 +132,7 @@
   </div>
 </template>
 <script setup>
-import { useTransparentPanel } from "@/composables";
+import { useTransparentPanel, useEodash } from "@/composables";
 import { changeMapProjection } from "@/store/actions";
 import {
   activeTemplate,
@@ -129,6 +151,7 @@ import {
   mdiPlus,
   mdiStarFourPointsCircleOutline,
   mdiEarth,
+  mdiMessageQuestion,
 } from "@mdi/js";
 import ExportState from "^/ExportState.vue";
 import { computed, ref } from "vue";
@@ -146,6 +169,12 @@ import {
 } from "./methods/btns";
 import "@eox/geosearch";
 
+if (!customElements.get("eox-feedback")) {
+  //@ts-expect-error will be fixed in https://github.com/EOX-A/EOxElements/pull/2238
+  await import("@eox/feedback");
+}
+const eodash = useEodash();
+
 const {
   compareIndicators,
   changeProjection,
@@ -155,6 +184,7 @@ const {
   enableZoom,
   searchParams,
   enableGlobe,
+  enableFeedback,
 } = defineProps({
   exportMap: {
     type: Boolean,
@@ -193,6 +223,10 @@ const {
     type: Boolean,
     default: true,
   },
+  enableFeedback: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const { smAndDown } = useDisplay();
@@ -200,6 +234,7 @@ const popupWidth = computed(() => (smAndDown.value ? "80%" : "70%"));
 const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
 
 const showMapState = ref(false);
+const showFeedback = ref(false);
 const isInCompareMode = computed(
   () =>
     activeTemplate.value ===
@@ -246,6 +281,16 @@ const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencage
   margin-bottom: 5px;
   background-color: var(--primary);
 }
+
+.feedback-container {
+  position: absolute;
+  right: 70px;
+  pointer-events: auto;
+  z-index: 20;
+  border-radius: 8px;
+  min-width: 300px;
+}
+
 /* Make sure buttons have pointer event */
 .geosearch-detached {
   pointer-events: auto !important;

package/widgets/EodashMap/index.vue

@@ -61,6 +61,7 @@
         :enableZoom="(indicator || compareIndicator || poi) ? btnsProps.enableZoom : false
         "
         :enableGlobe="(indicator || compareIndicator || poi) ? btnsProps.enableGlobe : false"
+        :enableFeedback="(indicator || compareIndicator || poi) ? btnsProps.enableFeedback : false"
         :searchParams="btnsProps.searchParams"
       />
     </div>
@@ -69,7 +70,7 @@
 <script setup>
 import "@eox/map";
 import "@eox/map/src/plugins/advancedLayersAndSources";
-import { computed, onMounted, ref, toRaw, useTemplateRef } from "vue";
+import { nextTick, computed, onMounted, ref, toRaw, useTemplateRef } from "vue";
 import {
   datetime,
   mapEl,
@@ -142,6 +143,7 @@ const props = defineProps({
      * searchParams?: object;
      * enableZoom?: boolean;
      * enableGlobe?: boolean;
+     * enableFeedback?: boolean;
      * enableCompareIndicators?: boolean | {
      *   compareTemplate?:string;
      *   fallbackTemplate?:string;
@@ -157,6 +159,7 @@ const props = defineProps({
       enableSearch: true,
       enableZoom: true,
       enableGlobe: true,
+      enableFeedback: true,
       searchParams: {},
     }),
   },
@@ -200,6 +203,7 @@ const btnsProps = computed(() => ({
   enableSearch: props.btns.enableSearch ?? true,
   enableZoom: props.btns.enableZoom ?? true,
   enableGlobe: props.btns.enableGlobe ?? true,
+  enableFeedback: props.btns.enableFeedback ?? true,
   searchParams: props.btns.searchParams,
 }));
 
@@ -241,7 +245,11 @@ const controls = computed(() => {
     controlsObj.MousePosition = {
       projection: "EPSG:4326",
       coordinateFormat: (/** @type {[number, number]} */ c) => {
-        return `${c[1].toFixed(3)} °N, ${c[0].toFixed(3)} °E`;
+        const lat = c[1];
+        const lng = c[0];
+        const latStr = `${Math.abs(lat).toFixed(3)}°${lat >= 0 ? "N" : "S"}`;
+        const lngStr = `${Math.abs(lng).toFixed(3)}°${lng >= 0 ? "E" : "W"}`;
+        return `${latStr}, ${lngStr}`;
       },
       target: cursorCoordsRef.value,
     };
@@ -276,10 +284,10 @@ const eoxMapCompareLayers = ref([
   },
 ]);
 
-const animationOptions = {
-  duration: 1200,
+const animationOptions = ref({
+  duration: 0, // Initially set to 0 for an instant "jump"
   easing: inAndOut,
-};
+});
 
 /** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
 const eoxMap = ref(null);
@@ -330,6 +338,10 @@ onMounted(() => {
     props.zoomToExtent,
     selectedItem,
   );
+  // After the initial mount and "jump", set the animation duration for subsequent flyTo calls
+  nextTick(() => {
+    animationOptions.value.duration = 1200;
+  });
 });
 
 useUpdateTooltipProperties(eodashCollections, tooltipProperties);

package/widgets/EodashMap/methods/create-layers-config.js

@@ -10,6 +10,7 @@ import log from "loglevel";
  * } selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {string | import("stac-ts").StacItem | null} [timeOrItem] - time as a string, or a stac item
+ * @returns {Promise<Record<string, any>[]>}
  */
 
 export const createLayersConfig = async (
@@ -68,6 +69,7 @@ export const createLayersConfig = async (
         if (targetLayer) {
           if (Array.isArray(vl.roles) && vl.roles.includes("disable")) {
             targetLayer.properties.visible = false;
+            targetLayer.properties.layerControlExpand = false;
           } else if (Array.isArray(vl.roles) && vl.roles.includes("hidden")) {
             targetLayer.properties.layerControlHide = true;
           }

package/widgets/EodashMap/methods/index.js

@@ -83,6 +83,10 @@ export const useInitMap = (
   const watching = selectedItem
     ? [selectedIndicator, datetime, selectedItem]
     : [selectedIndicator, datetime];
+  // Tags datetime values we set ourselves so the watcher skips its own echo.
+  /** @type {string | null} */
+  let internalDatetime = null;
+
   const stopIndicatorWatcher = watch(
     watching,
     async (updated, previous) => {
@@ -96,6 +100,16 @@ export const useInitMap = (
         );
 
       if (updatedStac) {
+        if (
+          internalDatetime !== null &&
+          updatedTime === internalDatetime &&
+          updatedStac?.id === previousStac?.id &&
+          updatedItem?.id === previousItem?.id
+        ) {
+          internalDatetime = null;
+          return;
+        }
+
         log.debug(
           "Selected Indicator watch triggered",
           updatedStac,
@@ -145,7 +159,6 @@ export const useInitMap = (
             JSON.parse(JSON.stringify(layersCollection)),
           );
           mapLayers.value = layersCollection;
-
           useEmitLayersUpdate(
             mapElement.value?.id === "compare"
               ? "compareTime:updated"
@@ -167,22 +180,27 @@ export const useInitMap = (
             endInterval,
           );
         }
+        let resolvedTime = updatedItem ?? updatedTime;
         if (
           !updatedItem &&
           endInterval !== null &&
           endInterval.toISOString() !== datetime.value &&
           !isFirstLoad.value
         ) {
-          datetime.value = endInterval.toISOString();
+          resolvedTime = endInterval.toISOString();
+          internalDatetime = resolvedTime;
+          datetime.value = resolvedTime;
         } else if (isFirstLoad.value && !datetime.value && endInterval) {
-          datetime.value = endInterval.toISOString();
+          resolvedTime = endInterval.toISOString();
+          internalDatetime = resolvedTime;
+          datetime.value = resolvedTime;
         }
 
         /** @type {Record<string,any>[]} */
         layersCollection = await createLayersConfig(
           updatedStac,
           eodashCols,
-          updatedItem ?? updatedTime,
+          resolvedTime,
         );
 
         if (zoomToExtent) {
@@ -251,7 +269,7 @@ export const useUpdateTooltipProperties = (
    * @param {string} evt */
   const listenTo = (evt) =>
     enableCompare ? evt.includes("compare") : !evt.includes("compare");
-  useOnLayersUpdate(async (evt, _payload) => {
+  useOnLayersUpdate(async (evt) => {
     if (!listenTo(evt)) {
       return;
     }

package/widgets/EodashProcess/index.vue

@@ -119,7 +119,7 @@ const jsonformKey = computed(
 
 useInitProcess({
   selectedStac: currentSelectedStac,
-  mapElement: mapElement.value,
+  mapElement,
   jsonformSchema,
   isProcessed,
   processResults,

package/widgets/EodashProcess/methods/async.js

@@ -106,16 +106,27 @@ export async function updateJobsStatus(jobs, indicator) {
     jobsUrls.map((url) =>
       axios
         .get(url, { params: { t: Date.now() } })
-        .then((response) => response.data),
+        .then((response) => response.data)
+        .catch((error) => {
+          if (axios.isAxiosError(error)) {
+            console.warn(
+              `Job URL not accessible: ${url}. Maybe was deleted from the processing endpoint or endpoint is unavailable. Skipping...`,
+            );
+            return null;
+          }
+          throw error;
+        }),
     ),
   );
-  jobResults.sort((a, b) => {
-    return (
-      new Date(b.job_start_datetime).getTime() -
-      new Date(a.job_start_datetime).getTime()
-    );
-  });
-  jobs.value.splice(0, jobs.value.length, ...jobResults);
+  const validResults = jobResults
+    .filter((job) => job !== null)
+    .sort((a, b) => {
+      return (
+        new Date(b.job_start_datetime).getTime() -
+        new Date(a.job_start_datetime).getTime()
+      );
+    });
+  jobs.value.splice(0, jobs.value.length, ...validResults);
 }
 
 /**

package/widgets/EodashProcess/methods/composables.js

@@ -1,8 +1,7 @@
 import { initProcess, updateJsonformIdentifier } from "./handling";
-import { useEventBus } from "@vueuse/core";
-import { nextTick, onMounted, watch } from "vue";
-import { eoxLayersKey } from "@/utils/keys";
+import { nextTick, onMounted, onUnmounted, watch } from "vue";
 import { useOnLayersUpdate } from "@/composables";
+import { getCompareLayers, getLayers } from "@/store/actions";
 /**
  * Composable resposible of timing the Initialization of the process
  *
@@ -15,7 +14,7 @@ import { useOnLayersUpdate } from "@/composables";
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isPolling
- * @param {import("@eox/map").EOxMap | null} params.mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} params.mapElement
  */
 export const useInitProcess = ({
   selectedStac,
@@ -26,60 +25,45 @@ export const useInitProcess = ({
   isPolling,
   mapElement,
 }) => {
-  const layersEvents = useEventBus(eoxLayersKey);
-
   onMounted(async () => {
-    // wait for the layers to be rendered
-    if ((mapElement?.layers.length ?? 0) > 1) {
-      await initProcess({
-        enableCompare: mapElement?.id === "compare",
-        selectedStac,
-        jsonformSchema,
-        isProcessed,
-        processResults,
-        loading,
-        isPolling,
-      });
-    } else {
-      layersEvents.once(async () => {
-        await initProcess({
-          enableCompare: mapElement?.id === "compare",
-          selectedStac,
-          jsonformSchema,
-          isProcessed,
-          loading,
-          processResults,
-          isPolling,
-        });
-      });
-    }
+    await initProcess({
+      enableCompare: mapElement.value?.id === "compare",
+      selectedStac,
+      jsonformSchema,
+      isProcessed,
+      processResults,
+      loading,
+      isPolling,
+      mapElement: mapElement.value,
+    });
   });
-  const enableCompare = mapElement?.id === "compare";
-  const evtKey = enableCompare ? "compareLayers:updated" : "layers:updated";
-  useOnLayersUpdate(async (evt, _payload) => {
-    if (
-      evt == "layertime:updated" ||
-      evt == "compareLayertime:updated" ||
-      evt == "time:updated" ||
-      evt == "compareTime:updated"
-    ) {
-      const shouldMainJsonFormUpdate =
-        ["layertime:updated", "time:updated"].includes(evt) && !enableCompare;
-      const shouldCompareJsonFormUpdate =
-        ["compareLayertime:updated", "compareTime:updated"].includes(evt) &&
-        enableCompare;
-      // we need to update jsonform on time change in cases when the feature selection layer was time-based, so that it attaches to a correct new layer
-      if (shouldMainJsonFormUpdate || shouldCompareJsonFormUpdate) {
-        const newJsonForm = await updateJsonformIdentifier({
-          jsonformSchema: jsonformSchema.value,
-          // @ts-expect-error TODO payload coming from time update events is not an object with layers property
-          newLayers: _payload,
-          enableCompare,
-        });
+
+  useOnLayersUpdate(async (evt) => {
+    const enableCompare = mapElement.value?.id === "compare";
+    const layerUpdatedKey = enableCompare
+      ? "compareLayers:updated"
+      : "layers:updated";
+    const timeUpdatedKeys = enableCompare
+      ? ["compareLayertime:updated", "compareTime:updated"]
+      : ["layertime:updated", "time:updated"];
+
+    if (timeUpdatedKeys.includes(evt)) {
+      // we need to update jsonform on time change in cases
+      // when the feature selection layer was time-based,
+      // so that it attaches to a correct new layer
+      const newJsonForm = await updateJsonformIdentifier({
+        jsonformSchema: jsonformSchema.value,
+        newLayers: enableCompare ? getCompareLayers() : getLayers(),
+        enableCompare,
+        mapElement: mapElement.value,
+      });
+
+      if (newJsonForm) {
         jsonformSchema.value = newJsonForm;
       }
     }
-    if (evt !== evtKey) {
+
+    if (evt !== layerUpdatedKey) {
       return;
     }
     await initProcess({
@@ -90,6 +74,7 @@ export const useInitProcess = ({
       processResults,
       loading,
       isPolling,
+      mapElement: mapElement.value,
     });
   });
 };
@@ -109,38 +94,39 @@ export function useAutoExec(
   startProcess,
 ) {
   /**
-   * @param {CustomEvent} _e
+   * @param {any} _e
    **/
   const onJsonFormChange = async (_e) => {
     await startProcess();
   };
 
-  const addEventListener = async () => {
-    await nextTick(() => {
-      //@ts-expect-error TODO
-      jsonformEl.value?.addEventListener("change", onJsonFormChange);
-    });
-  };
-  const removeEventListener = () => {
-    //@ts-expect-error TODO
-    jsonformEl.value?.removeEventListener("change", onJsonFormChange);
-  };
-
   watch(jsonformSchema, (updatedSchema) => {
     autoExec.value = updatedSchema?.options?.["execute"] || false;
   });
 
-  onMounted(() => {
-    watch(
-      autoExec,
-      async (exec) => {
-        if (exec) {
-          await addEventListener();
-        } else {
-          removeEventListener();
-        }
-      },
-      { immediate: true },
-    );
+  // Re-attach listener whenever the element or autoExec changes
+  const stop = watch(
+    [autoExec, jsonformEl],
+    async ([exec, el], [_prevExec, prevEl]) => {
+      // Cleanup if previous element existed
+      if (prevEl) {
+        prevEl.removeEventListener("change", onJsonFormChange);
+      }
+      // Add if enabled and we have an element
+      if (exec && el) {
+        // remove listener before adding to avoid duplicates in case of element change
+        el.removeEventListener("change", onJsonFormChange);
+        await nextTick();
+        el.addEventListener("change", onJsonFormChange);
+      }
+    },
+    { immediate: true },
+  );
+
+  onUnmounted(() => {
+    if (jsonformEl.value) {
+      jsonformEl.value.removeEventListener("change", onJsonFormChange);
+    }
+    stop();
   });
 }

package/widgets/EodashProcess/methods/custom-endpoints/chart/sentinelhub-endpoint.js

@@ -58,7 +58,7 @@ export async function handleSentinelHubProcess({
   );
 
   // fetch data from sentinel hub
-  return await Promise.all(
+  const results = await Promise.all(
     timePairs.map(([to, from]) => {
       return fetchSentinelHubData({
         url: endpoint,
@@ -67,14 +67,18 @@ export async function handleSentinelHubProcess({
         from,
         to,
         exampleLink: evalScriptLink,
-      }).catch((err) =>
+      }).catch((err) => {
         console.error(
           "[eodash] Error while fetching data from sentinel hub endpoint:",
           err,
-        ),
-      );
+        );
+        return [];
+      });
     }),
-  ).then((data) => data.flat().map((data) => data.outputs.data));
+  )
+    .then((data) => data.filter((result) => result.length > 0))
+    .then((data) => data.flat().map((data) => data.outputs.data));
+  return results;
 }
 
 /**

package/widgets/EodashProcess/methods/custom-endpoints/chart/veda-endpoint.js

@@ -37,7 +37,7 @@ export async function handleVedaEndpoint({
     vedaLink,
   );
   // TODO: convert jsonform bbox type to geojson in the schema to avoid the conversion here
-  return await Promise.all(
+  const results = await Promise.all(
     configs.map(({ endpoint, datetime }) => {
       const url = new URL(vedaEndpoint);
       const key = vedaLink.endpoint === "veda_stac" ? "ids" : "url";
@@ -56,14 +56,17 @@ export async function handleVedaEndpoint({
           fetchedSats.date = datetime;
           return fetchedSats;
         })
-        .catch((resp) =>
+        .catch((resp) => {
           console.error(
             "[eodash] Error while fetching data from veda endpoint:",
             resp,
-          ),
-        );
+          );
+          return null;
+        });
     }),
   );
+  // Filter out the nulls (failed requests) before returning
+  return results.filter((result) => result !== null);
 }
 
 /**