MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | Trunk]: Add openaire metrics. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58598 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-05-05 10:37:36 +00:00
parent d8e31242e8
commit 456b2d5811
17 changed files with 470 additions and 458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
landingPages/annotation/annotation.component.ts
View File

@ -93,10 +93,20 @@ export class AnnotationComponent implements OnInit, OnDestroy {
id = this.landingInfo.deletedByInferenceIds[0];
this.url = this.url.replace(this.id, id);
}
this.pid = this.url;
if (this.landingInfo.identifiers && this.landingInfo.identifiers.size > 0) {
if (this.landingInfo.identifiers.get('doi')) {
this.pid = this.landingInfo.identifiers.get('doi')[0];
} else {
const key: string = this.landingInfo.identifiers.keys().next().value;
if (key) {
this.pid = this.landingInfo.identifiers.get(key)[0];
}
}
} else {
this.pid = id;
}
this.annotationService.getAllAnnotations(this.properties, this.url).subscribe(annotations => {
this.annotations = annotations;
console.log(this.annotations);
});
}
}

14
landingPages/dataProvider/dataProvider.component.html
View File

@ -582,6 +582,20 @@
<div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share - Bookmark</div>
<addThis></addThis>
</div>
<!-- Metrics -->
<div *ngIf="hasMetrics" class="uk-margin-top">
<div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>
<div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
<div></div><!-- Open Citations-->
<div>
<metrics [pageViews]="pageViews"
[id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
[viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
(metricsResults)="metricsResults($event)" [properties]=properties>
</metrics>
</div>
</div>
</div>
<!-- <metrics [pageViews]="pageViews" shortView=true-->
<!-- [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"-->
<!-- (metricsResults)="metricsResults($event)" [properties]=properties>-->

4
landingPages/dataProvider/dataProvider.component.ts
View File

@ -600,6 +600,10 @@ export class DataProviderComponent {
this.totalDownloads = $event.totalDownloads;
this.pageViews = $event.pageViews;
}
public get hasMetrics(): boolean {
return !(this.totalViews && this.totalDownloads && this.pageViews) || this.totalViews > 0 || this.totalDownloads > 0||this.pageViews > 0;
}
public openStatistics() {
this.statsClicked = true;

2
landingPages/dataProvider/dataProvider.module.ts
View File

@ -7,7 +7,7 @@ import {IFrameModule} from '../../utils/iframe.module';
import {ErrorMessagesModule} from '../../utils/errorMessages.module';
// import { ResultLandingModule } from '../resultLanding.module';
import {TabResultModule } from '../../searchPages/searchUtils/tabResult.module';
import {MetricsModule} from '../landing-utils/metrics.module';
import {MetricsModule} from '../landing-utils/metrics/metrics.module';
import {LandingModule} from '../landing-utils/landing.module';
import {PagingModule} from '../../utils/paging.module';

170
landingPages/landing-utils/metrics.component.ts
View File

@ -1,170 +0,0 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Metrics} from '../../utils/entities/metrics';
import {MetricsService } from '../../services/metrics.service';
import {ErrorCodes} from '../../utils/properties/errorCodes';
import { Subscription } from 'rxjs';
import{EnvProperties} from '../../utils/properties/env-properties';
@Component({
selector: 'metrics',
template: `
<div *ngIf="!shortView">
<errorMessages [status]="[status]" [type]="'metrics'" tab_error_class=true></errorMessages>
<div *ngIf="metrics && pageViews == 0 && metrics.totalViews == 0 && metrics.totalDownloads == 0" class="uk-alert uk-alert-primary">
No metrics available
</div>
<div *ngIf="metrics != undefined && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-grid" uk-grid="">
<div *ngIf="entityType == 'projects'" class="uk-width-1-1 uk-text-center uk-text-meta uk-margin">Project metrics are derived from aggregating individual research results metrics.</div>
<div class="metrics-openaire uk-first-column">
<div class="uk-tile uk-tile-default uk-padding-small">
<div class="uk-text-center">{{pageViews | number}}</div>
<div class="uk-text-center">views in OpenAIRE</div>
</div>
</div>
<div class="metrics-views">
<div class="uk-tile uk-tile-muted uk-padding-small">
<div class="uk-text-center"> {{metrics.totalViews | number}}
<span *ngIf="metrics.totalViews > 0 && metrics.totalOpenaireViews > 0">
( {{metrics.totalOpenaireViews | number}} from OpenAIRE )
</span></div>
<div class="uk-text-center">views in local repository</div>
</div>
</div>
<div class="metrics-downloads">
<div class="uk-tile uk-tile-primary uk-padding-small">
<div class="uk-text-center"> {{metrics.totalDownloads | number}}
<span *ngIf="metrics.totalDownloads > 0 && metrics.totalOpenaireDownloads > 0">
( {{metrics.totalOpenaireDownloads | number}} from OpenAIRE )
</span></div>
<div class="uk-text-center">downloads in local repository</div>
</div>
</div>
</div>
<p *ngIf="metrics != undefined && metrics.infos.size > 0" >The information is available from the following content providers: </p>
<table *ngIf="metrics != undefined && metrics.infos.size > 0"
class="uk-table uk-table-small uk-table-striped">
<thead>
<tr>
<th class="uk-text-center uk-text-bold">From</th>
<th class="uk-text-center uk-text-bold">Number Of Views</th>
<th class="uk-text-center uk-text-bold">Number Of Downloads</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let key of getKeys(metrics.infos)">
<td class="uk-text-center">
<a href="{{metrics.infos.get(key).url}}">
{{metrics.infos.get(key).name}}
</a>
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfViews | number}}
<span *ngIf="metrics.infos.get(key).numOfViews > 0 && metrics.infos.get(key).openaireViews > 0">
( {{metrics.infos.get(key).openaireViews | number}} from OpenAIRE )
</span>
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfDownloads | number}}
<span *ngIf="metrics.infos.get(key).numOfDownloads > 0 && metrics.infos.get(key).openaireDownloads > 0">
( {{metrics.infos.get(key).openaireDownloads | number}} from OpenAIRE )
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="shortView && metrics && (metrics.pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)">
<dl *ngIf="metrics" class="uk-description-list-line">
<dt class="sideInfoTitle">Metrics</dt>
<dd class="line" >
{{metrics.pageViews | number}} views in OpenAIRE
</dd>
<dd class="line">
{{metrics.totalViews | number}}
<span *ngIf="metrics.totalViews > 0 && metrics.totalOpenaireViews > 0">
( {{metrics.totalOpenaireViews | number}} from OpenAIRE )
</span>
views in local repository
</dd>
<dd class="line">
{{metrics.totalDownloads | number}}
<span *ngIf="metrics.totalDownloads > 0 && metrics.totalOpenaireDownloads > 0">
( {{metrics.totalOpenaireDownloads | number}} from OpenAIRE )
</span> downloads in local repository
</dd>
</dl>
</div>
`
})
export class MetricsComponent {
@Output() metricsResults = new EventEmitter();
@Input() id: string;
@Input() entityType: string;
@Input() entity: string;
//@Input() name: string = "";
@Input() pageViews: number = 0;
@Input() properties:EnvProperties;
@Input() shortView:boolean = false;
public metrics: Metrics;
public errorCodes:ErrorCodes;
private sub: Subscription;
public status: number;
constructor (private _metricsService: MetricsService) {}
ngOnInit() {
this.errorCodes = new ErrorCodes();
this.status = this.errorCodes.LOADING;
this.getMetrics();
}
ngOnDestroy() {
this.sub.unsubscribe();
}
private getMetrics() {
//if(this.id == undefined || this.id == "") {
// console.log("supplied id in metrics is not acceptable");
//}
//if(this.type == undefined || this.type == "") {
// console.log("supplied id in metrics is not acceptable");
//}
this.sub = this._metricsService.getMetrics(this.id, this.entityType, this.properties).subscribe(
data => {
this.metrics = data;
this.status = this.errorCodes.DONE;
this.metricsResults.emit({
totalViews: this.metrics.totalViews,
totalDownloads: this.metrics.totalDownloads,
pageViews: this.metrics.pageViews
});
},
err => {
console.log(err);
if(err.status == '404') {
this.status = this.errorCodes.NOT_FOUND;
} else if(err.status == '500') {
this.status = this.errorCodes.ERROR;
} else {
this.status = this.errorCodes.NOT_AVAILABLE;
}
this.metricsResults.emit({
totalViews: 0,
totalDownloads: 0
});
}
);
}
public getKeys( map) {
return Array.from(map.keys());
}
}

26
landingPages/landing-utils/metrics.module.ts
View File

@ -1,26 +0,0 @@
/* This module contains all common components for all landing pages */
import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {MetricsComponent} from './metrics.component';
import { MetricsService } from '../../services/metrics.service';
import {ErrorMessagesModule} from '../../utils/errorMessages.module';
@NgModule({
imports: [
CommonModule, FormsModule, ErrorMessagesModule
],
declarations: [
MetricsComponent
],
providers:[
MetricsService
],
exports: [
MetricsComponent
]
})
export class MetricsModule { }

91
landingPages/landing-utils/metrics/metrics.component.css Normal file
View File

@ -0,0 +1,91 @@
.metrics {
position: relative;
display: inline-block;
}
.metrics .widget {
position: absolute;
left: 50%;
transform: translateX(-85%);
margin-top: 20px;
margin-left: 20px;
width: 350px;
z-index: 1;
}
.metrics .widget:after {
position: absolute;
left: 80%;
transform: translateX(-65%);
top: -10px;
width: 0;
height: 0;
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #2E2D7A;
}
.metrics .m-badge .number {
font-size: 18px;
color: #222080;
font-weight: 700;
text-align: center;
}
.metrics .widget > .body {
box-shadow: 0 3px 6px #00000029;
border-radius: 4px 4px 0 4px;
padding: 10px 18px;
background: #2E2D7A no-repeat padding-box;
color: white;
font-size: 12px;
height: inherit;
}
.metrics .widget > .body > div {
opacity: 0;
height: inherit;
overflow: hidden;
}
.metrics .widget > .body .charts {
margin-top: 10px;
opacity: 0;
}
.metrics .widget > .body .charts .uk-slidenav {
background-color: #bbbbca;
color: #49494f;
padding: 5px 10px;
border-radius: 50%;
}
.metrics .widget > .footer {
background: #FFFFFF;
box-shadow: 0 3px 6px #00000029;
border-radius: 0 0 4px 4px;
font-size: 11px;
padding: 5px 10px;
color: rgba(126, 126, 126, 0.80);
display: inline-block;
float: right;
position: relative;
z-index: -1;
transform: translateY(-80px);
}
.metrics .widget .footer > *:first-child {
margin-right: 10px;
line-height: 33px;
vertical-align: middle;
}
.metrics .widget .number {
font-weight: 700;
font-size: 18px;
}
.metrics .uk-grid-divider>:not(.uk-first-column)::before {
border-left: 1px solid #ffffff;
}

255
landingPages/landing-utils/metrics/metrics.component.ts Normal file
View File

@ -0,0 +1,255 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Metrics} from '../../../utils/entities/metrics';
import {MetricsService} from '../../../services/metrics.service';
import {ErrorCodes} from '../../../utils/properties/errorCodes';
import {Subscription} from 'rxjs';
import {EnvProperties} from '../../../utils/properties/env-properties';
import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'metrics',
styleUrls: ['metrics.component.css'],
template: `
<div *ngIf="metrics && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="metrics"
click-outside-or-esc (clickOutside)="close($event)"
id="metrics" targetId="metrics">
<div class="m-badge clickable" (click)="toggle($event)">
<img src="assets/common-assets/metrics-icon.svg">
<div class="number">{{total | number}}</div>
</div>
<div class="widget" [@widget]="state.toString()">
<div class="body">
<div [@body]="state.toString()">
<div *ngIf="entityType == 'projects'" class="uk-margin-bottom">
<i class="uk-text-center">Project metrics
are derived from aggregating individual research results metrics.
</i>
</div>
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-divider uk-grid-match" uk-grid>
<div class="uk-text-center uk-first-column">
<div class="number">{{metrics.totalDownloads | number}}</div>
<div>Downloads</div>
</div>
<div class="uk-text-center">
<div class="number">{{pageViews | number}}</div>
<div>OpenAIRE views</div>
</div>
<div class="uk-text-center">
<div class="number">{{metrics.totalViews | number}}</div>
<div>Total views</div>
</div>
</div>
<div *ngIf="(metrics.totalViews > 0 && viewsFrameUrl) || (metrics.totalDownloads > 0 && downloadsFrameUrl)"
[@charts]="state.toString()"
class="charts uk-visible-toggle" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-child-width-1-1 uk-grid">
<li>
<i-frame *ngIf="metrics.totalViews > 0 && viewsFrameUrl"
[width]="325" [height]="200"
[url]=viewsFrameUrl>
</i-frame>
</li>
<li>
<i-frame *ngIf="metrics.totalDownloads > 0 && downloadsFrameUrl"
[width]="325" [height]="200"
[url]=downloadsFrameUrl>
</i-frame>
</li>
</ul>
<div class="uk-text-right">
<a href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a href="#" class="space" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
</div>
</div>
<div class="footer uk-flex uk-flex-middle" [@footer]="state.toString()">
<span>Powered by</span>
<img width="120" src="assets/common-assets/openaire-metrics.png">
</div>
</div>
</div>
`,
animations: [
trigger('widget', [
state('-1', style({
width: '150px',
opacity: 0,
height: '60px',
})),
state('0', style({
width: '150px',
opacity: 0,
height: '60px',
"margin-top": '-25px'
})),
state('1', style({
width: '150px',
opacity: 1,
height: '60px',
})),
state('2', style({
width: '350px',
height: 'auto',
})),
state('3', style({
width: '350px',
height: 'auto',
})),
state('4', style({
width: '350px',
height: 'auto',
})),
transition('0 => 1', [
animate('300ms ease-out')
]),
transition('1 => 2', [
animate('400ms cubic-bezier(.18,.89,.56,1)')
])
]),
trigger('body', [
state('2', style({
opacity: 1,
height: 'auto',
})),
state('3', style({
opacity: 1,
height: 'auto'
})),
state('4', style({
opacity: 1,
height: 'auto'
})),
transition('* => 2', [
animate('400ms cubic-bezier(.18,.89,.56,1)')
])
]),
trigger('charts', [
state('3', style({
opacity: 1
})),
state('4', style({
opacity: 1
})),
transition('* => 3', [
animate('800ms ease-out')
])
]),
trigger('footer', [
state('4', style({
transform: 'translateY(0)'
})),
transition('3 => 4', [
animate('800ms ease-out')
])
])
]
})
export class MetricsComponent {
@Output() metricsResults = new EventEmitter();
@Input() id: string;
@Input() entityType: string;
@Input() entity: string;
//@Input() name: string = "";
@Input() pageViews: number = 0;
@Input() properties: EnvProperties;
@Input() shortView: boolean = false;
@Input() open = false;
@Input() viewsFrameUrl: string;
@Input() downloadsFrameUrl: string;
public metrics: Metrics;
public errorCodes: ErrorCodes;
private sub: Subscription;
private timeouts: any[] = [];
public status: number;
public state: number = -1;
constructor(private _metricsService: MetricsService) {
}
ngOnInit() {
this.errorCodes = new ErrorCodes();
this.status = this.errorCodes.LOADING;
this.getMetrics();
}
ngOnDestroy() {
this.sub.unsubscribe();
}
public get total(): number {
return +this.pageViews + +this.metrics.totalViews + +this.metrics.totalDownloads;
}
private getMetrics() {
this.sub = this._metricsService.getMetrics(this.id, this.entityType, this.properties).subscribe(
data => {
this.metrics = data;
this.status = this.errorCodes.DONE;
this.metricsResults.emit({
totalViews: this.metrics.totalViews,
totalDownloads: this.metrics.totalDownloads,
pageViews: this.metrics.pageViews
});
},
err => {
console.log(err);
if (err.status == '404') {
this.status = this.errorCodes.NOT_FOUND;
} else if (err.status == '500') {
this.status = this.errorCodes.ERROR;
} else {
this.status = this.errorCodes.NOT_AVAILABLE;
}
this.metricsResults.emit({
totalViews: 0,
totalDownloads: 0
});
}
);
}
public close(event) {
if(event.value && this.state !== -1) {
this.timeouts.forEach(timeout => {
clearTimeout(timeout);
});
this.state = -1;
this.timeouts = [];
}
}
public toggle(event) {
event.stopPropagation();
if(this.state !== -1) {
this.timeouts.forEach(timeout => {
clearTimeout(timeout);
});
this.state = -1;
this.timeouts = [];
} else {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
}, 400));
}, 800));
}, 300));
}, 100));
}
}
public getKeys(map) {
return Array.from(map.keys());
}
}

