@eodash/eodash 5.0.0-alpha.2.8 → 5.0.0-processing

package/dist/types/widgets/PopUp.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    height: string;
+    maxHeight: string;
+    maxWidth: string;
+    width: string;
+    widget?: import("../core/client/types").Widget<"compiletime"> | undefined;
+    $props: {
+        readonly height?: string | undefined;
+        readonly maxHeight?: string | undefined;
+        readonly maxWidth?: string | undefined;
+        readonly width?: string | undefined;
+        readonly widget?: import("../core/client/types").Widget<"compiletime"> | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};

package/dist/types/widgets/WidgetsContainer.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    widgets: Omit<import("../core/client/types").Widget<"compiletime">, "layout">[];
+    $props: {
+        readonly widgets?: Omit<import("../core/client/types").Widget<"compiletime">, "layout">[] | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.8",
+  "version": "5.0.0-processing",
   "type": "module",
-  "types": "./core/client/types.d.ts",
   "files": [
     "core/client",
     "widgets",
@@ -10,11 +9,11 @@
   ],
   "exports": {
     ".": {
-      "types": "./core/client/types.d.ts",
+      "types": "./dist/types/core/client/types.d.ts",
       "default": "./core/client/main.js"
     },
     "./webcomponent": {
-      "types": "./core/client/asWebComponent.d.ts",
+      "types": "./dist/types/core/client/asWebComponent.d.ts",
       "default": "./dist/client/eo-dash.js"
     },
     "./webcomponent.css": "./dist/client/style.css",
@@ -25,12 +24,15 @@
   },
   "browser": "./core/client/main.js",
   "scripts": {
+    "start": "npx eodash dev --entryPoint core/client/eodash.js",
     "prepare": "rollup -c",
-    "prepack": "npm run build:lib",
+    "prepack": "npm run build:lib && npm run build:types",
     "dev": "npx eodash dev --entryPoint core/client/eodash.js",
+    "dev:lib": "npx eodash dev --entryPoint core/client/eodash.js --lib",
     "build": "npx eodash build --entryPoint core/client/eodash.js",
     "build:lib": "npx eodash build --entryPoint core/client/eodash.js --lib --outDir dist/client",
     "build:cli": "rollup -c",
+    "build:types": "vue-tsc --declaration  --emitDeclarationOnly && cp -rf ./core/client/types.d.ts ./dist/types/core/client/types.d.ts && tsc-alias",
     "check": "vue-tsc --noEmit --skipLibCheck && eslint .",
     "format": "prettier . --write --ignore-unknown",
     "preview": "npx eodash preview",
@@ -46,49 +48,68 @@
     "docs:generate": "typedoc --options typedoc.config.json"
   },
   "dependencies": {
-    "@eox/itemfilter": "^0.14.1",
-    "@eox/layout": "^0.1.0",
-    "@eox/map": "^1.9.1",
-    "@eox/stacinfo": "^0.3.0",
+    "@eox/chart": "^0.3.0",
+    "@eox/drawtools": "^0.13.1",
+    "@eox/itemfilter": "^1.6.2",
+    "@eox/jsonform": "^0.11.0",
+    "@eox/layercontrol": "^0.26.0",
+    "@eox/layout": "^0.3.0",
+    "@eox/map": "^1.17.0",
+    "@eox/stacinfo": "^0.6.0",
+    "@eox/timecontrol": "^0.10.0",
     "@mdi/js": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vueuse/core": "^11.1.0",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
-    "axios": "^1.6.2",
-    "commander": "^12.0.0",
-    "core-js": "^3.29.0",
-    "pinia": "^2.0.0",
-    "sass": "^1.60.0",
+    "axios": "^1.7.7",
+    "axios-cache-interceptor": "^1.6.2",
+    "commander": "^12.1.0",
+    "color-legend-element": "^1.3.0",
+    "core-js": "^3.39.0",
+    "loglevel": "^1.9.2",
+    "pinia": "^2.2.6",
+    "sass": "^1.80.6",
     "stac-js": "^0.0.9",
-    "stac-ts": "^1.0.3",
-    "v-calendar": "^3.1.2",
-    "vite": "^5.1.5",
-    "vite-plugin-vuetify": "^2.0.0",
-    "vue": "^3.2.0",
-    "vuetify": "^3.6.5",
+    "v-calendar": "3.0.0",
+    "vega": "^5.30.0",
+    "vega-embed": "^6.28.0",
+    "vega-lite": "^5.21.0",
+    "vite": "^5.4.10",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vue": "^3.5.0",
+    "vuetify": "^3.7.4",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.21.4",
+    "@babel/types": "^7.26.0",
     "@eox/eslint-config": "^2.0.0",
-    "@pinia/testing": "^0.1.3",
-    "@types/node": "latest",
+    "@pinia/testing": "^0.1.7",
+    "@types/mustache": "^4.2.5",
+    "@types/node": "^22.9.0",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
-    "cypress": "^13.13.0",
-    "eslint": "^9.4.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "prettier": "^3.3.2",
-    "terminate": "^2.6.1",
-    "typedoc": "^0.26.3",
-    "typedoc-plugin-markdown": "^4.1.0",
-    "typedoc-plugin-vue": "^1.1.0",
-    "typedoc-vitepress-theme": "^1.0.0-next.0",
-    "typescript": "^5.0.0",
-    "unplugin-fonts": "^1.0.3",
-    "vitepress": "^1.0.0",
-    "vitest": "^1.4.0",
+    "cypress": "^13.15.2",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "mustache": "^4.2.0",
+    "prettier": "^3.3.3",
+    "rollup": "^4.24.4",
+    "stac-ts": "^1.0.4",
+    "terminate": "^2.8.0",
+    "typedoc": "^0.27.0",
+    "typedoc-plugin-markdown": "^4.2.10",
+    "typedoc-plugin-vue": "^1.2.0",
+    "typedoc-vitepress-theme": "^1.0.2",
+    "typescript": "^5.6.3",
+    "unplugin-fonts": "^1.1.1",
+    "vitepress": "^1.5.0",
+    "tsc-alias": "^1.8.10",
+    "vitest": "^1.6.0",
     "vue-tsc": "2.0.22"
   },
+  "engines": {
+    "node": ">=20.15.1"
+  },
   "bin": {
     "eodash": "./dist/node/cli.js"
   }

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,129 +42,148 @@
     </v-btn>
   </v-row>
 </template>
-
 <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, onMounted } 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/eodashSTAC";
