@eodash/eodash 5.0.0-rc.3 → 5.1.0

package/core/client/composables/index.js

@@ -7,17 +7,54 @@ import {
   currentUrl,
   datetime,
   indicator,
+  mapEl,
   mapPosition,
+  poi,
 } from "@/store/states";
-import eodash from "@/eodash";
-import { useTheme } from "vuetify/lib/framework.mjs";
-import { inject, onMounted, onUnmounted, watch } from "vue";
+import { useTheme } from "vuetify";
+import { inject, nextTick, onMounted, onUnmounted, watch } from "vue";
 import { useSTAcStore } from "@/store/stac";
 import log from "loglevel";
 import { eodashKey, eoxLayersKey } from "@/utils/keys";
-import { useEventBus } from "@vueuse/core";
-import { posIsSetFromUrl } from "@/utils/states";
+import { useEventBus, useMutationObserver } from "@vueuse/core";
+import { isFirstLoad } from "@/utils/states";
 import { setCollectionsPalette } from "@/utils";
+import mustache from "mustache";
+import { toAbsolute } from "stac-js/src/http.js";
+import axios from "@/plugins/axios";
+
+/**
+/** @type {import('@/types').Eodash | null}*/
+
+let _eodash = null;
+
+/**
+ * Call this once in a top-level component to inject and store the reactive eodash object.
+ * @throws {Error} If eodash is not found in the inject context
+ */
+export function provideEodashInstance() {
+  const injected = inject(eodashKey);
+  if (!injected) {
+    throw new Error(
+      "Missing injected eodash – did you forget to call provideEodashInstance in a component?",
+    );
+  }
+  _eodash = injected;
+}
+
+/**
+ * Access the reactive eodash configuration anywhere after it has been provided.
+ * @returns {import('@/types').Eodash | null}
+ * @throws {Error} If eodash was not yet provided
+ */
+export function useEodash() {
+  if (!_eodash) {
+    throw new Error(
+      "Eodash not yet available – call provideEodashInstance() first.",
+    );
+  }
+  return _eodash;
+}
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -28,8 +65,11 @@ import { setCollectionsPalette } from "@/utils";
  * @returns {import("vue").Ref<string>} - Returns `currentUrl`
  * @see {@link '@/store/states.js'}
  */
