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

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"
@@ -8,34 +9,99 @@
       class="bg-surface overflow-auto"
       style="background-color: transparent; max-width: 100%"
     >
-      <template #footer>
-        <div class="d-flex flex-row align-center justify-center pb-1">
+      <template v-if="toggleCalendar" #default="{ inputValue, inputEvents }">
+        <div
+          class="bg-surface d-flex flex-row align-center justify-center pb-1"
+          style="overflow: hidden; width: 100%"
+        >
           <v-btn
             v-if="!hideArrows"
             density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
             v-tooltip:bottom="'Set date to oldest available dataset'"
             variant="text"
             @click="jumpDate(true)"
+            class="py-2"
+            style="flex-shrink: 1"
           >
             <v-icon :icon="[mdiRayEndArrow]" />
           </v-btn>
           <div
             class="flex rounded-lg border border-gray-300 dark:border-gray-600"
-            style="margin: 2px"
+            style="margin: 2px; min-width: 0"
           >
             <input
               v-if="!hideInputField"
-              :value="new Date(currentDate).toLocaleDateString()"
-              style="margin: 1px"
+              :value="inputValue"
+              v-on="inputEvents"
               class="flex-grow px-1 py-1 dark:bg-gray-700"
+              style="
+                margin: 1px;
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
             />
           </div>
           <v-btn
             v-if="!hideArrows"
             density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
             variant="text"
             v-tooltip:bottom="'Set date to latest available dataset'"
             @click="jumpDate(false)"
+            class="py-2"
+            style="flex-shrink: 1"
+          >
+            <v-icon :icon="[mdiRayStartArrow]" />
+          </v-btn>
+        </div>
+      </template>
+      <template v-else #footer>
+        <div
+          class="d-flex flex-row align-center justify-center pb-1"
+          style="overflow: hidden; width: 100%"
+        >
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
+            v-tooltip:bottom="'Set date to oldest available dataset'"
+            variant="text"
+            @click="jumpDate(true)"
+            class="py-2"
+            style="flex-shrink: 1"
+          >
+            <v-icon :icon="[mdiRayEndArrow]" />
+          </v-btn>
+          <div
+            class="flex rounded-lg border border-gray-300 dark:border-gray-600"
+            style="margin: 2px; min-width: 0"
+          >
+            <input
+              v-if="!hideInputField"
+              :value="maskedCurrentDate"
+              @change="onInputChange"
+              class="flex-grow px-1 py-1 dark:bg-gray-700"
+              style="
+                margin: 1px;
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+            />
+          </div>
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            :size="lgAndDown ? 'x-small' : 'large'"
+            variant="text"
+            v-tooltip:bottom="'Set date to latest available dataset'"
+            @click="jumpDate(false)"
+            class="py-2"
+            style="flex-shrink: 1"
           >
             <v-icon :icon="[mdiRayStartArrow]" />
           </v-btn>
@@ -46,15 +112,31 @@
 </template>
 <script setup>
 import { DatePicker as VCDatePicker } from "v-calendar";
+import { useDisplay } from "vuetify";
 import "v-calendar/style.css";
-import { watch, reactive, ref, customRef, toRef } 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() {
@@ -65,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(),
+    });
   },
 }));
 
