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

package/dist/client/EodashDatePicker-Tdk5Xx9F.js

@@ -0,0 +1,393 @@
+import { computed, ref, mergeProps, createVNode, resolveComponent, render, h, useCssVars, customRef, reactive, watch, onMounted, openBlock, createElementBlock, Fragment, unref, createSlots, withCtx, createElementVNode, toHandlers, withDirectives, createBlock } from 'vue';
+import { DatePicker } from 'v-calendar';
+import { storeToRefs } from 'pinia';
+import { p as propsFactory, o as omit, g as genericComponent, j as useProxiedModel, Y as getUid, a as useRender, E as isObject, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as VRow, V as VBtn, y as VIcon } from './asWebComponent-CIm1IGNl.js';
+import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
+import log from 'loglevel';
+import { m as makeVOverlayProps, V as VOverlay } from './VOverlay-naLhQSyZ.js';
+import { b as useScopeId, f as forwardRefs } from './forwardRefs-q4ZkKtOv.js';
+
+const makeVTooltipProps = propsFactory({
+  id: String,
+  text: String,
+  ...omit(makeVOverlayProps({
+    closeOnBack: false,
+    location: 'end',
+    locationStrategy: 'connected',
+    eager: true,
+    minWidth: 0,
+    offset: 10,
+    openOnClick: false,
+    openOnHover: true,
+    origin: 'auto',
+    scrim: false,
+    scrollStrategy: 'reposition',
+    transition: false
+  }), ['absolute', 'persistent'])
+}, 'VTooltip');
+const VTooltip = genericComponent()({
+  name: 'VTooltip',
+  props: makeVTooltipProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      scopeId
+    } = useScopeId();
+    const uid = getUid();
+    const id = computed(() => props.id || `v-tooltip-${uid}`);
+    const overlay = ref();
+    const location = computed(() => {
+      return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
+    });
+    const origin = computed(() => {
+      return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
+    });
+    const transition = computed(() => {
+      if (props.transition) return props.transition;
+      return isActive.value ? 'scale-transition' : 'fade-transition';
+    });
+    const activatorProps = computed(() => mergeProps({
+      'aria-describedby': id.value
+    }, props.activatorProps));
+    useRender(() => {
+      const overlayProps = VOverlay.filterProps(props);
+      return createVNode(VOverlay, mergeProps({
+        "ref": overlay,
+        "class": ['v-tooltip', props.class],
+        "style": props.style,
+        "id": id.value
+      }, overlayProps, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "transition": transition.value,
+        "absolute": true,
+        "location": location.value,
+        "origin": origin.value,
+        "persistent": true,
+        "role": "tooltip",
+        "activatorProps": activatorProps.value,
+        "_disableGlobalStack": true
+      }, scopeId), {
+        activator: slots.activator,
+        default: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return slots.default?.(...args) ?? props.text;
+        }
+      });
+    });
+    return forwardRefs({}, overlay);
+  }
+});
+
+// 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) {
+        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])) {
+    throw new Error('Could not find original vnode');
+  }
+
+  // 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: "flex rounded-lg border border-gray-300 dark:border-gray-600",
+  style: {"margin":"2px"}
+};
+const _hoisted_2 = ["value"];
+const _hoisted_3 = {
+  class: "w-full px-4 pb-3",
+  style: {"font-size":"12px"}
+};
+const _hoisted_4 = ["innerHTML"];
+
+// holds the number value of the datetime
+
+const _sfc_main = {
+  __name: 'EodashDatePicker',
+  props: {
+  hintText: {
+    type: String,
+    default: null,
+  },
+},
+  setup(__props) {
+
+useCssVars(_ctx => ({
+  "cd569fa8": (transform.value)
+}));
+
+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([]);
+
+const { selectedStac } = storeToRefs(useSTAcStore());
+
+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;
+  }
+}
+
+// fixes calendar dispalcement on lib mode
+const transform = ref("");
+onMounted(() => {
+  transform.value = document.querySelector("eo-dash")
+    ? "translate3d(50px,-80px,0)"
+    : "translate3d(0px,-80px,0)";
+});
+
+return (_ctx, _cache) => {
+                                                       
+                                                     
+                                                     
+                                                         
+
+  return (openBlock(), createElementBlock(Fragment, null, [
+    createVNode(unref(DatePicker), {
+      modelValue: currentDate.value,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((currentDate).value = $event)),
+      modelModifiers: { number: true },
+      masks: masks.value,
+      attributes: attributes
+    }, createSlots({
+      default: withCtx(({ inputValue, inputEvents }) => [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("input", mergeProps({ value: inputValue }, toHandlers(inputEvents, true), {
+            style: {"margin":"1px"},
+            class: "flex-grow px-1 py-1 bg-white dark:bg-gray-700"
+          }), null, 16 /* FULL_PROPS */, _hoisted_2)
+        ])
+      ]),
+      _: 2 /* DYNAMIC */
+    }, [
+      (__props.hintText)
+        ? {
+            name: "footer",
+            fn: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("span", { innerHTML: __props.hintText }, null, 8 /* PROPS */, _hoisted_4)
+              ])
+            ]),
+            key: "0"
+          }
+        : undefined
+    ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "masks", "attributes"]),
+    createVNode(VRow, {
+      align: "center",
+      justify: "center",
+      style: {"margin-top":"6px"}
+    }, {
+      default: withCtx(() => [
+        withDirectives((openBlock(), createBlock(VBtn, {
+          style: {"padding":"0px","margin-right":"4px"},
+          density: "compact",
+          onClick: _cache[1] || (_cache[1] = $event => (jumpDate(true)))
+        }, {
+          default: withCtx(() => [
+            createVNode(VIcon, {
+              icon: [unref(mdiRayEndArrow)]
+            }, null, 8 /* PROPS */, ["icon"])
+          ]),
+          _: 1 /* STABLE */
+        })), [
+          [Tooltip, 'Set date to oldest available dataset', "bottom"]
+        ]),
+        withDirectives((openBlock(), createBlock(VBtn, {
+          style: {"padding":"0px","margin-left":"4px"},
+          density: "compact",
+          onClick: _cache[2] || (_cache[2] = $event => (jumpDate(false)))
+        }, {
+          default: withCtx(() => [
+            createVNode(VIcon, {
+              icon: [unref(mdiRayStartArrow)]
+            }, null, 8 /* PROPS */, ["icon"])
+          ]),
+          _: 1 /* STABLE */
+        })), [
+          [Tooltip, 'Set date to latest available dataset', "bottom"]
+        ])
+      ]),
+      _: 1 /* STABLE */
+    })
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+};
+
+export { _sfc_main as default };

