@eodash/eodash 5.1.0 → 5.3.0

package/dist/client/index-DeECc3lV.js

@@ -0,0 +1,571 @@
+import { onMounted, onUnmounted, withAsyncContext, useTemplateRef, ref, createElementBlock, openBlock, createVNode, createElementVNode, withCtx, unref, toDisplayString } from 'vue';
+import { E as useSTAcStore, K as useOnLayersUpdate, _ as _export_sfc, L as VRow } from './asWebComponent-CWbNRdf9.js';
+import { E as indicator, h as mapEl, L as sanitizeBbox, j as axios } from './helpers-CtE0W7iu.js';
+import { i as inAndOut } from './easing-CH0-9wR8.js';
+import { mdiViewDashboard } from '@mdi/js';
+import _sfc_main$1 from './EodashLayoutSwitcher-pnKhTRZV.js';
+
+/**
+ *
+ * @param {import("../types").FiltersConfig} filtersConfig
+ */
+const createSubtitleProperty = (filtersConfig) => {
+  /**
+   * @param {Record<string, any>} item
+   */ // should be dynamic based on a prop
+  return (item) => {
+    let subtitle = "";
+    filtersConfig.forEach((filter) => {
+      const property = filter.property;
+      if ((!filter.icon && !filter.unitLabel) || !item.properties[property]) {
+        return;
+      }
+      if (filter.icon) {
+        subtitle += filter.icon;
+      }
+
+      let value = item.properties[property];
+      if (typeof value === "number" && !Number.isInteger(value)) {
+        value = value.toFixed(1);
+      }
+
+      subtitle += value;
+
+      if (filter.unitLabel) {
+        subtitle += filter.unitLabel;
+      }
+    });
+    return subtitle;
+  };
+};
+
+/**
+ * @param {Array<{
+ *   property: string,
+ *   type: "range" | "multiselect" | "select",
+ *   title?: string,
+ *   min?: number,
+ *   max?: number,
+ *   filterKeys?: string[],
+ *   state?: Record<string, boolean>,
+ *   placeholder?: string,
+ * }>} filtersConfig
+ */
+// Transform simple filter configs into eox-itemfilter format
+const createFilterProperties = (filtersConfig) => {
+  const store = useSTAcStore();
+  const baseFilters = [
+    {
+      key: "collection",
+      title: "Collections",
+      type: "multiselect",
+      placeholder: "Select collections",
+      inline: false,
+      filterKeys: store.stac?.map((col) => col.id) || [],
+      ...(indicator.value && { state: { [indicator.value]: true } }),
+    },
+    // {
+    //   key: "properties.datetime",
+    //   title: "Date",
+    //   type: "range",
+    //   format: "date",
+    // }
+  ];
+
+  const dynamicFilters = filtersConfig
+    .map((filter) => {
+      const propertyKey = `properties.${filter.property}`;
+
+      if (filter.type === "range") {
+        return {
+          key: propertyKey,
+          title: filter.title || filter.property,
+          type: "range",
+          expanded: true,
+          filterKeys: [filter.min || 0, filter.max || 100],
+          state: {
+            min: filter.min ?? 0,
+            max: filter.max ?? 100,
+          },
+        };
+      } else if (filter.type === "multiselect") {
+        return {
+          key: propertyKey,
+          title: filter.title || filter.property,
+          type: "multiselect",
+          placeholder: filter.placeholder || `Select ${filter.property}`,
+          inline: false,
+          filterKeys: filter.filterKeys || [],
+          state: filter.state,
+        };
+      } else if (filter.type === "select") {
+        return {
+          key: propertyKey,
+          title: filter.title || filter.property,
+          type: "select",
+          placeholder:
+            filter.placeholder || `Select ${filter.title || filter.property}`,
+          filterKeys: filter.filterKeys || [],
+          state: filter.state,
+        };
+      }
+
+      return null;
+    })
+    .filter(Boolean);
+
+  return [...baseFilters, ...dynamicFilters];
+};
+
+/**
+ * Build STAC API filter string from dynamic filters
+ * @param {Record<string,any>} filters
+ * @param {import("../types").FiltersConfig} propsFilters
+ * @returns {string}
+ */
+const buildStacFilters = (filters, propsFilters) => {
+  /** @type {string[]} */
+  const stacFilters = [];
+
+  propsFilters.forEach((filterConfig) => {
+    const filterKey = `properties.${filterConfig.property}`;
+    const filterValue = filters[filterKey];
+
+    if (!filterValue) return;
+
+    if (filterConfig.type === "range" && filterValue.state) {
+      const { min, max } = filterValue.state;
+
+      // Add range filters based on configuration
+      if (min !== undefined && min > (filterConfig.min || 0)) {
+        stacFilters.push(`${filterConfig.property}>=${min}`);
+      }
+      if (max !== undefined && max < (filterConfig.max || 100)) {
+        stacFilters.push(`${filterConfig.property}<=${max}`);
+      }
+    } else if (
+      filterConfig.type === "multiselect" &&
+      filterValue.stringifiedState
+    ) {
+      // Handle multiselect filters
+      const selectedValues = filterValue.stringifiedState;
+      if (selectedValues.length > 0) {
+        stacFilters.push(`${filterConfig.property} IN (${selectedValues})`);
+      }
+    } else if (filterConfig.type === "select" && filterValue.stringifiedState) {
+      // Handle single select filters
+      const selectedValue = filterValue.stringifiedState;
+      if (selectedValue) {
+        stacFilters.push(`${filterConfig.property}='${selectedValue}'`);
+      }
+    }
+  });
+
+  return stacFilters.join(" AND ");
+};
+
+/**
+ * Build search URL with proper STAC API parameters
+ * @param {Record<string,any>} filters
+ * @param {Array<any>} propsFilters
+ * @param {boolean} bboxFilter
+ * @returns {string}
+ */
+const buildSearchUrl = (filters, propsFilters, bboxFilter) => {
+  const store = useSTAcStore();
+  const params = new URLSearchParams();
+
+  // Add collections
+  if (filters.collection?.stringifiedState) {
+    params.append(
+      "collections",
+      filters.collection.stringifiedState.replaceAll(" ", ""),
+    );
+  }
+
+  if (mapEl.value?.lonLatExtent && bboxFilter) {
+    params.append(
+      "bbox",
+      sanitizeBbox([...mapEl.value.lonLatExtent]).join(","),
+    );
+  }
+
+  // Add dynamic filters
+  const stacFilter = buildStacFilters(filters, propsFilters);
+  if (stacFilter) {
+    params.append("filter", stacFilter);
+  }
+
+  // Add limit
+  params.append("limit", "100");
+
+  return `${store.stacEndpoint}/search?${params.toString()}`;
+};
+
+/**
+ *
+ * @param {import("../types").FiltersConfig} propsFilters
+ * @param {boolean} bboxFilter
+ */
+const createExternalFilter = (propsFilters, bboxFilter) => {
+  /**
+   * @param {Array<any>} _items
+   * @param {Record<string,any>} filters
+   */
+  return (_items, filters) => ({
+    url: buildSearchUrl(filters, propsFilters, bboxFilter),
+    key: "features",
+  });
+};
+
+/**
+ *
+ * @param {import("@/types").GeoJsonFeature[]} features
+ */
+function renderItemsFeatures(features) {
+  let analysisLayers =
+    /** @type {import("@eox/map/src/layers").EOxLayerTypeGroup} */ (
+      mapEl.value?.layers?.find((l) => l.properties?.id === "AnalysisGroup")
+    );
+  if (!mapEl.value || !features) {
+    return;
+  }
+  if (!analysisLayers) {
+    analysisLayers = {
+      type: "Group",
+      properties: {
+        id: "AnalysisGroup",
+        title: "Data Layers",
+      },
+      layers: [],
+    };
+    mapEl.value.layers = [analysisLayers, ...mapEl.value.layers.reverse()];
+  }
+
+  const stacItemsLayer = {
+    type: "Vector",
+    properties: {
+      id: "stac-items",
+      title: "STAC Items",
+    },
+    source: {
+      type: "Vector",
+      url:
+        "data:application/geo+json," +
+        encodeURIComponent(
+          JSON.stringify({ type: "FeatureCollection", features }),
+        ),
+      format: "GeoJSON",
+    },
+    style: {
+      "fill-color": "transparent",
+      "stroke-color": "#003170",
+    },
+    interactions: [
+      {
+        type: "select",
+        options: {
+          id: "stac-items",
+          condition: "pointermove",
+          style: {
+            "stroke-color": "white",
+            "stroke-width": 3,
+          },
+        },
+      },
+    ],
+  };
+  const exists = analysisLayers.layers.some(
+    (l) => l.properties?.id === "stac-items",
+  );
+  if (exists) {
+    //@ts-expect-error todo
+    mapEl.value.addOrUpdateLayer(stacItemsLayer);
+    return;
+  } else {
+    //@ts-expect-error todo
+    analysisLayers.layers.unshift(stacItemsLayer);
+    mapEl.value.layers = [...mapEl.value.layers].reverse();
+  }
+}
+
+/**
+ * @param {import("vue").Ref<any>} itemFilter
+ * @param {boolean} bboxFilter
+ */
+const useSearchOnMapMove = (itemFilter, bboxFilter) => {
+  if (!bboxFilter) {
+    return;
+  }
+  /** @type {NodeJS.Timeout} */
+  let timeout;
+  const handler = () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      itemFilter.value?.search();
+    }, 800); // 800ms debounce
+  };
+  onMounted(() => {
+    mapEl.value?.map.on("moveend", handler);
+  });
+  onUnmounted(() => {
+    mapEl.value?.map.un("moveend", handler);
+  });
+};
+/**
+ *
+ * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
+ */
+const useRenderItemsFeatures = (currentItems) => {
+  const renderOnUpdate = () =>
+    useOnLayersUpdate(() => {
+      // consider cases where this is not needed
+      renderItemsFeatures(currentItems.value);
+    });
+  onMounted(() => {
+    renderItemsFeatures(currentItems.value);
+    renderOnUpdate();
+  });
+};
+/**
+ *
+ * @param {import("vue").Ref<any>} itemfilterEl
+ */
+function useRenderOnFeatureHover(itemfilterEl) {
+  /**
+   *
+   * @param {CustomEvent} evt
+   */
+  const handler = (evt) => {
+    const itemId = evt.detail?.feature?.getId();
+    if (!itemId) {
+      return;
+    }
+    const item = itemfilterEl.value.items?.find(
+      //@ts-expect-error todo
+      (r) => r.id === itemId,
+    );
+    if (item) {
+      itemfilterEl.value.selectedResult = item;
+    }
+  };
+  onMounted(() => {
+    //@ts-expect-error todo
+    mapEl.value?.addEventListener("select", handler);
+  });
+  onUnmounted(() => {
+    //@ts-expect-error todo
+    mapEl.value?.removeEventListener("select", handler);
+  });
+}
+
+/**
+ * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
+ */
+const createOnFilterHandler = (currentItems) => {
+  /** @param {CustomEvent} evt */
+  return (evt) => {
+    currentItems.value = evt.detail.results;
+    renderItemsFeatures(currentItems.value);
+  };
+};
+/**
+ *
+ * @param {ReturnType<typeof import("@/store/stac.js").useSTAcStore>} store
+ * @returns
+ */
+const createOnSelectHandler = (store) => {
+  /** @param {CustomEvent} evt */
+  return async (evt) => {
+    const item = /** @type {import("stac-ts").StacItem} */ (evt.detail);
+    if (!item) {
+      return;
+    }
+    if (store.selectedStac?.id === item.collection) {
+      store.selectedItem = item;
+    } else {
+      await store.loadSelectedSTAC(item.collection, false, item);
+    }
+
+    mapEl.value?.selectInteractions["stac-items"]?.highlightById([item.id], {
+      padding: [100, 100, 100, 100],
+      duration: 1200,
+      easing: inAndOut,
+    });
+  };
+};
+
+/**
+ *
+ * @param {CustomEvent} evt
+ */
+const onMouseEnterResult = (evt) => {
+  mapEl.value?.selectInteractions["stac-items"]?.highlightById([evt.detail.id]);
+};
+const onMouseLeaveResult = () => {
+  mapEl.value?.selectInteractions["stac-items"]?.highlightById([]);
+};
+
+const _style_0 = "eox-itemfilter[data-v-64c66d83]{flex-basis:20%;height:100%;overflow:hidden!important;padding:1rem;--eox-itemfilter-results-color: var(--v-theme-surface) !important}.title[data-v-64c66d83]{padding:1em;margin:.2em}";
+
+const _hoisted_1 = [".imageProperty", ".subTitleProperty", ".filterProperties", ".items", "externalFilter"];
+const _hoisted_2 = {
+  slot: "filterstitle",
+  style: {"margin":"14px 8px"}
+};
+const _hoisted_3 = {
+  slot: "resultstitle",
+  style: {"margin":"14px 8px"}
+};
+
+
+const _sfc_main = {
+  __name: 'index',
+  props: {
+  title: {
+    type: String,
+    default: "Explore Catalog",
+  },
+  layoutTarget: {
+    type: String,
+    default: "lite",
+  },
+  layoutIcon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+  filtersTitle: {
+    type: String,
+    default: "Filters:",
+  },
+  resultsTitle: {
+    type: String,
+    default: "Items:",
+  },
+  bboxFilter: {
+    type: Boolean,
+    default: true,
+  },
+  imageProperty: {
+    type: String,
+    default: "assets.thumbnail.href",
+  },
+  filters: {
+    /** @type {import("vue").PropType<import("./types").FiltersConfig>} */
+    type: Array,
+    default: () => [
+      {
+        property: "eo:cloud_cover",
+        type: "range",
+        title: "Cloud Cover (%)",
+        min: 0,
+        max: 100,
+        icon: `<svg style="height: 1rem; transform: translateY(-2px); fill: currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>weather-cloudy</title><path d="M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13Z" /></svg>`,
+        unitLabel: "%",
+      },
+    ],
+  },
+},
+  async setup(__props) {
+
+let __temp, __restore;
+
+if (!customElements.get("eox-itemfilter")) {
+  (
+  ([__temp,__restore] = withAsyncContext(() => import('@eox/itemfilter'))),
+  await __temp,
+  __restore()
+);
+}
+
+// Props definition
+const props = __props;
+
+// Store and template refs
+const store = useSTAcStore();
+const itemfilterEl = useTemplateRef("itemfilter");
+
+// Reactive state
+/** @type {import("vue").Ref<import("@/types").GeoJsonFeature[]>} */
+const currentItems = ref([]);
+(
+  ([__temp,__restore] = withAsyncContext(() => axios
+  .get(store.stacEndpoint + "/search?limit=100")
+  .then((res) => (currentItems.value = res.data.features)))),
+  await __temp,
+  __restore()
+);
+
+const items = currentItems.value;
+
+const filterProperties = createFilterProperties(props.filters);
+
+const subTitleProperty = createSubtitleProperty(props.filters);
+
+const externalFilterHandler = createExternalFilter(
+  props.filters,
+  props.bboxFilter,
+);
+
+// Event handlers
+/**
+ * @param {CustomEvent} evt
+ */
+const onFilter = createOnFilterHandler(currentItems);
+
+/**
+ * @param {CustomEvent} evt
+ */
+const onSelectItem = createOnSelectHandler(store);
+
+// composables
+
+// Render items features on the map
+useRenderItemsFeatures(currentItems);
+// Search on map move logic
+useSearchOnMapMove(itemfilterEl, props.bboxFilter);
+
+useRenderOnFeatureHover(itemfilterEl);
+
+onUnmounted(() => {
+  store.selectedItem = null;
+});
+
+return (_ctx, _cache) => {
+                                                     
+
+  return (openBlock(), createElementBlock("span", null, [
+    createVNode(VRow, { class: "title align-center justify-space-between" }, {
+      default: withCtx(() => [
+        _cache[4] || (_cache[4] = createElementVNode("h4", null, "Catalog Items", -1 /* CACHED */)),
+        createVNode(_sfc_main$1, {
+          target: __props.layoutTarget,
+          icon: __props.layoutIcon
+        }, null, 8 /* PROPS */, ["target", "icon"])
+      ]),
+      _: 1 /* STABLE */
+    }),
+    createElementVNode("eox-itemfilter", {
+      ref: "itemfilter",
+      titleProperty: "id",
+      ".imageProperty": __props.imageProperty,
+      ".subTitleProperty": unref(subTitleProperty),
+      ".filterProperties": unref(filterProperties),
+      ".items": unref(items),
+      onSelect: _cache[0] || (_cache[0] = (...args) => (unref(onSelectItem) && unref(onSelectItem)(...args))),
+      onFilter: _cache[1] || (_cache[1] = (...args) => (unref(onFilter) && unref(onFilter)(...args))),
+      "onMouseenter:result": _cache[2] || (_cache[2] = (...args) => (unref(onMouseEnterResult) && unref(onMouseEnterResult)(...args))),
+      "onMouseleave:result": _cache[3] || (_cache[3] = (...args) => (unref(onMouseLeaveResult) && unref(onMouseLeaveResult)(...args))),
+      externalFilter: unref(externalFilterHandler)
+    }, [
+      createElementVNode("h4", _hoisted_2, toDisplayString(__props.filtersTitle), 1 /* TEXT */),
+      createElementVNode("h4", _hoisted_3, toDisplayString(__props.resultsTitle), 1 /* TEXT */)
+    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1)
+  ]))
+}
+}
+
+};
+const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-64c66d83"]]);
+
+export { index as default };