@eodash/eodash 5.0.0-alpha.2.16 → 5.0.0-alpha.2.18

package/dist/client/{transition-U5aFjJtV.js → transition-DNdd2Y-1.js}

@@ -1,4 +1,4 @@
-import { p as m, az as b, d, bo as l, ab as u } from "./asWebComponent-3OsFQJVx.js";
+import { p as m, az as b, d, bp as l, ab as u } from "./asWebComponent-tNU8_fkz.js";
 const j = m({
   transition: {
     type: [Boolean, String, Object],

package/dist/client/{webfontloader-D_JbBwHu.js → webfontloader-C7dpDL7m.js}

@@ -1,4 +1,4 @@
-import { av as Ft } from "./asWebComponent-3OsFQJVx.js";
+import { av as Ft } from "./asWebComponent-tNU8_fkz.js";
 var ot = { exports: {} };
 (function(O) {
   (function() {

package/dist/node/cli.js

@@ -17,4 +17,4 @@ ${i.lib?`<eo-dash style="height:100dvh;"/>
 <script type="module" src="${t.resolve(`/@fs/${c}`,"core/client/render.js")}"><\/script>
 `}
 </body>
-</html>`,D=C(({mode:e,command:n})=>({base:i.base??"",cacheDir:z,plugins:[N({customElement:!1,template:{transformAssetUrls:A,compilerOptions:{isCustomElement:a=>!a.includes("v-")&&a.includes("-")}}}),O({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:M}],customLogger:v,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":g,"user:widgets":w},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**")]},port:i.port??3e3,open:i.open,fs:{allow:[x(process.cwd())]},host:i.host},root:c,optimizeDeps:e==="development"?{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs"],noDiscovery:!0}:{},publicDir:i.publicDir===!1?!1:R,build:{lib:i.lib&&n==="build"&&{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},outDir:f,emptyOutDir:!0,rollupOptions:i.lib&&n==="build"?{input:t.join(c,"core/client/asWebComponent.js")}:void 0,target:"esnext"}}));async function M(e){e.watcher.add([g,l,t.join(w,"**/*.vue")]);let n="";const a=v.info;return v.info=(o,r)=>{if(o.includes("core")){const d=o.split("/")[0].split(" ");d.pop();const p=d.join(" ")+" "+n.replace(s,"");return a(p,r)}return a(o,r)},e.watcher.on("change",async o=>{n=o,o===l&&e.hot.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,r,d)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){r.statusCode=200,r.setHeader("Content-Type","text/javascript"),u(l)&&await I(l).then(p=>{r.write(p)}),r.end();return}if(o.url?.endsWith(".html")){r.statusCode=200,r.setHeader("Content-Type","text/html");const p=await e.transformIndexHtml(o.url,y,o.originalUrl);r.end(p);return}d()})}}const Y=async()=>{const e=await k(await D({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},B=async()=>{const e=async()=>{const n=await D({mode:"production",command:"build"});await F(n),u(l)&&await L(l,t.join(f,"config.js"),{recursive:!0}).catch(a=>{console.error(a)})};if(i.lib)await e();else{const n=t.join(c,"/index.html");await T(n,y).then(async()=>{await e(),await $(n).catch(()=>{console.error("failed to remove index.html")})})}};async function G(){(await S({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:f}})).printUrls()}const K=process.argv?.[2];(async()=>{switch(K){case"dev":await Y();break;case"build":await B();break;case"preview":await G();break;default:console.error("command not found");break}})();
+</html>`,D=C(({mode:e,command:n})=>({base:i.base??"",cacheDir:z,plugins:[N({customElement:!1,template:{transformAssetUrls:A,compilerOptions:{isCustomElement:a=>!a.includes("v-")&&a.includes("-")}}}),O({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:M}],customLogger:v,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":g,"user:widgets":w},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**")]},port:i.port??3e3,open:i.open,fs:{allow:[x(process.cwd())]},host:i.host},root:c,optimizeDeps:e==="development"?{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs","loglevel"],noDiscovery:!0}:{},publicDir:i.publicDir===!1?!1:R,build:{lib:i.lib&&n==="build"&&{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},outDir:f,emptyOutDir:!0,rollupOptions:i.lib&&n==="build"?{input:t.join(c,"core/client/asWebComponent.js")}:void 0,target:"esnext"}}));async function M(e){e.watcher.add([g,l,t.join(w,"**/*.vue")]);let n="";const a=v.info;return v.info=(o,r)=>{if(o.includes("core")){const d=o.split("/")[0].split(" ");d.pop();const p=d.join(" ")+" "+n.replace(s,"");return a(p,r)}return a(o,r)},e.watcher.on("change",async o=>{n=o,o===l&&e.hot.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,r,d)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){r.statusCode=200,r.setHeader("Content-Type","text/javascript"),u(l)&&await I(l).then(p=>{r.write(p)}),r.end();return}if(o.url?.endsWith(".html")){r.statusCode=200,r.setHeader("Content-Type","text/html");const p=await e.transformIndexHtml(o.url,y,o.originalUrl);r.end(p);return}d()})}}const Y=async()=>{const e=await k(await D({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},B=async()=>{const e=async()=>{const n=await D({mode:"production",command:"build"});await F(n),u(l)&&await L(l,t.join(f,"config.js"),{recursive:!0}).catch(a=>{console.error(a)})};if(i.lib)await e();else{const n=t.join(c,"/index.html");await T(n,y).then(async()=>{await e(),await $(n).catch(()=>{console.error("failed to remove index.html")})})}};async function G(){(await S({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:f}})).printUrls()}const K=process.argv?.[2];(async()=>{switch(K){case"dev":await Y();break;case"build":await B();break;case"preview":await G();break;default:console.error("command not found");break}})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.16",
+  "version": "5.0.0-alpha.2.18",
   "type": "module",
   "types": "./core/client/types.d.ts",
   "files": [
@@ -47,49 +47,51 @@
     "docs:generate": "typedoc --options typedoc.config.json"
   },
   "dependencies": {
-    "@eox/itemfilter": "^1.0.1",
+    "@eox/itemfilter": "^1.1.0",
     "@eox/jsonform": "^0.8.2",
-    "@eox/layercontrol": "^0.18.2-dev.1722439716.0",
+    "@eox/layercontrol": "^0.20.1-dev.1726221051.0",
     "@eox/layout": "^0.1.0",
-    "@eox/map": "1.12.1-dev.1723130201.0",
+    "@eox/map": "^1.13.0",
     "@eox/stacinfo": "^0.3.3",
-    "@eox/timecontrol": "^0.6.1",
+    "@eox/timecontrol": "^0.7.3-dev.1726219233.0",
     "@mdi/js": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.2",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
-    "axios": "^1.7.2",
+    "axios": "^1.7.4",
+    "axios-cache-interceptor": "^1.5.3",
     "commander": "^12.1.0",
-    "core-js": "^3.37.1",
-    "pinia": "^2.1.7",
-    "sass": "^1.77.7",
+    "core-js": "^3.38.1",
+    "loglevel": "^1.9.1",
+    "pinia": "^2.2.2",
+    "sass": "^1.77.8",
     "stac-js": "^0.0.9",
     "stac-ts": "^1.0.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.3.3",
-    "vite-plugin-vuetify": "^2.0.3",
-    "vue": "^3.2.0",
-    "vuetify": "^3.6.12",
+    "vite": "^5.4.2",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vue": "3.4.38",
+    "vuetify": "^3.7.0",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.24.7",
+    "@babel/types": "^7.25.4",
     "@eox/eslint-config": "^2.0.0",
-    "@pinia/testing": "^0.1.3",
-    "@types/node": "latest",
+    "@pinia/testing": "^0.1.5",
+    "@types/node": "^22.5.0",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
-    "cypress": "^13.13.0",
-    "eslint": "^9.6.0",
+    "cypress": "^13.13.3",
+    "eslint": "^9.9.0",
     "eslint-plugin-vue": "^9.27.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "terminate": "^2.8.0",
-    "typedoc": "^0.26.4",
-    "typedoc-plugin-markdown": "^4.2.0",
+    "typedoc": "^0.26.6",
+    "typedoc-plugin-markdown": "^4.2.5",
     "typedoc-plugin-vue": "^1.2.0",
     "typedoc-vitepress-theme": "^1.0.1",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "unplugin-fonts": "^1.1.1",
-    "vitepress": "^1.3.0",
+    "vitepress": "^1.3.3",
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.22"
   },

package/widgets/EodashDatePicker.vue

@@ -1,5 +1,9 @@
 <template>
-  <VCDatePicker v-model="currentDate" :masks="masks" :attributes="attributes">
+  <VCDatePicker
+    v-model.number="currentDate"
+    :masks="masks"
+    :attributes="attributes"
+  >
     <template #default="{ inputValue, inputEvents }">
       <div
         class="flex rounded-lg border border-gray-300 dark:border-gray-600"
@@ -13,6 +17,11 @@
         />
       </div>
     </template>
+    <template #footer v-if="hintText">
+      <div class="w-full px-4 pb-3" style="font-size: 12px">
+        <span v-html="hintText" />
+      </div>
+    </template>
   </VCDatePicker>
   <v-row align="center" justify="center" style="margin-top: 6px">
     <v-btn
@@ -33,49 +42,49 @@
     </v-btn>
   </v-row>
 </template>
+<style>
+.vc-day-content {
+  color: #5e5e5e;
+  font-weight: normal;
+}
+</style>
 
 <script setup>
 import { DatePicker as VCDatePicker } from "v-calendar";
 import "v-calendar/style.css";
-import { computed, ref, onMounted, watch, reactive } from "vue";
+import { watch, reactive, ref, customRef } from "vue";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 import { datetime } from "@/store/States";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
 import { eodashCollections } from "@/utils/states";
+import log from "loglevel";
 
-/**
- * @param {boolean} reverse
- */
-function jumpDate(reverse) {
-  if (attributes.length) {
-    // We have potentially multiple collections we need to iterate (currently only one)
-    let latestDateMS = reverse ? Infinity : -Infinity;
-    attributes.forEach((coll) => {
-      if (coll?.dates) {
-        coll.dates.forEach((d) => {
-          // TODO: we need to handle time ranges and other options here
-          if (d instanceof Date) {
-            if (
-              (!reverse && d.getTime() > latestDateMS) ||
-              (reverse && d.getTime() < latestDateMS)
-            ) {
-              latestDateMS = d.getTime();
-            }
-          }
-        });
-      }
-    });
-    if (latestDateMS !== 0) {
-      currentDate.value = new Date(latestDateMS);
-    }
-  }
-}
+// holds the number value of the datetime
+const currentDate = customRef((track, trigger) => ({
+  get() {
+    track();
+    return new Date(datetime.value).getTime();
+  },
+  /** @param {number} num */
+  set(num) {
+    trigger();
+    log.debug("Datepicker setting currentDate", datetime.value);
+    datetime.value = new Date(num).toISOString();
+  },
+}));
 
 const masks = ref({
   input: "YYYY-MM-DD",
 });
 
+defineProps({
+  hintText: {
+    type: String,
+    default: null,
+  },
+});
+
 /**
  * Attributes displayed on datepicker
  *
@@ -88,67 +97,82 @@ const masks = ref({
  */
 const attributes = reactive([]);
 
-const currentDate = computed({
-  get() {
-    return datetime.value ? new Date(datetime.value) : new Date();
-  },
-  /** @param {Date | string} updatedDate */
-  set(updatedDate) {
-    if (updatedDate instanceof Date && !isNaN(updatedDate.getTime())) {
-      datetime.value = new Date(
-        updatedDate.getTime() - updatedDate.getTimezoneOffset() * 60000,
-      ).toISOString();
-    } else {
-      datetime.value = new Date().toISOString();
-    }
-  },
-});
+const { selectedStac } = storeToRefs(useSTAcStore());
 
-onMounted(() => {
-  const { selectedStac } = storeToRefs(useSTAcStore());
-  watch(
-    [selectedStac],
-    async ([updatedStac]) => {
-      if (updatedStac) {
-        const wongPalette = [
-          "#009E73",
-          "#0072B2",
-          "#E69F00",
-          "#CC79A7",
-          "#56B4E9",
-          "#D55E00",
-        ];
+watch(
+  selectedStac,
+  async (updatedStac, previousStac) => {
+    if (updatedStac && previousStac?.id !== updatedStac.id) {
+      log.debug("Datepicker selected STAC change triggered");
+      const wongPalette = [
+        "#009E73",
+        "#0072B2",
+        "#E69F00",
+        "#CC79A7",
+        "#56B4E9",
+        "#D55E00",
+      ];
+      // remove old values
+      attributes.splice(0, attributes.length);
 
-        // remove old values
-        attributes.length = 0;
-        for (let idx = 0; idx < eodashCollections.length; idx++) {
-          const dates = [
-            ...new Set(
-              eodashCollections[idx]
-                .getItems()
-                ?.map((it) => new Date(/** @type {string} */ (it.datetime))),
-            ),
-          ];
-          attributes.push({
-            key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
-            bar: {
-              style: {
-                backgroundColor: wongPalette[idx % wongPalette.length],
-              },
+      for (let idx = 0; idx < eodashCollections.length; idx++) {
+        log.debug("Retrieving dates", eodashCollections[idx]);
+        await eodashCollections[idx].fetchCollection();
+        const dates = [
+          ...new Set(
+            eodashCollections[idx].getItems()?.reduce((valid, it) => {
+              const parsed = Date.parse(/** @type {string} */ (it.datetime));
+              if (parsed) {
+                valid.push(new Date(parsed));
+              }
+              return valid;
+            }, /** @type {Date[]} */ ([])),
+          ),
+        ];
+        attributes.push({
+          key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
+          bar: {
+            style: {
+              backgroundColor: wongPalette[idx % wongPalette.length],
+            },
+          },
+          dates,
+          content: {
+            style: {
+              color: "#000000",
+              "font-weight": "bold",
             },
-            dates,
-          });
-        }
-        // We try to set the current time selection
-        // to latest extent date
-        // @ts-expect-error it seems the temporal extent is not defined in type
-        const interval = updatedStac?.extent?.temporal?.interval;
-        if (interval && interval.length > 0 && interval[0].length > 1) {
-          currentDate.value = new Date(interval[0][1]);
-        }
+          },
+        });
       }
-    },
-    { immediate: true },
-  );
-});
+    }
+  },
+  { immediate: true },
+);
+
+/**
+ * @param {boolean} reverse
+ */
+function jumpDate(reverse) {
+  if (attributes.length) {
+    let latestDateMS = reverse ? Infinity : -Infinity;
+    attributes.forEach((coll) => {
+      if (coll?.dates) {
+        coll.dates.forEach((d) => {
+          // TODO: we need to handle time ranges and other options here
+          if (d instanceof Date) {
+            const mathFun = reverse ? "min" : "max";
+            latestDateMS = Math[mathFun](latestDateMS, d.getTime());
+          }
+        });
+      }
+    });
+    currentDate.value =
+      latestDateMS === -Infinity
+        ? Date.now()
+        : latestDateMS === Infinity
+          ? 0
+          : latestDateMS;
+  }
+}
 </script>

package/widgets/EodashLayerControl.vue

@@ -1,10 +1,12 @@
 <template>
-  <span class="d-flex flex-column fill-height overflow-auto pa-4">
+  <span class="d-flex flex-column fill-height overflow-auto">
     <eox-layercontrol
       v-if="mapElement"
       :for="mapElement"
+      .tools="['datetime', 'info', 'config', 'opacity']"
       @datetime:updated="debouncedHandleDateTime"
       class="fill-height"
+      disableTabs="true"
       ref="eoxLayercontrol"
     />
   </span>

package/widgets/EodashMap.vue

@@ -1,39 +1,33 @@
 <template>
   <eox-map-compare
     class="fill-height fill-width overflow-none"
-    :enabled="showCompare"
+    .enabled="showCompare"
   >
     <eox-map
       class="fill-height fill-width overflow-none"
       slot="first"
       ref="eoxMap"
-      :sync="compareMap"
+      .config="eoxMapConfig"
       id="main"
-      :config="eoxMapConfig"
+      .layers="eoxMapLayers"
     />
     <eox-map
       class="fill-height fill-width overflow-none"
       id="compare"
       slot="second"
       ref="compareMap"
-      :config="eoxCompareMapConfig"
+      .config="eoxCompareMapConfig"
+      .layers="eoxMapCompareLayers"
     />
   </eox-map-compare>
 </template>
 <script setup>
-import { computed, onMounted, reactive, ref } from "vue";
-import {
-  currentUrl,
-  currentCompareUrl,
-  datetime,
-  mapEl,
-  mapPosition,
-  mapCompareEl,
-} from "@/store/States";
-import { storeToRefs } from "pinia";
-import { useSTAcStore } from "@/store/stac";
 import "@eox/map";
 import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
+import { computed, onMounted, ref } 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";
 
@@ -44,38 +38,48 @@ const props = defineProps({
   },
 });
 
+/** @type {import("vue").Ref<Record<string,any>[]>} */
+const eoxMapLayers = ref([
+  {
+    type: "Tile",
+    source: { type: "OSM" },
+    properties: {
+      id: "osm",
+      title: "Background",
+    },
+  },
+]);
+
+/** @type {import("vue").Ref<Record<string,any>[]>} */
+const eoxMapCompareLayers = ref([
+  {
+    type: "Tile",
+    source: { type: "OSM" },
+    properties: {
+      id: "osm",
+      title: "Background",
+    },
+  },
+]);
+
 /** @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 = reactive({
+const eoxMapConfig = {
   /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
   /** @type {number | undefined} */
   zoom: 4,
-  // TODO: we should probably introduce some way of defining
-  layers: [
-    {
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-      },
-      source: {
-        type: "OSM",
-      },
-    },
-  ],
-});
+};
 
-const eoxCompareMapConfig = reactive({
+const eoxCompareMapConfig = {
   /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
   /** @type {number | undefined} */
   zoom: 4,
-  layers: [],
-});
+};
 
 // Check if selected indicator was already set in store
 if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
@@ -84,38 +88,42 @@ if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   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",
 );
 
 useHandleMapMoveEnd(eoxMap, mapPosition);
 
-const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
-
-if (props.enableCompare) {
-  useInitMap(
-    compareMap,
-    //@ts-expect-error todo selectedStac as collection
-    selectedCompareStac,
-    eodashCompareCollections,
-    currentCompareUrl,
-    datetime,
-  );
-}
-useInitMap(
-  eoxMap,
-  //@ts-expect-error todo selectedStac as collection
-  selectedStac,
-  eodashCollections,
-  currentUrl,
-  datetime,
-);
-
 onMounted(() => {
+  const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
   // assign map Element state to eox map
   mapEl.value = eoxMap.value;
+
   if (props.enableCompare) {
     mapCompareEl.value = compareMap.value;
   }
+
+  if (props.enableCompare) {
+    useInitMap(
+      compareMap,
+      //@ts-expect-error todo selectedStac as collection
+      selectedCompareStac,
+      eodashCompareCollections,
+      datetime,
+      eoxMapCompareLayers,
+      eoxMap,
+    );
+  }
+
+  useInitMap(
+    eoxMap,
+    //@ts-expect-error todo selectedStac as collection
+    selectedStac,
+    eodashCollections,
+    datetime,
+    eoxMapLayers,
+    compareMap,
+  );
 });
 </script>

package/widgets/ExportState.vue

@@ -7,8 +7,8 @@
 
       <v-card-text class="py-5 overflow-auto" style="height: 400px">
         <p class="text-body-2">
-          Copy and paste this code into the map layers field of the storytelling
-          editor:
+          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()) }}
@@ -110,5 +110,7 @@ const mapEntryCode = computed(() => {
   background-color: #ddd;
   font-family: monospace;
   font-size: small;
+  max-height: 200px;
+  overflow-y: auto;
 }
 </style>