altmetrics added in publication & dataset landing pages | progress report (html) in project landing page added - new component added for html - clipboard functionality added

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@45834 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2017-02-10 13:15:53 +00:00
parent aedb2dac70
commit 93362b727d
20 changed files with 303 additions and 39 deletions

View File

@ -52,11 +52,13 @@
"@angular/upgrade": "~2.1.2",
"@angularclass/bootloader": "~1.0.1",
"@angularclass/idle-preload": "~1.0.4",
"@types/clipboard": "^1.5.31",
"angular2-express-engine": "~2.1.0-rc.1",
"angular2-platform-node": "~2.1.0-rc.1",
"angular2-universal": "~2.1.0-rc.1",
"angular2-universal-polyfills": "~2.1.0-rc.1",
"body-parser": "^1.15.2",
"clipboard": "^1.5.16",
"compression": "^1.6.2",
"express": "^4.14.0",
"js.clone": "0.0.3",
@ -98,7 +100,7 @@
"ts-helpers": "^1.1.2",
"ts-node": "^1.3.0",
"typescript": "2.0.2",
"uglify-js" : "^2.7.4",
"uglify-js": "^2.7.4",
"v8-lazy-parse-webpack-plugin": "^0.3.0",
"webpack": "2.1.0-beta.27",
"webpack-bundle-analyzer": "1.4.1",

View File

@ -137,7 +137,6 @@ import {OpenaireProperties} from '../../utils/properties/openaireProperties';
</div>
</div>
</div>
</div>
<projectsTab *ngIf="tabs[0].content=='projectsTab'"
[paramsForSearchLink]="paramsForSearchLink"
[searchProjectsComponent]="searchProjectsComponent">
@ -146,8 +145,8 @@ import {OpenaireProperties} from '../../utils/properties/openaireProperties';
[paramsForSearchLink]="paramsForSearchLink"
[searchDataprovidersComponent]="searchDataprovidersComponent">
</datasourcesTab>
<organizationsTab *ngIf="tabs[0].content=='organizationsTab'" >
[organizations]="organizations"
<organizationsTab *ngIf="tabs[0].content=='organizationsTab'"
[organizations]="organizations">
</organizationsTab>
<relatedDatasourcesTab *ngIf="tabs[0].content=='relatedDatasourcesTab'"
[searchPublicationsComponent]="searchPublicationsComponentAggregators">

View File

@ -111,11 +111,22 @@
<ul class="uk-list uk-list-striped mainFunctionsBlock">
<li>
<dl class="uk-description-list-line functionsSection">
<dt >Share - Bookmark</dt>
<dt>Share - Bookmark</dt>
<dd>
</dd>
</dl>
</li>
<li>
<dl class="uk-description-list-line functionsSection">
<dt> </dt>
<dd>
<altmetrics *ngIf="datasetInfo.identifiers != undefined && datasetInfo.identifiers.get('doi') != undefined"
id="{{datasetInfo.identifiers.get('doi')[0]}}" type="doi">
</altmetrics >
</dd>
</dl>
</li>
<li *ngIf="datasetInfo.collectedFrom != undefined">
<dl class="uk-description-list-line functionsSection">
<dt>Collected from</dt>

View File

@ -8,6 +8,8 @@ import { DatasetComponent } from './dataset/dataset.component';
import { PublicationComponent } from './publication/publication.component';
import { DataProviderComponent } from './dataProvider/dataProvider.component'
import { HtmlProgressReportComponent } from './project/htmlProgressReport.component';
@NgModule({
imports: [
RouterModule.forChild([
@ -17,7 +19,7 @@ import { DataProviderComponent } from './dataProvider/dataProvider.component'
{ path: 'search/dataset', component: DatasetComponent },
{ path: 'search/publication', component: PublicationComponent },
{ path: 'search/dataprovider', component: DataProviderComponent},
{ path: 'openaire', component: HtmlProgressReportComponent}
])
]
})

View File

@ -34,6 +34,7 @@ import { PublicationComponent } from './publication/publication.component';
import { LandingRoutingModule } from './landing-routing.module';
import { HtmlProgressReportComponent } from './project/htmlProgressReport.component';
@NgModule({
imports: [
//MaterialModule.forRoot(),
@ -48,11 +49,13 @@ import { LandingRoutingModule } from './landing-routing.module';
TabPagingComponent, TabTableComponent, ShowTitleComponent, ShowAuthorsComponent,ShowIdentifiersComponent,ShowSubjectsComponent, MetricsComponent,
PublicationsTabComponent, DatasetsTabComponent, StatisticsTabComponent, ProjectsTabComponent, DatasourcesTabComponent, OrganizationsTabComponent, RelatedDatasourcesTabComponent, TabsComponent,
DataProviderComponent, PersonComponent, ProjectComponent, PublicationComponent, OrganizationComponent, DatasetComponent,
HtmlProgressReportComponent
],
providers:[
],
exports: [
DataProviderComponent, PersonComponent, ProjectComponent, PublicationComponent, OrganizationComponent, DatasetComponent,
HtmlProgressReportComponent
]
})
export class LandingModule { }

