@eodash/eodash 5.4.0 → 5.5.0

package/dist/client/{async-D4G-FOIc.js → async-D6Lvv-fT.js}

@@ -1,5 +1,5 @@
-import { s as getCompareLayers, q as getLayers, W as replaceLayer, b as extractLayerConfig, x as extractLayerLegend, m as mergeGeojsons, d as axios, X as axios$1, I as compareIndicator, G as indicator } from './helpers-CsjKHAcK.js';
-import { P as useEmitLayersUpdate } from './asWebComponent-Bw03Jutr.js';
+import { x as getCompareLayers, w as getLayers, $ as replaceLayer, b as extractLayerConfig, v as extractLayerLegend, m as mergeGeojsons, d as axios, a0 as axios$1, I as compareIndicator, G as indicator } from './helpers-BBSdbOmv.js';
+import { P as useEmitLayersUpdate } from './asWebComponent-DaIxULaA.js';
 import { isMulti } from '@eox/jsonform/src/custom-inputs/spatial/utils';
 import log from 'loglevel';
 
@@ -537,7 +537,7 @@ 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,
@@ -679,7 +679,7 @@ async function updateJobsStatus(jobs, indicator) {
       new Date(a.job_start_datetime).getTime()
     );
   });
-  jobs.value = jobResults;
+  jobs.value.splice(0, jobs.value.length, ...jobResults);
 }
 
 /**

package/dist/client/eo-dash.js

@@ -1,2 +1,2 @@
-export { aI as EodashConstructor, aH as register, aJ as store } from './asWebComponent-Bw03Jutr.js';
+export { aJ as EodashConstructor, aI as register, aK as store } from './asWebComponent-DaIxULaA.js';
 import 'vue';

package/dist/client/{forwardRefs-CRMFoNYN.js → forwardRefs--IccUBdR.js}

@@ -1,17 +1,18 @@
-import { computed, watch, onScopeDispose, nextTick, ref, watchEffect, effectScope, inject, mergeProps, shallowRef, onMounted, toRef, reactive, provide, toValue, toRaw, readonly, warn, onBeforeUnmount, createElementVNode, Fragment, createVNode, Teleport, withDirectives, vShow, Transition } from 'vue';
-import { ar as isOn, as as eventName, p as propsFactory, at as destructComputed, au as parseAnchor, av as flipSide, aw as flipAlign, ax as flipCorner, ay as CircularBuffer, az as deepEqual, X as consoleError, aA as getAxis, o as convertToUnit, v as clamp, ao as IN_BROWSER, y as useToggleScope, aB as defer, ak as getCurrentInstance, aC as templateRef, aD as matchesSelector, D as useDisplay, q as makeThemeProps, d as makeDimensionProps, e as makeComponentProps, g as genericComponent, x as useProxiedModel, k as provideTheme, l as useRtl, f as useBackgroundColor, b as useDimension, aE as useRouter, aF as useBackButton, an as standardEasing, c as useRender } from './asWebComponent-Bw03Jutr.js';
-import { m as makeTransitionProps, M as MaybeTransition } from './transition-6MJLK-_H.js';
+import { computed, watch, onScopeDispose, nextTick, ref, watchEffect, effectScope, inject, mergeProps, toRef, toValue, shallowRef, onMounted, reactive, provide, toRaw, readonly, warn, onBeforeUnmount, createElementVNode, Fragment, createVNode, Teleport, withDirectives, vShow, Transition } from 'vue';
+import { aq as isOn, ar as eventName, p as propsFactory, as as destructComputed, at as parseAnchor, au as flipSide, av as flipAlign, aw as flipCorner, ax as CircularBuffer, ay as deepEqual, Y as consoleError, az as getAxis, o as convertToUnit, v as clamp, aA as IN_BROWSER, y as useToggleScope, aB as defer, al as getCurrentInstance, aC as templateRef, aD as matchesSelector, aE as focusableChildren, D as useDisplay, q as makeThemeProps, d as makeDimensionProps, e as makeComponentProps, g as genericComponent, $ as omit, x as useProxiedModel, k as provideTheme, l as useRtl, f as useBackgroundColor, b as useDimension, aF as useRouter, aG as useBackButton, ao as standardEasing, c as useRender } from './asWebComponent-DaIxULaA.js';
+import { m as makeTransitionProps, M as MaybeTransition } from './transition-DFr4cXu8.js';
 
 class Box {
   constructor(args) {
     const pageScale = document.body.currentCSSZoom ?? 1;
-    const factor = args instanceof DOMRect ? 1 + (1 - pageScale) / pageScale : 1;
+    const isElement = args instanceof Element;
+    const factor = isElement ? 1 + (1 - pageScale) / pageScale : 1;
     const {
       x,
       y,
       width,
       height
-    } = args;
+    } = isElement ? args.getBoundingClientRect() : args;
     this.x = x * factor;
     this.y = y * factor;
     this.width = width * factor;
@@ -53,7 +54,7 @@ function getTargetBox(target) {
       height: 0 * factor
     });
   } else {
-    return new Box(target.getBoundingClientRect());
+    return new Box(target);
   }
 }
 function getElementBox(el) {
@@ -75,20 +76,14 @@ function getElementBox(el) {
       });
     }
   } else {
-    const rect = el.getBoundingClientRect();
-    return new Box({
-      x: rect.x,
-      y: rect.y,
-      width: el.clientWidth,
-      height: el.clientHeight
-    });
+    return new Box(el);
   }
 }
 
 // Utilities
 /** @see https://stackoverflow.com/a/57876601/2074736 */
 function nullifyTransforms(el) {
-  const rect = new Box(el.getBoundingClientRect());
+  const rect = new Box(el);
   const style = getComputedStyle(el);
   const tx = style.transform;
   if (tx) {
@@ -418,7 +413,11 @@ const makeLocationStrategyProps = propsFactory({
     default: 'auto'
   },
   offset: [Number, String, Array],
-  stickToTarget: Boolean
+  stickToTarget: Boolean,
+  viewportMargin: {
+    type: [Number, String],
+    default: 12
+  }
 }, 'VOverlay-location-strategies');
 function useLocationStrategies(props, data) {
   const contentStyles = ref({});
@@ -605,7 +604,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
 
     const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
     const scrollParents = getScrollParents(data.contentEl.value);
-    const viewportMargin = 12;
+    const viewportMargin = Number(props.viewportMargin);
     if (!scrollParents.length) {
       scrollParents.push(document.documentElement);
       if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) {
@@ -625,10 +624,17 @@ function connectedLocationStrategy(data, props, contentStyles) {
       }
       return scrollBox;
     }, undefined);
-    viewport.x += viewportMargin;
-    viewport.y += viewportMargin;
-    viewport.width -= viewportMargin * 2;
-    viewport.height -= viewportMargin * 2;
+    if (props.stickToTarget) {
+      viewport.x += Math.min(viewportMargin, targetBox.x);
+      viewport.y += Math.min(viewportMargin, targetBox.y);
+      viewport.width = Math.max(viewport.width - viewportMargin * 2, targetBox.x + targetBox.width - viewportMargin);
+      viewport.height = Math.max(viewport.height - viewportMargin * 2, targetBox.y + targetBox.height - viewportMargin);
+    } else {
+      viewport.x += viewportMargin;
+      viewport.y += viewportMargin;
+      viewport.width -= viewportMargin * 2;
+      viewport.height -= viewportMargin * 2;
+    }
     let placement = {
       anchor: preferredAnchor.value,
       origin: preferredOrigin.value
@@ -739,19 +745,19 @@ function connectedLocationStrategy(data, props, contentStyles) {
 
       // shift
       if (overflows.x.before) {
-        if (!props.stickToTarget) x += overflows.x.before;
+        x += overflows.x.before;
         contentBox.x += overflows.x.before;
       }
       if (overflows.x.after) {
-        if (!props.stickToTarget) x -= overflows.x.after;
+        x -= overflows.x.after;
         contentBox.x -= overflows.x.after;
       }
       if (overflows.y.before) {
-        if (!props.stickToTarget) y += overflows.y.before;
+        y += overflows.y.before;
         contentBox.y += overflows.y.before;
       }
       if (overflows.y.after) {
-        if (!props.stickToTarget) y -= overflows.y.after;
+        y -= overflows.y.after;
         contentBox.y -= overflows.y.after;
       }
 
@@ -760,9 +766,9 @@ function connectedLocationStrategy(data, props, contentStyles) {
         const overflows = getOverflow(contentBox, viewport);
         available.x = viewport.width - overflows.x.before - overflows.x.after;
         available.y = viewport.height - overflows.y.before - overflows.y.after;
-        if (!props.stickToTarget) x += overflows.x.before;
+        x += overflows.x.before;
         contentBox.x += overflows.x.before;
-        if (!props.stickToTarget) y += overflows.y.before;
+        y += overflows.y.before;
         contentBox.y += overflows.y.before;
       }
       break;
@@ -985,11 +991,12 @@ const makeDelayProps = propsFactory({
 }, 'delay');
 function useDelay(props, cb) {
   let clearDelay = () => {};
-  function runDelay(isOpening) {
+  function runDelay(isOpening, options) {
     clearDelay?.();
-    const delay = Number(isOpening ? props.openDelay : props.closeDelay);
+    const delay = isOpening ? props.openDelay : props.closeDelay;
+    const normalizedDelay = Math.max(options?.minDelay ?? 0, Number(delay ?? 0));
     return new Promise(resolve => {
-      clearDelay = defer(delay, () => {
+      clearDelay = defer(normalizedDelay, () => {
         cb?.(isOpening);
         resolve(isOpening);
       });
@@ -998,8 +1005,8 @@ function useDelay(props, cb) {
   function runOpenDelay() {
     return runDelay(true);
   }
-  function runCloseDelay() {
-    return runDelay(false);
+  function runCloseDelay(options) {
+    return runDelay(false, options);
   }
   return {
     clearDelay,
@@ -1063,7 +1070,6 @@ function useActivator(props, _ref) {
       isActive.value = !isActive.value;
     },
     onMouseenter: e => {
-      if (e.sourceCapabilities?.firesTouchEvents) return;
       isHovered = true;
       activatorEl.value = e.currentTarget || e.target;
       runOpenDelay();
@@ -1082,7 +1088,9 @@ function useActivator(props, _ref) {
     onBlur: e => {
       isFocused = false;
       e.stopPropagation();
-      runCloseDelay();
+      runCloseDelay({
+        minDelay: 1
+      });
     }
   };
   const activatorEvents = computed(() => {
@@ -1113,13 +1121,16 @@ function useActivator(props, _ref) {
       };
     }
     if (openOnFocus.value) {
-      events.onFocusin = () => {
+      events.onFocusin = e => {
+        if (!e.target.matches(':focus-visible')) return;
         isFocused = true;
         runOpenDelay();
       };
       events.onFocusout = () => {
         isFocused = false;
-        runCloseDelay();
+        runCloseDelay({
+          minDelay: 1
+        });
       };
     }
     if (props.closeOnContentClick) {
@@ -1274,6 +1285,148 @@ function getTarget(selector, vm) {
   return target;
 }
 
+// Utilities
+// Types
+// Composables
+const makeFocusTrapProps = propsFactory({
+  retainFocus: Boolean,
+  captureFocus: Boolean,
+  /** @deprecated */
+  disableInitialFocus: Boolean
+}, 'focusTrap');
+const registry = new Map();
+let subscribers = 0;
+function onKeydown(e) {
+  const activeElement = document.activeElement;
+  if (e.key !== 'Tab' || !activeElement) return;
+  const parentTraps = Array.from(registry.values()).filter(_ref => {
+    let {
+      isActive,
+      contentEl
+    } = _ref;
+    return isActive.value && contentEl.value?.contains(activeElement);
+  }).map(x => x.contentEl.value);
+  let closestTrap;
+  let currentParent = activeElement.parentElement;
+  while (currentParent) {
+    if (parentTraps.includes(currentParent)) {
+      closestTrap = currentParent;
+      break;
+    }
+    currentParent = currentParent.parentElement;
+  }
+  if (!closestTrap) return;
+  const focusable = focusableChildren(closestTrap)
+  // excluding VListItems with tabindex="-2"
+  .filter(x => x.tabIndex >= 0);
+  if (!focusable.length) return;
+  const active = document.activeElement;
+  if (focusable.length === 1 && focusable[0].classList.contains('v-list') && focusable[0].contains(active)) {
+    e.preventDefault();
+    return;
+  }
+  const firstElement = focusable[0];
+  const lastElement = focusable[focusable.length - 1];
+  if (e.shiftKey && (active === firstElement || firstElement.classList.contains('v-list') && firstElement.contains(active))) {
+    e.preventDefault();
+    lastElement.focus();
+  }
+  if (!e.shiftKey && (active === lastElement || lastElement.classList.contains('v-list') && lastElement.contains(active))) {
+    e.preventDefault();
+    firstElement.focus();
+  }
+}
+function useFocusTrap(props, _ref2) {
+  let {
+    isActive,
+    localTop,
+    contentEl
+  } = _ref2;
+  const trapId = Symbol('trap');
+  let focusTrapSuppressed = false;
+  let focusTrapSuppressionTimeout = -1;
+  async function onPointerdown() {
+    focusTrapSuppressed = true;
+    focusTrapSuppressionTimeout = window.setTimeout(() => {
+      focusTrapSuppressed = false;
+    }, 100);
+  }
+  async function captureOnFocus(e) {
+    const before = e.relatedTarget;
+    const after = e.target;
+    document.removeEventListener('pointerdown', onPointerdown);
+    document.removeEventListener('keydown', captureOnKeydown);
+    await nextTick();
+    if (isActive.value && !focusTrapSuppressed && before !== after && contentEl.value &&
+    // We're the menu without open submenus or overlays
+    toValue(localTop) &&
+    // It isn't the document or the container body
+    ![document, contentEl.value].includes(after) &&
+    // It isn't inside the container body
+    !contentEl.value.contains(after)) {
+      const focusable = focusableChildren(contentEl.value);
+      focusable[0]?.focus();
+    }
+  }
+  function captureOnKeydown(e) {
+    if (e.key !== 'Tab') return;
+    document.removeEventListener('keydown', captureOnKeydown);
+    if (isActive.value && contentEl.value && e.target && !contentEl.value.contains(e.target)) {
+      const allFocusableElements = focusableChildren(document.documentElement);
+      if (e.shiftKey && e.target === allFocusableElements.at(0) || !e.shiftKey && e.target === allFocusableElements.at(-1)) {
+        const focusable = focusableChildren(contentEl.value);
+        if (focusable.length > 0) {
+          e.preventDefault();
+          focusable[0].focus();
+        }
+      }
+    }
+  }
+  const shouldCapture = toRef(() => isActive.value && props.captureFocus && !props.disableInitialFocus);
+  if (IN_BROWSER) {
+    watch(() => props.retainFocus, val => {
+      if (val) {
+        registry.set(trapId, {
+          isActive,
+          contentEl
+        });
+      } else {
+        registry.delete(trapId);
+      }
+    }, {
+      immediate: true
+    });
+    watch(shouldCapture, val => {
+      if (val) {
+        document.addEventListener('pointerdown', onPointerdown);
+        document.addEventListener('focusin', captureOnFocus, {
+          once: true
+        });
+        document.addEventListener('keydown', captureOnKeydown);
+      } else {
+        document.removeEventListener('pointerdown', onPointerdown);
+        document.removeEventListener('focusin', captureOnFocus);
+        document.removeEventListener('keydown', captureOnKeydown);
+      }
+    }, {
+      immediate: true
+    });
+    if (subscribers++ < 1) {
+      document.addEventListener('keydown', onKeydown);
+    }
+  }
+  onScopeDispose(() => {
+    registry.delete(trapId);
+    clearTimeout(focusTrapSuppressionTimeout);
+    document.removeEventListener('pointerdown', onPointerdown);
+    document.removeEventListener('focusin', captureOnFocus);
+    document.removeEventListener('keydown', captureOnKeydown);
+    if (--subscribers < 1) {
+      document.removeEventListener('keydown', onKeydown);
+    }
+  });
+}
+
 // Composables
 function useHydration() {
   if (!IN_BROWSER) return shallowRef(false);
@@ -1432,6 +1585,7 @@ const makeVOverlayProps = propsFactory({
   ...makeLazyProps(),
   ...makeLocationStrategyProps(),
   ...makeScrollStrategyProps(),
+  ...makeFocusTrapProps(),
   ...makeThemeProps(),
   ...makeTransitionProps()
 }, 'VOverlay');
@@ -1443,7 +1597,7 @@ const VOverlay = genericComponent()({
   inheritAttrs: false,
   props: {
     _disableGlobalStack: Boolean,
-    ...makeVOverlayProps()
+    ...omit(makeVOverlayProps(), ['disableInitialFocus'])
   },
   emits: {
     'click:outside': e => true,
@@ -1543,10 +1697,14 @@ const VOverlay = genericComponent()({
       if (!props.persistent) isActive.value = false;else animateClick();
     }
     function closeConditional(e) {
-      return isActive.value && globalTop.value && (
+      return isActive.value && localTop.value && (
       // If using scrim, only close if clicking on it rather than anything opened on top
       !props.scrim || e.target === scrimEl.value || e instanceof MouseEvent && e.shadowTarget === scrimEl.value);
     }
+    useFocusTrap(props, {
+      isActive,
+      localTop,
+      contentEl});
     IN_BROWSER && watch(isActive, val => {
       if (val) {
         window.addEventListener('keydown', onKeydown);
@@ -1672,6 +1830,7 @@ const VOverlay = genericComponent()({
       target,
       animateClick,
       contentEl,
+      rootEl: root,
       globalTop,
       localTop,
       updateLocation

package/dist/client/{handling-DTAhQuPh.js → handling-DSA67d6E.js}

@@ -1,8 +1,8 @@
 import log from 'loglevel';
-import { s as separateEndpointLinks, c as createTiffLayerDefinition, p as pollProcessStatus, e as extractAsyncResults, u as updateJobsStatus, a as creatAsyncProcessLayerDefinitions, b as getBboxProperty, f as generateTimePairs, h as updateJsonformSchemaTarget, i as extractGeometries, j as applyProcessLayersToMap, g as getDrawToolsProperty } from './async-D4G-FOIc.js';
-import { d as axios, b as extractLayerConfig, I as compareIndicator, G as indicator, y as extractCollectionUrls, H as currentCompareUrl, B as currentUrl, z as generateLinksFromItems, o as getDatetimeProperty, C as datetime, J as comparePoi, q as getLayers, D as poi } from './helpers-CsjKHAcK.js';
+import { s as separateEndpointLinks, c as createTiffLayerDefinition, p as pollProcessStatus, e as extractAsyncResults, u as updateJobsStatus, a as creatAsyncProcessLayerDefinitions, b as getBboxProperty, f as generateTimePairs, h as updateJsonformSchemaTarget, i as extractGeometries, j as applyProcessLayersToMap, g as getDrawToolsProperty } from './async-D6Lvv-fT.js';
+import { d as axios, b as extractLayerConfig, I as compareIndicator, G as indicator, y as extractCollectionUrls, H as currentCompareUrl, B as currentUrl, z as generateLinksFromItems, o as getDatetimeProperty, J as comparePoi, C as datetime, w as getLayers, Z as compareChartData, _ as chartData, O as compareChartSpec, N as chartSpec, D as poi } from './helpers-BBSdbOmv.js';
 import mustache from 'mustache';
-import { Q as isFirstLoad, E as useSTAcStore, S as readParquetItems, T as useGetSubCodeId } from './asWebComponent-Bw03Jutr.js';
+import { Q as isFirstLoad, E as useSTAcStore, T as readParquetItems, U as useGetSubCodeId } from './asWebComponent-DaIxULaA.js';
 import { toAbsolute } from 'stac-js/src/http.js';
 
 ////// --- CHARTS --- //////
@@ -17,7 +17,7 @@ import { toAbsolute } from 'stac-js/src/http.js';
  * @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]>}
  **/
 async function processCharts({
   links,
@@ -61,10 +61,48 @@ 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;
+      }
+    }
+    return [spec, dataValues];
+  }
   try {
     checkForData: for (const link of dataLinks ?? []) {
       switch (link.type) {
@@ -91,7 +129,7 @@ async function processCharts({
   } catch (e) {
     console.error("[eodash] Error while injecting Vega data", e);
   }
-  return [spec, dataValues];
+  return [structuredClone(spec), structuredClone(dataValues)];
 }
 
 /**
@@ -797,7 +835,9 @@ 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;
@@ -895,12 +935,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]),
+        };
+      }),
     );
   }
 
@@ -965,7 +1007,6 @@ function createCustomChartEndpointsHandler(callbacks) {
  * @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
@@ -976,7 +1017,6 @@ async function initProcess({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -999,10 +1039,10 @@ async function initProcess({
   resetProcess({
     loading,
     isProcessed,
-    chartSpec,
     jsonformSchema,
     isPolling,
     processResults,
+    enableCompare,
   });
 
   await jsonformEl.value?.editor.destroy();
@@ -1096,8 +1136,6 @@ 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
@@ -1108,8 +1146,6 @@ async function handleProcesses({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
-  chartData,
   isPolling,
   processResults,
   mapElement,
@@ -1118,6 +1154,7 @@ async function handleProcesses({
   if (!jsonformEl.value || !jsonformSchema.value || !selectedStac.value) {
     return;
   }
+  const enableCompare = mapElement?.id === "compare";
 
   log.debug("Processing...");
   loading.value = true;
@@ -1139,12 +1176,14 @@ 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,
@@ -1152,19 +1191,19 @@ 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,
@@ -1215,23 +1254,24 @@ 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
  */
 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;
 }
@@ -1250,8 +1290,7 @@ 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;
   }