@eodash/eodash 5.2.0 → 5.3.0

package/core/client/components/DashboardLayout.vue

@@ -3,7 +3,6 @@
     <eox-layout
       :mediaBreakpoints="[0, 960, 1920]"
       :gap="gap"
-      class="layout-container"
       :style="layoutStyle"
     >
       <eox-layout-item

package/core/client/composables/index.js

@@ -22,6 +22,7 @@ import { setCollectionsPalette } from "@/utils";
 import mustache from "mustache";
 import { toAbsolute } from "stac-js/src/http.js";
 import axios from "@/plugins/axios";
+import { storeToRefs } from "pinia";
 
 /**
 /** @type {import('@/types').Eodash | null}*/
@@ -57,68 +58,60 @@ export function useEodash() {
 }
 
 /**
- * Creates an absolute URL from a relative link and assignes it to `currentUrl`
- *
- * @param {string} [rel=''] Default is `''`
- * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
- *   root stac catalog. Default is `eodash.stacEndpoint`
- * @returns {import("vue").Ref<string>} - Returns `currentUrl`
- * @see {@link '@/store/states.js'}
+ * @param {import("vue").Ref<string>} absoluteUrl
+ * @returns
  */
-export const useAbsoluteUrl = (
-  rel = "",
-  base = inject(eodashKey)?.stacEndpoint,
-) => {
-  if (!rel || rel.includes("http") || !base) {
-    currentUrl.value = rel;
-    return currentUrl;
-  }
-
-  const st = base.split("/");
-  const arr = rel.split("/");
-  st.pop();
-
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i] == ".") continue;
-    if (arr[i] == "..") st.pop();
-    else st.push(arr[i]);
-  }
-
-  currentUrl.value = st.join("/");
-  return currentUrl;
-};
+const createUseAbsoluteUrl = (absoluteUrl) => {
+  /**
+   * Creates an absolute URL from a relative link and assignes it to `currentUrl`
+   *
+   * @param {string} [rel=''] Default is `''`
+   * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
+   *   root stac catalog. Default is `eodash.stacEndpoint`
+   * @returns {import("vue").Ref<string>} - Returns `currentUrl`
+   * @see {@link '@/store/states.js'}
+   */
+  return (rel = "", base) => {
+    const { stacEndpoint, isApi } = storeToRefs(useSTAcStore());
+    if (!base) {
+      base = stacEndpoint.value ?? undefined;
+      if (!base) {
+        console.warn(
+          "[eodash] No base URL provided for absolute URL construction.",
+        );
+        return absoluteUrl;
+      }
+    }
+    if (isApi.value) {
+      absoluteUrl.value = base + `/collections/${rel}`;
+      return absoluteUrl;
+    }
 
-/**
- * Use the absolute compare URL from a relative link
- *
- * @param {string} [rel=''] Default is `''`
- * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
- *   root stac catalog. Default is `eodash.stacEndpoint`
- * @returns {import("vue").Ref<string>} - Returns `currentUrl`
- * @see {@link '@/store/states.js'}
- */
-export const useCompareAbsoluteUrl = (
-  rel = "",
-  base = inject(eodashKey)?.stacEndpoint,
-) => {
-  if (!rel || rel.includes("http") || !base) {
-    currentCompareUrl.value = rel;
-    return currentCompareUrl;
-  }
+    if (rel.includes("http")) {
+      absoluteUrl.value = rel;
+      return absoluteUrl;
+    }
+    if (!rel) {
+      absoluteUrl.value = base;
+      return absoluteUrl;
+    }
 
-  const st = base.split("/");
-  const arr = rel.split("/");
-  st.pop();
+    const st = base.split("/");
+    const arr = rel.split("/");
+    st.pop();
 
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i] == ".") continue;
-    if (arr[i] == "..") st.pop();
-    else st.push(arr[i]);
-  }
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i] == ".") continue;
+      if (arr[i] == "..") st.pop();
+      else st.push(arr[i]);
+    }
 
-  currentCompareUrl.value = st.join("/");
-  return currentCompareUrl;
+    absoluteUrl.value = st.join("/");
+    return absoluteUrl;
+  };
 };
