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

package/widgets/EodashLayerControl.vue

@@ -0,0 +1,111 @@
+<template>
+  <span class="d-flex flex-column fill-height overflow-auto">
+    <eox-layercontrol
+      v-if="showControls"
+      v-bind="config"
+      :for="mapElement"
+      @datetime:updated="debouncedHandleDateTime"
+      class="fill-height"
+      toolsAsList="true"
+      style="--eox-background-color: transparent"
+      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 "@/eodashSTAC/helpers";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { storeToRefs } from "pinia";
+import { useSTAcStore } from "@/store/stac";
+
+const props = defineProps({
+  map: {
+    type: String,
+    default: "first",
+  },
+  tools: {
+    type: Array,
+    default: () => ["datetime", "info", "config", "legend", "opacity"],
+  },
+  cssVars: {
+    type: Object,
+  },
+});
+
+const config = {
+  tools: props.tools,
+  style: props.cssVars,
+};
+
+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/EodashLayoutSwitcher.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="rootRef">
+    <v-tooltip :text="`Switch to ${target} mode`">
+      <template v-slot:activator="{ props }">
+        <v-icon
+          v-bind="props"
+          @click="activeTemplate = target"
+          :icon="[icon]"
+        ></v-icon>
+      </template>
+    </v-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { activeTemplate } from "@/store/states";
+import { mdiViewDashboard } from "@mdi/js";
+import { makePanelTransparent } from "@/composables";
+import { ref } from "vue";
+
+defineProps({
+  target: {
+    type: String,
+    default: "main",
+  },
+  // mdi/js icon
+  icon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+});
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+makePanelTransparent(rootRef);
+</script>

package/widgets/EodashMap.vue

@@ -1,153 +1,128 @@
 <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"
+      id="main"
+      .animationOptions="animationOptions"
+      .center="initialCenter"
+      .zoom="initialZoom"
+      .layers="eoxMapLayers"
+    />
+    <eox-map
+      class="fill-height fill-width overflow-none"
+      id="compare"
+      slot="second"
+      ref="compareMap"
+      .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, toRaw } 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";
-
-const eodashConfig = /** @type {import("@/types").Eodash} */ (
-  inject(eodashKey)
-);
-
-/** @type {import("vue").Ref<(HTMLElement & Record<string,unknown>) | null>} */
-const eoxMap = ref(null);
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { useHandleMapMoveEnd, useInitMap } from "@/composables/EodashMap";
+import { inAndOut } from "ol/easing.js";
+const props = defineProps({
+  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,
+  },
+});
 
-const eoxMapConfig = reactive({
-  /** @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 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",
     },
-  ],
-});
+  },
+]);
 
-// 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];
-}
+/** @type {import("vue").Ref<Record<string,any>[]>} */
+const eoxMapCompareLayers = ref([
+  {
+    type: "Tile",
+    source: { type: "OSM" },
+    properties: {
+      id: "osm",
+      title: "Background",
+    },
+  },
+]);
 
-/** @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 animationOptions = {
+  duration: 1200,
+  easing: inAndOut,
 };
 
-const store = useSTAcStore();
+/** @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",
+);
 
-onMounted(() => {
-  /** @type {import('ol/Map').default} */
-  (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
+useHandleMapMoveEnd(eoxMap, mapPosition);
 
-  const { selectedStac } = storeToRefs(store);
+onMounted(() => {
+  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,27 +1,80 @@
 <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)"
+    />
+    <v-btn
+      class="map-btn"
+      :icon="[mdiCompare]"
+      v-if="compareIndicators"
+      @click="showCompareIndicators = !showCompareIndicators"
+    />
+    <PopUp
+      v-model="showCompareIndicators"
+      :maxWidth="popupWidth"
+      :maxHeight="popupHeight"
+    >
+      <EodashItemFilter
+        :enableCompare="true"
+        filters-title=""
+        results-title="Select an indicator to compare"
+        :filter-properties="[]"
+        @select="onSelectCompareIndicator"
+      />
+    </PopUp>
   </div>
 </template>
 <script setup>
 import { makePanelTransparent } from "@/composables";
-import { mdiMapPlus } from "@mdi/js";
+import { changeMapProjection, setActiveTemplate } from "@/store/actions";
+import { availableMapProjection } from "@/store/states";
+import { mdiCompare, mdiEarthBox, mdiMapPlus } from "@mdi/js";
 import ExportState from "^/ExportState.vue";
-import { ref } from "vue";
-const header = "Export Map";
-const code = `<h2>
-           code example
-         </h2>`;
+import { computed, ref } from "vue";
+import PopUp from "./PopUp.vue";
+import EodashItemFilter from "./EodashItemFilter.vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
+
+defineProps({
+  exportMap: {
+    type: Boolean,
+    default: true,
+  },
+  changeProjection: {
+    type: Boolean,
+    default: true,
+  },
+  compareIndicators: {
+    type: Boolean,
+    default: true,
+  },
+});
+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);
 </script>
 <style scoped>
@@ -29,5 +82,6 @@ makePanelTransparent(rootRef);
   width: 36px;
   height: 36px;
   border-radius: 25%;
+  margin: 4px;
 }
 </style>

package/widgets/EodashProcess.vue

@@ -0,0 +1,143 @@
+<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, startProcess);
+</script>
+<style>
+.chart {
+  height: 400px;
+  width: 100%;
+}
+
+.process-container {
+  height: 100%;
+  overflow-y: auto;
+}
+eox-chart {
+  --background-color: transparent;
+}
+</style>