Fix/UI fixes

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>

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"

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>

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>
 

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);
 
@@ -98,13 +99,23 @@ watch(
             </v-list>
           </v-menu>
           <ActionButton
+            v-if="!isCollapsed"
             tooltip="Collapse All"
             icon="mdi-collapse-all-outline"
             variant="text"
             color="black"
             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>

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

@@ -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"

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

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

@@ -109,6 +109,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>
@@ -118,8 +132,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="" />

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,

app/stores/treeview.js

@@ -216,6 +216,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,6 +244,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     rowHeights,
     addItem,
     removeItem,
+    renameItem,
     displayAdditionalTree,
     closeView,
     moveView,