Skip to content

Commit c44b95c

Browse files
vanessayuennvanessayuenn
committed
Chore/performance (rangle#371)
* chore: improve performance - remove event for selecting node - persist `openedNodes` (which actually stores closed nodes 😓😂) in component tree * fix so the change detection highlight works for changed state
1 parent 1cd2a51 commit c44b95c

File tree

10 files changed

+42
-76
lines changed

10 files changed

+42
-76
lines changed

‎src/frontend/components/app-trees/app-trees.html

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
[hidden]="selectedTabIndex != 0"
99
[ngClass]="{flex: selectedTabIndex == 0}"
1010
[changedNodes]="changedNodes"
11+
[selectedNode]="selectedNode"
12+
[openedNodes]="openedNodes"
1113
[tree]="tree">
1214
</bt-tree-view>
1315

‎src/frontend/components/app-trees/app-trees.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {RouterTree} from '../router-tree/router-tree';
99
selector: 'bt-app-trees',
1010
directives: [TabMenu, TreeView, RouterTree],
1111
inputs: ['tree', 'routerTree', 'selectedTabIndex',
12-
'selectedNode', 'changedNodes'],
12+
'selectedNode', 'changedNodes', 'openedNodes'],
1313
host: {'class': 'flex flex-column vh-100'},
1414
templateUrl:
1515
'/src/frontend/components/app-trees/app-trees.html'

‎src/frontend/components/component-tree/component-tree.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<main class="p1 col-12 monospace">
33
<bt-node-item *ngFor="#node of tree"
44
[changedNodes]="changedNodes"
5-
[node]="node">
5+
[node]="node"
6+
[selectedNode]="selectedNode"
7+
[openedNodes]="openedNodes">
68
</bt-node-item>
79
</main>

‎src/frontend/components/component-tree/component-tree.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {UserActionType}
66

77
@Component({
88
selector: 'component-tree',
9-
inputs: ['tree', 'changedNodes'],
9+
inputs: ['tree', 'changedNodes', 'selectedNode', 'openedNodes'],
1010
templateUrl: 'src/frontend/components/component-tree/component-tree.html',
1111
host: {'class': 'flex overflow-scroll'},
1212
directives: [NgFor, NodeItem]

‎src/frontend/components/node-item/node-item.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
(click)="onClick($event)">
66

77
<div class="node-item pl4 rounded border-box"
8-
[ngClass]="{'node-item-selected':node.isSelected,
8+
[ngClass]="{'node-item-selected':isSelected,
99
'changed': isUpdated}">
1010

1111
<img src="../images/Triangle.svg"
@@ -23,6 +23,8 @@
2323
<bt-node-item
2424
[changedNodes]="changedNodes"
2525
[hidden]="showChildren()"
26+
[selectedNode]="selectedNode"
27+
[openedNodes]="openedNodes"
2628
*ngFor="#node of node.children"
2729
[node]="node">
2830
</bt-node-item>

‎src/frontend/components/node-item/node-item.ts

+17-57
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Component, Inject, NgZone, Input} from '@angular/core';
2-
import {NgIf, NgFor, NgStyle} from '@angular/common';
1+
import {Component, Inject, NgZone, Input, SimpleChange} from '@angular/core';
2+
import {NgIf, NgFor} from '@angular/common';
33
import * as Rx from 'rxjs';
44
import {ComponentDataStore}
55
from '../../stores/component-data/component-data-store';
@@ -10,7 +10,7 @@ import {UserActionType}
1010
@Component({
1111
selector: 'bt-node-item',
1212
templateUrl: 'src/frontend/components/node-item/node-item.html',
13-
directives: [NgIf, NgFor, NodeItem, NgStyle]
13+
directives: [NgIf, NgFor, NodeItem]
1414
})
1515
/**
1616
* Node Item
@@ -21,65 +21,18 @@ export class NodeItem {
2121

2222
@Input() node: any;
2323
@Input() changedNodes: any;
24+
@Input() selectedNode: any;
25+
@Input() openedNodes: Array<any>;
2426

2527
private collapsed: any;
26-
private color: any;
27-
private borderColor: any;
2828
private isUpdated: boolean = false;
29+
private isSelected: boolean = false;
2930

3031
constructor(
3132
private userActions: UserActions,
3233
private componentDataStore: ComponentDataStore,
3334
private _ngZone: NgZone
34-
) {
35-
36-
this.borderColor = 'rgba(0, 0, 0, 0.125)';
37-
this.color = '#666';
38-
39-
// Listen for changes in selected node
40-
this.componentDataStore.dataStream
41-
.filter((data) => {
42-
return data.action && data.action === UserActionType.SELECT_NODE &&
43-
data.selectedNode && data.selectedNode.id;
44-
})
45-
.map(({ selectedNode }: any) => selectedNode)
46-
.subscribe((selectedNode: any) => {
47-
const isSelected = this.node && selectedNode &&
48-
selectedNode.id === this.node.id;
49-
this.update(isSelected);
50-
});
51-
52-
this.componentDataStore.dataStream
53-
.filter((data: any) => {
54-
return data.action && data.action === UserActionType.OPEN_CLOSE_TREE &&
55-
data.openedNodes.indexOf(this.node.id) > -1;
56-
})
57-
.subscribe((data) => {
58-
this.node.isOpen = false;
59-
this._ngZone.run(() => undefined);
60-
});
61-
62-
this.componentDataStore.dataStream
63-
.filter((data: any) => {
64-
return data.action && data.action === UserActionType.OPEN_CLOSE_TREE &&
65-
data.selectedNode.id === this.node.id;
66-
})
67-
.subscribe((data) => {
68-
this.userActions.selectNode({ node: this.node });
69-
});
70-
}
71-
72-
/**
73-
* Update the state of the node based on selection
74-
* @param {Boolean} isSelected
75-
*/
76-
update(isSelected) {
77-
this.node.isSelected = isSelected;
78-
this.borderColor = this.node.isSelected ? '#0074D9' :
79-
'rgba(0, 0, 0, 0.125)';
80-
this.color = this.node.isSelected ? '#222' : '#888';
81-
this._ngZone.run(() => undefined);
82-
}
35+
) {}
8336

