@eodash/eodash 5.7.0 → 5.8.0

package/core/client/components/EodashOverlay.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="eodash-overlay">
+    <div class="progress-bar-wrapper">
+      <v-progress-linear
+        :active="loading.value"
+        color="secondary"
+        indeterminate
+        absolute
+      ></v-progress-linear>
+    </div>
     <p>
       <a href="https://github.com/eodash/eodash" target="_blank"
         >eodash v{{ version }}</a
@@ -12,12 +20,18 @@
   </div>
 </template>
 <script setup>
-import { useTheme } from "vuetify";
+import { useTheme, useLayout } from "vuetify";
 import pkgJson from "../../../package.json";
+import { loading } from "@/store/states";
+import { computed } from "vue";
+
 const { computedThemes } = useTheme();
+const { mainRect } = useLayout();
 
 const version = pkgJson.version;
 
+const topPosition = computed(() => `${mainRect.value.top}px`);
+
 const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z"
  style="fill:${computedThemes.value["dashboardTheme"].colors["on-secondary"]};fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0"
  style="fill:${computedThemes.value["dashboardTheme"].colors["on-secondary"]};fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453"
@@ -26,7 +40,7 @@ const base64Logo = btoa(eoxLogo);
 </script>
 <style scoped lang="scss">
 .eodash-overlay {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -40,10 +54,19 @@ const base64Logo = btoa(eoxLogo);
   );
   z-index: 9999;
   pointer-events: none;
