509 lines
27 KiB
TypeScript
509 lines
27 KiB
TypeScript
import {Component, ViewChild} from '@angular/core';
|
|
import {JSONP_PROVIDERS} from '@angular/http';
|
|
import {Observable} from 'rxjs/Observable';
|
|
import {PublicationService} from '../../services/publication.service';
|
|
import {PublicationInfo} from '../../entities/publicationInfo';
|
|
import { RouteParams} from '@angular/router-deprecated';
|
|
import { InlineClaimContextComponent} from '../../claimPages/inlineClaimContext/inlineClaimContext.component';
|
|
import { InlineClaimProjectComponent} from '../../claimPages/inlineClaimProject/inlineClaimProject.component';
|
|
//import {NgSwitch, ngSwitchCase, NgSwitchDefault} from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'publication',
|
|
template: `
|
|
|
|
<div >
|
|
|
|
<div class="container publication">
|
|
<div class="container-header" >
|
|
<h2 *ngIf="publicationInfo != null" >{{publicationInfo.title}}</h2 >
|
|
<div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
|
|
<div *ngIf="errorMessage.length > 0" class="alert alert-danger" role="alert">{{errorMessage}}</div>
|
|
|
|
</div>
|
|
<div class="row row-offcanvas row-offcanvas-right" >
|
|
|
|
<div class="col-xs-6 col-sm-9 sidebar-offcanvas" *ngIf="publicationInfo != null">
|
|
<div>
|
|
<div *ngIf="publicationInfo.authors != undefined">
|
|
<div *ngIf="showAllAuthors">
|
|
<a class="text-muted" (click)="showAllAuthors = !showAllAuthors;">View less authors</a>
|
|
</div>
|
|
<span *ngFor="let item of publicationInfo.authors.slice(0,30)">
|
|
<a class="custom-external" href="{{item['url']}}" target="_blank">
|
|
{{item['name']}};
|
|
</a>
|
|
</span>
|
|
<span *ngIf="!showAllAuthors && publicationInfo.authors.length > 30"> ... </span>
|
|
<span *ngIf="showAllAuthors">
|
|
<span *ngFor="let item of publicationInfo.authors.slice(30)">
|
|
<a class="custom-external" href="{{item['url']}}" target="_blank">
|
|
{{item['name']}};
|
|
</a>
|
|
</span>
|
|
</span>
|
|
<span *ngIf="!showAllAuthors && publicationInfo.authors.length > 30">
|
|
<a class="text-muted" (click)="showAllAuthors = !showAllAuthors;">
|
|
view all {{publicationInfo.authors.length}} authors
|
|
</a>
|
|
</span>
|
|
<span *ngIf="showAllAuthors">
|
|
<a class="text-muted" (click)="showAllAuthors = !showAllAuthors;">View less authors</a>
|
|
</span>
|
|
</div>
|
|
|
|
<span *ngIf="publicationInfo.date != ''">({{publicationInfo.date}})</span>
|
|
</div>
|
|
|
|
<dl class="dl-horizontal">
|
|
<dt *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">Publisher: </dt>
|
|
<dd *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">{{publicationInfo.publisher}}</dd>
|
|
<dt *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">Journal: </dt>
|
|
<dd *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">{{publicationInfo.journal}}</dd>
|
|
<dt *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''"> Languages: </dt>
|
|
<dd *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''">{{publicationInfo.languages}}</dd>
|
|
<dt *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0"> Types: </dt>
|
|
<dd *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0">{{publicationInfo.types}}</dd>
|
|
|
|
|
|
<div *ngIf="publicationInfo.identifiers != undefined && publicationInfo.identifiers.size > 0">
|
|
<dt>Identifiers:</dt>
|
|
<dd>
|
|
<ul class="list-inline">
|
|
<li *ngFor="let key of publicationInfo.identifiers.keys()">
|
|
<!--a *ngIf="key == 'doi'" class="custom-external" href="http://dx.doi.org/{{key}}" target="_blank">
|
|
{{key}}: {{publicationInfo.identifiers.get(key)}}
|
|
</a>
|
|
<a *ngIf="key == 'pmc'" class="custom-external" href="http://europepmc.org/articles/{{key}}" target="_blank">
|
|
{{key}}: {{publicationInfo.identifiers.get(key)}}
|
|
</a>
|
|
<a *ngIf="key != 'pmc' && key != 'doi'" class="custom-external" href="http://europepmc.org/articles/{{key}}" target="_blank">
|
|
{{key}}: {{publicationInfo.identifiers.get(key)}}
|
|
</a-->
|
|
|
|
<div [ngSwitch]="key">
|
|
<template [ngSwitchWhen]="'doi'">
|
|
<a class="custom-external" href="http://dx.doi.org/{{publicationInfo.identifiers.get(key)}}" target="_blank">
|
|
{{key}}: {{publicationInfo.identifiers.get(key)}}
|
|
</a>
|
|
</template>
|
|
<template [ngSwitchWhen]="'pmc'">
|
|
<a class="custom-external" href="http://europepmc.org/articles/{{publicationInfo.identifiers.get(key)}}" target="_blank">
|
|
{{key}}: {{publicationInfo.identifiers.get(key)}}
|
|
</a>
|
|
</template>
|
|
<template ngSwitchDefault>{{key}}: {{publicationInfo.identifiers.get(key)}}</template>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
|
|
<div *ngIf="publicationInfo.subjects != undefined">
|
|
<dt *ngIf="publicationInfo.subjects.length > 0 || publicationInfo.classifiedSubjects.size > 0">
|
|
Subjects:
|
|
</dt>
|
|
<dd>
|
|
<div *ngIf="publicationInfo.subjects.length > 0"> {{publicationInfo.subjects}} </div>
|
|
<div *ngIf="publicationInfo.subjects.length == 0 && publicationInfo.classifiedSubjects.size > 0"> - </div>
|
|
</dd>
|
|
|
|
<dd class="col-md-offset-1" *ngIf="publicationInfo.classifiedSubjects.size > 0">
|
|
<a (click)="showClassifiedSbj = !showClassifiedSbj;">
|
|
<div *ngIf="!showClassifiedSbj">
|
|
Show additional classifications
|
|
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
|
|
</div>
|
|
<div *ngIf="showClassifiedSbj">
|
|
Hide additional classifications
|
|
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="well" *ngIf="showClassifiedSbj">
|
|
<div *ngFor="let key of publicationInfo.classifiedSubjects.keys()">
|
|
Classified by OpenAIRE into
|
|
<div>
|
|
{{key}}: {{publicationInfo.classifiedSubjects.get(key)}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
|
|
|
|
</dl>
|
|
|
|
<blockquote *ngIf="publicationInfo.description != ''">
|
|
{{publicationInfo.description}}
|
|
</blockquote>
|
|
|
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
<li class="active">
|
|
<a data-toggle="tab" href="#citationsTab">
|
|
References
|
|
<span *ngIf="publicationInfo.references == undefined" class="badge">0</span>
|
|
<span *ngIf="publicationInfo.references != undefined" class="badge">
|
|
{{publicationInfo.references.length}}
|
|
</span>
|
|
|
|
<!--span [ngSwitch]="publicationInfo.references || undefined" class="badge">
|
|
<template [ngSwitchWhen]="undefined">0</template>
|
|
<template ngSwitchDefault>{{publicationInfo.references.length}}</template>
|
|
</span-->
|
|
</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a data-toggle="tab" href="#dataTab">
|
|
Related Research Data
|
|
<span *ngIf="publicationInfo.relatedResearchData == undefined" class="badge">0</span>
|
|
<span *ngIf="publicationInfo.relatedResearchData != undefined" class="badge">{{publicationInfo.relatedResearchData.size}}</span>
|
|
</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a data-toggle="tab" href="#similarTab">
|
|
Similar Publications
|
|
<span *ngIf="publicationInfo.similarPublications == undefined" class="badge">0</span>
|
|
<span *ngIf="publicationInfo.similarPublications != undefined" class="badge">{{publicationInfo.similarPublications.size}}</span>
|
|
</a>
|
|
</li>
|
|
<li role="presentation" *ngIf="publicationInfo.bioentities != undefined">
|
|
<a data-toggle="tab" href="#bioentitiesTab">
|
|
Bioentities
|
|
<span class="badge">{{bioentitiesNum}}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
|
|
<div id="citationsTab" class="tab-pane fade in active panel-body">
|
|
|
|
<div *ngIf="publicationInfo.references == undefined" class = "alert alert-info " >
|
|
There are no references
|
|
</div>
|
|
<div *ngIf="publicationInfo.references != undefined">
|
|
|
|
<div class="panel panel-default" *ngIf="!showAllReferences && publicationInfo.references.length > 10">
|
|
<div class="panel-heading">
|
|
<a (click)="showAllReferences = true;">
|
|
<div class="text-right">view all {{publicationInfo.references.length}}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!showAllReferences">
|
|
<div *ngFor="let item of publicationInfo.references.slice(0,10)">
|
|
<p *ngIf=" item != undefined && item['url'] != undefined">
|
|
<a class="custom-external" href="{{item['url']}}" target="_blank">
|
|
{{item['text']}}
|
|
</a>
|
|
</p>
|
|
<p *ngIf="item['url'] == undefined">
|
|
{{item['text']}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="showAllReferences">
|
|
<div *ngFor="let item of publicationInfo.references.slice(10)">
|
|
<p *ngIf=" item != undefined && item['url'] != undefined">
|
|
<a class="custom-external" href="{{item['url']}}" target="_blank">
|
|
{{item['text']}}
|
|
</a>
|
|
</p>
|
|
<p *ngIf="item['url'] == undefined">
|
|
{{item['text']}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default" *ngIf="!showAllReferences && publicationInfo.references.length > 10">
|
|
<div class="text-right" class="panel-heading">
|
|
<a (click)="showAllReferences = true;">
|
|
<div class="text-right" >view all {{publicationInfo.references.length}}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dataTab" class="tab-pane fade panel-body">
|
|
<div *ngIf="publicationInfo.relatedResearchData == undefined" class = "alert alert-info " >
|
|
There are no related research data
|
|
</div>
|
|
<table *ngIf="publicationInfo.relatedResearchData != undefined" id="inferredTable" class="table table-striped">
|
|
<thead>
|
|
<tr role="row">
|
|
<th>Title</th>
|
|
<th>Trust</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let key of publicationInfo.relatedResearchData.keys()">
|
|
<td *ngIf="key != undefined">
|
|
<a class="custom-external" href="{{key}}" target="_blank">
|
|
{{publicationInfo.relatedResearchData.get(key)[0]}}
|
|
</a>
|
|
<span *ngIf="publicationInfo.relatedResearchData.get(key)[1] != ''">
|
|
({{publicationInfo.relatedResearchData.get(key)[1]}})
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" [style.width] = "publicationInfo.relatedResearchData.get(key)[2]">
|
|
{{publicationInfo.relatedResearchData.get(key)[2]}}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<div id="similarTab" class="tab-pane fade panel-body">
|
|
<div *ngIf="publicationInfo.similarPublications == undefined" class = "alert alert-info " >
|
|
There are no similar publications
|
|
</div>
|
|
<table *ngIf="publicationInfo.similarPublications != undefined" id="similarTable" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Trust</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody >
|
|
<tr *ngFor="let key of publicationInfo.similarPublications.keys()">
|
|
<td *ngIf="key != undefined">
|
|
<a class="custom-external" href="{{key}}" target="_blank">
|
|
{{publicationInfo.similarPublications.get(key)[0]}}
|
|
</a>
|
|
<span *ngIf="publicationInfo.similarPublications.get(key)[1] != ''">
|
|
({{publicationInfo.similarPublications.get(key)[1]}})
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" [style.width] = "publicationInfo.similarPublications.get(key)[2]">
|
|
{{publicationInfo.similarPublications.get(key)[2]}}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div *ngIf="publicationInfo.bioentities != undefined" id="bioentitiesTab" class="tab-pane fade panel-body">
|
|
<table id="bioentitiesTable" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Bio Entity</th>
|
|
<th>Site Name</th>
|
|
</tr>
|
|
</thead>
|
|
<div *ngIf="publicationInfo.bioentities != undefined">
|
|
<tbody *ngFor="let key of publicationInfo.bioentities.keys()">
|
|
<div *ngIf="publicationInfo.bioentities.get(key) != undefined">
|
|
<tr *ngFor="let keyIn of publicationInfo.bioentities.get(key).keys()">
|
|
<td *ngIf="keyIn != undefined">
|
|
<a href="{{publicationInfo.bioentities.get(key).get(keyIn)}}" target="_blank">
|
|
{{keyIn}}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
{{key}}
|
|
</td>
|
|
</tr>
|
|
</div>
|
|
</tbody>
|
|
|
|
</div>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3" *ngIf="publicationInfo != null">
|
|
|
|
<ul class="list-group mainFunctionsBlock">
|
|
<li class="list-group-item">
|
|
<dl class="functionsSection" *ngIf="publicationInfo.collectedFrom != undefined">
|
|
<dt >Collected from</dt>
|
|
<dd *ngFor="let key of publicationInfo.collectedFrom.keys()">
|
|
<a href="{{publicationInfo.collectedFrom.get(key)}}">
|
|
{{key}}
|
|
</a>
|
|
</dd>
|
|
</dl>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<dl class="functionsSection" *ngIf="publicationInfo.downloadFrom != undefined && publicationInfo.downloadFrom.size > 0">
|
|
<dt class="title">Download from</dt>
|
|
<dd class="line" *ngFor="let key of publicationInfo.downloadFrom.keys()">
|
|
<a href="{{key}}">
|
|
{{publicationInfo.downloadFrom.get(key)[1]}}
|
|
</a>
|
|
</dd>
|
|
</dl>
|
|
</li>
|
|
|
|
|
|
<li class="list-group-item">
|
|
<dl class="functionsSection" *ngIf="publicationInfo.fundedByProjects != undefined">
|
|
<dt class="title">Funded By</dt>
|
|
<dd class="line" *ngFor="let key of publicationInfo.fundedByProjects.values()">
|
|
<a *ngIf="!key[5]" href="{{publicationInfo.fundedByProjects.get(key)}}">
|
|
{{key[0]?key[0]:key[1]}} | {{ (key[4])?key[4]:key[3]}} </a>
|
|
|
|
<a *ngIf="key[5]" href="{{publicationInfo.fundedByProjects.get(key)}}">
|
|
<mark>{{((key[0])?key[0]:key[1])}} | {{ ((key[4])?key[4]:key[3])}} </mark> </a>
|
|
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
<dl class="functionsSection" *ngIf="publicationInfo.fundedByProjects == undefined">
|
|
<dt class="title">Funded By</dt>
|
|
</dl>
|
|
<button (click)="toggleClaimProject()" class = "btn btn-default btn-xs" >Add more Projects</button>
|
|
<inline-claim-project *ngIf="result " inline="true" inlineType ="publication" [inlineEntity]="result" (projectAdded)="projectAdded($event)" ></inline-claim-project>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<dl class="functionsSection" *ngIf="publicationInfo.contexts != undefined">
|
|
<dt class="title">Related to </dt>
|
|
<dd class="line" *ngFor="let item of publicationInfo.contexts">
|
|
<span>{{item['labelContext']}}</span>
|
|
<span *ngIf="item['labelCategory'] != null">-> {{item['labelCategory']}}</span>
|
|
<span *ngIf="item['labelConcept'] != null">: {{item['labelConcept']}}</span>
|
|
</dd>
|
|
</dl>
|
|
<dl class="functionsSection" *ngIf="publicationInfo.contexts == undefined">
|
|
<dt class="title">Related to </dt>
|
|
|
|
</dl>
|
|
<button (click)=" toggleClaimContext()" class = "btn btn-default btn-xs" >Add Contexts</button>
|
|
<inline-claim-context inline="true" inlineType ="publication" [inlineEntity]="result" ></inline-claim-context>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
`,
|
|
providers:[JSONP_PROVIDERS, PublicationService],
|
|
directives:[InlineClaimContextComponent, InlineClaimProjectComponent]
|
|
})
|
|
|
|
export class PublicationComponent {
|
|
constructor (private _publicationService: PublicationService, private _routeParams: RouteParams) {
|
|
console.info('publication constructor');
|
|
this.params = _routeParams;
|
|
}
|
|
ngOnInit() {
|
|
this.getPublicationInfo();
|
|
}
|
|
|
|
private publicationInfo: PublicationInfo;
|
|
private params: RouteParams;
|
|
|
|
private showAllAuthors: boolean = false;
|
|
private showStyle: boolean = false;
|
|
private showAllReferences: boolean = false;
|
|
private showAllRelResData: boolean = false;
|
|
private showAllSimilPubl: boolean = false;
|
|
private showAllBioentities: boolean = false;
|
|
|
|
private bioentitiesNum: number = 0;
|
|
|
|
private result ;
|
|
private claimInline:string = "none" ;
|
|
|
|
@ViewChild (InlineClaimProjectComponent) inlineClaimProject : InlineClaimProjectComponent ;
|
|
@ViewChild (InlineClaimContextComponent) inlineClaimContext : InlineClaimContextComponent ;
|
|
|
|
public warningMessage = "";
|
|
public errorMessage = "";
|
|
|
|
getPublicationInfo() {
|
|
this.warningMessage = '';
|
|
this.errorMessage=""
|
|
if(this.params.get("articleId")==null || this.params.get("articleId")==''){
|
|
this.warningMessage="No valid publication id";
|
|
console.info("novalid");
|
|
}else{
|
|
console.info("do request");
|
|
this._publicationService.getPublicationInfo(this.params.get("articleId")).subscribe(
|
|
data => {
|
|
this.publicationInfo = data;
|
|
|
|
let bioentitiesNum = 0;
|
|
if(this.publicationInfo.bioentities != undefined) {
|
|
this.publicationInfo.bioentities.forEach(function (value, key, map) {
|
|
bioentitiesNum += value.size;
|
|
});
|
|
}
|
|
this.bioentitiesNum = bioentitiesNum;
|
|
|
|
this.result = []
|
|
let result_ ={id: this.params.get("articleId"), type :"publication", source : "openaire", title: this.publicationInfo.title,url: '', result: '', accessRights: this.publicationInfo.bestlicense, embargoEndDate: ''};
|
|
this.result.push(result_);
|
|
},
|
|
err => {
|
|
console.error(err)
|
|
console.info("error");
|
|
|
|
this.errorMessage = 'No publication found';
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
/*
|
|
********* Methods for Inline Claim of project / publication *****
|
|
*/
|
|
toggleClaimProject(){
|
|
this.inlineClaimProject.toggle();
|
|
}
|
|
projectAdded($event){
|
|
var projects =$event.value;
|
|
if(projects){
|
|
for(var i=0; i < projects.length; i++){
|
|
|
|
if(this.publicationInfo.fundedByProjects == undefined) {
|
|
this.publicationInfo.fundedByProjects = new Map<string, string[]>();
|
|
}
|
|
var project =projects[i];
|
|
this.publicationInfo.fundedByProjects.set(project.projectId, new Array<string>());
|
|
this.publicationInfo.fundedByProjects.get(project.projectId)[0] = project.projectAcronym;
|
|
this.publicationInfo.fundedByProjects.get(project.projectId)[1] = project.projectName;
|
|
this.publicationInfo.fundedByProjects.get(project.projectId)[2] =project.selectedFunderId;
|
|
this.publicationInfo.fundedByProjects.get(project.projectId)[3] = project.selectedFunderName;
|
|
this.publicationInfo.fundedByProjects.get(project.projectId)[5] = "new";
|
|
}
|
|
}
|
|
}
|
|
toggleClaimContext(){
|
|
this.inlineClaimContext.toggle();
|
|
}
|
|
contextAdded($event){
|
|
var contexts =$event.value;
|
|
if(contexts){
|
|
for(var i=0; i < contexts.length; i++){
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|