@eodash/eodash 5.7.0 → 5.7.1

package/widgets/EodashProcess/index.vue

@@ -70,6 +70,7 @@ const { enableCompare, vegaEmbedOptions } = defineProps({
     default: false,
   },
   vegaEmbedOptions: {
+    /** @type {import("vue").PropType<import("vega-embed").EmbedOptions>} */
     type: Object,
     default() {
       return { actions: true };

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

@@ -6,6 +6,7 @@
     .for="mapEl"
     @select="onSelect"
     titleKey="title"
+    class="pa-4"
     .externalMapRendering="true"
     .animate="animate"
     .initDate="initDate"
@@ -21,9 +22,11 @@
 
       <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>
@@ -41,8 +44,13 @@ 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 } = defineProps({
+const { animate, useMosaic, mosaicIndicators } = defineProps({
   filters: {
     /** @type {import("vue").PropType<import("@eox/itemfilter").EOxItemFilter["filterProperties"]>} */
     type: Array,
@@ -52,6 +60,15 @@ const { animate } = defineProps({
     type: Boolean,
     default: true,
   },
+  useMosaic: {
+    type: Boolean,
+    default: false,
+  },
+  mosaicIndicators: {
+    /** @type {import("vue").PropType<string[]>} */
+    type: Array,
+    default: () => [],
+  },
 });
 
 /** @type {import("vue").ShallowRef<HTMLElement>} */
@@ -65,6 +82,9 @@ const selectedRange = /** @type {import("vue").Ref<[string, string]>} */ (
 );
 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");
@@ -73,6 +93,20 @@ const hasMultipleItems = computed(() => {
   });
 });
 
+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
@@ -85,6 +119,17 @@ const onSelect = (e) => {
   // 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],
   );
@@ -105,7 +150,18 @@ const onSelect = (e) => {
   }
 };
 
-const { selectedStac, stacEndpoint } = storeToRefs(useSTAcStore());
+/**
+ * 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);
+};
 
 /**
  *

package/widgets/EodashTimeSlider/methods/index.js

@@ -4,13 +4,14 @@ import axios from "@/plugins/axios";
 import { mapEl } from "@/store/states";
 import { removeLayers, sanitizeBbox } from "@/eodashSTAC/helpers";
 import { getLayers } from "@/store/actions";
+import { buildCqlFilter } from "@/eodashSTAC/cql";
 
 /**
  * @param {string} stacEndpoint
  * @param {[string, string]} selectedRange
  * @param {import("../types").TimelineExportEventDetail["selectedRangeItems"]} selectedRangeItems
  * @param {import("vue").Ref<import("stac-ts").StacCollection|null>} selectedStac
- * @param {Record<string, import("../types").Filter>} filters
+ * @param {import("@/types").ItemFilterFilters} filters
  */
 export async function createAnimationLayers(
   stacEndpoint,
@@ -65,7 +66,7 @@ export async function createAnimationLayers(
  * @param {{min: string, max: string}} date
  * @param {number[] | undefined} bbox
  * @param {import("vue").Ref<import("stac-ts").StacCollection|null>} selectedStac
- * @param {Record<string, import("../types").Filter>} filters
+ * @param {import("@/types").ItemFilterFilters} filters
  * @return {Promise<Array<{ layers: Record<string, any>[]; date: string }>>}
  */
 async function createAPILayers(
@@ -87,7 +88,7 @@ async function createAPILayers(
   );
   url.searchParams.set("bbox", sanitizeBbox(bbox).join(","));
 
-  const stacFilter = buildStacFilters(filters);
+  const stacFilter = buildCqlFilter(filters);
   if (stacFilter) {
     url.searchParams.set("filter", stacFilter);
   }
@@ -232,48 +233,4 @@ export function restoreLayersVisibility(layers) {
   return layers;
 }
 
-/**
- * Build STAC API filter string from TimeSlider filters
- * @param {Record<string, import("../types").Filter>} filters
- * @returns {string}
- */
-export function buildStacFilters(filters) {
-  if (!filters) return "";
-
-  /** @type {string[]} */
-  const stacFilters = [];
-
-  Object.values(filters).forEach((filter) => {
-    if (!filter || !filter.key) return;
-
-    // strip 'properties.' from key if present
-    const propName = filter.key.startsWith("properties.")
-      ? filter.key.replace("properties.", "")
-      : filter.key;
-
-    if (filter.type === "range" && filter.state) {
-      if (
-        filter.state.min !== undefined &&
-        filter.state.min > (filter.min ?? -Infinity)
-      ) {
-        stacFilters.push(`${propName}>=${filter.state.min}`);
-      }
-      if (
-        filter.state.max !== undefined &&
-        filter.state.max < (filter.max ?? Infinity)
-      ) {
-        stacFilters.push(`${propName}<=${filter.state.max}`);
-      }
-    } else if (filter.type === "multiselect" && filter.stringifiedState) {
-      if (filter.stringifiedState.length > 0) {
-        stacFilters.push(`${propName} IN (${filter.stringifiedState})`);
-      }
-    } else if (filter.type === "select" && filter.stringifiedState) {
-      if (filter.stringifiedState) {
-        stacFilters.push(`${propName}='${filter.stringifiedState}'`);
-      }
-    }
-  });
-
-  return stacFilters.join(" AND ");
-}
+export { useScheduleMosaicUpdate } from "@/eodashSTAC/mosaic";

package/widgets/EodashTimeSlider/types.ts

@@ -1,3 +1,5 @@
+import type { ItemFilterFilters } from "@/types";
+
 export interface TimelineSelectionEventDetail {
   date: [string, string];
   instances: {
@@ -5,7 +7,7 @@ export interface TimelineSelectionEventDetail {
     layer: import("ol/layer/Layer").default;
     source: import("ol/source/Source").default;
   };
-  filters: Record<string, Filter>;
+  filters: ItemFilterFilters;
   selectedItems: {
     [layerId: string]: SelectedItem[];
   };
@@ -31,7 +33,7 @@ export interface TimelineExportEventDetail {
     zoom: number;
     center: [number, number];
   };
-  filters: Record<string, Filter>;
+  filters: ItemFilterFilters;
   instances: {
     layer: import("ol/layer/Layer").default;
     source: import("ol/source/Source").default;
@@ -46,19 +48,7 @@ export interface TimelineExportEventDetail {
   }) => Promise<void>;
 }
 
-export interface Filter {
-  key: string;
-  title: string;
-  type: "range" | "multiselect" | "select";
-  expanded: boolean;
-  min: number;
-  max: number;
-  step: number;
-  // this state is mainly for range filters, select and multiselect to be added.
-  state: {
-    min: number;
-    max: number;
-  };
-  dirty: boolean;
-  stringifiedState: string;
+export interface ItemFilterEventDetail {
+  result: Record<string, any>;
+  filters: ItemFilterFilters;
 }

package/dist/client/EodashStacInfo-BQspAHKH.js

@@ -1,107 +0,0 @@
-import { openBlock, createElementBlock, createElementVNode, unref } from 'vue';
-import '@eox/stacinfo';
-import { F as currentUrl } from './helpers-DjZVl_WF.js';
-
-const _hoisted_1 = { class: "flex-grow-1" };
-const _hoisted_2 = [".for", ".allowHtml", ".body", ".featured", ".footer", ".header", ".tags"];
-
-
-const _sfc_main = {
-  __name: 'EodashStacInfo',
-  props: {
-  allowHtml: {
-    type: Boolean,
-    default: true,
-  },
-
-  header: {
-    /**
-     * @type {import("vue").PropType<
-     *   (string | {
-     *     key: string,
-     *     filter?: (item: any) => boolean
-     *   })[]
-     * >}
-     */
-    type: Array,
-    default: () => ["title"],
-  },
-  tags: {
-    /**
-     * @type {import("vue").PropType<
-     *   (string | {
-     *     key: string,
-     *     filter?: (item: any) => boolean
-     *   })[]
-     * >}
-     */
-    type: Array,
-    default: () => ["themes"],
-  },
-  body: {
-    /**
-     * @type {import("vue").PropType<
-     *   (string | {
-     *     key: string,
-     *     filter?: (item: any) => boolean
-     *   })[]
-     * >}
-     */
-    type: Array,
-    default: () => [
-      "satellite",
-      "sensor",
-      "insituSources",
-      "otherSources",
-      "agency",
-      "extent",
-    ],
-  },
-  featured: {
-    /**
-     * @type {import("vue").PropType<
-     *   (string | {
-     *     key: string,
-     *     filter?: (item: any) => boolean
-     *   })[]
-     * >}
-     */
-    type: Array,
-    default: () => ["description", "providers", "assets", "links"],
-  },
-  footer: {
-    /**
-     * @type {import("vue").PropType<
-     *   (string | {
-     *     key: string,
-     *     filter?: (item: any) => boolean
-     *   })[]
-     * >}
-     */
-    type: Array,
-    default: () => ["sci:citation", "sci:doi", "sci:publication"],
-  },
-},
-  setup(__props) {
-
-
-
-return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("eox-stacinfo", {
-      ".for": unref(currentUrl),
-      ".allowHtml": __props.allowHtml,
-      ".body": __props.body,
-      ".featured": __props.featured,
-      ".footer": __props.footer,
-      ".header": __props.header,
-      ".tags": __props.tags,
-      style: {"--color-primary-lighter":"none"}
-    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2)
-  ]))
-}
-}
-
-};
-
-export { _sfc_main as default };