Merged in dspacecris-7-DSC-1053 (pull request DSpace#595)

Improve performance

Approved-by: Andrea Barbasso
Approved-by: Davide Negretti

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/cris-layout-metadata-box.component.ts

@@ -36,7 +36,7 @@ export class CrisLayoutMetadataBoxComponent extends CrisLayoutBoxModelComponent
   subs: Subscription[] = [];
 
   constructor(
-    public cd: ChangeDetectorRef,
+    public cdr: ChangeDetectorRef,
     protected translateService: TranslateService,
     @Inject('boxProvider') public boxProvider: CrisLayoutBox,
     @Inject('itemProvider') public itemProvider: Item
@@ -55,6 +55,7 @@ export class CrisLayoutMetadataBoxComponent extends CrisLayoutBoxModelComponent
    */
   setMetadataComponents(metadatacomponents: MetadataBoxConfiguration) {
     this.metadataBoxConfiguration = metadatacomponents;
+    this.cdr.detectChanges();
   }
 
   /**

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
@@ -13,6 +13,7 @@ import { ItemDataService } from '../../../../../core/data/item-data.service';
 import { CrisLayoutBox, MetricsBoxConfiguration, } from '../../../../../core/layout/models/box.model';
 import { Item } from '../../../../../core/shared/item.model';
 import { CrisLayoutMetricRow } from '../../../../../core/layout/models/tab.model';
+import { isPlatformBrowser } from '@angular/common';
 
 /**
  * This component renders the metadata boxes of items
@@ -54,25 +55,28 @@ export class CrisLayoutMetricsBoxComponent extends CrisLayoutBoxModelComponent i
     protected itemService: ItemDataService,
     protected translateService: TranslateService,
     @Inject('boxProvider') public boxProvider: CrisLayoutBox,
-    @Inject('itemProvider') public itemProvider: Item
+    @Inject('itemProvider') public itemProvider: Item,
+    @Inject(PLATFORM_ID) protected platformId: Object
   ) {
     super(translateService, boxProvider, itemProvider);
   }
 
   ngOnInit() {
     super.ngOnInit();
 
-    this.metricsBoxConfiguration = this.box.configuration as MetricsBoxConfiguration;
-    this.subs.push(
-      this.itemService.getMetrics(this.item.uuid).pipe(getFirstSucceededRemoteDataPayload())
-        .subscribe((result) => {
-          const matchingMetrics = this.metricsComponentService.getMatchingMetrics(
-            result.page,
-            this.metricsBoxConfiguration.maxColumns,
-            this.metricsBoxConfiguration.metrics
-          );
-          this.metricRows.next(matchingMetrics);
-        }));
+    if (isPlatformBrowser(this.platformId)) {
+      this.metricsBoxConfiguration = this.box.configuration as MetricsBoxConfiguration;
+      this.subs.push(
+        this.itemService.getMetrics(this.item.uuid).pipe(getFirstSucceededRemoteDataPayload())
+          .subscribe((result) => {
+            const matchingMetrics = this.metricsComponentService.getMatchingMetrics(
+              result.page,
+              this.metricsBoxConfiguration.maxColumns,
+              this.metricsBoxConfiguration.metrics
+            );
+            this.metricRows.next(matchingMetrics);
+          }));
+    }
   }
 
   /**

src/app/shared/object-list/metric-donuts/metric-donuts.component.html

@@ -1,5 +1,5 @@
 <div class="flex-row d-flex ml-4">
-  <ng-container *ngFor="let metric of donuts() | async; trackBy: identify">
+  <ng-container *ngFor="let metric of (metrics$ | async); trackBy: identify">
     <ds-metric-loader
       class="d-inline-block d-flex flex-col mr-1"
       [metric]="metric"

src/app/shared/object-list/metric-donuts/metric-donuts.component.ts

@@ -1,12 +1,25 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnInit,
+  PLATFORM_ID,
+  ViewEncapsulation
+} from '@angular/core';
+
+import { BehaviorSubject, Observable, of } from 'rxjs';
+
 import { Metric } from '../../../core/shared/metric.model';
-import { hasValue } from '../../empty.util';
-import { getFirstSucceededRemoteListPayload } from '../../../core/shared/operators';
+import { isEmpty } from '../../empty.util';
+import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { map } from 'rxjs/operators';
 import { Item } from '../../../core/shared/item.model';
 import { LinkService } from '../../../core/cache/builders/link.service';
 import { followLink } from '../../utils/follow-link-config.model';
+import { RemoteData } from '../../../core/data/remote-data';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
 
 export const allowedDonuts = ['altmetric', 'dimensions', 'plumX'];
 
@@ -21,27 +34,45 @@ export const allowedDonuts = ['altmetric', 'dimensions', 'plumX'];
  */
 export class MetricDonutsComponent implements OnInit {
 
+  /**
+   * The item object for which to show the metrics donuts
+   */
   @Input() item: Item;
 
-  constructor(private linkService: LinkService) {
+  /**
+   * The list of metric donuts to load
+   */
+  metrics$: BehaviorSubject<Metric[]> = new BehaviorSubject<Metric[]>([]);
+
+  constructor(private linkService: LinkService, @Inject(PLATFORM_ID) protected platformId: Object) {
   }
 
   ngOnInit() {
     this.linkService.resolveLink(this.item, followLink('metrics'));
+    if (isPlatformBrowser(this.platformId)) {
+      this.retrieveMetrics().subscribe((metrics: Metric[]) => {
+        this.metrics$.next(metrics);
+      })
+    }
   }
 
   /**
-   * Filter metrics with a positive metricCount value.
+   * Retrieve metrics from item object.
    */
-  donuts(): Observable<Metric[]> {
-    if (!hasValue(this.item.metrics)) {
+  private retrieveMetrics(): Observable<Metric[]> {
+    if (isEmpty(this.item.metrics)) {
       return of([]);
+    } else {
+      return this.item.metrics.pipe(
+        getFirstCompletedRemoteData(),
+        map((metricsRD: RemoteData<PaginatedList<Metric>>) => {
+          if (metricsRD.hasSucceeded) {
+            return metricsRD.payload.page.filter(metric => allowedDonuts.includes(metric.metricType));
+          } else {
+            return [];
+          }
+        }));
     }
-    return this.item.metrics.pipe(
-      getFirstSucceededRemoteListPayload(),
-      map((metrics: Metric[]) => {
-        return metrics.filter(metric => allowedDonuts.includes(metric.metricType));
-      }));
   }
 
   identify(index, item) {

src/app/shared/search/search-charts/search-charts.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="(filters | async)?.hasSucceeded && (filters | async)?.payload?.length > 0" class="container">
+<div *ngIf="isPlatformBrowser && (filters | async)?.hasSucceeded && (filters | async)?.payload?.length > 0" class="container">
   <div class="row">
     <div class="col-md-12 mb-40">
       <div class="d-flex align-items-center mb-2">

src/app/shared/search/search-charts/search-charts.component.ts

@@ -1,15 +1,17 @@
-import { getRemoteDataPayload } from './../../../core/shared/operators';
-import { SEARCH_CONFIG_SERVICE } from './../../../my-dspace-page/my-dspace-page.component';
-import { SearchConfigurationService } from './../../../core/shared/search/search-configuration.service';
-import { SearchService } from './../../../core/shared/search/search.service';
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
 
 import { BehaviorSubject, Observable, of } from 'rxjs';
-import { filter, map, switchMap, take, tap, mergeMap } from 'rxjs/operators';
+import { filter, map, mergeMap, switchMap, take, tap } from 'rxjs/operators';
+
 import { RemoteData } from '../../../core/data/remote-data';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
 import { shrinkInOut } from '../../animations/shrink';
 import { hasValue, isNotEmpty } from '../../empty.util';
+import { getRemoteDataPayload } from '../../../core/shared/operators';
+import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { SearchService } from '../../../core/shared/search/search.service';
 
 @Component({
   selector: 'ds-search-charts',
@@ -57,25 +59,37 @@ export class SearchChartsComponent implements OnInit {
    */
   selectedFilter: SearchFilterConfig;
 
+  /**
+   * Whether a platform id represents a browser platform.
+   */
+  isPlatformBrowser: boolean;
 
-  constructor(private searchService: SearchService,
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private searchService: SearchService,
+    @Inject(PLATFORM_ID) protected platformId: Object,
     @Inject(SEARCH_CONFIG_SERVICE) private searchConfigService: SearchConfigurationService) {
   }
 
   ngOnInit(): void {
-    this.filters.pipe(
-      filter((rd: RemoteData<SearchFilterConfig[]>) => isNotEmpty(rd)),
-      take(1),
-      mergeMap((rd: RemoteData<SearchFilterConfig[]>) => {
-        return this.hasFacetValues(rd.payload[0]).pipe(
-          tap((hasValues) => {
-            this.selectedFilter = this.selectedFilter
-              ? this.selectedFilter
-              : rd.hasSucceeded && hasValues ? rd.payload[0] : null;
-          })
-        );
-      }),
-    ).subscribe();
+    this.isPlatformBrowser = isPlatformBrowser(this.platformId);
+
+    if (isPlatformBrowser(this.platformId)) {
+      this.filters.pipe(
+        filter((rd: RemoteData<SearchFilterConfig[]>) => isNotEmpty(rd)),
+        take(1),
+        mergeMap((rd: RemoteData<SearchFilterConfig[]>) => {
+          return this.hasFacetValues(rd.payload[0]).pipe(
+            tap((hasValues) => {
+              this.selectedFilter = this.selectedFilter
+                ? this.selectedFilter
+                : rd.hasSucceeded && hasValues ? rd.payload[0] : null;
+              this.cdr.detectChanges();
+            })
+          );
+        }),
+      ).subscribe();
+    }
   }
 
   /**

src/app/social/social.component.ts

@@ -1,9 +1,5 @@
-import {
-  Component,
-  Inject, OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { SocialService } from './social.service';
 
@@ -13,7 +9,7 @@ import { SocialService } from './social.service';
   styleUrls: ['./social.component.scss']
 })
 /**
- * Component to render dinamically the social2 buttons using addThis plugin
+ * Component to render dynamically the social2 buttons using addThis plugin
  */
 export class SocialComponent implements OnInit, OnDestroy {
 
@@ -25,19 +21,22 @@ export class SocialComponent implements OnInit, OnDestroy {
   subscription;
 
   constructor(@Inject(DOCUMENT) private _document: Document,
+              @Inject(PLATFORM_ID) protected platformId: Object,
               private socialService: SocialService,
               private activatedRoute: ActivatedRoute,
   ) {
   }
 
   ngOnInit() {
-    this.subscription = this.socialService.showSocialButtons(this.activatedRoute).subscribe((show) => {
-      if (show) {
-        this.showSocialButtons();
-      } else {
-        this.hideSocialButtons();
-      }
-    });
+    if (isPlatformBrowser(this.platformId)) {
+      this.subscription = this.socialService.showSocialButtons(this.activatedRoute).subscribe((show) => {
+        if (show) {
+          this.showSocialButtons();
+        } else {
+          this.hideSocialButtons();
+        }
+      });
+    }
   }
 
   showSocialButtons() {

src/app/social/social.service.ts

@@ -1,10 +1,12 @@
 import { Injectable } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+
+import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
+import { distinctUntilChanged, filter, map, mergeMap, switchMap, take } from 'rxjs/operators';
+
 import { environment } from '../../environments/environment';
 import { CookieService } from '../core/services/cookie.service';
-import { distinctUntilChanged, filter, map, mergeMap, switchMap, take } from 'rxjs/operators';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { AuthService } from '../core/auth/auth.service';
-import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
 
 export const APP_THIS_ID_SELECTOR = '#at4-share';
 
@@ -29,30 +31,29 @@ export class SocialService {
   }
 
   initializeAddThisScript(_document: Document): any {
-    // console.log('Initializing the addThisCookie script');
+    // Initializing the addThisCookie script
     const script = _document.createElement('script');
     script.type = 'text/javascript';
     script.src = environment.addThisPlugin.scriptUrl + environment.addThisPlugin.siteId;
     _document.body.appendChild(script);
   }
 
   hide(_document: Document) {
-    // console.log('Hiding social buttons');
+    // Hiding social buttons
     const socialButtons: HTMLElement = _document.querySelector(APP_THIS_ID_SELECTOR);
     if (socialButtons) {
-      // console.log('HTML Element found, setting display to none');
+      // HTML Element found, setting display to none
       socialButtons.style.display = 'none';
     }
   }
 
   show(_document: Document) {
-    // console.log('Showing social buttons');
+    // Showing social buttons
     const socialButtons: HTMLElement = _document.querySelector(APP_THIS_ID_SELECTOR);
     if (socialButtons) {
-      // console.log('HTML Element found, setting display to block');
+      // HTML Element found, setting display to block
       socialButtons.style.display = 'block';
     }
-    // console.error('No HTML Elements to show');
   }
 
   protected initialize(activatedRoute: ActivatedRoute) {
@@ -89,7 +90,6 @@ export class SocialService {
 
     // Listen to every cookies / user state changes and evaluate sharing state
     combineLatest([cookies$, userUUId$]).subscribe(([cookieMap, userUUID]) => {
-      // console.log('COOKIE/USER change detected. Evaluating.', cookieMap, userUUID);
       this.evaluateShowHide(cookieMap, userUUID);
     });
 
@@ -119,17 +119,10 @@ export class SocialService {
   }
 
   protected isAddThisCookieEnabled(cookieMap, userUUID) {
-    // console.log(cookieMap, userUUID);
-    // if (userUUID) {
-    //   console.log('The user is authenticated, checking klaro-' + userUUID);
-    // } else {
-    //   console.log('The user is not authenticated, checking klaro-anonymous');
-    // }
     const cookie = userUUID ? this.cookie.get('klaro-' + userUUID) : this.cookie.get('klaro-anonymous');
     const addThisCookie = cookie ? cookie['add-this'] : false;
-    // console.log('AddThisCookie is ' + addThisCookie);
+
     return addThisCookie;
   }
 
-
 }