@eodash/eodash 5.0.0-alpha.2.8 → 5.0.0-processing

package/README.md

@@ -4,7 +4,7 @@ A package for creating earth observation dashboards. To learn more about eodash
 
 ## Usage
 
-Checkout the [documentation](https://eodash.github.io/eodash/get-started.html) for a detailed guide.
+Checkout the [documentation](https://eodash.github.io/eodash/) for a detailed guide.
 
 ## Get Started
 

package/core/client/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <Suspense>
-      <Dashboard />
+      <Dashboard :is-web-component="isWebComponent" :config="config" />
 
       <template #fallback>
         <ErrorAlert v-model="error" />
@@ -15,7 +15,19 @@ import Dashboard from "@/views/Dashboard.vue";
 import ErrorAlert from "./components/ErrorAlert.vue";
 import { onErrorCaptured, ref } from "vue";
 
+defineProps({
+  config: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+});
+
+// window.setEodashLoglevel("DEBUG")
+
 const error = ref("");
+const isWebComponent = !!document.querySelector("eo-dash");
+
 onErrorCaptured((e, inst, info) => {
   error.value = `
   ${e}.

package/core/client/asWebComponent.js

@@ -1,7 +1,17 @@
-import SuspensedDashboard from "./SuspensedDashboard.ce.vue";
+import App from "./App.vue";
 import { defineCustomElement } from "vue";
-/** @type {import("./asWebComponent").EodashConstructor} */
-export const Eodash = defineCustomElement(SuspensedDashboard);
+import { registerPlugins } from "./plugins";
+
+/**
+ *  @type {import("vue").VueElementConstructor<
+ *  import("vue").ExtractPropTypes<{ config: string }>>}
+ * */
+export const Eodash = defineCustomElement(App, {
+  shadowRoot: false,
+  configureApp(app) {
+    registerPlugins(app);
+  },
+});
 
 export function register() {
   customElements.define("eo-dash", Eodash);

package/core/client/components/DashboardLayout.vue

@@ -1,9 +1,13 @@
 <template>
   <v-main>
-    <eox-layout :gap="eodash.template.gap ?? 2">
+    <eox-layout
+      :gap="eodash.template.gap ?? 16"
+      :style="`padding: ${eodash.template.gap || 16}px`"
+    >
       <eox-layout-item
         v-if="bgWidget.component"
-        class="bg-panel"
+        class="bg-panel bg-surface"
+        :style="`margin: -${eodash.template.gap ?? 16}px;`"
         x="0"
         y="0"
         h="12"

package/core/client/composables/DefineEodash.js

@@ -55,7 +55,7 @@ export const useEodashRuntime = async (runtimeConfig) => {
 /**
  * @param {((
  *       store: import("@/types").EodashStore,
- *     ) => Promise<import("@/types").Eodash>)
+ *     ) => (Promise<import("@/types").Eodash> | import("@/types").Eodash))
  *   | import("@/types").Eodash} config
  */
 export const createEodash = async (config) => {

package/core/client/composables/EodashMap.js

@@ -0,0 +1,349 @@
+import { EodashCollection } from "@/utils/eodashSTAC";
+import { setMapProjFromCol } from "@/utils/helpers";
+import { nextTick, onMounted, onUnmounted, watch } from "vue";
+import log from "loglevel";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+import { useEventBus } from "@vueuse/core";
+import { eoxLayersKey } from "@/utils/keys";
+/**
+ * Holder for previous compare map view as it is overwritten by sync
+ * @type { {map:import("ol").View } | null} mapElement
+ */
+let viewHolder = null;
+
+/**
+ * Description placeholder
+ *
+ * @param {import("vue").Ref<HTMLElement & Record<string,any> & {map:import("ol").Map } | null>} mapElement
+ * @param {import("vue").Ref<(number | undefined)[]>} mapPosition
+ */
+export 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];
+    }
+  };
+
+  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: "Analysis 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 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;
+};
+
+/**
+ * Description placeholder
+ *
+ * @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
+ */
+export 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
+        ) {
+          // 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 {any} */
+          (mapElement.value).zoomExtent = reprojExtent;
+        }
+
+        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();
+  });
+};