@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/package.json

@@ -1,23 +1,36 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.9",
+  "version": "5.0.0-rc",
   "type": "module",
-  "types": "./core/client/types.d.ts",
+  "types": "./dist/types/core/client/types.d.ts",
   "files": [
     "core/client",
     "widgets",
     "dist"
   ],
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/core/client/types.d.ts"
+      ],
+      "webcomponent": [
+        "./dist/types/core/client/asWebComponent.d.ts"
+      ],
+      "config": [
+        "./dist/node/types.d.ts"
+      ]
+    }
+  },
   "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",
+    "./webcomponent.css": "./dist/client/eo-dash.css",
     "./config": {
       "types": "./dist/node/types.d.ts",
       "default": "./dist/node/main.js"
@@ -25,12 +38,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 && tsc-alias",
     "check": "vue-tsc --noEmit --skipLibCheck && eslint .",
     "format": "prettier . --write --ignore-unknown",
     "preview": "npx eodash preview",
@@ -46,49 +62,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.2",
+    "@eox/itemfilter": "^1.7.0",
+    "@eox/jsonform": "0.11.3-dev.1734708668.0",
+    "@eox/layercontrol": "^0.28.0",
+    "@eox/layout": "^0.3.0",
+    "@eox/map": "^1.19.0",
+    "@eox/stacinfo": "^0.6.0",
+    "@eox/timecontrol": "^0.12.0",
     "@mdi/js": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vueuse/core": "^12.0.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.9",
+    "axios-cache-interceptor": "^1.6.2",
+    "color-legend-element": "^1.3.0",
+    "commander": "^12.1.0",
+    "core-js": "^3.39.0",
+    "loglevel": "^1.9.2",
+    "pinia": "^2.3.0",
+    "sass": "^1.83.0",
     "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.29.0",
+    "vega-lite": "^5.23.0",
+    "vite": "^6.0.5",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vue": "^3.5.0",
+    "vuetify": "^3.7.6",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.21.4",
+    "@babel/types": "^7.26.3",
     "@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.10.2",
     "@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.17.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "mustache": "^4.2.0",
+    "prettier": "^3.4.2",
+    "rollup": "^4.28.1",
+    "stac-ts": "^1.0.4",
+    "terminate": "^2.8.0",
+    "tsc-alias": "^1.8.10",
+    "typedoc": "^0.27.5",
+    "typedoc-plugin-markdown": "^4.3.3",
+    "typedoc-plugin-vue": "^1.3.0",
+    "typedoc-vitepress-theme": "^1.1.1",
+    "typescript": "^5.7.2",
+    "unplugin-fonts": "^1.3.1",
+    "vitepress": "^1.5.0",
+    "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,161 +1,203 @@
 <template>
-  <VCDatePicker v-model="currentDate" :masks="masks" :attributes="attributes">
-    <template #default="{ inputValue, inputEvents }">
-      <div
-        class="flex rounded-lg border border-gray-300 dark:border-gray-600"
-        style="margin: 2px"
-      >
-        <input
-          :value="inputValue"
-          v-on="inputEvents"
-          style="margin: 1px"
-          class="flex-grow px-1 py-1 bg-white dark:bg-gray-700"
-        />
-      </div>
-    </template>
-  </VCDatePicker>
-  <v-row align="center" justify="center" style="margin-top: 6px">
-    <v-btn
-      style="padding: 0px; margin-right: 4px"
-      density="compact"
-      v-tooltip:bottom="'Set date to oldest available dataset'"
-      @click="jumpDate(true)"
+  <div ref="rootRef" class="datePicker">
+    <VCDatePicker
+      v-model.number="currentDate"
+      :attributes="attributes"
+      :masks="masks"
+      expanded
+      class="bg-surface overflow-auto"
+      style="background-color: transparent; max-width: 100%"
     >
-      <v-icon :icon="[mdiRayEndArrow]" />
-    </v-btn>
-    <v-btn
-      style="padding: 0px; margin-left: 4px"
-      density="compact"
-      v-tooltip:bottom="'Set date to latest available dataset'"
-      @click="jumpDate(false)"
-    >
-      <v-icon :icon="[mdiRayStartArrow]" />
-    </v-btn>
-  </v-row>
+      <template #footer>
+        <div class="d-flex flex-row align-center justify-center pb-1">
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            v-tooltip:bottom="'Set date to oldest available dataset'"
+            variant="text"
+            @click="jumpDate(true)"
+          >
+            <v-icon :icon="[mdiRayEndArrow]" />
+          </v-btn>
+          <div
+            class="flex rounded-lg border border-gray-300 dark:border-gray-600"
+            style="margin: 2px"
+          >
+            <input
+              v-if="!hideInputField"
+              :value="new Date(currentDate).toLocaleDateString()"
+              style="margin: 1px"
+              class="flex-grow px-1 py-1 dark:bg-gray-700"
+            />
+          </div>
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            variant="text"
+            v-tooltip:bottom="'Set date to latest available dataset'"
+            @click="jumpDate(false)"
+          >
+            <v-icon :icon="[mdiRayStartArrow]" />
+          </v-btn>
+        </div>
+      </template>
+    </VCDatePicker>
+  </div>
 </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 { storeToRefs } from "pinia";
+import { watch, reactive, ref, customRef, toRef } from "vue";
 import { useSTAcStore } from "@/store/stac";
-import { datetime } from "@/store/States";
+import { datetime } from "@/store/states";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
-import { extractCollectionUrls } from "@/utils/eodashSTAC";
+import { eodashCollections } from "@/utils/states";
+import log from "loglevel";
+import { makePanelTransparent } from "@/composables";
 
-/**
- * @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",
 });
 
+defineProps({
+  hintText: {
+    type: String,
+    default: null,
+  },
+  hideArrows: {
+    type: Boolean,
+    default: false,
+  },
+  hideInputField: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 /**
  * 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",
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+
+const selectedStac = toRef(useSTAcStore(), "selectedStac");
+
+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;
+  }
+}
+
+makePanelTransparent(rootRef);
 </script>
+<style>
+@media (min-width: 960px) {
+  .datePicker {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+.vc-day-content {
+  color: #5e5e5e;
+  font-weight: normal;
+}
+
+.vc-highlight-content-solid {
+  color: white !important;
+}
+</style>

package/widgets/EodashItemFilter.vue

@@ -1,5 +1,12 @@
 <template>
-  <eox-itemfilter class="fill-height" :config="config" ref="eoxItemFilter">
+  <eox-itemfilter
+    class="fill-height"
+    v-bind="config"
+    ref="eoxItemFilter"
+    style="overflow: auto; --background-color: none"
+    @select="onSelect"
+    .items='store.stac?.filter((item) => item.rel === "child")'
+  >
     <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
 
     <h4 slot="resultstitle" style="margin: 14px 8px">{{ resultsTitle }}</h4>
@@ -8,29 +15,52 @@
 <script setup>
 import { useSTAcStore } from "@/store/stac";
 import "@eox/itemfilter";
-import { onMounted, ref } from "vue";
+
+import { computed, ref } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
+
+const emit = defineEmits(["select"]);
 
 const props = defineProps({
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
   filtersTitle: {
     type: String,
     default: "Indicators",
   },
   resultsTitle: {
     type: String,
-    default: "",
+    default: "Results",
   },
   titleProperty: {
     type: String,
     default: "title",
   },
-
   aggregateResults: {
     type: String,
-    default: "themes",
+    default: undefined,
+  },
+  imageProperty: {
+    type: String,
+    default: "",
+  },
+  subTitleProperty: {
+    type: String,
+    default: "",
+  },
+  resultType: {
+    type: String,
+    default: "",
+  },
+  cssVars: {
+    type: [String, Object],
+    default: "",
   },
   enableHighlighting: { type: Boolean, default: true },
-  expandMultipleFilters: { type: Boolean, default: false },
-  expandMultipleResults: { type: Boolean, default: false },
+  expandMultipleFilters: { type: Boolean, default: true },
+  expandMultipleResults: { type: Boolean, default: true },
   filterProperties: {
     /** @type {import("vue").PropType<{
      * keys:string[];
@@ -53,43 +83,54 @@ const props = defineProps({
     ],
   },
 });
-
-const config = {
+/**
+ * @param {import("stac-ts").StacLink} item
+ */
+const selectIndicator = async (item) => {
+  if (item) {
+    // Reset compare stac to empty
+    store.resetSelectedCompareSTAC();
+    await store.loadSelectedSTAC(item.href);
+    emit("select", item);
+  } else {
+    store.selectedStac = null;
+  }
+};
+/**
+ * @param {import("stac-ts").StacLink} item
+ */
+const selectCompareIndicator = (item) => {
+  if (item) {
+    store.loadSelectedCompareSTAC(item.href);
+    emit("select", item);
+  } else {
+    // TODO
+  }
+};
+/** @param {any} evt*/
+const onSelect = async (evt) => {
+  const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
+  if (props.enableCompare) {
+    selectCompareIndicator(item);
+  } else {
+    selectIndicator(item);
+  }
+};
+const { smAndDown } = useDisplay();
+const config = computed(() => ({
   titleProperty: props.titleProperty,
-  filterProperties: props.filterProperties,
-  aggregateResults: props.aggregateResults,
   enableHighlighting: props.enableHighlighting,
   expandMultipleFilters: props.expandMultipleFilters,
   expandMultipleResults: props.expandMultipleResults,
-};
+  subTitleProperty: props.subTitleProperty,
+  resultType: props.resultType,
+  imageProperty: props.imageProperty,
+  aggregateResults: props.aggregateResults,
+  style: props.cssVars,
+  filterProperties: smAndDown.value ? "" : props.filterProperties,
+}));
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxItemFilter = ref(null);
 
 const store = useSTAcStore();
-
-onMounted(() => {
-  const style = document.createElement("style");
-  style.innerHTML = `
-    section {
-      margin: 0 !important;
-    }
-    section button#filter-reset {
-      padding: 0 8px;
-      top: 8px;
-      right: 8px;
-    }
-  `;
-  eoxItemFilter.value?.shadowRoot?.appendChild(style);
-
-  eoxItemFilter.value?.apply(
-    // Only list child elements in list
-    store.stac?.filter((item) => item.rel === "child"),
-  );
-  /** @type {any} */ (eoxItemFilter.value).config.onSelect =
-    /** @param {import('stac-ts').StacLink} item */
-    async (item) => {
-      await store.loadSelectedSTAC(item.href);
-      console.log(item, store.selectedStac);
-    };
-});
 </script>