diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 58b91609d..6ecd1907f 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -67,7 +67,7 @@ import { AppInfoComponent } from './screens/app-info/app-info.component'; import { TableColNameComponent } from './components/table-col-name/table-col-name.component'; import { ProjectDetailsComponent } from './screens/project-overview-screen/project-details/project-details.component'; import { PageIndicatorComponent } from './screens/file/page-indicator/page-indicator.component'; -import { NeedsWorkBadgeComponent } from './screens/common/needs-work-badge/needs-work-badge.component'; +import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component'; import { ProjectOverviewEmptyComponent } from './screens/empty-states/project-overview-empty/project-overview-empty.component'; import { ProjectListingEmptyComponent } from './screens/empty-states/project-listing-empty/project-listing-empty.component'; import { AnnotationActionsComponent } from './screens/file/annotation-actions/annotation-actions.component'; diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html index ceea1ffe9..c17e65ef3 100644 --- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html +++ b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html @@ -1,3 +1,3 @@ -
- {{ label }} +
+ {{ label || dictType.label.charAt(0) }}
diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts index 560ae5812..f5957ab6e 100644 --- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts +++ b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core'; +import { TypeValue } from '@redaction/red-ui-http'; @Component({ selector: 'redaction-annotation-icon', @@ -9,6 +10,15 @@ export class AnnotationIconComponent { @Input() color: string; @Input() type: 'square' | 'rhombus' | 'circle'; @Input() label: string; + @Input() dictType: TypeValue; constructor() {} + + public get isHint() { + return this.type === 'circle' || this.dictType?.type === 'hint'; + } + + public get isRequest() { + return this.type === 'rhombus' || this.dictType?.type === 'redaction'; + } } diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.html similarity index 100% rename from apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html rename to apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.html diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss similarity index 100% rename from apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.scss rename to apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.ts similarity index 75% rename from apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts rename to apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.ts index 9ac060fc5..123fb44a0 100644 --- a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts +++ b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.ts @@ -1,8 +1,8 @@ import { Component, Input, OnInit } from '@angular/core'; -import { AppStateService } from '../../../state/app-state.service'; -import { PermissionsService } from '../../../common/service/permissions.service'; -import { FileStatusWrapper } from '../../file/model/file-status.wrapper'; -import { ProjectWrapper } from '../../../state/model/project.wrapper'; +import { AppStateService } from '../../state/app-state.service'; +import { PermissionsService } from '../../common/service/permissions.service'; +import { FileStatusWrapper } from '../../screens/file/model/file-status.wrapper'; +import { ProjectWrapper } from '../../state/model/project.wrapper'; @Component({ selector: 'redaction-needs-work-badge', diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html index 7a8994f74..d512d9a4b 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html @@ -30,7 +30,7 @@ { length: val.value, color: val.color, - label: val.value + ' ' + val.label + label: getLabel(val) } ]" > diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss index d93be42b3..682cc947c 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss @@ -1,5 +1,9 @@ @import '../../../assets/styles/red-variables'; +:host { + height: fit-content; +} + .container { position: relative; display: flex; diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts index 87e33ce4b..e1cef0c3a 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -23,7 +23,9 @@ export class SimpleDoughnutChartComponent implements OnChanges { @Input() direction: 'row' | 'column' = 'column'; @Input() filter: FilterModel[]; @Input() totalType: 'sum' | 'count' = 'sum'; - @Output() public toggleFilter = new EventEmitter(); + @Input() counterText: string; + @Output() + public toggleFilter = new EventEmitter(); public chartData: any[] = []; public perimeter: number; @@ -87,4 +89,8 @@ export class SimpleDoughnutChartComponent implements OnChanges { checked: this.filter?.find((f) => f.key === el.key)?.checked })); } + + public getLabel(config: DoughnutChartConfig): string { + return this.totalType === 'sum' ? `${config.value} ${config.label}` : `${config.label} (${config.value} ${this.counterText})`; + } } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index 060279b45..1503747c5 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -33,16 +33,16 @@ - +
-
+
@@ -52,17 +52,19 @@
- {{ dict.name }} + {{ dict.label }}
- {{ dict.entries }} + 300
-
2
+
+ +
@@ -70,12 +72,12 @@
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss index c69ebabed..b3c7e3856 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss @@ -1,4 +1,5 @@ @import '../../../../assets/styles/red-variables'; +@import '../../../../assets/styles/red-mixins'; .left-container { width: calc(100vw - 353px); @@ -43,13 +44,11 @@ } .right-fixed-container { + overflow-y: scroll; + @include no-scroll-bar(); display: flex; width: calc(353px); - height: calc(100vh - 110px); - padding: 0; + height: calc(100vh - 110px - 2 * 50px); justify-content: center; -} - -.mt-50 { - margin-top: 50px; + padding: 50px 0; } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts index 4ae069f42..6bae3e722 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts @@ -1,13 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; -import { Dictionary, DictionaryControllerService } from '@redaction/red-ui-http'; -import { TranslateChartService } from '../../../utils/translate-chart.service'; +import { TypeValue } from '@redaction/red-ui-http'; import { SortingOption, SortingService } from '../../../utils/sorting.service'; import { DialogService } from '../../../dialogs/dialog.service'; import { AppStateService } from '../../../state/app-state.service'; -import { groupBy } from '../../../utils/functions'; -import { StatusSorter } from '../../../common/sorters/status-sorter'; -import { FileStatusWrapper } from '../../file/model/file-status.wrapper'; @Component({ selector: 'redaction-dictionary-listing-screen', @@ -16,24 +12,19 @@ import { FileStatusWrapper } from '../../file/model/file-status.wrapper'; }) export class DictionaryListingScreenComponent implements OnInit { public chartData: DoughnutChartConfig[] = []; - public dictionaries = [ - { id: '0', name: 'Vertebrates', entries: 330, type: 'hint', hexColor: '#00ff00' }, - { id: '1', name: 'Another Type', entries: 550, type: 'redaction', hexColor: '#ff0000' }, - { id: '2', name: 'Hint only', entries: 120, type: 'hint', hexColor: '#0000ff' } - ]; - public displayedDictionaries: any[]; - public selectedDictionariesIds: string[] = []; + public dictionaries: TypeValue[]; + public selectedDictKeys: string[] = []; constructor( private readonly _dialogService: DialogService, private readonly _sortingService: SortingService, - public readonly appStateService: AppStateService, - public readonly translateChartService: TranslateChartService + private readonly _appStateService: AppStateService ) {} ngOnInit(): void { - this.appStateService.reset(); - this.displayedDictionaries = this.dictionaries; + this._appStateService.reset(); + const dicts = this._appStateService.dictionaryData; + this.dictionaries = Object.keys(dicts).map((key) => dicts[key]); this._calculateData(); } @@ -41,12 +32,13 @@ export class DictionaryListingScreenComponent implements OnInit { this.chartData = []; for (const dict of this.dictionaries) { this.chartData.push({ - value: dict.entries, + value: 100, color: dict.hexColor, - label: dict.name, - key: dict.id + label: dict.label, + key: dict.type }); } + this.chartData.sort((a, b) => (a.label < b.label ? -1 : 1)); } public get sortingOption(): SortingOption { @@ -57,33 +49,33 @@ export class DictionaryListingScreenComponent implements OnInit { this._sortingService.toggleSort('dictionary-listing', $event); } - toggleDictSelected($event: MouseEvent, dict: any) { + toggleDictSelected($event: MouseEvent, dict: TypeValue) { $event.stopPropagation(); - const idx = this.selectedDictionariesIds.indexOf(dict.id); + const idx = this.selectedDictKeys.indexOf(dict.type); if (idx === -1) { - this.selectedDictionariesIds.push(dict.id); + this.selectedDictKeys.push(dict.type); } else { - this.selectedDictionariesIds.splice(idx, 1); + this.selectedDictKeys.splice(idx, 1); } } public toggleSelectAll() { if (this.areSomeDictsSelected) { - this.selectedDictionariesIds = []; + this.selectedDictKeys = []; } else { - this.selectedDictionariesIds = this.displayedDictionaries.map((dict) => dict.id); + this.selectedDictKeys = this.dictionaries.map((dict) => dict.type); } } public get areAllDictsSelected() { - return this.displayedDictionaries.length !== 0 && this.selectedDictionariesIds.length === this.displayedDictionaries.length; + return this.dictionaries.length !== 0 && this.selectedDictKeys.length === this.dictionaries.length; } public get areSomeDictsSelected() { - return this.selectedDictionariesIds.length > 0; + return this.selectedDictKeys.length > 0; } - public isDictSelected(dict: any) { - return this.selectedDictionariesIds.indexOf(dict.id) !== -1; + public isDictSelected(dict: TypeValue) { + return this.selectedDictKeys.indexOf(dict.type) !== -1; } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index db96fe90c..24adb1f22 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -6,7 +6,7 @@ } .grid-container { - grid-template-columns: 3fr 2fr 1fr 1fr 2fr auto; + grid-template-columns: auto 3fr 2fr 1fr 1fr 2fr auto; .header-item { padding: 0 24px 0 10px; diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index e1981cc25..bf310a947 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -81,7 +81,7 @@ export class AppStateService { return this._appState.ruleVersion; } - get dictionaryData() { + get dictionaryData(): { [key: string]: TypeValue } { return this._dictionaryData; } diff --git a/apps/red-ui/src/app/utils/sorting.service.ts b/apps/red-ui/src/app/utils/sorting.service.ts index c751f8030..ab9bbf996 100644 --- a/apps/red-ui/src/app/utils/sorting.service.ts +++ b/apps/red-ui/src/app/utils/sorting.service.ts @@ -14,7 +14,7 @@ export class SortingService { private _options: { [key: string]: SortingOption } = { 'project-listing': { column: 'project.projectName', order: 'asc' }, 'project-overview': { column: 'filename', order: 'asc' }, - 'dictionary-listing': { column: 'name', order: 'asc' } + 'dictionary-listing': { column: 'label', order: 'asc' } }; constructor() {} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 7a063b39d..fc8a63ef4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -470,7 +470,8 @@ "dictionary-listing": { "stats": { "charts": { - "types": "Types" + "types": "Types", + "entries": "Entries" } }, "table-header": { @@ -478,7 +479,7 @@ }, "table-col-names": { "type": "Type", - "analyzed": "Analyzed" + "hint-redaction": "Hint/Redaction" } }, "dictionaries": "Dictionaries"