@eodash/eodash 5.0.0-rc.1.6 → 5.0.0-rc.2

package/dist/types/widgets/EodashProcess.vue.d.ts

@@ -1,4 +1,5 @@
 declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
+    container: HTMLDivElement;
     jsonformEl: unknown;
 }, HTMLDivElement>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-rc.1.6",
+  "version": "5.0.0-rc.2",
   "type": "module",
   "types": "./dist/types/core/client/types.d.ts",
   "files": [
@@ -62,10 +62,10 @@
     "@eox/chart": "^0.3.1",
     "@eox/drawtools": "^0.13.3",
     "@eox/itemfilter": "^1.7.1",
-    "@eox/jsonform": "0.11.3-dev.1734708668.0",
-    "@eox/layercontrol": "^0.28.2-dev.1736966655.0",
+    "@eox/jsonform": "^0.12.2",
+    "@eox/layercontrol": "^0.29.0",
     "@eox/layout": "^0.3.0",
-    "@eox/map": "^1.19.1",
+    "@eox/map": "^1.19.2",
     "@eox/stacinfo": "^0.6.1",
     "@eox/timecontrol": "^0.12.2",
     "@mdi/js": "^7.4.47",
@@ -76,45 +76,45 @@
     "axios-cache-interceptor": "^1.6.2",
     "color-legend-element": "^1.3.0",
     "commander": "^12.1.0",
-    "core-js": "^3.39.0",
+    "core-js": "^3.40.0",
     "loglevel": "^1.9.2",
     "mustache": "^4.2.0",
-    "pinia": "^2.3.0",
-    "sass": "^1.83.0",
+    "pinia": "^2.3.1",
+    "sass": "^1.83.4",
     "stac-js": "^0.0.9",
     "stac-ts": "^1.0.4",
     "v-calendar": "3.0.0",
     "vega": "^5.30.0",
     "vega-embed": "^6.29.0",
     "vega-lite": "^5.23.0",
-    "vite": "^6.0.5",
+    "vite": "^6.0.11",
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "^3.5.0",
-    "vuetify": "^3.7.6",
+    "vuetify": "^3.7.7",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.26.3",
+    "@babel/types": "^7.26.5",
     "@eox/eslint-config": "^2.0.0",
     "@pinia/testing": "^0.1.7",
     "@types/mustache": "^4.2.5",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.7",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
     "cypress": "^13.17.0",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-vue": "^9.32.0",
     "prettier": "^3.4.2",
-    "rollup": "^4.28.1",
+    "rollup": "^4.31.0",
     "terminate": "^2.8.0",
     "tsc-alias": "^1.8.10",
-    "typedoc": "^0.27.5",
-    "typedoc-plugin-markdown": "^4.3.3",
+    "typedoc": "^0.27.6",
+    "typedoc-plugin-markdown": "^4.4.1",
     "typedoc-plugin-vue": "^1.3.0",
-    "typedoc-vitepress-theme": "^1.1.1",
-    "typescript": "^5.7.2",
+    "typedoc-vitepress-theme": "^1.1.2",
+    "typescript": "^5.7.3",
     "unplugin-fonts": "^1.3.1",
-    "vitepress": "^1.5.0",
+    "vitepress": "^1.6.2",
     "vitest": "^1.6.0",
     "vue-tsc": "2.2.0"
   },
@@ -122,6 +122,6 @@
     "node": ">=20.15.1"
   },
   "bin": {
-    "eodash": "dist/node/cli.js"
+    "eodash": "./dist/node/cli.js"
   }
 }

package/widgets/EodashDatePicker.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="rootRef" class="datePicker">
     <VCDatePicker
+      ref="datePicker"
       v-model.number="currentDate"
       :attributes="attributes"
       :masks="masks"
@@ -80,7 +81,8 @@
           >
             <input
               v-if="!hideInputField"
-              :value="new Date(currentDate).toLocaleDateString()"
+              :value="maskedCurrentDate"
+              @change="onInputChange"
               class="flex-grow px-1 py-1 dark:bg-gray-700"
               style="
                 margin: 1px;
@@ -112,16 +114,29 @@
 import { DatePicker as VCDatePicker } from "v-calendar";
 import { useDisplay } from "vuetify";
 import "v-calendar/style.css";
-import { watch, reactive, ref, customRef, toRef, onMounted } from "vue";
+import {
+  watch,
+  reactive,
+  ref,
+  customRef,
+  toRef,
+  onMounted,
+  computed,
+  useTemplateRef,
+} from "vue";
 import { useSTAcStore } from "@/store/stac";
 import { datetime } from "@/store/states";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
-import { eodashCollections } from "@/utils/states";
+import { eodashCollections, collectionsPalette } from "@/utils/states";
 import log from "loglevel";
 import { makePanelTransparent } from "@/composables";
 
 const { lgAndDown } = useDisplay();
 
