@eodash/eodash 5.0.0-processing → 5.0.0-rc.1

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,7 +18,6 @@
       id="compare"
       slot="second"
       ref="compareMap"
-      .config="eoxCompareMapConfig"
       .layers="eoxMapCompareLayers"
     />
   </eox-map-compare>
@@ -24,20 +25,35 @@
 <script setup>
 import "@eox/map";
 import "@eox/map/src/plugins/advancedLayersAndSources";
-import { computed, onMounted, ref } from "vue";
-import { datetime, mapEl, mapPosition, mapCompareEl } from "@/store/States";
+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

@@ -32,7 +32,7 @@ import "@eox/jsonform";
 import { onMounted, ref, toRaw } from "vue";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { mapEl } from "@/store/States";
+import { mapEl } from "@/store/states";
 import { useOnLayersUpdate } from "@/composables";
 import { useEventBus } from "@vueuse/core";
 import { eoxLayersKey } from "@/utils/keys";
@@ -125,7 +125,7 @@ const startProcess = async () => {
   });
   isProcessed.value = true;
 };
-useAutoExec(autoExec, jsonformEl, jsonformSchema, isProcessed, startProcess);
+useAutoExec(autoExec, jsonformEl, jsonformSchema, startProcess);
 </script>
 <style>
 .chart {
@@ -137,15 +137,7 @@ useAutoExec(autoExec, jsonformEl, jsonformSchema, isProcessed, startProcess);
   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;
+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

@@ -52,10 +52,10 @@
 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 { ref } from "vue";
+import { getLayers as getLayerAction } from "@/store/actions";
+import { mapPosition, availableMapProjection } from "@/store/states";
+import { removeUnneededProperties } from "@/eodashSTAC/helpers";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
 
@@ -71,7 +71,7 @@ const copySuccess = ref(false);
 const copyBtns = [
   {
     id: Symbol(),
-    copyFn: async () => await copyToClipBoard(mapEntryCode.value, copySuccess),
+    copyFn: async () => await copyToClipBoard(getMapEntryCode(), copySuccess),
     copyAs: "simple map",
   },
   {
@@ -82,28 +82,28 @@ const copyBtns = [
   },
   {
     id: Symbol(),
-    copyFn: async () => await copyToClipBoard(mapStepCode.value, copySuccess),
+    copyFn: async () => await copyToClipBoard(getMapStepCode(), copySuccess),
     copyAs: "map tour section",
   },
 ];
 
-const mapStepCode = computed(() => {
+const getMapStepCode = () => {
   const [x, y, z] = mapPosition.value;
   const preTag = "### <!" + "--{ layers=";
-  const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
+  const endTag = `zoom="${z}" center=[${[x, y]}] projection="${availableMapProjection.value}" 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(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
-});
-const mapEntryCode = computed(() => {
+};
+const getMapEntryCode = () => {
   const [x, y, z] = mapPosition.value;
   const preTag =
     "## Map Example <!" +
     '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
-  const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
+  const endTag = `zoom="${z}" center=[${[x, y]}] projection="${availableMapProjection.value}" }-->`;
   return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
-});
+};
 </script>
 <style scoped>
 .code-block {

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;