@eodash/eodash 5.0.0 → 5.2.0

package/widgets/EodashProcess/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <div ref="container" class="process-container">
-    <ProcessList />
+  <div ref="container" class="pb-4">
+    <ProcessList :map-element="mapElement" :enable-compare="enableCompare" />
 
     <eox-jsonform
       v-if="jsonformSchema"
+      :key="jsonformKey"
       ref="jsonformEl"
       .schema="jsonformSchema"
     ></eox-jsonform>
@@ -14,12 +15,14 @@
       .dataValues="toRaw(chartData)"
       @click:item="onChartClick"
       :style="chartStyles"
+      .opt="vegaEmbedOptions"
     />
-    <div style="text-align: right">
+    <div class="mt-4 text-right">
       <v-btn
-        v-if="!autoExec"
+        v-if="showExecBtn"
         :loading="loading"
         style="margin-right: 20px"
+        :append-icon="[mdiCogPlayOutline]"
         @click="startProcess"
         color="primary"
       >
@@ -28,6 +31,7 @@
       <v-btn
         v-if="processResults.length && isProcessed && !isAsync"
         color="primary"
+        :append-icon="[mdiDownloadCircleOutline]"
         @click="downloadResults"
       >
         Download
@@ -45,10 +49,29 @@ import { computed, ref, toRaw, useTemplateRef } from "vue";
 import ProcessList from "./ProcessList.vue";
 import { handleProcesses, onChartClick } from "./methods/handling";
 import { useInitProcess, useAutoExec } from "./methods/composables";
-import { jobs, updateJobsStatus } from "./methods/async";
-import { indicator } from "@/store/states";
+import { updateJobsStatus } from "./methods/async";
+import {
+  compareIndicator,
+  indicator,
+  mapCompareEl,
+  mapEl,
+} from "@/store/states";
 import { download } from "./methods/utils";
-
+import { compareJobs, jobs } from "./states";
+import { mdiCogPlayOutline, mdiDownloadCircleOutline } from "@mdi/js";
+
+const { enableCompare, vegaEmbedOptions } = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  vegaEmbedOptions: {
+    type: Object,
+    default() {
+      return { actions: true };
+    },
+  },
+});
 /** @type {import("vue").Ref<import("vega").Spec|null>} */
 const chartSpec = ref(null);
 
@@ -78,11 +101,25 @@ const isPolling = ref(false);
 /** @type {import("vue").Ref<any[]>} */
 const processResults = ref([]);
 
-const { selectedStac } = storeToRefs(useSTAcStore());
+const showExecBtn = computed(
+  () =>
+    !autoExec.value &&
+    (!!jsonformSchema.value || !!chartSpec.value) &&
+    !!jsonformEl.value,
+);
+const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
+const currentSelectedStac = enableCompare ? selectedCompareStac : selectedStac;
+const mapElement = enableCompare ? mapCompareEl : mapEl;
+const currentIndicator = enableCompare ? compareIndicator : indicator;
+const currentJobs = enableCompare ? compareJobs : jobs;
+
+const jsonformKey = computed(
+  () => currentIndicator.value + mapElement.value?.id,
+);
 
 useInitProcess({
-  //@ts-expect-error TODO
-  selectedStac,
+  selectedStac: currentSelectedStac,
+  mapElement: mapElement.value,
   jsonformEl,
   jsonformSchema,
   chartSpec,
@@ -104,7 +141,7 @@ const downloadResults = () => {
         : result;
       fileName = fileName.includes("?") ? fileName.split("?")[0] : fileName;
     } else {
-      fileName = selectedStac.value?.id + "_process_results.json";
+      fileName = currentSelectedStac.value?.id + "_process_results.json";
     }
     download(fileName, result);
   });
