@eodash/eodash 5.1.0 → 5.3.0

package/widgets/EodashMap/index.vue

@@ -1,45 +1,84 @@
 <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')"
+      <!-- prettier-ignore -->
+      <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 +92,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: {
@@ -73,18 +113,130 @@ const props = defineProps({
     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 {import("vue").PropType<{
+     * enableExportMap?: boolean;
+     * enableChangeProjection?: boolean;
+     * enableBackToPOIs?: boolean;
+     * enableSearch?: boolean;
+     * enableZoom?: boolean;
+     * enableCompareIndicators?: boolean | {
+     *   compareTemplate?:string;
+     *   fallbackTemplate?:string;
+     *   itemFilterConfig?:InstanceType<import("../EodashItemFilter.vue").default>["$props"]
+     * };
+     * }> }*/
+    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,
-  },
-};
+/** @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>[]>} */
@@ -128,7 +280,8 @@ const showCompare = computed(() =>
 useHandleMapMoveEnd(eoxMap, mapPosition);
 
 onMounted(() => {
-  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+  const { selectedCompareStac, selectedStac, selectedItem } =
+    storeToRefs(useSTAcStore());
   // assign map Element state to eox map
   mapEl.value = eoxMap.value;
 
@@ -158,6 +311,7 @@ onMounted(() => {
     eoxMapLayers,
     compareMap,
     props.zoomToExtent,
+    selectedItem,
   );
 });
 
@@ -210,3 +364,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

@@ -9,19 +9,19 @@ import log from "loglevel";
  *   | null
  * } selectedIndicator
  * @param {EodashCollection[]} eodashCols
- * @param {string} [updatedTime]
+ * @param {string | import("stac-ts").StacItem | null} [timeOrItem] - time as a string, or a stac item
  */
 
 export const createLayersConfig = async (
   selectedIndicator,
   eodashCols,
-  updatedTime,
+  timeOrItem,
 ) => {
   log.debug(
     "Creating layers config",
     selectedIndicator,
     eodashCols,
-    updatedTime,
+    timeOrItem,
   );
   const layersCollection = [];
   const dataLayers = {
@@ -35,11 +35,14 @@ export const createLayersConfig = async (
   };
 
   for (const ec of eodashCols) {
+    /** @type {Record<string,any>[]} */
     let layers;
-    if (updatedTime) {
-      layers = await ec.createLayersJson(new Date(updatedTime));
+    if (timeOrItem) {
+      const dateOrItem =
+        typeof timeOrItem === "string" ? new Date(timeOrItem) : timeOrItem;
+      layers = await ec.createLayersJson(dateOrItem);
     } else {
-      layers = await ec.createLayersJson();
+      layers = await ec.createLayersJson(undefined);
     }
     // Add expand to all analysis layers
     layers.forEach((dl) => {

package/widgets/EodashMap/methods/index.js

@@ -7,6 +7,7 @@ import { storeToRefs } from "pinia";
 import { isFirstLoad } from "@/utils/states";
 import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
 import { mapPosition } from "@/store/states";
+import { sanitizeBbox } from "@/eodashSTAC/helpers";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -58,6 +59,7 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
  * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
  * @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]
  */
 export const useInitMap = (
   mapElement,
@@ -67,6 +69,7 @@ export const useInitMap = (
   mapLayers,
   partnerMap,
   zoomToExtent,
+  selectedItem,
 ) => {
   log.debug(
     "InitMap",
@@ -75,10 +78,22 @@ export const useInitMap = (
     eodashCols.values,
     datetime.value,
   );
-
+  // watch selectedItem if provided
+  const watching = selectedItem
+    ? [selectedIndicator, datetime, selectedItem]
+    : [selectedIndicator, datetime];
   const stopIndicatorWatcher = watch(
-    [selectedIndicator, datetime],
-    async ([updatedStac, updatedTime], [previousStac, previousTime]) => {
+    watching,
+    async (updated, previous) => {
+      const [updatedStac, updatedTime, updatedItem] =
+        /** @type {[import("stac-ts").StacCollection, string, import("stac-ts").StacItem | null]} */ (
+          selectedItem ? updated : [updated[0], updated[1], null]
+        );
+      const [previousStac, previousTime, previousItem] =
+        /** @type {[import("stac-ts").StacCollection, string, import("stac-ts").StacItem]} */ (
+          selectedItem ? previous : [previous[0], previous[1], null]
+        );
+
       if (updatedStac) {
         log.debug(
           "Selected Indicator watch triggered",
@@ -98,7 +113,9 @@ export const useInitMap = (
         let layersCollection = [];
 
         const onlyTimeChanged =
-          updatedStac?.id === previousStac?.id && updatedTime !== previousTime;
+          updatedStac?.id === previousStac?.id &&
+          (updatedTime !== previousTime ||
+            (updatedItem && updatedItem?.id !== previousItem?.id));
 
         const { selectedCompareStac } = storeToRefs(useSTAcStore());
         if (mapElement?.value?.id === "main") {
@@ -115,12 +132,12 @@ export const useInitMap = (
           }
         }
 
-        // We re-crate the configuration if time changed
+        // We re-create the configuration if time changed
         if (onlyTimeChanged) {
           layersCollection = await createLayersConfig(
             updatedStac,
             eodashCols,
-            updatedTime,
+            updatedItem ?? updatedTime,
           );
           log.debug(
             "Assigned layers after changing time only",
@@ -142,7 +159,7 @@ export const useInitMap = (
         layersCollection = await createLayersConfig(
           updatedStac,
           eodashCols,
-          datetime.value,
+          selectedItem ? updatedItem : updatedTime,
         );
 
         // We try to set the current time selection to latest extent date
@@ -157,6 +174,7 @@ export const useInitMap = (
           );
         }
         if (
+          !updatedItem &&
           endInterval !== null &&
           endInterval.toISOString() !== datetime.value &&
           !isFirstLoad.value
@@ -168,6 +186,7 @@ export const useInitMap = (
           // Try to move map view to extent only when main
           // indicator and map changes
           if (
+            !updatedItem &&
             mapElement?.value?.id === "main" &&
             updatedStac.extent?.spatial.bbox &&
             !(
@@ -178,12 +197,7 @@ export const useInitMap = (
           ) {
             // 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 sanitizedExtent = sanitizeBbox([...b]);
 
             const reprojExtent = mapElement.value?.transformExtent(
               sanitizedExtent,

package/widgets/EodashProcess/ProcessList.vue

@@ -17,7 +17,14 @@
       <tbody>
         <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">
@@ -73,6 +80,7 @@ import {
   downloadPreviousResults,
   loadProcess,
   updateJobsStatus,
+  getJobStatusUrl,
 } from "./methods/async";
 import { useOnLayersUpdate } from "@/composables";
 import { compareJobs, jobs } from "./states";
@@ -103,4 +111,8 @@ div.v-table__wrapper {
   overflow: hidden !important;
   height: max-content !important;
 }
+.processUrl {
+  text-decoration: none;
+  color: var(--v-theme-primary);
+}
 </style>

package/widgets/EodashProcess/index.vue

@@ -9,6 +9,7 @@
       .schema="jsonformSchema"
     ></eox-jsonform>
     <eox-chart
+      ref="chartElRef"
       class="chart"
       v-if="isProcessed && chartSpec"
       .spec="toRaw(chartSpec)"
@@ -45,7 +46,7 @@ import "@eox/drawtools";
 import "@eox/jsonform";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { computed, ref, toRaw, useTemplateRef } from "vue";
+import { computed, ref, toRaw, useTemplateRef, watch } from "vue";
 import ProcessList from "./ProcessList.vue";
 import { handleProcesses, onChartClick } from "./methods/handling";
 import { useInitProcess, useAutoExec } from "./methods/composables";
@@ -55,6 +56,8 @@ import {
   indicator,
   mapCompareEl,
   mapEl,
+  chartEl,
+  compareChartEl,
 } from "@/store/states";
 import { download } from "./methods/utils";
 import { compareJobs, jobs } from "./states";
@@ -86,6 +89,10 @@ const jsonformEl =
   /** @type {Readonly<import("vue").ShallowRef<import("@eox/jsonform").EOxJSONForm | null>>} */ (
     useTemplateRef("jsonformEl")
   );
+const chartElRef =
+  /** @type {Readonly<import("vue").ShallowRef<import("@eox/chart").EOxChart | null>>} */ (
+    useTemplateRef("chartElRef")
+  );
 const isAsync = computed(
   () =>
     selectedStac.value?.links.filter((l) => l.endpoint === "eoxhub_workspaces")
@@ -208,6 +215,15 @@ const chartStyles = computed(() => {
   }
   return styles;
 });
+
+// Assign chart element to global state based on compare mode
+watch(chartElRef, (newVal) => {
+  if (enableCompare) {
+    compareChartEl.value = newVal;
+  } else {
+    chartEl.value = newVal;
+  }
+});
 </script>
 <style>
 eox-chart {

package/widgets/EodashProcess/methods/async.js

@@ -150,7 +150,15 @@ export const downloadPreviousResults = async (jobObject, selectedStac) => {
     .get(link.href)
     .then((response) => response.data)
     .then((data) => {
-      results.push(...data.urls);
+      // either urls is an Array
+      if (data.urls) {
+        results.push(...data.urls);
+      } else {
+        // or urls need to be aggregated from mapping objects
+        for (const outputMappingObject of Object.values(data)) {
+          results.push(...outputMappingObject.urls);
+        }
+      }
     });
   results.forEach((result) => {
     if (!result) {
@@ -225,3 +233,16 @@ export async function loadPreviousProcess({
   log.debug("rendered layers after loading previous process:", layers);
   applyProcessLayersToMap(mapElement, layers);
 }
+
+/**
+ * extracts job status url from local storage based on identifier
+ *
+ * @param {string} jobID
+ * @param {string} indicator
+ */
+export const getJobStatusUrl = (jobID, indicator) => {
+  /** @type {string[]} */
+  const jobsUrls = JSON.parse(localStorage.getItem(indicator) || "[]");
+  const jobUrl = jobsUrls.find((url) => url.includes(jobID));
+  return jobUrl;
+};

package/widgets/EodashProcess/methods/custom-endpoints/chart/veda-endpoint.js

@@ -2,7 +2,11 @@ import axios from "@/plugins/axios";
 import { getBboxProperty } from "../../utils";
 import { toAbsolute } from "stac-js/src/http.js";
 import { currentCompareUrl, currentUrl } from "@/store/states";
-import { getDatetimeProperty } from "@/eodashSTAC/helpers";
+import {
+  getDatetimeProperty,
+  generateLinksFromItems,
+} from "@/eodashSTAC/helpers";
+import { readParquetItems } from "@/eodashSTAC/parquet";
 
 /**
  * @param {import("^/EodashProcess/types").CustomEnpointInput} inputs
@@ -75,7 +79,25 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
         collectionLinks.map((link) =>
           axios
             .get(toAbsolute(link.href, absoluteUrl))
-            .then((resp) => resp.data),
+            .then((resp) => resp.data)
+            .then(async (collection) => {
+              // items in geoparquet handling specially to get item links
+              const parquetAsset = Object.values(collection.assets ?? {}).find(
+                (asset) =>
+                  asset.type === "application/vnd.apache.parquet" &&
+                  asset.roles?.includes("collection-mirror"),
+              );
+              if (parquetAsset) {
+                const parquetAbsoluteUrl = toAbsolute(
+                  parquetAsset.href,
+                  toAbsolute(link.href, absoluteUrl),
+                );
+                await readParquetItems(parquetAbsoluteUrl).then((items) => {
+                  collection.links.push(...generateLinksFromItems(items));
+                });
+              }
+              return collection;
+            }),
         ),
       )),
     );
@@ -86,7 +108,7 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
     const datetimeProperty = /** @type string **/ (
       getDatetimeProperty(collection.links)
     );
-    let itemLinks = collection.links.filter((link) => link.rel == "item");
+    const itemLinks = collection.links.filter((link) => link.rel == "item");
     configs.push(
       ...itemLinks.map((link) => ({
         endpoint: /** @type {string} */ (link["cog_href"]),

package/widgets/EodashProcess/methods/handling.js

@@ -181,7 +181,9 @@ export async function handleProcesses({
       for (const layer of newLayers) {
         if (layer.type === "WebGLTile" && layer.source?.type === "GeoTIFF") {
           processResults.value.push(...(layer.source.sources ?? []));
+          //@ts-expect-error TODO
         } else if (layer.source && "url" in layer.source) {
+          //@ts-expect-error TODO
           processResults.value.push(layer.source.url);
         }
       }

package/widgets/EodashProcess/methods/outputs.js

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