From c768fcbac1ba1ca6fc26bec5617c4bf9ad07ee9f Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 14 May 2021 18:21:46 +0300 Subject: [PATCH] Dashboard performance improvements by changing change detection strategy to OnPush --- .../alias/aliases-entity-select.component.ts | 3 +++ .../dashboard-page.component.html | 2 -- .../dashboard-page.component.ts | 24 +++++++------------ .../dashboard/dashboard.component.ts | 16 ++++++++++--- .../components/widget/widget.component.ts | 8 +++++-- .../home/models/dashboard-component.models.ts | 8 +++++-- .../components/time/timewindow.component.ts | 3 +++ 7 files changed, 40 insertions(+), 24 deletions(-) diff --git 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 index ad7b3c6a11..c4f0dedc4a 100644 --- 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() { diff --git 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 index 9ebafd272d..5c54fe23e0 100644 --- 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 @@ diff --git 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 index 34f2ad5736..f006bc55bf 100644 --- 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 { @@ -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(); } } }); diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index 90a432edbc..c871587ba2 100644 --- 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) { diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index 3044f29bca..4caf5f3edd 100644 --- 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); }); } }; diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index b1ded98ba7..88d09ac855 100644 --- 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 { @@ -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) diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts index 0169feaae7..77d10eadcc 100644 --- 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() {