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

package/widgets/EodashLayerControl.vue

@@ -0,0 +1,98 @@
+<template>
+  <span class="d-flex flex-column fill-height overflow-auto">
+    <eox-layercontrol
+      v-if="showControls"
+      :for="mapElement"
+      .tools="['datetime', 'info', 'config', 'legend', 'opacity']"
+      @datetime:updated="debouncedHandleDateTime"
+      class="fill-height"
+      toolsAsList="true"
+      ref="eoxLayercontrol"
+    />
+  </span>
+</template>
+<script setup>
+import "@eox/layercontrol";
+import "@eox/jsonform";
+import "@eox/timecontrol";
+import "color-legend-element";
+
+import { computed, ref } from "vue";
+import { mapEl, mapCompareEl } from "@/store/States";
+import { getColFromLayer } from "@/utils/helpers";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
+
+const props = defineProps({
+  map: {
+    type: String,
+    default: "first",
+  },
+});
+
+const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+
+const showControls = computed(() => {
+  if (props.map === "second") {
+    return mapCompareEl.value !== null && selectedCompareStac.value !== null;
+  }
+  return mapEl.value !== null && selectedStac.value !== null;
+});
+
+const eodashCols =
+  props.map === "second" ? eodashCompareCollections : eodashCollections;
+const mapElement = props.map === "second" ? mapCompareEl : mapEl;
+
+/** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxLayercontrol = ref(null);
+
+/** @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt */
+const handleDatetimeUpdate = async (evt) => {
+  const { layer, datetime } = evt.detail;
+
+  const ec = await getColFromLayer(eodashCols, layer);
+
+  /** @type {Record<string,any>[] | undefined} */
+  let updatedLayers = [];
+
+  if (ec) {
+    await ec.fetchCollection();
+    updatedLayers = await ec.updateLayerJson(
+      datetime,
+      layer.get("id"),
+      props.map,
+    );
+  }
+  /** @type {Record<String,any>[] | undefined} */
+  const dataLayers = updatedLayers?.find(
+    (l) => l?.properties?.id === "AnalysisGroup",
+  )?.layers;
+
+  if (dataLayers?.length) {
+    // Add expand to all analysis layers
+    dataLayers?.forEach((dl) => {
+      dl.properties.layerControlExpand = true;
+      dl.properties.layerControlToolsExpand = true;
+    });
+    // assign layers to the map
+    /** @type {HTMLElement & Record<string,any>} */
+    (mapElement.value).layers = updatedLayers;
+  }
+};
+
+// -----  debounce logic
+/** @type {NodeJS.Timeout | undefined} */
+let timeout;
+
+/**
+ * @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt
+ **/
+const debouncedHandleDateTime = (evt) => {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    handleDatetimeUpdate(evt);
+  }, 500);
+};
+// ------
+</script>

package/widgets/EodashMap.vue

@@ -1,55 +1,85 @@
 <template>
-  <eox-map
+  <eox-map-compare
     class="fill-height fill-width overflow-none"
-    ref="eoxMap"
-    :config="eoxMapConfig"
-  />
+    .enabled="showCompare"
+  >
+    <eox-map
+      class="fill-height fill-width overflow-none"
+      slot="first"
+      ref="eoxMap"
+      .config="eoxMapConfig"
+      id="main"
+      .layers="eoxMapLayers"
+    />
+    <eox-map
+      class="fill-height fill-width overflow-none"
+      id="compare"
+      slot="second"
+      ref="compareMap"
+      .config="eoxCompareMapConfig"
+      .layers="eoxMapCompareLayers"
+    />
+  </eox-map-compare>
 </template>
 <script setup>
