@eodash/eodash 5.7.0 → 5.8.0

package/dist/client/EodashChart-D-3AGKZY.js

@@ -0,0 +1,260 @@
+import { computed, ref, watch, nextTick, useTemplateRef, onMounted, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, normalizeStyle, withDirectives, unref, createCommentVNode, toRaw } from 'vue';
+import '@eox/chart';
+import { o as onChartClick } from './handling-NvY8Csry.js';
+import { ah as compareChartData, ai as chartData, $ as compareChartSpec, _ as chartSpec, Z as areChartsSeparateLayout } from './helpers-BFuh19CP.js';
+import { _ as _export_sfc, ad as getOverlayParent } from './asWebComponent-IZanwL-A.js';
+import { mdiArrowCollapse, mdiArrowExpand } from '@mdi/js';
+import { T as Tooltip } from './index-KGxz5Egv.js';
+
+const _style_0 = ".bg-surface:has(.eodash-chart-wrapper){height:100%;display:flex;flex-direction:column}";
+
+const _style_1 = ".eodash-chart-wrapper[data-v-29f0a1a6]{height:100%;flex-grow:1;min-height:180px;display:flex;flex-direction:column}.chart-frame[data-v-29f0a1a6]{position:relative;flex-grow:1;min-height:180px;display:flex;flex-direction:column}eox-chart[data-v-29f0a1a6]{flex-grow:1;min-height:0}.chart-toggle[data-v-29f0a1a6]{position:absolute;top:8px;right:46px;z-index:2;cursor:pointer}";
+
+const _hoisted_1 = {
+  ref: "container",
+  class: "eodash-chart-wrapper"
+};
+const _hoisted_2 = {
+  viewBox: "0 0 20 20",
+  width: "20",
+  height: "20",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = ["d"];
+const _hoisted_4 = [".spec", ".dataValues", ".opt"];
+
+
+const _sfc_main = {
+  __name: 'EodashChart',
+  props: {
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  vegaEmbedOptions: {
+    /** @type {import("vue").PropType<import("vega-embed").EmbedOptions>} */
+    type: Object,
+    default() {
+      return { actions: true };
+    },
+  },
+},
+  setup(__props) {
+
+
+
+const usedChartData = computed(() => {
+  return __props.enableCompare ? compareChartData.value : chartData.value;
+});
+
+const usedChartSpec = computed(() => {
+  return __props.enableCompare ? compareChartSpec.value : chartSpec.value;
+});
+
+const hasBindings = computed(() => {
+  const spec = usedChartSpec.value;
+  if (!spec) return false;
+
+  // Recursively search for any object with a 'bind' key that represents a physical UI input
+  let found = false;
+  /** @param {any} obj */
+  const searchBindings = (obj) => {
+    if (found || !obj || typeof obj !== "object") return;
+
+    // UI bindings that take up physical DOM space are objects with an 'input' property.
+    if (
+      "bind" in obj &&
+      typeof obj.bind === "object" &&
+      obj.bind !== null &&
+      "input" in obj.bind
+    ) {
+      found = true;
+      return;
+    }
+    Object.values(obj).forEach(searchBindings);
+  };
+  searchBindings(spec);
+  return found;
+});
+
+const renderedChartSpec = ref(null);
+
+watch(
+  usedChartSpec,
+  (newSpec) => {
+    if (!newSpec) {
+      renderedChartSpec.value = null;
+      return;
+    }
+
+    // Create a deep copy so we can safely mutate it
+    const adjustedSpec = JSON.parse(JSON.stringify(newSpec));
+
+    // Force the chart to be fully responsive to its CSS container
+    adjustedSpec.height = "container";
+    adjustedSpec.width = "container";
+
+    // Delay passing the spec to eox-chart until the next DOM update cycle.
+    // This ensures the dynamic chartStyles are physically applied
+    // to the container BEFORE Vega calculates its canvas size.
+    nextTick(() => {
+      renderedChartSpec.value = adjustedSpec;
+      chartRenderKey.value = Math.random(); // Force eox-chart to completely remount
+
+      // Force a browser-level resize event after the chart mounts.
+      // This tells Vega to re-read the container dimensions once the CSS has finished painting.
+      setTimeout(() => {
+        window.dispatchEvent(new Event("resize"));
+      }, 150);
+    });
+  },
+  { immediate: true },
+);
+
+const chartRenderKey = ref(0);
+const containerEl = useTemplateRef("container");
+
+/** @type {MutationObserver | null} */
+let observer = null;
+/** @type {number | null} */
+let styleInterval = null;
+
+onMounted(() => {
+  const el = containerEl.value;
+  if (!el) return;
+
+  // Continuously inject basic styling for the bindings form to make it look decent
+  styleInterval = window.setInterval(() => {
+    if (el) {
+      const eoxChart = el.querySelector("eox-chart");
+      if (eoxChart && eoxChart.shadowRoot) {
+        if (!eoxChart.shadowRoot.querySelector("#eodash-chart-styles")) {
+          const style = document.createElement("style");
+          style.id = "eodash-chart-styles";
+          style.innerHTML = `
+            * {
+              box-sizing: border-box !important;
+            }
+            #vis {
+              min-height: 100px !important;
+              flex: 1 1 auto !important;
+            }
+            :host, .vega-embed {
+              display: flex !important;
+              flex-direction: column !important;
+              height: 100% !important;
+              padding: 0 !important;
+              margin: 0 !important;
+            }
+            .vega-bindings {
+              flex: 0 0 auto !important;
+              display: flex !important;
+              flex-wrap: wrap;
+              gap: 2px !important;
+              background: rgba(255, 255, 255, 0.85);
+              padding: 6px 12px !important;
+              border-radius: 6px;
+              box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+              margin: 0 !important;
+              margin-top: -10px !important;
+              z-index: 10;
+            }
+            .vega-bindings:empty {
+              display: none !important;
+            }
+            .vega-embed > canvas, .vega-embed > svg {
+              height: 100% !important;
+              max-width: 100% !important;
+              object-fit: contain;
+            }
+            .vega-bind {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+              margin-bottom: 0 !important;
+            }
+          `;
+          eoxChart.shadowRoot.appendChild(style);
+        }
+      }
+    }
+  }, 200);
+
+  // For mobile view, handle overlay display changes
+  const overlay = getOverlayParent(el);
+  if (!overlay) return;
+
+  observer = new MutationObserver(async () => {
+    const style = getComputedStyle(overlay);
+    const visible = style.display !== "none";
+    if (visible) {
+      chartRenderKey.value = Math.random();
+    }
+  });
+
+  observer.observe(overlay, {
+    attributes: true,
+    attributeFilter: ["style", "class"],
+  });
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  if (styleInterval) window.clearInterval(styleInterval);
+});
+
+const chartStyles = computed(() => {
+  return {
+    height: "100%",
+    width: "100%",
+  };
+});
+
+const toggleIcon = computed(() =>
+  areChartsSeparateLayout.value ? mdiArrowCollapse : mdiArrowExpand,
+);
+
+function toggleLayout() {
+  areChartsSeparateLayout.value = !areChartsSeparateLayout.value;
+}
+
+return (_ctx, _cache) => {
+                                                         
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", {
+      class: "chart-frame",
+      style: normalizeStyle({ paddingBottom: hasBindings.value ? '25px' : '0px' })
+    }, [
+      (usedChartData.value && usedChartSpec.value)
+        ? withDirectives((openBlock(), createElementBlock("button", {
+            key: 0,
+            class: "chart-toggle",
+            onClick: toggleLayout
+          }, [
+            (openBlock(), createElementBlock("svg", _hoisted_2, [
+              createElementVNode("path", { d: toggleIcon.value }, null, 8 /* PROPS */, _hoisted_3)
+            ]))
+          ])), [
+            [Tooltip, unref(areChartsSeparateLayout) ? 'Minimize' : 'Maximize']
+          ])
+        : createCommentVNode("v-if", true),
+      (usedChartData.value && renderedChartSpec.value)
+        ? (openBlock(), createElementBlock("eox-chart", {
+            ".spec": toRaw(renderedChartSpec.value),
+            key: chartRenderKey.value,
+            ".dataValues": toRaw(usedChartData.value),
+            "onClick:item": _cache[0] || (_cache[0] = (...args) => (unref(onChartClick) && unref(onChartClick)(...args))),
+            style: normalizeStyle(chartStyles.value),
+            ".opt": __props.vegaEmbedOptions
+          }, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_4))
+        : createCommentVNode("v-if", true)
+    ], 4 /* STYLE */)
+  ], 512 /* NEED_PATCH */))
+}
+}
+
+};
+const EodashChart = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0,_style_1]],['__scopeId',"data-v-29f0a1a6"]]);
+
+export { EodashChart as default };

