refactor(devtools): replace deprecated tree APIs in the component tree

`FlatTreeControl` from `@angular/cdk/tree` and `MatTreeFlattener` from
`@angular/material/tree` are deprecated in favor of the tree's
`levelAccessor`/`childrenAccessor` APIs.

The component tree (directive forest) isn't rendered with a CDK tree but
as a flat list in a virtual scroll viewport. It only used
`FlatTreeControl` to track which nodes are expanded, and
`MatTreeFlattener` to flatten the forest and compute the visible nodes.

Replace them with:
- An `ExpansionModel` that tracks expanded nodes with a
  `SelectionModel`, like `FlatTreeControl` did internally, and exposes
  the `expand`, `collapse`, `toggle`, `isExpanded` and `changed` members
  used by devtools.
- Local helpers in `ComponentDataSource` that flatten the forest in
  depth-first order and return the nodes whose ancestors are all
  expanded, matching the previous behavior.

Also add a spec covering which nodes are visible as nodes are expanded
and collapsed.

Author: MeAkib

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel

@@ -18,6 +18,7 @@ ng_project(
     ],
     deps = [
         ":directive_forest_utils",
+        ":expansion_model",
         "//:node_modules/@angular/cdk",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/material",
@@ -34,11 +35,20 @@ ng_project(
     ],
 )
 
+ts_project(
+    name = "expansion_model",
+    srcs = ["expansion-model.ts"],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/rxjs",
+    ],
+)
+
 ts_project(
     name = "directive_forest_utils",
     srcs = ["directive-forest-utils.ts"],
     deps = [
-        "//:node_modules/@angular/cdk",
+        ":expansion_model",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source",
     ],
 )

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

