@eodash/eodash 5.0.0 → 5.2.0

package/widgets/EodashMap/index.vue

@@ -1,45 +1,88 @@
 <template>
-  <eox-map-compare
-    class="fill-height fill-width overflow-none"
-    .enabled="showCompare"
-  >
-    <eox-map
+  <span>
+    <eox-map-compare
       class="fill-height fill-width overflow-none"
-      slot="first"
-      ref="eoxMap"
-      id="main"
-      .animationOptions="animationOptions"
-      .center="initialCenter"
-      .zoom="initialZoom"
-      .layers="eoxMapLayers"
-      .controls="controls"
+      .enabled="showCompare"
     >
-      <eox-map-tooltip
-        :style="mainTooltipStyles"
-        .propertyTransform="tooltipPropertyTransform('main')"
-      />
-    </eox-map>
-    <eox-map
-      class="fill-height fill-width overflow-none"
-      id="compare"
-      slot="second"
-      ref="compareMap"
-      .layers="eoxMapCompareLayers"
+      <eox-map
+        class="fill-height fill-width overflow-none"
+        slot="first"
+        ref="eoxMap"
+        id="main"
+        .animationOptions="animationOptions"
+        .center="initialCenter"
+        .zoom="initialZoom"
+        .layers="eoxMapLayers"
+        .controls="controls"
+      >
+        <eox-map-tooltip
+          :style="mainTooltipStyles"
+          .propertyTransform="tooltipPropertyTransform('main')"
+        />
+      </eox-map>
+      <eox-map
+        class="fill-height fill-width overflow-none"
+        id="compare"
+        slot="second"
+        ref="compareMap"
+        .layers="eoxMapCompareLayers"
+      >
+        <eox-map-tooltip
+          :style="compareTooltipStyles"
+          .propertyTransform="tooltipPropertyTransform('compare')"
+        />
+      </eox-map>
+    </eox-map-compare>
+    <div
+      v-if="enableCursorCoordinates"
+      id="cursor-coordinates"
+      ref="cursor-coords"
+    />
+    <span v-if="enableScaleLine" id="scale-line" ref="scale-line" />
+    <div
+      class="map-buttons-container"
+      :style="`margin: ${btnsPosition.gap}px 0 ${btnsPosition.gap}px 0`"
     >
-      <eox-map-tooltip
-        :style="compareTooltipStyles"
-        .propertyTransform="tooltipPropertyTransform('compare')"
+      <EodashMapBtns
+        :style="{
+          gridColumn: indicator || compareIndicator ? responsiveX : '12',
+          gridRow: responsiveY,
+        }"
+        :exportMap="(indicator || compareIndicator) ? btnsProps.exportMap : false"
+        :changeProjection="
+          (indicator || compareIndicator) ? btnsProps.changeProjection : false
+        "
+        :compareIndicators="
+          (indicator || compareIndicator) ? btnsProps.compareIndicators : false
+        "
+        :backToPOIs="
+          (indicator || compareIndicator) ? btnsProps.backToPOIs : false
+        "
+        :enableSearch="
+          (indicator || compareIndicator) ? btnsProps.enableSearch : false
+        "
+        :enableZoom="
+          (indicator || compareIndicator) ? btnsProps.enableZoom : false
+        "
       />
-    </eox-map>
-  </eox-map-compare>
+    </div>
+  </span>
 </template>
 <script setup>
 import "@eox/map";
 import "@eox/map/src/plugins/advancedLayersAndSources";
