Dataprovider landing: 'Related Content Providers' tab bug fix - Subject added in fetch functions to preprocess when requests are over - custom paging added

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@48851 d315682c-612b-4755-9ff5-7f18f6832af3

portal-2/src/app/landingPages/dataProvider/dataProvider.component.html

@@ -153,6 +153,8 @@
                         <!--*ngIf="  tab.content=='relatedDatasourcesTab'"-->
                         <relatedDatasourcesTab *ngIf="activeTab=='Related Content Providers'"
                             [dataproviderId]="datasourceId"
+                            [results]="dataProviderInfo.relatedDatasources"
+                            [loading]="loadingRelatedDatasources"
                             [fetchPublications]="fetchAggregatorsPublications"
                             [fetchDatasets]="fetchAggregatorsDatasets">
                             <!--[type]="relatedDataprovidersResultsType"-->

portal-2/src/app/landingPages/dataProvider/dataProvider.component.ts

@@ -12,6 +12,7 @@ import { FetchProjects } from '../../utils/fetchEntitiesClasses/fetchProjects.cl
 import { SearchProjectsService } from '../../services/searchProjects.service';
 import { FetchDataproviders } from '../../utils/fetchEntitiesClasses/fetchDataproviders.class';
 import { SearchDataprovidersService } from '../../services/searchDataproviders.service';
+import { RelatedDatasourcesTabComponent } from './relatedDatasourcesTab.component';
 import {OpenaireProperties, ErrorCodes} from '../../utils/properties/openaireProperties';
 import {RouterHelper} from '../../utils/routerHelper.class';
 import {PiwikService} from '../../utils/piwik/piwik.service';
