Dictionary listing data

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';

apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html

@@ -1,3 +1,3 @@
-<div [class.hint]="type === 'circle'" [class.request]="type === 'rhombus'" [style.background-color]="color" class="icon">
-    <span>{{ label }}</span>
+<div [class.hint]="isHint" [class.request]="isRequest" [style.background-color]="color || dictType.hexColor" class="icon">
+    <span>{{ label || dictType.label.charAt(0) }}</span>
 </div>

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';
+    }
 }

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',

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)
                         }
                     ]"
                 >

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;

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<string>();
+    @Input() counterText: string;
+    @Output()
+    public toggleFilter = new EventEmitter<string>();
 
     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})`;
+    }
 }

apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html

@@ -33,16 +33,16 @@
 
                 <redaction-table-col-name
                     label="dictionary-listing.table-col-names.type"
-                    column="name"
+                    column="label"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
                 ></redaction-table-col-name>
-                <redaction-table-col-name label="dictionary-listing.table-col-names.analyzed" class="flex-center"></redaction-table-col-name>
+                <redaction-table-col-name label="dictionary-listing.table-col-names.hint-redaction" class="flex-center"></redaction-table-col-name>
                 <div class="placeholder-bottom-border"></div>
 
                 <!--      Table lines -->
-                <div class="table-item" *ngFor="let dict of displayedDictionaries | sortBy: sortingOption.order:sortingOption.column">
+                <div class="table-item" *ngFor="let dict of dictionaries | sortBy: sortingOption.order:sortingOption.column">
                     <div class="pr-0" (click)="toggleDictSelected($event, dict)">
                         <div *ngIf="!isDictSelected(dict)" class="select-oval"></div>
                         <mat-icon class="selection-icon active" *ngIf="isDictSelected(dict)" svgIcon="red:radio-selected"></mat-icon>
@@ -52,17 +52,19 @@
                         <div class="color-square" [ngStyle]="{ 'background-color': dict.hexColor }"></div>
                         <div>
                             <div class="table-item-title heading">
-                                {{ dict.name }}
+                                {{ dict.label }}
                             </div>
                             <div class="small-label stats-subtitle">
                                 <div>
                                     <mat-icon svgIcon="red:entries"></mat-icon>
-                                    {{ dict.entries }}
+                                    300
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="analyzed">2</div>
+                    <div class="analyzed">
+                        <redaction-annotation-icon [dictType]="dict"></redaction-annotation-icon>
+                    </div>
                     <div></div>
                 </div>
             </div>
@@ -70,12 +72,12 @@
 
         <div class="right-fixed-container">
             <redaction-simple-doughnut-chart
-                class="mt-50"
                 [config]="chartData"
                 [strokeWidth]="15"
                 [radius]="82"
                 [subtitle]="'dictionary-listing.stats.charts.types'"
                 totalType="count"
+                [counterText]="'dictionary-listing.stats.charts.entries' | translate"
             ></redaction-simple-doughnut-chart>
         </div>
     </div>

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

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

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;

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

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() {}

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"