From 73662cecfebf33fe7a6ee9d3ce1a5d7653c435d4 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Fri, 24 Dec 2021 17:03:00 +0200
Subject: [PATCH 01/22] added references button and dialog

---
 .../annotation-actions.component.html         | 10 +++++++++-
 .../annotation-actions.component.ts           |  7 +++++++
 ...nnotation-references-dialog.component.html |  4 ++++
 ...nnotation-references-dialog.component.scss |  0
 .../annotation-references-dialog.component.ts | 20 +++++++++++++++++++
 .../file-preview.module.ts                    |  2 ++
 .../services/dossiers-dialog.service.ts       |  9 +++++++--
 .../src/app/modules/icons/icons.module.ts     |  1 +
 apps/red-ui/src/assets/i18n/en.json           |  3 +++
 .../src/assets/icons/general/reference.svg    | 13 ++++++++++++
 libs/common-ui                                |  2 +-
 11 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
 create mode 100644 apps/red-ui/src/assets/icons/general/reference.svg

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 27d8236ef..567aeb3fd 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,7 +88,15 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.forceAnnotation($event, annotations, file, annotationsChanged, false)"
+            (action)="openAnnotationReferencesDialog()"
+            [tooltipPosition]="tooltipPosition"
+            [tooltip]="'annotation-actions.see-references.label' | translate"
+            [type]="buttonType"
+            icon="red:reference"
+        ></iqser-circle-button>
+
+        <iqser-circle-button
+            (action)="annotationActionsService.forceRedaction($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canForceRedaction"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.force-redaction.label' | translate"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index cbd260867..d9cb9a9ba 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -16,6 +16,7 @@ import {
 } from '../../dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
 import { filter } from 'rxjs/operators';
 import { ManualAnnotationService } from '../../../../services/manual-annotation.service';
+import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 
 export const AnnotationButtonTypes = {
     dark: 'dark',
@@ -46,6 +47,7 @@ export class AnnotationActionsComponent implements OnChanges {
         private readonly _dossiersService: DossiersService,
         private readonly _userService: UserService,
         private readonly _dialog: MatDialog,
+        private readonly _dialogService: DossiersDialogService,
     ) {}
 
     private _annotations: AnnotationWrapper[];
@@ -153,4 +155,9 @@ export class AnnotationActionsComponent implements OnChanges {
             this.annotations,
         );
     }
