@eodash/eodash 5.0.0-rc.2.5 → 5.0.0

package/dist/client/{EodashProcess-CpbZPYBp.js → index-DiGDvTQU.js}

@@ -1,233 +1,13 @@
-import { createVNode, nextTick, watch, onMounted, ref, useTemplateRef, computed, createElementBlock, openBlock, createCommentVNode, normalizeStyle, toRaw, withCtx, createElementVNode, createBlock, createTextVNode } from 'vue';
+import { onMounted, watch, nextTick, ref, useTemplateRef, computed, createElementBlock, openBlock, createVNode, createCommentVNode, createElementVNode, normalizeStyle, unref, toRaw, createBlock, withCtx, createTextVNode } from 'vue';
 import '@eox/chart';
 import '@eox/drawtools';
 import '@eox/jsonform';
-import { g as genericComponent, p as propsFactory, c as useRtl, H as useDimension, a as useRender, h as makeTagProps, J as makeDimensionProps, i as makeComponentProps, ah as axios, ai as getLayers, a4 as mapEl, aj as extractLayerConfig, a8 as eoxLayersKey, $ as useSTAcStore, ab as useOnLayersUpdate, V as VBtn } from './asWebComponent-Df8nUiLs.js';
+import { ai as axios, aj as indicator, ak as extractLayerConfig, Y as datetime, al as getLayers, a3 as mapEl, a9 as eoxLayersKey, ac as useOnLayersUpdate, Z as useSTAcStore, V as VBtn } from './asWebComponent-CLhcT715.js';
 import { storeToRefs } from 'pinia';
-import { useEventBus } from '@vueuse/core';
-import { isMulti } from '@eox/jsonform/src/custom-inputs/spatial/utils';
-import mustache from 'mustache';
+import { p as pollProcessStatus, c as createLayerDefinition, g as getBboxProperty, e as extractGeometries, _ as _sfc_main$1, u as updateJobsStatus, d as download, j as jobs } from './ProcessList-DTefwQZx.js';
 import log from 'loglevel';
