diff --git a/src/app/data-browser/data-browser.component.ts b/src/app/data-browser/data-browser.component.ts
index a447c827..80ef8840 100644
--- a/src/app/data-browser/data-browser.component.ts
+++ b/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() {
diff --git a/src/app/data-set.service.ts b/src/app/data-set.service.ts
index 1bb9d945..36d956c8 100644
--- a/src/app/data-set.service.ts
+++ b/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);
+ });
});
}
diff --git a/src/app/dynamic-widget-container/dynamic-widget-container.component.ts b/src/app/dynamic-widget-container/dynamic-widget-container.component.ts
index a425d557..53534258 100644
--- a/src/app/dynamic-widget-container/dynamic-widget-container.component.ts
+++ b/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 {
diff --git a/src/app/signalk-delta.service.ts b/src/app/signalk-delta.service.ts
index d7a2b432..70a3fc1f 100644
--- a/src/app/signalk-delta.service.ts
+++ b/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);
+ });
});
}
diff --git a/src/app/widgets/svg-wind/svg-wind.component.ts b/src/app/widgets/svg-wind/svg-wind.component.ts
index de9f3193..cb7dd1ab 100644
--- a/src/app/widgets/svg-wind/svg-wind.component.ts
+++ b/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"
-/>
-
-*/
diff --git a/src/app/widgets/widget-text-generic/widget-text-generic.component.ts b/src/app/widgets/widget-text-generic/widget-text-generic.component.ts
index 1258a3c6..f7de5861 100644
--- a/src/app/widgets/widget-text-generic/widget-text-generic.component.ts
+++ b/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() {
diff --git a/src/app/widgets/widget-wind/widget-wind.component.ts b/src/app/widgets/widget-wind/widget-wind.component.ts
index 8693d8d9..7ea0261b 100644
--- a/src/app/widgets/widget-wind/widget-wind.component.ts
+++ b/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();
+ });
});
}