@eodash/eodash 5.2.0 → 5.3.0

package/widgets/EodashLayerControl.vue

@@ -5,9 +5,9 @@
       :key="mapElement"
       v-bind="config"
       :for="mapElement"
+      .customEditorInterfaces="bandsEditorInterface"
       @datetime:updated="debouncedHandleDateTime"
       toolsAsList="true"
-      style="--eox-background-color: transparent"
       ref="eoxLayercontrol"
       @layerConfig:change="onLayerConfigChange"
     >
@@ -22,12 +22,8 @@
   </span>
 </template>
 <script setup>
-import "@eox/layercontrol";
-
-import "@eox/jsonform";
-import "@eox/timecontrol";
 import "color-legend-element";
-
+import "@eox/timecontrol";
 import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
 import { getColFromLayer } from "@/eodashSTAC/helpers";
@@ -39,6 +35,14 @@ import {
 } from "@/utils/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
+import { bandsEditorInterface } from "@/utils/bands-editor";
+
+if (!customElements.get("eox-layercontrol")) {
+  await import("@eox/layercontrol");
+}
+if (!customElements.get("eox-jsonform")) {
+  await import("@eox/jsonform");
+}
 
 const props = defineProps({
   map: {

package/widgets/EodashLayoutSwitcher.vue

@@ -24,7 +24,7 @@ const { mobile } = useDisplay();
 defineProps({
   target: {
     type: String,
-    default: "main",
+    default: "expert",
   },
   // mdi/js icon
   icon: {

package/widgets/EodashMap/EodashMapBtns.vue

@@ -86,15 +86,8 @@
       :height="popupHeight"
     >
       <EodashItemFilter
+        v-bind="itemFilterConfig"
         :enableCompare="true"
-        :enableHighlighting="false"
-        resultType="cards"
-        style="--select-filter-max-items: 8"
-        filters-title="Select an indicator to compare"
-        subTitleProperty="subtitle"
-        imageProperty="thumbnail"
-        aggregateResults="collection_group"
-        results-title=""
         @select="onSelectCompareIndicator"
       />
     </PopUp>
@@ -148,7 +141,11 @@ const {
     default: true,
   },
   compareIndicators: {
-    /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
+    /** @type {import("vue").PropType<boolean | {
+    compareTemplate?:string;
+    fallbackTemplate?:string;
+    itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+    }> }*/
     type: [Boolean, Object],
     default: true,
   },
@@ -181,6 +178,18 @@ const compareIcon = computed(() =>
     ? mdiCompareRemove
     : mdiCompare,
 );
+const itemFilterConfig = {
+  enableHighlighting: false,
+  resultType: "cards",
+  style: "--select-filter-max-items: 8",
+  "filters-title": "Select an indicator to compare",
+  subTitleProperty: "subtitle",
+  imageProperty: "thumbnail",
+  aggregateResults: "collection_group",
+  "results-title": "",
+  ...(typeof compareIndicators === "object" &&
+    compareIndicators.itemFilterConfig),
+};
 
 const onCompareClick = () => {
   showCompareIndicators.value =

package/widgets/EodashMap/index.vue

@@ -43,26 +43,22 @@
       class="map-buttons-container"
       :style="`margin: ${btnsPosition.gap}px 0 ${btnsPosition.gap}px 0`"
     >
+      <!-- prettier-ignore -->
       <EodashMapBtns
         :style="{
-          gridColumn: indicator || compareIndicator ? responsiveX : '12',
+          gridColumn: (indicator || compareIndicator) ? responsiveX : '12',
           gridRow: responsiveY,
         }"
         :exportMap="(indicator || compareIndicator) ? btnsProps.exportMap : false"
-        :changeProjection="
-          (indicator || compareIndicator) ? btnsProps.changeProjection : false
+        :changeProjection="(indicator || compareIndicator) ? btnsProps.changeProjection : false
         "
-        :compareIndicators="
-          (indicator || compareIndicator) ? btnsProps.compareIndicators : false
+        :compareIndicators="(indicator || compareIndicator) ? btnsProps.compareIndicators : false
         "
-        :backToPOIs="
-          (indicator || compareIndicator) ? btnsProps.backToPOIs : false
+        :backToPOIs="(indicator || compareIndicator) ? btnsProps.backToPOIs : false
         "
-        :enableSearch="
-          (indicator || compareIndicator) ? btnsProps.enableSearch : false
+        :enableSearch="(indicator || compareIndicator) ? btnsProps.enableSearch : false
         "
-        :enableZoom="
-          (indicator || compareIndicator) ? btnsProps.enableZoom : false
+        :enableZoom="(indicator || compareIndicator) ? btnsProps.enableZoom : false
         "
       />
     </div>
@@ -134,6 +130,18 @@ const props = defineProps({
     }),
   },
   btns: {
+    /** @type {import("vue").PropType<{
+     * enableExportMap?: boolean;
+     * enableChangeProjection?: boolean;
+     * enableBackToPOIs?: boolean;
+     * enableSearch?: boolean;
+     * enableZoom?: boolean;
+     * enableCompareIndicators?: boolean | {
+     *   compareTemplate?:string;
+     *   fallbackTemplate?:string;
+     *   itemFilterConfig?:InstanceType<import("../EodashItemFilter.vue").default>["$props"]
+     * };
+     * }> }*/
     type: Object,
     default: () => ({
       enableExportMap: true,
@@ -272,7 +280,8 @@ const showCompare = computed(() =>
 useHandleMapMoveEnd(eoxMap, mapPosition);
 
 onMounted(() => {
-  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+  const { selectedCompareStac, selectedStac, selectedItem } =
+    storeToRefs(useSTAcStore());
   // assign map Element state to eox map
   mapEl.value = eoxMap.value;
 
@@ -302,6 +311,7 @@ onMounted(() => {
     eoxMapLayers,
     compareMap,
     props.zoomToExtent,
+    selectedItem,
   );
 });
 

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

@@ -9,19 +9,19 @@ import log from "loglevel";
  *   | null
  * } selectedIndicator
  * @param {EodashCollection[]} eodashCols
- * @param {string} [updatedTime]
+ * @param {string | import("stac-ts").StacItem | null} [timeOrItem] - time as a string, or a stac item
  */
 
 export const createLayersConfig = async (
   selectedIndicator,
   eodashCols,
-  updatedTime,
+  timeOrItem,
 ) => {
   log.debug(
     "Creating layers config",
     selectedIndicator,
     eodashCols,
-    updatedTime,
+    timeOrItem,
   );
   const layersCollection = [];
   const dataLayers = {
@@ -35,11 +35,14 @@ export const createLayersConfig = async (
   };
 
   for (const ec of eodashCols) {
+    /** @type {Record<string,any>[]} */
     let layers;
-    if (updatedTime) {
-      layers = await ec.createLayersJson(new Date(updatedTime));
+    if (timeOrItem) {
+      const dateOrItem =
+        typeof timeOrItem === "string" ? new Date(timeOrItem) : timeOrItem;
+      layers = await ec.createLayersJson(dateOrItem);
     } else {
-      layers = await ec.createLayersJson();
+      layers = await ec.createLayersJson(undefined);
     }
     // Add expand to all analysis layers
     layers.forEach((dl) => {

package/widgets/EodashMap/methods/index.js

@@ -7,6 +7,7 @@ import { storeToRefs } from "pinia";
 import { isFirstLoad } from "@/utils/states";
 import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
 import { mapPosition } from "@/store/states";
+import { sanitizeBbox } from "@/eodashSTAC/helpers";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -58,6 +59,7 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
  * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
  * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
  * @param {boolean} zoomToExtent
+ * @param {import("vue").Ref<import("stac-ts").StacItem | import("stac-ts").StacLink | null>} [selectedItem]
  */
 export const useInitMap = (
   mapElement,
@@ -67,6 +69,7 @@ export const useInitMap = (
   mapLayers,
   partnerMap,
   zoomToExtent,
+  selectedItem,
 ) => {
   log.debug(
     "InitMap",
@@ -75,10 +78,22 @@ export const useInitMap = (
     eodashCols.values,
     datetime.value,
   );
-
+  // watch selectedItem if provided
+  const watching = selectedItem
+    ? [selectedIndicator, datetime, selectedItem]
+    : [selectedIndicator, datetime];
   const stopIndicatorWatcher = watch(
-    [selectedIndicator, datetime],
-    async ([updatedStac, updatedTime], [previousStac, previousTime]) => {
+    watching,
+    async (updated, previous) => {
+      const [updatedStac, updatedTime, updatedItem] =
+        /** @type {[import("stac-ts").StacCollection, string, import("stac-ts").StacItem | null]} */ (
+          selectedItem ? updated : [updated[0], updated[1], null]
+        );
+      const [previousStac, previousTime, previousItem] =
+        /** @type {[import("stac-ts").StacCollection, string, import("stac-ts").StacItem]} */ (
+          selectedItem ? previous : [previous[0], previous[1], null]
+        );
+
       if (updatedStac) {
         log.debug(
           "Selected Indicator watch triggered",
@@ -98,7 +113,9 @@ export const useInitMap = (
         let layersCollection = [];
 
         const onlyTimeChanged =
-          updatedStac?.id === previousStac?.id && updatedTime !== previousTime;
+          updatedStac?.id === previousStac?.id &&
+          (updatedTime !== previousTime ||
+            (updatedItem && updatedItem?.id !== previousItem?.id));
 
         const { selectedCompareStac } = storeToRefs(useSTAcStore());
         if (mapElement?.value?.id === "main") {
@@ -115,12 +132,12 @@ export const useInitMap = (
           }
         }
 
-        // We re-crate the configuration if time changed
+        // We re-create the configuration if time changed
         if (onlyTimeChanged) {
           layersCollection = await createLayersConfig(
             updatedStac,
             eodashCols,
-            updatedTime,
+            updatedItem ?? updatedTime,
           );
           log.debug(
             "Assigned layers after changing time only",
@@ -142,7 +159,7 @@ export const useInitMap = (
         layersCollection = await createLayersConfig(
           updatedStac,
           eodashCols,
-          datetime.value,
+          selectedItem ? updatedItem : updatedTime,
         );
 
         // We try to set the current time selection to latest extent date
@@ -157,6 +174,7 @@ export const useInitMap = (
           );
         }
         if (
+          !updatedItem &&
           endInterval !== null &&
           endInterval.toISOString() !== datetime.value &&
           !isFirstLoad.value
@@ -168,6 +186,7 @@ export const useInitMap = (
           // Try to move map view to extent only when main
           // indicator and map changes
           if (
+            !updatedItem &&
             mapElement?.value?.id === "main" &&
             updatedStac.extent?.spatial.bbox &&
             !(
@@ -178,12 +197,7 @@ export const useInitMap = (
           ) {
             // Sanitize extent,
             const b = updatedStac.extent?.spatial.bbox[0];
-            const sanitizedExtent = [
-              b?.[0] > -180 ? b?.[0] : -180,
-              b?.[1] > -90 ? b?.[1] : -90,
-              b?.[2] < 180 ? b?.[2] : 180,
-              b?.[3] < 90 ? b?.[3] : 90,
-            ];
+            const sanitizedExtent = sanitizeBbox([...b]);
 
             const reprojExtent = mapElement.value?.transformExtent(
               sanitizedExtent,

package/widgets/EodashProcess/index.vue

@@ -9,6 +9,7 @@
       .schema="jsonformSchema"
     ></eox-jsonform>
     <eox-chart
+      ref="chartElRef"
       class="chart"
       v-if="isProcessed && chartSpec"
       .spec="toRaw(chartSpec)"
@@ -45,7 +46,7 @@ import "@eox/drawtools";
 import "@eox/jsonform";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { computed, ref, toRaw, useTemplateRef } from "vue";
+import { computed, ref, toRaw, useTemplateRef, watch } from "vue";
 import ProcessList from "./ProcessList.vue";
 import { handleProcesses, onChartClick } from "./methods/handling";
 import { useInitProcess, useAutoExec } from "./methods/composables";
@@ -55,6 +56,8 @@ import {
   indicator,
   mapCompareEl,
   mapEl,
+  chartEl,
+  compareChartEl,
 } from "@/store/states";
 import { download } from "./methods/utils";
 import { compareJobs, jobs } from "./states";
@@ -86,6 +89,10 @@ 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")
@@ -208,6 +215,15 @@ const chartStyles = computed(() => {
   }
   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 {

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

@@ -2,7 +2,10 @@ import axios from "@/plugins/axios";
 import { getBboxProperty } from "../../utils";
 import { toAbsolute } from "stac-js/src/http.js";
 import { currentCompareUrl, currentUrl } from "@/store/states";
-import { getDatetimeProperty, generateLinksFromItems } from "@/eodashSTAC/helpers";
+import {
+  getDatetimeProperty,
+  generateLinksFromItems,
+} from "@/eodashSTAC/helpers";
 import { readParquetItems } from "@/eodashSTAC/parquet";
 
 /**
@@ -82,10 +85,13 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
               const parquetAsset = Object.values(collection.assets ?? {}).find(
                 (asset) =>
                   asset.type === "application/vnd.apache.parquet" &&
-                asset.roles?.includes("collection-mirror"),
+                  asset.roles?.includes("collection-mirror"),
               );
               if (parquetAsset) {
-                const parquetAbsoluteUrl = toAbsolute(parquetAsset.href, toAbsolute(link.href, absoluteUrl));
+                const parquetAbsoluteUrl = toAbsolute(
+                  parquetAsset.href,
+                  toAbsolute(link.href, absoluteUrl),
+                );
                 await readParquetItems(parquetAbsoluteUrl).then((items) => {
                   collection.links.push(...generateLinksFromItems(items));
                 });

package/widgets/EodashProcess/methods/handling.js

@@ -181,7 +181,9 @@ export async function handleProcesses({
       for (const layer of newLayers) {
         if (layer.type === "WebGLTile" && layer.source?.type === "GeoTIFF") {
           processResults.value.push(...(layer.source.sources ?? []));
+          //@ts-expect-error TODO
         } else if (layer.source && "url" in layer.source) {
+          //@ts-expect-error TODO
           processResults.value.push(layer.source.url);
         }
       }

package/widgets/EodashProcess/methods/outputs.js

@@ -336,6 +336,7 @@ export async function processVector(links, jsonformValue, layerId) {
       type: "Vector",
       source: {
         type: "Vector",
+        //@ts-expect-error TODO
         url: mustache.render(link.href, {
           ...(jsonformValue ?? {}),
         }),

package/widgets/EodashTimeSlider.vue

@@ -0,0 +1,40 @@
+<template>
+  <eox-timeslider
+    v-if="hasMultipleItems"
+    :key="mapEl"
+    @update="update"
+    .externalMapRendering="true"
+    .filters="filters"
+    titleKey="title"
+    layerIdKey="id"
+    for="eox-map#main"
+  />
+</template>
+<script setup>
+import { datetime, mapEl } from "@/store/states";
+import { eodashCollections } from "@/utils/states";
+import "@eox/timeslider";
+import { computed } from "vue";
+
+defineProps({
+  filters: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const hasMultipleItems = computed(() => {
+  return eodashCollections.some((ec) => {
+    const itemLinks = ec.collectionStac?.links.filter((l) => l.rel === "item");
+    const itemsLink = ec.collectionStac?.links.some((l) => l.rel === "items");
+    return (itemLinks && itemLinks.length > 1) || itemsLink;
+  });
+});
+/**
+ *
+ * @param {CustomEvent} e
+ */
+const update = (e) => {
+  datetime.value = e.detail.date.toISOString();
+};
+</script>

package/widgets/EodashTools.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="rootEl" class="d-flex flex-column fill-height bg-primary">
     <div
-      class="d-flex flex-row align-center fill-height justify-space-between pa-2 align-center"
+      class="d-flex flex-row align-center fill-height justify-space-between pa-1 align-center"
     >
       <v-btn
         v-if="props.showIndicatorsBtn"
@@ -61,7 +61,7 @@ const props = defineProps({
   },
   layoutTarget: {
     type: String,
-    default: "light",
+    default: "lite",
   },
   // mdi/js icon
   layoutIcon: {
@@ -81,4 +81,8 @@ const props = defineProps({
 const rootEl = ref(null);
 useTransparentPanel(rootEl);
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.v-btn--size-default {
+  --v-btn-height: 30px;
+}
+</style>

package/widgets/ExportState.vue

@@ -6,12 +6,19 @@
       </v-card-title>
 
       <v-card-text class="py-5 overflow-auto" style="height: 400px">
-        <p class="text-body-2">
-          Copy and paste this code into the map <b>layers field</b> of the
-          storytelling editor:
-        </p>
-        <div class="pa-3 code-block">
-          {{ removeUnneededProperties(getLayers()) }}
+        <div class="d-flex flex-wrap gap-2 mb-4">
+          <v-btn
+            v-for="btn in copyBtns"
+            v-show="!btn.showIf || btn.showIf()"
+            class="text-body-2"
+            @click="btn.copyFn"
+            :key="btn.id"
+            small
+            variant="text"
+            :prepend-icon="[mdiContentCopy]"
+          >
+            copy as {{ btn.copyAs }}
+          </v-btn>
         </div>
 
         <div style="position: absolute; bottom: 15px">
@@ -22,21 +29,22 @@
             </div>
           </v-expand-transition>
         </div>
-        <v-row class="d-flex pt-3 justify-end">
-          <v-col cols="6" class="flex-column align-center text-end">
-            <v-btn
-              v-for="btn in copyBtns"
-              class="text-body-2"
-              @click="btn.copyFn"
-              :key="btn.id"
-              small
-              variant="text"
-              :prepend-icon="[mdiContentCopy]"
-            >
-              copy as {{ btn.copyAs }}
-            </v-btn>
-          </v-col>
-        </v-row>
+
+        <p class="text-body-2 mb-2">
+          <strong>Map Layers Configuration</strong>
+        </p>
+        <div class="pa-3 code-block mb-4">
+          {{ removeUnneededProperties(getLayers()) }}
+        </div>
+
+        <div v-if="props.getChartSpec?.()" class="mb-4">
+          <p class="text-body-2 mb-2">
+            <strong>Chart Spec (for export)</strong>
+          </p>
+          <div class="pa-3 code-block">
+            {{ getChartExportCode() }}
+          </div>
+        </div>
       </v-card-text>
 
       <v-divider></v-divider>
@@ -53,7 +61,10 @@ import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
 import PopUp from "./PopUp.vue";
 import { copyToClipBoard } from "@/utils";
 import { ref } from "vue";
-import { getLayers as getLayerAction } from "@/store/actions";
+import {
+  getLayers as getLayerAction,
+  getChartSpec as getChartSpecAction,
+} from "@/store/actions";
 import { mapPosition, availableMapProjection } from "@/store/states";
 import { removeUnneededProperties } from "@/eodashSTAC/helpers";
 
@@ -64,6 +75,10 @@ const props = defineProps({
     type: Function,
     default: getLayerAction,
   },
+  getChartSpec: {
+    type: Function,
+    default: getChartSpecAction,
+  },
 });
 
 const copySuccess = ref(false);
@@ -85,6 +100,13 @@ const copyBtns = [
     copyFn: async () => await copyToClipBoard(getMapStepCode(), copySuccess),
     copyAs: "map tour section",
   },
+  {
+    id: Symbol(),
+    copyFn: async () =>
+      await copyToClipBoard(getChartExportCode(), copySuccess),
+    copyAs: "chart",
+    showIf: () => !!props.getChartSpec?.(),
+  },
 ];
 
 const getMapStepCode = () => {
@@ -104,6 +126,15 @@ const getMapEntryCode = () => {
   const endTag = `zoom="${z}" center=[${[x, y]}] projection="${availableMapProjection.value}" }-->`;
   return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 };
+
+const getChartExportCode = () => {
+  const chartSpec = props.getChartSpec?.();
+  if (!chartSpec) return "";
+  const preTag =
+    "## Chart Example <!" + '--{as="eox-chart" style="height: 300px;" spec=';
+  const endTag = " }-->";
+  return `${preTag}'${JSON.stringify(chartSpec)}'${endTag}`;
+};
 </script>
 <style scoped>
 .code-block {