@eodash/eodash 5.1.0 → 5.3.0

package/core/client/eodashSTAC/helpers.js

@@ -46,14 +46,28 @@ export function generateFeatures(links, extraProperties = {}, rel = "item") {
  *
  * @param {string} collectionId
  *  @param { import("@/types").EodashStyleJson} [style]
+ * @param {Record<string,any>} [rasterJsonform]
  * */
-export function extractLayerConfig(collectionId, style) {
-  if (!style) {
+export function extractLayerConfig(collectionId, style, rasterJsonform) {
+  if (!style && !rasterJsonform) {
     return { layerConfig: undefined, style: undefined };
   }
-  style = { ...style };
+  if (style) {
+    style = { ...style };
+  }
+
+  if (rasterJsonform) {
+    return {
+      layerConfig: {
+        schema: rasterJsonform.jsonform,
+        legend: rasterJsonform.legend,
+        type: "tileUrl",
+      },
+      style,
+    };
+  }
 
-  if (Object.keys(style.variables ?? {}).length) {
+  if (style?.variables && Object.keys(style.variables ?? {}).length) {
     style.variables = getStyleVariablesState(collectionId, style.variables);
   }
 
@@ -61,6 +75,7 @@ export function extractLayerConfig(collectionId, style) {
   let layerConfig = undefined;
 
   if (style?.jsonform) {
+    // this explicitly sets legend only if jsonform is configured
     layerConfig = { schema: style.jsonform, type: "style" };
     delete style.jsonform;
     if (style?.legend) {
@@ -75,7 +90,25 @@ export function extractLayerConfig(collectionId, style) {
 
   return { layerConfig, style };
 }
-
+/**
+ *
+ * @param {number[]} bbox
+ * @returns
+ */
+export const sanitizeBbox = (bbox) => {
+  if (!bbox || !bbox.length || bbox.length !== 4) {
+    return [0, 0, 0, 0];
+  }
+  let [minX, minY, maxX, maxY] = bbox;
+  // Normalize longitudes to be within -180 to 180
+  minX = Math.max(((minX + 180) % 360) - 180, -180);
+  maxX = Math.min(((maxX - 180) % 360) + 180, 180);
+  // Normalize latitudes to be within -90 to 90
+  minY = Math.max(((minY + 90) % 180) - 90, -90);
+  maxY = Math.min(((maxY - 90) % 180) + 90, 90);
+
+  return [minX, minY, maxX, maxY];
+};
 /**
  * Function to extract collection urls from an indicator
  * @param {import("stac-ts").StacCatalog
@@ -100,6 +133,10 @@ export function extractCollectionUrls(stacObject, basepath) {
     return collectionUrls;
   }
   children.forEach((link) => {
+    if (link.href.startsWith("http")) {
+      collectionUrls.push(link.href);
+      return;
+    }
     collectionUrls.push(toAbsolute(link.href, basepath));
   });
   return collectionUrls;
@@ -115,6 +152,8 @@ export const extractRoles = (properties, linkOrAsset) => {
   roles?.forEach((role) => {
     if (role === "visible") {
       properties.visible = true;
+    } else if (role === "invisible") {
+      properties.visible = false;
     }
     if (role === "overlay" || role === "baselayer") {
       properties.group = role;
@@ -124,13 +163,19 @@ export const extractRoles = (properties, linkOrAsset) => {
 };
 
 /**
- * Extracts style JSON from a STAC Item
+ * Extracts a single non-link style JSON from a STAC Item optionally for a selected key mapping
  * @param {import("stac-ts").StacItem} item
  * @param {string} itemUrl
- * @returns
+ * @param {string | undefined} key
+ * @returns 
  **/
-export const fetchStyle = async (item, itemUrl) => {
-  const styleLink = item.links.find((link) => link.rel.includes("style"));
+export const fetchStyle = async (item, itemUrl, key=undefined) => {
+  let styleLink = null;
+  if (key) {
+    styleLink = item.links.find((link) => link.rel.includes("style") && link["links:keys"] && /** @type {Array<string>} */ (link["links:keys"]).includes(key) );
+  } else {
+    styleLink = item.links.find((link) => link.rel.includes("style") && !link["links:keys"]);
+  }
   if (styleLink) {
     let url = "";
     if (styleLink.href.startsWith("http")) {
@@ -147,6 +192,27 @@ export const fetchStyle = async (item, itemUrl) => {
   }
 };
 
+/**
+ * Fetches all style JSONs from a STAC Item and returns an array with style objects
+ * @param {import("stac-ts").StacItem} item
+ * @param {string} itemUrl
+ * @returns { Promise <Array<import("@/types").EodashStyleJson>>}
+ **/
+export const fetchAllStyles = async (item, itemUrl) => {
+  const styleLinks = item.links.filter((link) => link.rel.includes("style"));
+  const fetchPromises = styleLinks.map(async (link) => {
+    let url = link.href.startsWith("http")
+      ? link.href
+      : toAbsolute(link.href, itemUrl);
+
+    const styleJson = await axios.get(url).then((resp) => resp.data);
+    log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
+    return styleJson;
+  });
+  const results = await Promise.all(fetchPromises);
+  return results;
+};
+
 /**
  * Return projection code which is to be registered in `eox-map`
  * @param {string|number|{name: string, def: string}} [projection]
@@ -169,59 +235,89 @@ export const getProjectionCode = (projection) => {
 
 /**
  * Extracts layercontrol LayerDatetime property from STAC Links
- * @param {import("stac-ts").StacLink[]} [links]
+ * @param {import("stac-ts").StacLink[] | import("stac-ts").StacItem[] | undefined} [items]
  * @param {string|null} [currentStep]
  **/
-export const extractLayerDatetime = (links, currentStep) => {
-  if (!currentStep || !links?.length) {
-    return undefined;
+export const extractLayerTimeValues = (items, currentStep) => {
+  if (!currentStep || !items?.length) {
+    return { layerDatetime: undefined, timeControlValues: undefined };
   }
 
-  // check if links has a datetime value
-  const dateProperty = getDatetimeProperty(links);
+  // check if items has a datetime value
+  const dateProperty = getDatetimeProperty(items);
 
   if (!dateProperty) {
-    return undefined;
+    return { layerDatetime: undefined, timeControlValues: undefined };
   }
-
-  /** @type {string[]} */
-  const controlValues = [];
+  /** @type {{date:string;itemId:string}[]} */
+  const timeValues = [];
   try {
-    currentStep = new Date(currentStep).toISOString();
-    links.reduce((vals, link) => {
+    /**
+     *  @param {typeof timeValues} vals
+     *  @param {import("stac-ts").StacLink} link
+     */
+    const reduceLinks = (vals, link) => {
       if (link[dateProperty] && link.rel === "item") {
-        vals.push(
-          new Date(/** @type {string} */ (link[dateProperty])).toISOString(),
-        );
+        vals.push({
+          itemId: /** @type {string} */ (link.id),
+          date: new Date(
+            /** @type {string} */ (link[dateProperty]),
+          ).toISOString(),
+        });
       }
       return vals;
-    }, controlValues);
+    };
+
+    /**
+     *
+     * @param {typeof timeValues} vals
+     * @param {import("stac-ts").StacItem} item
+     */
+    const reduceItems = (vals, item) => {
+      const date = item.properties?.[dateProperty];
+      if (date) {
+        vals.push({
+          itemId: /** @type {string} */ (item.id),
+          date: new Date(/** @type {string} */ (date)).toISOString(),
+          ...item.properties,
+        });
+      }
+      return vals;
+    };
+    currentStep = new Date(currentStep).toISOString();
+    //@ts-expect-error TODO
+    items.reduce(isSTACItem(items[0]) ? reduceItems : reduceLinks, timeValues);
   } catch (e) {
     console.warn("[eodash] not supported datetime format was provided", e);
-    return undefined;
+    return { layerDatetime: undefined, timeControlValues: undefined };
   }
-  // not enough controlValues
-  if (controlValues.length <= 1) {
-    return undefined;
+  // not enough timeValues
+  if (timeValues.length <= 1) {
+    return { layerDatetime: undefined, timeControlValues: undefined };
   }
 
   // item datetime is not included in the item links datetime
-  if (!controlValues.includes(currentStep)) {
+  if (!timeValues.some((val) => val.date === currentStep)) {
     const currentStepTime = new Date(currentStep).getTime();
-    currentStep = controlValues.reduce((a, b) => {
-      const aDiff = Math.abs(new Date(a).getTime() - currentStepTime);
-      const bDiff = Math.abs(new Date(b).getTime() - currentStepTime);
-      return bDiff < aDiff ? b : a;
-    });
+    currentStep = timeValues.reduce((time, step) => {
+      const aDiff = Math.abs(new Date(time).getTime() - currentStepTime);
+      const bDiff = Math.abs(new Date(step.date).getTime() - currentStepTime);
+      return bDiff < aDiff ? step.date : time;
+    }, timeValues[0].date);
   }
 
-  return {
-    controlValues,
+  const layerDatetime = {
+    controlValues: timeValues.map((d) => d.date).sort(),
     currentStep,
     slider: true,
     navigation: true,
     play: false,
-    displayFormat: "DD.MM.YYYY HH:MM",
+    displayFormat: "DD.MM.YYYY HH:mm",
+  };
+
+  return {
+    layerDatetime,
+    timeControlValues: timeValues,
   };
 };
 
@@ -287,23 +383,23 @@ export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
  */
 export const getColFromLayer = (indicators, layer) => {
   // init cols
-  const collections = indicators.map((ind) => ind.collectionStac);
+  // const collections = indicators.map((ind) => ind.collectionStac);
   const [collectionId, itemId, ..._other] = layer.get("id").split(";:;");
 
-  const chosen = collections.find((col) => {
-    const isInd =
-      col?.id === collectionId &&
-      col?.links?.some(
-        (link) =>
-          link.rel === "item" &&
-          (link.href.includes(itemId) ||
-            link.id === itemId ||
-            //@ts-expect-error attaching the item in link when parsing .parquet items, see @/eodashSTAC/parquet.js
-            (link["item"] && link["item"].id === itemId)),
+  return indicators.find(async (ind) => {
+    const isCollection = ind.collectionStac?.id === collectionId;
+    if (!isCollection) {
+      return false;
+    }
+    /** @type {string[]} */
+    const itemIds = [];
+    await ind.getItems().then((items) => {
+      itemIds.push(
+        ...(items?.map((item) => /** @type {string} */ (item.id)) ?? []),
       );
-    return isInd;
+    });
+    return itemIds.includes(itemId);
   });
-  return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
 };
 
 /**
@@ -413,12 +509,20 @@ export async function mergeGeojsons(geojsonUrls) {
     features: [],
   };
   await Promise.all(
-    geojsonUrls.map((url) =>
-      axios.get(url).then((resp) => {
+    geojsonUrls.map((url) => {
+      // Use native fetch for blob URLs to avoid axios/cache interceptor issues
+      if (url.startsWith("blob:")) {
+        return fetch(url)
+          .then(async (resp) => await resp.json())
+          .then((geojson) => {
+            merged.features.push(...(geojson.features ?? []));
+          });
+      }
+      return axios.get(url).then((resp) => {
         const geojson = resp.data;
         merged.features.push(...(geojson.features ?? []));
-      }),
-    ),
+      });
+    }),
   );
 
   return encodeURI(
@@ -532,16 +636,37 @@ export const addTooltipInteraction = (layer, style) => {
 
 /**
  *
- * @param {import("stac-ts").StacLink[]} [links]
+ * @param {import("stac-ts").StacLink[] | import("stac-ts").StacItem[] |undefined |null} [linksOrItems]
  */
-export function getDatetimeProperty(links) {
-  if (!links?.length) {
+export function getDatetimeProperty(linksOrItems) {
+  if (!linksOrItems?.length) {
     return undefined;
   }
+  const first = linksOrItems[0];
+  let checkProperties = false;
+  if (isSTACItem(first)) {
+    checkProperties = true;
+  }
+
   // TODO: consider other properties for datetime ranges
   const datetimeProperties = ["datetime", "start_datetime", "end_datetime"];
+  if (checkProperties) {
+    for (const prop of datetimeProperties) {
+      const propExists = linksOrItems.some(
+        (l) =>
+          //@ts-expect-error TODO
+          l["properties"]?.[prop] &&
+          //@ts-expect-error TODO
+          typeof l["properties"]?.[prop] === "string",
+      );
+      if (!propExists) {
+        continue;
+      }
+      return prop;
+    }
+  }
   for (const prop of datetimeProperties) {
-    const propExists = links.some(
+    const propExists = linksOrItems.some(
       (l) => l[prop] && typeof l[prop] === "string",
     );
     if (!propExists) {
@@ -550,3 +675,100 @@ export function getDatetimeProperty(links) {
     return prop;
   }
 }
+/**
+ *
+ * @param {*} stacObject
+ * @returns {stacObject is import("stac-ts").StacItem}
+ */
+export function isSTACItem(stacObject) {
+  return (
+    stacObject &&
+    typeof stacObject === "object" &&
+    stacObject.collection &&
+    stacObject.id &&
+    stacObject.properties &&
+    typeof stacObject.properties === "object"
+  );
+}
+
+/**
+ * Fetch all STAC items from a STAC API endpoint.
+ * @param {string} itemsUrl
+ * @param {string} [query]
+ * @param {number} [limit=100] - The maximum number of items to fetch per request.
+ * @param {boolean} [returnFirst] - If true, only the first page of results will be returned.
+ * @param {number} [maxNumber=1000] - if the matched number of items exceed this, only the first page will be returned.
+ */
+export async function fetchApiItems(
+  itemsUrl,
+  query,
+  limit = 100,
+  returnFirst = false,
+  maxNumber = 1000,
+) {
+  itemsUrl = itemsUrl.includes("?") ? itemsUrl.split("?")[0] : itemsUrl;
+  itemsUrl += query ? `?limit=${limit}&${query}` : `?limit=${limit}`;
+
+  const itemsFeatureCollection = await axios
+    .get(itemsUrl)
+    .then((resp) => resp.data);
+  /** @type {import("stac-ts").StacItem[]} */
+  const items = itemsFeatureCollection.features;
+  const nextLink = itemsFeatureCollection.links?.find(
+    //@ts-expect-error TODO: itemsFeatureCollection is not typed
+    (link) => link.rel === "next",
+  );
+
+  if (!nextLink || returnFirst) {
+    return items;
+  }
+  /** @type {number} */
+  const matchedItems = itemsFeatureCollection.numberMatched;
+  // Avoid fetching too many items
+  if (matchedItems >= maxNumber) {
+    console.warn(
+      `[eodash] The number of items matched (${matchedItems}) exceeds the maximum allowed (${maxNumber})`,
+    );
+    return items;
+  }
+
+  let [nextLinkURL, nextLinkQuery] = nextLink.href.split("?");
+  nextLinkQuery = nextLinkQuery.replace(/limit=\d+/, "");
+  if (query) {
+    const queryParams = new URLSearchParams(query);
+    const nextLinkParams = new URLSearchParams(nextLinkQuery);
+
+    for (const key of nextLinkParams.keys()) {
+      queryParams.delete(key);
+    }
+    const remainingQuery = queryParams.toString();
+    if (remainingQuery) {
+      nextLinkQuery += `&${remainingQuery}`;
+    }
+  }
+
+  const nextPage = await fetchApiItems(nextLinkURL, nextLinkQuery);
+  items.push(...nextPage);
+  return items;
+}
+/**
+ * @param {import ("stac-ts").StacCollection | undefined | null} collection
+ * @returns {object}
+ */
+export function extractLayerLegend(collection) {
+  let extraProperties = {};
+  if (collection?.assets?.legend?.href) {
+    extraProperties = {
+      description: `<div style="width: 100%">
+          <img src="${collection.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
+        </div>`,
+    };
+  }
+  // Check if collection has eox:colorlegend definition, if yes overwrite legend description
+  if (collection && collection["eox:colorlegend"]) {
+    extraProperties = {
+      layerLegend: collection["eox:colorlegend"],
+    };
+  }
+  return extraProperties;
+}

package/core/client/eodashSTAC/parquet.js

@@ -1,6 +1,4 @@
 import { parquetRead } from "hyparquet";
-import WKB from "ol/format/WKB.js";
-import GeoJSON from "ol/format/GeoJSON";
 import log from "loglevel";
 
 /**
@@ -62,8 +60,6 @@ export const adjustParquetItems = (items) => {
 
     return /** @type {import("stac-ts").StacItem} */ ({
       ...item,
-      //@ts-expect-error geometry wkb conversion by stac-geoparquet
-      geometry: wkbToGeometry(item.geometry),
 
       assets: ((assets) => {
         for (const [key, value] of Object.entries(assets)) {
@@ -82,15 +78,6 @@ export const adjustParquetItems = (items) => {
     });
   });
 };
-/**
- *  @param {Uint8Array} wkb - Well Known Binary
- */
-function wkbToGeometry(wkb) {
-  const geoJsonFormatter = new GeoJSON();
-  const wkbReader = new WKB();
-  const olGeometry = wkbReader.readGeometry(wkb);
-  return geoJsonFormatter.writeGeometryObject(olGeometry);
-}
 
 /**
  *

package/core/client/eodashSTAC/triggers.js

@@ -69,7 +69,7 @@ export function getStyleVariablesState(collectionId, variables) {
     ];
     return (
       collection === collectionId &&
-      ["Vector", "WebGLTile"].includes(layer?.type ?? "")
+      ["Vector", "WebGLTile", "VectorTile"].includes(layer?.type ?? "")
     );
   });
 

package/core/client/store/actions.js

@@ -5,6 +5,8 @@ import {
   activeTemplate,
   poi,
   comparePoi,
+  chartEl,
+  compareChartEl,
 } from "@/store/states";
 import { getProjectionCode } from "@/eodashSTAC/helpers";
 import log from "loglevel";
@@ -22,6 +24,18 @@ export const getLayers = () => mapEl.value?.layers.toReversed() ?? [];
 export const getCompareLayers = () =>
   mapCompareEl.value?.layers.toReversed() ?? [];
 
+/**
+ * Returns the current chart spec from {@link chartEl}
+ * @returns {import("vega-embed").VisualizationSpec | null}
+ */
+export const getChartSpec = () => chartEl.value?.spec ?? null;
+
+/**
+ * Returns the current chart spec from {@link compareChartEl}
+ * @returns {import("vega-embed").VisualizationSpec | null}
+ */
+export const getCompareChartSpec = () => compareChartEl.value?.spec ?? null;
+
 /**
  * Register EPSG projection in `eox-map`
  * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/

package/core/client/store/stac.js

@@ -19,9 +19,15 @@ import { updateEodashCollections } from "@/utils";
 export const useSTAcStore = defineStore("stac", () => {
   /**
    * STAC catalog endpoint URL
-   * @type {import("vue").Ref<import("@/types").StacEndpoint | null>}
+   * @type {import("vue").Ref<string| null>}
    */
   const stacEndpoint = ref(null);
+  /**
+   * Raster endpoint URL
+   * @type {import("vue").Ref<string | null>}
+   */
+  const rasterEndpoint = ref(null);
+  const isApi = ref(false);
 
   /**
    * Links of the root STAC catalog
@@ -49,20 +55,35 @@ export const useSTAcStore = defineStore("stac", () => {
    * >}
    */
   const selectedCompareStac = ref(null);
+  /**
+   * Currently selected item
+   * @type {import("vue").Ref<import("stac-ts").StacLink | import("stac-ts").StacItem | null>}
+   */
+  const selectedItem = ref(null);
 
   /**
    * Initializes the store by assigning the STAC endpoint.
    * @param {import("@/types").StacEndpoint} endpoint
    */
   function init(endpoint) {
-    stacEndpoint.value = endpoint;
+    if (!endpoint) {
+      throw new Error("STAC endpoint is not defined");
+    }
+
+    if (typeof endpoint === "string") {
+      stacEndpoint.value = endpoint;
+      return;
+    }
+    stacEndpoint.value = endpoint.endpoint;
+    isApi.value = endpoint.api ?? false;
+    rasterEndpoint.value = endpoint.rasterEndpoint ?? null;
   }
 
   /**
    * Fetches root stac catalog and assign it to `stac`
    *
-   * @param {import("@/types").StacEndpoint} [url=eodash.stacEndpoint] Default
-   *   is `eodash.stacEndpoint`
+   * @param {string} [url=stacEndpoint] Default
+   *   is  the configured `stacEndpoint` url
    * @returns {Promise<void>}
    * @see {@link stac}
    */
@@ -78,14 +99,17 @@ export const useSTAcStore = defineStore("stac", () => {
       stac.value = null;
       return;
     }
+    if (isApi.value) {
+      url = url + "/collections?limit=1000"; // to get all collections
+    }
+    const property = isApi.value ? "collections" : "links";
 
     log.debug("Loading STAC endpoint", url);
     await axios
       .get(url)
       .then((resp) => {
-        const links = /** @type {import("stac-ts").StacCatalog} */ (
-          resp.data
-        ).links.map((link) => {
+        //@ts-expect-error TODO
+        const links = resp.data[property].map((link) => {
           if (!link.title) {
             link.title = `${link.rel} ${link.href}`;
           }
@@ -104,10 +128,11 @@ export const useSTAcStore = defineStore("stac", () => {
    *
    * @param {string} relativePath - Stac link href
    * @param {boolean} [isPoi=false] - If true, the STAC is loaded for a point of interest
+   * @param {Object} [stacItem] - The STAC item to load
    * @returns {Promise<void>}
    * @see {@link selectedStac}
    */
-  async function loadSelectedSTAC(relativePath = "", isPoi = false) {
+  async function loadSelectedSTAC(relativePath = "", isPoi = false, stacItem) {
     if (!stacEndpoint.value) {
       return Promise.reject(new Error("STAC endpoint is not defined"));
     }
@@ -116,6 +141,11 @@ export const useSTAcStore = defineStore("stac", () => {
       // construct absolute URL of a poi
       absoluteUrl.value = constructPoiUrl(relativePath, indicator.value);
     }
+    //@ts-expect-error "this" type is not exported by pinia
+    const patch = this?.$patch;
+    if (stacItem && patch) {
+      patch({ selectedItem: stacItem });
+    }
 
     await axios
       .get(absoluteUrl.value)
@@ -125,6 +155,8 @@ export const useSTAcStore = defineStore("stac", () => {
           resp.data,
           absoluteUrl.value,
           collectionsPalette,
+          isApi.value,
+          rasterEndpoint.value,
         );
         selectedStac.value = resp.data;
         // set indicator and poi
@@ -141,6 +173,7 @@ export const useSTAcStore = defineStore("stac", () => {
    * Fetches selected stac object and assign it to `selectedCompareStac`
    *
    * @param {string} relativePath - Stac link href
+   * @param {boolean} [isPOI=false] - If true, the STAC is loaded for a point of interest
    * @returns {Promise<void>}
    * @see {@link selectedCompareStac}
    */
@@ -163,6 +196,8 @@ export const useSTAcStore = defineStore("stac", () => {
           resp.data,
           absoluteUrl.value,
           [...collectionsPalette].reverse(),
+          isApi.value,
+          rasterEndpoint.value,
         );
         selectedCompareStac.value = resp.data;
         compareIndicator.value = isPOI
@@ -203,6 +238,8 @@ export const useSTAcStore = defineStore("stac", () => {
   }
 
   return {
+    stacEndpoint,
+    isApi,
     stac,
     init,
     loadSTAC,
@@ -211,5 +248,6 @@ export const useSTAcStore = defineStore("stac", () => {
     resetSelectedCompareSTAC,
     selectedStac,
     selectedCompareStac,
+    selectedItem,
   };
 });

package/core/client/store/states.js

@@ -45,3 +45,9 @@ export const poi = ref("");
  * Selected point of interest for comparison, used for location collections
  */
 export const comparePoi = ref("");
+
+/** @type {import("vue").Ref<import("@eox/chart").EOxChart | null>} */
+export const chartEl = shallowRef(null);
+
+/** @type {import("vue").Ref<import("@eox/chart").EOxChart | null>} */
+export const compareChartEl = shallowRef(null);