package/dist/client/{EodashDatePicker-CMPDT-ce.js → EodashDatePicker-Dm_goZzs.js}

@@ -1,11 +1,11 @@
 import { useCssVars, useTemplateRef, customRef, ref, computed, reactive, watch, onMounted, openBlock, createElementBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createBlock, createCommentVNode, mergeProps, toHandlers } from 'vue';
 import { DatePicker } from 'v-calendar';
-import { _ as _export_sfc, G as useDisplay, H as useSTAcStore, I as useTransparentPanel, J as VBtn, K as VIcon, L as eodashCollections, M as eodashCompareCollections } from './asWebComponent-BHWpMuE3.js';
-import { A as datetime } from './helpers-DjZVl_WF.js';
+import { _ as _export_sfc, G as useDisplay, H as useSTAcStore, I as useTransparentPanel, J as VBtn, K as VIcon } from './asWebComponent-IZanwL-A.js';
+import { L as datetime, W as eodashCollections, T as eodashCompareCollections } from './helpers-BFuh19CP.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
 import { storeToRefs } from 'pinia';
-import { T as Tooltip } from './index-CUjl-ZsI.js';
+import { T as Tooltip } from './index-KGxz5Egv.js';
 
 const _style_0 = ".vc-popover-content{--vc-nav-hover-bg: rgba(var(--v-theme-on-surface), .1);--vc-nav-item-active-color: rgb(var(--v-theme-on-secondary));--vc-nav-item-active-bg: rgba(var(--v-theme-secondary), .8);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .5)}.vc-container{--vc-day-content-hover-bg: rgba(var(--v-theme-on-surface), .2);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .4);--vc-header-arrow-hover-bg: rgba(var(--v-theme-secondary), .1)}.vc-attr{--vc-accent-600: rgba(var(--v-theme-secondary), .8)}.datePicker{--vc-day-content-hover-bg: red}@media(min-width:960px){.datePicker{position:absolute;bottom:0;left:0;right:0;margin-inline:auto;width:fit-content}}.vc-day-content{color:#5e5e5e;font-weight:400}.vc-highlight-content-solid{color:#fff!important}.vc-popover-content-wrapper{transform:var(--v518b583c)!important}.vc-date-picker-content,.datePicker{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.vc-popover-caret.direction-top.align-left{clip-path:polygon(0% 0%,100% 0%,0% 100%,0% 100%)}.vc-bordered{border:none}";
 

