fix(tag-list): Fixes an issue where the taglist did not get updated

within a tree table. When running inside of a tree table, the table row does only get updated when the differ of the tree table triggers a repaint. As the tag-list itself marks itself dirty, but change detection never runs for it because no differ detectable changes happened. Fixes #603
dynatrace-oss · Feb 18, 2020 · b796ed5 · b796ed5
1 parent 3719910
commit b796ed5
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 2 deletions.
diff --git a/apps/dev/src/tree-table/tree-table-demo.component.html b/apps/dev/src/tree-table/tree-table-demo.component.html
@@ -52,7 +52,13 @@
     <dt-tree-table-header-cell *dtHeaderCellDef>
       Running
     </dt-tree-table-header-cell>
-    <dt-cell *dtCellDef="let row">{{ row.running }}ms</dt-cell>
+    <dt-cell *dtCellDef="let row">
+      <dt-tag-list>
+        <dt-tag *ngFor="let tag of row.tags">
+          {{ tag }}
+        </dt-tag>
+      </dt-tag-list>
+    </dt-cell>
   </ng-container>
 
   <ng-container dtColumnDef="waiting">

diff --git a/apps/dev/src/tree-table/tree-table-demo.component.ts b/apps/dev/src/tree-table/tree-table-demo.component.ts
@@ -34,6 +34,18 @@ const TESTDATA: ThreadNode[] = [
     waiting: 123,
     running: 20,
     blocked: 0,
+    tags: [
+      'tag one',
+      'Pineapple',
+      'Apple',
+      'Avocado',
+      'Jackfruit',
+      'oranage',
+      'tag two',
+      'cucumber',
+      'paprika',
+      'apple',
+    ],
     children: [
       {
         name:
@@ -44,6 +56,18 @@ const TESTDATA: ThreadNode[] = [
         waiting: 123,
         running: 20,
         blocked: 0,
+        tags: [
+          'tag one',
+          'Pineapple',
+          'Apple',
+          'Avocado',
+          'Jackfruit',
+          'oranage',
+          'tag two',
+          'cucumber',
+          'paprika',
+          'apple',
+        ],
       },
       {
         name: 'hz.hzInstance_1_cluster.thread-2',
@@ -53,6 +77,18 @@ const TESTDATA: ThreadNode[] = [
         waiting: 130,
         running: 0,
         blocked: 0,
+        tags: [
+          'tag one',
+          'Pineapple',
+          'Apple',
+          'Avocado',
+          'Jackfruit',
+          'oranage',
+          'tag two',
+          'cucumber',
+          'paprika',
+          'apple',
+        ],
       },
     ],
   },
@@ -64,6 +100,18 @@ const TESTDATA: ThreadNode[] = [
     waiting: 123,
     running: 20,
     blocked: 0,
+    tags: [
+      'tag one',
+      'Pineapple',
+      'Apple',
+      'Avocado',
+      'Jackfruit',
+      'oranage',
+      'tag two',
+      'cucumber',
+      'paprika',
+      'apple',
+    ],
     children: [
       {
         name: 'jetty-422',
@@ -73,6 +121,18 @@ const TESTDATA: ThreadNode[] = [
         waiting: 123,
         running: 20,
         blocked: 0,
+        tags: [
+          'tag one',
+          'Pineapple',
+          'Apple',
+          'Avocado',
+          'Jackfruit',
+          'oranage',
+          'tag two',
+          'cucumber',
+          'paprika',
+          'apple',
+        ],
       },
       {
         name: 'jetty-423',
@@ -82,6 +142,18 @@ const TESTDATA: ThreadNode[] = [
         waiting: 130,
         running: 0,
         blocked: 0,
+        tags: [
+          'tag one',
+          'Pineapple',
+          'Apple',
+          'Avocado',
+          'Jackfruit',
+          'oranage',
+          'tag two',
+          'cucumber',
+          'paprika',
+          'apple',
+        ],
       },
       {
         name: 'jetty-424',
@@ -91,6 +163,18 @@ const TESTDATA: ThreadNode[] = [
         waiting: 130,
         running: 0,
         blocked: 0,
+        tags: [
+          'tag one',
+          'Pineapple',
+          'Apple',
+          'Avocado',
+          'Jackfruit',
+          'oranage',
+          'tag two',
+          'cucumber',
+          'paprika',
+          'apple',
+        ],
       },
     ],
   },
@@ -102,6 +186,18 @@ const TESTDATA: ThreadNode[] = [
     waiting: 123,
     running: 20,
     blocked: 0,
+    tags: [
+      'tag one',
+      'Pineapple',
+      'Apple',
+      'Avocado',
+      'Jackfruit',
+      'oranage',
+      'tag two',
+      'cucumber',
+      'paprika',
+      'apple',
+    ],
   },
 ];
 
@@ -110,6 +206,7 @@ export class ThreadNode {
   threadlevel: string;
   totalTimeConsumption: number;
   blocked: number;
+  tags: string[];
   running: number;
   waiting: number;
   icon: DtIconType;
@@ -121,6 +218,7 @@ export class ThreadFlatNode {
   threadlevel: string;
   totalTimeConsumption: number;
   blocked: number;
+  tags: string[];
   running: number;
   waiting: number;
   icon: DtIconType;
@@ -187,6 +285,7 @@ export class TreeTableDemo {
     flatNode.blocked = node.blocked;
     flatNode.running = node.running;
     flatNode.waiting = node.waiting;
+    flatNode.tags = node.tags;
     flatNode.totalTimeConsumption = node.totalTimeConsumption;
     flatNode.icon = node.icon;
     this.flatNodeMap.set(flatNode, node);

diff --git a/components/tag/src/tag-list/tag-list.ts b/components/tag/src/tag-list/tag-list.ts
@@ -105,6 +105,7 @@ export class DtTagList implements AfterContentInit, OnDestroy {
 
   ngAfterContentInit(): void {
     if (this._platform.isBrowser) {
+      // Changes need to be re-evaluated if
       this._tagElements.changes
         .pipe(
           startWith(null),
@@ -125,7 +126,12 @@ export class DtTagList implements AfterContentInit, OnDestroy {
               this._isOneLine = true;
             }
           }
-          this._changeDetectorRef.markForCheck();
+          // When running inside of a tree table, the table row does only get updated
+          // when the differ of the tree table triggers a repaint. As the tag-list
+          // itself marks itself dirty, but change detection never runs for it because
+          // no differ detectable changes happened.
+          // We need to run detectChanges here to actually update the number indicator
+          this._changeDetectorRef.detectChanges();
         });
       this._tagAddElements.changes
         .pipe(startWith(null), takeUntil(this._destroy$))