-import { inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { toAbsolute } from "stac-js/src/http.js";
-import { EodashCollection, extractCollectionUrls } from "@/utils/eodashSTAC";
-import { eodashKey } from "@/utils/keys";
-import { datetime, mapPosition } from "@/store/States";
+import "@eox/map";
+import "@eox/map/src/plugins/advancedLayersAndSources";
+import { computed, onMounted, ref } from "vue";
+import { datetime, mapEl, mapPosition, mapCompareEl } from "@/store/States";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
-import "@eox/map";
-import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { useHandleMapMoveEnd, useInitMap } from "@/composables/EodashMap";
 
-const eodashConfig = /** @type {import("@/types").Eodash} */ (
-  inject(eodashKey)
-);
+const props = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/** @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",
+    },
+  },
+]);
 
-/** @type {import("vue").Ref<(HTMLElement & Record<string,unknown>) | null>} */
+/** @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 = reactive({
+const eoxMapConfig = {
   /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
   /** @type {number | undefined} */
   zoom: 4,
-  // TODO: we should probably introduce some way of defining
-  layers: [
-    {
-      type: "Vector",
-      source: {
-        type: "Vector",
-        url: "https://openlayers.org/data/vector/ecoregions.json",
-        format: "GeoJSON",
-      },
-    },
-    {
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-      },
-      source: {
-        type: "OSM",
-      },
-    },
-  ],
-});
+};
+
+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) {
@@ -58,96 +88,42 @@ if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   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",
+);
 
