@eodash/eodash 5.0.0-rc.2.4 → 5.0.0-rc.3

package/widgets/EodashMapBtns.vue

@@ -16,9 +16,9 @@
     />
     <v-btn
       class="map-btn"
-      :icon="[mdiCompare]"
+      :icon="[compareIcon]"
       v-if="compareIndicators"
-      @click="showCompareIndicators = !showCompareIndicators"
+      @click="onCompareClick"
     />
     <PopUp
       v-model="showCompareIndicators"
@@ -39,14 +39,17 @@
 import { makePanelTransparent } from "@/composables";
 import { changeMapProjection, setActiveTemplate } from "@/store/actions";
 import { availableMapProjection } from "@/store/states";
-import { mdiCompare, mdiEarthBox, mdiMapPlus } from "@mdi/js";
+import { mdiCompare, mdiCompareRemove, mdiEarthBox, mdiMapPlus } from "@mdi/js";
 import ExportState from "^/ExportState.vue";
-import { computed, ref } from "vue";
+import { computed, ref, triggerRef } from "vue";
 import PopUp from "./PopUp.vue";
 import EodashItemFilter from "./EodashItemFilter.vue";
 import { useDisplay } from "vuetify/lib/framework.mjs";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+import { switchToCompare } from "@/utils/states";
 
