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

create new tooltips for metrics in metrics cards and tabs - landing pages

This commit is contained in:
Alex Martzios 2023-03-27 16:32:41 +03:00
parent 932aaff111
commit a356a08d67
9 changed files with 133 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -193,13 +193,21 @@
<div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div> <div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div> </div>
<div> <div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom" <div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <a>Downloads</a>
[title]="getMetricsTooltip('downloads')">Downloads</div> <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'downloads'}"></ng-container>
<div *ngIf="totalViews" class="cell" </div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <div *ngIf="totalViews" class="cell">
[title]="getMetricsTooltip('views')">Views</div> <a>Views</a>
<ng-container *ngTemplateOutlet="dropInfo; context: {option: 'views'}"></ng-container>
</div>
</div> </div>
<ng-template #dropInfo let-option=option>
<div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click">
<div class="uk-padding-small uk-width-medium" [innerHTML]="getMetricsTooltip(option) | safeHtml">
</div>
</div>
</ng-template>
<div class="uk-text-uppercase uk-text-bolder"> <div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" <div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalDownloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(totalDownloads)}}</div> title="{{totalDownloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(totalDownloads)}}</div>
@ -783,10 +791,14 @@
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts"> <a href='https://usagecounts.openaire.eu/' target='_blank'>
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</a>
</div> </div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span> <span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span> <span class="uk-display-block uk-text-bolder">
<a href='https://usagecounts.openaire.eu/' target='_blank' class="uk-link-reset">UsageCounts</a>
</span>
</div> </div>
<div> <div>
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
@ -854,7 +866,9 @@
</div> </div>
<div class="uk-text-center uk-margin-large-top"> <div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span> <span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts"> <a href='https://usagecounts.openaire.eu/' target='_blank'>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</a>
</div> </div>
</li> </li>
</ul> </ul>

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

@ -916,9 +916,9 @@ export class DataProviderComponent {
public getMetricsTooltip(value: string) { public getMetricsTooltip(value: string) {
if (value == 'downloads') { if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><a href='https://usagecounts.openaire.eu/' target='_blank'><img src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts'></a><span class='uk-text-uppercase uk-margin-small-left'>Downloads provided by <a href='https://usagecounts.openaire.eu/' target='_blank' class='uk-link-reset'><strong>UsageCounts</strong></a></div>";
} else if (value == 'views') { } else if (value == 'views') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><a href='https://usagecounts.openaire.eu/' target='_blank'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts'></a><span class='uk-text-uppercase uk-margin-small-left'>Views provided by <a href='https://usagecounts.openaire.eu/' target='_blank' class='uk-link-reset'><strong>UsageCounts</strong></a></div>";
} }
} }
} }

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

