@eodash/eodash 5.0.0-alpha.2.26 → 5.0.0-alpha.2.27

package/dist/client/EodashItemFilter-16eMMjTV.js

@@ -0,0 +1,151 @@
+import { computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
+import { t as useDisplay, $ as useSTAcStore } from './asWebComponent-BRGyP_j5.js';
+import '@eox/itemfilter';
+
+const _hoisted_1 = [".items"];
+const _hoisted_2 = {
+  slot: "filterstitle",
+  style: {"margin":"14px 8px"}
+};
+const _hoisted_3 = {
+  slot: "resultstitle",
+  style: {"margin":"14px 8px"}
+};
+
+
+const _sfc_main = {
+  __name: 'EodashItemFilter',
+  props: {
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  filtersTitle: {
+    type: String,
+    default: "Indicators",
+  },
+  resultsTitle: {
+    type: String,
+    default: "Results",
+  },
+  titleProperty: {
+    type: String,
+    default: "title",
+  },
+  aggregateResults: {
+    type: String,
+    default: undefined,
+  },
+  imageProperty: {
+    type: String,
+    default: "",
+  },
+  subTitleProperty: {
+    type: String,
+    default: "",
+  },
+  resultType: {
+    type: String,
+    default: "",
+  },
+  cssVars: {
+    type: [String, Object],
+    default: "",
+  },
+  enableHighlighting: { type: Boolean, default: true },
+  expandMultipleFilters: { type: Boolean, default: true },
+  expandMultipleResults: { type: Boolean, default: true },
+  filterProperties: {
+    /** @type {import("vue").PropType<{
+     * keys:string[];
+     * title:string;
+     * type:string;
+     * expanded?:boolean
+     * }[]> }*/
+    type: Array,
+    default: () => [
+      {
+        keys: ["title", "themes", "description"],
+        title: "Search",
+        type: "text",
+      },
+      {
+        key: "themes",
+        title: "Theme Filter",
+        type: "multiselect",
+      },
+    ],
+  },
+},
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+
+const emit = __emit;
+
+const props = __props;
+/**
+ * @param {import("stac-ts").StacLink} item
+ */
+const selectIndicator = async (item) => {
+  if (item) {
+    // Reset compare stac to empty
+    store.resetSelectedCompareSTAC();
+    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);
+  }
+};
+/** @param {any} evt*/
+const onSelect = async (evt) => {
+  const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
+  if (props.enableCompare) {
+    selectCompareIndicator(item);
+  } else {
+    selectIndicator(item);
+  }
+};
+const { smAndDown } = useDisplay();
+const config = computed(() => ({
+  titleProperty: props.titleProperty,
+  enableHighlighting: props.enableHighlighting,
+  expandMultipleFilters: props.expandMultipleFilters,
+  expandMultipleResults: props.expandMultipleResults,
+  subTitleProperty: props.subTitleProperty,
+  resultType: props.resultType,
+  imageProperty: props.imageProperty,
+  aggregateResults: props.aggregateResults,
+  style: props.cssVars,
+  filterProperties: smAndDown.value ? "" : props.filterProperties,
+}));
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxItemFilter = ref(null);
+
+const store = useSTAcStore();
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("eox-itemfilter", mergeProps({ class: "fill-height" }, config.value, {
+    ref_key: "eoxItemFilter",
+    ref: eoxItemFilter,
+    style: {"overflow":"auto","--background-color":"none"},
+    onSelect: onSelect,
+    ".items": unref(store).stac?.filter((item) => item.rel === "child")
+  }), [
+    createElementVNode("h4", _hoisted_2, toDisplayString(__props.filtersTitle), 1 /* TEXT */),
+    createElementVNode("h4", _hoisted_3, toDisplayString(__props.resultsTitle), 1 /* TEXT */)
+  ], 48 /* FULL_PROPS, NEED_HYDRATION */, _hoisted_1))
+}
+}
+
+};
+
+export { _sfc_main as default };

package/dist/client/{EodashLayerControl-mKfwru42.js → EodashLayerControl-De7IlCm_.js}

@@ -1,9 +1,9 @@
-import { computed, ref, openBlock, createElementBlock, unref, createCommentVNode } from 'vue';
+import { computed, ref, openBlock, createElementBlock, mergeProps, unref, createCommentVNode } from 'vue';
 import '@eox/layercontrol';
 import '@eox/jsonform';
 import '@eox/timecontrol';
 import 'color-legend-element';
