@eodash/eodash 5.4.0 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "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.3.2",
     "@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.0.2",
     "@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,7 +13,8 @@ const baseConfig = {
   stacEndpoint: {
     endpoint:
       "https://esa-eodashboards.github.io/eodashboard-catalog/trilateral/catalog.json",
-    api: false,
+      // "https://api.explorer.eopf.copernicus.eu/stac",
+    // api: true,
   },
   brand: {
     noLayout: true,

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,6 +118,33 @@ 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

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",
+          },
+        },
       },
     },
     {
@@ -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/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="pt-0"
+        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: 38px;
+  right: 12px;
+  z-index: 2;
+  cursor: pointer;
+}
+</style>

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

package/widgets/EodashMap/EodashMapBtns.vue

@@ -1,24 +1,24 @@
 <template>
   <div ref="rootRef" class="map-buttons d-flex flex-column align-end">
     <button
-      v-if="enableZoom"
+      v-if="enableZoom && !isGlobe"
       class="primary small circle small-elevate"
       @click="onMapZoomIn"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg>
+      </i>
       <div class="tooltip left">Zoom in</div>
     </button>
 
     <button
-      v-if="enableZoom"
+      v-if="enableZoom && !isGlobe"
       class="primary small circle small-elevate"
       @click="onMapZoomOut"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg>
+      </i>
       <div class="tooltip left">Zoom out</div>
     </button>
 
@@ -28,8 +28,8 @@
       @click="showMapState = !showMapState"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiMapPlus" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiMapPlus" /></svg>
+      </i>
       <div class="tooltip left">Extract storytelling configuration</div>
     </button>
     <ExportState v-if="exportMap" v-model="showMapState" />
@@ -40,18 +40,18 @@
       @click="changeMapProjection(availableMapProjection)"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg>
+      </i>
       <div class="tooltip left">Change map projection</div>
     </button>
     <button
-      v-if="compareIndicators"
+      v-if="compareIndicators && !isGlobe"
       class="primary small circle small-elevate"
-      @click="onCompareClick"
+      @click="onCompareClick(compareIndicators)"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg>
+      </i>
       <div class="tooltip left">Compare mode</div>
     </button>
     <button
@@ -61,12 +61,27 @@
     >
       <i class="small"
         ><svg viewBox="0 0 24 24">
-          <path :d="mdiStarFourPointsCircleOutline" /></svg
-      ></i>
+          <path :d="mdiStarFourPointsCircleOutline" />
+        </svg>
+      </i>
       <div class="tooltip left">Back to POIs</div>
     </button>
+    <button
+      v-if="enableGlobe && !isInCompareMode"
+      class="primary small circle small-elevate"
+      @click="switchGlobe"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24">
+          <path :d="mdiEarth" />
+        </svg>
+      </i>
+      <div class="tooltip left">
+        {{ isGlobe ? "switch to 2D" : "switch to 3D" }}
+      </div>
+    </button>
     <eox-geosearch
-      v-if="mapEl && enableSearch"
+      v-if="mapEl && !isGlobe && enableSearch"
       :for="mapEl"
       :endpoint="opencageUrl"
       :params="searchParams"
@@ -96,11 +111,12 @@
 </template>
 <script setup>
 import { useTransparentPanel } from "@/composables";
-import { changeMapProjection, setActiveTemplate } from "@/store/actions";
+import { changeMapProjection } from "@/store/actions";
 import {
   activeTemplate,
   availableMapProjection,
   comparePoi,
+  isGlobe,
   mapEl,
   poi,
 } from "@/store/states";
@@ -112,17 +128,22 @@ import {
   mdiMinus,
   mdiPlus,
   mdiStarFourPointsCircleOutline,
+  mdiEarth,
 } from "@mdi/js";
 import ExportState from "^/ExportState.vue";
-import { computed, ref, triggerRef } from "vue";
+import { computed, ref } from "vue";
 import PopUp from "^/PopUp.vue";
 import EodashItemFilter from "^/EodashItemFilter.vue";
 import { useDisplay } from "vuetify";
