RED-9578: fixed issues and rewrote the annotations table component.

apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html

@@ -1,19 +1,12 @@
-<table>
+<div [ngStyle]="gridConfig()" class="table">
-    <thead>
+    @for (column of _columns(); track column.label) {
-        <tr>
+        <div [ngClass]="{ hide: !!column.hide }" class="col cell">{{ column.label }}</div>
-            <th *ngFor="let column of columns()" [ngClass]="{ hide: !!column.hide, 'w-50': staticColumns() && shouldApplyHalfWidth() }">
+    }
-                <label>{{ column.label }}</label>
+    @for (row of _data(); track $index) {
-            </th>
+        @for (cell of row; track cell.label) {
-        </tr>
+            <div [ngClass]="{ background: _data().indexOf(row) % 2 === 0, hide: !!cell.hide, bold: cell.bold }" class="cell">
-    </thead>
-    <tbody [ngStyle]="{ height: redactedTextsAreaHeight() + 'px' }">
-        <tr *ngFor="let row of data()">
-            <td
-                *ngFor="let cell of row"
-                [ngClass]="{ hide: !!cell.hide, bold: cell.bold, 'w-50': staticColumns() && shouldApplyHalfWidth() }"
-            >
                 {{ cell.label }}
-            </td>
+            </div>
-        </tr>
+        }
-    </tbody>
+    }
-</table>
+</div>

apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss

@@ -1,74 +1,39 @@
 @use 'common-mixins';
 