@@ -141,25 +178,25 @@ const startProcess = async () => {
   processResults.value = [];
 
   await handleProcesses({
+    jobs: currentJobs,
+    selectedStac: currentSelectedStac,
     jsonformEl,
     jsonformSchema,
     chartSpec,
     chartData,
     loading,
-    //@ts-expect-error TODO
-    selectedStac,
-    isProcessed,
     isPolling,
     processResults,
+    mapElement: mapElement.value,
   });
 
   isProcessed.value = true;
-  if (isAsync.value) updateJobsStatus(jobs, indicator);
+  if (isAsync.value) updateJobsStatus(currentJobs, currentIndicator.value);
 };
 useAutoExec(autoExec, jsonformEl, jsonformSchema, startProcess);
 
 const chartStyles = computed(() => {
-  /** @type {Record<string,string> }*/
+  /** @type {Record<string,string>} */
   const styles = {};
   if (!chartSpec.value?.["height"]) {
     styles["height"] =
@@ -173,14 +210,12 @@ const chartStyles = computed(() => {
 });
 </script>
 <style>
-.process-container {
-  height: 100%;
-  overflow-y: auto;
-}
 eox-chart {
   --background-color: transparent;
+  padding-top: 1em;
 }
 eox-jsonform {
   padding: 0.7em;
+  min-height: 0px;
 }
 </style>

package/widgets/EodashProcess/methods/async.js

@@ -1,39 +1,45 @@
-import { indicator, mapEl } from "@/store/states";
+import { compareIndicator, indicator } from "@/store/states";
+// we don't want to use the caching axios instance here
 import axios from "axios";
-import { ref } from "vue";
-import { createLayerDefinition, download } from "./utils";
+import {
+  applyProcessLayersToMap,
+  creatAsyncProcessLayerDefinitions,
+  download,
+  extractAsyncResults,
+} from "./utils";
 import log from "loglevel";
-import { getLayers } from "@/store/actions";
-
-/**
- * The list of job result from the server
- * {job_start_datetime: string, job_end_datetime: string,status: string}
- *  @type {import("vue").Ref<any[]>}
- **/
-export const jobs = ref([]);
 
 /**
  * Polls the process status and fetches a result item when the process is successful.
  *
  * @param {Object} params - Parameters for polling the process status.
+ * @param {import("vue").Ref<import("../types").AsyncJob[]>} params.jobs - The list of jobs to update.
  * @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.
+ * @param {boolean} [params.enableCompare=false] - Whether to enable comparison mode, affecting the indicator used.
+ * @returns {Promise<import("../types").EOxHubProcessResults>} The fetched results JSON.
  * @throws {Error} If the process does not complete successfully within the maximum retries.
  */
 export async function pollProcessStatus({
+  jobs,
   processUrl,
   isPolling,
   pollInterval = 10000,
   maxRetries = 560,
+  enableCompare = false,
 }) {
   let retries = 0;
   isPolling.value = true;
+  // Ensure the jobs status is updated after the job has started and before polling
   setTimeout(() => {
-    updateJobsStatus(jobs, indicator);
+    updateJobsStatus(
+      jobs,
+      enableCompare ? compareIndicator.value : indicator.value,
+    );
   }, 500);
+
   while (retries < maxRetries && isPolling.value) {
     try {
       // Fetch the process JSON report
@@ -89,14 +95,19 @@ export async function pollProcessStatus({
 
 /**
  *
- * @param {*} jobs
- * @param {*} indicator
+ * @param {import("vue").Ref<import("../types").AsyncJob[]>} jobs
+ * @param {string} indicator
  */
 export async function updateJobsStatus(jobs, indicator) {
   /** @type {string[]} */
-  const jobsUrls = JSON.parse(localStorage.getItem(indicator.value) || "[]");
+  const jobsUrls = JSON.parse(localStorage.getItem(indicator) || "[]");
+  /** @type {import("../types").AsyncJob[]} */
   const jobResults = await Promise.all(
-    jobsUrls.map((url) => fetch(url).then((response) => response.json())),
+    jobsUrls.map((url) =>
+      axios
+        .get(url, { params: { t: Date.now() } })
+        .then((response) => response.data),
+    ),
   );
   jobResults.sort((a, b) => {
     return (
@@ -109,28 +120,45 @@ export async function updateJobsStatus(jobs, indicator) {
 
 /**
  * Removes a job from the local storage and updates the job status
- * @param {*} jobObject
+ * @param {import("vue").Ref<import("../types").AsyncJob[]>} jobs
+ * @param {import("../types").AsyncJob} jobObject
+ * @param {string} indicator
  */
-export const deleteJob = async (jobObject) => {
+export const deleteJob = async (jobs, jobObject, indicator) => {
   /** @type {string[]} */
-  const jobsUrls = JSON.parse(localStorage.getItem(indicator.value) || "[]");
+  const jobsUrls = JSON.parse(localStorage.getItem(indicator) || "[]");
   const newJobs = jobsUrls.filter((url) => !url.includes(jobObject.jobID));
-  localStorage.setItem(indicator.value, JSON.stringify(newJobs));
-  updateJobsStatus(jobs, indicator);
+  localStorage.setItem(indicator, JSON.stringify(newJobs));
+  await updateJobsStatus(jobs, indicator);
 };
 
 /**
  * Downloads an existing process results
- *  @param {*} jobObject
- * @param {*} selectedStac
+ * @param {import("../types").AsyncJob} jobObject
+ * @param {import("stac-ts").StacCollection | null} selectedStac
  */
 export const downloadPreviousResults = async (jobObject, selectedStac) => {
-  /** @type {any[]} */
+  /** @type {string[]} */
   const results = [];
-  await fetch(jobObject.links[1].href)
-    .then((response) => response.json())
+  const link = jobObject.links.find(
+    (link) => link.rel.includes("results") && link.type == "application/json",
+  );
+  if (!link) {
+    return;
+  }
+  await axios
+    .get(link.href)
+    .then((response) => response.data)
     .then((data) => {
-      results.push(...data.urls);
+      // either urls is an Array
+      if (data.urls) {
+        results.push(...data.urls);
+      } else {
+        // or urls need to be aggregated from mapping objects
+        for (const outputMappingObject of Object.values(data)) {
+          results.push(...outputMappingObject.urls);
+        }
+      }
     });
   results.forEach((result) => {
     if (!result) {
@@ -153,20 +181,21 @@ export const downloadPreviousResults = async (jobObject, selectedStac) => {
  * Load the process results and update the map layers.
  *
  * @async
- * @param {*} jobObject
- * @param {*} selectedStac
+ * @param {import("../types").AsyncJob} jobObject
+ * @param {import("stac-ts").StacCollection | null} selectedStac
+ * @param {import("@eox/map").EOxMap | null} mapElement
  */
-export const loadProcess = async (jobObject, selectedStac) => {
-  /** @type {any[]} */
-  const results = [];
-  await axios
+export const loadProcess = async (jobObject, selectedStac, mapElement) => {
+  /** @type {import("../types").EOxHubProcessResults} */
+  const results = await axios
     .get(jobObject.links[1].href)
-    .then((response) => results.push(response.data));
+    .then((response) => response.data);
 
   await loadPreviousProcess({
     selectedStac,
     results,
     jobId: jobObject.jobID,
+    mapElement,
   });
 };
 
@@ -175,35 +204,45 @@ export const loadProcess = async (jobObject, selectedStac) => {
  *
  * @param {Object} params
  * @param {import("stac-ts").StacCollection | null} params.selectedStac
- * @param {any[]} params.results
  * @param {string} params.jobId
+ * @param {import("../types").EOxHubProcessResults} params.results
+ * @param {import("@eox/map").EOxMap | null} params.mapElement
  */
-export async function loadPreviousProcess({ selectedStac, results, jobId }) {
-  const geotiffLinks = selectedStac?.links.filter(
-    (link) => link.rel === "service" && link.type === "image/tiff",
-  );
-  // const stacProjection = selectedStac
-  const geotiffLayer = await createLayerDefinition(
-    geotiffLinks?.[0],
-    selectedStac?.id ?? "",
-    results?.[0].urls,
-    //@ts-expect-error TODO
-    selectedStac?.["eodash:mapProjection"]?.["name"] ?? null,
-    jobId,
+export async function loadPreviousProcess({
+  selectedStac,
+  results,
+  jobId,
+  mapElement,
+}) {
+  const asyncLink = selectedStac?.links.find(
+    (link) => link.rel === "service" && link.endpoint == "eoxhub_workspaces",
   );
+  if (!asyncLink) {
+    return;
+  }
 
-  log.debug("rendered layers after loading previous process:", geotiffLayer);
+  const unifiedResult = extractAsyncResults(results);
 
-  if (geotiffLayer) {
-    const layers = [...(geotiffLayer ? [geotiffLayer] : [])];
-    let currentLayers = [...getLayers()];
-    let analysisGroup = currentLayers.find((l) =>
-      l.properties.id.includes("AnalysisGroup"),
-    );
-    analysisGroup?.layers.push(...layers);
+  const layers = await creatAsyncProcessLayerDefinitions(
+    unifiedResult,
+    asyncLink,
+    selectedStac,
+    jobId,
+  );
 
-    if (mapEl.value) {
-      mapEl.value.layers = [...currentLayers];
-    }
-  }
+  log.debug("rendered layers after loading previous process:", layers);
+  applyProcessLayersToMap(mapElement, layers);
 }
+
+/**
+ * extracts job status url from local storage based on identifier
+ *
+ * @param {string} jobID
+ * @param {string} indicator
+ */
+export const getJobStatusUrl = (jobID, indicator) => {
+  /** @type {string[]} */
+  const jobsUrls = JSON.parse(localStorage.getItem(indicator) || "[]");
+  const jobUrl = jobsUrls.find((url) => url.includes(jobID));
+  return jobUrl;
+};

package/widgets/EodashProcess/methods/composables.js

@@ -1,4 +1,3 @@
-import { mapEl } from "@/store/states";
 import { initProcess } from "./handling";
 import { useEventBus } from "@vueuse/core";
 import { nextTick, onMounted, watch } from "vue";
@@ -11,7 +10,7 @@ import { useOnLayersUpdate } from "@/composables";
  * @export
  * @async
  * @param {Object} params
- * @param {import("vue").Ref<import("stac-ts").StacCollection>} params.selectedStac
+ * @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<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
@@ -19,6 +18,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
  */
 export const useInitProcess = ({
   selectedStac,
@@ -29,13 +29,15 @@ export const useInitProcess = ({
   processResults,
   loading,
   isPolling,
+  mapElement,
 }) => {
   const layersEvents = useEventBus(eoxLayersKey);
 
   onMounted(async () => {
     // wait for the layers to be rendered
-    if (mapEl.value?.layers.length > 1) {
+    if ((mapElement?.layers.length ?? 0) > 1) {
       await initProcess({
+        enableCompare: mapElement?.id === "compare",
         selectedStac,
         jsonformEl,
         jsonformSchema,
@@ -48,6 +50,7 @@ export const useInitProcess = ({
     } else {
       layersEvents.once(async () => {
         await initProcess({
+          enableCompare: mapElement?.id === "compare",
           selectedStac,
           jsonformEl,
           jsonformSchema,
@@ -61,19 +64,23 @@ export const useInitProcess = ({
     }
   });
 
+  const evtKey =
+    mapElement?.id === "compare" ? "compareLayers:updated" : "layers:updated";
   useOnLayersUpdate(async (evt, _payload) => {
-    if (evt === "layers:updated") {
-      await initProcess({
-        selectedStac,
-        jsonformEl,
-        jsonformSchema,
-        chartSpec,
-        isProcessed,
-        processResults,
-        loading,
-        isPolling,
-      });
+    if (evt !== evtKey) {
+      return;
     }
+    await initProcess({
+      enableCompare: mapElement?.id === "compare",
+      selectedStac,
+      jsonformEl,
+      jsonformSchema,
+      chartSpec,
+      isProcessed,
+      processResults,
+      loading,
+      isPolling,
+    });
   });
 };
 

package/widgets/EodashProcess/methods/custom-endpoints/chart/index.js

@@ -0,0 +1,35 @@
+import log from "loglevel";
+import { handleSentinelHubProcess } from "./sentinelhub-endpoint";
+import { handleVedaEndpoint } from "./veda-endpoint";
+
+export const handleChartCustomEndpoints = createCustomChartEndpointsHandler([
+  handleSentinelHubProcess,
+  handleVedaEndpoint,
+]);
+/**
+ * @param {((input:import("^/EodashProcess/types").CustomEnpointInput)=> Promise<any[] | undefined | null>)[]} callbacks
+ */
+function createCustomChartEndpointsHandler(callbacks) {
+  /**
+   * @param {import("^/EodashProcess/types").CustomEnpointInput} inputs
+   * */
+  return async (inputs) => {
+    for (const callback of callbacks) {
+      const data = await callback(inputs);
+      log.debug(
+        "Custom endpoint data:",
+        data,
+        "for callback:",
+        callback.name,
+        "inputs:",
+        inputs,
+      );
+      const isNotValid = !data || !data.length || data.some((item) => !item);
+      if (isNotValid) {
+        continue;
+      }
+      return data;
+    }
+    return null;
+  };
+}