@eodash/eodash 5.4.0 → 5.5.0

package/widgets/EodashMap/index.vue

@@ -46,7 +46,7 @@
       <!-- prettier-ignore -->
       <EodashMapBtns
         :style="{
-          gridColumn: (indicator || compareIndicator || poi) ? responsiveX : '12',
+          gridColumn: (indicator || compareIndicator || poi) && !isGlobe ? responsiveX : '12',
           gridRow: responsiveY,
         }"
         :exportMap="(indicator || compareIndicator || poi) ? btnsProps.exportMap : false"
@@ -60,6 +60,7 @@
         "
         :enableZoom="(indicator || compareIndicator || poi) ? btnsProps.enableZoom : false
         "
+        :enableGlobe="(indicator || compareIndicator || poi) ? btnsProps.enableGlobe : false"
         :searchParams="btnsProps.searchParams"
       />
     </div>
@@ -77,6 +78,7 @@ import {
   indicator,
   compareIndicator,
   poi,
+  isGlobe,
 } from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
@@ -139,6 +141,7 @@ const props = defineProps({
      * enableSearch?: boolean;
      * searchParams?: object;
      * enableZoom?: boolean;
+     * enableGlobe?: boolean;
      * enableCompareIndicators?: boolean | {
      *   compareTemplate?:string;
      *   fallbackTemplate?:string;
@@ -153,6 +156,7 @@ const props = defineProps({
       enableBackToPOIs: true,
       enableSearch: true,
       enableZoom: true,
+      enableGlobe: true,
       searchParams: {},
     }),
   },
@@ -195,9 +199,13 @@ const btnsProps = computed(() => ({
   backToPOIs: props.btns.enableBackToPOIs ?? true,
   enableSearch: props.btns.enableSearch ?? true,
   enableZoom: props.btns.enableZoom ?? true,
+  enableGlobe: props.btns.enableGlobe ?? true,
   searchParams: props.btns.searchParams,
 }));
 
+if (btnsProps.value.enableGlobe) {
+  await import("@eox/map/src/plugins/globe");
+}
 // Prepare containers for scale line and cursor coordinates
 const scaleLineRef = useTemplateRef("scale-line");
 const cursorCoordsRef = useTemplateRef("cursor-coords");
@@ -386,7 +394,7 @@ onMounted(() => {
   left: 24px;
   bottom: 54px; /* Tighter spacing: watermark at 6px + ~48px */
   color: rgba(0, 0, 0, 0.9);
-  font-size: 11px;
+  font-size: 10px;
   font-family: var(--eox-body-font-family);
   background: #fffe;
   border-radius: 4px;

package/widgets/EodashMap/methods/btns.js

@@ -0,0 +1,155 @@
+import { getLayers, setActiveTemplate } from "@/store/actions";
+import { useSTAcStore } from "@/store/stac";
+import { activeTemplate, isGlobe, mapEl } from "@/store/states";
+import { easeOut } from "ol/easing.js";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+import { triggerRef } from "vue";
+
+export const switchGlobe = () => {
+  if (!mapEl.value) {
+    return;
+  }
+  if (!isGlobe.value) {
+    mapEl.value.layers = addCorsAnonym([...getLayers()]);
+  }
+  mapEl.value.projection = isGlobe.value ? "EPSG:3857" : "globe";
+  if (isGlobe.value) {
+    showAllPanels();
+  } else hideAllPanels();
+  isGlobe.value = !isGlobe.value;
+};
+
+function hideAllPanels() {
+  const allPanels = document.querySelectorAll(
+    "eox-layout-item:not([class='bg-panel'])",
+  );
+  allPanels.forEach((panel) => {
+    if (!panel || !(panel instanceof HTMLElement)) {
+      return;
+    }
+    panel.style.display = "none";
+  });
+}
+function showAllPanels() {
+  const allPanels = document.querySelectorAll(
+    "eox-layout-item:not([class='bg-panel'])",
+  );
+  allPanels.forEach((panel) => {
+    if (!panel || !(panel instanceof HTMLElement)) {
+      return;
+    }
+    panel.style.display = "";
+  });
+}
+/**
+ *
+ * @param {import("@eox/map").EoxLayer[]} layers
+ * @return {import("@eox/map").EoxLayer[]}
+ */
+function addCorsAnonym(layers) {
+  //@ts-expect-error todo
+  return layers.map((layer) => {
+    if (layer.type === "Group") {
+      layer.layers = addCorsAnonym([...(layer.layers ?? [])]);
+      return layer;
+    }
+    // check if not mapbox style as a fix for ts error
+    if (layer.type === "MapboxStyle") {
+      return layer;
+    }
+
+    return {
+      ...layer,
+      ...(layer.source && {
+        source: {
+          ...layer.source,
+          crossOrigin: "anonymous",
+        },
+        ...(layer.sources && {
+          sources: layer.sources.map((source) => ({
+            ...source,
+            crossOrigin: "anonymous",
+          })),
+        }),
+      }),
+    };
+  });
+}
+
+export const onMapZoomOut = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom - 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+
+export const onMapZoomIn = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom + 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+
+export const showCompareIndicators = ref(false);
+/**
+ *
+ * @param {boolean | {
+ * compareTemplate?:string;
+ * fallbackTemplate?:string;
+ * itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+ * }} compareIndicators
+ */
+export const onSelectCompareIndicator = (compareIndicators) => {
+  const compareTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+    "compare";
+  setActiveTemplate(compareTemplate);
+  showCompareIndicators.value = !showCompareIndicators.value;
+};
+
+/**
+ *
+ * @param {boolean | {
+ * compareTemplate?:string;
+ * fallbackTemplate?:string;
+ * itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+ * }} compareIndicators
+ */
+export const onCompareClick = (compareIndicators) => {
+  const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
+  const { resetSelectedCompareSTAC } = useSTAcStore();
+  showCompareIndicators.value =
+    activeTemplate.value !==
+    ((typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+      "compare");
+
+  const fallbackTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.fallbackTemplate) ||
+    "expert";
+  selectedCompareStac.value = null;
+  resetSelectedCompareSTAC();
+  setActiveTemplate(fallbackTemplate);
+  triggerRef(selectedStac);
+};

package/widgets/EodashMap/methods/create-layers-config.js

@@ -82,7 +82,7 @@ export const createLayersConfig = async (
   const observationPointsLayer =
     EodashCollection.getObservationPointsLayer(eodashCols);
   if (observationPointsLayer) {
-    dataLayers.layers.unshift(observationPointsLayer);
+    dataLayers.layers.push(observationPointsLayer);
   }
   const baseLayers = {
     type: "Group",
@@ -153,7 +153,7 @@ export const createLayersConfig = async (
   }
 
   if (baseLayers.layers.length) {
-    layersCollection.push(baseLayers);
+    layersCollection.unshift(baseLayers);
   }
 
   const overlayLayers = {
@@ -171,7 +171,7 @@ export const createLayersConfig = async (
 
   if (indicatorOverlays.length) {
     overlayLayers.layers.push(...indicatorOverlays);
-    layersCollection.unshift(overlayLayers);
+    layersCollection.push(overlayLayers);
   }
 
   return layersCollection;

package/widgets/EodashMap/methods/index.js

@@ -8,6 +8,7 @@ import { isFirstLoad } from "@/utils/states";
 import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
 import { mapPosition } from "@/store/states";
 import { sanitizeBbox } from "@/eodashSTAC/helpers";
+import { transformExtent } from "@eox/map";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -201,7 +202,7 @@ export const useInitMap = (
             const b = updatedStac.extent?.spatial.bbox[0];
             const sanitizedExtent = sanitizeBbox([...b]);
 
-            const reprojExtent = mapElement.value?.transformExtent(
+            const reprojExtent = transformExtent(
               sanitizedExtent,
               "EPSG:4326",
               mapElement.value?.map?.getView().getProjection(),

package/widgets/EodashProcess/ProcessList.vue

@@ -25,8 +25,8 @@
               >{{
                 new Date(item.job_start_datetime).toISOString().slice(0, 16)
               }}
-              <v-icon>mdi-open-in-new</v-icon></a
-            >
+              <v-icon :icon="[mdiOpenInNew]" />
+            </a>
           </td>
           <td>{{ item.status }}</td>
           <td style="padding: 0px">
@@ -73,7 +73,6 @@
   </div>
 </template>
 <script setup>
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   mdiUploadBox,
   mdiDownloadBox,

package/widgets/EodashProcess/index.vue

@@ -1,24 +1,19 @@
 <template>
-  <div ref="container" class="pb-4">
+  <div ref="container" class="py-1">
     <ProcessList :map-element="mapElement" :enable-compare="enableCompare" />
-
     <eox-jsonform
       v-if="jsonformSchema"
       :key="jsonformKey"
       ref="jsonformEl"
       .schema="jsonformSchema"
     ></eox-jsonform>
-    <eox-chart
-      ref="chartElRef"
-      class="chart"
-      v-if="isProcessed && chartSpec"
-      .spec="toRaw(chartSpec)"
-      .dataValues="toRaw(chartData)"
-      @click:item="onChartClick"
-      :style="chartStyles"
-      .opt="vegaEmbedOptions"
-    />
-    <div class="mt-4 text-right">
+    <EodashChart
+      v-if="!areChartsSeparateLayout"
+      :vega-embed-options="vegaEmbedOptions"
+      :enable-compare="enableCompare"
+    >
+    </EodashChart>
+    <div class="mt-2 text-right">
       <v-btn
         v-if="showExecBtn"
         :loading="loading"
@@ -46,9 +41,10 @@ import "@eox/drawtools";
 import "@eox/jsonform";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { computed, ref, toRaw, useTemplateRef, watch } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import ProcessList from "./ProcessList.vue";
-import { handleProcesses, onChartClick } from "./methods/handling";
+import EodashChart from "../EodashChart.vue";
+import { handleProcesses } from "./methods/handling";
 import { useInitProcess, useAutoExec } from "./methods/composables";
 import { updateJobsStatus } from "./methods/async";
 import {
@@ -56,8 +52,9 @@ import {
   indicator,
   mapCompareEl,
   mapEl,
-  chartEl,
-  compareChartEl,
+  chartSpec,
+  compareChartSpec,
+  areChartsSeparateLayout,
 } from "@/store/states";
 import { download, getDrawToolsProperty } from "./methods/utils";
 import { compareJobs, jobs } from "./states";
@@ -75,11 +72,7 @@ const { enableCompare, vegaEmbedOptions } = defineProps({
     },
   },
 });
-/** @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>} */
@@ -89,16 +82,12 @@ const jsonformEl =
   /** @type {Readonly<import("vue").ShallowRef<import("@eox/jsonform").EOxJSONForm | null>>} */ (
     useTemplateRef("jsonformEl")
   );
-const chartElRef =
-  /** @type {Readonly<import("vue").ShallowRef<import("@eox/chart").EOxChart | null>>} */ (
-    useTemplateRef("chartElRef")
-  );
+
 const isAsync = computed(
   () =>
     selectedStac.value?.links.filter((l) => l.endpoint === "eoxhub_workspaces")
       .length,
 );
-const containerEl = useTemplateRef("container");
 
 const loading = ref(false);
 
@@ -109,10 +98,7 @@ const isPolling = ref(false);
 const processResults = ref([]);
 
 const showExecBtn = computed(
-  () =>
-    !autoExec.value &&
-    (!!jsonformSchema.value || !!chartSpec.value) &&
-    !!jsonformEl.value,
+  () => !autoExec.value && !!jsonformSchema.value && !!jsonformEl.value,
 );
 const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
 const currentSelectedStac = enableCompare ? selectedCompareStac : selectedStac;
@@ -129,7 +115,6 @@ useInitProcess({
   mapElement: mapElement.value,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -165,7 +150,8 @@ const startProcess = async () => {
 
   if (propertyIsEmpty) {
     isProcessed.value = false;
-    chartSpec.value = null;
+    const usedChartSpec = enableCompare ? compareChartSpec : chartSpec;
+    usedChartSpec.value = null;
     return;
   }
   const errors = jsonformEl.value?.editor.validate();
@@ -181,8 +167,6 @@ const startProcess = async () => {
     selectedStac: currentSelectedStac,
     jsonformEl,
     jsonformSchema,
-    chartSpec,
-    chartData,
     loading,
     isPolling,
     processResults,
@@ -193,35 +177,8 @@ const startProcess = async () => {
   if (isAsync.value) updateJobsStatus(currentJobs, currentIndicator.value);
 };
 useAutoExec(autoExec, jsonformEl, jsonformSchema, startProcess);
-
-const chartStyles = computed(() => {
-  /** @type {Record<string,string>} */
-  const styles = {};
-  if (!chartSpec.value?.["height"]) {
-    styles["height"] =
-      Math.max(
-        (containerEl.value?.offsetHeight ?? 0) -
-          (jsonformEl.value?.offsetHeight ?? 0),
-        200,
-      ) + "px";
-  }
-  return styles;
-});
-
-// Assign chart element to global state based on compare mode
-watch(chartElRef, (newVal) => {
-  if (enableCompare) {
-    compareChartEl.value = newVal;
-  } else {
-    chartEl.value = newVal;
-  }
-});
 </script>
 <style>
-eox-chart {
-  --background-color: transparent;
-  padding-top: 1em;
-}
 eox-jsonform {
   padding: 0.7em;
   min-height: 0px;

package/widgets/EodashProcess/methods/async.js

@@ -115,7 +115,7 @@ export async function updateJobsStatus(jobs, indicator) {
       new Date(a.job_start_datetime).getTime()
     );
   });
-  jobs.value = jobResults;
+  jobs.value.splice(0, jobs.value.length, ...jobResults);
 }
 
 /**

package/widgets/EodashProcess/methods/composables.js

@@ -13,7 +13,6 @@ import { useOnLayersUpdate } from "@/composables";
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
  * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
@@ -24,7 +23,6 @@ export const useInitProcess = ({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -41,7 +39,6 @@ export const useInitProcess = ({
         selectedStac,
         jsonformEl,
         jsonformSchema,
-        chartSpec,
         isProcessed,
         processResults,
         loading,
@@ -54,7 +51,6 @@ export const useInitProcess = ({
           selectedStac,
           jsonformEl,
           jsonformSchema,
-          chartSpec,
           isProcessed,
           loading,
           processResults,
@@ -87,7 +83,6 @@ export const useInitProcess = ({
       selectedStac,
       jsonformEl,
       jsonformSchema,
-      chartSpec,
       isProcessed,
       processResults,
       loading,

package/widgets/EodashProcess/methods/custom-endpoints/chart/veda-endpoint.js

@@ -19,7 +19,9 @@ export async function handleVedaEndpoint({
   enableCompare = false,
 }) {
   const vedaLink = links.find(
-    (link) => link.rel === "service" && (link.endpoint === "veda" || link.endpoint === "veda_stac"),
+    (link) =>
+      link.rel === "service" &&
+      (link.endpoint === "veda" || link.endpoint === "veda_stac"),
   );
   if (!vedaLink) {
     return;
@@ -117,12 +119,14 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl, vedaLink) {
     const itemLinks = collection.links.filter((link) => link.rel == "item");
     configs.push(
       ...itemLinks.map((link) => {
-        const endpoint = /** @type {string} */ (vedaLink.endpoint === "veda_stac" ? link.id : link["cog_href"]);
+        const endpoint = /** @type {string} */ (
+          vedaLink.endpoint === "veda_stac" ? link.id : link["cog_href"]
+        );
         return {
-        endpoint,
-        datetime: /** @type string **/ (link[datetimeProperty]),
-      }
-    })
+          endpoint,
+          datetime: /** @type string **/ (link[datetimeProperty]),
+        };
+      }),
     );
   }
 

package/widgets/EodashProcess/methods/handling.js

@@ -12,6 +12,10 @@ import {
   datetime,
   indicator,
   poi,
+  chartData,
+  chartSpec,
+  compareChartData,
+  compareChartSpec,
 } from "@/store/states";
 import axios from "@/plugins/axios";
 import { processCharts, processLayers, processSTAC } from "./outputs";
@@ -30,7 +34,6 @@ import { getLayers } from "@/store/actions";
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
  * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
@@ -41,7 +44,6 @@ export async function initProcess({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
   isProcessed,
   processResults,
   loading,
@@ -64,10 +66,10 @@ export async function initProcess({
   resetProcess({
     loading,
     isProcessed,
-    chartSpec,
     jsonformSchema,
     isPolling,
     processResults,
+    enableCompare,
   });
 
   await jsonformEl.value?.editor.destroy();
@@ -161,8 +163,6 @@ export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any>|null>} params.jsonformSchema
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
- * @param {import("vue").Ref<Record<string, any> | null>} params.chartData
  * @param {import("vue").Ref<boolean>} params.isPolling
  * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("@eox/map").EOxMap | null} params.mapElement
@@ -173,8 +173,6 @@ export async function handleProcesses({
   selectedStac,
   jsonformEl,
   jsonformSchema,
-  chartSpec,
-  chartData,
   isPolling,
   processResults,
   mapElement,
@@ -183,6 +181,7 @@ export async function handleProcesses({
   if (!jsonformEl.value || !jsonformSchema.value || !selectedStac.value) {
     return;
   }
+  const enableCompare = mapElement?.id === "compare";
 
   log.debug("Processing...");
   loading.value = true;
@@ -204,12 +203,14 @@ export async function handleProcesses({
       selectedStac.value?.["eodash:vegadefinition"]
     );
     const layerId = selectedStac.value?.id ?? "";
-
-    [chartSpec.value, chartData.value] = await processCharts({
+    const usedChartSpec = enableCompare ? compareChartSpec : chartSpec;
+    const usedChartData = enableCompare ? compareChartData : chartData;
+    let tempChartSpec = null;
+    [tempChartSpec, usedChartData.value] = await processCharts({
       links: serviceLinks,
       jsonformValue: { ...(jsonformValue ?? {}) },
       jsonformSchema: jsonformSchema.value,
-      enableCompare: mapElement?.id === "compare",
+      enableCompare,
       selectedStac: selectedStac.value,
       specUrl,
       isPolling,
@@ -217,19 +218,19 @@ export async function handleProcesses({
       customEndpointsHandler: handleChartCustomEndpoints,
     });
 
-    if (Object.keys(chartData.value ?? {}).length) {
-      processResults.value.push(chartData.value);
+    if (Object.keys(usedChartData.value ?? {}).length) {
+      processResults.value.push(usedChartData.value);
     }
 
     //@ts-expect-error we assume that the spec data is of type InlineData
-    if (chartSpec.value?.data?.values?.length) {
+    if (tempChartSpec.data?.values?.length) {
       //@ts-expect-error we assume that the spec data is of type InlineData
-      processResults.value.push(chartSpec.value?.data.values);
+      processResults.value.push(tempChartSpec?.data.values);
     }
-
-    if (chartSpec.value && !("background" in chartSpec.value)) {
-      chartSpec.value["background"] = "transparent";
+    if (tempChartSpec && !("background" in tempChartSpec)) {
+      tempChartSpec["background"] = "transparent";
     }
+    usedChartSpec.value = tempChartSpec;
 
     await processSTAC(
       serviceLinks,
@@ -280,23 +281,24 @@ export async function handleProcesses({
  * @param {Object} params
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isProcessed
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
  * @param {import("vue").Ref<boolean>} params.isPolling
  * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("vue").Ref<Record<string,any>|null>} params.jsonformSchema
+ * @param {boolean} params.enableCompare
  */
 export function resetProcess({
   loading,
   isProcessed,
-  chartSpec,
   jsonformSchema,
   processResults,
   isPolling,
+  enableCompare,
 }) {
   loading.value = false;
   isProcessed.value = false;
   isPolling.value = false;
-  chartSpec.value = null;
+  const usedChartSpec = enableCompare ? compareChartSpec : chartSpec;
+  usedChartSpec.value = null;
   processResults.value = [];
   jsonformSchema.value = null;
 }
@@ -315,8 +317,7 @@ export const onChartClick = (evt) => {
   const chartSpec = evt.target?.spec;
   if (
     !chartSpec ||
-    !evt.detail?.item?.datum ||
-    !evt.detail?.item?.datum.datum
+    (!evt.detail?.item?.datum && !evt.detail?.item?.datum.datum)
   ) {
     return;
   }