From 38e8e12cabd177faa8b50481bc4cd1277e3d47b5 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 24 Mar 2026 16:18:28 +0100
Subject: [PATCH 01/20] treeobject temp

---
 app/components/Viewer/TreeObject.vue | 95 ++++++++++++++++++++++++++--
 app/stores/treeview.js               | 12 ++--
 2 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/app/components/Viewer/TreeObject.vue b/app/components/Viewer/TreeObject.vue
index 2ddcfb55..e89860f2 100644
--- a/app/components/Viewer/TreeObject.vue
+++ b/app/components/Viewer/TreeObject.vue
@@ -1,4 +1,6 @@
 <script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
@@ -11,6 +13,54 @@ const hybridViewerStore = useHybridViewerStore();
 
 const emit = defineEmits(["show-menu"]);
 
+const search = ref("");
+const sortType = ref("name");
+const filterOptions = ref({});
+
+const processedItems = computed(() =>
+  treeviewStore.items
+    .filter((category) => filterOptions.value[category.title] !== false)
+    .map((category) => {
+      const field = sortType.value === "name" ? "title" : "id";
+      const children = (category.children || []).toSorted((first, second) =>
+        first[field].localeCompare(second[field], undefined, {
+          numeric: true,
+          sensitivity: "base",
+        }),
+      );
+      return { id: category.title, title: category.title, children };
+    }),
+);
+
+const availableFilterOptions = computed(() => treeviewStore.items.map((category) => category.title));
+
+watch(
+  availableFilterOptions,
+  (newOptions) => {
+    for (const option of newOptions) {
+      if (filterOptions.value[option] === undefined) {
+        filterOptions.value[option] = true;
+      }
+    }
+  },
+  { immediate: true },
+);
+
+function toggleSort() {
+  sortType.value = sortType.value === "name" ? "id" : "name";
+}
+
+function customFilter(value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  return (
+    item.raw.title.toLowerCase().includes(query) ||
+    (item.raw.id && item.raw.id.toLowerCase().includes(query))
+  );
+}
+
 function isLeafNode(item) {
   return !item.children || item.children.length === 0;
 }
@@ -24,8 +74,8 @@ watch(
     }
     const { added, removed } = compareSelections(current, previous);
     const updates = [
-      ...added.map((item) => dataStyleStore.setVisibility(item.id, true)),
-      ...removed.map((item) => dataStyleStore.setVisibility(item.id, false)),
+      ...added.map((id) => dataStyleStore.setVisibility(id, true)),
+      ...removed.map((id) => dataStyleStore.setVisibility(id, false)),
     ];
     await Promise.all(updates);
     hybridViewerStore.remoteRender();
@@ -45,10 +95,47 @@ onMounted(() => {
 </script>
 
 <template>
+  <v-row v-if="treeviewStore.items.length > 0" dense align="center" class="mr-1 ml-3 mt-2 pa-1">
+    <v-col>
+      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
+    </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="toggleSort"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="props"
+          />
+        </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-col>
+  </v-row>
   <v-treeview
     v-model:selected="treeviewStore.selection"
-    :items="treeviewStore.items"
-    return-object
+    :items="processedItems"
+    :search="search"
+    :custom-filter="customFilter"
     class="transparent-treeview"
     item-value="id"
     select-strategy="classic"
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 10e8d551..859b4612 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -25,7 +25,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
             sensitivity: "base",
           }),
         );
-        selection.value.push(child);
+        selection.value.push(id);
         return;
       }
     }
@@ -36,7 +36,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
         sensitivity: "base",
       }),
     );
