From ff2839fb29ee5d78afbd6d47cc8146fd302c7f57 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Wed, 27 Mar 2024 16:02:04 +0200 Subject: [PATCH] RED-8812: display selected annotations in table form. --- .../edit-redaction-dialog.component.html | 1 - .../edit-redaction-dialog.component.ts | 12 +--- .../redact-text-dialog.component.html | 9 --- .../remove-redaction-dialog.component.html | 69 +++++-------------- .../remove-redaction-dialog.component.scss | 59 ++++++++++++---- .../remove-redaction-dialog.component.ts | 59 ++++++++++------ .../services/annotation-actions.service.ts | 6 +- 7 files changed, 110 insertions(+), 105 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html index 5106adfe6..c5af2cf10 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html @@ -8,7 +8,6 @@
- 1; } - get label() { - return this.allRectangles ? 'customRectangle' : this.isImported ? 'imported' : 'redactedText'; - } - - get labelTranslation() { - return editRedactionLabelsTranslations[this.label]; - } - get helpButtonKey() { if (this.isHint) { - return DialogHelpModeKeys.HINT_EDIT + return DialogHelpModeKeys.HINT_EDIT; } if (this.someSkipped) { - return DialogHelpModeKeys.SKIPPED_EDIT + return DialogHelpModeKeys.SKIPPED_EDIT; } return DialogHelpModeKeys.REDACTION_EDIT; } diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html index 6dbb20c57..96dee3775 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html @@ -4,15 +4,6 @@
- -
-
+
- - - -
    -
  • -
- + + + + + + + + + + + + + +
+ +
+ {{ text }} + {{ data.redactions[idx].typeLabel }}{{ data.falsePositiveContext[idx] }}
- - - -
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss index fd8ec46a6..78c516a5c 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss @@ -1,20 +1,55 @@ @use 'common-mixins'; .dialog-content { - height: 470px; + padding-top: 8px; + padding-bottom: 35px; } -cdk-virtual-scroll-viewport { - @include common-mixins.scroll-bar; +table { + max-width: 100%; + min-width: 100%; + border-spacing: 0; + + tbody { + padding-top: 2px; + overflow-y: auto; + display: block; + @include common-mixins.scroll-bar; + } + + tr { + max-inline-size: 100%; + min-width: 100%; + display: table; + + th { + border-bottom: 1px solid var(--iqser-grey-1); + + label { + opacity: 0.7; + } + } + + th, + td { + max-width: 0; + width: 25%; + text-align: start; + + white-space: nowrap; + text-overflow: ellipsis; + list-style-position: inside; + overflow: hidden; + } + + th:last-child, + td:last-child { + max-width: 0; + width: 50%; + } + } } -:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { - max-width: 100% !important; -} - -li { - white-space: nowrap; - text-overflow: ellipsis; - list-style-position: inside; - overflow: hidden; +.hide { + visibility: hidden; } diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts index 214503f57..acc251e7d 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts @@ -1,15 +1,17 @@ -import { Component } from '@angular/core'; +import { Component, computed } from '@angular/core'; import { FormBuilder, UntypedFormGroup } from '@angular/forms'; import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui'; -import { - getRemoveRedactionOptions, - RemoveAnnotationOptions, - RemoveRedactionOption, - RemoveRedactionOptions, -} from '../../utils/dialog-options'; +import { getRemoveRedactionOptions, RemoveRedactionOption, RemoveRedactionOptions } from '../../utils/dialog-options'; import { RemoveRedactionData, RemoveRedactionResult } from '../../utils/dialog-types'; import { Roles } from '@users/roles'; import { DialogHelpModeKeys } from '../../utils/constants'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { map } from 'rxjs/operators'; + +interface ValuesColumns { + label: string; + show: boolean; +} @Component({ templateUrl: './remove-redaction-dialog.component.html', @@ -27,16 +29,32 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent< readonly skipped = this.data.redactions.some(annotation => annotation.isSkipped); readonly redactedTexts = this.data.redactions.map(annotation => annotation.value); readonly isImage = this.data.redactions.every(redaction => redaction.isImage); + protected readonly roles = Roles; - form!: UntypedFormGroup; + form: UntypedFormGroup = this._formBuilder.group({ + comment: [null], + option: [this.defaultOption], + }); + + readonly selectedOption = toSignal(this.form.get('option').valueChanges.pipe(map(value => value.value))); + readonly isFalsePositive = computed(() => this.selectedOption() === RemoveRedactionOptions.FALSE_POSITIVE); + readonly columns = computed(() => [ + { + label: 'Value', + show: true, + }, + { + label: 'Type', + show: true, + }, + { + label: 'Context', + show: this.isFalsePositive(), + }, + ]); constructor(private readonly _formBuilder: FormBuilder) { super(); - this.form = this.#getForm(); - } - - get isFalsePositive(): boolean { - return this.form.get('option').value.value === RemoveAnnotationOptions.FALSE_POSITIVE; } get helpButtonKey() { @@ -66,14 +84,15 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent< return this.data.redactions.length > 1; } + get redactedTextsAreaHeight() { + return this.redactedTexts.length <= 10 ? 18 * this.redactedTexts.length : 180; + } + + get dialogContentHeight() { + return this.options.length * 75 + 230; + } + save(): void { this.close(this.form.getRawValue()); } - - #getForm() { - return this._formBuilder.group({ - comment: [null], - option: [this.defaultOption], - }); - } } diff --git a/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts b/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts index 4596c62fd..23a115d14 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts @@ -354,15 +354,15 @@ export class AnnotationActionsService { let text: string; if (annotation.hasTextAfter) { text = getFirstRelevantTextPart(annotation.textAfter, 'FORWARD'); - return text ? (`${annotation.value}` + text).trim() : `${annotation.value}`; + return text ? (annotation.value + text).trim() : annotation.value; } if (annotation.hasTextBefore) { text = getFirstRelevantTextPart(annotation.textBefore, 'BACKWARD'); - return text ? (text + `${annotation.value}`).trim() : `${annotation.value}`; + return text ? (text + annotation.value).trim() : annotation.value; } - return `${annotation.value}`; + return annotation.value; } async #extractTextAndPositions(annotationId: string) {