Dashboard performance improvements by changing change detection strategy to OnPush

5 years ago · c768fcbac1
7 changed files with 40 additions and 24 deletions
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts
@ -15,6 +15,7 @@
 ///

 import {
+  ChangeDetectorRef,
  Component,
  Injector,
  Input,
@ -73,6 +74,7 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {

  constructor(private translate: TranslateService,
              private overlay: Overlay,
+              private cd: ChangeDetectorRef,
              private breakpointObserver: BreakpointObserver,
              private viewContainerRef: ViewContainerRef) {
  }
@ -179,6 +181,7 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
      displayValue = this.translate.instant('entity.entities');
    }
    this.displayValue = displayValue;
+    this.cd.detectChanges();
  }

  private updateEntityAliasesInfo() {
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@ -226,8 +226,6 @@
      <mat-drawer class="tb-details-drawer"
                  [opened]="isEditingWidget || isAddingWidget"
                  (openedStart)="detailsDrawerOpenedStart()"
-                  (opened)="detailsDrawerOpened()"
-                  (closedStart)="detailsDrawerClosedStart()"
                  (closed)="detailsDrawerClosed()"
                  mode="over"
                  position="end">
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@ -15,6 +15,7 @@
 ///

 import {
+  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component, ElementRef,
  Inject,
@ -134,7 +135,7 @@ import {
  templateUrl: './dashboard-page.component.html',
  styleUrls: ['./dashboard-page.component.scss'],
  encapsulation: ViewEncapsulation.None,
-  // changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardPageComponent extends PageComponent implements IDashboardController, OnInit, OnDestroy {

@ -425,9 +426,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
  }

  public runChangeDetection() {
-    /*setTimeout(() => {
+    this.ngZone.run(() => {
      this.cd.detectChanges();
-    });*/
+    });
  }

  public openToolbar() {
@ -731,6 +732,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
          const widget = importData.widget;
          const layoutId = importData.layoutId;
          this.layouts[layoutId].layoutCtx.widgets.addWidgetId(widget.id);
+          this.runChangeDetection();
        }
      }
    );
@ -885,28 +887,17 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
    } else if (this.isAddingWidget) {
      this.isAddingWidgetClosed = false;
    }
-    setTimeout(() => {
-      this.cd.detach();
-    }, 0);
-  }
-
-  detailsDrawerOpened() {
-    this.cd.reattach();
-  }
-
-  detailsDrawerClosedStart() {
-    this.cd.detach();
  }

  detailsDrawerClosed() {
    this.isEditingWidgetClosed = true;
    this.isAddingWidgetClosed = true;
-    this.cd.reattach();
  }

  private addWidgetToLayout(widget: Widget, layoutId: DashboardLayoutId) {
    this.dashboardUtils.addWidgetToLayout(this.dashboard, this.dashboardCtx.state, layoutId, widget);
    this.layouts[layoutId].layoutCtx.widgets.addWidgetId(widget.id);
+    this.runChangeDetection();
  }

  private selectTargetLayout(): Observable<DashboardLayoutId> {
@ -1060,6 +1051,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
            pos, this.entityAliasesUpdated.bind(this), this.filtersUpdated.bind(this)).subscribe(
      (widget) => {
        layoutCtx.widgets.addWidgetId(widget.id);
+        this.runChangeDetection();
      });
  }

@ -1068,6 +1060,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
      pos).subscribe(
      (widget) => {
        layoutCtx.widgets.addWidgetId(widget.id);
+        this.runChangeDetection();
      });
  }

