@eodash/eodash 5.6.1 → 5.7.1

package/widgets/EodashItemCatalog/methods/map.js

@@ -1,17 +1,29 @@
 import { useOnLayersUpdate } from "@/composables";
-import { mapEl } from "@/store/states";
 import { onMounted, onUnmounted } from "vue";
+import { createOnSelectHandler } from "./handlers";
+import { tooltipAdapter } from "@/store/states";
 
 /**
  *
  * @param {import("@/types").GeoJsonFeature[]} features
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {string[] | undefined} hoverProperties
+ * @param {object} [stacItemsStyle]
+ * @param {object} [stacItemsInteractionStyle]
  */
-export function renderItemsFeatures(features) {
+export function renderItemsFeatures(
+  features,
+  mapElement,
+  hoverProperties,
+  stacItemsStyle,
+  stacItemsInteractionStyle,
+) {
+  const currentMap = mapElement.value;
   let analysisLayers =
     /** @type {import("@eox/map/src/layers").EOxLayerTypeGroup} */ (
-      mapEl.value?.layers?.find((l) => l.properties?.id === "AnalysisGroup")
+      currentMap?.layers?.find((l) => l.properties?.id === "AnalysisGroup")
     );
-  if (!mapEl.value || !features) {
+  if (!currentMap || !features) {
     return;
   }
   if (!analysisLayers) {
@@ -23,9 +35,9 @@ export function renderItemsFeatures(features) {
       },
       layers: [],
     };
-    mapEl.value.layers = [...mapEl.value.layers, analysisLayers];
+    currentMap.layers = [...currentMap.layers, analysisLayers];
   }
-
+  /** @type {import("@eox/map/src/layers").EOxLayerType<"Vector","Vector">} */
   const stacItemsLayer = {
     type: "Vector",
     properties: {
@@ -34,14 +46,16 @@ export function renderItemsFeatures(features) {
     },
     source: {
       type: "Vector",
+      //@ts-expect-error todo
       url:
         "data:application/geo+json," +
         encodeURIComponent(
           JSON.stringify({ type: "FeatureCollection", features }),
         ),
       format: "GeoJSON",
+      projection: "EPSG:4326",
     },
-    style: {
+    style: stacItemsStyle || {
       "fill-color": "transparent",
       "stroke-color": "#003170",
     },
@@ -49,35 +63,47 @@ export function renderItemsFeatures(features) {
       {
         type: "select",
         options: {
-          id: "stac-items",
+          id: "stac-item-hover",
           condition: "pointermove",
-          style: {
+          tooltip: hoverProperties?.length,
+          style: stacItemsInteractionStyle || {
             "stroke-color": "white",
             "stroke-width": 3,
           },
         },
       },
+      {
+        type: "select",
+        options: {
+          id: "stac-items",
+          condition: "click",
+          tooltip: false,
+          style: stacItemsInteractionStyle || {
+            "stroke-color": "#003047",
+            "stroke-width": 3.2,
+          },
+        },
+      },
     ],
   };
   const exists = analysisLayers.layers.some(
-    (l) => l.properties?.id === "stac-items",
+    (l) => l.properties?.id === stacItemsLayer.properties?.id,
   );
   if (exists) {
-    //@ts-expect-error todo
-    mapEl.value.addOrUpdateLayer(stacItemsLayer);
+    currentMap.addOrUpdateLayer(stacItemsLayer);
     return;
   } else {
-    //@ts-expect-error todo
-    analysisLayers.layers.push(stacItemsLayer);
-    mapEl.value.layers = [...mapEl.value.layers];
+    analysisLayers.layers.unshift(stacItemsLayer);
+    currentMap.layers = [...currentMap.layers];
   }
 }
 
 /**
  * @param {import("vue").Ref<any>} itemFilter
  * @param {boolean} bboxFilter
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
  */
-export const useSearchOnMapMove = (itemFilter, bboxFilter) => {
+export const useSearchOnMapMove = (itemFilter, bboxFilter, mapElement) => {
   if (!bboxFilter) {
     return;
   }
@@ -86,58 +112,146 @@ export const useSearchOnMapMove = (itemFilter, bboxFilter) => {
   const handler = () => {
     clearTimeout(timeout);
     timeout = setTimeout(() => {
+      if (mapElement.value?.projection == "globe") {
+        return;
+      }
       itemFilter.value?.search();
-    }, 800); // 800ms debounce
+    }, 500);
   };
   onMounted(() => {
-    mapEl.value?.map.on("moveend", handler);
+    mapElement.value?.map.on("moveend", handler);
   });
   onUnmounted(() => {
-    mapEl.value?.map.un("moveend", handler);
+    mapElement.value?.map.un("moveend", handler);
   });
 };
 /**
  *
  * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {string[] | undefined} hoverProperties
+ * @param {object} [stacItemsStyle]
+ * @param {object} [stacItemsInteractionStyle]
  */
-export const useRenderItemsFeatures = (currentItems) => {
+export const useRenderItemsFeatures = (
+  currentItems,
+  mapElement,
+  hoverProperties,
+  stacItemsStyle,
+  stacItemsInteractionStyle,
+) => {
   onMounted(() => {
-    renderItemsFeatures(currentItems.value);
+    renderItemsFeatures(
+      currentItems.value,
+      mapElement,
+      hoverProperties,
+      stacItemsStyle,
+      stacItemsInteractionStyle,
+    );
   });
 
   useOnLayersUpdate(() => {
     // consider cases where this is not needed
-    renderItemsFeatures(currentItems.value);
+    renderItemsFeatures(
+      currentItems.value,
+      mapElement,
+      hoverProperties,
+      stacItemsStyle,
+      stacItemsInteractionStyle,
+    );
   });
 };
+/**
+ * Registers a tooltip adapter that displays item properties when hovering over map features.
+ * @param {string[]} [hoverProperties]
+ */
+export function useHoverTooltip(hoverProperties) {
+  /**
+   * @param {*} val
+   */
+  const formatValue = (val) => {
+    if (typeof val === "number") {
+      return val.toFixed(0);
+    }
+
+    if (typeof val === "string") {
+      // Attempt to parse as date if string looks like ISO date
+      if (val.length > 9 && /\d{4}-\d{2}-\d{2}/.test(val)) {
+        const timestamp = Date.parse(val);
+        if (!isNaN(timestamp)) {
+          return new Date(timestamp).toUTCString();
+        }
+      }
+    }
+    return val;
+  };
+  /**
+   * @param {string} key
+   */
+  const formatKey = (key) => {
+    let formattedKey = key;
+    if (key.includes(":")) {
+      formattedKey = key.split(":")[1];
+    }
+    return formattedKey
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+  };
+  onMounted(() => {
+    tooltipAdapter.value = ({ key, value }) => {
+      if (hoverProperties && hoverProperties.includes(key)) {
+        return { key: formatKey(key), value: formatValue(value) };
+      }
+      return undefined;
+    };
+  });
+  onUnmounted(() => {
+    tooltipAdapter.value = null;
+  });
+}
+
 /**
  *
  * @param {import("vue").Ref<any>} itemfilterEl
+ * @param {ReturnType< typeof import("@/store/stac").useSTAcStore>} store
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {boolean} enableCompare
  */
-export function useHighlightOnFeatureHover(itemfilterEl) {
+export function useRenderOnFeatureClick(
+  itemfilterEl,
+  store,
+  mapElement,
+  enableCompare,
+) {
+  const onSelectItem = createOnSelectHandler(store, enableCompare, mapElement);
   /**
    *
    * @param {CustomEvent} evt
    */
   const handler = (evt) => {
+    if (evt.detail.originalEvent.type !== "click") {
+      return;
+    }
     const itemId = evt.detail?.feature?.getId();
     if (!itemId) {
       return;
     }
-    const item = itemfilterEl.value.items?.find(
+    const item = itemfilterEl.value.results?.find(
       //@ts-expect-error todo
-      (r) => r.id === itemId,
+      (r) => r?.id === itemId,
     );
+
     if (item) {
-      itemfilterEl.value.selectedResult = item;
+      onSelectItem(new CustomEvent("select", { detail: item }));
     }
   };
+
   onMounted(() => {
     //@ts-expect-error todo
-    mapEl.value?.addEventListener("select", handler);
+    mapElement.value?.addEventListener("select", handler);
   });
   onUnmounted(() => {
     //@ts-expect-error todo
-    mapEl.value?.removeEventListener("select", handler);
+    mapElement.value?.removeEventListener("select", handler);
   });
 }

package/widgets/EodashLayerControl.vue

@@ -5,26 +5,31 @@
       :key="mapElement"
       v-bind="config"
       :for="mapElement"
+      .showLayerZoomState="true"
       .customEditorInterfaces="bandsEditorInterface"
       @datetime:updated="debouncedHandleDateTime"
       toolsAsList="true"
       ref="eoxLayercontrol"
       @layerConfig:change="onLayerConfigChange"
     >
-      <slot name="layerstitle">
-        <div>
-          <p v-if="title" class="mt-2 mb-2">
-            <strong>{{ title }}</strong>
-          </p>
-        </div>
-      </slot>
+      <span
+        slot="layerstitle"
+        class="d-flex justify-space-between ma-2 pa-2 flex-shrink-0"
+      >
+        <h4 v-if="title">{{ title }}</h4>
+        <EodashLayoutSwitcher
+          v-if="enableLayoutSwitcher"
+          :target="layoutTarget"
+          :icon="layoutIcon"
+        />
+      </span>
     </eox-layercontrol>
   </span>
 </template>
 <script setup>
 import "color-legend-element";
 import "@eox/timecontrol";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
 import { getColFromLayer } from "@/eodashSTAC/helpers";
 import {
@@ -33,9 +38,13 @@ import {
   layerControlFormValue,
   layerControlFormValueCompare,
 } from "@/utils/states";
+import { updateGeoZarrBands } from "@/eodashSTAC/helpers";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 import { bandsEditorInterface } from "@/utils/bands-editor";
+import EodashLayoutSwitcher from "^/EodashLayoutSwitcher.vue";
+import { mdiViewDashboard } from "@mdi/js";
+import { useEmitLayersUpdate } from "@/composables";
 
 if (!customElements.get("eox-layercontrol")) {
   await import("@eox/layercontrol");
@@ -45,22 +54,39 @@ if (!customElements.get("eox-jsonform")) {
 }
 
 const props = defineProps({
+  /** Which map instance this control is bound to. Use `"second"` in a compare-mode layout. */
   map: {
     /** @type {import("vue").PropType<"first" | "second">} */
     //@ts-expect-error todo
     type: String,
     default: "first",
   },
+  /** Tool tabs shown inside `eox-layercontrol`. Remove entries to hide individual tabs. */
   tools: {
-    type: Array,
+    type: /** @type {import("vue").PropType<string[]>} */ (Array),
     default: () => ["datetime", "info", "config", "legend", "opacity"],
   },
+  /** Heading rendered above the layer list. Set to `false` to hide it. */
   title: {
-    type: String || Boolean,
+    type: /** @type {import("vue").PropType<string | false>} */ ([
+      String,
+      Boolean,
+    ]),
     default: "Layers",
   },
+  /** CSS custom-property overrides forwarded to the underlying `eox-layercontrol` element via its `style` attribute. */
   cssVars: {
-    type: Object,
+    type: /** @type {import("vue").PropType<Record<string, string>>} */ (
+      Object
+    ),
+    default: {},
+  },
+  layoutIcon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+  layoutTarget: {
+    type: String,
   },
 });
 
@@ -69,7 +95,12 @@ const config = {
   style: props.cssVars,
 };
 
+const enableLayoutSwitcher = computed(
+  () => !!props.layoutTarget && !!props.layoutIcon,
+);
+
 const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+
 const showControls = computed(() => {
   if (props.map === "second") {
     return mapCompareEl.value !== null && selectedCompareStac.value !== null;
@@ -81,12 +112,23 @@ const eodashCols =
   props.map === "second" ? eodashCompareCollections : eodashCollections;
 const mapElement = props.map === "second" ? mapCompareEl : mapEl;
 
-/** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+/** @type { import("vue").Ref<import("@eox/layercontrol").EOxLayerControl | null>} */
 const eoxLayercontrol = ref(null);
 
+// eox-timecontrol re-fires datetime:updated after layer reassignment;
+// dedupe by (collectionId, datetime)
+const processedDatetimes = new Map();
+watch([selectedStac, selectedCompareStac], () => processedDatetimes.clear());
+
 /** @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt */
 const handleDatetimeUpdate = async (evt) => {
   const { layer, datetime } = evt.detail;
+  const collectionId = layer.get("id")?.split(";:;")[0] ?? layer.get("id");
+  if (processedDatetimes.get(collectionId) === datetime) return;
+  // First event per collection is eox-timecontrol's mount echo.
+  const isFirstEvent = !processedDatetimes.has(collectionId);
+  processedDatetimes.set(collectionId, datetime);
+  if (isFirstEvent) return;
 
   const ec = await getColFromLayer(eodashCols, layer);
 
@@ -97,9 +139,10 @@ const handleDatetimeUpdate = async (evt) => {
     updatedLayers = await ec.updateLayerJson(
       datetime,
       layer.get("id"),
-      props.map,
+      mapElement.value?.layers ?? [],
     );
   }
+  if (!updatedLayers?.length) return;
   /** @type {Record<String,any>[] | undefined} */
   const dataLayers = updatedLayers?.find(
     (l) => l?.properties?.id === "AnalysisGroup",
@@ -111,9 +154,14 @@ const handleDatetimeUpdate = async (evt) => {
       dl.properties.layerControlExpand = true;
       dl.properties.layerControlToolsExpand = true;
     });
-    // assign layers to the map
     /** @type {HTMLElement & Record<string,any>} */
     (mapElement.value).layers = updatedLayers;
+    // Emit after layer assignment so listeners resolve against the new layer.
+    await useEmitLayersUpdate(
+      props.map === "second" ? "compareLayertime:updated" : "layertime:updated",
+      mapElement.value,
+      updatedLayers,
+    );
   }
 };
 
@@ -136,6 +184,8 @@ const debouncedHandleDateTime = (evt) => {
  * @param {Event & {detail:{layer:import("ol/layer").Layer;jsonformValue:Record<string,any>}}} evt
  */
 const onLayerConfigChange = (evt) => {
+  updateGeoZarrBands(evt.detail.layer, evt.detail.jsonformValue);
+
   if (props.map === "second") {
     layerControlFormValueCompare.value = evt.detail.jsonformValue;
   } else {