-
-/**
- * @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);
-    }
-  }
-}
+import { eodashCollections } from "@/utils/states";
+import log from "loglevel";
 
-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",
 });
 
+defineProps({
+  hintText: {
+    type: String,
+    default: null,
+  },
+});
+
 /**
  * Attributes displayed on datepicker
  *
- * @type {import("vue").Ref<
+ * @type {import("vue").Reactive<
  *   (
- *     | import("v-calendar/dist/types/src/utils/attribute").AttributeConfig
+ *     | Partial<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 (
-            await fetch(collectionUrls[idx])
-          ).json();
-          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,
+          content: {
+            style: {
+              color: "#000000",
+              "font-weight": "bold",
+            },
+          },
+        });
       }
-    },
-    { 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;
+  }
+}
+
+// fixes calendar dispalcement on lib mode
+const transform = ref("");
+onMounted(() => {
+  transform.value = document.querySelector("eo-dash")
+    ? "translate3d(50px,-80px,0)"
+    : "translate3d(0px,-80px,0)";
 });
 </script>
+<style>
+.vc-day-content {
+  color: #5e5e5e;
+  font-weight: normal;
+}
+
+.vc-popover-content-wrapper {
+  transform: v-bind("transform") !important;
+}
+</style>

package/widgets/EodashItemFilter.vue

@@ -1,45 +1,162 @@
 <template>
-  <DynamicWebComponent
-    :link="link"
-    tag-name="eox-itemfilter"
-    :properties="properties"
-    :on-mounted="onMounted"
-  />
+  <eox-itemfilter
+    class="fill-height"
+    v-bind="config"
+    ref="eoxItemFilter"
+    style="overflow: auto"
+    @select="onSelect"
+  >
+    <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
+
+    <h4 slot="resultstitle" style="margin: 14px 8px">{{ resultsTitle }}</h4>
+  </eox-itemfilter>
 </template>
 <script setup>
-import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
+import { useSTAcStore } from "@/store/stac";
+import "@eox/itemfilter";
+import { onMounted, ref } from "vue";
 
-const link = () => import("@eox/itemfilter");
+const props = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  filtersTitle: {
+    type: String,
+    default: "Indicators",
+  },
+  resultsTitle: {
+    type: String,
+    default: "",
+  },
+  titleProperty: {
+    type: String,
+    default: "title",
+  },
 
-const properties = {
-  config: {
-    titleProperty: "title",
-    filterProperties: [
+  aggregateResults: {
+    type: String,
+    default: "themes",
+  },
+  enableHighlighting: { type: Boolean, default: true },
+  expandMultipleFilters: { type: Boolean, default: true },
+  expandMultipleResults: { type: Boolean, default: true },
+  filterProperties: {
+    /** @type {import("vue").PropType<{
+     * keys:string[];
+     * title:string;
+     * type:string;
+     * expanded?:boolean
+     * }[]> }*/
+    type: Array,
+    default: () => [
       {
-        keys: ["title", "themes"],
+        keys: ["title", "themes", "description"],
         title: "Search",
         type: "text",
-        // expanded: true,
       },
       {
         key: "themes",
         title: "Theme Filter",
         type: "multiselect",
-        // featured: true,
-        // expanded: true
       },
     ],