+
+    openAnnotationReferencesDialog(): void {
+        const data = {};
+        this._dialogService.openDialog('seeAnnotationReferences', null, data, async () => {});
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
new file mode 100644
index 000000000..bd39f1f2d
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -0,0 +1,4 @@
+<section class="dialog">
+    <div class="dialog-header heading-l">X REFERENCES</div>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
+</section>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
new file mode 100644
index 000000000..bbce745d7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { BaseDialogComponent } from '../../../../../../../../../../libs/common-ui/src';
+
+@Component({
+    selector: 'redaction-annotation-references-dialog',
+    templateUrl: './annotation-references-dialog.component.html',
+    styleUrls: ['./annotation-references-dialog.component.scss'],
+})
+export class AnnotationReferencesDialogComponent extends BaseDialogComponent {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor() {
+        super();
+    }
+
+    changed: boolean;
+    disabled: boolean;
+    valid: boolean;
+
+    save(): void {}
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
index bd73b422f..37ec7d0a3 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
@@ -19,6 +19,7 @@ import { TypeAnnotationIconComponent } from './components/type-annotation-icon/t
 import { OverlayModule } from '@angular/cdk/overlay';
 import { ViewSwitchComponent } from './components/view-switch/view-switch.component';
 import { UserManagementComponent } from './components/user-management/user-management.component';
+import { AnnotationReferencesDialogComponent } from './components/annotation-references-dialog/annotation-references-dialog.component';
 import { AcceptRecommendationDialogComponent } from './dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
 
 const routes: Routes = [
@@ -46,6 +47,7 @@ const routes: Routes = [
         ViewSwitchComponent,
         UserManagementComponent,
         AcceptRecommendationDialogComponent,
+        AnnotationReferencesDialogComponent,
     ],
     imports: [
         RouterModule.forChild(routes),
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index ca5aef32e..bdfc578b9 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
@@ -11,6 +11,7 @@ import { ChangeLegalBasisDialogComponent } from '../dialogs/change-legal-basis-d
 import { RecategorizeImageDialogComponent } from '../dialogs/recategorize-image-dialog/recategorize-image-dialog.component';
 import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui';
 import { ResizeAnnotationDialogComponent } from '../dialogs/resize-annotation-dialog/resize-annotation-dialog.component';
+import { AnnotationReferencesDialogComponent } from '../screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component';
 
 type DialogType =
     | 'confirm'
@@ -22,8 +23,9 @@ type DialogType =
     | 'changeLegalBasis'
     | 'removeAnnotations'
     | 'resizeAnnotation'
-    | 'forceAnnotation'
-    | 'manualAnnotation';
+    | 'forceRedaction'
+    | 'manualAnnotation'
+    | 'seeAnnotationReferences';
 
 @Injectable()
 export class DossiersDialogService extends DialogService<DialogType> {
@@ -67,6 +69,9 @@ export class DossiersDialogService extends DialogService<DialogType> {
             component: ManualAnnotationDialogComponent,
             dialogConfig: { autoFocus: true },
         },
+        seeAnnotationReferences: {
+            component: AnnotationReferencesDialogComponent,
+        },
     };
 
     constructor(protected readonly _dialog: MatDialog) {
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts
index 0945fd73e..cf4598843 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -51,6 +51,7 @@ export class IconsModule {
             'reanalyse',
             'reason',
             'redaction-changes',
+            'reference',
             'remove-from-dict',
             'report',
             'resize',
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index ce431aa0e..f64b1d60d 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -157,6 +157,9 @@
     "force-redaction": {
       "label": "Force Redaction"
     },
+    "see-references": {
+      "label": "See References"
+    },
     "hide": "Hide",
     "message": {
       "dictionary": {
diff --git a/apps/red-ui/src/assets/icons/general/reference.svg b/apps/red-ui/src/assets/icons/general/reference.svg
new file mode 100644
index 000000000..ccbd1c2ea
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/reference.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>status</title>
+    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Styleguide-Actions" transform="translate(-979.000000, -588.000000)" fill="#283241" fill-rule="nonzero">
+            <g id="reference" transform="translate(969.000000, 578.000000)">
+                <g id="status" transform="translate(10.000000, 10.000000)">
+                    <polygon id="Path" points="14 6.3 8.68 6.3 12.46 2.52 11.48 1.54 7.7 5.32 7.7 0 6.3 0 6.3 5.32 2.52 1.54 1.54 2.52 5.32 6.3 0 6.3 0 7.7 5.32 7.7 1.54 11.48 2.52 12.46 6.3 8.68 6.3 14 7.7 14 7.7 8.68 11.48 12.46 12.46 11.48 8.68 7.7 14 7.7"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/libs/common-ui b/libs/common-ui
index b65ad23aa..6c79b02a5 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit b65ad23aaa3ed5ece6242c2b3b569322d275e93e
+Subproject commit 6c79b02a50f268a6b663e8e46d88f3c0d333a608

From 7ce34ca329d29ff3d95aa9399f58917027d9ab39 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Wed, 5 Jan 2022 15:24:46 +0200
Subject: [PATCH 02/22] references dialog wip

---
 .../annotation-actions/annotation-actions.component.ts      | 4 ++--
 .../annotation-references-dialog.component.html             | 2 +-
 .../annotation-references-dialog.component.scss             | 4 ++++
 .../annotation-references-dialog.component.ts               | 2 +-
 .../components/file-workload/file-workload.component.html   | 1 +
 .../components/file-workload/file-workload.component.ts     | 1 +
 .../app/modules/dossier/services/dossiers-dialog.service.ts | 6 +-----
 7 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index d9cb9a9ba..9db9c00e3 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -38,6 +38,7 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input() alwaysVisible: boolean;
     @Input() @Required() file!: File;
     @Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
+    @Output() seeReferences = new EventEmitter<boolean>();
     annotationPermissions: AnnotationPermissions;
 
     constructor(
@@ -157,7 +158,6 @@ export class AnnotationActionsComponent implements OnChanges {
     }
 
     openAnnotationReferencesDialog(): void {
-        const data = {};
-        this._dialogService.openDialog('seeAnnotationReferences', null, data, async () => {});
+        this.seeReferences.emit(true);
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index bd39f1f2d..fdda1748f 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,4 +1,4 @@
-<section class="dialog">
+<section class="dialog references-dialog">
     <div class="dialog-header heading-l">X REFERENCES</div>
     <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index e69de29bb..4b94df396 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -0,0 +1,4 @@
+.references-dialog {
+    position: fixed;
+    left: -100px;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index bbce745d7..a52d2d34c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { BaseDialogComponent } from '../../../../../../../../../../libs/common-ui/src';
+import { BaseDialogComponent } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-annotation-references-dialog',
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 71c41366d..375e46f74 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
@@ -50,6 +50,7 @@
 
             <redaction-annotation-actions
                 (annotationsChanged)="annotationsChanged.emit($event)"
+                (seeReferences)="seeReferences.emit($event)"
                 *ngIf="selectedAnnotations?.length > 0"
                 [alwaysVisible]="true"
                 [annotations]="selectedAnnotations"
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 584a25e84..f2ba1e797 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
@@ -60,6 +60,7 @@ export class FileWorkloadComponent {
     @Output() readonly deselectAnnotations = new EventEmitter<AnnotationWrapper[]>();
     @Output() readonly selectPage = new EventEmitter<number>();
     @Output() readonly annotationsChanged = new EventEmitter<AnnotationWrapper>();
+    @Output() readonly seeReferences = new EventEmitter<boolean>();
     displayedPages: number[] = [];
     pagesPanelActive = true;
     readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>;
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index bdfc578b9..65d6e8092 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
@@ -24,8 +24,7 @@ type DialogType =
     | 'removeAnnotations'
     | 'resizeAnnotation'
     | 'forceRedaction'
-    | 'manualAnnotation'
-    | 'seeAnnotationReferences';
+    | 'manualAnnotation';
 
 @Injectable()
 export class DossiersDialogService extends DialogService<DialogType> {
@@ -69,9 +68,6 @@ export class DossiersDialogService extends DialogService<DialogType> {
             component: ManualAnnotationDialogComponent,
             dialogConfig: { autoFocus: true },
         },
-        seeAnnotationReferences: {
-            component: AnnotationReferencesDialogComponent,
-        },
     };
 
     constructor(protected readonly _dialog: MatDialog) {

From e8e8687ee9b2ae72a41f5fa6c794c1cb682b76d8 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Fri, 7 Jan 2022 22:25:58 +0200
Subject: [PATCH 03/22] dialog open on button click and annotation input

---
 .../annotation-references-dialog.component.ts | 19 +++++-----
 .../file-workload.component.html              |  1 -
 .../file-workload/file-workload.component.ts  |  1 -
 .../file-preview-screen.component.html        |  6 ++++
 .../file-preview-screen.component.ts          | 35 +++++++++++++++++++
 5 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index a52d2d34c..ea3dcc01f 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,20 +1,17 @@
-import { Component } from '@angular/core';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 
 @Component({
     selector: 'redaction-annotation-references-dialog',
     templateUrl: './annotation-references-dialog.component.html',
     styleUrls: ['./annotation-references-dialog.component.scss'],
 })
-export class AnnotationReferencesDialogComponent extends BaseDialogComponent {
+export class AnnotationReferencesDialogComponent implements OnInit {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-    constructor() {
-        super();
+    @Input() annotation: AnnotationWrapper;
+    constructor() {}
+
+    ngOnInit(): void {
+        console.log(this.annotation);
     }
-
-    changed: boolean;
-    disabled: boolean;
-    valid: boolean;
-
-    save(): void {}
 }
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 375e46f74..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
@@ -50,7 +50,6 @@
 
             <redaction-annotation-actions
                 (annotationsChanged)="annotationsChanged.emit($event)"
-                (seeReferences)="seeReferences.emit($event)"
                 *ngIf="selectedAnnotations?.length > 0"
                 [alwaysVisible]="true"
                 [annotations]="selectedAnnotations"
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 f2ba1e797..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
@@ -60,7 +60,6 @@ export class FileWorkloadComponent {
     @Output() readonly deselectAnnotations = new EventEmitter<AnnotationWrapper[]>();
     @Output() readonly selectPage = new EventEmitter<number>();
     @Output() readonly annotationsChanged = new EventEmitter<AnnotationWrapper>();
-    @Output() readonly seeReferences = new EventEmitter<boolean>();
     displayedPages: number[] = [];
     pagesPanelActive = true;
     readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>;
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 b90dd8d93..1b5ce036a 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
@@ -118,11 +118,17 @@
         <ng-template #annotationActionsTemplate let-annotation="annotation">
             <redaction-annotation-actions
                 (annotationsChanged)="annotationsChangedByReviewAction($event)"
+                (seeReferences)="seeReferences = $event"
                 [annotations]="[annotation]"
                 [canPerformAnnotationActions]="canPerformAnnotationActions$ | async"
                 [file]="file"
                 [viewer]="activeViewer"
             ></redaction-annotation-actions>
+
+            <redaction-annotation-references-dialog
+                *ngIf="seeReferences"
+                [annotation]="annotation"
+            ></redaction-annotation-references-dialog>
         </ng-template>
 
         <ng-template #annotationFilterTemplate let-filter="filter">
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 93db957e2..ee38046dd 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
@@ -88,6 +88,8 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     ready = false;
     private _instance: WebViewerInstance;
     private _lastPage: string;
+    private _seeReferences = false;
+    private _reloadFileOnReanalysis = false;
     @ViewChild('fileWorkloadComponent') private readonly _workloadComponent: FileWorkloadComponent;
     @ViewChild('annotationFilterTemplate', {
         read: TemplateRef,
@@ -152,6 +154,39 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         return this._stateService.fileData;
     }
 
+    private _setActiveViewerPage() {
+        const currentPage = this._instance?.Core.documentViewer?.getCurrentPage();
+        if (!currentPage) {
+            this.activeViewerPage = 1;
+        } else {
+            this.activeViewerPage = this.viewModeService.isCompare
+                ? currentPage % 2 === 0
+                    ? currentPage / 2
+                    : (currentPage + 1) / 2
+                : currentPage;
+        }
+    }
+
+    set seeReferences(e) {
+        this._seeReferences = e;
+    }
+
+    get seeReferences(): boolean {
+        return this._seeReferences;
+    }
+
+    private get _viewDocumentInfo$() {
+        return this.documentInfoService.shown$.pipe(
+            tap(value => {
+                if (value) {
+                    this.multiSelectService.deactivate();
+                    this.excludedPagesService.hide();
+                }
+            }),
+            shareDistinctLast(),
+        );
+    }
+
     private get _canPerformAnnotationActions$() {
         return combineLatest([
             this._stateService.fileData$.pipe(switchMap(fileData => fileData.file$)),

From 13a71bf06a87ca64972bd7f1d8507953991343a7 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Sun, 9 Jan 2022 19:14:15 +0200
Subject: [PATCH 04/22] references dialog close button

---
 .../annotation-references-dialog.component.html        | 10 ++++++----
 .../annotation-references-dialog.component.scss        |  2 +-
 .../annotation-references-dialog.component.ts          |  3 ++-
 .../file-preview-screen.component.html                 | 10 +++++-----
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index fdda1748f..598299dd3 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,4 +1,6 @@
-<section class="dialog references-dialog">
-    <div class="dialog-header heading-l">X REFERENCES</div>
-    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
-</section>
+<div class="content-container">
+    <div class="dialog references-dialog">
+        <div class="dialog-header">X REFERENCES</div>
+        <iqser-circle-button (action)="closeDialog.emit(false)" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index 4b94df396..cc502ada9 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -1,4 +1,4 @@
 .references-dialog {
     position: fixed;
-    left: -100px;
+    right: 350px;
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index ea3dcc01f..5cb9a4fdc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 
 @Component({
@@ -9,6 +9,7 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 export class AnnotationReferencesDialogComponent implements OnInit {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     @Input() annotation: AnnotationWrapper;
+    @Output() readonly closeDialog = new EventEmitter<boolean>();
     constructor() {}
 
     ngOnInit(): void {
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 1b5ce036a..a8901693a 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
@@ -124,13 +124,13 @@
                 [file]="file"
                 [viewer]="activeViewer"
             ></redaction-annotation-actions>
-
-            <redaction-annotation-references-dialog
-                *ngIf="seeReferences"
-                [annotation]="annotation"
-            ></redaction-annotation-references-dialog>
         </ng-template>
 
+        <redaction-annotation-references-dialog
+            *ngIf="seeReferences"
+            (closeDialog)="seeReferences = $event"
+        ></redaction-annotation-references-dialog>
+
         <ng-template #annotationFilterTemplate let-filter="filter">
             <redaction-type-filter
                 *ngIf="filter.topLevelFilter"

From 0d15cf694d2a5173434b31c0fcf127b50f3af640 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 10 Jan 2022 14:21:03 +0200
Subject: [PATCH 05/22] annotation references in template

---
 .../annotation-references-dialog.component.html      |  6 ++++--
 .../annotation-references-dialog.component.scss      |  4 ++++
 .../annotations-list/annotations-list.component.html |  2 ++
 .../annotations-list/annotations-list.component.ts   |  1 +
 .../file-workload/file-workload.component.html       |  1 +
 .../file-workload/file-workload.component.ts         |  1 +
 .../file-preview-screen.component.html               | 12 ++++++++----
 7 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index 598299dd3..0234943e1 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,6 +1,8 @@
 <div class="content-container">
     <div class="dialog references-dialog">
-        <div class="dialog-header">X REFERENCES</div>
-        <iqser-circle-button (action)="closeDialog.emit(false)" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+        <div class="references-header">
+            <div class="small-label">X REFERENCES</div>
+            <iqser-circle-button (action)="closeDialog.emit(false)" icon="iqser:close"></iqser-circle-button>
+        </div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index cc502ada9..045ba5b10 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -1,4 +1,8 @@
 .references-dialog {
     position: fixed;
     right: 350px;
+
+    .references-header {
+        padding: 13px 13px 0 13px;
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 368df6874..f50ea272a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -60,4 +60,6 @@
     </div>
 
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
+
+    <ng-container [ngTemplateOutletContext]="{ annotation: annotation }" [ngTemplateOutlet]="annotationReferencesTemplate"></ng-container>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 437b31c31..49f2f0e31 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -15,6 +15,7 @@ export class AnnotationsListComponent implements OnChanges {
     @Input() annotations: AnnotationWrapper[];
     @Input() selectedAnnotations: AnnotationWrapper[];
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
+    @Input() annotationReferencesTemplate: TemplateRef<unknown>;
     @Input() activeViewerPage: number;
     @Input() canMultiSelect = true;
 
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 71c41366d..ac5e886ee 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
@@ -201,6 +201,7 @@
                     (selectAnnotations)="selectAnnotations.emit($event)"
                     [activeViewerPage]="activeViewerPage"
                     [annotationActionsTemplate]="annotationActionsTemplate"
+                    [annotationReferencesTemplate]="annotationReferencesTemplate"
                     [annotations]="(displayedAnnotations$ | async)?.get(activeViewerPage)"
                     [canMultiSelect]="!isReadOnly"
                     [file]="file"
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 584a25e84..9ba05aae5 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
@@ -54,6 +54,7 @@ export class FileWorkloadComponent {
     @Input() dialogRef: MatDialogRef<unknown>;
     @Input() file!: File;
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
+    @Input() annotationReferencesTemplate: TemplateRef<unknown>;
     @Input() viewer: WebViewerInstance;
     @Output() readonly shouldDeselectAnnotationsOnPageChangeChange = new EventEmitter<boolean>();
     @Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>();
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 a8901693a..1dd36f48f 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
@@ -106,6 +106,7 @@
                         [activeViewerPage]="activeViewerPage"
                         [annotationActionsTemplate]="annotationActionsTemplate"
                         [annotations]="visibleAnnotations"
+                        [annotationReferencesTemplate]="annotationReferencesTemplate"
                         [dialogRef]="dialogRef"
                         [file]="file"
                         [selectedAnnotations]="selectedAnnotations"
@@ -126,10 +127,13 @@
             ></redaction-annotation-actions>
         </ng-template>
 
-        <redaction-annotation-references-dialog
-            *ngIf="seeReferences"
-            (closeDialog)="seeReferences = $event"
-        ></redaction-annotation-references-dialog>
+        <ng-template #annotationReferencesTemplate let-annotation="annotation">
+            <redaction-annotation-references-dialog
+                *ngIf="seeReferences"
+                [annotation]="annotation"
+                (closeDialog)="seeReferences = $event"
+            ></redaction-annotation-references-dialog>
+        </ng-template>
 
         <ng-template #annotationFilterTemplate let-filter="filter">
             <redaction-type-filter

From b89f4a3f7879cfeb3481e8dbf04760cd04ba8227 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 10 Jan 2022 17:16:37 +0200
Subject: [PATCH 06/22] separate annotation card component in list

---
 .../annotation-card.component.html            | 22 +++++++++++++
 .../annotation-card.component.scss            | 13 ++++++++
 .../annotation-card.component.ts              | 17 ++++++++++
 ...nnotation-references-dialog.component.html |  2 +-
 ...nnotation-references-dialog.component.scss |  5 ++-
 .../annotations-list.component.html           | 32 ++++---------------
 .../annotations-list.component.scss           | 14 --------
 .../file-preview.module.ts                    |  2 ++
 8 files changed, 66 insertions(+), 41 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
new file mode 100644
index 000000000..a23949aed
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
@@ -0,0 +1,22 @@
+<div class="details">
+    <redaction-type-annotation-icon [annotation]="annotation" [file]="file"></redaction-type-annotation-icon>
+
+    <div class="flex-1">
+        <div>
+            <strong>{{ annotation.typeLabel | translate }}</strong>
+        </div>
+        <div *ngIf="annotation?.type !== 'manual'">
+            <strong>
+                <span>{{ annotation.descriptor | translate }}</span
+                >: </strong
+            >{{ annotation.type | humanize: false }}
+        </div>
+        <div *ngIf="annotation.shortContent && !annotation.isHint">
+            <strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
+        </div>
+    </div>
+
+    <div class="active-icon-marker-container">
+        <iqser-round-checkbox *ngIf="(multiSelectService.active$ | async) && isSelected" [active]="true"></iqser-round-checkbox>
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
new file mode 100644
index 000000000..2da4583a7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
@@ -0,0 +1,13 @@
+.details {
+    display: flex;
+    position: relative;
+}
+
+.active-icon-marker-container {
+    min-width: 20px;
+}
+
+redaction-type-annotation-icon {
+    margin-top: 6px;
+    margin-right: 10px;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
new file mode 100644
index 000000000..a0b18557d
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { AnnotationWrapper } from '../../../../../../models/file/annotation.wrapper';
+import { File } from '@red/domain';
+import { MultiSelectService } from '../../services/multi-select.service';
+
+@Component({
+    selector: 'redaction-annotation-card',
+    templateUrl: './annotation-card.component.html',
+    styleUrls: ['./annotation-card.component.scss'],
+})
+export class AnnotationCardComponent {
+    @Input() annotation: AnnotationWrapper;
+    @Input() file: File;
+    @Input() isSelected = false;
+
+    constructor(readonly multiSelectService: MultiSelectService) {}
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index 0234943e1..79479c853 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,6 +1,6 @@
 <div class="content-container">
     <div class="dialog references-dialog">
-        <div class="references-header">
+        <div class="references-header flex space-between">
             <div class="small-label">X REFERENCES</div>
             <iqser-circle-button (action)="closeDialog.emit(false)" icon="iqser:close"></iqser-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index 045ba5b10..2e6925b09 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -1,8 +1,11 @@
 .references-dialog {
     position: fixed;
-    right: 350px;
+    margin: 0;
+    right: 370px;
+    top: 165px;
 
     .references-header {
         padding: 13px 13px 0 13px;
+        align-items: center;
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index f50ea272a..ee7df1598 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -11,31 +11,13 @@
     <div class="active-bar-marker"></div>
 
     <div [class.removed]="annotation.isChangeLogRemoved" class="annotation">
-        <div [matTooltip]="annotation.content" class="details" matTooltipPosition="above">
-            <redaction-type-annotation-icon [annotation]="annotation" [file]="file"></redaction-type-annotation-icon>
-
-            <div class="flex-1">
-                <div>
-                    <strong>{{ annotation.typeLabel | translate }}</strong>
-                </div>
-                <div *ngIf="annotation?.type !== 'manual'">
-                    <strong>
-                        <span>{{ annotation.descriptor | translate }}</span
-                        >: </strong
-                    >{{ annotation.type | humanize: false }}
-                </div>
-                <div *ngIf="annotation.shortContent && !annotation.isHint">
-                    <strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
-                </div>
-            </div>
-
-            <div class="active-icon-marker-container">
-                <iqser-round-checkbox
-                    *ngIf="(multiSelectService.active$ | async) && isSelected(annotation.annotationId)"
-                    [active]="true"
-                ></iqser-round-checkbox>
-            </div>
-        </div>
+        <redaction-annotation-card
+            [annotation]="annotation"
+            [file]="file"
+            [isSelected]="isSelected(annotation.annotationId)"
+            [matTooltip]="annotation.content"
+            matTooltipPosition="above"
+        ></redaction-annotation-card>
 
         <div class="actions-wrapper">
             <div
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss
index e159e24af..047e483e4 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss
@@ -16,10 +16,6 @@
         min-height: 100%;
     }
 
-    .active-icon-marker-container {
-        min-width: 20px;
-    }
-
     &.active {
         &:not(.lower-height) .active-bar-marker {
             background-color: variables.$primary;
@@ -40,11 +36,6 @@
             color: variables.$grey-7;
         }
 
-        .details {
-            display: flex;
-            position: relative;
-        }
-
         .actions-wrapper {
             display: flex;
             justify-content: space-between;
@@ -74,11 +65,6 @@
                 }
             }
         }
-
-        redaction-type-annotation-icon {
-            margin-top: 6px;
-            margin-right: 10px;
-        }
     }
 
     &:hover,
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
index 37ec7d0a3..dea30eb79 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
@@ -21,6 +21,7 @@ import { ViewSwitchComponent } from './components/view-switch/view-switch.compon
 import { UserManagementComponent } from './components/user-management/user-management.component';
 import { AnnotationReferencesDialogComponent } from './components/annotation-references-dialog/annotation-references-dialog.component';
 import { AcceptRecommendationDialogComponent } from './dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
+import { AnnotationCardComponent } from './components/annotation-card/annotation-card.component';
 
 const routes: Routes = [
     {
@@ -48,6 +49,7 @@ const routes: Routes = [
         UserManagementComponent,
         AcceptRecommendationDialogComponent,
         AnnotationReferencesDialogComponent,
+        AnnotationCardComponent,
     ],
     imports: [
         RouterModule.forChild(routes),

From 53929c9e3af7790d3a3eb58a79d5fc83858c6b75 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Wed, 12 Jan 2022 14:07:49 +0200
Subject: [PATCH 07/22] show/hide dialog functionality in separate service

---
 .../annotation-actions.component.html         |  5 +++--
 .../annotation-actions.component.ts           |  9 ++++----
 ...nnotation-references-dialog.component.html |  2 +-
 .../annotation-references-dialog.component.ts |  9 ++++----
 .../annotations-list.component.html           |  7 ++++--
 .../annotations-list.component.ts             |  8 +++++--
 .../file-workload.component.html              |  1 -
 .../file-workload/file-workload.component.ts  |  1 -
 .../file-preview-screen.component.html        | 10 ---------
 .../file-preview-screen.component.ts          | 11 ++--------
 .../services/annotation-references.service.ts | 22 +++++++++++++++++++
 .../services/dossiers-dialog.service.ts       |  2 +-
 12 files changed, 49 insertions(+), 38 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 567aeb3fd..548fe9710 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,7 +88,8 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="openAnnotationReferencesDialog()"
+            (action)="annotationReferencesService.show(annotations)"
+            *ngIf="!multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
@@ -96,7 +97,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.forceRedaction($event, annotations, file, annotationsChanged)"
+            (action)="annotationActionsService.forceAnnotation($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canForceRedaction"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.force-redaction.label' | translate"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index 9db9c00e3..cbaf54daa 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -17,6 +17,8 @@ import {
 import { filter } from 'rxjs/operators';
 import { ManualAnnotationService } from '../../../../services/manual-annotation.service';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
+import { AnnotationReferencesService } from '../../services/annotation-references.service';
+import { MultiSelectService } from '../../services/multi-select.service';
 
 export const AnnotationButtonTypes = {
     dark: 'dark',
@@ -38,12 +40,13 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input() alwaysVisible: boolean;
     @Input() @Required() file!: File;
     @Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
-    @Output() seeReferences = new EventEmitter<boolean>();
     annotationPermissions: AnnotationPermissions;
 
     constructor(
         private readonly _manualAnnotationService: ManualAnnotationService,
         readonly annotationActionsService: AnnotationActionsService,
+        readonly annotationReferencesService: AnnotationReferencesService,
+        readonly multiSelectService: MultiSelectService,
         private readonly _permissionsService: PermissionsService,
         private readonly _dossiersService: DossiersService,
         private readonly _userService: UserService,
@@ -156,8 +159,4 @@ export class AnnotationActionsComponent implements OnChanges {
             this.annotations,
         );
     }
-
-    openAnnotationReferencesDialog(): void {
-        this.seeReferences.emit(true);
-    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index 79479c853..7bcbbdf53 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -2,7 +2,7 @@
     <div class="dialog references-dialog">
         <div class="references-header flex space-between">
             <div class="small-label">X REFERENCES</div>
-            <iqser-circle-button (action)="closeDialog.emit(false)" icon="iqser:close"></iqser-circle-button>
+            <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
         </div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index 5cb9a4fdc..1490877f5 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { AnnotationReferencesService } from '../../services/annotation-references.service';
 
 @Component({
     selector: 'redaction-annotation-references-dialog',
@@ -7,10 +8,10 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
     styleUrls: ['./annotation-references-dialog.component.scss'],
 })
 export class AnnotationReferencesDialogComponent implements OnInit {
-    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-    @Input() annotation: AnnotationWrapper;
-    @Output() readonly closeDialog = new EventEmitter<boolean>();
-    constructor() {}
+    @Input()
+    annotation: AnnotationWrapper;
+
+    constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
 
     ngOnInit(): void {
         console.log(this.annotation);
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index ee7df1598..ae347c512 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -42,6 +42,9 @@
     </div>
 
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
-
-    <ng-container [ngTemplateOutletContext]="{ annotation: annotation }" [ngTemplateOutlet]="annotationReferencesTemplate"></ng-container>
 </div>
+
+<redaction-annotation-references-dialog
+    *ngIf="annotationReferencesService.annotation$ | async as annotation"
+    [annotation]="annotation"
+></redaction-annotation-references-dialog>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 49f2f0e31..4671bf016 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -3,6 +3,7 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { HelpModeService, IqserEventTarget } from '@iqser/common-ui';
 import { File } from '@red/domain';
 import { MultiSelectService } from '../../services/multi-select.service';
+import { AnnotationReferencesService } from '../../services/annotation-references.service';
 
 @Component({
     selector: 'redaction-annotations-list',
@@ -15,7 +16,6 @@ export class AnnotationsListComponent implements OnChanges {
     @Input() annotations: AnnotationWrapper[];
     @Input() selectedAnnotations: AnnotationWrapper[];
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
-    @Input() annotationReferencesTemplate: TemplateRef<unknown>;
     @Input() activeViewerPage: number;
     @Input() canMultiSelect = true;
 
@@ -23,7 +23,11 @@ export class AnnotationsListComponent implements OnChanges {
     @Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>();
     @Output() readonly deselectAnnotations = new EventEmitter<AnnotationWrapper[]>();
 
-    constructor(readonly multiSelectService: MultiSelectService, readonly helpModeService: HelpModeService) {}
+    constructor(
+        readonly multiSelectService: MultiSelectService,
+        readonly helpModeService: HelpModeService,
+        readonly annotationReferencesService: AnnotationReferencesService,
+    ) {}
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.annotations && this.annotations) {
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 ac5e886ee..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
@@ -201,7 +201,6 @@
                     (selectAnnotations)="selectAnnotations.emit($event)"
                     [activeViewerPage]="activeViewerPage"
                     [annotationActionsTemplate]="annotationActionsTemplate"
-                    [annotationReferencesTemplate]="annotationReferencesTemplate"
                     [annotations]="(displayedAnnotations$ | async)?.get(activeViewerPage)"
                     [canMultiSelect]="!isReadOnly"
                     [file]="file"
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 9ba05aae5..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
@@ -54,7 +54,6 @@ export class FileWorkloadComponent {
     @Input() dialogRef: MatDialogRef<unknown>;
     @Input() file!: File;
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
-    @Input() annotationReferencesTemplate: TemplateRef<unknown>;
     @Input() viewer: WebViewerInstance;
     @Output() readonly shouldDeselectAnnotationsOnPageChangeChange = new EventEmitter<boolean>();
     @Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>();
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 1dd36f48f..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
@@ -106,7 +106,6 @@
                         [activeViewerPage]="activeViewerPage"
                         [annotationActionsTemplate]="annotationActionsTemplate"
                         [annotations]="visibleAnnotations"
-                        [annotationReferencesTemplate]="annotationReferencesTemplate"
                         [dialogRef]="dialogRef"
                         [file]="file"
                         [selectedAnnotations]="selectedAnnotations"
@@ -119,7 +118,6 @@
         <ng-template #annotationActionsTemplate let-annotation="annotation">
             <redaction-annotation-actions
                 (annotationsChanged)="annotationsChangedByReviewAction($event)"
-                (seeReferences)="seeReferences = $event"
                 [annotations]="[annotation]"
                 [canPerformAnnotationActions]="canPerformAnnotationActions$ | async"
                 [file]="file"
@@ -127,14 +125,6 @@
             ></redaction-annotation-actions>
         </ng-template>
 
-        <ng-template #annotationReferencesTemplate let-annotation="annotation">
-            <redaction-annotation-references-dialog
-                *ngIf="seeReferences"
-                [annotation]="annotation"
-                (closeDialog)="seeReferences = $event"
-            ></redaction-annotation-references-dialog>
-        </ng-template>
-
         <ng-template #annotationFilterTemplate let-filter="filter">
             <redaction-type-filter
                 *ngIf="filter.topLevelFilter"
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 ee38046dd..77c0624eb 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
@@ -51,6 +51,7 @@ 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;
+import { AnnotationReferencesService } from './services/annotation-references.service';
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown'];
 
@@ -88,8 +89,8 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     ready = false;
     private _instance: WebViewerInstance;
     private _lastPage: string;
-    private _seeReferences = false;
     private _reloadFileOnReanalysis = false;
+
     @ViewChild('fileWorkloadComponent') private readonly _workloadComponent: FileWorkloadComponent;
     @ViewChild('annotationFilterTemplate', {
         read: TemplateRef,
@@ -167,14 +168,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
     }
 
-    set seeReferences(e) {
-        this._seeReferences = e;
-    }
-
-    get seeReferences(): boolean {
-        return this._seeReferences;
-    }
-
     private get _viewDocumentInfo$() {
         return this.documentInfoService.shown$.pipe(
             tap(value => {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
new file mode 100644
index 000000000..03651811d
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { shareDistinctLast } from '@iqser/common-ui';
+import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+
+@Injectable()
+export class AnnotationReferencesService {
+    readonly annotation$: Observable<AnnotationWrapper>;
+    private readonly _annotation$ = new BehaviorSubject(null);
+
+    constructor() {
+        this.annotation$ = this._annotation$.asObservable().pipe(shareDistinctLast());
+    }
+
+    show(annotations: AnnotationWrapper[]) {
+        this._annotation$.next(annotations[0]);
+    }
+
+    hide() {
+        this._annotation$.next(null);
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index 65d6e8092..ae70049f4 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
@@ -23,7 +23,7 @@ type DialogType =
     | 'changeLegalBasis'
     | 'removeAnnotations'
     | 'resizeAnnotation'
-    | 'forceRedaction'
+    | 'forceAnnotation'
     | 'manualAnnotation';
 
 @Injectable()

From 23d79a00e2572927298b26f223bb878242214a65 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Wed, 12 Jan 2022 16:55:15 +0200
Subject: [PATCH 08/22] reference cards in dialog

---
 .../src/app/models/file/annotation.wrapper.ts |  2 ++
 ...nnotation-references-dialog.component.html | 14 ++++++++-
 ...nnotation-references-dialog.component.scss | 17 +++++++++++
 .../annotation-references-dialog.component.ts | 29 ++++++++++++++++---
 .../annotations-list.component.html           |  1 +
 5 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/apps/red-ui/src/app/models/file/annotation.wrapper.ts b/apps/red-ui/src/app/models/file/annotation.wrapper.ts
index 9ba422ab9..9c4ee46e7 100644
--- a/apps/red-ui/src/app/models/file/annotation.wrapper.ts
+++ b/apps/red-ui/src/app/models/file/annotation.wrapper.ts
@@ -46,6 +46,7 @@ export class AnnotationWrapper {
     rectangle?: boolean;
     hintDictionary?: boolean;
     section?: string;
+    reference?: Array<string>;
 
     manual?: boolean;
 
@@ -259,6 +260,7 @@ export class AnnotationWrapper {
         annotationWrapper.manual = redactionLogEntry.manual;
         annotationWrapper.engines = redactionLogEntry.engines;
         annotationWrapper.section = redactionLogEntry.section;
+        annotationWrapper.reference = redactionLogEntry.reference;
         annotationWrapper.rectangle = redactionLogEntry.rectangle;
         annotationWrapper.hasBeenResized = redactionLogEntry.hasBeenResized;
         annotationWrapper.hasBeenRecategorized = redactionLogEntry.hasBeenRecategorized;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index 7bcbbdf53..1f651a5ae 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,8 +1,20 @@
 <div class="content-container">
     <div class="dialog references-dialog">
-        <div class="references-header flex space-between">
+        <div class="references-header flex">
             <div class="small-label">X REFERENCES</div>
             <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
         </div>
+        <div class="annotations-container flex">
+            <div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
+                <div class="annotation-card-container">
+                    <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
+                </div>
+            </div>
+            <div class="annotation-container" *ngFor="let reference of annotationReferences">
+                <div class="annotation-card-container">
+                    <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index 2e6925b09..bca793333 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -1,11 +1,28 @@
+@use 'common-mixins' as mixins;
+
 .references-dialog {
     position: fixed;
     margin: 0;
+    width: 280px;
     right: 370px;
     top: 165px;
 
     .references-header {
         padding: 13px 13px 0 13px;
         align-items: center;
+        justify-content: space-between;
+    }
+
+    .annotations-container {
+        flex-direction: column;
+
+        .annotation-container {
+            width: 100%;
+            border: 1px solid rgba(226, 228, 233, 0.9);
+
+            .annotation-card-container {
+                padding: 11px 16px 16px 10px;
+            }
+        }
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index 1490877f5..2918d5afb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,6 +1,9 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
+import { File } from '@red/domain';
+import { PdfViewerDataService } from '../../../../services/pdf-viewer-data.service';
+import { FileDataModel } from '@models/file/file-data.model';
 
 @Component({
     selector: 'redaction-annotation-references-dialog',
@@ -10,10 +13,28 @@ import { AnnotationReferencesService } from '../../services/annotation-reference
 export class AnnotationReferencesDialogComponent implements OnInit {
     @Input()
     annotation: AnnotationWrapper;
+    @Input()
+    file: File;
+    fileData: FileDataModel;
+    annotationReferences: AnnotationWrapper[];
 
-    constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
+    constructor(
+        readonly annotationReferencesService: AnnotationReferencesService,
+        private readonly _fileDownloadService: PdfViewerDataService,
+    ) {}
 
-    ngOnInit(): void {
-        console.log(this.annotation);
+    async ngOnInit(): Promise<void> {
+        await this._loadFileData(this.file);
+        this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
+    }
+
+    private async _loadFileData(file: File): Promise<void | boolean> {
+        const fileData = await this._fileDownloadService.loadDataFor(file, this.fileData).toPromise();
+
+        if (file.isPending) {
+            return;
+        }
+
+        this.fileData = fileData;
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index ae347c512..ecbdb645e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -47,4 +47,5 @@
 <redaction-annotation-references-dialog
     *ngIf="annotationReferencesService.annotation$ | async as annotation"
     [annotation]="annotation"
+    [file]="file"
 ></redaction-annotation-references-dialog>

From 7759cdd018555a1dca1e3746bf3b04ea6f9e12c4 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 13 Jan 2022 12:17:54 +0200
Subject: [PATCH 09/22] page indicator and click event on reference

---
 .../annotation-card.component.scss            |  2 +
 ...nnotation-references-dialog.component.html | 43 +++++++++++++------
 ...nnotation-references-dialog.component.scss |  6 ++-
 .../annotation-references-dialog.component.ts | 16 +++++--
 ...n-references-page-indicator.component.html |  6 +++
 ...n-references-page-indicator.component.scss | 23 ++++++++++
 ...ion-references-page-indicator.component.ts | 10 +++++
 .../annotations-list.component.html           |  1 +
 .../annotations-list.component.ts             |  4 +-
 .../file-preview.module.ts                    |  2 +
 10 files changed, 92 insertions(+), 21 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
index 2da4583a7..06d7ec7bb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
@@ -1,6 +1,8 @@
 .details {
     display: flex;
     position: relative;
+    font-size: 11px;
+    line-height: 14px;
 }
 
 .active-icon-marker-container {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index 1f651a5ae..fbc7b496a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,20 +1,35 @@
-<div class="content-container">
-    <div class="dialog references-dialog">
-        <div class="references-header flex">
-            <div class="small-label">X REFERENCES</div>
-            <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
-        </div>
-        <div class="annotations-container flex">
-            <div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
-                <div class="annotation-card-container">
-                    <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
+<ng-container *ngIf="annotationReferences">
+    <div class="content-container">
+        <div class="dialog references-dialog">
+            <div class="references-header flex">
+                <div class="small-label">
+                    {{ annotationReferences.length }} {{ annotationReferences.length === 1 ? 'REFERENCE' : 'REFERENCES' }}
                 </div>
+                <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
             </div>
-            <div class="annotation-container" *ngFor="let reference of annotationReferences">
-                <div class="annotation-card-container">
-                    <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
+            <div class="annotations-container flex">
+                <div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
+                    <div class="annotation-card-container flex">
+                        <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
+                        <redaction-annotation-references-page-indicator
+                            [number]="annotation.pageNumber"
+                        ></redaction-annotation-references-page-indicator>
+                    </div>
+                </div>
+                <div
+                    class="annotation-container"
+                    *ngFor="let reference of annotationReferences"
+                    (click)="referenceClicked.emit(reference)"
+                    [style.cursor]="'pointer'"
+                >
+                    <div class="annotation-card-container flex">
+                        <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
+                        <redaction-annotation-references-page-indicator
+                            [number]="reference.pageNumber"
+                        ></redaction-annotation-references-page-indicator>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index bca793333..6fc20e682 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -8,7 +8,7 @@
     top: 165px;
 
     .references-header {
-        padding: 13px 13px 0 13px;
+        padding: 8px 8px 8px 13px;
         align-items: center;
         justify-content: space-between;
     }
@@ -18,10 +18,12 @@
 
         .annotation-container {
             width: 100%;
-            border: 1px solid rgba(226, 228, 233, 0.9);
+            border-top: 1px solid rgba(226, 228, 233, 0.9);
 
             .annotation-card-container {
                 padding: 11px 16px 16px 10px;
+                justify-content: space-between;
+                align-items: flex-start;
             }
         }
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index 2918d5afb..f0a8ac168 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
 import { File } from '@red/domain';
@@ -10,11 +10,13 @@ import { FileDataModel } from '@models/file/file-data.model';
     templateUrl: './annotation-references-dialog.component.html',
     styleUrls: ['./annotation-references-dialog.component.scss'],
 })
-export class AnnotationReferencesDialogComponent implements OnInit {
+export class AnnotationReferencesDialogComponent implements OnInit, OnChanges {
     @Input()
     annotation: AnnotationWrapper;
     @Input()
     file: File;
+    @Output()
+    readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
     fileData: FileDataModel;
     annotationReferences: AnnotationWrapper[];
 
@@ -24,11 +26,19 @@ export class AnnotationReferencesDialogComponent implements OnInit {
     ) {}
 
     async ngOnInit(): Promise<void> {
+        await this.setReferences();
+    }
+
+    async ngOnChanges(changes: SimpleChanges): Promise<void> {
+        await this.setReferences();
+    }
+
+    async setReferences(): Promise<void> {
         await this._loadFileData(this.file);
         this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
     }
 
-    private async _loadFileData(file: File): Promise<void | boolean> {
+    private async _loadFileData(file: File): Promise<void> {
         const fileData = await this._fileDownloadService.loadDataFor(file, this.fileData).toPromise();
 
         if (file.isPending) {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.html
new file mode 100644
index 000000000..0b5e6e40b
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.html
@@ -0,0 +1,6 @@
+<div class="page-number-wrapper">
+    <mat-icon [svgIcon]="'red:page'"></mat-icon>
+    <div class="text">
+        {{ number }}
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.scss
new file mode 100644
index 000000000..d8ac8ff76
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.scss
@@ -0,0 +1,23 @@
+.page-number-wrapper {
+    position: relative;
+    height: 30px;
+
+    mat-icon {
+        width: 27px;
+        height: 100%;
+    }
+
+    .text {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 11px;
+        line-height: 11px;
+        position: absolute;
+        background: transparent;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
new file mode 100644
index 000000000..42761871a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'redaction-annotation-references-page-indicator',
+    templateUrl: './annotation-references-page-indicator.component.html',
+    styleUrls: ['./annotation-references-page-indicator.component.scss'],
+})
+export class AnnotationReferencesPageIndicatorComponent {
+    @Input() number;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index ecbdb645e..ed812c15b 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -48,4 +48,5 @@
     *ngIf="annotationReferencesService.annotation$ | async as annotation"
     [annotation]="annotation"
     [file]="file"
+    (referenceClicked)="annotationClicked($event, null)"
 ></redaction-annotation-references-dialog>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 4671bf016..16ad21f1e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -36,14 +36,14 @@ export class AnnotationsListComponent implements OnChanges {
     }
 
     annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void {
-        if (($event.target as IqserEventTarget).localName === 'input') {
+        if (($event?.target as IqserEventTarget)?.localName === 'input') {
             return;
         }
         this.pagesPanelActive.emit(false);
         if (this.isSelected(annotation.annotationId)) {
             this.deselectAnnotations.emit([annotation]);
         } else {
-            if (this.canMultiSelect && ($event.ctrlKey || $event.metaKey) && this.selectedAnnotations.length > 0) {
+            if (this.canMultiSelect && ($event?.ctrlKey || $event?.metaKey) && this.selectedAnnotations.length > 0) {
                 this.multiSelectService.activate();
             }
             this.selectAnnotations.emit([annotation]);
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
index dea30eb79..ee9ce8bf2 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
@@ -22,6 +22,7 @@ import { UserManagementComponent } from './components/user-management/user-manag
 import { AnnotationReferencesDialogComponent } from './components/annotation-references-dialog/annotation-references-dialog.component';
 import { AcceptRecommendationDialogComponent } from './dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
 import { AnnotationCardComponent } from './components/annotation-card/annotation-card.component';
+import { AnnotationReferencesPageIndicatorComponent } from './components/annotation-references-page-indicator/annotation-references-page-indicator.component';
 
 const routes: Routes = [
     {
@@ -50,6 +51,7 @@ const routes: Routes = [
         AcceptRecommendationDialogComponent,
         AnnotationReferencesDialogComponent,
         AnnotationCardComponent,
+        AnnotationReferencesPageIndicatorComponent,
     ],
     imports: [
         RouterModule.forChild(routes),

From 22b9a51210e83e466cbfc4876f9ee579e1106580 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Fri, 14 Jan 2022 15:24:04 +0200
Subject: [PATCH 10/22] apply filters when reference is clicked

---
 ...annotation-references-dialog.component.scss |  2 ++
 .../annotations-list.component.html            |  2 +-
 .../annotations-list.component.ts              | 18 +++++++++++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index 6fc20e682..f54b24b62 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -4,6 +4,7 @@
     position: fixed;
     margin: 0;
     width: 280px;
+    max-height: 380px;
     right: 370px;
     top: 165px;
 
@@ -15,6 +16,7 @@
 
     .annotations-container {
         flex-direction: column;
+        overflow: auto;
 
         .annotation-container {
             width: 100%;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index ed812c15b..1a9e22ec7 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -48,5 +48,5 @@
     *ngIf="annotationReferencesService.annotation$ | async as annotation"
     [annotation]="annotation"
     [file]="file"
-    (referenceClicked)="annotationClicked($event, null)"
+    (referenceClicked)="referenceClicked($event)"
 ></redaction-annotation-references-dialog>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 16ad21f1e..a3583836d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { HelpModeService, IqserEventTarget } from '@iqser/common-ui';
+import { FilterService, HelpModeService, IqserEventTarget } from '@iqser/common-ui';
 import { File } from '@red/domain';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
@@ -27,6 +27,7 @@ export class AnnotationsListComponent implements OnChanges {
         readonly multiSelectService: MultiSelectService,
         readonly helpModeService: HelpModeService,
         readonly annotationReferencesService: AnnotationReferencesService,
+        private readonly _filterService: FilterService,
     ) {}
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -50,6 +51,21 @@ export class AnnotationsListComponent implements OnChanges {
         }
     }
 
+    referenceClicked(annotation: AnnotationWrapper): void {
+        this.annotationClicked(annotation, null);
+        if (this._filterService.filtersEnabled('primaryFilters')) {
+            this.toggleFilterAndChildren(annotation);
+        }
+    }
+
+    toggleFilterAndChildren(annotation: AnnotationWrapper): void {
+        const primaryFilters = this._filterService.getGroup('primaryFilters');
+        const filter = primaryFilters.filters.find(f => f.id === annotation.superType);
+        filter.checked = true;
+        filter.children.forEach(f => (f.checked = true));
+        this._filterService.refresh();
+    }
+
     isSelected(annotationId: string): boolean {
         return !!this.selectedAnnotations?.find(a => a?.annotationId === annotationId);
     }

From 32d6a894fc002b0e83c17376a61213876e4bbe31 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Sun, 16 Jan 2022 13:43:01 +0200
Subject: [PATCH 11/22] removed useless stuff & show button if annotation has
 references

---
 .../annotation-actions.component.html         |  2 +-
 ...nnotation-references-dialog.component.html | 12 ++++------
 ...nnotation-references-dialog.component.scss |  8 +++++++
 .../annotation-references-dialog.component.ts |  1 +
 .../file-preview-screen.component.ts          |  1 -
 .../services/annotation-references.service.ts |  4 ++++
 .../services/dossiers-dialog.service.ts       |  1 -
 apps/red-ui/src/assets/i18n/de.json           | 22 ++++++++++++++++---
 apps/red-ui/src/assets/i18n/en.json           |  4 ++++
 .../src/assets/icons/general/reference.svg    |  3 +--
 10 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 548fe9710..ebdcd32f0 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -89,7 +89,7 @@
 
         <iqser-circle-button
             (action)="annotationReferencesService.show(annotations)"
-            *ngIf="!multiSelectService.isActive"
+            *ngIf="annotationReferencesService.hasReferences(annotations) && !multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index fbc7b496a..db5334841 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -3,12 +3,13 @@
         <div class="dialog references-dialog">
             <div class="references-header flex">
                 <div class="small-label">
-                    {{ annotationReferences.length }} {{ annotationReferences.length === 1 ? 'REFERENCE' : 'REFERENCES' }}
+                    {{ annotationReferences.length }}
+                    {{ (annotationReferences.length === 1 ? 'references.singular' : 'references.plural') | translate }}
                 </div>
                 <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
             </div>
             <div class="annotations-container flex">
-                <div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
+                <div class="annotation-container">
                     <div class="annotation-card-container flex">
                         <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
                         <redaction-annotation-references-page-indicator
@@ -16,12 +17,7 @@
                         ></redaction-annotation-references-page-indicator>
                     </div>
                 </div>
-                <div
-                    class="annotation-container"
-                    *ngFor="let reference of annotationReferences"
-                    (click)="referenceClicked.emit(reference)"
-                    [style.cursor]="'pointer'"
-                >
+                <div class="annotation-container" *ngFor="let reference of annotationReferences" (click)="referenceClicked.emit(reference)">
                     <div class="annotation-card-container flex">
                         <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
                         <redaction-annotation-references-page-indicator
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index f54b24b62..5ce1707f2 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -22,6 +22,14 @@
             width: 100%;
             border-top: 1px solid rgba(226, 228, 233, 0.9);
 
+            &:first-child {
+                background-color: var(--iqser-grey-8);
+            }
+
+            &:not(:first-child) {
+                cursor: pointer;
+            }
+
             .annotation-card-container {
                 padding: 11px 16px 16px 10px;
                 justify-content: space-between;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index f0a8ac168..1a7a9e97d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -26,6 +26,7 @@ export class AnnotationReferencesDialogComponent implements OnInit, OnChanges {
     ) {}
 
     async ngOnInit(): Promise<void> {
+        console.log(this.annotation);
         await this.setReferences();
     }
 
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 77c0624eb..8246c2072 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
@@ -89,7 +89,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     ready = false;
     private _instance: WebViewerInstance;
     private _lastPage: string;
-    private _reloadFileOnReanalysis = false;
 
     @ViewChild('fileWorkloadComponent') private readonly _workloadComponent: FileWorkloadComponent;
     @ViewChild('annotationFilterTemplate', {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
index 03651811d..26cc1f09e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
@@ -12,6 +12,10 @@ export class AnnotationReferencesService {
         this.annotation$ = this._annotation$.asObservable().pipe(shareDistinctLast());
     }
 
+    hasReferences(annotations: AnnotationWrapper[]): boolean {
+        return !!annotations[0].reference && annotations[0].reference.length !== 0;
+    }
+
     show(annotations: AnnotationWrapper[]) {
         this._annotation$.next(annotations[0]);
     }
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index ae70049f4..ca5aef32e 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
@@ -11,7 +11,6 @@ import { ChangeLegalBasisDialogComponent } from '../dialogs/change-legal-basis-d
 import { RecategorizeImageDialogComponent } from '../dialogs/recategorize-image-dialog/recategorize-image-dialog.component';
 import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui';
 import { ResizeAnnotationDialogComponent } from '../dialogs/resize-annotation-dialog/resize-annotation-dialog.component';
-import { AnnotationReferencesDialogComponent } from '../screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component';
 
 type DialogType =
     | 'confirm'
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 0d8eb9e41..5ab3ee049 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -141,7 +141,20 @@
     "settings": "Einstellungen"
   },
   "annotation": "Anmerkung",
+  "references": {
+    "singular": "",
+    "plural": ""
+  },
   "annotation-actions": {
+    "resize": {
+      "label": "Größe ändern"
+    },
+    "resize-accept": {
+      "label": "Größe speichern"
+    },
+    "resize-cancel": {
+      "label": "Größenänderung abbrechen"
+    },
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
     },
@@ -151,12 +164,15 @@
     "edit-reason": {
       "label": "Begründung bearbeiten"
     },
-    "force-hint": {
-      "label": "Hinweis erzwingen"
-    },
     "force-redaction": {
       "label": "Schwärzung erzwingen"
     },
+    "see-references": {
+      "label": ""
+    },
+    "force-hint": {
+      "label": "Hinweis erzwingen"
+    },
     "hide": "Ausblenden",
     "message": {
       "dictionary": {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index f64b1d60d..b17b42042 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -141,6 +141,10 @@
     "settings": "Settings"
   },
   "annotation": "Annotation",
+  "references": {
+    "singular": "REFERENCE",
+    "plural": "REFERENCES"
+  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Accept Recommendation"
diff --git a/apps/red-ui/src/assets/icons/general/reference.svg b/apps/red-ui/src/assets/icons/general/reference.svg
index ccbd1c2ea..77e985170 100644
--- a/apps/red-ui/src/assets/icons/general/reference.svg
+++ b/apps/red-ui/src/assets/icons/general/reference.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>status</title>
     <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Styleguide-Actions" transform="translate(-979.000000, -588.000000)" fill="#283241" fill-rule="nonzero">
             <g id="reference" transform="translate(969.000000, 578.000000)">
@@ -10,4 +9,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>

From e35290029ba49a47a724365ecb337dc156c2ab0f Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Sun, 16 Jan 2022 13:55:45 +0200
Subject: [PATCH 12/22] references service back in providers

---
 .../screens/file-preview-screen/file-preview-screen.component.ts | 1 +
 1 file changed, 1 insertion(+)

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 8246c2072..77b752277 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
@@ -70,6 +70,7 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown'];
         AnnotationActionsService,
         FilePreviewStateService,
         PdfViewerDataService,
+        AnnotationReferencesService,
     ],
 })
 export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach {

From b795b50c84e0fd1dec8ed2a7edbef4050fb39a4b Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 17 Jan 2022 11:53:36 +0200
Subject: [PATCH 13/22] fixed some pr comments

---
 .../annotation-actions.component.html         |  2 +-
 .../annotation-actions.component.ts           |  3 ++
 .../annotation-card.component.ts              |  3 +-
 .../annotation-references-dialog.component.ts | 36 ++++---------------
 ...ion-references-page-indicator.component.ts |  3 +-
 .../annotations-list.component.html           |  3 +-
 .../annotations-list.component.ts             | 12 ++-----
 .../file-workload.component.html              |  1 +
 .../file-preview-screen.component.html        |  1 +
 9 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index ebdcd32f0..511d3dfde 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -89,7 +89,7 @@
 
         <iqser-circle-button
             (action)="annotationReferencesService.show(annotations)"
-            *ngIf="annotationReferencesService.hasReferences(annotations) && !multiSelectService.isActive"
+            *ngIf="referencesButtonEnabled"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index cbaf54daa..920578d4a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -41,6 +41,7 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input() @Required() file!: File;
     @Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
     annotationPermissions: AnnotationPermissions;
+    referencesButtonEnabled = false;
 
     constructor(
         private readonly _manualAnnotationService: ManualAnnotationService,
@@ -63,6 +64,8 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input()
     set annotations(value: AnnotationWrapper[]) {
         this._annotations = value.filter(a => a !== undefined);
+        this.referencesButtonEnabled =
+            this.annotationReferencesService.hasReferences(this._annotations) && !this.multiSelectService.isActive;
     }
 
     get viewerAnnotations() {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
index a0b18557d..0ce73621e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AnnotationWrapper } from '../../../../../../models/file/annotation.wrapper';
 import { File } from '@red/domain';
 import { MultiSelectService } from '../../services/multi-select.service';
@@ -7,6 +7,7 @@ import { MultiSelectService } from '../../services/multi-select.service';
     selector: 'redaction-annotation-card',
     templateUrl: './annotation-card.component.html',
     styleUrls: ['./annotation-card.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnnotationCardComponent {
     @Input() annotation: AnnotationWrapper;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index 1a7a9e97d..0131ae11f 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,51 +1,29 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
 import { File } from '@red/domain';
-import { PdfViewerDataService } from '../../../../services/pdf-viewer-data.service';
 import { FileDataModel } from '@models/file/file-data.model';
 
 @Component({
     selector: 'redaction-annotation-references-dialog',
     templateUrl: './annotation-references-dialog.component.html',
     styleUrls: ['./annotation-references-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AnnotationReferencesDialogComponent implements OnInit, OnChanges {
+export class AnnotationReferencesDialogComponent implements OnChanges {
     @Input()
     annotation: AnnotationWrapper;
     @Input()
     file: File;
+    @Input()
+    fileData: FileDataModel;
     @Output()
     readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
-    fileData: FileDataModel;
     annotationReferences: AnnotationWrapper[];
 
-    constructor(
-        readonly annotationReferencesService: AnnotationReferencesService,
-        private readonly _fileDownloadService: PdfViewerDataService,
-    ) {}
+    constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
 
-    async ngOnInit(): Promise<void> {
-        console.log(this.annotation);
-        await this.setReferences();
-    }
-
-    async ngOnChanges(changes: SimpleChanges): Promise<void> {
-        await this.setReferences();
-    }
-
-    async setReferences(): Promise<void> {
-        await this._loadFileData(this.file);
+    ngOnChanges(changes: SimpleChanges): void {
         this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
     }
-
-    private async _loadFileData(file: File): Promise<void> {
-        const fileData = await this._fileDownloadService.loadDataFor(file, this.fileData).toPromise();
-
-        if (file.isPending) {
-            return;
-        }
-
-        this.fileData = fileData;
-    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
index 42761871a..1bb4e131a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
     selector: 'redaction-annotation-references-page-indicator',
     templateUrl: './annotation-references-page-indicator.component.html',
     styleUrls: ['./annotation-references-page-indicator.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnnotationReferencesPageIndicatorComponent {
     @Input() number;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 1a9e22ec7..638ca717a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -45,8 +45,9 @@
 </div>
 
 <redaction-annotation-references-dialog
+    (referenceClicked)="referenceClicked($event)"
     *ngIf="annotationReferencesService.annotation$ | async as annotation"
     [annotation]="annotation"
+    [fileData]="fileData"
     [file]="file"
-    (referenceClicked)="referenceClicked($event)"
 ></redaction-annotation-references-dialog>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index a3583836d..dca79f580 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -4,6 +4,7 @@ import { FilterService, HelpModeService, IqserEventTarget } from '@iqser/common-
 import { File } from '@red/domain';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
+import { FileDataModel } from '../../../../../../models/file/file-data.model';
 
 @Component({
     selector: 'redaction-annotations-list',
@@ -13,6 +14,7 @@ import { AnnotationReferencesService } from '../../services/annotation-reference
 })
 export class AnnotationsListComponent implements OnChanges {
     @Input() file: File;
+    @Input() fileData: FileDataModel;
     @Input() annotations: AnnotationWrapper[];
     @Input() selectedAnnotations: AnnotationWrapper[];
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
@@ -54,18 +56,10 @@ export class AnnotationsListComponent implements OnChanges {
     referenceClicked(annotation: AnnotationWrapper): void {
         this.annotationClicked(annotation, null);
         if (this._filterService.filtersEnabled('primaryFilters')) {
-            this.toggleFilterAndChildren(annotation);
+            this._filterService.toggleFilter('primaryFilters', annotation.superType);
         }
     }
 
-    toggleFilterAndChildren(annotation: AnnotationWrapper): void {
-        const primaryFilters = this._filterService.getGroup('primaryFilters');
-        const filter = primaryFilters.filters.find(f => f.id === annotation.superType);
-        filter.checked = true;
-        filter.children.forEach(f => (f.checked = true));
-        this._filterService.refresh();
-    }
-
     isSelected(annotationId: string): boolean {
         return !!this.selectedAnnotations?.find(a => a?.annotationId === annotationId);
     }
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 71c41366d..e87104673 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
@@ -203,6 +203,7 @@
                     [annotationActionsTemplate]="annotationActionsTemplate"
                     [annotations]="(displayedAnnotations$ | async)?.get(activeViewerPage)"
                     [canMultiSelect]="!isReadOnly"
+                    [fileData]="fileData"
                     [file]="file"
                     [selectedAnnotations]="selectedAnnotations"
                     iqserHelpMode="workload-annotations-list"
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 b90dd8d93..b8a4fe9b0 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
@@ -107,6 +107,7 @@
                         [annotationActionsTemplate]="annotationActionsTemplate"
                         [annotations]="visibleAnnotations"
                         [dialogRef]="dialogRef"
+                        [fileData]="fileData"
                         [file]="file"
                         [selectedAnnotations]="selectedAnnotations"
                         [viewer]="activeViewer"

From c8f19f68e0c8a46c9743d083554bbb91a18b0964 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 17 Jan 2022 12:53:39 +0200
Subject: [PATCH 14/22] ng-container in list component

---
 ...nnotation-references-dialog.component.html | 48 +++++++++----------
 .../annotations-list.component.html           | 16 ++++---
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index db5334841..0c8b1c976 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,31 +1,29 @@
-<ng-container *ngIf="annotationReferences">
-    <div class="content-container">
-        <div class="dialog references-dialog">
-            <div class="references-header flex">
-                <div class="small-label">
-                    {{ annotationReferences.length }}
-                    {{ (annotationReferences.length === 1 ? 'references.singular' : 'references.plural') | translate }}
-                </div>
-                <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
+<div class="content-container">
+    <div class="dialog references-dialog">
+        <div class="references-header flex">
+            <div class="small-label">
+                {{ annotationReferences.length }}
+                {{ (annotationReferences.length === 1 ? 'references.singular' : 'references.plural') | translate }}
             </div>
-            <div class="annotations-container flex">
-                <div class="annotation-container">
-                    <div class="annotation-card-container flex">
-                        <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
-                        <redaction-annotation-references-page-indicator
-                            [number]="annotation.pageNumber"
-                        ></redaction-annotation-references-page-indicator>
-                    </div>
+            <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
+        </div>
+        <div class="annotations-container flex">
+            <div class="annotation-container">
+                <div class="annotation-card-container flex">
+                    <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
+                    <redaction-annotation-references-page-indicator
+                        [number]="annotation.pageNumber"
+                    ></redaction-annotation-references-page-indicator>
                 </div>
-                <div class="annotation-container" *ngFor="let reference of annotationReferences" (click)="referenceClicked.emit(reference)">
-                    <div class="annotation-card-container flex">
-                        <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
-                        <redaction-annotation-references-page-indicator
-                            [number]="reference.pageNumber"
-                        ></redaction-annotation-references-page-indicator>
-                    </div>
+            </div>
+            <div (click)="referenceClicked.emit(reference)" *ngFor="let reference of annotationReferences" class="annotation-container">
+                <div class="annotation-card-container flex">
+                    <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
+                    <redaction-annotation-references-page-indicator
+                        [number]="reference.pageNumber"
+                    ></redaction-annotation-references-page-indicator>
                 </div>
             </div>
         </div>
     </div>
-</ng-container>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 638ca717a..6e046bfdb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -44,10 +44,12 @@
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
 </div>
 
-<redaction-annotation-references-dialog
-    (referenceClicked)="referenceClicked($event)"
-    *ngIf="annotationReferencesService.annotation$ | async as annotation"
-    [annotation]="annotation"
-    [fileData]="fileData"
-    [file]="file"
-></redaction-annotation-references-dialog>
+<ng-container *ngIf="annotationReferencesService.annotation$ | async as annotation">
+    <redaction-annotation-references-dialog
+        (referenceClicked)="referenceClicked($event)"
+        *ngIf="annotationReferencesService.hasReferences([annotation])"
+        [annotation]="annotation"
+        [fileData]="fileData"
+        [file]="file"
+    ></redaction-annotation-references-dialog>
+</ng-container>

From 409454972dd0568e75b0ea0ebcf8b4dc20a6d066 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 17 Jan 2022 14:20:14 +0200
Subject: [PATCH 15/22] wip has references

---
 .../annotation-actions.component.html          |  4 ++--
 .../annotation-actions.component.ts            |  4 +---
 .../annotation-references-dialog.component.ts  |  4 ++--
 .../annotations-list.component.html            |  6 +++---
 .../annotations-list.component.ts              |  2 +-
 .../services/annotation-references.service.ts  | 18 ++++++++++++------
 6 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 511d3dfde..5bcf080fb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,8 +88,8 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationReferencesService.show(annotations)"
-            *ngIf="referencesButtonEnabled"
+            (action)="annotationReferencesService.show()"
+            *ngIf="(annotationReferencesService.hasReferences$ | async) && !multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index 920578d4a..b888da9f9 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -41,7 +41,6 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input() @Required() file!: File;
     @Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
     annotationPermissions: AnnotationPermissions;
-    referencesButtonEnabled = false;
 
     constructor(
         private readonly _manualAnnotationService: ManualAnnotationService,
@@ -64,8 +63,7 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input()
     set annotations(value: AnnotationWrapper[]) {
         this._annotations = value.filter(a => a !== undefined);
-        this.referencesButtonEnabled =
-            this.annotationReferencesService.hasReferences(this._annotations) && !this.multiSelectService.isActive;
+        this.annotationReferencesService.setAnnotation(this._annotations);
     }
 
     get viewerAnnotations() {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index 0131ae11f..60db300f1 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
 import { File } from '@red/domain';
@@ -23,7 +23,7 @@ export class AnnotationReferencesDialogComponent implements OnChanges {
 
     constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
 
-    ngOnChanges(changes: SimpleChanges): void {
+    ngOnChanges(): void {
         this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 6e046bfdb..291ab7cd0 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -44,11 +44,11 @@
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
 </div>
 
-<ng-container *ngIf="annotationReferencesService.annotation$ | async as annotation">
+<ng-container *ngIf="annotationReferencesService.showReferences$ | async">
     <redaction-annotation-references-dialog
         (referenceClicked)="referenceClicked($event)"
-        *ngIf="annotationReferencesService.hasReferences([annotation])"
-        [annotation]="annotation"
+        *ngIf="annotationReferencesService.hasReferences$ | async"
+        [annotation]="annotationReferencesService.annotation$ | async"
         [fileData]="fileData"
         [file]="file"
     ></redaction-annotation-references-dialog>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index dca79f580..19877e3bc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -56,7 +56,7 @@ export class AnnotationsListComponent implements OnChanges {
     referenceClicked(annotation: AnnotationWrapper): void {
         this.annotationClicked(annotation, null);
         if (this._filterService.filtersEnabled('primaryFilters')) {
-            this._filterService.toggleFilter('primaryFilters', annotation.superType);
+            this._filterService.toggleFilter('primaryFilters', annotation.superType, true);
         }
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
index 26cc1f09e..702f0124f 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
@@ -2,25 +2,31 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { shareDistinctLast } from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class AnnotationReferencesService {
     readonly annotation$: Observable<AnnotationWrapper>;
-    private readonly _annotation$ = new BehaviorSubject(null);
+    readonly hasReferences$: Observable<boolean>;
+    readonly showReferences$: Observable<boolean>;
+    private readonly _annotation$: BehaviorSubject<AnnotationWrapper> = new BehaviorSubject<AnnotationWrapper>(null);
+    private readonly _showReferences$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
     constructor() {
         this.annotation$ = this._annotation$.asObservable().pipe(shareDistinctLast());
+        this.showReferences$ = this._showReferences$.asObservable().pipe(shareDistinctLast());
+        this.hasReferences$ = this.annotation$.pipe(map(annotation => !!annotation.reference && annotation.reference.length !== 0));
     }
 
-    hasReferences(annotations: AnnotationWrapper[]): boolean {
-        return !!annotations[0].reference && annotations[0].reference.length !== 0;
+    setAnnotation(annotation: AnnotationWrapper[]): void {
+        this._annotation$.next(annotation[0]);
     }
 
-    show(annotations: AnnotationWrapper[]) {
-        this._annotation$.next(annotations[0]);
+    show() {
+        this._showReferences$.next(true);
     }
 
     hide() {
-        this._annotation$.next(null);
+        this._showReferences$.next(false);
     }
 }

From fb859ece199f4c1777c4a09ffd57a679aee62bc8 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Tue, 18 Jan 2022 19:00:07 +0200
Subject: [PATCH 16/22] wip reference service instance for every annotation
 card

---
 .../annotation-actions.component.html            |  2 +-
 .../annotation-actions.component.ts              |  1 -
 .../annotation-card.component.html               | 10 ++++++++++
 .../annotation-card/annotation-card.component.ts | 16 +++++++++++++++-
 .../annotations-list.component.html              | 10 ----------
 .../annotations-list.component.ts                |  7 -------
 .../file-workload/file-workload.component.ts     |  2 ++
 .../file-preview-screen.component.ts             |  1 -
 8 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 5bcf080fb..ef03f9bd4 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,7 +88,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationReferencesService.show()"
+            (action)="this.annotationReferencesService.show()"
             *ngIf="(annotationReferencesService.hasReferences$ | async) && !multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index b888da9f9..cbaf54daa 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -63,7 +63,6 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input()
     set annotations(value: AnnotationWrapper[]) {
         this._annotations = value.filter(a => a !== undefined);
-        this.annotationReferencesService.setAnnotation(this._annotations);
     }
 
     get viewerAnnotations() {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
index a23949aed..aef4b4107 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
@@ -20,3 +20,13 @@
         <iqser-round-checkbox *ngIf="(multiSelectService.active$ | async) && isSelected" [active]="true"></iqser-round-checkbox>
     </div>
 </div>
+
+<ng-container *ngIf="annotationReferencesService.showReferences$ | async">
+    <redaction-annotation-references-dialog
+        (referenceClicked)="referenceClicked($event)"
+        *ngIf="annotationReferencesService.hasReferences$ | async"
+        [annotation]="annotationReferencesService.annotation$ | async"
+        [fileData]="fileData"
+        [file]="file"
+    ></redaction-annotation-references-dialog>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
index 0ce73621e..7a796d819 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
@@ -2,17 +2,31 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AnnotationWrapper } from '../../../../../../models/file/annotation.wrapper';
 import { File } from '@red/domain';
 import { MultiSelectService } from '../../services/multi-select.service';
+import { AnnotationReferencesService } from '../../services/annotation-references.service';
 
 @Component({
     selector: 'redaction-annotation-card',
     templateUrl: './annotation-card.component.html',
     styleUrls: ['./annotation-card.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [AnnotationReferencesService],
 })
 export class AnnotationCardComponent {
     @Input() annotation: AnnotationWrapper;
     @Input() file: File;
     @Input() isSelected = false;
 
-    constructor(readonly multiSelectService: MultiSelectService) {}
+    constructor(
+        readonly multiSelectService: MultiSelectService,
+        private readonly _annotationReferenceService: AnnotationReferencesService,
+    ) {
+        this._annotationReferenceService.setAnnotation([this.annotation]);
+    }
+
+    /*referenceClicked(annotation: AnnotationWrapper): void {
+        this.annotationClicked(annotation, null);
+        if (this._filterService.filtersEnabled('primaryFilters')) {
+            this._filterService.toggleFilter('primaryFilters', annotation.superType, true);
+        }
+    }*/
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 291ab7cd0..5a17cc189 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -43,13 +43,3 @@
 
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
 </div>
-
-<ng-container *ngIf="annotationReferencesService.showReferences$ | async">
-    <redaction-annotation-references-dialog
-        (referenceClicked)="referenceClicked($event)"
-        *ngIf="annotationReferencesService.hasReferences$ | async"
-        [annotation]="annotationReferencesService.annotation$ | async"
-        [fileData]="fileData"
-        [file]="file"
-    ></redaction-annotation-references-dialog>
-</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 19877e3bc..57e31df57 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -53,13 +53,6 @@ export class AnnotationsListComponent implements OnChanges {
         }
     }
 
-    referenceClicked(annotation: AnnotationWrapper): void {
-        this.annotationClicked(annotation, null);
-        if (this._filterService.filtersEnabled('primaryFilters')) {
-            this._filterService.toggleFilter('primaryFilters', annotation.superType, true);
-        }
-    }
-
     isSelected(annotationId: string): boolean {
         return !!this.selectedAnnotations?.find(a => a?.annotationId === annotationId);
     }
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 584a25e84..2420dba07 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
@@ -33,6 +33,7 @@ import { ExcludedPagesService } from '../../services/excluded-pages.service';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { DocumentInfoService } from '../../services/document-info.service';
 import { SkippedService } from '../../services/skipped.service';
+import { FileDataModel } from '../../../../../../models/file/file-data.model';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -55,6 +56,7 @@ export class FileWorkloadComponent {
     @Input() file!: File;
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
     @Input() viewer: WebViewerInstance;
+    @Input() fileData: FileDataModel;
     @Output() readonly shouldDeselectAnnotationsOnPageChangeChange = new EventEmitter<boolean>();
     @Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>();
     @Output() readonly deselectAnnotations = new EventEmitter<AnnotationWrapper[]>();
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 77b752277..77cfc792e 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
@@ -51,7 +51,6 @@ 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;
-import { AnnotationReferencesService } from './services/annotation-references.service';
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown'];
 

From d688a732912c59e424c3cf613ebd355e9444f8fa Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Tue, 25 Jan 2022 20:27:36 +0200
Subject: [PATCH 17/22] fix rebase & reference dialog back in list component

---
 .../annotation-actions.component.html            |  4 ++--
 .../annotation-actions.component.ts              |  4 ++++
 .../annotation-card.component.html               | 10 ----------
 .../annotation-card/annotation-card.component.ts | 16 +---------------
 .../annotations-list.component.html              | 10 ++++++++++
 .../annotations-list.component.ts                |  7 +++++++
 .../file-preview-screen.component.ts             | 14 +-------------
 .../services/annotation-references.service.ts    | 11 +++--------
 8 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index ef03f9bd4..2e1736fe0 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,8 +88,8 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="this.annotationReferencesService.show()"
-            *ngIf="(annotationReferencesService.hasReferences$ | async) && !multiSelectService.isActive"
+            (action)="this.annotationReferencesService.show(annotations)"
+            *ngIf="hasReferences && !multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index cbaf54daa..a979e0a83 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -65,6 +65,10 @@ export class AnnotationActionsComponent implements OnChanges {
         this._annotations = value.filter(a => a !== undefined);
     }
 
+    get hasReferences(): boolean {
+        return !!this.annotations[0].reference && this.annotations[0].reference.length !== 0;
+    }
+
     get viewerAnnotations() {
         if (this.viewer?.Core.annotationManager) {
             return this._annotations.map(a => this.viewer?.Core.annotationManager?.getAnnotationById(a.id));
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
index aef4b4107..a23949aed 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
@@ -20,13 +20,3 @@
         <iqser-round-checkbox *ngIf="(multiSelectService.active$ | async) && isSelected" [active]="true"></iqser-round-checkbox>
     </div>
 </div>
-
-<ng-container *ngIf="annotationReferencesService.showReferences$ | async">
-    <redaction-annotation-references-dialog
-        (referenceClicked)="referenceClicked($event)"
-        *ngIf="annotationReferencesService.hasReferences$ | async"
-        [annotation]="annotationReferencesService.annotation$ | async"
-        [fileData]="fileData"
-        [file]="file"
-    ></redaction-annotation-references-dialog>
-</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
index 7a796d819..0ce73621e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
@@ -2,31 +2,17 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AnnotationWrapper } from '../../../../../../models/file/annotation.wrapper';
 import { File } from '@red/domain';
 import { MultiSelectService } from '../../services/multi-select.service';
-import { AnnotationReferencesService } from '../../services/annotation-references.service';
 
 @Component({
     selector: 'redaction-annotation-card',
     templateUrl: './annotation-card.component.html',
     styleUrls: ['./annotation-card.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [AnnotationReferencesService],
 })
 export class AnnotationCardComponent {
     @Input() annotation: AnnotationWrapper;
     @Input() file: File;
     @Input() isSelected = false;
 
-    constructor(
-        readonly multiSelectService: MultiSelectService,
-        private readonly _annotationReferenceService: AnnotationReferencesService,
-    ) {
-        this._annotationReferenceService.setAnnotation([this.annotation]);
-    }
-
-    /*referenceClicked(annotation: AnnotationWrapper): void {
-        this.annotationClicked(annotation, null);
-        if (this._filterService.filtersEnabled('primaryFilters')) {
-            this._filterService.toggleFilter('primaryFilters', annotation.superType, true);
-        }
-    }*/
+    constructor(readonly multiSelectService: MultiSelectService) {}
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 5a17cc189..c5541b38a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -43,3 +43,13 @@
 
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
 </div>
+
+<ng-container *ngIf="annotationReferencesService.annotation$ | async as annotation">
+    <redaction-annotation-references-dialog
+        (referenceClicked)="referenceClicked($event)"
+        *ngIf="annotationReferencesService.showReferences$ | async"
+        [annotation]="annotation"
+        [fileData]="fileData"
+        [file]="file"
+    ></redaction-annotation-references-dialog>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 57e31df57..19877e3bc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -53,6 +53,13 @@ export class AnnotationsListComponent implements OnChanges {
         }
     }
 
+    referenceClicked(annotation: AnnotationWrapper): void {
+        this.annotationClicked(annotation, null);
+        if (this._filterService.filtersEnabled('primaryFilters')) {
+            this._filterService.toggleFilter('primaryFilters', annotation.superType, true);
+        }
+    }
+
     isSelected(annotationId: string): boolean {
         return !!this.selectedAnnotations?.find(a => a?.annotationId === annotationId);
     }
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 77cfc792e..cdc234bc3 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
@@ -49,6 +49,7 @@ 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 { AnnotationReferencesService } from './services/annotation-references.service';
 import Annotation = Core.Annotations.Annotation;
 import PDFNet = Core.PDFNet;
 
@@ -154,19 +155,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         return this._stateService.fileData;
     }
 
-    private _setActiveViewerPage() {
-        const currentPage = this._instance?.Core.documentViewer?.getCurrentPage();
-        if (!currentPage) {
-            this.activeViewerPage = 1;
-        } else {
-            this.activeViewerPage = this.viewModeService.isCompare
-                ? currentPage % 2 === 0
-                    ? currentPage / 2
-                    : (currentPage + 1) / 2
-                : currentPage;
-        }
-    }
-
     private get _viewDocumentInfo$() {
         return this.documentInfoService.shown$.pipe(
             tap(value => {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
index 702f0124f..3cbeab42c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
@@ -2,12 +2,10 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { shareDistinctLast } from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { map } from 'rxjs/operators';
 
 @Injectable()
 export class AnnotationReferencesService {
     readonly annotation$: Observable<AnnotationWrapper>;
-    readonly hasReferences$: Observable<boolean>;
     readonly showReferences$: Observable<boolean>;
     private readonly _annotation$: BehaviorSubject<AnnotationWrapper> = new BehaviorSubject<AnnotationWrapper>(null);
     private readonly _showReferences$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
@@ -15,18 +13,15 @@ export class AnnotationReferencesService {
     constructor() {
         this.annotation$ = this._annotation$.asObservable().pipe(shareDistinctLast());
         this.showReferences$ = this._showReferences$.asObservable().pipe(shareDistinctLast());
-        this.hasReferences$ = this.annotation$.pipe(map(annotation => !!annotation.reference && annotation.reference.length !== 0));
     }
 
-    setAnnotation(annotation: AnnotationWrapper[]): void {
-        this._annotation$.next(annotation[0]);
-    }
-
-    show() {
+    show(annotations: AnnotationWrapper[]) {
+        this._annotation$.next(annotations[0]);
         this._showReferences$.next(true);
     }
 
     hide() {
+        this._annotation$.next(null);
         this._showReferences$.next(false);
     }
 }

From acc67cade4a3570d46c9328cf327bbb113422cc9 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 27 Jan 2022 13:39:03 +0200
Subject: [PATCH 18/22] fix pr comments

---
 .../src/app/models/file/annotation.wrapper.ts   |  4 ++--
 .../annotation-actions.component.html           |  4 ++--
 .../annotation-actions.component.ts             |  6 ------
 .../annotation-references-list.component.html}  |  0
 .../annotation-references-list.component.scss}  |  0
 .../annotation-references-list.component.ts}    | 17 +++++++----------
 ...ation-references-page-indicator.component.ts |  2 +-
 .../annotations-list.component.html             |  5 ++---
 .../file-preview-screen.component.ts            | 12 ------------
 .../file-preview-screen/file-preview.module.ts  |  4 ++--
 .../services/annotation-references.service.ts   | 13 ++++---------
 package.json                                    | 14 +++++++-------
 12 files changed, 27 insertions(+), 54 deletions(-)
 rename apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/{annotation-references-dialog/annotation-references-dialog.component.html => annotation-references-list/annotation-references-list.component.html} (100%)
 rename apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/{annotation-references-dialog/annotation-references-dialog.component.scss => annotation-references-list/annotation-references-list.component.scss} (100%)
 rename apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/{annotation-references-dialog/annotation-references-dialog.component.ts => annotation-references-list/annotation-references-list.component.ts} (68%)

diff --git a/apps/red-ui/src/app/models/file/annotation.wrapper.ts b/apps/red-ui/src/app/models/file/annotation.wrapper.ts
index 9c4ee46e7..6751a0812 100644
--- a/apps/red-ui/src/app/models/file/annotation.wrapper.ts
+++ b/apps/red-ui/src/app/models/file/annotation.wrapper.ts
@@ -46,7 +46,7 @@ export class AnnotationWrapper {
     rectangle?: boolean;
     hintDictionary?: boolean;
     section?: string;
-    reference?: Array<string>;
+    reference: Array<string>;
 
     manual?: boolean;
 
@@ -260,7 +260,7 @@ export class AnnotationWrapper {
         annotationWrapper.manual = redactionLogEntry.manual;
         annotationWrapper.engines = redactionLogEntry.engines;
         annotationWrapper.section = redactionLogEntry.section;
-        annotationWrapper.reference = redactionLogEntry.reference;
+        annotationWrapper.reference = redactionLogEntry.reference || [];
         annotationWrapper.rectangle = redactionLogEntry.rectangle;
         annotationWrapper.hasBeenResized = redactionLogEntry.hasBeenResized;
         annotationWrapper.hasBeenRecategorized = redactionLogEntry.hasBeenRecategorized;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 2e1736fe0..6ce94bc3e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,8 +88,8 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="this.annotationReferencesService.show(annotations)"
-            *ngIf="hasReferences && !multiSelectService.isActive"
+            (action)="this.annotationReferencesService.show(annotations[0])"
+            *ngIf="annotations[0].reference.length !== 0 && !multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index a979e0a83..a92da4de6 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -16,7 +16,6 @@ import {
 } from '../../dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
 import { filter } from 'rxjs/operators';
 import { ManualAnnotationService } from '../../../../services/manual-annotation.service';
-import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
 import { MultiSelectService } from '../../services/multi-select.service';
 
@@ -51,7 +50,6 @@ export class AnnotationActionsComponent implements OnChanges {
         private readonly _dossiersService: DossiersService,
         private readonly _userService: UserService,
         private readonly _dialog: MatDialog,
-        private readonly _dialogService: DossiersDialogService,
     ) {}
 
     private _annotations: AnnotationWrapper[];
@@ -65,10 +63,6 @@ export class AnnotationActionsComponent implements OnChanges {
         this._annotations = value.filter(a => a !== undefined);
     }
 
-    get hasReferences(): boolean {
-        return !!this.annotations[0].reference && this.annotations[0].reference.length !== 0;
-    }
-
     get viewerAnnotations() {
         if (this.viewer?.Core.annotationManager) {
             return this._annotations.map(a => this.viewer?.Core.annotationManager?.getAnnotationById(a.id));
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
rename to apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
similarity index 68%
rename from apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
rename to apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
index 60db300f1..892e6be51 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
@@ -5,18 +5,15 @@ import { File } from '@red/domain';
 import { FileDataModel } from '@models/file/file-data.model';
 
 @Component({
-    selector: 'redaction-annotation-references-dialog',
-    templateUrl: './annotation-references-dialog.component.html',
-    styleUrls: ['./annotation-references-dialog.component.scss'],
+    selector: 'redaction-annotation-references-list',
+    templateUrl: './annotation-references-list.component.html',
+    styleUrls: ['./annotation-references-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AnnotationReferencesDialogComponent implements OnChanges {
-    @Input()
-    annotation: AnnotationWrapper;
-    @Input()
-    file: File;
-    @Input()
-    fileData: FileDataModel;
+export class AnnotationReferencesListComponent implements OnChanges {
+    @Input() annotation: AnnotationWrapper;
+    @Input() file: File;
+    @Input() fileData: FileDataModel;
     @Output()
     readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
     annotationReferences: AnnotationWrapper[];
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
index 1bb4e131a..55edb86bc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
@@ -7,5 +7,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnnotationReferencesPageIndicatorComponent {
-    @Input() number;
+    @Input() number: number;
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index c5541b38a..8f11088a1 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -45,11 +45,10 @@
 </div>
 
 <ng-container *ngIf="annotationReferencesService.annotation$ | async as annotation">
-    <redaction-annotation-references-dialog
+    <redaction-annotation-references-list
         (referenceClicked)="referenceClicked($event)"
-        *ngIf="annotationReferencesService.showReferences$ | async"
         [annotation]="annotation"
         [fileData]="fileData"
         [file]="file"
-    ></redaction-annotation-references-dialog>
+    ></redaction-annotation-references-list>
 </ng-container>
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 cdc234bc3..006d1700e 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
@@ -155,18 +155,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         return this._stateService.fileData;
     }
 
-    private get _viewDocumentInfo$() {
-        return this.documentInfoService.shown$.pipe(
-            tap(value => {
-                if (value) {
-                    this.multiSelectService.deactivate();
-                    this.excludedPagesService.hide();
-                }
-            }),
-            shareDistinctLast(),
-        );
-    }
-
     private get _canPerformAnnotationActions$() {
         return combineLatest([
             this._stateService.fileData$.pipe(switchMap(fileData => fileData.file$)),
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
index ee9ce8bf2..386d9c254 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
@@ -19,7 +19,7 @@ import { TypeAnnotationIconComponent } from './components/type-annotation-icon/t
 import { OverlayModule } from '@angular/cdk/overlay';
 import { ViewSwitchComponent } from './components/view-switch/view-switch.component';
 import { UserManagementComponent } from './components/user-management/user-management.component';
-import { AnnotationReferencesDialogComponent } from './components/annotation-references-dialog/annotation-references-dialog.component';
+import { AnnotationReferencesListComponent } from './components/annotation-references-list/annotation-references-list.component';
 import { AcceptRecommendationDialogComponent } from './dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
 import { AnnotationCardComponent } from './components/annotation-card/annotation-card.component';
 import { AnnotationReferencesPageIndicatorComponent } from './components/annotation-references-page-indicator/annotation-references-page-indicator.component';
@@ -49,7 +49,7 @@ const routes: Routes = [
         ViewSwitchComponent,
         UserManagementComponent,
         AcceptRecommendationDialogComponent,
-        AnnotationReferencesDialogComponent,
+        AnnotationReferencesListComponent,
         AnnotationCardComponent,
         AnnotationReferencesPageIndicatorComponent,
     ],
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
index 3cbeab42c..5cdca8162 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
@@ -6,22 +6,17 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 @Injectable()
 export class AnnotationReferencesService {
     readonly annotation$: Observable<AnnotationWrapper>;
-    readonly showReferences$: Observable<boolean>;
-    private readonly _annotation$: BehaviorSubject<AnnotationWrapper> = new BehaviorSubject<AnnotationWrapper>(null);
-    private readonly _showReferences$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    private readonly _annotation$ = new BehaviorSubject<AnnotationWrapper | undefined>(undefined);
 
     constructor() {
         this.annotation$ = this._annotation$.asObservable().pipe(shareDistinctLast());
-        this.showReferences$ = this._showReferences$.asObservable().pipe(shareDistinctLast());
     }
 
-    show(annotations: AnnotationWrapper[]) {
-        this._annotation$.next(annotations[0]);
-        this._showReferences$.next(true);
+    show(annotation: AnnotationWrapper) {
+        this._annotation$.next(annotation);
     }
 
     hide() {
-        this._annotation$.next(null);
-        this._showReferences$.next(false);
+        this._annotation$.next(undefined);
     }
 }
diff --git a/package.json b/package.json
index 329e0c1ab..150d95c88 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@nrwl/angular": "13.4.5",
+    "@nrwl/angular": "13.5.3",
     "@pdftron/webviewer": "8.2.0",
     "@swimlane/ngx-charts": "^20.0.1",
     "file-saver": "^2.0.5",
@@ -70,12 +70,12 @@
     "@angular/compiler-cli": "13.1.2",
     "@angular/language-service": "13.1.2",
     "@bartholomej/ngx-translate-extract": "^8.0.2",
-    "@nrwl/cli": "13.4.5",
-    "@nrwl/eslint-plugin-nx": "13.4.5",
-    "@nrwl/jest": "13.4.5",
-    "@nrwl/linter": "13.4.5",
-    "@nrwl/tao": "13.4.5",
-    "@nrwl/workspace": "13.4.5",
+    "@nrwl/cli": "13.5.3",
+    "@nrwl/eslint-plugin-nx": "13.5.3",
+    "@nrwl/jest": "13.5.3",
+    "@nrwl/linter": "13.5.3",
+    "@nrwl/tao": "13.5.3",
+    "@nrwl/workspace": "13.5.3",
     "@types/jest": "27.4.0",
     "@types/lodash": "^4.14.178",
     "@types/node": "17.0.9",

From c9c05b920bd4802932ab6b7c79e41ff4c9b9d8d5 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 27 Jan 2022 20:15:55 +0200
Subject: [PATCH 19/22] reference grey background when selected

---
 .../annotation-actions/annotation-actions.component.html | 4 ++--
 .../annotation-references-list.component.html            | 9 +++++++--
 .../annotation-references-list.component.scss            | 4 ----
 .../annotation-references-list.component.ts              | 8 ++++++--
 .../annotations-list/annotations-list.component.html     | 1 +
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 6ce94bc3e..90a83df7a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,8 +88,8 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="this.annotationReferencesService.show(annotations[0])"
-            *ngIf="annotations[0].reference.length !== 0 && !multiSelectService.isActive"
+            (action)="annotationReferencesService.show(annotations[0])"
+            *ngIf="annotations[0].reference.length && !multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
index 0c8b1c976..a5a00454a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
         </div>
         <div class="annotations-container flex">
-            <div class="annotation-container">
+            <div [style.background-color]="isSelected(annotation.id) ? 'var(--iqser-grey-8)' : ''" class="annotation-container">
                 <div class="annotation-card-container flex">
                     <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
                     <redaction-annotation-references-page-indicator
@@ -16,7 +16,12 @@
                     ></redaction-annotation-references-page-indicator>
                 </div>
             </div>
-            <div (click)="referenceClicked.emit(reference)" *ngFor="let reference of annotationReferences" class="annotation-container">
+            <div
+                (click)="referenceClicked.emit(reference)"
+                *ngFor="let reference of annotationReferences"
+                [style.background-color]="isSelected(reference.id) ? 'var(--iqser-grey-8)' : ''"
+                class="annotation-container"
+            >
                 <div class="annotation-card-container flex">
                     <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
                     <redaction-annotation-references-page-indicator
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
index 5ce1707f2..3731b49ac 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
@@ -22,10 +22,6 @@
             width: 100%;
             border-top: 1px solid rgba(226, 228, 233, 0.9);
 
-            &:first-child {
-                background-color: var(--iqser-grey-8);
-            }
-
             &:not(:first-child) {
                 cursor: pointer;
             }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
index 892e6be51..b759f0d94 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
@@ -14,8 +14,8 @@ export class AnnotationReferencesListComponent implements OnChanges {
     @Input() annotation: AnnotationWrapper;
     @Input() file: File;
     @Input() fileData: FileDataModel;
-    @Output()
-    readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
+    @Input() selectedAnnotations: AnnotationWrapper[];
+    @Output() readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
     annotationReferences: AnnotationWrapper[];
 
     constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
@@ -23,4 +23,8 @@ export class AnnotationReferencesListComponent implements OnChanges {
     ngOnChanges(): void {
         this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
     }
+
+    isSelected(annotationId: string): boolean {
+        return this.selectedAnnotations.some(a => a.annotationId === annotationId);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 8f11088a1..77df13518 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -50,5 +50,6 @@
         [annotation]="annotation"
         [fileData]="fileData"
         [file]="file"
+        [selectedAnnotations]="selectedAnnotations"
     ></redaction-annotation-references-list>
 </ng-container>

From 53949a0f655c3f9ec6ef0032befe1d42d4d6382e Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 27 Jan 2022 20:31:26 +0200
Subject: [PATCH 20/22] class.active instead of style.background

---
 .../annotation-references-list.component.html               | 4 ++--
 .../annotation-references-list.component.scss               | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
index a5a00454a..fe7f4ac8d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
         </div>
         <div class="annotations-container flex">
-            <div [style.background-color]="isSelected(annotation.id) ? 'var(--iqser-grey-8)' : ''" class="annotation-container">
+            <div [class.active]="isSelected(annotation.id)" class="annotation-container">
                 <div class="annotation-card-container flex">
                     <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
                     <redaction-annotation-references-page-indicator
@@ -19,7 +19,7 @@
             <div
                 (click)="referenceClicked.emit(reference)"
                 *ngFor="let reference of annotationReferences"
-                [style.background-color]="isSelected(reference.id) ? 'var(--iqser-grey-8)' : ''"
+                [class.active]="isSelected(reference.id)"
                 class="annotation-container"
             >
                 <div class="annotation-card-container flex">
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
index 3731b49ac..55585cd01 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
@@ -1,4 +1,4 @@
-@use 'common-mixins' as mixins;
+@use 'variables';
 
 .references-dialog {
     position: fixed;
@@ -22,6 +22,10 @@
             width: 100%;
             border-top: 1px solid rgba(226, 228, 233, 0.9);
 
+            &.active {
+                background-color: variables.$grey-8;
+            }
+
             &:not(:first-child) {
                 cursor: pointer;
             }

From 98ecc5a7f20c39fb7d7afa99ad56b24fb45f275e Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 27 Jan 2022 20:39:53 +0200
Subject: [PATCH 21/22] yarn lock update

---
 yarn.lock | 266 +++++++++++++++++-------------------------------------
 1 file changed, 82 insertions(+), 184 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 52d4f0e75..054541cb7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1570,7 +1570,7 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f"
   integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==
 
-"@eslint/eslintrc@^1.0.4", "@eslint/eslintrc@^1.0.5":
+"@eslint/eslintrc@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318"
   integrity sha512-BLxsnmK3KyPunz5wmCCpqy0YelEoxxGmH73Is+Z74oOTMtExcjkr3dDR6quwrjh1YspA8DH9gnX1o069KiS9AQ==
@@ -1590,15 +1590,6 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
   integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==
 
-"@humanwhocodes/config-array@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.6.0.tgz#b5621fdb3b32309d2d16575456cbc277fa8f021a"
-  integrity sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==
-  dependencies:
-    "@humanwhocodes/object-schema" "^1.2.0"
-    debug "^4.1.1"
-    minimatch "^3.0.4"
-
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"
@@ -1608,7 +1599,7 @@
     debug "^4.1.1"
     minimatch "^3.0.4"
 
-"@humanwhocodes/object-schema@^1.2.0", "@humanwhocodes/object-schema@^1.2.1":
+"@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
@@ -2054,20 +2045,19 @@
     node-gyp "^8.2.0"
     read-package-json-fast "^2.0.1"
 
-"@nrwl/angular@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/angular/-/angular-13.4.5.tgz#fa000ff7d62a158af151800a0d78d8c75f950f01"
-  integrity sha512-XzVG9SLgAYdPh7JHrUse5/l9R+QTsPWxBwsLH9SFgsO675+0yeTDgnppeaJWpgVwIMf3+kcZoxynoltPc+iI7Q==
+"@nrwl/angular@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/angular/-/angular-13.5.3.tgz#ea21b45734b317b8fff84fd04ff9950175e22d6c"
+  integrity sha512-Fh0x9Cz0OMWYx8By1cFLjzKmT2GZY8Se9rqd/31fftVwdftOpt0lrTIrVtb+b16195JAKpCsLvNJlZmp6AOeiQ==
   dependencies:
     "@angular-devkit/schematics" "~13.1.0"
-    "@nrwl/cypress" "13.4.5"
-    "@nrwl/devkit" "13.4.5"
-    "@nrwl/jest" "13.4.5"
-    "@nrwl/linter" "13.4.5"
-    "@nrwl/storybook" "13.4.5"
+    "@nrwl/cypress" "13.5.3"
+    "@nrwl/devkit" "13.5.3"
+    "@nrwl/jest" "13.5.3"
+    "@nrwl/linter" "13.5.3"
+    "@nrwl/storybook" "13.5.3"
     "@phenomnomnominal/tsquery" "4.1.1"
     "@schematics/angular" "~13.1.0"
-    find-parent-dir "^0.3.1"
     ignore "^5.0.4"
     jasmine-marbles "~0.8.4"
     rxjs-for-await "0.0.2"
@@ -2077,27 +2067,26 @@
     tslib "^2.3.0"
     webpack-merge "5.7.3"
 
-"@nrwl/cli@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/cli/-/cli-13.4.5.tgz#21937c66d7bc7d2109c5e32b7ed2f1bbf8509979"
-  integrity sha512-CyiGIBhVd2EEx3+HST5TwOwI6kL8zKvWBMXrHs0jAB9lJIjqdzLdTPYHsfLOcAYsl08l8eySVVCkGr9UG5XSPQ==
+"@nrwl/cli@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/cli/-/cli-13.5.3.tgz#3b32247e9f9703f95f6e066f6000da2f32ad4e9a"
+  integrity sha512-TMh8FfF6PPnjuxoSIU0wFVtE6xcf5UfxmX0pSy+ztEDU66RBSPwUxbHUFZGMKrT7jNZLutqmziwi89leTngvfw==
   dependencies:
-    "@nrwl/tao" "13.4.5"
+    "@nrwl/tao" "13.5.3"
     chalk "4.1.0"
     enquirer "~2.3.6"
     v8-compile-cache "2.3.0"
-    yargs "15.4.1"
     yargs-parser "20.0.0"
 
-"@nrwl/cypress@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/cypress/-/cypress-13.4.5.tgz#88bd7eb4818f27ebc13328b0ad904168231af864"
-  integrity sha512-hQ3lUHuiTqynvOnvTtJTWzeb7N6RrGntjwjH3CpPgTOKWz1Zj7YXGGULrl4dC/xFeKBlm1ptDX3bbxrZjdePVQ==
+"@nrwl/cypress@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/cypress/-/cypress-13.5.3.tgz#09fb88e8ea273533e1312058c7d0eb711fe7fca0"
+  integrity sha512-iM6k9nQrRKX+5pTaKibGPw78+apZtGFvZFV0fu5LaRqBA/0XS4QrKzC2k2MSyDCVmW+X25X17P3J6sbBqACESA==
   dependencies:
     "@cypress/webpack-preprocessor" "^5.9.1"
-    "@nrwl/devkit" "13.4.5"
-    "@nrwl/linter" "13.4.5"
-    "@nrwl/workspace" "13.4.5"
+    "@nrwl/devkit" "13.5.3"
+    "@nrwl/linter" "13.5.3"
+    "@nrwl/workspace" "13.5.3"
     chalk "4.1.0"
     enhanced-resolve "^5.8.3"
     fork-ts-checker-webpack-plugin "6.2.10"
@@ -2107,40 +2096,40 @@
     tsconfig-paths-webpack-plugin "3.4.1"
     tslib "^2.3.0"
     webpack-node-externals "^3.0.0"
-    yargs-parser "20.0.0"
 
-"@nrwl/devkit@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/devkit/-/devkit-13.4.5.tgz#e0da52ea91eae1480e46461f0ea6031021a3177a"
-  integrity sha512-Q3jZxf4T0KKG851s9AVziaEg9rIZcBePCdE70/sQRcuFMRAjny/bt3IEzMPID1Rg12bKnAXy6sWSKjZ8xKToxg==
+"@nrwl/devkit@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/devkit/-/devkit-13.5.3.tgz#efa41af408384a39b00c23f4340c55b37f9f0193"
+  integrity sha512-Fg2n5KjCbKn2c5lRGpYzuyB2x385RJmsyJ+7EE230MCTJaw5OXk7U02hrK+nL5dZltEmI06VH409FAEwVyOUqw==
   dependencies:
-    "@nrwl/tao" "13.4.5"
+    "@nrwl/tao" "13.5.3"
     ejs "^3.1.5"
     ignore "^5.0.4"
     rxjs "^6.5.4"
     semver "7.3.4"
     tslib "^2.3.0"
 
-"@nrwl/eslint-plugin-nx@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/eslint-plugin-nx/-/eslint-plugin-nx-13.4.5.tgz#8d0e748d9e68c796f7991a147cf9b54e0ff38ad7"
-  integrity sha512-LzBKxsLZ8S1ZdKtDwKtrT07RCnKaHrTQn6Z9odLWm8s9MpOISoYcLzJm7symWYHc7u7+EOFTAK6F7V1bbzgnwg==
+"@nrwl/eslint-plugin-nx@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/eslint-plugin-nx/-/eslint-plugin-nx-13.5.3.tgz#487f6cd34982c84429b54a505b1270ddf49d95e1"
+  integrity sha512-UUsD15npa5srrPEFnuWAzzfNejvxg8H2iKBmxQXbtXSnXfCYDoi7ahk90CH2/lV7T7fFldyltlItpjXd/t44Mg==
   dependencies:
-    "@nrwl/devkit" "13.4.5"
-    "@nrwl/workspace" "13.4.5"
+    "@nrwl/devkit" "13.5.3"
+    "@nrwl/workspace" "13.5.3"
     "@typescript-eslint/experimental-utils" "~5.3.0"
+    chalk "4.1.0"
     confusing-browser-globals "^1.0.9"
     ts-node "^9.1.1"
     tsconfig-paths "^3.9.0"
 
-"@nrwl/jest@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/jest/-/jest-13.4.5.tgz#c4fa11bfac32b1ff2c85ec1737c8bbf2d095691b"
-  integrity sha512-6ARJQXe7wswtrKuakSP5iNSqLC/GYJtY5ACKLjFN73JgIuV8rjlSlqEuNs4CSc89YpDegtbgNq/rRzOLabKScg==
+"@nrwl/jest@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/jest/-/jest-13.5.3.tgz#487d9d010ff9511a04ef45f9305a44443cc145c8"
+  integrity sha512-PCBX/4LxKKWxrsgqj0ejAWwT64Iv6fejntZsyQNr2yzDSZY/sQL4XJ8EbVH4yivzxqn3F1+blmpDrDLlAhDy6g==
   dependencies:
     "@jest/reporters" "27.2.2"
     "@jest/test-result" "27.2.2"
-    "@nrwl/devkit" "13.4.5"
+    "@nrwl/devkit" "13.5.3"
     chalk "4.1.0"
     identity-obj-proxy "3.0.0"
     jest-config "27.2.2"
@@ -2150,38 +2139,35 @@
     rxjs "^6.5.4"
     tslib "^2.3.0"
 
-"@nrwl/linter@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/linter/-/linter-13.4.5.tgz#44ab2441f391c917f0868ac034135393002341fe"
-  integrity sha512-VCKud1DG9h9zShB/Kn7DQ5Da4dJhqYvlQ06O6ViNixKp70ghg4PgVWhxEQixDzk5Xt9EB+fVFnVpnm82mSyxzg==
+"@nrwl/linter@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/linter/-/linter-13.5.3.tgz#d5547bd6a6b40a2d1bb08e9d50dfd219ea6d8390"
+  integrity sha512-xiQVPlhLjesFdt9uHXV4GtuFgiUbx9cATc3At1R6xHkdd7Lbqv/deq+FWJKnGb5MgTpvzyQc/gNUvfSyKoSBsA==
   dependencies:
-    "@nrwl/devkit" "13.4.5"
-    "@nrwl/jest" "13.4.5"
+    "@nrwl/devkit" "13.5.3"
+    "@nrwl/jest" "13.5.3"
     "@phenomnomnominal/tsquery" "4.1.1"
-    eslint "8.2.0"
-    glob "7.1.4"
-    minimatch "3.0.4"
     tmp "~0.2.1"
     tslib "^2.3.0"
 
-"@nrwl/storybook@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/storybook/-/storybook-13.4.5.tgz#b86310ae9465633285d80fc4a546a60f3e21479a"
-  integrity sha512-5wg3xwkclrNybeTMv3lui48roPZgd6LNa8hKeb5/g8GAic5W0OGglGNiLXOlIY0kAs5KIVhvz+7ZXSBVpDuSlw==
+"@nrwl/storybook@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/storybook/-/storybook-13.5.3.tgz#1f684cc1e068e44c6a5c35ec7b856a0c4d4204ae"
+  integrity sha512-sZMQCu/FCMdYgJ/JtqWYEnwG9fgoQUXzAAMtkIpYP3fDlKAh8hCASBO1oQmz2CNjp+iAaIgN4ZRzA9uEMeMJDA==
   dependencies:
-    "@nrwl/cypress" "13.4.5"
-    "@nrwl/devkit" "13.4.5"
-    "@nrwl/linter" "13.4.5"
-    "@nrwl/workspace" "13.4.5"
+    "@nrwl/cypress" "13.5.3"
+    "@nrwl/devkit" "13.5.3"
+    "@nrwl/linter" "13.5.3"
+    "@nrwl/workspace" "13.5.3"
     core-js "^3.6.5"
     semver "7.3.4"
     ts-loader "^9.2.6"
     tsconfig-paths-webpack-plugin "3.4.1"
 
-"@nrwl/tao@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/tao/-/tao-13.4.5.tgz#bb61a1280a10dfca8956af42cb3e60443381b2b3"
-  integrity sha512-DYVmYDEeJ9zLagU52nVXBdA+0SXrypmydrxFLhEAc79tlForNX3dmjqePhNDq7JqllmD643DiNh0pydgsPzUdQ==
+"@nrwl/tao@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/tao/-/tao-13.5.3.tgz#5112120395968916080216d530d62b0928513820"
+  integrity sha512-YAHW4yGROt+a8yDrgG9UxrmSyi62S0Pi6EhLluk5e9s/sNJM1k2NfoVCzZMZYsCbv4tKYv4RSlqf3EQMe28uJw==
   dependencies:
     chalk "4.1.0"
     enquirer "~2.3.6"
@@ -2189,7 +2175,7 @@
     fs-extra "^9.1.0"
     ignore "^5.0.4"
     jsonc-parser "3.0.0"
-    nx "13.4.5"
+    nx "13.5.3"
     rxjs "^6.5.4"
     rxjs-for-await "0.0.2"
     semver "7.3.4"
@@ -2197,20 +2183,20 @@
     tslib "^2.3.0"
     yargs-parser "20.0.0"
 
-"@nrwl/workspace@13.4.5":
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/@nrwl/workspace/-/workspace-13.4.5.tgz#ca449ee876d1e242c23f5189daff3629a713d88f"
-  integrity sha512-1tw8bJHL55QqVhLMRosXhTeAAxv3NFkBIVY3NodbqQXPlF3qKnly6vWqga9KpKr7quPvD+9DzEpCdP/7K7QoEw==
+"@nrwl/workspace@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/workspace/-/workspace-13.5.3.tgz#2dc369a0c6bc9b483edcc48375a6c9547719bb98"
+  integrity sha512-ZY7HGPhs0w0neXLXJgbIYd36+FZuc8LHgaxhExsK9vdusuaXhNVyMkR+TmbtN9sXAB0ZN0+hzcty+V7ncn4sHQ==
   dependencies:
-    "@nrwl/cli" "13.4.5"
-    "@nrwl/devkit" "13.4.5"
-    "@nrwl/jest" "13.4.5"
-    "@nrwl/linter" "13.4.5"
+    "@nrwl/cli" "13.5.3"
+    "@nrwl/devkit" "13.5.3"
+    "@nrwl/jest" "13.5.3"
+    "@nrwl/linter" "13.5.3"
     "@parcel/watcher" "2.0.4"
     chalk "4.1.0"
     chokidar "^3.5.1"
+    cli-cursor "3.1.0"
     cli-spinners "2.6.1"
-    cosmiconfig "^4.0.0"
     dotenv "~10.0.0"
     enquirer "~2.3.6"
     figures "3.2.0"
@@ -2223,7 +2209,6 @@
     open "^7.4.2"
     rxjs "^6.5.4"
     semver "7.3.4"
-    strip-ansi "6.0.0"
     tmp "~0.2.1"
     tslib "^2.3.0"
     yargs "15.4.1"
@@ -3165,7 +3150,7 @@ ansi-html-community@^0.0.8:
   resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
   integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
 
-ansi-regex@^5.0.0, ansi-regex@^5.0.1:
+ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
@@ -4177,7 +4162,7 @@ cli-boxes@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-3.0.0.tgz#71a10c716feeba005e4504f36329ef0b17cf3145"
   integrity sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==
 
-cli-cursor@^3.1.0:
+cli-cursor@3.1.0, cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
   integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
@@ -4481,16 +4466,6 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
-  integrity sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==
-  dependencies:
-    is-directory "^0.3.1"
-    js-yaml "^3.9.0"
-    parse-json "^4.0.0"
-    require-from-string "^2.0.1"
-
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
@@ -5331,7 +5306,7 @@ enhanced-resolve@^5.0.0, enhanced-resolve@^5.7.0, enhanced-resolve@^5.8.3:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquirer@^2.3.5, enquirer@~2.3.6:
+enquirer@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
   integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
@@ -5751,14 +5726,6 @@ eslint-scope@^4.0.3:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-scope@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-6.0.0.tgz#9cf45b13c5ac8f3d4c50f46a5121f61b3e318978"
-  integrity sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^5.2.0"
-
 eslint-scope@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.0.tgz#c1f6ea30ac583031f203d65c73e723b01298f153"
@@ -5789,50 +5756,6 @@ eslint-visitor-keys@^3.1.0, eslint-visitor-keys@^3.2.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz#6fbb166a6798ee5991358bc2daa1ba76cc1254a1"
   integrity sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==
 
-eslint@8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.2.0.tgz#44d3fb506d0f866a506d97a0fc0e90ee6d06a815"
-  integrity sha512-erw7XmM+CLxTOickrimJ1SiF55jiNlVSp2qqm0NuBWPtHYQCegD5ZMaW0c3i5ytPqL+SSLaCxdvQXFPLJn+ABw==
-  dependencies:
-    "@eslint/eslintrc" "^1.0.4"
-    "@humanwhocodes/config-array" "^0.6.0"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.3.2"
-    doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^6.0.0"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.0.0"
-    espree "^9.0.0"
-    esquery "^1.4.0"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^6.0.1"
-    globals "^13.6.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    js-yaml "^4.1.0"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.2.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
 eslint@8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.7.0.tgz#22e036842ee5b7cf87b03fe237731675b4d3633c"
@@ -5874,7 +5797,7 @@ eslint@8.7.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@^9.0.0, espree@^9.2.0, espree@^9.3.0:
+espree@^9.2.0, espree@^9.3.0:
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.0.tgz#c1240d79183b72aaee6ccfa5a90bc9111df085a8"
   integrity sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ==
@@ -6301,11 +6224,6 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-parent-dir@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.1.tgz#c5c385b96858c3351f95d446cab866cbf9f11125"
-  integrity sha512-o4UcykWV/XN9wm+jMEtWLPlV8RXCZnMhQI6F6OdHeSez7iiJWePw8ijOlskJZMsaQoGR/b7dH6lO02HhaTN7+A==
-
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -7369,11 +7287,6 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
-
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
@@ -8494,7 +8407,7 @@ js-tokens@^4.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.13.1, js-yaml@^3.9.0:
+js-yaml@^3.13.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
@@ -8552,7 +8465,7 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
-json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
@@ -9619,12 +9532,12 @@ nwsapi@^2.2.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-nx@13.4.5:
-  version "13.4.5"
-  resolved "https://registry.yarnpkg.com/nx/-/nx-13.4.5.tgz#f68857ea33dae302c0d1171f0909155ab0be2bd7"
-  integrity sha512-efUyCh6jgBWh8SIXoxa33M+pwLQyEbsjb0g6qoNORAibmzHlf0aI79t3pn7Ru2O33D+GTU3qQ/DJVxbE9M/2zg==
+nx@13.5.3:
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/nx/-/nx-13.5.3.tgz#5bdc72fd51eadcaf1dc4d5af800b863e4d103a4e"
+  integrity sha512-OqYNq+RL+nk8IAbxOl9CnfHnURA68tYlQojUdtdAiKnmcOouSzWnt1zRZb2nUWiMUiWEVojExMvCqXLwgRwQ6Q==
   dependencies:
-    "@nrwl/cli" "13.4.5"
+    "@nrwl/cli" "13.5.3"
 
 object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
@@ -9969,14 +9882,6 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse-json@^5.0.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@@ -10885,7 +10790,7 @@ process@^0.11.1, process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-progress@^2.0.0, progress@^2.0.3:
+progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -11219,7 +11124,7 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
-require-from-string@^2.0.1, require-from-string@^2.0.2:
+require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
@@ -11555,7 +11460,7 @@ semver@7.3.4:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@7.3.5, semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
+semver@7.3.5, semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
@@ -12068,13 +11973,6 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-strip-ansi@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"

From 61d40c67bec00e4c597e815de4183c28432caae6 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 27 Jan 2022 20:46:25 +0200
Subject: [PATCH 22/22] fixed overflow

---
 .../annotation-references-list.component.scss                    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
index 55585cd01..537436d50 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
@@ -17,6 +17,7 @@
     .annotations-container {
         flex-direction: column;
         overflow: auto;
+        max-height: 330px;
 
         .annotation-container {
             width: 100%;