@eodash/eodash 5.2.0 → 5.3.1

package/widgets/EodashItemCatalog/methods/map.js

@@ -0,0 +1,144 @@
+import { useOnLayersUpdate } from "@/composables";
+import { mapEl } from "@/store/states";
+import { onMounted, onUnmounted } from "vue";
+
+/**
+ *
+ * @param {import("@/types").GeoJsonFeature[]} features
+ */
+export function renderItemsFeatures(features) {
+  let analysisLayers =
+    /** @type {import("@eox/map/src/layers").EOxLayerTypeGroup} */ (
+      mapEl.value?.layers?.find((l) => l.properties?.id === "AnalysisGroup")
+    );
+  if (!mapEl.value || !features) {
+    return;
+  }
+  if (!analysisLayers) {
+    analysisLayers = {
+      type: "Group",
+      properties: {
+        id: "AnalysisGroup",
+        title: "Data Layers",
+      },
+      layers: [],
+    };
+    mapEl.value.layers = [analysisLayers, ...mapEl.value.layers.reverse()];
+  }
+
+  const stacItemsLayer = {
+    type: "Vector",
+    properties: {
+      id: "stac-items",
+      title: "STAC Items",
+    },
+    source: {
+      type: "Vector",
+      url:
+        "data:application/geo+json," +
+        encodeURIComponent(
+          JSON.stringify({ type: "FeatureCollection", features }),
+        ),
+      format: "GeoJSON",
+    },
+    style: {
+      "fill-color": "transparent",
+      "stroke-color": "#003170",
+    },
+    interactions: [
+      {
+        type: "select",
+        options: {
+          id: "stac-items",
+          condition: "pointermove",
+          style: {
+            "stroke-color": "white",
+            "stroke-width": 3,
+          },
+        },
+      },
+    ],
+  };
+  const exists = analysisLayers.layers.some(
+    (l) => l.properties?.id === "stac-items",
+  );
+  if (exists) {
+    //@ts-expect-error todo
+    mapEl.value.addOrUpdateLayer(stacItemsLayer);
+    return;
+  } else {
+    //@ts-expect-error todo
+    analysisLayers.layers.unshift(stacItemsLayer);
+    mapEl.value.layers = [...mapEl.value.layers].reverse();
+  }
+}
+
+/**
+ * @param {import("vue").Ref<any>} itemFilter
+ * @param {boolean} bboxFilter
+ */
+export const useSearchOnMapMove = (itemFilter, bboxFilter) => {
+  if (!bboxFilter) {
+    return;
+  }
+  /** @type {NodeJS.Timeout} */
+  let timeout;
+  const handler = () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      itemFilter.value?.search();
+    }, 800); // 800ms debounce
+  };
+  onMounted(() => {
+    mapEl.value?.map.on("moveend", handler);
+  });
+  onUnmounted(() => {
+    mapEl.value?.map.un("moveend", handler);
+  });
+};
+/**
+ *
+ * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
+ */
+export const useRenderItemsFeatures = (currentItems) => {
+  const renderOnUpdate = () =>
+    useOnLayersUpdate(() => {
+      // consider cases where this is not needed
+      renderItemsFeatures(currentItems.value);
+    });
+  onMounted(() => {
+    renderItemsFeatures(currentItems.value);
+    renderOnUpdate();
+  });
+};
+/**
+ *
+ * @param {import("vue").Ref<any>} itemfilterEl
+ */
+export function useRenderOnFeatureHover(itemfilterEl) {
+  /**
+   *
+   * @param {CustomEvent} evt
+   */
+  const handler = (evt) => {
+    const itemId = evt.detail?.feature?.getId();
+    if (!itemId) {
+      return;
+    }
+    const item = itemfilterEl.value.items?.find(
+      //@ts-expect-error todo
+      (r) => r.id === itemId,
+    );
+    if (item) {
+      itemfilterEl.value.selectedResult = item;
+    }
+  };
+  onMounted(() => {
+    //@ts-expect-error todo
+    mapEl.value?.addEventListener("select", handler);
+  });
+  onUnmounted(() => {
+    //@ts-expect-error todo
+    mapEl.value?.removeEventListener("select", handler);
+  });
+}

package/widgets/EodashItemCatalog/types.ts

@@ -0,0 +1,15 @@
+export interface FilterConfigItem {
+  property: string;
+  type: "range" | "multiselect" | "select";
+  title?: string;
+  min?: number;
+  max?: number;
+  filterKeys?: string[];
+  state?: Record<string, boolean>;
+  placeholder?: string;
+  /** svg icon */
+  icon?: string;
+  unitLabel?: string;
+}
+
+export type FiltersConfig = FilterConfigItem[];

