@eodash/eodash 5.7.0 → 5.8.0

package/dist/client/{index-CSG_JoOA.js → index-B8jGJSTA.js}

@@ -1,17 +1,18 @@
 import { useTemplateRef, ref, computed, onMounted, openBlock, createElementBlock, unref, createElementVNode, createCommentVNode } from 'vue';
-import { a0 as removeLayers, Q as sanitizeBbox, d as axios, i as mapEl, v as getLayers, A as datetime } from './helpers-DjZVl_WF.js';
-import { L as eodashCollections, _ as _export_sfc, H as useSTAcStore } from './asWebComponent-BHWpMuE3.js';
+import { W as eodashCollections, ak as removeLayers, a3 as sanitizeBbox, g as axios, q as mapEl, F as getLayers, L as datetime } from './helpers-BFuh19CP.js';
 import '@eox/timecontrol';
 import '@eox/itemfilter';
 import { storeToRefs } from 'pinia';
-import { c as createLayersConfig } from './create-layers-config-CBoYedqB.js';
+import { _ as _export_sfc, H as useSTAcStore } from './asWebComponent-IZanwL-A.js';
+import { c as createLayersConfig } from './create-layers-config-3S3y_kZg.js';
+import { b as buildCqlFilter, u as useMosaicState, a as useScheduleMosaicUpdate, c as useInitMosaic } from './mosaic-vHvSuih6.js';
 
 /**
  * @param {string} stacEndpoint
  * @param {[string, string]} selectedRange
  * @param {import("../types").TimelineExportEventDetail["selectedRangeItems"]} selectedRangeItems
  * @param {import("vue").Ref<import("stac-ts").StacCollection|null>} selectedStac
- * @param {Record<string, import("../types").Filter>} filters
+ * @param {import("@/types").ItemFilterFilters} filters
  */
 async function createAnimationLayers(
   stacEndpoint,
@@ -66,7 +67,7 @@ async function createAnimationLayers(
  * @param {{min: string, max: string}} date
  * @param {number[] | undefined} bbox
  * @param {import("vue").Ref<import("stac-ts").StacCollection|null>} selectedStac
- * @param {Record<string, import("../types").Filter>} filters
+ * @param {import("@/types").ItemFilterFilters} filters
  * @return {Promise<Array<{ layers: Record<string, any>[]; date: string }>>}
  */
 async function createAPILayers(
@@ -88,7 +89,7 @@ async function createAPILayers(
   );
   url.searchParams.set("bbox", sanitizeBbox(bbox).join(","));
 
-  const stacFilter = buildStacFilters(filters);
+  const stacFilter = buildCqlFilter(filters);
   if (stacFilter) {
     url.searchParams.set("filter", stacFilter);
   }
@@ -233,53 +234,7 @@ function restoreLayersVisibility(layers) {
   return layers;
 }
 
-/**
- * Build STAC API filter string from TimeSlider filters
- * @param {Record<string, import("../types").Filter>} filters
- * @returns {string}
- */
-function buildStacFilters(filters) {
-  if (!filters) return "";
-
-  /** @type {string[]} */
-  const stacFilters = [];
-
-  Object.values(filters).forEach((filter) => {
-    if (!filter || !filter.key) return;
-
-    // strip 'properties.' from key if present
-    const propName = filter.key.startsWith("properties.")
-      ? filter.key.replace("properties.", "")
-      : filter.key;
-
-    if (filter.type === "range" && filter.state) {
-      if (
-        filter.state.min !== undefined &&
-        filter.state.min > (filter.min ?? -Infinity)
-      ) {
-        stacFilters.push(`${propName}>=${filter.state.min}`);
-      }
-      if (
-        filter.state.max !== undefined &&
-        filter.state.max < (filter.max ?? Infinity)
-      ) {
-        stacFilters.push(`${propName}<=${filter.state.max}`);
-      }
-    } else if (filter.type === "multiselect" && filter.stringifiedState) {
-      if (filter.stringifiedState.length > 0) {
-        stacFilters.push(`${propName} IN (${filter.stringifiedState})`);
-      }
-    } else if (filter.type === "select" && filter.stringifiedState) {
-      if (filter.stringifiedState) {
-        stacFilters.push(`${propName}='${filter.stringifiedState}'`);
-      }
-    }
-  });
-
-  return stacFilters.join(" AND ");
-}
-
-const _style_0 = "eox-itemfilter[data-v-2fc72058]{--inline-container-height: 40px}";
+const _style_0 = "eox-itemfilter[data-v-a90da3dc]{--inline-container-height: 40px}";
 
 const _hoisted_1 = [".for", ".animate"];
 const _hoisted_2 = { class: "d-flex g-10 align-center" };
@@ -298,6 +253,15 @@ const _sfc_main = {
     type: Boolean,
     default: true,
   },
+  useMosaic: {
+    type: Boolean,
+    default: false,
+  },
+  mosaicIndicators: {
+    /** @type {import("vue").PropType<string[]>} */
+    type: Array,
+    default: () => [],
+  },
 },
   setup(__props) {
 
@@ -314,6 +278,9 @@ const selectedRange = /** @type {import("vue").Ref<[string, string]>} */ (
 );
 const initDate = [startDate.toISOString().split("T")[0]];
 
+/** @type {import("vue").Ref<import("@/types").ItemFilterFilters>} */
+const currentFilters = ref({});
+
 const hasMultipleItems = computed(() => {
   return eodashCollections.some((ec) => {
     const itemLinks = ec.collectionStac?.links.filter((l) => l.rel === "item");
@@ -322,6 +289,20 @@ const hasMultipleItems = computed(() => {
   });
 });
 
+const store = useSTAcStore();
+const { selectedStac, stacEndpoint } = storeToRefs(store);
+const { mosaicEndpoint } = useMosaicState();
+
+const isMosaicEnabled = computed(() => __props.useMosaic && !!mosaicEndpoint.value);
+
+const scheduleMosaicUpdate = useScheduleMosaicUpdate();
+
+useInitMosaic(
+  __props.useMosaic ? mosaicEndpoint.value : null,
+  selectedRange,
+  __props.mosaicIndicators,
+);
+
 /**
  * Handles the selection event from the time control component.
  * It finds the closest item to the "from" selected date
@@ -334,6 +315,17 @@ const onSelect = (e) => {
   // Update the selected range with the new dates
   selectedRange.value = date;
 
+  // if mosaic is enabled, we don't need to find the closest item,
+  // we just update the mosaic layer with the new time range and filters
+  if (isMosaicEnabled.value) {
+    scheduleMosaicUpdate(
+      mosaicEndpoint.value,
+      selectedRange.value,
+      currentFilters.value,
+    );
+    return;
+  }
+
   const allItems = Object.keys(selectedItems ?? {}).flatMap(
     (id) => selectedItems[id],
   );
@@ -354,7 +346,18 @@ const onSelect = (e) => {
   }
 };
 
-const { selectedStac, stacEndpoint } = storeToRefs(useSTAcStore());
+/**
+ * Handles filter changes from eox-itemfilter (e.g. cloud cover slider).
+ * Updates the mosaic layer with the new filter state.
+ *
+ * @param {CustomEvent<import("./types").ItemFilterEventDetail>} e
+ */
+const onFilter = (e) => {
+  if (!isMosaicEnabled.value) return;
+  const { filters } = e.detail;
+  currentFilters.value = filters;
+  scheduleMosaicUpdate(mosaicEndpoint.value, selectedRange.value, filters);
+};
 
 /**
  *
@@ -402,6 +405,7 @@ return (_ctx, _cache) => {
         ".for": unref(mapEl),
         onSelect: onSelect,
         titleKey: "title",
+        class: "pa-4",
         ".externalMapRendering": true,
         ".animate": __props.animate,
         ".initDate": initDate
@@ -417,9 +421,11 @@ return (_ctx, _cache) => {
           (__props.filters.length)
             ? (openBlock(), createElementBlock("eox-itemfilter", {
                 key: 0,
+                class: "mx-4",
                 ".inlineMode": true,
                 showResults: false,
-                ".filterProperties": __props.filters
+                ".filterProperties": __props.filters,
+                onFilter: onFilter
               }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3))
             : createCommentVNode("v-if", true),
           createElementVNode("eox-timecontrol-timelapse", { onExport: onExport }, null, 32 /* NEED_HYDRATION */)
@@ -431,6 +437,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-2fc72058"]]);
+const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-a90da3dc"]]);
 
 export { index as default };

package/dist/client/{index-Cu3-13Xg.js → index-BKQQJkhy.js}

@@ -1,14 +1,14 @@
-import { onMounted, watch, nextTick, onUnmounted, ref, useTemplateRef, computed, openBlock, createElementBlock, createVNode, unref, createCommentVNode, createBlock, createElementVNode, withCtx, createTextVNode } from 'vue';
+import { onMounted, watch, nextTick, onUnmounted, ref, useTemplateRef, computed, openBlock, createElementBlock, createElementVNode, createVNode, unref, createCommentVNode, createBlock, withCtx, createTextVNode } from 'vue';
 import '@eox/chart';
 import '@eox/drawtools';
 import '@eox/jsonform';
-import { N as useOnLayersUpdate, _ as _export_sfc, H as useSTAcStore, J as VBtn } from './asWebComponent-BHWpMuE3.js';
+import { L as useOnLayersUpdate, _ as _export_sfc, H as useSTAcStore, J as VBtn } from './asWebComponent-IZanwL-A.js';
 import { storeToRefs } from 'pinia';
-import { P as ProcessList, c as compareJobs, j as jobs } from './ProcessList-CTTIZa06.js';
-import EodashChart from './EodashChart-CLDqE93C.js';
-import { i as initProcess, u as updateJsonformIdentifier, h as handleProcesses } from './handling-BrcDDlgS.js';
-import { Y as getCompareLayers, v as getLayers, H as compareIndicator, E as indicator, R as mapCompareEl, i as mapEl, L as areChartsSeparateLayout, N as compareChartSpec, M as chartSpec } from './helpers-DjZVl_WF.js';
-import { u as updateJobsStatus, d as download, g as getDrawToolsProperties } from './async-DSKj6g1f.js';
+import { P as ProcessList, c as compareJobs, j as jobs } from './ProcessList-LL_UCbvc.js';
+import EodashChart from './EodashChart-D-3AGKZY.js';
+import { i as initProcess, u as updateJsonformIdentifier, h as handleProcesses } from './handling-NvY8Csry.js';
+import { ag as getCompareLayers, F as getLayers, U as compareIndicator, Q as indicator, a5 as mapCompareEl, q as mapEl, Z as areChartsSeparateLayout, $ as compareChartSpec, _ as chartSpec } from './helpers-BFuh19CP.js';
+import { u as updateJobsStatus, d as download, g as getDrawToolsProperties } from './async-CiNIOBVz.js';
 import { mdiCogPlayOutline, mdiDownloadCircleOutline } from '@mdi/js';
 
 /**
@@ -68,6 +68,19 @@ const useInitProcess = ({
       });
 
       if (newJsonForm) {
+        // Layer rebuilds strip drawtools' selection interactions; remount
+        // the form so initSelection re-attaches them.
+        const selectionStripped =
+          Object.values(newJsonForm.properties ?? {}).some(
+            (p) => p?.options?.drawtools?.layerId,
+          ) &&
+          !mapElement.value?.selectInteractions?.[
+            "SelectLayerClickInteraction"
+          ];
+        if (selectionStripped) {
+          jsonformSchema.value = null;
+          await nextTick();
+        }
         jsonformSchema.value = newJsonForm;
       }
     }
@@ -140,14 +153,18 @@ function useAutoExec(
   });
 }
 
-const _style_0 = "eox-jsonform{padding:.7em;min-height:0px}";
+const _style_0 = "eox-jsonform{padding:0 12px;min-height:0px;flex-shrink:0}.bg-surface:has(.eodash-process-container){height:calc(100% - 30px);overflow:hidden}.eodash-process-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.eodash-process-content{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column}.eodash-process-actions{text-align:right;padding:4px 12px;flex-shrink:0;border-top:1px solid rgba(0,0,0,.1);background:inherit}";
 
 const _hoisted_1 = {
   ref: "container",
-  class: "py-1"
+  class: "eodash-process-container"
+};
+const _hoisted_2 = { class: "eodash-process-content" };
+const _hoisted_3 = [".schema"];
+const _hoisted_4 = {
+  key: 0,
+  class: "eodash-process-actions"
 };
-const _hoisted_2 = [".schema"];
-const _hoisted_3 = { class: "text-right" };
 
 
 const _sfc_main = {
@@ -158,6 +175,7 @@ const _sfc_main = {
     default: false,
   },
   vegaEmbedOptions: {
+    /** @type {import("vue").PropType<import("vega-embed").EmbedOptions>} */
     type: Object,
     default() {
       return { actions: true };
@@ -178,6 +196,90 @@ const jsonformEl =
     useTemplateRef("jsonformEl")
   );
 
+// Inject custom styles into the eox-jsonform shadow DOM to make eox-drawtools inline
+watch(jsonformEl, (el) => {
+  if (el && el.shadowRoot) {
+    const styleId = "eodash-drawtools-inline-style";
+    if (!el.shadowRoot.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        /* Compact standard form elements */
+        .form-control, .form-group {
+          margin-bottom: 8px !important;
+        }
+        .form-control > label, .form-group > label {
+          margin-bottom: 2px !important;
+          font-size: 0.9em;
+        }
+        
+        /* Specific layout for drawtools */
+        .form-control:has(eox-drawtools) {
+          position: relative;
+          padding: 8px 12px !important;
+          border: none !important;
+          background: transparent !important;
+          margin-bottom: 8px !important;
+        }
+        .form-control:has(eox-drawtools) > label {
+          position: absolute;
+          left: 12px;
+          top: 8px;
+          margin: 0 !important;
+          width: calc(100% - 180px); /* Give label maximum available width */
+          line-height: 1.2;
+          display: flex;
+          align-items: flex-start;
+          padding-top: 8px;
+          pointer-events: none; /* Let clicks pass through to buttons if they overlap slightly */
+        }
+        .form-control:has(eox-drawtools) > eox-drawtools {
+          display: block;
+          width: 100%;
+        }
+      `;
+      el.shadowRoot.appendChild(style);
+    }
+
+    const injectDrawtoolsStyle = () => {
+      const drawtools = el?.shadowRoot?.querySelector("eox-drawtools");
+      if (drawtools && drawtools.shadowRoot) {
+        if (
+          !drawtools.shadowRoot.getElementById("eodash-drawtools-indent-style")
+        ) {
+          const dtStyle = document.createElement("style");
+          dtStyle.id = "eodash-drawtools-indent-style";
+          dtStyle.textContent = `
+            eox-drawtools-controller {
+              display: flex;
+              justify-content: flex-end; /* Push buttons to the right */
+              min-height: 40px;
+              width: 100%;
+            }
+            eox-drawtools-list {
+              display: block;
+              margin-top: 10px;
+              width: 100%;
+            }
+          `;
+          drawtools.shadowRoot.appendChild(dtStyle);
+          return true;
+        }
+      }
+      return false;
+    };
+
+    if (!injectDrawtoolsStyle()) {
+      const observer = new MutationObserver(() => {
+        if (injectDrawtoolsStyle()) {
+          observer.disconnect();
+        }
+      });
+      observer.observe(el.shadowRoot, { childList: true, subtree: true });
+    }
+  }
+});
+
 const isAsync = computed(
   () =>
     selectedStac.value?.links.filter((l) => l.endpoint === "eoxhub_workspaces")
@@ -281,59 +383,63 @@ return (_ctx, _cache) => {
                                                      
 
   return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createVNode(ProcessList, {
-      "map-element": unref(mapElement),
-      "enable-compare": __props.enableCompare
-    }, null, 8 /* PROPS */, ["map-element", "enable-compare"]),
-    (jsonformSchema.value)
-      ? (openBlock(), createElementBlock("eox-jsonform", {
-          key: jsonformKey.value,
-          ref_key: "jsonformEl",
-          ref: jsonformEl,
-          ".schema": jsonformSchema.value
-        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2))
-      : createCommentVNode("v-if", true),
-    (!unref(areChartsSeparateLayout))
-      ? (openBlock(), createBlock(EodashChart, {
-          key: 1,
-          "vega-embed-options": __props.vegaEmbedOptions,
-          "enable-compare": __props.enableCompare
-        }, null, 8 /* PROPS */, ["vega-embed-options", "enable-compare"]))
-      : createCommentVNode("v-if", true),
-    createElementVNode("div", _hoisted_3, [
-      (showExecBtn.value)
-        ? (openBlock(), createBlock(VBtn, {
-            key: 0,
-            loading: loading.value,
-            style: {"margin-right":"8px"},
-            "append-icon": [unref(mdiCogPlayOutline)],
-            onClick: startProcess,
-            density: "comfortable",
-            size: "small"
-          }, {
-            default: withCtx(() => [...(_cache[0] || (_cache[0] = [
-              createTextVNode(" Execute ", -1 /* CACHED */)
-            ]))]),
-            _: 1 /* STABLE */
-          }, 8 /* PROPS */, ["loading", "append-icon"]))
+    createElementVNode("div", _hoisted_2, [
+      createVNode(ProcessList, {
+        "map-element": unref(mapElement),
+        "enable-compare": __props.enableCompare
+      }, null, 8 /* PROPS */, ["map-element", "enable-compare"]),
+      (jsonformSchema.value)
+        ? (openBlock(), createElementBlock("eox-jsonform", {
+            key: jsonformKey.value,
+            ref_key: "jsonformEl",
+            ref: jsonformEl,
+            ".schema": jsonformSchema.value
+          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3))
         : createCommentVNode("v-if", true),
-      (processResults.value.length && isProcessed.value && !isAsync.value)
-        ? (openBlock(), createBlock(VBtn, {
+      (!unref(areChartsSeparateLayout))
+        ? (openBlock(), createBlock(EodashChart, {
             key: 1,
-            color: "primary",
-            style: {"margin-right":"8px"},
-            "append-icon": [unref(mdiDownloadCircleOutline)],
-            onClick: downloadResults,
-            size: "small",
-            density: "comfortable"
-          }, {
-            default: withCtx(() => [...(_cache[1] || (_cache[1] = [
-              createTextVNode(" Download ", -1 /* CACHED */)
-            ]))]),
-            _: 1 /* STABLE */
-          }, 8 /* PROPS */, ["append-icon"]))
+            "vega-embed-options": __props.vegaEmbedOptions,
+            "enable-compare": __props.enableCompare
+          }, null, 8 /* PROPS */, ["vega-embed-options", "enable-compare"]))
         : createCommentVNode("v-if", true)
-    ])
+    ]),
+    (showExecBtn.value || (processResults.value.length && isProcessed.value && !isAsync.value))
+      ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          (showExecBtn.value)
+            ? (openBlock(), createBlock(VBtn, {
+                key: 0,
+                loading: loading.value,
+                style: {"margin-right":"8px"},
+                "append-icon": [unref(mdiCogPlayOutline)],
+                onClick: startProcess,
+                density: "comfortable",
+                size: "small"
+              }, {
+                default: withCtx(() => [...(_cache[0] || (_cache[0] = [
+                  createTextVNode(" Execute ", -1 /* CACHED */)
+                ]))]),
+                _: 1 /* STABLE */
+              }, 8 /* PROPS */, ["loading", "append-icon"]))
+            : createCommentVNode("v-if", true),
+          (processResults.value.length && isProcessed.value && !isAsync.value)
+            ? (openBlock(), createBlock(VBtn, {
+                key: 1,
+                color: "primary",
+                style: {"margin-right":"8px"},
+                "append-icon": [unref(mdiDownloadCircleOutline)],
+                onClick: downloadResults,
+                size: "small",
+                density: "comfortable"
+              }, {
+                default: withCtx(() => [...(_cache[1] || (_cache[1] = [
+                  createTextVNode(" Download ", -1 /* CACHED */)
+                ]))]),
+                _: 1 /* STABLE */
+              }, 8 /* PROPS */, ["append-icon"]))
+            : createCommentVNode("v-if", true)
+        ]))
+      : createCommentVNode("v-if", true)
   ], 512 /* NEED_PATCH */))
 }
 }