-defineProps({
+const { compareIndicators, changeProjection, exportMap } = defineProps({
   exportMap: {
     type: Boolean,
     default: true,
@@ -56,22 +59,45 @@ defineProps({
     default: true,
   },
   compareIndicators: {
-    type: Boolean,
+    /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
+    type: [Boolean, Object],
     default: true,
   },
 });
+const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
 const { smAndDown } = useDisplay();
 const popupWidth = computed(() => (smAndDown ? "70%" : "500px"));
 const popupHeight = computed(() => (smAndDown ? "90%" : "500px"));
 
 const showMapState = ref(false);
 const showCompareIndicators = ref(false);
+const compareIcon = computed(() =>
+  switchToCompare.value ? mdiCompare : mdiCompareRemove,
+);
+const onCompareClick = () => {
+  if (switchToCompare.value) {
+    showCompareIndicators.value = !showCompareIndicators.value;
+  } else {
+    switchToCompare.value = true;
+    const fallbackTemplate =
+      (typeof compareIndicators === "object" &&
+        compareIndicators.fallbackTemplate) ||
+      "expert";
+    selectedCompareStac.value = null;
+    setActiveTemplate(fallbackTemplate);
+    triggerRef(selectedStac);
+  }
+};
 
 /** @type {import("vue").Ref<HTMLDivElement|null>} */
 const rootRef = ref(null);
 
 const onSelectCompareIndicator = () => {
-  setActiveTemplate("compare");
+  const compareTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+    "compare";
+  setActiveTemplate(compareTemplate);
   showCompareIndicators.value = !showCompareIndicators.value;
 };
 

package/widgets/EodashProcess/ProcessList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <v-table
+      v-if="jobs.length"
+      density="compact"
+      style="background-color: transparent"
+    >
+      <thead>
+        <tr>
+          <th class="text-left">Executed on</th>
+          <th class="text-left">Status</th>
+          <th class="text-left"></th>
+          <th class="text-left"></th>
+          <th class="text-left"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in jobs" :key="item.date">
+          <td>
+            {{ new Date(item.job_start_datetime).toISOString().slice(0, 16) }}
+          </td>
+          <td>{{ item.status }}</td>
+          <td style="padding: 0px">
+            <v-btn
+              :disabled="item.status !== 'successful'"
+              color="primary"
+              @click="loadProcess(item, selectedStac)"
+              :icon="[mdiUploadBox]"
+              variant="text"
+              v-tooltip="'Load results to map'"
+            >
+            </v-btn>
+          </td>
+          <td style="padding: 0px">
+            <v-btn
+              :disabled="item.status !== 'successful'"
+              color="primary"
+              @click="downloadPreviousResults(item, selectedStac)"
+              :icon="[mdiDownloadBox]"
+              variant="text"
+              v-tooltip="'Download results'"
+            >
+            </v-btn>
+          </td>
+          <td style="padding: 0px">
+            <v-btn
+              color="#ff5252"
+              @click="deleteJob(item)"
+              :icon="[mdiTrashCanOutline]"
+              variant="text"
+              v-tooltip="'Remove job'"
+            >
+            </v-btn>
+          </td>
+        </tr>
+      </tbody>
+    </v-table>
+  </div>
+</template>
+<script setup>
+import { mdiUploadBox, mdiDownloadBox, mdiTrashCanOutline } from "@mdi/js";
+import { onMounted, toRefs } from "vue";
+import { useSTAcStore } from "@/store/stac";
+import { indicator } from "@/store/states";
+import {
+  deleteJob,
+  downloadPreviousResults,
+  jobs,
+  loadProcess,
+  updateJobsStatus,
+} from "./methods/async";
+
+const { selectedStac } = toRefs(useSTAcStore());
+
+onMounted(() => updateJobsStatus(jobs, indicator));
+</script>
+<style lang="scss">
+div.v-table__wrapper {
+  overflow: hidden !important;
+  height: max-content !important;
+}
+</style>

package/widgets/EodashProcess/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div ref="container" class="process-container">
+    <ProcessList />
+
+    <eox-jsonform
+      v-if="jsonformSchema"
+      ref="jsonformEl"
+      .schema="jsonformSchema"
+    ></eox-jsonform>
+    <eox-chart
+      class="chart"
+      v-if="isProcessed && chartSpec"
+      .spec="toRaw(chartSpec)"
+      .dataValues="toRaw(chartData)"
+      @click:item="onChartClick"
+      :style="chartStyles"
+    />
+    <div style="text-align: right">
+      <v-btn
+        v-if="!autoExec"
+        :loading="loading"
+        style="margin-right: 20px"
+        @click="startProcess"
+        color="primary"
+      >
+        Execute
+      </v-btn>
+      <v-btn
+        v-if="processResults.length && isProcessed && !isAsync"
+        color="primary"
+        @click="downloadResults"
+      >
+        Download
+      </v-btn>
+    </div>
+  </div>
+</template>
+<script setup>
+import "@eox/chart";
+import "@eox/drawtools";
+import "@eox/jsonform";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+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 { download } from "./methods/utils";
+
+/** @type {import("vue").Ref<import("vega").Spec|null>} */
+const chartSpec = ref(null);
+
+/** @type {import("vue").Ref<Record<string,any>|null>}  */
+const chartData = ref(null);
+const isProcessed = ref(false);
+
+/** @type {import("vue").Ref<Record<string,any>|null>} */
+const jsonformSchema = 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);
+
+const autoExec = ref(false);
+
+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 fileName = "";
+    if (typeof result === "string") {
+      fileName = result.includes("/")
+        ? (result.split("/").pop() ?? "")
+        : result;
+      fileName = fileName.includes("?") ? fileName.split("?")[0] : fileName;
+    } else {
+      fileName = selectedStac.value?.id + "_process_results.json";
+    }
+    download(fileName, result);
+  });
+};
+
+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,
+    chartSpec,
+    chartData,
+    loading,
+    //@ts-expect-error TODO
+    selectedStac,
+    isProcessed,
+    isPolling,
+    processResults,
+  });
+
+  isProcessed.value = true;
+  if (isAsync.value) updateJobsStatus(jobs, indicator);
+};
+useAutoExec(autoExec, jsonformEl, jsonformSchema, startProcess);
+
+const chartStyles = computed(() => {
+  /** @type {Record<string,string> }*/
+  const styles = {};
+  if (!chartSpec.value?.["height"]) {
+    styles["height"] =
+      Math.max(
+        (containerEl.value?.offsetHeight ?? 0) -
+          (jsonformEl.value?.offsetHeight ?? 0),
+        200,
+      ) + "px";
+  }
+  return styles;
+});
+</script>
+<style>
+.process-container {
+  height: 100%;
+  overflow-y: auto;
+}
+eox-chart {
+  --background-color: transparent;
+}
+eox-jsonform {
+  padding: 0.7em;
+}
+</style>

package/widgets/EodashProcess/methods/async.js

