diff --git a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
index 32d9ea6e774d0d47bacef86aed15f34aeffc6de1..216683c1225bdf420063a0dbe0411a47a439665f 100644
--- a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
@@ -8,7 +8,7 @@
</a>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<div [@facetLoad]="animationState">
- <ng-container *ngFor="let value of page.page; let i=index">
+ <ng-container *ngFor="let value of page.page; trackBy: trackUpdate">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge">
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts b/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
index 1675dd051a56bb8063b22e8cbd8f01c70af237d5..f4f835c152e27985cc8cc2ac7a3ac4ed6aabe00e 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
@@ -290,6 +290,14 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
getDisplayValue(facet: FacetValue, query: string): string {
return new EmphasizePipe().transform(facet.value, query) + ' (' + facet.count + ')';
}
+
+
+ /**
+ * Prevent unnecessary rerendering
+ */
+ trackUpdate(index, value: FacetValue) {
+ return value ? value.search : undefined;
+ }
}
export const facetLoad = trigger('facetLoad', [
diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.service.ts b/src/app/+search-page/search-filters/search-filter/search-filter.service.ts
index bf21eab3675684226ac64b6e6e13ef599e765547..34c34ee4cc8a1c23b1edaa64d5010cb6e4a87424 100644
--- a/src/app/+search-page/search-filters/search-filter/search-filter.service.ts
+++ b/src/app/+search-page/search-filters/search-filter/search-filter.service.ts
@@ -1,6 +1,6 @@
import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
import { Injectable, InjectionToken } from '@angular/core';
-import { map } from 'rxjs/operators';
+import { distinctUntilChanged, map } from 'rxjs/operators';
import { SearchFiltersState, SearchFilterState } from './search-filter.reducer';
import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
import {
@@ -65,7 +65,9 @@ export class SearchFilterService {
return observableCombineLatest(values$, prefixValues$).pipe(
map(([values, prefixValues]) => {
- if (isNotEmpty(values)) {
+ console.log('getSelectedValuesForFilter ', values, prefixValues);
+
+ if (isNotEmpty(values)) {
return values;
}
return prefixValues;
@@ -88,13 +90,14 @@ export class SearchFilterService {
} else {
return false;
}
- })
+ }),
+ distinctUntilChanged()
);
}
/**
* Request the current page of a given filter
- * @param {string} filterName The filtername for which the page state is checked
+ * @param {string} filterName The filter name for which the page state is checked
* @returns {Observable<boolean>} Emits the current page state of the given filter, if it's unavailable, return 1
*/
getPage(filterName: string): Observable<number> {
@@ -106,7 +109,8 @@ export class SearchFilterService {
} else {
return 1;
}
- }));
+ }),
+ distinctUntilChanged());
}
/**
diff --git a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
index 812f5437162f51d2c32068fc0f8d6bbed4722b45..5434f0e0f421c489a62f79977eb4dfad231a0a19 100644
--- a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
@@ -8,7 +8,7 @@
</a>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<div [@facetLoad]="animationState">
- <ng-container *ngFor="let value of page.page; let i=index">
+ <ng-container *ngFor="let value of page.page; trackBy: trackUpdate">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html
index 352c1710c05a86af4eab41d5f2a1304846ee16be..1cc0556ed52bb09fbdbf8cf8c43026a5fee42f1d 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html
@@ -24,7 +24,7 @@
</ng-container>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<div [@facetLoad]="animationState">
- <ng-container *ngFor="let value of page.page; let i=index">
+ <ng-container *ngFor="let value of page.page; trackBy: trackUpdate">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getChangeParams(value.value) | async" queryParamsHandling="merge">
diff --git a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
index fcc2393b93592b891be49afafc8a7192c2216d6e..32f6fe2153c31844f33e6ca119f2e897aa637bdd 100644
--- a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
@@ -9,7 +9,7 @@
<ng-container *ngVar="(filterValues$ | async) as filterValuesRD">
<div [@facetLoad]="animationState">
<ng-container *ngFor="let page of filterValuesRD?.payload">
- <ng-container *ngFor="let value of page.page; let i=index">
+ <ng-container *ngFor="let value of page.page; trackBy: trackUpdate">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
diff --git a/src/app/+search-page/search-filters/search-filters.component.html b/src/app/+search-page/search-filters/search-filters.component.html
index 0522c1fba0e31a6f88bfe8576024c9f21f5adfe3..de725f09583af6efe513b919878524bbb182540e 100644
--- a/src/app/+search-page/search-filters/search-filters.component.html
+++ b/src/app/+search-page/search-filters/search-filters.component.html
@@ -1,6 +1,6 @@
<h3>{{"search.filters.head" | translate}}</h3>
<div *ngIf="(filters | async)?.hasSucceeded">
- <div *ngFor="let filter of (filters | async)?.payload">
+ <div *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
<ds-search-filter *ngIf="isActive(filter) | async" class="d-block mb-3 p-3" [filter]="filter"></ds-search-filter>
</div>
</div>
diff --git a/src/app/+search-page/search-filters/search-filters.component.ts b/src/app/+search-page/search-filters/search-filters.component.ts
index f16faff1f35d5271f52421b311ff5579e0b3c25f..0d32df48677ce18a36e80b8c053ffbf85baba06b 100644
--- a/src/app/+search-page/search-filters/search-filters.component.ts
+++ b/src/app/+search-page/search-filters/search-filters.component.ts
@@ -1,6 +1,6 @@
import { Observable, of as observableOf } from 'rxjs';
-import { filter, map, mergeMap, startWith, switchMap } from 'rxjs/operators';
+import { filter, first, map, mergeMap, startWith, switchMap, tap } from 'rxjs/operators';
import { Component } from '@angular/core';
import { SearchService } from '../search-service/search.service';
import { RemoteData } from '../../core/data/remote-data';
@@ -9,6 +9,7 @@ import { SearchConfigurationService } from '../search-service/search-configurati
import { isNotEmpty } from '../../shared/empty.util';
import { SearchFilterService } from './search-filter/search-filter.service';
import { getSucceededRemoteData } from '../../core/shared/operators';
+import { FieldUpdate } from '../../core/data/object-updates/object-updates.reducer';
@Component({
selector: 'ds-search-filters',
@@ -59,11 +60,13 @@ export class SearchFiltersComponent {
*/
isActive(filterConfig: SearchFilterConfig): Observable<boolean> {
return this.filterService.getSelectedValuesForFilter(filterConfig).pipe(
- mergeMap((isActive) => {
+ switchMap((isActive) => {
+ console.log('selected fires');
if (isNotEmpty(isActive)) {
return observableOf(true);
} else {
return this.searchConfigService.searchOptions.pipe(
+ first(),
switchMap((options) => {
return this.searchService.getFacetValuesFor(filterConfig, 1, options).pipe(
filter((RD) => !RD.isLoading),
@@ -73,6 +76,13 @@ export class SearchFiltersComponent {
}
))
}
- }),startWith(true),);
+ }), tap(t => console.log(t)), startWith(true));
+ }
+
+ /**
+ * Prevent unnecessary rerendering
+ */
+ trackUpdate(index, config: SearchFilterConfig) {
+ return config ? config.name : undefined;
}
}
diff --git a/src/app/shared/services/route.service.ts b/src/app/shared/services/route.service.ts
index 9dd9a0f1641c330c4a7228d69b2468016e874407..478d92c21ed2404ec4a92fcc7ef9cea45c5ab032 100644
--- a/src/app/shared/services/route.service.ts
+++ b/src/app/shared/services/route.service.ts
@@ -16,7 +16,7 @@ export class RouteService {
getQueryParameterValues(paramName: string): Observable<string[]> {
return this.route.queryParamMap.pipe(
map((params) => [...params.getAll(paramName)]),
- distinctUntilChanged()
+ distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
);
}