-import { computed, onMounted, ref, toRaw } from "vue";
-import { datetime, mapEl, mapPosition, mapCompareEl } from "@/store/states";
+import { computed, onMounted, ref, toRaw, useTemplateRef } from "vue";
+import {
+  datetime,
+  mapEl,
+  mapPosition,
+  mapCompareEl,
+  indicator,
+  compareIndicator,
+} from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
+import { useDisplay } from "vuetify";
 import {
   eodashCollections,
   eodashCompareCollections,
@@ -53,6 +96,7 @@ import {
 } from "^/EodashMap/methods";
 import { inAndOut } from "ol/easing.js";
 import mustache from "mustache";
+import EodashMapBtns from "^/EodashMap/EodashMapBtns.vue";
 
 const props = defineProps({
   enableCompare: {
@@ -63,32 +107,129 @@ const props = defineProps({
   center: {
     //@ts-expect-error todo
     type: Array,
-    default: () => [15, 48],
+    default: () => [mapPosition.value?.[0] ?? 15, mapPosition.value?.[1] ?? 48],
   },
   zoom: {
     type: Number,
-    default: 4,
+    default: mapPosition.value?.[2] ?? 4,
   },
   zoomToExtent: {
     type: Boolean,
     default: true,
   },
+  enableCursorCoordinates: {
+    type: Boolean,
+    default: true,
+  },
+  enableScaleLine: {
+    type: Boolean,
+    default: true,
+  },
+  btnsPosition: {
+    type: Object,
+    default: () => ({
+      x: "12/9/10",
+      y: 1,
+      gap: 16,
+    }),
+  },
+  btns: {
+    type: Object,
+    default: () => ({
+      enableExportMap: true,
+      enableChangeProjection: true,
+      enableCompareIndicators: true,
+      enableBackToPOIs: true,
+      enableSearch: true,
+      enableZoom: true,
+    }),
+  },
 });
 
+// Responsive positioning logic
+const { width } = useDisplay();
+
+/**
+ * Parse responsive string values (e.g., "1/5/10") into values for different screen sizes
+ * Breakpoints: [0, 960, 1920] based on properties passed to eox-layout in DashboardLayout.vue
+ * @param {string | number} value
+ * @returns {number}
+ */
+const parseResponsiveValue = (value) => {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parts = value.split("/");
+    const currentWidth = width.value;
+
+    if (currentWidth < 960) {
+      return parseInt(parts[0]) || 1;
+    } else if (currentWidth < 1920) {
+      return parseInt(parts[1] || parts[0]) || 1;
+    } else {
+      return parseInt(parts[2] || parts[1] || parts[0]) || 1;
+    }
+  }
+  return 1;
+};
+
+const responsiveX = computed(() => parseResponsiveValue(props.btnsPosition.x));
+const responsiveY = computed(() => parseResponsiveValue(props.btnsPosition.y));
+const btnsProps = computed(() => ({
+  exportMap: props.btns.enableExportMap ?? true,
+  changeProjection: props.btns.enableChangeProjection ?? true,
+  compareIndicators: props.btns.enableCompareIndicators ?? true,
+  backToPOIs: props.btns.enableBackToPOIs ?? true,
+  enableSearch: props.btns.enableSearch ?? true,
+  enableZoom: props.btns.enableZoom ?? true,
+}));
+
+// Prepare containers for scale line and cursor coordinates
+const scaleLineRef = useTemplateRef("scale-line");
+const cursorCoordsRef = useTemplateRef("cursor-coords");
+
 /** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
 const tooltipProperties = ref([]);
 /** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
 const compareTooltipProperties = ref([]);
-/** @type {import("@eox/map").EOxMap["controls"]} */
-const controls = {
-  Attribution: {
-    collapsible: true,
-  },
-};
-const initialCenter = toRaw([
-  mapPosition.value?.[0] ?? props.center?.[0],
-  mapPosition.value?.[1] ?? props.center?.[1],
-]);
+/** @type {import("vue").ComputedRef<{
+  Attribution: { collapsible: boolean };
+  ScaleLine?: { target: HTMLElement };
+  MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
+}>} */
+const controls = computed(() => {
+  /** @type {{
+    Attribution: { collapsible: boolean };
+    ScaleLine?: { target: HTMLElement };
+    MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
+  }} */
+  const controlsObj = {
+    Attribution: {
+      collapsible: true,
+    },
+  };
+
+  if (props.enableScaleLine && scaleLineRef.value) {
+    controlsObj.ScaleLine = {
+      target: scaleLineRef.value,
+    };
+  }
+
+  if (props.enableCursorCoordinates && cursorCoordsRef.value) {
+    controlsObj.MousePosition = {
+      projection: "EPSG:4326",
+      coordinateFormat: (/** @type {[number, number]} */ c) => {
+        return `${c[1].toFixed(3)} °N, ${c[0].toFixed(3)} °E`;
+      },
+      target: cursorCoordsRef.value,
+    };
+  }
+
+  return controlsObj;
+});
+
+const initialCenter = toRaw(props.center);
 const initialZoom = toRaw(mapPosition.value?.[2] ?? props.zoom);
 /** @type {import("vue").Ref<Record<string,any>[]>} */
 const eoxMapLayers = ref([
@@ -142,7 +283,6 @@ onMounted(() => {
   if (props.enableCompare) {
     useInitMap(
       compareMap,
-      //@ts-expect-error todo selectedStac as collection
       selectedCompareStac,
       eodashCompareCollections,
       datetime,
@@ -156,7 +296,6 @@ onMounted(() => {
 
   useInitMap(
     eoxMap,
-    //@ts-expect-error todo selectedStac as collection
     selectedStac,
     eodashCollections,
     datetime,
@@ -215,3 +354,74 @@ const tooltipPropertyTransform = (map) => {
   };
 };
 </script>
+
+<style scoped>
+#cursor-coordinates {
+  position: fixed;
+  left: 24px;
+  bottom: 54px; /* Tighter spacing: watermark at 6px + ~48px */
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 11px;
+  font-family: var(--eox-body-font-family);
+  background: #fffe;
+  border-radius: 4px;
+  border: none;
+  padding: 0px 3px;
+  max-height: 24px;
+}
+
+@media (max-width: 959px) {
+  #cursor-coordinates {
+    display: none; /* Hidden in mobile mode */
+  }
+}
+
+#scale-line {
+  position: fixed;
+  left: 24px;
+  bottom: 28px; /* Tighter spacing: watermark at 6px + ~22px */
+  color: #fff;
+}
+
+@media (max-width: 959px) {
+  #scale-line {
+    bottom: 102px; /* Adjusted for mobile bottom nav - closer to coordinates */
+  }
+}
+
+:deep(.ol-scale-line) {
+  background: #fffe !important;
+  border-radius: 4px !important;
+  border: none !important;
+  padding: 0px 3px 3px 3px !important;
+  font-size: 10px !important;
+  font-family: var(--eox-body-font-family);
+  max-height: 20px;
+}
+:deep(.ol-scale-line-inner) {
+  display: flex;
+  justify-content: center;
+  border: 1px solid rgba(0, 0, 0, 0.5) !important;
+  border-top: none !important;
+  color: #333 !important;
+  font-weight: 500 !important;
+  transform: translateY(1px);
+}
+
+.map-buttons-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(12, 1fr);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.map-buttons-container > * {
+  pointer-events: auto;
+}
+</style>

package/widgets/EodashMap/methods/create-layers-config.js

@@ -53,9 +53,10 @@ export const createLayersConfig = async (
   const indicatorLayers =
     //@ts-expect-error indicator is collection
     await EodashCollection.getIndicatorLayers(selectedIndicator);
-  const geodbLayer = EodashCollection.getGeoDBLayer(eodashCols);
-  if (geodbLayer) {
-    dataLayers.layers.unshift(geodbLayer);
+  const observationPointsLayer =
+    EodashCollection.getObservationPointsLayer(eodashCols);
+  if (observationPointsLayer) {
+    dataLayers.layers.unshift(observationPointsLayer);
   }
   const baseLayers = {
     type: "Group",

package/widgets/EodashMap/methods/index.js

@@ -1,13 +1,12 @@
 import { createLayersConfig } from "./create-layers-config";
 import { setMapProjFromCol } from "@/eodashSTAC/triggers";
-import { nextTick, onMounted, onUnmounted, watch } from "vue";
+import { onMounted, onUnmounted, watch } from "vue";
 import log from "loglevel";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { useEventBus } from "@vueuse/core";
-import { eoxLayersKey } from "@/utils/keys";
-import { posIsSetFromUrl } from "@/utils/states";
-import { useOnLayersUpdate } from "@/composables";
+import { isFirstLoad } from "@/utils/states";
+import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
+import { mapPosition } from "@/store/states";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -35,9 +34,6 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
       !Number.isNaN(z)
     ) {
       mapPosition.value = [lonlat[0], lonlat[1], z];
-      if (posIsSetFromUrl.value) {
-        posIsSetFromUrl.value = false;
-      }
     }
   };
 
@@ -79,7 +75,6 @@ export const useInitMap = (
     eodashCols.values,
     datetime.value,
   );
-  const layersEvent = useEventBus(eoxLayersKey);
 
   const stopIndicatorWatcher = watch(
     [selectedIndicator, datetime],
@@ -132,9 +127,14 @@ export const useInitMap = (
             JSON.parse(JSON.stringify(layersCollection)),
           );
           mapLayers.value = layersCollection;
-          await nextTick(() => {
-            layersEvent.emit("time:updated", mapLayers.value);
-          });
+
+          useEmitLayersUpdate(
+            mapElement.value?.id === "compare"
+              ? "compareTime:updated"
+              : "time:updated",
+            mapElement.value,
+            layersCollection,
+          );
           return;
         }
 
@@ -158,7 +158,8 @@ export const useInitMap = (
         }
         if (
           endInterval !== null &&
-          endInterval.toISOString() !== datetime.value
+          endInterval.toISOString() !== datetime.value &&
+          !isFirstLoad.value
         ) {
           datetime.value = endInterval.toISOString();
         }
@@ -169,7 +170,11 @@ export const useInitMap = (
           if (
             mapElement?.value?.id === "main" &&
             updatedStac.extent?.spatial.bbox &&
-            !posIsSetFromUrl.value
+            !(
+              isFirstLoad.value &&
+              mapPosition.value?.[0] &&
+              mapPosition.value?.[1]
+            )
           ) {
             // Sanitize extent,
             const b = updatedStac.extent?.spatial.bbox[0];
@@ -189,9 +194,6 @@ export const useInitMap = (
             (mapElement.value).zoomExtent = reprojExtent;
           }
         }
-        if (posIsSetFromUrl.value) {
-          posIsSetFromUrl.value = false;
-        }
 
         log.debug(
           "Assigned layers",
@@ -199,11 +201,13 @@ export const useInitMap = (
         );
         mapLayers.value = layersCollection;
         // Emit event to update layers
-        await nextTick(() => {
-          mapElement.value?.updateComplete.then(() => {
-            layersEvent.emit("layers:updated", mapLayers.value);
-          });
-        });
+        await useEmitLayersUpdate(
+          mapElement.value?.id === "compare"
+            ? "compareLayers:updated"
+            : "layers:updated",
+          mapElement.value,
+          mapLayers.value,
+        );
       }
     },
     { immediate: true },
@@ -218,8 +222,14 @@ export const useInitMap = (
  * @param {import("@/eodashSTAC/EodashCollection").EodashCollection[]} eodashCols
  * @param {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>>} tooltipProperties
  */
+
 export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
-  useOnLayersUpdate(async () => {
+  useOnLayersUpdate(async (evt, _payload) => {
+    if (evt.includes("compare")) {
+      // TODO: support compare map tooltips
+      // Do not update tooltip properties on compare map
+      return;
+    }
     const tooltips = [];
     for (const ec of eodashCols) {
       tooltips.push(...(await ec.getToolTipProperties()));

package/widgets/EodashProcess/ProcessList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-table
-      v-if="jobs.length"
+      v-if="currentJobs.length"
       density="compact"
       style="background-color: transparent"
     >
@@ -15,16 +15,23 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="item in jobs" :key="item.date">
+        <tr v-for="item in currentJobs" :key="item.jobID">
           <td>
-            {{ new Date(item.job_start_datetime).toISOString().slice(0, 16) }}
+            <a
+              class="processUrl"
+              target="_blank"
+              :href="getJobStatusUrl(item.jobID, currentIndicator)"
+              >{{
+                new Date(item.job_start_datetime).toISOString().slice(0, 16)
+              }}</a
+            >
           </td>
           <td>{{ item.status }}</td>
           <td style="padding: 0px">
             <v-btn
               :disabled="item.status !== 'successful'"
               color="primary"
-              @click="loadProcess(item, selectedStac)"
+              @click="loadProcess(item, currentStac, mapElement)"
               :icon="[mdiUploadBox]"
               variant="text"
               v-tooltip="'Load results to map'"
@@ -35,7 +42,7 @@
             <v-btn
               :disabled="item.status !== 'successful'"
               color="primary"
-              @click="downloadPreviousResults(item, selectedStac)"
+              @click="downloadPreviousResults(item, currentStac)"
               :icon="[mdiDownloadBox]"
               variant="text"
               v-tooltip="'Download results'"
@@ -45,7 +52,13 @@
           <td style="padding: 0px">
             <v-btn
               color="#ff5252"
-              @click="deleteJob(item)"
+              @click="
+                deleteJob(
+                  toRef(() => currentJobs),
+                  item,
+                  currentIndicator,
+                )
+              "
               :icon="[mdiTrashCanOutline]"
               variant="text"
               v-tooltip="'Remove job'"
@@ -59,24 +72,47 @@
 </template>
 <script setup>
 import { mdiUploadBox, mdiDownloadBox, mdiTrashCanOutline } from "@mdi/js";
-import { onMounted, toRefs } from "vue";
+import { onMounted, toRef, toRefs } from "vue";
 import { useSTAcStore } from "@/store/stac";
-import { indicator } from "@/store/states";
+import { compareIndicator, indicator } from "@/store/states";
 import {
   deleteJob,
   downloadPreviousResults,
-  jobs,
   loadProcess,
   updateJobsStatus,
+  getJobStatusUrl,
 } from "./methods/async";
+import { useOnLayersUpdate } from "@/composables";
+import { compareJobs, jobs } from "./states";
+const { enableCompare, mapElement } = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  mapElement: {
+    /** @type {import("vue").PropType<import("@eox/map").EOxMap | null>} */
+    type: Object,
+    default: () => null,
+  },
+});
+const { selectedStac, selectedCompareStac } = toRefs(useSTAcStore());
+const currentJobs = enableCompare ? compareJobs : jobs;
+const currentIndicator = enableCompare ? compareIndicator : indicator;
+const currentStac = enableCompare ? selectedCompareStac : selectedStac;
 
-const { selectedStac } = toRefs(useSTAcStore());
+onMounted(() => {
+  updateJobsStatus(currentJobs, currentIndicator.value);
+});
 
-onMounted(() => updateJobsStatus(jobs, indicator));
+useOnLayersUpdate(() => updateJobsStatus(currentJobs, currentIndicator.value));
 </script>
 <style lang="scss">
 div.v-table__wrapper {
   overflow: hidden !important;
   height: max-content !important;
 }
+.processUrl {
+  text-decoration: none;
+  color: var(--v-theme-primary);
+}
 </style>