@eodash/eodash 5.0.0 → 5.1.0

package/widgets/EodashDatePicker.vue

@@ -6,12 +6,12 @@
       :attributes="attributes"
       :masks="masks"
       expanded
-      class="bg-surface overflow-auto"
+      class="overflow-auto"
       style="background-color: transparent; max-width: 100%"
     >
       <template v-if="toggleCalendar" #default="{ inputValue, inputEvents }">
         <div
-          class="bg-surface d-flex flex-row align-center justify-center pb-1"
+          class="d-flex flex-row align-center justify-center pb-1"
           style="overflow: hidden; width: 100%"
         >
           <v-btn
@@ -22,7 +22,7 @@
             variant="text"
             @click="jumpDate(true)"
             class="py-2"
-            style="flex-shrink: 1"
+            style="flex-shrink: 1; padding: 0"
           >
             <v-icon :icon="[mdiRayEndArrow]" />
           </v-btn>
@@ -52,7 +52,7 @@
             v-tooltip:bottom="'Set date to latest available dataset'"
             @click="jumpDate(false)"
             class="py-2"
-            style="flex-shrink: 1"
+            style="flex-shrink: 1; padding: 0"
           >
             <v-icon :icon="[mdiRayStartArrow]" />
           </v-btn>
@@ -119,7 +119,6 @@ import {
   reactive,
   ref,
   customRef,
-  toRef,
   onMounted,
   computed,
   useTemplateRef,
@@ -127,9 +126,11 @@ import {
 import { useSTAcStore } from "@/store/stac";
 import { datetime } from "@/store/states";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
-import { eodashCollections, collectionsPalette } from "@/utils/states";
+import { eodashCollections, eodashCompareCollections } from "@/utils/states";
 import log from "loglevel";
-import { makePanelTransparent } from "@/composables";
+import { useTransparentPanel } from "@/composables";
+import { getDatetimeProperty } from "@/eodashSTAC/helpers";
+import { storeToRefs } from "pinia";
 
 const { lgAndDown } = useDisplay();
 
@@ -214,24 +215,49 @@ defineProps({
  */
 const attributes = reactive([]);
 
-const selectedStac = toRef(useSTAcStore(), "selectedStac");
+const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
 
 watch(
-  selectedStac,
-  async (updatedStac, previousStac) => {
-    if (updatedStac && previousStac?.id !== updatedStac.id) {
-      log.debug("Datepicker selected STAC change triggered");
-      // remove old values
-      attributes.splice(0, attributes.length);
+  [selectedStac, selectedCompareStac],
+  async ([updatedStac, updatedCompareStac]) => {
+    attributes.splice(0, attributes.length);
+    if (!updatedStac && !updatedCompareStac) {
+      log.debug("No STAC selected, clearing datepicker attributes");
+      return;
+    }
+
+    const attrs =
+      /** @type {Partial<import("v-calendar/dist/types/src/utils/attribute").AttributeConfig>[]} */ ([
+        ...(await fetchCollectionsAttributes(eodashCollections)),
+        ...(await fetchCollectionsAttributes(eodashCompareCollections)),
+      ]);
+    attributes.push(...attrs);
+  },
+  { immediate: true },
+);
 
-      for (let idx = 0; idx < eodashCollections.length; idx++) {
-        log.debug("Retrieving dates", eodashCollections[idx]);
-        await eodashCollections[idx].fetchCollection();
+/**
+ *
+ * @param {import("@/eodashSTAC/EodashCollection").EodashCollection[]} eodashCollections
+ */
+async function fetchCollectionsAttributes(eodashCollections) {
+  if (!eodashCollections || !eodashCollections.length) {
+    return [];
+  }
 
+  return await Promise.all(
+    eodashCollections.map((ec, idx) => {
+      return ec.fetchCollection().then(() => {
+        const dateProperty = getDatetimeProperty(ec.getItems());
+        if (!dateProperty) {
+          return [];
+        }
         const dates = [
           ...new Set(
-            eodashCollections[idx].getItems()?.reduce((valid, it) => {
-              const parsed = Date.parse(/** @type {string} */ (it.datetime));
+            ec.getItems()?.reduce((valid, item) => {
+              const parsed = Date.parse(
+                /** @type {string} */ (item[dateProperty]),
+              );
               if (parsed) {
                 valid.push(new Date(parsed));
               }
@@ -239,12 +265,11 @@ watch(
             }, /** @type {Date[]} */ ([])),
           ),
         ];
-        attributes.push({
+        return {
           key: "id-" + idx.toString() + Math.random().toString(16).slice(2),
           dot: {
             style: {
-              backgroundColor:
-                collectionsPalette[idx % collectionsPalette.length],
+              backgroundColor: ec.color,
             },
           },
           dates,
@@ -254,13 +279,11 @@ watch(
               "font-weight": "bold",
             },
           },
-        });
-      }
-    }
-  },
-  { immediate: true },
-);
-
+        };
+      });
+    }),
+  );
+}
 /**
  * @param {boolean} reverse
  */
@@ -295,7 +318,7 @@ onMounted(() => {
     : "translate3d(0px,-80px,0)";
 });
 
-makePanelTransparent(rootEl);
+useTransparentPanel(rootEl);
 </script>
 <style>
 .vc-popover-content {
@@ -320,7 +343,10 @@ makePanelTransparent(rootEl);
   .datePicker {
     position: absolute;
     bottom: 0;
-    width: 100%;
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+    width: fit-content;
   }
 }
 .vc-day-content {
@@ -335,4 +361,27 @@ makePanelTransparent(rootEl);
 .vc-popover-content-wrapper {
   transform: v-bind("transform") !important;
 }
+
+.vc-date-picker-content,
+.datePicker {
+  backdrop-filter: blur(10px) !important;
+  border-radius: 8px;
+  border: none;
+  box-shadow:
+    0px 0px 1px rgba(24, 39, 75, 0.22),
+    0px 6px 12px -6px rgba(24, 39, 75, 0.12),
+    0px 8px 24px -4px rgba(24, 39, 75, 0.08);
+  background-color: rgba(
+    var(--v-theme-surface),
+    var(--v-surface-opacity, 0.8)
+  ) !important;
+}
+
+.vc-popover-caret.direction-top.align-left {
+  clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
+}
+
+.vc-bordered {
+  border: none;
+}
 </style>

package/widgets/EodashItemFilter.vue

@@ -14,11 +14,11 @@
 </template>
 <script setup>
 import { useSTAcStore } from "@/store/stac";
+import { isFirstLoad } from "@/utils/states";
 import "@eox/itemfilter";
-
 import { computed, ref } from "vue";
-import { useDisplay } from "vuetify/lib/framework.mjs";
 
+const store = useSTAcStore();
 const emit = defineEmits(["select"]);
 
 const props = defineProps({
@@ -61,6 +61,7 @@ const props = defineProps({
   enableHighlighting: { type: Boolean, default: true },
   expandMultipleFilters: { type: Boolean, default: true },
   expandMultipleResults: { type: Boolean, default: true },
+  styleOverride: { type: String, default: "" },
   filterProperties: {
     /** @type {import("vue").PropType<{
      * keys:string[];
@@ -72,13 +73,15 @@ const props = defineProps({
     default: () => [
       {
         keys: ["title", "themes", "description"],
-        title: "Search",
+        title: "Search by name or description",
         type: "text",
+        expanded: true,
       },
       {
         key: "themes",
-        title: "Theme Filter",
+        title: "Filter by theme",
         type: "multiselect",
+        expanded: true,
       },
     ],
   },
@@ -88,8 +91,10 @@ const props = defineProps({
  */
 const selectIndicator = async (item) => {
   if (item) {
-    // Reset compare stac to empty
-    store.resetSelectedCompareSTAC();
+    if (isFirstLoad.value) {
+      // prevent the map from jumping to the initial position
+      isFirstLoad.value = false;
+    }
     await store.loadSelectedSTAC(item.href);
     emit("select", item);
   } else {
@@ -104,7 +109,7 @@ const selectCompareIndicator = (item) => {
     store.loadSelectedCompareSTAC(item.href);
     emit("select", item);
   } else {
-    // TODO
+    store.resetSelectedCompareSTAC();
   }
 };
 /** @param {any} evt*/
@@ -116,7 +121,7 @@ const onSelect = async (evt) => {
     selectIndicator(item);
   }
 };
-const { smAndDown } = useDisplay();
+
 const config = computed(() => ({
   titleProperty: props.titleProperty,
   enableHighlighting: props.enableHighlighting,
@@ -127,10 +132,20 @@ const config = computed(() => ({
   imageProperty: props.imageProperty,
   aggregateResults: props.aggregateResults,
   style: props.cssVars,
-  filterProperties: smAndDown.value ? "" : props.filterProperties,
+  filterProperties: props.filterProperties,
+  styleOverride: props.styleOverride,
 }));
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxItemFilter = ref(null);
-
-const store = useSTAcStore();
 </script>
+
+<style scoped>
+eox-itemfilter {
+  --form-flex-direction: row;
+}
+@media (max-width: 768px) {
+  eox-itemfilter {
+    --form-flex-direction: column;
+  }
+}
+</style>

package/widgets/EodashLayerControl.vue

@@ -1,17 +1,24 @@
 <template>
-  <span class="d-flex flex-column fill-height overflow-auto">
+  <span class="d-flex flex-column">
     <eox-layercontrol
       v-if="showControls"
+      :key="mapElement"
       v-bind="config"
       :for="mapElement"
       @datetime:updated="debouncedHandleDateTime"
-      class="fill-height"
       toolsAsList="true"
       style="--eox-background-color: transparent"
       ref="eoxLayercontrol"
       @layerConfig:change="onLayerConfigChange"
-      .styleOverride="styleOverride"
-    />
+    >
+      <slot name="layerstitle">
+        <div>
+          <p v-if="title" class="mt-2 mb-2">
+            <strong>{{ title }}</strong>
+          </p>
+        </div>
+      </slot>
+    </eox-layercontrol>
   </span>
 </template>
 <script setup>
@@ -44,6 +51,10 @@ const props = defineProps({
     type: Array,
     default: () => ["datetime", "info", "config", "legend", "opacity"],
   },
+  title: {
+    type: String || Boolean,
+    default: "Layers",
+  },
   cssVars: {
     type: Object,
   },
@@ -79,7 +90,6 @@ const handleDatetimeUpdate = async (evt) => {
   let updatedLayers = [];
 
   if (ec) {
-    await ec.fetchCollection();
     updatedLayers = await ec.updateLayerJson(
       datetime,
       layer.get("id"),
@@ -128,10 +138,9 @@ const onLayerConfigChange = (evt) => {
     layerControlFormValue.value = evt.detail.jsonformValue;
   }
 };
-
-const styleOverride = `
-input[type="range"] {
-  background:transparent !important;
-}
-`;
 </script>
+<style scoped>
+eox-layercontrol {
+  overflow: auto;
+}
+</style>

package/widgets/EodashLayoutSwitcher.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="rootRef">
-    <v-tooltip :text="`Switch to ${target} mode`">
+    <v-tooltip v-if="!mobile" :text="`Switch to ${target} mode`">
       <template v-slot:activator="{ props }">
         <v-icon
           v-bind="props"
@@ -9,15 +9,18 @@
         ></v-icon>
       </template>
     </v-tooltip>
+    <v-icon v-else @click="activeTemplate = target" :icon="[icon]"></v-icon>
   </div>
 </template>
 
 <script setup>
 import { activeTemplate } from "@/store/states";
 import { mdiViewDashboard } from "@mdi/js";
-import { makePanelTransparent } from "@/composables";
+import { useTransparentPanel } from "@/composables";
 import { ref } from "vue";
+import { useDisplay } from "vuetify/lib/composables/display";
 
+const { mobile } = useDisplay();
 defineProps({
   target: {
     type: String,
@@ -32,5 +35,5 @@ defineProps({
 
 /** @type {import("vue").Ref<HTMLDivElement|null>} */
 const rootRef = ref(null);
-makePanelTransparent(rootRef);
+useTransparentPanel(rootRef);
 </script>

package/widgets/EodashMap/index.vue

@@ -63,11 +63,11 @@ const props = defineProps({
   center: {
     //@ts-expect-error todo
     type: Array,
-    default: () => [15, 48],
+    default: () => [mapPosition.value?.[0] ?? 15, mapPosition.value?.[1] ?? 48],
   },
   zoom: {
     type: Number,
-    default: 4,
+    default: mapPosition.value?.[2] ?? 4,
   },
   zoomToExtent: {
     type: Boolean,
@@ -85,10 +85,7 @@ const controls = {
     collapsible: true,
   },
 };
-const initialCenter = toRaw([
-  mapPosition.value?.[0] ?? props.center?.[0],
-  mapPosition.value?.[1] ?? props.center?.[1],
-]);
+const initialCenter = toRaw(props.center);
 const initialZoom = toRaw(mapPosition.value?.[2] ?? props.zoom);
 /** @type {import("vue").Ref<Record<string,any>[]>} */
 const eoxMapLayers = ref([
@@ -142,7 +139,6 @@ onMounted(() => {
   if (props.enableCompare) {
     useInitMap(
       compareMap,
-      //@ts-expect-error todo selectedStac as collection
       selectedCompareStac,
       eodashCompareCollections,
       datetime,
@@ -156,7 +152,6 @@ onMounted(() => {
 
   useInitMap(
     eoxMap,
-    //@ts-expect-error todo selectedStac as collection
     selectedStac,
     eodashCollections,
     datetime,

package/widgets/EodashMap/methods/create-layers-config.js

@@ -53,9 +53,10 @@ export const createLayersConfig = async (
   const indicatorLayers =
     //@ts-expect-error indicator is collection
     await EodashCollection.getIndicatorLayers(selectedIndicator);
-  const geodbLayer = EodashCollection.getGeoDBLayer(eodashCols);
-  if (geodbLayer) {
-    dataLayers.layers.unshift(geodbLayer);
+  const observationPointsLayer =
+    EodashCollection.getObservationPointsLayer(eodashCols);
+  if (observationPointsLayer) {
+    dataLayers.layers.unshift(observationPointsLayer);
   }
   const baseLayers = {
     type: "Group",

package/widgets/EodashMap/methods/index.js

@@ -1,13 +1,12 @@
 import { createLayersConfig } from "./create-layers-config";
 import { setMapProjFromCol } from "@/eodashSTAC/triggers";
-import { nextTick, onMounted, onUnmounted, watch } from "vue";
+import { onMounted, onUnmounted, watch } from "vue";
 import log from "loglevel";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { useEventBus } from "@vueuse/core";
-import { eoxLayersKey } from "@/utils/keys";
-import { posIsSetFromUrl } from "@/utils/states";
-import { useOnLayersUpdate } from "@/composables";
+import { isFirstLoad } from "@/utils/states";
+import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
+import { mapPosition } from "@/store/states";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -35,9 +34,6 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
       !Number.isNaN(z)
     ) {
       mapPosition.value = [lonlat[0], lonlat[1], z];
-      if (posIsSetFromUrl.value) {
-        posIsSetFromUrl.value = false;
-      }
     }
   };
 
@@ -79,7 +75,6 @@ export const useInitMap = (
     eodashCols.values,
     datetime.value,
   );
-  const layersEvent = useEventBus(eoxLayersKey);
 
   const stopIndicatorWatcher = watch(
     [selectedIndicator, datetime],
@@ -132,9 +127,14 @@ export const useInitMap = (
             JSON.parse(JSON.stringify(layersCollection)),
           );
           mapLayers.value = layersCollection;
-          await nextTick(() => {
-            layersEvent.emit("time:updated", mapLayers.value);
-          });
+
+          useEmitLayersUpdate(
+            mapElement.value?.id === "compare"
+              ? "compareTime:updated"
+              : "time:updated",
+            mapElement.value,
+            layersCollection,
+          );
           return;
         }
 
@@ -158,7 +158,8 @@ export const useInitMap = (
         }
         if (
           endInterval !== null &&
-          endInterval.toISOString() !== datetime.value
+          endInterval.toISOString() !== datetime.value &&
+          !isFirstLoad.value
         ) {
           datetime.value = endInterval.toISOString();
         }
@@ -169,7 +170,11 @@ export const useInitMap = (
           if (
             mapElement?.value?.id === "main" &&
             updatedStac.extent?.spatial.bbox &&
-            !posIsSetFromUrl.value
+            !(
+              isFirstLoad.value &&
+              mapPosition.value?.[0] &&
+              mapPosition.value?.[1]
+            )
           ) {
             // Sanitize extent,
             const b = updatedStac.extent?.spatial.bbox[0];
@@ -189,9 +194,6 @@ export const useInitMap = (
             (mapElement.value).zoomExtent = reprojExtent;
           }
         }
-        if (posIsSetFromUrl.value) {
-          posIsSetFromUrl.value = false;
-        }
 
         log.debug(
           "Assigned layers",
@@ -199,11 +201,13 @@ export const useInitMap = (
         );
         mapLayers.value = layersCollection;
         // Emit event to update layers
-        await nextTick(() => {
-          mapElement.value?.updateComplete.then(() => {
-            layersEvent.emit("layers:updated", mapLayers.value);
-          });
-        });
+        await useEmitLayersUpdate(
+          mapElement.value?.id === "compare"
+            ? "compareLayers:updated"
+            : "layers:updated",
+          mapElement.value,
+          mapLayers.value,
+        );
       }
     },
     { immediate: true },
@@ -218,8 +222,14 @@ export const useInitMap = (
  * @param {import("@/eodashSTAC/EodashCollection").EodashCollection[]} eodashCols
  * @param {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>>} tooltipProperties
  */
+
 export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
-  useOnLayersUpdate(async () => {
+  useOnLayersUpdate(async (evt, _payload) => {
+    if (evt.includes("compare")) {
+      // TODO: support compare map tooltips
+      // Do not update tooltip properties on compare map
+      return;
+    }
     const tooltips = [];
     for (const ec of eodashCols) {
       tooltips.push(...(await ec.getToolTipProperties()));