[Library | Trunk]: Finish result landing base on new mocks

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58748 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/landing-utils/availableOn.component.ts

@@ -5,7 +5,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
 @Component({
   selector: 'availableOn',
   template: `
-    <div class="download-from uk-height-max-large uk-overflow-auto">
+    <div class="download-from uk-height-max-large uk-overflow-auto uk-margin-small-bottom">
       <div *ngFor="let available of availableOn.slice(0, showNum) let i=index"
            class="uk-flex uk-flex-top"
            [title]="available.bestAccessMode ? available.bestAccessMode : 'Not available'">

landingPages/landing-utils/citeThis/citeThis.component.ts

@@ -2,48 +2,56 @@ import {Component, ElementRef, Input, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {Citation, CitationData} from './citation.class';
 import {ResultLandingInfo} from "../../../utils/entities/resultLandingInfo";
-declare var CSL:any;
+
-declare var Sys:any;
+declare var CSL: any;
+declare var Sys: any;
 declare var UIkit: any;
+
 //<addThis ></addThis>
 @Component({
   selector: 'citeThis',
   template: `
-  <div class="uk-padding">
+    <div class="uk-padding">
-    <mat-select #matSelect class="matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"
+      <mat-form-field class="matSelectionFormField uk-width-1-1">
-                [disableOptionCentering]="true" modal-select [matSelect]="matSelect"
+        <mat-label>Select a citation style</mat-label>
-                panelClass="matSelectionPanel">
+        <mat-select #matSelect class="matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle"
-      <mat-option value="0">select a citation style</mat-option>
+                    (ngModelChange)="styleChanged()"
-      <mat-option *ngFor=" let  style of this.citation.templates let i = index" [value]="style">{{style}}</mat-option>
+                    [disableOptionCentering]="true" modal-select [matSelect]="matSelect"
-    </mat-select>
+                    panelClass="matSelectionPanel">
-    <div *ngIf="selectedStyle!='0'">
+          <mat-option *ngFor=" let  style of this.citation.templates let i = index"
-      <div id="citation" class="box-content uk-margin-small-top uk-overflow-auto" [innerHTML]=citationText></div>
+                      [value]="style">{{style}}</mat-option>
-      <button class="clipboard_btn uk-button uk-button-small uk-button-secondary uk-margin-small-top uk-icon uk-float-right" data-clipboard-target="#citation" title="Copy to clipboard">
+        </mat-select>
-        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1">
+      </mat-form-field>
-          <rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect>
+      <div *ngIf="selectedStyle!='0'">
-          <polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline>
+        <div id="citation" class="box-content uk-margin-small-top uk-overflow-auto" [innerHTML]=citationText></div>
-        </svg>
+        <button
-        <span class="uk-margin-small-left">COPY</span>
+            class="clipboard_btn uk-button uk-button-small uk-button-secondary uk-margin-small-top uk-icon uk-float-right"
-      </button>
+            data-clipboard-target="#citation" title="Copy to clipboard">
+          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1">
+            <rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect>
+            <polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline>
+          </svg>
+          <span class="uk-margin-small-left">COPY</span>
+        </button>
+      </div>
     </div>
-  </div>
   `
 })
-export class CiteThisComponent implements OnInit, OnDestroy{
+export class CiteThisComponent implements OnInit, OnDestroy {
-  private sub:any;
+  private sub: any;
-  public selectedStyle:string="0";
+  public selectedStyle: string = "0";
-  public citationText:string;
+  public citationText: string;
-  public citation:Citation = new Citation();
+  public citation: Citation = new Citation();
   // public cite: any;
   @Input() result: ResultLandingInfo;
   @Input() id: string;
-  @Input() type: string="article";
+  @Input() type: string = "article";
   public citeproc;
   public data;
   public clipboard;
   
   ngOnInit() {
-    if(typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
       // this.citeproc = require('./citeproc.js');
       // console.log(this.citeproc);
       this.parseData();
@@ -65,106 +73,112 @@ export class CiteThisComponent implements OnInit, OnDestroy{
     }
   }
   
-  parseData(){
+  parseData() {
-    var citationData:CitationData = new CitationData();
+    var citationData: CitationData = new CitationData();
-
+    
-        if(this.result.identifiers && Array.from(this.result.identifiers.keys()).length > 0){
+    if (this.result.identifiers && Array.from(this.result.identifiers.keys()).length > 0) {
-          var keys = Array.from(this.result.identifiers.keys());
+      var keys = Array.from(this.result.identifiers.keys());
-          for (var i=0; i<keys.length;i++){
+      for (var i = 0; i < keys.length; i++) {
-            if(keys[i]=="doi"){
+        if (keys[i] == "doi") {
-              var ids = this.result.identifiers.get(keys[i]);
+          var ids = this.result.identifiers.get(keys[i]);
-              for (var j=0; j<ids.length;j++){
+          for (var j = 0; j < ids.length; j++) {
-                citationData.DOI = ids[j];
+            citationData.DOI = ids[j];
-                break;
+            break;
-              }
-            }
           }
         }
-        citationData.id = this.id;
-        if(this.result.types != undefined && this.result.types.length > 0 && this.result.types[0]){
-          citationData.type = this.result.types[0].toLowerCase();
-        }
-        if(this.result.title){
-          citationData.title = this.result.title;
-        }
-        if(this.result.publisher){
-          citationData.publisher = this.result.publisher;
-        }
-        if( this.result.authors){
-          citationData.author = [];
-          var max_length = (this.result.authors.length > 10)?10:this.result.authors.length;
-          for (var i =0 ;i <  max_length; i++){
-            if(this.result.authors[i] && this.result.authors[i].fullName && this.result.authors[i].fullName.indexOf(", ") !== -1){
-              citationData.author.push({given:this.result.authors[i].fullName.split(", ")[1], family:this.result.authors[i].fullName.split(", ")[0], 'parse-names':true});
-            }else{
-              citationData.author.push({given:"", family:this.result.authors[i].fullName, 'parse-names':true});
-            }
-            // citationData.authors.push(this.result.authors[i]);
-          }
-        }
-        if(this.result.dateofacceptance  != undefined){
-          citationData.issued = {};
-          var date:string = (this.result.dateofacceptance.getFullYear())+""; // transform to string in case it is an integer
-          var dateArray:string[]  = (date && (date).indexOf('-') !== -1)?[date.split('-')[0]]:[date];
-          if(dateArray.length < 3){
-            // dateArray.push[1];
-            // dateArray.push[1];
-          }
-           citationData.issued={"date-parts":[[""+dateArray[0]]]};
-           if(this.result.date ){
-             citationData.date = this.result.date ;
-           }
-           if(this.result.journal ){
-             if(this.result.journal.journal){
-               citationData["container-title"] = this.result.journal.journal;
-             }
-             if(this.result.journal.issn){
-               citationData.ISSN = this.result.journal.issn;
-             }
-             if(this.result.journal.issue){
-               citationData.issue = this.result.journal.issue;
-             }
-             citationData.type = "article-journal"; // in case of APA volume and pages appear only in specific types not just article
-             if(this.result.journal.volume){
-               citationData.volume = this.result.journal.volume ;
-             }
-             if(this.result.journal["start_page"] && this.result.journal["end_page"]){
-               citationData.page = this.result.journal["start_page"] +"-" +this.result.journal["end_page"] ;
-             }
-           }
       }
-
+    }
-
+    citationData.id = this.id;
+    if (this.result.types != undefined && this.result.types.length > 0 && this.result.types[0]) {
+      citationData.type = this.result.types[0].toLowerCase();
+    }
+    if (this.result.title) {
+      citationData.title = this.result.title;
+    }
+    if (this.result.publisher) {
+      citationData.publisher = this.result.publisher;
+    }
+    if (this.result.authors) {
+      citationData.author = [];
+      var max_length = (this.result.authors.length > 10) ? 10 : this.result.authors.length;
+      for (var i = 0; i < max_length; i++) {
+        if (this.result.authors[i] && this.result.authors[i].fullName && this.result.authors[i].fullName.indexOf(", ") !== -1) {
+          citationData.author.push({
+            given: this.result.authors[i].fullName.split(", ")[1],
+            family: this.result.authors[i].fullName.split(", ")[0],
+            'parse-names': true
+          });
+        } else {
+          citationData.author.push({given: "", family: this.result.authors[i].fullName, 'parse-names': true});
+        }
+        // citationData.authors.push(this.result.authors[i]);
+      }
+    }
+    if (this.result.dateofacceptance != undefined) {
+      citationData.issued = {};
+      var date: string = (this.result.dateofacceptance.getFullYear()) + ""; // transform to string in case it is an integer
+      var dateArray: string[] = (date && (date).indexOf('-') !== -1) ? [date.split('-')[0]] : [date];
+      if (dateArray.length < 3) {
+        // dateArray.push[1];
+        // dateArray.push[1];
+      }
+      citationData.issued = {"date-parts": [["" + dateArray[0]]]};
+      if (this.result.date) {
+        citationData.date = this.result.date;
+      }
+      if (this.result.journal) {
+        if (this.result.journal.journal) {
+          citationData["container-title"] = this.result.journal.journal;
+        }
+        if (this.result.journal.issn) {
+          citationData.ISSN = this.result.journal.issn;
+        }
+        if (this.result.journal.issue) {
+          citationData.issue = this.result.journal.issue;
+        }
+        citationData.type = "article-journal"; // in case of APA volume and pages appear only in specific types not just article
+        if (this.result.journal.volume) {
+          citationData.volume = this.result.journal.volume;
+        }
+        if (this.result.journal["start_page"] && this.result.journal["end_page"]) {
+          citationData.page = this.result.journal["start_page"] + "-" + this.result.journal["end_page"];
+        }
+      }
+    }
+    
+    
     this.data = citationData;
     // console.log(this.data);
-
+    
   }
-  styleChanged(){
+  
+  styleChanged() {
     this.updateCitation();
-
+    
   }
-  updateCitation(){
+  
+  updateCitation() {
     var Sys =
-      function Sys(lang, data){
+      function Sys(lang, data) {
-     this.lang = lang;
+        this.lang = lang;
-     this.data = data;
+        this.data = data;
-       this.changeName = function (name) {
+        this.changeName = function (name) {
-           this.lastName = name;
+          this.lastName = name;
-       };
+        };
-       this.retrieveLocale= function (lang){
+        this.retrieveLocale = function (lang) {
-
+          
-         return this.lang;
+          return this.lang;
-       }
+        }
-       this.retrieveItem= function(id){
+        this.retrieveItem = function (id) {
-         return this.data;
+          return this.data;
-       }
+        }
-    };
+      };
-
+    
-    var citeproc = new CSL.Engine(new Sys(this.citation.locale,  this.data ), this.citation[(this.selectedStyle == "0")?this.citation.templates[0]:this.selectedStyle]);
+    var citeproc = new CSL.Engine(new Sys(this.citation.locale, this.data), this.citation[(this.selectedStyle == "0") ? this.citation.templates[0] : this.selectedStyle]);
     citeproc.updateItems([this.data.id]);
     this.citationText = citeproc.makeBibliography();
     this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : '';
-
+    
   }
-
+  
 }

landingPages/landing-utils/fundedBy.component.ts

@@ -5,6 +5,7 @@ import {Project} from "../../utils/result-preview/result-preview";
 @Component({
   selector: 'fundedBy',
   template: `
+    <div class="uk-text-small">
     <div class="uk-text-muted">Funded by</div>
     <span *ngFor="let item of fundedByProjects.slice(0, showNum) let i=index">
           <a>
@@ -59,6 +60,7 @@ import {Project} from "../../utils/result-preview/result-preview";
           </div>
           <span *ngIf="i < (fundedByProjects.slice(0, showNum).length - 1)">, </span>
         </span>
+    </div>
     <div *ngIf="showNum > threshold" class="uk-text-right uk-margin-bottom">
       <a (click)="showNum = threshold; scroll()">
         View less

landingPages/landing-utils/relatedTo.component.ts

@@ -4,7 +4,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
 @Component({
   selector: 'relatedTo',
   template: `
-    <div>
+    <div class="uk-text-small">
       <div class="uk-text-muted">Communities</div>
       <div class="uk-margin-small-left" *ngFor="let item of contexts.slice(0, showNum); let i=index">
           <span *ngIf="!item['inline']">

landingPages/landing-utils/showPublisher.component.ts

@@ -50,15 +50,22 @@ import {EnvProperties} from "../../utils/properties/env-properties";
           <img src="assets/common-assets/common/SHERPA-RoMEO-short-logo.gif" width=16 height=16 alt="">
            issn: {{journal['issn']}}<span class="custom-external custom-icon space"></span>
           </a>
-          <span *ngIf="journal['eissn'] || journal['lissn'] || !publisher">, </span>
+          <span *ngIf="journal['eissn'] || journal['lissn']">, </span>
         </ng-container>
         <ng-container *ngIf="journal['eissn']">
-          <span class="uk-display-inline-block">eissn: {{journal['eissn']}}</span>
+          <a *ngIf="!journal.issn" target="_blank" class="uk-display-inline-block" [href]="properties.sherpaURL+journal['eissn'] + properties.sherpaURLSuffix">
-          <span *ngIf="journal['lissn'] || !publisher">, </span>
+          <img src="assets/common-assets/common/SHERPA-RoMEO-short-logo.gif" width=16 height=16 alt="">
+          eissn: {{journal['eissn']}}<span class="custom-external custom-icon space"></span>
+          </a>
+          <span *ngIf="journal.issn" class="uk-display-inline-block">eissn: {{journal['eissn']}}</span>
+          <span *ngIf="journal['lissn']">, </span>
         </ng-container>
         <span *ngIf="journal['lissn']" class="uk-display-inline-block">
-          <span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
+          <a *ngIf="!journal.issn && !journal.eissn" target="_blank" class="uk-display-inline-block" [href]="properties.sherpaURL+journal['eissn'] + properties.sherpaURLSuffix">
-          <span *ngIf="!publisher">, </span>        
+          <img src="assets/common-assets/common/SHERPA-RoMEO-short-logo.gif" width=16 height=16 alt="">
+          lissn: {{journal['lissn']}}<span class="custom-external custom-icon space"></span>
+          </a>
+          <span *ngIf="journal.issn || journal.eissn" class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
         </span>
         <span *ngIf=" journal['journal'] && (journal['issn'] || journal['eissn'] || journal['lissn'])">)</span>
       </span>

landingPages/landing-utils/showSubjects.component.ts

@@ -3,10 +3,10 @@ import {Component, Input} from '@angular/core';
 @Component({
   selector: 'showSubjects',
   template: `
-    <div *ngIf="classifiedSubjects && classifiedSubjects.size > 0" class="uk-text-small">
+    <div class="uk-text-muted">
-      <div class="uk-text-muted">
+      Subjects
-        Subjects
+    </div>
-      </div>
+    <div *ngIf="classifiedSubjects && classifiedSubjects.size > 0" class="uk-text-small uk-text-small">
       <div class="uk-margin-small-top">
         <div *ngFor="let key of getKeys(classifiedSubjects)" style="line-height: 20px">
           <span uk-icon="tag"></span>

landingPages/result/resultLanding.component.html

@@ -59,65 +59,6 @@
                 {{resultLandingInfo.countries.join(", ")}}
               </li>
             </ul>
-            <div>
-              <div *ngIf="resultLandingInfo.relatedResearchResults || resultLandingInfo.similarResearchResults ||
-                          resultLandingInfo.supplementaryResearchResults || resultLandingInfo.supplementedByResearchResults ||
-                          resultLandingInfo.organizations"
-                   class="uk-margin-top advanced-buttons uk-grid-small uk-child-width-1-4@s uk-child-width-1-2"
-                   uk-height-match="target: .target; row: false"
-                   uk-grid>
-                <div *ngIf="resultLandingInfo.relatedResearchResults">
-                  <div class="clickable" (click)="openRelationResults('Related research results of',
-                  resultLandingInfo.relatedResearchResults)">
-                    <div class="header target uk-text-bold">Related Research Results</div>
-                    <div class="footer target uk-position-relative">
-                      <span
-                          class="uk-text-bold uk-position-center">{{resultLandingInfo.relatedResearchResults.length | number}}</span>
-                    </div>
-                  </div>
-                </div>
-                <div *ngIf="resultLandingInfo.similarResearchResults">
-                  <div class="clickable" (click)="openRelationResults('Similar research results of',
-                  resultLandingInfo.similarResearchResults, 'similarity')">
-                    <div class="header target uk-text-bold">Similar Research Results</div>
-                    <div class="footer target uk-position-relative">
-                      <span
-                          class="uk-text-bold uk-position-center">{{resultLandingInfo.similarResearchResults.length | number}}</span>
-                    </div>
-                  </div>
-                </div>
-                <div *ngIf="resultLandingInfo.supplementaryResearchResults">
-                  <div class="clickable" (click)="openRelationResults('Supplementary research results of',
-                  resultLandingInfo.supplementaryResearchResults)">
-                    <div class="header target uk-text-bold">Supplementary Research Results</div>
-                    <div class="footer target uk-position-relative">
-                      <span
-                          class="uk-text-bold uk-position-center">{{resultLandingInfo.supplementaryResearchResults.length | number}}</span>
-                    </div>
-                  </div>
-                </div>
-                <div *ngIf="resultLandingInfo.supplementedByResearchResults">
-                  <div class="clickable" (click)="openRelationResults('Research results supplemented by',
-                  resultLandingInfo.supplementedByResearchResults)">
-                    <div class="header target uk-text-bold">Research Results supplemented by
-                      this {{getTypeName()}}</div>
-                    <div class="footer target uk-position-relative">
-                      <span
-                          class="uk-text-bold uk-position-center">{{resultLandingInfo.supplementedByResearchResults.length | number}}</span>
-                    </div>
-                  </div>
-                </div>
-                <div *ngIf="resultLandingInfo.organizations">
-                  <div class="clickable" (click)="openOrganizations()">
-                    <div class="header target uk-text-bold">Related Organizations</div>
-                    <div class="footer target uk-position-relative">
-                      <span
-                          class="uk-text-bold uk-position-center">{{resultLandingInfo.organizations.length | number}}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
           </div>
           <div class="uk-width-1-3@m uk-width-1-1@s uk-padding-remove">
             <ul class="user-actions uk-list uk-card uk-card-default uk-padding">
