@eodash/eodash 5.1.0 → 5.3.0

package/widgets/EodashProcess/methods/utils.js

@@ -3,6 +3,7 @@ import {
   extractLayerConfig,
   mergeGeojsons,
   replaceLayer,
+  extractLayerLegend,
 } from "@/eodashSTAC/helpers";
 import axios from "@/plugins/axios";
 import { getCompareLayers, getLayers } from "@/store/actions";
@@ -290,7 +291,10 @@ export async function creatAsyncProcessLayerDefinitions(
 
   for (const resultItem of processResults) {
     const flatStyleJSON = extractStyleFromResult(resultItem, flatStyles);
-    let style, layerConfig;
+    /** @type {import("@/types").EodashStyleJson | undefined} */
+    let style;
+    /** @type {Record<string, unknown> | undefined}  */
+    let layerConfig;
     if (flatStyleJSON) {
       const extracted = extractLayerConfig(
         selectedStac?.id ?? "",
@@ -300,6 +304,9 @@ export async function creatAsyncProcessLayerDefinitions(
       style = extracted.style;
     }
 
+    // Check if collection has eox:colorlegend definition, if yes overwrite legend description
+    let extraProperties = extractLayerLegend(selectedStac);
+
     switch (resultItem.type) {
       case "image/tiff": {
         layers.push({
@@ -313,6 +320,7 @@ export async function creatAsyncProcessLayerDefinitions(
               (resultItem.id ?? ""),
             layerControlToolsExpand: true,
             ...(layerConfig && { layerConfig }),
+            ...extraProperties,
           },
           source: {
             type: "GeoTIFF",
@@ -350,12 +358,48 @@ export async function creatAsyncProcessLayerDefinitions(
                 style,
               },
             }),
+            ...extraProperties,
           },
           ...(!style?.variables && { style }),
           interactions: [],
         });
         break;
       }
+      case "application/vnd.flatgeobuf": {
+        // TODO after more flatgeobuf urls are possible in EOxMap https://github.com/EOX-A/EOxElements/issues/1789
+        // we should change this handler to only create one layer instead of many
+        resultItem.urls.forEach((url, i) => {
+          layers.push({
+            type: "Vector",
+            source: {
+              type: "FlatGeoBuf",
+              url,
+            },
+            properties: {
+              id:
+                endpointLink.id +
+                "_process_" +
+                resultItem.id +
+                postfixId +
+                `_${i}`,
+              title:
+                "Results " +
+                (selectedStac?.id ?? "") +
+                " " +
+                (resultItem.id ?? ""),
+              layerControlToolsExpand: true,
+              ...(layerConfig && {
+                layerConfig: {
+                  ...layerConfig,
+                  style,
+                },
+              }),
+              ...extraProperties,
+            },
+          });
+        });
+        break;
+      }
       default:
         console.warn(
           `[eodash] Unsupported result type "${resultItem.type}" for ${resultItem.id} layer creation.`,

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 {

package/dist/client/EodashLayerControl-Bhxjw4V2.js

@@ -1,154 +0,0 @@
-import { computed, ref, createElementBlock, openBlock, createCommentVNode, mergeProps, unref, renderSlot, createElementVNode, toDisplayString } from 'vue';
-import '@eox/layercontrol';
-import '@eox/jsonform';
-import '@eox/timecontrol';
-import 'color-legend-element';
-import { H as mapCompareEl, d as mapEl, I as getColFromLayer } from './helpers-Dy0Q13tP.js';
-import { _ as _export_sfc, Y as useSTAcStore, a1 as layerControlFormValueCompare, a2 as layerControlFormValue, a0 as eodashCompareCollections, $ as eodashCollections } from './asWebComponent-By_7_JjS.js';
-import { storeToRefs } from 'pinia';
-
-const _style_0 = "eox-layercontrol[data-v-88d02d9c]{overflow:auto}";
-
-const _hoisted_1 = { class: "d-flex flex-column" };
-const _hoisted_2 = ["for"];
-const _hoisted_3 = {
-  key: 0,
-  class: "mt-2 mb-2"
-};
-
-
-const _sfc_main = {
-  __name: 'EodashLayerControl',
-  props: {
-  map: {
-    /** @type {import("vue").PropType<"first" | "second">} */
-    //@ts-expect-error todo
-    type: String,
-    default: "first",
-  },
-  tools: {
-    type: Array,
-    default: () => ["datetime", "info", "config", "legend", "opacity"],
-  },
-  title: {
-    type: String || Boolean,
-    default: "Layers",
-  },
-  cssVars: {
-    type: Object,
-  },
-},
-  setup(__props) {
-
-const props = __props;
-
-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) {
-    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);
-};
-// ------
-/**
- *
- * @param {Event & {detail:{layer:import("ol/layer").Layer;jsonformValue:Record<string,any>}}} evt
- */
-const onLayerConfigChange = (evt) => {
-  if (props.map === "second") {
-    layerControlFormValueCompare.value = evt.detail.jsonformValue;
-  } else {
-    layerControlFormValue.value = evt.detail.jsonformValue;
-  }
-};
-
-return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("span", _hoisted_1, [
-    (showControls.value)
-      ? (openBlock(), createElementBlock("eox-layercontrol", mergeProps({ key: unref(mapElement) }, config, {
-          for: unref(mapElement),
-          "onDatetime:updated": debouncedHandleDateTime,
-          toolsAsList: "true",
-          style: {"--eox-background-color":"transparent"},
-          ref_key: "eoxLayercontrol",
-          ref: eoxLayercontrol,
-          "on:layerConfig:change": onLayerConfigChange
-        }), [
-          renderSlot(_ctx.$slots, "layerstitle", {}, () => [
-            createElementVNode("div", null, [
-              (__props.title)
-                ? (openBlock(), createElementBlock("p", _hoisted_3, [
-                    createElementVNode("strong", null, toDisplayString(__props.title), 1 /* TEXT */)
-                  ]))
-                : createCommentVNode("v-if", true)
-            ])
-          ], true)
-        ], 16 /* FULL_PROPS */, _hoisted_2))
-      : createCommentVNode("v-if", true)
-  ]))
-}
-}
-
-};
-const EodashLayerControl = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-88d02d9c"]]);
-
-export { EodashLayerControl as default };

package/dist/client/EodashMapBtns-WoGq8MuV.js

@@ -1,173 +0,0 @@
-import { computed, ref, createElementBlock, openBlock, withDirectives, createCommentVNode, createBlock, createVNode, unref, withCtx, triggerRef } from 'vue';
-import { _ as _export_sfc, Y as useSTAcStore, r as useDisplay, Z as useTransparentPanel, V as VBtn } from './asWebComponent-By_7_JjS.js';
-import { z as activeTemplate, K as availableMapProjection, L as changeMapProjection, y as poi, D as comparePoi, M as setActiveTemplate } from './helpers-Dy0Q13tP.js';
-import { mdiCompareRemove, mdiCompare, mdiMapPlus, mdiEarthBox, mdiStarFourPointsCircleOutline } from '@mdi/js';
-import ExportState from './ExportState-D-iuwaad.js';
-import _sfc_main$1 from './PopUp-BsYLvWch.js';
-import EodashItemFilter from './EodashItemFilter-DPznh8UB.js';
-import { storeToRefs } from 'pinia';
-import { l as loadPOiIndicator } from './handling-CgmFXkW6.js';
-import { T as Tooltip } from './index-Dqj4tbx2.js';
-
-const _style_0 = ".map-btn[data-v-771740c6]{width:36px;height:36px;border-radius:25%;margin:4px}";
-
-const _sfc_main = {
-  __name: 'EodashMapBtns',
-  props: {
-    exportMap: {
-      type: Boolean,
-      default: true,
-    },
-    changeProjection: {
-      type: Boolean,
-      default: true,
-    },
-    compareIndicators: {
-      /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
-      type: [Boolean, Object],
-      default: true,
-    },
-    backToPOIs: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup(__props) {
-
-
-const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
-const { resetSelectedCompareSTAC } = useSTAcStore();
-const { smAndDown } = useDisplay();
-const popupWidth = computed(() => (smAndDown.value ? "80%" : "70%"));
-const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
-
-const showMapState = ref(false);
-const showCompareIndicators = ref(false);
-const compareIcon = computed(() =>
-  activeTemplate.value ===
-  ((typeof __props.compareIndicators === "object" &&
-    __props.compareIndicators?.compareTemplate) ||
-    "compare")
-    ? mdiCompareRemove
-    : mdiCompare,
-);
-
-const onCompareClick = () => {
-  showCompareIndicators.value = !showCompareIndicators.value;
-
-  const fallbackTemplate =
-    (typeof __props.compareIndicators === "object" &&
-      __props.compareIndicators.fallbackTemplate) ||
-    "expert";
-  selectedCompareStac.value = null;
-  resetSelectedCompareSTAC();
-  setActiveTemplate(fallbackTemplate);
-  triggerRef(selectedStac);
-};
-
-/** @type {import("vue").Ref<HTMLDivElement|null>} */
-const rootRef = ref(null);
-
-const onSelectCompareIndicator = () => {
-  const compareTemplate =
-    (typeof __props.compareIndicators === "object" &&
-      __props.compareIndicators.compareTemplate) ||
-    "compare";
-  setActiveTemplate(compareTemplate);
-  showCompareIndicators.value = !showCompareIndicators.value;
-};
-
-useTransparentPanel(rootRef);
-
-return (_ctx, _cache) => {
-                                                     
-                                                         
-
-  return (openBlock(), createElementBlock("div", {
-    ref_key: "rootRef",
-    ref: rootRef,
-    class: "d-flex flex-column align-end"
-  }, [
-    (__props.exportMap)
-      ? withDirectives((openBlock(), createBlock(VBtn, {
-          key: 0,
-          class: "map-btn",
-          icon: [unref(mdiMapPlus)],
-          size: "small",
-          onClick: _cache[0] || (_cache[0] = $event => (showMapState.value = !showMapState.value))
-        }, null, 8 /* PROPS */, ["icon"])), [
-          [Tooltip, 'Extract Storytelling configuration', "bottom"]
-        ])
-      : createCommentVNode("v-if", true),
-    (__props.exportMap)
-      ? (openBlock(), createBlock(ExportState, {
-          key: 1,
-          modelValue: showMapState.value,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((showMapState).value = $event))
-        }, null, 8 /* PROPS */, ["modelValue"]))
-      : createCommentVNode("v-if", true),
-    (__props.changeProjection && !!unref(availableMapProjection))
-      ? withDirectives((openBlock(), createBlock(VBtn, {
-          key: 2,
-          class: "map-btn",
-          icon: [unref(mdiEarthBox)],
-          size: "small",
-          onClick: _cache[2] || (_cache[2] = $event => (unref(changeMapProjection)(unref(availableMapProjection))))
-        }, null, 8 /* PROPS */, ["icon"])), [
-          [Tooltip, 'Change map projection', "bottom"]
-        ])
-      : createCommentVNode("v-if", true),
-    (__props.compareIndicators)
-      ? withDirectives((openBlock(), createBlock(VBtn, {
-          key: 3,
-          class: "map-btn",
-          icon: [compareIcon.value],
-          size: "small",
-          onClick: onCompareClick
-        }, null, 8 /* PROPS */, ["icon"])), [
-          [Tooltip, 'Compare mode', "bottom"]
-        ])
-      : createCommentVNode("v-if", true),
-    (__props.backToPOIs && (unref(poi) || unref(comparePoi)))
-      ? withDirectives((openBlock(), createBlock(VBtn, {
-          key: 4,
-          class: "map-btn",
-          icon: [unref(mdiStarFourPointsCircleOutline)],
-          size: "small",
-          onClick: _cache[3] || (_cache[3] = $event => (unref(loadPOiIndicator)()))
-        }, null, 8 /* PROPS */, ["icon"])), [
-          [Tooltip, 'back to POIs', "bottom"]
-        ])
-      : createCommentVNode("v-if", true),
-    createVNode(_sfc_main$1, {
-      modelValue: showCompareIndicators.value,
-      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((showCompareIndicators).value = $event)),
-      maxWidth: popupWidth.value,
-      width: popupWidth.value,
-      "max-height": popupHeight.value,
-      height: popupHeight.value
-    }, {
-      default: withCtx(() => [
-        createVNode(EodashItemFilter, {
-          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": "",
-          onSelect: onSelectCompareIndicator
-        })
-      ]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["modelValue", "maxWidth", "width", "max-height", "height"])
-  ], 512 /* NEED_PATCH */))
-}
-}
-
-};
-const EodashMapBtns = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-771740c6"]]);
-
-export { EodashMapBtns as default };