first version of state monitoring

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts

@@ -82,6 +82,12 @@ export class FilePreviewScreenComponent implements OnInit {
     // PDFTRON cache fix
     localStorage.clear();
     this._reloadFiles();
+    this.appStateService.fileStatusChanged.subscribe((fileStatus) => {
+      if(fileStatus.fileId === this.fileId) {
+        console.log(fileStatus);
+        this._reloadFiles();
+      }
+    })
   }
 
   private _reloadFiles() {
@@ -156,10 +162,6 @@ export class FilePreviewScreenComponent implements OnInit {
   public openManualRedactionDialog($event: ManualRedactionEntry) {
     this.ngZone.run(() => {
       this._dialogService.openManualRedactionDialog($event, () => {
-        setTimeout(() => {
-          console.log('reload files after 5 seconds');
-          this._reloadFiles();
-        }, 5000)
       });
     });
 

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import { Project } from '@redaction/red-ui-http';
-import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
-import { UserService } from '../../user/user.service';
-import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
-import { SortingOption } from '../../utils/types';
-import { groupBy } from '../../utils/functions';
-import { DialogService } from '../../dialogs/dialog.service';
+import {Component, OnInit} from '@angular/core';
+import {Project} from '@redaction/red-ui-http';
+import {AppStateService, ProjectWrapper} from '../../state/app-state.service';
+import {UserService} from '../../user/user.service';
+import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
+import {SortingOption} from '../../utils/types';
+import {groupBy} from '../../utils/functions';
+import {DialogService} from '../../dialogs/dialog.service';
 
 @Component({
   selector: 'redaction-project-listing-screen',
@@ -16,8 +16,8 @@ export class ProjectListingScreenComponent implements OnInit {
   public projectsChartData: DoughnutChartConfig [] = [];
   public documentsChartData: DoughnutChartConfig [] = [];
   public sortingOptions: SortingOption[] = [
-    { label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate' },
-    { label: 'project-listing.sorting.alphabetically.label', order: 'asc', column: 'project.projectName' }
+    {label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate'},
+    {label: 'project-listing.sorting.alphabetically.label', order: 'asc', column: 'project.projectName'}
   ];
   public sortingOption: SortingOption = this.sortingOptions[0];
 
@@ -31,17 +31,20 @@ export class ProjectListingScreenComponent implements OnInit {
   ngOnInit(): void {
     this.appStateService.reset();
     this._calculateData();
+    this.appStateService.fileStatusChanged.subscribe(() => {
+      this._calculateData();
+    })
   }
 
   private _calculateData() {
     this.projectsChartData = [
-      { value: this.activeProjects, color: 'ACTIVE', label: 'active' },
-      { value: this.inactiveProjects, color: 'DELETED', label: 'archived' }
+      {value: this.activeProjects, color: 'ACTIVE', label: 'active'},
+      {value: this.inactiveProjects, color: 'DELETED', label: 'archived'}
     ];
     const groups = groupBy(this.appStateService.aggregatedFiles, 'status');
     this.documentsChartData = [];
     for (const key of Object.keys(groups)) {
-      this.documentsChartData.push({ value: groups[key].length, color: key, label: key });
+      this.documentsChartData.push({value: groups[key].length, color: key, label: key});
     }
   }
 

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts

@@ -12,8 +12,6 @@ import {SortingOption} from '../../utils/types';
 import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
 import {groupBy} from '../../utils/functions';
 import {DialogService} from '../../dialogs/dialog.service';
-import {interval} from "rxjs";
-import {flatMap, tap} from "rxjs/operators";
 
 
 @Component({
@@ -48,6 +46,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     this._activatedRoute.params.subscribe(params => {
       this.appStateService.activateProject(params.projectId);
     });
+
+    this.appStateService.fileStatusChanged.subscribe(() => {
+      this._calculateChartConfig();
+    })
   }
 
   ngOnInit(): void {

apps/red-ui/src/app/state/app-state.service.ts

@@ -1,4 +1,4 @@
-import {Injectable, EventEmitter} from "@angular/core";
+import {EventEmitter, Injectable} from "@angular/core";
 import {
   FileStatus,
   Project,
@@ -41,8 +41,7 @@ export class AppStateService {
 
   private _appState: AppState;
 
-  public fileStatusChanged = new EventEmitter<void>();
-
+  public fileStatusChanged = new EventEmitter<FileStatus>();
 
   constructor(
     private readonly  _router: Router,
@@ -59,11 +58,11 @@ export class AppStateService {
     }
 
     interval(5000).pipe(tap(() => {
-       this.reloadActiveProjectFiles();
+      this.reloadActiveProjectFiles();
     })).subscribe();
 
     interval(30000).pipe(tap(() => {
-       this.loadAllProjects();
+      this.loadAllProjects();
     })).subscribe();
   }
 
@@ -128,20 +127,49 @@ export class AppStateService {
   async loadAllProjects() {
     const projects = await this._projectControllerService.getProjects().toPromise();
     if (projects) {
-      this._appState.projects = projects.map(p => {
-        return new ProjectWrapper(p, []);
+
+      let mappedProjects = projects.map(p => {
+        return new ProjectWrapper(p, this._getExistingFiles(p));
       });
-      for (const project of projects) {
-        await this.getFiles(project.projectId);
+
+      for (const project of mappedProjects) {
+        await this.getFiles(project);
       }
+
+      this._appState.projects = mappedProjects;
       this._computeStats();
     }
   }
 
-  async getFiles(projectId: string) {
-    const files = await this._statusControllerService.getProjectStatus(projectId).toPromise();
-    const project = this.getProjectById(projectId);
+  private _getExistingFiles(project: Project) {
+    const found = this._appState.projects.find(p => p.project.projectId === project.projectId);
+    return found ? found.files : [];
+  }
+
+  async getFiles(project?: ProjectWrapper) {
+    const files = await this._statusControllerService.getProjectStatus(project.project.projectId).toPromise();
+    const oldFiles = [...project.files];
+
+    for (let file of files) {
+      let found = false;
+      for (let oldFile of oldFiles) {
+        if (oldFile.fileId === file.fileId) {
+          // emit when analysis count changed
+          if (oldFile.numberOfAnalyses !== file.numberOfAnalyses) {
+            this.fileStatusChanged.emit(oldFile);
+          }
+          found = true;
+          break;
+        }
+      }
+      // emit for new file
+      if (!found) {
+        this.fileStatusChanged.emit(file);
+      }
+    }
+
     project.files = files;
+
     this._computeStats();
     return files;
   }
@@ -213,8 +241,8 @@ export class AppStateService {
   }
 
   async reloadActiveProjectFiles() {
-    if(this._appState.activeProject?.project) {
-      await this.getFiles(this._appState.activeProject.project.projectId);
+    if (this._appState.activeProject) {
+      await this.getFiles(this._appState.activeProject);
     }
   }
 
@@ -229,4 +257,5 @@ export class AppStateService {
     await this.reloadActiveProjectFiles();
   }
 
+
 }