@geode/opengeodeweb-front 10.18.0 → 10.18.1-rc.2

package/app/components/Loading/EcoMessages.vue

@@ -40,18 +40,18 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <v-sheet color="transparent" height="160" class="position-relative overflow-visible mb-4">
+  <v-sheet color="transparent" min-height="160" class="position-relative overflow-visible mb-4">
     <v-scroll-y-reverse-transition mode="out-in">
       <v-card
         :key="currentMessage"
         rounded="lg"
-        class="pa-6 border mx-auto"
+        class="pa-4 pa-sm-6 border mx-auto"
         color="rgba(255, 255, 255, 0.05)"
         elevation="0"
         style="border-color: rgba(255, 255, 255, 0.1) !important"
       >
         <v-card-title
-          class="d-flex align-center ga-3 pa-0 mb-3 text-subtitle-1 font-weight-bold text-white text-wrap"
+          class="d-flex align-center ga-3 pa-0 mb-2 mb-sm-3 text-body-1 text-sm-subtitle-1 font-weight-bold text-white text-wrap"
         >
           <v-icon
             :icon="ecoMessages[currentMessage].icon"

package/app/components/Loading/Header.vue

@@ -8,18 +8,17 @@ const { logo } = defineProps({
 </script>
 
 <template>
-  <v-row justify="center" class="mb-8">
+  <v-row justify="center" class="mb-4 mb-sm-8">
     <v-img
       :src="logo"
-      height="180"
-      width="180"
+      class="responsive-logo"
       style="filter: drop-shadow(0 0 20px rgba(var(--v-theme-primary), 0.4))"
     />
   </v-row>
 
-  <v-card color="transparent" elevation="0" class="mb-8 overflow-visible">
+  <v-card color="transparent" elevation="0" class="mb-4 mb-sm-8 overflow-visible">
     <v-card-title
-      class="text-h2 font-weight-black text-white text-wrap pa-0 d-block"
+      class="font-weight-black text-white text-wrap pa-0 d-block responsive-title"
       style="text-shadow: 0 0 20px rgba(255, 255, 255, 0.3)"
     >
       STARTING UP
@@ -35,7 +34,17 @@ const { logo } = defineProps({
 </template>
 
 <style scoped>
+.responsive-logo {
+  width: clamp(100px, 20vw, 180px);
+  height: clamp(100px, 20vw, 180px);
+}
+
+.responsive-title {
+  font-size: clamp(2rem, 8vw, 4rem) !important;
+  line-height: 1.1 !important;
+}
+
 .ls-widest {
-  letter-spacing: 0.6em !important;
+  letter-spacing: clamp(0.2em, 2vw, 0.6em) !important;
 }
 </style>

package/app/components/Loading/Progress.vue

@@ -15,7 +15,7 @@ const { progress } = defineProps({
     rounded
     bg-color="white"
     bg-opacity="0.15"
-    class="custom-progress-glow mt-8"
+    class="custom-progress-glow mt-4 mt-sm-8"
   />
 </template>
 

package/app/components/Loading.vue

@@ -44,7 +44,7 @@ onUnmounted(() => {
     <Teleport to="body">
       <div
         v-if="show"
-        class="d-flex align-center justify-center transition-swing"
+        class="transition-swing overflow-y-auto"
         style="
           position: fixed;
           inset: 0;
@@ -58,23 +58,26 @@ onUnmounted(() => {
       >
         <div
           style="
-            position: absolute;
+            position: fixed;
             inset: 0;
             background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
             background-size: 40px 40px;
             background-position: center;
             pointer-events: none;
+            z-index: -1;
           "
         />
 
-        <div
-          class="d-flex flex-column align-center text-center"
-          style="max-width: 650px; width: 100%; padding: 0 24px; gap: 1.5rem"
-        >
-          <LoadingHeader :logo="logo" />
-          <LoadingEcoMessages :app-name="appName" />
-          <LoadingProgress :progress="progress" />
-          <LoadingFooter />
+        <div class="d-flex align-center justify-center pa-6" style="min-height: 100%">
+          <div
+            class="d-flex flex-column align-center text-center w-100"
+            style="max-width: 650px; gap: clamp(1rem, 4vh, 2rem)"
+          >
+            <LoadingHeader :logo="logo" />
+            <LoadingEcoMessages :app-name="appName" />
+            <LoadingProgress :progress="progress" />
+            <LoadingFooter />
+          </div>
         </div>
       </div>
     </Teleport>

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

@@ -163,10 +163,10 @@ const { focusedIndex, handleKeyDown } = useTreeKeyboardNav(
 }
 
 .tree-row-wrapper {
-  min-height: 44px !important;
+  min-height: 28px !important;
   cursor: pointer;
-  border-radius: 8px;
-  margin: 1px 4px;
+  border-radius: 4px;
+  margin: 0 2px;
 }
 
 .tree-row-wrapper.is-focused {

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

@@ -2,14 +2,15 @@
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
 
-const { search, sortType, filterOptions, availableFilterOptions } = defineProps({
+const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } = defineProps({
   search: { type: String, required: true },
   sortType: { type: String, required: true },
   filterOptions: { type: Object, required: true },
   availableFilterOptions: { type: Array, required: true },
+  isCollapsed: { type: Boolean, required: false, default: false },
 });
 
-const emit = defineEmits(["update:search", "toggle-sort", "collapse-all"]);
+const emit = defineEmits(["update:search", "toggle-sort", "collapse-all", "expand-all"]);
 
 const showSearch = ref(false);
 
@@ -24,7 +25,7 @@ watch(
 </script>
 
 <template>
-  <v-row dense align="center" class="pa-2 py-1">
+  <v-row dense align="center" class="pa-1 py-0">
     <v-col cols="12">
       <div
         class="controls-capsule d-flex align-center rounded-pill px-1 overflow-hidden"
@@ -98,6 +99,7 @@ watch(
             </v-list>
           </v-menu>
           <ActionButton
+            v-if="!isCollapsed"
             tooltip="Collapse All"
             icon="mdi-collapse-all-outline"
             variant="text"
@@ -105,6 +107,15 @@ watch(
             tooltipLocation="bottom"
             @click="emit('collapse-all')"
           />
+          <ActionButton
+            v-else
+            tooltip="Expand All"
+            icon="mdi-expand-all-outline"
+            variant="text"
+            color="black"
+            tooltipLocation="bottom"
+            @click="emit('expand-all')"
+          />
         </div>
       </div>
     </v-col>
@@ -113,7 +124,7 @@ watch(
 
 <style scoped>
 .controls-capsule {
-  height: 40px;
+  height: 32px;
   border: 1px solid transparent;
   transition: all 0.3s ease;
   width: fit-content;
@@ -133,12 +144,12 @@ watch(
 :deep(.v-field__input) {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-  min-height: 40px !important;
+  min-height: 32px !important;
   display: flex;
   align-items: center;
 }
 
 :deep(.v-field__field) {
-  height: 40px !important;
+  height: 32px !important;
 }
 </style>

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

@@ -1,4 +1,6 @@
 <script setup>
+import { middleTruncate } from "@ogw_front/utils/string";
+
 const { item, isLeaf } = defineProps({
   item: { type: Object, required: true },
   isLeaf: { type: Boolean, required: false, default: undefined },
@@ -6,8 +8,39 @@ const { item, isLeaf } = defineProps({
 
 const emit = defineEmits(["contextmenu", "mouseenter", "mouseleave"]);
 
+const labelContainer = useTemplateRef("label-container");
+const { width: containerWidth } = useElementSize(labelContainer);
+
 const actualItem = computed(() => item.raw || item);
 
+const UUID_END_CHARS = 12;
+const ELLIPSIS_LENGTH = 3;
+const MIN_START_CHARS = 4;
+
+const displayTitle = computed(() => {
+  const { title } = actualItem.value;
+  if (!title) {
+    return "";
+  }
+
+  // Estimate max characters based on width (approx 9px per char for typical font)
+  // We subtract some padding/icon space
+  const estimatedCharWidth = 8.5;
+  const maxChars = Math.floor(containerWidth.value / estimatedCharWidth);
+
+  // Only truncate if the text is longer than what fits
+  if (title.length <= maxChars) {
+    return title;
+  }
+
+  // Calculate dynamic start/end based on available space
+  // For UUIDs, showing the last 12 characters is often useful
+  const endChars = Math.min(UUID_END_CHARS, Math.floor(maxChars / ELLIPSIS_LENGTH));
+  const startChars = Math.max(MIN_START_CHARS, maxChars - endChars - ELLIPSIS_LENGTH);
+
+  return middleTruncate(title, maxChars, startChars, endChars);
+});
+
 const tooltipDisabled = computed(() => {
   if (isLeaf !== undefined) {
     return !isLeaf;
@@ -17,7 +50,7 @@ const tooltipDisabled = computed(() => {
 </script>
 
 <template>
-  <div class="tree-item-label-container w-100">
+  <div ref="label-container" class="tree-item-label-container w-100">
     <v-tooltip :disabled="tooltipDisabled" location="right" open-delay="400">
       <template #activator="{ props: tooltipProps }">
         <span
@@ -28,7 +61,7 @@ const tooltipDisabled = computed(() => {
           @mouseenter="emit('mouseenter')"
           @mouseleave="emit('mouseleave')"
         >
-          {{ actualItem.title }}
+          {{ displayTitle }}
         </span>
       </template>
 
@@ -65,6 +98,7 @@ const tooltipDisabled = computed(() => {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+  font-size: 0.8rem;
 }
 
 .inactive-item {

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

@@ -9,11 +9,11 @@ const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps
 
 defineEmits(["toggle-open", "toggle-select"]);
 
-const INDENT_STEP = 16;
+const INDENT_STEP = 10;
 </script>
 
 <template>
-  <div class="tree-row-content d-flex align-center px-4 ps-3 w-100">
+  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100">
     <div
       v-if="item.depth > 0"
       class="flex-shrink-0"
@@ -34,10 +34,10 @@ const INDENT_STEP = 16;
         v-if="selection.selectable"
         :icon="
           getIndeterminate(item.raw)
-            ? 'mdi-eye-minus'
+            ? 'mdi-eye-minus-outline'
             : isSelected(item.raw)
               ? 'mdi-eye'
-              : 'mdi-eye-off'
+              : 'mdi-eye-off-outline'
         "
         variant="text"
         density="compact"
@@ -50,7 +50,11 @@ const INDENT_STEP = 16;
 
     <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">
+        <v-list-item-title
+          :class="{ 'font-weight-bold': !item.isLeaf }"
+          class="text-black"
+          style="font-size: 0.8rem !important"
+        >
           {{ item.raw[itemProps.title] || item.id }}
         </v-list-item-title>
       </slot>
@@ -64,7 +68,7 @@ const INDENT_STEP = 16;
 
 <style scoped>
 .tree-row-content {
-  min-height: 44px;
+  min-height: 28px;
 }
 
 .icon-placeholder {

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

@@ -1,68 +1,27 @@
 <script setup>
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
-const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
+const { title, closable, icon, mdiIcon, scrollTop, borderRadius } = defineProps({
   title: { type: String, required: true },
   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 },
+  borderRadius: { type: String, required: false, default: "16px" },
+  borderLeft: { type: Boolean, required: false, default: true },
 });
 const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
 
 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);
+const { adaptiveStyles } = useAdaptiveStyles(treeviewBox);
 
 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;
@@ -121,7 +80,7 @@ watch(
     ref="treeview-box"
     variant="outlined"
     class="tree-box d-flex flex-column"
-    :style="adaptiveStyles"
+    :style="[adaptiveStyles, { borderRadius, borderLeft: borderLeft ? undefined : 'none' }]"
   >
     <v-card-title
       class="tree-box-header d-flex align-center"
@@ -181,7 +140,6 @@ watch(
 .tree-box {
   height: 100%;
   min-height: 0;
-  border-radius: 16px;
   background-color: transparent !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
@@ -214,8 +172,8 @@ watch(
 }
 
 .tree-box-header {
-  height: 40px !important;
-  padding: 0 12px !important;
+  height: 32px !important;
+  padding: 0 10px !important;
   background-color: rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   flex-shrink: 0;

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

@@ -3,15 +3,17 @@ import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalO
 import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const WIDTH_MIN = 200;
+const WIDTH_MIN = 100;
 const HEIGHT_MIN = 150;
-const GAP_WIDTH = 10;
+const GAP_WIDTH = 0;
 const PERCENT_100 = 100;
 
 const TOTAL_PERCENT = 100;
 const MAX_PANEL_WIDTH_RATIO = 0.8;
+const AUTO_CLOSE_THRESHOLD = 80;
 
 const { containerWidth } = defineProps({
   containerWidth: { type: Number, required: true },
@@ -20,16 +22,23 @@ const { containerWidth } = defineProps({
 const treeviewStore = useTreeviewStore();
 const emit = defineEmits(["show-menu"]);
 
+const activityBar = useTemplateRef("activity-bar");
+const { adaptiveStyles: activityBarAdaptiveStyles } = useAdaptiveStyles(activityBar);
+
 const maxWidth = computed(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
 
-const mainView = computed(() => treeviewStore.opened_views[0]);
-const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
+const mainView = computed(() => treeviewStore.opened_views.find((view) => view.id === "main"));
+const additionalViews = computed(() =>
+  treeviewStore.opened_views.filter((view) => view.id !== "main"),
+);
 
 const totalWidth = computed(() => {
   const hasAdditional = additionalViews.value.length > 0;
-  const gap = hasAdditional ? GAP_WIDTH : 0;
+  const hasMain = Boolean(mainView.value);
+  const gap = hasAdditional && hasMain ? GAP_WIDTH : 0;
+  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
-  return `${treeviewStore.panelWidth + secondColWidth + gap}px`;
+  return `${firstColWidth + secondColWidth + gap}px`;
 });
 
 const rowHeights = computed({
@@ -90,7 +99,7 @@ function onResizeStart(event) {
   const startX = event.clientX;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    let newWidth = startWidth + deltaX;
     const hasAdditional = additionalViews.value.length > 0;
     const gap = hasAdditional ? GAP_WIDTH : 0;
     const currentTotalWidth =
@@ -98,6 +107,12 @@ function onResizeStart(event) {
     if (currentTotalWidth > maxWidth.value) {
       newWidth = maxWidth.value - (hasAdditional ? treeviewStore.additionalPanelWidth : 0) - gap;
     }
+
+    if (newWidth < AUTO_CLOSE_THRESHOLD) {
+      treeviewStore.closeView("main");
+      return;
+    }
+
     treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
@@ -115,11 +130,13 @@ function onAdditionalResizeStart(event) {
   const startX = event.clientX;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    const newWidth = startWidth + deltaX;
     const currentTotalWidth = treeviewStore.panelWidth + newWidth + GAP_WIDTH;
-    if (currentTotalWidth > maxWidth.value) {
-      newWidth = maxWidth.value - treeviewStore.panelWidth - GAP_WIDTH;
+    if (newWidth < AUTO_CLOSE_THRESHOLD) {
+      treeviewStore.closeView(additionalViews.value.at(-1).id);
+      return;
     }
+
     treeviewStore.setAdditionalPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
@@ -177,88 +194,154 @@ function onVerticalResizeStart(event, index) {
 <template>
   <div
     v-if="treeviewStore.items.length > 0"
-    class="treeview-container d-flex"
-    :style="{ width: totalWidth }"
+    class="treeview-layout d-flex"
     @contextmenu.prevent
     @mousedown.stop
   >
     <div
-      class="column main-column"
-      :style="{
-        width: `${treeviewStore.panelWidth}px`,
-      }"
+      ref="activity-bar"
+      class="activity-bar d-flex flex-column align-center py-2"
+      :style="activityBarAdaptiveStyles"
     >
-      <ViewerObjectTreeBox
-        :title="mainView.title"
-        mdi-icon="mdi-file-tree-outline"
-        :scroll-top="mainView.scrollTop"
-        @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
-      >
-        <GlobalObjects data-testid="mainObjectTree" @show-menu="emit('show-menu', $event)" />
-      </ViewerObjectTreeBox>
+      <v-btn
+        icon="mdi-file-tree-outline"
+        variant="text"
+        :color="mainView ? 'primary' : 'black'"
+        class="mb-2"
+        v-tooltip="'Toggle Objects'"
+        @click="treeviewStore.toggleView('main')"
+      />
     </div>
 
-    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
-
-    <div
-      v-if="additionalViews.length > 0"
-      class="column additional-column"
-      :style="{
-        width: `${treeviewStore.additionalPanelWidth}px`,
-      }"
-    >
-      <template v-for="(view, index) in additionalViews" :key="view.id">
-        <div
-          class="view-wrapper"
-          :class="{
-            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
-          }"
-          :style="{ flex: `0 0 ${rowHeights[index]}%` }"
-          @dragover="onDragOver"
-          @drop="onDrop(index + 1)"
+    <div class="treeview-container d-flex" :style="{ width: totalWidth }">
+      <div
+        v-if="mainView"
+        class="column main-column"
+        :style="{
+          width: `${treeviewStore.panelWidth}px`,
+        }"
+      >
+        <ViewerObjectTreeBox
+          :title="mainView?.title || 'Objects'"
+          mdi-icon="mdi-file-tree-outline"
+          :scroll-top="mainView?.scrollTop || 0"
+          closable
+          :border-radius="additionalViews.length > 0 ? '0' : '0 16px 16px 0'"
+          :border-left="false"
+          @close="treeviewStore.closeView('main')"
+          @update:scroll-top="mainView && treeviewStore.setScrollTop(mainView.id, $event)"
         >
-          <ViewerObjectTreeBox
-            :title="view.title"
-            :icon="geode_objects[view.geode_object_type]?.image"
-            :scroll-top="view.scrollTop"
-            closable
-            @close="treeviewStore.closeView(index + 1)"
-            @dragstart="onDragStart(index + 1)"
-            @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
+          <GlobalObjects data-testid="mainObjectTree" @show-menu="emit('show-menu', $event)" />
+        </ViewerObjectTreeBox>
+      </div>
+
+      <div
+        v-if="mainView && additionalViews.length > 0"
+        class="column-separator"
+        @mousedown="onResizeStart"
+      />
+
+      <div
+        v-if="additionalViews.length > 0"
+        class="column additional-column"
+        :style="{
+          width: `${treeviewStore.additionalPanelWidth}px`,
+        }"
+      >
+        <template v-for="(view, index) in additionalViews" :key="view.id">
+          <div
+            class="view-wrapper"
+            :class="{
+              'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
+            }"
+            :style="{ flex: `0 0 ${rowHeights[index]}%` }"
+            @dragover="onDragOver"
+            @drop="onDrop(index + 1)"
           >
-            <ModelComponents
-              data-testid="modelComponentsObjectTree"
-              :id="view.id"
-              @show-menu="emit('show-menu', $event)"
-            />
-          </ViewerObjectTreeBox>
-        </div>
-        <div
-          v-if="index < additionalViews.length - 1"
-          class="v-split-resizer"
-          @mousedown="onVerticalResizeStart($event, index)"
-        />
-      </template>
+            <ViewerObjectTreeBox
+              :title="view.title"
+              :icon="geode_objects[view.geode_object_type]?.image"
+              :scroll-top="view.scrollTop"
+              closable
+              :border-radius="index === additionalViews.length - 1 ? '0 16px 16px 0' : '0'"
+              :border-left="false"
+              @close="treeviewStore.closeView(view.id)"
+              @dragstart="onDragStart(index + 1)"
+              @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
+            >
+              <ModelComponents
+                data-testid="modelComponentsObjectTree"
+                :id="view.id"
+                @show-menu="emit('show-menu', $event)"
+              />
+            </ViewerObjectTreeBox>
+          </div>
+          <div
+            v-if="index < additionalViews.length - 1"
+            class="v-split-resizer"
+            @mousedown="onVerticalResizeStart($event, index)"
+          />
+        </template>
+      </div>
+      <div
+        v-if="treeviewStore.opened_views.length > 0"
+        class="total-resizer"
+        @mousedown="
+          additionalViews.length > 0
+            ? onAdditionalResizeStart($event)
+            : mainView
+              ? onResizeStart($event)
+              : undefined
+        "
+      />
     </div>
-    <div
-      class="total-resizer"
-      @mousedown="
-        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
-      "
-    />
   </div>
 </template>
 
 <style scoped>
-.treeview-container {
+.treeview-layout {
   position: absolute;
   z-index: 2;
   left: 0;
   top: 0;
   height: calc(100vh - 100px);
-  margin-top: 10px;
-  margin-left: 10px;
+  margin-top: 8px;
   pointer-events: auto;
+}
+
+.activity-bar {
+  width: 48px;
+  height: 100%;
+  border-radius: 16px 0 0 16px;
+  margin-left: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.activity-bar::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;
+}
+
+.activity-bar > * {
+  position: relative;
+  z-index: 1;
+}
+
+.treeview-container {
+  height: 100%;
   width: max-content;
   min-width: min-content;
 }
@@ -289,7 +372,6 @@ function onVerticalResizeStart(event, index) {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: 2px;
   transition: transform 0.2s;
   min-height: 150px;
 }
@@ -361,6 +443,6 @@ function onVerticalResizeStart(event, index) {
 }
 
 .total-resizer:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: transparent;
 }
 </style>

package/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue

@@ -99,6 +99,20 @@ function handleHoverLeave({ item }) {
   }
   onHoverLeave(actualItem.id);
 }
+
+function expandAll() {
+  const allIds = [];
+  function traverse(itemsList) {
+    for (const item of itemsList) {
+      if (item.children && item.children.length > 0) {
+        allIds.push(item.id);
+        traverse(item.children);
+      }
+    }
+  }
+  traverse(treeviewStore.items);
+  opened.value = allIds;
+}
 </script>
 
 <template>
@@ -108,8 +122,10 @@ function handleHoverLeave({ item }) {
       :sort-type="sortType"
       :filter-options="filterOptions"
       :available-filter-options="availableFilterOptions"
+      :is-collapsed="opened.length === 0"
       @toggle-sort="toggleSort"
       @collapse-all="opened = []"
+      @expand-all="expandAll"
     />
 
     <CommonTreeView
@@ -177,6 +193,6 @@ function handleHoverLeave({ item }) {
 
 .transparent-treeview {
   background-color: transparent;
-  margin: 4px 0;
+  margin: 2px 0;
 }
 </style>

package/app/components/Viewer/ObjectTree/Views/ModelComponents.vue

@@ -111,6 +111,20 @@ function handleHoverEnter({ item, immediate = false }) {
 function handleHoverLeave() {
   onHoverLeave(id);
 }
+
+function expandAll() {
+  const allIds = [];
+  function traverse(itemsList) {
+    for (const item of itemsList) {
+      if (item.children && item.children.length > 0) {
+        allIds.push(item.id);
+        traverse(item.children);
+      }
+    }
+  }
+  traverse(itemsForTreeView.value);
+  opened.value = allIds;
+}
 </script>
 
 <template>
@@ -120,8 +134,10 @@ function handleHoverLeave() {
       :sort-type="sortType"
       :filter-options="filterOptions"
       :available-filter-options="availableFilterOptions"
+      :is-collapsed="opened.length === 0"
       @toggle-sort="toggleSort"
       @collapse-all="opened = []"
+      @expand-all="expandAll"
     />
 
     <FetchingData v-if="rawItems === undefined" :size="48" :width="4" text="" />

package/app/composables/use_adaptive_styles.js

@@ -0,0 +1,55 @@
+import { computed, ref, watch } from "vue";
+import { useElementBounding, useThrottleFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+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;
+
+export function useAdaptiveStyles(targetRef) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { x, y, width, height } = useElementBounding(targetRef);
+  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);
+
+  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,
+    };
+  });
+
+  return {
+    adaptiveStyles,
+    brightness,
+  };
+}

package/app/composables/virtual_tree.js

@@ -112,10 +112,6 @@ export function useVirtualTree(propsIn, emit) {
           : (item[actualItemProps.value.title] || "").toLowerCase().includes(lowerSearch) ||
             String(id).toLowerCase().includes(lowerSearch);
 
-        if (!hasChildren && !matches) {
-          continue;
-        }
-
         if (hasChildren) {
           const subtree = [];
           flattenTree(children, depth + 1, subtree);
@@ -127,10 +123,15 @@ export function useVirtualTree(propsIn, emit) {
             raw: item,
             id,
             depth,
-            isOpen: true,
+            isOpen,
             isLeaf: false,
           });
-          result.push(...subtree);
+          if (isOpen) {
+            result.push(...subtree);
+          }
+          continue;
+        }
+        if (!matches) {
           continue;
         }
       }
@@ -150,8 +151,29 @@ export function useVirtualTree(propsIn, emit) {
     return result;
   }
 
+  function traverse(itemsList, allIds) {
+    for (const item of itemsList) {
+      const children = item[actualItemProps.value.children];
+      if (children && children.length > 0) {
+        allIds.push(item[actualItemProps.value.value]);
+        traverse(children, allIds);
+      }
+    }
+  }
+
   const displayItems = computed(() => flattenTree(props.value.items || []));
 
+  watch(
+    () => props.value.search,
+    (newSearch, oldSearch) => {
+      if (newSearch && !oldSearch) {
+        const allIds = [];
+        traverse(props.value.items || [], allIds);
+        emit("update:opened", [...new Set([...(props.value.opened || []), ...allIds])]);
+      }
+    },
+  );
+
   return {
     actualItemProps,
     actualSelection,

package/app/stores/treeview.js

@@ -68,9 +68,22 @@ export const useTreeviewStore = defineStore("treeview", () => {
     }
   });
 
-  function closeView(index) {
-    if (index > 0) {
-      opened_views.value = opened_views.value.filter((view, view_index) => view_index !== index);
+  function closeView(id) {
+    opened_views.value = opened_views.value.filter((view) => view.id !== id);
+  }
+
+  function toggleView(id) {
+    const index = opened_views.value.findIndex((view) => view.id === id);
+    if (index !== -1) {
+      closeView(id);
+    } else if (id === "main") {
+      opened_views.value.unshift({
+        type: "object",
+        id: "main",
+        title: "Objects",
+        scrollTop: 0,
+        opened: [],
+      });
     }
   }
 
@@ -116,7 +129,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
   function displayAdditionalTree(id, title, geodeObjectType) {
     const index = opened_views.value.findIndex((view) => view.id === id);
     if (index !== -1) {
-      return closeView(index);
+      return closeView(id);
     }
     additionalPanelWidth.value = panelWidth.value;
     opened_views.value.push({
@@ -216,6 +229,24 @@ export const useTreeviewStore = defineStore("treeview", () => {
     };
   }
 
+  function renameItem(id, newName) {
+    for (const group of items.value) {
+      const child = group.children.find((childItem) => childItem.id === id);
+      if (child) {
+        child.title = newName;
+        const options = { numeric: true, sensitivity: "base" };
+        group.children.sort((childA, childB) =>
+          childA.title.localeCompare(childB.title, undefined, options),
+        );
+        break;
+      }
+    }
+    const view = opened_views.value.find((openedView) => openedView.id === id);
+    if (view) {
+      view.title = newName;
+    }
+  }
+
   return {
     items,
     selection,
@@ -226,8 +257,10 @@ export const useTreeviewStore = defineStore("treeview", () => {
     rowHeights,
     addItem,
     removeItem,
+    renameItem,
     displayAdditionalTree,
     closeView,
+    toggleView,
     moveView,
     importStores,
     displayFileTree,

package/app/utils/string.js

@@ -0,0 +1,26 @@
+const DEFAULT_MAX_LENGTH = 20;
+const DEFAULT_START_CHARS = 8;
+const DEFAULT_END_CHARS = 6;
+
+/**
+ * Truncates a string in the middle.
+ * @param {string} text - The string to truncate.
+ * @param {number} maxLength - The maximum length of the string before truncation.
+ * @param {number} startChars - Number of characters to keep at the beginning.
+ * @param {number} endChars - Number of characters to keep at the end.
+ * @returns {string} The truncated string.
+ */
+export function middleTruncate(
+  text,
+  maxLength = DEFAULT_MAX_LENGTH,
+  startChars = DEFAULT_START_CHARS,
+  endChars = DEFAULT_END_CHARS,
+) {
+  if (!text || text.length <= maxLength) {
+    return text;
+  }
+
+  const start = text.slice(0, startChars);
+  const end = text.slice(-endChars);
+  return `${start}...${end}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.18.0",
+  "version": "10.18.1-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",