@eodash/eodash 5.6.0 → 5.7.0

package/widgets/EodashProcess/methods/composables.js

@@ -1,9 +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
  *
@@ -11,17 +9,15 @@ import { useOnLayersUpdate } from "@/composables";
  * @async
  * @param {Object} params
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
- * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema
  * @param {import("vue").Ref<any[]>} params.processResults
  * @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,
-  jsonformEl,
   jsonformSchema,
   isProcessed,
   processResults,
@@ -29,64 +25,56 @@ 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,
-        jsonformEl,
-        jsonformSchema,
-        isProcessed,
-        processResults,
-        loading,
-        isPolling,
-      });
-    } else {
-      layersEvents.once(async () => {
-        await initProcess({
-          enableCompare: mapElement?.id === "compare",
-          selectedStac,
-          jsonformEl,
-          jsonformSchema,
-          isProcessed,
-          loading,
-          processResults,
-          isPolling,
-        });
-      });
-    }
+    await initProcess({
+      enableCompare: mapElement.value?.id === "compare",
+      selectedStac,
+      jsonformSchema,
+      isProcessed,
+      processResults,
+      loading,
+      isPolling,
+      mapElement: mapElement.value,
+    });
   });
 
-  const evtKey =
-    mapElement?.id === "compare" ? "compareLayers:updated" : "layers:updated";
-  useOnLayersUpdate(async (evt, _payload) => {
-    if (
-      evt == "layertime:updated" ||
-      evt == "compareLayertime:updated" ||
-      evt == "time:updated" ||
-      evt == "compareTime:updated"
-    ) {
-      await updateJsonformIdentifier({
+  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,
-        // @ts-expect-error TODO payload coming from time update events is not an object with layers property
-        newLayers: _payload,
+        newLayers: enableCompare ? getCompareLayers() : getLayers(),
+        enableCompare,
+        mapElement: mapElement.value,
       });
+
+      if (newJsonForm) {
+        jsonformSchema.value = newJsonForm;
+      }
     }
-    if (evt !== evtKey) {
+
+    if (evt !== layerUpdatedKey) {
       return;
     }
     await initProcess({
-      enableCompare: mapElement?.id === "compare",
+      enableCompare,
       selectedStac,
-      jsonformEl,
       jsonformSchema,
       isProcessed,
       processResults,
       loading,
       isPolling,
+      mapElement: mapElement.value,
     });
   });
 };
