RED-6412 - INC15516657: Performance issues

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html

@@ -28,6 +28,7 @@
                 [overlappingElements]="['USER_MENU']"
                 [primaryFiltersSlug]="'primaryFilters'"
                 [secondaryFiltersSlug]="'secondaryFilters'"
+                [fileId]="file.id"
             ></iqser-popup-filter>
         </div>
     </div>

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AnnotationProcessingService } from '../../services/annotation-processing.service';
 import { MatDialogState } from '@angular/material/dialog';
@@ -31,6 +31,7 @@ import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-ma
 import { AnnotationsListingService } from '../../services/annotations-listing.service';
 import { REDDocumentViewer } from '../../../pdf-viewer/services/document-viewer.service';
 import { SuggestionsService } from '../../services/suggestions.service';
+import { getLocalStorageDataByFileId } from '@utils/local-storage';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -40,7 +41,7 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
     templateUrl: './file-workload.component.html',
     styleUrls: ['./file-workload.component.scss'],
 })
-export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy {
+export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, OnDestroy {
     readonly iconButtonTypes = IconButtonTypes;
     readonly circleButtonTypes = CircleButtonTypes;
 
@@ -456,4 +457,18 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy
             FileWorkloadComponent._scrollToFirstElement(elements);
         }
     }
+
+    ngOnInit(): void {
+        setTimeout(() => {
+            const showExcludePages = getLocalStorageDataByFileId(this.file.fileId, 'show-exclude-pages') ?? false;
+            if (showExcludePages) {
+                this.excludedPagesService.show();
+            }
+
+            const showDocumentInfo = getLocalStorageDataByFileId(this.file.fileId, 'show-document-info') ?? false;
+            if (showDocumentInfo) {
+                this.documentInfoService.show();
+            }
+        });
+    }
 }

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

@@ -17,6 +17,7 @@ import {
     CircleButtonTypes,
     ConfirmationDialogInput,
     ConfirmOptions,
+    copyLocalStorageFiltersValues,
     CustomError,
     Debounce,
     ErrorService,
@@ -37,7 +38,7 @@ import { AnnotationDrawService } from '../pdf-viewer/services/annotation-draw.se
 import { AnnotationProcessingService } from './services/annotation-processing.service';
 import { Dictionary, File, ViewModes } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
-import { combineLatest, firstValueFrom, from, Observable, of, pairwise } from 'rxjs';
+import { combineLatest, first, firstValueFrom, from, Observable, of, pairwise } from 'rxjs';
 import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
 import { byId, byPage, download, handleFilterDelta, hasChanges } from '../../utils';
 import { FilesService } from '@services/files/files.service';
@@ -299,6 +300,8 @@ export class FilePreviewScreenComponent
         }
 
         this.pdfProxyService.configureElements();
+
+        this.#restoreOldFilters();
     }
 
     ngAfterViewInit() {
@@ -788,4 +791,18 @@ export class FilePreviewScreenComponent
     private _isJapaneseString(text: string) {
         return text.match(/[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/);
     }
+
+    #restoreOldFilters() {
+        combineLatest([
+            this._filterService.getGroup$('primaryFilters').pipe(first(filterGroup => filterGroup !== undefined)),
+            this._filterService.getGroup$('secondaryFilters').pipe(first(secondaryFilters => secondaryFilters !== undefined)),
+        ]).subscribe(([primaryFilters, secondaryFilters]) => {
+            const localStorageFiltersString = localStorage.getItem('workload-filters') ?? '{}';
+            const localStorageFilters = JSON.parse(localStorageFiltersString)[this.fileId];
+            if (localStorageFilters) {
+                copyLocalStorageFiltersValues(primaryFilters.filters, localStorageFilters.primaryFilters);
+                copyLocalStorageFiltersValues(secondaryFilters.filters, localStorageFilters.secondaryFilters);
+            }
+        });
+    }
 }

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -62,7 +62,6 @@ const routes: Routes = [
         path: '',
         component: FilePreviewScreenComponent,
         pathMatch: 'full',
-        data: { reuse: true },
         canDeactivate: [PendingChangesGuard, DocumentUnloadedGuard],
     },
 ];

apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, merge, Observable } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, merge, Observable } from 'rxjs';
 import { shareLast } from '@iqser/common-ui';
 import { map, startWith, tap, withLatestFrom } from 'rxjs/operators';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
@@ -49,6 +49,10 @@ export class DocumentInfoService {
         );
     }
 
+    shown() {
+        return firstValueFrom(this.shown$);
+    }
+
     show() {
         this._show$.next(true);
     }

apps/red-ui/src/app/modules/file-preview/services/excluded-pages.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
 import { shareDistinctLast } from '@iqser/common-ui';
 import { map } from 'rxjs/operators';
 
@@ -14,6 +14,10 @@ export class ExcludedPagesService {
         this.hidden$ = this.shown$.pipe(map(value => !value));
     }
 
+    shown() {
+        return firstValueFrom(this.shown$);
+    }
+
     show() {
         this._show$.next(true);
     }

apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts

@@ -33,6 +33,7 @@ import { ViewerHeaderService } from '../../../pdf-viewer/services/viewer-header.
 import { ROTATION_ACTION_BUTTONS } from '../../../pdf-viewer/utils/constants';
 import { ROLES } from '@users/roles';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
+import { setLocalStorageDataByFileId } from '@utils/local-storage';
 
 @Component({
     selector: 'redaction-file-actions [file] [type] [dossier]',
@@ -166,7 +167,7 @@ export class FileActionsComponent implements OnChanges {
             {
                 id: 'toggle-document-info-btn-' + fileId,
                 type: ActionTypes.circleBtn,
-                action: () => this._documentInfoService.toggle(),
+                action: () => this.#toggleDocumentInfo(),
                 tooltip: _('file-preview.document-info'),
                 ariaExpanded: this._documentInfoService?.shown$,
                 icon: 'red:status-info',
@@ -175,7 +176,7 @@ export class FileActionsComponent implements OnChanges {
             {
                 id: 'toggle-exclude-pages-btn-' + fileId,
                 type: ActionTypes.circleBtn,
-                action: () => this._excludedPagesService.toggle(),
+                action: () => this.#toggleExcludePages(),
                 tooltip: _('file-preview.exclude-pages'),
                 ariaExpanded: this._excludedPagesService?.shown$,
                 showDot: !!this.file.excludedPages?.length,
@@ -481,4 +482,22 @@ export class FileActionsComponent implements OnChanges {
         await this._filesService.setToNew(this.file);
         this._loadingService.stop();
     }
+
+    async #toggleExcludePages() {
+        this._excludedPagesService.toggle();
+        const shown = await this._excludedPagesService.shown();
+        setLocalStorageDataByFileId(this.file.id, 'show-exclude-pages', shown);
+        if (shown) {
+            setLocalStorageDataByFileId(this.file.id, 'show-document-info', false);
+        }
+    }
+
+    async #toggleDocumentInfo() {
+        this._documentInfoService.toggle();
+        const shown = await this._documentInfoService.shown();
+        setLocalStorageDataByFileId(this.file.id, 'show-document-info', shown);
+        if (shown) {
+            setLocalStorageDataByFileId(this.file.id, 'show-exclude-pages', false);
+        }
+    }
 }

apps/red-ui/src/app/utils/local-storage.ts

@@ -0,0 +1,12 @@
+export function setLocalStorageDataByFileId(fileId: string, key: string, value: string | number | boolean): void {
+    let data = localStorage.getItem(key) ?? '{}';
+    data = JSON.parse(data);
+    data[fileId] = value;
+    localStorage.setItem(key, JSON.stringify(data));
+}
+
+export function getLocalStorageDataByFileId(fileId: string, key: string): string | number | boolean {
+    let data = localStorage.getItem(key) ?? '{}';
+    data = JSON.parse(data);
+    return data[fileId];
+}

libs/common-ui

@@ -1 +1 @@
-Subproject commit cb5647bc8dd8675b119bb0be47ceee612e05e370
+Subproject commit 406f7b1fdd025b4e87273c2867ea6fdbc16bab3b