From 2a1f6e9464e197a9f0e1d4f2dfd598a57dcd49c8 Mon Sep 17 00:00:00 2001
From: mgechev <mgechev@gmail.com>
Date: Mon, 16 Mar 2020 16:23:10 -0700
Subject: [PATCH] fix(devtools): do not refresh the ui unless there are updates

---
 .../directive-forest/component-data-source.ts |  6 +++---
 .../directive-forest.component.ts             | 19 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts
index 6d3244856aa..e99336d8fe4 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts
@@ -84,9 +84,9 @@ export class ComponentDataSource extends DataSource<FlatNode> {
     return this._nodeToFlat.get(indexedNode);
   }
 
-  update(forest: DevToolsNode[]): FlatNode[] {
+  update(forest: DevToolsNode[]): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } {
     if (!forest) {
-      return;
+      return { newItems: [], movedItems: [], removedItems: [] };
     }
 
     const indexedForest = indexForest(forest);
@@ -101,7 +101,7 @@ export class ComponentDataSource extends DataSource<FlatNode> {
     movedItems.forEach(i => this._nodeToFlat.set(i.original, i));
     newItems.forEach(i => (i.newItem = true));
 
-    return newItems;
+    return { newItems, movedItems, removedItems };
   }
 
   connect(collectionViewer: CollectionViewer): Observable<FlatNode[]> {
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
index 3ede52f13a5..7ef3894ca6d 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
@@ -25,9 +25,9 @@ import { arrayEquals } from 'shared-utils';
 })
 export class DirectiveForestComponent {
   @Input() set forest(forest: DevToolsNode[]) {
-    this._updateForest(forest);
-
-    if (this.currentSelectedElement) {
+    const result = this._updateForest(forest);
+    const changed = result.movedItems.length || result.newItems.length || result.removedItems.length;
+    if (this.currentSelectedElement && changed) {
       this._reselectNodeOnUpdate();
     }
   }
@@ -103,18 +103,21 @@ export class DirectiveForestComponent {
     }
   }
 
-  private _updateForest(forest: DevToolsNode[]): void {
-    const newItems = this.dataSource.update(forest);
+  private _updateForest(
+    forest: DevToolsNode[]
+  ): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } {
+    const result = this.dataSource.update(forest);
     if (!this._initialized && forest && forest.length) {
       this.treeControl.expandAll();
       this._initialized = true;
-      newItems.forEach(item => (item.newItem = false));
+      result.newItems.forEach(item => (item.newItem = false));
     }
-    if (newItems && newItems.length) {
-      newItems.forEach(item => {
+    if (result.newItems && result.newItems.length) {
+      result.newItems.forEach(item => {
         this.treeControl.expand(item);
       });
     }
+    return result;
   }
 
   populateParents(position: ElementPosition): void {