-
-const makeVContainerProps = propsFactory({
-  fluid: {
-    type: Boolean,
-    default: false
-  },
-  ...makeComponentProps(),
-  ...makeDimensionProps(),
-  ...makeTagProps()
-}, 'VContainer');
-const VContainer = genericComponent()({
-  name: 'VContainer',
-  props: makeVContainerProps(),
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const {
-      rtlClasses
-    } = useRtl();
-    const {
-      dimensionStyles
-    } = useDimension(props);
-    useRender(() => createVNode(props.tag, {
-      "class": ['v-container', {
-        'v-container--fluid': props.fluid
-      }, rtlClasses.value, props.class],
-      "style": [dimensionStyles.value, props.style]
-    }, slots));
-    return {};
-  }
-});
-
-/**
- * Polls the process status and fetches a result item when the process is successful.
- *
- * @param {Object} params - Parameters for polling the process status.
- * @param {string} params.processUrl - The URL of the process JSON report.
- * @param {import("vue").Ref<boolean>} params.isPolling - checks wether the polling should continue
- * @param {number} [params.pollInterval=5000] - The interval (in milliseconds) between polling attempts.
- * @param {number} [params.maxRetries=60] - The maximum number of polling attempts.
- * @returns {Promise<JSON>} The fetched results JSON.
- * @throws {Error} If the process does not complete successfully within the maximum retries.
- */
-async function pollProcessStatus({
-  processUrl,
-  isPolling,
-  pollInterval = 5000,
-  maxRetries = 60,
-}) {
-  let retries = 0;
-  isPolling.value = true;
-  while (retries < maxRetries && isPolling.value) {
-    try {
-      // Fetch the process JSON report
-      const cacheBuster = new Date().getTime(); // Add a timestamp for cache busting
-      const response = await axios.get(`${processUrl}?t=${cacheBuster}`);
-      const processReport = response.data;
-
-      // Check if the status is "successful"
-      if (processReport.status === "successful") {
-        console.log("Process completed successfully. Fetching result item...");
-
-        // Extract the result item URL
-        const resultsUrl = processReport.links[1].href;
-        if (!resultsUrl) {
-          throw new Error(`Result links not found in the process report.`);
-        }
-
-        // Fetch the result item
-        const resultResponse = await axios.get(resultsUrl);
-        console.log("Result file fetched successfully:", resultResponse.data);
-        return resultResponse.data; // Return the json result list
-      }
-      if (processReport.status === "failed") {
-        isPolling.value = false;
-        throw new Error("Process failed.", processReport);
-      }
-
-      // Log the current status if not successful
-      console.log(
-        `Status: ${processReport.status}. Retrying in ${pollInterval / 1000} seconds...`,
-      );
-    } catch (error) {
-      if (error instanceof Error) {
-        console.error("Error while polling process status:", error.message);
-      } else {
-        console.error("Unknown error occurred:", error);
-      }
-    }
-
-    // Wait for the next poll
-    await new Promise((resolve) => setTimeout(resolve, pollInterval));
-    retries++;
-  }
-  if (!isPolling.value) {
-    console.warn("Polling was stopped before the process was completed.");
-    return JSON.parse("{}");
-  }
-
-  throw new Error(
-    "Max retries reached. Process did not complete successfully.",
-  );
-}
-
-/**
- * Auto execute the process when the jsonform has the execute option
- *
- * @param {import("vue").Ref<boolean>} autoExec
- * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} jsonformEl
- * @param {import("vue").Ref<Record<string,any> | null>} jsonformSchema
- * @param {() => Promise<void>} startProcess
- **/
-function useAutoExec(
-  autoExec,
-  jsonformEl,
-  jsonformSchema,
-  startProcess,
-) {
-  /**
-   * @param {CustomEvent} _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 },
-    );
-  });
-}
-
-/**
- * @param {Record<string,any> |null} [jsonformSchema]
- **/
-function getBboxProperty(jsonformSchema) {
-  return /** @type {string} */ (
-    Object.keys(jsonformSchema?.properties ?? {}).find(
-      (key) => jsonformSchema?.properties[key].format === "bounding-box",
-    )
-  );
-}
-
-/**
- * Extracts the keys of type "geojson" from the jsonform schema
- * @param {Record<string,any> |null} [jsonformSchema]
- **/
-function getGeoJsonProperties(jsonformSchema) {
-  return /** @type {string[]} */ (
-    Object.keys(jsonformSchema?.properties ?? {}).filter(
-      (key) => jsonformSchema?.properties[key].type === "geojson",
-    )
-  );
-}
-
-/**
- * Converts jsonform geojson values to stringified geometries
- * @param {Record<string,any> |null} [jsonformSchema]
- * @param {Record<string,any>} jsonformValue
- **/
-function extractGeometries(jsonformValue, jsonformSchema) {
-  const geojsonKeys = getGeoJsonProperties(jsonformSchema);
-
-  for (const key of geojsonKeys) {
-    if (!jsonformValue[key]) {
-      continue;
-    }
-
-    if (isMulti(jsonformSchema?.properties[key])) {
-      // jsonformValue[key] is a feature collection
-      jsonformValue[key] =
-        /** @type {import("ol/format/GeoJSON").GeoJSONFeatureCollection} */ (
-          jsonformValue[key]
-        ).features.map((feature) => JSON.stringify(feature.geometry));
-    } else {
-      // jsonformValue[key] is a single feature
-      jsonformValue[key] = JSON.stringify(jsonformValue[key].geometry);
-    }
-  }
-}
-
-/**
- * Injects CSS to remove the borders of the jsonform from inside the shadowRoot
- * @param {import("@eox/jsonform").EOxJSONForm | null} jsonFormEl
- **/
-function injectJsonformCSS(jsonFormEl) {
-  if (!jsonFormEl?.shadowRoot) {
-    console.error("jsonform has no shadowRoot");
-    return;
-  }
-  const stylesheet = new CSSStyleSheet();
-  stylesheet.replaceSync(`.je-indented-panel {
-    border: none !important;
-  }`);
-  jsonFormEl.shadowRoot.adoptedStyleSheets = [stylesheet];
-}
+import mustache from 'mustache';
+import { useEventBus } from '@vueuse/core';
 
 /**
  * @param {import("stac-ts").StacLink[] | undefined} links
@@ -311,19 +91,75 @@ async function processVector(links, jsonformValue, layerId) {
   return layers;
 }
 
+/**
+ * @param {import("stac-ts").StacLink[] | undefined} links
+ * @param {Record<string,any> | undefined} jsonformValue
+ * @param {string} specUrl
+ * @returns {Promise<[import("@eox/chart").EOxChart["spec"] | null,Record<string,any>|null]>}
+ **/
+async function getChartValues(links, jsonformValue, specUrl) {
+  if (!specUrl || !links) return [null, null];
+  /** @type {import("vega").Spec} */
+  const spec = await axios.get(specUrl).then((resp) => {
+    return resp.data;
+  });
+  // //@ts-expect-error NamedData
+  // const dataName = spec?.data?.name;
+  const dataLinks = links.filter(
+    (link) => link.rel === "service", // && dataName && link.id === dataName,
+  );
+
+  /** @type {Record<string,any>}  */
+  const dataValues = {};
+  for (const link of dataLinks ?? []) {
+    if (link.type && ["application/json", "text/csv"].includes(link.type)) {
+      const dataUrl = mustache.render(link.href, {
+        ...(jsonformValue ?? {}),
+        ...(link["eox:flatstyle"] ?? {}),
+      });
+
+      // Wait for data to be retrieved
+      const data = await axios.get(dataUrl).then((resp) => {
+        return resp.data;
+      });
+      // @ts-expect-error we assume data to exist in spec
+      spec.data.values = data;
+      continue;
+    }
+
+    dataValues[/** @type {string} */ (link.id)] = await axios
+      .get(
+        mustache.render(link.href, {
+          ...(jsonformValue ?? {}),
+          ...(link["eox:flatstyle"] ?? {}),
+        }),
+      )
+      .then((resp) => resp.data);
+  }
+
+  return [spec, dataValues];
+}
+
 /**
  * @param {import("stac-ts").StacLink[] | undefined} links
  * @param {Record<string,any> | undefined} jsonformValue
  * @param {import("vue").Ref<boolean>} isPolling
  * @param {string} layerId
+ * @param {string} projection
  */
-async function processGeoTiff(links, jsonformValue, layerId, isPolling) {
+async function processGeoTiff(
+  links,
+  jsonformValue,
+  layerId,
+  isPolling,
+  projection,
+) {
   if (!links) return;
   const geotiffLinks = links.filter(
     (link) => link.rel === "service" && link.type === "image/tiff",
   );
   let urls = [];
-  let flatStyleJSON = null;
+  let processId = "";
   for (const link of geotiffLinks ?? []) {
     if (link.endpoint === "eoxhub_workspaces") {
       // TODO: prove of concept, needs to be reworked for sure
@@ -341,6 +177,12 @@ async function processGeoTiff(links, jsonformValue, layerId, isPolling) {
           },
         });
         console.log(responseProcess.headers.location);
+        // We save the process status url into localstorage assigning it to the indicator id
+        const currentJobs = JSON.parse(
+          localStorage.getItem(indicator.value) || "[]",
+        );
+        currentJobs.push(responseProcess.headers.location);
+        localStorage.setItem(indicator.value, JSON.stringify(currentJobs));
         await pollProcessStatus({
           processUrl: responseProcess.headers.location,
           isPolling,
@@ -348,11 +190,12 @@ async function processGeoTiff(links, jsonformValue, layerId, isPolling) {
           .then((resultItem) => {
             // @ts-expect-error we have currently no definition of what is allowed as response
             const resultUrls = resultItem?.urls;
-            if (!resultUrls?.length) {
+            if (resultUrls?.length < 1) {
               return;
             }
-
-            urls.push(resultUrls[0]);
+            //@ts-expect-error todo
+            processId = resultItem?.id;
+            urls = resultUrls;
           })
           .catch((error) => {
             if (error instanceof Error) {
@@ -371,87 +214,65 @@ async function processGeoTiff(links, jsonformValue, layerId, isPolling) {
     } else {
       urls.push(mustache.render(link.href, { ...(jsonformValue ?? {}) }));
     }
-    if ("eox:flatstyle" in (link ?? {})) {
-      flatStyleJSON = await axios
-        .get(/** @type {string} */ (link["eox:flatstyle"]))
-        .then((resp) => resp.data);
-    }
   }
-  /** @type {Record<string,any>|undefined} */
-  let layerConfig;
-  /** @type {Record<string,any>|undefined} */
-  let style;
-  if (flatStyleJSON) {
-    const extracted = extractLayerConfig(layerId ?? "", flatStyleJSON);
-    layerConfig = extracted.layerConfig;
-    style = extracted.style;
-  }
-  return urls.length
-    ? {
-        type: "WebGLTile",
-        source: {
-          type: "GeoTIFF",
-          normalize: !style,
-          sources: urls.map((url) => ({ url })),
-        },
-        properties: {
-          id: layerId + "_geotiff_process",
-          title: "Results " + layerId,
-          ...(layerConfig && { layerConfig: layerConfig }),
-        },
-        ...(style && { style: style }),
-      }
-    : undefined;
+
+  return createLayerDefinition(links[0], layerId, urls, projection, processId);
 }
 
 /**
- * @param {import("stac-ts").StacLink[] | undefined} links
- * @param {Record<string,any> | undefined} jsonformValue
- * @param {string} specUrl
- * @returns {Promise<[import("@eox/chart").EOxChart["spec"] | null,Record<string,any>|null]>}
- **/
-async function getChartValues(links, jsonformValue, specUrl) {
-  if (!specUrl || !links) return [null, null];
-  /** @type {import("vega").Spec} */
-  const spec = await axios.get(specUrl).then((resp) => {
-    return resp.data;
+ * Fetch and set the jsonform schema to initialize the process
+ *
+ * @export
+ * @async
+ * @param {Object} params
+ * @param {import("vue").Ref<import("stac-ts").StacCollection>} 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<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
+ * @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
+ */
+async function initProcess({
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  isProcessed,
+  processResults,
+  loading,
+  isPolling,
+}) {
+  if (!selectedStac.value) {
+    return;
+  }
+  resetProcess({
+    loading,
+    isProcessed,
+    chartSpec,
+    jsonformSchema,
+    isPolling,
+    processResults,
   });
-  // //@ts-expect-error NamedData
-  // const dataName = spec?.data?.name;
-  const dataLinks = links.filter(
-    (link) => link.rel === "service", // && dataName && link.id === dataName,
-  );
-
-  /** @type {Record<string,any>}  */
-  const dataValues = {};
-  for (const link of dataLinks ?? []) {
-    if (link.type && ["application/json", "text/csv"].includes(link.type)) {
-      const dataUrl = mustache.render(link.href, {
-        ...(jsonformValue ?? {}),
-        ...(link["eox:flatstyle"] ?? {}),
-      });
-      // Wait for data to be retrieved
-      const data = await axios.get(dataUrl).then((resp) => {
-        return resp.data;
-      });
-      // @ts-expect-error we assume data to exist in spec
-      spec.data.values = data;
-      continue;
-    }
-
-    dataValues[/** @type {string} */ (link.id)] = await axios
-      .get(
-        mustache.render(link.href, {
-          ...(jsonformValue ?? {}),
-          ...(link["eox:flatstyle"] ?? {}),
-        }),
-      )
+  if (selectedStac.value["eodash:jsonform"]) {
+    jsonformEl.value?.editor.destroy();
+    // wait for the layers to be rendered
+    jsonformSchema.value = await axios
+      //@ts-expect-error eodash extention
+      .get(selectedStac.value["eodash:jsonform"])
       .then((resp) => resp.data);
+    // remove borders from jsonform
+  } else {
+    if (!jsonformSchema.value) {
+      return;
+    }
+    jsonformSchema.value = null;
   }
-  return [spec, dataValues];
 }
 
 /**
+ *
  * @param {Object} params
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
@@ -502,6 +323,7 @@ async function handleProcesses({
     if (Object.keys(chartData.value ?? {}).length) {
       processResults.value.push(chartData.value);
     }
+
     //@ts-expect-error we assume that the spec data is of type InlineData
     if (chartSpec.value?.data?.values?.length) {
       //@ts-expect-error we assume that the spec data is of type InlineData
@@ -517,6 +339,8 @@ async function handleProcesses({
       jsonformValue,
       selectedStac.value?.id ?? "",
       isPolling,
+      //@ts-expect-error TODO
+      selectedStac.value?.["eodash:mapProjection"]?.["name"] ?? null,
     );
 
     if (geotiffLayer && geotiffLayer.source?.sources.length) {
@@ -602,7 +426,44 @@ function resetProcess({
 }
 
 /**
- * Description placeholder
+ * Handles the click event on a chart to extract temporal information and update the global datetime value.
+ *
+ * @param {object} evt - The click event object.
+ * @param {object} evt.target - The target of the event, expected to have a Vega-Lite specification (`spec`).
+ * @param {object} evt.target.spec - The Vega-Lite specification of the chart.
+ * @param {Record<string,{type?:string;field?:string;}>} [evt.target.spec.encoding] - The encoding specification of the chart.
+ * @param {object} evt.detail - The detail of the event, containing information about the clicked item.
+ * @param {import("vega").Item} evt.detail.item - The Vega item that was clicked.
+ */
+const onChartClick = (evt) => {
+  const chartSpec = evt.target?.spec;
+  if (!chartSpec) {
+    return;
+  }
+  const encodingKey = Object.keys(chartSpec.encoding ?? {}).find(
+    (key) => chartSpec.encoding?.[key].type === "temporal",
+  );
+  if (!encodingKey) {
+    return;
+  }
+  const temporalKey = chartSpec.encoding?.[encodingKey].field;
+  if (!temporalKey) {
+    return;
+  }
+  try {
+    const vegaItem = evt.detail.item;
+    const temporalValue = new Date(vegaItem.datum.datum[temporalKey]);
+    datetime.value = temporalValue.toISOString();
+  } catch (error) {
+    console.warn(
+      "[eodash] Error while setting datetime from eox-chart:",
+      error,
+    );
+  }
+};
+
+/**
+ * Composable resposible of timing the Initialization of the process
  *
  * @export
  * @async
@@ -616,7 +477,7 @@ function resetProcess({
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isPolling
  */
-async function initProcess({
+const useInitProcess = ({
   selectedStac,
   jsonformEl,
   jsonformSchema,
@@ -625,66 +486,103 @@ async function initProcess({
   processResults,
   loading,
   isPolling,
-}) {
-  if (!selectedStac.value) {
-    return;
-  }
-  resetProcess({
-    loading,
-    isProcessed,
-    chartSpec,
-    jsonformSchema,
-    isPolling,
-    processResults,
-  });
-  if (selectedStac.value["eodash:jsonform"]) {
-    jsonformEl.value?.editor.destroy();
+}) => {
+  const layersEvents = useEventBus(eoxLayersKey);
+
+  onMounted(async () => {
     // wait for the layers to be rendered
-    jsonformSchema.value = await axios
-      //@ts-expect-error eodash extention
-      .get(selectedStac.value["eodash:jsonform"])
-      .then((resp) => resp.data);
-      // jsonformSchema.value = {
-      //   "options": {
-      //     "execute": true
-      //   },
-      //   "type": "object",
-      //   "properties": {
-      //     "feature": {
-      //       "type": "string",
-      //       "title": "Select feature on map",
-      //       "options": {
-      //         drawtools:{
-      //           "for": "eox-map#main",
-      //           "layerId": "geodb-collection",
-      //           featureStyles:{
-      //             /** @type {import("ol/")} */
-      //             layer: {
-
-      //             },
-      //             // hover:{},
-      //             click:{
-      //               "stroke-width": 2,
-      //               "stroke-color": "red",
-      //             }
-      //           }
-      //         },
-      //           "featureProperty": "id"
-      //       },
-      //       "format": "feature"
-      //     }
-      //   }
-      // }
-    // remove borders from jsonform
+    if (mapEl.value?.layers.length > 1) {
+      await initProcess({
+        selectedStac,
+        jsonformEl,
+        jsonformSchema,
+        chartSpec,
+        isProcessed,
+        processResults,
+        loading,
+        isPolling,
+      });
+    } else {
+      layersEvents.once(async () => {
+        await initProcess({
+          selectedStac,
+          jsonformEl,
+          jsonformSchema,
+          chartSpec,
+          isProcessed,
+          loading,
+          processResults,
+          isPolling,
+        });
+      });
+    }
+  });
+
+  useOnLayersUpdate(async (evt, _payload) => {
+    if (evt === "layers:updated") {
+      await initProcess({
+        selectedStac,
+        jsonformEl,
+        jsonformSchema,
+        chartSpec,
+        isProcessed,
+        processResults,
+        loading,
+        isPolling,
+      });
+    }
+  });
+};
+
+/**
+ * Auto execute the process when the jsonform has the execute option
+ *
+ * @param {import("vue").Ref<boolean>} autoExec
+ * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} jsonformEl
+ * @param {import("vue").Ref<Record<string,any> | null>} jsonformSchema
+ * @param {() => Promise<void>} startProcess
+ **/
+function useAutoExec(
+  autoExec,
+  jsonformEl,
+  jsonformSchema,
+  startProcess,
+) {
+  /**
+   * @param {CustomEvent} _e
+   **/
+  const onJsonFormChange = async (_e) => {
+    await startProcess();
+  };
+
+  const addEventListener = async () => {
     await nextTick(() => {
-      injectJsonformCSS(jsonformEl.value);
+      //@ts-expect-error TODO
+      jsonformEl.value?.addEventListener("change", onJsonFormChange);
     });
-  } else {
-    if (!jsonformSchema.value) {
-      return;
-    }
-    jsonformSchema.value = null;
-  }
+  };
+  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 },
+    );
+  });
 }
 
 const _hoisted_1 = {
@@ -693,16 +591,14 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = [".schema"];
 const _hoisted_3 = [".spec", ".dataValues"];
+const _hoisted_4 = { style: {"text-align":"right"} };
 
+/** @type {import("vue").Ref<import("vega").Spec|null>} */
 
 const _sfc_main = {
-  __name: 'EodashProcess',
+  __name: 'index',
   setup(__props) {
 
-const layersEvents = useEventBus(eoxLayersKey);
-const { selectedStac } = storeToRefs(useSTAcStore());
-
-/** @type {import("vue").Ref<import("vega").Spec|null>} */
 const chartSpec = ref(null);
 
 /** @type {import("vue").Ref<Record<string,any>|null>}  */
@@ -712,9 +608,15 @@ const isProcessed = ref(false);
 /** @type {import("vue").Ref<Record<string,any>|null>} */
 const jsonformSchema = ref(null);
 
-/** @type {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} */
-const jsonformEl = ref(null);
-
+const jsonformEl =
+  /** @type {Readonly<import("vue").ShallowRef<import("@eox/jsonform").EOxJSONForm | null>>} */ (
+    useTemplateRef("jsonformEl")
+  );
+const isAsync = computed(
+  () =>
+    selectedStac.value?.links.filter((l) => l.endpoint === "eoxhub_workspaces")
+      .length,
+);
 const containerEl = useTemplateRef("container");
 
 const loading = ref(false);
@@ -725,90 +627,68 @@ const isPolling = ref(false);
 /** @type {import("vue").Ref<any[]>} */
 const processResults = ref([]);
 
+const { selectedStac } = storeToRefs(useSTAcStore());
+
+useInitProcess({
+  //@ts-expect-error TODO
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  isProcessed,
+  processResults,
+  loading,
+  isPolling,
+});
+
 const downloadResults = () => {
   processResults.value.forEach((result) => {
     if (!result) {
       return;
     }
-    let url = "";
-    let downloadFile = "";
+    let fileName = "";
     if (typeof result === "string") {
-      url = result;
-      //@ts-expect-error TODO
-      downloadFile = url.includes("/") ? url.split("/").pop() : url;
-      downloadFile = downloadFile.includes("?")
-        ? downloadFile.split("?")[0]
-        : downloadFile;
+      fileName = result.includes("/")
+        ? (result.split("/").pop() ?? "")
+        : result;
+      fileName = fileName.includes("?") ? fileName.split("?")[0] : fileName;
     } else {
-      result = JSON.stringify(result);
-      const blob = new Blob([result], { type: "text" });
-      url = URL.createObjectURL(blob);
-      downloadFile = selectedStac.value?.id + "_process_results.json";
+      fileName = selectedStac.value?.id + "_process_results.json";
     }
-    const link = document.createElement("a");
-    if (confirm(`Would you like to download ${downloadFile}?`)) {
-      link.href = url;
-      link.download = downloadFile;
-      link.click();
-    }
-    URL.revokeObjectURL(url);
-    link.remove();
+    download(fileName, result);
   });
 };
-onMounted(async () => {
-  // wait for the layers to be rendered
-  if (mapEl.value?.layers.length > 1) {
-    await initProcess({
-      //@ts-expect-error TODO
-      selectedStac,
-      jsonformEl,
-      jsonformSchema,
-      chartSpec,
-      isProcessed,
-      processResults,
-      loading,
-      isPolling,
-    });
-  } else {
-    layersEvents.once(async () => {
-      await initProcess({
-        //@ts-expect-error TODO
-        selectedStac,
-        jsonformEl,
-        jsonformSchema,
-        chartSpec,
-        isProcessed,
-        loading,
-        processResults,
-        isPolling,
-      });
-    });
-  }
-});
-
-useOnLayersUpdate(async (evt, _payload) => {
-  if (evt === "layers:updated") {
-    await initProcess({
-      //@ts-expect-error TODO
-      selectedStac,
-      jsonformEl,
-      jsonformSchema,
-      chartSpec,
-      isProcessed,
-      processResults,
-      loading,
-      isPolling,
-    });
-  }
-});
 
 const startProcess = async () => {
+  /** @param {*} jsonformSchema */
+  const getDrawToolsProperty = (jsonformSchema) => {
+    for (const property in jsonformSchema.properties) {
+      if (jsonformSchema.properties[property]?.options?.drawtools) {
+        return property;
+      }
+    }
+  };
+  const drawToolsProperty = getDrawToolsProperty(jsonformSchema.value);
+  const propertyIsEmpty =
+    drawToolsProperty &&
+    //@ts-expect-error jsonfrom.value is not typed
+    Array.isArray(jsonformEl.value?.value[drawToolsProperty]) &&
+    //@ts-expect-error jsonfrom.value is not typed
+    !jsonformEl.value?.value[drawToolsProperty].length;
+
+  if (propertyIsEmpty) {
+    isProcessed.value = false;
+    chartSpec.value = null;
+    return;
+  }
   const errors = jsonformEl.value?.editor.validate();
   if (errors?.length) {
     console.warn("[eodash] Form validation failed", errors);
     return;
   }
+
   processResults.value = [];
+
   await handleProcesses({
     jsonformEl,
     jsonformSchema,
@@ -820,7 +700,9 @@ const startProcess = async () => {
     isPolling,
     processResults,
   });
+
   isProcessed.value = true;
+  if (isAsync.value) updateJobsStatus(jobs, indicator);
 };
 useAutoExec(autoExec, jsonformEl, jsonformSchema, startProcess);
 
@@ -840,9 +722,9 @@ const chartStyles = computed(() => {
 
 return (_ctx, _cache) => {
                                                      
-                                                                 
 
   return (openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_sfc_main$1),
     (jsonformSchema.value)
       ? (openBlock(), createElementBlock("eox-jsonform", {
           key: 0,
@@ -857,42 +739,38 @@ return (_ctx, _cache) => {
           class: "chart",
           ".spec": toRaw(chartSpec.value),
           ".dataValues": toRaw(chartData.value),
+          "onClick:item": _cache[0] || (_cache[0] = (...args) => (unref(onChartClick) && unref(onChartClick)(...args))),
           style: normalizeStyle(chartStyles.value)
         }, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_3))
       : createCommentVNode("v-if", true),
-    createVNode(VContainer, null, {
-      default: withCtx(() => [
-        createElementVNode("span", null, [
-          (!autoExec.value)
-            ? (openBlock(), createBlock(VBtn, {
-                key: 0,
-                loading: loading.value,
-                style: {"float":"right","margin-right":"20px"},
-                onClick: startProcess,
-                color: "primary"
-              }, {
-                default: withCtx(() => _cache[0] || (_cache[0] = [
-                  createTextVNode(" Execute ")
-                ])),
-                _: 1 /* STABLE */
-              }, 8 /* PROPS */, ["loading"]))
-            : createCommentVNode("v-if", true),
-          (processResults.value.length && isProcessed.value)
-            ? (openBlock(), createBlock(VBtn, {
-                key: 1,
-                color: "primary",
-                onClick: downloadResults
-              }, {
-                default: withCtx(() => _cache[1] || (_cache[1] = [
-                  createTextVNode(" Download ")
-                ])),
-                _: 1 /* STABLE */
-              }))
-            : createCommentVNode("v-if", true)
-        ])
-      ]),
-      _: 1 /* STABLE */
-    })
+    createElementVNode("div", _hoisted_4, [
+      (!autoExec.value)
+        ? (openBlock(), createBlock(VBtn, {
+            key: 0,
+            loading: loading.value,
+            style: {"margin-right":"20px"},
+            onClick: startProcess,
+            color: "primary"
+          }, {
+            default: withCtx(() => _cache[1] || (_cache[1] = [
+              createTextVNode(" Execute ")
+            ])),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["loading"]))
+        : createCommentVNode("v-if", true),
+      (processResults.value.length && isProcessed.value && !isAsync.value)
+        ? (openBlock(), createBlock(VBtn, {
+            key: 1,
+            color: "primary",
+            onClick: downloadResults
+          }, {
+            default: withCtx(() => _cache[2] || (_cache[2] = [
+              createTextVNode(" Download ")
+            ])),
+            _: 1 /* STABLE */
+          }))
+        : createCommentVNode("v-if", true)
+    ])
   ], 512 /* NEED_PATCH */))
 }
 }