@eodash/eodash 5.7.0 → 5.8.0

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: {
@@ -40,8 +52,9 @@ export function renderItemsFeatures(features) {
           JSON.stringify({ type: "FeatureCollection", features }),
         ),
       format: "GeoJSON",
+      projection: "EPSG:4326",
     },
-    style: {
+    style: stacItemsStyle || {
       "fill-color": "transparent",
       "stroke-color": "#003170",
     },
@@ -49,35 +62,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 +111,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,37 +5,49 @@
       :key="mapElement"
       v-bind="config"
       :for="mapElement"
+      .colormapRegistry="colormapRegistry"
+      .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, watch } from "vue";
+import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
-import { getColFromLayer } from "@/eodashSTAC/helpers";
 import {
   eodashCollections,
   eodashCompareCollections,
   layerControlFormValue,
   layerControlFormValueCompare,
 } from "@/utils/states";
+import {
+  getColFromLayer,
+  updateGeoZarrBands,
+  updateLayerUrl,
+} 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")) {
@@ -46,22 +58,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,
   },
 });
 
@@ -70,7 +99,12 @@ const config = {
   style: props.cssVars,
 };
 
-const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+const enableLayoutSwitcher = computed(
+  () => !!props.layoutTarget && !!props.layoutIcon,
+);
+
+const { selectedCompareStac, selectedStac, colormapRegistry } =
+  storeToRefs(useSTAcStore());
 
 const showControls = computed(() => {
   if (props.map === "second") {
@@ -83,23 +117,12 @@ 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);
 
@@ -155,6 +178,9 @@ 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);
+  updateLayerUrl(evt.detail.layer, evt.detail.jsonformValue);
+
   if (props.map === "second") {
     layerControlFormValueCompare.value = evt.detail.jsonformValue;
   } else {

package/widgets/EodashMap/EodashMapBtns.vue

@@ -5,30 +5,28 @@
       class="primary small circle small-elevate"
       @click="onMapZoomIn"
     >
-      <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg>
+      <i class="small">
+        <svg viewBox="0 0 24 24"><path :d="mdiPlus"></path></svg>
       </i>
       <div class="tooltip left">Zoom in</div>
     </button>
-
     <button
       v-if="enableZoom && !isGlobe"
       class="primary small circle small-elevate"
       @click="onMapZoomOut"
     >
-      <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg>
+      <i class="small">
+        <svg viewBox="0 0 24 24"><path :d="mdiMinus"></path></svg>
       </i>
       <div class="tooltip left">Zoom out</div>
     </button>
-
     <button
       v-if="exportMap"
       class="primary small circle small-elevate"
       @click="showMapState = !showMapState"
     >
-      <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiMapPlus" /></svg>
+      <i class="small">
+        <svg viewBox="0 0 24 24"><path :d="mdiMapPlus"></path></svg>
       </i>
       <div class="tooltip left">Extract storytelling configuration</div>
     </button>
@@ -39,8 +37,8 @@
       class="primary small circle small-elevate"
       @click="changeMapProjection(availableMapProjection)"
     >
-      <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg>
+      <i class="small">
+        <svg viewBox="0 0 24 24"><path :d="mdiEarthBox"></path></svg>
       </i>
       <div class="tooltip left">Change map projection</div>
     </button>
@@ -49,23 +47,11 @@
       class="primary small circle small-elevate"
       @click="onCompareClick(compareIndicators)"
     >
-      <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg>
+      <i class="small">
+        <svg viewBox="0 0 24 24"><path :d="compareIcon"></path></svg>
       </i>
       <div class="tooltip left">Compare mode</div>
     </button>
-    <button
-      v-if="backToPOIs && (poi || comparePoi)"
-      class="primary small circle small-elevate"
-      @click="loadPOiIndicator()"
-    >
-      <i class="small"
-        ><svg viewBox="0 0 24 24">
-          <path :d="mdiStarFourPointsCircleOutline" />
-        </svg>
-      </i>
-      <div class="tooltip left">Back to POIs</div>
-    </button>
     <button
       v-if="enableGlobe && !isInCompareMode"
       class="primary small circle small-elevate"
@@ -102,20 +88,36 @@
         @close="showFeedback = false"
       ></eox-feedback>
     </div>
-    <eox-geosearch
+    <button
       v-if="mapEl && !isGlobe && enableSearch"
-      :for="mapEl"
-      :endpoint="opencageUrl"
-      :params="searchParams"
-      class="geosearch-detached"
-      label="Search"
-      small
-      button
-      list-direction="left"
-      results-direction="down"
-      tooltip="Search"
-      tooltip-direction="left"
-    ></eox-geosearch>
+      class="primary small circle small-elevate"
+    >
+      <eox-geosearch
+        :for="mapEl"
+        :endpoint="opencageUrl"
+        :params="searchParams"
+        class="geosearch-detached"
+        label="Search"
+        small
+        button
+        list-direction="left"
+        results-direction="down"
+        tooltip="Search"
+        tooltip-direction="left"
+      ></eox-geosearch>
+    </button>
+    <button
+      v-if="backToPOIs && (poi || comparePoi)"
+      class="primary small circle small-elevate"
+      @click="loadPOiIndicator()"
+    >
+      <i class="small">
+        <svg viewBox="0 0 24 24">
+          <path :d="mdiStarFourPointsCircleOutline"></path>
+        </svg>
+      </i>
+      <div class="tooltip left">Back to POIs</div>
+    </button>
     <PopUp
       v-model="showCompareIndicators"
       :maxWidth="popupWidth"
@@ -126,9 +128,29 @@
       <EodashItemFilter
         v-bind="itemFilterConfig"
         :enableCompare="true"
-        @select="onSelectCompareIndicator"
+        @select="onSelectCompareIndicator(compareIndicators)"
       />
     </PopUp>
+    <v-alert
+      v-if="showMosaicHint"
+      class="mosaic-hint pa-2"
+      color="secondary"
+      type="info"
+      variant="elevated"
+      density="compact"
+      elevation="4"
+    >
+      <template v-if="showItemViewHint">
+        Viewing individual item —
+        <a class="mosaic-hint-link" @click.prevent="returnToOverview.emit()">
+          Back to overview
+        </a>
+      </template>
+      <template v-else-if="showZoomHint">Zoom in to explore the data</template>
+      <template v-else-if="showNoDataHint">
+        No data here - pan or change filters
+      </template>
+    </v-alert>
   </div>
 </template>
 <script setup>
@@ -140,8 +162,10 @@ import {
   comparePoi,
   isGlobe,
   mapEl,
+  mapPosition,
   poi,
 } from "@/store/states";
+import { useMosaicState, normalizeGlobeZoom } from "@/eodashSTAC/mosaic";
 import {
   mdiCompare,
   mdiCompareRemove,
@@ -195,11 +219,13 @@ const {
     default: true,
   },
   compareIndicators: {
-    /** @type {import("vue").PropType<boolean | {
-    compareTemplate?:string;
-    fallbackTemplate?:string;
-    itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
-    }> }*/
+    /**
+     * @type {import("vue").PropType<boolean | {
+     * compareTemplate?:string;
+     * fallbackTemplate?:string;
+     * itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+     * }> }
+     */
     type: [Boolean, Object],
     default: true,
   },
@@ -267,6 +293,32 @@ useTransparentPanel(rootRef);
 
 const opencageApiKey = process.env.EODASH_OPENCAGE || "NO_KEY_FOUND";
 const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencageApiKey}`;
+
+const {
+  latestLayer,
+  isItemView,
+  visibilityThreshold,
+  returnToOverview,
+  hasDataInView,
+} = useMosaicState();
+
+const showItemViewHint = computed(
+  () => isItemView.value && !!latestLayer.value,
+);
+
+const showZoomHint = computed(() => {
+  if (!latestLayer.value || isItemView.value) return false;
+  const rawZ = mapPosition.value?.[2] ?? 4;
+  return normalizeGlobeZoom(rawZ) < visibilityThreshold.value;
+});
+
+const showNoDataHint = computed(
+  () => !!latestLayer.value && !isItemView.value && !hasDataInView.value,
+);
+
+const showMosaicHint = computed(
+  () => showItemViewHint.value || showZoomHint.value || showNoDataHint.value,
+);
 </script>
 
 <style scoped>
@@ -296,11 +348,20 @@ const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencage
   pointer-events: auto !important;
 }
 
-/* Container constraints removal */
-eox-geosearch {
-  position: relative !important;
-  width: 40px;
-  overflow: visible !important;
+.mosaic-hint {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 10;
+  opacity: 0.8;
+  border-radius: 8px;
+  pointer-events: auto;
+}
+
+.mosaic-hint-link {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+  pointer-events: auto;
 }
 </style>