111731: Fixed selected filters not being displayed as labels

2025-10-07 10:04:11 +00:00 · 2024-04-23 17:46:08 +02:00
parent 8d1d04ed58
commit d40d0b7c9c
21 changed files with 56 additions and 104 deletions
--- a/src/app/core/shared/search/search-filter.service.ts
+++ b/src/app/core/shared/search/search-filter.service.ts
@@ -1,6 +1,6 @@
 import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
-import { Injectable, InjectionToken, EventEmitter } from '@angular/core';
+import { Injectable, InjectionToken } from '@angular/core';
 import {
  SearchFiltersState,
  SearchFilterState
@@ -21,7 +21,6 @@ import { SortDirection, SortOptions } from '../../cache/models/sort-options.mode
 import { RouteService } from '../../services/route.service';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { Params } from '@angular/router';
-import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';
 import { SearchOptions } from '../../../shared/search/models/search-options.model';
 import { getFirstSucceededRemoteData } from '../operators';
 import { FacetValue } from '../../../shared/search/models/facet-value.model';
@@ -37,7 +36,6 @@ const filterStateSelector = (state: SearchFiltersState) => state.searchFilter;
 export const FILTER_CONFIG: InjectionToken<SearchFilterConfig> = new InjectionToken<SearchFilterConfig>('filterConfig');
 export const IN_PLACE_SEARCH: InjectionToken<boolean> = new InjectionToken<boolean>('inPlaceSearch');
 export const REFRESH_FILTER: InjectionToken<BehaviorSubject<any>> = new InjectionToken<boolean>('refreshFilters');
-export const CHANGE_APPLIED_FILTERS: InjectionToken<EventEmitter<AppliedFilter[]>> = new InjectionToken('changeAppliedFilters');

 /**
 * Service that performs all actions that have to do with search filters and facets
--- a/src/app/core/shared/search/search.service.ts
+++ b/src/app/core/shared/search/search.service.ts
@@ -1,7 +1,7 @@
 /* eslint-disable max-classes-per-file */
-import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
+import { combineLatest as observableCombineLatest, Observable, BehaviorSubject } from 'rxjs';
 import { Injectable, OnDestroy } from '@angular/core';
-import { map, switchMap, take } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
 import { ResponseParsingService } from '../../data/parsing.service';
 import { RemoteData } from '../../data/remote-data';
@@ -32,6 +32,7 @@ import { PaginationComponentOptions } from '../../../shared/pagination/paginatio
 import { RestRequest } from '../../data/rest-request.model';
 import { BaseDataService } from '../../data/base/base-data.service';
 import { Angulartics2 } from 'angulartics2';
+import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';

 /**
 * A limited data service implementation for the 'discover' endpoint
@@ -87,6 +88,8 @@ export class SearchService implements OnDestroy {
   */
  private searchDataService: SearchDataService;

+  public appliedFilters$: BehaviorSubject<AppliedFilter[]> = new BehaviorSubject([]);
+
  constructor(
    private routeService: RouteService,
    protected requestService: RequestService,
@@ -293,7 +296,19 @@ export class SearchService implements OnDestroy {
    });
    this.requestService.send(request, useCachedVersionIfAvailable);

-    return this.rdb.buildFromHref(href);
+    return this.rdb.buildFromHref(href).pipe(
+      tap((facetValuesRD: RemoteData<FacetValues>) => {
+        if (facetValuesRD.hasSucceeded) {
+          const appliedFilters: AppliedFilter[] = (facetValuesRD.payload.appliedFilters ?? [])
+            .filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter))
+            // TODO this should ideally be fixed in the backend
+            .map((appliedFilter: AppliedFilter) => Object.assign({}, appliedFilter, {
+              operator: hasValue(appliedFilter.value.match(/\[\s*(\*|\d+)\s*TO\s*(\*|\d+)\s*]/)) ? 'range' : appliedFilter.operator,
+            }));
+          this.appliedFilters$.next(appliedFilters);
+        }
+      }),
+    );
  }

  /**
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component.ts
@@ -5,7 +5,7 @@ import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import {
  FILTER_CONFIG,
  IN_PLACE_SEARCH,
-  REFRESH_FILTER, CHANGE_APPLIED_FILTERS
+  REFRESH_FILTER,
 } from '../../../../../core/shared/search/search-filter.service';
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
@@ -63,7 +63,6 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
        { provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
        { provide: IN_PLACE_SEARCH, useFactory: () => (this.inPlaceSearch), deps: [] },
        { provide: REFRESH_FILTER, useFactory: () => (this.refreshFilters), deps: [] },
-        { provide: CHANGE_APPLIED_FILTERS, useFactory: () => this.changeAppliedFilters },
      ],
      parent: this.injector
    });
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.spec.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.spec.ts
@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
-  CHANGE_APPLIED_FILTERS,
  FILTER_CONFIG,
  IN_PLACE_SEARCH,
  REFRESH_FILTER,
@@ -88,7 +87,6 @@ describe('SearchFacetFilterComponent', () => {
        { provide: SEARCH_CONFIG_SERVICE, useValue: searchConfigService },
        { provide: IN_PLACE_SEARCH, useValue: false },
        { provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
-        { provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).overrideComponent(SearchFacetFilterComponent, {
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, Inject, OnDestroy, OnInit, EventEmitter } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { Router, Params } from '@angular/router';

 import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
@@ -10,7 +10,7 @@ import { hasNoValue, hasValue } from '../../../../empty.util';
 import { FacetValue } from '../../../models/facet-value.model';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import { SearchService } from '../../../../../core/shared/search/search.service';
-import { FILTER_CONFIG, IN_PLACE_SEARCH, REFRESH_FILTER, SearchFilterService, CHANGE_APPLIED_FILTERS } from '../../../../../core/shared/search/search-filter.service';
+import { FILTER_CONFIG, IN_PLACE_SEARCH, REFRESH_FILTER, SearchFilterService } from '../../../../../core/shared/search/search-filter.service';
 import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
 import { InputSuggestion } from '../../../../input-suggestions/input-suggestions.model';
@@ -90,7 +90,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
              @Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
              @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
              @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
-              @Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
  ) {
  }

@@ -259,7 +258,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
        const appliedFilters: AppliedFilter[] = selectedValues.map((value: string) => {
          return allAppliedFilters.find((appliedFilter: AppliedFilter) => appliedFilter.value === stripOperatorFromFilterValue(value));
        }).filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter));
-        this.changeAppliedFilters.emit(appliedFilters);
        return appliedFilters;
      }),
    );
--- a/src/app/shared/search/search-filters/search-filter/search-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.html
@@ -20,8 +20,7 @@
    <ds-search-facet-filter-wrapper
      [filterConfig]="filter"
      [inPlaceSearch]="inPlaceSearch"
-      [refreshFilters]="refreshFilters"
-      (changeAppliedFilters)="changeAppliedFilters.emit($event)">
+      [refreshFilters]="refreshFilters">
    </ds-search-facet-filter-wrapper>
  </div>
 </div>
--- a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';

 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { filter, map, startWith, switchMap, take } from 'rxjs/operators';
@@ -11,7 +11,6 @@ import { SearchService } from '../../../../core/shared/search/search.service';
 import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
 import { SequenceService } from '../../../../core/shared/sequence.service';
-import { AppliedFilter } from '../../models/applied-filter.model';

@Component({
  selector: 'ds-search-filter',
@@ -39,11 +38,6 @@ export class SearchFilterComponent implements OnInit {
   */
  @Input() refreshFilters: BehaviorSubject<boolean>;

