@eodash/eodash 5.7.0 → 5.8.0

package/widgets/EodashMap/methods/index.js

@@ -6,9 +6,12 @@ import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
 import { isFirstLoad } from "@/utils/states";
 import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
-import { mapPosition } from "@/store/states";
+export { useEmitLayersUpdate, useOnLayersUpdate };
+import { isGlobe, mapPosition } from "@/store/states";
 import { sanitizeBbox } from "@/eodashSTAC/helpers";
 import { transformExtent } from "@eox/map";
+
+export { useMapLoading } from "./use-map-loading";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -39,14 +42,52 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
     }
   };
 
+  const handleGlobeMoveEnd = () => {
+    const camera = mapElement.value?.globe?.planet?.camera;
+    const lonLat = camera?.getLonLat();
+    if (!lonLat) return;
+    const { lon, lat, height } = lonLat;
+    if (![lon, lat, height].some(Number.isNaN)) {
+      mapPosition.value = [lon, lat, height];
+    }
+  };
+
+  /** @type {{ events: { off: Function } } | null} */
+  let subscribedCamera = null;
+
+  const subscribeGlobe = (retries = 3) => {
+    if (!isGlobe.value) return; // toggled back out during retry
+    const camera = mapElement.value?.globe?.planet?.camera;
+    if (camera) {
+      if (subscribedCamera === camera) return;
+      camera.events.on("moveend", handleGlobeMoveEnd);
+      subscribedCamera = camera;
+      handleGlobeMoveEnd();
+      return;
+    }
+    if (retries > 0) setTimeout(() => subscribeGlobe(retries - 1), 50);
+  };
+  const unsubscribeGlobe = () => {
+    subscribedCamera?.events.off("moveend", handleGlobeMoveEnd);
+    subscribedCamera = null;
+  };
+
+  const stopGlobeWatch = watch(isGlobe, (globe) =>
+    globe ? subscribeGlobe() : unsubscribeGlobe(),
+  );
+
   onMounted(() => {
-    /** @type {import('ol/Map').default} */
-    (mapElement.value?.map)?.on("moveend", handleMoveEnd);
+    const map = mapElement.value?.map;
+    map?.on("moveend", handleMoveEnd);
+    // Seed mapPosition from the initial view
+    handleMoveEnd(/** @type {any} */ ({ map }));
   });
 
   onUnmounted(() => {
     /** @type {import('ol/Map').default} */
     (mapElement.value?.map)?.un("moveend", handleMoveEnd);
+    unsubscribeGlobe();
+    stopGlobeWatch();
   });
 };
 
@@ -61,6 +102,7 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
  * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
  * @param {boolean} zoomToExtent
  * @param {import("vue").Ref<import("stac-ts").StacItem | import("stac-ts").StacLink | null>} [selectedItem]
