@eodash/eodash 5.1.0 → 5.2.0

package/core/client/components/DashboardLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-main>
+  <v-main class="pa-0">
     <eox-layout
       :mediaBreakpoints="[0, 960, 1920]"
       :gap="gap"

package/core/client/components/EodashOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="eodash-overlay" v-if="$vuetify.display.mdAndUp">
+  <div class="eodash-overlay">
     <p>
       <a href="https://github.com/eodash/eodash" target="_blank"
         >eodash v{{ version }}</a
@@ -41,10 +41,9 @@ const base64Logo = btoa(eoxLogo);
   z-index: 9999;
   pointer-events: none;
   p {
-    position: absolute;
-    bottom: -4px;
-    left: 95px;
-    transform: translate(-50%, -50%);
+    position: fixed;
+    bottom: 6px;
+    left: 24px;
     color: rgba(var(--v-theme-on-secondary), 1);
   }
   a {

package/core/client/components/MobileLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-main class="overflow-hidden">
+  <v-main class="overflow-hidden pa-0">
     <Suspense suspensible>
       <component
         id="bg-widget"
@@ -18,9 +18,17 @@
         class="pa-2 panel bg-surface"
       >
         <div class="d-flex py-2 justify-end align-end">
-          <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
-            >&#x2715;</v-btn
+          <button
+            class="circle small transparent close-btn"
+            @click="activeIdx = -1"
           >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <title>close</title>
+              <path
+                d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+              />
+            </svg>
+          </button>
         </div>
         <Suspense suspensible>
           <div
@@ -37,20 +45,17 @@
       </div>
     </template>
 
-    <v-tabs
-      ref="tabs"
-      align-tabs="center"
-      bg-color="surface"
-      class="tabs"
-      show-arrows
-      v-model="activeIdx"
-    >
+    <nav class="tabbed tabs">
       <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
-        <v-tab v-if="importedWidget.value.component" :value="idx">
-          {{ importedWidget.value.title }}
-        </v-tab>
+        <a
+          v-if="importedWidget.value.component"
+          :class="{ active: activeIdx === idx }"
+          @click="activeIdx = activeIdx === idx ? -1 : idx"
+        >
+          <span>{{ importedWidget.value.title }}</span>
+        </a>
       </template>
-    </v-tabs>
+    </nav>
   </v-main>
 </template>
 <script setup>
@@ -63,8 +68,6 @@ const { mainRect } = useLayout();
 
 const activeIdx = ref(-1);
 
-/** @type {import("vue").Ref<import("vuetify/components").VTabs | null>} */
-const tabs = ref(null);
 const tabsHeightFromBtm = ref("");
 const mainRectTopPx = ref("");
 const mainRectBtmPx = ref("");
@@ -72,11 +75,22 @@ const mainRectBtmPx = ref("");
 onMounted(() => {
   mainRectTopPx.value = mainRect.value.top + "px";
   mainRectBtmPx.value = (mainRect.value.bottom || 48) + "px";
-  tabsHeightFromBtm.value =
-    mainRect.value.bottom + (tabs.value?.$el?.clientHeight ?? 48) + "px";
+  tabsHeightFromBtm.value = mainRect.value.bottom + 48 + 32 + "px"; // 48px nav height + 32px bottom offset
 });
 </script>
 <style scoped>
+@import url("@eox/ui/style.css");
+
+#bg-widget {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .panel {
   bottom: v-bind("tabsHeightFromBtm");
   top: v-bind("mainRectTopPx");
@@ -97,9 +111,16 @@ onMounted(() => {
 }
 
 .tabs {
-  bottom: v-bind("mainRectBtmPx");
-  position: relative;
+  position: fixed;
+  bottom: 32px;
+  left: 12px;
+  right: 12px;
+  width: calc(100% - 24px);
+  height: 48px;
   z-index: 10;
+  background: white;
+  border-radius: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 :deep(.bg-surface) {
   backdrop-filter: blur(10px) !important;

package/core/client/composables/index.js

@@ -384,7 +384,7 @@ export const useEmitLayersUpdate = async (event, mapEl, layers) => {
       return;
     }
 
-    dl.getLayers().once("change", async () => {
+    mapEl.map.once("loadend", async () => {
       await emit();
       res(true);
     });

package/core/client/eodashSTAC/EodashCollection.js

@@ -9,6 +9,7 @@ import {
   generateFeatures,
   getDatetimeProperty,
   replaceLayer,
+  extractLayerLegend,
 } from "./helpers";
 import {
   getLayers,
@@ -184,20 +185,7 @@ export class EodashCollection {
 
     if (isSupported) {
       // Checking for potential legend asset
-      let extraProperties = null;
-      if (this.#collectionStac?.assets?.legend?.href) {
-        extraProperties = {
-          description: `<div style="width: 100%">
-            <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
-          </div>`,
-        };
-      }
-      // Check if collection has eox:colorlegend definition, if yes overwrite legend description
-      if (this.#collectionStac && this.#collectionStac["eox:colorlegend"]) {
-        extraProperties = {
-          layerLegend: this.#collectionStac["eox:colorlegend"],
-        };
-      }
+      let extraProperties = extractLayerLegend(this.#collectionStac);
       extraProperties = {
         ...extraProperties,
         ...(this.color && { color: this.color }),
@@ -212,7 +200,6 @@ export class EodashCollection {
       );
 
       jsonArray.push(
-        ...links,
         ...(await createLayersFromAssets(
           this.#collectionStac?.id ?? "",
           title || this.#collectionStac?.title || item.id,
@@ -223,6 +210,8 @@ export class EodashCollection {
           layerDatetime,
           extraProperties,
         )),
+        ...links,
+        // We add the links after the assets so they are layered underneath assets
       );
     } else {
       // fallback to STAC

package/core/client/eodashSTAC/createLayers.js

@@ -95,6 +95,36 @@ export async function createLayersFromAssets(
         url: assets[ast].href,
         attributions: assets[ast].attribution,
       });
+    } else if (assets[ast]?.type === "application/geodb+json") {
+      const responseData = await (await fetch(assets[ast].href)).json();
+      if (
+        !responseData ||
+        !Array.isArray(responseData) ||
+        responseData.length === 0
+      ) {
+        console.error(
+          "[eodash] GeoDB response data is not in expected format",
+          responseData,
+        );
+        continue;
+      }
+      const features = responseData.map((item) => {
+        return {
+          type: "Feature",
+          geometry: item.geometry,
+          // we pass the item making sure to remove geometry to avoid duplication
+          properties: { ...item, geometry: undefined },
+        };
+      });
+      const geojson = {
+        type: "FeatureCollection",
+        features: features,
+      };
+      geoJsonSources.push(
+        encodeURI(
+          "data:application/json;charset=utf-8," + JSON.stringify(geojson),
+        ),
+      );
     }
   }
 

package/core/client/eodashSTAC/helpers.js

@@ -221,7 +221,7 @@ export const extractLayerDatetime = (links, currentStep) => {
     slider: true,
     navigation: true,
     play: false,
-    displayFormat: "DD.MM.YYYY HH:MM",
+    displayFormat: "DD.MM.YYYY HH:mm",
   };
 };
 
@@ -550,3 +550,25 @@ export function getDatetimeProperty(links) {
     return prop;
   }
 }
+
+/**
+ * @param {import ("stac-ts").StacCollection | undefined | null} collection
+ * @returns {object}
+ */
+export function extractLayerLegend(collection) {
+  let extraProperties = {};
+  if (collection?.assets?.legend?.href) {
+    extraProperties = {
+      description: `<div style="width: 100%">
+          <img src="${collection.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
+        </div>`,
+    };
+  }
+  // Check if collection has eox:colorlegend definition, if yes overwrite legend description
+  if (collection && collection["eox:colorlegend"]) {
+    extraProperties = {
+      layerLegend: collection["eox:colorlegend"],
+    };
+  }
+  return extraProperties;
+}

package/dist/client/{DashboardLayout-ByVs1DrY.js → DashboardLayout-Dq9Kfe6O.js}

@@ -1,9 +1,9 @@
 import { createBlock, openBlock, withCtx, createElementVNode, unref, createElementBlock, createCommentVNode, normalizeStyle, Suspense, resolveDynamicComponent, mergeProps, Fragment, renderList, Transition } from 'vue';
 import '@eox/layout';
-import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-By_7_JjS.js';
-import { V as VMain } from './VMain-PryTLU4a.js';
+import { _ as _export_sfc, u as useDefineTemplate } from './asWebComponent-ZyEzWOOf.js';
+import { V as VMain } from './VMain-Ci9DyaGU.js';
 
-const _style_0 = ".panel[data-v-835b2a14]{position:relative;overflow:auto;z-index:1;pointer-events:none}.pointer[data-v-835b2a14]{pointer-events:all}.bg-panel[data-v-835b2a14]{z-index:0;border-radius:0!important}.fade-enter-active[data-v-835b2a14],.fade-leave-active[data-v-835b2a14]{transition:opacity .25s ease}.fade-enter-from[data-v-835b2a14],.fade-leave-to[data-v-835b2a14]{opacity:0}.bg-surface[data-v-835b2a14],.bg-primary[data-v-835b2a14]{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;max-height:100%;overflow:auto;scrollbar-color:rgba(var(--v-theme-on-surface),.2) transparent;scrollbar-width:thin}.bg-surface[data-v-835b2a14]{background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.bg-primary[data-v-835b2a14]{background-color:rgba(var(--v-theme-primary),var(--v-primary-opacity, .8))!important}";
+const _style_0 = ".panel[data-v-4126a8ae]{position:relative;overflow:auto;z-index:1;pointer-events:none}.pointer[data-v-4126a8ae]{pointer-events:all}.bg-panel[data-v-4126a8ae]{z-index:0;border-radius:0!important}.fade-enter-active[data-v-4126a8ae],.fade-leave-active[data-v-4126a8ae]{transition:opacity .25s ease}.fade-enter-from[data-v-4126a8ae],.fade-leave-to[data-v-4126a8ae]{opacity:0}.bg-surface[data-v-4126a8ae],.bg-primary[data-v-4126a8ae]{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;max-height:100%;overflow:auto;scrollbar-color:rgba(var(--v-theme-on-surface),.2) transparent;scrollbar-width:thin}.bg-surface[data-v-4126a8ae]{background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.bg-primary[data-v-4126a8ae]{background-color:rgba(var(--v-theme-primary),var(--v-primary-opacity, .8))!important}";
 
 const _hoisted_1 = ["gap"];
 const _hoisted_2 = ["id", "h", "w", "x", "y"];
@@ -24,7 +24,7 @@ const layoutStyle = {
 return (_ctx, _cache) => {
                                                        
 
-  return (openBlock(), createBlock(VMain, null, {
+  return (openBlock(), createBlock(VMain, { class: "pa-0" }, {
     default: withCtx(() => [
       createElementVNode("eox-layout", {
         mediaBreakpoints: [0, 960, 1920],
@@ -90,6 +90,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-835b2a14"]]);
+const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-4126a8ae"]]);
 
 export { DashboardLayout as default };

package/dist/client/{DynamicWebComponent-C3W7HSQm.js → DynamicWebComponent-DCBMXskE.js}

@@ -1,5 +1,5 @@
 import { withAsyncContext, ref, onMounted, onUnmounted, createElementBlock, openBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
-import { Y as useSTAcStore } from './asWebComponent-By_7_JjS.js';
+import { E as useSTAcStore } from './asWebComponent-ZyEzWOOf.js';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
 

package/dist/client/{EodashDatePicker-BIAf1sMT.js → EodashDatePicker-DtngxU6s.js}

@@ -1,11 +1,11 @@
 import { useCssVars, ref, useTemplateRef, customRef, computed, reactive, watch, onMounted, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createCommentVNode, createBlock, mergeProps, toHandlers } from 'vue';
 import { DatePicker } from 'v-calendar';
-import { _ as _export_sfc, r as useDisplay, Y as useSTAcStore, Z as useTransparentPanel, V as VBtn, v as VIcon, $ as eodashCollections, a0 as eodashCompareCollections } from './asWebComponent-By_7_JjS.js';
-import { x as datetime, k as getDatetimeProperty } from './helpers-Dy0Q13tP.js';
+import { _ as _export_sfc, D as useDisplay, E as useSTAcStore, F as useTransparentPanel, G as VBtn, H as VIcon, I as eodashCollections, J as eodashCompareCollections } from './asWebComponent-ZyEzWOOf.js';
+import { y as datetime, k as getDatetimeProperty } from './helpers-wXK7Ywio.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
 import { storeToRefs } from 'pinia';
-import { T as Tooltip } from './index-Dqj4tbx2.js';
+import { T as Tooltip } from './index-9KR-G20t.js';
 
 const _style_0 = ".vc-popover-content{--vc-nav-hover-bg: rgba(var(--v-theme-on-surface), .1);--vc-nav-item-active-color: rgb(var(--v-theme-on-secondary));--vc-nav-item-active-bg: rgba(var(--v-theme-secondary), .8);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .5)}.vc-container{--vc-day-content-hover-bg: rgba(var(--v-theme-on-surface), .2);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .4);--vc-header-arrow-hover-bg: rgba(var(--v-theme-secondary), .1)}.vc-attr{--vc-accent-600: rgba(var(--v-theme-secondary), .8)}.datePicker{--vc-day-content-hover-bg: red}@media (min-width: 960px){.datePicker{position:absolute;bottom:0;left:0;right:0;margin-inline:auto;width:fit-content}}.vc-day-content{color:#5e5e5e;font-weight:400}.vc-highlight-content-solid{color:#fff!important}.vc-popover-content-wrapper{transform:var(--254ea936)!important}.vc-date-picker-content,.datePicker{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.vc-popover-caret.direction-top.align-left{clip-path:polygon(0% 0%,100% 0%,0% 100%,0% 100%)}.vc-bordered{border:none}";
 

package/dist/client/{EodashItemFilter-DPznh8UB.js → EodashItemFilter-ClQebJQt.js}

@@ -1,5 +1,5 @@
 import { computed, ref, createElementBlock, openBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
-import { _ as _export_sfc, Y as useSTAcStore, a5 as isFirstLoad } from './asWebComponent-By_7_JjS.js';
+import { _ as _export_sfc, E as useSTAcStore, O as isFirstLoad } from './asWebComponent-ZyEzWOOf.js';
 import '@eox/itemfilter';
 
 const _style_0 = "eox-itemfilter[data-v-1be0ec61]{--form-flex-direction: row}@media (max-width: 768px){eox-itemfilter[data-v-1be0ec61]{--form-flex-direction: column}}";

package/dist/client/{EodashLayerControl-Bhxjw4V2.js → EodashLayerControl-BLBds28C.js}

@@ -3,8 +3,8 @@ import '@eox/layercontrol';
 import '@eox/jsonform';
 import '@eox/timecontrol';
 import 'color-legend-element';
-import { H as mapCompareEl, d as mapEl, I as getColFromLayer } from './helpers-Dy0Q13tP.js';
-import { _ as _export_sfc, Y as useSTAcStore, a1 as layerControlFormValueCompare, a2 as layerControlFormValue, a0 as eodashCompareCollections, $ as eodashCollections } from './asWebComponent-By_7_JjS.js';
+import { I as mapCompareEl, d as mapEl, J as getColFromLayer } from './helpers-wXK7Ywio.js';
+import { _ as _export_sfc, E as useSTAcStore, K as layerControlFormValueCompare, L as layerControlFormValue, J as eodashCompareCollections, I as eodashCollections } from './asWebComponent-ZyEzWOOf.js';
 import { storeToRefs } from 'pinia';
 
 const _style_0 = "eox-layercontrol[data-v-88d02d9c]{overflow:auto}";

package/dist/client/{EodashLayoutSwitcher-C5qTEffW.js → EodashLayoutSwitcher-DQ8SfVDd.js}

@@ -1,8 +1,8 @@
 import { ref, createElementBlock, openBlock, createBlock, unref, withCtx, createVNode, mergeProps } from 'vue';
-import { z as activeTemplate } from './helpers-Dy0Q13tP.js';
+import { A as activeTemplate } from './helpers-wXK7Ywio.js';
 import { mdiViewDashboard } from '@mdi/js';
-import { r as useDisplay, Z as useTransparentPanel, v as VIcon } from './asWebComponent-By_7_JjS.js';
-import { V as VTooltip } from './VTooltip-DZ0fjpB3.js';
+import { D as useDisplay, F as useTransparentPanel, H as VIcon } from './asWebComponent-ZyEzWOOf.js';
+import { V as VTooltip } from './VTooltip-J4ac48X7.js';
 
 const _sfc_main = {
   __name: 'EodashLayoutSwitcher',