@geode/opengeodeweb-front 10.14.1 → 10.14.2-rc.2

package/app/components/Viewer/ObjectTree/Base/Controls.vue

@@ -9,50 +9,136 @@ const { search, sortType, filterOptions, availableFilterOptions } = defineProps(
   availableFilterOptions: { type: Array, required: true },
 });
 
-const emit = defineEmits(["update:search", "toggle-sort"]);
+const emit = defineEmits(["update:search", "toggle-sort", "collapse-all"]);
+
+const showSearch = ref(false);
+
+watch(
+  () => showSearch.value,
+  (val) => {
+    if (!val) {
+      emit("update:search", "");
+    }
+  },
+);
 </script>
 
 <template>
-  <v-row dense align="center" class="pa-2">
-    <v-col>
-      <SearchBar
-        :model-value="search"
-        label="Search"
-        color="black"
-        base-color="black"
-        @update:model-value="emit('update:search', $event)"
-      />
-    </v-col>
-    <v-col cols="auto" class="d-flex align-center">
-      <ActionButton
-        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
-        :icon="
-          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
-        "
-        tooltipLocation="bottom"
-        @click="emit('toggle-sort')"
-      />
-      <v-menu :close-on-content-click="false">
-        <template #activator="{ props: menuProps }">
+  <v-row dense align="center" class="pa-2 py-1">
+    <v-col cols="12">
+      <div
+        class="controls-capsule d-flex align-center rounded-pill px-1 overflow-hidden"
+        :class="{ 'is-expanded': showSearch }"
+      >
+        <ActionButton
+          :tooltip="showSearch ? 'Hide search' : 'Show search'"
+          icon="mdi-magnify"
+          tooltipLocation="bottom"
+          variant="text"
+          color="black"
+          @click="showSearch = !showSearch"
+        />
+
+        <v-expand-x-transition>
+          <div v-if="showSearch" class="flex-grow-1 ms-1 text-no-wrap overflow-hidden">
+            <SearchBar
+              :model-value="search"
+              placeholder="Search objects..."
+              color="black"
+              base-color="black"
+              variant="plain"
+              density="compact"
+              prepend-inner-icon=""
+              autofocus
+              @update:model-value="emit('update:search', $event)"
+            />
+          </div>
+        </v-expand-x-transition>
+
+        <div class="d-flex align-center">
+          <v-fade-transition>
+            <v-divider
+              v-if="!showSearch"
+              vertical
+              inset
+              class="mx-1 align-self-center"
+              style="height: 20px"
+            />
+          </v-fade-transition>
           <ActionButton
-            tooltip="Filter options"
-            icon="mdi-filter-variant"
+            :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
+            :icon="
+              sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
+            "
+            variant="text"
+            color="black"
             tooltipLocation="bottom"
-            class="ml-1"
-            v-bind="menuProps"
+            @click="emit('toggle-sort')"
           />
-        </template>
-        <v-list class="mt-1">
-          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
-            <v-checkbox
-              v-model="filterOptions[category_id]"
-              :label="category_id"
-              hide-details
-              density="compact"
-            />
-          </v-list-item>
-        </v-list>
-      </v-menu>
+          <v-menu :close-on-content-click="false">
+            <template #activator="{ props: menuProps }">
+              <ActionButton
+                tooltip="Filter options"
+                icon="mdi-filter-variant"
+                variant="text"
+                color="black"
+                tooltipLocation="bottom"
+                v-bind="menuProps"
+              />
+            </template>
+            <v-list class="mt-1">
+              <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
+                <v-checkbox
+                  v-model="filterOptions[category_id]"
+                  :label="category_id"
+                  hide-details
+                  density="compact"
+                />
+              </v-list-item>
+            </v-list>
+          </v-menu>
+          <ActionButton
+            tooltip="Collapse All"
+            icon="mdi-collapse-all-outline"
+            variant="text"
+            color="black"
+            tooltipLocation="bottom"
+            @click="emit('collapse-all')"
+          />
+        </div>
+      </div>
     </v-col>
   </v-row>
 </template>