@@ -141,7 +82,8 @@
               </li>
               <!-- Metrics -->
               <li *ngIf="hasAltMetrics || hasMetrics" class="uk-margin-medium-top">
-                <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle uk-flex-center uk-padding-remove-left">
+                <div uk-grid
+                     class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle uk-flex-center uk-padding-remove-left">
                   <div *ngIf="hasMetrics">
                     <metrics [pageViews]="pageViews"
                              [id]="id" [entityType]="'results'" [entity]="title"
@@ -200,6 +142,24 @@
                                       [classifiedSubjects]="resultLandingInfo.classifiedSubjects">
                         </showSubjects>
                       </div>
+                      <!-- Related Organizations-->
+                      <div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0" class="uk-margin-medium-bottom uk-width-2-3@m">
+                        <div class="uk-text-muted uk-text-small">Related Organizations</div>
+                        <ul class="uk-list organizations uk-margin-remove-top">
+                          <li *ngFor="let organization of resultLandingInfo.organizations">
+                            <div class="title" *ngIf="!organization.websiteUrl">
+                              {{(organization.name?organization.name:organization.shortname)}}
+                              <span *ngIf="organization.shortname">({{organization.shortname}})</span>
+                            </div>
+                            <a class="title" *ngIf="organization.websiteUrl" [href]="organization.websiteUrl" target="_blank">
+                              {{(organization.name?organization.name:organization.shortname)}}
+                              <span *ngIf="organization.shortname">({{organization.shortname}})</span>
+                              <span class="custom-external custom-icon space"></span>
+                            </a>
+                            <div *ngIf="organization.country">{{organization.country}}</div>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
                     <div *ngIf="hasSecondaryInfo"
                          [class]="hasPrimaryInfo?'uk-width-1-3 right-column uk-padding-remove':'uk-padding-remove uk-width-expand'">
