@eodash/eodash 5.0.0-alpha.2.17 → 5.0.0-alpha.2.19

package/dist/client/{transition-DRzZPWIN.js → transition-C_fi1aa6.js}

@@ -1,4 +1,4 @@
-import { p as m, az as b, d, bo as l, ab as u } from "./asWebComponent-DhR2_xlP.js";
+import { p as m, az as b, d, bp as l, ab as u } from "./asWebComponent-CHqY8A1z.js";
 const j = m({
   transition: {
     type: [Boolean, String, Object],

package/dist/client/{webfontloader-CqD-lAx-.js → webfontloader-Ofarvipf.js}

@@ -1,4 +1,4 @@
-import { av as Ft } from "./asWebComponent-DhR2_xlP.js";
+import { av as Ft } from "./asWebComponent-CHqY8A1z.js";
 var ot = { exports: {} };
 (function(O) {
   (function() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.17",
+  "version": "5.0.0-alpha.2.19",
   "type": "module",
   "types": "./core/client/types.d.ts",
   "files": [
@@ -47,16 +47,15 @@
     "docs:generate": "typedoc --options typedoc.config.json"
   },
   "dependencies": {
-    "@eox/itemfilter": "^1.1.0",
+    "@eox/itemfilter": "^1.1.1",
     "@eox/jsonform": "^0.8.2",
-    "@eox/layercontrol": "^0.20.0",
+    "@eox/layercontrol": "^0.21.0",
     "@eox/layout": "^0.1.0",
-    "@eox/map": "^1.13.0",
+    "@eox/map": "^1.13.1",
     "@eox/stacinfo": "^0.3.3",
-    "@eox/timecontrol": "^0.7.2",
+    "@eox/timecontrol": "^0.8.0",
     "@mdi/js": "^7.4.47",
     "@vitejs/plugin-vue": "^5.1.2",
-    "@vueuse/core": "^10.11.1",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.7.4",
     "axios-cache-interceptor": "^1.5.3",
@@ -70,7 +69,7 @@
     "v-calendar": "^3.1.2",
     "vite": "^5.4.2",
     "vite-plugin-vuetify": "^2.0.4",
-    "vue": "^3.2.0",
+    "vue": "3.4.38",
     "vuetify": "^3.7.0",
     "webfontloader": "^1.6.28"
   },

package/widgets/EodashDatePicker.vue

@@ -17,6 +17,11 @@
         />
       </div>
     </template>
+    <template #footer v-if="hintText">
+      <div class="w-full px-4 pb-3" style="font-size: 12px">
+        <span v-html="hintText" />
+      </div>
+    </template>
   </VCDatePicker>
   <v-row align="center" justify="center" style="margin-top: 6px">
     <v-btn
@@ -37,6 +42,12 @@
     </v-btn>
   </v-row>
 </template>
+<style>
+.vc-day-content {
+  color: #5e5e5e;
+  font-weight: normal;
+}
+</style>
 
 <script setup>
 import { DatePicker as VCDatePicker } from "v-calendar";
@@ -67,6 +78,13 @@ const masks = ref({
   input: "YYYY-MM-DD",
 });
 
+defineProps({
+  hintText: {
+    type: String,
+    default: null,
+  },
+});
+
 /**
  * Attributes displayed on datepicker
  *
@@ -119,20 +137,14 @@ watch(
             },
           },
           dates,
+          content: {
+            style: {
+              color: "#000000",
+              "font-weight": "bold",
+            },
+          },
         });
       }
-      // We try to set the current time selection
-      // to latest extent date
-      // @ts-expect-error it seems the temporal extent is not defined in type
-      const interval = updatedStac?.extent?.temporal?.interval;
-      if (interval && interval.length > 0 && interval[0].length > 1) {
-        const endInterval = new Date(interval[0][1]);
-        log.debug(
-          "Datepicker: found stac extent, setting time to latest value",
-          endInterval,
-        );
-        currentDate.value = endInterval?.getTime();
-      }
     }
   },
   { immediate: true },

package/widgets/EodashLayerControl.vue

@@ -1,10 +1,12 @@
 <template>
-  <span class="d-flex flex-column fill-height overflow-auto pa-4">
+  <span class="d-flex flex-column fill-height overflow-auto">
     <eox-layercontrol
-      v-if="mapElement"
+      v-if="showControls"
       :for="mapElement"
+      .tools="['datetime', 'info', 'config', 'opacity']"
       @datetime:updated="debouncedHandleDateTime"
       class="fill-height"
+      toolsAsList="true"
       ref="eoxLayercontrol"
     />
   </span>
@@ -14,10 +16,12 @@ import "@eox/layercontrol";
 import "@eox/jsonform";
 import "@eox/timecontrol";
 
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/States";
 import { getColFromLayer } from "@/utils/helpers";
 import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
 
 const props = defineProps({
   map: {
@@ -26,6 +30,17 @@ const props = defineProps({
   },
 });
 
+const showControls = computed(() => {
+  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+  if (props.map === "second") {
+    return mapCompareEl.value !== null && selectedCompareStac.value !== null;
+  }
+  if (mapEl.value !== null && selectedStac.value !== null) {
+    return true;
+  }
+  return false;
+});
+
 const eodashCols =
   props.map === "second" ? eodashCompareCollections : eodashCollections;
 const mapElement = props.map === "second" ? mapCompareEl : mapEl;
@@ -44,7 +59,11 @@ const handleDatetimeUpdate = async (evt) => {
 
   if (ec) {
     await ec.fetchCollection();
-    updatedLayers = await ec.updateLayerJson(datetime, layer.get("id"));
+    updatedLayers = await ec.updateLayerJson(
+      datetime,
+      layer.get("id"),
+      props.map,
+    );
   }
   /** @type {Record<String,any>[] | undefined} */
   const dataLayers = updatedLayers?.find(

package/widgets/EodashMap.vue

@@ -1,32 +1,33 @@
 <template>
   <eox-map-compare
     class="fill-height fill-width overflow-none"
-    :enabled="showCompare"
+    .enabled="showCompare"
   >
     <eox-map
       class="fill-height fill-width overflow-none"
       slot="first"
       ref="eoxMap"
-      :sync="compareMap"
+      .config="eoxMapConfig"
       id="main"
-      :config="eoxMapConfig"
+      .layers="eoxMapLayers"
     />
     <eox-map
       class="fill-height fill-width overflow-none"
       id="compare"
       slot="second"
       ref="compareMap"
-      :config="eoxCompareMapConfig"
+      .config="eoxCompareMapConfig"
+      .layers="eoxMapCompareLayers"
     />
   </eox-map-compare>
 </template>
 <script setup>
-import { computed, onMounted, reactive, ref } from "vue";
+import "@eox/map";
+import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
+import { computed, onMounted, ref } from "vue";
 import { datetime, mapEl, mapPosition, mapCompareEl } from "@/store/States";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
-import "@eox/map";
-import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 import { eodashCollections, eodashCompareCollections } from "@/utils/states";
 import { useHandleMapMoveEnd, useInitMap } from "@/composables/EodashMap";
 
@@ -37,38 +38,48 @@ const props = defineProps({
   },
 });
 
+/** @type {import("vue").Ref<Record<string,any>[]>} */
+const eoxMapLayers = ref([
+  {
+    type: "Tile",
+    source: { type: "OSM" },
+    properties: {
+      id: "osm",
+      title: "Background",
+    },
+  },
+]);
+
+/** @type {import("vue").Ref<Record<string,any>[]>} */
+const eoxMapCompareLayers = ref([
+  {
+    type: "Tile",
+    source: { type: "OSM" },
+    properties: {
+      id: "osm",
+      title: "Background",
+    },
+  },
+]);
+
 /** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
 const eoxMap = ref(null);
 /** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
 const compareMap = ref(null);
 
-const eoxMapConfig = reactive({
+const eoxMapConfig = {
   /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
   /** @type {number | undefined} */
   zoom: 4,
-  // TODO: we should probably introduce some way of defining default base layers
-  layers: [
-    {
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-      },
-      source: {
-        type: "OSM",
-      },
-    },
-  ],
-});
+};
 
-const eoxCompareMapConfig = reactive({
+const eoxCompareMapConfig = {
   /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
   /** @type {number | undefined} */
   zoom: 4,
-  layers: [],
-});
+};
 
 // Check if selected indicator was already set in store
 if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
@@ -88,9 +99,11 @@ onMounted(() => {
   const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
   // assign map Element state to eox map
   mapEl.value = eoxMap.value;
+
   if (props.enableCompare) {
     mapCompareEl.value = compareMap.value;
   }
+
   if (props.enableCompare) {
     useInitMap(
       compareMap,
@@ -98,14 +111,19 @@ onMounted(() => {
       selectedCompareStac,
       eodashCompareCollections,
       datetime,
+      eoxMapCompareLayers,
+      eoxMap,
     );
   }
+
   useInitMap(
     eoxMap,
     //@ts-expect-error todo selectedStac as collection
     selectedStac,
     eodashCollections,
     datetime,
+    eoxMapLayers,
+    compareMap,
   );
 });
 </script>

package/dist/client/EodashDatePicker-o7ZOYIHL.js

@@ -1,259 +0,0 @@
-import { p as O, o as R, g as _, y as $, aw as F, c as m, r as B, d as w, a as j, b as g, ax as H, ay as M, T as Y, az as U, aA as G, aB as L, aC as N, aD as z, w as J, $ as k, a6 as K, a1 as y, a3 as D, aE as W, F as q, aF as C, aG as h, a9 as V, aH as Q, aI as X, t as S, a0 as T, M as P, aJ as Z, V as A, aK as ee, aL as x } from "./asWebComponent-DhR2_xlP.js";
-import { m as te, V as E } from "./VOverlay-D5GzAYRY.js";
-import { b as ae, f as ne } from "./forwardRefs-C0MQxvur.js";
-const oe = O({
-  id: String,
-  text: String,
-  ...R(te({
-    closeOnBack: !1,
-    location: "end",
-    locationStrategy: "connected",
-    eager: !0,
-    minWidth: 0,
-    offset: 10,
-    openOnClick: !1,
-    openOnHover: !0,
-    origin: "auto",
-    scrim: !1,
-    scrollStrategy: "reposition",
-    transition: !1
-  }), ["absolute", "persistent"])
-}, "VTooltip"), re = _()({
-  name: "VTooltip",
-  props: oe(),
-  emits: {
-    "update:modelValue": (e) => !0
-  },
-  setup(e, s) {
-    let {
-      slots: i
-    } = s;
-    const t = $(e, "modelValue"), {
-      scopeId: u
-    } = ae(), c = F(), n = m(() => e.id || `v-tooltip-${c}`), a = B(), o = m(() => e.location.split(" ").length > 1 ? e.location : e.location + " center"), l = m(() => e.origin === "auto" || e.origin === "overlap" || e.origin.split(" ").length > 1 || e.location.split(" ").length > 1 ? e.origin : e.origin + " center"), r = m(() => e.transition ? e.transition : t.value ? "scale-transition" : "fade-transition"), b = m(() => w({
-      "aria-describedby": n.value
-    }, e.activatorProps));
-    return j(() => {
-      const v = E.filterProps(e);
-      return g(E, w({
-        ref: a,
-        class: ["v-tooltip", e.class],
-        style: e.style,
-        id: n.value
-      }, v, {
-        modelValue: t.value,
-        "onUpdate:modelValue": (d) => t.value = d,
-        transition: r.value,
-        absolute: !0,
-        location: o.value,
-        origin: l.value,
-        persistent: !0,
-        role: "tooltip",
-        activatorProps: b.value,
-        _disableGlobalStack: !0
-      }, u), {
-        activator: i.activator,
-        default: function() {
-          for (var d = arguments.length, f = new Array(d), p = 0; p < d; p++)
-            f[p] = arguments[p];
-          return i.default?.(...f) ?? e.text;
-        }
-      });
-    }), ne({}, a);
-  }
-});
-function se(e, s) {
-  const i = typeof e == "string" ? H(e) : e, t = ie(i, s);
-  return {
-    mounted: t,
-    updated: t,
-    unmounted(u) {
-      M(null, u);
-    }
-  };
-}
-function ie(e, s) {
-  return function(i, t, u) {
-    const c = typeof s == "function" ? s(t) : s, n = t.value?.text ?? t.value ?? c?.text, a = Y(t.value) ? t.value : {}, o = () => n ?? i.innerHTML, l = (u.ctx === t.instance.$ ? le(u, t.instance.$)?.provides : u.ctx?.provides) ?? t.instance.$.provides, r = U(e, w(c, a), o);
-    r.appContext = Object.assign(/* @__PURE__ */ Object.create(null), t.instance.$.appContext, {
-      provides: l
-    }), M(r, i);
-  };
-}
-function le(e, s) {
-  const i = /* @__PURE__ */ new Set(), t = (c) => {
-    for (const n of c) {
-      if (!n) continue;
-      if (n === e)
-        return !0;
-      i.add(n);
-      let a;
-      if (n.suspense ? a = t([n.ssContent]) : Array.isArray(n.children) ? a = t(n.children) : n.component?.vnode && (a = t([n.component?.subTree])), a)
-        return a;
-      i.delete(n);
-    }
-    return !1;
-  };
-  if (!t([s.subTree]))
-    throw new Error("Could not find original vnode");
-  const u = Array.from(i).reverse();
-  for (const c of u)
-    if (c.component)
-      return c.component;
-  return s;
-}
-const I = se(re, (e) => ({
-  activator: "parent",
-  location: e.arg?.replace("-", " ") ?? "top",
-  text: typeof e.value == "boolean" ? void 0 : e.value
-})), ce = {
-  class: "flex rounded-lg border border-gray-300 dark:border-gray-600",
-  style: { margin: "2px" }
-}, ue = ["value"], ge = {
-  __name: "EodashDatePicker",
-  setup(e) {
-    const s = G((n, a) => ({
-      get() {
-        return n(), new Date(C.value).getTime();
-      },
-      /** @param {number} num */
-      set(o) {
-        a(), h.debug("Datepicker setting currentDate", C.value), C.value = new Date(o).toISOString();
-      }
-    })), i = B({
-      input: "YYYY-MM-DD"
-    }), t = L([]), { selectedStac: u } = N(z());
-    J(
-      u,
-      async (n, a) => {
-        if (n && a?.id !== n.id) {
-          h.debug("Datepicker selected STAC change triggered");
-          const o = [
-            "#009E73",
-            "#0072B2",
-            "#E69F00",
-            "#CC79A7",
-            "#56B4E9",
-            "#D55E00"
-          ];
-          t.splice(0, t.length);
-          for (let r = 0; r < x.length; r++) {
-            h.debug("Retrieving dates", x[r]), await x[r].fetchCollection();
-            const b = [
-              ...new Set(
-                x[r].getItems()?.reduce(
-                  (v, d) => {
-                    const f = Date.parse(
-                      /** @type {string} */
-                      d.datetime
-                    );
-                    return f && v.push(new Date(f)), v;
-                  },
-                  /** @type {Date[]} */
-                  []
-                )
-              )
-            ];
-            t.push({
-              key: "id-" + r.toString() + Math.random().toString(16).slice(2),
-              bar: {
-                style: {
-                  backgroundColor: o[r % o.length]
-                }
-              },
-              dates: b
-            });
-          }
-          const l = n?.extent?.temporal?.interval;
-          if (l && l.length > 0 && l[0].length > 1) {
-            const r = new Date(l[0][1]);
-            h.debug(
-              "Datepicker: found stac extent, setting time to latest value",
-              r
-            ), s.value = r?.getTime();
-          }
-        }
-      },
-      { immediate: !0 }
-    );
-    function c(n) {
-      if (t.length) {
-        let a = n ? 1 / 0 : -1 / 0;
-        t.forEach((o) => {
-          o?.dates && o.dates.forEach((l) => {
-            l instanceof Date && (a = Math[n ? "min" : "max"](a, l.getTime()));
-          });
-        }), s.value = a === -1 / 0 ? Date.now() : a === 1 / 0 ? 0 : a;
-      }
-    }
-    return (n, a) => (k(), K(
-      q,
-      null,
-      [
-        g(D(X), {
-          modelValue: s.value,
-          "onUpdate:modelValue": a[0] || (a[0] = (o) => s.value = o),
-          modelModifiers: { number: !0 },
-          masks: i.value,
-          attributes: t
-        }, {
-          default: y(({ inputValue: o, inputEvents: l }) => [
-            V("div", ce, [
-              V("input", w({ value: o }, Q(l, !0), {
-                style: { margin: "1px" },
-                class: "flex-grow px-1 py-1 bg-white dark:bg-gray-700"
-              }), null, 16, ue)
-            ])
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["modelValue", "masks", "attributes"]),
-        g(W, {
-          align: "center",
-          justify: "center",
-          style: { "margin-top": "6px" }
-        }, {
-          default: y(() => [
-            S((k(), T(A, {
-              style: { padding: "0px", "margin-right": "4px" },
-              density: "compact",
-              onClick: a[1] || (a[1] = (o) => c(!0))
-            }, {
-              default: y(() => [
-                g(P, {
-                  icon: [D(Z)]
-                }, null, 8, ["icon"])
-              ]),
-              _: 1
-              /* STABLE */
-            })), [
-              [I, "Set date to oldest available dataset", "bottom"]
-            ]),
-            S((k(), T(A, {
-              style: { padding: "0px", "margin-left": "4px" },
-              density: "compact",
-              onClick: a[2] || (a[2] = (o) => c(!1))
-            }, {
-              default: y(() => [
-                g(P, {
-                  icon: [D(ee)]
-                }, null, 8, ["icon"])
-              ]),
-              _: 1
-              /* STABLE */
-            })), [
-              [I, "Set date to latest available dataset", "bottom"]
-            ])
-          ]),
-          _: 1
-          /* STABLE */
-        })
-      ],
-      64
-      /* STABLE_FRAGMENT */
-    ));
-  }
-};
-export {
-  ge as default
-};