+
+  .progress-bar-wrapper {
+    position: absolute;
+    top: v-bind("topPosition");
+    left: 0;
+    width: 100%;
+    z-index: 10000;
+  }
+
   p {
     position: fixed;
-    bottom: 6px;
-    left: 24px;
+    bottom: 8px;
+    left: 162px;
     color: rgba(var(--v-theme-on-secondary), 1);
   }
   a {

package/core/client/composables/DefineEodash.js

@@ -7,7 +7,6 @@ import { inject, reactive } from "vue";
  *
  * @async
  * @param {string | undefined| (()=> Promise<import("@/types").Eodash>) | Function} runtimeConfig
- * @returns {Promise<import("@/types").Eodash | null | undefined>}
  * @see {@linkplain '@/eodash.js'}
  */
 export const useEodashRuntime = async (

package/core/client/composables/DefineWidgets.js

@@ -88,7 +88,9 @@ export const useDefineWidgets = (widgetConfigs) => {
               config
             )?.defineWidget(updatedStac, updatedCompareStac);
           if (definedConfig) {
-            definedConfig = reactive(definedConfig);
+            definedConfig = /** @type {import("@/types").StaticWidget} */ (
+              reactive(definedConfig)
+            );
           }
           definedWidget.value =
             definedConfig && definedWidget.value.id === definedConfig.id

package/core/client/eodashSTAC/EodashCollection.js

@@ -4,6 +4,7 @@ import {
   extractLayerConfig,
   extractRoles,
   fetchApiItems,
+  fetchPreAggregations,
   fetchStyle,
   fetchAllStyles,
   findLayer,
@@ -173,11 +174,13 @@ export class EodashCollection {
     // will try to extract anything it supports but for which we have
     // less control.
 
-    const { layerDatetime, timeControlValues } = extractLayerTimeValues(
-      await this.getItems(),
+    const itemDate =
       item.properties?.datetime ??
-        item.properties.start_datetime ??
-        itemDatetime,
+      item.properties.start_datetime ??
+      itemDatetime;
+    const { layerDatetime, timeControlValues } = extractLayerTimeValues(
+      await this.getDates(itemDate),
+      itemDate,
     );
 
     const dataAssets = Object.keys(item?.assets ?? {}).reduce((data, ast) => {
@@ -189,9 +192,14 @@ export class EodashCollection {
 
     const isSupported =
       item.links.some((link) =>
-        ["wms", "xyz", "wmts", "vector-tile", "mapbox-style-document"].includes(
-          link.rel,
-        ),
+        [
+          "wms",
+          "xyz",
+          "wmts",
+          "vector-tile",
+          "mapbox-style-document",
+          "tilejson",
+        ].includes(link.rel),
       ) || Object.keys(dataAssets).length;
 
     if (isSupported) {
@@ -204,6 +212,10 @@ export class EodashCollection {
           timeControlValues,
           timeControlProperty: "TIME",
         }),
+        ...(!!this.#collectionStac?.["eodash:layerExclusive"] && {
+          layerControlExclusive: true,
+          layerControlExpand: false,
+        }),
       };
 
       const links = await createLayersFromLinks(
@@ -224,6 +236,7 @@ export class EodashCollection {
           item,
           layerDatetime,
           extraProperties,
+          this.#collectionStac,
         )),
         ...((this.rasterEndpoint &&
           (await createLayerFromRender(
@@ -279,24 +292,33 @@ export class EodashCollection {
 
   /**
    * Returns all item links sorted by datetime ascendingly
-   * @param {boolean} [fields=false] if true, fetch items from API with only properties
+   * @param {boolean} [fields=false] if true, fetch items from API with only properties.datetime to optimize performance
    * @param {boolean} [first] - if true, returns the first page of items only (for API collections)
+   * @param {string | Date} [centerDatetime] - Date to center the search around if items exceed maxNumber
    * @returns {Promise<import("stac-ts").StacLink[] | import("stac-ts").StacItem[] | undefined>}
    */
-  async getItems(fields = false, first = false) {
+  async getItems(fields = false, first = false, centerDatetime = undefined) {
     const items = this.#collectionStac?.links.filter((i) => i.rel === "item");
-
-    if (this.isAPI && !items?.length) {
+    if (this.isAPI && !items?.length && !first) {
       const itemUrl = this.#collectionUrl + "/items";
       if (fields) {
         return await fetchApiItems(
           itemUrl,
-          `fields=properties,-assets,-geometry,-links,-bbox`,
+          `fields=properties.datetime,-assets,-geometry,-links,-bbox`,
           100,
           first,
+          1000,
+          centerDatetime,
         );
       }
-      return await fetchApiItems(itemUrl, undefined, 100, first);
+      return await fetchApiItems(
+        itemUrl,
+        undefined,
+        100,
+        first,
+        100,
+        centerDatetime,
+      );
     }
 
     const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
@@ -315,9 +337,36 @@ export class EodashCollection {
     );
   }
 
-  async getDates() {
-    const items = await this.getItems(true, false);
+  /**
+   * Returns all available dates for the collection, sorted as the source
+   * provides. Tries the daily `pre-aggregation` link first (cheap, single
+   * request), falls back to fetching items via the API. Use anywhere the
+   * collection's date list is needed (date picker, mosaic time control,
+   * single-item time slider).
+   *
+   * NOTE: only the `daily` aggregation interval is consumed today. Other
+   * intervals (`monthly`, `hourly`) fall through to the API path.
+   *
+   * @param {string | Date} [centerDatetime]
+   * @returns {Promise<Date[]>}
+   */
+  async getDates(centerDatetime) {
+    await this.fetchCollection();
+
+    const aggregation = await fetchPreAggregations(
+      this.#collectionStac,
+      this.#collectionUrl,
+    );
+    const datetimeAgg = aggregation?.aggregations?.find(
+      (/** @type {any} */ a) => a.key?.startsWith("datetime_") || a.interval,
+    );
+    if (datetimeAgg?.buckets) {
+      return datetimeAgg.buckets
+        .map((/** @type {any} */ b) => new Date(b.key))
+        .filter((/** @type {Date} */ d) => !isNaN(d.getTime()));
+    }
 
+    const items = await this.getItems(true, false, centerDatetime);
     const datetimeProperty = getDatetimeProperty(items);
     if (!datetimeProperty || !items?.length) {
       return [];
@@ -329,7 +378,9 @@ export class EodashCollection {
           new Date(/** @type {string} */ (i.properties?.[datetimeProperty]))
       : //@ts-expect-error todo
         (i) => new Date(/** @type {string} */ (i[datetimeProperty]));
-    return items?.map(mapToDates) || [];
+    return (items ?? [])
+      .map(mapToDates)
+      .filter((/** @type {Date} */ d) => !isNaN(d.getTime()));
   }
 
   async getExtent() {
@@ -343,21 +394,33 @@ export class EodashCollection {
    *  @return {Promise<import("stac-ts").StacItem | import("stac-ts").StacLink | undefined>} item
    **/
   async getItem(date) {
-    if (!date) {
-      const items = await this.getItems(false, true);
-      // in case no datetime property is found, return the last item
+    let items = await this.getItems(false, true);
+    if (!(date instanceof Date) || isNaN(date.getTime())) {
+      // in case no date was provided, return the last item
       return items && items.at(-1);
     }
 
-    const items = await this.getItems();
+    if (this.isAPI) {
+      const urlArr = this.#collectionUrl.split("/").slice(0, -2);
+      const searchURL = urlArr.join("/") + "/search";
+      const targetItem = await axios
+        .get(searchURL, {
+          params: {
+            collections: this.#collectionStac?.id,
+            datetime: `../${date.toISOString()}`,
+            limit: 1,
+            sortby: "-datetime",
+          },
+        })
+        .then((resp) => resp.data?.features?.[0]);
+      return targetItem;
+    }
     const datetimeProperty = getDatetimeProperty(items);
     if (!datetimeProperty) {
-      // in case no datetime property is found, return the last item
-      const items = await this.getItems(false, true);
       // in case no datetime property is found, return the last item
       return items && items.at(-1);
     }
-    return (await this.getItems())?.sort((a, b) => {
+    return items?.sort((a, b) => {
       const distanceA = Math.abs(
         new Date(
           /** @type {number} */ (
@@ -404,7 +467,7 @@ export class EodashCollection {
   async updateLayerJson(datetime, layerId, currentLayers) {
     await this.fetchCollection();
     const datetimeProperty = getDatetimeProperty(
-      await this.getItems(true, true),
+      await this.getItems(false, true),
     );
     if (!datetimeProperty) {
       console.warn("[eodash] no datetime property found in collection");

package/core/client/eodashSTAC/cql.js

@@ -0,0 +1,64 @@
+/**
+ * Keys that are catalog based and have dedicated parameters
+ * sent to a remote API (e.g. TiTiler, eoAPI STAC search).
+ * @type {string[]}
+ */
+const SKIP_KEYS = ["collection", "datetime", "bbox"];
+
+/**
+ * Strips the "properties." prefix that eox-itemfilter catalog configs add to
+ * item property keys (e.g. "properties.eo:cloud_cover" -> "eo:cloud_cover").
+ * Keys without the prefix are returned unchanged.
+ * @param {string} key
+ * @returns {string}
+ */
+function normalizeFilterKey(key) {
+  return key.startsWith("properties.") ? key.slice("properties.".length) : key;
+}
+
+/**
+ * Builds a CQL2-text filter string from an eox-itemfilter filters record.
+ *
+ * Handles range, multiselect, and select filter types.
+ * - Strips "properties." prefix from keys (catalog eox-itemfilter convention).
+ * - Double-quotes property names that contain non-word characters (e.g. "eo:cloud_cover").
+ * - Skips catalog-only keys (e.g. "collection").
+ *
+ * Compatible with both TiTiler's `filter` param and the STAC API `filter` param
+ * (both accept CQL2-text).
+ *
+ * @param {import("@/types").ItemFilterFilters | null | undefined} filters
+ * @returns {string}
+ */
+export function buildCqlFilter(filters) {
+  if (!filters) return "";
+
+  /** @type {string[]} */
+  const parts = [];
+
+  for (const filter of Object.values(filters)) {
+    if (!filter?.key || SKIP_KEYS.includes(filter.key)) continue;
+
+    const key = normalizeFilterKey(filter.key);
+    const prop = /\W/.test(key) ? `"${key}"` : key;
+
+    if (filter.type === "range" && filter.state) {
+      const { min, max } = filter.state;
+      if (min != null && min > (filter.min ?? -Infinity)) {
+        parts.push(`${prop} >= ${min}`);
+      }
+      if (max != null && max < (filter.max ?? Infinity)) {
+        parts.push(`${prop} <= ${max}`);
+      }
+    } else if (
+      filter.type === "multiselect" &&
+      filter.stringifiedState?.length
+    ) {
+      parts.push(`${prop} IN (${filter.stringifiedState})`);
+    } else if (filter.type === "select" && filter.stringifiedState) {
+      parts.push(`${prop} = '${filter.stringifiedState}'`);
+    }
+  }
+
+  return parts.join(" AND ");
+}