+ * @param {Record<string, any>[]} [defaultBaseLayers]
  */
 export const useInitMap = (
   mapElement,
@@ -71,6 +113,7 @@ export const useInitMap = (
   partnerMap,
   zoomToExtent,
   selectedItem,
+  defaultBaseLayers,
 ) => {
   log.debug(
     "InitMap",
@@ -100,12 +143,24 @@ export const useInitMap = (
         );
 
       if (updatedStac) {
-        if (
+        const isSameStac = updatedStac?.id === previousStac?.id;
+        const isSameItem = updatedItem?.id === previousItem?.id;
+
+        // Item deselect: overview render is owned by the item catalog widget.
+        const isItemDeselect =
+          previousItem &&
+          !updatedItem &&
+          isSameStac &&
+          updatedTime === previousTime;
+        if (isItemDeselect) return;
+
+        // Re-fire from our own datetime.value write, skip and clear
+        const isOwnDatetimeUpdate =
           internalDatetime !== null &&
           updatedTime === internalDatetime &&
-          updatedStac?.id === previousStac?.id &&
-          updatedItem?.id === previousItem?.id
-        ) {
+          isSameStac &&
+          isSameItem;
+        if (isOwnDatetimeUpdate) {
           internalDatetime = null;
           return;
         }
@@ -153,7 +208,9 @@ export const useInitMap = (
             updatedStac,
             eodashCols,
             updatedItem ?? updatedTime,
+            defaultBaseLayers,
           );
+
           log.debug(
             "Assigned layers after changing time only",
             JSON.parse(JSON.stringify(layersCollection)),
@@ -175,6 +232,11 @@ export const useInitMap = (
         if (interval && interval.length > 0 && interval[0].length > 1) {
           // @ts-expect-error this is the defined STAC structure
           endInterval = new Date(interval[0][1]);
+          // If end interval is in the future, set to now,
+          // for item fetching based on search endpoint
+          if (endInterval.getTime() > Date.now()) {
+            endInterval = new Date();
+          }
           log.debug(
             "Indicator load: found stac extent, setting time to latest value",
             endInterval,
@@ -200,7 +262,8 @@ export const useInitMap = (
         layersCollection = await createLayersConfig(
           updatedStac,
           eodashCols,
-          resolvedTime,
+          updatedItem ?? resolvedTime,
+          defaultBaseLayers,
         );
 
         if (zoomToExtent) {

package/widgets/EodashMap/methods/use-map-loading.js

@@ -0,0 +1,58 @@
+import { onUnmounted, watch } from "vue";
+import { loading } from "@/store/states";
+
+/**
+ * Tracks map loading state at the source level via `loading.activeLoads`,
+ * the same counter used by the axios plugin. Re-attaches source listeners
+ * whenever eox-map fires `layerschanged`, using `getFlatLayersArray`.
+ *
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} compareMapElement
+ */
+export const useMapLoading = (mapElement, compareMapElement) => {
+  // This instance's outstanding loads, so unmount subtracts only its share.
+  let localLoads = 0;
+  const startHandler = () => {
+    localLoads++;
+    loading.activeLoads++;
+  };
+  const endHandler = () => {
+    localLoads = Math.max(0, localLoads - 1);
+    loading.activeLoads = Math.max(0, loading.activeLoads - 1);
+  };
+
+  /** @param {import("@eox/map").EOxMap | null} newMapEl */
+  const watcherHandler = (newMapEl) => {
+    if (!newMapEl) return;
+
+    const hasStartListener = newMapEl.map
+      .getListeners("loadstart")
+      ?.some((listner) => listner === startHandler);
+    const hasEndListener = newMapEl.map
+      .getListeners("loadend")
+      ?.some((listner) => listner === endHandler);
+
+    if (!hasStartListener) {
+      newMapEl.map.addEventListener("loadstart", startHandler);
+    }
+    if (!hasEndListener) {
+      newMapEl.map.addEventListener("loadend", endHandler);
+    }
+  };
+  const stopMainWatcher = watch(mapElement, watcherHandler, {
+    immediate: true,
+  });
+  const stopCompareWatcher = watch(compareMapElement, watcherHandler, {
+    immediate: true,
+  });
+
+  onUnmounted(() => {
+    mapElement.value?.map.removeEventListener("loadstart", startHandler);
+    mapElement.value?.map.removeEventListener("loadend", endHandler);
+    compareMapElement.value?.map.removeEventListener("loadstart", startHandler);
+    compareMapElement.value?.map.removeEventListener("loadend", endHandler);
+    stopMainWatcher();
+    stopCompareWatcher();
+    loading.activeLoads = Math.max(0, loading.activeLoads - localLoads);
+  });
+};

package/widgets/EodashProcess/index.vue

@@ -1,19 +1,24 @@
 <template>
-  <div ref="container" class="py-1">
-    <ProcessList :map-element="mapElement" :enable-compare="enableCompare" />
-    <eox-jsonform
-      v-if="jsonformSchema"
-      :key="jsonformKey"
-      ref="jsonformEl"
-      .schema="jsonformSchema"
-    ></eox-jsonform>
-    <EodashChart
-      v-if="!areChartsSeparateLayout"
-      :vega-embed-options="vegaEmbedOptions"
-      :enable-compare="enableCompare"
+  <div ref="container" class="eodash-process-container">
+    <div class="eodash-process-content">
+      <ProcessList :map-element="mapElement" :enable-compare="enableCompare" />
+      <eox-jsonform
+        v-if="jsonformSchema"
+        :key="jsonformKey"
+        ref="jsonformEl"
+        .schema="jsonformSchema"
+      ></eox-jsonform>
+      <EodashChart
+        v-if="!areChartsSeparateLayout"
+        :vega-embed-options="vegaEmbedOptions"
+        :enable-compare="enableCompare"
+      >
+      </EodashChart>
+    </div>
+    <div
+      class="eodash-process-actions"
+      v-if="showExecBtn || (processResults.length && isProcessed && !isAsync)"
     >
-    </EodashChart>
-    <div class="text-right">
       <v-btn
         v-if="showExecBtn"
         :loading="loading"
@@ -45,7 +50,7 @@ import "@eox/drawtools";
 import "@eox/jsonform";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, ref, useTemplateRef, watch } from "vue";
 import ProcessList from "./ProcessList.vue";
 import EodashChart from "../EodashChart.vue";
 import { handleProcesses } from "./methods/handling";
@@ -70,6 +75,7 @@ const { enableCompare, vegaEmbedOptions } = defineProps({
     default: false,
   },
   vegaEmbedOptions: {
+    /** @type {import("vue").PropType<import("vega-embed").EmbedOptions>} */
     type: Object,
     default() {
       return { actions: true };
@@ -87,6 +93,90 @@ const jsonformEl =
     useTemplateRef("jsonformEl")
   );
 
+// Inject custom styles into the eox-jsonform shadow DOM to make eox-drawtools inline
+watch(jsonformEl, (el) => {
+  if (el && el.shadowRoot) {
+    const styleId = "eodash-drawtools-inline-style";
+    if (!el.shadowRoot.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        /* Compact standard form elements */
+        .form-control, .form-group {
+          margin-bottom: 8px !important;
+        }
+        .form-control > label, .form-group > label {
+          margin-bottom: 2px !important;
+          font-size: 0.9em;
+        }
+        
+        /* Specific layout for drawtools */
+        .form-control:has(eox-drawtools) {
+          position: relative;
+          padding: 8px 12px !important;
+          border: none !important;
+          background: transparent !important;
+          margin-bottom: 8px !important;
+        }
+        .form-control:has(eox-drawtools) > label {
+          position: absolute;
+          left: 12px;
+          top: 8px;
+          margin: 0 !important;
+          width: calc(100% - 180px); /* Give label maximum available width */
+          line-height: 1.2;
+          display: flex;
+          align-items: flex-start;
+          padding-top: 8px;
+          pointer-events: none; /* Let clicks pass through to buttons if they overlap slightly */
+        }
+        .form-control:has(eox-drawtools) > eox-drawtools {
+          display: block;
+          width: 100%;
+        }
+      `;
+      el.shadowRoot.appendChild(style);
+    }
+
+    const injectDrawtoolsStyle = () => {
+      const drawtools = el?.shadowRoot?.querySelector("eox-drawtools");
+      if (drawtools && drawtools.shadowRoot) {
+        if (
+          !drawtools.shadowRoot.getElementById("eodash-drawtools-indent-style")
+        ) {
+          const dtStyle = document.createElement("style");
+          dtStyle.id = "eodash-drawtools-indent-style";
+          dtStyle.textContent = `
+            eox-drawtools-controller {
+              display: flex;
+              justify-content: flex-end; /* Push buttons to the right */
+              min-height: 40px;
+              width: 100%;
+            }
+            eox-drawtools-list {
+              display: block;
+              margin-top: 10px;
+              width: 100%;
+            }
+          `;
+          drawtools.shadowRoot.appendChild(dtStyle);
+          return true;
+        }
+      }
+      return false;
+    };
+
+    if (!injectDrawtoolsStyle()) {
+      const observer = new MutationObserver(() => {
+        if (injectDrawtoolsStyle()) {
+          observer.disconnect();
+        }
+      });
+      observer.observe(el.shadowRoot, { childList: true, subtree: true });
+    }
+  }
+});
+
 const isAsync = computed(
   () =>
     selectedStac.value?.links.filter((l) => l.endpoint === "eoxhub_workspaces")
@@ -188,7 +278,37 @@ useAutoExec(autoExec, jsonformEl, jsonformSchema, startProcess);
 </script>
 <style>
 eox-jsonform {
-  padding: 0.7em;
+  padding: 0 12px;
   min-height: 0px;
+  flex-shrink: 0;
+}
+
+/* Force the specific panel wrapping this component to utilize 100% height */
+.bg-surface:has(.eodash-process-container) {
+  height: calc(100% - 30px);
+  overflow: hidden;
+}
+
+/* Make sure this container takes up full height and acts as a flex column */
+.eodash-process-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.eodash-process-content {
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.eodash-process-actions {
+  text-align: right;
+  padding: 4px 12px;
+  flex-shrink: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background: inherit;
 }
 </style>

package/widgets/EodashProcess/methods/composables.js

@@ -59,6 +59,19 @@ export const useInitProcess = ({
       });
 
       if (newJsonForm) {
+        // Layer rebuilds strip drawtools' selection interactions; remount
+        // the form so initSelection re-attaches them.
+        const selectionStripped =
+          Object.values(newJsonForm.properties ?? {}).some(
+            (p) => p?.options?.drawtools?.layerId,
+          ) &&
+          !mapElement.value?.selectInteractions?.[
+            "SelectLayerClickInteraction"
+          ];
+        if (selectionStripped) {
+          jsonformSchema.value = null;
+          await nextTick();
+        }
         jsonformSchema.value = newJsonForm;
       }
     }

package/widgets/EodashProcess/methods/outputs.js

@@ -421,7 +421,6 @@ export async function processVector(links, jsonformValue, layerId) {
       type: "Vector",
       source: {
         type: "Vector",
-        //@ts-expect-error TODO
         url: mustache.render(link.href, {
           ...(jsonformValue ?? {}),
         }),

package/widgets/EodashProcess/methods/utils.js

@@ -89,10 +89,10 @@ export async function createTiffLayerDefinition(
   }
   // We want to make sure the urls are alphabetically sorted
   urls = urls.sort();
-  /** @type {import("@eox/map/src/layers").EOxLayerType<"WebGLTile","GeoTIFF"> | undefined} */
+
   const layerdef =
     urls.length > 0
-      ? {
+      ? /** @type {import("@eox/map/src/layers").EOxLayerType<"WebGLTile","GeoTIFF">} */ ({
           type: "WebGLTile",
           source: {
             type: "GeoTIFF",
@@ -106,7 +106,7 @@ export async function createTiffLayerDefinition(
             layerControlToolsExpand: true,
           },
           ...(style && { style: style }),
-        }
+        })
       : undefined;
 
   // We want to see if the currently selected indicator uses a
@@ -309,31 +309,33 @@ export async function creatAsyncProcessLayerDefinitions(
 
     switch (resultItem.type) {
       case "image/tiff": {
-        layers.push({
-          type: "WebGLTile",
-          properties: {
-            id: endpointLink.id + "_process" + resultItem.id + postfixId,
-            title:
-              "Results " +
-              (selectedStac?.id ?? "") +
-              " " +
-              (resultItem.id ?? ""),
-            layerControlToolsExpand: true,
-            ...(layerConfig && { layerConfig }),
-            ...extraProperties,
-          },
-          source: {
-            type: "GeoTIFF",
-            normalize: !style,
-            sources: resultItem.urls.map((url) => ({ url })),
-            //@ts-expect-error TODO
-            ...(selectedStac["eodash:mapProjection"]?.["name"] && {
+        layers.push(
+          /** @type {import("@eox/map/src/layers").EOxLayerType<"WebGLTile","GeoTIFF">} */ ({
+            type: "WebGLTile",
+            properties: {
+              id: endpointLink.id + "_process" + resultItem.id + postfixId,
+              title:
+                "Results " +
+                (selectedStac?.id ?? "") +
+                " " +
+                (resultItem.id ?? ""),
+              layerControlToolsExpand: true,
+              ...(layerConfig && { layerConfig }),
+              ...extraProperties,
+            },
+            source: {
+              type: "GeoTIFF",
+              normalize: !style,
+              sources: resultItem.urls.map((url) => ({ url })),
               //@ts-expect-error TODO
-              projection: selectedStac["eodash:mapProjection"]["name"],
-            }),
-          },
-          ...(style && { style }),
-        });
+              ...(selectedStac["eodash:mapProjection"]?.["name"] && {
+                //@ts-expect-error TODO
+                projection: selectedStac["eodash:mapProjection"]["name"],
+              }),
+            },
+            ...(style && { style }),
+          }),
+        );
         break;
       }
       case "application/geo+json": {

package/widgets/EodashProcess/states.js

@@ -4,7 +4,7 @@ import { ref } from "vue";
  * The list of job result from the server
  * {job_start_datetime: string, job_end_datetime: string,status: string}
  *  @type {import("vue").Ref<import("./types").AsyncJob[]>}
- **/
+ */
 export const jobs = ref([]);
 /**
  * The list of jobs results from the server for the compare map

package/widgets/EodashStacInfo.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="flex-grow-1">
     <eox-stacinfo
-      .for="currentUrl"
+      v-if="stacInfoURL"
+      .for="stacInfoURL"
       .allowHtml="allowHtml"
       .body="body"
       .featured="featured"
@@ -9,6 +10,7 @@
       .header="header"
       .tags="tags"
       style="--color-primary-lighter: none"
+      .styleOverride="styleOverride"
     >
     </eox-stacinfo>
   </div>
@@ -17,8 +19,21 @@
 <script setup>
 import "@eox/stacinfo";
 import { currentUrl } from "@/store/states";
+import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
+import { computed, onUnmounted, ref, watch } from "vue";
+import { isSTACItem } from "@/eodashSTAC/helpers";
 
-const { allowHtml, featured, footer, header, body, tags } = defineProps({
+const { level, allowHtml, featured, footer, header, body, tags } = defineProps({
+  level: {
+    type: /** @type {import("vue").PropType<"item" | "collection">} */ (String),
+    default: "collection",
+    validator: (/** @type {string} */ v) => ["collection", "item"].includes(v),
+  },
+  styleOverride: {
+    type: String,
+    default: "",
+  },
   allowHtml: {
     type: Boolean,
     default: true,
@@ -92,4 +107,51 @@ const { allowHtml, featured, footer, header, body, tags } = defineProps({
     default: () => ["sci:citation", "sci:doi", "sci:publication"],
   },
 });
+
+const { selectedItem } = storeToRefs(useSTAcStore());
+
+/** @type {import("vue").Ref<string | null>} */
+const itemUrl = ref(null);
+/**
+ * Active object URL (only set for the blob fallback)
+ * @type {string | null}
+ */
+let activeItemUrl = null;
+
+const revokeItem = () => {
+  if (activeItemUrl) {
+    URL.revokeObjectURL(activeItemUrl);
+    activeItemUrl = null;
+  }
+};
+
+watch(
+  selectedItem,
+  (item) => {
+    if (level !== "item" || !item) return;
+    revokeItem();
+    if (!isSTACItem(item)) {
+      itemUrl.value = item.href;
+      return;
+    }
+    const selfHref = item?.links?.find((l) => l.rel === "self")?.href;
+    if (selfHref) {
+      itemUrl.value = selfHref;
+    } else if (item) {
+      const blob = new Blob([JSON.stringify(item)], {
+        type: "application/json",
+      });
+      activeItemUrl = URL.createObjectURL(blob);
+      itemUrl.value = activeItemUrl;
+    } else {
+      itemUrl.value = null;
+    }
+  },
+  { immediate: true },
+);
+onUnmounted(revokeItem);
+
+const stacInfoURL = computed(() =>
+  level === "item" ? itemUrl.value : currentUrl.value,
+);
 </script>