8437
getNodeDetails(node) {
8538

@@ -128,7 +81,6 @@ export class NodeItem {
12881
*/
12982
onClick($event) {
13083
this.userActions.selectNode({ node: this.node });
131-
this._ngZone.run(() => undefined);
13284
$event.preventDefault();
13385
$event.stopPropagation();
13486
}
@@ -168,13 +120,21 @@ export class NodeItem {
168120
$event.stopPropagation();
169121
}
170122

171-
ngOnChanges() {
172-
if (this.changedNodes && this.node) {
123+
ngOnChanges(changes) {
124+
if (this.selectedNode && this.node) {
125+
this.isSelected = (this.selectedNode.id === this.node.id);
126+
}
127+
if (changes.changedNodes && this.node) {
173128
this.isUpdated = this.changedNodes.indexOf(this.node.id) > 0;
174129
setTimeout(() => {
175130
this.isUpdated = false;
176131
}, 2000);
177132
}
133+
if (this.openedNodes && this.node) {
134+
if (this.openedNodes.indexOf(this.node.id) > -1) {
135+
this.node.isOpen = false;
136+
}
137+
}
178138
}
179139

180140
}

‎src/frontend/components/tree-view/tree-view.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ <h4 class="regular m0 header col col-4 flex flex-center primary-color">
4040

4141
<component-tree
4242
[changedNodes]="changedNodes"
43-
[tree]="tree"></component-tree>
43+
[tree]="tree"
44+
[selectedNode]="selectedNode"
45+
[openedNodes]="openedNodes">
46+
</component-tree>
4447

4548
</div>

‎src/frontend/components/tree-view/tree-view.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {ComponentTree} from '../component-tree/component-tree';
1010

1111
@Component({
1212
selector: 'bt-tree-view',
13-
inputs: ['tree', 'changedNodes'],
13+
inputs: ['tree', 'changedNodes', 'selectedNode', 'openedNodes'],
1414
templateUrl: 'src/frontend/components/tree-view/tree-view.html',
1515
directives: [NgFor, NodeItem, ComponentTree]
1616
})

‎src/frontend/frontend.ts

+7-10
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const BASE_STYLES = require('!style!css!postcss!../styles/app.css');
3636
<bt-app-trees
3737
[selectedTabIndex]="selectedTabIndex"
3838
[selectedNode]="selectedNode"
39+
[openedNodes]="openedNodes"
3940
[routerTree]="routerTree"
4041
[tree]="tree"
4142
[changedNodes]="changedNodes"
@@ -58,6 +59,7 @@ class App {
5859
private routerTree: any;
5960
private selectedTabIndex = 0;
6061
private selectedNode: any;
62+
private openedNodes: Array<any> = [];
6163
private changedNodes: any = [];
6264

6365
constructor(
@@ -83,17 +85,12 @@ class App {
8385
this.changedNodes =
8486
parseUtils.getChangedNodes(this.previousTree, this.tree);
8587
}
86-
87-
this._ngZone.run(() => undefined);
88-
89-
if (data.openedNodes.length > 0 || data.selectedNode) {
90-
setTimeout(() => {
91-
this.userActions.updateNodeState({
92-
openedNodes: data.openedNodes,
93-
selectedNode: data.selectedNode
94-
});
95-
}, 250);
88+
if (data.selectedNode) {
89+
const treeMap = this.parseUtils.getNodesMap(this.tree);
90+
this.selectedNode = JSON.parse(treeMap[data.selectedNode.id]);
9691
}
92+
this.openedNodes = data.openedNodes;
93+
this._ngZone.run(() => undefined);
9794
}
9895
);
9996

‎src/frontend/stores/component-data/component-data-store.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -254,10 +254,10 @@ export class ComponentDataStore extends AbstractStore {
254254
* Save the node id to openedNodes array on clicking expand and collapse
255255
*/
256256
private openCloseNode({node}) {
257-
if (!node.isOpen) {
257+
const index = this._openedNodes.indexOf(node.id);
258+
if (!node.isOpen && index === -1) {
258259
this._openedNodes.push(node.id);
259-
} else {
260-
const index = this._openedNodes.indexOf(node.id);
260+
} else if (node.isOpen) {
261261
if (index > -1) {
262262
this._openedNodes.splice(index, 1);
263263
}

0 commit comments

Comments
 (0)