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

package/{core/client/composables/EodashMap.js → widgets/EodashMap/methods/index.js}

@@ -1,4 +1,4 @@
-import { EodashCollection } from "@/eodashSTAC/EodashCollection";
+import { createLayersConfig } from "./create-layers-config";
 import { setMapProjFromCol } from "@/eodashSTAC/triggers";
 import { nextTick, onMounted, onUnmounted, watch } from "vue";
 import log from "loglevel";
@@ -7,7 +7,7 @@ import { storeToRefs } from "pinia";
 import { useEventBus } from "@vueuse/core";
 import { eoxLayersKey } from "@/utils/keys";
 import { posIsSetFromUrl } from "@/utils/states";
-import { useOnLayersUpdate } from ".";
+import { useOnLayersUpdate } from "@/composables";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -52,161 +52,12 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
   });
 };
 
-/**
- * Creates full layer configuration from indicator and time information
- * @param {import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- * } selectedIndicator
- * @param {EodashCollection[]} eodashCols
- * @param {string} [updatedTime]
- */
-
-const createLayersConfig = async (
-  selectedIndicator,
-  eodashCols,
-  updatedTime,
-) => {
-  log.debug(
-    "Creating layers config",
-    selectedIndicator,
-    eodashCols,
-    updatedTime,
-  );
-  const layersCollection = [];
-  const dataLayers = {
-    type: "Group",
-    properties: {
-      id: "AnalysisGroup",
-      title: "Data Layers",
-      layerControlExpand: true,
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  for (const ec of eodashCols) {
-    let layers;
-    if (updatedTime) {
-      layers = await ec.createLayersJson(new Date(updatedTime));
-    } else {
-      layers = await ec.createLayersJson();
-    }
-    // Add expand to all analysis layers
-    layers.forEach((dl) => {
-      dl.properties.layerControlExpand = true;
-      dl.properties.layerControlToolsExpand = true;
-    });
-    dataLayers.layers.push(...layers);
-  }
-
-  layersCollection.push(dataLayers);
-  const indicatorLayers =
-    //@ts-expect-error indicator is collection
-    await EodashCollection.getIndicatorLayers(selectedIndicator);
-  const geodbLayer = EodashCollection.getGeoDBLayer(eodashCols);
-  if (geodbLayer) {
-    dataLayers.layers.unshift(geodbLayer);
-  }
-  const baseLayers = {
-    type: "Group",
-    properties: {
-      id: "BaseLayersGroup",
-      title: "Base Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  const indicatorBaseLayers = indicatorLayers.filter(
-    (l) => l.properties.group === "baselayer",
-  );
-
-  if (indicatorBaseLayers.length) {
-    // Only one baselayer can be set to visible, let's first set all to
-    // false that have not a dedicated property visible, then check
-    // if there are more then one visible and only allow one
-    let counter = 0;
-    let lastPos = 0;
-    for (let indx = 0; indx < indicatorBaseLayers.length; indx++) {
-      const bl = indicatorBaseLayers[indx];
-      if (!("visible" in bl.properties)) {
-        bl.properties.visible = false;
-      }
-
-      if (bl.properties.visible) {
-        counter++;
-        lastPos = indx;
-      }
-    }
-
-    // if none visible set the last one as visible
-    if (counter === 0) {
-      indicatorBaseLayers[0].properties.visible = true;
-    }
-
-    // disable all apart from last
-    if (counter > 0) {
-      indicatorBaseLayers.forEach((bl, indx) => {
-        if (indx !== lastPos) {
-          bl.properties.visible = false;
-        } else {
-          bl.properties.visible = true;
-        }
-      });
-    }
-
-    baseLayers.layers.push(...indicatorBaseLayers);
-
-    // Add exclusive to baselayers and make sure only one is selected
-    baseLayers.layers.forEach((bl) => {
-      bl.properties.layerControlExclusive = true;
-    });
-  } else {
-    // Default to some baselayer
-    baseLayers.layers.push({
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-        layerControlExclusive: true,
-      },
-      source: {
-        type: "OSM",
-      },
-    });
-  }
-
-  if (baseLayers.layers.length) {
-    layersCollection.push(baseLayers);
-  }
-
-  const overlayLayers = {
-    type: "Group",
-    properties: {
-      id: "OverlayGroup",
-      title: "Overlay Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  const indicatorOverlays = indicatorLayers.filter(
-    (l) => l.properties.group === "overlay",
-  );
-
-  if (indicatorOverlays.length) {
-    overlayLayers.layers.push(...indicatorOverlays);
-    layersCollection.unshift(overlayLayers);
-  }
-
-  return layersCollection;
-};
-
 /**
  * Initializes the map and updates it based on changes in the selected indicator and datetime,
  *
  * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} mapElement
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
- * @param {EodashCollection[]} eodashCols
+ * @param {import("@/eodashSTAC/EodashCollection").EodashCollection[]} eodashCols
  * @param {import("vue").Ref<string>} datetime
  * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
  * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
@@ -364,7 +215,7 @@ export const useInitMap = (
 };
 /**
  *
- * @param {EodashCollection[]} eodashCols
+ * @param {import("@/eodashSTAC/EodashCollection").EodashCollection[]} eodashCols
  * @param {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>>} tooltipProperties
  */
 export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {

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>