package/dist/client/EodashItemFilter-BUyqlf5G.js

@@ -0,0 +1,194 @@
+import { ref, onMounted, openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString } from 'vue';
+import { $ as useSTAcStore } from './asWebComponent-CIm1IGNl.js';
+import '@eox/itemfilter';
+
+const _hoisted_1 = {
+  slot: "filterstitle",
+  style: {"margin":"14px 8px"}
+};
+const _hoisted_2 = {
+  slot: "resultstitle",
+  style: {"margin":"14px 8px"}
+};
+
+const defaultStyle =
+  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:white;";
+const highlightStyle =
+  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:#9bcaeb;";
+
+
+const _sfc_main = {
+  __name: 'EodashItemFilter',
+  props: {
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  filtersTitle: {
+    type: String,
+    default: "Indicators",
+  },
+  resultsTitle: {
+    type: String,
+    default: "",
+  },
+  titleProperty: {
+    type: String,
+    default: "title",
+  },
+
+  aggregateResults: {
+    type: String,
+    default: "themes",
+  },
+  enableHighlighting: { type: Boolean, default: true },
+  expandMultipleFilters: { type: Boolean, default: true },
+  expandMultipleResults: { type: Boolean, default: true },
+  filterProperties: {
+    /** @type {import("vue").PropType<{
+     * keys:string[];
+     * title:string;
+     * type:string;
+     * expanded?:boolean
+     * }[]> }*/
+    type: Array,
+    default: () => [
+      {
+        keys: ["title", "themes", "description"],
+        title: "Search",
+        type: "text",
+      },
+      {
+        key: "themes",
+        title: "Theme Filter",
+        type: "multiselect",
+      },
+    ],
+  },
+},
+  setup(__props) {
+
+const props = __props;
+/** @param {any} evt*/
+const onSelect = async (evt) => {
+  // reset the style of all compare buttons
+  eoxItemFilter.value?.shadowRoot
+    ?.querySelectorAll(".compareMapButton")
+    .forEach((res) => res.setAttribute("style", defaultStyle));
+  const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
+  if (item) {
+    // Reset compare stac to empty
+    store.resetSelectedCompareSTAC();
+    await store.loadSelectedSTAC(item.href);
+  }
+};
+const config = {
+  titleProperty: props.titleProperty,
+  filterProperties: props.filterProperties,
+  aggregateResults: props.aggregateResults,
+  enableHighlighting: props.enableHighlighting,
+  expandMultipleFilters: props.expandMultipleFilters,
+  expandMultipleResults: props.expandMultipleResults,
+};
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxItemFilter = ref(null);
+
+const store = useSTAcStore();
+
+const injectCompareButtons = () => {
+  setTimeout(() => {
+    /** @type {any} */
+    (eoxItemFilter.value)?.shadowRoot
+      .querySelectorAll("details>summary")
+      .forEach((/** @type {HTMLElement} */ el) =>
+        el.setAttribute("style", "width: 100%"),
+      );
+    /** @type {any} */
+    (eoxItemFilter.value)?.shadowRoot
+      .querySelectorAll("details>div li")
+      .forEach((/** @type {HTMLElement} */ res) => {
+        let compareButton = document.createElement("button");
+        compareButton.className = "compareMapButton";
+        compareButton.dataset.id = res.children[0].id;
+
+        compareButton.onclick = async (
+          /** {Event & { currentTarget: HTMLElement }} */ evt,
+        ) => {
+          // reset the style of all compare buttons
+          eoxItemFilter.value?.shadowRoot
+            ?.querySelectorAll(".compareMapButton")
+            .forEach((res) => {
+              res.setAttribute("style", defaultStyle);
+            });
+          const currentTarget = /** @type {HTMLElement}*/ (evt.currentTarget);
+          currentTarget?.setAttribute("style", highlightStyle);
+          const selected = eoxItemFilter.value?.items.find(
+            (/** @type {HTMLElement} */ it) =>
+              it.id === currentTarget?.dataset.id,
+          );
+          if (selected) {
+            await store.loadSelectedCompareSTAC(selected.href);
+          }
+        };
+        compareButton.setAttribute("style", defaultStyle);
+        const svgIcon = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "svg",
+        );
+        const iconPath = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path",
+        );
+        svgIcon.setAttribute("width", "15");
+        svgIcon.setAttribute("height", "15");
+        svgIcon.setAttribute("viewBox", "0 0 24 24");
+        iconPath.setAttribute(
+          "d",
+          "M19,3H14V5H19V18L14,12V21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,18H5L10,12M10,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H10V23H12V1H10V3Z",
+        );
+        svgIcon.appendChild(iconPath);
+        compareButton.appendChild(svgIcon);
+        res.append(compareButton);
+      });
+  }, 100);
+};
+
+onMounted(() => {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    section {
+      margin: 0 !important;
+    }
+    section button#filter-reset {
+      padding: 0 8px;
+      top: 8px;
+      right: 8px;
+    }
+  `;
+  eoxItemFilter.value?.shadowRoot?.appendChild(style);
+
+  // Only list child elements in list
+  const items = store.stac?.filter((item) => item.rel === "child");
+  /** @type {any} */
+  (eoxItemFilter.value).items = items;
+  if (props.enableCompare) {
+    injectCompareButtons();
+  }
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("eox-itemfilter", mergeProps({ class: "fill-height" }, config, {
+    ref_key: "eoxItemFilter",
+    ref: eoxItemFilter,
+    style: {"overflow":"auto"},
+    onSelect: onSelect
+  }), [
+    createElementVNode("h4", _hoisted_1, toDisplayString(__props.filtersTitle), 1 /* TEXT */),
+    createElementVNode("h4", _hoisted_2, toDisplayString(__props.resultsTitle), 1 /* TEXT */)
+  ], 16 /* FULL_PROPS */))
+}
+}
+
+};
+
+export { _sfc_main as default };

package/dist/client/EodashLayerControl-DRYy-Air.js

@@ -0,0 +1,111 @@
+import { computed, ref, openBlock, createElementBlock, unref, createCommentVNode } from 'vue';
+import '@eox/layercontrol';
+import '@eox/jsonform';
+import '@eox/timecontrol';
+import { $ as useSTAcStore, a2 as mapCompareEl, a3 as mapEl, a4 as eodashCompareCollections, a0 as eodashCollections, a5 as getColFromLayer } from './asWebComponent-CIm1IGNl.js';
+import { storeToRefs } from 'pinia';
+
+const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
+const _hoisted_2 = ["for"];
+
+
+const _sfc_main = {
+  __name: 'EodashLayerControl',
+  props: {
+  map: {
+    type: String,
+    default: "first",
+  },
+},
+  setup(__props) {
+
+const props = __props;
+
+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;
+
+/** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxLayercontrol = ref(null);
+
+/** @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt */
+const handleDatetimeUpdate = async (evt) => {
+  const { layer, datetime } = evt.detail;
+
+  const ec = await getColFromLayer(eodashCols, layer);
+
+  /** @type {Record<string,any>[] | undefined} */
+  let updatedLayers = [];
+
+  if (ec) {
+    await ec.fetchCollection();
+    updatedLayers = await ec.updateLayerJson(
+      datetime,
+      layer.get("id"),
+      props.map,
+    );
+  }
+  /** @type {Record<String,any>[] | undefined} */
+  const dataLayers = updatedLayers?.find(
+    (l) => l?.properties?.id === "AnalysisGroup",
+  )?.layers;
+
+  if (dataLayers?.length) {
+    // Add expand to all analysis layers
+    dataLayers?.forEach((dl) => {
+      dl.properties.layerControlExpand = true;
+      dl.properties.layerControlToolsExpand = true;
+    });
+    // assign layers to the map
+    /** @type {HTMLElement & Record<string,any>} */
+    (mapElement.value).layers = updatedLayers;
+  }
+};
+
+// -----  debounce logic
+/** @type {NodeJS.Timeout | undefined} */
+let timeout;
+
+/**
+ * @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt
+ **/
+const debouncedHandleDateTime = (evt) => {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    handleDatetimeUpdate(evt);
+  }, 500);
+};
+// ------
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("span", _hoisted_1, [
+    (showControls.value)
+      ? (openBlock(), createElementBlock("eox-layercontrol", {
+          key: 0,
+          for: unref(mapElement),
+          ".tools": ['datetime', 'info', 'config', 'opacity'],
+          "onDatetime:updated": debouncedHandleDateTime,
+          class: "fill-height",
+          toolsAsList: "true",
+          ref_key: "eoxLayercontrol",
+          ref: eoxLayercontrol
+        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2))
+      : createCommentVNode("v-if", true)
+  ]))
+}
+}
+
+};
+
+export { _sfc_main as default };