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.

6 years ago · 762c6dae55
5 changed files with 64 additions and 34 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/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;">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/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.alarmsDatasource.updateAlarms();
-      this.ctx.detectChanges();
-    });
+    this.updateTitle(true);
+    this.alarmsDatasource.updateAlarms();
  }

  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 '';
    }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/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.entityDatasource.dataUpdated();
-      this.ctx.detectChanges();
-    });
+    this.updateTitle(true);
+    this.entityDatasource.dataUpdated();
  }

  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 '';
    }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
+++ b/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) => {
-        source.timeseriesDatasource.dataUpdated(this.data);
-      });
-      this.ctx.detectChanges();
+    this.sources.forEach((source) => {
+      source.timeseriesDatasource.dataUpdated(this.data);
    });
  }

@ -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) {
-        let hideLine = true;
-        for (let c = 0; (c < data.length) && hideLine; c++) {
-          if (rowsMap[t][c + 1]) {
-            hideLine = false;
-          }
-        }
-        if (!hideLine) {
-          rows.push(rowsMap[t]);
-        }
+
+    for (const value of Object.values(rowsMap)) {
+      this.hideEmptyLines = true;
+
+      if (this.hideEmptyLines && isDefinedAndNotNull(value[1])) {
+        rows.push(value);
      } else {
-        rows.push(rowsMap[t]);
+        rows.push(value);
      }
    }
+
    return rows;
  }

-
  isEmpty(): Observable<boolean> {
    return this.rowsSubject.pipe(
      map((rows) => !rows.length)