improved performance of table widgets - removed unused ngZone.run and detectChanges, changed functions trackByRowIndex - now is used index, not id, minor improvements for functions, used after data updating.

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html

@@ -61,7 +61,7 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container">
-      <table mat-table [dataSource]="alarmsDatasource"
+      <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByRowIndex"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 30px;">

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -247,11 +247,8 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   }
 
   public onDataUpdated() {
-    this.ngZone.run(() => {
+    this.updateTitle(true);
-      this.updateTitle(true);
+    this.alarmsDatasource.updateAlarms();
-      this.alarmsDatasource.updateAlarms();
-      this.ctx.detectChanges();
-    });
   }
 
   public pageLinkSortDirection(): SortDirection {
@@ -565,6 +562,10 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     return column.def;
   }
 
+  public trackByRowIndex(index: number) {
+    return index;
+  }
+
   public headerStyle(key: EntityColumn): any {
     const columnWidth = this.columnWidth[key.def];
     return widthStyle(columnWidth);
@@ -606,7 +607,19 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       } else {
         content = this.defaultContent(key, contentInfo, value);
       }
-      return isDefined(content) ? this.domSanitizer.bypassSecurityTrustHtml(content) : '';
+
+      if (!isDefined(content)) {
+        return '';
+
+      } else {
+        switch (typeof content) {
+          case 'string':
+            return this.domSanitizer.bypassSecurityTrustHtml(content);
+          default:
+            return content;
+        }
+      }
+
     } else {
       return '';
     }

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html

@@ -38,7 +38,7 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container">
-      <table mat-table [dataSource]="entityDatasource"
+      <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByRowIndex"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; trackBy: trackByColumnDef;">
           <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header> {{ column.title }} </mat-header-cell>

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts

@@ -206,11 +206,8 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   }
 
   public onDataUpdated() {
-    this.ngZone.run(() => {
+    this.updateTitle(true);
-      this.updateTitle(true);
+    this.entityDatasource.dataUpdated();
-      this.entityDatasource.dataUpdated();
-      this.ctx.detectChanges();
-    });
   }
 
   public pageLinkSortDirection(): SortDirection {
@@ -488,6 +485,10 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     return column.def;
   }
 
+  public trackByRowIndex(index: number) {
+    return index;
+  }
+
   public headerStyle(key: EntityColumn): any {
     const columnWidth = this.columnWidth[key.def];
     return widthStyle(columnWidth);
@@ -529,7 +530,19 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
       } else {
         content = this.defaultContent(key, contentInfo, value);
       }
-      return isDefined(content) ? this.domSanitizer.bypassSecurityTrustHtml(content) : '';
+
+      if (!isDefined(content)) {
+        return '';
+
+      } else {
+        switch (typeof content) {
+          case 'string':
+            return this.domSanitizer.bypassSecurityTrustHtml(content);
+          default:
+            return content;
+        }
+      }
+
     } else {
       return '';
     }

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -40,7 +40,7 @@ import {
 } from '@shared/models/widget.models';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { hashCode, isDefined, isNumber } from '@core/utils';
+import {hashCode, isDefined, isDefinedAndNotNull, isNumber} from '@core/utils';
 import cssjs from '@core/css/css';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction, SortOrder, sortOrderFromString } from '@shared/models/page/sort-order';
@@ -197,11 +197,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   }
 
   public onDataUpdated() {
-    this.ngZone.run(() => {
+    this.sources.forEach((source) => {
-      this.sources.forEach((source) => {
+      source.timeseriesDatasource.dataUpdated(this.data);
-        source.timeseriesDatasource.dataUpdated(this.data);
-      });
-      this.ctx.detectChanges();
     });
   }
 
@@ -410,7 +407,18 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
         const units = contentInfo.units || this.ctx.widgetConfig.units;
         content = this.ctx.utils.formatValue(value, decimals, units, true);
       }
-      return isDefined(content) ? this.domSanitizer.bypassSecurityTrustHtml(content) : '';
+
+      if (!isDefined(content)) {
+        return '';
+
+      } else {
+        switch (typeof content) {
+          case 'string':
+            return this.domSanitizer.bypassSecurityTrustHtml(content);
+          default:
+            return content;
+        }
+      }
     }
   }
 
@@ -515,26 +523,22 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
         row[d + 1] = cellData[1];
       });
     }
+
     const rows: TimeseriesRow[]  = [];
-    for (const t of Object.keys(rowsMap)) {
+
-      if (this.hideEmptyLines) {
+    for (const value of Object.values(rowsMap)) {
-        let hideLine = true;
+      this.hideEmptyLines = true;
-        for (let c = 0; (c < data.length) && hideLine; c++) {
+
-          if (rowsMap[t][c + 1]) {
+      if (this.hideEmptyLines && isDefinedAndNotNull(value[1])) {
-            hideLine = false;
+        rows.push(value);
-          }
-        }
-        if (!hideLine) {
-          rows.push(rowsMap[t]);
-        }
       } else {
-        rows.push(rowsMap[t]);
+        rows.push(value);
       }
     }
+
     return rows;
   }
 
-
   isEmpty(): Observable<boolean> {
     return this.rowsSubject.pipe(
       map((rows) => !rows.length)