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

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;
 };

package/dist/client/EodashDatePicker-DGRJrJ0s.js

@@ -1,306 +0,0 @@
-import { resolveComponent, render, h, mergeProps, customRef, ref, reactive, toRef, watch, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, withDirectives, createBlock, createCommentVNode } from 'vue';
-import { DatePicker } from 'v-calendar';
-import { E as isObject, Y as consoleError, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as makePanelTransparent, V as VBtn, y as VIcon } from './asWebComponent-BnFMd0T6.js';
-import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
-import log from 'loglevel';
-import { V as VTooltip } from './VTooltip-C3PeE7iO.js';
-
-// Utilities
-function useDirectiveComponent(component, props) {
-  const concreteComponent = typeof component === 'string' ? resolveComponent(component) : component;
-  const hook = mountComponent(concreteComponent, props);
-  return {
-    mounted: hook,
-    updated: hook,
-    unmounted(el) {
-      render(null, el);
-    }
-  };
-}
-function mountComponent(component, props) {
-  return function (el, binding, vnode) {
-    const _props = typeof props === 'function' ? props(binding) : props;
-    const text = binding.value?.text ?? binding.value ?? _props?.text;
-    const value = isObject(binding.value) ? binding.value : {};
-
-    // Get the children from the props or directive value, or the element's children
-    const children = () => text ?? el.textContent;
-
-    // If vnode.ctx is the same as the instance, then we're bound to a plain element
-    // and need to find the nearest parent component instance to inherit provides from
-    const provides = (vnode.ctx === binding.instance.$ ? findComponentParent(vnode, binding.instance.$)?.provides : vnode.ctx?.provides) ?? binding.instance.$.provides;
-    const node = h(component, mergeProps(_props, value), children);
-    node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
-      provides
-    });
-    render(node, el);
-  };
-}
-function findComponentParent(vnode, root) {
-  // Walk the tree from root until we find the child vnode
-  const stack = new Set();
-  const walk = children => {
-    for (const child of children) {
-      if (!child) continue;
-      if (child === vnode || child.el && vnode.el && child.el === vnode.el) {
-        return true;
-      }
-      stack.add(child);
-      let result;
-      if (child.suspense) {
-        result = walk([child.ssContent]);
-      } else if (Array.isArray(child.children)) {
-        result = walk(child.children);
-      } else if (child.component?.vnode) {
-        result = walk([child.component?.subTree]);
-      }
-      if (result) {
-        return result;
-      }
-      stack.delete(child);
-    }
-    return false;
-  };
-  if (!walk([root.subTree])) {
-    consoleError('Could not find original vnode, component will not inherit provides');
-    return root;
-  }
-
-  // Return the first component parent
-  const result = Array.from(stack).reverse();
-  for (const child of result) {
-    if (child.component) {
-      return child.component;
-    }
-  }
-  return root;
-}
-
-// Components
-const Tooltip = useDirectiveComponent(VTooltip, binding => {
-  return {
-    activator: 'parent',
-    location: binding.arg?.replace('-', ' '),
-    text: typeof binding.value === 'boolean' ? undefined : binding.value
-  };
-});
-
-const _hoisted_1 = { class: "d-flex flex-row align-center justify-center pb-1" };
-const _hoisted_2 = {
-  class: "flex rounded-lg border border-gray-300 dark:border-gray-600",
-  style: {"margin":"2px"}
-};
-const _hoisted_3 = ["value"];
-
-// holds the number value of the datetime
-
-const _sfc_main = {
-  __name: 'EodashDatePicker',
-  props: {
-  hintText: {
-    type: String,
-    default: null,
-  },
-  hideArrows: {
-    type: Boolean,
-    default: false,
-  },
-  hideInputField: {
-    type: Boolean,
-    default: false,
-  },
-},
-  setup(__props) {
-
-const currentDate = customRef((track, trigger) => ({
-  get() {
-    track();
-    return new Date(datetime.value).getTime();
-  },
-  /** @param {number} num */
-  set(num) {
-    trigger();
-    log.debug("Datepicker setting currentDate", datetime.value);
-    datetime.value = new Date(num).toISOString();
-  },
-}));
-
-const masks = ref({
-  input: "YYYY-MM-DD",
-});
-
-
-
-/**
- * Attributes displayed on datepicker
- *
- * @type {import("vue").Reactive<
- *   (
- *     | Partial<import("v-calendar/dist/types/src/utils/attribute").AttributeConfig>
- *     | undefined
- *   )[]
- * >}
- */
-const attributes = reactive([]);
-
-/** @type {import("vue").Ref<HTMLDivElement|null>} */
-const rootRef = ref(null);
-
-const selectedStac = toRef(useSTAcStore(), "selectedStac");
-
-watch(
-  selectedStac,
-  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) => {
-              const parsed = Date.parse(/** @type {string} */ (it.datetime));
-              if (parsed) {
-                valid.push(new Date(parsed));
-              }
-              return valid;
-            }, /** @type {Date[]} */ ([])),
-          ),
-        ];
-        attributes.push({
-          key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
-          bar: {
-            style: {
-              backgroundColor: wongPalette[idx % wongPalette.length],
-            },
-          },
-          dates,
-          content: {
-            style: {
-              color: "#000000",
-              "font-weight": "bold",
-            },
-          },
-        });
-      }
-    }
-  },
-  { immediate: true },
-);
-
-/**
- * @param {boolean} reverse
- */
-function jumpDate(reverse) {
-  if (attributes.length) {
-    let latestDateMS = reverse ? Infinity : -Infinity;
-    attributes.forEach((coll) => {
-      if (coll?.dates) {
-        coll.dates.forEach((d) => {
-          // TODO: we need to handle time ranges and other options here
-          if (d instanceof Date) {
-            const mathFun = reverse ? "min" : "max";
-            latestDateMS = Math[mathFun](latestDateMS, d.getTime());
-          }
-        });
-      }
-    });
-    currentDate.value =
-      latestDateMS === -Infinity
-        ? Date.now()
-        : latestDateMS === Infinity
-          ? 0
-          : latestDateMS;
-  }
-}
-
-makePanelTransparent(rootRef);
-
-return (_ctx, _cache) => {
-                                                       
-                                                     
-                                                         
-
-  return (openBlock(), createElementBlock("div", {
-    ref_key: "rootRef",
-    ref: rootRef,
-    class: "datePicker"
-  }, [
-    createVNode(unref(DatePicker), {
-      modelValue: currentDate.value,
-      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((currentDate).value = $event)),
-      modelModifiers: { number: true },
-      attributes: attributes,
-      masks: masks.value,
-      expanded: "",
-      class: "bg-surface overflow-auto",
-      style: {"background-color":"transparent","max-width":"100%"}
-    }, {
-      footer: withCtx(() => [
-        createElementVNode("div", _hoisted_1, [
-          (!__props.hideArrows)
-            ? withDirectives((openBlock(), createBlock(VBtn, {
-                key: 0,
-                density: "compact",
-                variant: "text",
-                onClick: _cache[0] || (_cache[0] = $event => (jumpDate(true)))
-              }, {
-                default: withCtx(() => [
-                  createVNode(VIcon, {
-                    icon: [unref(mdiRayEndArrow)]
-                  }, null, 8 /* PROPS */, ["icon"])
-                ]),
-                _: 1 /* STABLE */
-              })), [
-                [Tooltip, 'Set date to oldest available dataset', "bottom"]
-              ])
-            : createCommentVNode("v-if", true),
-          createElementVNode("div", _hoisted_2, [
-            (!__props.hideInputField)
-              ? (openBlock(), createElementBlock("input", {
-                  key: 0,
-                  value: new Date(currentDate.value).toLocaleDateString(),
-                  style: {"margin":"1px"},
-                  class: "flex-grow px-1 py-1 dark:bg-gray-700"
-                }, null, 8 /* PROPS */, _hoisted_3))
-              : createCommentVNode("v-if", true)
-          ]),
-          (!__props.hideArrows)
-            ? withDirectives((openBlock(), createBlock(VBtn, {
-                key: 1,
-                density: "compact",
-                variant: "text",
-                onClick: _cache[1] || (_cache[1] = $event => (jumpDate(false)))
-              }, {
-                default: withCtx(() => [
-                  createVNode(VIcon, {
-                    icon: [unref(mdiRayStartArrow)]
-                  }, null, 8 /* PROPS */, ["icon"])
-                ]),
-                _: 1 /* STABLE */
-              })), [
-                [Tooltip, 'Set date to latest available dataset', "bottom"]
-              ])
-            : createCommentVNode("v-if", true)
-        ])
-      ]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["modelValue", "attributes", "masks"])
-  ], 512 /* NEED_PATCH */))
-}
-}
-
-};
-
-export { _sfc_main as default };