+const rootEl = useTemplateRef("rootRef");
+
+const datePickerEl = useTemplateRef("datePicker");
+
 // holds the number value of the datetime
 const currentDate = customRef((track, trigger) => ({
   get() {
@@ -132,7 +147,13 @@ const currentDate = customRef((track, trigger) => ({
   set(num) {
     trigger();
     log.debug("Datepicker setting currentDate", datetime.value);
-    datetime.value = new Date(num).toISOString();
+    const date = new Date(num);
+    datetime.value = date.toISOString();
+    //@ts-expect-error supports move method https://vcalendar.io/datepicker/basics.html#basics
+    datePickerEl.value?.move({
+      month: date.getMonth() + 1,
+      year: date.getFullYear(),
+    });
   },
 }));
 
@@ -140,6 +161,28 @@ const masks = ref({
   input: "YYYY-MM-DD",
 });
 
+/** @param {Date} date */
+const formatDate = (date) => {
+  const years = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${years}-${month < 10 ? "0" + month : month}-${
+    day < 10 ? "0" + day : day
+  }`;
+};
+/**
+ *
+ * @param e {Event}
+ */
+const onInputChange = (e) => {
+  currentDate.value = new Date(
+    /** @type {HTMLInputElement} */ (e.target)?.value,
+  ).getTime();
+};
+const maskedCurrentDate = computed(() =>
+  formatDate(new Date(currentDate.value)),
+);
+
 defineProps({
   hintText: {
     type: String,
@@ -171,9 +214,6 @@ defineProps({
  */
 const attributes = reactive([]);
 
-/** @type {import("vue").Ref<HTMLDivElement|null>} */
-const rootRef = ref(null);
-
 const selectedStac = toRef(useSTAcStore(), "selectedStac");
 
 watch(
@@ -181,20 +221,13 @@ watch(
   async (updatedStac, previousStac) => {
     if (updatedStac && previousStac?.id !== updatedStac.id) {
       log.debug("Datepicker selected STAC change triggered");
-      const wongPalette = [
-        "#009E73",
-        "#0072B2",
-        "#E69F00",
-        "#CC79A7",
-        "#56B4E9",
-        "#D55E00",
-      ];
       // remove old values
       attributes.splice(0, attributes.length);
 
       for (let idx = 0; idx < eodashCollections.length; idx++) {
         log.debug("Retrieving dates", eodashCollections[idx]);
         await eodashCollections[idx].fetchCollection();
+
         const dates = [
           ...new Set(
             eodashCollections[idx].getItems()?.reduce((valid, it) => {
@@ -210,7 +243,8 @@ watch(
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
           dot: {
             style: {
-              backgroundColor: wongPalette[idx % wongPalette.length],
+              backgroundColor:
+                collectionsPalette[idx % collectionsPalette.length],
             },
           },
           dates,
@@ -261,7 +295,7 @@ onMounted(() => {
     : "translate3d(0px,-80px,0)";
 });
 
-makePanelTransparent(rootRef);
+makePanelTransparent(rootEl);
 </script>
 <style>
 @media (min-width: 960px) {

package/widgets/EodashMap.vue

@@ -14,7 +14,7 @@
       .layers="eoxMapLayers"
     >
       <eox-map-tooltip
-        v-show="tooltipProperties?.length"
+        :style="tooltipStyles"
         .propertyTransform="tooltipPropertyTransform"
       />
     </eox-map>
@@ -62,8 +62,13 @@ const props = defineProps({
     type: Number,
     default: 4,
   },
+  zoomToExtent: {
+    type: Boolean,
+    default: true,
+  },
 });
-/** @type {import("vue").Ref<import("@/types").EodashStyleJson["tooltip"]>} */
+
+/** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
 const tooltipProperties = ref([]);
 
 const initialCenter = toRaw([
@@ -129,6 +134,7 @@ onMounted(() => {
       datetime,
       eoxMapCompareLayers,
       eoxMap,
+      false,
     );
   }
 
@@ -140,9 +146,15 @@ onMounted(() => {
     datetime,
     eoxMapLayers,
     compareMap,
+    props.zoomToExtent,
   );
 });
+
 useUpdateTooltipProperties(eodashCollections, tooltipProperties);
+
+const tooltipStyles = computed(() => ({
+  visibility: tooltipProperties.value.length ? "visible" : "hidden",
+}));
 /**
  * @param {{key:string; value:string}} param
  * @returns {{key:string; value?:string} | undefined}

package/widgets/EodashProcess.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="process-container">
+  <div ref="container" class="process-container">
     <eox-jsonform
       v-if="jsonformSchema"
       ref="jsonformEl"
@@ -10,6 +10,7 @@
       v-if="isProcessed && chartSpec"
       .spec="toRaw(chartSpec)"
       .dataValues="toRaw(chartData)"
+      :style="chartStyles"
     />
     <v-container>
       <span>
@@ -38,7 +39,7 @@ import "@eox/chart";
 import "@eox/drawtools";
 import "@eox/jsonform";
 
-import { onMounted, ref, toRaw } from "vue";
+import { computed, onMounted, ref, toRaw, useTemplateRef } from "vue";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
 import { mapEl } from "@/store/states";
@@ -66,6 +67,9 @@ const jsonformSchema = ref(null);
 
 /** @type {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} */
 const jsonformEl = ref(null);
+
+const containerEl = useTemplateRef("container");
+
 const loading = ref(false);
 
 const autoExec = ref(false);
@@ -135,8 +139,8 @@ onMounted(async () => {
   }
 });
 
-useOnLayersUpdate(
-  async () =>
+useOnLayersUpdate(async (evt, _payload) => {
+  if (evt === "layers:updated") {
     await initProcess({
       //@ts-expect-error TODO
       selectedStac,
@@ -147,8 +151,9 @@ useOnLayersUpdate(
       processResults,
       loading,
       isPolling,
-    }),
-);
+    });
+  }
+});
 
 const startProcess = async () => {
   const errors = jsonformEl.value?.editor.validate();
@@ -172,13 +177,22 @@ const startProcess = async () => {
   isProcessed.value = true;
 };
 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;
+});
 </script>
 <style>
-.chart {
-  height: 400px;
-  width: 100%;
-}
-
 .process-container {
   height: 100%;
   overflow-y: auto;