-table {
+.table {
     padding: 0 13px;
-    max-width: 100%;
+    display: grid;
-    min-width: 100%;
+    overflow-x: hidden;
-    border-spacing: 0;
+    overflow-y: auto;
+    @include common-mixins.scroll-bar;
 
-    tbody {
+    .col {
-        padding-top: 2px;
+        position: sticky;
-        overflow-y: auto;
+        top: 0;
-        display: block;
+        z-index: 1;
-        @include common-mixins.scroll-bar;
+        background: white;
     }
 
-    tr {
+    .cell {
-        max-width: 100%;
+        text-align: start;
-        min-width: 100%;
+        white-space: nowrap;
-        display: table;
+        text-overflow: ellipsis;
+        list-style-position: inside;
+        overflow: hidden;
 
-        th {
+        padding-right: 8px;
-            label {
+        line-height: 1.5;
-                opacity: 0.7;
-                font-weight: normal;
-            }
-        }
-
-        th,
-        td {
-            &:first-child:not(.w-50) {
-                width: 25%;
-            }
-            max-width: 0;
-            text-align: start;
-
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            list-style-position: inside;
-            overflow: hidden;
-
-            padding-right: 8px;
-        }
-
-        th:last-child,
-        td:last-child {
-            max-width: 0;
-            width: 50%;
-            padding-right: 0;
-        }
     }
 }
 
-tbody tr:nth-child(odd) {
+.background {
-    td {
+    background-color: var(--iqser-alt-background);
-        background-color: var(--iqser-alt-background);
-    }
 }
 
 .hide {
     visibility: hidden;
 }
 
-.w-50 {
-    max-width: 0;
-    min-width: 50%;
-
-    &.hide {
-        display: none;
-    }
-}
-
 .bold {
     font-weight: bold;
 }

apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts

@@ -5,9 +5,10 @@ export interface ValueColumn {
     label: string;
     hide?: boolean;
     bold?: boolean;
+    width?: string;
 }
 
-const TABLE_ROW_SIZE = 18;
+const TABLE_ROW_SIZE = 20;
 const MAX_ITEMS_DISPLAY = 10;
 
 @Component({
@@ -18,12 +19,33 @@ const MAX_ITEMS_DISPLAY = 10;
     styleUrl: './selected-annotations-table.component.scss',
 })
 export class SelectedAnnotationsTableComponent {
-    readonly columns = input.required<ValueColumn[]>();
+    readonly defaultColumnWidth = input(false);
-    readonly data = input.required<ValueColumn[][]>();
-    readonly staticColumns = input(false);
 
-    readonly redactedTextsAreaHeight = computed(() =>
+    readonly columns = input.required<ValueColumn[]>();
-        this.data().length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this.data().length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY,
+    readonly _columns = computed(() => this.columns().filter(item => !this.defaultColumnWidth() || !item.hide));
+
+    readonly data = input.required<ValueColumn[][]>();
+    readonly _data = computed(() => this.data().map(item => item.filter(cell => !this.defaultColumnWidth() || !cell.hide)));
+
+    readonly redactedTextsAreaHeight = computed(
+        () =>
+            (this._data().length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this._data().length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY) +
+            TABLE_ROW_SIZE,
     );
-    readonly shouldApplyHalfWidth = computed(() => this.columns().filter(column => !column.hide).length === 2);
+
+    readonly gridConfig = computed(() => ({
+        height: `${this.redactedTextsAreaHeight()}px`,
+        'grid-template-columns': !this.defaultColumnWidth() ? this.#computeCustomColumnWidths() : this.#getDefaultColumnWidth(),
+        'grid-template-rows': `repeat(${this._data().length + 1}, ${TABLE_ROW_SIZE}px)`,
+    }));
+
+    #computeCustomColumnWidths() {
+        return this._columns()
+            .map(column => column.width ?? `auto`)
+            .join(' ');
+    }
+
+    #getDefaultColumnWidth() {
+        return `repeat(${this._columns().length}, 1fr)`;
+    }
 }

apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html

@@ -11,7 +11,7 @@
                 <redaction-selected-annotations-table
                     [columns]="tableColumns"
                     [data]="tableData"
-                    [staticColumns]="true"
+                    [defaultColumnWidth]="true"
                 ></redaction-selected-annotations-table>
             </div>
 

apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html

@@ -7,7 +7,7 @@
                 <redaction-selected-annotations-table
                     [columns]="tableColumns"
                     [data]="tableData"
-                    [staticColumns]="true"
+                    [defaultColumnWidth]="true"
                 ></redaction-selected-annotations-table>
             }
 

apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html

@@ -7,7 +7,7 @@
                 <redaction-selected-annotations-table
                     [columns]="tableColumns"
                     [data]="tableData"
-                    [staticColumns]="true"
+                    [defaultColumnWidth]="true"
                 ></redaction-selected-annotations-table>
             </div>
 

apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html

@@ -10,7 +10,7 @@
                 <redaction-selected-annotations-table
                     [columns]="tableColumns()"
                     [data]="tableData()"
-                    [staticColumns]="!hasFalsePositiveOption"
+                    [defaultColumnWidth]="!hasFalsePositiveOption"
                 ></redaction-selected-annotations-table>
             </div>
 

apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts

@@ -111,11 +111,12 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
     readonly selectedOption = toSignal(this.form.get('option').valueChanges.pipe(map(value => value.value)));
     readonly isFalsePositive = computed(() => this.selectedOption() === RemoveRedactionOptions.FALSE_POSITIVE);
     readonly tableColumns = computed<ValueColumn[]>(() => [
-        { label: 'Value' },
+        { label: 'Value', width: '25%' },
-        { label: 'Type' },
+        { label: 'Type', width: '25%' },
         {
             label: 'Context',
             hide: !this.isFalsePositive(),
+            width: '50%',
         },
     ]);
 

apps/red-ui/src/app/modules/shared/components/approve-warning-details/approve-warning-details.component.scss

@@ -1,8 +1,13 @@
 @use 'common-mixins';
 
+:host {
+    height: 250px;
+}
+
 .scrollable {
+    margin-bottom: 8px;
     overflow-y: auto;
-    max-height: calc(5 * 50px);
+    max-height: 240px;
     @include common-mixins.scroll-bar;
 
     padding-left: 2px;

apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.html

@@ -1,8 +1,4 @@
 <mat-expansion-panel [expanded]="openByDefault()" togglePosition="before">
     <mat-expansion-panel-header>{{ filename() }}</mat-expansion-panel-header>
-    <redaction-selected-annotations-table
+    <redaction-selected-annotations-table [columns]="tableColumns()" [data]="tableData()"></redaction-selected-annotations-table>
-        [columns]="tableColumns()"
-        [data]="tableData()"
-        [staticColumns]="true"
-    ></redaction-selected-annotations-table>
 </mat-expansion-panel>

apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.ts

@@ -16,7 +16,6 @@ import { TranslateService } from '@ngx-translate/core';
     styleUrl: './warning-details-panel.component.scss',
 })
 export class WarningDetailsPanelComponent {
-    readonly #translateService = inject(TranslateService);
     readonly warnings = input<WarningModel[]>();
     readonly filename = input<string>();
     readonly openByDefault = input<boolean>();
@@ -24,14 +23,20 @@ export class WarningDetailsPanelComponent {
         { label: 'Value' },
         { label: 'Type' },
         { label: 'Page' },
-        { label: 'Warning Reason' },
+        {
+            label: 'Warning Reason',
+            width: '40%',
+        },
     ]);
+    readonly #translateService = inject(TranslateService);
     readonly tableData = computed<ValueColumn[][]>(() =>
         this.warnings().map(warning => [
             { label: warning.value, bold: true },
             { label: warning.type },
             { label: warning.pages.join(',') },
-            { label: this.#translateService.instant(approvalWarningReasonTranslations[warning.warningType]) },
+            {
+                label: this.#translateService.instant(approvalWarningReasonTranslations[warning.warningType]),
+            },
         ]),
     );
 }

libs/common-ui

@@ -1 +1 @@
-Subproject commit c71a4995a63e4886bc23a8a8cea7d02d7560c2aa
+Subproject commit 835cb7820e2100ff1125939f4c2766f06e9c09a6