@eodash/eodash 5.3.3 → 5.5.0

package/widgets/EodashProcess/index.vue

@@ -1,24 +1,19 @@
 <template>
-  <div ref="container" class="pb-4">
+  <div ref="container" class="py-1">
     <ProcessList :map-element="mapElement" :enable-compare="enableCompare" />
-
     <eox-jsonform
       v-if="jsonformSchema"
       :key="jsonformKey"
       ref="jsonformEl"
       .schema="jsonformSchema"
     ></eox-jsonform>
-    <eox-chart
-      ref="chartElRef"
-      class="chart"
-      v-if="isProcessed && chartSpec"
-      .spec="toRaw(chartSpec)"
-      .dataValues="toRaw(chartData)"
-      @click:item="onChartClick"
-      :style="chartStyles"
-      .opt="vegaEmbedOptions"
-    />
-    <div class="mt-4 text-right">
+    <EodashChart
+      v-if="!areChartsSeparateLayout"
+      :vega-embed-options="vegaEmbedOptions"
+      :enable-compare="enableCompare"
+    >
+    </EodashChart>
+    <div class="mt-2 text-right">
       <v-btn
         v-if="showExecBtn"
         :loading="loading"
@@ -46,9 +41,10 @@ import "@eox/drawtools";
 import "@eox/jsonform";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { computed, ref, toRaw, useTemplateRef, watch } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import ProcessList from "./ProcessList.vue";
-import { handleProcesses, onChartClick } from "./methods/handling";
+import EodashChart from "../EodashChart.vue";
+import { handleProcesses } from "./methods/handling";
 import { useInitProcess, useAutoExec } from "./methods/composables";
 import { updateJobsStatus } from "./methods/async";
 import {
@@ -56,10 +52,11 @@ import {
   indicator,
   mapCompareEl,
   mapEl,
-  chartEl,
-  compareChartEl,
+  chartSpec,
+  compareChartSpec,
+  areChartsSeparateLayout,
 } from "@/store/states";
-import { download } from "./methods/utils";
+import { download, getDrawToolsProperty } from "./methods/utils";
 import { compareJobs, jobs } from "./states";
 import { mdiCogPlayOutline, mdiDownloadCircleOutline } from "@mdi/js";
 
@@ -75,11 +72,7 @@ const { enableCompare, vegaEmbedOptions } = defineProps({
     },
   },
 });
-/** @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>} */
@@ -89,16 +82,12 @@ const jsonformEl =
   /** @type {Readonly<import("vue").ShallowRef<import("@eox/jsonform").EOxJSONForm | null>>} */ (
     useTemplateRef("jsonformEl")
   );
-const chartElRef =
-  /** @type {Readonly<import("vue").ShallowRef<import("@eox/chart").EOxChart | null>>} */ (
-    useTemplateRef("chartElRef")
-  );
+
 const isAsync = computed(
   () =>
     selectedStac.value?.links.filter((l) => l.endpoint === "eoxhub_workspaces")
       .length,
 );
-const containerEl = useTemplateRef("container");
 
 const loading = ref(false);
 
@@ -109,10 +98,7 @@ const isPolling = ref(false);
 const processResults = ref([]);
 
 const showExecBtn = computed(
-  () =>
-    !autoExec.value &&
-    (!!jsonformSchema.value || !!chartSpec.value) &&
-    !!jsonformEl.value,
+  () => !autoExec.value && !!jsonformSchema.value && !!jsonformEl.value,
 );
 const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
 const currentSelectedStac = enableCompare ? selectedCompareStac : selectedStac;
