From 7fda1012a9e098993df017b115c3c4439790bf2f Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Tue, 26 Oct 2021 13:24:06 +0200
Subject: [PATCH] chore: improve perf
---
docs/releases/v2.6.0.md | 1 +
src/index.html | 5 ++++-
.../nehuba/nehubaViewer/nehubaViewer.component.ts | 6 ++++--
.../nehuba/statusCard/statusCard.component.ts | 8 +++++---
4 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/docs/releases/v2.6.0.md b/docs/releases/v2.6.0.md
index aab4dc6eb..72f97e139 100644
--- a/docs/releases/v2.6.0.md
+++ b/docs/releases/v2.6.0.md
@@ -6,3 +6,4 @@
- reworked logo path
- added visual indication when a new template is being loaded
- reworked visual for `supported template` in region side panel
+- improve performance by disabling `zone.js` patch of `requestAnimationFrame` and change detection strategy of nehuba viewer
diff --git a/src/index.html b/src/index.html
index 7a9b3be09..8fd23a5d9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,10 @@
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="version.css">
<link rel="icon" type="image/png" href="res/favicons/favicon-128-light.png"/>
-
+ <script>
+ // disable zone patching of raf. This hampers NG performance significantly
+ window['__Zone_disable_requestAnimationFrame'] = true
+ </script>
<script src="https://unpkg.com/kg-dataset-previewer@1.2.0/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
</script>
<script src="https://unpkg.com/three-surfer@0.0.10/dist/bundle.js" defer></script>
diff --git a/src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts b/src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts
index 838e6418d..8582aa651 100644
--- a/src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts
+++ b/src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts
@@ -1,6 +1,6 @@
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, Inject, Optional } from "@angular/core";
+import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, Inject, Optional, ChangeDetectionStrategy } from "@angular/core";
import { fromEvent, Subscription, ReplaySubject, BehaviorSubject, Observable, race, timer, Subject } from 'rxjs'
-import { debounceTime, filter, map, scan, startWith, mapTo, switchMap, take, skip, tap } from "rxjs/operators";
+import { debounceTime, filter, map, scan, startWith, mapTo, switchMap, take, skip } from "rxjs/operators";
import { AtlasWorkerService } from "src/atlasViewer/atlasViewer.workerService.service";
import { StateInterface as ViewerConfiguration } from "src/services/state/viewerConfig.store";
import { LoggingService } from "src/logging";
@@ -61,6 +61,8 @@ export const scanFn = (acc: LayerLabelIndex[], curr: LayerLabelIndex) => {
styleUrls : [
'./nehubaViewer.style.css',
],
+ // OnPush seems to improve performance significantly
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class NehubaViewerUnit implements OnInit, OnDestroy {
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.component.ts b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
index 7e129dd48..739e71782 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.component.ts
+++ b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
@@ -11,7 +11,7 @@ import { select, Store } from "@ngrx/store";
import { LoggingService } from "src/logging";
import { NehubaViewerUnit } from "../nehubaViewer/nehubaViewer.component";
import { Observable, Subscription, of, combineLatest } from "rxjs";
-import { map, filter, startWith } from "rxjs/operators";
+import { map, filter, startWith, throttleTime } from "rxjs/operators";
import { MatBottomSheet } from "@angular/material/bottom-sheet";
import { MatDialog } from "@angular/material/dialog";
import { ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
@@ -128,10 +128,12 @@ export class StatusCardComponent implements OnInit, OnChanges{
this.mouseVal$ = combineLatest([
this.statusPanelRealSpace$,
this.nehubaViewer.mousePosInReal$.pipe(
- filter(v => !!v)
+ filter(v => !!v),
+ throttleTime(16)
),
this.nehubaViewer.mousePosInVoxel$.pipe(
- filter(v => !!v)
+ filter(v => !!v),
+ throttleTime(16)
)
]).pipe(
map(([realFlag, real, voxel]) => realFlag
--
GitLab