-  /**
-   * Emits the {@link AppliedFilter}s of this search filter
-   */
-  @Output() changeAppliedFilters: EventEmitter<AppliedFilter[]> = new EventEmitter();
-
  /**
   * True when the filter is 100% collapsed in the UI
   */
--- a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.spec.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.spec.ts
@@ -13,7 +13,6 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
 import { CommonModule } from '@angular/common';
 import { SearchService } from '../../../../../core/shared/search/search.service';
 import {
-  CHANGE_APPLIED_FILTERS,
  FILTER_CONFIG,
  IN_PLACE_SEARCH,
  SearchFilterService,
@@ -77,7 +76,6 @@ describe('SearchHierarchyFilterComponent', () => {
        { provide: IN_PLACE_SEARCH, useValue: false },
        { provide: FILTER_CONFIG, useValue: Object.assign(new SearchFilterConfig(), { name: testSearchFilter }) },
        { provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
-        { provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
--- a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit, EventEmitter } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { renderFacetFor } from '../search-filter-type-decorator';
 import { FilterType } from '../../../models/filter-type.model';
 import { facetLoad, SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
@@ -10,7 +10,7 @@ import { SearchService } from '../../../../../core/shared/search/search.service'
 import {
  FILTER_CONFIG,
  IN_PLACE_SEARCH,
-  SearchFilterService, REFRESH_FILTER, CHANGE_APPLIED_FILTERS
+  SearchFilterService, REFRESH_FILTER,
 } from '../../../../../core/shared/search/search-filter.service';
 import { Params, Router } from '@angular/router';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
@@ -24,7 +24,6 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
 import { environment } from '../../../../../../environments/environment';
 import { addOperatorToFilterValue } from '../../../search.utils';
 import { VocabularyTreeviewModalComponent } from '../../../../form/vocabulary-treeview-modal/vocabulary-treeview-modal.component';
-import { AppliedFilter } from '../../../models/applied-filter.model';

@Component({
  selector: 'ds-search-hierarchy-filter',
@@ -49,9 +48,8 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
              @Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
              @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
              @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
-              @Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
  ) {
-    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters, changeAppliedFilters);
+    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters);
  }

  vocabularyExists$: Observable<boolean>;
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.spec.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.spec.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -6,7 +6,7 @@ import {
  FILTER_CONFIG,
  IN_PLACE_SEARCH,
  REFRESH_FILTER,
-  SearchFilterService, CHANGE_APPLIED_FILTERS
+  SearchFilterService,
 } from '../../../../../core/shared/search/search-filter.service';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import { FilterType } from '../../../models/filter-type.model';
@@ -105,7 +105,6 @@ describe('SearchRangeFilterComponent', () => {
        { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
        { provide: IN_PLACE_SEARCH, useValue: false },
        { provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
-        { provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
        {
          provide: SearchFilterService, useValue: {
            getSelectedValuesForFilter: () => selectedValues,
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
@@ -1,14 +1,13 @@
 import { BehaviorSubject, combineLatest as observableCombineLatest, of as observableOf , Subscription } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, EventEmitter } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
 import { FilterType } from '../../../models/filter-type.model';
 import { renderFacetFor } from '../search-filter-type-decorator';
 import { facetLoad, SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import {
-  CHANGE_APPLIED_FILTERS,
  FILTER_CONFIG,
  IN_PLACE_SEARCH,
  REFRESH_FILTER,
@@ -86,9 +85,8 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
              @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
              @Inject(PLATFORM_ID) private platformId: any,
              @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
-              @Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
              private route: RouteService) {
-    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters, changeAppliedFilters);
+    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters);

  }

@@ -121,7 +119,6 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
      }));

    this.selectedAppliedFilters$ = observableOf(appliedFilters);
-    this.changeAppliedFilters.emit(appliedFilters);
  }

  /**
--- a/src/app/shared/search/search-filters/search-filters.component.html
+++ b/src/app/shared/search/search-filters/search-filters.component.html
@@ -1,7 +1,7 @@
 <h3>{{"search.filters.head" | translate}}</h3>
 <div *ngIf="(filters | async)?.hasSucceeded">
    <div *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
-        <ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters" (changeAppliedFilters)="updateAppliedFilters(filter.name, $event)"></ds-search-filter>
+        <ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
    </div>
 </div>
 <a class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button"><i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}</a>
--- a/src/app/shared/search/search-filters/search-filters.component.ts
+++ b/src/app/shared/search/search-filters/search-filters.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';

 import { BehaviorSubject, Observable } from 'rxjs';
@@ -10,7 +10,6 @@ import { SearchFilterConfig } from '../models/search-filter-config.model';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
 import { currentPath } from '../../utils/route.utils';
-import { hasValue } from '../../empty.util';
 import { AppliedFilter } from '../models/applied-filter.model';

@Component({
@@ -23,7 +22,7 @@ import { AppliedFilter } from '../models/applied-filter.model';
 /**
 * This component represents the part of the search sidebar that contains filters.
 */
-export class SearchFiltersComponent implements OnInit, OnDestroy {
+export class SearchFiltersComponent implements OnInit {
  /**
   * An observable containing configuration about which filters are shown and how they are shown
   */
@@ -55,11 +54,6 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
   */
  @Input() refreshFilters: BehaviorSubject<boolean>;

-  /**
-   * Emits the {@link AppliedFilter}s by search filter name
-   */
-  @Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();
-
  appliedFilters: Map<string, AppliedFilter[]> = new Map();

  /**
@@ -67,8 +61,6 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
   */
  searchLink: string;

-  subs = [];
-
  /**
   * Initialize instance variables
   * @param {SearchService} searchService
@@ -107,22 +99,4 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
    return config ? config.name : undefined;
  }

-  /**
-   * Updates the map of {@link AppliedFilter}s and emits it to it's parent component
-   *
-   * @param filterName
-   * @param appliedFilters
-   */
-  updateAppliedFilters(filterName: string, appliedFilters: AppliedFilter[]): void {
-    this.appliedFilters.set(filterName, appliedFilters);
-    this.changeAppliedFilters.emit(this.appliedFilters);
-  }
-
-  ngOnDestroy() {
-    this.subs.forEach((sub) => {
-      if (hasValue(sub)) {
-        sub.unsubscribe();
-      }
-    });
-  }
 }
--- a/src/app/shared/search/search-filters/themed-search-filters.component.ts
+++ b/src/app/shared/search/search-filters/themed-search-filters.component.ts
@@ -1,10 +1,9 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../../theme-support/themed.component';
 import { SearchFiltersComponent } from './search-filters.component';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../../core/data/remote-data';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
-import { AppliedFilter } from '../models/applied-filter.model';

 /**
 * Themed wrapper for SearchFiltersComponent
@@ -20,11 +19,9 @@ export class ThemedSearchFiltersComponent extends ThemedComponent<SearchFiltersC
  @Input() inPlaceSearch: boolean;
  @Input() refreshFilters: Observable<any>;
  @Input() filters: Observable<RemoteData<SearchFilterConfig[]>>;
-  @Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();

  protected inAndOutputNames: (keyof SearchFiltersComponent & keyof this)[] = [
    'filters', 'currentConfiguration', 'currentScope', 'inPlaceSearch', 'refreshFilters',
-    'changeAppliedFilters',
  ];

  protected getComponentName(): string {
--- a/src/app/shared/search/search-labels/search-labels.component.html
+++ b/src/app/shared/search/search-labels/search-labels.component.html
@@ -1,8 +1,6 @@
 <div class="labels">
-  <ng-container *ngFor="let appliedFilters of (appliedFilters | keyvalue)">
-    <ds-search-label-loader *ngFor="let appliedFilter of appliedFilters.value"
+  <ds-search-label-loader *ngFor="let appliedFilter of appliedFilters$ | async"
                          [appliedFilter]="appliedFilter"
                          [inPlaceSearch]="inPlaceSearch">
  </ds-search-label-loader>
-  </ng-container>
 </div>
--- a/src/app/shared/search/search-labels/search-labels.component.ts
+++ b/src/app/shared/search/search-labels/search-labels.component.ts
@@ -1,5 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { AppliedFilter } from '../models/applied-filter.model';
+import { SearchService } from '../../../core/shared/search/search.service';
+import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'ds-search-labels',
@@ -10,16 +12,22 @@ import { AppliedFilter } from '../models/applied-filter.model';
 /**
 * Component that represents the labels containing the currently active filters
 */
-export class SearchLabelsComponent {
+export class SearchLabelsComponent implements OnInit {

  /**
   * True when the search component should show results on the current page
   */
  @Input() inPlaceSearch: boolean;

-  /**
-   * The {@link AppliedFilter}s by filter name
-   */
-  @Input() appliedFilters: Map<string, AppliedFilter[]>;
+  appliedFilters$: BehaviorSubject<AppliedFilter[]>;
+
+  constructor(
+    protected searchService: SearchService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.appliedFilters$ = this.searchService.appliedFilters$;
+  }

 }
--- a/src/app/shared/search/search-sidebar/search-sidebar.component.html
+++ b/src/app/shared/search/search-sidebar/search-sidebar.component.html
@@ -21,8 +21,7 @@
                               [currentConfiguration]="configuration"
                               [filters]="filters"
                               [refreshFilters]="refreshFilters"
-                               [inPlaceSearch]="inPlaceSearch"
-                               (changeAppliedFilters)="changeAppliedFilters.emit($event)">
+                               [inPlaceSearch]="inPlaceSearch">
            </ds-themed-search-filters>
            <ds-advanced-search [configuration]="configuration"
                                [filtersConfig]="(filters | async)?.payload">
--- a/src/app/shared/search/search-sidebar/search-sidebar.component.ts
+++ b/src/app/shared/search/search-sidebar/search-sidebar.component.ts
@@ -7,7 +7,6 @@ import { SortOptions } from '../../../core/cache/models/sort-options.model';
 import { ViewMode } from '../../../core/shared/view-mode.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
-import { AppliedFilter } from '../models/applied-filter.model';

 /**
 * This component renders a simple item page.
@@ -96,11 +95,6 @@ export class SearchSidebarComponent {
   */
  @Output() changeConfiguration: EventEmitter<SearchConfigurationOption> = new EventEmitter<SearchConfigurationOption>();

-  /**
-   * Emits the {@link AppliedFilter}s by search filter name
-   */
-  @Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();
-
  /**
   * Emits event when the user select a new view mode
   */
--- a/src/app/shared/search/search-sidebar/themed-search-sidebar.component.ts
+++ b/src/app/shared/search/search-sidebar/themed-search-sidebar.component.ts
@@ -8,7 +8,6 @@ import { PaginatedSearchOptions } from '../models/paginated-search-options.model
 import { BehaviorSubject, Observable } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
-import { AppliedFilter } from '../models/applied-filter.model';

 /**
 * Themed wrapper for SearchSidebarComponent
@@ -33,14 +32,12 @@ export class ThemedSearchSidebarComponent extends ThemedComponent<SearchSidebarC
  @Input() refreshFilters: BehaviorSubject<boolean>;
  @Output() toggleSidebar: EventEmitter<boolean> = new EventEmitter();
  @Output() changeConfiguration: EventEmitter<SearchConfigurationOption> = new EventEmitter();
-  @Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();
  @Output() changeViewMode: EventEmitter<ViewMode> = new EventEmitter();

  protected inAndOutputNames: (keyof SearchSidebarComponent & keyof this)[] = [
    'configuration', 'configurationList', 'currentScope', 'currentSortOption',
    'resultCount', 'filters', 'viewModeList', 'showViewModes', 'inPlaceSearch',
    'searchOptions', 'sortOptionsList', 'refreshFilters', 'toggleSidebar', 'changeConfiguration',
-    'changeAppliedFilters',
    'changeViewMode',
  ];

--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -61,7 +61,6 @@
                       [viewModeList]="viewModeList"
                       [showViewModes]="showViewModes"
                       (changeConfiguration)="changeContext($event.context)"
-                       (changeAppliedFilters)="appliedFilters = $event"
                       (changeViewMode)="changeViewMode()"></ds-themed-search-sidebar>
    <ds-themed-search-sidebar id="search-sidebar-sm" *ngIf="(isXsOrSm$ | async)"
                       [configurationList]="configurationList"
@@ -77,7 +76,6 @@
                       [showViewModes]="showViewModes"
                       (toggleSidebar)="closeSidebar()"
                       (changeConfiguration)="changeContext($event.context)"
-                       (changeAppliedFilters)="appliedFilters = $event"
                       (changeViewMode)="changeViewMode()">
    </ds-themed-search-sidebar>
 </ng-template>
@@ -93,7 +91,7 @@
    </ds-themed-search-form>
    <div class="row mb-3 mb-md-1">
        <div class="labels col-sm-9">
-            <ds-search-labels *ngIf="searchEnabled" [appliedFilters]="appliedFilters" [inPlaceSearch]="inPlaceSearch">
+            <ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch">
            </ds-search-labels>
        </div>
    </div>
--- a/src/app/shared/search/search.component.ts
+++ b/src/app/shared/search/search.component.ts
@@ -38,7 +38,6 @@ import { WorkspaceItem } from '../../core/submission/models/workspaceitem.model'
 import { ITEM_MODULE_PATH } from '../../item-page/item-page-routing-paths';
 import { COLLECTION_MODULE_PATH } from '../../collection-page/collection-page-routing-paths';
 import { COMMUNITY_MODULE_PATH } from '../../community-page/community-page-routing-paths';
-import { AppliedFilter } from './models/applied-filter.model';

@Component({
  selector: 'ds-search',
@@ -269,11 +268,6 @@ export class SearchComponent implements OnInit {
   */
  @Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();

-  /**
-   * The {@link AppliedFilter}s by filter name
-   */
-  appliedFilters: Map<string, AppliedFilter[]> = new Map();
-
  constructor(protected service: SearchService,
              protected sidebarService: SidebarService,
              protected windowService: HostWindowService,