-/** @type {import("openlayers").EventsListenerFunctionType} */
-const handleMoveEnd = (evt) => {
-  const map = /** @type {import("openlayers").Map | undefined} */ (
-    /** @type {any} */ (evt).map
-  );
-  /*
-  const currentProj = map?.getView().getProjection();
-  const transFunc = getTransform(currentProj?.getCode(), 'EPSG:4326');
-  const [x, y] = transFunc(map?.getView().getCenter() ?? [0, 0], undefined, undefined);
-  */
-  const [x, y] = map?.getView().getCenter() ?? [0, 0];
-  const z = map?.getView().getZoom();
-  if (!Number.isNaN(x) && !Number.isNaN(y) && !Number.isNaN(z)) {
-    mapPosition.value = [x, y, z];
-  }
-};
-
-const store = useSTAcStore();
+useHandleMapMoveEnd(eoxMap, mapPosition);
 
 onMounted(() => {
-  /** @type {import('ol/Map').default} */
-  (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
-
-  const { selectedStac } = storeToRefs(store);
+  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+  // assign map Element state to eox map
+  mapEl.value = eoxMap.value;
 
-  watch(
-    [selectedStac, datetime],
-    async ([updatedStac, updatedTime]) => {
-      if (updatedStac) {
-        const parentCollUrl = toAbsolute(
-          `./${updatedStac.id}/collection.json`,
-          eodashConfig.stacEndpoint,
-        );
-        const collectionUrls = extractCollectionUrls(
-          selectedStac.value,
-          parentCollUrl,
-        );
-        /** @type {import("@/utils/eodashSTAC").EodashCollection[]} */
-        const eodashCollections = [];
-        collectionUrls.forEach((cu) => {
-          eodashCollections.push(new EodashCollection(cu));
-        });
-        const layersCollection = [];
-        for (let idx = 0; idx < eodashCollections.length; idx++) {
-          const ec = eodashCollections[idx];
-          let layers;
-          if (updatedTime) {
-            layers = await ec.createLayersJson(new Date(updatedTime));
-          } else {
-            layers = await ec.createLayersJson();
-          }
-          if (layers) {
-            layersCollection.push(...layers);
-          }
-        }
-        // TODO: add base layers and overlays as defined in the top collection / indicator
-        // Probably best also to introduce background and overlay groups
-        // For now adding OSM as background
-        layersCollection.push({
-          type: "Tile",
-          properties: {
-            id: "osm",
-            title: "Background",
-          },
-          source: {
-            type: "OSM",
-          },
-        });
+  if (props.enableCompare) {
+    mapCompareEl.value = compareMap.value;
+  }
 
-        // TODO: we can check if the collection / indicator has a specific
-        //       projection it wants to be displayed in the map we can register
-        //       and set the attribute here, e.g. like following
-        /*
-        (el)?.registerProjection(
-          'EPSG:3031','+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs'
-        );
-        (el)?.projection = "EPSG:3031";
-        */
+  if (props.enableCompare) {
+    useInitMap(
+      compareMap,
+      //@ts-expect-error todo selectedStac as collection
+      selectedCompareStac,
+      eodashCompareCollections,
+      datetime,
+      eoxMapCompareLayers,
+      eoxMap,
+    );
+  }
 
-        /** @type {any} */
-        (eoxMap.value).layers = layersCollection;
-      }
-    },
-    { immediate: true },
+  useInitMap(
+    eoxMap,
+    //@ts-expect-error todo selectedStac as collection
+    selectedStac,
+    eodashCollections,
+    datetime,
+    eoxMapLayers,
+    compareMap,
   );
 });
-
-onUnmounted(() => {
-  /** @type {import('ol/Map').default} */
-  (eoxMap.value?.map)?.un("moveend", handleMoveEnd);
-});
 </script>

package/widgets/EodashMapBtns.vue

@@ -1,22 +1,38 @@
 <template>
-  <div ref="rootRef" class="d-flex align-end justify-end my-3 pa-2">
+  <div ref="rootRef" class="d-flex flex-column align-end justify-end my-3 pa-2">
     <v-btn
+      v-if="exportMap"
       class="map-btn"
       :icon="[mdiMapPlus]"
       @click="showMapState = !showMapState"
     />
-    <ExportState :header="header" :code="code" v-model="showMapState" />
+    <ExportState v-if="exportMap" v-model="showMapState" />
+    <v-btn
+      class="map-btn"
+      :icon="[mdiEarthBox]"
+      v-if="changeProjection && !!availableMapProjection"
+      @click="changeMapProjection(availableMapProjection)"
+    />
   </div>
 </template>
 <script setup>
 import { makePanelTransparent } from "@/composables";
-import { mdiMapPlus } from "@mdi/js";
+import { changeMapProjection } from "@/store/Actions";
+import { availableMapProjection } from "@/store/States";
+import { mdiEarthBox, mdiMapPlus } from "@mdi/js";
 import ExportState from "^/ExportState.vue";
 import { ref } from "vue";
-const header = "Export Map";
-const code = `<h2>
-           code example
-         </h2>`;
+
+defineProps({
+  exportMap: {
+    type: Boolean,
+    default: true,
+  },
+  changeProjection: {
+    type: Boolean,
+    default: true,
+  },
+});
 
 const showMapState = ref(false);
 
@@ -29,5 +45,6 @@ makePanelTransparent(rootRef);
   width: 36px;
   height: 36px;
   border-radius: 25%;
+  margin: 4px;
 }
 </style>

package/widgets/EodashProcess.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="process-container">
+    <eox-jsonform
+      v-if="jsonformSchema"
+      ref="jsonformEl"
+      .schema="jsonformSchema"
+    ></eox-jsonform>
+    <eox-chart
+      class="chart"
+      v-if="isProcessed && chartSpec"
+      .spec="toRaw(chartSpec)"
+      .dataValues="toRaw(chartData)"
+    />
+    <span>
+      <v-btn
+        v-if="!autoExec"
+        :loading="loading"
+        style="float: right; margin-right: 20px"
+        @click="startProcess"
+        color="primary"
+      >
+        Execute
+      </v-btn>
+    </span>
+  </div>
+</template>
+<script setup>
+import "@eox/chart";
+import "@eox/drawtools";
+import "@eox/jsonform";
+
+import { onMounted, ref, toRaw } from "vue";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+import { mapEl } from "@/store/States";
+import { useOnLayersUpdate } from "@/composables";
+import { useEventBus } from "@vueuse/core";
+import { eoxLayersKey } from "@/utils/keys";
+import {
+  handleProcesses,
+  initProcess,
+  useAutoExec,
+} from "@/composables/EodashProcess";
+
+const layersEvents = useEventBus(eoxLayersKey);
+const { selectedStac } = storeToRefs(useSTAcStore());
+
+/** @type {import("vue").Ref<import("vega").Spec|null>} */
+const chartSpec = ref(null);
+
+/** @type {import("vue").Ref<Record<string,any>|null>}  */
+const chartData = ref(null);
+const isProcessed = ref(false);
+
+/** @type {import("vue").Ref<Record<string,any>|null>} */
+const jsonformSchema = ref(null);
+
+/** @type {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} */
+const jsonformEl = ref(null);
+const loading = ref(false);
+
+const autoExec = ref(false);
+
+const isPolling = ref(false);
+
+onMounted(async () => {
+  // wait for the layers to be rendered
+  if (mapEl.value?.layers.length <= 1) {
+    layersEvents.once(async () => {
+      await initProcess({
+        //@ts-expect-error TODO
+        selectedStac,
+        jsonformEl,
+        jsonformSchema,
+        chartSpec,
+        isProcessed,
+        loading,
+        isPolling,
+      });
+    });
+  } else {
+    await initProcess({
+      //@ts-expect-error TODO
+      selectedStac,
+      jsonformEl,
+      jsonformSchema,
+      chartSpec,
+      isProcessed,
+      loading,
+      isPolling,
+    });
+  }
+});
+
+useOnLayersUpdate(
+  async () =>
+    await initProcess({
+      //@ts-expect-error TODO
+      selectedStac,
+      jsonformEl,
+      jsonformSchema,
+      chartSpec,
+      isProcessed,
+      loading,
+      isPolling,
+    }),
+);
+
+const startProcess = async () => {
+  const errors = jsonformEl.value?.editor.validate();
+  if (errors?.length) {
+    console.warn("[eodash] Form validation failed", errors);
+    return;
+  }
+  await handleProcesses({
+    jsonformEl,
+    jsonformSchema,
+    chartSpec,
+    chartData,
+    loading,
+    //@ts-expect-error TODO
+    selectedStac,
+    isProcessed,
+    isPolling,
+  });
+  isProcessed.value = true;
+};
+useAutoExec(autoExec, jsonformEl, jsonformSchema, isProcessed, startProcess);
+</script>
+<style>
+.chart {
+  height: 400px;
+  width: 100%;
+}
+
+.process-container {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.2s;
+  max-height: 30px;
+}
+
+.slide-enter,
+.slide-leave-to {
+  max-height: 0px;
+}
+</style>

package/widgets/ExportState.vue

@@ -1,17 +1,17 @@
 <template>
   <PopUp v-model="dialog">
-    <v-card>
-      <v-card-title class="bg-primary">
+    <v-card style="max-height: 498px">
+      <v-card-title class="bg-primary" style="max-height: 49px">
         <h5 class="text-h5">Storytelling map configuration</h5>
       </v-card-title>
 
-      <v-card-text class="py-5">
+      <v-card-text class="py-5 overflow-auto" style="height: 400px">
         <p class="text-body-2">
-          Copy and paste this code into the map layers field of the storytelling
-          editor:
+          Copy and paste this code into the map <b>layers field</b> of the
+          storytelling editor:
         </p>
         <div class="pa-3 code-block">
-          {{ getLayers() }}
+          {{ removeUnneededProperties(getLayers()) }}
         </div>
 
         <div style="position: absolute; bottom: 15px">
@@ -41,7 +41,7 @@
 
       <v-divider></v-divider>
 
-      <v-card-actions>
+      <v-card-actions style="max-height: 49px">
         <v-spacer></v-spacer>
         <v-btn variant="text" @click="dialog = !dialog"> Close </v-btn>
       </v-card-actions>
@@ -55,6 +55,7 @@ import { copyToClipBoard } from "@/utils";
 import { computed, ref } from "vue";
 import { getLayers as getLayerAction } from "@/store/Actions";
 import { mapPosition } from "@/store/States";
+import { removeUnneededProperties } from "@/utils/helpers";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
 
@@ -88,19 +89,20 @@ const copyBtns = [
 
 const mapStepCode = computed(() => {
   const [x, y, z] = mapPosition.value;
-  const preTag = "### <!--{ layers=";
+  const preTag = "### <!" + "--{ layers=";
   const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
 `;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 const mapEntryCode = computed(() => {
   const [x, y, z] = mapPosition.value;
   const preTag =
-    '## Map Example <!--{as="eox-map" style="width: 100%; height: 500px;" layers=';
+    "## Map Example <!" +
+    '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
   const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 </script>
 <style scoped>
@@ -108,5 +110,7 @@ const mapEntryCode = computed(() => {
   background-color: #ddd;
   font-family: monospace;
   font-size: small;
+  max-height: 200px;
+  overflow-y: auto;
 }
 </style>