View File

@ -0,0 +1,130 @@
import {Component} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {ActivatedRoute, Params} from '@angular/router';
import {isBrowser, isNode} from 'angular2-universal';
import {HtmlProgressReportService} from '../../services/htmlProgressReport.service';
import {ProjectService} from '../../services/project.service';
@Component({
selector: 'htmlProgressReport',
template: `
<div class="uk-container uk-margin-top">
<button class="uk-button uk-button-primary btn" (click)="copied = true;">
Copy to clipboard
</button>
<!--span *ngIf="copied" class="uk-badge uk-badge-success">Success</span-->
<div *ngIf="copied" class="uk-alert" data-uk-alert>
<p>Raw html is copied. Please paste it on an html file.</p>
</div>
<h1>{{header1}}</h1>
<h2>{{header2}}</h2>
<div id="clipboard" [innerHTML]="htmlResult"></div>
</div>
`
})
export class HtmlProgressReportComponent{
public projectId: string;
public totalResults: number;
public header1: string;
public header2: string;
public htmlResult: string = "";
public sub;
public subHTML;
public subHTMLInfo;
public copied: boolean = false;
constructor ( private route: ActivatedRoute,
private htmlService: HtmlProgressReportService,
private _projectService: ProjectService) {
}
ngOnInit() {
this.sub = this.route.queryParams.subscribe(params => {
this.projectId = params['projectId'];
this.totalResults = params['size'];
this.createHeaders();
this.createClipboard();
});
}
ngOnDestroy() {}
createHeaders() {
this._projectService.getHTMLInfo(this.projectId).subscribe(
data => {
this.createHeader1(data);
},
err => {
console.log(err);
}
);
this.header2 = this.totalResults+" publications";
}
createClipboard() {
let intro: string = '<!doctype html>';
intro += '<html lang="en-gb" dir="ltr" vocab="http://schema.org/">';
intro += '<head>';
intro += '<title>'+this.header1+'</title>'
intro += '</head>';
intro += '<body>';
if (typeof window !== 'undefined') {
this.htmlService.getHTML(this.projectId, this.totalResults).subscribe(
data => {
let body: string = intro+'<body><h1>'+this.header1+'</h1><h2>'+this.header2+'</h2>'+data+'</body></html>';
this.htmlResult = data;
let clipboard;
let Clipboard;
Clipboard = require('clipboard');
clipboard = new Clipboard('.btn', {
/*target: function(trigger) {
return document.getElementById("clipboard");
}*/
text: function(trigger) {
return body;//document.getElementById("clipboard").getAttribute('innerHTML');//"aaaa"+tmp+"oo";
}
});
},
err => {
console.log(err);
}
);
}
}
createHeader1(data: {"title": string, "acronym": string, "callIdentifier": string}) {
console.info(data);
this.header1 = "Publications of Project ";
if(data != undefined) {
if(data.title != undefined && data.title != "") {
this.header1 += data.title;
}
if((data.title != undefined && data.title != "") &&
((data.acronym != undefined && data.acronym != "") ||
(data.callIdentifier != undefined && data.callIdentifier != ""))) {
this.header1 += "(";
}
if(data.acronym != undefined && data.acronym != "") {
this.header1 += data.acronym + " - ";
}
if(data.callIdentifier != undefined && data.callIdentifier != "") {
this.header1 += data.callIdentifier;
}
if((data.title != undefined && data.title != "") &&
((data.acronym != undefined && data.acronym != "") ||
(data.callIdentifier != undefined && data.callIdentifier != ""))) {
this.header1 += ")";
}
}
}
}

View File

@ -162,16 +162,19 @@
</a>
</li>
<!--li>
<a href="">
Dynamically incorporate publications in your site (HTML)
</a>
</li>
<span class="clickable">
<span aria-hidden="true"></span>
<span class="uk-icon-download">Dynamically incorporate publications in your site (HTML)</span>
</span>
</li-->
<!--li (click)="showHTML()"-->
<li>
<a href="">
<a target="_blank"
href="/openaire?projectId={{projectId}}&size={{searchPublicationsComponent.searchUtils.totalResults}}">
View {{projectInfo.funder}} progress report (HTML)
</a>
</li-->
</li>
<li>
<!--export
[linkname]="'Download '+ projectInfo.funder +' progress report (CSV)'"

