Merge pull request #3846 from alexandrevryghem/w2p-122357_browse-performance-fixes_contribute-main

Browse performance fixes
2025-10-07 01:54:15 +00:00 · 2025-01-28 16:08:01 -06:00
parent 84feea9b30 6cf62a6c61
commit df377804bb
4 changed files with 57 additions and 81 deletions
--- a/src/app/browse-by/browse-by-date/browse-by-date.component.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -22,8 +22,8 @@ import {
  of as observableOf,
 } from 'rxjs';
 import {
+  distinctUntilChanged,
  map,
-  take,
 } from 'rxjs/operators';
 import { ThemedBrowseByComponent } from 'src/app/shared/browse-by/themed-browse-by.component';

@@ -42,13 +42,7 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { Item } from '../../core/shared/item.model';
-import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../shared/comcol/comcol-page-logo/comcol-page-logo.component';
 import { isValidDate } from '../../shared/date.util';
-import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import {
  hasValue,
  isNotEmpty,
@@ -56,7 +50,6 @@ import {
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-type';
-import { VarDirective } from '../../shared/utils/var.directive';
 import {
  BrowseByMetadataComponent,
  browseParamsToOptions,
@@ -68,15 +61,8 @@ import {
  templateUrl: '../browse-by-metadata/browse-by-metadata.component.html',
  standalone: true,
  imports: [
-    VarDirective,
    AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
    NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
    TranslateModule,
    ThemedLoadingComponent,
    ThemedBrowseByComponent,
@@ -117,18 +103,20 @@ export class BrowseByDateComponent extends BrowseByMetadataComponent implements
    this.startsWithType = StartsWithType.date;
    this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
    this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
+    const routeParams$: Observable<Params> = observableCombineLatest([
+      this.route.params,
+      this.route.queryParams,
+    ]).pipe(
+      map(([params, queryParams]: [Params, Params]) => Object.assign({}, params, queryParams)),
+      distinctUntilChanged((prev: Params, curr: Params) => prev.id === curr.id && prev.startsWith === curr.startsWith),
+    );
    this.subs.push(
-      observableCombineLatest(
-        [ this.route.params.pipe(take(1)),
-          this.route.queryParams,
-          this.scope$,
-          this.currentPagination$,
-          this.currentSort$,
-        ]).pipe(
-        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
-        }),
-      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+      observableCombineLatest([
+        routeParams$,
+        this.scope$,
+        this.currentPagination$,
+        this.currentSort$,
+      ]).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
        const metadataKeys = params.browseDefinition ? params.browseDefinition.metadataKeys : this.defaultMetadataKeys;
        this.browseId = params.id || this.defaultBrowseId;
        this.startsWith = +params.startsWith || params.startsWith;
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -11,6 +11,7 @@ import {
  OnDestroy,
  OnInit,
  PLATFORM_ID,
+  SimpleChanges,
 } from '@angular/core';
 import {
  ActivatedRoute,
@@ -26,8 +27,8 @@ import {
  Subscription,
 } from 'rxjs';
 import {
+  distinctUntilChanged,
  map,
-  take,
 } from 'rxjs/operators';
 import { ThemedBrowseByComponent } from 'src/app/shared/browse-by/themed-browse-by.component';

@@ -51,12 +52,6 @@ import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { Context } from '../../core/shared/context.model';
 import { Item } from '../../core/shared/item.model';
 import { getFirstSucceededRemoteData } from '../../core/shared/operators';
-import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../shared/comcol/comcol-page-logo/comcol-page-logo.component';
-import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import {
  hasValue,
  isNotEmpty,
@@ -64,7 +59,6 @@ import {
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-type';
-import { VarDirective } from '../../shared/utils/var.directive';
 import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';

 export const BBM_PAGINATION_ID = 'bbm';
@@ -74,15 +68,8 @@ export const BBM_PAGINATION_ID = 'bbm';
  styleUrls: ['./browse-by-metadata.component.scss'],
  templateUrl: './browse-by-metadata.component.html',
  imports: [
-    VarDirective,
    AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
    NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
    TranslateModule,
    ThemedLoadingComponent,
    ThemedBrowseByComponent,
@@ -232,21 +219,22 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
      return;
    }
    const sortConfig = new SortOptions('default', SortDirection.ASC);
-    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig));
    this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
    this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
+    const routeParams$: Observable<Params> = observableCombineLatest([
+      this.route.params,
+      this.route.queryParams,
+    ]).pipe(
+      map(([params, queryParams]: [Params, Params]) => Object.assign({}, params, queryParams)),
+      distinctUntilChanged((prev: Params, curr: Params) => prev.id === curr.id && prev.authority === curr.authority && prev.value === curr.value && prev.startsWith === curr.startsWith),
+    );
    this.subs.push(
-      observableCombineLatest(
-        [ this.route.params.pipe(take(1)),
-          this.route.queryParams,
-          this.scope$,
-          this.currentPagination$,
-          this.currentSort$,
-        ]).pipe(
-        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
-        }),
-      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+      observableCombineLatest([
+        routeParams$,
+        this.scope$,
+        this.currentPagination$,
+        this.currentSort$,
+      ]).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
        this.browseId = params.id || this.defaultBrowseId;
        this.authority = params.authority;

@@ -274,8 +262,10 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {

  }

-  ngOnChanges(): void {
-    this.scope$.next(this.scope);
+  ngOnChanges(changes: SimpleChanges): void {
+    if (hasValue(changes.scope)) {
+      this.scope$.next(this.scope);
+    }
  }

  /**
--- a/src/app/browse-by/browse-by-title/browse-by-title.component.ts
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -11,11 +11,12 @@ import { Params } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import {
  combineLatest as observableCombineLatest,
+  Observable,
  of as observableOf,
 } from 'rxjs';
 import {
+  distinctUntilChanged,
  map,
-  take,
 } from 'rxjs/operators';

 import { environment } from '../../../environments/environment';
@@ -24,15 +25,8 @@ import {
  SortOptions,
 } from '../../core/cache/models/sort-options.model';
 import { ThemedBrowseByComponent } from '../../shared/browse-by/themed-browse-by.component';
-import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../shared/comcol/comcol-page-logo/comcol-page-logo.component';
-import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { VarDirective } from '../../shared/utils/var.directive';
 import {
  BrowseByMetadataComponent,
  browseParamsToOptions,
@@ -44,15 +38,8 @@ import {
  templateUrl: '../browse-by-metadata/browse-by-metadata.component.html',
  standalone: true,
  imports: [
-    VarDirective,
    AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
    NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
    TranslateModule,
    ThemedLoadingComponent,
    ThemedBrowseByComponent,
@@ -71,18 +58,20 @@ export class BrowseByTitleComponent extends BrowseByMetadataComponent implements
    const sortConfig = new SortOptions('dc.title', SortDirection.ASC);
    this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
    this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
+    const routeParams$: Observable<Params> = observableCombineLatest([
+      this.route.params,
+      this.route.queryParams,
+    ]).pipe(
+      map(([params, queryParams]: [Params, Params]) => Object.assign({}, params, queryParams)),
+      distinctUntilChanged((prev: Params, curr: Params) => prev.id === curr.id && prev.startsWith === curr.startsWith),
+    );
    this.subs.push(
-      observableCombineLatest(
-        [ this.route.params.pipe(take(1)),
-          this.route.queryParams,
-          this.scope$,
-          this.currentPagination$,
-          this.currentSort$,
-        ]).pipe(
-        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
-        }),
-      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+      observableCombineLatest([
+        routeParams$,
+        this.scope$,
+        this.currentPagination$,
+        this.currentSort$,
+      ]).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
        this.startsWith = +params.startsWith || params.startsWith;
        this.browseId = params.id || this.defaultBrowseId;
        this.updatePageWithItems(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
--- a/src/app/core/data/base/base-data.service.ts
+++ b/src/app/core/data/base/base-data.service.ts
@@ -11,6 +11,7 @@ import {
  from as observableFrom,
  Observable,
  of as observableOf,
+  shareReplay,
 } from 'rxjs';
 import {
  map,
@@ -288,6 +289,10 @@ export class BaseDataService<T extends CacheableObject> implements HALDataServic
      isNotEmptyOperator(),
      take(1),
      map((href: string) => this.buildHrefFromFindOptions(href, {}, [], ...linksToFollow)),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      }),
    );

    const startTime: number = new Date().getTime();
@@ -343,6 +348,10 @@ export class BaseDataService<T extends CacheableObject> implements HALDataServic
      isNotEmptyOperator(),
      take(1),
      map((href: string) => this.buildHrefFromFindOptions(href, options, [], ...linksToFollow)),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      }),
    );

    const startTime: number = new Date().getTime();