@eodash/eodash 5.0.0-rc.2.5 → 5.0.0

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 },
+    );
+  });
+}

package/widgets/EodashProcess/methods/handling.js

@@ -0,0 +1,254 @@
+import log from "loglevel";
+import { extractGeometries, getBboxProperty } from "./utils";
+import { datetime, mapEl } from "@/store/states";
+import axios from "@/plugins/axios";
+import { getLayers } from "@/store/actions";
+import {
+  getChartValues,
+  processGeoTiff,
+  processImage,
+  processVector,
+} from "./outputs";
+
+/**
+ * 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
+ */
+export async function initProcess({
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  isProcessed,
+  processResults,
+  loading,
+  isPolling,
+}) {
+  if (!selectedStac.value) {
+    return;
+  }
+  resetProcess({
+    loading,
+    isProcessed,
+    chartSpec,
+    jsonformSchema,
+    isPolling,
+    processResults,
+  });
+  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;
+  }
+}
+
+/**
+ *
+ * @param {Object} params
+ * @param {import("vue").Ref<boolean>} params.loading
+ * @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
+ * @param {import("vue").Ref<Record<string, any> | null>} params.chartData
+ * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("vue").Ref<any[]>} params.processResults
+ */
+export async function handleProcesses({
+  loading,
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  chartData,
+  isPolling,
+  processResults,
+}) {
+  if (!jsonformEl.value || !jsonformSchema.value || !selectedStac.value) {
+    return;
+  }
+  log.debug("Processing...");
+  loading.value = true;
+  try {
+    const serviceLinks = selectedStac.value?.links?.filter(
+      (l) => l.rel === "service",
+    );
+    const bboxProperty = getBboxProperty(jsonformSchema.value);
+    const jsonformValue = /** @type {Record<string,any>} */ (
+      jsonformEl.value?.value
+    );
+
+    extractGeometries(jsonformValue, jsonformSchema.value);
+
+    const origBbox = jsonformValue[bboxProperty];
+
+    const specUrl = /** @type {string} */ (
+      selectedStac.value?.["eodash:vegadefinition"]
+    );
+
+    [chartSpec.value, chartData.value] = await getChartValues(
+      serviceLinks,
+      { ...(jsonformValue ?? {}) },
+      specUrl,
+    );
+    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
+      processResults.value.push(chartSpec.value?.data.values);
+    }
+
+    if (chartSpec.value && !("background" in chartSpec.value)) {
+      chartSpec.value["background"] = "transparent";
+    }
+
+    const geotiffLayer = await processGeoTiff(
+      serviceLinks,
+      jsonformValue,
+      selectedStac.value?.id ?? "",
+      isPolling,
+      //@ts-expect-error TODO
+      selectedStac.value?.["eodash:mapProjection"]?.["name"] ?? null,
+    );
+
+    if (geotiffLayer && geotiffLayer.source?.sources.length) {
+      processResults.value.push(
+        ...(geotiffLayer.source?.sources?.map((source) => source.url) ?? []),
+      );
+    }
+    // 3. vector geojson
+    const vectorLayers = await processVector(
+      serviceLinks,
+      jsonformValue,
+      selectedStac.value?.id ?? "",
+    );
+
+    if (vectorLayers?.length) {
+      processResults.value.push(
+        ...vectorLayers.map((layer) => layer.source?.url),
+      );
+    }
+
+    const imageLayers = processImage(serviceLinks, jsonformValue, origBbox);
+    if (imageLayers?.length) {
+      processResults.value.push(
+        ...imageLayers.map((layer) => layer.source?.url),
+      );
+    }
+
+    log.debug(
+      "rendered layers after processing:",
+      geotiffLayer,
+      vectorLayers,
+      imageLayers,
+    );
+
+    if (geotiffLayer || vectorLayers?.length || imageLayers?.length) {
+      const layers = [
+        ...(geotiffLayer ? [geotiffLayer] : []),
+        ...(vectorLayers ?? []),
+        ...(imageLayers ?? []),
+      ];
+      let currentLayers = [...getLayers()];
+      let analysisGroup = currentLayers.find((l) =>
+        l.properties.id.includes("AnalysisGroup"),
+      );
+      analysisGroup?.layers.push(...layers);
+
+      if (mapEl.value) {
+        mapEl.value.layers = [...currentLayers];
+      }
+    }
+    loading.value = false;
+  } catch (error) {
+    console.error("[eodash] Error while running process:", error);
+    loading.value = false;
+    throw error;
+  }
+}
+
+/**
+ * Reset the process state
+ * @param {Object} params
+ * @param {import("vue").Ref<boolean>} params.loading
+ * @param {import("vue").Ref<boolean>} params.isProcessed
+ * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
+ * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("vue").Ref<any[]>} params.processResults
+ * @param {import("vue").Ref<Record<string,any>|null>} params.jsonformSchema
+ */
+export function resetProcess({
+  loading,
+  isProcessed,
+  chartSpec,
+  jsonformSchema,
+  processResults,
+  isPolling,
+}) {
+  loading.value = false;
+  isProcessed.value = false;
+  isPolling.value = false;
+  chartSpec.value = null;
+  processResults.value = [];
+  jsonformSchema.value = null;
+}
+
+/**
+ * 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.
+ */
+export 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,
+    );
+  }
+};