Performance: run outside zones: sk data, dataset

src/app/data-browser/data-browser.component.ts

@@ -41,7 +41,7 @@ export class DataBrowserComponent implements OnInit, AfterViewInit {
     setTimeout(()=>{
       this.pathsSub = this.SignalKService.getPathsObservable().subscribe(paths => {
         this.tableData.data = paths
-      })},0); // settimeout to make it async otherwise delays page load
+      })},0); // set timeout to make it async otherwise delays page load
   }
 
   ngAfterViewInit() {

src/app/data-set.service.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
-import { Subscription ,  Observable ,  BehaviorSubject, interval } from 'rxjs';
+import { Injectable, NgZone } from '@angular/core';
+import { Subscription, BehaviorSubject, interval } from 'rxjs';
 import { AppSettingsService } from './app-settings.service';
 import { SignalKService } from './signalk.service';
 
@@ -52,6 +52,7 @@ export class DataSetService {
   constructor(
     private AppSettingsService: AppSettingsService,
     private SignalKService: SignalKService,
+    private zones: NgZone
   ) {
       this.dataSets = AppSettingsService.getDataSets();
   }
@@ -155,9 +156,11 @@ export class DataSetService {
         this.updateDataCache(uuid, newValue.value);
     });
 
-    // start update timer
-    this.dataSetSub[dataSubIndex].updateTimerSub = interval (1000 * this.dataSets[dataIndex].updateTimer).subscribe(x => {
-        this.aggregateDataCache(uuid);
+    // start update timer out side of zones to remove change detection triggers. We observe the array data updates, not the data directly comming from SK
+    this.zones.runOutsideAngular(() => {
+      this.dataSetSub[dataSubIndex].updateTimerSub = interval (1000 * this.dataSets[dataIndex].updateTimer).subscribe(x => {
+          this.aggregateDataCache(uuid);
+      });
     });
 
   }

src/app/dynamic-widget-container/dynamic-widget-container.component.ts

@@ -49,13 +49,6 @@ export class DynamicWidgetContainerComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.subscribeTheme();
-    // this.loadTheme();
-    // this.instanciateWidget();
-
-    // Track theme changes
-    // if(this.themeNameSub == null) {
-    //   this.subscribeTheme();
-    // }
   }
 
   private loadTheme(): void {

src/app/signalk-delta.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { BehaviorSubject, delay, Observable , retryWhen, Subject, tap } from 'rxjs';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 
@@ -67,6 +67,7 @@ export class SignalKDeltaService {
   constructor(
     private server: SignalKConnectionService,
     private auth: AuththeticationService,
+    private zones: NgZone
     )
     {
       // Monitor Connection Service Endpoint Status
@@ -159,17 +160,20 @@ export class SignalKDeltaService {
     this.streamEndpoint$.next(this.streamEndpoint);
 
     this.socketWS$ = this.getNewWebSocket();
-    this.socketWS$.pipe(
-      retryWhen(errors =>
-        errors.pipe(
-          tap(err => {
-            console.error("[Delta Service] WebSocket error: " + JSON.stringify(err, ["code", "message", "type"]))
-          }),
-          delay(this.WS_RECONNECT_INTERVAL)
+    // Every WebSocket onmessage listener event (data cmming in) generates fires a ChangeDetection cycles that is not relevent in KIP. KIP sends socket messages to internal service data array only, so no UI updates (change detection) are necessary. UI Updates observing the internal data array updates. Running outside zones.js to eliminate unnessesary changedetection cycle.
+    this.zones.runOutsideAngular(() => {
+      this.socketWS$.pipe(
+        retryWhen(errors =>
+          errors.pipe(
+            tap(err => {
+              console.error("[Delta Service] WebSocket error: " + JSON.stringify(err, ["code", "message", "type"]))
+            }),
+            delay(this.WS_RECONNECT_INTERVAL)
+          )
         )
-      )
-    ).subscribe(msgWS => {
-      this.processWebsocketMessage(msgWS);
+      ).subscribe(msgWS => {
+        this.processWebsocketMessage(msgWS);
+      });
     });
   }
 

src/app/widgets/svg-wind/svg-wind.component.ts

@@ -247,33 +247,10 @@ export class SvgWindComponent {
 
   }
 
-
-
-
   addHeading(h1: number = 0, h2: number = 0) {
     let h3 = h1 + h2;
     while (h3 > 359) { h3 = h3 - 359; }
     while (h3 < 0) { h3 = h3 + 359; }
     return h3;
   }
-
-
 }
-
-
-
-
-
-
-/*
-<animateTransform #compassAnimate attributeName="transform"
-type="rotate"
-[attr.from]="'-'+oldCompassRotate+' 250 250'"
-[attr.to]="'-'+newCompassRotate+' 250 250'"
-begin="indefinite"
-dur="0.5s"
-additive="replace"
-fill="freeze"
-/>
-
-*/

src/app/widgets/widget-text-generic/widget-text-generic.component.ts

@@ -43,13 +43,12 @@ export class WidgetTextGenericComponent extends BaseWidgetComponent implements O
   ngOnInit() {
     this.canvasCtx = this.canvasEl.nativeElement.getContext('2d');
     this.canvasBGCtx = this.canvasBG.nativeElement.getContext('2d');
+    this.resizeWidget();
 
     this.observeDataStream('stringPath', newValue => {
       this.dataValue = newValue.value;
       this.updateCanvas();
     });
-
-    this.resizeWidget();
   }
 
   ngOnDestroy() {

src/app/widgets/widget-wind/widget-wind.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { Subscription, interval } from 'rxjs';
 import { BaseWidgetComponent } from '../../base-widget/base-widget.component';
 
@@ -29,7 +29,7 @@ export class WidgetWindComponent extends BaseWidgetComponent implements OnInit,
 
   windSectorObservableSub: Subscription = null;
 
-  constructor() {
+  constructor(private zones: NgZone) {
     super();
 
     this.defaultConfig = {
@@ -159,8 +159,10 @@ export class WidgetWindComponent extends BaseWidgetComponent implements OnInit,
   }
 
   startWindSectors() {
-    this.windSectorObservableSub = interval(500).subscribe(x => {
-      this.historicalCleanup();
+    this.zones.runOutsideAngular(() => {
+      this.windSectorObservableSub = interval(500).subscribe(x => {
+        this.historicalCleanup();
+      });
     });
   }