@eodash/eodash 5.0.0-rc.3 → 5.1.0

package/widgets/EodashMapBtns.vue

@@ -1,9 +1,11 @@
 <template>
-  <div ref="rootRef" class="d-flex flex-column align-end justify-end my-3 pa-2">
+  <div ref="rootRef" class="d-flex flex-column align-end">
     <v-btn
       v-if="exportMap"
       class="map-btn"
       :icon="[mdiMapPlus]"
+      size="small"
+      v-tooltip:bottom="'Extract Storytelling configuration'"
       @click="showMapState = !showMapState"
     />
     <ExportState v-if="exportMap" v-model="showMapState" />
@@ -11,82 +13,122 @@
     <v-btn
       class="map-btn"
       :icon="[mdiEarthBox]"
+      size="small"
+      v-tooltip:bottom="'Change map projection'"
       v-if="changeProjection && !!availableMapProjection"
       @click="changeMapProjection(availableMapProjection)"
     />
     <v-btn
       class="map-btn"
       :icon="[compareIcon]"
+      size="small"
+      v-tooltip:bottom="'Compare mode'"
       v-if="compareIndicators"
       @click="onCompareClick"
     />
+    <v-btn
+      class="map-btn"
+      :icon="[mdiStarFourPointsCircleOutline]"
+      size="small"
+      v-tooltip:bottom="'back to POIs'"
+      v-if="backToPOIs && (poi || comparePoi)"
+      @click="loadPOiIndicator()"
+    />
     <PopUp
       v-model="showCompareIndicators"
       :maxWidth="popupWidth"
-      :maxHeight="popupHeight"
+      :width="popupWidth"
+      :max-height="popupHeight"
+      :height="popupHeight"
     >
       <EodashItemFilter
         :enableCompare="true"
-        filters-title=""
-        results-title="Select an indicator to compare"
-        :filter-properties="[]"
+        :enableHighlighting="false"
+        resultType="cards"
+        style="--select-filter-max-items: 8"
+        filters-title="Select an indicator to compare"
+        subTitleProperty="subtitle"
+        imageProperty="thumbnail"
+        aggregateResults="collection_group"
+        results-title=""
         @select="onSelectCompareIndicator"
       />
     </PopUp>
   </div>
 </template>
 <script setup>
-import { makePanelTransparent } from "@/composables";
+import { useTransparentPanel } from "@/composables";
 import { changeMapProjection, setActiveTemplate } from "@/store/actions";
-import { availableMapProjection } from "@/store/states";
-import { mdiCompare, mdiCompareRemove, mdiEarthBox, mdiMapPlus } from "@mdi/js";
+import {
+  activeTemplate,
+  availableMapProjection,
+  comparePoi,
+  poi,
+} from "@/store/states";
+import {
+  mdiCompare,
+  mdiCompareRemove,
+  mdiEarthBox,
+  mdiMapPlus,
+  mdiStarFourPointsCircleOutline,
+} from "@mdi/js";
 import ExportState from "^/ExportState.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 { useDisplay } from "vuetify";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { switchToCompare } from "@/utils/states";
+import { loadPOiIndicator } from "./EodashProcess/methods/handling";
 
-const { compareIndicators, changeProjection, exportMap } = defineProps({
-  exportMap: {
-    type: Boolean,
-    default: true,
-  },
-  changeProjection: {
-    type: Boolean,
-    default: true,
-  },
-  compareIndicators: {
-    /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
-    type: [Boolean, Object],
-    default: true,
-  },
-});
+const { compareIndicators, changeProjection, exportMap, backToPOIs } =
+  defineProps({
+    exportMap: {
+      type: Boolean,
+      default: true,
+    },
+    changeProjection: {
+      type: Boolean,
+      default: true,
+    },
+    compareIndicators: {
+      /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
+      type: [Boolean, Object],
+      default: true,
+    },
+    backToPOIs: {
+      type: Boolean,
+      default: true,
+    },
+  });
 const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
+const { resetSelectedCompareSTAC } = useSTAcStore();
 const { smAndDown } = useDisplay();
