@eodash/eodash 5.2.0 → 5.3.0

package/widgets/EodashItemCatalog/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <span>
+    <v-row class="title align-center justify-space-between">
+      <h4>Catalog Items</h4>
+      <EodashLayoutSwitcher :target="layoutTarget" :icon="layoutIcon" />
+    </v-row>
+    <eox-itemfilter
+      ref="itemfilter"
+      titleProperty="id"
+      .imageProperty="imageProperty"
+      .subTitleProperty="subTitleProperty"
+      .filterProperties="filterProperties"
+      .items="items"
+      @select="onSelectItem"
+      @filter="onFilter"
+      @mouseenter:result="onMouseEnterResult"
+      @mouseleave:result="onMouseLeaveResult"
+      :externalFilter="externalFilterHandler"
+    >
+      <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
+      <h4 slot="resultstitle" style="margin: 14px 8px">{{ resultsTitle }}</h4>
+    </eox-itemfilter>
+  </span>
+</template>
+
+<script setup>
+import { onUnmounted, ref, useTemplateRef } from "vue";
+import { useSTAcStore } from "@/store/stac";
+import {
+  createExternalFilter,
+  createFilterProperties,
+  createSubtitleProperty,
+} from "./methods/filters";
+import {
+  useSearchOnMapMove,
+  useRenderItemsFeatures,
+  useRenderOnFeatureHover,
+} from "./methods/map";
+import {
+  createOnFilterHandler,
+  createOnSelectHandler,
+  onMouseEnterResult,
+  onMouseLeaveResult,
+} from "./methods/handlers";
+import axios from "@/plugins/axios";
+import { mdiViewDashboard } from "@mdi/js";
+import EodashLayoutSwitcher from "^/EodashLayoutSwitcher.vue";
+
+if (!customElements.get("eox-itemfilter")) {
+  await import("@eox/itemfilter");
+}
+
+// Props definition
+const props = defineProps({
+  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: "%",
+      },
+    ],
+  },
+});
+
+// Store and template refs
+const store = useSTAcStore();
+const itemfilterEl = useTemplateRef("itemfilter");
+
+// Reactive state
+/** @type {import("vue").Ref<import("@/types").GeoJsonFeature[]>} */
+const currentItems = ref([]);
+
+// Initial data fetch
+await axios
+  .get(store.stacEndpoint + "/search?limit=100")
+  .then((res) => (currentItems.value = res.data.features));
+
+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;
+});
+</script>
+<style scoped lang="scss">
+eox-itemfilter {
+  flex-basis: 20%;
+  height: 100%;
+  overflow: hidden !important;
+  padding: 1rem;
+  --eox-itemfilter-results-color: var(--v-theme-surface) !important;
+}
+.title {
+  // padding: 1em;
+  padding: 1em;
+  margin: 0.2em;
+}
+</style>

package/widgets/EodashItemCatalog/methods/filters.js

@@ -0,0 +1,216 @@
+import { sanitizeBbox } from "@/eodashSTAC/helpers";
+import { indicator, mapEl } from "@/store/states";
+import { useSTAcStore } from "@/store/stac";
+
+/**
+ *
+ * @param {import("../types").FiltersConfig} filtersConfig
+ */
+export 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
+export 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}
+ */
+export 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}
+ */
+export 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
+ */
+export const createExternalFilter = (propsFilters, bboxFilter) => {
+  /**
+   * @param {Array<any>} _items
+   * @param {Record<string,any>} filters
+   */
+  return (_items, filters) => ({
+    url: buildSearchUrl(filters, propsFilters, bboxFilter),
+    key: "features",
+  });
+};

package/widgets/EodashItemCatalog/methods/handlers.js

@@ -0,0 +1,50 @@
+import { mapEl } from "@/store/states";
+import { inAndOut } from "ol/easing";
+import { renderItemsFeatures } from "./map";
+
+/**
+ * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
+ */
+export 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
+ */
+export 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
+ */
+export const onMouseEnterResult = (evt) => {
+  mapEl.value?.selectInteractions["stac-items"]?.highlightById([evt.detail.id]);
+};
+export const onMouseLeaveResult = () => {
+  mapEl.value?.selectInteractions["stac-items"]?.highlightById([]);
+};

package/widgets/EodashItemCatalog/methods/map.js

@@ -0,0 +1,144 @@
+import { useOnLayersUpdate } from "@/composables";
+import { mapEl } from "@/store/states";
+import { onMounted, onUnmounted } from "vue";
+
+/**
+ *
+ * @param {import("@/types").GeoJsonFeature[]} features
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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);
+  });
+}

package/widgets/EodashItemCatalog/types.ts

@@ -0,0 +1,15 @@
+export interface FilterConfigItem {
+  property: string;
+  type: "range" | "multiselect" | "select";
+  title?: string;
+  min?: number;
+  max?: number;
+  filterKeys?: string[];
+  state?: Record<string, boolean>;
+  placeholder?: string;
+  /** svg icon */
+  icon?: string;
+  unitLabel?: string;
+}
+
+export type FiltersConfig = FilterConfigItem[];

package/widgets/EodashItemFilter.vue

@@ -5,22 +5,26 @@
     ref="eoxItemFilter"
     style="overflow: auto; --background-color: none"
     @select="onSelect"
-    .items="store.stac?.filter((item) => item.rel === 'child')"
+    .items="items"
   >
     <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
-
     <h4 slot="resultstitle" style="margin: 14px 8px">{{ resultsTitle }}</h4>
   </eox-itemfilter>
 </template>
 <script setup>
 import { useSTAcStore } from "@/store/stac";
 import { isFirstLoad } from "@/utils/states";
-import "@eox/itemfilter";
 import { computed, ref } from "vue";
 
+if (!customElements.get("eox-itemfilter")) {
+  await import("@eox/itemfilter");
+}
+
 const store = useSTAcStore();
 const emit = defineEmits(["select"]);
-
+const items = store.isApi
+  ? store.stac
+  : store.stac?.filter((item) => item.rel === "child");
 const props = defineProps({
   enableCompare: {
     type: Boolean,
@@ -87,31 +91,36 @@ const props = defineProps({
   },
 });
 /**
- * @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;
@@ -121,7 +130,6 @@ const onSelect = async (evt) => {
     selectIndicator(item);
   }
 };
-
 const config = computed(() => ({
   titleProperty: props.titleProperty,
   enableHighlighting: props.enableHighlighting,
@@ -138,7 +146,6 @@ const config = computed(() => ({
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxItemFilter = ref(null);
 </script>
-
 <style scoped>
 eox-itemfilter {
   --form-flex-direction: row;