@eodash/eodash 5.2.0 → 5.3.1

package/core/client/utils/bands-editor/index.js

@@ -0,0 +1,68 @@
+/**
+ * Custom band combination editor interface for eox-jsonform
+ */
+import { AbstractEditor } from "@json-editor/json-editor/src/editor";
+import { generateBandColors } from "./colors";
+import { buildRGBInterface } from "./rgb.js";
+import { buildArithmeticInterface } from "./arithmetic.js";
+
+export class BandsEditor extends AbstractEditor {
+  /** @type {Record<string, HTMLElement[]>} */
+  variableSlots = {};
+  /** @type {Record<string, string>} */
+  variableValues = {};
+  /** @type {string[]} */
+  bands = [];
+  /** @type {string[]} */
+  bandTitles = [];
+  /** @type {string[]} */
+  colors = [];
+
+  build() {
+    super.build();
+    // Determine the format type
+    const format = this.schema.format || "bands";
+
+    this.bands =
+      format === "bands" ? this.schema.items?.enum : this.schema.enum || [];
+    this.bandTitles =
+      format === "bands"
+        ? this.schema.items?.options?.enum_titles
+        : this.schema.options.enum_titles || this.bands;
+    this.colors = generateBandColors(this.schema, format);
+
+    // control
+    this.control = document.createElement("div");
+    this.control.classList.add("form-control");
+
+    if (format === "bands") {
+      buildRGBInterface(this, this.colors, this.bands, this.bandTitles);
+    } else if (format === "bands-arithmetic") {
+      buildArithmeticInterface(this, this.colors, this.bands, this.bandTitles);
+    }
+
+    // label
+    this.label = document.createElement("span");
+    this.label.classList.add("je-header");
+    this.label.textContent = this.schema.title ?? "";
+
+    // appends
+    this.container?.appendChild(this.label);
+    this.container?.appendChild(this.control);
+  }
+}
+
+export const bandsEditorInterface = [
+  {
+    type: "array",
+    format: "bands",
+    func: BandsEditor,
+  },
+  {
+    type: "string",
+    format: "bands-arithmetic",
+    func: BandsEditor,
+  },
+];
+
+export default bandsEditorInterface;

package/core/client/utils/bands-editor/rgb.js

@@ -0,0 +1,102 @@
+import {
+  createSlotStyles,
+  createSlot,
+  fillSlotWithBand,
+  addDraggableBands,
+} from "./dom";
+
+/**
+ * Build the traditional RGB bands interface
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} colors - Array of color strings
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+export function buildRGBInterface(editor, colors, bands, bandTitles) {
+  // Use unified styles instead of creating separate styles
+  const style = createSlotStyles(bands, colors);
+  editor.control?.appendChild(style);
+
+  // Add draggable bands
+  addDraggableBands(editor, bands, bandTitles);
+
+  editor.control?.appendChild(document.createElement("hr"));
+
+  // Add RGB slots using unified slot system
+  addRGBSlots(editor, bands, bandTitles);
+}
+
+/**
+ * Add RGB slots for traditional bands interface using unified slot system
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+export function addRGBSlots(editor, bands, bandTitles) {
+  // Create a container for RGB slots
+  const rgbContainer = document.createElement("div");
+  rgbContainer.classList.add("slots-container");
+  ["R", "G", "B"].forEach((slot, index) => {
+    const onDrop = (/** @type {DragEvent} */ e) => {
+      e.preventDefault();
+      const enumValue = e.dataTransfer?.getData("band");
+      if (!enumValue) return;
+
+      const enumIndex = bands.indexOf(enumValue);
+      const title = bandTitles[enumIndex] || enumValue;
+
+      fillSlotWithBand(slotDiv, enumValue, title);
+      // Get current value as array or create new one
+      const currentValue = editor.getValue() || [];
+      currentValue[index] = enumValue;
+      editor.setValue(currentValue);
+      editor.onChange(true);
+    };
+
+    const slotDiv = createSlot(slot, onDrop);
+    addRGBSlotStyle(slotDiv);
+    rgbContainer.appendChild(slotDiv);
+
+    // Initialize with existing value
+    setTimeout(() => {
+      const currentValue = editor.getValue();
+      if (currentValue?.[index]) {
+        const enumValue = currentValue[index];
+        const enumIndex = bands.indexOf(enumValue);
+        const title = bandTitles[enumIndex] || enumValue;
+        if (enumValue) {
+          fillSlotWithBand(slotDiv, enumValue, title);
+        }
+      }
+    });
+  });
+
+  editor.control?.appendChild(rgbContainer);
+}
+
+/**
+ * Create specific styles for RGB slots
+ * @param {HTMLElement} rgbSlot - Array of RGB slot elements
+ */
+function addRGBSlotStyle(rgbSlot) {
+  rgbSlot.style.border = "2px dashed";
+  switch (rgbSlot.dataset.slot) {
+    case "R": {
+      rgbSlot.style.borderColor = "#F88";
+      rgbSlot.style.background = "#FEE";
+      break;
+    }
+    case "G": {
+      rgbSlot.style.borderColor = "#8F8";
+      rgbSlot.style.background = "#EFE";
+      break;
+    }
+    case "B": {
+      rgbSlot.style.borderColor = "#88F";
+      rgbSlot.style.background = "#EEF";
+      break;
+    }
+    default:
+      break;
+  }
+}

