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

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

@@ -7,8 +7,10 @@
       class="fill-height fill-width overflow-none"
       slot="first"
       ref="eoxMap"
-      .config="eoxMapConfig"
       id="main"
+      .animationOptions="animationOptions"
+      .center="initialCenter"
+      .zoom="initialZoom"
       .layers="eoxMapLayers"
     />
     <eox-map
@@ -16,28 +18,42 @@
       id="compare"
       slot="second"
       ref="compareMap"
-      .config="eoxCompareMapConfig"
       .layers="eoxMapCompareLayers"
     />
   </eox-map-compare>
 </template>
 <script setup>
 import "@eox/map";
-import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
-import { computed, onMounted, ref } from "vue";
-import { datetime, mapEl, mapPosition, mapCompareEl } from "@/store/States";
+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 { 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 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([
   {
@@ -62,32 +78,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",

package/widgets/EodashMapBtns.vue

@@ -7,21 +7,44 @@
       @click="showMapState = !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 { changeMapProjection } from "@/store/Actions";
-import { availableMapProjection } from "@/store/States";
-import { mdiEarthBox, 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";
+import { computed, ref } from "vue";
+import PopUp from "./PopUp.vue";
+import EodashItemFilter from "./EodashItemFilter.vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 
 defineProps({
   exportMap: {
@@ -32,12 +55,26 @@ defineProps({
     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>

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>

package/widgets/EodashStacInfo.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex-grow-1 fill-height overflow-auto">
+    <eox-stacinfo
+      .for="currentUrl"
+      .allowHtml="allowHtml"
+      .body="body"
+      .featured="featured"
+      .footer="footer"
+      .styleOverride="styleOverride"
+      .header="header"
+      .subheader="subheader"
+      .tags="tags"
+      style="--color-primary-lighter: none"
+    >
+    </eox-stacinfo>
+  </div>
+</template>
+
+<script setup>
+import "@eox/stacinfo";
+import { currentUrl } from "@/store/states";
+
+const {
+  allowHtml,
+  featured,
+  footer,
+  header,
+  body,
+  styleOverride,
+  subheader,
+  tags,
+} = defineProps({
+  allowHtml: {
+    type: Boolean,
+    default: true,
+  },
+
+  styleOverride: {
+    type: String,
+    default: `
+.single-property {columns: 1!important;}
+h1 {margin:0px!important;font-size:16px!important;}
+header h1:after {
+content:' ';
+display:block;
+border:1px solid #d0d0d0;
+}
+h2 {font-size:15px}
+h3 {font-size:14px}
+summary {cursor: pointer;}
+#properties li > .value { font-weight: normal !important;}
+main {padding-bottom: 10px;}
+.footer-container {line-height:1;}
+.footer-container button {margin-top: -10px;}
+.footer-container small {font-size:10px;line-height:1;}`,
+  },
+  header: {
+    type: Array,
+    default: () => ["title"],
+  },
+  tags: {
+    type: Array,
+    default: () => ["themes"],
+  },
+  subheader: {
+    type: Array,
+    default: () => [],
+  },
+  body: {
+    type: Array,
+    default: () => ["satellite", "sensor", "agency", "extent"],
+  },
+  featured: {
+    type: Array,
+    default: () => ["description", "providers", "assets", "links"],
+  },
+  footer: {
+    type: Array,
+    default: () => ["sci:citation"],
+  },
+});
+</script>

package/widgets/EodashTools.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    ref="rootEl"
+    class="d-flex flex-column fill-height overflow-auto bg-primary"
+  >
+    <div class="d-flex flex-row justify-space-between pa-4 align-center">
+      <v-btn
+        v-if="props.showIndicatorsBtn"
+        color="secondary"
+        class="text-none py-2 px-4"
+        :append-icon="[mdiPlus]"
+        :text="indicatorBtnText"
+        @click="dialog = !dialog"
+      >
+      </v-btn>
+      <EodashLayoutSwitcher
+        v-if="props.showLayoutSwitcher"
+        :target="layoutTarget"
+        :icon="layoutIcon"
+      />
+    </div>
+    <PopUp
+      v-model="dialog"
+      :maxWidth="popupWidth"
+      :width="popupWidth"
+      :max-height="popupHeight"
+      :height="popupHeight"
+    >
+      <EodashItemFilter
+        class="pa-4"
+        results-title=""
+        v-bind="props.itemFilterConfig"
+        @select="dialog = !dialog"
+      />
+    </PopUp>
+  </div>
+</template>
+
+<script setup>
+import PopUp from "^/PopUp.vue";
+import EodashItemFilter from "^/EodashItemFilter.vue";
+import EodashLayoutSwitcher from "^/EodashLayoutSwitcher.vue";
+import { mdiPlus, mdiViewDashboard } from "@mdi/js";
+import { computed, ref } from "vue";
+import { makePanelTransparent } from "@/composables";
+import { useDisplay } from "vuetify/lib/framework.mjs";
+
+const dialog = ref(false);
+
+const { smAndDown } = useDisplay();
+const popupWidth = computed(() => (smAndDown.value ? "80%" : "1500px"));
+const popupHeight = computed(() => (smAndDown.value ? "90%" : "800px"));
+
+const props = defineProps({
+  showIndicatorsBtn: {
+    type: Boolean,
+    default: true,
+  },
+  showLayoutSwitcher: {
+    type: Boolean,
+    default: true,
+  },
+  layoutTarget: {
+    type: String,
+    default: "light",
+  },
+  // mdi/js icon
+  layoutIcon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+  indicatorBtnText: {
+    type: String,
+    default: "Select indicator",
+  },
+  itemFilterConfig: {
+    type: Object,
+    default: () => {},
+  },
+});
+const rootEl = ref(null);
+makePanelTransparent(rootEl);
+</script>

package/widgets/ExportState.vue

@@ -53,9 +53,9 @@ import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
 import PopUp from "./PopUp.vue";
 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";
+import { getLayers as getLayerAction } from "@/store/actions";
+import { mapPosition } from "@/store/states";
+import { removeUnneededProperties } from "@/eodashSTAC/helpers";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
 

package/widgets/PopUp.vue

@@ -1,8 +1,7 @@
 <template>
   <span>
     <v-dialog
-      max-width="500px"
-      max-height="500px"
+      v-bind="config"
       absolute
       scrollable
       scroll-strategy="block"
@@ -34,7 +33,30 @@ const props = defineProps({
     type: Object,
     default: undefined,
   },
+  maxWidth: {
+    type: String,
+    default: "500px",
+  },
+  maxHeight: {
+    type: String,
+    default: "500px",
+  },
+  width: {
+    type: String,
+    default: "500px",
+  },
+  height: {
+    type: String,
+    default: "500px",
+  },
 });
 
+const config = {
+  maxWidth: props.maxWidth,
+  maxHeight: props.maxHeight,
+  width: props.width,
+  height: props.height,
+};
+
 const [definedWidget] = useDefineWidgets([props?.widget]);
 </script>

package/core/client/asWebComponent.d.ts

@@ -1,23 +0,0 @@
-/** @group WebComponent */
-type EodashConstructor = import("vue").VueElementConstructor<
-  import("vue").ExtractPropTypes<{ config: string }>
->;
-/**
- * Eodash Web Component constructor
- *
- * @group WebComponent
- */
-export declare const Eodash: EodashConstructor;
-/**
- * Registers `eo-dash` as Custom Element in the window
- *
- * @group WebComponent
- */
-export declare function register(): void;
-
-/**
- * Eodash store @see EodashStore
- *
- * @group WebComponent
- */
-export declare const store: import("./types").EodashStore;