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

package/widgets/EodashMap.vue

@@ -6,8 +6,8 @@
     <eox-map
       class="fill-height fill-width overflow-none"
       slot="first"
-      sync="eox-map#compare"
       ref="eoxMap"
+      :sync="compareMap"
       id="main"
       :config="eoxMapConfig"
     />
@@ -21,21 +21,14 @@
   </eox-map-compare>
 </template>
 <script setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { EodashCollection } from "@/utils/eodashSTAC";
-import { extractCollectionUrls } from "@/utils/helpers";
-import {
-  currentUrl,
-  currentCompareUrl,
-  datetime,
-  mapEl,
-  mapPosition,
-} from "@/store/States";
-import { transformExtent } from "ol/proj";
+import { computed, onMounted, reactive, 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";
 
 const props = defineProps({
   enableCompare: {
@@ -44,19 +37,17 @@ const props = defineProps({
   },
 });
 
-/** @type {import("vue").Ref<(HTMLElement & Record<string,any>) | null>} */
+/** @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>) | null>} */
+/** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
 const compareMap = ref(null);
 
-const showCompare = ref("first");
-
 const eoxMapConfig = reactive({
   /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
   /** @type {number | undefined} */
   zoom: 4,
-  // TODO: we should probably introduce some way of defining
+  // TODO: we should probably introduce some way of defining default base layers
   layers: [
     {
       type: "Tile",
@@ -86,209 +77,35 @@ if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   eoxMapConfig.center = [mapPosition.value?.[0], mapPosition.value[1]];
   eoxMapConfig.zoom = mapPosition.value[2];
 }
+const { selectedCompareStac } = storeToRefs(useSTAcStore());
+const showCompare = computed(() =>
+  props.enableCompare && !!selectedCompareStac.value ? "" : "first",
+);
 
-/** @type {import("openlayers").EventsListenerFunctionType} */
-const handleMoveEnd = (evt) => {
-  const map = /** @type {import("openlayers").Map | undefined} */ (
-    /** @type {any} */ (evt).map
-  );
-  const [x, y] = map?.getView().getCenter() ?? [0, 0];
-  const z = map?.getView().getZoom();
-  if (!Number.isNaN(x) && !Number.isNaN(y) && !Number.isNaN(z)) {
-    mapPosition.value = [x, y, z];
-  }
-};
-
-const store = useSTAcStore();
-/**
- *
- * @param {import("vue").Ref<string>} baseUrl
- * @param {string} updatedTime
- * @param {import("vue").Ref<
- *   | import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- * >} selectedStac
- */
-const createLayersConfig = async (baseUrl, updatedTime, selectedStac) => {
-  const collectionUrls = extractCollectionUrls(
-    selectedStac.value,
-    baseUrl.value,
-  );
-  const eodashCollections = collectionUrls.map(
-    (cu) => new EodashCollection(cu),
-  );
-
-  const layersCollection = [];
-  const dataLayers = {
-    type: "Group",
-    properties: {
-      id: "AnalysisGroup",
-      title: "Analysis Layers",
-      layerControlExpand: true,
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  for (const ec of eodashCollections) {
-    let layers;
-    if (updatedTime) {
-      layers = await ec.createLayersJson(new Date(updatedTime));
-    } else {
-      layers = await ec.createLayersJson();
-    }
-    if (layers) {
-      dataLayers.layers.push(...layers);
-    }
-  }
-  // Add expand to all analysis layers
-  dataLayers.layers.forEach((dl) => {
-    dl.properties.layerControlExpand = true;
-    dl.properties.layerControlToolsExpand = true;
-  });
-
-  layersCollection.push(dataLayers);
-  const indicator = new EodashCollection(currentUrl.value);
-  const indicatorLayers = await indicator.buildJsonArray(
-    //@ts-expect-error we use this function to generate collection level visualization
-    selectedStac.value,
-    currentUrl.value,
-    selectedStac.value?.title ?? "",
-    selectedStac.value?.endpointtype ?? false,
-  );
-
-  const baseLayers = {
-    type: "Group",
-    properties: {
-      id: "BaseLayersGroup",
-      title: "Base Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  const indicatorBaseLayers = indicatorLayers.filter(
-    (l) => l.properties.group === "baselayer",
-  );
-  if (indicatorBaseLayers.length) {
-    baseLayers.layers.push(...indicatorBaseLayers);
-
-    // Add exclusive to baselayers and make sure only one is selected
-    baseLayers.layers.forEach((bl) => {
-      bl.properties.layerControlExclusive = true;
-    });
-  } else {
-    // Default to some baselayer
-    baseLayers.layers.push({
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-        layerControlExclusive: true,
-      },
-      source: {
-        type: "OSM",
-      },
-    });
-  }
-
-  if (baseLayers.layers.length) {
-    layersCollection.push(baseLayers);
-  }
-
-  const overlayLayers = {
-    type: "Group",
-    properties: {
-      id: "OverlayGroup",
-      title: "Overlay Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  const indicatorOverlays = indicatorLayers.filter(
-    (l) => l.properties.group === "overlay",
-  );
-  if (indicatorOverlays.length) {
-    overlayLayers.layers.push(...indicatorOverlays);
-    layersCollection.unshift(overlayLayers);
-  }
-
-  return layersCollection;
-};
+useHandleMapMoveEnd(eoxMap, mapPosition);
 
 onMounted(() => {
-  mapEl.value = /** @type {HTMLElement & Record<string,any>} */ (eoxMap.value);
-
-  /** @type {import('ol/Map').default} */
-  (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
-
-  const { selectedStac, selectedCompareStac } = storeToRefs(store);
+  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+  // assign map Element state to eox map
+  mapEl.value = eoxMap.value;
   if (props.enableCompare) {
-    watch(
-      [selectedCompareStac, datetime],
-      async (
-        [updatedCompareStac, updatedTime],
-        [_previousCompareStac, _previousTime],
-      ) => {
-        if (updatedCompareStac) {
-          const compareLayersCollection = await createLayersConfig(
-            currentCompareUrl,
-            updatedTime,
-            selectedCompareStac,
-          );
-          /** @type {any} */
-          (compareMap.value).layers = compareLayersCollection;
-          showCompare.value = "";
-        }
-      },
+    mapCompareEl.value = compareMap.value;
+  }
+  if (props.enableCompare) {
+    useInitMap(
+      compareMap,
+      //@ts-expect-error todo selectedStac as collection
+      selectedCompareStac,
+      eodashCompareCollections,
+      datetime,
     );
   }
-
-  watch(
-    [selectedStac, datetime],
-    async ([updatedStac, updatedTime], [previousSTAC, _previousTime]) => {
-      if (updatedStac) {
-        const layersCollection = await createLayersConfig(
-          currentUrl,
-          updatedTime,
-          selectedStac,
-        );
-        /** @type {any} */
-        (eoxMap.value).layers = layersCollection;
-
-        // only on different indicator selection and not on time change
-        if (previousSTAC?.id !== updatedStac.id) {
-          showCompare.value = "first";
-          // Try to move map view to extent
-          // Make sure for now we are always converting from 4326
-          // of stac items  into current map projection
-          // TODO: This might change if we decide to use 4326 as default for zoom and extent
-          // Sanitize extent
-          // @ts-expect-error we will need to change the approach to use
-          // native eox-map transformation once included
-          const b = updatedStac.extent?.spatial.bbox[0];
-          const sanitizedExtent = [
-            b[0] > -180 ? b[0] : -180,
-            b[1] > -90 ? b[1] : -90,
-            b[2] < 180 ? b[2] : 180,
-            b[3] < 90 ? b[3] : 90,
-          ];
-          const reprojExtent = transformExtent(
-            sanitizedExtent,
-            "EPSG:4326",
-            eoxMap.value?.map?.getView().getProjection(),
-          );
-          /** @type {any} */
-          (eoxMap.value).zoomExtent = reprojExtent;
-        }
-      }
-    },
-    { immediate: true },
+  useInitMap(
+    eoxMap,
+    //@ts-expect-error todo selectedStac as collection
+    selectedStac,
+    eodashCollections,
+    datetime,
   );
 });
-
-onUnmounted(() => {
-  /** @type {import('ol/Map').default} */
-  (eoxMap.value?.map)?.un("moveend", handleMoveEnd);
-});
 </script>

package/widgets/ExportState.vue

@@ -1,17 +1,17 @@
 <template>
   <PopUp v-model="dialog">
-    <v-card>
-      <v-card-title class="bg-primary">
+    <v-card style="max-height: 498px">
+      <v-card-title class="bg-primary" style="max-height: 49px">
         <h5 class="text-h5">Storytelling map configuration</h5>
       </v-card-title>
 
-      <v-card-text class="py-5">
+      <v-card-text class="py-5 overflow-auto" style="height: 400px">
         <p class="text-body-2">
-          Copy and paste this code into the map layers field of the storytelling
-          editor:
+          Copy and paste this code into the map <b>layers field</b> of the
+          storytelling editor:
         </p>
         <div class="pa-3 code-block">
-          {{ getLayers() }}
+          {{ removeUnneededProperties(getLayers()) }}
         </div>
 
         <div style="position: absolute; bottom: 15px">
@@ -41,7 +41,7 @@
 
       <v-divider></v-divider>
 
-      <v-card-actions>
+      <v-card-actions style="max-height: 49px">
         <v-spacer></v-spacer>
         <v-btn variant="text" @click="dialog = !dialog"> Close </v-btn>
       </v-card-actions>
@@ -55,6 +55,7 @@ import { copyToClipBoard } from "@/utils";
 import { computed, ref } from "vue";
 import { getLayers as getLayerAction } from "@/store/Actions";
 import { mapPosition } from "@/store/States";
+import { removeUnneededProperties } from "@/utils/helpers";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
 
@@ -93,7 +94,7 @@ const mapStepCode = computed(() => {
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
 `;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 const mapEntryCode = computed(() => {
   const [x, y, z] = mapPosition.value;
@@ -101,7 +102,7 @@ const mapEntryCode = computed(() => {
     "## Map Example <!" +
     '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
   const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 </script>
 <style scoped>
@@ -109,5 +110,7 @@ const mapEntryCode = computed(() => {
   background-color: #ddd;
   font-family: monospace;
   font-size: small;
+  max-height: 200px;
+  overflow-y: auto;
 }
 </style>

package/dist/client/EodashDatePicker-CkA9rHp6.js

@@ -1,252 +0,0 @@
-import { p as B, o as $, g as _, y as j, av as I, c as v, r as V, d as h, a as M, b as p, aw as R, ax as O, T as U, ay as F, x as H, Z as N, az as Y, aA as z, w as G, $ as w, a6 as W, a1 as y, a3 as C, aB as K, F as L, W as Z, a9 as k, aC as q, aD as J, t as S, a0 as T, M as D, aE as Q, V as P, aF as X, aG as x, aH as tt } from "./asWebComponent-Ddg71BJk.js";
-import { t as et, e as at } from "./helpers-BCawTwFg.js";
-import { m as ot, V as E } from "./VOverlay-CqZC2CbA.js";
-import { b as nt, f as st } from "./forwardRefs-OX_5lLJW.js";
-const rt = B({
-  id: String,
-  text: String,
-  ...$(ot({
-    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"), it = _()({
-  name: "VTooltip",
-  props: rt(),
-  emits: {
-    "update:modelValue": (t) => !0
-  },
-  setup(t, r) {
-    let {
-      slots: i
-    } = r;
-    const o = j(t, "modelValue"), {
-      scopeId: n
-    } = nt(), l = I(), e = v(() => t.id || `v-tooltip-${l}`), a = V(), s = v(() => t.location.split(" ").length > 1 ? t.location : t.location + " center"), c = v(() => t.origin === "auto" || t.origin === "overlap" || t.origin.split(" ").length > 1 || t.location.split(" ").length > 1 ? t.origin : t.origin + " center"), d = v(() => t.transition ? t.transition : o.value ? "scale-transition" : "fade-transition"), f = v(() => h({
-      "aria-describedby": e.value
-    }, t.activatorProps));
-    return M(() => {
-      const b = E.filterProps(t);
-      return p(E, h({
-        ref: a,
-        class: ["v-tooltip", t.class],
-        style: t.style,
-        id: e.value
-      }, b, {
-        modelValue: o.value,
-        "onUpdate:modelValue": (m) => o.value = m,
-        transition: d.value,
-        absolute: !0,
-        location: s.value,
-        origin: c.value,
-        persistent: !0,
-        role: "tooltip",
-        activatorProps: f.value,
-        _disableGlobalStack: !0
-      }, n), {
-        activator: i.activator,
-        default: function() {
-          for (var m = arguments.length, u = new Array(m), g = 0; g < m; g++)
-            u[g] = arguments[g];
-          return i.default?.(...u) ?? t.text;
-        }
-      });
-    }), st({}, a);
-  }
-});
-function lt(t, r) {
-  const i = typeof t == "string" ? R(t) : t, o = ct(i, r);
-  return {
-    mounted: o,
-    updated: o,
-    unmounted(n) {
-      O(null, n);
-    }
-  };
-}
-function ct(t, r) {
-  return function(i, o, n) {
-    const l = typeof r == "function" ? r(o) : r, e = o.value?.text ?? o.value ?? l?.text, a = U(o.value) ? o.value : {}, s = () => e ?? i.innerHTML, c = (n.ctx === o.instance.$ ? ut(n, o.instance.$)?.provides : n.ctx?.provides) ?? o.instance.$.provides, d = F(t, h(l, a), s);
-    d.appContext = Object.assign(/* @__PURE__ */ Object.create(null), o.instance.$.appContext, {
-      provides: c
-    }), O(d, i);
-  };
-}
-function ut(t, r) {
-  const i = /* @__PURE__ */ new Set(), o = (l) => {
-    for (const e of l) {
-      if (!e) continue;
-      if (e === t)
-        return !0;
-      i.add(e);
-      let a;
-      if (e.suspense ? a = o([e.ssContent]) : Array.isArray(e.children) ? a = o(e.children) : e.component?.vnode && (a = o([e.component?.subTree])), a)
-        return a;
-      i.delete(e);
-    }
-    return !1;
-  };
-  if (!o([r.subTree]))
-    throw new Error("Could not find original vnode");
-  const n = Array.from(i).reverse();
-  for (const l of n)
-    if (l.component)
-      return l.component;
-  return r;
-}
-const A = lt(it, (t) => ({
-  activator: "parent",
-  location: t.arg?.replace("-", " ") ?? "top",
-  text: typeof t.value == "boolean" ? void 0 : t.value
-})), dt = {
-  class: "flex rounded-lg border border-gray-300 dark:border-gray-600",
-  style: { margin: "2px" }
-}, ft = ["value"], yt = {
-  __name: "EodashDatePicker",
-  setup(t) {
-    function r(e) {
-      if (n.value && n.value.length > 0) {
-        let a = e ? 1 / 0 : -1 / 0;
-        n.value.forEach((s) => {
-          s?.dates && s.dates.forEach((c) => {
-            c instanceof Date && (!e && c.getTime() > a || e && c.getTime() < a) && (a = c.getTime());
-          });
-        }), a !== 0 && (l.value = new Date(a));
-      }
-    }
-    const i = (
-      /** @type {import("@/types").Eodash} */
-      H(Z)
-    ), o = V({
-      input: "YYYY-MM-DD"
-    }), n = V([]), l = v({
-      get() {
-        return x.value ? new Date(x.value) : /* @__PURE__ */ new Date();
-      },
-      /** @param {Date | string} updatedDate */
-      set(e) {
-        e instanceof Date && !isNaN(e.getTime()) ? x.value = new Date(
-          e.getTime() - e.getTimezoneOffset() * 6e4
-        ).toISOString() : x.value = (/* @__PURE__ */ new Date()).toISOString();
-      }
-    });
-    return N(() => {
-      const { selectedStac: e } = Y(z());
-      G(
-        [e],
-        async ([a]) => {
-          if (a) {
-            const s = et(
-              `./${a.id}/collection.json`,
-              i.stacEndpoint
-            ), c = at(
-              e.value,
-              s
-            ), d = [
-              "#009E73",
-              "#0072B2",
-              "#E69F00",
-              "#CC79A7",
-              "#56B4E9",
-              "#D55E00"
-            ];
-            for (let f = 0; f < c.length; f++) {
-              const m = (await tt.get(c[f]).then((u) => u.data)).links.filter(
-                (u) => u.rel === "item" && "datetime" in u
-              ).map(
-                (u) => new Date(u.datetime)
-              );
-              n.value = [
-                {
-                  bar: {
-                    style: {
-                      backgroundColor: d[f % d.length]
-                    }
-                  },
-                  dates: m
-                }
-              ];
-            }
-          }
-        },
-        { immediate: !0 }
-      );
-    }), (e, a) => (w(), W(
-      L,
-      null,
-      [
-        p(C(J), {
-          modelValue: l.value,
-          "onUpdate:modelValue": a[0] || (a[0] = (s) => l.value = s),
-          masks: o.value,
-          attributes: n.value
-        }, {
-          default: y(({ inputValue: s, inputEvents: c }) => [
-            k("div", dt, [
-              k("input", h({ value: s }, q(c, !0), {
-                style: { margin: "1px" },
-                class: "flex-grow px-1 py-1 bg-white dark:bg-gray-700"
-              }), null, 16, ft)
-            ])
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["modelValue", "masks", "attributes"]),
-        p(K, {
-          align: "center",
-          justify: "center",
-          style: { "margin-top": "6px" }
-        }, {
-          default: y(() => [
-            S((w(), T(P, {
-              style: { padding: "0px", "margin-right": "4px" },
-              density: "compact",
-              onClick: a[1] || (a[1] = (s) => r(!0))
-            }, {
-              default: y(() => [
-                p(D, {
-                  icon: [C(Q)]
-                }, null, 8, ["icon"])
-              ]),
-              _: 1
-              /* STABLE */
-            })), [
-              [A, "Set date to oldest available dataset", "bottom"]
-            ]),
-            S((w(), T(P, {
-              style: { padding: "0px", "margin-left": "4px" },
-              density: "compact",
-              onClick: a[2] || (a[2] = (s) => r(!1))
-            }, {
-              default: y(() => [
-                p(D, {
-                  icon: [C(X)]
-                }, null, 8, ["icon"])
-              ]),
-              _: 1
-              /* STABLE */
-            })), [
-              [A, "Set date to latest available dataset", "bottom"]
-            ])
-          ]),
-          _: 1
-          /* STABLE */
-        })
-      ],
-      64
-      /* STABLE_FRAGMENT */
-    ));
-  }
-};
-export {
-  yt as default
-};