-    aggregateResults: "themes",
-    enableHighlighting: true,
-    expandMultipleFilters: false,
-    expandMultipleResults: false,
   },
+});
+/** @param {any} evt*/
+const onSelect = async (evt) => {
+  // reset the style of all compare buttons
+  eoxItemFilter.value?.shadowRoot
+    ?.querySelectorAll(".compareMapButton")
+    .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
+    // we need to consider how to reset to "default"
+    // if that happens here
+  }
+};
+const config = {
+  titleProperty: props.titleProperty,
+  filterProperties: props.filterProperties,
+  aggregateResults: props.aggregateResults,
+  enableHighlighting: props.enableHighlighting,
+  expandMultipleFilters: props.expandMultipleFilters,
+  expandMultipleResults: props.expandMultipleResults,
 };
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxItemFilter = ref(null);
 
-/** @type {import("@/types").WebComponentProps["onMounted"]} */
-const onMounted = (el, store) => {
-  /** @type {any} */ (el).style.height = "100%";
+const store = useSTAcStore();
 
+const defaultStyle =
+  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:white;";
+const highlightStyle =
+  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:#9bcaeb;";
+
+const injectCompareButtons = () => {
+  setTimeout(() => {
+    /** @type {any} */
+    (eoxItemFilter.value)?.shadowRoot
+      .querySelectorAll("details>summary")
+      .forEach((/** @type {HTMLElement} */ el) =>
+        el.setAttribute("style", "width: 100%"),
+      );
+    /** @type {any} */
+    (eoxItemFilter.value)?.shadowRoot
+      .querySelectorAll("details>div li")
+      .forEach((/** @type {HTMLElement} */ res) => {
+        let compareButton = document.createElement("button");
+        compareButton.className = "compareMapButton";
+        compareButton.dataset.id = res.children[0].id;
+
+        compareButton.onclick = async (
+          /** {Event & { currentTarget: HTMLElement }} */ evt,
+        ) => {
+          // reset the style of all compare buttons
+          eoxItemFilter.value?.shadowRoot
+            ?.querySelectorAll(".compareMapButton")
+            .forEach((res) => {
+              res.setAttribute("style", defaultStyle);
+            });
+          const currentTarget = /** @type {HTMLElement}*/ (evt.currentTarget);
+          currentTarget?.setAttribute("style", highlightStyle);
+          const selected = eoxItemFilter.value?.items.find(
+            (/** @type {HTMLElement} */ it) =>
+              it.id === currentTarget?.dataset.id,
+          );
+          if (selected) {
+            await store.loadSelectedCompareSTAC(selected.href);
+          }
+        };
+        compareButton.setAttribute("style", defaultStyle);
+        const svgIcon = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "svg",
+        );
+        const iconPath = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path",
+        );
+        svgIcon.setAttribute("width", "15");
+        svgIcon.setAttribute("height", "15");
+        svgIcon.setAttribute("viewBox", "0 0 24 24");
+        iconPath.setAttribute(
+          "d",
+          "M19,3H14V5H19V18L14,12V21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,18H5L10,12M10,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H10V23H12V1H10V3Z",
+        );
+        svgIcon.appendChild(iconPath);
+        compareButton.appendChild(svgIcon);
+        res.append(compareButton);
+      });
+  }, 100);
+};
+
+onMounted(() => {
   const style = document.createElement("style");
   style.innerHTML = `
     section {
@@ -51,29 +168,14 @@ const onMounted = (el, store) => {
       right: 8px;
     }
   `;
-  el?.shadowRoot?.appendChild(style);
-
-  const filterstitle = document.createElement("div");
-  filterstitle.setAttribute("slot", "filterstitle");
-  filterstitle.innerHTML = `<h4 style="margin: 14px 8px">Indicators</h4>`;
-  /** @type {any} */ (el).appendChild(filterstitle);
-  const resultstitle = document.createElement("div");
-  resultstitle.setAttribute("slot", "resultstitle");
-  /** @type {any} */ (el).appendChild(resultstitle);
+  eoxItemFilter.value?.shadowRoot?.appendChild(style);
 
-  /**
-   * @typedef {object} Item
-   * @property {string} href
-   */
-  /** @type {any} */ (el).apply(
-    // Only list child elements in list
-    store.stac?.filter((item) => item.rel === "child"),
-  );
-  /** @type {any} */ (el).config.onSelect =
-    /** @param {Item} item */
-    async (item) => {
-      console.log(item);
-      await store.loadSelectedSTAC(item.href);
-    };
-};
+  // Only list child elements in list
+  const items = store.stac?.filter((item) => item.rel === "child");
+  /** @type {any} */
+  (eoxItemFilter.value).items = items;
+  if (props.enableCompare) {
+    injectCompareButtons();
+  }
+});
 </script>