@eodash/eodash 5.2.0 → 5.3.1

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-BLBds28C.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 { I as mapCompareEl, d as mapEl, J as getColFromLayer } from './helpers-wXK7Ywio.js';
-import { _ as _export_sfc, E as useSTAcStore, K as layerControlFormValueCompare, L as layerControlFormValue, J as eodashCompareCollections, I as eodashCollections } from './asWebComponent-ZyEzWOOf.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 };