@@ -218,8 +178,7 @@
                         </div>
                       </div>
                       <!-- Download From -->
-                      <div
+                      <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
-                          *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
                           class="uk-margin-medium-bottom">
                         <div class="sideInfoTitle uk-margin-small-bottom uk-flex">
                           <span class="uk-width-1-2">Download from</span>
@@ -268,7 +227,165 @@
                         </no-load-paging>
                       </div>
                     </div>
-                    <div class="uk-width-1-3 right-column uk-padding-remove"></div>
+                    <!--<div class="uk-width-1-3 right-column uk-padding-remove"></div>-->
+                  </div>
+                </my-tab>
+                <my-tab *ngIf="(resultLandingInfo.supplementaryResearchResults && resultLandingInfo.supplementaryResearchResults.length > 0) ||
+                        (resultLandingInfo.supplementedByResearchResults && resultLandingInfo.supplementedByResearchResults.length > 0)"
+                        [tabTitle]="'Supplementary outcomes'" [tabId]="'supplementary'"
+                        [tabNumber]="supplementaryResults">
+                  <div class="uk-grid uk-margin-remove">
+                    <div class="uk-width-expand uk-padding">
+                      <div *ngIf="resultLandingInfo.supplementaryResearchResults && resultLandingInfo.supplementaryResearchResults.length > 0" class="uk-margin-bottom">
+                        <h5>Supplementary Outcomes</h5>
+                        <no-load-paging *ngIf="resultLandingInfo.supplementaryResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateSupplementaryPage($event)"
+                                        [page]="supplementaryPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.supplementaryResearchResults.length">
+                        </no-load-paging>
+                        <ul class="uk-list uk-list-divider uk-margin">
+                          <li *ngFor="let item of resultLandingInfo.supplementaryResearchResults.slice((supplementaryPage-1)*pageSize, supplementaryPage*pageSize)">
+                            <result-preview [modal]="relationModal" [properties]="properties"
+                                            [result]="getResultPreview(item)"></result-preview>
+                          </li>
+                        </ul>
+                        <no-load-paging *ngIf="resultLandingInfo.supplementaryResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateSupplementaryPage($event)"
+                                        [page]="supplementaryPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.supplementaryResearchResults.length">
+                        </no-load-paging>
+                      </div>
+                      <div *ngIf="resultLandingInfo.supplementedByResearchResults && resultLandingInfo.supplementedByResearchResults.length > 0">
+                        <h5>Outcomes Supplemented by this {{getTypeName()}}</h5>
+                        <no-load-paging *ngIf="resultLandingInfo.supplementedByResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateSupplementedByPage($event)"
+                                        [page]="supplementedByPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.supplementedByResearchResults.length">
+                        </no-load-paging>
+                        <ul class="uk-list uk-list-divider uk-margin">
+                          <li *ngFor="let item of resultLandingInfo.supplementedByResearchResults.slice((supplementedByPage-1)*pageSize, supplementedByPage*pageSize)">
+                            <result-preview [modal]="relationModal" [properties]="properties"
+                                            [result]="getResultPreview(item)"></result-preview>
+                          </li>
+                        </ul>
+                        <no-load-paging *ngIf="resultLandingInfo.supplementedByResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateSupplementedByPage($event)"
+                                        [page]="supplementedByPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.supplementedByResearchResults.length">
+                        </no-load-paging>
+                      </div>
+                      <!--<div *ngIf="supplementaryResults">
+                        <div *ngIf="supplementaryFilter" class="uk-margin-bottom" [formGroup]="supplementaryFilter">
+                          <span>
+                            <input formControlName="supplementary" type="checkbox"/>
+                            <span class="space uk-text-bold">Ingoing</span>
+                          </span>
+                          <span class="uk-margin-small-left">
+                            <input formControlName="supplementedBy" type="checkbox"/>
+                            <span class="space uk-text-bold">Outgoing</span>
+                          </span>
+                        </div>
+                        <no-load-paging *ngIf="supplementaryResults.length > pageSize" [type]="'research results'"
+                                        (pageChange)="updateSupplementaryPage($event)"
+                                        [page]="supplementaryPage" [pageSize]="pageSize"
+                                        [totalResults]="supplementaryResults.length">
+                        </no-load-paging>
+                        <ul class="uk-list uk-list-divider uk-margin">
+                          <li *ngFor="let item of supplementaryResults.slice((supplementaryPage-1)*pageSize, supplementaryPage*pageSize)">
+                            <result-preview [modal]="relationModal" [properties]="properties"
+                                            [result]="getResultPreview(item)"></result-preview>
+                          </li>
+                        </ul>
+                        <no-load-paging *ngIf="supplementaryResults.length > pageSize" [type]="'research results'"
+                                        (pageChange)="updateSupplementaryPage($event)"
+                                        [page]="supplementaryPage" [pageSize]="pageSize"
+                                        [totalResults]="supplementaryResults.length">
+                        </no-load-paging>
+                        <div *ngIf="supplementaryResults.length === 0">
+                          No results has been found
+                        </div>
+                      </div>-->
+                    </div>
+                    <!--<div class="uk-width-1-3 right-column uk-padding-remove"></div>-->
+                  </div>
+                </my-tab>
+                <my-tab *ngIf="(resultLandingInfo.relatedResearchResults && resultLandingInfo.relatedResearchResults.length > 0) ||
+                        (resultLandingInfo.similarResearchResults && resultLandingInfo.similarResearchResults.length > 0)"
+                        [tabTitle]="'Related outcomes'" [tabId]="'related'"
+                        [tabNumber]="relatedResultsNum">
+                  <div class="uk-grid uk-margin-remove">
+                    <div class="uk-width-expand uk-padding">
+                      <div *ngIf="resultLandingInfo.relatedResearchResults && resultLandingInfo.relatedResearchResults.length > 0" class="uk-margin-bottom">
+                        <h5>Related Outcomes</h5>
+                        <no-load-paging *ngIf="resultLandingInfo.relatedResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateRelatedPage($event)"
+                                        [page]="relatedPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.relatedResearchResults.length">
+                        </no-load-paging>
+                        <ul class="uk-list uk-list-divider uk-margin">
+                          <li *ngFor="let item of resultLandingInfo.relatedResearchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
+                            <result-preview [modal]="relationModal" [properties]="properties"
+                                            [result]="getResultPreview(item)"></result-preview>
+                          </li>
+                        </ul>
+                        <no-load-paging *ngIf="resultLandingInfo.relatedResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateRelatedPage($event)"
+                                        [page]="relatedPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.relatedResearchResults.length">
+                        </no-load-paging>
+                      </div>
+                      <div *ngIf="resultLandingInfo.similarResearchResults && resultLandingInfo.similarResearchResults.length > 0">
+                        <h5>Similar Outcomes</h5>
+                        <no-load-paging *ngIf="resultLandingInfo.similarResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateSimilarPage($event)"
+                                        [page]="similarPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.similarResearchResults.length">
+                        </no-load-paging>
+                        <ul class="uk-list uk-list-divider uk-margin">
+                          <li *ngFor="let item of resultLandingInfo.similarResearchResults.slice((similarPage-1)*pageSize, similarPage*pageSize)">
+                            <result-preview [modal]="relationModal" [properties]="properties"
+                                            [result]="getResultPreview(item)"></result-preview>
+                          </li>
+                        </ul>
+                        <no-load-paging *ngIf="resultLandingInfo.similarResearchResults.length > pageSize" [type]="'research outcomes'"
+                                        (pageChange)="updateSimilarPage($event)"
+                                        [page]="similarPage" [pageSize]="pageSize"
+                                        [totalResults]="resultLandingInfo.similarResearchResults.length">
+                        </no-load-paging>
+                      </div>
+                      <!--<div *ngIf="relatedResults">
+                        <div *ngIf="relatedFilter" class="uk-margin-bottom" [formGroup]="relatedFilter">
+                          <span>
+                            <input formControlName="related" type="checkbox"/>
+                            <span class="space uk-text-bold">Related</span>
+                          </span>
+                          <span class="uk-margin-small-left">
+                            <input formControlName="similar" type="checkbox"/>
+                            <span class="space uk-text-bold">Similar</span>
+                          </span>
+                        </div>
+                        <no-load-paging *ngIf="relatedResults.length > pageSize" [type]="'research results'"
+                                        (pageChange)="updateRelatedPage($event)"
+                                        [page]="relatedPage" [pageSize]="pageSize"
+                                        [totalResults]="relatedResults.length">
+                        </no-load-paging>
+                        <ul class="uk-list uk-list-divider uk-margin">
+                          <li *ngFor="let item of relatedResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
+                            <result-preview [modal]="relationModal" [properties]="properties"
+                                            [result]="getResultPreview(item)"></result-preview>
+                          </li>
+                        </ul>
+                        <no-load-paging *ngIf="relatedResults.length > pageSize" [type]="'research results'"
+                                        (pageChange)="updateRelatedPage($event)"
+                                        [page]="relatedPage" [pageSize]="pageSize"
+                                        [totalResults]="relatedResults.length">
+                        </no-load-paging>
+                        <div *ngIf="relatedResults.length === 0">
+                          No results has been found
+                        </div>
+                      </div>-->
+                    </div>
+                    <!--<div class="uk-width-1-3 right-column uk-padding-remove"></div>-->
                   </div>
                 </my-tab>
                 <my-tab *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0"