@ -1086,6 +1079,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
      if (res) {
        if (layoutCtx.widgets.removeWidgetId(widget.id)) {
          this.dashboardUtils.removeWidgetFromLayout(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget.id);
+          this.runChangeDetection();
        }
      }
    });
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
@ -15,7 +15,7 @@
 ///

 import {
-  AfterViewInit,
+  AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef,
  Component,
  DoCheck,
  Input,
@ -59,7 +59,8 @@ import { UtilsService } from '@core/services/utils.service';
@Component({
  selector: 'tb-dashboard',
  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+  styleUrls: ['./dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardComponent extends PageComponent implements IDashboardComponent, DoCheck, OnInit, OnDestroy, AfterViewInit, OnChanges {

@ -178,6 +179,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
              private breakpointObserver: BreakpointObserver,
              private differs: IterableDiffers,
              private kvDiffers: KeyValueDiffers,
+              private cd: ChangeDetectorRef,
              private ngZone: NgZone) {
    super(store);
    this.authUser = getCurrentAuthUser(store);
@ -249,6 +251,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
    let updateLayoutOpts = false;
    let updateEditingOpts = false;
    let updateWidgets = false;
+    let updateDashboardTimewindow = false;
    for (const propName of Object.keys(changes)) {
      const change = changes[propName];
      if (!change.firstChange && change.currentValue !== change.previousValue) {
@ -261,13 +264,16 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
        } else if (['widgets', 'widgetLayouts'].includes(propName)) {
          updateWidgets = true;
        } else if (propName === 'dashboardTimewindow') {
-          this.dashboardTimewindowChangedSubject.next(this.dashboardTimewindow);
+          updateDashboardTimewindow = true;
        }
      }
    }
    if (updateWidgets) {
      this.updateWidgets();
+    } else if (updateDashboardTimewindow) {
+      this.dashboardTimewindowChangedSubject.next(this.dashboardTimewindow);
    }
+
    if (updateMobileOpts) {
      this.updateMobileOpts();
    }
@ -528,6 +534,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
    this.updateWidgetLayouts();
  }

+  public detectChanges() {
+    this.cd.detectChanges();
+  }
+
  private detectRowSize(isMobile: boolean, autofillHeight: boolean, parentHeight?: number): number | null {
    let rowHeight = null;
    if (!autofillHeight) {
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@ -468,10 +468,13 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
    );
  }

-  private detectChanges() {
+  private detectChanges(detectDashboardChanges = false) {
    if (!this.destroyed) {
      try {
        this.cd.detectChanges();
+        if (detectDashboardChanges) {
+          this.widgetContext.dashboard.detectChanges();
+        }
      } catch (e) {
        // console.log(e);
      }
@ -491,6 +494,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
    }
    if (!this.widgetContext.inited && this.isReady()) {
      this.widgetContext.inited = true;
+      this.widgetContext.dashboard.detectChanges();
      if (this.cafs.init) {
        this.cafs.init();
        this.cafs.init = null;
@ -878,7 +882,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
      timeWindowUpdated: (subscription, timeWindowConfig) => {
        this.ngZone.run(() => {
          this.widget.config.timewindow = timeWindowConfig;
-          this.detectChanges();
+          this.detectChanges(true);
        });
      }
    };
--- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
@ -79,6 +79,7 @@ export interface IDashboardComponent {
  pauseChangeNotifications();
  resumeChangeNotifications();
  notifyLayoutUpdated();
+  detectChanges();
 }

 declare type DashboardWidgetUpdateOperation = 'add' | 'remove' | 'update';
@ -342,7 +343,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
      widget.id = guid();
    }
    this.widgetId = widget.id;
-    this.updateWidgetParams();
+    this.updateWidgetParams(false);
  }

  gridsterItemComponent$(): Observable<GridsterItemComponentInterface> {
@ -353,7 +354,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
    }
  }

-  updateWidgetParams() {
+  updateWidgetParams(detectChanges = true) {
    this.color = this.widget.config.color || 'rgba(0, 0, 0, 0.87)';
    this.backgroundColor = this.widget.config.backgroundColor || '#fff';
    this.padding = this.widget.config.padding || '8px';
@ -405,6 +406,9 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {

    this.customHeaderActions = this.widgetContext.customHeaderActions ? this.widgetContext.customHeaderActions : [];
    this.widgetActions = this.widgetContext.widgetActions ? this.widgetContext.widgetActions : [];
+    if (detectChanges) {
+      this.dashboard.detectChanges();
+    }
  }

  @enumerable(true)
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts
@ -15,6 +15,7 @@
 ///

 import {
+  ChangeDetectorRef,
  Component,
  forwardRef,
  Inject,
@ -158,6 +159,7 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
              private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe,
              private datePipe: DatePipe,
              private overlay: Overlay,
+              private cd: ChangeDetectorRef,
              public viewContainerRef: ViewContainerRef,
              public breakpointObserver: BreakpointObserver,
              @Inject(DOCUMENT) private document: Document,
@ -313,6 +315,7 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
    } else {
      this.innerValue.displayTimezoneAbbr = '';
    }
+    this.cd.detectChanges();
  }

  hideLabel() {