help(Tree): TreeControl selection model doesn't work for immutable data
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
Please see this - https://stackoverflow.com/q/65412659/2896495.
I needed a dynamically loading nodes in the angular material tree, so I created my own `GeoDataSource` which internally uses **_@ngrx/component-store_** to handle all the interaction between data source, TreeControl and the tree itself.
Now, the problem is the tree doesn't keep its expansion state because the `abstract class BaseTreeControl` uses `SelectionModel` class and this in turn uses `Set` to keep track of items that are selected. So if node is expanded it just does this:
```
this._selection.add(value); // Set.add(value)
```
When using immutable data (from the component store) those items are always new.
I tried to use `trackBy` optional function:
```
this.treeControl = new FlatTreeControl(
(node) => node.nodeLevel,
(node) => node.expandable, {
trackBy: (node) => node.groupPath // *** groupPath is string (it's an ID) ***
}
);
```
and for this I had to change `FlatTreeControl` to `FlatTreeControl`, otherwise it doesn't compile. But then I got the following error in the **_template_**:
> Type 'FlatTreeControl' is not assignable to type 'TreeControl'
Here's the template:
```
```
Now what? How do I make all this work with immutable data from the store?
Contributor guide
Research direction
Start by reading BaseTreeControl and SelectionModel, then compare FlatTreeControl's trackBy generic with the TreeControl type expected by the mat-tree template. Reproduce the immutable-data case from the issue and verify that expansion state persists across replacement nodes while the template types remain compatible.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100