package/widgets/EodashItemFilter.vue

@@ -5,22 +5,26 @@
     ref="eoxItemFilter"
     style="overflow: auto; --background-color: none"
     @select="onSelect"
-    .items="store.stac?.filter((item) => item.rel === 'child')"
+    .items="items"
   >
     <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
-
     <h4 slot="resultstitle" style="margin: 14px 8px">{{ resultsTitle }}</h4>
   </eox-itemfilter>
 </template>
 <script setup>
 import { useSTAcStore } from "@/store/stac";
 import { isFirstLoad } from "@/utils/states";
-import "@eox/itemfilter";
 import { computed, ref } from "vue";
 
+if (!customElements.get("eox-itemfilter")) {
+  await import("@eox/itemfilter");
+}
+
 const store = useSTAcStore();
 const emit = defineEmits(["select"]);
-
+const items = store.isApi
+  ? store.stac
+  : store.stac?.filter((item) => item.rel === "child");
 const props = defineProps({
   enableCompare: {
     type: Boolean,
@@ -87,31 +91,36 @@ const props = defineProps({
   },
 });
 /**
- * @param {import("stac-ts").StacLink} item
+ *
+ * @param  {Function} loader Function to load the item
+ * @param {Function} reset Function to reset the selection
  */
-const selectIndicator = async (item) => {
-  if (item) {
-    if (isFirstLoad.value) {
-      // prevent the map from jumping to the initial position
-      isFirstLoad.value = false;
+const createSelect = (loader, reset) => {
+  /**
+   * @param {import("stac-ts").StacLink | import("stac-ts").StacCollection} item
+   */
+  return async (item) => {
+    if (item) {
+      if (isFirstLoad.value) {
+        // prevent the map from jumping to the initial position
+        isFirstLoad.value = false;
+      }
+      const href = /** @type {string} */ (store.isApi ? item.id : item.href);
+      await loader(href);
+      emit("select", item);
+    } else {
+      reset();
     }
-    await store.loadSelectedSTAC(item.href);
-    emit("select", item);
-  } else {
-    store.selectedStac = null;
-  }
-};
-/**
- * @param {import("stac-ts").StacLink} item
- */
-const selectCompareIndicator = (item) => {
-  if (item) {
-    store.loadSelectedCompareSTAC(item.href);
-    emit("select", item);
-  } else {
-    store.resetSelectedCompareSTAC();
-  }
+  };
 };
+const selectIndicator = createSelect(
+  store.loadSelectedSTAC,
+  () => (store.selectedStac = null),
+);
+const selectCompareIndicator = createSelect(
+  store.loadSelectedCompareSTAC,
+  store.resetSelectedCompareSTAC,
+);
 /** @param {any} evt*/
 const onSelect = async (evt) => {
   const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
@@ -121,7 +130,6 @@ const onSelect = async (evt) => {
     selectIndicator(item);
   }
 };
-
 const config = computed(() => ({
   titleProperty: props.titleProperty,
   enableHighlighting: props.enableHighlighting,
@@ -138,7 +146,6 @@ const config = computed(() => ({
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxItemFilter = ref(null);
 </script>
-
 <style scoped>
 eox-itemfilter {
   --form-flex-direction: row;

package/widgets/EodashLayerControl.vue

@@ -5,9 +5,9 @@
       :key="mapElement"
       v-bind="config"
       :for="mapElement"
+      .customEditorInterfaces="bandsEditorInterface"
       @datetime:updated="debouncedHandleDateTime"
       toolsAsList="true"
-      style="--eox-background-color: transparent"
       ref="eoxLayercontrol"
       @layerConfig:change="onLayerConfigChange"
     >
@@ -22,12 +22,8 @@
   </span>
 </template>
 <script setup>
-import "@eox/layercontrol";
-
-import "@eox/jsonform";
-import "@eox/timecontrol";
 import "color-legend-element";
-
+import "@eox/timecontrol";
 import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
 import { getColFromLayer } from "@/eodashSTAC/helpers";
@@ -39,6 +35,14 @@ import {
 } from "@/utils/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
+import { bandsEditorInterface } from "@/utils/bands-editor";
+
+if (!customElements.get("eox-layercontrol")) {
+  await import("@eox/layercontrol");
+}
+if (!customElements.get("eox-jsonform")) {
+  await import("@eox/jsonform");
+}
 
 const props = defineProps({
   map: {

package/widgets/EodashLayoutSwitcher.vue

@@ -24,7 +24,7 @@ const { mobile } = useDisplay();
 defineProps({
   target: {
     type: String,
-    default: "main",
+    default: "expert",
   },
   // mdi/js icon
   icon: {

package/widgets/EodashMap/EodashMapBtns.vue

@@ -86,15 +86,8 @@
       :height="popupHeight"
     >
       <EodashItemFilter
+        v-bind="itemFilterConfig"
         :enableCompare="true"
-        :enableHighlighting="false"
-        resultType="cards"
-        style="--select-filter-max-items: 8"
-        filters-title="Select an indicator to compare"
-        subTitleProperty="subtitle"
-        imageProperty="thumbnail"
-        aggregateResults="collection_group"
-        results-title=""
         @select="onSelectCompareIndicator"
       />
     </PopUp>
@@ -148,7 +141,11 @@ const {
     default: true,
   },
   compareIndicators: {
-    /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
+    /** @type {import("vue").PropType<boolean | {
+    compareTemplate?:string;
+    fallbackTemplate?:string;
+    itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+    }> }*/
     type: [Boolean, Object],
     default: true,
   },
@@ -181,6 +178,18 @@ const compareIcon = computed(() =>
     ? mdiCompareRemove
     : mdiCompare,
 );
+const itemFilterConfig = {
+  enableHighlighting: false,
+  resultType: "cards",
+  style: "--select-filter-max-items: 8",
+  "filters-title": "Select an indicator to compare",
+  subTitleProperty: "subtitle",
+  imageProperty: "thumbnail",
+  aggregateResults: "collection_group",
+  "results-title": "",
+  ...(typeof compareIndicators === "object" &&
+    compareIndicators.itemFilterConfig),
+};
 
 const onCompareClick = () => {
   showCompareIndicators.value =

package/widgets/EodashMap/index.vue

@@ -43,26 +43,22 @@
       class="map-buttons-container"
       :style="`margin: ${btnsPosition.gap}px 0 ${btnsPosition.gap}px 0`"
     >
+      <!-- prettier-ignore -->
       <EodashMapBtns
         :style="{
-          gridColumn: indicator || compareIndicator ? responsiveX : '12',
+          gridColumn: (indicator || compareIndicator) ? responsiveX : '12',
           gridRow: responsiveY,
         }"
         :exportMap="(indicator || compareIndicator) ? btnsProps.exportMap : false"
-        :changeProjection="
-          (indicator || compareIndicator) ? btnsProps.changeProjection : false
+        :changeProjection="(indicator || compareIndicator) ? btnsProps.changeProjection : false
         "
-        :compareIndicators="
-          (indicator || compareIndicator) ? btnsProps.compareIndicators : false
+        :compareIndicators="(indicator || compareIndicator) ? btnsProps.compareIndicators : false
         "
-        :backToPOIs="
-          (indicator || compareIndicator) ? btnsProps.backToPOIs : false
+        :backToPOIs="(indicator || compareIndicator) ? btnsProps.backToPOIs : false
         "
-        :enableSearch="
-          (indicator || compareIndicator) ? btnsProps.enableSearch : false
+        :enableSearch="(indicator || compareIndicator) ? btnsProps.enableSearch : false
         "
-        :enableZoom="
-          (indicator || compareIndicator) ? btnsProps.enableZoom : false
+        :enableZoom="(indicator || compareIndicator) ? btnsProps.enableZoom : false
         "
       />
     </div>
@@ -134,6 +130,18 @@ const props = defineProps({
     }),
   },
   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,
@@ -272,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;
 
@@ -302,6 +311,7 @@ onMounted(() => {
     eoxMapLayers,
     compareMap,
     props.zoomToExtent,
+    selectedItem,
   );
 });
 

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/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/custom-endpoints/chart/veda-endpoint.js

@@ -2,7 +2,10 @@ 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, generateLinksFromItems } from "@/eodashSTAC/helpers";
+import {
+  getDatetimeProperty,
+  generateLinksFromItems,
+} from "@/eodashSTAC/helpers";
 import { readParquetItems } from "@/eodashSTAC/parquet";
 
 /**
@@ -82,10 +85,13 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
               const parquetAsset = Object.values(collection.assets ?? {}).find(
                 (asset) =>
                   asset.type === "application/vnd.apache.parquet" &&
-                asset.roles?.includes("collection-mirror"),
+                  asset.roles?.includes("collection-mirror"),
               );
               if (parquetAsset) {
-                const parquetAbsoluteUrl = toAbsolute(parquetAsset.href, toAbsolute(link.href, absoluteUrl));
+                const parquetAbsoluteUrl = toAbsolute(
+                  parquetAsset.href,
+                  toAbsolute(link.href, absoluteUrl),
+                );
                 await readParquetItems(parquetAbsoluteUrl).then((items) => {
                   collection.links.push(...generateLinksFromItems(items));
                 });

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 ?? {}),
         }),