View File

@ -17,7 +17,6 @@ import {OpenaireProperties} from '../../utils/properties/openaireProperties';
})
export class ProjectComponent{
public projectId : string ;
public projectInfo: ProjectInfo;
public projectName: string;
@ -88,7 +87,6 @@ export class ProjectComponent{
this.csvParams = "format=csv-special&page=0&size="+this.searchPublicationsComponent.searchUtils.totalResults+"&type=publications&query=(((oaftype exact result) and (resulttypeid exact publication)) and (relprojectid exact "+this.projectId+"))";
});
}
@ -120,6 +118,10 @@ export class ProjectComponent{
this._projectService.getProjectInfo(id).subscribe(
data => {
this.projectInfo = data;
this.projectName = this.projectInfo.acronym;
if(this.projectName == undefined || this.projectName == '') {
this.projectName = this.projectInfo.title;
}
this.project= { funderId: "", funderName: this.projectInfo.funder, projectId: this.projectId, projectName: this.projectInfo.title, projectAcronym: this.projectInfo.acronym, startDate: this.projectInfo.startDate, endDate: this.projectInfo.endDate };
this.viewsFrameUrl = OpenaireProperties.getFramesAPIURL()+'merge.php?com=query&data=[{"query":"projViewsTimeline","projTitle":"'+this.projectId+'","table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"","yaxisheaders":["Monthly views"],"generalxaxis":"","theme":0,"in":[]}]&info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true';
@ -143,6 +145,41 @@ export class ProjectComponent{
() => console.log('Completed file download.'));
}
showHTML(){
let info:string = "<h1>Publications of Project ";
if(this.projectInfo.title != undefined && this.projectInfo.title != "") {
info += this.projectInfo.title;
}
if((this.projectInfo.title != undefined && this.projectInfo.title != "") &&
((this.projectInfo.acronym != undefined && this.projectInfo.acronym != "") ||
(this.projectInfo.callIdentifier != undefined && this.projectInfo.callIdentifier != ""))) {
info += "(";
}
if(this.projectInfo.acronym != undefined && this.projectInfo.acronym != "") {
info += this.projectInfo.acronym + " - ";
}
if(this.projectInfo.callIdentifier != undefined && this.projectInfo.callIdentifier != "") {
info += this.projectInfo.callIdentifier;
}
if((this.projectInfo.title != undefined && this.projectInfo.title != "") &&
((this.projectInfo.acronym != undefined && this.projectInfo.acronym != "") ||
(this.projectInfo.callIdentifier != undefined && this.projectInfo.callIdentifier != ""))) {
info += ")";
}
info +="</h1>";
info += "<h3>"+this.searchPublicationsComponent.searchUtils.totalResults+" publications</h3>";
let htmlParams = 'resources?format=html&page=0&size='+this.searchPublicationsComponent.searchUtils.totalResults+'&type=publications&query=(((oaftype exact result) and (resulttypeid exact publication)) and (relprojectid exact "'+this.projectId+'"))';
this._reportsService.downloadHTMLFile(this.downloadURLAPI+htmlParams, info)
.subscribe(data => this.funct(data),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
}
funct(data) {
var win = window.open(window.URL.createObjectURL(data));
}
public metricsResults($event) {
this.totalViews = $event.totalViews;
this.totalDownloads = $event.totalDownloads;

View File

@ -240,16 +240,11 @@
</div>
<div class="uk-width-3-10">
<ul class="uk-list uk-list-striped">
<li>
<dl class="uk-description-list-line">
<dt >Share - Bookmark</dt>
<dd>
<!--div *ngIf="doi != undefined"
data-badge-popover="right" data-badge-type="donut"
data-doi="10.7717/peerj.1150" class="altmetric-embed">
</div-->
</dd>
</dl>
</li>
@ -409,6 +404,9 @@
</dl>
</li>
</ul>
<altmetrics *ngIf="publicationInfo.identifiers != undefined && publicationInfo.identifiers.get('doi') != undefined"
id="{{publicationInfo.identifiers.get('doi')[0]}}" type="doi">
</altmetrics>
</div>
</div>
</div>

View File

@ -0,0 +1,27 @@
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {OpenaireProperties} from '../utils/properties/openaireProperties';
import 'rxjs/add/operator/do';
import { CacheService } from '../shared/cache.service';
@Injectable()
export class HtmlProgressReportService {
constructor(private http: Http, public _cache: CacheService) {}
getHTML(id: string, size: number):any {
console.info("getHTML in service");
//let url = OpenaireProperties. getSearchAPIURLLast() + 'publications/' +id+"?format=json";
let url = OpenaireProperties.getCsvAPIURL();
url += 'resources?format=html&page=0&size='+size+'&type=publications&query=(((oaftype exact result) and (resulttypeid exact publication)) and (relprojectid exact "'+id+'"))';
let key = url;
if (this._cache.has(key)) {
return Observable.of(this._cache.get(key));
}
return this.http.get(url)
.map(res => <any> res.text())
.do(res => {
this._cache.set(key, res);
});
}
}

View File

@ -44,20 +44,43 @@ export class ProjectService {
let url = OpenaireProperties. getSearchAPIURLLast()+'projects/'+id+"?format=json";
let key = url+'_projectDates';
if (this._cache.has(key)) {
return Observable.of(this._cache.get(key)).map(res => this.parseProjectDates(id,res))
return Observable.of(this._cache.get(key))
.map(res => [res,
res['fundingtree'],
res['rels']['rel']])
.map(res => this.parseProjectDates(id,res))
}
return this.http.get(url)
.map(res => <any> res.json())
.map(res => res['result']['metadata']['oaf:entity']['oaf:project'])
.map(res => [res,
res['fundingtree'],
res['rels']['rel']])
.do(res => {
this._cache.set(key, res);
})
.map(res => [res,
res['fundingtree'],
res['rels']['rel']])
.map(res => this.parseProjectDates(id,res))
}
getHTMLInfo(id: string): any {
console.info("getHTMLInfo in service");
let url = OpenaireProperties. getSearchAPIURLLast() + 'projects/'+id+"?format=json";
let key = url;
if (this._cache.has(key)) {
return Observable.of(this._cache.get(key))
.map(res => this.parseHTMLInfo(res));
}
return this.http.get(url)
.map(res => <any> res.json())
.map(res => res['result']['metadata']['oaf:entity']['oaf:project'])
.do(res => {
this._cache.set(key, res);
})
.map(res => this.parseHTMLInfo(res));
}
private handleError (error: Response) {
// in a real world app, we may send the error to some remote logging infrastructure
// instead of just logging it to the console
@ -65,6 +88,16 @@ export class ProjectService {
return Observable.throw(error || 'Server error');
}
parseHTMLInfo (data: any):any {
let htmlInfo: {"title": string, "acronym": string, "callIdentifier": string};
if(data != null) {
htmlInfo = {"title": data.title, "acronym": data.acronym, "callIdentifier": data.callidentifier};
}
console.info(htmlInfo);
return htmlInfo;
}
parseProjectInfo (data: any):any {
this.projectInfo = new ProjectInfo();
@ -120,7 +153,6 @@ export class ProjectService {
if(data[2].hasOwnProperty("to") && name != "") {
url = OpenaireProperties.getsearchLinkToOrganization()+data[2]['to'].content;
console.info("data[2]['to'].content: "+data[2]['to'].content);
}
if(name != "") {
this.projectInfo.organizations.set(name, url);
@ -136,7 +168,6 @@ export class ProjectService {
if(data[2][i].hasOwnProperty("to") && name!="") {
url = OpenaireProperties.getsearchLinkToOrganization()+data[2][i]['to'].content;
console.info("data[2]["+i+"]['to'].content: "+data[2][i]['to'].content);
}
if(name != "") {

View File

@ -19,12 +19,24 @@ export class ReportsService {
return this.http.get(url)
.map(res => new Blob([res['_body']], { type: 'text/csv' }));
}
downloadHTMLFile(url: string){
downloadHTMLFile(url: string, info: string){
var headers = new Headers();
headers.append('responseType', 'arraybuffer');
return this.http.get(url).do(res => console.log(res['_body']))
.map(res => new Blob([res['_body']], { type: 'text/html' }))
.do(res => console.log(res))
return this.http.get(url)//.do(res => console.log(res['_body']))
.map(res => this.addInfo(res, info))
.map(res => new Blob([res['_body']], { type: 'text/html' }))
.do(res => console.log(res))
}
addInfo(res:any, info:string) {
/*
var para = res.document.createElement("P"); // Create a <p> element
var t = res.document.createTextNode("This is a paragraph"); // Create a text node
para.appendChild(t); // Append the text to <p>
res.document.body.appendChild(para);
*/
res['_body'] = info+res['_body'];
return res;
}
private handleError (error: Response) {

View File

@ -30,7 +30,7 @@ import {ReportsService} from './reports.service'
import {LoginService} from './login.service';
import {HtmlProgressReportService} from './htmlProgressReport.service';
@NgModule({
imports: [
CommonModule, FormsModule
@ -47,7 +47,8 @@ import {LoginService} from './login.service';
RefineFieldResultsService,
EntitiesSearchService,
LoginService,
ReportsService
ReportsService,
HtmlProgressReportService
],
exports: [
]

View File

@ -18,7 +18,7 @@ import {SearchFields} from '../utils/properties/searchFields';
@Component({
selector: 'test',
template: `
<!--div *ngIf="ready"-->
<i-frame [url]=charturl width="30%" height="250"></i-frame>
<!--/div-->
@ -184,9 +184,10 @@ public ready:boolean = false;
//On the component
//http://beta.services.openaire.eu:8480/search/rest/v2/api/publications?format=csv&page=0&size=3&q=(%22test%22)&fq=instancetypename%20exact%20%22Dataset%22"
downloadfile(){
this._reportsService.downloadHTMLFile("http://beta.services.openaire.eu:8480/search/rest/v2/api/publications?format=html&page=0&size=3&q=(%22test%22)&fq=instancetypename%20exact%20%22Dataset%22")
/* this._reportsService.downloadHTMLFile("http://beta.services.openaire.eu:8480/search/rest/v2/api/publications?format=html&page=0&size=3&q=(%22test%22)&fq=instancetypename%20exact%20%22Dataset%22")
.subscribe(data => window.open(window.URL.createObjectURL(data)),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
*/
}
}

View File

@ -21,9 +21,9 @@ export class AltMetricsComponent {
}
ngOnInit() {
if(this.type == "doi"){
this.altmetrics='<div data-badge-popover="right" data-badge-type="donut" data-doi="'+this.id+'" class="altmetric-embed"> </div>';
this.altmetrics='<div data-badge-popover="right" data-hide-no-mentions="true" data-badge-type="donut" data-doi="'+this.id+'" class="altmetric-embed"> </div>';
}else{
this.altmetrics='<div data-badge-popover="right" data-badge-type="donut" data-arxiv-id="'+this.id+'" class="altmetric-embed"> </div>';
this.altmetrics='<div data-badge-popover="right" data-hide-no-mentions="true" data-badge-type="donut" data-arxiv-id="'+this.id+'" class="altmetric-embed"> </div>';
}
}
}

View File

@ -53,7 +53,7 @@ export class OpenaireProperties {
// private static searchServiveURL = "http://services.openaire.eu:8380/search/";
// private static searchServiveURL = "http://beta.services.openaire.eu:8480/search/";
private static csvAPIURL = "http://rudie.di.uoa.gr:6081/dnet-functionality-services-2.0.0-SNAPSHOT/rest/rest/v2/api/";//publications?format=csv
private static csvAPIURL = "http://rudie.di.uoa.gr:6081/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";//publications?format=csv
private static searchCrossrefAPIURL = "http://api.crossref.org/works";
private static searchDataciteAPIURL = "http://search.datacite.org/api";

View File

@ -36,7 +36,6 @@ import {ModalLoading} from './modal/loading.component';
IFrameComponent,
SafeHtmlPipe,
AltMetricsComponent
],
exports: [
pagingFormatterNoLoad,
@ -51,7 +50,6 @@ import {ModalLoading} from './modal/loading.component';
IFrameComponent,
SafeHtmlPipe,
AltMetricsComponent
]
})
export class UtilsModule { }

View File

@ -66,6 +66,10 @@
}
</script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js"></script>
<!--script type='text/javascript' src="node_modules/clipboard/dist/clipboard.min.js"></script-->
<!--script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script-->
<!--script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script-->
<!-- End of Google sitelinks search markup-->

View File

@ -31,6 +31,10 @@ declare module 'modern-lru' {
export = x;
}
//declare var clipboard: any;
//import * as Clipboard from 'clipboard';
declare var System: SystemJS;
interface SystemJS {
@ -40,6 +44,7 @@ interface SystemJS {
declare var ENV: string;
declare var HMR: boolean;
declare var Zone: {current: any};
interface GlobalEnvironment {
ENV;
HMR;

View File

@ -94,7 +94,7 @@ export var serverConfig = {
__filename: true,
process: true,
Buffer: true
}
}
};
export default [