From 5a020c6d9bd50bedf87dd018a3229e333170c577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 18 Jan 2022 20:53:17 +0200 Subject: [PATCH 1/6] State service --- .../file-workload.component.html | 1 - .../file-workload/file-workload.component.ts | 9 ++--- .../page-indicator.component.ts | 37 ++++++++++-------- .../pdf-viewer/pdf-viewer.component.ts | 39 +++++++++++-------- .../view-switch/view-switch.component.ts | 3 +- .../file-preview-screen.component.html | 4 +- .../file-preview-screen.component.ts | 39 +++++++++++-------- .../services/file-preview-state.service.ts | 21 ++++++++++ .../modules/dossier/utils/pdf-viewer.utils.ts | 4 +- 9 files changed, 95 insertions(+), 62 deletions(-) create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/file-preview-state.service.ts diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html index 720716f51..71c41366d 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html @@ -96,7 +96,6 @@ [file]="file" [number]="pageNumber" [showDottedIcon]="hasOnlyManualRedactionsAndIsExcluded(pageNumber)" - [viewedPages]="viewedPages" > diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts index e6afc8d32..584a25e84 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts @@ -28,7 +28,7 @@ import { PermissionsService } from '@services/permissions.service'; import { WebViewerInstance } from '@pdftron/webviewer'; import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { map, tap } from 'rxjs/operators'; -import { File, IViewedPage } from '@red/domain'; +import { File } from '@red/domain'; import { ExcludedPagesService } from '../../services/excluded-pages.service'; import { MultiSelectService } from '../../services/multi-select.service'; import { DocumentInfoService } from '../../services/document-info.service'; @@ -52,7 +52,6 @@ export class FileWorkloadComponent { @Input() activeViewerPage: number; @Input() shouldDeselectAnnotationsOnPageChange: boolean; @Input() dialogRef: MatDialogRef; - @Input() viewedPages: IViewedPage[]; @Input() file!: File; @Input() annotationActionsTemplate: TemplateRef; @Input() viewer: WebViewerInstance; @@ -225,7 +224,7 @@ export class FileWorkloadComponent { scrollAnnotationsToPage(page: number, mode: 'always' | 'if-needed' = 'if-needed'): void { if (this._annotationsElement) { - const elements = this._annotationsElement.nativeElement.querySelectorAll(`div[anotation-page-header="${page}"]`); + const elements: HTMLElement[] = this._annotationsElement.nativeElement.querySelectorAll(`div[anotation-page-header="${page}"]`); FileWorkloadComponent._scrollToFirstElement(elements, mode); } } @@ -235,7 +234,7 @@ export class FileWorkloadComponent { if (!this.selectedAnnotations || this.selectedAnnotations.length === 0 || !this._annotationsElement) { return; } - const elements = this._annotationsElement.nativeElement.querySelectorAll( + const elements: HTMLElement[] = this._annotationsElement.nativeElement.querySelectorAll( `div[annotation-id="${this._firstSelectedAnnotation?.id}"].active`, ); FileWorkloadComponent._scrollToFirstElement(elements); @@ -412,7 +411,7 @@ export class FileWorkloadComponent { private _scrollQuickNavigationToPage(page: number) { if (this._quickNavigationElement) { - const elements = this._quickNavigationElement.nativeElement.querySelectorAll(`#quick-nav-page-${page}`); + const elements: HTMLElement[] = this._quickNavigationElement.nativeElement.querySelectorAll(`#quick-nav-page-${page}`); FileWorkloadComponent._scrollToFirstElement(elements); } } diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-indicator/page-indicator.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-indicator/page-indicator.component.ts index 922dd5516..785a6153f 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-indicator/page-indicator.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-indicator/page-indicator.component.ts @@ -6,6 +6,7 @@ import { ViewedPagesService } from '@services/entity-services/viewed-pages.servi import { File, IViewedPage } from '@red/domain'; import { AutoUnsubscribe } from '@iqser/common-ui'; import { FilesMapService } from '@services/entity-services/files-map.service'; +import { FilePreviewStateService } from '../../services/file-preview-state.service'; @Component({ selector: 'redaction-page-indicator', @@ -18,7 +19,6 @@ export class PageIndicatorComponent extends AutoUnsubscribe implements OnDestroy @Input() active = false; @Input() showDottedIcon = false; @Input() number: number; - @Input() viewedPages: IViewedPage[]; @Input() activeSelection = false; @Output() readonly pageSelected = new EventEmitter(); @@ -33,25 +33,17 @@ export class PageIndicatorComponent extends AutoUnsubscribe implements OnDestroy private readonly _configService: ConfigService, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _permissionService: PermissionsService, + private readonly _stateService: FilePreviewStateService, ) { super(); } get activePage() { - return this.viewedPages?.find(p => p.page === this.number); + return this._viewedPages.find(p => p.page === this.number); } - private _setReadState() { - const readBefore = this.read; - const activePage = this.activePage; - if (!activePage) { - this.read = false; - } else { - // console.log('setting read to',activePage.showAsUnseen, !activePage.showAsUnseen); - this.read = !activePage.showAsUnseen; - } - // console.log(this.number, readBefore, activePage, this.read); - this._changeDetectorRef.detectChanges(); + private get _viewedPages(): IViewedPage[] { + return this._stateService.fileData?.viewedPages || []; } ngOnChanges() { @@ -87,20 +79,33 @@ export class PageIndicatorComponent extends AutoUnsubscribe implements OnDestroy } } + private _setReadState() { + const readBefore = this.read; + const activePage = this.activePage; + if (!activePage) { + this.read = false; + } else { + // console.log('setting read to',activePage.showAsUnseen, !activePage.showAsUnseen); + this.read = !activePage.showAsUnseen; + } + // console.log(this.number, readBefore, activePage, this.read); + this._changeDetectorRef.detectChanges(); + } + private async _markPageRead() { await this._viewedPagesService.addPage({ page: this.number }, this.file.dossierId, this.file.fileId).toPromise(); if (this.activePage) { this.activePage.showAsUnseen = false; } else { - this.viewedPages?.push({ page: this.number, fileId: this.file.fileId }); + this._viewedPages.push({ page: this.number, fileId: this.file.fileId }); } this._setReadState(); } private async _markPageUnread() { await this._viewedPagesService.removePage(this.file.dossierId, this.file.fileId, this.number).toPromise(); - this.viewedPages?.splice( - this.viewedPages?.findIndex(p => p.page === this.number), + this._viewedPages.splice( + this._viewedPages.findIndex(p => p.page === this.number), 1, ); this._setReadState(); diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts index a60280479..b8639aee8 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts @@ -36,11 +36,12 @@ import { ActivatedRoute } from '@angular/router'; import { toPosition } from '../../../../utils/pdf-calculation.utils'; import { ViewModeService } from '../../services/view-mode.service'; import { MultiSelectService } from '../../services/multi-select.service'; +import { FilePreviewStateService } from '../../services/file-preview-state.service'; import Tools = Core.Tools; import TextTool = Tools.TextTool; import Annotation = Core.Annotations.Annotation; -const ALLOWED_KEYBOARD_SHORTCUTS = ['+', '-', 'p', 'r', 'Escape'] as const; +const ALLOWED_KEYBOARD_SHORTCUTS: readonly string[] = ['+', '-', 'p', 'r', 'Escape'] as const; const dataElements = { ADD_REDACTION: 'add-redaction', ADD_DICTIONARY: 'add-dictionary', @@ -62,7 +63,6 @@ const dataElements = { styleUrls: ['./pdf-viewer.component.scss'], }) export class PdfViewerComponent implements OnInit, OnChanges { - @Input() fileData: Blob; @Input() file: File; @Input() dossier: Dossier; @Input() canPerformActions = false; @@ -95,6 +95,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { private readonly _annotationActionsService: AnnotationActionsService, private readonly _configService: ConfigService, private readonly _loadingService: LoadingService, + private readonly _stateService: FilePreviewStateService, readonly viewModeService: ViewModeService, readonly multiSelectService: MultiSelectService, ) {} @@ -113,6 +114,10 @@ export class PdfViewerComponent implements OnInit, OnChanges { ); } + private get _fileData(): Blob { + return this._stateService.fileData.fileData; + } + async ngOnInit() { this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this); await this.loadViewer(); @@ -132,7 +137,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { } } - uploadFile(files: any) { + uploadFile(files: FileList) { const fileToCompare = files[0]; this.compareFileInput.nativeElement.value = null; @@ -148,7 +153,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); const compareDocument = await pdfNet.PDFDoc.createFromBuffer(fileReader.result as ArrayBuffer); - const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this.fileData.arrayBuffer()); + const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._fileData.arrayBuffer()); const loadCompareDocument = async () => { this._loadingService.start(); @@ -201,7 +206,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.viewModeService.compareMode = false; const pdfNet = this.instance.Core.PDFNet; await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); - const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this.fileData.arrayBuffer()); + const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._fileData.arrayBuffer()); this.instance.UI.loadDocument(currentDocument, { filename: this.file ? this.file.filename : 'document.pdf', }); @@ -219,7 +224,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { css: this._convertPath('/assets/pdftron/stylesheet.css'), backendType: 'ems', }, - this.viewer.nativeElement, + this.viewer.nativeElement as HTMLElement, ); this.documentViewer = this.instance.Core.documentViewer; @@ -231,7 +236,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.utils.disableHotkeys(); this._configureTextPopup(); - this.annotationManager.addEventListener('annotationSelected', (annotations, action) => { + this.annotationManager.addEventListener('annotationSelected', (annotations: Annotation[], action) => { this.annotationSelected.emit(this.annotationManager.getSelectedAnnotations().map(ann => ann.Id)); if (action === 'deselected') { this._toggleRectangleAnnotationAction(true); @@ -241,7 +246,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { } }); - this.annotationManager.addEventListener('annotationChanged', annotations => { + this.annotationManager.addEventListener('annotationChanged', (annotations: Annotation[]) => { // when a rectangle is drawn, // it returns one annotation with tool name 'AnnotationCreateRectangle; // this will auto select rectangle after drawing @@ -251,7 +256,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { } }); - this.documentViewer.addEventListener('pageNumberUpdated', pageNumber => { + this.documentViewer.addEventListener('pageNumberUpdated', (pageNumber: number) => { if (this.shouldDeselectAnnotationsOnPageChange) { this.utils.deselectAllAnnotations(); } @@ -261,9 +266,9 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.documentViewer.addEventListener('documentLoaded', this._setReadyAndInitialState); - this.documentViewer.addEventListener('keyUp', $event => { + this.documentViewer.addEventListener('keyUp', ($event: KeyboardEvent) => { // arrows and full-screen - if ($event.target?.tagName?.toLowerCase() !== 'input') { + if (($event.target as HTMLElement)?.tagName?.toLowerCase() !== 'input') { if ($event.key.startsWith('Arrow') || $event.key === 'f') { this._ngZone.run(() => { this.keyUp.emit($event); @@ -273,7 +278,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { } } - if (ALLOWED_KEYBOARD_SHORTCUTS.indexOf($event.key) < 0) { + if (!ALLOWED_KEYBOARD_SHORTCUTS.includes($event.key)) { $event.preventDefault(); $event.stopPropagation(); } @@ -568,7 +573,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { } private _addManualRedactionOfType(type: ManualRedactionEntryType) { - const selectedQuads = this.documentViewer.getSelectedTextQuads(); + const selectedQuads: Readonly> = this.documentViewer.getSelectedTextQuads(); const text = this.documentViewer.getSelectedText(); const manualRedaction = this._getManualRedaction(selectedQuads, text, true); this.manualAnnotationRequested.emit(new ManualRedactionEntryWrapper(selectedQuads, manualRedaction, type)); @@ -624,7 +629,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { for (const quad of quads[key]) { const page = parseInt(key, 10); const pageHeight = this.documentViewer.getPageHeight(page); - entry.positions.push(toPosition(page, pageHeight, convertQuads ? this.utils.translateQuads(page, quad) : quad)); + entry.positions.push(toPosition(page, pageHeight, convertQuads ? this.utils.translateQuad(page, quad) : quad)); } } @@ -634,11 +639,11 @@ export class PdfViewerComponent implements OnInit, OnChanges { } private _loadDocument() { - if (!this.fileData) { + if (!this._fileData) { return; } - this.instance.UI.loadDocument(this.fileData, { + this.instance.UI.loadDocument(this._fileData, { filename: this.file ? this.file.filename : 'document.pdf', }); } @@ -647,7 +652,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { this._ngZone.run(() => { this.utils.ready = true; this.viewerReady.emit(this.instance); - const routePageNumber = this._activatedRoute.snapshot.queryParams.page; + const routePageNumber: number = this._activatedRoute.snapshot.queryParams.page; this.pageChanged.emit(routePageNumber || 1); this._setInitialDisplayMode(); this._updateTooltipsVisibility(); diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts index 283aa7f62..5b45956f6 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts @@ -4,7 +4,7 @@ import { ViewModeService } from '../../services/view-mode.service'; import { FileDataModel } from '@models/file/file-data.model'; @Component({ - selector: 'redaction-view-switch [file] [fileData]', + selector: 'redaction-view-switch [file]', templateUrl: './view-switch.component.html', styleUrls: ['./view-switch.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, @@ -12,7 +12,6 @@ import { FileDataModel } from '@models/file/file-data.model'; export class ViewSwitchComponent implements OnChanges { @Output() readonly switchView = new EventEmitter(); @Input() file: File; - @Input() fileData: FileDataModel; canSwitchToDeltaView = false; canSwitchToRedactedView = false; diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html index ccc7b9f21..a7271bf42 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html @@ -3,7 +3,7 @@
- +
@@ -76,7 +76,6 @@ [canPerformActions]="canPerformAnnotationActions$ | async" [class.hidden]="!ready" [dossier]="dossier" - [fileData]="fileData?.fileData" [file]="file" [shouldDeselectAnnotationsOnPageChange]="shouldDeselectAnnotationsOnPageChange" > @@ -110,7 +109,6 @@ [dialogRef]="dialogRef" [file]="file" [selectedAnnotations]="selectedAnnotations" - [viewedPages]="fileData?.viewedPages" [viewer]="activeViewer" >
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index ed84d72ab..f93f6009b 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts @@ -20,7 +20,6 @@ import { MatDialogRef, MatDialogState } from '@angular/material/dialog'; import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { ManualAnnotationResponse } from '@models/file/manual-annotation-response'; -import { FileDataModel } from '@models/file/file-data.model'; import { AnnotationDrawService } from './services/annotation-draw.service'; import { AnnotationProcessingService } from '../../services/annotation-processing.service'; import { Dossier, File, ViewMode } from '@red/domain'; @@ -49,6 +48,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { CommentingService } from './services/commenting.service'; import { SkippedService } from './services/skipped.service'; import { AnnotationActionsService } from './services/annotation-actions.service'; +import { FilePreviewStateService } from './services/file-preview-state.service'; +import { FileDataModel } from '../../../../models/file/file-data.model'; import Annotation = Core.Annotations.Annotation; import PDFNet = Core.PDFNet; @@ -67,6 +68,7 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown']; SkippedService, AnnotationDrawService, AnnotationActionsService, + FilePreviewStateService, ], }) export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach { @@ -75,7 +77,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni dialogRef: MatDialogRef; fullScreen = false; shouldDeselectAnnotationsOnPageChange = true; - fileData: FileDataModel; selectedAnnotations: AnnotationWrapper[] = []; displayPdfViewer = false; activeViewerPage: number = null; @@ -98,6 +99,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni constructor( readonly permissionsService: PermissionsService, readonly userPreferenceService: UserPreferenceService, + private readonly _stateService: FilePreviewStateService, private readonly _watermarkService: WatermarkService, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _activatedRoute: ActivatedRoute, @@ -142,11 +144,11 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } get visibleAnnotations(): AnnotationWrapper[] { - return this.fileData ? this.fileData.getVisibleAnnotations(this.viewModeService.viewMode) : []; + return this._fileData ? this._fileData.getVisibleAnnotations(this.viewModeService.viewMode) : []; } get allAnnotations(): AnnotationWrapper[] { - return this.fileData ? this.fileData.allAnnotations : []; + return this._fileData ? this._fileData.allAnnotations : []; } get activeViewer(): WebViewerInstance { @@ -160,8 +162,12 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni ); } + private get _fileData(): FileDataModel { + return this._stateService.fileData; + } + async updateViewMode(): Promise { - const ocrAnnotationIds = this.fileData.allAnnotations.filter(a => a.isOCR).map(a => a.id); + const ocrAnnotationIds = this._fileData.allAnnotations.filter(a => a.isOCR).map(a => a.id); const annotations = this._getAnnotations(a => a.getCustomData('redact-manager')); const redactions = annotations.filter(a => a.getCustomData('redaction')); @@ -256,7 +262,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this._filterService.addFilterGroup({ slug: 'secondaryFilters', filterTemplate: this._filterTemplate, - filters: processFilters(secondaryFilters, AnnotationProcessingService.secondaryAnnotationFilters(this.fileData?.viewedPages)), + filters: processFilters(secondaryFilters, AnnotationProcessingService.secondaryAnnotationFilters(this._fileData?.viewedPages)), }); console.log(`[REDACTION] Process time: ${new Date().getTime() - processStartTime} ms`); console.log(`[REDACTION] Filter rebuild time: ${new Date().getTime() - startTime}`); @@ -466,13 +472,14 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } private async _reloadFile(file: File): Promise { - const previousFile = this.fileData?.file; + const previousFile = this._fileData?.file; await this._loadFileData(file); - const fileHasBeenExcludedOrIncluded = previousFile?.excluded !== this.fileData?.file?.excluded; - const excludedPagesHaveChanged = JSON.stringify(previousFile?.excludedPages) !== JSON.stringify(this.fileData?.file?.excludedPages); + const fileHasBeenExcludedOrIncluded = previousFile?.excluded !== this._fileData?.file?.excluded; + const excludedPagesHaveChanged = + JSON.stringify(previousFile?.excludedPages) !== JSON.stringify(this._fileData?.file?.excludedPages); if (fileHasBeenExcludedOrIncluded || excludedPagesHaveChanged) { - await this._deleteAnnotations(); + this._deleteAnnotations(); await this._cleanupAndRedrawAnnotations(); } @@ -546,7 +553,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this.addActiveScreenSubscription = this._filesMapService.fileReanalysed$ .pipe(filter(file => file.fileId === this.fileId)) .subscribe(async file => { - if (file.lastProcessed !== this.fileData?.file.lastProcessed) { + if (file.lastProcessed !== this._fileData?.file.lastProcessed) { const previousAnnotations = this.visibleAnnotations; await this._loadFileData(file); await this._reloadAnnotations(previousAnnotations); @@ -586,13 +593,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni return this._router.navigate([this._dossiersService.find(this.dossierId).routerLink]); } - const fileData = await this._fileDownloadService.loadDataFor(file, this.fileData).toPromise(); + const fileData = await this._fileDownloadService.loadDataFor(file, this._fileData).toPromise(); if (file.isPending) { return; } - this.fileData = fileData; + this._stateService.fileData = fileData; } @Debounce(0) @@ -607,16 +614,16 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } private async _reloadAnnotationsForPage(page: number) { - this.fileData.file = await this._filesService.reload(this.dossierId, this.fileId).toPromise(); + this._fileData.file = await this._filesService.reload(this.dossierId, this.fileId).toPromise(); // if this action triggered a re-processing, // we don't want to redraw for this page since they will get redrawn as soon as processing ends; - if (this.fileData.file.isProcessing) { + if (this._fileData.file.isProcessing) { return; } const currentPageAnnotations = this.visibleAnnotations.filter(a => a.pageNumber === page); - this.fileData.redactionLog = await this._fileDownloadService.loadRedactionLogFor(this.dossierId, this.fileId).toPromise(); + this._fileData.redactionLog = await this._fileDownloadService.loadRedactionLogFor(this.dossierId, this.fileId).toPromise(); this._deleteAnnotations(currentPageAnnotations); await this._cleanupAndRedrawAnnotations(currentPageAnnotations, annotation => annotation.pageNumber === page); diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/file-preview-state.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/file-preview-state.service.ts new file mode 100644 index 000000000..f3175e96c --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/file-preview-state.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { FileDataModel } from '@models/file/file-data.model'; + +@Injectable() +export class FilePreviewStateService { + readonly fileData$: Observable; + private readonly _fileData$ = new BehaviorSubject(undefined); + + constructor() { + this.fileData$ = this._fileData$.asObservable(); + } + + get fileData(): FileDataModel { + return this._fileData$.value; + } + + set fileData(fileDataModel: FileDataModel) { + this._fileData$.next(fileDataModel); + } +} diff --git a/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts b/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts index 90fc310e4..c903ad0c2 100644 --- a/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts +++ b/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts @@ -111,9 +111,9 @@ export class PdfViewerUtils { } } - translateQuads(page: number, quads: any) { + translateQuad(page: number, quad: Core.Math.Quad) { const rotation = this._documentViewer.getCompleteRotation(page); - return translateQuads(page, rotation, quads); + return translateQuads(page, rotation, quad); } deselectAllAnnotations() { From 92af6cdea089262ce7bc56ea93860c8f6f0156cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 18 Jan 2022 23:20:41 +0200 Subject: [PATCH 2/6] Fixed canSwitchToDeltaView --- .../src/app/models/file/file-data.model.ts | 16 ++++++++-------- .../view-switch/view-switch.component.html | 18 +++++++++--------- .../view-switch/view-switch.component.ts | 18 ++++++++++-------- libs/common-ui | 2 +- 4 files changed, 28 insertions(+), 26 deletions(-) diff --git a/apps/red-ui/src/app/models/file/file-data.model.ts b/apps/red-ui/src/app/models/file/file-data.model.ts index 10ce0ec5c..6e2204c29 100644 --- a/apps/red-ui/src/app/models/file/file-data.model.ts +++ b/apps/red-ui/src/app/models/file/file-data.model.ts @@ -2,12 +2,12 @@ import { Dictionary, File, IRedactionLog, IRedactionLogEntry, IViewedPage, ViewM import { AnnotationWrapper } from './annotation.wrapper'; import { RedactionLogEntryWrapper } from './redaction-log-entry.wrapper'; import * as moment from 'moment'; +import { BehaviorSubject } from 'rxjs'; export class FileDataModel { static readonly DELTA_VIEW_TIME = 10 * 60 * 1000; // 10 minutes; - - hasChangeLog: boolean; allAnnotations: AnnotationWrapper[]; + readonly hasChangeLog$ = new BehaviorSubject(false); constructor( public file: File, @@ -20,15 +20,15 @@ export class FileDataModel { this._buildAllAnnotations(); } + get redactionLog() { + return this._redactionLog; + } + set redactionLog(redactionLog: IRedactionLog) { this._redactionLog = redactionLog; this._buildAllAnnotations(); } - get redactionLog() { - return this._redactionLog; - } - getVisibleAnnotations(viewMode: ViewMode) { return this.allAnnotations.filter(annotation => { if (viewMode === 'STANDARD') { @@ -122,7 +122,7 @@ export class FileDataModel { private _isChangeLogEntry(redactionLogEntry: IRedactionLogEntry, wrapper: RedactionLogEntryWrapper) { if (this.file.numberOfAnalyses > 1) { - var viableChanges = redactionLogEntry.changes.filter(c => c.analysisNumber > 1); + const viableChanges = redactionLogEntry.changes.filter(c => c.analysisNumber > 1); viableChanges.sort((a, b) => moment(a.dateTime).valueOf() - moment(b.dateTime).valueOf()); const lastChange = viableChanges.length >= 1 ? viableChanges[viableChanges.length - 1] : undefined; @@ -141,7 +141,7 @@ export class FileDataModel { wrapper.changeLogType = relevantChanges[relevantChanges.length - 1].type; wrapper.isChangeLogEntry = true; viewedPage.showAsUnseen = moment(viewedPage.viewedTime).valueOf() < moment(lastChange.dateTime).valueOf(); - this.hasChangeLog = true; + this.hasChangeLog$.next(true); } else { // no relevant changes - hide removed anyway wrapper.isChangeLogEntry = false; diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html index 4daf4a4ee..c99ce4ba5 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html @@ -1,5 +1,5 @@ -
{{ 'file-preview.standard' | translate }} -
+ -
{{ 'file-preview.delta' | translate }} -
+ -
{{ 'file-preview.redacted' | translate }} -
+ diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts index 5b45956f6..b069922d9 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts @@ -1,7 +1,9 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { File, ViewMode } from '@red/domain'; import { ViewModeService } from '../../services/view-mode.service'; -import { FileDataModel } from '@models/file/file-data.model'; +import { FilePreviewStateService } from '../../services/file-preview-state.service'; +import { Observable } from 'rxjs'; +import { filter, switchMap } from 'rxjs/operators'; @Component({ selector: 'redaction-view-switch [file]', @@ -13,17 +15,17 @@ export class ViewSwitchComponent implements OnChanges { @Output() readonly switchView = new EventEmitter(); @Input() file: File; - canSwitchToDeltaView = false; + readonly canSwitchToDeltaView$: Observable; canSwitchToRedactedView = false; - constructor(readonly viewModeService: ViewModeService) {} + constructor(readonly viewModeService: ViewModeService, private readonly _stateService: FilePreviewStateService) { + this.canSwitchToDeltaView$ = this._stateService.fileData$.pipe( + filter(fileData => !!fileData), + switchMap(fileData => fileData?.hasChangeLog$), + ); + } ngOnChanges(changes: SimpleChanges) { - if (changes.fileData) { - const fileData = changes.fileData.currentValue as FileDataModel; - this.canSwitchToDeltaView = fileData?.hasChangeLog; - } - if (changes.file) { const file = changes?.file.currentValue as File; this.canSwitchToRedactedView = !file.analysisRequired && !file.excluded; diff --git a/libs/common-ui b/libs/common-ui index d11b54bb1..85ec2446a 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit d11b54bb118e639274c011c41594703c71018292 +Subproject commit 85ec2446a35436786573dfdad8fc5c7bb16d5ac0 From eda7c07247dde5e6b36562a32c47d4350721cca7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 18 Jan 2022 23:57:09 +0200 Subject: [PATCH 3/6] Fixed reload document on file data change --- .../src/app/models/file/file-data.model.ts | 4 +- .../pdf-viewer/pdf-viewer.component.ts | 41 +++++++++---------- .../services/pdf-viewer-data.service.ts | 10 ++--- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/apps/red-ui/src/app/models/file/file-data.model.ts b/apps/red-ui/src/app/models/file/file-data.model.ts index 6e2204c29..7a073a94e 100644 --- a/apps/red-ui/src/app/models/file/file-data.model.ts +++ b/apps/red-ui/src/app/models/file/file-data.model.ts @@ -8,15 +8,17 @@ export class FileDataModel { static readonly DELTA_VIEW_TIME = 10 * 60 * 1000; // 10 minutes; allAnnotations: AnnotationWrapper[]; readonly hasChangeLog$ = new BehaviorSubject(false); + readonly blob$ = new BehaviorSubject(undefined); constructor( public file: File, - public fileData: Blob, + private readonly _blob: Blob, private _redactionLog: IRedactionLog, public viewedPages?: IViewedPage[], private _dictionaryData?: { [p: string]: Dictionary }, private _areDevFeaturesEnabled?: boolean, ) { + this.blob$.next(_blob); this._buildAllAnnotations(); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts index b8639aee8..2688a3d5b 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts @@ -27,7 +27,7 @@ import { AnnotationActionsService } from '../../services/annotation-actions.serv import { UserPreferenceService } from '@services/user-preference.service'; import { BASE_HREF } from '../../../../../../tokens'; import { ConfigService } from '@services/config.service'; -import { ConfirmationDialogInput, LoadingService } from '@iqser/common-ui'; +import { AutoUnsubscribe, ConfirmationDialogInput, LoadingService } from '@iqser/common-ui'; import { DossiersDialogService } from '../../../../services/dossiers-dialog.service'; import { loadCompareDocumentWrapper } from '../../../../utils/compare-mode.utils'; import { PdfViewerUtils } from '../../../../utils/pdf-viewer.utils'; @@ -37,6 +37,7 @@ import { toPosition } from '../../../../utils/pdf-calculation.utils'; import { ViewModeService } from '../../services/view-mode.service'; import { MultiSelectService } from '../../services/multi-select.service'; import { FilePreviewStateService } from '../../services/file-preview-state.service'; +import { filter, switchMap, tap } from 'rxjs/operators'; import Tools = Core.Tools; import TextTool = Tools.TextTool; import Annotation = Core.Annotations.Annotation; @@ -62,7 +63,7 @@ const dataElements = { templateUrl: './pdf-viewer.component.html', styleUrls: ['./pdf-viewer.component.scss'], }) -export class PdfViewerComponent implements OnInit, OnChanges { +export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnChanges { @Input() file: File; @Input() dossier: Dossier; @Input() canPerformActions = false; @@ -98,7 +99,9 @@ export class PdfViewerComponent implements OnInit, OnChanges { private readonly _stateService: FilePreviewStateService, readonly viewModeService: ViewModeService, readonly multiSelectService: MultiSelectService, - ) {} + ) { + super(); + } private get _toggleTooltipsBtnTitle(): string { return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), { @@ -114,13 +117,17 @@ export class PdfViewerComponent implements OnInit, OnChanges { ); } - private get _fileData(): Blob { - return this._stateService.fileData.fileData; - } - async ngOnInit() { this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this); - await this.loadViewer(); + await this._loadViewer(); + + this.addActiveScreenSubscription = this._stateService.fileData$ + .pipe( + filter(fileData => !!fileData), + switchMap(fileData => fileData.blob$), + tap(() => this._loadDocument()), + ) + .subscribe(); } ngOnChanges(changes: SimpleChanges): void { @@ -128,10 +135,6 @@ export class PdfViewerComponent implements OnInit, OnChanges { return; } - if (changes.fileData) { - this._loadDocument(); - } - if (changes.canPerformActions) { this._handleCustomActions(); } @@ -153,7 +156,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); const compareDocument = await pdfNet.PDFDoc.createFromBuffer(fileReader.result as ArrayBuffer); - const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._fileData.arrayBuffer()); + const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._stateService.fileData.blob$.value.arrayBuffer()); const loadCompareDocument = async () => { this._loadingService.start(); @@ -206,7 +209,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.viewModeService.compareMode = false; const pdfNet = this.instance.Core.PDFNet; await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); - const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._fileData.arrayBuffer()); + const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._stateService.fileData.blob$.value.arrayBuffer()); this.instance.UI.loadDocument(currentDocument, { filename: this.file ? this.file.filename : 'document.pdf', }); @@ -215,7 +218,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.utils.navigateToPage(1); } - async loadViewer() { + private async _loadViewer() { this.instance = await WebViewer( { licenseKey: environment.licenseKey ? atob(environment.licenseKey) : null, @@ -306,8 +309,6 @@ export class PdfViewerComponent implements OnInit, OnChanges { } } }); - - this._loadDocument(); } private _setInitialDisplayMode() { @@ -639,11 +640,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { } private _loadDocument() { - if (!this._fileData) { - return; - } - - this.instance.UI.loadDocument(this._fileData, { + this.instance.UI.loadDocument(this._stateService.fileData.blob$.value, { filename: this.file ? this.file.filename : 'document.pdf', }); } diff --git a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts index 6625f138f..591962afb 100644 --- a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts @@ -3,7 +3,7 @@ import { forkJoin, Observable, of } from 'rxjs'; import { catchError, map, tap } from 'rxjs/operators'; import { FileDataModel } from '@models/file/file-data.model'; import { PermissionsService } from '@services/permissions.service'; -import { File } from '@red/domain'; +import { File, IRedactionLog, IViewedPage } from '@red/domain'; import { FileManagementService } from '@services/entity-services/file-management.service'; import { RedactionLogService } from './redaction-log.service'; import { ViewedPagesService } from '@services/entity-services/viewed-pages.service'; @@ -31,15 +31,15 @@ export class PdfViewerDataService { } loadDataFor(file: File, fileData?: FileDataModel): Observable { - const file$ = fileData?.file.cacheIdentifier === file.cacheIdentifier ? of(fileData.fileData) : this.downloadOriginalFile(file); - const reactionLog$ = this.loadRedactionLogFor(file.dossierId, file.fileId); + const blob$ = fileData?.file.cacheIdentifier === file.cacheIdentifier ? fileData.blob$ : this.downloadOriginalFile(file); + const redactionLog$ = this.loadRedactionLogFor(file.dossierId, file.fileId); const viewedPages$ = this.getViewedPagesFor(file); const dossier = this._dossiersService.find(file.dossierId); - return forkJoin([file$, reactionLog$, viewedPages$]).pipe( + return forkJoin([blob$, redactionLog$, viewedPages$]).pipe( map( - data => + (data: [blob: Blob, redactionLog: IRedactionLog, viewedPages: IViewedPage[]]) => new FileDataModel( file, ...data, From 96cf1f803b55cea975304a887fb0251e0d7235a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 20 Jan 2022 17:25:02 +0200 Subject: [PATCH 4/6] WIP --- .../app/modules/dossier/dossiers.module.ts | 3 +-- .../file-preview-screen.component.ts | 22 ++++++++++++------- .../services/pdf-viewer-data.service.ts | 8 +++++-- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts index 140fe64c1..9fd58b8cb 100644 --- a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts +++ b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts @@ -10,7 +10,6 @@ import { SharedModule } from '@shared/shared.module'; import { DossiersRoutingModule } from './dossiers-routing.module'; import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module'; import { DossiersDialogService } from './services/dossiers-dialog.service'; -import { PdfViewerDataService } from './services/pdf-viewer-data.service'; import { ManualAnnotationService } from './services/manual-annotation.service'; import { AnnotationProcessingService } from './services/annotation-processing.service'; import { EditDossierDialogComponent } from './dialogs/edit-dossier-dialog/edit-dossier-dialog.component'; @@ -54,7 +53,7 @@ const components = [ ...dialogs, ]; -const services = [DossiersDialogService, ManualAnnotationService, PdfViewerDataService, AnnotationProcessingService]; +const services = [DossiersDialogService, ManualAnnotationService, AnnotationProcessingService]; @NgModule({ declarations: [...components], diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index 1d6d6d4d0..3eb1b4393 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts @@ -24,7 +24,7 @@ import { AnnotationDrawService } from './services/annotation-draw.service'; import { AnnotationProcessingService } from '../../services/annotation-processing.service'; import { Dossier, File, ViewMode } from '@red/domain'; import { PermissionsService } from '@services/permissions.service'; -import { combineLatest, Observable, timer } from 'rxjs'; +import { combineLatest, from, Observable, timer } from 'rxjs'; import { UserPreferenceService } from '@services/user-preference.service'; import { PdfViewerDataService } from '../../services/pdf-viewer-data.service'; import { download } from '@utils/file-download-utils'; @@ -69,6 +69,7 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown']; AnnotationDrawService, AnnotationActionsService, FilePreviewStateService, + PdfViewerDataService, ], }) export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach { @@ -107,7 +108,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni private readonly _router: Router, private readonly _annotationProcessingService: AnnotationProcessingService, private readonly _annotationDrawService: AnnotationDrawService, - private readonly _fileDownloadService: PdfViewerDataService, + private readonly _pdfViewerDataService: PdfViewerDataService, private readonly _filesService: FilesService, private readonly _ngZone: NgZone, private readonly _fileManagementService: FileManagementService, @@ -129,9 +130,9 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this.dossier$ = _dossiersService.getEntityChanged$(this.dossierId); this.fileId = _activatedRoute.snapshot.paramMap.get('fileId'); this.file$ = _filesMapService.watch$(this.dossierId, this.fileId).pipe( - tap(async file => { - await this._reloadFile(file); - }), + // Filter reanalysed$ events to prevent multiple reloads + filter(file => !this._fileData || file.lastProcessed === this._fileData.file.lastProcessed), + switchMap(file => from(this._reloadFile(file)).pipe(map(() => file))), shareLast(), ); this.canPerformAnnotationActions$ = this._canPerformAnnotationActions$; @@ -486,7 +487,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni const excludedPagesHaveChanged = JSON.stringify(previousFile.excludedPages) !== JSON.stringify(this._fileData.file.excludedPages); if (fileHasBeenExcludedOrIncluded || excludedPagesHaveChanged) { - await this._deleteAnnotations(); + this._deleteAnnotations(); await this._cleanupAndRedrawAnnotations(); } } @@ -556,7 +557,9 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this.addActiveScreenSubscription = this._filesMapService.fileReanalysed$ .pipe(filter(file => file.fileId === this.fileId)) .subscribe(async file => { + console.log(file); if (file.lastProcessed !== this._fileData?.file.lastProcessed) { + console.log(1); const previousAnnotations = this.visibleAnnotations; await this._loadFileData(file); await this._reloadAnnotations(previousAnnotations); @@ -596,7 +599,10 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni return this._router.navigate([this._dossiersService.find(this.dossierId).routerLink]); } - const fileData = await this._fileDownloadService.loadDataFor(file, this._fileData).toPromise(); + console.log(2); + const fileData = await this._pdfViewerDataService.loadDataFor(file).toPromise(); + + console.log(3); if (file.isPending) { return; @@ -626,7 +632,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } const currentPageAnnotations = this.visibleAnnotations.filter(a => a.pageNumber === page); - this._fileData.redactionLog = await this._fileDownloadService.loadRedactionLogFor(this.dossierId, this.fileId).toPromise(); + this._fileData.redactionLog = await this._pdfViewerDataService.loadRedactionLogFor(this.dossierId, this.fileId).toPromise(); this._deleteAnnotations(currentPageAnnotations); await this._cleanupAndRedrawAnnotations(currentPageAnnotations, annotation => annotation.pageNumber === page); diff --git a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts index 591962afb..203125831 100644 --- a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts @@ -10,6 +10,7 @@ import { ViewedPagesService } from '@services/entity-services/viewed-pages.servi import { AppStateService } from '../../../state/app-state.service'; import { DossiersService } from '../../../services/entity-services/dossiers.service'; import { UserPreferenceService } from '../../../services/user-preference.service'; +import { FilePreviewStateService } from '../screens/file-preview-screen/services/file-preview-state.service'; @Injectable() export class PdfViewerDataService { @@ -21,6 +22,7 @@ export class PdfViewerDataService { private readonly _viewedPagesService: ViewedPagesService, private readonly _appStateService: AppStateService, private readonly _userPreferenceService: UserPreferenceService, + private readonly _stateService: FilePreviewStateService, ) {} loadRedactionLogFor(dossierId: string, fileId: string) { @@ -30,14 +32,16 @@ export class PdfViewerDataService { ); } - loadDataFor(file: File, fileData?: FileDataModel): Observable { - const blob$ = fileData?.file.cacheIdentifier === file.cacheIdentifier ? fileData.blob$ : this.downloadOriginalFile(file); + loadDataFor(file: File): Observable { + const fileData = this._stateService.fileData; + const blob$ = fileData?.file.cacheIdentifier === file.cacheIdentifier ? of(fileData.blob$.value) : this.downloadOriginalFile(file); const redactionLog$ = this.loadRedactionLogFor(file.dossierId, file.fileId); const viewedPages$ = this.getViewedPagesFor(file); const dossier = this._dossiersService.find(file.dossierId); return forkJoin([blob$, redactionLog$, viewedPages$]).pipe( + tap(data => console.log('data', data)), map( (data: [blob: Blob, redactionLog: IRedactionLog, viewedPages: IViewedPage[]]) => new FileDataModel( From df20f7ba854cc1002e6a66bffe64aaa84a8ca9c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 21 Jan 2022 23:04:18 +0200 Subject: [PATCH 5/6] Fixed errors on document reload --- .../file-preview-screen/file-preview-screen.component.ts | 7 ------- .../modules/dossier/services/pdf-viewer-data.service.ts | 1 - 2 files changed, 8 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index 3eb1b4393..02e199319 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts @@ -491,8 +491,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni await this._cleanupAndRedrawAnnotations(); } } - - await this._stampPDF(); } private async _stampPDF() { @@ -557,9 +555,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this.addActiveScreenSubscription = this._filesMapService.fileReanalysed$ .pipe(filter(file => file.fileId === this.fileId)) .subscribe(async file => { - console.log(file); if (file.lastProcessed !== this._fileData?.file.lastProcessed) { - console.log(1); const previousAnnotations = this.visibleAnnotations; await this._loadFileData(file); await this._reloadAnnotations(previousAnnotations); @@ -599,11 +595,8 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni return this._router.navigate([this._dossiersService.find(this.dossierId).routerLink]); } - console.log(2); const fileData = await this._pdfViewerDataService.loadDataFor(file).toPromise(); - console.log(3); - if (file.isPending) { return; } diff --git a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts index 203125831..bdf4a81d6 100644 --- a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts @@ -41,7 +41,6 @@ export class PdfViewerDataService { const dossier = this._dossiersService.find(file.dossierId); return forkJoin([blob$, redactionLog$, viewedPages$]).pipe( - tap(data => console.log('data', data)), map( (data: [blob: Blob, redactionLog: IRedactionLog, viewedPages: IViewedPage[]]) => new FileDataModel( From 527d4933a07ba99565e5a6c4e7d6223f2aa3b6e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 22 Jan 2022 13:31:09 +0200 Subject: [PATCH 6/6] Fixes --- .../src/app/models/file/file-data.model.ts | 18 +++- .../pdf-viewer/pdf-viewer.component.ts | 4 +- .../file-preview-screen.component.html | 2 +- .../file-preview-screen.component.ts | 82 +++++++++---------- .../entity-services/files-map.service.ts | 10 --- 5 files changed, 56 insertions(+), 60 deletions(-) diff --git a/apps/red-ui/src/app/models/file/file-data.model.ts b/apps/red-ui/src/app/models/file/file-data.model.ts index 7a073a94e..16727d14b 100644 --- a/apps/red-ui/src/app/models/file/file-data.model.ts +++ b/apps/red-ui/src/app/models/file/file-data.model.ts @@ -9,20 +9,30 @@ export class FileDataModel { allAnnotations: AnnotationWrapper[]; readonly hasChangeLog$ = new BehaviorSubject(false); readonly blob$ = new BehaviorSubject(undefined); + readonly file$ = new BehaviorSubject(undefined); constructor( - public file: File, + private readonly _file: File, private readonly _blob: Blob, private _redactionLog: IRedactionLog, public viewedPages?: IViewedPage[], private _dictionaryData?: { [p: string]: Dictionary }, private _areDevFeaturesEnabled?: boolean, ) { + this.file$.next(_file); this.blob$.next(_blob); this._buildAllAnnotations(); } - get redactionLog() { + get file(): File { + return this.file$.value; + } + + set file(file: File) { + this.file$.next(file); + } + + get redactionLog(): IRedactionLog { return this._redactionLog; } @@ -49,7 +59,7 @@ export class FileDataModel { const previousAnnotations = this.allAnnotations || []; this.allAnnotations = entries .map(entry => AnnotationWrapper.fromData(entry)) - .filter(ann => ann.manual || !this.file.excludedPages.includes(ann.pageNumber)); + .filter(ann => ann.manual || !this._file.excludedPages.includes(ann.pageNumber)); if (!this._areDevFeaturesEnabled) { this.allAnnotations = this.allAnnotations.filter(annotation => !annotation.isFalsePositive); @@ -123,7 +133,7 @@ export class FileDataModel { } private _isChangeLogEntry(redactionLogEntry: IRedactionLogEntry, wrapper: RedactionLogEntryWrapper) { - if (this.file.numberOfAnalyses > 1) { + if (this._file.numberOfAnalyses > 1) { const viableChanges = redactionLogEntry.changes.filter(c => c.analysisNumber > 1); viableChanges.sort((a, b) => moment(a.dateTime).valueOf() - moment(b.dateTime).valueOf()); diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts index 2688a3d5b..f0c0968a4 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts @@ -27,7 +27,7 @@ import { AnnotationActionsService } from '../../services/annotation-actions.serv import { UserPreferenceService } from '@services/user-preference.service'; import { BASE_HREF } from '../../../../../../tokens'; import { ConfigService } from '@services/config.service'; -import { AutoUnsubscribe, ConfirmationDialogInput, LoadingService } from '@iqser/common-ui'; +import { AutoUnsubscribe, ConfirmationDialogInput, LoadingService, shareDistinctLast } from '@iqser/common-ui'; import { DossiersDialogService } from '../../../../services/dossiers-dialog.service'; import { loadCompareDocumentWrapper } from '../../../../utils/compare-mode.utils'; import { PdfViewerUtils } from '../../../../utils/pdf-viewer.utils'; @@ -125,6 +125,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha .pipe( filter(fileData => !!fileData), switchMap(fileData => fileData.blob$), + // Skip document reload if file content hasn't changed + shareDistinctLast(), tap(() => this._loadDocument()), ) .subscribe(); diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html index a7271bf42..b90dd8d93 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html @@ -1,5 +1,5 @@ - +
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index 02e199319..93db957e2 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts @@ -14,7 +14,6 @@ import { OnDetach, processFilters, shareDistinctLast, - shareLast, } from '@iqser/common-ui'; import { MatDialogRef, MatDialogState } from '@angular/material/dialog'; import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper'; @@ -24,7 +23,7 @@ import { AnnotationDrawService } from './services/annotation-draw.service'; import { AnnotationProcessingService } from '../../services/annotation-processing.service'; import { Dossier, File, ViewMode } from '@red/domain'; import { PermissionsService } from '@services/permissions.service'; -import { combineLatest, from, Observable, timer } from 'rxjs'; +import { combineLatest, Observable, timer } from 'rxjs'; import { UserPreferenceService } from '@services/user-preference.service'; import { PdfViewerDataService } from '../../services/pdf-viewer-data.service'; import { download } from '@utils/file-download-utils'; @@ -36,7 +35,7 @@ import { handleFilterDelta } from '@utils/filter-utils'; import { FilesService } from '@services/entity-services/files.service'; import { DossiersService } from '@services/entity-services/dossiers.service'; import { FileManagementService } from '@services/entity-services/file-management.service'; -import { filter, map, switchMap, tap } from 'rxjs/operators'; +import { map, switchMap, tap } from 'rxjs/operators'; import { FilesMapService } from '@services/entity-services/files-map.service'; import { WatermarkService } from '@shared/services/watermark.service'; import { ExcludedPagesService } from './services/excluded-pages.service'; @@ -85,7 +84,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni readonly dossierId: string; readonly canPerformAnnotationActions$: Observable; readonly dossier$: Observable; - readonly file$: Observable; readonly fileId: string; ready = false; private _instance: WebViewerInstance; @@ -129,12 +127,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this.dossierId = _activatedRoute.snapshot.paramMap.get('dossierId'); this.dossier$ = _dossiersService.getEntityChanged$(this.dossierId); this.fileId = _activatedRoute.snapshot.paramMap.get('fileId'); - this.file$ = _filesMapService.watch$(this.dossierId, this.fileId).pipe( - // Filter reanalysed$ events to prevent multiple reloads - filter(file => !this._fileData || file.lastProcessed === this._fileData.file.lastProcessed), - switchMap(file => from(this._reloadFile(file)).pipe(map(() => file))), - shareLast(), - ); this.canPerformAnnotationActions$ = this._canPerformAnnotationActions$; document.documentElement.addEventListener('fullscreenchange', () => { @@ -145,30 +137,34 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } get visibleAnnotations(): AnnotationWrapper[] { - return this._fileData ? this._fileData.getVisibleAnnotations(this.viewModeService.viewMode) : []; + return this.fileData ? this.fileData.getVisibleAnnotations(this.viewModeService.viewMode) : []; } get allAnnotations(): AnnotationWrapper[] { - return this._fileData ? this._fileData.allAnnotations : []; + return this.fileData ? this.fileData.allAnnotations : []; } get activeViewer(): WebViewerInstance { return this._instance; } + get fileData(): FileDataModel { + return this._stateService.fileData; + } + private get _canPerformAnnotationActions$() { - return combineLatest([this.file$, this.viewModeService.viewMode$, this.viewModeService.compareMode$]).pipe( + return combineLatest([ + this._stateService.fileData$.pipe(switchMap(fileData => fileData.file$)), + this.viewModeService.viewMode$, + this.viewModeService.compareMode$, + ]).pipe( map(([file, viewMode]) => this.permissionsService.canPerformAnnotationActions(file) && viewMode === 'STANDARD'), shareDistinctLast(), ); } - private get _fileData(): FileDataModel { - return this._stateService.fileData; - } - async updateViewMode(): Promise { - const ocrAnnotationIds = this._fileData.allAnnotations.filter(a => a.isOCR).map(a => a.id); + const ocrAnnotationIds = this.fileData.allAnnotations.filter(a => a.isOCR).map(a => a.id); const annotations = this._getAnnotations(a => a.getCustomData('redact-manager')); const redactions = annotations.filter(a => a.getCustomData('redaction')); @@ -263,15 +259,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this._filterService.addFilterGroup({ slug: 'secondaryFilters', filterTemplate: this._filterTemplate, - filters: processFilters(secondaryFilters, AnnotationProcessingService.secondaryAnnotationFilters(this._fileData?.viewedPages)), + filters: processFilters(secondaryFilters, AnnotationProcessingService.secondaryAnnotationFilters(this.fileData?.viewedPages)), }); console.log(`[REDACTION] Process time: ${new Date().getTime() - processStartTime} ms`); console.log(`[REDACTION] Filter rebuild time: ${new Date().getTime() - startTime}`); - console.log(); } handleAnnotationSelected(annotationIds: string[]) { - // TODO: use includes() here this.selectedAnnotations = annotationIds .map(id => this.visibleAnnotations.find(annotationWrapper => annotationWrapper.id === id)) .filter(ann => ann !== undefined); @@ -473,23 +467,15 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } private async _reloadFile(file: File): Promise { - const previousFile = this._fileData?.file; + const previousFile = this.fileData?.file; await this._loadFileData(file); // file already loaded at least once if (previousFile) { // If it has been OCRd, we need to wait for it to load into the viewer - if (previousFile.lastOCRTime !== this._fileData?.file?.lastOCRTime) { + if (previousFile.lastOCRTime !== this.fileData?.file?.lastOCRTime) { return; } - // excluded pages or document exclusion has changed - const fileHasBeenExcludedOrIncluded = previousFile.excluded !== this._fileData.file.excluded; - const excludedPagesHaveChanged = - JSON.stringify(previousFile.excludedPages) !== JSON.stringify(this._fileData.file.excludedPages); - if (fileHasBeenExcludedOrIncluded || excludedPagesHaveChanged) { - this._deleteAnnotations(); - await this._cleanupAndRedrawAnnotations(); - } } } @@ -548,20 +534,28 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } } + private async _fileUpdated(file: File): Promise { + if (!this.fileData || file.lastProcessed === this.fileData.file.lastProcessed) { + await this._reloadFile(file); + } else { + // File reanalysed + const previousAnnotations = this.visibleAnnotations; + await this._loadFileData(file); + await this._reloadAnnotations(previousAnnotations); + } + + return file; + } + private _subscribeToFileUpdates(): void { + this.addActiveScreenSubscription = this._filesMapService + .watch$(this.dossierId, this.fileId) + .pipe(switchMap(file => this._fileUpdated(file))) + .subscribe(); + this.addActiveScreenSubscription = timer(0, 5000) .pipe(switchMap(() => this._filesService.reload(this.dossierId, this.fileId))) .subscribe(); - this.addActiveScreenSubscription = this._filesMapService.fileReanalysed$ - .pipe(filter(file => file.fileId === this.fileId)) - .subscribe(async file => { - if (file.lastProcessed !== this._fileData?.file.lastProcessed) { - const previousAnnotations = this.visibleAnnotations; - await this._loadFileData(file); - await this._reloadAnnotations(previousAnnotations); - } - this._loadingService.stop(); - }); this.addActiveScreenSubscription = this._dossiersService .getEntityDeleted$(this.dossierId) @@ -616,16 +610,16 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } private async _reloadAnnotationsForPage(page: number) { - this._fileData.file = await this._filesService.reload(this.dossierId, this.fileId).toPromise(); + this.fileData.file = await this._filesService.reload(this.dossierId, this.fileId).toPromise(); // if this action triggered a re-processing, // we don't want to redraw for this page since they will get redrawn as soon as processing ends; - if (this._fileData.file.isProcessing) { + if (this.fileData.file.isProcessing) { return; } const currentPageAnnotations = this.visibleAnnotations.filter(a => a.pageNumber === page); - this._fileData.redactionLog = await this._pdfViewerDataService.loadRedactionLogFor(this.dossierId, this.fileId).toPromise(); + this.fileData.redactionLog = await this._pdfViewerDataService.loadRedactionLogFor(this.dossierId, this.fileId).toPromise(); this._deleteAnnotations(currentPageAnnotations); await this._cleanupAndRedrawAnnotations(currentPageAnnotations, annotation => annotation.pageNumber === page); diff --git a/apps/red-ui/src/app/services/entity-services/files-map.service.ts b/apps/red-ui/src/app/services/entity-services/files-map.service.ts index 9d04a9d99..6f3232221 100644 --- a/apps/red-ui/src/app/services/entity-services/files-map.service.ts +++ b/apps/red-ui/src/app/services/entity-services/files-map.service.ts @@ -5,7 +5,6 @@ import { filter, startWith } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class FilesMapService { - readonly fileReanalysed$ = new Subject(); private readonly _entityChanged$ = new Subject(); private readonly _entityDeleted$ = new Subject(); private readonly _map = new Map>(); @@ -38,7 +37,6 @@ export class FilesMapService { return entities.forEach(entity => this._entityChanged$.next(entity)); } - const reanalysedEntities = []; const changedEntities = []; const deletedEntities = this.get(key).filter(oldEntity => !entities.find(newEntity => newEntity.id === oldEntity.id)); @@ -46,10 +44,6 @@ export class FilesMapService { const newEntities = entities.map(newEntity => { const oldEntity = this.get(key, newEntity.id); - if (oldEntity?.lastProcessed !== newEntity.lastProcessed) { - reanalysedEntities.push(newEntity); - } - if (newEntity.isEqual(oldEntity)) { return oldEntity; } @@ -62,10 +56,6 @@ export class FilesMapService { // Emit observables only after entities have been updated - for (const file of reanalysedEntities) { - this.fileReanalysed$.next(file); - } - for (const file of changedEntities) { this._entityChanged$.next(file); }