+
+<style scoped>
+.controls-capsule {
+  height: 40px;
+  border: 1px solid transparent;
+  transition: all 0.3s ease;
+  width: fit-content;
+}
+
+.controls-capsule.is-expanded {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.controls-capsule:hover:not(.is-expanded) {
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+:deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 40px !important;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.v-field__field) {
+  height: 40px !important;
+}
+</style>

package/app/components/Viewer/ObjectTree/Base/ItemLabel.vue

@@ -1,37 +1,62 @@
 <script setup>
-const { item, showTooltip } = defineProps({
+const { item, isLeaf } = defineProps({
   item: { type: Object, required: true },
-  showTooltip: { type: Boolean, default: false },
+  isLeaf: { type: Boolean, required: false, default: undefined },
 });
 
-const emit = defineEmits(["contextmenu"]);
+const emit = defineEmits(["contextmenu", "mouseenter", "mouseleave"]);
 
 const actualItem = computed(() => item.raw || item);
+
+const tooltipDisabled = computed(() => {
+  if (isLeaf !== undefined) {
+    return !isLeaf;
+  }
+  return actualItem.value.children && actualItem.value.children.length > 0;
+});
 </script>
 
 <template>
-  <span
-    class="tree-item-label"
-    :class="{ 'inactive-item': actualItem.is_active === false }"
-    @contextmenu.prevent.stop="emit('contextmenu', $event)"
-  >
-    {{ actualItem.title }}
-    <v-tooltip v-if="showTooltip && actualItem.category" activator="parent" location="right">
-      <div class="d-flex flex-column pa-1">
-        <span class="text-caption"><strong>ID:</strong> {{ actualItem.id }}</span>
-        <span v-if="actualItem.title" class="text-caption"
-          ><strong>Name:</strong> {{ actualItem.title }}</span
+  <div class="tree-item-label-container w-100">
+    <v-tooltip :disabled="tooltipDisabled" location="right" open-delay="400">
+      <template #activator="{ props: tooltipProps }">
+        <span
+          v-bind="tooltipProps"
+          class="tree-item-label"
+          :class="{ 'inactive-item': actualItem.is_active === false }"
+          @contextmenu.prevent.stop="emit('contextmenu', $event)"
+          @mouseenter="emit('mouseenter')"
+          @mouseleave="emit('mouseleave')"
         >
-        <span class="text-caption font-italic border-t-sm d-flex align-center">
-          <strong class="mr-1">Status:</strong>
-          {{ actualItem.is_active ? "Active" : "Inactive" }}
+          {{ actualItem.title }}
+        </span>
+      </template>
+
+      <div class="d-flex flex-column ga-1">
+        <span class="text-caption">
+          <strong class="text-white">ID:</strong> {{ actualItem.id }}
+        </span>
+        <span v-if="actualItem.title" class="text-caption">
+          <strong class="text-white">Name:</strong> {{ actualItem.title }}
+        </span>
+        <span class="text-caption">
+          <strong class="text-white">Status:</strong>
+          <i class="ml-1">{{ actualItem.is_active ? "Active" : "Inactive" }}</i>
         </span>
       </div>
     </v-tooltip>
-  </span>
+  </div>
 </template>
 
 <style scoped>
+.tree-item-label-container {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  height: 100%;
+  width: 100%;
+}
+
 .tree-item-label {
   white-space: nowrap;
   overflow: hidden;

package/app/components/Viewer/ObjectTree/Base/StickyHeader.vue

@@ -0,0 +1,46 @@
+<script setup>
+import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
+
+const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
+  item: { type: Object, required: true },
+  itemProps: { type: Object, required: true },
+  selection: { type: Object, required: true },
+  isSelected: { type: Function, required: true },
+  getIndeterminate: { type: Function, required: true },
+});
+
+const emit = defineEmits(["toggle-open", "toggle-select"]);
+</script>
+
+<template>
+  <div class="sticky-tree-header tree-row" @click="$emit('toggle-open', item.raw)">
+    <TreeRow
+      :item="item"
+      :item-props="itemProps"
+      :selection="selection"
+      :is-selected="isSelected"
+      :get-indeterminate="getIndeterminate"
+      @toggle-open="$emit('toggle-open', $event)"
+      @toggle-select="$emit('toggle-select', $event)"
+    >
+      <template #title="slotProps">
+        <slot name="title" v-bind="slotProps" />
+      </template>
+    </TreeRow>
+  </div>
+</template>
+
+<style scoped>
+.sticky-tree-header {
+  flex-shrink: 0;
+  background-color: transparent;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  z-index: 20;
+}
+
+.sticky-tree-header:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+</style>

package/app/components/Viewer/ObjectTree/Base/TreeRow.vue

@@ -0,0 +1,77 @@
+<script setup>
+const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
+  item: { type: Object, required: true },
+  itemProps: { type: Object, required: true },
+  selection: { type: Object, required: true },
+  isSelected: { type: Function, required: true },
+  getIndeterminate: { type: Function, required: true },
+});
+
+defineEmits(["toggle-open", "toggle-select"]);
+
+const INDENT_STEP = 16;
+</script>
+
+<template>
+  <div class="tree-row-content d-flex align-center px-4 ps-3 w-100">
+    <div
+      v-if="item.depth > 0"
+      class="flex-shrink-0"
+      :style="{ width: `${item.depth * INDENT_STEP}px` }"
+    />
+
+    <div class="d-flex align-center flex-shrink-0">
+      <v-icon
+        v-if="!item.isLeaf"
+        :icon="item.isOpen ? 'mdi-menu-down' : 'mdi-menu-right'"
+        class="me-1"
+        color="black"
+        @click.stop="$emit('toggle-open', item.raw)"
+      />
+      <div v-else class="icon-placeholder" />
+
+      <v-btn
+        v-if="selection.selectable"
+        :icon="
+          getIndeterminate(item.raw)
+            ? 'mdi-eye-minus'
+            : isSelected(item.raw)
+              ? 'mdi-eye'
+              : 'mdi-eye-off'
+        "
+        variant="text"
+        density="compact"
+        color="black"
+        class="flex-shrink-0"
+        @click.stop="$emit('toggle-select', item.raw)"
+        @mousedown.stop
+      />
+    </div>
+
+    <div class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1">
+      <slot name="title" :item="item.raw" :is-leaf="item.isLeaf">
+        <v-list-item-title :class="{ 'font-weight-bold': !item.isLeaf }" class="text-black">
+          {{ item.raw[itemProps.title] || item.id }}
+        </v-list-item-title>
+      </slot>
+    </div>
+
+    <div class="ms-auto d-flex align-center">
+      <slot name="append" :item="item.raw" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-row-content {
+  min-height: 44px;
+}
+
+.icon-placeholder {
+  width: 24px;
+}
+
+.tree-title {
+  min-height: 24px;
+}
+</style>

