RED-6412 - INC15516657: Performance issues

src/lib/filtering/filter-card/filter-card.component.ts

@@ -3,7 +3,7 @@ import { combineLatest, Observable, pipe } from 'rxjs';
 import { IFilter } from '../models/filter.model';
 import { INestedFilter } from '../models/nested-filter.model';
 import { IFilterGroup } from '../models/filter-group.model';
-import { handleCheckedValue } from '../filter-utils';
+import { extractFilterValues, handleCheckedValue } from '../filter-utils';
 import { FilterService } from '../filter.service';
 import { SearchService } from '../../search';
 import { Filter } from '../models/filter';
@@ -18,6 +18,17 @@ const atLeastOneIsExpandable = pipe(
     shareDistinctLast(),
 );
 
+export interface LocalStorageFilter {
+    id: string;
+    checked: boolean;
+    children?: LocalStorageFilter[] | null;
+}
+
+export interface LocalStorageFilters {
+    primaryFilters: LocalStorageFilter[] | null;
+    secondaryFilters: LocalStorageFilter[] | null;
+}
+
 @Component({
     selector: 'iqser-filter-card [primaryFiltersSlug]',
     templateUrl: './filter-card.component.html',
@@ -36,6 +47,7 @@ const atLeastOneIsExpandable = pipe(
 })
 export class FilterCardComponent implements OnInit {
     @Input() primaryFiltersSlug!: string;
+    @Input() fileId?: string;
     @Input() actionsTemplate?: TemplateRef<unknown>;
     @Input() secondaryFiltersSlug = '';
     @Input() primaryFiltersLabel: string = _('filter-menu.filter-types');
@@ -54,7 +66,7 @@ export class FilterCardComponent implements OnInit {
         private readonly _elementRef: ElementRef,
     ) {}
 
-    private get _primaryFilters$(): Observable<IFilter[]> {
+    get #primaryFilters$(): Observable<IFilter[]> {
         return combineLatest([this.primaryFilterGroup$, this.searchService.valueChanges$]).pipe(
             map(([group]) => this.searchService.searchIn(group?.filters ?? [])),
             shareLast(),
@@ -64,7 +76,7 @@ export class FilterCardComponent implements OnInit {
     ngOnInit() {
         this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug).pipe(shareLast());
         this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug).pipe(shareLast());
-        this.primaryFilters$ = this._primaryFilters$;
+        this.primaryFilters$ = this.#primaryFilters$;
 
         this.atLeastOneFilterIsExpandable$ = atLeastOneIsExpandable(this.primaryFilterGroup$);
         this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$);
@@ -96,16 +108,17 @@ export class FilterCardComponent implements OnInit {
         }
 
         this.filterService.refresh();
+        this.#updateFiltersInLocalStorage();
     }
 
     activatePrimaryFilters(): void {
-        this._setFilters(this.primaryFiltersSlug, true);
+        this.#setFilters(this.primaryFiltersSlug, true);
     }
 
     deactivateFilters(exceptedFilterId?: string): void {
-        this._setFilters(this.primaryFiltersSlug, false, exceptedFilterId);
+        this.#setFilters(this.primaryFiltersSlug, false, exceptedFilterId);
         if (this.secondaryFiltersSlug) {
-            this._setFilters(this.secondaryFiltersSlug, false, exceptedFilterId);
+            this.#setFilters(this.secondaryFiltersSlug, false, exceptedFilterId);
         }
     }
 
@@ -116,7 +129,7 @@ export class FilterCardComponent implements OnInit {
         this.filterService.refresh();
     }
 
-    private _setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) {
+    #setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) {
         const filters = this.filterService.getGroup(filterGroup)?.filters;
         filters?.forEach(f => {
             if (f.id !== exceptedFilterId) {
@@ -130,4 +143,21 @@ export class FilterCardComponent implements OnInit {
         });
         this.filterService.refresh();
     }
+
+    #updateFiltersInLocalStorage(): void {
+        if (this.fileId) {
+            const primaryFilters = this.filterService.getGroup('primaryFilters');
+            const secondaryFilters = this.filterService.getGroup('secondaryFilters');
+
+            const filters: LocalStorageFilters = {
+                primaryFilters: extractFilterValues(primaryFilters?.filters),
+                secondaryFilters: extractFilterValues(secondaryFilters?.filters),
+            };
+
+            const workloadFiltersString = localStorage.getItem('workload-filters') ?? '{}';
+            const workloadFilters = JSON.parse(workloadFiltersString);
+            workloadFilters[this.fileId] = filters;
+            localStorage.setItem('workload-filters', JSON.stringify(workloadFilters));
+        }
+    }
 }

src/lib/filtering/filter-utils.ts

@@ -4,6 +4,7 @@ import { IFilterGroup } from './models/filter-group.model';
 import { IFilter } from './models/filter.model';
 import { NestedFilter } from './models/nested-filter';
 import { Id, IListable } from '../listing';
+import { LocalStorageFilter } from './filter-card/filter-card.component';
 
 function copySettings(oldFilters: INestedFilter[], newFilters: INestedFilter[]) {
     if (!oldFilters || !newFilters) {
@@ -102,3 +103,25 @@ export function flatChildren(filters: INestedFilter[]): IFilter[] {
 export function toFlatFilters(groups: IFilterGroup[], condition = (filters: IFilter[]) => filters): IFilter[] {
     return groups.reduce((acc: IFilter[], f) => [...acc, ...condition(f.filters), ...condition(flatChildren(f.filters))], []);
 }
+
+export function extractFilterValues(filters: INestedFilter[] | undefined): LocalStorageFilter[] | null {
+    const extractedValues: LocalStorageFilter[] = [];
+    filters?.forEach(filter => {
+        extractedValues.push({
+            id: filter.id,
+            checked: filter.checked ?? false,
+            children: extractFilterValues(filter.children),
+        });
+    });
+    return extractedValues.length ? extractedValues : null;
+}
+
+export function copyLocalStorageFiltersValues(primaryFilters: INestedFilter[], localStorageFilters: LocalStorageFilter[]) {
+    primaryFilters?.forEach(filter => {
+        const localStorageFilter = localStorageFilters.find(f => f.id === filter.id);
+        filter.checked = localStorageFilter?.checked;
+        if (filter.children && localStorageFilter?.children) {
+            copyLocalStorageFiltersValues(filter.children, localStorageFilter.children);
+        }
+    });
+}

src/lib/filtering/popup-filter/popup-filter.component.html

@@ -36,6 +36,7 @@
                     [primaryFiltersLabel]="primaryFiltersLabel"
                     [primaryFiltersSlug]="primaryFiltersSlug"
                     [secondaryFiltersSlug]="secondaryFiltersSlug"
+                    [fileId]="fileId"
                 ></iqser-filter-card>
             </ng-template>
         </div>

src/lib/filtering/popup-filter/popup-filter.component.ts

@@ -14,6 +14,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 })
 export class PopupFilterComponent implements OnInit {
     @Input() primaryFiltersSlug!: string;
+    @Input() fileId?: string;
     @Input() actionsTemplate?: TemplateRef<unknown>;
     @Input() secondaryFiltersSlug = '';
     @Input() primaryFiltersLabel: string = _('filter-menu.filter-types');