+export const useAbsoluteUrl = createUseAbsoluteUrl(currentUrl);
+export const useCompareAbsoluteUrl = createUseAbsoluteUrl(currentCompareUrl);
 
 /**
  * Updates an existing Vuetify theme. updates only the values provided in the
@@ -178,7 +171,6 @@ export const useURLSearchParametersSync = () => {
           }
           case "indicator": {
             log.debug("Found indicator key in url");
-            const eodash = inject(eodashKey);
             const match = store.stac?.find(
               (link) => useGetSubCodeId(link) == value,
             );
@@ -187,7 +179,7 @@ export const useURLSearchParametersSync = () => {
               if (searchParams.has("poi")) {
                 const indicatorUrl = toAbsolute(
                   match.href,
-                  eodash?.stacEndpoint ?? "",
+                  store.stacEndpoint ?? "",
                 );
                 // fetch indicator stac collection without rendering it
                 /** @type {import("stac-ts").StacCollection} */
@@ -224,7 +216,9 @@ export const useURLSearchParametersSync = () => {
                   await store.loadSelectedSTAC(poiAbsoluteUrl, true);
                 }
               } else {
-                await store.loadSelectedSTAC(match.href);
+                await store.loadSelectedSTAC(
+                  /** @type {string} */ (store.isApi ? match.id : match.href),
+                );
               }
             }
             break;

package/core/client/eodashSTAC/EodashCollection.js

@@ -2,21 +2,28 @@ import { Collection, Item } from "stac-js";
 import { toAbsolute } from "stac-js/src/http.js";
 import {
   extractLayerConfig,
-  extractLayerDatetime,
   extractRoles,
+  fetchApiItems,
   fetchStyle,
+  fetchAllStyles,
   findLayer,
   generateFeatures,
   getDatetimeProperty,
+  isSTACItem,
   replaceLayer,
   extractLayerLegend,
+  extractLayerTimeValues,
 } from "./helpers";
 import {
   getLayers,
   getCompareLayers,
   registerProjection,
 } from "@/store/actions";
-import { createLayersFromAssets, createLayersFromLinks } from "./createLayers";
+import {
+  createLayerFromRender,
+  createLayersFromAssets,
+  createLayersFromLinks,
+} from "./createLayers";
 import axios from "@/plugins/axios";
 import log from "loglevel";
 import { dataThemesBrands } from "@/utils/states";