package/app/components/Viewer/ObjectTree/Box.vue

@@ -1,20 +1,68 @@
 <script setup>
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
 const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
   title: { type: String, required: true },
-  closable: { type: Boolean, default: false },
-  icon: { type: String, default: "" },
-  mdiIcon: { type: String, default: "" },
-  scrollTop: { type: Number, default: 0 },
+  closable: { type: Boolean, required: false, default: false },
+  icon: { type: String, required: false, default: "" },
+  mdiIcon: { type: String, required: false, default: "" },
+  scrollTop: { type: Number, required: false, default: 0 },
 });
-
 const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
 
-const scrollContainer = ref(undefined);
+const scrollContainer = useTemplateRef("scroll-container");
+const treeviewBox = useTemplateRef("treeview-box");
+const hybridViewerStore = useHybridViewerStore();
+
+const LUMINANCE_THRESHOLD = 0.65;
+const ADAPTIVE_EXPONENT = 0.3;
+
+const MIN_BLUR = 8;
+const MAX_BLUR = 25;
+
+const MIN_OPACITY = 0;
+const MAX_OPACITY = 0.5;
+
+const MIN_BOOST = 1;
+const MAX_BOOST = 1.2;
+const ADAPTIVE_REFRESH_RATE = 150;
+
+const { x, y, width, height } = useElementBounding(treeviewBox);
+const brightness = ref(LUMINANCE_THRESHOLD);
+
+const updateBrightness = useThrottleFn(() => {
+  brightness.value = hybridViewerStore.getAverageBrightness({
+    x: x.value,
+    y: y.value,
+    width: width.value,
+    height: height.value,
+  });
+}, ADAPTIVE_REFRESH_RATE);
+
 let isApplyingScroll = false;
 let resizeObserver = undefined;
 
