explore-services/portal/src/app/landingPages/dataset/dataset.component.ts

327 lines
17 KiB
TypeScript

import {Component, ViewChild} from '@angular/core';
import {JSONP_PROVIDERS} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {DatasetService} from '../../services/dataset.service';
import {DatasetInfo} from '../../entities/datasetInfo';
import { RouteParams} from '@angular/router-deprecated';
import { InlineClaimContextComponent} from '../../claimPages/inlineClaimContext/inlineClaimContext.component';
import { InlineClaimProjectComponent} from '../../claimPages/inlineClaimProject/inlineClaimProject.component';
import {TabPagingComponent} from '../tabPaging.component.ts';
import {TabTableComponent} from '../tabTable.component.ts';
import {ShowTitleComponent} from '../showTitle.component.ts';
import {ShowAuthorsComponent} from '../showAuthors.component.ts';
import {ShowIdentifiersComponent} from '../showIdentifiers.component.ts';
import {ShowSubjectsComponent} from '../showSubjects.component.ts';
@Component({
selector: 'dataset',
template: `
<div class="container dataset">
<div class="container-header" >
<div *ngIf="datasetInfo != null" >
<showTitle [title]="datasetInfo.title"></showTitle>
</div>
<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="datasetInfo != null">
<div>
<showAuthors [authors]="datasetInfo.authors"></showAuthors>
<span *ngIf="datasetInfo.date != ''">({{datasetInfo.date}})</span>
</div>
<dl class="dl-horizontal">
<dt *ngIf="datasetInfo.publisher != undefined && datasetInfo.publisher != ''">Publisher: </dt>
<dd *ngIf="datasetInfo.publisher != undefined && datasetInfo.publisher != ''">{{datasetInfo.publisher}}</dd>
<dt *ngIf="datasetInfo.type != undefined"> Type: </dt>
<dd *ngIf="datasetInfo.type != undefined">{{datasetInfo.type}}</dd>
<dt *ngIf="datasetInfo.embargoEndDate != undefined && datasetInfo.embargoEndDate != ''">Embargo end date: </dt>
<dd *ngIf="datasetInfo.embargoEndDate != undefined && datasetInfo.embargoEndDate != ''">{{datasetInfo.embargoEndDate}}</dd>
<showIdentifiers [identifiers]="datasetInfo.identifiers"></showIdentifiers>
<showSubjects [subjects]="datasetInfo.subjects" [classifiedSubjects]="datasetInfo.classifiedSubjects"></showSubjects>
</dl>
<blockquote *ngIf="datasetInfo.description != ''">
<div class="text-justify" [innerHTML]="datasetInfo.description"></div>
</blockquote>
<ul class="nav nav-tabs">
<li class="active">
<!--a data-toggle="tab" href="#relatedPublicationsTab">
Related Publications
<span *ngIf="datasetInfo.isRelatedTo == undefined" class="badge">0</span>
<span *ngIf="datasetInfo.isRelatedTo != undefined" class="badge">
{{datasetInfo.relatedPublications.length}}
</span>
</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#dataTab">
Related Research Results
<span *ngIf="datasetInfo.relatedResearchData == undefined" class="badge">0</span>
<span *ngIf="datasetInfo.relatedResearchData != undefined" class="badge">
{{datasetInfo.relatedResearchData.length}}
</span>
</a>
</li-->
<a data-toggle="tab" href="#relatedTab">
Related Research Results
<span *ngIf="datasetInfo.relatedResearchResults == undefined" class="badge">0</span>
<span *ngIf="datasetInfo.relatedResearchResults != undefined" class="badge">
{{datasetInfo.relatedResearchResults.length}}
</span>
</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#similarTab">
Similar Research Results
<span *ngIf="datasetInfo.similarResearchResults == undefined" class="badge">0</span>
<span *ngIf="datasetInfo.similarResearchResults != undefined" class="badge">
{{datasetInfo.similarResearchResults.length}}
</span>
</a>
</li>
</ul>
<div class="tab-content">
<!--div id="relatedPublicationsTab" class="tab-pane fade in active panel-body">
<div *ngIf="datasetInfo.isRelatedTo == undefined" class = "alert alert-info " >
There are no related publications
</div>
<div *ngIf="datasetInfo.isRelatedTo != undefined">
<p>
The results below are discovered through our pilot algorithms.
<a href="mailto:">Let us know how we are doing!</a>
</p>
<tabTable [info]="datasetInfo.isRelatedTo"></tabTable>
</div>
</div-->
<div id="relatedTab" class="tab-pane fade in active panel-body">
<div *ngIf="datasetInfo.relatedResearchResults == undefined" class = "alert alert-info " >
There are no related research results
</div>
<div *ngIf="datasetInfo.relatedResearchResults != undefined">
<p>
The results below are discovered through our pilot algorithms.
<a href="mailto:">Let us know how we are doing!</a>
</p>
<tabTable [info]="datasetInfo.relatedResearchResults"></tabTable>
</div>
</div>
<div id="similarTab" class="tab-pane fade panel-body">
<div *ngIf="datasetInfo.similarResearchResults == undefined" class = "alert alert-info " >
There are no similar research results
</div>
<div *ngIf="datasetInfo.similarResearchResults != undefined">
<p>
The results below are discovered through our pilot algorithms.
<a href="mailto:">Let us know how we are doing!</a>
</p>
<tabTable [info]="datasetInfo.similarResearchResults"></tabTable>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3" *ngIf="datasetInfo != null">
<ul class="list-group mainFunctionsBlock">
<li class="list-group-item">
<dl class="functionsSection">
<dt >Share - Bookmark</dt>
<dd>
</dd>
</dl>
</li>
<li class="list-group-item" *ngIf="datasetInfo.collectedFrom != undefined">
<dl class="functionsSection">
<dt>Collected from</dt>
<dd *ngFor="let item of datasetInfo.collectedFrom">
<a href="{{item['url']}}">
{{item['name']}}
</a>
</dd>
</dl>
</li>
<li class="list-group-item" *ngIf="datasetInfo.downloadFrom != undefined && datasetInfo.downloadFrom.size > 0">
<dl class="functionsSection">
<dt class="title">Download from</dt>
<dd class="line" *ngFor="let key of datasetInfo.downloadFrom.keys()">
<div *ngIf="datasetInfo.downloadFrom.get(key)['url'].length > 1">
{{key}}
<span *ngFor="let url of datasetInfo.downloadFrom.get(key)['url']; let i=index;">
<a href="{{url}}">
[{{i+1}}]
</a>
</span>
</div>
<a *ngIf="datasetInfo.downloadFrom.get(key)['url'].length == 1" href="{{datasetInfo.downloadFrom.get(key)['url']}}">
{{key}}
</a>
</dd>
</dl>
</li>
<li class="list-group-item">
<dl class="functionsSection" *ngIf="datasetInfo.fundedByProjects != undefined">
<dt class="title">Funded By</dt>
<dd
title="{{item['title']}}
| Project Code: {{item['acronym']}}
| Funder: {{item['funderName']}} ({{item['funderShortname']}})
| Funding: {{item['funding']}}"
class="line" *ngFor="let item of datasetInfo.fundedByProjects">
<a *ngIf="!item['new']" href="{{item['url']}}">
{{item['funderShortname']?item['funderShortname']:item['funderName']}}
| {{ item['acronym']?item['acronym']:item['title']}}
</a>
<a *ngIf="item['new']" href="{{item['url']}}">
<mark>
{{item['funderShortname']?item['funderShortname']:item['funderName']}}
| {{ item['acronym']?item['acronym']:item['title']}}
</mark>
</a>
</dd>
</dl>
<!--dl class="functionsSection" *ngIf="datasetInfo.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 ="dataset" [inlineEntity]="result" (projectAdded)="projectAdded($event)" ></inline-claim-project>
</li>
<!--li class="list-group-item">
<dl class="functionsSection" *ngIf="datasetInfo.contexts != undefined">
<dt class="title">Related to </dt>
<dd class="line" *ngFor="let item of datasetInfo.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="datasetInfo.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 ="dataset" [inlineEntity]="result" ></inline-claim-context>
</li-->
</ul>
</div>
</div>
</div>
`,
providers:[JSONP_PROVIDERS, DatasetService],
directives:[InlineClaimContextComponent, InlineClaimProjectComponent,
TabTableComponent, ShowTitleComponent, ShowAuthorsComponent,
ShowIdentifiersComponent, ShowSubjectsComponent]
})
export class DatasetComponent {
constructor (private _datasetService: DatasetService, private _routeParams: RouteParams) {
console.info('dataset constructor');
this.params = _routeParams;
}
ngOnInit() {
this.getDatasetInfo();
}
private datasetInfo: DatasetInfo;
private params: RouteParams;
private showStyle: boolean = false;
private showAllReferences: boolean = false;
private showAllRelResData: boolean = false;
private showAllSimilPubl: boolean = false;
private showAllBioentities: boolean = false;
private result ;
private claimInline:string = "none" ;
@ViewChild (InlineClaimProjectComponent) inlineClaimProject : InlineClaimProjectComponent ;
@ViewChild (InlineClaimContextComponent) inlineClaimContext : InlineClaimContextComponent ;
public warningMessage = "";
public errorMessage = "";
getDatasetInfo() {
this.warningMessage = '';
this.errorMessage=""
if(this.params.get("datasetId")==null || this.params.get("datasetId")==''){
this.warningMessage="No valid dataset id";
console.info("novalid");
}else{
console.info("do request");
this._datasetService.getDatasetInfo(this.params.get("datasetId")).subscribe(
data => {
this.datasetInfo = data;
this.result = []
let result_ ={id: this.params.get("datasetId"), type :"dataset", source : "openaire", title: this.datasetInfo.title,url: '', result: '', accessRights: this.datasetInfo.bestlicense, embargoEndDate: ''};
this.result.push(result_);
},
err => {
console.error(err)
console.info("error");
this.errorMessage = 'No dataset found';
}
);
}
}
/********** Methods for Inline Claim of project / dataset ******/
toggleClaimProject(){
this.inlineClaimProject.toggle();
}
projectAdded($event){
var projects =$event.value;
if(projects){
for(var i=0; i < projects.length; i++){
if(this.datasetInfo.fundedByProjects == undefined) {
this.datasetInfo.fundedByProjects = new Array<
{ "url": string, "acronym": string, "title": string,
"funderShortname": string, "funderName": string,
"funding": string, "new": boolean
}>();
}
var project =projects[i];
let counter = this.datasetInfo.fundedByProjects.length;
this.datasetInfo.fundedByProjects[counter]['url'] =
"http://localhost:3000/project?projectId="+project.projectId;
this.datasetInfo.fundedByProjects[counter]['acronym'] = project.projectAcronym;
this.datasetInfo.fundedByProjects[counter]['title'] = project.projectName;
this.datasetInfo.fundedByProjects[counter]['funderShortname'] = project.selectedFunderId;
this.datasetInfo.fundedByProjects[counter]['funderName'] = project.selectedFunderName;
this.datasetInfo.fundedByProjects[counter]['new'] = true;
}
}
}
toggleClaimContext(){
this.inlineClaimContext.toggle();
}
contextAdded($event){
var contexts =$event.value;
if(contexts){
for(var i=0; i < contexts.length; i++){
}
}
}
}