@ -35,6 +35,7 @@ import {graph} from "../../utils/icons/icons";
import {LoadingModalModule} from "../../utils/modal/loadingModal.module"; import {LoadingModalModule} from "../../utils/modal/loadingModal.module";
import {ResultLandingUtilsModule} from "../landing-utils/resultLandingUtils.module"; import {ResultLandingUtilsModule} from "../landing-utils/resultLandingUtils.module";
import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-screen-modal.module'; import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-screen-modal.module';
import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
@NgModule({ @NgModule({
imports: imports:
@ -44,7 +45,7 @@ import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-sc
PagingModule, Schema2jsonldModule, SEOServiceModule, ShowPublisherModule, HelperModule, PagingModule, Schema2jsonldModule, SEOServiceModule, ShowPublisherModule, HelperModule,
LandingHeaderModule, AlertModalModule, NoLoadPaging, FeedbackModule, LandingHeaderModule, AlertModalModule, NoLoadPaging, FeedbackModule,
TabsModule, SearchTabModule, LoadingModule, IconsModule, LoadingModalModule, ResultLandingUtilsModule, TabsModule, SearchTabModule, LoadingModule, IconsModule, LoadingModalModule, ResultLandingUtilsModule,
FullScreenModalModule FullScreenModalModule, SafeHtmlPipeModule
], ],
declarations: declarations:
[StatisticsTabComponent, [StatisticsTabComponent,

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

@ -347,13 +347,21 @@
<div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div> <div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div> </div>
<div> <div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom" <div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <a>Downloads</a>
[title]="getMetricsTooltip('downloads')">Downloads</div> <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'downloads'}"></ng-container>
<div *ngIf="totalViews" class="cell" </div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <div *ngIf="totalViews" class="cell">
[title]="getMetricsTooltip('views')">Views</div> <a>Views</a>
<ng-container *ngTemplateOutlet="dropInfo; context: {option: 'views'}"></ng-container>
</div>
</div> </div>
<ng-template #dropInfo let-option=option>
<div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click">
<div class="uk-padding-small uk-width-medium" [innerHTML]="getMetricsTooltip(option) | safeHtml">
</div>
</div>
</ng-template>
<div class="uk-text-uppercase uk-text-bolder"> <div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" <div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{totalDownloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(totalDownloads)}}</div> title="{{totalDownloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(totalDownloads)}}</div>
@ -867,10 +875,14 @@
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts"> <a href='https://usagecounts.openaire.eu/' target='_blank'>
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</a>
</div> </div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span> <span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span> <span class="uk-display-block uk-text-bolder">
<a href='https://usagecounts.openaire.eu/' target='_blank' class="uk-link-reset">UsageCounts</a>
</span>
</div> </div>
<div> <div>
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
@ -936,7 +948,9 @@
</div> </div>
<div class="uk-text-center uk-margin-large-top"> <div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span> <span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts"> <a href='https://usagecounts.openaire.eu/' target='_blank'>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</a>
</div> </div>
</li> </li>
</ul> </ul>

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

@ -1043,9 +1043,9 @@ export class ProjectComponent {
public getMetricsTooltip(value: string) { public getMetricsTooltip(value: string) {
if (value == 'downloads') { if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><a href='https://usagecounts.openaire.eu/' target='_blank'><img src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts'></a><span class='uk-text-uppercase uk-margin-small-left'>Downloads provided by <a href='https://usagecounts.openaire.eu/' target='_blank' class='uk-link-reset'><strong>UsageCounts</strong></a></div>";
} else if (value == 'views') { } else if (value == 'views') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><a href='https://usagecounts.openaire.eu/' target='_blank'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts'></a><span class='uk-text-uppercase uk-margin-small-left'>Views provided by <a href='https://usagecounts.openaire.eu/' target='_blank' class='uk-link-reset'><strong>UsageCounts</strong></a></div>";
} }
} }
} }

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

