IMPROV: Transformed status footer to onPush component to improve perf…

…ormance
davidibl · Mar 1, 2020 · 774d857 · 774d857
1 parent 383213f
commit 774d857
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/src/app/components/footerBar/footerFlyin.html b/src/app/components/footerBar/footerFlyin.html
@@ -1,25 +1,25 @@
-<div [class.active]="flyin" class="flyin-panel flex flex-column" [@flyin]="flyin">
+<div [class.active]="(flyin$ | async)" class="flyin-panel flex flex-column" [@flyin]="(flyin$ | async)">
     <ul class="footer-menu">
         <li
-            [class.active]="flyin && (mode === ERROR_MODE)"
+            [class.active]="(errorsSelected$ | async)"
             (click)="toggleView(ERROR_MODE)">
             <small>Error ({{errorCount$ | async}})</small></li>
         <li
-            [class.active]="flyin && (mode === WARNING_MODE)"
+            [class.active]="(warningsSelected$ | async)"
             (click)="toggleView(WARNING_MODE)">
             <small>Warning ({{warningCount$ | async}})</small></li>
         <li class="footer-status">
             <small>Status: {{currentStatus$ | async}}</small>
         </li>
     </ul>
-    <div *ngIf="flyin && (mode === ERROR_MODE)" class="footer-body full-height">
+    <div *ngIf="(errorsMode$ | async)" class="footer-body full-height">
         <xn-data-table [data]="errors$ | async" [condensed]="true" [templateRef]="columnDefinition">
             <th>Nachricht</th>
             <th>Tabelle</th>
             <th>Regel</th>
         </xn-data-table>
     </div>
-    <div *ngIf="flyin && (mode === WARNING_MODE)" class="footer-body full-height">
+    <div *ngIf="(warningsMode$ | async)" class="footer-body full-height">
         <xn-data-table [data]="warnings$ | async" [condensed]="true" [templateRef]="columnDefinition">
             <th>Nachricht</th>
             <th>Tabelle</th>

diff --git a/src/app/components/footerBar/footerFlyin.ts b/src/app/components/footerBar/footerFlyin.ts
@@ -1,17 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { DmnValidationService } from '../../services/dmnValidationService';
-import { map, tap } from 'rxjs/operators';
+import { map, tap, take } from 'rxjs/operators';
 import { WorkingStateService } from '../../services/workingStateService';
 import { IDmnValidationResult } from '../../model/dmnValidationResult';
 import { EventService } from '../../services/eventService';
 import { BaseEvent } from '../../model/event/event';
 import { EventType } from '../../model/event/eventType';
+import { BehaviorSubject, combineLatest } from 'rxjs';
 
 @Component({
     selector: 'xn-footer-flyin',
     templateUrl: 'footerFlyin.html',
     styleUrls: ['footerFlyin.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [
         trigger('flyin', [
             state('true', style({ transform: 'translateY(0px)' })),
@@ -26,8 +28,20 @@ export class FooterFlyinComponent {
     public ERROR_MODE = 'error';
     public WARNING_MODE = 'warning';
 
-    public flyin = false;
-    public mode = null;
+    public flyin$ = new BehaviorSubject<boolean>(false);
+    public mode$ = new BehaviorSubject<string>(null);
+
+    public warningsSelected$ = combineLatest(this.flyin$, this.mode$).pipe(
+        map(([flyin, mode]) => flyin === true && mode === this.WARNING_MODE)
+    );
+
+    public errorsSelected$ = combineLatest(this.flyin$, this.mode$).pipe(
+        map(([flyin, mode]) => flyin === true && mode === this.ERROR_MODE)
+    );
+
+    public errorsMode$ = this.mode$.pipe(map(mode => mode === this.ERROR_MODE));
+
+    public warningsMode$ = this.mode$.pipe(map(mode => mode === this.WARNING_MODE));
 
     public currentStatus$ = this._workingStateService.getWorkingState();
 
@@ -53,13 +67,20 @@ export class FooterFlyinComponent {
         private _validationService: DmnValidationService,
         private _workingStateService: WorkingStateService,
         private _eventService: EventService,
+        private _changeDetector: ChangeDetectorRef,
     ) {}
 
     public toggleView(mode: string) {
-        if (!this.flyin || this.mode === mode) {
-            this.flyin = !this.flyin;
-        }
-        this.mode = (!!mode) ? mode : this.ERROR_MODE;
+        combineLatest(this.flyin$, this.mode$)
+            .pipe(take(1))
+            .subscribe(([flyin, currentMode]) => {
+                if (!flyin || currentMode === mode) {
+                    this.flyin$.next(!flyin);
+                } else if (currentMode !== mode) {
+                    this.clearCurrentSelection();
+                }
+                this.mode$.next((!!mode) ? mode : this.ERROR_MODE);
+            });
     }
 
     public openHint(item: IDmnValidationResult) {
@@ -72,10 +93,12 @@ export class FooterFlyinComponent {
         }
         this.selectedHint = item;
         this._eventService.publishEvent(new BaseEvent(EventType.JUMP_TO_HINT, item));
+        this._changeDetector.markForCheck();
     }
 
     private clearCurrentSelection() {
         this._eventService.publishEvent(new BaseEvent(EventType.CLEAR_HINT));
         this.selectedHint = null;
+        this._changeDetector.markForCheck();
     }
 }
diff --git a/src/app/services/dmnValidationService.ts b/src/app/services/dmnValidationService.ts
@@ -42,6 +42,7 @@ export class DmnValidationService {
     }
 
     public validate() {
+        this._lastValidationResult.next({} as IDmnValidationResponse);
         this._dmnXmlService
             .getXmlModels('editor')
             .pipe(