@@ -24,6 +31,10 @@ import { dataThemesBrands } from "@/utils/states";
 export class EodashCollection {
   #collectionUrl = "";
 
+  isAPI = true;
+  /** @type {string | null} */
+  rasterEndpoint = null;
+
   /** @type {import("stac-ts").StacCollection | undefined} */
   #collectionStac;
 
@@ -45,81 +56,87 @@ export class EodashCollection {
     return this.#collectionStac;
   }
 
-  /** @param {string} collectionUrl */
-  constructor(collectionUrl) {
+  /**
+   * @param {string} collectionUrl
+   * @param {boolean} isAPI
+   * @param {string | null} rasterEndpoint
+   */
+  constructor(collectionUrl, isAPI = true, rasterEndpoint = null) {
     this.#collectionUrl = collectionUrl;
+    this.isAPI = isAPI;
+    this.rasterEndpoint = rasterEndpoint;
   }
 
   /**
    * @async
-   * @param {import('stac-ts').StacLink | Date} [linkOrDate]
-   * @returns
+   * @param {import("stac-ts").StacItem | import('stac-ts').StacLink | Date } [itemOrDate]
+   * @returns {Promise<Record<string,any>[]>} layers
    */
-  createLayersJson = async (linkOrDate) => {
+  createLayersJson = async (itemOrDate) => {
     /**
-     * @type {import("stac-ts").StacLink | undefined}
+     * @type {import("stac-ts").StacLink | import("stac-ts").StacItem | undefined}
      **/
-    let itemLink;
+    let itemOrItemLink;
 
-    /**
-     * @type {import("stac-ts").StacCollection | import("stac-ts").StacItem | undefined}
-     **/
-    let stac;
     // TODO get auxiliary layers from collection
     /** @type {Record<string,any>[]} */
     let layersJson = [];
 
-    // Load collectionstac if not yet initialized
-    stac = await this.fetchCollection();
+    // Load collectionstac if not yet initialized // TODO
+    await this.fetchCollection();
 
-    const isObservationPoint = stac?.endpointtype === "GeoDB";
+    const isObservationPoint = this.#collectionStac?.endpointtype === "GeoDB";
 
-    if (linkOrDate instanceof Date) {
+    if (itemOrDate instanceof Date) {
       // if collectionStac not yet initialized we do it here
-      itemLink = this.getItem(linkOrDate);
+      itemOrItemLink = await this.getItem(itemOrDate);
     } else {
-      itemLink = linkOrDate;
+      itemOrItemLink = itemOrDate;
     }
-    let stacItemUrl = "";
-    if (itemLink?.href.startsWith("blob:")) {
-      stacItemUrl = itemLink.href;
-    } else {
-      stacItemUrl = itemLink
-        ? toAbsolute(itemLink.href, this.#collectionUrl)
-        : this.#collectionUrl;
-    }
-
-    stac = await axios.get(stacItemUrl).then((resp) => resp.data);
 
-    if (!itemLink) {
-      // no specific item was requested; render last item
-      this.#collectionStac = new Collection(stac);
-      this.selectedItem = this.getItem();
-
-      if (this.selectedItem) {
-        layersJson = await this.createLayersJson(this.selectedItem);
+    let stacItemUrl = "";
+    if (isSTACItem(itemOrItemLink)) {
+      this.selectedItem = itemOrItemLink;
+      stacItemUrl = this.#collectionUrl + `/items/${this.selectedItem.id}`;
+    } else if (itemOrItemLink) {
+      if (itemOrItemLink?.href?.startsWith("blob:")) {
+        stacItemUrl = itemOrItemLink.href;
+        // Use native fetch for blob URLs to avoid axios/cache interceptor issues
+        this.selectedItem = await fetch(stacItemUrl).then(
+          async (resp) => await resp.json(),
+        );
       } else {
+        stacItemUrl = toAbsolute(itemOrItemLink.href, this.#collectionUrl);
+        this.selectedItem = await axios
+          .get(stacItemUrl)
+          .then((resp) => resp.data);
+      }
+    } else if (!this.selectedItem) {
+      this.selectedItem = await this.getItem();
+      if (!this.selectedItem) {
         console.warn(
           "[eodash] the selected collection does not include any items",
         );
+        return [];
+      } else if (this.selectedItem) {
+        // if no specific item was requested, we create layers from the latest item
+        return this.createLayersJson(this.selectedItem);
       }
-      return [];
-    } else {
-      // specific item was requested
-      const item = new Item(stac);
-      this.selectedItem = item;
-      const title =
-        this.#collectionStac?.title || this.#collectionStac?.id || "";
-      layersJson.unshift(
-        ...(await this.buildJsonArray(
-          item,
-          stacItemUrl,
-          title,
-          isObservationPoint,
-        )),
-      );
-      return layersJson;
     }
+
+    // specific item was requested
+    const item = new Item(this.selectedItem);
+    this.selectedItem = item;
+    const title = this.#collectionStac?.title || this.#collectionStac?.id || "";
+    layersJson.unshift(
+      ...(await this.buildJsonArray(
+        item,
+        stacItemUrl,
+        title,
+        isObservationPoint,
+      )),
+    );
+    return layersJson;
   };
 
   /**
@@ -131,6 +148,11 @@ export class EodashCollection {
    * @returns {Promise<Record<string,any>[]>} layers
    * */
   async buildJsonArray(item, itemUrl, title, isObservationPoint, itemDatetime) {
+    if (!item) {
+      console.warn("[eodash] no item provided to buildJsonArray");
+      return [];
+    }
+
     log.debug(
       "Building JSON array",
       item,
@@ -161,13 +183,21 @@ export class EodashCollection {
     // will try to extract anything it supports but for which we have
     // less control.
 
+    const rasterformURL = /** @type {string|undefined} */ (
+      this.#collectionStac?.["eodash:rasterform"]
+    );
+    /** @type {import("@/types").EodashRasterJSONForm|undefined} */
+    const rasterForm = rasterformURL
+      ? await axios.get(rasterformURL).then((resp) => resp.data)
+      : undefined;
     let { layerConfig, style } = extractLayerConfig(
       this.#collectionStac?.id ?? "",
       await fetchStyle(item, itemUrl),
+      rasterForm,
     );
 
-    const layerDatetime = extractLayerDatetime(
-      this.getItems(),
+    const { layerDatetime, timeControlValues } = extractLayerTimeValues(
+      await this.getItems(),
       item.properties?.datetime ??
         item.properties.start_datetime ??
         itemDatetime,
@@ -180,7 +210,7 @@ export class EodashCollection {
       return data;
     }, /** @type {Record<string,import('stac-ts').StacAsset>} */ ({}));
     const isSupported =
-      item.links.some((link) => ["wms", "xyz", "wmts"].includes(link.rel)) ||
+      item.links.some((link) => ["wms", "xyz", "wmts", "vector-tile"].includes(link.rel)) ||
       Object.keys(dataAssets).length;
 
     if (isSupported) {
@@ -189,17 +219,34 @@ export class EodashCollection {
       extraProperties = {
         ...extraProperties,
         ...(this.color && { color: this.color }),
+        ...(timeControlValues && {
+          timeControlValues,
+          timeControlProperty: "TIME",
+        }),
       };
 
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
         item,
+        itemUrl,
         layerDatetime,
         extraProperties,
       );
 
       jsonArray.push(
+        ...((this.rasterEndpoint &&
+          createLayerFromRender(
+            this.rasterEndpoint,
+            this.#collectionStac,
+            item,
+            {
+              ...extraProperties,
+              ...(layerConfig && { layerConfig }),
+              ...(layerDatetime && { layerDatetime }),
+            },
+          )) ||
+          []),
         ...(await createLayersFromAssets(
           this.#collectionStac?.id ?? "",
           title || this.#collectionStac?.title || item.id,
@@ -210,8 +257,8 @@ export class EodashCollection {
           layerDatetime,
           extraProperties,
         )),
-        ...links,
         // We add the links after the assets so they are layered underneath assets
+        ...links,
       );
     } else {
       // fallback to STAC
@@ -240,21 +287,38 @@ export class EodashCollection {
 
   async fetchCollection() {
     if (!this.#collectionStac) {
-      log.debug("Fetching collection file", this.#collectionUrl);
       const col = await axios
         .get(this.#collectionUrl)
         .then((resp) => resp.data);
       this.#collectionStac = new Collection(col);
+      log.debug("Fetching collection file", this.#collectionUrl);
     }
     return this.#collectionStac;
   }
 
   /**
    * Returns all item links sorted by datetime ascendingly
+   * @param {boolean} [fields=false] if true, fetch items from API with only properties
+   * @param {boolean} [first] - if true, returns the first page of items only (for API collections)
+   * @returns {Promise<import("stac-ts").StacLink[] | import("stac-ts").StacItem[] | undefined>}
    */
-  getItems() {
-    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+  async getItems(fields = false, first = false) {
     const items = this.#collectionStac?.links.filter((i) => i.rel === "item");
+
+    if (this.isAPI && !items?.length) {
+      const itemUrl = this.#collectionUrl + "/items";
+      if (fields) {
+        return await fetchApiItems(
+          itemUrl,
+          `fields=properties,-assets,-geometry,-links,-bbox`,
+          100,
+          first,
+        );
+      }
+      return await fetchApiItems(itemUrl, undefined, 100, first);
+    }
+
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
     if (!datetimeProperty) {
       return items;
     }
@@ -270,14 +334,21 @@ export class EodashCollection {
     );
   }
 
-  getDates() {
-    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
-    if (!datetimeProperty) {
+  async getDates() {
+    const items = await this.getItems(true, false);
+
+    const datetimeProperty = getDatetimeProperty(items);
+    if (!datetimeProperty || !items?.length) {
       return [];
     }
-    return this.getItems()?.map(
-      (i) => new Date(/** @type {number} */ (i[datetimeProperty])),
-    );
+
+    const mapToDates = this.isAPI
+      ? //@ts-expect-error todo
+        (i) =>
+          new Date(/** @type {string} */ (i.properties?.[datetimeProperty]))
+      : //@ts-expect-error todo
+        (i) => new Date(/** @type {string} */ (i[datetimeProperty]));
+    return items?.map(mapToDates) || [];
   }
 
   async getExtent() {
@@ -288,38 +359,58 @@ export class EodashCollection {
    * Get closest Item Link from a certain date,
    * get the latest if no date provided
    *  @param {Date} [date]
+   *  @return {Promise<import("stac-ts").StacItem | import("stac-ts").StacLink | undefined>} item
    **/
-  getItem(date) {
-    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+  async getItem(date) {
+    if (!date) {
+      return (await this.getItems(false, true))?.[0];
+    }
+
+    const items = await this.getItems();
+    const datetimeProperty = getDatetimeProperty(items);
     if (!datetimeProperty) {
       // in case no datetime property is found, return the first item
-      return this.getItems()?.[0];
+      return (await this.getItems(false, true))?.[0];
     }
-    return date
-      ? this.getItems()?.sort((a, b) => {
-          const distanceA = Math.abs(
-            new Date(/** @type {number} */ (a[datetimeProperty])).getTime() -
-              date.getTime(),
-          );
-          const distanceB = Math.abs(
-            new Date(/** @type {number} */ (b[datetimeProperty])).getTime() -
-              date.getTime(),
-          );
-          return distanceA - distanceB;
-        })[0]
-      : this.getItems()?.at(-1);
+    return (await this.getItems())?.sort((a, b) => {
+      const distanceA = Math.abs(
+        new Date(
+          /** @type {number} */ (
+            //@ts-expect-error TODO
+            this.isAPI ? a.properties[datetimeProperty] : a[datetimeProperty]
+          ),
+        ).getTime() - date.getTime(),
+      );
+      const distanceB = Math.abs(
+        new Date(
+          /** @type {number} */ (
+            //@ts-expect-error TODO
+            this.isAPI ? b.properties[datetimeProperty] : b[datetimeProperty]
+          ),
+        ).getTime() - date.getTime(),
+      );
+      return distanceA - distanceB;
+    })[0];
   }
 
   async getToolTipProperties() {
     if (!(this.selectedItem instanceof Item)) {
       return [];
     }
-    let styles = await fetchStyle(
+    // get all style links, which could contribute by tooltip config and aggregate them
+    const styles = await fetchAllStyles(
       this.selectedItem,
       `${this.#collectionUrl}/${this.selectedItem.id}`,
     );
-    const { tooltip } = styles || { tooltip: [] };
-    this.#tooltipProperties = tooltip ?? [];
+    // get only unique ids to avoid duplicates
+    const aggregatedTooltips = [
+      ...new Map(
+        styles
+          .flatMap(style => style.tooltip || [])
+          .map(entry => [entry.id, entry])
+      ).values()
+    ];
+    this.#tooltipProperties = aggregatedTooltips ?? [];
     return this.#tooltipProperties;
   }
 
@@ -331,17 +422,15 @@ export class EodashCollection {
    */
   async updateLayerJson(datetime, layer, map) {
     await this.fetchCollection();
-    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    const datetimeProperty = getDatetimeProperty(
+      await this.getItems(true, true),
+    );
     if (!datetimeProperty) {
       console.warn("[eodash] no datetime property found in collection");
       return;
     }
     // get the link of the specified date
-    const specifiedLink = this.getItems()?.find(
-      (item) =>
-        typeof item[datetimeProperty] === "string" &&
-        new Date(item[datetimeProperty]).toISOString() === datetime,
-    );
+    const specifiedLink = await this.getItem(new Date(datetime));
 
     if (!specifiedLink) {
       console.warn(
@@ -350,9 +439,22 @@ export class EodashCollection {
       );
       return;
     }
-
-    // create json layers from the item
-    const newLayers = await this.createLayersJson(specifiedLink);
+    /** @type {Record<string, any>[]} */
+    let newLayers = [];
+    if (isSTACItem(specifiedLink)) {
+      // if specifiedLink is an item, we create layers from it
+      newLayers = await this.buildJsonArray(
+        specifiedLink,
+        this.#collectionUrl + `/items/${specifiedLink.id}`,
+        this.#collectionStac?.title || this.#collectionStac?.id || "",
+        this.#collectionStac?.endpointtype === "GeoDB" ||
+          !!this.#collectionStac?.locations,
+        datetime,
+      );
+    } else {
+      // create json layers from the item
+      newLayers = await this.createLayersJson(specifiedLink);
+    }
 
     let currentLayers = getLayers();
     if (map === "second") {
@@ -391,10 +493,10 @@ export class EodashCollection {
     );
 
     return [
+        //@ts-expect-error indicator instead of item
       ...(await createLayersFromLinks(
         indicator?.id ?? "",
         indicator?.title || indicator.id,
-        //@ts-expect-error indicator instead of item
         indicator,
       )),
       ...(await createLayersFromAssets(