@eodash/eodash 5.0.0 → 5.2.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/EodashMapBtns.vue

@@ -0,0 +1,269 @@
+<template>
+  <div ref="rootRef" class="map-buttons d-flex flex-column align-end">
+    <button
+      v-if="enableZoom"
+      class="primary small circle small-elevate"
+      @click="onMapZoomIn"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg
+      ></i>
+      <div class="tooltip left">Zoom in</div>
+    </button>
+
+    <button
+      v-if="enableZoom"
+      class="primary small circle small-elevate"
+      @click="onMapZoomOut"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg
+      ></i>
+      <div class="tooltip left">Zoom out</div>
+    </button>
+
+    <button
+      v-if="exportMap"
+      class="primary small circle small-elevate"
+      @click="showMapState = !showMapState"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiMapPlus" /></svg
+      ></i>
+      <div class="tooltip left">Extract storytelling configuration</div>
+    </button>
+    <ExportState v-if="exportMap" v-model="showMapState" />
+
+    <button
+      v-if="changeProjection && !!availableMapProjection"
+      class="primary small circle small-elevate"
+      @click="changeMapProjection(availableMapProjection)"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg
+      ></i>
+      <div class="tooltip left">Change map projection</div>
+    </button>
+    <button
+      v-if="compareIndicators"
+      class="primary small circle small-elevate"
+      @click="onCompareClick"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg
+      ></i>
+      <div class="tooltip left">Compare mode</div>
+    </button>
+    <button
+      v-if="backToPOIs && (poi || comparePoi)"
+      class="primary small circle small-elevate"
+      @click="loadPOiIndicator()"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24">
+          <path :d="mdiStarFourPointsCircleOutline" /></svg
+      ></i>
+      <div class="tooltip left">Back to POIs</div>
+    </button>
+    <eox-geosearch
+      v-if="mapEl && enableSearch"
+      :for="mapEl"
+      :endpoint="opencageUrl"
+      class="geosearch-detached"
+      label="Search"
+      small
+      button
+      list-direction="left"
+      results-direction="down"
+      tooltip="Search"
+      tooltip-direction="left"
+    ></eox-geosearch>
+    <PopUp
+      v-model="showCompareIndicators"
+      :maxWidth="popupWidth"
+      :width="popupWidth"
+      :max-height="popupHeight"
+      :height="popupHeight"
+    >
+      <EodashItemFilter
+        :enableCompare="true"
+        :enableHighlighting="false"
+        resultType="cards"
+        style="--select-filter-max-items: 8"
+        filters-title="Select an indicator to compare"
+        subTitleProperty="subtitle"
+        imageProperty="thumbnail"
+        aggregateResults="collection_group"
+        results-title=""
+        @select="onSelectCompareIndicator"
+      />
+    </PopUp>
+  </div>
+</template>
+<script setup>
+import { useTransparentPanel } from "@/composables";
+import { changeMapProjection, setActiveTemplate } from "@/store/actions";
+import {
+  activeTemplate,
+  availableMapProjection,
+  comparePoi,
+  mapEl,
+  poi,
+} from "@/store/states";
+import {
+  mdiCompare,
+  mdiCompareRemove,
+  mdiEarthBox,
+  mdiMapPlus,
+  mdiMinus,
+  mdiPlus,
+  mdiStarFourPointsCircleOutline,
+} from "@mdi/js";
+import ExportState from "^/ExportState.vue";
+import { computed, ref, triggerRef } from "vue";
+import PopUp from "^/PopUp.vue";
+import EodashItemFilter from "^/EodashItemFilter.vue";
+import { useDisplay } from "vuetify";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+import { loadPOiIndicator } from "^/EodashProcess/methods/handling";
+import { easeOut } from "ol/easing.js";
+
+import "@eox/geosearch";
+
+const {
+  compareIndicators,
+  changeProjection,
+  exportMap,
+  backToPOIs,
+  enableSearch,
+  enableZoom,
+} = defineProps({
+  exportMap: {
+    type: Boolean,
+    default: true,
+  },
+  changeProjection: {
+    type: Boolean,
+    default: true,
+  },
+  compareIndicators: {
+    /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
+    type: [Boolean, Object],
+    default: true,
+  },
+  backToPOIs: {
+    type: Boolean,
+    default: true,
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true,
+  },
+  enableZoom: {
+    type: Boolean,
+    default: true,
+  },
+});
+const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
+const { resetSelectedCompareSTAC } = useSTAcStore();
+const { smAndDown } = useDisplay();
+const popupWidth = computed(() => (smAndDown.value ? "80%" : "70%"));
+const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
+
+const showMapState = ref(false);
+const showCompareIndicators = ref(false);
+const compareIcon = computed(() =>
+  activeTemplate.value ===
+  ((typeof compareIndicators === "object" &&
+    compareIndicators?.compareTemplate) ||
+    "compare")
+    ? mdiCompareRemove
+    : mdiCompare,
+);
+
+const onCompareClick = () => {
+  showCompareIndicators.value =
+    activeTemplate.value !==
+    ((typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+      "compare");
+
+  const fallbackTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.fallbackTemplate) ||
+    "expert";
+  selectedCompareStac.value = null;
+  resetSelectedCompareSTAC();
+  setActiveTemplate(fallbackTemplate);
+  triggerRef(selectedStac);
+};
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+
+const onSelectCompareIndicator = () => {
+  const compareTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+    "compare";
+  setActiveTemplate(compareTemplate);
+  showCompareIndicators.value = !showCompareIndicators.value;
+};
+
+useTransparentPanel(rootRef);
+
+const onMapZoomOut = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom - 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+
+const onMapZoomIn = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom + 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+const opencageApiKey = process.env.EODASH_OPENCAGE || "NO_KEY_FOUND";
+const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencageApiKey}`;
+
+/*const menu = document
+  .querySelector("eox-geosearch")
+  .renderRoot.querySelector("menu");*/
+</script>
+
+<style scoped>
+@import url("@eox/ui/style.css");
+
+.map-buttons button {
+  margin-bottom: 5px;
+  background-color: var(--primary);
+}
+
+/* Container constraints removal */
+eox-geosearch {
+  position: relative !important;
+  overflow: visible !important;
+  z-index: 10;
+}
+</style>