@ -33,6 +33,7 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {IconsService} from "../../utils/icons/icons.service"; import {IconsService} from "../../utils/icons/icons.service";
import {graph, link, link_to, open_access} from "../../utils/icons/icons"; import {graph, link, link_to, open_access} from "../../utils/icons/icons";
import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-screen-modal.module'; import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-screen-modal.module';
import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -43,7 +44,7 @@ import {FullScreenModalModule} from '../../utils/modal/full-screen-modal/full-sc
Schema2jsonldModule, SEOServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, HelperModule,
LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule, LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule,
TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule, TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule,
FullScreenModalModule FullScreenModalModule, SafeHtmlPipeModule
], ],
declarations: [ declarations: [
ProjectComponent ProjectComponent

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

@ -385,21 +385,26 @@
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div> <div *ngIf="resultLandingInfo.measure.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div> </div>
<div> <div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom" <div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <a>Citations</a>
[title]="getMetricsTooltip('citations', false)">Citations</div> <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'citations', isCompact: false}"></ng-container>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom" </div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">
[title]="getMetricsTooltip('popularity', false)">Popularity</div> <a>Popularity</a>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom" <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'popularity', isCompact: false}"></ng-container>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" </div>
[title]="getMetricsTooltip('influence', false)">Influence</div> <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom" <a>Influence</a>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'influence', isCompact: false}"></ng-container>
[title]="getMetricsTooltip('downloads', false)">Downloads</div> </div>
<div *ngIf="resultLandingInfo.measure.views" class="cell" <div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <a>Downloads</a>
[title]="getMetricsTooltip('views', false)">Views</div> <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'downloads', isCompact: false}"></ng-container>
</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell">
<a>Views</a>
<ng-container *ngTemplateOutlet="dropInfo; context: {option: 'views', isCompact: false}"></ng-container>
</div>
</div> </div>
<div class="uk-text-uppercase uk-text-bolder"> <div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="resultLandingInfo.measure.citations" [attr.uk-tooltip]="resultLandingInfo.measure.citations >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" <div *ngIf="resultLandingInfo.measure.citations" [attr.uk-tooltip]="resultLandingInfo.measure.citations >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
@ -1006,11 +1011,15 @@
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!" <a href='https://bip.imsi.athenarc.gr/' target='_blank'>
style="width: 61px; height: 43px;"> <img src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
</a>
</div> </div>
<span class="uk-text-uppercase uk-text-xsmall">Impact by</span> <span class="uk-text-uppercase uk-text-xsmall">Impact by</span>
<span class="uk-display-block uk-text-bolder">BIP!</span> <span class="uk-display-block uk-text-bolder">
<a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'>BIP!</a>
</span>
</div> </div>
<div> <div>
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
@ -1019,9 +1028,9 @@
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-top" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td class="uk-padding-remove-top">
[title]="getMetricsTooltip('citations', true)"> <a class="uk-link uk-link-text">Citations</a>
Citations <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'citations', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{formatNumber(resultLandingInfo.measure.citations)}} {{formatNumber(resultLandingInfo.measure.citations)}}
@ -1031,9 +1040,9 @@
<td> <td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td>
[title]="getMetricsTooltip('popularity', true)"> <a class="uk-link uk-link-text">Popularity</a>
Popularity <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'popularity', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-text-uppercase uk-text-bolder"> <td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.popularity}} {{resultLandingInfo.measure.popularity}}
@ -1043,9 +1052,9 @@
<td> <td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td>
[title]="getMetricsTooltip('influence', true)"> <a class="uk-link uk-link-text">Influence</a>
Influence <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'influence', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-text-uppercase uk-text-bolder"> <td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.influence}} {{resultLandingInfo.measure.influence}}
@ -1055,9 +1064,9 @@
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-bottom" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td class="uk-padding-remove-bottom">
[title]="getMetricsTooltip('impulse', true)"> <a class="uk-link uk-link-text">Impulse</a>
Impulse <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'impulse', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.impulse}} {{resultLandingInfo.measure.impulse}}
@ -1075,10 +1084,14 @@
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts"> <a href='https://usagecounts.openaire.eu/' target='_blank'>
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</a>
</div> </div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span> <span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span> <span class="uk-display-block uk-text-bolder">
<a href='https://usagecounts.openaire.eu/' target='_blank' class="uk-link-reset">UsageCounts</a>
</span>
</div> </div>
<div> <div>
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
@ -1126,9 +1139,9 @@
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-top" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td class="uk-padding-remove-top">
[title]="getMetricsTooltip('citations', true)"> <a class="uk-link uk-link-text">Citations</a>
Citations <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'citations', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{formatNumber(resultLandingInfo.measure.citations)}} {{formatNumber(resultLandingInfo.measure.citations)}}
@ -1138,9 +1151,9 @@
<td> <td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td>
[title]="getMetricsTooltip('popularity', true)"> <a class="uk-link uk-link-text">Popularity</a>
Popularity <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'popularity', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-text-uppercase uk-text-bolder"> <td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.popularity}} {{resultLandingInfo.measure.popularity}}
@ -1150,9 +1163,9 @@
<td> <td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td>
[title]="getMetricsTooltip('influence', true)"> <a class="uk-link uk-link-text">Influence</a>
Influence <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'influence', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-text-uppercase uk-text-bolder"> <td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.influence}} {{resultLandingInfo.measure.influence}}
@ -1162,9 +1175,9 @@
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon> <icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-bottom" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'" <td>
[title]="getMetricsTooltip('impulse', true)"> <a class="uk-link uk-link-text">Impulse</a>
Impulse <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'impulse', isCompact: true}"></ng-container>
</td> </td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.impulse}} {{resultLandingInfo.measure.impulse}}
@ -1180,9 +1193,11 @@
</div> </div>
<div class="uk-text-center" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'"> <div class="uk-text-center" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
<span class="uk-text-meta">Powered by</span> <span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!" <a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'>
style="width: 61px; height: 43px;"> <img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
<span class="uk-text-bolder">BIP!</span> style="width: 61px; height: 43px;">
<span class="uk-text-bolder">BIP!</span>
</a>
</div> </div>
</li> </li>
<!-- social --> <!-- social -->
@ -1221,13 +1236,22 @@
</div> </div>
<div class="uk-text-center uk-margin-large-top"> <div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span> <span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts"> <a href='https://usagecounts.openaire.eu/' target='_blank' class="uk-link-reset">
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</a>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</ng-template> </ng-template>
<ng-template #dropInfo let-option=option let-isCompact=isCompact>
<div class="default-dropdown uk-dropdown" uk-dropdown="pos: bottom-left; mode:click">
<div class="uk-padding-small uk-width-medium" [innerHTML]="getMetricsTooltip(option, isCompact) | safeHtml">
</div>
</div>
</ng-template>
<fs-modal *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds" #AlertModalDeletedByInferenceFS classTitle="uk-tile-default uk-border-bottom"> <fs-modal *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds" #AlertModalDeletedByInferenceFS classTitle="uk-tile-default uk-border-bottom">
<deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened" <deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened"
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']" [id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"

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