package/dist/client/{EodashItemFilter-BpdA8QQa.js → EodashItemFilter-CJy3zYzD.js}

@@ -1,5 +1,6 @@
 import { withAsyncContext, computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
-import { _ as _export_sfc, H as useSTAcStore, S as isFirstLoad } from './asWebComponent-BHWpMuE3.js';
+import { _ as _export_sfc, H as useSTAcStore } from './asWebComponent-IZanwL-A.js';
+import { P as isFirstLoad } from './helpers-BFuh19CP.js';
 
 const _style_0 = "eox-itemfilter[data-v-88d0abc7]{--form-flex-direction: row}@media(max-width:768px){eox-itemfilter[data-v-88d0abc7]{--form-flex-direction: column}}";
 

package/dist/client/{EodashLayerControl-BHpDA4_0.js → EodashLayerControl-rL8UnpkA.js}

@@ -1,9 +1,11 @@
-import { withAsyncContext, computed, ref, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
+import { withAsyncContext, computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createCommentVNode, createBlock } from 'vue';
 import 'color-legend-element';
 import '@eox/timecontrol';
-import { R as mapCompareEl, i as mapEl, S as getColFromLayer } from './helpers-DjZVl_WF.js';
-import { _ as _export_sfc, H as useSTAcStore, P as layerControlFormValueCompare, Q as layerControlFormValue, R as useEmitLayersUpdate, M as eodashCompareCollections, L as eodashCollections } from './asWebComponent-BHWpMuE3.js';
+import { a5 as mapCompareEl, q as mapEl, a6 as updateGeoZarrBands, a7 as updateLayerUrl, a8 as layerControlFormValueCompare, a9 as layerControlFormValue, aa as getColFromLayer, T as eodashCompareCollections, W as eodashCollections } from './helpers-BFuh19CP.js';
 import { storeToRefs } from 'pinia';
+import { _ as _export_sfc, H as useSTAcStore, aa as useEmitLayersUpdate } from './asWebComponent-IZanwL-A.js';
+import _sfc_main$1 from './EodashLayoutSwitcher-ZRlESI9O.js';
+import { mdiViewDashboard } from '@mdi/js';
 
 /**
  * Taken from jQuery 2.1.3
@@ -1367,35 +1369,53 @@ const bandsEditorInterface = [
   },
 ];
 
-const _style_0 = "eox-layercontrol[data-v-cd4de44c]{overflow:auto}";
+const _style_0 = "eox-layercontrol[data-v-8c6e0291]{overflow:auto}";
 
 const _hoisted_1 = { class: "d-flex flex-column" };
-const _hoisted_2 = ["for", ".customEditorInterfaces"];
+const _hoisted_2 = ["for", ".colormapRegistry", ".customEditorInterfaces"];
 const _hoisted_3 = {
-  key: 0,
-  class: "mt-2 mb-2"
+  slot: "layerstitle",
+  class: "d-flex justify-space-between ma-2 pa-2 flex-shrink-0"
 };
+const _hoisted_4 = { key: 0 };
 
 
 const _sfc_main = {
   __name: 'EodashLayerControl',
   props: {
+  /** Which map instance this control is bound to. Use `"second"` in a compare-mode layout. */
   map: {
     /** @type {import("vue").PropType<"first" | "second">} */
     //@ts-expect-error todo
     type: String,
     default: "first",
   },
+  /** Tool tabs shown inside `eox-layercontrol`. Remove entries to hide individual tabs. */
   tools: {
-    type: Array,
+    type: /** @type {import("vue").PropType<string[]>} */ (Array),
     default: () => ["datetime", "info", "config", "legend", "opacity"],
   },
+  /** Heading rendered above the layer list. Set to `false` to hide it. */
   title: {
-    type: String || Boolean,
+    type: /** @type {import("vue").PropType<string | false>} */ ([
+      String,
+      Boolean,
+    ]),
     default: "Layers",
   },
+  /** CSS custom-property overrides forwarded to the underlying `eox-layercontrol` element via its `style` attribute. */
   cssVars: {
-    type: Object,
+    type: /** @type {import("vue").PropType<Record<string, string>>} */ (
+      Object
+    ),
+    default: {},
+  },
+  layoutIcon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+  layoutTarget: {
+    type: String,
   },
 },
   async setup(__props) {
@@ -1424,7 +1444,12 @@ const config = {
   style: props.cssVars,
 };
 
-const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+const enableLayoutSwitcher = computed(
+  () => !!props.layoutTarget && !!props.layoutIcon,
+);
+
+const { selectedCompareStac, selectedStac, colormapRegistry } =
+  storeToRefs(useSTAcStore());
 
 const showControls = computed(() => {
   if (props.map === "second") {
@@ -1437,23 +1462,12 @@ const eodashCols =
   props.map === "second" ? eodashCompareCollections : eodashCollections;
 const mapElement = props.map === "second" ? mapCompareEl : mapEl;
 
-/** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+/** @type { import("vue").Ref<import("@eox/layercontrol").EOxLayerControl | null>} */
 const eoxLayercontrol = ref(null);
 
-// eox-timecontrol re-fires datetime:updated after layer reassignment;
-// dedupe by (collectionId, datetime)
-const processedDatetimes = new Map();
-watch([selectedStac, selectedCompareStac], () => processedDatetimes.clear());
-
 /** @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt */
 const handleDatetimeUpdate = async (evt) => {
   const { layer, datetime } = evt.detail;
-  const collectionId = layer.get("id")?.split(";:;")[0] ?? layer.get("id");
-  if (processedDatetimes.get(collectionId) === datetime) return;
-  // First event per collection is eox-timecontrol's mount echo.
-  const isFirstEvent = !processedDatetimes.has(collectionId);
-  processedDatetimes.set(collectionId, datetime);
-  if (isFirstEvent) return;
 
   const ec = await getColFromLayer(eodashCols, layer);
 
@@ -1509,6 +1523,9 @@ const debouncedHandleDateTime = (evt) => {
  * @param {Event & {detail:{layer:import("ol/layer").Layer;jsonformValue:Record<string,any>}}} evt
  */
 const onLayerConfigChange = (evt) => {
+  updateGeoZarrBands(evt.detail.layer, evt.detail.jsonformValue);
+  updateLayerUrl(evt.detail.layer, evt.detail.jsonformValue);
+
   if (props.map === "second") {
     layerControlFormValueCompare.value = evt.detail.jsonformValue;
   } else {
@@ -1521,6 +1538,8 @@ return (_ctx, _cache) => {
     (showControls.value)
       ? (openBlock(), createElementBlock("eox-layercontrol", mergeProps({ key: unref(mapElement) }, config, {
           for: unref(mapElement),
+          ".colormapRegistry": unref(colormapRegistry),
+          ".showLayerZoomState": true,
           ".customEditorInterfaces": unref(bandsEditorInterface),
           "onDatetime:updated": debouncedHandleDateTime,
           toolsAsList: "true",
@@ -1528,15 +1547,18 @@ return (_ctx, _cache) => {
           ref: eoxLayercontrol,
           "on:layerConfig:change": onLayerConfigChange
         }), [
-          renderSlot(_ctx.$slots, "layerstitle", {}, () => [
-            createElementVNode("div", null, [
-              (__props.title)
-                ? (openBlock(), createElementBlock("p", _hoisted_3, [
-                    createElementVNode("strong", null, toDisplayString(__props.title), 1 /* TEXT */)
-                  ]))
-                : createCommentVNode("v-if", true)
-            ])
-          ], true)
+          createElementVNode("span", _hoisted_3, [
+            (__props.title)
+              ? (openBlock(), createElementBlock("h4", _hoisted_4, toDisplayString(__props.title), 1 /* TEXT */))
+              : createCommentVNode("v-if", true),
+            (enableLayoutSwitcher.value)
+              ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 1,
+                  target: __props.layoutTarget,
+                  icon: __props.layoutIcon
+                }, null, 8 /* PROPS */, ["target", "icon"]))
+              : createCommentVNode("v-if", true)
+          ])
         ], 48 /* FULL_PROPS, NEED_HYDRATION */, _hoisted_2))
       : createCommentVNode("v-if", true)
   ]))
@@ -1544,6 +1566,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const EodashLayerControl = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-cd4de44c"]]);
+const EodashLayerControl = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-8c6e0291"]]);
 
 export { EodashLayerControl as default };

package/dist/client/{EodashLayoutSwitcher-B1fRUt7G.js → EodashLayoutSwitcher-ZRlESI9O.js}

@@ -1,8 +1,8 @@
 import { ref, openBlock, createElementBlock, unref, createBlock, withCtx, createVNode, mergeProps } from 'vue';
-import { C as activeTemplate } from './helpers-DjZVl_WF.js';
+import { N as activeTemplate } from './helpers-BFuh19CP.js';
 import { mdiViewDashboard } from '@mdi/js';
-import { G as useDisplay, I as useTransparentPanel, K as VIcon } from './asWebComponent-BHWpMuE3.js';
-import { V as VTooltip } from './VTooltip-CJw2FyWk.js';
+import { G as useDisplay, I as useTransparentPanel, K as VIcon } from './asWebComponent-IZanwL-A.js';
+import { V as VTooltip } from './VTooltip-ClWHUmWL.js';
 
 const _sfc_main = {
   __name: 'EodashLayoutSwitcher',