package/core/client/utils/index.js

@@ -156,6 +156,8 @@ export const setCollectionsPalette = (colors) => {
  * @param {string} absoluteUrl - The absolute indicator URL
  * @param {import('@/eodashSTAC/EodashCollection').EodashCollection[]} eodashCollections  - The array of existing eodash collections to be updated
  * @param {string[]} colorPalette - The color palette to assign to each collection
+ * @param {boolean} isAPI - Flag indicating if the collection is fetched from an API
+ * @param {string | null} rasterEndpoint - Optional raster endpoint URL
  * @async
  * @description This function extracts collection URLs from the indicator, fetches collection data,
  * processes parquet items if available, and updates the eodashCollections array with new collection data.
@@ -166,6 +168,8 @@ export const updateEodashCollections = async (
   selectedStac,
   absoluteUrl,
   colorPalette,
+  isAPI,
+  rasterEndpoint = null,
 ) => {
   // init eodash collections
   const collectionUrls = extractCollectionUrls(selectedStac, absoluteUrl);
@@ -173,11 +177,10 @@ export const updateEodashCollections = async (
   await Promise.all(
     collectionUrls.map((cu, idx) => {
       return new Promise((resolve, _reject) => {
-        const ec = new EodashCollection(cu);
+        const ec = new EodashCollection(cu, isAPI, rasterEndpoint);
         ec.fetchCollection().then((col) => {
           // assign color from the palette
           ec.color = colorPalette[idx % colorPalette.length];
-
           const parquetAsset = Object.values(col.assets ?? {}).find(
             (asset) =>
               asset.type === "application/vnd.apache.parquet" &&

package/core/client/views/Dashboard.vue

@@ -52,7 +52,7 @@ await loadFont(eodash?.brand?.font, props.isWebComponent);
 
 const { loadSTAC, init } = useSTAcStore();
 init(eodash.stacEndpoint);
-await loadSTAC(eodash.stacEndpoint);
+await loadSTAC();
 
 const { smAndDown } = useDisplay();
 

package/core/client/vite-env.d.ts

@@ -30,3 +30,125 @@ declare module "@eox/ui/vuetify/blueprint.js" {
   const eox: Blueprint;
   export { eox };
 }
+
+declare module "@json-editor/json-editor/src/editor" {
+  export class AbstractEditor {
+    schema: Record<string, any>;
+    active: boolean;
+    options: Record<string, any>;
+    formname: string;
+    path: string;
+    parent?: AbstractEditor;
+    container?: HTMLElement;
+    input?: HTMLElement;
+    label?: HTMLElement;
+    header?: HTMLElement;
+
+    constructor(
+      options: {
+        jsoneditor: any;
+        schema: Record<string, any>;
+        path?: string;
+        formname?: string;
+        parent?: AbstractEditor;
+        container?: HTMLElement;
+      },
+      defaults: any,
+    );
+
+    // Core lifecycle methods
+    build(): void;
+    preBuild(): void;
+    postBuild(): void;
+    destroy(): void;
+    register(): void;
+    unregister(): void;
+
+    // Event handling
+    onChildEditorChange(editor: AbstractEditor, eventData?: unknown): void;
+    notify(): void;
+    change(eventData?: unknown): void;
+    onChange(
+      bubble?: boolean,
+      fromTemplate?: boolean,
+      eventData?: unknown,
+    ): void;
+    onMove(): void;
+    onWatchedFieldChange(): void;
+
+    // Value management
+    setValue(value: unknown): void;
+    getValue(): any;
+    refreshValue(): void;
+    getDefault(): unknown;
+    applyConstFilter(value: unknown): unknown;
+
+    // State management
+    isActive(): boolean;
+    activate(): void;
+    deactivate(): void;
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isRequired(): boolean;
+    isDefaultRequired(): boolean;
+
+    // Dependencies
+    registerDependencies(): void;
+    evaluateDependencies(): void;
+    checkDependency(path: string, choices: unknown): void;
+
+    // Container and UI
+    setContainer(container: HTMLElement): void;
+    setContainerAttributes(): void;
+    setOptInCheckbox(): void;
+    getNumColumns(): number;
+
+    // Watch functionality
+    setupWatchListeners(): void;
+    refreshWatchedFieldValues(): boolean;
+    getWatchedFieldValues(): Record<string, unknown>;
+
+    // Links
+    addLinks(): void;
+    addLink(link: HTMLElement): void;
+    getLink(data: {
+      href: string;
+      rel?: string;
+      mediaType?: string;
+      download?: boolean | string;
+      class?: string;
+    }): HTMLElement;
+
+    // UI helpers
+    getButton(
+      text: string,
+      icon?: string,
+      title?: string,
+      args?: unknown[],
+    ): HTMLElement;
+    setButtonText(
+      button: HTMLElement,
+      text: string,
+      icon?: string,
+      title?: string,
+      args?: unknown[],
+    ): HTMLElement;
+    updateHeaderText(): void;
+    getHeaderText(titleOnly?: boolean): string;
+    getTitle(): string;
+    cleanText(txt: string): string;
+
+    // Utility methods
+    getPathDepth(): number;
+    getChildEditors(): boolean | Record<string, AbstractEditor>;
+    getDisplayText(arr: unknown[]): string[];
+    getValidId(id?: string | number): string;
+    setInputAttributes(inputAttribute: string[], input?: HTMLElement): void;
+    expandCallbacks(
+      scope: string,
+      options: Record<string, unknown>,
+    ): Record<string, unknown>;
+    showValidationErrors(errors: unknown[]): void;
+  }
+}

package/dist/client/{DashboardLayout-Dq9Kfe6O.js → DashboardLayout-BAstYnhU.js}

@@ -1,9 +1,9 @@
 import { createBlock, openBlock, withCtx, createElementVNode, unref, createElementBlock, createCommentVNode, normalizeStyle, Suspense, resolveDynamicComponent, mergeProps, Fragment, renderList, Transition } from 'vue';
 import '@eox/layout';
-import { _ as _export_sfc, u as useDefineTemplate } from './asWebComponent-ZyEzWOOf.js';
-import { V as VMain } from './VMain-Ci9DyaGU.js';
+import { _ as _export_sfc, u as useDefineTemplate } from './asWebComponent-DZeEbWG0.js';
+import { V as VMain } from './VMain-Ck2g1QOG.js';
 
-const _style_0 = ".panel[data-v-4126a8ae]{position:relative;overflow:auto;z-index:1;pointer-events:none}.pointer[data-v-4126a8ae]{pointer-events:all}.bg-panel[data-v-4126a8ae]{z-index:0;border-radius:0!important}.fade-enter-active[data-v-4126a8ae],.fade-leave-active[data-v-4126a8ae]{transition:opacity .25s ease}.fade-enter-from[data-v-4126a8ae],.fade-leave-to[data-v-4126a8ae]{opacity:0}.bg-surface[data-v-4126a8ae],.bg-primary[data-v-4126a8ae]{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;max-height:100%;overflow:auto;scrollbar-color:rgba(var(--v-theme-on-surface),.2) transparent;scrollbar-width:thin}.bg-surface[data-v-4126a8ae]{background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.bg-primary[data-v-4126a8ae]{background-color:rgba(var(--v-theme-primary),var(--v-primary-opacity, .8))!important}";
+const _style_0 = ".panel[data-v-9c8477cc]{position:relative;overflow:auto;z-index:1;pointer-events:none}.pointer[data-v-9c8477cc]{pointer-events:all}.bg-panel[data-v-9c8477cc]{z-index:0;border-radius:0!important}.fade-enter-active[data-v-9c8477cc],.fade-leave-active[data-v-9c8477cc]{transition:opacity .25s ease}.fade-enter-from[data-v-9c8477cc],.fade-leave-to[data-v-9c8477cc]{opacity:0}.bg-surface[data-v-9c8477cc],.bg-primary[data-v-9c8477cc]{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;max-height:100%;overflow:auto;scrollbar-color:rgba(var(--v-theme-on-surface),.2) transparent;scrollbar-width:thin}.bg-surface[data-v-9c8477cc]{background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.bg-primary[data-v-9c8477cc]{background-color:rgba(var(--v-theme-primary),var(--v-primary-opacity, .8))!important}";
 
 const _hoisted_1 = ["gap"];
 const _hoisted_2 = ["id", "h", "w", "x", "y"];
@@ -29,7 +29,6 @@ return (_ctx, _cache) => {
       createElementVNode("eox-layout", {
         mediaBreakpoints: [0, 960, 1920],
         gap: unref(gap),
-        class: "layout-container",
         style: layoutStyle
       }, [
         (unref(bgWidget)?.component)
@@ -90,6 +89,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-4126a8ae"]]);
+const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-9c8477cc"]]);
 
 export { DashboardLayout as default };

package/dist/client/{DynamicWebComponent-DCBMXskE.js → DynamicWebComponent-7v4_DFqP.js}

@@ -1,5 +1,5 @@
 import { withAsyncContext, ref, onMounted, onUnmounted, createElementBlock, openBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
-import { E as useSTAcStore } from './asWebComponent-ZyEzWOOf.js';
+import { E as useSTAcStore } from './asWebComponent-DZeEbWG0.js';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
 

package/dist/client/{EodashDatePicker-DtngxU6s.js → EodashDatePicker-IVHLv9UN.js}

@@ -1,13 +1,13 @@
 import { useCssVars, ref, useTemplateRef, customRef, computed, reactive, watch, onMounted, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createCommentVNode, createBlock, mergeProps, toHandlers } from 'vue';
 import { DatePicker } from 'v-calendar';
-import { _ as _export_sfc, D as useDisplay, E as useSTAcStore, F as useTransparentPanel, G as VBtn, H as VIcon, I as eodashCollections, J as eodashCompareCollections } from './asWebComponent-ZyEzWOOf.js';
-import { y as datetime, k as getDatetimeProperty } from './helpers-wXK7Ywio.js';
+import { _ as _export_sfc, D as useDisplay, E as useSTAcStore, F as useTransparentPanel, G as VBtn, H as VIcon, I as eodashCollections, J as eodashCompareCollections } from './asWebComponent-DZeEbWG0.js';
+import { A as datetime } from './helpers-CI_7CUmn.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
 import { storeToRefs } from 'pinia';
-import { T as Tooltip } from './index-9KR-G20t.js';
+import { T as Tooltip } from './index-C13BiO9C.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(--254ea936)!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}";
+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(--v5270a4d4)!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}";
 
 const _hoisted_1 = {
   ref: "rootRef",
@@ -56,7 +56,7 @@ const _sfc_main = {
   setup(__props) {
 
 useCssVars(_ctx => ({
-  "254ea936": (transform.value)
+  "v5270a4d4": (transform.value)
 }));
 
 const { lgAndDown } = useDisplay();
@@ -76,6 +76,13 @@ const currentDate = customRef((track, trigger) => ({
     trigger();
     log.debug("Datepicker setting currentDate", datetime.value);
     const date = new Date(num);
+
+    // Validate the date before setting
+    if (isNaN(date.getTime())) {
+      log.warn("Invalid date value provided to datepicker:", num);
+      return;
+    }
+
     datetime.value = date.toISOString();
     //@ts-expect-error supports move method https://vcalendar.io/datepicker/basics.html#basics
     datePickerEl.value?.move({
@@ -157,24 +164,15 @@ async function fetchCollectionsAttributes(eodashCollections) {
 
   return await Promise.all(
     eodashCollections.map((ec, idx) => {
-      return ec.fetchCollection().then(() => {
-        const dateProperty = getDatetimeProperty(ec.getItems());
-        if (!dateProperty) {
-          return [];
+      return ec.fetchCollection().then(async () => {
+        const dates = await ec.getDates();
+        if (!dates || !dates.length) {
+          log.debug(
+            `Collection ${ec.collectionStac?.id} has no dates, skipping datepicker attribute`,
+          );
+          return undefined;
         }
-        const dates = [
-          ...new Set(
-            ec.getItems()?.reduce((valid, item) => {
-              const parsed = Date.parse(
-                /** @type {string} */ (item[dateProperty]),
-              );
-              if (parsed) {
-                valid.push(new Date(parsed));
-              }
-              return valid;
-            }, /** @type {Date[]} */ ([])),
-          ),
-        ];
+
         return {
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
           dot: {

package/dist/client/{EodashItemFilter-ClQebJQt.js → EodashItemFilter-BPMpnXjo.js}

@@ -1,8 +1,7 @@
-import { computed, ref, createElementBlock, openBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
-import { _ as _export_sfc, E as useSTAcStore, O as isFirstLoad } from './asWebComponent-ZyEzWOOf.js';
-import '@eox/itemfilter';
+import { withAsyncContext, computed, ref, createElementBlock, openBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
+import { _ as _export_sfc, E as useSTAcStore, Q as isFirstLoad } from './asWebComponent-DZeEbWG0.js';
 
-const _style_0 = "eox-itemfilter[data-v-1be0ec61]{--form-flex-direction: row}@media (max-width: 768px){eox-itemfilter[data-v-1be0ec61]{--form-flex-direction: column}}";
+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}}";
 
 const _hoisted_1 = [".items"];
 const _hoisted_2 = {
@@ -83,38 +82,55 @@ const _sfc_main = {
   },
 },
   emits: ["select"],
-  setup(__props, { emit: __emit }) {
+  async setup(__props, { emit: __emit }) {
+
+let __temp, __restore;
+
+if (!customElements.get("eox-itemfilter")) {
+  (
+  ([__temp,__restore] = withAsyncContext(() => import('@eox/itemfilter'))),
+  await __temp,
+  __restore()
+);
+}
 
 const store = useSTAcStore();
 const emit = __emit;
-
+const items = store.isApi
+  ? store.stac
+  : store.stac?.filter((item) => item.rel === "child");
 const props = __props;
 /**
- * @param {import("stac-ts").StacLink} item
+ *
+ * @param  {Function} loader Function to load the item
+ * @param {Function} reset Function to reset the selection
  */
-const selectIndicator = async (item) => {
-  if (item) {
-    if (isFirstLoad.value) {
-      // prevent the map from jumping to the initial position
-      isFirstLoad.value = false;
+const createSelect = (loader, reset) => {
+  /**
+   * @param {import("stac-ts").StacLink | import("stac-ts").StacCollection} item
+   */
+  return async (item) => {
+    if (item) {
+      if (isFirstLoad.value) {
+        // prevent the map from jumping to the initial position
+        isFirstLoad.value = false;
+      }
+      const href = /** @type {string} */ (store.isApi ? item.id : item.href);
+      await loader(href);
+      emit("select", item);
+    } else {
+      reset();
     }
-    await store.loadSelectedSTAC(item.href);
-    emit("select", item);
-  } else {
-    store.selectedStac = null;
-  }
-};
-/**
- * @param {import("stac-ts").StacLink} item
- */
-const selectCompareIndicator = (item) => {
-  if (item) {
-    store.loadSelectedCompareSTAC(item.href);
-    emit("select", item);
-  } else {
-    store.resetSelectedCompareSTAC();
-  }
+  };
 };
+const selectIndicator = createSelect(
+  store.loadSelectedSTAC,
+  () => (store.selectedStac = null),
+);
+const selectCompareIndicator = createSelect(
+  store.loadSelectedCompareSTAC,
+  store.resetSelectedCompareSTAC,
+);
 /** @param {any} evt*/
 const onSelect = async (evt) => {
   const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
@@ -124,7 +140,6 @@ const onSelect = async (evt) => {
     selectIndicator(item);
   }
 };
-
 const config = computed(() => ({
   titleProperty: props.titleProperty,
   enableHighlighting: props.enableHighlighting,
@@ -147,7 +162,7 @@ return (_ctx, _cache) => {
     ref: eoxItemFilter,
     style: {"overflow":"auto","--background-color":"none"},
     onSelect: onSelect,
-    ".items": unref(store).stac?.filter((item) => item.rel === 'child')
+    ".items": unref(items)
   }), [
     createElementVNode("h4", _hoisted_2, toDisplayString(__props.filtersTitle), 1 /* TEXT */),
     createElementVNode("h4", _hoisted_3, toDisplayString(__props.resultsTitle), 1 /* TEXT */)
@@ -156,6 +171,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const EodashItemFilter = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-1be0ec61"]]);
+const EodashItemFilter = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-88d0abc7"]]);
 
 export { EodashItemFilter as default };