@@ -129,7 +115,6 @@ useInitProcess({
   mapElement: mapElement.value,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -155,14 +140,6 @@ const downloadResults = () => {
 };
 
 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 &&
@@ -173,7 +150,8 @@ const startProcess = async () => {
 
   if (propertyIsEmpty) {
     isProcessed.value = false;
-    chartSpec.value = null;
+    const usedChartSpec = enableCompare ? compareChartSpec : chartSpec;
+    usedChartSpec.value = null;
     return;
   }
   const errors = jsonformEl.value?.editor.validate();
@@ -189,8 +167,6 @@ const startProcess = async () => {
     selectedStac: currentSelectedStac,
     jsonformEl,
     jsonformSchema,
-    chartSpec,
-    chartData,
     loading,
     isPolling,
     processResults,
@@ -201,35 +177,8 @@ const startProcess = async () => {
   if (isAsync.value) updateJobsStatus(currentJobs, currentIndicator.value);
 };
 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;
-});
-
-// Assign chart element to global state based on compare mode
-watch(chartElRef, (newVal) => {
-  if (enableCompare) {
-    compareChartEl.value = newVal;
-  } else {
-    chartEl.value = newVal;
-  }
-});
 </script>
 <style>
-eox-chart {
-  --background-color: transparent;
-  padding-top: 1em;
-}
 eox-jsonform {
   padding: 0.7em;
   min-height: 0px;

package/widgets/EodashProcess/methods/async.js

@@ -115,7 +115,7 @@ export async function updateJobsStatus(jobs, indicator) {
       new Date(a.job_start_datetime).getTime()
     );
   });
-  jobs.value = jobResults;
+  jobs.value.splice(0, jobs.value.length, ...jobResults);
 }
 
 /**

package/widgets/EodashProcess/methods/composables.js

@@ -1,4 +1,4 @@
-import { initProcess } from "./handling";
+import { initProcess, updateJsonformIdentifier } from "./handling";
 import { useEventBus } from "@vueuse/core";
 import { nextTick, onMounted, watch } from "vue";
 import { eoxLayersKey } from "@/utils/keys";
@@ -13,7 +13,6 @@ import { useOnLayersUpdate } from "@/composables";
  * @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<any[]>} params.processResults
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
@@ -24,7 +23,6 @@ export const useInitProcess = ({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -41,7 +39,6 @@ export const useInitProcess = ({
         selectedStac,
         jsonformEl,
         jsonformSchema,
-        chartSpec,
         isProcessed,
         processResults,
         loading,
@@ -54,7 +51,6 @@ export const useInitProcess = ({
           selectedStac,
           jsonformEl,
           jsonformSchema,
-          chartSpec,
           isProcessed,
           loading,
           processResults,
@@ -67,6 +63,18 @@ export const useInitProcess = ({
   const evtKey =
     mapElement?.id === "compare" ? "compareLayers:updated" : "layers:updated";
   useOnLayersUpdate(async (evt, _payload) => {
+    if (
+      evt == "layertime:updated" ||
+      evt == "compareLayertime:updated" ||
+      evt == "time:updated" ||
+      evt == "compareTime:updated"
+    ) {
+      await updateJsonformIdentifier({
+        jsonformSchema,
+        // @ts-expect-error TODO payload coming from time update events is not an object with layers property
+        newLayers: _payload,
+      });
+    }
     if (evt !== evtKey) {
       return;
     }
@@ -75,7 +83,6 @@ export const useInitProcess = ({
       selectedStac,
       jsonformEl,
       jsonformSchema,
-      chartSpec,
       isProcessed,
       processResults,
       loading,

package/widgets/EodashProcess/methods/custom-endpoints/chart/veda-endpoint.js

@@ -19,7 +19,9 @@ export async function handleVedaEndpoint({
   enableCompare = false,
 }) {
   const vedaLink = links.find(
-    (link) => link.rel === "service" && link.endpoint === "veda",
+    (link) =>
+      link.rel === "service" &&
+      (link.endpoint === "veda" || link.endpoint === "veda_stac"),
   );
   if (!vedaLink) {
     return;
@@ -32,12 +34,17 @@ export async function handleVedaEndpoint({
   const configs = await fetchVedaCOGsConfig(
     selectedStac,
     enableCompare ? currentCompareUrl.value : currentUrl.value,
+    vedaLink,
   );
   // TODO: convert jsonform bbox type to geojson in the schema to avoid the conversion here
   return await Promise.all(
     configs.map(({ endpoint, datetime }) => {
+      const url = new URL(vedaEndpoint);
+      const key = vedaLink.endpoint === "veda_stac" ? "ids" : "url";
+      url.searchParams.set(key, endpoint);
+
       return axios
-        .post(vedaEndpoint + `?url=${endpoint}`, {
+        .post(url.toString(), {
           ...{
             type: "Feature",
             properties: {},
@@ -63,8 +70,9 @@ export async function handleVedaEndpoint({
  * Fetches the COGs endpoints from the STAC collections
  * @param {import("stac-ts").StacCollection} selectedStac
  * @param {string} absoluteUrl
+ * @param {import("stac-ts").StacLink} vedaLink
  */