@@ -73,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,
@@ -86,6 +196,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  toggleCalendar: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -100,9 +214,6 @@ defineProps({
  */
 const attributes = reactive([]);
 
-/** @type {import("vue").Ref<HTMLDivElement|null>} */
-const rootRef = ref(null);
-
 const selectedStac = toRef(useSTAcStore(), "selectedStac");
 
 watch(
@@ -110,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) => {
@@ -137,9 +241,10 @@ watch(
         ];
         attributes.push({
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
-          bar: {
+          dot: {
             style: {
-              backgroundColor: wongPalette[idx % wongPalette.length],
+              backgroundColor:
+                collectionsPalette[idx % collectionsPalette.length],
             },
           },
           dates,
@@ -182,7 +287,15 @@ function jumpDate(reverse) {
   }
 }
 
-makePanelTransparent(rootRef);
+// fixes calendar dispalcement on lib mode
+const transform = ref("");
+onMounted(() => {
+  transform.value = document.querySelector("eo-dash")
+    ? "translate3d(50px,-80px,0)"
+    : "translate3d(0px,-80px,0)";
+});
+
+makePanelTransparent(rootEl);
 </script>
 <style>
 @media (min-width: 960px) {
@@ -200,4 +313,8 @@ makePanelTransparent(rootRef);
 .vc-highlight-content-solid {
   color: white !important;
 }
+
+.vc-popover-content-wrapper {
+  transform: v-bind("transform") !important;
+}
 </style>

package/widgets/EodashLayerControl.vue

@@ -9,6 +9,7 @@
       toolsAsList="true"
       style="--eox-background-color: transparent"
       ref="eoxLayercontrol"
+      @layerConfig:change="onLayerConfigChange"
     />
   </span>
 </template>
@@ -22,7 +23,11 @@ import "color-legend-element";
 import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
 import { getColFromLayer } from "@/eodashSTAC/helpers";
-import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import {
+  eodashCollections,
+  eodashCompareCollections,
+  layerControlFormValue,
+} from "@/utils/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 
@@ -108,4 +113,11 @@ const debouncedHandleDateTime = (evt) => {
   }, 500);
 };
 // ------
+/**
+ *
+ * @param {Event & {detail:{layer:import("ol/layer").Layer;jsonformValue:Record<string,any>}}} evt
+ */
+const onLayerConfigChange = (evt) => {
+  layerControlFormValue.value = evt.detail.jsonformValue;
+};
 </script>

package/widgets/EodashMap.vue

@@ -12,7 +12,12 @@
       .center="initialCenter"
       .zoom="initialZoom"
       .layers="eoxMapLayers"
-    />
+    >
+      <eox-map-tooltip
+        :style="tooltipStyles"
+        .propertyTransform="tooltipPropertyTransform"
+      />
+    </eox-map>
     <eox-map
       class="fill-height fill-width overflow-none"
       id="compare"
@@ -29,9 +34,19 @@ import { computed, onMounted, ref, toRaw } from "vue";
 import { datetime, mapEl, mapPosition, mapCompareEl } from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
-import { eodashCollections, eodashCompareCollections } from "@/utils/states";
-import { useHandleMapMoveEnd, useInitMap } from "@/composables/EodashMap";
+import {
+  eodashCollections,
+  eodashCompareCollections,
+  layerControlFormValue,
+} from "@/utils/states";
+import {
+  useHandleMapMoveEnd,
+  useInitMap,
+  useUpdateTooltipProperties,
+} from "@/composables/EodashMap";
 import { inAndOut } from "ol/easing.js";
+import mustache from "mustache";
+
 const props = defineProps({
   enableCompare: {
     type: Boolean,
@@ -47,8 +62,15 @@ const props = defineProps({
     type: Number,
     default: 4,
   },
+  zoomToExtent: {
+    type: Boolean,
+    default: true,
+  },
 });
 
+/** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
+const tooltipProperties = ref([]);
+
 const initialCenter = toRaw([
   mapPosition.value?.[0] ?? props.center?.[0],
   mapPosition.value?.[1] ?? props.center?.[1],
@@ -83,9 +105,9 @@ const animationOptions = {
   easing: inAndOut,
 };
 
-/** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
+/** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
 const eoxMap = ref(null);
-/** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
+/** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
 const compareMap = ref(null);
 const { selectedCompareStac } = storeToRefs(useSTAcStore());
 const showCompare = computed(() =>
@@ -112,6 +134,7 @@ onMounted(() => {
       datetime,
       eoxMapCompareLayers,
       eoxMap,
+      false,
     );
   }
 
@@ -123,6 +146,41 @@ 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}
+ */
+const tooltipPropertyTransform = (param) => {
+  /** @type {typeof tooltipProperties.value} */
+  const updatedProperties = JSON.parse(
+    mustache.render(JSON.stringify(tooltipProperties.value), {
+      ...(layerControlFormValue.value ?? {}),
+    }),
+  );
+
+  const tooltipProp = updatedProperties?.find((prop) => prop.id === param.key);
+  if (!tooltipProp) {
+    return undefined;
+  }
+  if (typeof param.value === "object") {
+    param.value = JSON.stringify(param.value);
+  }
+  if (!isNaN(Number(param.value))) {
+    param.value = Number(param.value).toFixed(4).toString();
+  }
+
+  return {
+    key: tooltipProp.title || tooltipProp.id,
+    value: param.value + " " + (tooltipProp.appendix || ""),
+  };
+};
 </script>

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,18 +10,28 @@
       v-if="isProcessed && chartSpec"
       .spec="toRaw(chartSpec)"
       .dataValues="toRaw(chartData)"
+      :style="chartStyles"
     />
-    <span>
-      <v-btn
-        v-if="!autoExec"
-        :loading="loading"
-        style="float: right; margin-right: 20px"
-        @click="startProcess"
-        color="primary"
-      >
-        Execute
-      </v-btn>
-    </span>
+    <v-container>
+      <span>
+        <v-btn
+          v-if="!autoExec"
+          :loading="loading"
+          style="float: right; margin-right: 20px"
+          @click="startProcess"
+          color="primary"
+        >
+          Execute
+        </v-btn>
+        <v-btn
+          v-if="processResults.length && isProcessed"
+          color="primary"
+          @click="downloadResults"
+        >
+          Download
+        </v-btn>
+      </span>
+    </v-container>
   </div>
 </template>
 <script setup>
@@ -29,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";
@@ -57,12 +67,47 @@ 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);
 
 const isPolling = ref(false);
+/** @type {import("vue").Ref<any[]>} */
+const processResults = ref([]);
 
+const downloadResults = () => {
+  processResults.value.forEach((result) => {
+    if (!result) {
+      return;
+    }
+    let url = "";
+    let downloadFile = "";
+    if (typeof result === "string") {
+      url = result;
+      //@ts-expect-error TODO
+      downloadFile = url.includes("/") ? url.split("/").pop() : url;
+      downloadFile = downloadFile.includes("?")
+        ? downloadFile.split("?")[0]
+        : downloadFile;
+    } else {
+      result = JSON.stringify(result);
+      const blob = new Blob([result], { type: "text" });
+      url = URL.createObjectURL(blob);
+      downloadFile = selectedStac.value?.id + "_process_results.json";
+    }
+    const link = document.createElement("a");
+    if (confirm(`Would you like to download ${downloadFile}?`)) {
+      link.href = url;
+      link.download = downloadFile;
+      link.click();
+    }
+    URL.revokeObjectURL(url);
+    link.remove();
+  });
+};
 onMounted(async () => {
   // wait for the layers to be rendered
   if (mapEl.value?.layers.length <= 1) {
@@ -75,6 +120,7 @@ onMounted(async () => {
         chartSpec,
         isProcessed,
         loading,
+        processResults,
         isPolling,
       });
     });
@@ -86,14 +132,15 @@ onMounted(async () => {
       jsonformSchema,
       chartSpec,
       isProcessed,
+      processResults,
       loading,
       isPolling,
     });
   }
 });
 
-useOnLayersUpdate(
-  async () =>
+useOnLayersUpdate(async (evt, _payload) => {
+  if (evt === "layers:updated") {
     await initProcess({
       //@ts-expect-error TODO
       selectedStac,
@@ -101,10 +148,12 @@ useOnLayersUpdate(
       jsonformSchema,
       chartSpec,
       isProcessed,
+      processResults,
       loading,
       isPolling,
-    }),
-);
+    });
+  }
+});
 
 const startProcess = async () => {
   const errors = jsonformEl.value?.editor.validate();
@@ -112,6 +161,7 @@ const startProcess = async () => {
     console.warn("[eodash] Form validation failed", errors);
     return;
   }
+  processResults.value = [];
   await handleProcesses({
     jsonformEl,
     jsonformSchema,
@@ -122,17 +172,27 @@ const startProcess = async () => {
     selectedStac,
     isProcessed,
     isPolling,
+    processResults,
   });
   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;