-import { useSTAcStore } from "@/store/stac";
-import { storeToRefs } from "pinia";
 import { loadPOiIndicator } from "^/EodashProcess/methods/handling";
-import { easeOut } from "ol/easing.js";
-
+import {
+  onCompareClick,
+  onSelectCompareIndicator,
+  switchGlobe,
+  onMapZoomOut,
+  onMapZoomIn,
+  showCompareIndicators,
+} from "./methods/btns";
 import "@eox/geosearch";
 
 const {
@@ -133,6 +154,7 @@ const {
   enableSearch,
   enableZoom,
   searchParams,
+  enableGlobe,
 } = defineProps({
   exportMap: {
     type: Boolean,
@@ -167,22 +189,26 @@ const {
     type: Boolean,
     default: true,
   },
+  enableGlobe: {
+    type: Boolean,
+    default: true,
+  },
 });
-const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
-const { resetSelectedCompareSTAC } = useSTAcStore();
+
 const { smAndDown } = useDisplay();
 const popupWidth = computed(() => (smAndDown.value ? "80%" : "70%"));
 const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
 
 const showMapState = ref(false);
-const showCompareIndicators = ref(false);
+const isInCompareMode = computed(
+  () =>
+    activeTemplate.value ===
+    ((typeof compareIndicators === "object" &&
+      compareIndicators?.compareTemplate) ||
+      "compare"),
+);
 const compareIcon = computed(() =>
-  activeTemplate.value ===
-  ((typeof compareIndicators === "object" &&
-    compareIndicators?.compareTemplate) ||
-    "compare")
-    ? mdiCompareRemove
-    : mdiCompare,
+  isInCompareMode.value ? mdiCompareRemove : mdiCompare,
 );
 const itemFilterConfig = {
   enableHighlighting: false,
@@ -197,74 +223,13 @@ const itemFilterConfig = {
     compareIndicators.itemFilterConfig),
 };
 
-const onCompareClick = () => {
-  showCompareIndicators.value =
-    activeTemplate.value !==
-    ((typeof compareIndicators === "object" &&
-      compareIndicators.compareTemplate) ||
-      "compare");
-
-  const fallbackTemplate =
-    (typeof compareIndicators === "object" &&
-      compareIndicators.fallbackTemplate) ||
-    "expert";
-  selectedCompareStac.value = null;
-  resetSelectedCompareSTAC();
-  setActiveTemplate(fallbackTemplate);
-  triggerRef(selectedStac);
-};
-
 /** @type {import("vue").Ref<HTMLDivElement|null>} */
 const rootRef = ref(null);
 
-const onSelectCompareIndicator = () => {
-  const compareTemplate =
-    (typeof compareIndicators === "object" &&
-      compareIndicators.compareTemplate) ||
-    "compare";
-  setActiveTemplate(compareTemplate);
-  showCompareIndicators.value = !showCompareIndicators.value;
-};
-
 useTransparentPanel(rootRef);
 
-const onMapZoomOut = () => {
-  const map = mapEl.value?.map;
-  const currentZoom = map?.getView().getZoom();
-  if (currentZoom !== undefined && currentZoom !== null) {
-    const view = map?.getView();
-
-    if (view !== undefined && view.getZoom()) {
-      view.animate({
-        zoom: currentZoom - 1,
-        duration: 250,
-        easing: easeOut,
-      });
-    }
-  }
-};
-
-const onMapZoomIn = () => {
-  const map = mapEl.value?.map;
-  const currentZoom = map?.getView().getZoom();
-  if (currentZoom !== undefined && currentZoom !== null) {
-    const view = map?.getView();
-
-    if (view !== undefined && view.getZoom()) {
-      view.animate({
-        zoom: currentZoom + 1,
-        duration: 250,
-        easing: easeOut,
-      });
-    }
-  }
-};
 const opencageApiKey = process.env.EODASH_OPENCAGE || "NO_KEY_FOUND";
 const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencageApiKey}`;
-
-/*const menu = document
-  .querySelector("eox-geosearch")
-  .renderRoot.querySelector("menu");*/
 </script>
 
 <style scoped>