@eodash/eodash 5.0.0-alpha.2.15 → 5.0.0-alpha.2.17

package/dist/client/{transition-Dq8XIV_D.js → transition-DRzZPWIN.js}

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

package/dist/client/{webfontloader-qotgY98I.js → webfontloader-CqD-lAx-.js}

@@ -1,4 +1,4 @@
-import { g as Ft } from "./_commonjsHelpers-DaMA6jEr.js";
+import { av as Ft } from "./asWebComponent-DhR2_xlP.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.15",
+  "version": "5.0.0-alpha.2.17",
   "type": "module",
   "types": "./core/client/types.d.ts",
   "files": [
@@ -25,6 +25,7 @@
   },
   "browser": "./core/client/main.js",
   "scripts": {
+    "start": "npx eodash dev --entryPoint core/client/eodash.js",
     "prepare": "rollup -c",
     "prepack": "npm run build:lib",
     "dev": "npx eodash dev --entryPoint core/client/eodash.js",
@@ -46,48 +47,52 @@
     "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.1",
+    "@eox/layercontrol": "^0.20.0",
     "@eox/layout": "^0.1.0",
-    "@eox/map": "1.11.2",
+    "@eox/map": "^1.13.0",
     "@eox/stacinfo": "^0.3.3",
+    "@eox/timecontrol": "^0.7.2",
     "@mdi/js": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vueuse/core": "^10.11.1",
     "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",
+    "vite": "^5.4.2",
+    "vite-plugin-vuetify": "^2.0.4",
     "vue": "^3.2.0",
-    "vuetify": "^3.6.12",
+    "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"
@@ -37,45 +41,27 @@
 <script setup>
 import { DatePicker as VCDatePicker } from "v-calendar";
 import "v-calendar/style.css";
-import { computed, ref, onMounted, watch, inject } from "vue";
-import { eodashKey } from "@/utils/keys";
-import { toAbsolute } from "stac-js/src/http.js";
+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 { extractCollectionUrls } from "@/utils/helpers";
-import axios from "axios";
+import { eodashCollections } from "@/utils/states";
+import log from "loglevel";
 
-/**
- * @param {boolean} reverse
- */
-function jumpDate(reverse) {
-  if (attributes.value && attributes.value.length > 0) {
-    // We have potentially multiple collections we need to iterate (currently only one)
-    let latestDateMS = reverse ? Infinity : -Infinity;
-    attributes.value.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);
-    }
-  }
-}
-
-const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
+// 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",
@@ -84,79 +70,97 @@ const masks = ref({
 /**
  * Attributes displayed on datepicker
  *
- * @type {import("vue").Ref<
+ * @type {import("vue").Reactive<
  *   (
  *     | import("v-calendar/dist/types/src/utils/attribute").AttributeConfig
  *     | undefined
  *   )[]
  * >}
  */
-const attributes = 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();
-    }
-  },
-});
-/** @type {import("@/types").WebComponentProps["onMounted"]} */
-onMounted(() => {
-  const { selectedStac } = storeToRefs(useSTAcStore());
-  watch(
-    [selectedStac],
-    async ([updatedStac]) => {
-      if (updatedStac) {
-        const parentCollUrl = toAbsolute(
-          `./${updatedStac.id}/collection.json`,
-          eodashConfig.stacEndpoint,
-        );
-        const collectionUrls = extractCollectionUrls(
-          selectedStac.value,
-          parentCollUrl,
-        );
-        const wongPalette = [
-          "#009E73",
-          "#0072B2",
-          "#E69F00",
-          "#CC79A7",
-          "#56B4E9",
-          "#D55E00",
+const { selectedStac } = storeToRefs(useSTAcStore());
+
+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);
+
+      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[]} */ ([])),
+          ),
         ];
-        for (let idx = 0; idx < collectionUrls.length; idx++) {
-          const stacCollection = await axios
-            .get(collectionUrls[idx])
-            .then((resp) => resp.data);
-          const dates = stacCollection.links
-            .filter(
-              (/** @type {{ rel: string; datetime: string }} */ item) =>
-                item.rel === "item" && "datetime" in item,
-            )
-            .map(
-              (/** @type {{ datetime: string }} */ it) => new Date(it.datetime),
-            );
-          attributes.value = [
-            {
-              bar: {
-                style: {
-                  backgroundColor: wongPalette[idx % wongPalette.length],
-                },
-              },
-              dates,
+        attributes.push({
+          key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
+          bar: {
+            style: {
+              backgroundColor: wongPalette[idx % wongPalette.length],
             },
-          ];
-        }
+          },
+          dates,
+        });
       }
-    },
-    { immediate: true },
-  );
-});
+      // 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) {
+        const endInterval = new Date(interval[0][1]);
+        log.debug(
+          "Datepicker: found stac extent, setting time to latest value",
+          endInterval,
+        );
+        currentDate.value = endInterval?.getTime();
+      }
+    }
+  },
+  { 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/EodashItemFilter.vue

@@ -71,6 +71,8 @@ const onSelect = async (evt) => {
     .forEach((res) => res.setAttribute("style", defaultStyle));
   const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
   if (item) {
+    // Reset compare stac to empty
+    store.resetSelectedCompareSTAC();
     await store.loadSelectedSTAC(item.href);
   } else {
     // TODO: it is possible to unselect items now

package/widgets/EodashLayerControl.vue

@@ -1,13 +1,80 @@
 <template>
   <span class="d-flex flex-column fill-height overflow-auto pa-4">
-    <eox-layercontrol v-if="mapEl" :for="mapEl" ref="eoxLayercontrol" />
+    <eox-layercontrol
+      v-if="mapElement"
+      :for="mapElement"
+      @datetime:updated="debouncedHandleDateTime"
+      class="fill-height"
+      ref="eoxLayercontrol"
+    />
   </span>
 </template>
 <script setup>
 import "@eox/layercontrol";
 import "@eox/jsonform";
+import "@eox/timecontrol";
+
 import { ref } from "vue";
-import { mapEl } from "@/store/States";
+import { mapEl, mapCompareEl } from "@/store/States";
+import { getColFromLayer } from "@/utils/helpers";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+
+const props = defineProps({
+  map: {
+    type: String,
+    default: "first",
+  },
+});
+
+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) {
+    await ec.fetchCollection();
+    updatedLayers = await ec.updateLayerJson(datetime, layer.get("id"));
+  }
+  /** @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);
+};
+// ------
 </script>