fix(devtools): preserve the expansion status of moved items

projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

@@ -46,10 +46,10 @@ export const subscribeToClientEvents = (messageBus: MessageBus<Events>): void =>
     // Often websites have `scroll` event listener which triggers
     // Angular's change detection. We don't want to constantly send
     // update requests, instead we want to request an update at most
-    // every 50ms
+    // every 250ms
     runOutsideAngular(() => {
       initializeOrGetDirectiveForestObserver()
-        .changeDetection$.pipe(debounceTime(50))
+        .changeDetection$.pipe(debounceTime(250))
         .subscribe(() => messageBus.emit('componentTreeDirty'));
     });
   }

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts

@@ -30,7 +30,7 @@ const getId = (node: IndexedNode) => {
     prefix = node.component.id.toString();
   }
   const dirIds = node.directives
-    .map(d => d.id)
+    .map((d) => d.id)
     .sort((a, b) => {
       return a - b;
     });
@@ -56,16 +56,16 @@ export class ComponentDataSource extends DataSource<FlatNode> {
         // and the reference is preserved after transformation.
         position: node.position,
         name: node.component ? node.component.name : node.element,
-        directives: node.directives.map(d => d.name).join(', '),
+        directives: node.directives.map((d) => d.name).join(', '),
         original: node,
         level,
       };
       this._nodeToFlat.set(node, flatNode);
       return flatNode;
     },
-    node => (node ? node.level : -1),
-    node => (node ? node.expandable : false),
-    node => (node ? node.children : [])
+    (node) => (node ? node.level : -1),
+    (node) => (node ? node.expandable : false),
+    (node) => (node ? node.children : [])
   );
 
   constructor(private _treeControl: FlatTreeControl<FlatNode>) {
@@ -92,15 +92,25 @@ export class ComponentDataSource extends DataSource<FlatNode> {
     const indexedForest = indexForest(forest);
     const flattenedCollection = this._treeFlattener.flattenNodes(indexedForest) as FlatNode[];
 
-    this.data.forEach(i => (i.newItem = false));
+    this.data.forEach((i) => (i.newItem = false));
+
+    const expandedNodes = {};
+    this.data.forEach((item) => {
+      expandedNodes[item.id] = this._treeControl.isExpanded(item);
+    });
 
     const { newItems, movedItems, removedItems } = diff<FlatNode>(this._differ, this.data, flattenedCollection);
     this._treeControl.dataNodes = this.data;
     this._flattenedData.next(this.data);
 
-    movedItems.forEach(i => this._nodeToFlat.set(i.original, i));
-    newItems.forEach(i => (i.newItem = true));
-    removedItems.forEach(i => this._nodeToFlat.delete(i.original));
+    movedItems.forEach((i) => {
+      this._nodeToFlat.set(i.original, i);
+      if (expandedNodes[i.id]) {
+        this._treeControl.expand(i);
+      }
+    });
+    newItems.forEach((i) => (i.newItem = true));
+    removedItems.forEach((i) => this._nodeToFlat.delete(i.original));
 
     return { newItems, movedItems, removedItems };
   }

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts

@@ -152,6 +152,7 @@ export class DirectiveForestComponent implements OnInit {
       this._initialized = true;
       result.newItems.forEach((item) => (item.newItem = false));
     }
+    // We want to expand them once they are rendered.
     result.newItems.forEach((item) => {
       this.treeControl.expand(item);
     });