@@ -305,7 +422,7 @@
                         </no-load-paging>
                       </div>
                     </div>
-                    <div class="uk-width-1-3 right-column uk-padding-remove"></div>
+                    <!--<div class="uk-width-1-3 right-column uk-padding-remove"></div>-->
                   </div>
                 </my-tab>
               </my-tabs>
@@ -373,32 +490,6 @@
                           [resultType]="'other'" [type]="'other research products'"></deletedByInference>
     </div>
   </modal-alert>
-  <!-- Relation Results-->
-  <modal-alert *ngIf="resultLandingInfo" classBody="uk-width-xxlarge uk-padding-remove-right" #relationModal>
-    <landing-header [properties]="properties" [title]="resultLandingInfo.title" [modal]="relationModal"
-                    [subTitle]="resultLandingInfo.subtitle" [authorLimit]="10" [showAllAuthors]="false"
-                    [entityType]="getTypeName()" [authors]="resultLandingInfo.authors" [types]="resultLandingInfo.types"
-                    [year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate">
-    </landing-header>
-    <div *ngIf="relationResults" class="uk-margin-medium-top uk-margin-medium-right">
-      <no-load-paging *ngIf="relationResults.length > pageSize" [type]="'research results'"
-                      (pageChange)="updateRelationPage($event)"
-                      [page]="relationPage" [pageSize]="pageSize"
-                      [totalResults]="relationResults.length">
-      </no-load-paging>
-      <ul class="uk-list uk-list-divider  uk-margin">
-        <li *ngFor="let item of relationResults.slice((relationPage-1)*pageSize, relationPage*pageSize)">
-          <result-preview [modal]="relationModal" [properties]="properties"
-                          [result]="getResultPreview(item)"></result-preview>
-        </li>
-      </ul>
-      <no-load-paging *ngIf="relationResults.length > pageSize" [type]="'research results'"
-                      (pageChange)="updateRelationPage($event)"
-                      [page]="relationPage" [pageSize]="pageSize"
-                      [totalResults]="relationResults.length">
-      </no-load-paging>
-    </div>
-  </modal-alert>
   <!-- Related Organizations-->
   <modal-alert *ngIf="resultLandingInfo && resultLandingInfo.organizations"
                classBody="uk-width-xxlarge uk-padding-remove-right" #organizationModal>
@@ -410,18 +501,18 @@
     <div class="uk-margin-medium-top uk-margin-medium-right">
       <no-load-paging *ngIf="resultLandingInfo.organizations.length > pageSize" [type]="'organizations'"
                       (pageChange)="updateOrganizationsPage($event)"
-                      [page]="relationPage" [pageSize]="pageSize"
+                      [page]="relatedPage" [pageSize]="pageSize"
                       [totalResults]="resultLandingInfo.organizations.length">
       </no-load-paging>
       <ul class="uk-list uk-list-divider  uk-margin">
-        <li *ngFor="let item of resultLandingInfo.organizations.slice((relationPage-1)*pageSize, relationPage*pageSize)">
+        <li *ngFor="let item of resultLandingInfo.organizations.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
           <result-preview [modal]="organizationModal" [properties]="properties"
                           [result]="getResultPreviewFromOrg(item)"></result-preview>
         </li>
       </ul>
       <no-load-paging *ngIf="resultLandingInfo.organizations.length > pageSize" [type]="'organizations'"
                       (pageChange)="updateOrganizationsPage($event)"
-                      [page]="relationPage" [pageSize]="pageSize"
+                      [page]="relatedPage" [pageSize]="pageSize"
                       [totalResults]="resultLandingInfo.organizations.length">
       </no-load-paging>
     </div>
@@ -456,7 +547,7 @@
                      fill="none" points="5 0.5 17.5 0.5 17.5 17" stroke="#000"></polyline></svg>
             </span>
         </button>
-        <div>Research results</div>
+        <div>Research outcomes</div>
       </a></div>
     <div class="uk-text-center">
       <a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'context'])"

