From b361cbcf15d005972bb24218560e642047390795 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 12 May 2022 16:28:08 +0300
Subject: [PATCH] RED-3991: draw annotations only on current page

---
 .../file-preview-screen.component.ts          | 33 +++++++++++--------
 .../services/file-data.service.ts             |  7 ++--
 libs/common-ui                                |  2 +-
 3 files changed, 23 insertions(+), 19 deletions(-)

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 9307aad26..e0f6b89a2 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
@@ -314,14 +314,14 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
     }
 
-    async viewerPageChanged(page: any) {
+    viewerPageChanged(page: any) {
         if (typeof page !== 'number') {
             return;
         }
 
         this._scrollViews();
         this.multiSelectService.deactivate();
-        await this.#updateQueryParamsPage(page);
+        return this.#updateQueryParamsPage(page);
     }
 
     @Debounce(100)
@@ -378,12 +378,15 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
 
     loadAnnotations() {
         const documentLoaded$ = this.pdf.documentLoaded$.pipe(tap(() => this.viewerReady()));
+        const currentPageAnnotations$ = combineLatest([this.pdf.currentPage$, this._fileDataService.annotations$]).pipe(
+            map(([page, annotations]) => annotations.filter(annotation => annotation.pageNumber === page)),
+        );
         let start;
-        return combineLatest([documentLoaded$, this._fileDataService.annotations$]).pipe(
+        return combineLatest([currentPageAnnotations$, documentLoaded$]).pipe(
             debounceTime(300),
             tap(() => (start = new Date().getTime())),
-            map(([, annotations]) => annotations),
-            startWith({} as Record<string, AnnotationWrapper>),
+            map(([annotations]) => annotations),
+            startWith([] as AnnotationWrapper[]),
             pairwise(),
             tap(annotations => this.deleteAnnotations(...annotations)),
             switchMap(annotations => this.drawChangedAnnotations(...annotations)),
@@ -392,9 +395,10 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         );
     }
 
-    deleteAnnotations(oldAnnotations: Record<string, AnnotationWrapper>, newAnnotations: Record<string, AnnotationWrapper>) {
-        const annotationsToDelete = Object.values(oldAnnotations).filter(oldAnnotation => !newAnnotations[oldAnnotation.id]);
-
+    deleteAnnotations(oldAnnotations: AnnotationWrapper[], newAnnotations: AnnotationWrapper[]) {
+        const annotationsToDelete = oldAnnotations.filter(
+            oldAnnotation => !newAnnotations.some(newAnnotation => newAnnotation.id === oldAnnotation.id),
+        );
         if (annotationsToDelete.length === 0) {
             return;
         }
@@ -403,15 +407,16 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         this.pdf.deleteAnnotations(annotationsToDelete.map(annotation => annotation.id));
     }
 
-    drawChangedAnnotations(oldAnnotations: Record<string, AnnotationWrapper>, newAnnotations: Record<string, AnnotationWrapper>) {
+    drawChangedAnnotations(oldAnnotations: AnnotationWrapper[], newAnnotations: AnnotationWrapper[]) {
         let annotationsToDraw: readonly AnnotationWrapper[];
-        const ann = this.pdf.annotationManager.getAnnotationsList().map(a => oldAnnotations[a.Id]);
+        const annotationsList = this.pdf.annotationManager.getAnnotationsList();
+        const ann = annotationsList.map(a => oldAnnotations.find(oldAnnotation => oldAnnotation.id === a.Id));
         const hasAnnotations = ann.filter(a => !!a).length > 0;
 
         if (hasAnnotations) {
             annotationsToDraw = this.#getAnnotationsToDraw(newAnnotations, oldAnnotations);
         } else {
-            annotationsToDraw = Object.values(newAnnotations);
+            annotationsToDraw = newAnnotations;
         }
 
         if (annotationsToDraw.length === 0) {
@@ -467,9 +472,9 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         this._changeDetectorRef.markForCheck();
     }
 
-    #getAnnotationsToDraw(newAnnotations: Record<string, AnnotationWrapper>, oldAnnotations: Record<string, AnnotationWrapper>) {
-        return Object.values(newAnnotations).filter(newAnnotation => {
-            const oldAnnotation = oldAnnotations[newAnnotation.id];
+    #getAnnotationsToDraw(newAnnotations: AnnotationWrapper[], oldAnnotations: AnnotationWrapper[]) {
+        return newAnnotations.filter(newAnnotation => {
+            const oldAnnotation = oldAnnotations.find(annotation => annotation.id === newAnnotation.id);
             if (!oldAnnotation) {
                 return true;
             }
diff --git a/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts b/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
index 668ec4252..e764ba8df 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
@@ -29,7 +29,7 @@ export class FileDataService extends EntitiesService<AnnotationWrapper> {
     missingTypes = new Set<string>();
 
     readonly hasChangeLog$ = new BehaviorSubject<boolean>(false);
-    readonly annotations$: Observable<Record<string, AnnotationWrapper>>;
+    readonly annotations$: Observable<AnnotationWrapper[]>;
     readonly hiddenAnnotations = new Set<string>();
     readonly #redactionLog$ = new Subject<IRedactionLog>();
     readonly #textHighlights$ = new BehaviorSubject<AnnotationWrapper[]>([]);
@@ -57,7 +57,7 @@ export class FileDataService extends EntitiesService<AnnotationWrapper> {
                     iif(
                         () => viewMode === ViewModes.TEXT_HIGHLIGHTS,
                         this.#textHighlights$,
-                        this.annotations$.pipe(map(annotations => this.#getVisibleAnnotations(Object.values(annotations), viewMode))),
+                        this.annotations$.pipe(map(annotations => this.#getVisibleAnnotations(annotations, viewMode))),
                     ),
                 ),
                 tap(annotations => this.setEntities(annotations)),
@@ -66,7 +66,7 @@ export class FileDataService extends EntitiesService<AnnotationWrapper> {
     }
 
     get annotations() {
-        return firstValueFrom(this.annotations$.pipe(map(dict => Object.values(dict))));
+        return firstValueFrom(this.annotations$);
     }
 
     get #annotations$() {
@@ -77,7 +77,6 @@ export class FileDataService extends EntitiesService<AnnotationWrapper> {
             map(annotations =>
                 this._userPreferenceService.areDevFeaturesEnabled ? annotations : annotations.filter(a => !a.isFalsePositive),
             ),
-            map(annotations => Object.assign({} as Record<string, AnnotationWrapper>, ...annotations.map(a => ({ [a.id]: a })))),
             shareLast(),
         );
     }
diff --git a/libs/common-ui b/libs/common-ui
index 58f7b5d8b..e20ed84ca 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 58f7b5d8b9c88ef5c1f6ff7780e3417511523ee1
+Subproject commit e20ed84ca2c59f7235de4d7d5e22e114b99ac51a