From ded580b160d026c80ab1cf2d1a53d6592942f657 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 18 May 2023 13:50:22 +0300 Subject: [PATCH] RED-6412 - INC15516657: Performance issues --- .../file-workload.component.html | 1 + .../file-workload/file-workload.component.ts | 19 +++++++++++++-- .../file-preview-screen.component.ts | 19 ++++++++++++++- .../file-preview/file-preview.module.ts | 1 - .../services/document-info.service.ts | 6 ++++- .../services/excluded-pages.service.ts | 6 ++++- .../file-actions/file-actions.component.ts | 23 +++++++++++++++++-- apps/red-ui/src/app/utils/local-storage.ts | 12 ++++++++++ libs/common-ui | 2 +- 9 files changed, 80 insertions(+), 9 deletions(-) create mode 100644 apps/red-ui/src/app/utils/local-storage.ts diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html index 992bf5aa0..91c411f58 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html +++ b/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" > diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts index 6e8fba035..a8127f03a 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts +++ b/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(); + } + }); + } } diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts index b888380e6..6a63f841c 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts +++ b/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); + } + }); + } } diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts index 0495a48c4..6ec62c0bc 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts +++ b/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], }, ]; diff --git a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts b/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts index 25da199ff..70e551d33 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts +++ b/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); } diff --git a/apps/red-ui/src/app/modules/file-preview/services/excluded-pages.service.ts b/apps/red-ui/src/app/modules/file-preview/services/excluded-pages.service.ts index 72089416c..1dbbe7425 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/excluded-pages.service.ts +++ b/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); } diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts index e693b56d4..1d54670e4 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts +++ b/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); + } + } } diff --git a/apps/red-ui/src/app/utils/local-storage.ts b/apps/red-ui/src/app/utils/local-storage.ts new file mode 100644 index 000000000..0273199c8 --- /dev/null +++ b/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]; +} diff --git a/libs/common-ui b/libs/common-ui index cb5647bc8..406f7b1fd 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit cb5647bc8dd8675b119bb0be47ceee612e05e370 +Subproject commit 406f7b1fdd025b4e87273c2867ea6fdbc16bab3b