@ -1069,15 +1069,15 @@ export class ResultLandingComponent {
} }
} else { } else {
if (value == 'citations') { if (value == 'citations') {
return "<div>This is an alternative to the \"Influence\" indicator, which also reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Citations provided by <strong>BIP!</strong></div>"; return "<div>This is an alternative to the \"Influence\" indicator, which also reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><a href='https://bip.imsi.athenarc.gr/' target='_blank'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'></a><span class='uk-text-uppercase'>Citations provided by <a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'><strong>BIP!</strong></a></div>";
} else if (value == 'popularity') { } else if (value == 'popularity') {
return "<div>This indicator reflects the \"current\" impact/attention (the \"hype\") of an article in the research community at large, based on the underlying citation network.</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Popularity provided by <strong>BIP!</strong></div>"; return "<div>This indicator reflects the \"current\" impact/attention (the \"hype\") of an article in the research community at large, based on the underlying citation network.</div><div class='uk-flex uk-margin-top'><a href='https://bip.imsi.athenarc.gr/' target='_blank'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'></a><span class='uk-text-uppercase'>Popularity provided by <a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'><strong>BIP!</strong></a></div>";
} else if (value == 'influence') { } else if (value == 'influence') {
return "<div>This indicator reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Influence provided by <strong>BIP!</strong></div>"; return "<div>This indicator reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><a href='https://bip.imsi.athenarc.gr/' target='_blank'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'></a><span class='uk-text-uppercase'>Influence provided by <a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'><strong>BIP!</strong></a></div>";
} else if (value == 'downloads') { } else if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><a href='https://usagecounts.openaire.eu/' target='_blank'><img src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts'></a><span class='uk-text-uppercase uk-margin-small-left'>Downloads provided by <a href='https://usagecounts.openaire.eu/' target='_blank' class='uk-link-reset'><strong>UsageCounts</strong></a></div>";
} else if (value == 'views') { } else if (value == 'views') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div>"; return "<div class='uk-flex uk-flex-middle'><a href='https://usagecounts.openaire.eu/' target='_blank'><img src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts'></a><span class='uk-text-uppercase uk-margin-small-left'>Views provided by <a href='https://usagecounts.openaire.eu/' target='_blank' class='uk-link-reset'><strong>UsageCounts</strong></a></div>";
} }
} }
} }

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

@ -39,6 +39,7 @@ import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.modul
import {RecaptchaModule} from 'ng-recaptcha'; import {RecaptchaModule} from 'ng-recaptcha';
import {SdgFosSuggestModule} from '../landing-utils/sdg-fos-suggest/sdg-fos-suggest.module'; import {SdgFosSuggestModule} from '../landing-utils/sdg-fos-suggest/sdg-fos-suggest.module';
import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-screen-modal.module"; import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-screen-modal.module";
import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -48,7 +49,7 @@ import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-sc
DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule, DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule,
AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule, AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule,
OrcidModule, MatFormFieldModule, MatSelectModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule, OrcidModule, MatFormFieldModule, MatSelectModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule,
SdgFosSuggestModule, FullScreenModalModule SdgFosSuggestModule, FullScreenModalModule, SafeHtmlPipeModule
], ],
declarations: [ declarations: [
ResultLandingComponent ResultLandingComponent