@eodash/eodash 5.4.0 → 5.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.4.0",
+  "version": "5.5.1",
   "type": "module",
   "types": "./dist/types/core/client/types.d.ts",
   "files": [
@@ -65,71 +65,70 @@
     "docs:generate": "npm run build:cli && npm run build:types && typedoc --options typedoc.config.json"
   },
   "dependencies": {
-    "@eox/chart": "^1.0.1",
+    "@eox/chart": "^1.1.0",
     "@eox/drawtools": "^1.1.5",
     "@eox/geosearch": "^1.1.0",
-    "@eox/itemfilter": "^1.13.0",
-    "@eox/jsonform": "^1.4.2",
-    "@eox/layercontrol": "^1.3.1",
+    "@eox/itemfilter": "^1.13.3",
+    "@eox/jsonform": "^1.8.0",
+    "@eox/layercontrol": "^1.4.0",
     "@eox/layout": "^1.0.0",
-    "@eox/map": "^1.26.2",
+    "@eox/map": "^2.0.2",
     "@eox/stacinfo": "^1.0.2",
-    "@eox/timecontrol": "^1.0.2",
+    "@eox/timecontrol": "^2.1.0",
     "@eox/timeslider": "https://pkg.pr.new/EOX-A/EOxElements/@eox/timeslider@9873028",
-    "@eox/ui": "^0.4.0",
+    "@eox/ui": "^0.5.1",
     "@mdi/js": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vueuse/core": "^13.9.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vueuse/core": "^14.1.0",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
-    "axios": "^1.12.2",
-    "axios-cache-interceptor": "^1.8.3",
+    "axios": "^1.13.2",
+    "axios-cache-interceptor": "^1.10.0",
     "color-legend-element": "^1.3.0",
-    "commander": "^14.0.1",
-    "core-js": "^3.45.1",
+    "commander": "^14.0.2",
+    "core-js": "^3.47.0",
     "dotenv": "^17.2.3",
-    "hyparquet": "^1.20.1",
+    "hyparquet": "^1.23.3",
     "loglevel": "^1.9.2",
     "mustache": "^4.2.0",
-    "pinia": "^3.0.3",
-    "proj4": "^2.19.10",
-    "sass": "^1.93.2",
+    "pinia": "^3.0.4",
+    "proj4": "^2.20.2",
+    "sass": "^1.97.1",
     "stac-js": "^0.1.9",
     "stac-ts": "^1.0.4",
     "v-calendar": "3.0.0",
-    "vega": "^5.33.0",
     "vega-embed": "^6.29.0",
     "vega-lite": "^5.23.0",
-    "vite": "^6.3.6",
+    "vite": "^7.3.0",
     "vite-plugin-vuetify": "^2.1.2",
-    "vue": "^3.5.17",
-    "vuetify": "^3.10.5",
+    "vue": "^3.5.25",
+    "vuetify": "^3.11.4",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.28.4",
+    "@babel/types": "^7.28.5",
     "@eox/eslint-config": "^2.0.0",
-    "@pinia/testing": "^1.0.2",
+    "@pinia/testing": "^1.0.3",
     "@types/json-schema": "^7.0.15",
     "@types/mustache": "^4.2.6",
-    "@types/node": "^24.7.0",
+    "@types/node": "^25.0.3",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
-    "cypress": "^14.5.4",
-    "eslint": "^9.37.0",
+    "cypress": "^15.8.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-vue": "^9.33.0",
-    "pkg-pr-new": "^0.0.54",
-    "prettier": "^3.6.2",
-    "rollup": "^4.52.4",
+    "pkg-pr-new": "^0.0.62",
+    "prettier": "^3.7.4",
+    "rollup": "^4.54.0",
     "terminate": "^2.8.0",
     "tsc-alias": "^1.8.16",
-    "typedoc": "^0.28.13",
+    "typedoc": "^0.28.15",
     "typedoc-plugin-markdown": "^4.9.0",
-    "typedoc-plugin-vue": "^1.5.0",
+    "typedoc-plugin-vue": "^1.5.1",
     "typedoc-vitepress-theme": "^1.1.2",
     "typescript": "^5.9.3",
     "vitepress": "^1.6.4",
-    "vitest": "^3.2.4",
-    "vue-tsc": "3.0.1"
+    "vitest": "^4.0.16",
+    "vue-tsc": "3.1.8"
   },
   "engines": {
     "node": ">=20.15.1"

package/templates/baseConfig.js

@@ -13,6 +13,20 @@ const baseConfig = {
   stacEndpoint: {
     endpoint:
       "https://esa-eodashboards.github.io/eodashboard-catalog/trilateral/catalog.json",
+    // "http://gtif-cerulean.github.io/cerulean-catalog/cerulean/catalog.json",
+    // "https://gtif-ukif.github.io/gtif-ukif-catalog/gtif-ukif/catalog.json",
+    // "https://esa-eodashboards.github.io/RACE-catalog/RACE/catalog.json",
+    // "https://gtif-austria.github.io/public-catalog/GTIF-Austria/catalog.json",
+    // "http://0.0.0.0:8000/baltic/catalog.json",
+    // "http://0.0.0.0:8000/gtif-ukif/catalog.json",
+    // "http://0.0.0.0:8002/RACE/catalog.json",
+    // "http://0.0.0.0:8000/trilateral/catalog.json",
+    // "http://0.0.0.0:8003/gtif-ukif/catalog.json",
+    // "http://0.0.0.0:8002/cerulean/catalog.json",
+    // "http://0.0.0.0:8001/trilateral/catalog.json",
+    // "http://0.0.0.0:8001/GTIF-Austria/catalog.json",
+    // api: true,
+    // rasterEndpoint: "https://api.explorer.eopf.copernicus.eu/raster/",
     api: false,
   },
   brand: {

package/templates/compare.js

@@ -1,4 +1,4 @@
-import { includesProcess } from "@/store/actions";
+import { includesProcess, shouldShowChartWidget } from "@/store/actions";
 
 /** @type {import("@/types").Template} */
 export default {
@@ -118,18 +118,45 @@ export default {
           },
         },
     },
+    {
+      defineWidget: () =>
+        shouldShowChartWidget() && {
+          id: "ProcessResultChart",
+          type: "internal",
+          title: "Chart",
+          layout: { x: 0, y: 0, w: 6, h: 8 },
+          widget: {
+            name: "EodashChart",
+          },
+        },
+    },
+    {
+      defineWidget: () =>
+        shouldShowChartWidget(true) && {
+          id: "ProcessResultChartCompare",
+          type: "internal",
+          title: "Compare Chart",
+          layout: { x: 6, y: 0, w: 6, h: 8 },
+          widget: {
+            name: "EodashChart",
+            properties: {
+              enableCompare: true,
+            },
+          },
+        },
+    },
     {
       defineWidget: (selectedSTAC) => {
         return selectedSTAC
           ? {
               id: "expert-Datepicker",
               type: "internal",
-              layout: { x: 4, y: 7, w: 4, h: 5 },
+              layout: { x: 4, y: 3, w: 4, h: 9 },
               title: "Date",
               widget: {
                 name: "EodashDatePicker",
                 properties: {
-                  hintText: `<b>Hint:</b> closest available date is displayed <br />
+                  hintText: `<b>Hint:</b> closest available date is displayed<br />
                                 on map (see Analysis Layers)`,
                   toggleCalendar: true,
                 },

package/templates/expert.js

@@ -1,5 +1,5 @@
 import { mdiViewDashboard } from "@mdi/js";
-import { includesProcess } from "@/store/actions";
+import { includesProcess, shouldShowChartWidget } from "@/store/actions";
 
 /** @type {import("@/types").Template} */
 export default {
@@ -35,6 +35,7 @@ export default {
           },
           enableBackToPOIs: true,
           enableSearch: true,
+          enableGlobe: true,
           // searchParams: {
           //   countrycode: "gb,ie,fr"
           //   bounds: "-84.26514,41.58998,-77.54150,46.14246"
@@ -75,6 +76,11 @@ export default {
       layout: { x: 0, y: 1, w: "3/3/2", h: 11 },
       widget: {
         name: "EodashLayerControl",
+        properties: {
+          cssVars: {
+            "--list-padding": "1rem",
+          },
+        },
       },
     },
     {
@@ -98,7 +104,7 @@ export default {
           ? {
               id: "expert-datepicker",
               type: "internal",
-              layout: { x: 4, y: 7, w: 4, h: 5 },
+              layout: { x: 4, y: 3, w: 4, h: 9 },
               title: "Date",
               widget: {
                 name: "EodashDatePicker",
@@ -124,5 +130,17 @@ export default {
           },
         },
     },
+    {
+      defineWidget: () =>
+        shouldShowChartWidget() && {
+          id: "ProcessResultChart",
+          type: "internal",
+          title: "Chart",
+          layout: { x: 0, y: 0, w: 12, h: 8 },
+          widget: {
+            name: "EodashChart",
+          },
+        },
+    },
   ],
 };

package/templates/lite.js

@@ -122,7 +122,7 @@ export default {
           ? {
               id: "light-datepicker",
               type: "internal",
-              layout: { x: 4, y: 7, w: 4, h: 5 },
+              layout: { x: 4, y: 3, w: 4, h: 9 },
               title: "Date",
               widget: {
                 name: "EodashDatePicker",

package/widgets/EodashChart.vue

@@ -0,0 +1,139 @@
+<template>
+  <div ref="container">
+    <div class="chart-frame">
+      <button
+        v-if="usedChartData && usedChartSpec"
+        class="chart-toggle"
+        @click="toggleLayout"
+        v-tooltip="areChartsSeparateLayout ? 'Minimize' : 'Maximize'"
+      >
+        <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true">
+          <path :d="toggleIcon" />
+        </svg>
+      </button>
+      <eox-chart
+        class="pa-2"
+        v-if="usedChartData && usedChartSpec"
+        .spec="toRaw(usedChartSpec)"
+        :key="chartRenderKey"
+        .dataValues="toRaw(usedChartData)"
+        @click:item="onChartClick"
+        :style="chartStyles"
+        .opt="vegaEmbedOptions"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import "@eox/chart";
+import {
+  computed,
+  toRaw,
+  useTemplateRef,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import { onChartClick } from "./EodashProcess/methods/handling";
+import {
+  chartData,
+  compareChartData,
+  chartSpec,
+  compareChartSpec,
+  areChartsSeparateLayout,
+} from "@/store/states";
+import { getOverlayParent } from "@/utils";
+import { mdiArrowCollapse, mdiArrowExpand } from "@mdi/js";
+
+const { enableCompare, vegaEmbedOptions } = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  vegaEmbedOptions: {
+    type: Object,
+    default() {
+      return { actions: true };
+    },
+  },
+});
+
+const usedChartData = computed(() => {
+  return enableCompare ? compareChartData.value : chartData.value;
+});
+
+const usedChartSpec = computed(() => {
+  return enableCompare ? compareChartSpec.value : chartSpec.value;
+});
+
+const chartRenderKey = ref(0);
+const frameHeight = ref(225);
+const containerEl = useTemplateRef("container");
+
+/**
+@type { MutationObserver | null}
+*/
+let observer = null;
+
+onMounted(() => {
+  const el = containerEl.value;
+  if (!el) return;
+
+  const parent = el.parentElement?.parentElement;
+  if (parent) {
+    const parentHeight = parent.getBoundingClientRect().height;
+    frameHeight.value = Math.max(225, Math.floor(parentHeight));
+  }
+
+  // for mobile view, the overlay panel containing chart is initially hidden
+  // we create an observer when display of overlay is not none anymore
+  const overlay = getOverlayParent(el);
+  if (!overlay) return;
+
+  observer = new MutationObserver(async () => {
+    const style = getComputedStyle(overlay);
+    const visible = style.display !== "none";
+    if (visible) {
+      // forcibly rerender chart, otherwise size of canvas is 0
+      chartRenderKey.value = Math.random();
+    }
+  });
+
+  observer.observe(overlay, {
+    attributes: true,
+    attributeFilter: ["style", "class"],
+  });
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
+
+const chartStyles = computed(() => {
+  const styles = {
+    height: `${frameHeight.value}px`,
+  };
+  return styles;
+});
+
+const toggleIcon = computed(() =>
+  areChartsSeparateLayout.value ? mdiArrowCollapse : mdiArrowExpand,
+);
+
+function toggleLayout() {
+  areChartsSeparateLayout.value = !areChartsSeparateLayout.value;
+}
+</script>
+<style scoped>
+.chart-frame {
+  position: relative;
+}
+
+.chart-toggle {
+  position: absolute;
+  top: 18px;
+  right: 46px;
+  z-index: 2;
+  cursor: pointer;
+}
+</style>

package/widgets/EodashDatePicker.vue

@@ -310,9 +310,12 @@ function jumpDate(reverse) {
 // fixes calendar dispalcement on lib mode
 const transform = ref("");
 onMounted(() => {
+  // keeping the reactive translate just in case,
+  // but seems like static css would work as well
+  // because the visual is same both in lib and in app mode
   transform.value = document.querySelector("eo-dash")
-    ? "translate3d(50px,-80px,0)"
-    : "translate3d(0px,-80px,0)";
+    ? "translate3d(30px,-50px,0)"
+    : "translate3d(30px,-50px,0)";
 });
 
 useTransparentPanel(rootEl);

package/widgets/EodashItemCatalog/index.vue

@@ -34,7 +34,7 @@ import {
 import {
   useSearchOnMapMove,
   useRenderItemsFeatures,
-  useRenderOnFeatureHover,
+  useHighlightOnFeatureHover,
 } from "./methods/map";
 import {
   createOnFilterHandler,
@@ -139,7 +139,7 @@ useRenderItemsFeatures(currentItems);
 // Search on map move logic
 useSearchOnMapMove(itemfilterEl, props.bboxFilter);
 
-useRenderOnFeatureHover(itemfilterEl);
+useHighlightOnFeatureHover(itemfilterEl);
 
 onUnmounted(() => {
   store.selectedItem = null;

package/widgets/EodashItemCatalog/methods/map.js

@@ -23,7 +23,7 @@ export function renderItemsFeatures(features) {
       },
       layers: [],
     };
-    mapEl.value.layers = [analysisLayers, ...mapEl.value.layers.reverse()];
+    mapEl.value.layers = [...mapEl.value.layers, analysisLayers];
   }
 
   const stacItemsLayer = {
@@ -68,8 +68,8 @@ export function renderItemsFeatures(features) {
     return;
   } else {
     //@ts-expect-error todo
-    analysisLayers.layers.unshift(stacItemsLayer);
-    mapEl.value.layers = [...mapEl.value.layers].reverse();
+    analysisLayers.layers.push(stacItemsLayer);
+    mapEl.value.layers = [...mapEl.value.layers];
   }
 }
 
@@ -101,21 +101,20 @@ export const useSearchOnMapMove = (itemFilter, bboxFilter) => {
  * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
  */
 export const useRenderItemsFeatures = (currentItems) => {
-  const renderOnUpdate = () =>
-    useOnLayersUpdate(() => {
-      // consider cases where this is not needed
-      renderItemsFeatures(currentItems.value);
-    });
   onMounted(() => {
     renderItemsFeatures(currentItems.value);
-    renderOnUpdate();
+  });
+
+  useOnLayersUpdate(() => {
+    // consider cases where this is not needed
+    renderItemsFeatures(currentItems.value);
   });
 };
 /**
  *
  * @param {import("vue").Ref<any>} itemfilterEl
  */
-export function useRenderOnFeatureHover(itemfilterEl) {
+export function useHighlightOnFeatureHover(itemfilterEl) {
   /**
    *
    * @param {CustomEvent} evt