@eodash/eodash 5.2.0 → 5.3.1

package/templates/expert.js

@@ -4,7 +4,7 @@ import { includesProcess } from "@/store/actions";
 /** @type {import("@/types").Template} */
 export default {
   loading: {
-    id: Symbol(),
+    id: "loading",
     type: "web-component",
     widget: {
       // https://uiball.com/ldrs/
@@ -39,8 +39,8 @@ export default {
         btnsPosition: {
           x: "12/9/9",
           y: 1,
-          gap: 16
-        }
+          gap: 16,
+        },
       },
     },
   },
@@ -49,11 +49,11 @@ export default {
       id: "Tools",
       type: "internal",
       title: "Tools",
-      layout: { x: 0, y: 0, w: "3/3/2", h: 1 },
+      layout: { x: 0, y: 0, w: "3/3/2", h: 2 },
       widget: {
         name: "EodashTools",
         properties: {
-          layoutTarget: "light",
+          layoutTarget: "lite",
           layoutIcon: mdiViewDashboard,
           itemFilterConfig: {
             resultType: "cards",

package/templates/explore.js

@@ -0,0 +1,62 @@
+// import { includesProcess } from "@/store/actions";
+/** @type {import("@/types").Template} */
+export default {
+  gap: 16,
+  loading: {
+    id: "loading",
+    type: "web-component",
+    widget: {
+      // https://uiball.com/ldrs/
+      link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+      tagName: "l-mirage",
+      properties: {
+        class: "align-self-center justify-self-center",
+        size: "120",
+        speed: "2.5",
+        color: "#004170",
+      },
+    },
+  },
+  background: {
+    id: "background-map",
+    type: "internal",
+    widget: {
+      name: "EodashMap",
+      properties: {
+        enableCompare: true,
+        btns: {
+          enableZoom: true,
+          enableExportMap: true,
+          enableChangeProjection: true,
+          enableCompareIndicators: {
+            fallbackTemplate: "explore",
+            itemFilterConfig: {
+              imageProperty: "assets.thumbnail.href",
+            },
+          },
+          enableSearch: true,
+        },
+      },
+    },
+  },
+  widgets: [
+    {
+      id: "Layercontrol",
+      type: "internal",
+      title: "Layers",
+      layout: { x: "9/9/10", y: 0, w: "3/3/2", h: 12 },
+      widget: {
+        name: "EodashLayerControl",
+      },
+    },
+    {
+      id: "ItemCatalog",
+      title: "Catalog",
+      type: "internal",
+      layout: { x: 0, y: 0, w: "3/3/2", h: 12 },
+      widget: {
+        name: "EodashItemCatalog",
+      },
+    },
+  ],
+};

package/templates/index.js

@@ -1,6 +1,6 @@
 import { getBaseConfig } from "./baseConfig";
 
-export { default as light } from "./light";
+export { default as lite } from "./lite";
 export { default as expert } from "./expert";
 export { default as compare } from "./compare";
 export { getBaseConfig };

package/templates/{light.js → lite.js}

@@ -42,7 +42,7 @@ export default {
       id: "tools-light",
       type: "internal",
       title: "Tools",
-      layout: { x: 0, y: 0, w: "3/3/2", h: 1 },
+      layout: { x: 0, y: 0, w: "3/3/2", h: 2 },
       widget: {
         name: "EodashTools",
         properties: {

package/widgets/EodashDatePicker.vue

@@ -129,7 +129,6 @@ import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
 import { eodashCollections, eodashCompareCollections } from "@/utils/states";
 import log from "loglevel";
 import { useTransparentPanel } from "@/composables";
-import { getDatetimeProperty } from "@/eodashSTAC/helpers";
 import { storeToRefs } from "pinia";
 
 const { lgAndDown } = useDisplay();
@@ -149,6 +148,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({
@@ -247,24 +253,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/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([]);
+};