-async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
+async function fetchVedaCOGsConfig(selectedStac, absoluteUrl, vedaLink) {
   // retrieve the collections from the indicator
   const collectionLinks = selectedStac.links.filter(
     (link) => link.rel == "child",
@@ -110,10 +118,15 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
     );
     const itemLinks = collection.links.filter((link) => link.rel == "item");
     configs.push(
-      ...itemLinks.map((link) => ({
-        endpoint: /** @type {string} */ (link["cog_href"]),
-        datetime: /** @type string **/ (link[datetimeProperty]),
-      })),
+      ...itemLinks.map((link) => {
+        const endpoint = /** @type {string} */ (
+          vedaLink.endpoint === "veda_stac" ? link.id : link["cog_href"]
+        );
+        return {
+          endpoint,
+          datetime: /** @type string **/ (link[datetimeProperty]),
+        };
+      }),
     );
   }
 

package/widgets/EodashProcess/methods/handling.js

@@ -3,6 +3,7 @@ import {
   applyProcessLayersToMap,
   extractGeometries,
   getBboxProperty,
+  getDrawToolsProperty,
   updateJsonformSchemaTarget,
 } from "./utils";
 import {
@@ -11,6 +12,10 @@ import {
   datetime,
   indicator,
   poi,
+  chartData,
+  chartSpec,
+  compareChartData,
+  compareChartSpec,
 } from "@/store/states";
 import axios from "@/plugins/axios";
 import { processCharts, processLayers, processSTAC } from "./outputs";
@@ -18,6 +23,7 @@ import { handleLayersCustomEndpoints } from "./custom-endpoints/layers";
 import { handleChartCustomEndpoints } from "./custom-endpoints/chart";
 import { useSTAcStore } from "@/store/stac";
 import { useGetSubCodeId } from "@/composables";
+import { getLayers } from "@/store/actions";
 
 /**
  * Fetch and set the jsonform schema to initialize the process
@@ -28,7 +34,6 @@ import { useGetSubCodeId } from "@/composables";
  * @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<any[]>} params.processResults
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
@@ -39,7 +44,6 @@ export async function initProcess({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -62,14 +66,21 @@ export async function initProcess({
   resetProcess({
     loading,
     isProcessed,
-    chartSpec,
     jsonformSchema,
     isPolling,
     processResults,
+    enableCompare,
   });
 
   await jsonformEl.value?.editor.destroy();
   if (updatedJsonform) {
+    // make sure correct target layer id is used in jsonform
+    if (updatedJsonform.properties?.feature?.options?.drawtools?.layerId) {
+      await updateJsonformIdentifier({
+        jsonformSchema,
+        newLayers: await getLayers(),
+      });
+    }
     if (enableCompare) {
       updatedJsonform = updateJsonformSchemaTarget(updatedJsonform);
     }
@@ -77,6 +88,74 @@ export async function initProcess({
   }
 }
 
+/**
+ * Update the jsonform schema to have the correct layer id from the map
+ *
+ * @export
+ * @async
+ * @param {Object} params
+ * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema params.jsonformSchema
+ * @param {Record<string, any>[] | undefined} params.newLayers params.newLayers
+ */
+export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
+  const form = jsonformSchema.value;
+  if (!form) {
+    return;
+  }
+  const drawToolsProperty = getDrawToolsProperty(form);
+  if (
+    drawToolsProperty &&
+    newLayers &&
+    form?.properties[drawToolsProperty]?.options?.drawtools?.layerId
+  ) {
+    // get partial or full id and try to match with correct eoxmap layer
+    // check if newLayers is an array or an object with layers property
+    let layers = newLayers;
+    // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
+    if (newLayers.layers && Array.isArray(newLayers.layers)) {
+      // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
+      layers = newLayers.layers;
+    }
+
+    const layerId =
+      form.properties[drawToolsProperty].options.drawtools.layerId.split(
+        ";:;",
+      )[0];
+    let matchedLayerId = null;
+    // layers are not flat can be grouped, we need to recursively search
+    const traverseLayers = (
+      /** @type {Record<string, any>[] | undefined} */ layersArray,
+    ) => {
+      if (!layersArray) {
+        return;
+      }
+      for (const layer of layersArray) {
+        if (layer.layers) {
+          // @ts-expect-error TODO payload coming from time update events is not an object with layers property
+          traverseLayers(layer);
+        } else {
+          if (layer.properties?.id?.startsWith(layerId)) {
+            matchedLayerId = layer.properties.id;
+            break;
+          }
+        }
+      }
+    };
+    traverseLayers(layers);
+    if (matchedLayerId) {
+      form.properties.feature.options.drawtools.layerId = matchedLayerId;
+      // trigger jsonform update in next tick
+      jsonformSchema.value = null;
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      jsonformSchema.value = form;
+    } else {
+      throw new Error(
+        `Could not find matching layer for processing form with id: ${layerId}`,
+      );
+    }
+  }
+}
+
 /**
  *
  * @param {object} params
@@ -84,8 +163,6 @@ export async function initProcess({
  * @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
  * @param {import("@eox/map").EOxMap | null} params.mapElement
@@ -96,8 +173,6 @@ export async function handleProcesses({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
-  chartData,
   isPolling,
   processResults,
   mapElement,
@@ -106,6 +181,7 @@ export async function handleProcesses({
   if (!jsonformEl.value || !jsonformSchema.value || !selectedStac.value) {
     return;
   }
+  const enableCompare = mapElement?.id === "compare";
 
   log.debug("Processing...");
   loading.value = true;
@@ -127,12 +203,14 @@ export async function handleProcesses({
       selectedStac.value?.["eodash:vegadefinition"]
     );
     const layerId = selectedStac.value?.id ?? "";
-
-    [chartSpec.value, chartData.value] = await processCharts({
+    const usedChartSpec = enableCompare ? compareChartSpec : chartSpec;
+    const usedChartData = enableCompare ? compareChartData : chartData;
+    let tempChartSpec = null;
+    [tempChartSpec, usedChartData.value] = await processCharts({
       links: serviceLinks,
       jsonformValue: { ...(jsonformValue ?? {}) },
       jsonformSchema: jsonformSchema.value,
-      enableCompare: mapElement?.id === "compare",
+      enableCompare,
       selectedStac: selectedStac.value,
       specUrl,
       isPolling,
@@ -140,19 +218,19 @@ export async function handleProcesses({
       customEndpointsHandler: handleChartCustomEndpoints,
     });
 
-    if (Object.keys(chartData.value ?? {}).length) {
-      processResults.value.push(chartData.value);
+    if (Object.keys(usedChartData.value ?? {}).length) {
+      processResults.value.push(usedChartData.value);
     }
 
     //@ts-expect-error we assume that the spec data is of type InlineData
-    if (chartSpec.value?.data?.values?.length) {
+    if (tempChartSpec.data?.values?.length) {
       //@ts-expect-error we assume that the spec data is of type InlineData
-      processResults.value.push(chartSpec.value?.data.values);
+      processResults.value.push(tempChartSpec?.data.values);
     }
-
-    if (chartSpec.value && !("background" in chartSpec.value)) {
-      chartSpec.value["background"] = "transparent";
+    if (tempChartSpec && !("background" in tempChartSpec)) {
+      tempChartSpec["background"] = "transparent";
     }
+    usedChartSpec.value = tempChartSpec;
 
     await processSTAC(
       serviceLinks,
@@ -203,23 +281,24 @@ export async function handleProcesses({
  * @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
+ * @param {boolean} params.enableCompare
  */
 export function resetProcess({
   loading,
   isProcessed,
-  chartSpec,
   jsonformSchema,
   processResults,
   isPolling,
+  enableCompare,
 }) {
   loading.value = false;
   isProcessed.value = false;
   isPolling.value = false;
-  chartSpec.value = null;
+  const usedChartSpec = enableCompare ? compareChartSpec : chartSpec;
+  usedChartSpec.value = null;
   processResults.value = [];
   jsonformSchema.value = null;
 }