@@ -33,11 +34,6 @@ export class DataProviderComponent {
   public errorMessage = "";
   public showLoading: boolean = true;
 
-  // This will change
-  // currently related content providers tab requests only for publications or research data
-  // Later both requests will be executed
-  public relatedDataprovidersResultsType: string;
-
   // Variable to specify requests with either collectedFrom or hostedBy
   public paramsForSearchLink = {};
 
@@ -65,6 +61,8 @@ export class DataProviderComponent {
   public fetchAggregatorsPublications: FetchPublications;
   public fetchAggregatorsDatasets: FetchDatasets;
 
+  public loadingRelatedDatasources: boolean = true;
+
   // Active tab variable for responsiveness - show tabs only if main request is completed
   public activeTab: string = "";
   public showTabs:boolean = false;
@@ -79,11 +77,15 @@ export class DataProviderComponent {
   private reloadDataproviders: boolean = true;
   private reloadRelatedDatasources: boolean = true;
 
+  // switch subscription to latest observable in request for dataProviderInfo
+  private switcher: any;
+
   private nativeElement : Node;
 
   sub1: any;// = new Observable<DataProviderInfo>();
   sub: any;
   piwiksub: any;
+  relatedDatasourcesSub: any;
 
   constructor (private element: ElementRef,
                private _dataproviderService: DataProviderService,
@@ -124,7 +126,7 @@ export class DataProviderComponent {
    ngOnInit(): void {
      console.info("On Init");
 
-     //this.route.paramMap
+     //this.route.queryParamMap
      this.route.queryParams
     .do(params => console.info("param changed"))
     .do((params) => this.datasourceId = params['datasourceId'])
@@ -172,6 +174,10 @@ export class DataProviderComponent {
      if(this.sub1) {
       this.sub1.unsubscribe();
      }
+
+     if(this.relatedDatasourcesSub) {
+       this.relatedDatasourcesSub.unsubscribe();
+     }
    }
   private getDataProviderInfo(id:string) {
     this.warningMessage = '';
@@ -183,8 +189,15 @@ export class DataProviderComponent {
       this.showLoading = false;
       this.warningMessage="No valid datasource id";
     }else{
-      this.sub1 = this._dataproviderService.getDataproviderInfo(this.datasourceId).subscribe(
+      let source: any;
+      if(this.switcher) {
+        source = this.switcher.map(res => this._dataproviderService.getDataproviderInfo(this.datasourceId)).switch();
+      } else {
+        source = this._dataproviderService.getDataproviderInfo(this.datasourceId);
+      }
+      this.sub1 = source.subscribe(
         data => {
+            this.switcher = this._dataproviderService.getDataproviderInfo(this.datasourceId);
             this.dataProviderInfo = data;
             this.initTabs();
             this.showTabs = true ;
@@ -372,15 +385,26 @@ export class DataProviderComponent {
     }
 
     private searchRelatedDatasources(page: number, size: number) {
+      // Currently no counting is done for this tab. Following condition is always false
       if(this.fetchAggregatorsPublications.searchUtils.status == this.errorCodes.NONE
           && this.fetchAggregatorsDatasets.searchUtils.status == this.errorCodes.NONE) {
         this.reloadRelatedDatasources = false;
+        this.loadingRelatedDatasources = false;
       }
 
       if(this.reloadRelatedDatasources) {
-        this.fetchAggregatorsPublications.getAggregatorResults(this.datasourceId, page, size);
+        this.relatedDatasourcesSub = Observable.zip(this.fetchAggregatorsPublications.requestComplete, this.fetchAggregatorsDatasets.requestComplete)
-        this.fetchAggregatorsDatasets.getAggregatorResults(this.datasourceId, page, size);
+                               .subscribe(
-      }
+                                 data => {
+                                   this.preprocessRelatedDatasources();
+                                 }
+                               )
+
+         this.fetchAggregatorsPublications.getAggregatorResults(this.datasourceId, page, size);
+         this.fetchAggregatorsDatasets.getAggregatorResults(this.datasourceId, page, size);
+        }
+
+
       this.reloadRelatedDatasources = false;
     }
 
@@ -389,6 +413,30 @@ export class DataProviderComponent {
       this.fetchAggregatorsDatasets.getAggregatorResults(this.datasourceId, page, size);
     }
 
+
+    private preprocessRelatedDatasources() {
+      if(this.fetchAggregatorsPublications.searchUtils.status == this.errorCodes.DONE || this.fetchAggregatorsDatasets.searchUtils.status == this.errorCodes.DONE) {
+        this.dataProviderInfo.relatedDatasources = new Map<string, {"name": string, "countPublications": string, "countDatasets": string}>();
+      }
+      for(let result of this.fetchAggregatorsPublications.results) {
+        if(!this.dataProviderInfo.relatedDatasources.has(result.id)) {
+          this.dataProviderInfo.relatedDatasources.set(result.id, {"name": result.name, "countPublications": result.count, "countDatasets": "0"});
+        } else {
+          this.dataProviderInfo.relatedDatasources.get(result.id).countPublications = parseInt(this.dataProviderInfo.relatedDatasources.get(result.id).countPublications + result.count)+"";
+        }
+      }
+
+      for(let result of this.fetchAggregatorsDatasets.results) {
+        if(!this.dataProviderInfo.relatedDatasources.has(result.id)) {
+          this.dataProviderInfo.relatedDatasources.set(result.id, {"name": result.name, "countPublications": "0", "countDatasets": result.count});
+        } else {
+          this.dataProviderInfo.relatedDatasources.get(result.id).countDatasets = parseInt(this.dataProviderInfo.relatedDatasources.get(result.id).countDatasets + result.count)+"";
+        }
+      }
+
+      this.loadingRelatedDatasources = false;
+    }
+
     public metricsResults($event) {
       this.totalViews = $event.totalViews;
       this.totalDownloads = $event.totalDownloads;

portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts

@@ -22,58 +22,57 @@ import { Observable } from 'rxjs/Observable';
               class="uk-alert uk-alert-danger uk-animation-fade" role="alert">
           Service not available
         </div-->
-        <div *ngIf="fetchPublications.searchUtils.status == errorCodes.LOADING || fetchDatasets.searchUtils.status == errorCodes.LOADING"
+        <div *ngIf="fetchPublications.searchUtils.status == errorCodes.LOADING || fetchDatasets.searchUtils.status == errorCodes.LOADING || loading"
               class="uk-animation-fade uk-width-1-1" role="alert"><img src="./assets/loading.gif" class="uk-align-center" alt="Loading">
         </div>
 
-        <!--div *ngIf="fetchResults.results.length == 0" class = "uk-alert">
+        <div *ngIf="(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE) && !loading">
-            No related content providers available
+            <div *ngIf="results && results.size > pageSize" class="uk-margin">
-        </div-->
+              <span class="uk-text-bold">{{results.size}} related content providers, page {{page}} of {{totalPages(results.size)}}</span>
+              <paging-no-load class="uk-float-right" [currentPage]="page" [totalResults]="results.size" [size]="pageSize" (pageChange)="updatePage($event)"></paging-no-load>
+            </div>
 
-        <div *ngIf="fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE">
             <table class="uk-table uk-table-striped">
                 <thead>
                     <tr>
                         <th class="uk-text-center">Content Provider Name</th>
-                        <th class="uk-text-center">Number of {{type}}</th>
+                        <th *ngIf="fetchPublications.results.length > 0 || fetchPublications.searchUtils.status == errorCodes.ERROR"
+                            class="uk-text-center">
+                          Number of Publications
+                        </th>
+                        <th *ngIf="fetchDatasets.results.length > 0 || fetchDatasets.searchUtils.status == errorCodes.ERROR"
+                            class="uk-text-center">
+                          Number of Research Data
+                        </th>
                     </tr>
                 </thead>
                 <tbody>
-                <ng-container *ngIf="!results && fetchResults">
-                    <tr *ngFor="let item of fetchResults.results">
-                        <td class="uk-text-center">
-                            <a [queryParams]="{datasourceId: item.id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
-                                {{item.name}}
-                            </a>
-                        </td>
-                        <td class="uk-text-center">
-                            <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'ho', 'collectedFrom', 'co'], [item.id, 'and', dataproviderId, 'and'])"
-                                routerLinkActive="router-link-active" [routerLink]="linkToSearchResults">
-                                    {{item.count}}
-                            </a>
-                        </td>
-                    </tr>
-                  </ng-container>
-
                   <ng-container *ngIf="results">
-                      <tr *ngFor="let id of results.keys()">
+                      <ng-container *ngFor="let id of results.keys() let i=index">
+                        <tr *ngIf="i>=(page-1)*pageSize && i<page*pageSize">
                           <td class="uk-text-center">
                               <a [queryParams]="{datasourceId: id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
                                   {{results.get(id).name}}
                               </a>
                           </td>
-                          <td class="uk-text-center">
+                          <td *ngIf="fetchPublications.results.length > 0" class="uk-text-center">
                               <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'ho', 'collectedFrom', 'co'], [id, 'and', dataproviderId, 'and'])"
                                   routerLinkActive="router-link-active" [routerLink]="linkToSearchPublications">
-                                      {{results.get(key).countPublications}}
+                                      {{results.get(id).countPublications}}
-                              </a> / <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'ho', 'collectedFrom', 'co'], [id, 'and', dataproviderId, 'and'])"
-                                  routerLinkActive="router-link-active" [routerLink]="linkToSearchResearchData">
-                                      {{results.get(key).countDatasets}}
                               </a>
                           </td>
-                      </tr>
+                          <td *ngIf="fetchPublications.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>
-                    </ng-container>
 
+                          <td *ngIf="fetchDatasets.results.length > 0" class="uk-text-center">
+                              <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'ho', 'collectedFrom', 'co'], [id, 'and', dataproviderId, 'and'])"
+                                  routerLinkActive="router-link-active" [routerLink]="linkToSearchResearchData">
+                                      {{results.get(id).countDatasets}}
+                              </a>
+                          </td>
+                          <td *ngIf="fetchDatasets.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>
+                        </tr>
+                      </ng-container>
+                    </ng-container>
                 </tbody>
             </table>
         </div>
@@ -81,90 +80,41 @@ import { Observable } from 'rxjs/Observable';
 })
 
 export class RelatedDatasourcesTabComponent {
-    //@Input() type: string;
     @Input() dataproviderId: string;
     @Input() fetchPublications : FetchPublications;
     @Input() fetchDatasets : FetchDatasets;
-
+    // true: preprocessing is not over
-    public type: string;
+    @Input() loading: boolean = true;
-    public linkToSearchResults: string;
+    // Εvery content provider's id is a single key of a map
-    public fetchResults: any;
+    @Input() results: Map<string, {"name": string, "countPublications": string, "countDatasets": string}>;
-    public results: Map<string, {"name": string, "countPublications": string, "countDatasets": string}>;
 
     public linkToSearchPublications: string = "";
     public linkToSearchResearchData: string = "";
-    //public searchLinkToDataProvider: string = "";
+
     public routerHelper:RouterHelper = new RouterHelper();
     public errorCodes:ErrorCodes = new ErrorCodes();
 
-    public sub: any;
+    public page: number = 1;
-
+    public pageSize: number = 10;
-    //public queryParams: string[] = [];
-    //public queryParamsIds: string[] = [];
 
     constructor () {}
 
     ngOnInit() {
-        //if(this.type == "publications") {
+      this.linkToSearchPublications = OpenaireProperties.getLinkToAdvancedSearchPublications();//+"?&hostedBy=";//+ +"&ho=and&collectedFrom="+ +"&co=and";
-            this.linkToSearchPublications = OpenaireProperties.getLinkToAdvancedSearchPublications();//+"?&hostedBy=";//+ +"&ho=and&collectedFrom="+ +"&co=and";
+      this.linkToSearchResearchData = OpenaireProperties.getLinkToAdvancedSearchDatasets();
-        //} else {
-            this.linkToSearchResearchData = OpenaireProperties.getLinkToAdvancedSearchDatasets();
-        //}
-        //this.searchLinkToDataProvider = OpenaireProperties.getsearchLinkToDataProvider();
-        /*queryParams.push("hostedBy");
-        queryParams.push("ho");
-        queryParams.push("collectedFrom");
-        queryParams.push("co");
-        queryParamsIds.push()*/
-
-
-        this.sub = Observable.merge(this.fetchPublications.requestComplete, this.fetchDatasets.requestComplete)
-                  .subscribe(
-          data => {
-            if((this.fetchPublications.results.length > 0 && this.fetchDatasets.results.length > 0)
-                || (this.fetchPublications.results.length > 0 && this.fetchDatasets.searchUtils.status == this.errorCodes.ERROR)
-                || (this.fetchPublications.searchUtils.status == this.errorCodes.ERROR && this.fetchDatasets.results.length > 0)) {
-              this.results = new Map<string, {"name": string, "countPublications": string, "countDatasets": string}>();
-              for(let result of this.fetchPublications.results) {
-                if(!this.results.has(result.id)) {
-                  this.results.set(result.id, {"name": result.name, "countPublications": result.count, "countDatasets": "0"});
-                } else {
-                  if(this.fetchPublications.searchUtils.status == this.errorCodes.ERROR) {
-                    this.results.get(result.id).countPublications = "-";
-                  } else {
-                    this.results.get(result.id).countPublications = parseInt(this.results.get(result.id).countPublications) + result.count;
-                  }
-                }
-              }
-
-              for(let result of this.fetchDatasets.results) {
-                if(!this.results.has(result.id)) {
-                  this.results.set(result.id, {"name": result.name, "countPublications": "0", "countDatasets": result.count});
-                } else {
-                  if(this.fetchDatasets.searchUtils.status == this.errorCodes.ERROR) {
-                    this.results.get(result.id).countDatasets = "-";
-                  } else {
-                    this.results.get(result.id).countDatasets = parseInt(this.results.get(result.id).countDatasets) + result.count;
-                  }
-                }
-              }
-              this.type = "Publications / Research Data"
-            } else if(this.fetchPublications.results.length > 0) {
-              this.fetchResults = this.fetchPublications;
-              this.type = "Publications";
-              this.linkToSearchResults = this.linkToSearchPublications;
-            } else {
-              this.fetchResults = this.fetchDatasets;
-              this.type = "Research Data";
-              this.linkToSearchResults = this.linkToSearchResearchData;
-            }
-          }
-      );
     }
 
-    ngOnDestroy() {
+    ngOnDestroy() {}
-      if(this.sub) {
+
-        this.sub.unsubscribe();
+    totalPages(totalResults: number): number {
+      let totalPages:any = totalResults/this.pageSize;
+      if(!(Number.isInteger(totalPages))) {
+          totalPages = (parseInt(totalPages, this.pageSize) + 1);
       }
+      return totalPages;
+    }
+
+    updatePage($event) {
+      this.page = $event.value;
     }
 }

portal-2/src/app/utils/entities/dataProviderInfo.ts

@@ -119,4 +119,6 @@ export class DataProviderInfo {
     statistics: any;
     //projects: any;
     datasources: any;
+
+    relatedDatasources: Map<string, {"name": string, "countPublications": string, "countDatasets": string}>;
 }

portal-2/src/app/utils/fetchEntitiesClasses/fetchDatasets.class.ts

@@ -2,13 +2,11 @@ import {SearchDatasetsService} from '../../services/searchDatasets.service';
 import { ErrorCodes} from '../../utils/properties/openaireProperties';
 import {SearchUtilsClass } from '../../searchPages/searchUtils/searchUtils.class';
 import {DOI} from '../../utils/string-utils.class';
-import { Observable } from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
-import {Observer} from 'rxjs/Observer';
 
 export class FetchDatasets{
   public results =[];
-  public requestComplete: Observable<boolean>;
+  public requestComplete: Subject<boolean>;
-  private observer: Observer<boolean>;
 
   public searchUtils:SearchUtilsClass = new SearchUtilsClass();
   private sub: any;
@@ -21,6 +19,7 @@ export class FetchDatasets{
     var errorCodes:ErrorCodes = new ErrorCodes();
     this.searchUtils.status =errorCodes.LOADING;
 
+    this.requestComplete = new Subject<boolean>();
   }
 
 
@@ -183,8 +182,6 @@ public getResultsForDataproviders(id:string, resultsFrom:string, page: number, s
 }
 
 public getAggregatorResults(id:string, page: number, size: number){
-  this.requestComplete = new Observable<boolean>(observer => this.observer = observer);
-
   var errorCodes:ErrorCodes = new ErrorCodes();
   this.searchUtils.status = errorCodes.LOADING;
 
@@ -193,17 +190,16 @@ public getAggregatorResults(id:string, page: number, size: number){
           this.results = data;
           this.searchUtils.totalResults = this.results.length;
 
-          this.observer.next(true);
-          //console.info("TRUE dataset!!!");
-
           var errorCodes:ErrorCodes = new ErrorCodes();
           this.searchUtils.status = errorCodes.DONE;
           if(this.searchUtils.totalResults == 0 ){
             this.searchUtils.status = errorCodes.NONE;
           }
+
+          this.requestComplete.next(true);
       },
       err => {
-          this.observer.next(false);
+          this.requestComplete.next(false);
           console.log(err);
            //TODO check erros (service not available, bad request)
           // if( ){

portal-2/src/app/utils/fetchEntitiesClasses/fetchPublications.class.ts

@@ -4,13 +4,11 @@ import {ErrorCodes} from '../../utils/properties/openaireProperties';
 import {SearchFields} from '../../utils/properties/searchFields';
  import {SearchUtilsClass } from '../../searchPages/searchUtils/searchUtils.class';
 import {DOI} from '../../utils/string-utils.class';
-import { Observable } from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
-import {Observer} from 'rxjs/Observer';
 
 export class FetchPublications {
   public results =[];
-  public requestComplete: Observable<boolean>;
+  public requestComplete: Subject<boolean>;
-  private observer: Observer<boolean>;
   // public filters =[];
   public searchUtils:SearchUtilsClass = new SearchUtilsClass();
   // public baseUrl:string = "";
@@ -34,6 +32,9 @@ export class FetchPublications {
     this.searchUtils.status =errorCodes.LOADING;
     // this.baseUrl = OpenaireProperties.getLinkToSearchPublications();
 
+    this.requestComplete = new Subject<boolean>();
+    console.info("new");
+
   }
 
 
@@ -168,8 +169,6 @@ public getResultsForDataproviders(id:string, resultsFrom:string, page: number, s
 }
 
 public getAggregatorResults(id:string, page: number, size: number){
-    this.requestComplete = new Observable<boolean>(observer => this.observer = observer);
-
     var errorCodes:ErrorCodes = new ErrorCodes();
     this.searchUtils.status = errorCodes.LOADING;
 
@@ -178,18 +177,16 @@ public getAggregatorResults(id:string, page: number, size: number){
           this.results = data;
           this.searchUtils.totalResults = this.results.length;
 
-          //this.requestComplete = Observable.of(true);//new Observable(observer => observer = "true");
-          //console.info("TRUE publication!!!");
-          this.observer.next(true);
-
           var errorCodes:ErrorCodes = new ErrorCodes();
           this.searchUtils.status = errorCodes.DONE;
           if(this.searchUtils.totalResults == 0 ){
             this.searchUtils.status = errorCodes.NONE;
           }
+
+          this.requestComplete.next(true);
       },
       err => {
-          this.observer.next(false);
+          this.requestComplete.next(false);
           console.log(err);
            //TODO check erros (service not available, bad request)
           // if( ){