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

package/dist/client/{transition-Dq8XIV_D.js → transition-U5aFjJtV.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-3OsFQJVx.js";
 const j = m({
   transition: {
     type: [Boolean, String, Object],

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.15",
+  "version": "5.0.0-alpha.2.16",
   "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",
@@ -48,10 +49,11 @@
   "dependencies": {
     "@eox/itemfilter": "^1.0.1",
     "@eox/jsonform": "^0.8.2",
-    "@eox/layercontrol": "^0.18.1",
+    "@eox/layercontrol": "^0.18.2-dev.1722439716.0",
     "@eox/layout": "^0.1.0",
-    "@eox/map": "1.11.2",
+    "@eox/map": "1.12.1-dev.1723130201.0",
     "@eox/stacinfo": "^0.3.3",
+    "@eox/timecontrol": "^0.6.1",
     "@mdi/js": "^7.4.47",
     "@vitejs/plugin-vue": "^5.0.5",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",

package/widgets/EodashDatePicker.vue

@@ -37,24 +37,21 @@
 <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 { computed, ref, onMounted, watch, reactive } 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";
 
 /**
  * @param {boolean} reverse
  */
 function jumpDate(reverse) {
-  if (attributes.value && attributes.value.length > 0) {
+  if (attributes.length) {
     // We have potentially multiple collections we need to iterate (currently only one)
     let latestDateMS = reverse ? Infinity : -Infinity;
-    attributes.value.forEach((coll) => {
+    attributes.forEach((coll) => {
       if (coll?.dates) {
         coll.dates.forEach((d) => {
           // TODO: we need to handle time ranges and other options here
@@ -75,8 +72,6 @@ function jumpDate(reverse) {
   }
 }
 
-const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
-
 const masks = ref({
   input: "YYYY-MM-DD",
 });
@@ -84,14 +79,14 @@ 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() {
@@ -108,21 +103,13 @@ const currentDate = computed({
     }
   },
 });
-/** @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",
@@ -131,28 +118,33 @@ onMounted(() => {
           "#56B4E9",
           "#D55E00",
         ];
-        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],
-                },
+
+        // 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],
               },
-              dates,
             },
-          ];
+            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]);
         }
       }
     },

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>

package/widgets/EodashMap.vue

@@ -6,8 +6,8 @@
     <eox-map
       class="fill-height fill-width overflow-none"
       slot="first"
-      sync="eox-map#compare"
       ref="eoxMap"
+      :sync="compareMap"
       id="main"
       :config="eoxMapConfig"
     />
@@ -21,21 +21,21 @@
   </eox-map-compare>
 </template>
 <script setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { EodashCollection } from "@/utils/eodashSTAC";
-import { extractCollectionUrls } from "@/utils/helpers";
+import { computed, onMounted, reactive, ref } from "vue";
 import {
   currentUrl,
   currentCompareUrl,
   datetime,
   mapEl,
   mapPosition,
+  mapCompareEl,
 } from "@/store/States";
-import { transformExtent } from "ol/proj";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 import "@eox/map";
 import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
+import { useHandleMapMoveEnd, useInitMap } from "@/composables/EodashMap";
 
 const props = defineProps({
   enableCompare: {
@@ -44,13 +44,11 @@ const props = defineProps({
   },
 });
 
-/** @type {import("vue").Ref<(HTMLElement & Record<string,any>) | null>} */
+/** @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>) | null>} */
+/** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
 const compareMap = ref(null);
 
-const showCompare = ref("first");
-
 const eoxMapConfig = reactive({
   /** @type {(number|undefined)[] | undefined} */
   center: [15, 48],
@@ -86,209 +84,38 @@ if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   eoxMapConfig.center = [mapPosition.value?.[0], mapPosition.value[1]];
   eoxMapConfig.zoom = mapPosition.value[2];
 }
-
-/** @type {import("openlayers").EventsListenerFunctionType} */
-const handleMoveEnd = (evt) => {
-  const map = /** @type {import("openlayers").Map | undefined} */ (
-    /** @type {any} */ (evt).map
-  );
-  const [x, y] = map?.getView().getCenter() ?? [0, 0];
-  const z = map?.getView().getZoom();
-  if (!Number.isNaN(x) && !Number.isNaN(y) && !Number.isNaN(z)) {
-    mapPosition.value = [x, y, z];
-  }
-};
-
-const store = useSTAcStore();
-/**
- *
- * @param {import("vue").Ref<string>} baseUrl
- * @param {string} updatedTime
- * @param {import("vue").Ref<
- *   | import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- * >} selectedStac
- */
-const createLayersConfig = async (baseUrl, updatedTime, selectedStac) => {
-  const collectionUrls = extractCollectionUrls(
-    selectedStac.value,
-    baseUrl.value,
-  );
-  const eodashCollections = collectionUrls.map(
-    (cu) => new EodashCollection(cu),
-  );
-
-  const layersCollection = [];
-  const dataLayers = {
-    type: "Group",
-    properties: {
-      id: "AnalysisGroup",
-      title: "Analysis Layers",
-      layerControlExpand: true,
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  for (const ec of eodashCollections) {
-    let layers;
-    if (updatedTime) {
-      layers = await ec.createLayersJson(new Date(updatedTime));
-    } else {
-      layers = await ec.createLayersJson();
-    }
-    if (layers) {
-      dataLayers.layers.push(...layers);
-    }
-  }
-  // Add expand to all analysis layers
-  dataLayers.layers.forEach((dl) => {
-    dl.properties.layerControlExpand = true;
-    dl.properties.layerControlToolsExpand = true;
-  });
-
-  layersCollection.push(dataLayers);
-  const indicator = new EodashCollection(currentUrl.value);
-  const indicatorLayers = await indicator.buildJsonArray(
-    //@ts-expect-error we use this function to generate collection level visualization
-    selectedStac.value,
-    currentUrl.value,
-    selectedStac.value?.title ?? "",
-    selectedStac.value?.endpointtype ?? false,
-  );
-
-  const baseLayers = {
-    type: "Group",
-    properties: {
-      id: "BaseLayersGroup",
-      title: "Base Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  const indicatorBaseLayers = indicatorLayers.filter(
-    (l) => l.properties.group === "baselayer",
-  );
-  if (indicatorBaseLayers.length) {
-    baseLayers.layers.push(...indicatorBaseLayers);
-
-    // Add exclusive to baselayers and make sure only one is selected
-    baseLayers.layers.forEach((bl) => {
-      bl.properties.layerControlExclusive = true;
-    });
-  } else {
-    // Default to some baselayer
-    baseLayers.layers.push({
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-        layerControlExclusive: true,
-      },
-      source: {
-        type: "OSM",
-      },
-    });
-  }
-
-  if (baseLayers.layers.length) {
-    layersCollection.push(baseLayers);
-  }
-
-  const overlayLayers = {
-    type: "Group",
-    properties: {
-      id: "OverlayGroup",
-      title: "Overlay Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
-  };
-
-  const indicatorOverlays = indicatorLayers.filter(
-    (l) => l.properties.group === "overlay",
+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,
   );
-  if (indicatorOverlays.length) {
-    overlayLayers.layers.push(...indicatorOverlays);
-    layersCollection.unshift(overlayLayers);
-  }
-
-  return layersCollection;
-};
+}
+useInitMap(
+  eoxMap,
+  //@ts-expect-error todo selectedStac as collection
+  selectedStac,
+  eodashCollections,
+  currentUrl,
+  datetime,
+);
 
 onMounted(() => {
-  mapEl.value = /** @type {HTMLElement & Record<string,any>} */ (eoxMap.value);
-
-  /** @type {import('ol/Map').default} */
-  (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
-
-  const { selectedStac, selectedCompareStac } = storeToRefs(store);
+  // assign map Element state to eox map
+  mapEl.value = eoxMap.value;
   if (props.enableCompare) {
-    watch(
-      [selectedCompareStac, datetime],
-      async (
-        [updatedCompareStac, updatedTime],
-        [_previousCompareStac, _previousTime],
-      ) => {
-        if (updatedCompareStac) {
-          const compareLayersCollection = await createLayersConfig(
-            currentCompareUrl,
-            updatedTime,
-            selectedCompareStac,
-          );
-          /** @type {any} */
-          (compareMap.value).layers = compareLayersCollection;
-          showCompare.value = "";
-        }
-      },
-    );
+    mapCompareEl.value = compareMap.value;
   }
-
-  watch(
-    [selectedStac, datetime],
-    async ([updatedStac, updatedTime], [previousSTAC, _previousTime]) => {
-      if (updatedStac) {
-        const layersCollection = await createLayersConfig(
-          currentUrl,
-          updatedTime,
-          selectedStac,
-        );
-        /** @type {any} */
-        (eoxMap.value).layers = layersCollection;
-
-        // only on different indicator selection and not on time change
-        if (previousSTAC?.id !== updatedStac.id) {
-          showCompare.value = "first";
-          // Try to move map view to extent
-          // Make sure for now we are always converting from 4326
-          // of stac items  into current map projection
-          // TODO: This might change if we decide to use 4326 as default for zoom and extent
-          // Sanitize extent
-          // @ts-expect-error we will need to change the approach to use
-          // native eox-map transformation once included
-          const b = updatedStac.extent?.spatial.bbox[0];
-          const sanitizedExtent = [
-            b[0] > -180 ? b[0] : -180,
-            b[1] > -90 ? b[1] : -90,
-            b[2] < 180 ? b[2] : 180,
-            b[3] < 90 ? b[3] : 90,
-          ];
-          const reprojExtent = transformExtent(
-            sanitizedExtent,
-            "EPSG:4326",
-            eoxMap.value?.map?.getView().getProjection(),
-          );
-          /** @type {any} */
-          (eoxMap.value).zoomExtent = reprojExtent;
-        }
-      }
-    },
-    { immediate: true },
-  );
-});
-
-onUnmounted(() => {
-  /** @type {import('ol/Map').default} */
-  (eoxMap.value?.map)?.un("moveend", handleMoveEnd);
 });
 </script>

package/widgets/ExportState.vue

@@ -1,17 +1,17 @@
 <template>
   <PopUp v-model="dialog">
-    <v-card>
-      <v-card-title class="bg-primary">
+    <v-card style="max-height: 498px">
+      <v-card-title class="bg-primary" style="max-height: 49px">
         <h5 class="text-h5">Storytelling map configuration</h5>
       </v-card-title>
 
-      <v-card-text class="py-5">
+      <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:
         </p>
         <div class="pa-3 code-block">
-          {{ getLayers() }}
+          {{ removeUnneededProperties(getLayers()) }}
         </div>
 
         <div style="position: absolute; bottom: 15px">
@@ -41,7 +41,7 @@
 
       <v-divider></v-divider>
 
-      <v-card-actions>
+      <v-card-actions style="max-height: 49px">
         <v-spacer></v-spacer>
         <v-btn variant="text" @click="dialog = !dialog"> Close </v-btn>
       </v-card-actions>
@@ -55,6 +55,7 @@ import { copyToClipBoard } from "@/utils";
 import { computed, ref } from "vue";
 import { getLayers as getLayerAction } from "@/store/Actions";
 import { mapPosition } from "@/store/States";
+import { removeUnneededProperties } from "@/utils/helpers";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
 
@@ -93,7 +94,7 @@ const mapStepCode = computed(() => {
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
 `;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 const mapEntryCode = computed(() => {
   const [x, y, z] = mapPosition.value;
@@ -101,7 +102,7 @@ const mapEntryCode = computed(() => {
     "## Map Example <!" +
     '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
   const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 </script>
 <style scoped>