+watch([x, y, width, height, () => hybridViewerStore.latestImage], updateBrightness, {
+  immediate: true,
+});
+
+const adaptiveStyles = computed(() => {
+  const normalized = Math.min(1, brightness.value / LUMINANCE_THRESHOLD);
+  const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
+
+  const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
+  const opacity = MIN_OPACITY + darkFactor * (MAX_OPACITY - MIN_OPACITY);
+  const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
+
+  return {
+    "--adaptive-blur": `${blur}px`,
+    "--adaptive-opacity": opacity,
+    "--adaptive-brightness": brightnessBoost,
+  };
+});
+
 function handleScroll(event) {
   if (isApplyingScroll) {
     return;
@@ -69,7 +117,12 @@ watch(
 </script>
 
 <template>
-  <v-card variant="outlined" class="tree-box d-flex flex-column">
+  <v-card
+    ref="treeview-box"
+    variant="outlined"
+    class="tree-box d-flex flex-column"
+    :style="adaptiveStyles"
+  >
     <v-card-title
       class="tree-box-header d-flex align-center"
       :class="{ 'cursor-grab': closable }"
@@ -89,7 +142,15 @@ watch(
       <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
-        style="height: 24px; line-height: 1"
+        style="
+          height: 24px;
+          line-height: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex-shrink: 1;
+          min-width: 0;
+        "
       >
         {{ title }}
       </span>
@@ -103,10 +164,11 @@ watch(
       />
     </v-card-title>
     <v-divider />
-    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column">
+    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column" style="min-height: 0">
       <div
-        ref="scrollContainer"
-        class="flex-grow-1 overflow-y-auto overflow-x-hidden"
+        ref="scroll-container"
+        class="flex-grow-1 overflow-y-hidden overflow-x-hidden d-flex flex-column"
+        style="min-height: 0"
         @scroll="handleScroll"
       >
         <slot />
@@ -118,15 +180,44 @@ watch(
 <style scoped>
 .tree-box {
   height: 100%;
+  min-height: 0;
   border-radius: 16px;
   background-color: transparent !important;
-  backdrop-filter: blur(2px);
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+  transition:
+    background-color 0.3s ease,
+    backdrop-filter 0.3s ease;
+}
+
+.tree-box::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  mix-blend-mode: lighten;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.3s ease,
+    backdrop-filter 0.3s ease;
+}
+
+.tree-box > * {
+  position: relative;
+  z-index: 1;
 }
 
 .tree-box-header {
   height: 40px !important;
-  padding: 0 8px !important;
-  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0 12px !important;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
 }
 </style>

package/app/components/Viewer/ObjectTree/Layout.vue

@@ -48,7 +48,7 @@ watch(
   { immediate: true },
 );
 
-watch(maxWidth, (newMax) => {
+watch([maxWidth, () => additionalViews.value.length], ([newMax]) => {
   const hasAdditional = additionalViews.value.length > 0;
   const gap = hasAdditional ? GAP_WIDTH : 0;
   const total =
@@ -143,20 +143,20 @@ function onVerticalResizeStart(event, index) {
     const deltaPercent = (deltaY / containerHeight) * PERCENT_100;
     const minHeightPercent = (HEIGHT_MIN / containerHeight) * PERCENT_100;
 
-    let newH1 = startHeight1 + deltaPercent;
-    let newH2 = startHeight2 - deltaPercent;
+    let newHeight1 = startHeight1 + deltaPercent;
+    let newHeight2 = startHeight2 - deltaPercent;
 
-    if (newH1 < minHeightPercent) {
-      newH1 = minHeightPercent;
-      newH2 = startHeight1 + startHeight2 - minHeightPercent;
-    } else if (newH2 < minHeightPercent) {
-      newH2 = minHeightPercent;
-      newH1 = startHeight1 + startHeight2 - minHeightPercent;
+    if (newHeight1 < minHeightPercent) {
+      newHeight1 = minHeightPercent;
+      newHeight2 = startHeight1 + startHeight2 - minHeightPercent;
+    } else if (newHeight2 < minHeightPercent) {
+      newHeight2 = minHeightPercent;
+      newHeight1 = startHeight1 + startHeight2 - minHeightPercent;
     }
 
     const newHeights = [...rowHeights.value];
-    newHeights[index] = newH1;
-    newHeights[index + 1] = newH2;
+    newHeights[index] = newHeight1;
+    newHeights[index + 1] = newHeight2;
     treeviewStore.setRowHeights(newHeights);
 
     document.body.style.userSelect = "none";
@@ -272,7 +272,7 @@ function onVerticalResizeStart(event, index) {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
   flex-shrink: 0;
 }
@@ -286,6 +286,8 @@ function onVerticalResizeStart(event, index) {
 }
 
 .view-wrapper {
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   padding: 2px;
   transition: transform 0.2s;