@@ -238,8 +317,7 @@ export const onChartClick = (evt) => {
   const chartSpec = evt.target?.spec;
   if (
     !chartSpec ||
-    !evt.detail?.item?.datum ||
-    !evt.detail?.item?.datum.datum
+    (!evt.detail?.item?.datum && !evt.detail?.item?.datum.datum)
   ) {
     return;
   }

package/widgets/EodashProcess/methods/outputs.js

@@ -17,7 +17,7 @@ import { isFirstLoad } from "@/utils/states";
  * @param {Record<string,any>} options.jsonformSchema
  * @param {import("vue").Ref<import("../types").AsyncJob[]>} options.jobs
  * @param {boolean} [options.enableCompare=false] - Whether to enable compare mode
- * @returns {Promise<[import("@eox/chart").EOxChart["spec"] | null,Record<string,any>|null]>}
+ * @returns {Promise<[import("vega-embed").VisualizationSpec | null,Record<string,any>|null]>}
  **/
 export async function processCharts({
   links,
@@ -61,10 +61,50 @@ export async function processCharts({
   if (data && data.length) {
     //@ts-expect-error we assume data to exist in spec
     spec.data.values = data;
-    return [spec, dataValues];
+    return [structuredClone(spec), structuredClone(dataValues)];
   }
-
   const dataLinks = standardLinks.filter((link) => link.rel === "service");
+
+  // We count if there are at least two application/json links, if yes,
+  // we download the data and assign them to specific data ids in the spec
+  const jsonLinks = dataLinks.filter(
+    (link) => link.type === "application/json",
+  );
+  if (jsonLinks.length >= 2) {
+    for (const link of jsonLinks ?? []) {
+      let linkType = link.type;
+      switch (linkType) {
+        case undefined:
+          continue;
+        case "application/json":
+          dataValues[/** @type {string} */ (link.id)] = await axios
+            .get(
+              mustache.render(link.href, {
+                ...(jsonformValue ?? {}),
+              }),
+            )
+            .then((resp) => resp.data);
+          // assign to spec datasets, assuming spec.data is InlineData
+          // Always assign values as an object with string keys
+          if (spec.data) {
+            /** @type {import("vega-lite/build/src/data").InlineData} */
+            (spec.data).values = {
+              ...(spec.data &&
+              "values" in spec.data &&
+              typeof spec.data.values === "object"
+                ? spec.data.values
+                : {}),
+              [/** @type {string} */ (link.id)]:
+                dataValues[/** @type {string} */ (link.id)],
+            };
+          }
+          break;
+        default:
+          break;
+      }
+    }
+    return [spec, dataValues];
+  }
   try {
     checkForData: for (const link of dataLinks ?? []) {
       switch (link.type) {
@@ -104,7 +144,7 @@ export async function processCharts({
   } catch (e) {
     console.error("[eodash] Error while injecting Vega data", e);
   }
-  return [spec, dataValues];
+  return [structuredClone(spec), structuredClone(dataValues)];
 }
 
 /**

package/widgets/EodashProcess/methods/utils.js

@@ -508,6 +508,16 @@ export function extractAsyncResults(resultItem) {
   }
   return extracted;
 }
+
+/** @param {*} jsonformSchema */
+export const getDrawToolsProperty = (jsonformSchema) => {
+  for (const property in jsonformSchema.properties) {
+    if (jsonformSchema.properties[property]?.options?.drawtools) {
+      return property;
+    }
+  }
+};
+
 /**
  * @param {import("@eox/map").EOxMap | null} mapElement
  * @param {import("@eox/map").EoxLayer[]} processLayers
@@ -533,7 +543,7 @@ export const applyProcessLayersToMap = (mapElement, processLayers) => {
       (l) => l.properties?.id === layer.properties?.id,
     );
     if (!exists) {
-      analysisGroup.layers.unshift(layer);
+      analysisGroup.layers.push(layer);
     } else {
       analysisGroup.layers = replaceLayer(
         analysisGroup.layers,