@eodash/eodash 5.7.0 → 5.8.0

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/widgets/ExportState.vue

@@ -34,7 +34,7 @@
           <strong>Map Layers Configuration</strong>
         </p>
         <div class="pa-3 code-block mb-4">
-          {{ removeUnneededProperties(getLayers()) }}
+          {{ removeUnneededProperties(getLayers(), layerControlFormValue) }}
         </div>
 
         <div v-if="chartSpec" class="mb-4">
@@ -63,6 +63,7 @@ import { copyToClipBoard } from "@/utils";
 import { ref } from "vue";
 import { getLayers as getLayerAction } from "@/store/actions";
 import { mapPosition, availableMapProjection, chartSpec } from "@/store/states";
+import { layerControlFormValue } from "@/utils/states";
 import { removeUnneededProperties } from "@/eodashSTAC/helpers";
 import { base64EncodeSpec } from "@eox/chart";
 
@@ -86,7 +87,15 @@ const copyBtns = [
   {
     id: Symbol(),
     copyFn: async () =>
-      await copyToClipBoard(JSON.stringify(props.getLayers()), copySuccess),
+      await copyToClipBoard(
+        JSON.stringify(
+          removeUnneededProperties(
+            props.getLayers(),
+            layerControlFormValue.value,
+          ),
+        ),
+        copySuccess,
+      ),
     copyAs: "layers configuration",
   },
   {
@@ -110,7 +119,7 @@ const getMapStepCode = () => {
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
 `;
-  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers(), layerControlFormValue.value))}' ${endTag}`;
 };
 const getMapEntryCode = () => {
   const [x, y, z] = mapPosition.value;
@@ -118,7 +127,7 @@ const getMapEntryCode = () => {
     "## Map Example <!" +
     '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
   const endTag = `zoom="${z}" center=[${[x, y]}] projection="${availableMapProjection.value}" }-->`;
-  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers(), layerControlFormValue.value))}' ${endTag}`;
 };
 
 const getChartExportCode = () => {

package/dist/client/EodashChart-CLDqE93C.js

@@ -1,144 +0,0 @@
-import { computed, ref, useTemplateRef, onMounted, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createCommentVNode, normalizeStyle, toRaw } from 'vue';
-import '@eox/chart';
-import { o as onChartClick } from './handling-BrcDDlgS.js';
-import { Z as compareChartData, _ as chartData, N as compareChartSpec, M as chartSpec, L as areChartsSeparateLayout } from './helpers-DjZVl_WF.js';
-import { _ as _export_sfc, U as getOverlayParent } from './asWebComponent-BHWpMuE3.js';
-import { mdiArrowCollapse, mdiArrowExpand } from '@mdi/js';
-import { T as Tooltip } from './index-CUjl-ZsI.js';
-
-const _style_0 = ".chart-frame[data-v-c9dee45e]{position:relative}.chart-toggle[data-v-c9dee45e]{position:absolute;top:18px;right:46px;z-index:2;cursor:pointer}";
-
-const _hoisted_1 = { ref: "container" };
-const _hoisted_2 = { class: "chart-frame" };
-const _hoisted_3 = {
-  viewBox: "0 0 20 20",
-  width: "20",
-  height: "20",
-  "aria-hidden": "true"
-};
-const _hoisted_4 = ["d"];
-const _hoisted_5 = [".spec", ".dataValues", ".opt"];
-
-
-const _sfc_main = {
-  __name: 'EodashChart',
-  props: {
-  enableCompare: {
-    type: Boolean,
-    default: false,
-  },
-  vegaEmbedOptions: {
-    type: Object,
-    default() {
-      return { actions: true };
-    },
-  },
-},
-  setup(__props) {
-
-
-
-const usedChartData = computed(() => {
-  return __props.enableCompare ? compareChartData.value : chartData.value;
-});
-
-const usedChartSpec = computed(() => {
-  return __props.enableCompare ? compareChartSpec.value : chartSpec.value;
-});
-
-const chartRenderKey = ref(0);
-const frameHeight = ref(225);
-const containerEl = useTemplateRef("container");
-
-/**
-@type { MutationObserver | null}
-*/
-let observer = null;
-
-onMounted(() => {
-  const el = containerEl.value;
-  if (!el) return;
-
-  const parent = el.parentElement?.parentElement;
-  if (parent) {
-    const parentHeight = parent.getBoundingClientRect().height;
-    frameHeight.value = Math.max(225, Math.floor(parentHeight));
-  }
-
-  // for mobile view, the overlay panel containing chart is initially hidden
-  // we create an observer when display of overlay is not none anymore
-  const overlay = getOverlayParent(el);
-  if (!overlay) return;
-
-  observer = new MutationObserver(async () => {
-    const style = getComputedStyle(overlay);
-    const visible = style.display !== "none";
-    if (visible) {
-      // forcibly rerender chart, otherwise size of canvas is 0
-      chartRenderKey.value = Math.random();
-    }
-  });
-
-  observer.observe(overlay, {
-    attributes: true,
-    attributeFilter: ["style", "class"],
-  });
-});
-
-onBeforeUnmount(() => {
-  observer?.disconnect();
-});
-
-const chartStyles = computed(() => {
-  const styles = {
-    height: `${frameHeight.value}px`,
-  };
-  return styles;
-});
-
-const toggleIcon = computed(() =>
-  areChartsSeparateLayout.value ? mdiArrowCollapse : mdiArrowExpand,
-);
-
-function toggleLayout() {
-  areChartsSeparateLayout.value = !areChartsSeparateLayout.value;
-}
-
-return (_ctx, _cache) => {
-                                                         
-
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, [
-      (usedChartData.value && usedChartSpec.value)
-        ? withDirectives((openBlock(), createElementBlock("button", {
-            key: 0,
-            class: "chart-toggle",
-            onClick: toggleLayout
-          }, [
-            (openBlock(), createElementBlock("svg", _hoisted_3, [
-              createElementVNode("path", { d: toggleIcon.value }, null, 8 /* PROPS */, _hoisted_4)
-            ]))
-          ])), [
-            [Tooltip, unref(areChartsSeparateLayout) ? 'Minimize' : 'Maximize']
-          ])
-        : createCommentVNode("v-if", true),
-      (usedChartData.value && usedChartSpec.value)
-        ? (openBlock(), createElementBlock("eox-chart", {
-            class: "pa-2",
-            ".spec": toRaw(usedChartSpec.value),
-            key: chartRenderKey.value,
-            ".dataValues": toRaw(usedChartData.value),
-            "onClick:item": _cache[0] || (_cache[0] = (...args) => (unref(onChartClick) && unref(onChartClick)(...args))),
-            style: normalizeStyle(chartStyles.value),
-            ".opt": __props.vegaEmbedOptions
-          }, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_5))
-        : createCommentVNode("v-if", true)
-    ])
-  ], 512 /* NEED_PATCH */))
-}
-}
-
-};
-const EodashChart = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-c9dee45e"]]);
-
-export { EodashChart as default };

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 };