landingPages/result/resultLanding.component.ts

@@ -15,6 +15,7 @@ import {Location} from "@angular/common";
 import {MetricsService} from "../../services/metrics.service";
 import {Organization, RelationResult, ResultPreview} from "../../utils/result-preview/result-preview";
 import {IndexInfoService} from "../../utils/indexInfo.service";
+import {FormArray, FormBuilder, FormControl, FormGroup} from "@angular/forms";
 
 
 @Component({
@@ -36,7 +37,8 @@ export class ResultLandingComponent {
   public deleteByInferenceOpened: boolean = false;
   
   public resultLandingInfo: ResultLandingInfo;
-  public relationResults: RelationResult[];
+  public relatedResults: RelationResult[];
+  public supplementaryResults: RelationResult[];
   public relation: string = 'trust';
   public id: string;
   public title: string;
@@ -60,14 +62,22 @@ export class ResultLandingComponent {
   // Custom tab paging variables
   public referencesPage: number = 1;
   public bioentitiesPage: number = 1;
-  public relationPage: number = 1;
+  public relatedPage: number = 1;
+  public similarPage: number = 1;
+  public supplementaryPage: number = 1;
+  public supplementedByPage: number = 1;
   public organizationsPage: number = 1;
-  public softwarePage: number = 1;
   public openCitationsPage: number = 1;
   public pageSize: number = 10;
   
+  // relation filters
+  public relatedFilter: FormGroup;
+  public supplementaryFilter: FormGroup;
+  
   // Map counting variables
   public bioentitiesNum: number = 0;
+  public relatedResultsNum: number = 0;
+  public supplementaryResultsNum: number = 0;
   
   // Message variables
   public warningMessage = "";
@@ -103,7 +113,8 @@ export class ResultLandingComponent {
               private metricsService: MetricsService,
               private cdr: ChangeDetectorRef,
               private _location: Location,
-              private indexInfoService: IndexInfoService) {
+              private indexInfoService: IndexInfoService,
+              private fb: FormBuilder) {
   }
   
   ngOnInit() {
@@ -302,20 +313,7 @@ export class ResultLandingComponent {
           });
         }
         this.showLoading = false;
-        if (this.resultLandingInfo.references) {
+        this.initFilters();
-          this.activeTab = "References";
-        } else if (this.resultLandingInfo.relatedResearchResults) {
-          this.activeTab = "Related Research Results";
-        } else if (this.resultLandingInfo.similarResearchResults) {
-          this.activeTab = "Similar Research Results";
-        } else if (this.resultLandingInfo.organizations) {
-          this.activeTab = "Related Organizations";
-        } else if (this.resultLandingInfo.bioentities) {
-          this.activeTab = "Bioentities";
-        } else {
-          this.activeTab = "Metrics";
-          //this.metricsClicked = true;
-        }
       },
       err => {
         this.handleError("Error getting " + this.type + " for id: " + this.id, err);
@@ -337,6 +335,67 @@ export class ResultLandingComponent {
     );
   }
   
+  public initFilters() {
+    /*this.relatedFilter = this.fb.group({
+      related: this.fb.control(true),
+      similar:  this.fb.control(true),
+    });
+    this.supplementaryFilter = this.fb.group({
+      supplementary: this.fb.control(true),
+      supplementedBy:  this.fb.control(true),
+    });*/
+    this.filterRelatedResults();
+    this.filterSupplementaryResults();
+    /*this.relatedFilter.valueChanges.subscribe(value => {
+      this.filterRelatedResults(value.related, value.similar);
+    });
+    this.supplementaryFilter.valueChanges.subscribe(value => {
+      this.filterSupplementaryResults(value.supplementary, value.supplementedBy);
+    });*/
+  }
+  
+  public filterRelatedResults(related: boolean = true, similar: boolean = true) {
+    this.relatedResults = [];
+    this.relatedResultsNum = 0;
+    if (this.resultLandingInfo.relatedResearchResults) {
+      this.relatedResultsNum += this.resultLandingInfo.relatedResearchResults.length;
+      /*if(related) {
+        this.resultLandingInfo.relatedResearchResults.forEach(result => {
+          this.relatedResults.push(result);
+        });
+      }*/
+    }
+    if (this.resultLandingInfo.similarResearchResults) {
+      this.relatedResultsNum += this.resultLandingInfo.similarResearchResults.length;
+      /*if(similar) {
+        this.resultLandingInfo.similarResearchResults.forEach(result => {
+          this.relatedResults.push(result);
+        });
+      }*/
+    }
+  }
+  
+  public filterSupplementaryResults(supplementary: boolean = true, supplementedBy: boolean = true) {
+    this.supplementaryResults = [];
+    this.supplementaryResultsNum = 0;
+    if (this.resultLandingInfo.supplementaryResearchResults) {
+      this.supplementaryResultsNum += this.resultLandingInfo.supplementaryResearchResults.length;
+      /*if(supplementary) {
+        this.resultLandingInfo.supplementaryResearchResults.forEach(result => {
+          this.supplementaryResults.push(result);
+        });
+      }*/
+    }
+    if (this.resultLandingInfo.supplementedByResearchResults) {
+      this.supplementaryResultsNum += this.resultLandingInfo.supplementedByResearchResults.length;
+      /*if(supplementedBy) {
+        this.resultLandingInfo.supplementedByResearchResults.forEach(result => {
+          this.supplementaryResults.push(result);
+        });
+      }*/
+    }
+  }
+  
   public metricsResults($event) {
     this.totalViews = $event.totalViews;
     this.totalDownloads = $event.totalDownloads;
@@ -357,16 +416,6 @@ export class ResultLandingComponent {
     return !(this.totalViews && this.totalDownloads && this.pageViews) || this.totalViews > 0 || this.totalDownloads > 0 || this.pageViews > 0;
   }
   
-  public buildCurationTooltip(): string {
-    let tooltipContent: string = "<div class='uk-margin uk-padding-small'>";
-    
-    tooltipContent += "<h4>Record in preview</h4>";
-    tooltipContent += "<p>Bibliographic record accepted by the system, but not yet processed by <br> OpenAIRE tools for information quality improvement and de-duplication</p>";
-    
-    tooltipContent += "</div>";
-    return tooltipContent;
-  }
-  
   private updateDescription(description: string) {
     this._meta.updateTag({content: description.substring(0, 160)}, "name='description'");
     this._meta.updateTag({content: description.substring(0, 160)}, "property='og:description'");
@@ -402,18 +451,26 @@ export class ResultLandingComponent {
     this.bioentitiesPage = $event.value;
   }
   
-  public updateRelationPage($event) {
+  public updateRelatedPage($event) {
-    this.relationPage = $event.value;
+    this.relatedPage = $event.value;
+  }
+  
+  public updateSimilarPage($event) {
+    this.similarPage = $event.value;
+  }
+  
+  public updateSupplementaryPage($event) {
+    this.supplementaryPage = $event.value;
+  }
+  
+  public updateSupplementedByPage($event) {
+    this.supplementedByPage = $event.value;
   }
   
   public updateOrganizationsPage($event) {
     this.organizationsPage = $event.value;
   }
   
-  public updateSoftwarePage($event) {
-    this.softwarePage = $event.value;
-  }
-  
   public updateOpenCitationsPage($event) {
     this.openCitationsPage = $event.value;
   }
@@ -475,16 +532,6 @@ export class ResultLandingComponent {
     this.alertModalDeletedByInference.alertTitle = "Other versions of";
     this.alertModalDeletedByInference.open();
   }
-
-  openRelationResults(title: string, relationResults: RelationResult[], relation: string = 'trust') {
-    this.relationResults = relationResults;
-    this.relation = relation;
-    this.relationModal.cancelButton = false;
-    this.relationModal.okButton = false;
-    this.relationModal.alertTitle = title;
-    this.relationPage = 1;
-    this.relationModal.open();
-  }
   
   openOrganizations() {
     this.relation = 'trust';

utils/result-preview/result-preview.component.html

@@ -1,7 +1,6 @@
 <!-- Before title -->
 <div uk-grid>
-  <div [class.uk-width-1-1]="!result.relation" [class.uk-width-1-2]="result.relation"
+  <div class="uk-width-1-1">
-       [class.uk-width-3-4@s]="result.relation">
     <!-- deposit website URL -->
     <span class="uk-width-expand uk-flex-right">
         <a *ngIf="result.websiteURL && promoteWebsiteURL" href="{{result.websiteURL}}" target="_blank" type="submit"
@@ -20,10 +19,9 @@
     <!-- Title -->
     <div class="uk-margin-small-bottom">
       <div class="uk-h5 uk-margin-remove">
-
         <a *ngIf="result.id && !(result.resultType == 'dataprovider' && result.compatibilityUNKNOWN) "
            (click)="onClick()" [queryParams]="routerHelper.createQueryParam(urlParam,result.id)"
-           routerLink="/search/{{result.resultType}}" class="portal-link uk-width-expand">
+           routerLink="/search/{{(result.resultType?result.resultType:'result')}}" class="uk-link uk-width-expand">
           <div *ngIf="(result.title) || result.acronym">
       <span *ngIf="result.acronym">
         {{result.acronym}}
@@ -201,19 +199,6 @@
   </span>
     </div>
   </div>
-  <div *ngIf="result.relation" class="uk-width-expand uk-padding-remove-left uk-text-small">
-    <div *ngIf="result.percentage" class="uk-flex uk-flex-middle">
-      <div class="uk-margin-small-right">
-        <span class="uk-text-capitalize uk-text-muted">{{result.relation}}: </span>
-        <span class="portal-color uk-text-bold"> {{result.percentage}}%</span>
-      </div>
-      <progress class="uk-progress portal-progress uk-margin-remove uk-text-left uk-width-expand"
-                [value]="result.percentage" max="100"></progress>
-    </div>
-    <div class="uk-text-capitalize uk-text-muted" *ngIf="result.provenanceAction">
-      {{result.provenanceAction}}
-    </div>
-  </div>
 </div>
 <!-- Description -->
 <div *ngIf="result.description" class="uk-margin-small-bottom multi-line-ellipsis lines-3">

utils/result-preview/result-preview.component.ts

@@ -34,6 +34,8 @@ export class ResultPreviewComponent implements OnInit{
       this.urlParam = "organizationId";
     } else if (this.result.resultType  == "dataprovider") {
       this.urlParam = "datasourceId";
+    } else {
+      this.urlParam = "id";
     }
     this.initBeforeTitle();
   }
@@ -53,6 +55,9 @@ export class ResultPreviewComponent implements OnInit{
     if(this.result.startYear && this.result.endYear) {
       this.beforeTitle.push(this.result.startYear.toString() + ' - ' + this.result.endYear.toString());
     }
+    if(this.result.provenanceAction) {
+      this.beforeTitle.push(this.result.provenanceAction);
+    }
   }
   
   public getTypeName(type: string): string {