@@ -0,0 +1,209 @@
+import { indicator, mapEl } from "@/store/states";
+import axios from "axios";
+import { ref } from "vue";
+import { createLayerDefinition, download } 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 {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.
+ */
+export async function pollProcessStatus({
+  processUrl,
+  isPolling,
+  pollInterval = 10000,
+  maxRetries = 560,
+}) {
+  let retries = 0;
+  isPolling.value = true;
+  setTimeout(() => {
+    updateJobsStatus(jobs, indicator);
+  }, 500);
+  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.",
+  );
+}
+
+/**
+ *
+ * @param {*} jobs
+ * @param {*} indicator
+ */
+export async function updateJobsStatus(jobs, indicator) {
+  /** @type {string[]} */
+  const jobsUrls = JSON.parse(localStorage.getItem(indicator.value) || "[]");
+  const jobResults = await Promise.all(
+    jobsUrls.map((url) => fetch(url).then((response) => response.json())),
+  );
+  jobResults.sort((a, b) => {
+    return (
+      new Date(b.job_start_datetime).getTime() -
+      new Date(a.job_start_datetime).getTime()
+    );
+  });
+  jobs.value = jobResults;
+}
+
+/**
+ * Removes a job from the local storage and updates the job status
+ * @param {*} jobObject
+ */
+export const deleteJob = async (jobObject) => {
+  /** @type {string[]} */
+  const jobsUrls = JSON.parse(localStorage.getItem(indicator.value) || "[]");
+  const newJobs = jobsUrls.filter((url) => !url.includes(jobObject.jobID));
+  localStorage.setItem(indicator.value, JSON.stringify(newJobs));
+  updateJobsStatus(jobs, indicator);
+};
+
+/**
+ * Downloads an existing process results
+ *  @param {*} jobObject
+ * @param {*} selectedStac
+ */
+export const downloadPreviousResults = async (jobObject, selectedStac) => {
+  /** @type {any[]} */
+  const results = [];
+  await fetch(jobObject.links[1].href)
+    .then((response) => response.json())
+    .then((data) => {
+      results.push(...data.urls);
+    });
+  results.forEach((result) => {
+    if (!result) {
+      return;
+    }
+    let fileName = "";
+    if (typeof result === "string") {
+      fileName = result.includes("/")
+        ? (result.split("/").pop() ?? "")
+        : result;
+      fileName = fileName.includes("?") ? fileName.split("?")[0] : fileName;
+    } else {
+      fileName = selectedStac?.id + "_process_results.json";
+    }
+    download(fileName, result);
+  });
+};
+
+/**
+ * Load the process results and update the map layers.
+ *
+ * @async
+ * @param {*} jobObject
+ * @param {*} selectedStac
+ */
+export const loadProcess = async (jobObject, selectedStac) => {
+  /** @type {any[]} */
+  const results = [];
+  await axios
+    .get(jobObject.links[1].href)
+    .then((response) => results.push(response.data));
+
+  await loadPreviousProcess({
+    selectedStac,
+    results,
+    jobId: jobObject.jobID,
+  });
+};
+
+/**
+ * load a geotiff to the map from an existing process
+ *
+ * @param {Object} params
+ * @param {import("stac-ts").StacCollection | null} params.selectedStac
+ * @param {any[]} params.results
+ * @param {string} params.jobId
+ */
+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,
+  );
+
+  log.debug("rendered layers after loading previous process:", geotiffLayer);
+
+  if (geotiffLayer) {
+    const layers = [...(geotiffLayer ? [geotiffLayer] : [])];
+    let currentLayers = [...getLayers()];
+    let analysisGroup = currentLayers.find((l) =>
+      l.properties.id.includes("AnalysisGroup"),
+    );
+    analysisGroup?.layers.push(...layers);
+
+    if (mapEl.value) {
+      mapEl.value.layers = [...currentLayers];
+    }
+  }
+}

package/widgets/EodashProcess/methods/composables.js

@@ -0,0 +1,129 @@
+import { mapEl } from "@/store/states";
+import { initProcess } from "./handling";
+import { useEventBus } from "@vueuse/core";
+import { nextTick, onMounted, watch } from "vue";
+import { eoxLayersKey } from "@/utils/keys";
+import { useOnLayersUpdate } from "@/composables";
+
+/**
+ * Composable resposible of timing the Initialization of 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
+ */
+export const useInitProcess = ({
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  isProcessed,
+  processResults,
+  loading,
+  isPolling,
+}) => {
+  const layersEvents = useEventBus(eoxLayersKey);
+
+  onMounted(async () => {
+    // wait for the layers to be rendered
+    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
+ **/
+export 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 },
+    );
+  });
+}