-import { $ as useSTAcStore, a2 as mapCompareEl, a3 as mapEl, a4 as eodashCompareCollections, a0 as eodashCollections, a5 as getColFromLayer } from './asWebComponent-BsbKnhGV.js';
+import { $ as useSTAcStore, a2 as mapCompareEl, a3 as mapEl, a4 as eodashCompareCollections, a0 as eodashCollections, a5 as getColFromLayer } from './asWebComponent-BRGyP_j5.js';
 import { storeToRefs } from 'pinia';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
@@ -17,20 +17,29 @@ const _sfc_main = {
     type: String,
     default: "first",
   },
+  tools: {
+    type: Array,
+    default: () => ["datetime", "info", "config", "legend", "opacity"],
+  },
+  cssVars: {
+    type: Object,
+  },
 },
   setup(__props) {
 
 const props = __props;
 
+const config = {
+  tools: props.tools,
+  style: props.cssVars,
+};
+
+const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
 const showControls = computed(() => {
-  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
   if (props.map === "second") {
     return mapCompareEl.value !== null && selectedCompareStac.value !== null;
   }
-  if (mapEl.value !== null && selectedStac.value !== null) {
-    return true;
-  }
-  return false;
+  return mapEl.value !== null && selectedStac.value !== null;
 });
 
 const eodashCols =
@@ -92,16 +101,15 @@ const debouncedHandleDateTime = (evt) => {
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("span", _hoisted_1, [
     (showControls.value)
-      ? (openBlock(), createElementBlock("eox-layercontrol", {
-          key: 0,
+      ? (openBlock(), createElementBlock("eox-layercontrol", mergeProps({ key: 0 }, config, {
           for: unref(mapElement),
-          ".tools": ['datetime', 'info', 'config', 'legend', 'opacity'],
           "onDatetime:updated": debouncedHandleDateTime,
           class: "fill-height",
           toolsAsList: "true",
+          style: {"--eox-background-color":"transparent"},
           ref_key: "eoxLayercontrol",
           ref: eoxLayercontrol
-        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2))
+        }), null, 16 /* FULL_PROPS */, _hoisted_2))
       : createCommentVNode("v-if", true)
   ]))
 }

package/dist/client/EodashLayoutSwitcher-C-3-jjn5.js

@@ -0,0 +1,52 @@
+import { ref, openBlock, createElementBlock, createVNode, withCtx, mergeProps } from 'vue';
+import { a1 as makePanelTransparent, y as VIcon, ak as activeTemplate } from './asWebComponent-BRGyP_j5.js';
+import { mdiViewDashboard } from '@mdi/js';
+import { V as VTooltip } from './VTooltip-CDu3bErh.js';
+
+const _sfc_main = {
+  __name: 'EodashLayoutSwitcher',
+  props: {
+  target: {
+    type: String,
+    default: "main",
+  },
+  // mdi/js icon
+  icon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+},
+  setup(__props) {
+
+
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+makePanelTransparent(rootRef);
+
+return (_ctx, _cache) => {
+                                                       
+                                                             
+
+  return (openBlock(), createElementBlock("div", {
+    ref_key: "rootRef",
+    ref: rootRef
+  }, [
+    createVNode(VTooltip, {
+      text: `Switch to ${__props.target} mode`
+    }, {
+      activator: withCtx(({ props }) => [
+        createVNode(VIcon, mergeProps(props, {
+          onClick: _cache[0] || (_cache[0] = $event => (activeTemplate.value = __props.target)),
+          icon: [__props.icon]
+        }), null, 16 /* FULL_PROPS */, ["icon"])
+      ]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["text"])
+  ], 512 /* NEED_PATCH */))
+}
+}
+
+};
+
+export { _sfc_main as default };

package/dist/client/{EodashMap-BpwL82-w.js → EodashMap-CMvbfI6-.js}

@@ -1,9 +1,50 @@
-import { onMounted, onUnmounted, watch, ref, computed, openBlock, createElementBlock, createElementVNode } from 'vue';
+import { onMounted, onUnmounted, watch, nextTick, toRaw, ref, computed, openBlock, createElementBlock, createElementVNode, unref } from 'vue';
 import '@eox/map';
-import '@eox/map/dist/eox-map-advanced-layers-and-sources.js';
-import { $ as useSTAcStore, a6 as setMapProjFromCol, a7 as EodashCollection, a8 as mapPosition, a3 as mapEl, a2 as mapCompareEl, Z as datetime, a4 as eodashCompareCollections, a0 as eodashCollections } from './asWebComponent-BsbKnhGV.js';
+import '@eox/map/src/plugins/advancedLayersAndSources';
+import { a6 as registerProjection, a7 as getProjectionCode, a8 as availableMapProjection, a9 as changeMapProjection, aa as eoxLayersKey, $ as useSTAcStore, ab as posIsSetFromUrl, ac as EodashCollection, ad as mapPosition, a3 as mapEl, a2 as mapCompareEl, Z as datetime, a4 as eodashCompareCollections, a0 as eodashCollections } from './asWebComponent-BRGyP_j5.js';
 import { storeToRefs } from 'pinia';
 import log from 'loglevel';
+import { useEventBus } from '@vueuse/core';
+
+/*
+ * eodashSTAC helpers that utilizes the app states or actions
+ */
+
+/**
+ * checks if there's a projection on the Collection and
+ * updates {@link availableMapProjection}
+ * @param {import('stac-ts').StacCollection} [STAcCollection]
+ */
+const setMapProjFromCol = async (STAcCollection) => {
+  // if a projection exists on the collection level
+  log.debug("Checking for available map projection in indicator");
+  const projection =
+    /** @type {number | string | {name: string, def: string} | undefined} */
+    (
+      STAcCollection?.["eodash:mapProjection"] ||
+        STAcCollection?.["proj:epsg"] ||
+        STAcCollection?.["eodash:proj4_def"]
+    );
+  if (projection) {
+    log.debug("Projection found", projection);
+    await registerProjection(projection);
+    const projectionCode = getProjectionCode(projection);
+    if (availableMapProjection.value !== projectionCode) {
+      log.debug(
+        "Changing map projection",
+        availableMapProjection.value,
+        projectionCode,
+      );
+      await changeMapProjection(projection);
+    }
+    // set it for `EodashMapBtns`
+    availableMapProjection.value = /** @type {string} */ (projectionCode);
+  } else {
+    // reset to default projection
+    log.debug("Resetting projection to default EPSG:3857");
+    await changeMapProjection((availableMapProjection.value = ""));
+  }
+};
 
 /**
  * Holder for previous compare map view as it is overwritten by sync
@@ -12,7 +53,7 @@ import log from 'loglevel';
 let viewHolder = null;
 
 /**
- * Description placeholder
+ * Handles updating {@link mapPosition} on movement on the map
  *
  * @param {import("vue").Ref<HTMLElement & Record<string,any> & {map:import("ol").Map } | null>} mapElement
  * @param {import("vue").Ref<(number | undefined)[]>} mapPosition
@@ -32,6 +73,9 @@ const useHandleMapMoveEnd = (mapElement, mapPosition) => {
       !Number.isNaN(z)
     ) {
       mapPosition.value = [lonlat[0], lonlat[1], z];
+      if (posIsSetFromUrl.value) {
+        posIsSetFromUrl.value = false;
+      }
     }
   };
 
@@ -73,7 +117,7 @@ const createLayersConfig = async (
     type: "Group",
     properties: {
       id: "AnalysisGroup",
-      title: "Analysis Layers",
+      title: "Data Layers",
       layerControlExpand: true,
     },
     layers: /** @type {Record<string,any>[]}*/ ([]),
@@ -98,7 +142,10 @@ const createLayersConfig = async (
   const indicatorLayers =
     //@ts-expect-error indicator is collection
     await EodashCollection.getIndicatorLayers(selectedIndicator);
-
+  const geodbLayer = EodashCollection.getGeoDBLayer(eodashCols);
+  if (geodbLayer) {
+    dataLayers.layers.push(geodbLayer);
+  }
   const baseLayers = {
     type: "Group",
     properties: {
@@ -193,7 +240,7 @@ const createLayersConfig = async (
 };
 
 /**
- * Description placeholder
+ * Initializes the map and updates it based on changes in the selected indicator and datetime,
  *
  * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} mapElement
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
@@ -217,6 +264,7 @@ const useInitMap = (
     eodashCols.values,
     datetime.value,
   );
+  const layersEvent = useEventBus(eoxLayersKey);
 
   const stopIndicatorWatcher = watch(
     [selectedIndicator, datetime],
@@ -269,6 +317,9 @@ const useInitMap = (
             JSON.parse(JSON.stringify(layersCollection)),
           );
           mapLayers.value = layersCollection;
+          await nextTick(() => {
+            layersEvent.emit("time:updated", mapLayers.value);
+          });
           return;
         }
 
@@ -299,14 +350,18 @@ const useInitMap = (
 
         // Try to move map view to extent only when main
         // indicator and map changes
-        if (mapElement?.value?.id === "main") {
+        if (
+          mapElement?.value?.id === "main" &&
+          updatedStac.extent?.spatial.bbox &&
+          !posIsSetFromUrl.value
+        ) {
           // 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,
+            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 reprojExtent = mapElement.value?.transformExtent(
@@ -314,9 +369,12 @@ const useInitMap = (
             "EPSG:4326",
             mapElement.value?.map?.getView().getProjection(),
           );
-          /** @type {any} */
+          /** @type {import("@eox/map").EOxMap} */
           (mapElement.value).zoomExtent = reprojExtent;
         }
+        if (posIsSetFromUrl.value) {
+          posIsSetFromUrl.value = false;
+        }
 
         log.debug(
           "Assigned layers",
@@ -324,6 +382,12 @@ const useInitMap = (
         );
 
         mapLayers.value = layersCollection;
+        // Emit event to update layers
+        await nextTick(() => {
+          mapElement.value?.updateComplete.then(() => {
+            layersEvent.emit("layers:updated", mapLayers.value);
+          });
+        });
       }
     },
     { immediate: true },
@@ -334,11 +398,25 @@ const useInitMap = (
   });
 };
 
+/**
+ * @module ol/easing
+ */
+
+
+/**
+ * Start slow, speed up, and then slow down again.
+ * @param {number} t Input between 0 and 1.
+ * @return {number} Output between 0 and 1.
+ * @api
+ */
+function inAndOut(t) {
+  return 3 * t * t - 2 * t * t * t;
+}
+
 const _hoisted_1 = [".enabled"];
-const _hoisted_2 = [".layers"];
+const _hoisted_2 = [".center", ".zoom", ".layers"];
 const _hoisted_3 = [".layers"];
 
-
 const _sfc_main = {
   __name: 'EodashMap',
   props: {
@@ -346,11 +424,26 @@ const _sfc_main = {
     type: Boolean,
     default: false,
   },
+  /** @type {import("vue").PropType<[number,number]>} */
+  center: {
+    //@ts-expect-error todo
+    type: Array,
+    default: () => [15, 48],
+  },
+  zoom: {
+    type: Number,
+    default: 4,
+  },
 },
   setup(__props) {
 
 const props = __props;
 
+const initialCenter = toRaw([
+  mapPosition.value?.[0] ?? props.center?.[0],
+  mapPosition.value?.[1] ?? props.center?.[1],
+]);
+const initialZoom = toRaw(mapPosition.value?.[2] ?? props.zoom);
 /** @type {import("vue").Ref<Record<string,any>[]>} */
 const eoxMapLayers = ref([
   {
@@ -375,32 +468,15 @@ const eoxMapCompareLayers = ref([
   },
 ]);
 
+const animationOptions = {
+  duration: 1200,
+  easing: inAndOut,
+};
+
 /** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
 const eoxMap = ref(null);
 /** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
 const compareMap = ref(null);
-
-const eoxMapConfig = {
-  /** @type {(number|undefined)[] | undefined} */
-  center: [15, 48],
-  /** @type {number | undefined} */
-  zoom: 4,
-};
-
-const eoxCompareMapConfig = {
-  /** @type {(number|undefined)[] | undefined} */
-  center: [15, 48],
-  /** @type {number | undefined} */
-  zoom: 4,
-};
-
-// Check if selected indicator was already set in store
-if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
-  // TODO: do further checks for invalid values?
-  // TODO: can we expect the values to be in a specific projection
-  eoxMapConfig.center = [mapPosition.value?.[0], mapPosition.value[1]];
-  eoxMapConfig.zoom = mapPosition.value[2];
-}
 const { selectedCompareStac } = storeToRefs(useSTAcStore());
 const showCompare = computed(() =>
   props.enableCompare && !!selectedCompareStac.value ? "" : "first",
@@ -450,8 +526,10 @@ return (_ctx, _cache) => {
       slot: "first",
       ref_key: "eoxMap",
       ref: eoxMap,
-      ".config": eoxMapConfig,
       id: "main",
+      ".animationOptions": animationOptions,
+      ".center": unref(initialCenter),
+      ".zoom": unref(initialZoom),
       ".layers": eoxMapLayers.value
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2),
     createElementVNode("eox-map", {
@@ -460,7 +538,6 @@ return (_ctx, _cache) => {
       slot: "second",
       ref_key: "compareMap",
       ref: compareMap,
-      ".config": eoxCompareMapConfig,
       ".layers": eoxMapCompareLayers.value
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3)
   ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1))

package/dist/client/EodashMapBtns-BeknGDtc.js

@@ -0,0 +1,107 @@
+import { computed, ref, openBlock, createElementBlock, createBlock, unref, createCommentVNode, createVNode, withCtx } from 'vue';
+import { _ as _export_sfc, t as useDisplay, a1 as makePanelTransparent, V as VBtn, a8 as availableMapProjection, a9 as changeMapProjection, ae as setActiveTemplate } from './asWebComponent-BRGyP_j5.js';
+import { mdiMapPlus, mdiEarthBox, mdiCompare } from '@mdi/js';
+import ExportState from './ExportState-DOrT7M15.js';
+import _sfc_main$1 from './PopUp--_xn1Cms.js';
+import _sfc_main$2 from './EodashItemFilter-16eMMjTV.js';
+
+const _sfc_main = {
+  __name: 'EodashMapBtns',
+  props: {
+  exportMap: {
+    type: Boolean,
+    default: true,
+  },
+  changeProjection: {
+    type: Boolean,
+    default: true,
+  },
+  compareIndicators: {
+    type: Boolean,
+    default: true,
+  },
+},
+  setup(__props) {
+
+
+const { smAndDown } = useDisplay();
+const popupWidth = computed(() => (smAndDown ? "70%" : "500px"));
+const popupHeight = computed(() => (smAndDown ? "90%" : "500px"));
+
+const showMapState = ref(false);
+const showCompareIndicators = ref(false);
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+
+const onSelectCompareIndicator = () => {
+  setActiveTemplate("compare");
+  showCompareIndicators.value = !showCompareIndicators.value;
+};
+
+makePanelTransparent(rootRef);
+
+return (_ctx, _cache) => {
+                                                     
+
+  return (openBlock(), createElementBlock("div", {
+    ref_key: "rootRef",
+    ref: rootRef,
+    class: "d-flex flex-column align-end justify-end my-3 pa-2"
+  }, [
+    (__props.exportMap)
+      ? (openBlock(), createBlock(VBtn, {
+          key: 0,
+          class: "map-btn",
+          icon: [unref(mdiMapPlus)],
+          onClick: _cache[0] || (_cache[0] = $event => (showMapState.value = !showMapState.value))
+        }, null, 8 /* PROPS */, ["icon"]))
+      : createCommentVNode("v-if", true),
+    (__props.exportMap)
+      ? (openBlock(), createBlock(ExportState, {
+          key: 1,
+          modelValue: showMapState.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((showMapState).value = $event))
+        }, null, 8 /* PROPS */, ["modelValue"]))
+      : createCommentVNode("v-if", true),
+    (__props.changeProjection && !!unref(availableMapProjection))
+      ? (openBlock(), createBlock(VBtn, {
+          key: 2,
+          class: "map-btn",
+          icon: [unref(mdiEarthBox)],
+          onClick: _cache[2] || (_cache[2] = $event => (unref(changeMapProjection)(unref(availableMapProjection))))
+        }, null, 8 /* PROPS */, ["icon"]))
+      : createCommentVNode("v-if", true),
+    (__props.compareIndicators)
+      ? (openBlock(), createBlock(VBtn, {
+          key: 3,
+          class: "map-btn",
+          icon: [unref(mdiCompare)],
+          onClick: _cache[3] || (_cache[3] = $event => (showCompareIndicators.value = !showCompareIndicators.value))
+        }, null, 8 /* PROPS */, ["icon"]))
+      : createCommentVNode("v-if", true),
+    createVNode(_sfc_main$1, {
+      modelValue: showCompareIndicators.value,
+      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((showCompareIndicators).value = $event)),
+      maxWidth: popupWidth.value,
+      maxHeight: popupHeight.value
+    }, {
+      default: withCtx(() => [
+        createVNode(_sfc_main$2, {
+          enableCompare: true,
+          "filters-title": "",
+          "results-title": "Select an indicator to compare",
+          "filter-properties": [],
+          onSelect: onSelectCompareIndicator
+        })
+      ]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["modelValue", "maxWidth", "maxHeight"])
+  ], 512 /* NEED_PATCH */))
+}
+}
+
+};
+const EodashMapBtns = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-37c140ec"]]);
+
+export { EodashMapBtns as default };