@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/dist/client/EodashMap-CMvbfI6-.js

@@ -0,0 +1,549 @@
+import { onMounted, onUnmounted, watch, nextTick, toRaw, ref, computed, openBlock, createElementBlock, createElementVNode, unref } from 'vue';
+import '@eox/map';
+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
+ * @type { {map:import("ol").View } | null} mapElement
+ */
+let viewHolder = null;
+
+/**
+ * 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
+ */
+const useHandleMapMoveEnd = (mapElement, mapPosition) => {
+  /** @type {import("openlayers").EventsListenerFunctionType} */
+  const handleMoveEnd = (evt) => {
+    const map = /** @type {import("openlayers").Map | undefined} */ (
+      /** @type {any} */ (evt).map
+    );
+    const lonlat = mapElement.value?.lonLatCenter;
+    const z = map?.getView().getZoom();
+    if (
+      lonlat &&
+      !Number.isNaN(lonlat[0]) &&
+      !Number.isNaN(lonlat[1]) &&
+      !Number.isNaN(z)
+    ) {
+      mapPosition.value = [lonlat[0], lonlat[1], z];
+      if (posIsSetFromUrl.value) {
+        posIsSetFromUrl.value = false;
+      }
+    }
+  };
+
+  onMounted(() => {
+    /** @type {import('ol/Map').default} */
+    (mapElement.value?.map)?.on("moveend", handleMoveEnd);
+  });
+
+  onUnmounted(() => {
+    /** @type {import('ol/Map').default} */
+    (mapElement.value?.map)?.un("moveend", handleMoveEnd);
+  });
+};
+
+/**
+ * Creates full layer configuration from indicator and time information
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * } selectedIndicator
+ * @param {EodashCollection[]} eodashCols
+ * @param {string} [updatedTime]
+ */
+
+const createLayersConfig = async (
+  selectedIndicator,
+  eodashCols,
+  updatedTime,
+) => {
+  log.debug(
+    "Creating layers config",
+    selectedIndicator,
+    eodashCols,
+    updatedTime,
+  );
+  const layersCollection = [];
+  const dataLayers = {
+    type: "Group",
+    properties: {
+      id: "AnalysisGroup",
+      title: "Data Layers",
+      layerControlExpand: true,
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  for (const ec of eodashCols) {
+    let layers;
+    if (updatedTime) {
+      layers = await ec.createLayersJson(new Date(updatedTime));
+    } else {
+      layers = await ec.createLayersJson();
+    }
+    // Add expand to all analysis layers
+    layers.forEach((dl) => {
+      dl.properties.layerControlExpand = true;
+      dl.properties.layerControlToolsExpand = true;
+    });
+    dataLayers.layers.push(...layers);
+  }
+
+  layersCollection.push(dataLayers);
+  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: {
+      id: "BaseLayersGroup",
+      title: "Base Layers",
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  const indicatorBaseLayers = indicatorLayers.filter(
+    (l) => l.properties.group === "baselayer",
+  );
+
+  if (indicatorBaseLayers.length) {
+    // Only one baselayer can be set to visible, let's first set all to
+    // false that have not a dedicated property visible, then check
+    // if there are more then one visible and only allow one
+    let counter = 0;
+    let lastPos = 0;
+    for (let indx = 0; indx < indicatorBaseLayers.length; indx++) {
+      const bl = indicatorBaseLayers[indx];
+      if (!("visible" in bl.properties)) {
+        bl.properties.visible = false;
+      }
+
+      if (bl.properties.visible) {
+        counter++;
+        lastPos = indx;
+      }
+    }
+
+    // if none visible set the last one as visible
+    if (counter === 0) {
+      indicatorBaseLayers[0].properties.visible = true;
+    }
+
+    // disable all apart from last
+    if (counter > 0) {
+      indicatorBaseLayers.forEach((bl, indx) => {
+        if (indx !== lastPos) {
+          bl.properties.visible = false;
+        } else {
+          bl.properties.visible = true;
+        }
+      });
+    }
+
+    baseLayers.layers.push(...indicatorBaseLayers);
+
+    // Add exclusive to baselayers and make sure only one is selected
+    baseLayers.layers.forEach((bl) => {
+      bl.properties.layerControlExclusive = true;
+    });
+  } else {
+    // Default to some baselayer
+    baseLayers.layers.push({
+      type: "Tile",
+      properties: {
+        id: "osm",
+        title: "Background",
+        layerControlExclusive: true,
+      },
+      source: {
+        type: "OSM",
+      },
+    });
+  }
+
+  if (baseLayers.layers.length) {
+    layersCollection.push(baseLayers);
+  }
+
+  const overlayLayers = {
+    type: "Group",
+    properties: {
+      id: "OverlayGroup",
+      title: "Overlay Layers",
+    },
+    layers: /** @type {Record<string,any>[]}*/ ([]),
+  };
+
+  const indicatorOverlays = indicatorLayers.filter(
+    (l) => l.properties.group === "overlay",
+  );
+
+  if (indicatorOverlays.length) {
+    overlayLayers.layers.push(...indicatorOverlays);
+    layersCollection.unshift(overlayLayers);
+  }
+
+  return layersCollection;
+};
+
+/**
+ * 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
+ * @param {EodashCollection[]} eodashCols
+ * @param {import("vue").Ref<string>} datetime
+ * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} partnerMap
+ */
+const useInitMap = (
+  mapElement,
+  selectedIndicator,
+  eodashCols,
+  datetime,
+  mapLayers,
+  partnerMap,
+) => {
+  log.debug(
+    "InitMap",
+    mapElement.value,
+    selectedIndicator.value,
+    eodashCols.values,
+    datetime.value,
+  );
+  const layersEvent = useEventBus(eoxLayersKey);
+
+  const stopIndicatorWatcher = watch(
+    [selectedIndicator, datetime],
+    async ([updatedStac, updatedTime], [previousStac, previousTime]) => {
+      if (updatedStac) {
+        log.debug(
+          "Selected Indicator watch triggered",
+          updatedStac,
+          updatedTime,
+        );
+
+        if (mapElement?.value?.id === "main") {
+          // Making sure main map gets the viewer that seems to be
+          // removed when the second map is no longer rendered
+          if (viewHolder !== null) {
+            // Set view to previous compare view
+            mapElement?.value?.map.setView(viewHolder);
+            viewHolder = null;
+          }
+        }
+        let layersCollection = [];
+
+        const onlyTimeChanged =
+          updatedStac?.id === previousStac?.id && updatedTime !== previousTime;
+
+        const { selectedCompareStac } = storeToRefs(useSTAcStore());
+        if (mapElement?.value?.id === "main") {
+          // Main map being initialized
+          // Set projection based on indicator level information for both maps
+          await setMapProjFromCol(updatedStac);
+        } else {
+          // Compare map being initialized
+          if (selectedCompareStac.value !== null) {
+            // save view of compare map
+            viewHolder = mapElement?.value?.map.getView();
+            /** @type {any} */
+            (mapElement.value).sync = partnerMap.value;
+          }
+        }
+
+        // We re-crate the configuration if time changed
+        if (onlyTimeChanged) {
+          layersCollection = await createLayersConfig(
+            updatedStac,
+            eodashCols,
+            updatedTime,
+          );
+          log.debug(
+            "Assigned layers after changing time only",
+            JSON.parse(JSON.stringify(layersCollection)),
+          );
+          mapLayers.value = layersCollection;
+          await nextTick(() => {
+            layersEvent.emit("time:updated", mapLayers.value);
+          });
+          return;
+        }
+
+        /** @type {Record<string,any>[]} */
+        layersCollection = await createLayersConfig(
+          updatedStac,
+          eodashCols,
+          datetime.value,
+        );
+
+        // We try to set the current time selection to latest extent date
+        let endInterval = null;
+        const interval = updatedStac?.extent?.temporal?.interval;
+        if (interval && interval.length > 0 && interval[0].length > 1) {
+          // @ts-expect-error this is the defined STAC structure
+          endInterval = new Date(interval[0][1]);
+          log.debug(
+            "Indicator load: found stac extent, setting time to latest value",
+            endInterval,
+          );
+        }
+        if (
+          endInterval !== null &&
+          endInterval.toISOString() !== datetime.value
+        ) {
+          datetime.value = endInterval.toISOString();
+        }
+
+        // Try to move map view to extent only when main
+        // indicator and map changes
+        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,
+          ];
+
+          const reprojExtent = mapElement.value?.transformExtent(
+            sanitizedExtent,
+            "EPSG:4326",
+            mapElement.value?.map?.getView().getProjection(),
+          );
+          /** @type {import("@eox/map").EOxMap} */
+          (mapElement.value).zoomExtent = reprojExtent;
+        }
+        if (posIsSetFromUrl.value) {
+          posIsSetFromUrl.value = false;
+        }
+
+        log.debug(
+          "Assigned layers",
+          JSON.parse(JSON.stringify(layersCollection)),
+        );
+
+        mapLayers.value = layersCollection;
+        // Emit event to update layers
+        await nextTick(() => {
+          mapElement.value?.updateComplete.then(() => {
+            layersEvent.emit("layers:updated", mapLayers.value);
+          });
+        });
+      }
+    },
+    { immediate: true },
+  );
+
+  onUnmounted(() => {
+    stopIndicatorWatcher();
+  });
+};
+
+/**
+ * @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 = [".center", ".zoom", ".layers"];
+const _hoisted_3 = [".layers"];
+
+const _sfc_main = {
+  __name: 'EodashMap',
+  props: {
+  enableCompare: {
+    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([
+  {
+    type: "Tile",
+    source: { type: "OSM" },
+    properties: {
+      id: "osm",
+      title: "Background",
+    },
+  },
+]);
+
+/** @type {import("vue").Ref<Record<string,any>[]>} */
+const eoxMapCompareLayers = ref([
+  {
+    type: "Tile",
+    source: { type: "OSM" },
+    properties: {
+      id: "osm",
+      title: "Background",
+    },
+  },
+]);
+
+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 { selectedCompareStac } = storeToRefs(useSTAcStore());
+const showCompare = computed(() =>
+  props.enableCompare && !!selectedCompareStac.value ? "" : "first",
+);
+
+useHandleMapMoveEnd(eoxMap, mapPosition);
+
+onMounted(() => {
+  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+  // assign map Element state to eox map
+  mapEl.value = eoxMap.value;
+
+  if (props.enableCompare) {
+    mapCompareEl.value = compareMap.value;
+  }
+
+  if (props.enableCompare) {
+    useInitMap(
+      compareMap,
+      //@ts-expect-error todo selectedStac as collection
+      selectedCompareStac,
+      eodashCompareCollections,
+      datetime,
+      eoxMapCompareLayers,
+      eoxMap,
+    );
+  }
+
+  useInitMap(
+    eoxMap,
+    //@ts-expect-error todo selectedStac as collection
+    selectedStac,
+    eodashCollections,
+    datetime,
+    eoxMapLayers,
+    compareMap,
+  );
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("eox-map-compare", {
+    class: "fill-height fill-width overflow-none",
+    ".enabled": showCompare.value
+  }, [
+    createElementVNode("eox-map", {
+      class: "fill-height fill-width overflow-none",
+      slot: "first",
+      ref_key: "eoxMap",
+      ref: eoxMap,
+      id: "main",
+      ".animationOptions": animationOptions,
+      ".center": unref(initialCenter),
+      ".zoom": unref(initialZoom),
+      ".layers": eoxMapLayers.value
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2),
+    createElementVNode("eox-map", {
+      class: "fill-height fill-width overflow-none",
+      id: "compare",
+      slot: "second",
+      ref_key: "compareMap",
+      ref: compareMap,
+      ".layers": eoxMapCompareLayers.value
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3)
+  ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1))
+}
+}
+
+};
+
+export { _sfc_main as default };

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