@eodash/eodash 5.4.0 → 5.5.1

package/widgets/EodashProcess/index.vue

@@ -1,39 +1,38 @@
 <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="text-right">
       <v-btn
         v-if="showExecBtn"
         :loading="loading"
-        style="margin-right: 20px"
+        style="margin-right: 8px"
         :append-icon="[mdiCogPlayOutline]"
         @click="startProcess"
-        color="primary"
+        density="comfortable"
+        size="small"
       >
         Execute
       </v-btn>
       <v-btn
         v-if="processResults.length && isProcessed && !isAsync"
         color="primary"
+        style="margin-right: 8px"
         :append-icon="[mdiDownloadCircleOutline]"
         @click="downloadResults"
+        size="small"
+        density="comfortable"
       >
         Download
       </v-btn>
@@ -46,9 +45,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,8 +56,9 @@ import {
   indicator,
   mapCompareEl,
   mapEl,
-  chartEl,
-  compareChartEl,
+  chartSpec,
+  compareChartSpec,
+  areChartsSeparateLayout,
 } from "@/store/states";
 import { download, getDrawToolsProperty } from "./methods/utils";
 import { compareJobs, jobs } from "./states";
@@ -75,11 +76,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 +86,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 +102,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 +119,6 @@ useInitProcess({
   mapElement: mapElement.value,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -165,7 +154,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();
@@ -181,8 +171,6 @@ const startProcess = async () => {
     selectedStac: currentSelectedStac,
     jsonformEl,
     jsonformSchema,
-    chartSpec,
-    chartData,
     loading,
     isPolling,
     processResults,
@@ -193,35 +181,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

@@ -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,
@@ -74,7 +70,7 @@ export const useInitProcess = ({
       evt == "compareTime:updated"
     ) {
       await updateJsonformIdentifier({
-        jsonformSchema,
+        jsonformSchema: jsonformSchema.value,
         // @ts-expect-error TODO payload coming from time update events is not an object with layers property
         newLayers: _payload,
       });
@@ -87,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.endpoint === "veda_stac"),
+    (link) =>
+      link.rel === "service" &&
+      (link.endpoint === "veda" || link.endpoint === "veda_stac"),
   );
   if (!vedaLink) {
     return;
@@ -117,12 +119,14 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl, vedaLink) {
     const itemLinks = collection.links.filter((link) => link.rel == "item");
     configs.push(
       ...itemLinks.map((link) => {
-        const endpoint = /** @type {string} */ (vedaLink.endpoint === "veda_stac" ? link.id : link["cog_href"]);
+        const endpoint = /** @type {string} */ (
+          vedaLink.endpoint === "veda_stac" ? link.id : link["cog_href"]
+        );
         return {
-        endpoint,
-        datetime: /** @type string **/ (link[datetimeProperty]),
-      }
-    })
+          endpoint,
+          datetime: /** @type string **/ (link[datetimeProperty]),
+        };
+      }),
     );
   }
 

package/widgets/EodashProcess/methods/handling.js

@@ -12,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";
@@ -30,7 +34,6 @@ import { getLayers } from "@/store/actions";
  * @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
@@ -41,7 +44,6 @@ export async function initProcess({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -64,25 +66,27 @@ 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(),
-      });
-    }
+    let newJsonForm = null;
+    newJsonForm = await updateJsonformIdentifier({
+      jsonformSchema: updatedJsonform,
+      newLayers: getLayers(),
+    });
     if (enableCompare) {
-      updatedJsonform = updateJsonformSchemaTarget(updatedJsonform);
+      newJsonForm = updateJsonformSchemaTarget(newJsonForm);
     }
-    jsonformSchema.value = updatedJsonform;
+    // trigger jsonform update in next tick
+    jsonformSchema.value = null;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    jsonformSchema.value = newJsonForm;
   }
 }
 