-    selection.value.push(child);
+    selection.value.push(id);
   }
 
   function displayAdditionalTree(id) {
@@ -58,7 +58,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function exportStores() {
-    const selectionIds = selection.value.map((store) => store.id);
+    const selectionIds = selection.value;
     return {
       isAdditionnalTreeDisplayed: isAdditionnalTreeDisplayed.value,
       panelWidth: panelWidth.value,
@@ -86,14 +86,14 @@ export const useTreeviewStore = defineStore("treeview", () => {
     if (ids.length === 0) {
       for (const group of items.value) {
         for (const child of group.children) {
-          rebuilt.push(child);
+          rebuilt.push(child.id);
         }
       }
     } else {
       for (const group of items.value) {
         for (const child of group.children) {
           if (ids.includes(child.id)) {
-            rebuilt.push(child);
+            rebuilt.push(child.id);
           }
         }
       }
@@ -114,7 +114,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
           items.value.splice(i, 1);
         }
 
-        const selectionIndex = selection.value.findIndex((item) => item.id === id);
+        const selectionIndex = selection.value.indexOf(id);
         if (selectionIndex !== -1) {
           selection.value.splice(selectionIndex, 1);
         }

From 6f5c0171c297131b033b46ecb3ad1853cbc96ced Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Tue, 24 Mar 2026 15:19:14 +0000
Subject: [PATCH 02/20] Apply prepare changes

---
 .oxlintrc.json                       | 5 ++++-
 app/components/Viewer/TreeObject.vue | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index cfed6074..236b513f 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -119,7 +119,10 @@
         "vitest/no-hooks": "off",
         "vitest/no-importing-vitest-globals": "off",
         "max-lines-per-function": "off",
-        "max-statements": "off"
+        "max-statements": "off",
+        "vitest/prefer-to-be-truthy": "error",
+        "vitest/prefer-to-be-falsy": "error",
+        "vitest/prefer-to-be": "off"
       }
     },
     {
diff --git a/app/components/Viewer/TreeObject.vue b/app/components/Viewer/TreeObject.vue
index e89860f2..870f07cf 100644
--- a/app/components/Viewer/TreeObject.vue
+++ b/app/components/Viewer/TreeObject.vue
@@ -32,7 +32,9 @@ const processedItems = computed(() =>
     }),
 );
 
-const availableFilterOptions = computed(() => treeviewStore.items.map((category) => category.title));
+const availableFilterOptions = computed(() =>
+  treeviewStore.items.map((category) => category.title),
+);
 
 watch(
   availableFilterOptions,

From b170d74f6cbf794bc0759f32aa0f6eeafea70052 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 24 Mar 2026 17:06:18 +0100
Subject: [PATCH 03/20] trigger


From a800ff5d494eec2b8fd8b7bf5737bb00622286c6 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Tue, 24 Mar 2026 16:07:15 +0000
Subject: [PATCH 04/20] Apply prepare changes

---
 .oxlintrc.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index 236b513f..9ef99ce4 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -120,9 +120,8 @@
         "vitest/no-importing-vitest-globals": "off",
         "max-lines-per-function": "off",
         "max-statements": "off",
-        "vitest/prefer-to-be-truthy": "error",
-        "vitest/prefer-to-be-falsy": "error",
-        "vitest/prefer-to-be": "off"
+        "vitest/prefer-to-be-truthy": "off",
+        "vitest/prefer-to-be-falsy": "off"
       }
     },
     {

From 3d6f9d7a76401e3684a1c22cb4b46616f0cd00c2 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 10:07:44 +0100
Subject: [PATCH 05/20] reapply changes that disapeared

---
 app/components/ActionButton.vue         | 39 ++++++++++++
 app/components/VeaseViewToolbar.vue     | 12 ++--
 app/components/ViewToolbar.vue          | 15 +++--
 app/components/Viewer/BreadCrumb.vue    | 32 +++++-----
 app/components/Viewer/TreeComponent.vue | 81 +++++++++++++++++++++++--
 5 files changed, 143 insertions(+), 36 deletions(-)
 create mode 100644 app/components/ActionButton.vue

diff --git a/app/components/ActionButton.vue b/app/components/ActionButton.vue
new file mode 100644
index 00000000..cb7e6b7e
--- /dev/null
+++ b/app/components/ActionButton.vue
@@ -0,0 +1,39 @@
+<script setup>
+const DEFAULT_ICON_SIZE = 28;
+const {
+  icon,
+  tooltip,
+  color = undefined,
+  size = undefined,
+  variant = undefined,
+  density = "comfortable",
+  tooltipLocation = "left",
+  iconSize = DEFAULT_ICON_SIZE,
+} = defineProps({
+  icon: { type: String, required: true },
+  tooltip: { type: String, required: true },
+  color: { type: String },
+  size: { type: [String, Number] },
+  variant: { type: String },
+  density: { type: String },
+  tooltipLocation: { type: String },
+  iconSize: { type: [String, Number] },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <v-btn
+    :color="color"
+    :size="size"
+    :variant="variant"
+    :density="density"
+    v-tooltip:[tooltipLocation]="tooltip"
+    v-bind="$attrs"
+    icon
+    @click="emit('click', $event)"
+  >
+    <v-icon :size="iconSize">{{ icon }}</v-icon>
+  </v-btn>
+</template>
diff --git a/app/components/VeaseViewToolbar.vue b/app/components/VeaseViewToolbar.vue
index 743f8a63..195094e2 100644
--- a/app/components/VeaseViewToolbar.vue
+++ b/app/components/VeaseViewToolbar.vue
@@ -1,6 +1,7 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 
@@ -71,14 +72,11 @@ const camera_options = [
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
-        <v-btn
-          density="comfortable"
-          icon
+        <ActionButton
+          :icon="camera_option.icon"
+          :tooltip="camera_option.tooltip"
           @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
+        />
       </v-col>
     </v-row>
   </v-container>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 6530d84a..ed5811f7 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -1,6 +1,7 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -45,14 +46,12 @@ const camera_options = [
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
-        <v-btn
-          density="comfortable"
-          icon
-          @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
+        <ActionButton
+          :tooltip="camera_option.tooltip"
+          :icon="camera_option.icon"
+          tooltip-location="left"
+          @click="camera_option.action"
+        />
       </v-col>
     </v-row>
   </v-container>
diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index 04620f78..cfd83957 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -11,28 +11,24 @@ function goBackToFileTree() {
   treeviewStore.displayFileTree();
 }
 
-const model_id = computed(() => treeviewStore.model_id);
-
-const metaDatas = dataStore.refItem(model_id.value);
+const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
 </script>
 
 <template>
   <v-breadcrumbs class="mb-n10 breadcrumb-container">
     <div class="d-flex align-center gap-2 ml-2 mt-2 mb-1">
-      <v-menu v-if="treeviewStore.isAdditionnalTreeDisplayed" offset-y>
-        <template v-slot:activator="{ props }">
-          <v-btn icon variant="text" size="medium" v-bind="props" @click="goBackToFileTree">
-            <v-icon size="large">mdi-file-tree</v-icon>
-          </v-btn>
-          <span class="text-h5 font-weight-bold">/</span>
-          <v-icon size="x-large">
-            {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
-          </v-icon>
-          <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-            Model Explorer ({{ metaDatas.name }})
-          </span>
-        </template>
-      </v-menu>
+      <template v-if="treeviewStore.isAdditionnalTreeDisplayed">
+        <v-btn icon variant="text" size="medium" @click.stop="goBackToFileTree">
+          <v-icon size="large">mdi-file-tree</v-icon>
+        </v-btn>
+        <span class="text-h5 font-weight-bold">/</span>
+        <v-icon size="large">
+          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
+        </v-icon>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
+          Model Explorer ({{ metaDatas.name }})
+        </span>
+      </template>
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
@@ -44,6 +40,8 @@ const metaDatas = dataStore.refItem(model_id.value);
 
 <style scoped>
 .breadcrumb-container {
+  position: relative;
+  z-index: 10;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 7e4fa0ec..24348d2a 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -1,10 +1,11 @@
 <script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-import { compareSelections } from "@ogw_front/utils/treeview";
-
 const dataStyleStore = useDataStyleStore();
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -14,12 +15,45 @@ const { id } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
 
 const items = ref([]);
+const search = ref("");
+const sortType = ref("name");
+const filterOptions = ref({ Corner: true, Line: true, Surface: true, Block: true });
+
 const mesh_components_selection = dataStyleStore.visibleMeshComponents(id);
 
 watchEffect(async () => {
   items.value = await dataStore.formatedMeshComponents(id);
 });
 
+const processedItems = computed(() =>
+  items.value
+    .filter((category) => filterOptions.value[category.id])
+    .map((category) => {
+      const field = sortType.value === "name" ? "title" : "id";
+      const children = (category.children || []).toSorted((first, second) =>
+        first[field].localeCompare(second[field]),
+      );
+      return { id: category.id, title: category.title, children };
+    }),
+);
+
+const availableFilterOptions = computed(() => items.value.map((category) => category.id));
+
+function toggleSort() {
+  sortType.value = sortType.value === "name" ? "id" : "name";
+}
+
+function customFilter(value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  return (
+    item.raw.title.toLowerCase().includes(query) ||
+    (item.raw.id && item.raw.id.toLowerCase().includes(query))
+  );
+}
+
 watch(
   mesh_components_selection,
   async (current, previous) => {
@@ -42,9 +76,47 @@ watch(
 </script>
 
 <template>
+  <v-row dense align="center" class="mr-1 ml-3 mt-2 pa-1">
+    <v-col>
+      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
+    </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="toggleSort"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="props"
+          />
+        </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-col>
+  </v-row>
   <v-treeview
     v-model:selected="mesh_components_selection"
-    :items="items"
+    :items="processedItems"
+    :search="search"
+    :custom-filter="customFilter"
     class="transparent-treeview"
     item-value="id"
     select-strategy="classic"
@@ -54,8 +126,9 @@ watch(
       <span
         class="treeview-item"
         @contextmenu.prevent.stop="emit('show-menu', { event: $event, itemId: item })"
-        >{{ item.title }}</span
       >
+        {{ item.title }}
+      </span>
     </template>
   </v-treeview>
 </template>

From bfc98e2b61d56c35e4fbd03761bde581b9b065d4 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 10:15:46 +0100
Subject: [PATCH 06/20] revert some

---
 app/stores/treeview.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 859b4612..5fb9c661 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -58,7 +58,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function exportStores() {
-    const selectionIds = selection.value;
+    const selectionIds = selection.value.map((store) => store.id);
     return {
       isAdditionnalTreeDisplayed: isAdditionnalTreeDisplayed.value,
       panelWidth: panelWidth.value,
@@ -86,14 +86,14 @@ export const useTreeviewStore = defineStore("treeview", () => {
     if (ids.length === 0) {
       for (const group of items.value) {
         for (const child of group.children) {
-          rebuilt.push(child.id);
+          rebuilt.push(child);
         }
       }
     } else {
       for (const group of items.value) {
         for (const child of group.children) {
           if (ids.includes(child.id)) {
-            rebuilt.push(child.id);
+            rebuilt.push(child);
           }
         }
       }
@@ -114,7 +114,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
           items.value.splice(i, 1);
         }
 
-        const selectionIndex = selection.value.indexOf(id);
+        const selectionIndex = selection.value.findIndex((item) => item.id === id);
         if (selectionIndex !== -1) {
           selection.value.splice(selectionIndex, 1);
         }

From 506e4d90192cf7173db3976ebebe7987685aa364 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 11:18:21 +0100
Subject: [PATCH 07/20] harmonize props declaration

---
 app/components/ActionButton.vue | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/app/components/ActionButton.vue b/app/components/ActionButton.vue
index cb7e6b7e..55d63114 100644
--- a/app/components/ActionButton.vue
+++ b/app/components/ActionButton.vue
@@ -1,23 +1,14 @@
 <script setup>
 const DEFAULT_ICON_SIZE = 28;
-const {
-  icon,
-  tooltip,
-  color = undefined,
-  size = undefined,
-  variant = undefined,
-  density = "comfortable",
-  tooltipLocation = "left",
-  iconSize = DEFAULT_ICON_SIZE,
-} = defineProps({
+const { icon, tooltip, color, size, variant, density, tooltipLocation, iconSize } = defineProps({
   icon: { type: String, required: true },
   tooltip: { type: String, required: true },
   color: { type: String },
   size: { type: [String, Number] },
   variant: { type: String },
-  density: { type: String },
-  tooltipLocation: { type: String },
-  iconSize: { type: [String, Number] },
+  density: { type: String, default: "comfortable" },
+  tooltipLocation: { type: String, default: "left" },
+  iconSize: { type: [String, Number], default: DEFAULT_ICON_SIZE },
 });
 
 const emit = defineEmits(["click"]);

From e9f53dea88eaa39886d4c33aeeed8f2e42822d4b Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 11:21:13 +0100
Subject: [PATCH 08/20] color and size undefined

---
 app/components/ActionButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/ActionButton.vue b/app/components/ActionButton.vue
index 55d63114..8cadbb69 100644
--- a/app/components/ActionButton.vue
+++ b/app/components/ActionButton.vue
@@ -3,8 +3,8 @@ const DEFAULT_ICON_SIZE = 28;
 const { icon, tooltip, color, size, variant, density, tooltipLocation, iconSize } = defineProps({
   icon: { type: String, required: true },
   tooltip: { type: String, required: true },
-  color: { type: String },
-  size: { type: [String, Number] },
+  color: { type: String, default: undefined },
+  size: { type: [String, Number], default: undefined },
   variant: { type: String },
   density: { type: String, default: "comfortable" },
   tooltipLocation: { type: String, default: "left" },

From d67cc57a3fd09fc5bc9894a699034a208cc8e63b Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 12:11:35 +0100
Subject: [PATCH 09/20] fix breadcrumbs

---
 app/components/Viewer/BreadCrumb.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index c8cc67be..0302ef29 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -11,14 +11,7 @@ function goBackToFileTree() {
   treeviewStore.displayFileTree();
 }
 
-const model_id = computed(() => treeviewStore.model_id);
-
-const metaDatas = computed(() => {
-  if (!model_id.value) {
-    return {};
-  }
-  return dataStore.refItem(model_id.value).value || {};
-});
+const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
 </script>
 
 <template>

From 13e437269fca0996fb0ef562ad1889f2d1fd1c9d Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Wed, 25 Mar 2026 11:12:21 +0000
Subject: [PATCH 10/20] Apply prepare changes

---
 app/components/Viewer/BreadCrumb.vue    | 10 ++--------
 app/components/Viewer/TreeComponent.vue | 24 +++++-------------------
 2 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index 0302ef29..cfd83957 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -23,11 +23,7 @@ const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
         </v-btn>
         <span class="text-h5 font-weight-bold">/</span>
         <v-icon size="large">
-          {{
-            selectedTree && selectedTree.icon
-              ? selectedTree.icon
-              : "mdi-shape-outline"
-          }}
+          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
         </v-icon>
         <span class="text-subtitle-1 font-weight-regular align-center mt-1">
           Model Explorer ({{ metaDatas.name }})
@@ -36,9 +32,7 @@ const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Objects
-        </span>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
       </div>
     </div>
   </v-breadcrumbs>
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 78e23395..9ce2d8eb 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -41,9 +41,7 @@ const processedItems = computed(() =>
     }),
 );
 
-const availableFilterOptions = computed(() =>
-  items.value.map((category) => category.id),
-);
+const availableFilterOptions = computed(() => items.value.map((category) => category.id));
 
 function toggleSort() {
   sortType.value = sortType.value === "name" ? "id" : "name";
@@ -89,20 +87,13 @@ watch(
 <template>
   <v-row dense align="center" class="mr-1 ml-3 mt-2 pa-1">
     <v-col>
-      <SearchBar
-        v-model="search"
-        label="Search"
-        color="black"
-        base-color="black"
-      />
+      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
     </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'
+          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
         "
         tooltipLocation="bottom"
         @click="toggleSort"
@@ -118,10 +109,7 @@ watch(
           />
         </template>
         <v-list class="mt-1">
-          <v-list-item
-            v-for="category_id in availableFilterOptions"
-            :key="category_id"
-          >
+          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
             <v-checkbox
               v-model="filterOptions[category_id]"
               :label="category_id"
@@ -146,9 +134,7 @@ watch(
     <template #title="{ item }">
       <span
         class="treeview-item"
-        @contextmenu.prevent.stop="
-          emit('show-menu', { event: $event, itemId: item })
-        "
+        @contextmenu.prevent.stop="emit('show-menu', { event: $event, itemId: item })"
       >
         {{ item.title }}
       </span>

From befc67ca7bddcd032496371ccf631e53b0504ccc Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 13:32:41 +0100
Subject: [PATCH 11/20] fix treecomponents, and breadcrumbs

---
 app/components/Viewer/BreadCrumb.vue    | 12 +++--------
 app/components/Viewer/TreeComponent.vue | 28 +++++++------------------
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index 0302ef29..2095fbf8 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -23,22 +23,16 @@ const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
         </v-btn>
         <span class="text-h5 font-weight-bold">/</span>
         <v-icon size="large">
-          {{
-            selectedTree && selectedTree.icon
-              ? selectedTree.icon
-              : "mdi-shape-outline"
-          }}
+          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
         </v-icon>
         <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Model Explorer ({{ metaDatas.name }})
+          Model Explorer ({{ metaDatas.value.name }})
         </span>
       </template>
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Objects
-        </span>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
       </div>
     </div>
   </v-breadcrumbs>
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 78e23395..66fa6775 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -23,7 +23,7 @@ const filterOptions = ref({
   Block: true,
 });
 
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(id);
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
 
 watchEffect(async () => {
   items.value = await dataStore.formatedMeshComponents(id);
@@ -41,9 +41,7 @@ const processedItems = computed(() =>
     }),
 );
 
-const availableFilterOptions = computed(() =>
-  items.value.map((category) => category.id),
-);
+const availableFilterOptions = computed(() => items.value.map((category) => category.id));
 
 function toggleSort() {
   sortType.value = sortType.value === "name" ? "id" : "name";
@@ -69,7 +67,7 @@ watch(
 
     const { added, removed } = compareSelections(current, previous);
     console.log("TreeComponent selection change:", {
-      id: props.id,
+      id,
       added,
       removed,
     });
@@ -89,20 +87,13 @@ watch(
 <template>
   <v-row dense align="center" class="mr-1 ml-3 mt-2 pa-1">
     <v-col>
-      <SearchBar
-        v-model="search"
-        label="Search"
-        color="black"
-        base-color="black"
-      />
+      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
     </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'
+          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
         "
         tooltipLocation="bottom"
         @click="toggleSort"
@@ -118,10 +109,7 @@ watch(
           />
         </template>
         <v-list class="mt-1">
-          <v-list-item
-            v-for="category_id in availableFilterOptions"
-            :key="category_id"
-          >
+          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
             <v-checkbox
               v-model="filterOptions[category_id]"
               :label="category_id"
@@ -146,9 +134,7 @@ watch(
     <template #title="{ item }">
       <span
         class="treeview-item"
-        @contextmenu.prevent.stop="
-          emit('show-menu', { event: $event, itemId: item })
-        "
+        @contextmenu.prevent.stop="emit('show-menu', { event: $event, itemId: item })"
       >
         {{ item.title }}
       </span>

From 93afec6ced243d77b3bfda312509304d2f3080c2 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 16:33:43 +0100
Subject: [PATCH 12/20] fix treeComponents & BreadCrumbs =>
 setModelMeshComponentsVisibility

---
 app/components/Viewer/BreadCrumb.vue      |  12 +-
 app/components/Viewer/TreeComponent.vue   |  68 ++++----
 app/stores/data.js                        |  22 ++-
 internal/stores/data_style/model/index.js | 192 ++++++++++++++--------
 4 files changed, 183 insertions(+), 111 deletions(-)

diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index 2095fbf8..0302ef29 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -23,16 +23,22 @@ const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
         </v-btn>
         <span class="text-h5 font-weight-bold">/</span>
         <v-icon size="large">
-          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
+          {{
+            selectedTree && selectedTree.icon
+              ? selectedTree.icon
+              : "mdi-shape-outline"
+          }}
         </v-icon>
         <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Model Explorer ({{ metaDatas.value.name }})
+          Model Explorer ({{ metaDatas.name }})
         </span>
       </template>
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
+          Objects
+        </span>
       </div>
     </div>
   </v-breadcrumbs>
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 66fa6775..45c91a9a 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -13,7 +13,9 @@ const hybridViewerStore = useHybridViewerStore();
 const { id } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
 
-const items = ref([]);
+const items = dataStore.refFormatedMeshComponents(toRef(() => id));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
+
 const search = ref("");
 const sortType = ref("name");
 const filterOptions = ref({
@@ -23,12 +25,6 @@ const filterOptions = ref({
   Block: true,
 });
 
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
-
-watchEffect(async () => {
-  items.value = await dataStore.formatedMeshComponents(id);
-});
-
 const processedItems = computed(() =>
   items.value
     .filter((category) => filterOptions.value[category.id])
@@ -58,30 +54,41 @@ function customFilter(value, searchQuery, item) {
   );
 }
 
-watch(
-  mesh_components_selection,
-  async (current, previous) => {
-    if (!previous) {
-      return;
+function expandCategorySelections(categoryIds, currentSelection, shouldBePresent) {
+  const extraIds = [];
+  for (const categoryId of categoryIds) {
+    const category = items.value.find((cat) => cat.id === categoryId);
+    if (category?.children) {
+      for (const child of category.children) {
+        if (currentSelection.includes(child.id) === shouldBePresent) {
+          extraIds.push(child.id);
+        }
+      }
     }
+  }
+  return extraIds;
+}
 
-    const { added, removed } = compareSelections(current, previous);
-    console.log("TreeComponent selection change:", {
-      id,
-      added,
-      removed,
-    });
+async function onSelectionChange(current) {
+  const previous = mesh_components_selection.value;
+  const { added, removed } = compareSelections(current, previous);
 
-    if (added.length > 0) {
-      await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);
-    }
-    if (removed.length > 0) {
-      await dataStyleStore.setModelMeshComponentsVisibility(id, removed, false);
-    }
-    hybridViewerStore.remoteRender();
-  },
-  { deep: true },
-);
+  if (added.length === 0 && removed.length === 0) {
+    return;
+  }
+
+  // Manual hierarchy: if a category is toggled, toggle all its children too
+  const allAdded = [...added, ...expandCategorySelections(added, current, false)];
+  const allRemoved = [...removed, ...expandCategorySelections(removed, current, true)];
+
+  if (allAdded.length > 0) {
+    await dataStyleStore.setModelMeshComponentsVisibility(id, allAdded, true);
+  }
+  if (allRemoved.length > 0) {
+    await dataStyleStore.setModelMeshComponentsVisibility(id, allRemoved, false);
+  }
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -122,14 +129,15 @@ watch(
     </v-col>
   </v-row>
   <v-treeview
-    v-model:selected="mesh_components_selection"
+    :selected="mesh_components_selection"
     :items="processedItems"
     :search="search"
     :custom-filter="customFilter"
     class="transparent-treeview"
     item-value="id"
-    select-strategy="classic"
+    select-strategy="independent"
     selectable
+    @update:selected="onSelectionChange"
   >
     <template #title="{ item }">
       <span
diff --git a/app/stores/data.js b/app/stores/data.js
index 15ff23f6..03a4bc53 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -35,7 +35,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function formatedMeshComponents(modelId) {
-    const items = await database.model_components.where({ id: modelId }).toArray();
+    const items = await database.model_components.where("id").equals(modelId).toArray();
     const componentTitles = {
       Corner: "Corners",
       Line: "Lines",
@@ -66,15 +66,21 @@ export const useDataStore = defineStore("data", () => {
       }));
   }
 
-  function refFormatedMeshComponents(id) {
+  function refFormatedMeshComponents(id_ref) {
     return useObservable(
-      liveQuery(() => formatedMeshComponents(id)),
+      liveQuery(() => {
+        const unwrapped_id = isRef(id_ref) ? id_ref.value : id_ref;
+        return formatedMeshComponents(unwrapped_id);
+      }),
       { initialValue: [] },
     );
   }
 
   async function meshComponentType(modelId, geode_id) {
-    const component = await database.model_components.where({ id: modelId, geode_id }).first();
+    const component = await database.model_components
+      .where("[id+geode_id]")
+      .equals([modelId, geode_id])
+      .first();
     return component?.type;
   }
 
@@ -155,13 +161,14 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function deleteModelComponents(modelId) {
-    await database.model_components.where({ id: modelId }).delete();
-    await database.model_components_relation.where({ id: modelId }).delete();
+    await database.model_components.where("id").equals(modelId).delete();
+    await database.model_components_relation.where("id").equals(modelId).delete();
   }
 
   async function getMeshComponentGeodeIds(modelId, component_type) {
     const components = await database.model_components
-      .where({ id: modelId, type: component_type })
+      .where("[id+type]")
+      .equals([modelId, component_type])
       .toArray();
     return components.map((component) => component.geode_id);
   }
@@ -221,6 +228,7 @@ export const useDataStore = defineStore("data", () => {
     getLinesGeodeIds,
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
+    getMeshComponentGeodeIds,
     getMeshComponentsViewerIds,
 
     exportStores,
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 63106a40..ff5c11f6 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -14,6 +14,45 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
+const MESH_CONFIG = [
+  { type: "Corner", group: "corners" },
+  { type: "Line", group: "lines" },
+  { type: "Surface", group: "surfaces" },
+  { type: "Block", group: "blocks" },
+];
+
+const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
+
+function buildSelection(components, modelStyle, stylesMap) {
+  const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
+  for (const component of components) {
+    if (componentsByType[component.type]) {
+      componentsByType[component.type].push(component);
+    }
+  }
+
+  const selection = [];
+  for (const { type, group } of MESH_CONFIG) {
+    const groupComponents = componentsByType[type];
+    const groupVisible = modelStyle[group]?.visibility ?? true;
+    let allVisible = true;
+
+    for (const component of groupComponents) {
+      const componentStyle = stylesMap[component.geode_id];
+      const isVisible = componentStyle?.visibility ?? groupVisible;
+      if (isVisible) {
+        selection.push(component.geode_id);
+      } else {
+        allVisible = false;
+      }
+    }
+    if (allVisible) {
+      selection.push(type);
+    }
+  }
+  return selection;
+}
+
 export function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleStateStore = useDataStyleStateStore();
@@ -26,81 +65,67 @@ export function useModelStyle() {
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
 
-  function modelVisibility(id) {
-    return dataStyleStateStore.getStyle(id).visibility;
+  const visibilitySetters = {
+    Corner: (modelId, ids, visibility) =>
+      modelCornersStyleStore.setModelCornersVisibility(modelId, ids, visibility),
+    Line: (modelId, ids, visibility) =>
+      modelLinesStyleStore.setModelLinesVisibility(modelId, ids, visibility),
+    Surface: (modelId, ids, visibility) =>
+      modelSurfacesStyleStore.setModelSurfacesVisibility(modelId, ids, visibility),
+    Block: (modelId, ids, visibility) =>
+      modelBlocksStyleStore.setModelBlocksVisibility(modelId, ids, visibility),
+  };
+
+  function modelVisibility(modelId) {
+    return dataStyleStateStore.getStyle(modelId).visibility;
   }
 
-  function setModelVisibility(id, visibility) {
+  function setModelVisibility(modelId, visibility) {
     return viewerStore.request(
       model_schemas.visibility,
-      { id, visibility },
+      { id: modelId, visibility },
       {
         response_function: async () => {
-          await hybridViewerStore.setVisibility(id, visibility);
-          await dataStyleStateStore.mutateStyle(id, { visibility });
-          return { id, visibility };
+          await hybridViewerStore.setVisibility(modelId, visibility);
+          await dataStyleStateStore.mutateStyle(modelId, { visibility });
+          return { id: modelId, visibility };
         },
       },
     );
   }
 
-  function visibleMeshComponents(id_ref) {
+  function visibleMeshComponents(idRef) {
     const selection = ref([]);
     watch(
-      () => (isRef(id_ref) ? id_ref.value : id_ref),
-      (newId, oldId, onCleanup) => {
-        if (!newId) {
+      () => (isRef(idRef) ? idRef.value : idRef),
+      (modelId, _prev, onCleanup) => {
+        if (!modelId) {
+          selection.value = [];
           return;
         }
         const observable = liveQuery(async () => {
-          const components = await database.model_components.where("id").equals(newId).toArray();
-          if (components.length === 0) {
+          const allComponents = await database.model_components
+            .where("id")
+            .equals(modelId)
+            .toArray();
+          if (allComponents.length === 0) {
             return [];
           }
-
-          const all_styles = await database.model_component_datastyle
+          const modelStyle = dataStyleStateStore.getStyle(modelId);
+          const componentStyles = await database.model_component_datastyle
             .where("id_model")
-            .equals(newId)
+            .equals(modelId)
             .toArray();
-          const styles = {};
-          for (const style of all_styles) {
-            styles[style.id_component] = style;
-          }
-
-          const current_selection = [];
-          const meshTypes = new Set(["Corner", "Line", "Surface", "Block"]);
-          const componentsByType = {};
-          for (const component of components) {
-            if (meshTypes.has(component.type)) {
-              if (!componentsByType[component.type]) {
-                componentsByType[component.type] = [];
-              }
-              componentsByType[component.type].push(component.geode_id);
-            }
-          }
-
-          for (const [type, geode_ids] of Object.entries(componentsByType)) {
-            let all_visible = true;
-            for (const gid of geode_ids) {
-              const is_visible = styles[gid] === undefined ? true : styles[gid].visibility;
-              if (is_visible) {
-                current_selection.push(gid);
-              } else {
-                all_visible = false;
-              }
-            }
-            if (all_visible) {
-              current_selection.push(type);
-            }
-          }
-          return current_selection;
+          const stylesMap = Object.fromEntries(
+            componentStyles.map((style) => [style.id_component, style]),
+          );
+          return buildSelection(allComponents, modelStyle, stylesMap);
         });
 
         const subscription = observable.subscribe({
           next: (val) => {
             selection.value = val;
           },
-          error: (err) => console.error(err),
         });
         onCleanup(() => subscription.unsubscribe());
       },
@@ -109,41 +134,65 @@ export function useModelStyle() {
     return selection;
   }
 
-  function applyModelStyle(id) {
-    const style = dataStyleStateStore.getStyle(id);
+  async function setModelMeshComponentsVisibility(modelId, componentIds, visibility) {
+    const idsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
+
+    await Promise.all(
+      componentIds.map(async (componentId) => {
+        if (MESH_TYPES.includes(componentId)) {
+          const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, componentId);
+          idsByType[componentId].push(...geodeIds);
+        } else {
+          const type = await dataStore.meshComponentType(modelId, componentId);
+          if (type && idsByType[type]) {
+            idsByType[type].push(componentId);
+          }
+        }
+      }),
+    );
+
+    return Promise.all(
+      MESH_TYPES.filter((type) => idsByType[type].length > 0).map((type) =>
+        visibilitySetters[type](modelId, idsByType[type], visibility),
+      ),
+    );
+  }
+
+  function applyModelStyle(modelId) {
+    const style = dataStyleStateStore.getStyle(modelId);
     const handlers = {
-      visibility: () => setModelVisibility(id, style.visibility),
-      corners: () => modelCornersStyleStore.applyModelCornersStyle(id),
-      lines: () => modelLinesStyleStore.applyModelLinesStyle(id),
-      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(id),
-      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(id),
-      points: () => modelPointsStyleStore.applyModelPointsStyle(id),
-      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(id),
+      visibility: () => setModelVisibility(modelId, style.visibility),
+      corners: () => modelCornersStyleStore.applyModelCornersStyle(modelId),
+      lines: () => modelLinesStyleStore.applyModelLinesStyle(modelId),
+      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(modelId),
+      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(modelId),
+      points: () => modelPointsStyleStore.applyModelPointsStyle(modelId),
+      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(modelId),
     };
 
-    const promises = Object.keys(style)
-      .filter((key) => handlers[key])
-      .map((key) => handlers[key]());
-
-    return Promise.all(promises);
+    return Promise.all(
+      Object.keys(style)
+        .filter((key) => handlers[key])
+        .map((key) => handlers[key]()),
+    );
   }
 
-  function setModelMeshComponentsDefaultStyle(id) {
-    return dataStore.item(id).then((item) => {
+  function setModelMeshComponentsDefaultStyle(modelId) {
+    return dataStore.item(modelId).then((item) => {
       if (!item) {
         return [];
       }
       const { mesh_components } = item;
       const handlers = {
-        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(id),
-        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(id),
-        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(id),
-        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(id),
+        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
+        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
+        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
+        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
       };
       return Promise.all(
         Object.keys(mesh_components)
-          .filter((k) => handlers[k])
-          .map((k) => handlers[k]()),
+          .filter((key) => handlers[key])
+          .map((key) => handlers[key]()),
       );
     });
   }
@@ -152,6 +201,7 @@ export function useModelStyle() {
     modelVisibility,
     visibleMeshComponents,
     setModelVisibility,
+    setModelMeshComponentsVisibility,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
     ...useModelBlocksStyle(),

From 3ebf57579a0b7039821a138d7c12f6eab6f3c621 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Wed, 25 Mar 2026 15:34:33 +0000
Subject: [PATCH 13/20] Apply prepare changes

---
 app/components/Viewer/BreadCrumb.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index 0302ef29..cfd83957 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -23,11 +23,7 @@ const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
         </v-btn>
         <span class="text-h5 font-weight-bold">/</span>
         <v-icon size="large">
-          {{
-            selectedTree && selectedTree.icon
-              ? selectedTree.icon
-              : "mdi-shape-outline"
-          }}
+          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
         </v-icon>
         <span class="text-subtitle-1 font-weight-regular align-center mt-1">
           Model Explorer ({{ metaDatas.name }})
@@ -36,9 +32,7 @@ const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Objects
-        </span>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
       </div>
     </div>
   </v-breadcrumbs>

From 86922f1494deeaece5c2734a8c48c128649fc3c2 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 16:55:51 +0100
Subject: [PATCH 14/20] revert ids

---
 app/components/Viewer/TreeComponent.vue   | 1 -
 app/stores/data.js                        | 4 ++--
 internal/stores/data_style/model/index.js | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 45c91a9a..d88c173f 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -77,7 +77,6 @@ async function onSelectionChange(current) {
     return;
   }
 
-  // Manual hierarchy: if a category is toggled, toggle all its children too
   const allAdded = [...added, ...expandCategorySelections(added, current, false)];
   const allRemoved = [...removed, ...expandCategorySelections(removed, current, true)];
 
diff --git a/app/stores/data.js b/app/stores/data.js
index 03a4bc53..771e4bce 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -66,10 +66,10 @@ export const useDataStore = defineStore("data", () => {
       }));
   }
 
-  function refFormatedMeshComponents(id_ref) {
+  function refFormatedMeshComponents(id) {
     return useObservable(
       liveQuery(() => {
-        const unwrapped_id = isRef(id_ref) ? id_ref.value : id_ref;
+        const unwrapped_id = isRef(id) ? id.value : id;
         return formatedMeshComponents(unwrapped_id);
       }),
       { initialValue: [] },
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index ff5c11f6..86c364a3 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -94,10 +94,10 @@ export function useModelStyle() {
     );
   }
 
-  function visibleMeshComponents(idRef) {
+  function visibleMeshComponents(id_ref) {
     const selection = ref([]);
     watch(
-      () => (isRef(idRef) ? idRef.value : idRef),
+      () => (isRef(id_ref) ? id_ref.value : id_ref),
       (modelId, _prev, onCleanup) => {
         if (!modelId) {
           selection.value = [];

From 04d0f00071700d19b588c270d3df2dae7b5096d1 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 25 Mar 2026 17:05:41 +0100
Subject: [PATCH 15/20] no fallback

---
 internal/stores/data_style/model/index.js | 24 +++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 86c364a3..40902599 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -15,15 +15,15 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
 const MESH_CONFIG = [
-  { type: "Corner", group: "corners" },
-  { type: "Line", group: "lines" },
-  { type: "Surface", group: "surfaces" },
-  { type: "Block", group: "blocks" },
+  { type: "Corner" },
+  { type: "Line" },
+  { type: "Surface" },
+  { type: "Block" },
 ];
 
 const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
 
-function buildSelection(components, modelStyle, stylesMap) {
+function buildSelection(components, stylesMap) {
   const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
   for (const component of components) {
     if (componentsByType[component.type]) {
@@ -32,14 +32,15 @@ function buildSelection(components, modelStyle, stylesMap) {
   }
 
   const selection = [];
-  for (const { type, group } of MESH_CONFIG) {
+  for (const type of MESH_TYPES) {
     const groupComponents = componentsByType[type];
-    const groupVisible = modelStyle[group]?.visibility ?? true;
-    let allVisible = true;
+    if (groupComponents.length === 0) {
+      continue;
+    }
 
+    let allVisible = true;
     for (const component of groupComponents) {
-      const componentStyle = stylesMap[component.geode_id];
-      const isVisible = componentStyle?.visibility ?? groupVisible;
+      const isVisible = stylesMap[component.geode_id]?.visibility ?? true;
       if (isVisible) {
         selection.push(component.geode_id);
       } else {
@@ -111,7 +112,6 @@ export function useModelStyle() {
           if (allComponents.length === 0) {
             return [];
           }
-          const modelStyle = dataStyleStateStore.getStyle(modelId);
           const componentStyles = await database.model_component_datastyle
             .where("id_model")
             .equals(modelId)
@@ -119,7 +119,7 @@ export function useModelStyle() {
           const stylesMap = Object.fromEntries(
             componentStyles.map((style) => [style.id_component, style]),
           );
-          return buildSelection(allComponents, modelStyle, stylesMap);
+          return buildSelection(allComponents, stylesMap);
         });
 
         const subscription = observable.subscribe({

From ab35ae7b68fa80bc4ebd77c5244cd78725c2d043 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Wed, 25 Mar 2026 16:06:35 +0000
Subject: [PATCH 16/20] Apply prepare changes

---
 internal/stores/data_style/model/index.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 40902599..e5cea1ec 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -14,12 +14,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
-const MESH_CONFIG = [
-  { type: "Corner" },
-  { type: "Line" },
-  { type: "Surface" },
-  { type: "Block" },
-];
+const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" }, { type: "Block" }];
 
 const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
 

From 0a06bd7f6ad7ecca7af71b81ae1e2d013270fe64 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 26 Mar 2026 09:29:49 +0100
Subject: [PATCH 17/20] delete useless function & refacto

---
 app/components/Viewer/TreeComponent.vue   | 26 ++------
 internal/stores/data_style/model/index.js | 72 ++++++++++++-----------
 2 files changed, 43 insertions(+), 55 deletions(-)

diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index d88c173f..81201241 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -54,21 +54,6 @@ function customFilter(value, searchQuery, item) {
   );
 }
 
-function expandCategorySelections(categoryIds, currentSelection, shouldBePresent) {
-  const extraIds = [];
-  for (const categoryId of categoryIds) {
-    const category = items.value.find((cat) => cat.id === categoryId);
-    if (category?.children) {
-      for (const child of category.children) {
-        if (currentSelection.includes(child.id) === shouldBePresent) {
-          extraIds.push(child.id);
-        }
-      }
-    }
-  }
-  return extraIds;
-}
-
 async function onSelectionChange(current) {
   const previous = mesh_components_selection.value;
   const { added, removed } = compareSelections(current, previous);
@@ -77,14 +62,11 @@ async function onSelectionChange(current) {
     return;
   }
 
-  const allAdded = [...added, ...expandCategorySelections(added, current, false)];
-  const allRemoved = [...removed, ...expandCategorySelections(removed, current, true)];
-
-  if (allAdded.length > 0) {
-    await dataStyleStore.setModelMeshComponentsVisibility(id, allAdded, true);
+  if (added.length > 0) {
+    await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);
   }
-  if (allRemoved.length > 0) {
-    await dataStyleStore.setModelMeshComponentsVisibility(id, allRemoved, false);
+  if (removed.length > 0) {
+    await dataStyleStore.setModelMeshComponentsVisibility(id, removed, false);
   }
   hybridViewerStore.remoteRender();
 }
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index e5cea1ec..b6f0f012 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -18,36 +18,6 @@ const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" },
 
 const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
 
-function buildSelection(components, stylesMap) {
-  const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
-  for (const component of components) {
-    if (componentsByType[component.type]) {
-      componentsByType[component.type].push(component);
-    }
-  }
-
-  const selection = [];
-  for (const type of MESH_TYPES) {
-    const groupComponents = componentsByType[type];
-    if (groupComponents.length === 0) {
-      continue;
-    }
-
-    let allVisible = true;
-    for (const component of groupComponents) {
-      const isVisible = stylesMap[component.geode_id]?.visibility ?? true;
-      if (isVisible) {
-        selection.push(component.geode_id);
-      } else {
-        allVisible = false;
-      }
-    }
-    if (allVisible) {
-      selection.push(type);
-    }
-  }
-  return selection;
-}
 
 export function useModelStyle() {
   const dataStore = useDataStore();
@@ -72,6 +42,41 @@ export function useModelStyle() {
       modelBlocksStyleStore.setModelBlocksVisibility(modelId, ids, visibility),
   };
 
+  function buildSelection(modelId, components, stylesMap) {
+    const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
+    for (const component of components) {
+      if (componentsByType[component.type]) {
+        componentsByType[component.type].push(component);
+      }
+    }
+
+    const groupStyles = dataStyleStateStore.getStyle(modelId);
+    const selection = [];
+    for (const type of MESH_TYPES) {
+      const groupComponents = componentsByType[type];
+      if (groupComponents.length === 0) {
+        continue;
+      }
+
+      const typeKey = `${type.toLowerCase()}s`;
+      const defaultVisibility = groupStyles[typeKey]?.visibility ?? true;
+
+      let allVisible = true;
+      for (const component of groupComponents) {
+        const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
+        if (isVisible) {
+          selection.push(component.geode_id);
+        } else {
+          allVisible = false;
+        }
+      }
+      if (allVisible) {
+        selection.push(type);
+      }
+    }
+    return selection;
+  }
+
   function modelVisibility(modelId) {
     return dataStyleStateStore.getStyle(modelId).visibility;
   }
@@ -114,7 +119,7 @@ export function useModelStyle() {
           const stylesMap = Object.fromEntries(
             componentStyles.map((style) => [style.id_component, style]),
           );
-          return buildSelection(allComponents, stylesMap);
+          return buildSelection(modelId, allComponents, stylesMap);
         });
 
         const subscription = observable.subscribe({
@@ -130,10 +135,11 @@ export function useModelStyle() {
   }
 
   async function setModelMeshComponentsVisibility(modelId, componentIds, visibility) {
+    const uniqueIds = [...new Set(componentIds)];
     const idsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
 
     await Promise.all(
-      componentIds.map(async (componentId) => {
+      uniqueIds.map(async (componentId) => {
         if (MESH_TYPES.includes(componentId)) {
           const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, componentId);
           idsByType[componentId].push(...geodeIds);
@@ -148,7 +154,7 @@ export function useModelStyle() {
 
     return Promise.all(
       MESH_TYPES.filter((type) => idsByType[type].length > 0).map((type) =>
-        visibilitySetters[type](modelId, idsByType[type], visibility),
+        visibilitySetters[type](modelId, [...new Set(idsByType[type])], visibility),
       ),
     );
   }

From fd4128e31071ce6b5f542061f526bed155f73957 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 26 Mar 2026 08:30:41 +0000
Subject: [PATCH 18/20] Apply prepare changes

---
 internal/stores/data_style/model/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index b6f0f012..00eb56aa 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -18,7 +18,6 @@ const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" },
 
 const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
 
-
 export function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleStateStore = useDataStyleStateStore();

From fb8d04af47c7c2cc69ee0c3ef1577a85abe5bfda Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 26 Mar 2026 10:16:44 +0100
Subject: [PATCH 19/20] refacto

---
 app/components/Viewer/TreeComponent.vue   |  4 +-
 app/stores/data_style.js                  |  1 +
 internal/stores/data_style/model/index.js | 63 ++++++++++-------------
 3 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 81201241..023e4fbd 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -63,10 +63,10 @@ async function onSelectionChange(current) {
   }
 
   if (added.length > 0) {
-    await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);
+    await dataStyleStore.setComponentsVisibility(id, added, true);
   }
   if (removed.length > 0) {
-    await dataStyleStore.setModelMeshComponentsVisibility(id, removed, false);
+    await dataStyleStore.setComponentsVisibility(id, removed, false);
   }
   hybridViewerStore.remoteRender();
 }
diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index 1b3fb7c7..e0f23f1b 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -85,6 +85,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     selectedObjects: dataStyleState.selectedObjects,
     ...meshStyleStore,
     ...modelStyleStore,
+    setComponentsVisibility: modelStyleStore.setModelComponentsVisibility,
     addDataStyle,
     applyDefaultStyle,
     setVisibility,
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index b6f0f012..9bf5e851 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -18,7 +18,6 @@ const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" },
 
 const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
 
-
 export function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleStateStore = useDataStyleStateStore();
@@ -31,17 +30,6 @@ export function useModelStyle() {
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
 
-  const visibilitySetters = {
-    Corner: (modelId, ids, visibility) =>
-      modelCornersStyleStore.setModelCornersVisibility(modelId, ids, visibility),
-    Line: (modelId, ids, visibility) =>
-      modelLinesStyleStore.setModelLinesVisibility(modelId, ids, visibility),
-    Surface: (modelId, ids, visibility) =>
-      modelSurfacesStyleStore.setModelSurfacesVisibility(modelId, ids, visibility),
-    Block: (modelId, ids, visibility) =>
-      modelBlocksStyleStore.setModelBlocksVisibility(modelId, ids, visibility),
-  };
-
   function buildSelection(modelId, components, stylesMap) {
     const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
     for (const component of components) {
@@ -53,16 +41,16 @@ export function useModelStyle() {
     const groupStyles = dataStyleStateStore.getStyle(modelId);
     const selection = [];
     for (const type of MESH_TYPES) {
-      const groupComponents = componentsByType[type];
-      if (groupComponents.length === 0) {
+      const typeComponents = componentsByType[type];
+      if (typeComponents.length === 0) {
         continue;
       }
 
       const typeKey = `${type.toLowerCase()}s`;
-      const defaultVisibility = groupStyles[typeKey]?.visibility ?? true;
+      const defaultVisibility = groupStyles[typeKey].visibility;
 
       let allVisible = true;
-      for (const component of groupComponents) {
+      for (const component of typeComponents) {
         const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
         if (isVisible) {
           selection.push(component.geode_id);
@@ -134,28 +122,31 @@ export function useModelStyle() {
     return selection;
   }
 
-  async function setModelMeshComponentsVisibility(modelId, componentIds, visibility) {
-    const uniqueIds = [...new Set(componentIds)];
-    const idsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
-
-    await Promise.all(
-      uniqueIds.map(async (componentId) => {
-        if (MESH_TYPES.includes(componentId)) {
-          const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, componentId);
-          idsByType[componentId].push(...geodeIds);
-        } else {
-          const type = await dataStore.meshComponentType(modelId, componentId);
-          if (type && idsByType[type]) {
-            idsByType[type].push(componentId);
-          }
-        }
-      }),
+  async function setModelComponentsVisibility(modelId, componentIds, visibility) {
+    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+    const componentsMap = Object.fromEntries(
+      allComponents.map((component) => [component.geode_id, component]),
     );
 
     return Promise.all(
-      MESH_TYPES.filter((type) => idsByType[type].length > 0).map((type) =>
-        visibilitySetters[type](modelId, [...new Set(idsByType[type])], visibility),
-      ),
+      MESH_TYPES.map(async (type) => {
+        const typeComponents = allComponents.filter((component) => component.type === type);
+        const isSelectedType = componentIds.includes(type);
+        const idsToUpdate = isSelectedType
+          ? typeComponents.map((component) => component.geode_id)
+          : componentIds.filter((id) => componentsMap[id]?.type === type);
+
+        if (idsToUpdate.length === 0) {
+          return;
+        }
+
+        const viewerIds = await dataStore.getMeshComponentsViewerIds(modelId, idsToUpdate);
+        if (viewerIds.length > 0) {
+          const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
+          await viewerStore.request(schema, { id: modelId, block_ids: viewerIds, visibility });
+        }
+        return dataStyleStateStore.mutateComponentStyles(modelId, idsToUpdate, { visibility });
+      }),
     );
   }
 
@@ -202,7 +193,7 @@ export function useModelStyle() {
     modelVisibility,
     visibleMeshComponents,
     setModelVisibility,
-    setModelMeshComponentsVisibility,
+    setModelComponentsVisibility,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
     ...useModelBlocksStyle(),

From 05f2aca1a94cdcdc2259bd1038c0e0900985a8a0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 26 Mar 2026 10:25:03 +0100
Subject: [PATCH 20/20] unref(id)

---
 app/stores/data.js                        | 2 +-
 internal/stores/data_style/model/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/stores/data.js b/app/stores/data.js
index 771e4bce..2f94889d 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -69,7 +69,7 @@ export const useDataStore = defineStore("data", () => {
   function refFormatedMeshComponents(id) {
     return useObservable(
       liveQuery(() => {
-        const unwrapped_id = isRef(id) ? id.value : id;
+        const unwrapped_id = unref(id);
         return formatedMeshComponents(unwrapped_id);
       }),
       { initialValue: [] },
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 9bf5e851..b9da3bf1 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -86,7 +86,7 @@ export function useModelStyle() {
   function visibleMeshComponents(id_ref) {
     const selection = ref([]);
     watch(
-      () => (isRef(id_ref) ? id_ref.value : id_ref),
+      () => unref(id_ref),
       (modelId, _prev, onCleanup) => {
         if (!modelId) {
           selection.value = [];