add icon prop to filters & use checker and key for filters

apps/red-ui/src/app/modules/projects/components/type-filter/type-filter.component.html

@@ -3,39 +3,13 @@
 <redaction-annotation-icon *ngIf="filter.key === 'hint'" type="circle" label="H" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'manual-redaction'" type="square" label="M" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'skipped'" type="square" label="S" [color]="dictionaryColor"></redaction-annotation-icon>
-
-<redaction-annotation-icon
-    *ngIf="
-        filter.key === 'suggestion-remove' ||
-        filter.key === 'suggestion' ||
-        filter.key === 'suggestion-force-redaction' ||
-        filter.key === 'suggestion-add' ||
-        filter.key === 'suggestion-remove-dictionary' ||
-        filter.key === 'suggestion-add-dictionary'
-    "
-    type="rhombus"
-    label="S"
-    [color]="dictionaryColor"
-></redaction-annotation-icon>
-
-<redaction-annotation-icon
-    *ngIf="
-        filter.key === 'add-dictionary' ||
-        filter.key === 'remove-dictionary' ||
-        filter.key === 'remove-only-here' ||
-        filter.key === 'pending-analysis' ||
-        filter.key === 'analysis'
-    "
-    type="square"
-    label="A"
-    [color]="dictionaryColor"
-></redaction-annotation-icon>
-
+<redaction-annotation-icon *ngIf="isSuggestion(filter.key)" type="rhombus" label="S" [color]="dictionaryColor"></redaction-annotation-icon>
+<redaction-annotation-icon *ngIf="needsAnalysis(filter.key)" type="square" label="A" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'declined-suggestion'" type="rhombus" label="S" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'none'" label="-" color="transparent" type="none"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'updated'" type="square" label="U" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'image'" type="square" label="I" [color]="dictionaryColor"></redaction-annotation-icon>
 
-<mat-icon *ngIf="filter.key.startsWith('red:')" [svgIcon]="filter.key"></mat-icon>
+<mat-icon *ngIf="!isKey(filter.key) && filter.icon" [svgIcon]="filter.icon"></mat-icon>
 
 {{ filter.label | translate }}

apps/red-ui/src/app/modules/projects/components/type-filter/type-filter.component.ts

@@ -13,9 +13,39 @@ export class TypeFilterComponent implements OnInit {
 
     dictionaryColor: string;
 
-    constructor(public appStateService: AppStateService) {}
+    private _suggestionsKeys = [
+        'suggestion-remove',
+        'suggestion',
+        'suggestion-force-redaction',
+        'suggestion-add',
+        'suggestion-remove-dictionary',
+        'suggestion-add-dictionary'
+    ];
+    private _needsAnalysisKeys = ['add-dictionary', 'remove-dictionary', 'remove-only-here', 'pending-analysis', 'analysis'];
+    private _allKeys = [
+        ...this._needsAnalysisKeys,
+        ...this._suggestionsKeys,
+        'redaction',
+        'recommendation',
+        'hint',
+        'manual-redaction',
+        'skipped',
+        'declined-suggestion',
+        'none',
+        'updated',
+        'image'
+    ];
+
+    isSuggestion = (key: string) => this._suggestionsKeys.includes(key);
+    needsAnalysis = (key: string) => this._needsAnalysisKeys.includes(key);
+    isKey = (key: string) => this._allKeys.includes(key);
+
+    constructor(private readonly _appStateService: AppStateService) {}
 
     ngOnInit(): void {
-        this.dictionaryColor = this.appStateService.getDictionaryColor(this.filter.key, this.appStateService.activeProject?.ruleSetId || DEFAULT_RUL_SET_UUID);
+        this.dictionaryColor = this._appStateService.getDictionaryColor(
+            this.filter.key,
+            this._appStateService.activeProject?.ruleSetId || DEFAULT_RUL_SET_UUID
+        );
     }
 }

apps/red-ui/src/app/modules/projects/services/annotation-processing.service.ts

@@ -72,14 +72,14 @@ export class AnnotationProcessingService {
         const obj = {};
 
         const primaryFlatFilters = this._getFlatFilters(primaryFilters, (f) => f.checked);
-        const secondaryFlatFilters = this._getFlatFilters(secondaryFilters, (f) => f.checked && !!f.checker);
+        const secondaryFlatFilters = this._getFlatFilters(secondaryFilters, (f) => f.checked);
 
         for (const annotation of annotations) {
             if (!this._matchesOne(primaryFlatFilters, (f) => this._checkByFilterKey(f, annotation))) {
                 continue;
             }
 
-            if (!this._matchesAll(secondaryFlatFilters, (f) => f.checker(annotation))) {
+            if (!this._matchesAll(secondaryFlatFilters, (f) => (!!f.checker && f.checker(annotation)) || this._checkByFilterKey(f, annotation))) {
                 continue;
             }
 
@@ -160,7 +160,8 @@ export class AnnotationProcessingService {
     static get secondaryAnnotationFilters(): FilterModel[] {
         return [
             {
-                key: 'red:comment',
+                key: 'with-comments',
+                icon: 'red:comment',
                 label: 'filter-menu.with-comments',
                 checked: false,
                 topLevelFilter: true,

apps/red-ui/src/app/modules/shared/components/filter/filter.component.ts

@@ -72,7 +72,7 @@ export class FilterComponent implements OnChanges {
     }
 
     get hasActiveFilters(): boolean {
-        for (const filter of this.primaryFilters ? this.primaryFilters : []) {
+        for (const filter of this._allFilters) {
             if (filter.checked || filter.indeterminate) {
                 return true;
             }
@@ -90,7 +90,8 @@ export class FilterComponent implements OnChanges {
     }
 
     private _setAllFilters(value: boolean) {
-        this.primaryFilters?.forEach((f) => {
+        const filters = value ? this.primaryFilters : this._allFilters;
+        filters.forEach((f) => {
             f.checked = value;
             f.indeterminate = false;
             f.filters?.forEach((ff) => {
@@ -99,6 +100,10 @@ export class FilterComponent implements OnChanges {
         });
     }
 
+    private get _allFilters(): FilterModel[] {
+        return [...(this.primaryFilters ?? []), ...(this.secondaryFilters ?? [])];
+    }
+
     filterMouseEnter() {
         this.mouseOver = true;
         if (this.mouseOverTimeout) {

apps/red-ui/src/app/modules/shared/components/filter/model/filter.model.ts

@@ -1,6 +1,7 @@
 export interface FilterModel {
     key: string;
     label?: string;
+    icon?: string;
     checked?: boolean;
     indeterminate?: boolean;
     expanded?: boolean;