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

package/widgets/EodashDatePicker.vue

@@ -8,34 +8,98 @@
       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="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="new Date(currentDate).toLocaleDateString()"
-              style="margin: 1px"
               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,8 +110,9 @@
 </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 } from "vue";
 import { useSTAcStore } from "@/store/stac";
 import { datetime } from "@/store/states";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
@@ -55,6 +120,8 @@ import { eodashCollections } from "@/utils/states";
 import log from "loglevel";
 import { makePanelTransparent } from "@/composables";
 
+const { lgAndDown } = useDisplay();
+
 // holds the number value of the datetime
 const currentDate = customRef((track, trigger) => ({
   get() {
@@ -86,6 +153,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  toggleCalendar: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -137,7 +208,7 @@ watch(
         ];
         attributes.push({
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
-          bar: {
+          dot: {
             style: {
               backgroundColor: wongPalette[idx % wongPalette.length],
             },
@@ -182,6 +253,14 @@ function jumpDate(reverse) {
   }
 }
 
+// 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(rootRef);
 </script>
 <style>
@@ -200,4 +279,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
+        v-show="tooltipProperties?.length"
+        .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,
@@ -48,6 +63,8 @@ const props = defineProps({
     default: 4,
   },
 });
+/** @type {import("vue").Ref<import("@/types").EodashStyleJson["tooltip"]>} */
+const tooltipProperties = ref([]);
 
 const initialCenter = toRaw([
   mapPosition.value?.[0] ?? props.center?.[0],
@@ -83,9 +100,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(() =>
@@ -125,4 +142,33 @@ onMounted(() => {
     compareMap,
   );
 });
+useUpdateTooltipProperties(eodashCollections, tooltipProperties);
+/**
+ * @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

@@ -11,17 +11,26 @@
       .spec="toRaw(chartSpec)"
       .dataValues="toRaw(chartData)"
     />
-    <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>
@@ -62,7 +71,39 @@ 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 +116,7 @@ onMounted(async () => {
         chartSpec,
         isProcessed,
         loading,
+        processResults,
         isPolling,
       });
     });
@@ -86,6 +128,7 @@ onMounted(async () => {
       jsonformSchema,
       chartSpec,
       isProcessed,
+      processResults,
       loading,
       isPolling,
     });
@@ -101,6 +144,7 @@ useOnLayersUpdate(
       jsonformSchema,
       chartSpec,
       isProcessed,
+      processResults,
       loading,
       isPolling,
     }),
@@ -112,6 +156,7 @@ const startProcess = async () => {
     console.warn("[eodash] Form validation failed", errors);
     return;
   }
+  processResults.value = [];
   await handleProcesses({
     jsonformEl,
     jsonformSchema,
@@ -122,6 +167,7 @@ const startProcess = async () => {
     selectedStac,
     isProcessed,
     isPolling,
+    processResults,
   });
   isProcessed.value = true;
 };