refactor: use onPush strategy

Author: vik-13

src/app/app.component.ts

@@ -1,8 +1,15 @@
-import { Component, NgZone, ViewChild, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  NgZone,
+  OnDestroy,
+  ViewChild
+} from '@angular/core';
 import { ProjectProxy } from './model/project-proxy';
 import { Config, IdentifiedStaticSymbol, VisualizationConfig } from '../shared/data-format';
 import { formatError } from './shared/utils';
-import { StateManager, Memento } from './model/state-manager';
+import { Memento, StateManager } from './model/state-manager';
 import { Theme } from '../shared/themes/color-map';
 import { IPCBus } from './model/ipc-bus';
 import { Message } from '../shared/ipc-constants';
@@ -17,9 +24,10 @@ import { KeyValue } from '@angular/common';
 @Component({
   selector: 'ngrev-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent implements AfterViewInit, OnDestroy {
+export class AppComponent implements OnDestroy {
   projectSet = false;
   loading = false;
   queryList: KeyValue<string, IdentifiedStaticSymbol>[] = [];
@@ -35,9 +43,11 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 
   private _stopLoading = () => {
     this.loading = false;
+    this._cd.markForCheck();
   };
   private _startLoading = () => {
     this.loading = true;
+    this._cd.markForCheck();
   };
 
   private _keyDownSubscription: Subscription;
@@ -55,6 +65,30 @@ export class AppComponent implements AfterViewInit, OnDestroy {
       this.theme = config.themes[config.theme];
       this.showLibs = config.showLibs;
       this.showModules = config.showModules;
+      this._cd.markForCheck();
+    });
+
+    this._ipcBus.on(Message.ChangeTheme, (_: any, theme: string) => {
+      this._ngZone.run(() => {
+        this.theme = this.themes[theme];
+        this._cd.markForCheck();
+      });
+    });
+    this._ipcBus.on(Message.ToggleLibsMenuAction, () => {
+      this._ngZone.run(() => {
+        this.manager.toggleLibs().then(() => {
+          this.manager.reloadAppState();
+          this._cd.markForCheck();
+        });
+      });
+    });
+    this._ipcBus.on(Message.ToggleModulesMenuAction, () => {
+      this._ngZone.run(() => {
+        this.manager.toggleModules().then(() => {
+          this.manager.reloadAppState();
+          this._cd.markForCheck();
+        });
+      });
     });
 
     this.maxWidth$ = fromEvent(window, 'resize').pipe(
@@ -73,25 +107,6 @@ export class AppComponent implements AfterViewInit, OnDestroy {
     ).subscribe();
   }
 
-  ngAfterViewInit(): void {
-    this._ipcBus.on(Message.ChangeTheme, (_: any, theme: string) => {
-      this.theme = this.themes[theme];
-      this._cd.detectChanges();
-    });
-    this._ipcBus.on(Message.ToggleLibsMenuAction, () => {
-      this.manager.toggleLibs().then(() => {
-        this.manager.reloadAppState();
-        this._cd.detectChanges();
-      });
-    });
-    this._ipcBus.on(Message.ToggleModulesMenuAction, () => {
-      this.manager.toggleModules().then(() => {
-        this.manager.reloadAppState();
-        this._cd.detectChanges();
-      });
-    });
-  }
-
   ngOnDestroy(): void {
     this._keyDownSubscription.unsubscribe();
   }
@@ -137,15 +152,17 @@ the Angular's AoT compiler. Error during parsing:\n\n${formatError(error)}`
   }
 
   restoreMemento(memento: Memento): void {
-    this.manager
-      .restoreMemento(memento)
-      .then(this._stopLoading)
-      .catch(this._stopLoading);
+    this._ngZone.run(() => {
+      this.manager
+        .restoreMemento(memento)
+        .then(this._stopLoading)
+        .catch(this._stopLoading);
+    });
   }
 
   get initialized(): VisualizationConfig<any> | null {
     return this.manager.getCurrentState(() => {
-      this._cd.detectChanges();
+      this._cd.markForCheck();
     });
   }
 

src/app/components/state-navigation/state-navigation.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { VisualizationConfig } from '../../../shared/data-format';
-import { Theme, DefaultColor, BoxTheme } from '../../../shared/themes/color-map';
+import { BoxTheme, DefaultColor, Theme } from '../../../shared/themes/color-map';
 import { Memento } from '../../model/state-manager';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
@@ -19,7 +19,8 @@ const MetaMemento = new Memento(dummyConfig);
 @Component({
   selector: 'ngrev-state-navigation',
   templateUrl: './state-navigation.component.html',
-  styleUrls: ['./state-navigation.component.scss']
+  styleUrls: ['./state-navigation.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StateNavigationComponent {
   @Input() states: Memento[] = [];
@@ -37,16 +38,12 @@ export class StateNavigationComponent {
 
   visibleTooltip = -1;
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
-
   showTooltip(idx: number) {
     this.visibleTooltip = idx;
-    this._changeDetectorRef.detectChanges();
   }
 
   hideTooltip(idx: number) {
     this.visibleTooltip = -1;
-    this._changeDetectorRef.detectChanges();
   }
 
   changeState(state: Memento) {

src/app/model/state-manager.ts

@@ -28,11 +28,9 @@ export class StateManager {
   loadProject(tsconfig: string, showLibs: boolean, showModules: boolean) {
     return this.project
       .load(tsconfig, showLibs, showModules)
-      // TODO: StateProxy is gonna be created everytime the same as IPCBus. Maybe it would be great to use only one,
-      //  provided by angular service, just reset the state after loading new project.
       .then(() => (this.state = new StateProxy()))
       .then((proxy: StateProxy) => proxy.getData())
-      .then(data => this.history.push(new Memento(data)));
+      .then((data: VisualizationConfig<any>) => (this.history = [...this.history, new Memento(data)]));
   }
 
   toggleLibs() {
@@ -91,7 +89,8 @@ export class StateManager {
       if (last.dirty) {
         last.dirty = false;
         this.state!.reload().then(state => {
-          this.history[this.history.length - 1] = new Memento(state);
+          this.history.pop();
+          this.history = [...this.history, new Memento(state)];
           refreshOnReady && refreshOnReady();
           return state;
         });
@@ -112,7 +111,7 @@ export class StateManager {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     return new Promise(async (resolve, reject) => {
       try {
-        while (true && this.history.length) {
+        while (this.history.length) {
           const last = this.history[this.history.length - 1];
           if (last === memento) {
             break;
@@ -128,10 +127,13 @@ export class StateManager {
   }
 
   private pushState(data: VisualizationConfig<any>) {
-    this.history.push(new Memento(data));
+    this.history = [...this.history, new Memento(data)];
   }
 
   private popState() {
-    return this.state!.prevState().then(() => this.history.pop());
+    return this.state!.prevState().then(() => {
+      this.history.pop();
+      this.history = [...this.history];
+    });
   }
 }

src/electron/menu/application_menu_template.ts

@@ -26,7 +26,7 @@ export const applicationMenuTemplate = (
     submenu: [
       {
         label: "Themes",
-        submenu: Object.keys(getConfig().themes || []).map((label) => {
+        submenu: Object.keys(getConfig().themes || []).map((label: string) => {
           return {
             label,
             type: "radio",