-const popupWidth = computed(() => (smAndDown ? "70%" : "500px"));
-const popupHeight = computed(() => (smAndDown ? "90%" : "500px"));
+const popupWidth = computed(() => (smAndDown.value ? "80%" : "70%"));
+const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
 
 const showMapState = ref(false);
 const showCompareIndicators = ref(false);
 const compareIcon = computed(() =>
-  switchToCompare.value ? mdiCompare : mdiCompareRemove,
+  activeTemplate.value ===
+  ((typeof compareIndicators === "object" &&
+    compareIndicators?.compareTemplate) ||
+    "compare")
+    ? mdiCompareRemove
+    : mdiCompare,
 );
+
 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);
-  }
+  showCompareIndicators.value = !showCompareIndicators.value;
+
+  const fallbackTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.fallbackTemplate) ||
+    "expert";
+  selectedCompareStac.value = null;
+  resetSelectedCompareSTAC();
+  setActiveTemplate(fallbackTemplate);
+  triggerRef(selectedStac);
 };
 
 /** @type {import("vue").Ref<HTMLDivElement|null>} */
@@ -101,7 +143,7 @@ const onSelectCompareIndicator = () => {
   showCompareIndicators.value = !showCompareIndicators.value;
 };
 
-makePanelTransparent(rootRef);
+useTransparentPanel(rootRef);
 </script>
 <style scoped>
 .map-btn {

package/widgets/EodashProcess/ProcessList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-table
-      v-if="jobs.length"
+      v-if="currentJobs.length"
       density="compact"
       style="background-color: transparent"
     >
@@ -15,7 +15,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="item in jobs" :key="item.date">
+        <tr v-for="item in currentJobs" :key="item.jobID">
           <td>
             {{ new Date(item.job_start_datetime).toISOString().slice(0, 16) }}
           </td>
@@ -24,7 +24,7 @@
             <v-btn
               :disabled="item.status !== 'successful'"
               color="primary"
-              @click="loadProcess(item, selectedStac)"
+              @click="loadProcess(item, currentStac, mapElement)"
               :icon="[mdiUploadBox]"
               variant="text"
               v-tooltip="'Load results to map'"
@@ -35,7 +35,7 @@
             <v-btn
               :disabled="item.status !== 'successful'"
               color="primary"
-              @click="downloadPreviousResults(item, selectedStac)"
+              @click="downloadPreviousResults(item, currentStac)"
               :icon="[mdiDownloadBox]"
               variant="text"
               v-tooltip="'Download results'"
@@ -45,7 +45,13 @@
           <td style="padding: 0px">
             <v-btn
               color="#ff5252"
-              @click="deleteJob(item)"
+              @click="
+                deleteJob(
+                  toRef(() => currentJobs),
+                  item,
+                  currentIndicator,
+                )
+              "
               :icon="[mdiTrashCanOutline]"
               variant="text"
               v-tooltip="'Remove job'"
@@ -59,20 +65,38 @@
 </template>
 <script setup>
 import { mdiUploadBox, mdiDownloadBox, mdiTrashCanOutline } from "@mdi/js";
-import { onMounted, toRefs } from "vue";
+import { onMounted, toRef, toRefs } from "vue";
 import { useSTAcStore } from "@/store/stac";
-import { indicator } from "@/store/states";
+import { compareIndicator, indicator } from "@/store/states";
 import {
   deleteJob,
   downloadPreviousResults,
-  jobs,
   loadProcess,
   updateJobsStatus,
 } from "./methods/async";
+import { useOnLayersUpdate } from "@/composables";
+import { compareJobs, jobs } from "./states";
+const { enableCompare, mapElement } = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  mapElement: {
+    /** @type {import("vue").PropType<import("@eox/map").EOxMap | null>} */
+    type: Object,
+    default: () => null,
+  },
+});
+const { selectedStac, selectedCompareStac } = toRefs(useSTAcStore());
+const currentJobs = enableCompare ? compareJobs : jobs;
+const currentIndicator = enableCompare ? compareIndicator : indicator;
+const currentStac = enableCompare ? selectedCompareStac : selectedStac;
 
-const { selectedStac } = toRefs(useSTAcStore());
+onMounted(() => {
+  updateJobsStatus(currentJobs, currentIndicator.value);
+});
 
-onMounted(() => updateJobsStatus(jobs, indicator));
+useOnLayersUpdate(() => updateJobsStatus(currentJobs, currentIndicator.value));
 </script>
 <style lang="scss">
 div.v-table__wrapper {

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,26 +120,35 @@ 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);
     });
@@ -153,20 +173,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 +196,32 @@ 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);
 }