@eodash/eodash 5.1.0 → 5.3.0

package/core/client/components/DashboardLayout.vue

@@ -1,9 +1,8 @@
 <template>
-  <v-main>
+  <v-main class="pa-0">
     <eox-layout
       :mediaBreakpoints="[0, 960, 1920]"
       :gap="gap"
-      class="layout-container"
       :style="layoutStyle"
     >
       <eox-layout-item

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

@@ -22,6 +22,7 @@ import { setCollectionsPalette } from "@/utils";
 import mustache from "mustache";
 import { toAbsolute } from "stac-js/src/http.js";
 import axios from "@/plugins/axios";
+import { storeToRefs } from "pinia";
 
 /**
 /** @type {import('@/types').Eodash | null}*/
@@ -57,68 +58,60 @@ export function useEodash() {
 }
 
 /**
- * Creates an absolute URL from a relative link and assignes it to `currentUrl`
- *
- * @param {string} [rel=''] Default is `''`
- * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
- *   root stac catalog. Default is `eodash.stacEndpoint`
- * @returns {import("vue").Ref<string>} - Returns `currentUrl`
- * @see {@link '@/store/states.js'}
+ * @param {import("vue").Ref<string>} absoluteUrl
+ * @returns
  */
-export const useAbsoluteUrl = (
-  rel = "",
-  base = inject(eodashKey)?.stacEndpoint,
-) => {
-  if (!rel || rel.includes("http") || !base) {
-    currentUrl.value = rel;
-    return currentUrl;
-  }
-
-  const st = base.split("/");
-  const arr = rel.split("/");
-  st.pop();
-
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i] == ".") continue;
-    if (arr[i] == "..") st.pop();
-    else st.push(arr[i]);
-  }
-
-  currentUrl.value = st.join("/");
-  return currentUrl;
-};
+const createUseAbsoluteUrl = (absoluteUrl) => {
+  /**
+   * Creates an absolute URL from a relative link and assignes it to `currentUrl`
+   *
+   * @param {string} [rel=''] Default is `''`
+   * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
+   *   root stac catalog. Default is `eodash.stacEndpoint`
+   * @returns {import("vue").Ref<string>} - Returns `currentUrl`
+   * @see {@link '@/store/states.js'}
+   */
+  return (rel = "", base) => {
+    const { stacEndpoint, isApi } = storeToRefs(useSTAcStore());
+    if (!base) {
+      base = stacEndpoint.value ?? undefined;
+      if (!base) {
+        console.warn(
+          "[eodash] No base URL provided for absolute URL construction.",
+        );
+        return absoluteUrl;
+      }
+    }
+    if (isApi.value) {
+      absoluteUrl.value = base + `/collections/${rel}`;
+      return absoluteUrl;
+    }
 
-/**
- * Use the absolute compare URL from a relative link
- *
- * @param {string} [rel=''] Default is `''`
- * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
- *   root stac catalog. Default is `eodash.stacEndpoint`
- * @returns {import("vue").Ref<string>} - Returns `currentUrl`
- * @see {@link '@/store/states.js'}
- */
-export const useCompareAbsoluteUrl = (
-  rel = "",
-  base = inject(eodashKey)?.stacEndpoint,
-) => {
-  if (!rel || rel.includes("http") || !base) {
-    currentCompareUrl.value = rel;
-    return currentCompareUrl;
-  }
+    if (rel.includes("http")) {
+      absoluteUrl.value = rel;
+      return absoluteUrl;
+    }
+    if (!rel) {
+      absoluteUrl.value = base;
+      return absoluteUrl;
+    }
 
-  const st = base.split("/");
-  const arr = rel.split("/");
-  st.pop();
+    const st = base.split("/");
+    const arr = rel.split("/");
+    st.pop();
 
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i] == ".") continue;
-    if (arr[i] == "..") st.pop();
-    else st.push(arr[i]);
-  }
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i] == ".") continue;
+      if (arr[i] == "..") st.pop();
+      else st.push(arr[i]);
+    }
 
-  currentCompareUrl.value = st.join("/");
-  return currentCompareUrl;
+    absoluteUrl.value = st.join("/");
+    return absoluteUrl;
+  };
 };
+export const useAbsoluteUrl = createUseAbsoluteUrl(currentUrl);
+export const useCompareAbsoluteUrl = createUseAbsoluteUrl(currentCompareUrl);
 
 /**
  * Updates an existing Vuetify theme. updates only the values provided in the
@@ -178,7 +171,6 @@ export const useURLSearchParametersSync = () => {
           }
           case "indicator": {
             log.debug("Found indicator key in url");
-            const eodash = inject(eodashKey);
             const match = store.stac?.find(
               (link) => useGetSubCodeId(link) == value,
             );
@@ -187,7 +179,7 @@ export const useURLSearchParametersSync = () => {
               if (searchParams.has("poi")) {
                 const indicatorUrl = toAbsolute(
                   match.href,
-                  eodash?.stacEndpoint ?? "",
+                  store.stacEndpoint ?? "",
                 );
                 // fetch indicator stac collection without rendering it
                 /** @type {import("stac-ts").StacCollection} */
@@ -224,7 +216,9 @@ export const useURLSearchParametersSync = () => {
                   await store.loadSelectedSTAC(poiAbsoluteUrl, true);
                 }
               } else {
-                await store.loadSelectedSTAC(match.href);
+                await store.loadSelectedSTAC(
+                  /** @type {string} */ (store.isApi ? match.id : match.href),
+                );
               }
             }
             break;
@@ -384,7 +378,7 @@ export const useEmitLayersUpdate = async (event, mapEl, layers) => {
       return;
     }
 
-    dl.getLayers().once("change", async () => {
+    mapEl.map.once("loadend", async () => {
       await emit();
       res(true);
     });