Dashboard performance improvements by changing change detection strategy to OnPush

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() {

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">

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();
         }
       }
     });

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) {

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);
         });
       }
     };

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)

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() {