@eodash/eodash 5.1.0 → 5.3.0

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

@@ -0,0 +1,278 @@
+<template>
+  <div ref="rootRef" class="map-buttons d-flex flex-column align-end">
+    <button
+      v-if="enableZoom"
+      class="primary small circle small-elevate"
+      @click="onMapZoomIn"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg
+      ></i>
+      <div class="tooltip left">Zoom in</div>
+    </button>
+
+    <button
+      v-if="enableZoom"
+      class="primary small circle small-elevate"
+      @click="onMapZoomOut"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg
+      ></i>
+      <div class="tooltip left">Zoom out</div>
+    </button>
+
+    <button
+      v-if="exportMap"
+      class="primary small circle small-elevate"
+      @click="showMapState = !showMapState"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiMapPlus" /></svg
+      ></i>
+      <div class="tooltip left">Extract storytelling configuration</div>
+    </button>
+    <ExportState v-if="exportMap" v-model="showMapState" />
+
+    <button
+      v-if="changeProjection && !!availableMapProjection"
+      class="primary small circle small-elevate"
+      @click="changeMapProjection(availableMapProjection)"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg
+      ></i>
+      <div class="tooltip left">Change map projection</div>
+    </button>
+    <button
+      v-if="compareIndicators"
+      class="primary small circle small-elevate"
+      @click="onCompareClick"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg
+      ></i>
+      <div class="tooltip left">Compare mode</div>
+    </button>
+    <button
+      v-if="backToPOIs && (poi || comparePoi)"
+      class="primary small circle small-elevate"
+      @click="loadPOiIndicator()"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24">
+          <path :d="mdiStarFourPointsCircleOutline" /></svg
+      ></i>
+      <div class="tooltip left">Back to POIs</div>
+    </button>
+    <eox-geosearch
+      v-if="mapEl && enableSearch"
+      :for="mapEl"
+      :endpoint="opencageUrl"
+      class="geosearch-detached"
+      label="Search"
+      small
+      button
+      list-direction="left"
+      results-direction="down"
+      tooltip="Search"
+      tooltip-direction="left"
+    ></eox-geosearch>
+    <PopUp
+      v-model="showCompareIndicators"
+      :maxWidth="popupWidth"
+      :width="popupWidth"
+      :max-height="popupHeight"
+      :height="popupHeight"
+    >
+      <EodashItemFilter
+        v-bind="itemFilterConfig"
+        :enableCompare="true"
+        @select="onSelectCompareIndicator"
+      />
+    </PopUp>
+  </div>
+</template>
+<script setup>
+import { useTransparentPanel } from "@/composables";
+import { changeMapProjection, setActiveTemplate } from "@/store/actions";
+import {
+  activeTemplate,
+  availableMapProjection,
+  comparePoi,
+  mapEl,
+  poi,
+} from "@/store/states";
+import {
+  mdiCompare,
+  mdiCompareRemove,
+  mdiEarthBox,
+  mdiMapPlus,
+  mdiMinus,
+  mdiPlus,
+  mdiStarFourPointsCircleOutline,
+} from "@mdi/js";
+import ExportState from "^/ExportState.vue";
+import { computed, ref, triggerRef } from "vue";
+import PopUp from "^/PopUp.vue";
+import EodashItemFilter from "^/EodashItemFilter.vue";
+import { useDisplay } from "vuetify";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+import { loadPOiIndicator } from "^/EodashProcess/methods/handling";
+import { easeOut } from "ol/easing.js";
+
+import "@eox/geosearch";
+
+const {
+  compareIndicators,
+  changeProjection,
+  exportMap,
+  backToPOIs,
+  enableSearch,
+  enableZoom,
+} = defineProps({
+  exportMap: {
+    type: Boolean,
+    default: true,
+  },
+  changeProjection: {
+    type: Boolean,
+    default: true,
+  },
+  compareIndicators: {
+    /** @type {import("vue").PropType<boolean | {
+    compareTemplate?:string;
+    fallbackTemplate?:string;
+    itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+    }> }*/
+    type: [Boolean, Object],
+    default: true,
+  },
+  backToPOIs: {
+    type: Boolean,
+    default: true,
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true,
+  },
+  enableZoom: {
+    type: Boolean,
+    default: true,
+  },
+});
+const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
+const { resetSelectedCompareSTAC } = useSTAcStore();
+const { smAndDown } = useDisplay();
+const popupWidth = computed(() => (smAndDown.value ? "80%" : "70%"));
+const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
+
+const showMapState = ref(false);
+const showCompareIndicators = ref(false);
+const compareIcon = computed(() =>
+  activeTemplate.value ===
+  ((typeof compareIndicators === "object" &&
+    compareIndicators?.compareTemplate) ||
+    "compare")
+    ? 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 =
+    activeTemplate.value !==
+    ((typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+      "compare");
+
+  const fallbackTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.fallbackTemplate) ||
+    "expert";
+  selectedCompareStac.value = null;
+  resetSelectedCompareSTAC();
+  setActiveTemplate(fallbackTemplate);
+  triggerRef(selectedStac);
+};
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+
+const onSelectCompareIndicator = () => {
+  const compareTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+    "compare";
+  setActiveTemplate(compareTemplate);
+  showCompareIndicators.value = !showCompareIndicators.value;
+};
+
+useTransparentPanel(rootRef);
+
+const onMapZoomOut = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom - 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+
+const onMapZoomIn = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom + 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+const opencageApiKey = process.env.EODASH_OPENCAGE || "NO_KEY_FOUND";
+const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencageApiKey}`;
+
+/*const menu = document
+  .querySelector("eox-geosearch")
+  .renderRoot.querySelector("menu");*/
+</script>
+
+<style scoped>
+@import url("@eox/ui/style.css");
+
+.map-buttons button {
+  margin-bottom: 5px;
+  background-color: var(--primary);
+}
+
+/* Container constraints removal */
+eox-geosearch {
+  position: relative !important;
+  overflow: visible !important;
+  z-index: 10;
+}
+</style>