RED-6408, get UI to run without errors.

apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, computed, EventEmitter, Input, Output } from '@angular/core';
 import {
     DonutChartConfig,
     Dossier,
@@ -25,6 +25,7 @@ import { Roles } from '@users/roles';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { FilterService, INestedFilter } from '@iqser/common-ui/lib/filtering';
 import { ContextComponent, getParam, shareLast } from '@iqser/common-ui/lib/utils';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 interface DossierDetailsContext {
     needsWorkFilters: INestedFilter[] | undefined;
@@ -69,9 +70,9 @@ export class DossierDetailsComponent extends ContextComponent<DossierDetailsCont
             map(([stats]) => stats),
         );
         const statusConfig$ = dossierStats$.pipe(map(stats => this.#calculateStatusConfig(stats)));
-
+        const filterModels$ = toObservable(computed(() => filterService.getFilterModels('needsWorkFilters')));
         super._initContext({
-            needsWorkFilters: filterService.getFilterModels$('needsWorkFilters'),
+            needsWorkFilters: filterModels$,
             dossier: dossier$,
             dossierStats: dossierStatsWithEffects$,
             statusConfig: statusConfig$,

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts

@@ -24,6 +24,7 @@ import { PageRotationService } from '../../../pdf-viewer/services/page-rotation.
 import { getLocalStorageDataByFileId } from '@utils/local-storage';
 import { FilterService, INestedFilter } from '@iqser/common-ui/lib/filtering';
 import { AutoUnsubscribe, bool, Debounce, IqserEventTarget } from '@iqser/common-ui/lib/utils';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -117,8 +118,8 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
     }
 
     private get _displayedAnnotations$(): Observable<Map<number, ListItem<AnnotationWrapper>[]>> {
-        const primary$ = this.filterService.getFilterModels$('primaryFilters');
+        const primary$ = toObservable(computed(() => this.filterService.getFilterModels('primaryFilters')));
-        const secondary$ = this.filterService.getFilterModels$('secondaryFilters');
+        const secondary$ = toObservable(computed(() => this.filterService.getFilterModels('secondaryFilters')));
 
         return combineLatest([
             this.fileDataService.all$,
@@ -360,7 +361,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
 
         this.displayedAnnotations = this._annotationProcessingService.filterAndGroupAnnotations(annotations, primary, secondary);
         const pagesThatDisplayAnnotations = [...this.displayedAnnotations.keys()];
-        const enabledFilters = this.filterService.enabledFlatFilters;
+        const enabledFilters = this.filterService.enabledFlatFilters();
         if (enabledFilters.some(f => f.id === 'pages-without-annotations')) {
             if (enabledFilters.length === 1 && !onlyPageWithAnnotations) {
                 this.displayedPages = this.#allPages.filter(page => !pagesThatDisplayAnnotations.includes(page));

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts

@@ -819,16 +819,14 @@ export class FilePreviewScreenComponent
     }
 
     #restoreOldFilters() {
-        combineLatest([
+        const primaryFilters = this._filterService.getGroup('primaryFilters');
-            this._filterService.getGroup$('primaryFilters').pipe(first(filterGroup => !!filterGroup?.filters.length)),
+        const secondaryFilters = this._filterService.getGroup('secondaryFilters');
-            this._filterService.getGroup$('secondaryFilters').pipe(first(secondaryFilters => !!secondaryFilters?.filters.length)),
+
-        ]).subscribe(([primaryFilters, secondaryFilters]) => {
+        const localStorageFiltersString = localStorage.getItem('workload-filters') ?? '{}';
-            const localStorageFiltersString = localStorage.getItem('workload-filters') ?? '{}';
+        const localStorageFilters = JSON.parse(localStorageFiltersString)[this.fileId];
-            const localStorageFilters = JSON.parse(localStorageFiltersString)[this.fileId];
+        if (localStorageFilters) {
-            if (localStorageFilters) {
+            copyLocalStorageFiltersValues(primaryFilters.filters, localStorageFilters.primaryFilters);
-                copyLocalStorageFiltersValues(primaryFilters.filters, localStorageFilters.primaryFilters);
+            copyLocalStorageFiltersValues(secondaryFilters.filters, localStorageFilters.secondaryFilters);
-                copyLocalStorageFiltersValues(secondaryFilters.filters, localStorageFilters.secondaryFilters);
+        }
-            }
-        });
     }
 }

apps/red-ui/src/app/modules/search/search-screen/search-screen.component.ts

@@ -25,6 +25,7 @@ import { DossierTemplatesService } from '@services/dossier-templates/dossier-tem
 import { UserService } from '@users/user.service';
 import { IFilterGroup, keyChecker, NestedFilter } from '@iqser/common-ui/lib/filtering';
 import { SortingOrders } from '@iqser/common-ui/lib/sorting';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     templateUrl: './search-screen.component.html',
@@ -128,10 +129,8 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
     }
 
     private get _filtersChanged$(): Observable<[string[], WorkflowFileStatus, string, string[], boolean]> {
-        const onlyActiveDossiers$ = this.#enabledArchive
+        const onlyActiveDossiers$ = of(this.#enabledArchive ? this.filterService.getSingleFilter('onlyActiveDossiers').checked : true);
-            ? this.filterService.getSingleFilter('onlyActiveDossiers').pipe(map(f => !!f.checked))
+        const filterGroups$ = toObservable(this.filterService.filterGroups);
-            : of(true);
-        const filterGroups$ = this.filterService.filterGroups$;
         return combineLatest([filterGroups$, onlyActiveDossiers$]).pipe(
             map(([groups, onlyActive]) => {
                 const dossierIds: string[] = groups[0].filters.filter(v => v.checked).map(v => v.id);

apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html

@@ -35,8 +35,8 @@
         <div
             (click)="val.key && selectValue(val.key)"
             *ngFor="let val of config"
-            [class.active]="filterChecked$(val.key) | async"
+            [class.active]="filterChecked(val.key)"
-            [class.filter-disabled]="!val.key || !(filters$ | async).length"
+            [class.filter-disabled]="!val.key || !filters().length"
             [id]="val.id"
         >
             <iqser-status-bar

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

@@ -1,13 +1,14 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core';
 import { DonutChartConfig } from '@red/domain';
 import { IqserHelpModeModule } from '@iqser/common-ui';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { MatSelectModule } from '@angular/material/select';
-import { FilterService, INestedFilter } from '@iqser/common-ui/lib/filtering';
+import { FilterService } from '@iqser/common-ui/lib/filtering';
-import { get, shareLast } from '@iqser/common-ui/lib/utils';
+import { get } from '@iqser/common-ui/lib/utils';
 import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'redaction-donut-chart',
@@ -16,7 +17,7 @@ import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
     standalone: true,
     imports: [NgForOf, NgIf, MatSelectModule, IqserHelpModeModule, StatusBarComponent, AsyncPipe],
 })
-export class DonutChartComponent implements OnChanges, OnInit {
+export class DonutChartComponent implements OnChanges {
     @Input() subtitles: string[];
     @Input() config: DonutChartConfig[] = [];
     @Input() radius = 85;
@@ -34,7 +35,7 @@ export class DonutChartComponent implements OnChanges, OnInit {
     cx = 0;
     cy = 0;
     size = 0;
-    filters$: Observable<INestedFilter[]>;
+    readonly filters = computed(() => this.filterService?.getFilterModels(this.filterKey) ?? []);
 
     constructor(@Optional() readonly filterService: FilterService) {
         // TODO: move this component to a separate module, split into smaller components, improve filters
@@ -52,15 +53,6 @@ export class DonutChartComponent implements OnChanges, OnInit {
         return this.totalType === 'sum' ? this.dataTotal : this.config.length;
     }
 
-    ngOnInit() {
-        const filterModels$ = this.filterService?.getFilterModels$(this.filterKey).pipe(
-            map(filters => filters ?? []),
-            shareLast(),
-        );
-
-        this.filters$ = filterModels$ ?? of([]);
-    }
-
     ngOnChanges(): void {
         this.calculateChartData();
         this.cx = this.radius + this.strokeWidth / 2;
@@ -68,11 +60,8 @@ export class DonutChartComponent implements OnChanges, OnInit {
         this.size = this.strokeWidth + this.radius * 2;
     }
 
-    filterChecked$(key: string): Observable<boolean> {
+    filterChecked(key: string): boolean {
-        return this.filters$.pipe(
+        return !!this.filters().find(filter => filter.id === key)?.checked;
-            get(filter => filter.id === key),
-            map(filter => !!filter?.checked),
-        );
     }
 
     getFormattedValue(value: number): string {

libs/common-ui

@@ -1 +1 @@
-Subproject commit a4e425d3739d6145325a8fe347d9fcae1e12a662
+Subproject commit 41d19013adcfc678987d06b4c3e53f8bec7a67f8