@@ -8,10 +8,10 @@ ts_project(
     deps = [
         "//:node_modules/@angular/cdk",
         "//:node_modules/@angular/core",
-        "//:node_modules/@angular/material",
         "//:node_modules/@types",
         "//:node_modules/rxjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/diffing",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest:expansion_model",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
         "//devtools/projects/protocol",
     ],
@@ -22,7 +22,8 @@ ts_test_library(
     srcs = glob(["**/*.spec.ts"]),
     deps = [
         ":component-data-source",
-        "//:node_modules/@angular/cdk",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest:expansion_model",
         "//devtools/projects/protocol",
     ],
 )

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

@@ -6,10 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {FlatTreeControl} from '@angular/cdk/tree';
+import {of} from 'rxjs';
+
 import {DevToolsNode} from '../../../../../../../protocol';
 
 import {ComponentDataSource, FlatNode} from '.';
+import {ExpansionModel} from '../expansion-model';
 
 const tree1: DevToolsNode = {
   tagName: 'app',
@@ -213,12 +215,9 @@ const tree4: DevToolsNode = {
 
 describe('ComponentDataSource', () => {
   let dataSource: ComponentDataSource;
-  const treeControl = new FlatTreeControl<FlatNode>(
-    (node) => node.level,
-    (node) => node.expandable,
-  );
+  const expansionModel = new ExpansionModel<FlatNode>();
 
-  beforeEach(() => (dataSource = new ComponentDataSource(treeControl)));
+  beforeEach(() => (dataSource = new ComponentDataSource(expansionModel)));
 
   it('should return new and old items', () => {
     const result = dataSource.update([tree1], true);
@@ -250,4 +249,27 @@ describe('ComponentDataSource', () => {
 
     expect(result.newItems[1].position).toEqual([0, 0, 0, 0, 0, 0]);
   });
+
+  it('should only show the children of expanded nodes', () => {
+    const expansionModel = new ExpansionModel<FlatNode>();
+    const source = new ComponentDataSource(expansionModel);
+    source.update([tree1], true);
+    const [app, bar] = source.data;
+    expect([app.level, bar.level]).toEqual([0, 1]);
+
+    let visibleNodes: string[] = [];
+    const subscription = source
+      .connect({viewChange: of({start: 0, end: Number.MAX_VALUE})})
+      .subscribe((nodes) => (visibleNodes = nodes.map((node) => node.name)));
+
+    expect(visibleNodes).toEqual(['app']);
+
+    expansionModel.expand(app);
+    expect(visibleNodes).toEqual(['app', 'bar']);
+
+    expansionModel.collapse(app);
+    expect(visibleNodes).toEqual(['app']);
+
+    subscription.unsubscribe();
+  });
 });

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

@@ -7,9 +7,7 @@
  */
 
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
-import {FlatTreeControl} from '@angular/cdk/tree';
 import {DefaultIterableDiffer, TrackByFunction} from '@angular/core';
-import {MatTreeFlattener} from '@angular/material/tree';
 import {
   DevToolsNode,
   ControlFlowBlock,
@@ -19,6 +17,7 @@ import {
 import {BehaviorSubject, merge, Observable, map} from 'rxjs';
 
 import {diff} from '../../diffing';
+import {ExpansionModel} from '../expansion-model';
 import {IndexedNode, indexForest} from '../index-forest';
 
 /** Flat node with expandable and level information */
@@ -87,47 +86,77 @@ const filterCommentNodes = (nodes: IndexedNode[]) => {
   return nodes;
 };
 
+/**
+ * Returns the nodes of a flattened tree that are visible, i.e. whose ancestors are all expanded.
+ *
+ * @param nodes flat nodes in depth-first order.
+ * @param isExpanded whether the given node is expanded.
+ */
+const getVisibleNodes = (nodes: FlatNode[], isExpanded: (node: FlatNode) => boolean) => {
+  const visibleNodes: FlatNode[] = [];
+  // Whether all ancestors are expanded, indexed by level.
+  const expandedAtLevel: boolean[] = [true];
+  for (const node of nodes) {
+    let visible = true;
+    for (let i = 0; i <= node.level; i++) {
+      visible = visible && !!expandedAtLevel[i];
+    }
+    if (visible) {
+      visibleNodes.push(node);
+    }
+    if (node.expandable) {
+      expandedAtLevel[node.level + 1] = isExpanded(node);
+    }
+  }
+  return visibleNodes;
+};
+
 export class ComponentDataSource extends DataSource<FlatNode> {
   private _differ = new DefaultIterableDiffer<FlatNode>(trackBy);
   private _expandedData = new BehaviorSubject<FlatNode[]>([]);
   private _flattenedData = new BehaviorSubject<FlatNode[]>([]);
   private _nodeToFlat = new WeakMap<IndexedNode, FlatNode>();
 
-  private _treeFlattener = new MatTreeFlattener(
-    (node: IndexedNode, level: number) => {
-      if (this._nodeToFlat.has(node)) {
-        return this._nodeToFlat.get(node);
-      }
-      const flatNode: FlatNode = {
-        expandable: expandable(node),
-        id: getId(node),
-        // We can compare the nodes in the navigation functions above
-        // based on this identifier directly, since it's a reference type
-        // and the reference is preserved after transformation.
-        position: node.position,
-        name: node.component ? node.component.name : (node.tagName ?? ''),
-        directives: node.directives?.map((d) => d.name) ?? [],
-        original: node,
-        level,
-        hydration: node.hydration,
-        controlFlowBlock: node.controlFlowBlock,
-        static: node.static,
-        changeDetection: node.changeDetection,
-        hasNativeElement: node.hasNativeElement,
-        collapsedByDefault: node.children.every((n) => n.static),
-      };
-      this._nodeToFlat.set(node, flatNode);
-      return flatNode;
-    },
-    (node) => (node ? node.level : -1),
-    (node) => (node ? node.expandable : false),
-    (node) => (node ? node.children : []),
-  );
-
-  constructor(private _treeControl: FlatTreeControl<FlatNode>) {
+  constructor(private _expansionModel: ExpansionModel<FlatNode>) {
     super();
   }
 
+  /** Flattens the forest into a list of nodes in depth-first order. */
+  private _flattenNodes(nodes: IndexedNode[], level = 0, result: FlatNode[] = []): FlatNode[] {
+    for (const node of nodes) {
+      const flatNode = this._toFlatNode(node, level);
+      result.push(flatNode);
+      if (flatNode.expandable) {
+        this._flattenNodes(node.children, level + 1, result);
+      }
+    }
+    return result;
+  }
+
+  private _toFlatNode(node: IndexedNode, level: number): FlatNode {
+    const existingNode = this._nodeToFlat.get(node);
+    if (existingNode) {
+      return existingNode;
+    }
+    const flatNode: FlatNode = {
+      expandable: expandable(node),
+      id: getId(node),
+      position: node.position,
+      name: node.component ? node.component.name : (node.tagName ?? ''),
+      directives: node.directives?.map((d) => d.name) ?? [],
+      original: node,
+      level,
+      hydration: node.hydration,
+      controlFlowBlock: node.controlFlowBlock,
+      static: node.static,
+      changeDetection: node.changeDetection,
+      hasNativeElement: node.hasNativeElement,
+      collapsedByDefault: node.children.every((n) => n.static),
+    };
+    this._nodeToFlat.set(node, flatNode);
+    return flatNode;
+  }
+
   get data(): FlatNode[] {
     return this._flattenedData.value;
   }
@@ -174,27 +203,26 @@ export class ComponentDataSource extends DataSource<FlatNode> {
       indexedForest = filterCommentNodes(indexedForest);
     }
 
-    const flattenedCollection = this._treeFlattener.flattenNodes(indexedForest) as FlatNode[];
+    const flattenedCollection = this._flattenNodes(indexedForest);
 
     this.data.forEach((i) => (i.newItem = false));
 
     const expandedNodes: Record<string, boolean> = {};
     this.data.forEach((item) => {
-      expandedNodes[item.id] = this._treeControl.isExpanded(item);
+      expandedNodes[item.id] = this._expansionModel.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);
       if (expandedNodes[i.id]) {
-        this._treeControl.expand(i);
+        this._expansionModel.expand(i);
       }
     });
     newItems.forEach((i) => (i.newItem = true));
@@ -206,16 +234,13 @@ export class ComponentDataSource extends DataSource<FlatNode> {
   override connect(collectionViewer: CollectionViewer): Observable<FlatNode[]> {
     const changes = [
       collectionViewer.viewChange,
-      this._treeControl.expansionModel.changed,
+      this._expansionModel.changed,
       this._flattenedData,
     ];
     return merge<unknown[]>(...changes).pipe(
       map(() => {
         this._expandedData.next(
-          this._treeFlattener.expandFlattenedNodes(
-            this.data,
-            this._treeControl as FlatTreeControl<FlatNode | undefined>,
-          ) as FlatNode[],
+          getVisibleNodes(this.data, (node) => this._expansionModel.isExpanded(node)),
         );
         return this._expandedData.value;
       }),

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

@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {FlatTreeControl} from '@angular/cdk/tree';
-
 import {FlatNode} from './component-data-source/index';
+import {ExpansionModel} from './expansion-model';
 
 export const isChildOf = (childPosition: number[], parentPosition: number[]) => {
   if (childPosition.length <= parentPosition.length) {
@@ -25,11 +24,11 @@ export const isChildOf = (childPosition: number[], parentPosition: number[]) =>
 export const parentCollapsed = (
   nodeIdx: number,
   all: FlatNode[],
-  treeControl: FlatTreeControl<FlatNode>,
+  expansionModel: ExpansionModel<FlatNode>,
 ) => {
   const node = all[nodeIdx];
   for (let i = nodeIdx - 1; i >= 0; i--) {
-    if (isChildOf(node.position, all[i].position) && !treeControl.isExpanded(all[i])) {
+    if (isChildOf(node.position, all[i].position) && !expansionModel.isExpanded(all[i])) {
       return true;
     }
   }

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

@@ -13,7 +13,7 @@
     [node]="node"
     [selectedNode]="selectedNode()"
     [highlightedId]="highlightIdInTreeFromElement()"
-    [treeControl]="treeControl"
+    [expansionModel]="expansionModel"
     [textMatches]="matchedNodes().get(idx) ?? []"
     [nodeCdData]="mappedCdData().get(node.original.original)"
     (selectNode)="selectAndEnsureVisible($event)"