@@ -106,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);
 }
 
 /**

package/widgets/EodashProcess/methods/handling.js

@@ -3,8 +3,7 @@ import {
   applyProcessLayersToMap,
   extractGeometries,
   getBboxProperty,
-  getDrawToolsProperty,
-  updateJsonformSchemaTarget,
+  getDrawToolsProperties,
 } from "./utils";
 import {
   compareIndicator,
@@ -17,13 +16,12 @@ import {
   compareChartData,
   compareChartSpec,
 } from "@/store/states";
-import axios from "@/plugins/axios";
 import { processCharts, processLayers, processSTAC } from "./outputs";
 import { handleLayersCustomEndpoints } from "./custom-endpoints/layers";
 import { handleChartCustomEndpoints } from "./custom-endpoints/chart";
 import { useSTAcStore } from "@/store/stac";
 import { useGetSubCodeId } from "@/composables";
-import { getLayers } from "@/store/actions";
+import { getLayers, getCompareLayers } from "@/store/actions";
 
 /**
  * Fetch and set the jsonform schema to initialize the process
@@ -32,37 +30,58 @@ import { getLayers } from "@/store/actions";
  * @async
  * @param {Object} params
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
- * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema
  * @param {import("vue").Ref<any[]>} params.processResults
  * @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 {boolean} params.enableCompare
  */
 export async function initProcess({
   selectedStac,
-  jsonformEl,
   jsonformSchema,
   isProcessed,
   processResults,
   loading,
   isPolling,
   enableCompare,
+  mapElement,
 }) {
   const isPoiAlive = enableCompare ? !!comparePoi.value : !!poi.value;
   let updatedJsonform = null;
   if (selectedStac.value?.["eodash:jsonform"]) {
-    updatedJsonform = await axios
+    updatedJsonform = await fetch(
       //@ts-expect-error eodash extention
-      .get(selectedStac.value["eodash:jsonform"])
-      .then((resp) => resp.data);
+      selectedStac.value["eodash:jsonform"],
+    ).then((resp) => resp.json());
   }
 
   if (!updatedJsonform && isPoiAlive) {
     jsonformSchema.value = null;
     return;
   }
+
+  if (!updatedJsonform) {
+    resetProcess({
+      loading,
+      isProcessed,
+      jsonformSchema,
+      isPolling,
+      processResults,
+      enableCompare,
+    });
+    return;
+  }
+
+  const newJsonForm = await updateJsonformIdentifier({
+    jsonformSchema: updatedJsonform,
+    newLayers: enableCompare ? getCompareLayers() : getLayers(),
+    enableCompare,
+    mapElement,
+  });
+  if (!newJsonForm) return;
+
   resetProcess({
     loading,
     isProcessed,
@@ -71,89 +90,109 @@ export async function initProcess({
     processResults,
     enableCompare,
   });
+  jsonformSchema.value = newJsonForm;
+}
 
-  await jsonformEl.value?.editor.destroy();
-  if (updatedJsonform) {
-    // make sure correct target layer id is used in jsonform
-    let newJsonForm = null;
-    newJsonForm = await updateJsonformIdentifier({
-      jsonformSchema: updatedJsonform,
-      newLayers: getLayers(),
-    });
-    if (enableCompare) {
-      newJsonForm = updateJsonformSchemaTarget(newJsonForm);
+/**
+ * Recursively search grouped layer tree for a layer whose id starts with the given prefix
+ *
+ * @param {Record<string, any>[]} layers
+ * @param {string} prefix
+ * @returns {string | null}
+ */
+function findLayerIdByPrefix(layers, prefix) {
+  for (const layer of layers) {
+    if (layer.type === "Group" && Array.isArray(layer.layers)) {
+      const found = findLayerIdByPrefix(layer.layers, prefix);
+      if (found) return found;
+    } else if (layer.properties?.id?.startsWith(prefix)) {
+      return layer.properties.id;
     }
-    // trigger jsonform update in next tick
-    jsonformSchema.value = null;
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    jsonformSchema.value = newJsonForm;
   }
+  return null;
 }
 
 /**
- * Update the jsonform schema to have the correct layer id from the map
+ * Wait until a layer's features are loaded for the drawtools to attach correctly
+ * Resolves immediately if already loaded.
+ *
+ * @param {import("@eox/map").AnyLayerWithSource | null | undefined} layer
+ * @returns {Promise<void>}
+ */
+function waitForLayerRender(layer) {
+  return new Promise((resolve, reject) => {
+    if (!layer || layer.get("type") !== "Vector" || !("getSource" in layer))
+      return resolve();
+    const source = /** @type {import("ol/source/Vector").default} */ (
+      layer.getSource()
+    );
+    if (!source || source.getFeatures().length > 0) return resolve();
+    source.once("featuresloadend", () => resolve());
+    source.once("featuresloaderror", () =>
+      reject(new Error(`Layer ${layer.get("id")} failed to load features`)),
+    );
+  });
+}
+
+/**
+ * Update the jsonform schema to have the correct layer id from the map.
+ * Returns null if any required layerId cannot be resolved (layer not yet in map).
+ * Callers should treat null as "retry when layers:updated fires".
  *
  * @export
- * @async
  * @param {Object} params
- * @param {Record<string,any> | null} params.jsonformSchema params.jsonformSchema
- * @param {Record<string, any>[] | undefined} params.newLayers params.newLayers
- * @returns {Promise<Record<string,any> | null | undefined>} updated jsonform schema
+ * @param {Record<string,any> | null} params.jsonformSchema
+ * @param {Record<string, any>[] | undefined} params.newLayers
+ * @param {boolean} params.enableCompare
+ * @param {import("@eox/map").EOxMap | null | undefined} params.mapElement
+ * @returns {Promise<Record<string,any> | null>} updated schema, or null if a layerId could not be resolved
  */
-export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
-  const form = jsonformSchema;
-  if (!form) {
-    return;
-  }
-  const drawToolsProperty = getDrawToolsProperty(form);
-  if (
-    drawToolsProperty &&
-    newLayers &&
-    form?.properties[drawToolsProperty]?.options?.drawtools?.layerId
-  ) {
-    // get partial or full id and try to match with correct eoxmap layer
-    // check if newLayers is an array or an object with layers property
-    let layers = newLayers;
-    // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
-    if (newLayers.layers && Array.isArray(newLayers.layers)) {
-      // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
-      layers = newLayers.layers;
+export async function updateJsonformIdentifier({
+  jsonformSchema,
+  newLayers,
+  enableCompare,
+  mapElement,
+}) {
+  if (!jsonformSchema || !newLayers) return null;
+
+  const form = JSON.parse(JSON.stringify(jsonformSchema));
+  const drawToolsProperties = getDrawToolsProperties(form);
+  /** @type {Promise<void>[]} */
+  const renderPromises = [];
+
+  for (const drawToolsProperty of drawToolsProperties) {
+    if (!drawToolsProperty) continue;
+
+    const drawtoolsOptions =
+      form?.properties[drawToolsProperty]?.options?.drawtools;
+    if (!drawtoolsOptions) continue;
+
+    if (drawtoolsOptions.for && enableCompare) {
+      drawtoolsOptions.for = "eox-map#compare";
     }
 
-    const layerId =
-      form.properties[drawToolsProperty].options.drawtools.layerId.split(
-        ";:;",
-      )[0];
-    let matchedLayerId = null;
-    // layers are not flat can be grouped, we need to recursively search
-    const traverseLayers = (
-      /** @type {Record<string, any>[] | undefined} */ layersArray,
-    ) => {
-      if (!layersArray) {
-        return;
-      }
-      for (const layer of layersArray) {
-        if (layer.type === "Group" && Array.isArray(layer.layers)) {
-          traverseLayers(layer.layers);
-        } else {
-          if (layer.properties?.id?.startsWith(layerId)) {
-            matchedLayerId = layer.properties.id;
-            break;
-          }
+    if (drawtoolsOptions.layerId) {
+      let layer = mapElement?.getLayerById(drawtoolsOptions.layerId);
+      if (!layer) {
+        const prefix = drawtoolsOptions.layerId.split(";:;")[0];
+        const resolvedId = findLayerIdByPrefix(newLayers, prefix);
+        if (!resolvedId) {
+          console.warn(
+            `Could not find matching layer for processing form with id: ${prefix}`,
+          );
+          return null;
         }
+        drawtoolsOptions.layerId = resolvedId;
+        layer = mapElement?.getLayerById(resolvedId);
       }
-    };
-    traverseLayers(layers);
-    if (matchedLayerId) {
-      form.properties.feature.options.drawtools.layerId = matchedLayerId;
-      return form;
-    } else {
-      console.warn(
-        `Could not find matching layer for processing form with id: ${layerId}`,
-      );
-      return null;
+      renderPromises.push(waitForLayerRender(layer));
     }
   }
+
+  await Promise.all(renderPromises).catch((err) => {
+    console.warn("[eodash] layer load failed before jsonform attach:", err);
+  });
+
   return form;
 }
 
@@ -192,6 +231,15 @@ export async function handleProcesses({
     );
 
     const bboxProperty = getBboxProperty(jsonformSchema.value);
+    // Preserve raw form value before extractGeometries mutates it.
+    // Needed so POST multiQuery can iterate original GeoJSON Feature objects.
+    // Uses JSON round-trip instead of structuredClone to handle OL Feature
+    // objects from drawtools (which contain non-cloneable methods).
+    const rawJsonformValue = JSON.parse(
+      JSON.stringify(
+        /** @type {Record<string, any>} */ (jsonformEl.value?.value ?? {}),
+      ),
+    );
     const jsonformValue = /** @type {Record<string,any>} */ (
       jsonformEl.value?.value
     );
@@ -210,6 +258,7 @@ export async function handleProcesses({
     [tempChartSpec, usedChartData.value] = await processCharts({
       links: serviceLinks,
       jsonformValue: { ...(jsonformValue ?? {}) },
+      rawJsonformValue,
       jsonformSchema: jsonformSchema.value,
       enableCompare,
       selectedStac: selectedStac.value,