Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-8812: display selected annotations in table form.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-03-27 16:02:04 +02:00
parent c39f9c378b
commit ff2839fb29
7 changed files with 110 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,6 @@
<div class="dialog-content redaction" [class.fixed-height]="isRedacted && isImage">
<div class="iqser-input-group" *ngIf="!isImage">
<label class="selected-text" [translate]="labelTranslation"></label>
<cdk-virtual-scroll-viewport
*ngIf="!!redactedTexts.length && !allRectangles"
[itemSize]="16"

12
apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
View File

@ -106,20 +106,12 @@ export class EditRedactionDialogComponent
return this.annotations.length > 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;
}

9
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
View File

@ -4,15 +4,6 @@
<div class="dialog-content redaction">
<div class="iqser-input-group w-450 selected-text-group">
<label
[translate]="
initialText === form.controls.selectedText.value
? 'redact-text.dialog.content.selected-text'
: 'redact-text.dialog.content.text'
"
class="selected-text"
></label>
<div
[class.fixed-height-36]="dictionaryRequest"
[ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'"

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

@ -5,59 +5,28 @@
class="dialog-header heading-l"
></div>
<div class="dialog-content redaction">
<div [ngStyle]="{ height: dialogContentHeight + redactedTextsAreaHeight + 'px' }" class="dialog-content redaction">
<div *ngIf="!isImage" class="iqser-input-group">
<label
[translateParams]="typeTranslationArg"
[translate]="
isBulk ? 'remove-redaction.dialog.content.redacted-text-bulk' : 'remove-redaction.dialog.content.redacted-text'
"
class="selected-text"
></label>
<cdk-virtual-scroll-viewport
*ngIf="data.redactions.length > 1; else singleSelected"
[itemSize]="16"
[ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
>
<ul *cdkVirtualFor="let text of redactedTexts; let idx = index">
<li
[innerHTML]="
((isFalsePositive
? 'remove-redaction.dialog.content.list-item-false-positive'
: 'remove-redaction.dialog.content.list-item'
)
| translate
: {
text: text,
type: data.redactions[idx].typeLabel
}
| replaceNbsp) + (isFalsePositive ? data.falsePositiveContext[idx] : '')
"
></li>
</ul>
</cdk-virtual-scroll-viewport>
<table>
<thead>
<tr>
<th *ngFor="let column of columns()" [ngClass]="{ hide: !column.show }">
<label class="selected-text">{{ column.label }}</label>
</th>
</tr>
</thead>
<tbody [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }">
<tr *ngFor="let text of redactedTexts; let idx = index">
<td>
<b>{{ text }}</b>
</td>
<td>{{ data.redactions[idx].typeLabel }}</td>
<td [ngClass]="{ hide: !isFalsePositive() }">{{ data.falsePositiveContext[idx] }}</td>
</tr>
</tbody>
</table>
</div>
<ng-template #singleSelected>
<span
[innerHTML]="
((recommendation
? 'remove-redaction.dialog.content.list-item-false-recommendation'
: isFalsePositive
? 'remove-redaction.dialog.content.list-item-false-positive'
: 'remove-redaction.dialog.content.list-item'
)
| translate
: {
text: redactedTexts[0],
type: data.redactions[0].typeLabel
}
| replaceNbsp) + (isFalsePositive ? data.falsePositiveContext[0] : '')
"
></span>
</ng-template>
<iqser-details-radio [options]="options" formControlName="option"></iqser-details-radio>
<div class="iqser-input-group w-450">

59
apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
View File

@ -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;
}

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

@ -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<ValuesColumns[]>(() => [
{
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],
});
}
}

6
apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts
View File

@ -354,15 +354,15 @@ export class AnnotationActionsService {
let text: string;
if (annotation.hasTextAfter) {
text = getFirstRelevantTextPart(annotation.textAfter, 'FORWARD');
return text ? (`<b>${annotation.value}</b>` + text).trim() : `<b>${annotation.value}</b>`;
return text ? (annotation.value + text).trim() : annotation.value;
}
if (annotation.hasTextBefore) {
text = getFirstRelevantTextPart(annotation.textBefore, 'BACKWARD');
return text ? (text + `<b>${annotation.value}</b>`).trim() : `<b>${annotation.value}</b>`;
return text ? (text + annotation.value).trim() : annotation.value;
}
return `<b>${annotation.value}</b>`;
return annotation.value;
}
async #extractTextAndPositions(annotationId: string) {