28
landingPages/landing-utils/metrics/metrics.module.ts Normal file
View File

@ -0,0 +1,28 @@
/* This module contains all common components for all landing pages */
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {MetricsComponent} from './metrics.component';
import {MetricsService} from '../../../services/metrics.service';
import {ErrorMessagesModule} from '../../../utils/errorMessages.module';
import {IFrameModule} from "../../../utils/iframe.module";
import {ClickModule} from "../../../utils/click/click.module";
@NgModule({
imports: [
CommonModule, FormsModule, ErrorMessagesModule, IFrameModule, ClickModule
],
declarations: [
MetricsComponent
],
providers:[
MetricsService
],
exports: [
MetricsComponent
]
})
export class MetricsModule { }

27
landingPages/project/project.component.html
View File

@ -544,6 +544,20 @@
<div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share - Bookmark</div>
<div class="uk-margin-small-left uk-margin-small-right"><addThis></addThis></div>
</div>
<!-- Metrics -->
<div *ngIf="hasMetrics" class="uk-margin-top">
<div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>
<div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
<div></div><!-- Open Citations-->
<div>
<metrics [pageViews]="pageViews"
[id]="projectId" [entityType]="'projects'" [entity]="'project'"
[viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
(metricsResults)="metricsResults($event)" [properties]=properties>
</metrics>
</div>
</div>
</div>
<div class="uk-margin-top">
<div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share project's content</div>
<div class="app-box uk-padding-small uk-margin-small-left uk-margin-small-right">
@ -642,19 +656,6 @@
</div>
</div>
</div>
<!-- Metrics -->
<!-- <div *ngIf="hasAltMetrics" class="uk-margin-top">-->
<!-- <div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>-->
<!-- <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">-->
<!-- <div></div>&lt;!&ndash; Open Citations&ndash;&gt;-->
<!-- <div>-->
<!-- <altmetrics *ngIf="hasAltMetrics" id="{{resultLandingInfo.identifiers.get('doi')[0]}}" type="doi">-->
<!-- </altmetrics>-->
<!-- </div>-->
<!-- <div></div>&lt;!&ndash; OpenAIRE Metrics &ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="uk-margin-top">-->
<!-- <div class="sideInfoTitle uk-margin-small-bottom">Share project's research results</div>-->
<!-- <div>-->

4
landingPages/project/project.component.ts
View File

@ -447,6 +447,10 @@ export class ProjectComponent {
this.totalDownloads = $event.totalDownloads;
this.pageViews = $event.pageViews;
}
public get hasMetrics(): boolean {
return !(this.totalViews && this.totalDownloads && this.pageViews) || this.totalViews > 0 || this.totalDownloads > 0||this.pageViews > 0;
}
public openStatistics() {
this.statsClicked = true;

5
landingPages/project/project.module.ts
View File

@ -11,7 +11,7 @@ import {HtmlProjectReportService} from "../htmlProjectReport/htmlProjectReport.s
import {ReportsServiceModule} from '../../services/reportsService.module';
import {SearchResearchResultsServiceModule} from '../../services/searchResearchResultsService.module';
import {MetricsModule} from '../landing-utils/metrics.module';
import {MetricsModule} from '../landing-utils/metrics/metrics.module';
import {LandingModule } from '../landing-utils/landing.module';
import {LandingHeaderModule} from "../landing-utils/landing-header/landing-header.module";
@ -26,6 +26,7 @@ import {IsRouteEnabled} from '../../error/isRouteEnabled.guard';
import {Schema2jsonldModule} from '../../sharedComponents/schema2jsonld/schema2jsonld.module';
import {SEOServiceModule } from '../../sharedComponents/SEO/SEOService.module';
import {FeedbackModule} from "../feedback/feedback.module";
import {AltMetricsModule} from "../../utils/altmetrics.module";
@NgModule({
imports: [
@ -34,7 +35,7 @@ import {FeedbackModule} from "../feedback/feedback.module";
IFrameModule, MetricsModule, ReportsServiceModule,
SearchResearchResultsServiceModule, ProjectServiceModule,
Schema2jsonldModule, SEOServiceModule, HelperModule,
LandingHeaderModule, MatSelectModule, FeedbackModule
LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule
],
declarations: [

239
landingPages/result/resultLanding.component.html
View File

@ -195,232 +195,7 @@
<b2note [id]="id" [properties]="properties"
[landingInfo]="resultLandingInfo"></b2note>
</div>
<!--<ul #accordions class="custom-accordion" uk-accordion>
<li *ngIf="resultLandingInfo.references" (click)="activeTab='References'">
<a class="uk-accordion-title" href="#">
References
({{resultLandingInfo.references.length | number}})
</a>
<div class="uk-accordion-content">
<div>
<div *ngIf="resultLandingInfo.references.length > pageSize" class="uk-margin-bottom">
<span class="uk-h6">{{resultLandingInfo.references.length | number}}
references, page {{referencesPage | number}}
of {{totalPages(resultLandingInfo.references.length) | number}}</span>
<paging-no-load class="uk-float-right" [currentPage]="referencesPage"
[totalResults]="resultLandingInfo.references.length" [size]="pageSize"
(pageChange)="updateReferencesPage($event)"></paging-no-load>
</div>
<div
*ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
<p *ngIf=" item && item['url']"
class="custom-external custom-icon">
<a href="{{item['url']}}" target="_blank">
{{item['name']}}
</a>
</p>
<p *ngIf="!item['url']" class="pseudo-external custom-icon">
{{item['name']}}
</p>
</div>
</div>
</div>
</li>
<li *ngIf="resultLandingInfo.similarResearchResults" (click)="activeTab='Similar Research Results'">
<a class="uk-accordion-title" href="#">
Similar Research Results
({{resultLandingInfo.similarResearchResults.length | number}})
</a>
<div class="uk-accordion-content">
<div>
<tabTable percentageName="similarity" [info]="resultLandingInfo.similarResearchResults"
[properties]=properties></tabTable>
</div>
</div>
</li>
<li *ngIf="resultLandingInfo.supplementaryResearchResults"
(click)="activeTab='Supplementary Research Results'">
<a class="uk-accordion-title" href="#">
Supplementary Research Results
({{resultLandingInfo.supplementaryResearchResults.length | number}})
</a>
<div class="uk-accordion-content">
<div>
<tabTable percentageName="trust" [info]="resultLandingInfo.supplementaryResearchResults"
[properties]=properties></tabTable>
</div>
</div>
</li>
<li *ngIf="resultLandingInfo.supplementedByResearchResults"
(click)="activeTab='Research Results supplemented by this product'">
<a class="uk-accordion-title" href="#">
Research Results supplemented by this
<span *ngIf="type == 'publication' || type == 'software'">{{type}}</span>
<span *ngIf="type == 'dataset'">research data</span>
<span *ngIf="type == 'orp'">research product</span>
({{resultLandingInfo.supplementedByResearchResults.length | number}})
</a>
<div class="uk-accordion-content">
<div>
<tabTable percentageName="trust" [info]="resultLandingInfo.supplementedByResearchResults"
[properties]=properties></tabTable>
</div>
</div>
</li>
<li *ngIf="resultLandingInfo.organizations" (click)="activeTab='Related Organizations'">
<a class="uk-accordion-title" href="#">
Related Organizations
({{resultLandingInfo.organizations.length | number}})
</a>
<div class="uk-accordion-content">
<div>
<div *ngIf="resultLandingInfo.organizations.length > pageSize" class="uk-margin-bottom">
<span class="uk-text-bold">{{resultLandingInfo.organizations.length | number}}
organizations, page {{organizationsPage | number}}
of {{totalPages(resultLandingInfo.organizations.length) | number}}</span>
<paging-no-load class="uk-float-right" [currentPage]="organizationsPage"
[totalResults]="resultLandingInfo.organizations.length" [size]="pageSize"
(pageChange)="updateOrganizationsPage($event)"></paging-no-load>
</div>
<table class="uk-table uk-table-small uk-table-divider uk-table-middle ">
<tbody>
<tr
*ngFor="let organization of resultLandingInfo.organizations.slice((organizationsPage-1)*pageSize, organizationsPage*pageSize)">
<td>
<a *ngIf="(organization['id']) && ((organization['name']) || (organization['shortname']))"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
routerLink="/search/organization">
{{organization['name']}}
<span *ngIf="organization.name && organization.shortname"> ( </span>
<span *ngIf="organization.shortname">{{organization.shortname}}</span>
<span *ngIf="organization.name && organization.shortname"> ) </span>
</a>
<p *ngIf="(!organization['id']) && ((organization['name']) || (organization['shortname']))">
{{organization['name']}}
<span *ngIf="organization.name && organization.shortname"> ( </span>
<span *ngIf="organization.shortname">{{organization.shortname}}</span>
<span *ngIf="organization.name && organization.shortname"> ) </span>
</p>
<div *ngIf="organization.country">{{organization.country}}</div>
<div *ngIf="organization.websiteUrl">Website url:
<a href="{{organization.websiteUrl}}" target="_blank">{{organization.websiteUrl}}</a>
</div>
</td>
<td>
<div *ngIf="organization['trust']" title="{{organization['trust']}}%">
<div class="uk-text-center">{{organization['trust']}}%</div>
<progress class="uk-progress uk-margin-remove" value="{{organization['trust']}}"
max="100"></progress>
</div>
<div *ngIf="!organization['trust']">
<p>no trust available</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li *ngIf="resultLandingInfo.bioentities" (click)="activeTab='Bioentities'">
<a class="uk-accordion-title" href="#">
Bioentities
({{bioentitiesNum | number}})
</a>
<div class="uk-accordion-content">
<div *ngIf="resultLandingInfo.bioentities && bioentitiesNum > pageSize" class="uk-margin-bottom">
<span class="uk-text-bold"> {{bioentitiesNum | number}}
bioentities, page {{bioentitiesPage | number}} of {{totalPages(bioentitiesNum) | number}}</span>
<paging-no-load class="uk-float-right" [currentPage]="bioentitiesPage"
[totalResults]="bioentitiesNum" [size]="pageSize"
(pageChange)="updateBioentitiesPage($event)"></paging-no-load>
</div>
<table id="bioentitiesTable" class="uk-table ">
<tbody>
<ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index">
<tr
*ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*pageSize, bioentitiesPage*pageSize)">
<td class="uk-text-center" *ngIf="keyIn">
<span class="custom-external custom-icon">
<a href="{{resultLandingInfo.bioentities.get(key).get(keyIn)}}"
target="_blank">
{{keyIn}}
</a>
</span>
</td>
<td class="uk-text-center">
{{key}}
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</li>
<li (click)="activeTab='Other Citations'"
*ngIf="resultLandingInfo.openCitations && resultLandingInfo.openCitations.length > 0">
<a class="uk-accordion-title" href="#">
Open Citations
({{resultLandingInfo.openCitations.length | number}})
</a>
<div class="uk-accordion-content">
<div *ngIf="resultLandingInfo.openCitations.length > pageSize" class="uk-margin-bottom">
<span class="uk-h6">{{resultLandingInfo.openCitations.length | number}}
open citations, page {{openCitationsPage | number}}
of {{totalPages(resultLandingInfo.openCitations.length) | number}}</span>
<paging-no-load class="uk-float-right" [currentPage]="openCitationsPage"
[totalResults]="resultLandingInfo.openCitations.length" [size]="pageSize"
(pageChange)="updateOpenCitationsPage($event)"></paging-no-load>
</div>
<ul class="uk-list uk-list-divider uk-margin">
<li
*ngFor="let result of resultLandingInfo.openCitations.slice((openCitationsPage-1)*pageSize, openCitationsPage*pageSize)">
<h5 *ngIf="result.title">
<span *ngIf="result.url"
class="custom-external">
<a *ngIf="result.title" href="{{result.url}}" target="_blank"
[innerHTML]="result.title">
</a>
<a *ngIf="!result.title" href="{{result.url}}" target="_blank">
[no title available]
</a>
</span>
<span *ngIf="result.title && !result.url" [innerHTML]="result.title"></span>
<span *ngIf="!result.title && !result.url">
[no title available]
</span>
</h5>
<div>
<span *ngIf="result['authors']">
<span *ngFor="let author of result['authors'].slice(0,15)">
{{author}};
</span>
<span *ngIf="result['authors'].length > 15">...</span>
</span>
<span *ngIf="result.year">
({{result.year}})
</span>
</div>
<span *ngIf="result.doi">Identifier: <a *ngIf="result.doi" target="_blank"
class="custom-external custom-icon"
href="{{doiURL}}{{result.doi}}">doi: {{result.doi}}</a></span>
</li>
</ul>
</div>
</li>
<!-- <ul #accordions class="custom-accordion" uk-accordion>
<li (click)="metricsClicked=true; activeTab='Metrics'">
<a class="uk-accordion-title" href="#">
Metrics
@ -510,15 +285,21 @@
[availableOn]="resultLandingInfo.hostedBy_collectedFrom"></availableOn>
</div>
<!-- Metrics -->
<div *ngIf="hasAltMetrics" class="uk-margin-top">
<div *ngIf="hasAltMetrics || hasMetrics" class="uk-margin-top">
<div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>
<div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
<div></div><!-- Open Citations-->
<div>
<div *ngIf="hasAltMetrics">
<altmetrics *ngIf="hasAltMetrics" id="{{resultLandingInfo.identifiers.get('doi')[0]}}" type="doi">
</altmetrics>
</div>
<div></div><!-- OpenAIRE Metrics -->
<div *ngIf="hasMetrics">
<metrics [pageViews]="pageViews"
[id]="id" [entityType]="'results'" [entity]="title"
[viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
(metricsResults)="metricsResults($event)" [properties]=properties>
</metrics>
</div>
</div>
</div>
<div class="uk-margin-top">

4
landingPages/result/resultLanding.component.ts
View File

@ -334,6 +334,10 @@ export class ResultLandingComponent {
this.totalDownloads = $event.totalDownloads;
this.pageViews = $event.pageViews;
}
public get hasMetrics(): boolean {
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'>";

2
landingPages/result/resultLanding.module.ts
View File

@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {SharedModule} from '../../shared/shared.module';
import {MetricsModule} from '../landing-utils/metrics.module';
import {MetricsModule} from '../landing-utils/metrics/metrics.module';
import {LandingModule} from '../landing-utils/landing.module';
import {CiteThisModule} from '../landing-utils/citeThis/citeThis.module';
import {IFrameModule} from '../../utils/iframe.module';

24
utils/click/click-outside-or-esc.directive.ts
View File

@ -61,17 +61,21 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
onGlobalClick(event: MouseEvent) {
if (event instanceof MouseEvent && this.listening === true) {
if (event.target['id'] != this.targetId) {
this.clickOutside.emit({
target: (event.target || null),
value: false
});
} else {
this.clickOutside.emit({
target: (event.target || null),
value: true
});
let element: HTMLElement = <HTMLElement>event.target;
while (element) {
if(element.id === this.targetId) {
this.clickOutside.emit({
target: (event.target || null),
value: false
});
return;
}
element = element.parentElement;
}
this.clickOutside.emit({
target: (event.target || null),
value: true
});
}
}
}

19
utils/iframe.component.ts
View File

@ -4,19 +4,30 @@ import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'i-frame',
template: `
<div class="iframeContainer uk-height-large" >
<iframe [src]="safeUrl"></iframe>
<div *ngIf="!style" class="iframeContainer uk-height-large">
<iframe [src]="safeUrl"></iframe>
</div>
<div *ngIf="style" class="iframeContainer" [ngStyle]="style">
<iframe [src]="safeUrl"></iframe>
</div>
`
})
export class IFrameComponent {
public safeUrl: SafeResourceUrl;
@Input() url ;
@Input() width: number;
@Input() height: number;
public style: any;
constructor(private sanitizer: DomSanitizer) {
}
ngOnInit() {
this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
//console.info("URL:" + this.safeUrl);
if(this.width && this.height) {
this.style = {
"width.px": this.width,
"height.px": this.height
}
}
}
}