Progress Indicator for file reanalysis

apps/red-ui/src/app/app.module.ts

@@ -114,6 +114,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { RemoveAnnotationsDialogComponent } from './dialogs/remove-annotations-dialog/remove-annotations-dialog.component';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ComboChartComponent, ComboSeriesVerticalComponent } from './screens/admin/license-information-screen/combo-chart';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
     return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@@ -406,7 +407,8 @@ const matImports = [
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
         ColorPickerModule,
         AceEditorModule,
-        ScrollingModule
+        ScrollingModule,
+        MatProgressBarModule
     ],
     providers: [
         {

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

@@ -280,7 +280,16 @@
     </div>
 </section>
 
-<redaction-full-page-loading-indicator [displayed]="!viewReady" [message]="loadingMessage"></redaction-full-page-loading-indicator>
+<redaction-full-page-loading-indicator [displayed]="!viewReady" [showIndicator]="false">
+    <h1 class="heading-l loading" *ngIf="loadingMessage">{{ loadingMessage | translate }}</h1>
+    <div class="analysis-progress">
+        <mat-progress-bar
+            [mode]="analysisProgress < 100 ? 'determinate' : 'indeterminate'"
+            [value]="analysisProgress"
+            *ngIf="analysisInterval"
+        ></mat-progress-bar>
+    </div>
+</redaction-full-page-loading-indicator>
 
 <ng-template #annotationFilterTemplate let-filter="filter">
     <redaction-type-filter *ngIf="filter.topLevelFilter" [filter]="filter"></redaction-type-filter>

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

@@ -173,3 +173,9 @@ redaction-dictionary-annotation-icon {
     justify-content: center;
     align-items: center;
 }
+
+.analysis-progress {
+    padding: 12px 20px;
+    max-width: 400px;
+    width: 400px;
+}

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

@@ -104,6 +104,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     get displayData() {
         return this.fileData?.fileData;
     }
+
     private projectId: string;
     private _instance: WebViewerInstance;
     private _dialogRef: MatDialogRef<any>;
@@ -114,6 +115,10 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     public reviewerForm: FormGroup;
     public shouldDeselectAnnotationsOnPageChange = true;
 
+    public analysisProgressInSeconds: number = 0;
+    public analysisProgress: number;
+    public analysisInterval: number;
+
     @ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent;
     @ViewChild('annotationsElement') private _annotationsElement: ElementRef;
     @ViewChild('quickNavigation') private _quickNavigationElement: ElementRef;
@@ -201,6 +206,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
                 this._loadFileData(true).subscribe(() => {
                     this.viewReady = true;
                     this.loadingMessage = null;
+                    this._stopAnalysisTimer();
                     this._updateCanPerformActions();
                     this._cleanupAndRedrawManualAnnotations();
                 });
@@ -620,6 +626,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
 
             case 'reanalyse':
                 this.viewReady = false;
+                this._startAnalysisTimer();
                 this.loadingMessage = 'file-preview.reanalyse-file';
                 await this._loadFileData().toPromise();
                 this._updateCanPerformActions();
@@ -630,6 +637,31 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         }
     }
 
+    private _startAnalysisTimer() {
+        this._stopAnalysisTimer();
+
+        if (this.appStateService.activeFile.analysisDuration > 0) {
+            this.analysisProgress = 0;
+            this.analysisProgressInSeconds = 0;
+
+            this.analysisInterval = setInterval(() => {
+                this.analysisProgressInSeconds += 1;
+                this.analysisProgress = (this.analysisProgressInSeconds * 100) / (this.appStateService.activeFile.analysisDuration / 1000);
+            }, 1000);
+        } else {
+            this.analysisInterval = 0;
+            this.analysisProgress = 0;
+            this.analysisProgressInSeconds = 0;
+        }
+    }
+
+    private _stopAnalysisTimer() {
+        if (this.analysisInterval) {
+            clearInterval(this.analysisInterval);
+            this.analysisInterval = 0;
+        }
+    }
+
     public async assignToMe() {
         await this._fileActionService.assignToMe(this.fileData.fileStatus, async () => {
             await this.appStateService.reloadActiveFile();
@@ -681,6 +713,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         this.viewMode = $event.value;
         this.updateViewMode();
     }
+
     downloadOriginalFile() {
         this._fileManagementControllerService
             .downloadOriginalFile(this.projectId, this.fileId, true, this.fileData.fileStatus.lastUploaded, 'response')

apps/red-ui/src/app/screens/file/model/file-status.wrapper.ts

@@ -4,6 +4,10 @@ import { StatusSorter } from '../../../common/sorters/status-sorter';
 export class FileStatusWrapper {
     constructor(public fileStatus: FileStatus, public reviewerName: string) {}
 
+    get analysisDuration() {
+        return this.fileStatus.analysisDuration;
+    }
+
     get lastProcessed() {
         return this.fileStatus.lastProcessed;
     }

apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.html

@@ -1,5 +1,5 @@
 <section class="full-page-load-section" *ngIf="displayed"></section>
 <section class="full-page-load-spinner" *ngIf="displayed">
-    <mat-spinner diameter="40"></mat-spinner>
+    <mat-spinner diameter="40" *ngIf="showIndicator"></mat-spinner>
-    <h1 class="heading-l" *ngIf="message">{{ message | translate }}</h1>
+    <ng-content></ng-content>
 </section>

apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.ts

@@ -7,5 +7,5 @@ import { Component, Input } from '@angular/core';
 })
 export class FullPageLoadingIndicatorComponent {
     @Input() displayed = false;
-    @Input() message: string;
+    @Input() showIndicator: boolean = true;
 }

apps/red-ui/src/assets/i18n/en.json

@@ -287,7 +287,7 @@
         "show-redacted-view": "Show Redacted Preview",
         "cannot-show-redacted-view": "Redactions out of sync. Redacted Preview only available after reanalysis",
         "reanalyse-notification": "This document was not processed with the latest rule/dictionary set. Analyze now to get updated annotations.",
-        "reanalyse-file": "File reanalysis in progress... ",
+        "reanalyse-file": "File reanalysis in progress",
         "view-toggle": "Redacted View",
         "tabs": {
             "quick-navigation": "Quick Navigation",

libs/red-ui-http/src/lib/model/fileStatus.ts

@@ -14,6 +14,10 @@
  * Object containing information on a specific file.
  */
 export interface FileStatus {
+    /**
+     * Time of last analysis
+     */
+    analysisDuration?: number;
     /**
      * Date and time when the file was added to the system.
      */