fix(fe): resolve infinite reactivity loops in models panel

packages/frontend-2/components/viewer/models/Panel.vue

@@ -250,17 +250,21 @@ const handleDiffClose = async () => {
 
 const toggleModelExpansion = (modelId: string) => {
   if (expandedModels.value.has(modelId)) {
-    expandedModels.value.delete(modelId)
+    expandedModels.value = new Set(
+      [...expandedModels.value].filter((id) => id !== modelId)
+    )
   } else {
-    expandedModels.value.add(modelId)
+    expandedModels.value = new Set([...expandedModels.value, modelId])
   }
 }
 
 const toggleTreeItemExpansion = (itemId: string) => {
   if (expandedNodes.value.has(itemId)) {
-    expandedNodes.value.delete(itemId)
+    expandedNodes.value = new Set(
+      [...expandedNodes.value].filter((id) => id !== itemId)
+    )
   } else {
-    expandedNodes.value.add(itemId)
+    expandedNodes.value = new Set([...expandedNodes.value, itemId])
   }
 }
 
@@ -351,13 +355,19 @@ const handleSelectionChange = useDebounceFn(
           const containsObject = findObjectInNodes(modelRootNodes, selectedObj.id)
 
           if (containsObject) {
-            expandedModels.value.add(model.id)
-            expandNodesToShowObject(
+            expandedModels.value = new Set([...expandedModels.value, model.id])
+            const result = expandNodesToShowObject(
               modelRootNodes,
               selectedObj.id,
               model.id,
               expandedNodes.value
             )
+            if (result.found && result.nodesToExpand.length > 0) {
+              expandedNodes.value = new Set([
+                ...expandedNodes.value,
+                ...result.nodesToExpand
+              ])
+            }
 
             scrollToSelectedItem(selectedObj.id)
             break

packages/frontend-2/lib/viewer/composables/tree.ts

@@ -419,22 +419,26 @@ export function useTreeManagement() {
     modelId: string,
     expandedNodes: Set<string>,
     depth = 0
-  ): boolean => {
-    if (!nodes?.length || depth > MAX_EXPANSION_DEPTH) return false
+  ): { found: boolean; nodesToExpand: string[] } => {
+    if (!nodes?.length || depth > MAX_EXPANSION_DEPTH)
+      return { found: false, nodesToExpand: [] }
 
-    return nodes.some((node) => {
+    const nodesToExpand: string[] = []
+
+    const found = nodes.some((node) => {
       if (node.raw?.id === objectId) return true
 
       if (node.children?.length) {
-        const found = expandNodesToShowObject(
+        const result = expandNodesToShowObject(
           node.children,
           objectId,
           modelId,
           expandedNodes,
           depth + 1
         )
-        if (found) {
-          if (node.raw?.id) expandedNodes.add(node.raw.id)
+        if (result.found) {
+          if (node.raw?.id) nodesToExpand.push(node.raw.id)
+          nodesToExpand.push(...result.nodesToExpand)
 
           // Handle array collections
           const speckleData = node.raw
@@ -449,7 +453,7 @@ export function useTreeManagement() {
               if (isReferencedIdArray(val)) {
                 const ids = new Set(val.map((ref) => ref.referencedId))
                 if (node.children?.some((child) => ids.has(child.raw?.id as string))) {
-                  expandedNodes.add(k)
+                  nodesToExpand.push(k)
                 }
               }
             })
@@ -459,6 +463,8 @@ export function useTreeManagement() {
       }
       return false
     })
+
+    return { found, nodesToExpand }
   }
 
   return {