-export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
-  if (!rel || rel.includes("http")) {
+export const useAbsoluteUrl = (
+  rel = "",
+  base = inject(eodashKey)?.stacEndpoint,
+) => {
+  if (!rel || rel.includes("http") || !base) {
     currentUrl.value = rel;
     return currentUrl;
   }
@@ -57,9 +97,12 @@ export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
  * @returns {import("vue").Ref<string>} - Returns `currentUrl`
  * @see {@link '@/store/states.js'}
  */
-export const useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
-  if (!rel || rel.includes("http")) {
-    currentCompareUrl.value = base;
+export const useCompareAbsoluteUrl = (
+  rel = "",
+  base = inject(eodashKey)?.stacEndpoint,
+) => {
+  if (!rel || rel.includes("http") || !base) {
+    currentCompareUrl.value = rel;
     return currentCompareUrl;
   }
 
@@ -119,6 +162,7 @@ export const useURLSearchParametersSync = () => {
     // Analyze currently set url params when first loaded and set them in the store
     if (window.location.search) {
       const searchParams = new URLSearchParams(window.location.search);
+      const store = useSTAcStore();
 
       /** @type {number | undefined} */
       let x,
@@ -134,11 +178,54 @@ export const useURLSearchParametersSync = () => {
           }
           case "indicator": {
             log.debug("Found indicator key in url");
-            const { loadSelectedSTAC, stac } = useSTAcStore();
-            const match = stac?.find((link) => link.id == value);
+            const eodash = inject(eodashKey);
+            const match = store.stac?.find(
+              (link) => useGetSubCodeId(link) == value,
+            );
             if (match) {
               log.debug("Found match, loading stac item", match);
-              await loadSelectedSTAC(match.href);
+              if (searchParams.has("poi")) {
+                const indicatorUrl = toAbsolute(
+                  match.href,
+                  eodash?.stacEndpoint ?? "",
+                );
+                // fetch indicator stac collection without rendering it
+                /** @type {import("stac-ts").StacCollection} */
+                const indicatorStac = await axios
+                  .get(indicatorUrl)
+                  .then((resp) => resp.data);
+                poi.value = searchParams.get("poi") ?? "";
+                // find the process link
+                const poiMatch = indicatorStac?.links.find(
+                  (link) =>
+                    link.rel === "service" &&
+                    link.type === "application/json; profile=collection",
+                );
+                if (poiMatch) {
+                  log.debug("Found poi match, setting poi", poiMatch);
+                  // render poi value into the link href
+                  /** @type {any} */
+                  let viewForMustache = poi.value;
+                  const tokens = mustache.parse(poiMatch.href);
+                  const keyToken = tokens.find(
+                    (token) => token[0] === "name" && token[1] !== ".",
+                  );
+                  // Construct the view object
+                  if (keyToken) {
+                    const keyName = keyToken[1];
+                    viewForMustache = { [keyName]: poi.value };
+                  }
+                  /** @type {string} */
+                  const poiUrl = mustache.render(
+                    poiMatch.href,
+                    viewForMustache,
+                  );
+                  const poiAbsoluteUrl = toAbsolute(poiUrl, indicatorUrl);
+                  await store.loadSelectedSTAC(poiAbsoluteUrl, true);
+                }
+              } else {
+                await store.loadSelectedSTAC(match.href);
+              }
             }
             break;
           }
@@ -173,19 +260,25 @@ export const useURLSearchParametersSync = () => {
       if (x && y && z) {
         log.debug("Coordinates found, applying map poisition", x, y, z);
         mapPosition.value = [x, y, z];
-        if (!posIsSetFromUrl.value) {
-          posIsSetFromUrl.value = true;
+        if (mapEl.value) {
+          mapEl.value.center = [x, y];
+          mapEl.value.zoom = z;
         }
       }
+
+      if (!isFirstLoad.value) {
+        isFirstLoad.value = true;
+      }
     }
 
     watch(
-      [indicator, mapPosition, datetime, activeTemplate],
+      [indicator, mapPosition, datetime, activeTemplate, poi],
       ([
         updatedIndicator,
         updatedMapPosition,
         updatedDatetime,
         updatedTemplate,
+        updatedPoi,
       ]) => {
         if ("URLSearchParams" in window) {
           const searchParams = new URLSearchParams(window.location.search);
@@ -205,6 +298,14 @@ export const useURLSearchParametersSync = () => {
           if (updatedTemplate) {
             searchParams.set("template", updatedTemplate);
           }
+          if (!updatedPoi) {
+            if (searchParams.has("poi")) {
+              searchParams.delete("poi");
+            }
+          } else {
+            searchParams.set("poi", updatedPoi);
+          }
+
           const newRelativePathQuery =
             window.location.pathname + "?" + searchParams.toString();
           history.pushState(null, "", newRelativePathQuery);
@@ -218,25 +319,28 @@ export const useURLSearchParametersSync = () => {
  * Converts eox-layout-item to transparent
  *
  *  @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
-export const makePanelTransparent = (root) => {
+export const useTransparentPanel = (root) => {
   onMounted(() => {
-    const eoxItem = root.value?.parentElement;
-    if (eoxItem?.tagName === "EOX-LAYOUT-ITEM") {
-      eoxItem.classList.remove("bg-surface");
+    const backgroundItem = root.value?.parentElement;
+    if (backgroundItem?.classList.contains("bg-surface")) {
+      backgroundItem.classList.remove("bg-surface");
     }
   });
 };
 
 export const useGetTemplates = () => {
-  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
-  return "template" in eodash ? [] : Object.keys(eodash.templates);
+  const eodash = inject(eodashKey);
+  if (!eodash) {
+    return [];
+  }
+  return "template" in eodash ? [] : Object.keys(eodash?.templates ?? {});
 };
 
 /**
  * Listens to the `layers:updated` and `time:updated` events and calls
  *
  * @param {import("@vueuse/core").EventBusListener<
- * "layers:updated"|"time:updated",
+ * import("@/types").LayersEventBusKeys,
  * {layers:Record<string,any>[]| undefined}
  * >} listener
  */
@@ -249,3 +353,149 @@ export const useOnLayersUpdate = (listener) => {
     unsubscribe();
   });
 };
+/**
+ * @param {import("@/types").LayersEventBusKeys} event
+ * @param {import("@eox/map").EOxMap | null} mapEl
+ * @param {Record<string,any>[]} layers
+ */
+export const useEmitLayersUpdate = async (event, mapEl, layers) => {
+  if (!mapEl) {
+    return;
+  }
+
+  const layersEvents = useEventBus(eoxLayersKey);
+
+  const emit = async () =>
+    mapEl?.updateComplete.then(async () => {
+      await nextTick(() => {
+        layersEvents.emit(event, layers);
+      });
+    });
+
+  const dl = /** @type {import("ol/layer").Group} */ (
+    mapEl.getLayerById("AnalysisGroup")
+  );
+  await new Promise((res, _rej) => {
+    if (!dl) {
+      mapEl.map.getLayers().once("add", async () => {
+        await emit();
+        res(true);
+      });
+      return;
+    }
+
+    dl.getLayers().once("change", async () => {
+      await emit();
+      res(true);
+    });
+  });
+};
+
+/**
+ * @param {import("stac-ts").StacCollection | import("stac-ts").StacLink | import("stac-ts").StacItem | null} collection
+ * @returns {string} - Returns the collection id or subcode if `useSubCode` is enabled
+ */
+export const useGetSubCodeId = (collection) => {
+  const eodash = useEodash();
+
+  if (!collection) {
+    return "";
+  }
+
+  if (eodash?.options?.useSubCode) {
+    return typeof collection.subcode === "string"
+      ? collection.subcode
+      : /** @type {string} */ (collection.id);
+  }
+  return /** @type {string} */ (collection.id);
+};
+
+/**
+ * Composable: Adopt Vuetify styles into eo-dash shadow root
+ * - Safe no-op outside Web Component context
+ * - Cleans up observers on unmount
+ */
+/**
+ * @param {string[]} [keyWords=["vuetify"]] - list of case-insensitive substrings to match against <style> element IDs
+ */
+export function useAdoptStyles(keyWords = ["vuetify"]) {
+  /** @type {Array<() => void>} */
+  let stops = [];
+
+  const eoDash =
+    /** @type {HTMLElement & { shadowRoot: ShadowRoot | null }} */ (
+      document.querySelector("eo-dash")
+    );
+  if (!eoDash || !eoDash.shadowRoot) return;
+  // Require Constructable Stylesheets support
+  if (typeof CSSStyleSheet === "undefined") return;
+
+  const head = document.head;
+  const shadow = eoDash.shadowRoot;
+  /** @type {Map<string, CSSStyleSheet>} */
+  const sheetsById = new Map();
+
+  /**
+   * @param {string} id
+   * @param {string} cssText
+   */
+  const updateSheet = (id, cssText) => {
+    let sheet = sheetsById.get(id);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(cssText);
+      sheetsById.set(id, sheet);
+      shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+    } else {
+      sheet.replaceSync(cssText);
+    }
+  };
+
+  /**
+   * @param {HTMLStyleElement} el
+   */
+  const handleStyleEl = (el) => {
+    const id = el.id || "";
+    const idLc = id.toLowerCase();
+    if (!keyWords.some((s) => idLc.includes(String(s).toLowerCase()))) return;
+    const cssText = (el.textContent || "").replaceAll(":root", ":host");
+    if (!cssText) return;
+
+    updateSheet(id, cssText);
+
+    const observer = useMutationObserver(
+      el,
+      () => {
+        const nextCss = (el.textContent || "").replaceAll(":root", ":host");
+        if (nextCss) updateSheet(id, nextCss);
+      },
+      { childList: true, characterData: true, subtree: true },
+    );
+    if (observer?.stop) stops.push(() => observer.stop());
+  };
+
+  /**
+   * @param {Node} node
+   */
+  const handleNode = (node) => {
+    if (node instanceof HTMLStyleElement) handleStyleEl(node);
+  };
+
+  head.childNodes.forEach(handleNode);
+
+  const headObserver = useMutationObserver(
+    head,
+    (mutations) => {
+      mutations?.forEach((m) => {
+        m.addedNodes?.forEach(handleNode);
+      });
+    },
+    { childList: true },
+  );
+  if (headObserver?.stop) stops.push(() => headObserver.stop());
+
+  onUnmounted(() => {
+    stops.forEach((stop) => stop());
+    stops = [];
+  });
+}

package/core/client/eodashSTAC/EodashCollection.js

@@ -7,6 +7,7 @@ import {
   fetchStyle,
   findLayer,
   generateFeatures,
+  getDatetimeProperty,
   replaceLayer,
 } from "./helpers";
 import {
@@ -57,10 +58,10 @@ export class EodashCollection {
     /**
      * @type {import("stac-ts").StacLink | undefined}
      **/
-    let stacItem;
+    let itemLink;
 
     /**
-     * @type {import("stac-ts").StacCollection | undefined}
+     * @type {import("stac-ts").StacCollection | import("stac-ts").StacItem | undefined}
      **/
     let stac;
     // TODO get auxiliary layers from collection
@@ -70,22 +71,26 @@ export class EodashCollection {
     // Load collectionstac if not yet initialized
     stac = await this.fetchCollection();
 
-    const isGeoDB = stac?.endpointtype === "GeoDB";
+    const isObservationPoint = stac?.endpointtype === "GeoDB";
 
     if (linkOrDate instanceof Date) {
       // if collectionStac not yet initialized we do it here
-      stacItem = this.getItem(linkOrDate);
+      itemLink = this.getItem(linkOrDate);
     } else {
-      stacItem = linkOrDate;
+      itemLink = linkOrDate;
+    }
+    let stacItemUrl = "";
+    if (itemLink?.href.startsWith("blob:")) {
+      stacItemUrl = itemLink.href;
+    } else {
+      stacItemUrl = itemLink
+        ? toAbsolute(itemLink.href, this.#collectionUrl)
+        : this.#collectionUrl;
     }
-
-    const stacItemUrl = stacItem
-      ? toAbsolute(stacItem.href, this.#collectionUrl)
-      : this.#collectionUrl;
 
     stac = await axios.get(stacItemUrl).then((resp) => resp.data);
 
-    if (!stacItem) {
+    if (!itemLink) {
       // no specific item was requested; render last item
       this.#collectionStac = new Collection(stac);
       this.selectedItem = this.getItem();
@@ -105,7 +110,12 @@ export class EodashCollection {
       const title =
         this.#collectionStac?.title || this.#collectionStac?.id || "";
       layersJson.unshift(
-        ...(await this.buildJsonArray(item, stacItemUrl, title, isGeoDB)),
+        ...(await this.buildJsonArray(
+          item,
+          stacItemUrl,
+          title,
+          isObservationPoint,
+        )),
       );
       return layersJson;
     }
@@ -115,20 +125,19 @@ export class EodashCollection {
    * @param {import("stac-ts").StacItem} item
    * @param {string} itemUrl
    * @param {string} title
-   * @param {boolean} isGeoDB
+   * @param {boolean} isObservationPoint
    * @param {string} [itemDatetime]
    * @returns {Promise<Record<string,any>[]>} layers
    * */
-  async buildJsonArray(item, itemUrl, title, isGeoDB, itemDatetime) {
+  async buildJsonArray(item, itemUrl, title, isObservationPoint, itemDatetime) {
     log.debug(
       "Building JSON array",
       item,
       itemUrl,
       title,
-      isGeoDB,
+      isObservationPoint,
       itemDatetime,
     );
-    await this.fetchCollection();
     // registering top level indicator projection
     const indicatorProjection =
       item?.["proj:epsg"] || item?.["eodash:proj4_def"];
@@ -140,8 +149,8 @@ export class EodashCollection {
 
     const jsonArray = [];
 
-    if (isGeoDB) {
-      // handled by getGeoDBLayer
+    if (isObservationPoint) {
+      // handled by getObservationPointsLayer
       return [];
     }
 
@@ -158,7 +167,9 @@ export class EodashCollection {
 
     const layerDatetime = extractLayerDatetime(
       this.getItems(),
-      item.properties?.datetime ?? itemDatetime,
+      item.properties?.datetime ??
+        item.properties.start_datetime ??
+        itemDatetime,
     );
 
     const dataAssets = Object.keys(item?.assets ?? {}).reduce((data, ast) => {
@@ -191,6 +202,7 @@ export class EodashCollection {
         ...extraProperties,
         ...(this.color && { color: this.color }),
       };
+
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
@@ -198,6 +210,7 @@ export class EodashCollection {
         layerDatetime,
         extraProperties,
       );
+
       jsonArray.push(
         ...links,
         ...(await createLayersFromAssets(
@@ -247,14 +260,21 @@ export class EodashCollection {
     return this.#collectionStac;
   }
 
+  /**
+   * Returns all item links sorted by datetime ascendingly
+   */
   getItems() {
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    const items = this.#collectionStac?.links.filter((i) => i.rel === "item");
+    if (!datetimeProperty) {
+      return items;
+    }
     return (
-      this.#collectionStac?.links
-        .filter((i) => i.rel === "item")
+      items
         // sort by `datetime`, where oldest is first in array
-        .sort((a, b) =>
-          /** @type {number} */ (a.datetime) <
-          /** @type {number} */ (b.datetime)
+        ?.sort((a, b) =>
+          /** @type {number} */ (a[datetimeProperty]) <
+          /** @type {number} */ (b[datetimeProperty])
             ? -1
             : 1,
         )
@@ -262,22 +282,16 @@ export class EodashCollection {
   }
 
   getDates() {
-    return (
-      this.#collectionStac?.links
-        .filter((i) => i.rel === "item")
-        // sort by `datetime`, where oldest is first in array
-        .sort((a, b) =>
-          /** @type {number} */ (a.datetime) <
-          /** @type {number} */ (b.datetime)
-            ? -1
-            : 1,
-        )
-        .map((i) => new Date(/** @type {number} */ (i.datetime)))
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    if (!datetimeProperty) {
+      return [];
+    }
+    return this.getItems()?.map(
+      (i) => new Date(/** @type {number} */ (i[datetimeProperty])),
     );
   }
 
   async getExtent() {
-    await this.fetchCollection();
     return this.#collectionStac?.extent;
   }
 
@@ -287,14 +301,19 @@ export class EodashCollection {
    *  @param {Date} [date]
    **/
   getItem(date) {
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    if (!datetimeProperty) {
+      // in case no datetime property is found, return the first item
+      return this.getItems()?.[0];
+    }
     return date
       ? this.getItems()?.sort((a, b) => {
           const distanceA = Math.abs(
-            new Date(/** @type {number} */ (a.datetime)).getTime() -
+            new Date(/** @type {number} */ (a[datetimeProperty])).getTime() -
               date.getTime(),
           );
           const distanceB = Math.abs(
-            new Date(/** @type {number} */ (b.datetime)).getTime() -
+            new Date(/** @type {number} */ (b[datetimeProperty])).getTime() -
               date.getTime(),
           );
           return distanceA - distanceB;
@@ -323,12 +342,16 @@ export class EodashCollection {
    */
   async updateLayerJson(datetime, layer, map) {
     await this.fetchCollection();
-
+    const datetimeProperty = getDatetimeProperty(this.#collectionStac?.links);
+    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.datetime === "string" &&
-        new Date(item.datetime).toISOString() === datetime,
+        typeof item[datetimeProperty] === "string" &&
+        new Date(item[datetimeProperty]).toISOString() === datetime,
     );
 
     if (!specifiedLink) {
@@ -348,12 +371,13 @@ export class EodashCollection {
     }
 
     /** @type {string | undefined} */
-    const oldLayerID = findLayer(currentLayers, layer)?.properties.id;
+    const oldLayerID = findLayer(currentLayers, layer)?.properties?.id;
 
     if (!oldLayerID) {
       return;
     }
 
+    //@ts-expect-error TODO
     const updatedLayers = replaceLayer(currentLayers, oldLayerID, newLayers);
 
     return updatedLayers;
@@ -395,16 +419,18 @@ export class EodashCollection {
   }
 
   /**
-   * Returns GeoDB layer from a list of EodashCollections
+   * Returns Observation points layer from a list of EodashCollections
    *
    * @param {EodashCollection[]} eodashCollections
    *
    **/
-  static getGeoDBLayer(eodashCollections) {
+  static getObservationPointsLayer(eodashCollections) {
     const allFeatures = [];
     for (const collection of eodashCollections) {
-      const isGeoDB = collection.#collectionStac?.endpointtype === "GeoDB";
-      if (!isGeoDB) {
+      const isObservationPoint =
+        collection.#collectionStac?.endpointtype === "GeoDB" ||
+        /**@type {boolean} */ (collection.#collectionStac?.locations);
+      if (!isObservationPoint) {
         continue;
       }
       const collectionFeatures = generateFeatures(
@@ -414,6 +440,7 @@ export class EodashCollection {
           geoDBID: collection.#collectionStac?.geoDBID,
           themes: collection.#collectionStac?.themes ?? [],
         },
+        collection.#collectionStac?.locations ? "child" : "item",
       ).features;
 
       if (collectionFeatures.length) {
@@ -475,13 +502,19 @@ export class EodashCollection {
               "circle-radius": 10,
               "circle-fill-color": "#00417077",
               "circle-stroke-color": "#004170",
-              "fill-color": "#0417077",
+              "fill-color": "#00417077",
               "stroke-color": "#004170",
             },
           },
         ];
       })(),
-      interactions: [],
+      interactions: (() => {
+        const oldLayer = findLayer([...getLayers()], "geodb-collection");
+        if (!oldLayer || !oldLayer.interactions?.length) {
+          return [];
+        }
+        return [...oldLayer.interactions];
+      })(),
     };
   }
 }