eodash · A-Behairi · Jan 22, 2025 · Jan 13, 2025 · Jan 13, 2025 · Jan 13, 2025
diff --git a/core/client/composables/EodashMap.js b/core/client/composables/EodashMap.js
@@ -7,9 +7,10 @@ import { storeToRefs } from "pinia";
 import { useEventBus } from "@vueuse/core";
 import { eoxLayersKey } from "@/utils/keys";
 import { posIsSetFromUrl } from "@/utils/states";
+import { useOnLayersUpdate } from ".";
 /**
  * Holder for previous compare map view as it is overwritten by sync
- * @type { {map:import("ol").View } | null} mapElement
+ * @type { import("ol").View | null} mapElement
  */
 let viewHolder = null;
 
@@ -203,12 +204,13 @@ const createLayersConfig = async (
 /**
  * Initializes the map and updates it based on changes in the selected indicator and datetime,
  *
- * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} mapElement
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {import("vue").Ref<string>} datetime
  * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
- * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} partnerMap
+ * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
+ * @param {boolean} zoomToExtent
  */
 export const useInitMap = (
   mapElement,
@@ -217,6 +219,7 @@ export const useInitMap = (
   datetime,
   mapLayers,
   partnerMap,
+  zoomToExtent,
 ) => {
   log.debug(
     "InitMap",
@@ -260,7 +263,7 @@ export const useInitMap = (
           // Compare map being initialized
           if (selectedCompareStac.value !== null) {
             // save view of compare map
-            viewHolder = mapElement?.value?.map.getView();
+            viewHolder = mapElement?.value?.map.getView() ?? null;
             /** @type {any} */
             (mapElement.value).sync = partnerMap.value;
           }
@@ -309,29 +312,31 @@ export const useInitMap = (
           datetime.value = endInterval.toISOString();
         }
 
-        // Try to move map view to extent only when main
-        // indicator and map changes
-        if (
-          mapElement?.value?.id === "main" &&
-          updatedStac.extent?.spatial.bbox &&
-          !posIsSetFromUrl.value
-        ) {
-          // Sanitize extent,
-          const b = updatedStac.extent?.spatial.bbox[0];
-          const sanitizedExtent = [
-            b?.[0] > -180 ? b?.[0] : -180,
-            b?.[1] > -90 ? b?.[1] : -90,
-            b?.[2] < 180 ? b?.[2] : 180,
-            b?.[3] < 90 ? b?.[3] : 90,
-          ];
-
-          const reprojExtent = mapElement.value?.transformExtent(
-            sanitizedExtent,
-            "EPSG:4326",
-            mapElement.value?.map?.getView().getProjection(),
-          );
-          /** @type {import("@eox/map").EOxMap} */
-          (mapElement.value).zoomExtent = reprojExtent;
+        if (zoomToExtent) {
+          // Try to move map view to extent only when main
+          // indicator and map changes
+          if (
+            mapElement?.value?.id === "main" &&
+            updatedStac.extent?.spatial.bbox &&
+            !posIsSetFromUrl.value
+          ) {
+            // Sanitize extent,
+            const b = updatedStac.extent?.spatial.bbox[0];
+            const sanitizedExtent = [
+              b?.[0] > -180 ? b?.[0] : -180,
+              b?.[1] > -90 ? b?.[1] : -90,
+              b?.[2] < 180 ? b?.[2] : 180,
+              b?.[3] < 90 ? b?.[3] : 90,
+            ];
+
+            const reprojExtent = mapElement.value?.transformExtent(
+              sanitizedExtent,
+              "EPSG:4326",
+              mapElement.value?.map?.getView().getProjection(),
+            );
+            /** @type {import("@eox/map").EOxMap} */
+            (mapElement.value).zoomExtent = reprojExtent;
+          }
         }
         if (posIsSetFromUrl.value) {
           posIsSetFromUrl.value = false;
@@ -341,7 +346,6 @@ export const useInitMap = (
           "Assigned layers",
           JSON.parse(JSON.stringify(layersCollection)),
         );
-
         mapLayers.value = layersCollection;
         // Emit event to update layers
         await nextTick(() => {
@@ -358,3 +362,18 @@ export const useInitMap = (
     stopIndicatorWatcher();
   });
 };
+/**
+ *
+ * @param {EodashCollection[]} eodashCols
+ * @param {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>>} tooltipProperties
+ */
+export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
+  useOnLayersUpdate(async () => {
+    const tooltips = [];
+    for (const ec of eodashCols) {
+      tooltips.push(...(await ec.getToolTipProperties()));
+    }
+    tooltipProperties.value = tooltips;
+    log.debug("Updated tooltip properties", tooltipProperties.value);
+  });
+};
diff --git a/core/client/eodash.js b/core/client/eodash.js
@@ -15,7 +15,8 @@ export const eodash = reactive({
     // "https://eodashcatalog.eox.at/samplecatalog/samples/catalog.json",
     // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
     // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
-    "https://gtif-cerulean.github.io/deside-catalog/deside/catalog.json",
+    // "https://gtif-cerulean.github.io/deside-catalog/deside/catalog.json",
+    "https://gtif-cerulean.github.io/cerulean-catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",

diff --git a/core/client/eodashSTAC/EodashCollection.js b/core/client/eodashSTAC/EodashCollection.js
@@ -31,6 +31,9 @@ export class EodashCollection {
    */
   selectedItem;
 
+  /** @type {Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>} */
+  #tooltipProperties = [];
+
   /** @type {string | undefined} */
   color;
 
@@ -148,6 +151,7 @@ export class EodashCollection {
     // less control.
 
     let { layerConfig, style } = extractLayerConfig(
+      this.#collectionStac?.id ?? "",
       await fetchStyle(item, itemUrl),
     );
 
@@ -297,6 +301,19 @@ export class EodashCollection {
       : this.getItems()?.at(-1);
   }
 
+  async getToolTipProperties() {
+    if (!(this.selectedItem instanceof Item)) {
+      return [];
+    }
+    let styles = await fetchStyle(
+      this.selectedItem,
+      `${this.#collectionUrl}/${this.selectedItem.id}`,
+    );
+    const { tooltip } = styles || { tooltip: [] };
+    this.#tooltipProperties = tooltip ?? [];
+    return this.#tooltipProperties;
+  }
+
   /**
    *
    * @param {string} datetime
@@ -365,17 +382,13 @@ export class EodashCollection {
         indicator?.title || indicator.id,
         //@ts-expect-error indicator instead of item
         indicator,
-        // layerDatetime,
       )),
       ...(await createLayersFromAssets(
         indicator?.id ?? "",
         indicator?.title || indicator.id,
         indicatorAssets,
         //@ts-expect-error indicator instead of item
         indicator,
-        // style,
-        // layerConfig,
-        // layerDatetime,
       )),
     ];
   }

diff --git a/core/client/eodashSTAC/createLayers.js b/core/client/eodashSTAC/createLayers.js
@@ -14,7 +14,7 @@ import log from "loglevel";
  * @param {string} title
  * @param {Record<string,import("stac-ts").StacAsset>} assets
  * @param {import("stac-ts").StacItem } item
- * @param {import("ol/layer/WebGLTile").Style} [style]
+ * @param {import("@/types").EodashStyleJson} [style]
  * @param {Record<string, unknown>} [layerConfig]
  * @param {Record<string, unknown>} [layerDatetime]
  * @param {object | null} [extraProperties]
@@ -75,6 +75,23 @@ export async function createLayersFromAssets(
         },
         ...(!style?.variables && { style }),
       };
+      // add tooltip interaction if style has tooltip
+      if (style?.tooltip) {
+        // @ts-expect-error no type for eox-map layer
+        layer.interactions = [
+          {
+            type: "select",
+            options: {
+              id: (Math.random() * 10000).toFixed() + "_selectInteraction",
+              condition: "pointermove",
+              style: {
+                "stroke-color": "#335267",
+                "stroke-width": 4,
+              },
+            },
+          },
+        ];
+      }
 
       extractRoles(layer.properties, assets[ast]);
 

diff --git a/core/client/eodashSTAC/helpers.js b/core/client/eodashSTAC/helpers.js
@@ -1,6 +1,7 @@
 import { toAbsolute } from "stac-js/src/http.js";
 import axios from "@/plugins/axios";
 import log from "loglevel";
+import { getStyleVariablesState } from "./triggers.js";
 
 /** @param {import("stac-ts").StacLink[]} [links] */
 export function generateFeatures(links) {
@@ -39,13 +40,24 @@ export function generateFeatures(links) {
 /**
  * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
  *
- *  @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
-export function extractLayerConfig(style) {
+ * @param {string} collectionId
+ *  @param { import("@/types").EodashStyleJson} [style]
+ * */
+export function extractLayerConfig(collectionId, style) {
+  if (!style) {
+    return { layerConfig: undefined, style: undefined };
+  }
+  style = { ...style };
+
+  if (Object.keys(style.variables ?? {}).length) {
+    style.variables = getStyleVariablesState(collectionId, style.variables);
+  }
+
   /** @type {Record<string,unknown> | undefined} */
   let layerConfig = undefined;
+
   if (style?.jsonform) {
     layerConfig = { schema: style.jsonform, type: "style" };
-    style = { ...style };
     delete style.jsonform;
     if (style?.legend) {
       layerConfig.legend = style.legend;
@@ -124,7 +136,7 @@ export const fetchStyle = async (item, itemUrl) => {
       url = toAbsolute(styleLink.href, itemUrl);
     }
 
-    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
+    /** @type {import("@/types").EodashStyleJson} */
     const styleJson = await axios.get(url).then((resp) => resp.data);
 
     log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));

diff --git a/core/client/eodashSTAC/triggers.js b/core/client/eodashSTAC/triggers.js
@@ -4,7 +4,7 @@
 import { changeMapProjection, registerProjection } from "@/store/actions";
 import log from "loglevel";
 import { getProjectionCode } from "./helpers";
-import { availableMapProjection } from "@/store/states";
+import { availableMapProjection, mapEl } from "@/store/states";
 
 /**
  * checks if there's a projection on the Collection and
@@ -41,3 +41,54 @@ export const setMapProjFromCol = async (STAcCollection) => {
     await changeMapProjection((availableMapProjection.value = ""));
   }
 };
+/**
+ *
+ * @param {string} collectionId
+ * @param {import("@/types").EodashStyleJson["variables"]} variables
+ */
+export function getStyleVariablesState(collectionId, variables) {
+  const mapElement = /** @type {import("@eox/map").EOxMap} */ (mapEl.value);
+  if (!mapElement || !mapElement.layers.length || !variables) {
+    return variables;
+  }
+
+  const analysisGroup = mapElement.layers.find(
+    (layer) => layer.properties?.id === "AnalysisGroup",
+  );
+  if (!analysisGroup) {
+    return variables;
+  }
+  const matchingLayer = analysisGroup.layers?.find((layer) => {
+    const [collection, ..._other] = layer.properties?.id.split(";:;") ?? [
+      "",
+      "",
+      "",
+    ];
+    return (
+      collection === collectionId &&
+      ["Vector", "WebGLTile"].includes(layer?.type ?? "")
+    );
+  });
+
+  if (!matchingLayer) {
+    return variables;
+  }
+
+  const olLayer = mapElement.getLayerById(matchingLayer.properties?.id ?? "");
+  const oldVariablesState = /** @type {import("ol/layer").WebGLTile} */ (
+    olLayer
+    //@ts-expect-error todo
+  ).getStyle()?.variables;
+  if (!oldVariablesState) {
+    return variables;
+  }
+  const styleVariablesKeys = Object.keys(variables);
+  const matchingKeys =
+    Object.keys(oldVariablesState).every((key) =>
+      styleVariablesKeys.includes(key),
+    ) &&
+    styleVariablesKeys.every((key) =>
+      Object.keys(oldVariablesState).includes(key),
+    );
+  return matchingKeys ? oldVariablesState : variables;
+}
diff --git a/core/client/types.ts b/core/client/types.ts
@@ -318,3 +318,10 @@
 /////
 
 export * from "./main.js";
+
+export type EodashStyleJson = import("ol/style/webgl.js").WebGLStyle & {
+  variables?: Record<string, any>;
+  legend?: Record<string, any>;
+  jsonform?: Record<string, any>;
+  tooltip?: { id: string; title?: string; appendix?: string }[];
+};
diff --git a/core/client/utils/states.js b/core/client/utils/states.js
@@ -22,7 +22,12 @@ export const eodashCompareCollections = shallowReactive([]);
 export const posIsSetFromUrl = ref(false);
 
 /**
- *  color palette for STAC indicators, defaults to Bank-Wong palette
+ * Current value of the layer control JSON form for the latest layer the user interacted with.
+ * @type {import("vue").Ref<Record<string, any> | undefined>}
+ */
+export const layerControlFormValue = ref({});
+/**
+ * STAC indicators color palette, defaults to Bank-Wong palette
  *  @type {string[]} */
 export const collectionsPalette = reactive([
   "#009E73",

diff --git a/core/node/cli/viteConfig.js b/core/node/cli/viteConfig.js
@@ -57,6 +57,7 @@ export const eodashViteConfig = /** @type {import("vite").UserConfigFn} */ (
         extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
       },
       server: {
+        allowedHosts: true,
         warmup: {
           clientFiles: [path.join(appPath, "core/client/**"), entryPath],
         },