@eodash/eodash 5.6.1 → 5.7.1

package/widgets/EodashProcess/methods/handling.js

@@ -35,6 +35,7 @@ import { getLayers, getCompareLayers } from "@/store/actions";
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("@eox/map").EOxMap | null} params.mapElement
  * @param {boolean} params.enableCompare
  */
 export async function initProcess({
@@ -45,6 +46,7 @@ export async function initProcess({
   loading,
   isPolling,
   enableCompare,
+  mapElement,
 }) {
   const isPoiAlive = enableCompare ? !!comparePoi.value : !!poi.value;
   let updatedJsonform = null;
@@ -59,6 +61,27 @@ export async function initProcess({
     jsonformSchema.value = null;
     return;
   }
+
+  if (!updatedJsonform) {
+    resetProcess({
+      loading,
+      isProcessed,
+      jsonformSchema,
+      isPolling,
+      processResults,
+      enableCompare,
+    });
+    return;
+  }
+
+  const newJsonForm = await updateJsonformIdentifier({
+    jsonformSchema: updatedJsonform,
+    newLayers: enableCompare ? getCompareLayers() : getLayers(),
+    enableCompare,
+    mapElement,
+  });
+  if (!newJsonForm) return;
+
   resetProcess({
     loading,
     isProcessed,
@@ -67,99 +90,109 @@ export async function initProcess({
     processResults,
     enableCompare,
   });
+  jsonformSchema.value = newJsonForm;
+}
 
-  if (updatedJsonform) {
-    // make sure correct target layer id is used in jsonform
-    const newJsonForm = await updateJsonformIdentifier({
-      jsonformSchema: updatedJsonform,
-      newLayers: enableCompare ? getCompareLayers() : getLayers(),
-      enableCompare,
-    });
-    // trigger jsonform update in next tick
-    jsonformSchema.value = null;
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    jsonformSchema.value = newJsonForm;
+/**
+ * Recursively search grouped layer tree for a layer whose id starts with the given prefix
+ *
+ * @param {Record<string, any>[]} layers
+ * @param {string} prefix
+ * @returns {string | null}
+ */
+function findLayerIdByPrefix(layers, prefix) {
+  for (const layer of layers) {
+    if (layer.type === "Group" && Array.isArray(layer.layers)) {
+      const found = findLayerIdByPrefix(layer.layers, prefix);
+      if (found) return found;
+    } else if (layer.properties?.id?.startsWith(prefix)) {
+      return layer.properties.id;
+    }
   }
+  return null;
 }
 
 /**
- * Update the jsonform schema to have the correct layer id from the map
+ * Wait until a layer's features are loaded for the drawtools to attach correctly
+ * Resolves immediately if already loaded.
+ *
+ * @param {import("@eox/map").AnyLayerWithSource | null | undefined} layer
+ * @returns {Promise<void>}
+ */
+function waitForLayerRender(layer) {
+  return new Promise((resolve, reject) => {
+    if (!layer || layer.get("type") !== "Vector" || !("getSource" in layer))
+      return resolve();
+    const source = /** @type {import("ol/source/Vector").default} */ (
+      layer.getSource()
+    );
+    if (!source || source.getFeatures().length > 0) return resolve();
+    source.once("featuresloadend", () => resolve());
+    source.once("featuresloaderror", () =>
+      reject(new Error(`Layer ${layer.get("id")} failed to load features`)),
+    );
+  });
+}
+
+/**
+ * Update the jsonform schema to have the correct layer id from the map.
+ * Returns null if any required layerId cannot be resolved (layer not yet in map).
+ * Callers should treat null as "retry when layers:updated fires".
  *
  * @export
- * @async
  * @param {Object} params
- * @param {Record<string,any> | null} params.jsonformSchema params.jsonformSchema
- * @param {Record<string, any>[] | undefined} params.newLayers params.newLayers
- * @param { boolean } params.enableCompare params.enableCompare
- * @returns {Promise<Record<string,any> | null>} updated jsonform schema
+ * @param {Record<string,any> | null} params.jsonformSchema
+ * @param {Record<string, any>[] | undefined} params.newLayers
+ * @param {boolean} params.enableCompare
+ * @param {import("@eox/map").EOxMap | null | undefined} params.mapElement
+ * @returns {Promise<Record<string,any> | null>} updated schema, or null if a layerId could not be resolved
  */
 export async function updateJsonformIdentifier({
   jsonformSchema,
   newLayers,
   enableCompare,
+  mapElement,
 }) {
-  const form = jsonformSchema;
-  if (!form) {
-    return null;
-  }
+  if (!jsonformSchema || !newLayers) return null;
+
+  const form = JSON.parse(JSON.stringify(jsonformSchema));
   const drawToolsProperties = getDrawToolsProperties(form);
-  drawToolsProperties.forEach((drawToolsProperty) => {
-    if (
-      drawToolsProperty &&
-      form?.properties[drawToolsProperty]?.options?.drawtools?.for &&
-      enableCompare
-    ) {
-      form.properties[drawToolsProperty].options.drawtools.for =
-        "eox-map#compare";
+  /** @type {Promise<void>[]} */
+  const renderPromises = [];
+
+  for (const drawToolsProperty of drawToolsProperties) {
+    if (!drawToolsProperty) continue;
+
+    const drawtoolsOptions =
+      form?.properties[drawToolsProperty]?.options?.drawtools;
+    if (!drawtoolsOptions) continue;
+
+    if (drawtoolsOptions.for && enableCompare) {
+      drawtoolsOptions.for = "eox-map#compare";
     }
-    if (
-      drawToolsProperty &&
-      newLayers &&
-      form?.properties[drawToolsProperty]?.options?.drawtools?.layerId
-    ) {
-      // get partial or full id and try to match with correct eoxmap layer
-      // check if newLayers is an array or an object with layers property
-      let layers = newLayers;
-      // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
-      if (newLayers.layers && Array.isArray(newLayers.layers)) {
-        // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
-        layers = newLayers.layers;
-      }
 
-      const layerId =
-        form.properties[drawToolsProperty].options.drawtools.layerId.split(
-          ";:;",
-        )[0];
-      let matchedLayerId = null;
-      // layers are not flat can be grouped, we need to recursively search
-      const traverseLayers = (
-        /** @type {Record<string, any>[] | undefined} */ layersArray,
-      ) => {
-        if (!layersArray) {
-          return;
-        }
-        for (const layer of layersArray) {
-          if (layer.type === "Group" && Array.isArray(layer.layers)) {
-            traverseLayers(layer.layers);
-          } else {
-            if (layer.properties?.id?.startsWith(layerId)) {
-              matchedLayerId = layer.properties.id;
-              break;
-            }
-          }
+    if (drawtoolsOptions.layerId) {
+      let layer = mapElement?.getLayerById(drawtoolsOptions.layerId);
+      if (!layer) {
+        const prefix = drawtoolsOptions.layerId.split(";:;")[0];
+        const resolvedId = findLayerIdByPrefix(newLayers, prefix);
+        if (!resolvedId) {
+          console.warn(
+            `Could not find matching layer for processing form with id: ${prefix}`,
+          );
+          return null;
         }
-      };
-      traverseLayers(layers);
-      if (matchedLayerId) {
-        form.properties[drawToolsProperty].options.drawtools.layerId =
-          matchedLayerId;
-      } else {
-        console.warn(
-          `Could not find matching layer for processing form with id: ${layerId}`,
-        );
+        drawtoolsOptions.layerId = resolvedId;
+        layer = mapElement?.getLayerById(resolvedId);
       }
+      renderPromises.push(waitForLayerRender(layer));
     }
+  }
+
+  await Promise.all(renderPromises).catch((err) => {
+    console.warn("[eodash] layer load failed before jsonform attach:", err);
   });
+
   return form;
 }
 

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>

package/widgets/EodashTimeSlider/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <eox-timecontrol
+    v-if="hasMultipleItems"
+    :key="unref(mapEl)"
+    ref="eoxTimecontrol"
+    .for="mapEl"
+    @select="onSelect"
+    titleKey="title"
+    class="pa-4"
+    .externalMapRendering="true"
+    .animate="animate"
+    .initDate="initDate"
+  >
+    <div class="d-flex g-10 align-center">
+      <eox-timecontrol-date class="flex-grow-1"></eox-timecontrol-date>
+      <eox-timecontrol-picker
+        .range="false"
+        .showDots="true"
+        .showItems="true"
+        .popup="true"
+      ></eox-timecontrol-picker>
+
+      <eox-itemfilter
+        v-if="filters.length"
+        class="mx-4"
+        .inlineMode="true"
+        :showResults="false"
+        .filterProperties="filters"
+        @filter="onFilter"
+      ></eox-itemfilter>
+      <eox-timecontrol-timelapse @export="onExport"></eox-timecontrol-timelapse>
+    </div>
+
+    <eox-timecontrol-timeline class="mt-2"></eox-timecontrol-timeline>
+  </eox-timecontrol>
+</template>
+<script setup>
+import { datetime, mapEl } from "@/store/states";
+import { eodashCollections } from "@/utils/states";
+import "@eox/timecontrol";
+import "@eox/itemfilter";
+
+import { computed, onMounted, ref, unref, useTemplateRef } from "vue";
+import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
+import { createAnimationLayers } from "./methods";
+import {
+  useInitMosaic,
+  useScheduleMosaicUpdate,
+  useMosaicState,
+} from "@/eodashSTAC/mosaic";
+
+const { animate, useMosaic, mosaicIndicators } = defineProps({
+  filters: {
+    /** @type {import("vue").PropType<import("@eox/itemfilter").EOxItemFilter["filterProperties"]>} */
+    type: Array,
+    default: () => [],
+  },
+  animate: {
+    type: Boolean,
+    default: true,
+  },
+  useMosaic: {
+    type: Boolean,
+    default: false,
+  },
+  mosaicIndicators: {
+    /** @type {import("vue").PropType<string[]>} */
+    type: Array,
+    default: () => [],
+  },
+});
+
+/** @type {import("vue").ShallowRef<HTMLElement>} */
+const timesliderEl = useTemplateRef("eoxTimecontrol");
+
+const startDate = new Date(datetime.value);
+const endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000);
+
+const selectedRange = /** @type {import("vue").Ref<[string, string]>} */ (
+  ref([startDate, endDate].map((d) => d.toISOString()))
+);
+const initDate = [startDate.toISOString().split("T")[0]];
+
+/** @type {import("vue").Ref<import("@/types").ItemFilterFilters>} */
+const currentFilters = ref({});
+
+const hasMultipleItems = computed(() => {
+  return eodashCollections.some((ec) => {
+    const itemLinks = ec.collectionStac?.links.filter((l) => l.rel === "item");
+    const itemsLink = ec.collectionStac?.links.some((l) => l.rel === "items");
+    return (itemLinks && itemLinks.length > 1) || itemsLink;
+  });
+});
+
+const store = useSTAcStore();
+const { selectedStac, stacEndpoint } = storeToRefs(store);
+const { mosaicEndpoint } = useMosaicState();
+
+const isMosaicEnabled = computed(() => useMosaic && !!mosaicEndpoint.value);
+
+const scheduleMosaicUpdate = useScheduleMosaicUpdate();
+
+useInitMosaic(
+  useMosaic ? mosaicEndpoint.value : null,
+  selectedRange,
+  mosaicIndicators,
+);
+
+/**
+ * Handles the selection event from the time control component.
+ * It finds the closest item to the "from" selected date
+ * and updates the global datetime state with that item's original date.
+ *
+ * @param {CustomEvent<import("./types").TimelineSelectionEventDetail>} e
+ */
+const onSelect = (e) => {
+  const { selectedItems, date } = e.detail;
+  // Update the selected range with the new dates
+  selectedRange.value = date;
+
+  // if mosaic is enabled, we don't need to find the closest item,
+  // we just update the mosaic layer with the new time range and filters
+  if (isMosaicEnabled.value) {
+    scheduleMosaicUpdate(
+      mosaicEndpoint.value,
+      selectedRange.value,
+      currentFilters.value,
+    );
+    return;
+  }
+
+  const allItems = Object.keys(selectedItems ?? {}).flatMap(
+    (id) => selectedItems[id],
+  );
+  if (!allItems.length) {
+    return;
+  }
+  const [from, _to] = date;
+  const fromDate = new Date(from).getTime();
+
+  const closestItem = allItems.reduce((prev, curr) => {
+    const prevDiff = Math.abs(new Date(prev.originalDate).getTime() - fromDate);
+    const currDiff = Math.abs(new Date(curr.originalDate).getTime() - fromDate);
+    return currDiff < prevDiff ? curr : prev;
+  });
+
+  if (closestItem) {
+    datetime.value = closestItem.originalDate;
+  }
+};
+
+/**
+ * Handles filter changes from eox-itemfilter (e.g. cloud cover slider).
+ * Updates the mosaic layer with the new filter state.
+ *
+ * @param {CustomEvent<import("./types").ItemFilterEventDetail>} e
+ */
+const onFilter = (e) => {
+  if (!isMosaicEnabled.value) return;
+  const { filters } = e.detail;
+  currentFilters.value = filters;
+  scheduleMosaicUpdate(mosaicEndpoint.value, selectedRange.value, filters);
+};
+
+/**
+ *
+ * @param {CustomEvent<import("./types").TimelineExportEventDetail>} evt
+ */
+const onExport = async (evt) => {
+  const { generate, selectedRangeItems, filters } = evt.detail;
+
+  if (!stacEndpoint.value) {
+    return;
+  }
+
+  const mapLayers = await createAnimationLayers(
+    stacEndpoint.value,
+    selectedRange.value,
+    selectedRangeItems,
+    selectedStac,
+    filters,
+  );
+
+  if (!mapLayers?.length) {
+    console.warn("[eodash] No map layers generated for the animation.");
+    return;
+  }
+
+  generate({
+    mapLayers,
+  });
+};
+
+onMounted(() => {
+  const parentDiv = timesliderEl.value?.parentElement;
+  const layoutItem = parentDiv?.parentElement;
+  if (parentDiv && layoutItem && animate) {
+    parentDiv.style.overflow = "visible";
+    layoutItem.style.overflow = "visible";
+  }
+});
+</script>
+<style scoped>
+eox-itemfilter {
+  --inline-container-height: 40px;
+}
+</style>