@@ -92,11 +96,12 @@ export async function initProcess({
  * @export
  * @async
  * @param {Object} params
- * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema params.jsonformSchema
+ * @param {Record<string,any> | null} params.jsonformSchema params.jsonformSchema
  * @param {Record<string, any>[] | undefined} params.newLayers params.newLayers
+ * @returns {Promise<Record<string,any> | null | undefined>} updated jsonform schema
  */
 export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
-  const form = jsonformSchema.value;
+  const form = jsonformSchema;
   if (!form) {
     return;
   }
@@ -128,9 +133,8 @@ export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
         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);
+        if (layer.type === "Group" && Array.isArray(layer.layers)) {
+          traverseLayers(layer.layers);
         } else {
           if (layer.properties?.id?.startsWith(layerId)) {
             matchedLayerId = layer.properties.id;
@@ -142,16 +146,15 @@ export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
     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;
+      return form;
     } else {
-      throw new Error(
+      console.warn(
         `Could not find matching layer for processing form with id: ${layerId}`,
       );
+      return null;
     }
   }
+  return form;
 }
 
 /**
@@ -161,8 +164,6 @@ export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
  * @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
@@ -173,8 +174,6 @@ export async function handleProcesses({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
-  chartData,
   isPolling,
   processResults,
   mapElement,
@@ -183,6 +182,7 @@ export async function handleProcesses({
   if (!jsonformEl.value || !jsonformSchema.value || !selectedStac.value) {
     return;
   }
+  const enableCompare = mapElement?.id === "compare";
 
   log.debug("Processing...");
   loading.value = true;
@@ -204,12 +204,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,
@@ -217,19 +219,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 (Object.keys(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,
@@ -280,23 +282,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;
 }
@@ -315,8 +318,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

@@ -543,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,
@@ -564,7 +564,7 @@ export const applyProcessLayersToMap = (mapElement, processLayers) => {
 };
 /**
  * Updates the jsonform schema to target the compare map
- * @param {import("json-schema").JSONSchema7 | null | undefined} jsonformSchema
+ * @param {Record<string,any> | null | undefined} jsonformSchema
  */
 export function updateJsonformSchemaTarget(jsonformSchema) {
   if (!jsonformSchema) {
@@ -574,7 +574,5 @@ export function updateJsonformSchemaTarget(jsonformSchema) {
     "eox-map#main",
     "eox-map#compare",
   );
-  return /** @type {import("json-schema").JSONSchema7} */ (
-    JSON.parse(stringified)
-  );
+  return JSON.parse(stringified);
 }

package/widgets/EodashStacInfo.vue

@@ -6,9 +6,7 @@
       .body="body"
       .featured="featured"
       .footer="footer"
-      .styleOverride="styleOverride"
       .header="header"
-      .subheader="subheader"
       .tags="tags"
       style="--color-primary-lighter: none"
     >
@@ -20,25 +18,12 @@
 import "@eox/stacinfo";
 import { currentUrl } from "@/store/states";
 
-const {
-  allowHtml,
-  featured,
-  footer,
-  header,
-  body,
-  styleOverride,
-  subheader,
-  tags,
-} = defineProps({
+const { allowHtml, featured, footer, header, body, tags } = defineProps({
   allowHtml: {
     type: Boolean,
     default: true,
   },
 
-  styleOverride: {
-    type: String,
-    default: "",
-  },
   header: {
     /** @type {import("vue").PropType<string[]>}  */
     type: Array,
@@ -49,15 +34,17 @@ const {
     type: Array,
     default: () => ["themes"],
   },
-  subheader: {
-    /** @type {import("vue").PropType<string[]>}  */
-    type: Array,
-    default: () => [],
-  },
   body: {
     /** @type {import("vue").PropType<string[]>}  */
     type: Array,
-    default: () => ["satellite", "sensor", "agency", "extent"],
+    default: () => [
+      "satellite",
+      "sensor",
+      "insituSources",
+      "otherSources",
+      "agency",
+      "extent",
+    ],
   },
   featured: {
     /** @type {import("vue").PropType<string[]>}  */
@@ -67,7 +54,7 @@ const {
   footer: {
     /** @type {import("vue").PropType<string[]>}  */
     type: Array,
-    default: () => ["sci:citation"],
+    default: () => ["sci:citation", "sci:doi", "sci:publication"],
   },
 });
 </script>