diff --git a/docs/releases/v2.6.0.md b/docs/releases/v2.6.0.md index aab4dc6eb4efbcffb87dcbc3d402340dc2705522..72f97e1392db3f20dde8b5c483e105a72ef0a8a6 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 7a9b3be09940ad68efb719946e8aaf1e57c31e2a..8fd23a5d9027b1514df06dc820b766c9b0027af7 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 838e6418d0a50481f05bdfebf421993c1bd78282..8582aa6519ef689c6f8d09c5e721c10d65d6f798 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 7e129dd484746f49bc7a73fdc9e5fff307a7e446..739e7178255e892bcbfa54d759323eb4a436fe32 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