From f17b25d66f132163feb63001c7dd6dca100e6625 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Mon, 20 Feb 2023 19:29:21 +0200
Subject: [PATCH] create tooltips for all landing page metrics card (BIP and
 UsageCounts)

---
 .../dataProvider/dataProvider.component.html  | 10 ++++++---
 .../dataProvider/dataProvider.component.ts    |  8 +++++++
 landingPages/project/project.component.html   | 10 ++++++---
 landingPages/project/project.component.ts     |  8 +++++++
 .../result/resultLanding.component.html       | 22 ++++++++++++++-----
 .../result/resultLanding.component.ts         | 20 +++++++++++++++++
 6 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html
index 4deaaf6d..7e228d78 100644
--- a/landingPages/dataProvider/dataProvider.component.html
+++ b/landingPages/dataProvider/dataProvider.component.html
@@ -185,14 +185,18 @@
 										<div *ngIf="dataProviderInfo && hasMetrics">
 											<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
 												<div class="uk-width-expand uk-flex uk-flex-middle">
-													<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
+													<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
 														<div>
 															<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [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 *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
-															<div *ngIf="totalViews" class="cell">Views</div>
+															<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom"
+																[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+																[title]="getDownloadsTooltip">Downloads</div>
+															<div *ngIf="totalViews" class="cell"
+																[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+																[title]="getViewsTooltip">Views</div>
 														</div>
 														<div class="uk-text-uppercase uk-text-bolder">
 															<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
diff --git a/landingPages/dataProvider/dataProvider.component.ts b/landingPages/dataProvider/dataProvider.component.ts
index b11ba7c4..99e3a745 100644
--- a/landingPages/dataProvider/dataProvider.component.ts
+++ b/landingPages/dataProvider/dataProvider.component.ts
@@ -855,4 +855,12 @@ export class DataProviderComponent {
     let formatted = NumberUtils.roundNumber(+num);
     return formatted.number + formatted.size;
   }
+
+	get getDownloadsTooltip() {
+		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";
+	}
+
+	get getViewsTooltip() {
+		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";
+	}
 }
diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html
index d16da1e2..19f96a96 100644
--- a/landingPages/project/project.component.html
+++ b/landingPages/project/project.component.html
@@ -336,14 +336,18 @@
 										<div *ngIf="projectInfo && hasMetrics">
 											<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
 												<div class="uk-width-expand uk-flex uk-flex-middle">
-													<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
+													<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
 														<div>
 															<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [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 *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
-															<div *ngIf="totalViews" class="cell">Views</div>
+															<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom"
+																[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+																[title]="getDownloadsTooltip">Downloads</div>
+															<div *ngIf="totalViews" class="cell"
+																[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+																[title]="getViewsTooltip">Views</div>
 														</div>
 														<div class="uk-text-uppercase uk-text-bolder">
 															<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
diff --git a/landingPages/project/project.component.ts b/landingPages/project/project.component.ts
index d3fc955b..c5ea8f37 100644
--- a/landingPages/project/project.component.ts
+++ b/landingPages/project/project.component.ts
@@ -989,4 +989,12 @@ export class ProjectComponent {
     let formatted = NumberUtils.roundNumber(+num);
     return formatted.number + formatted.size;
   }
+
+	get getDownloadsTooltip() {
+		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";
+	}
+
+	get getViewsTooltip() {
+		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";
+	}
 }
diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index 7c8a76f2..a2492f9e 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -609,7 +609,7 @@
 					class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
 					<div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
 						<div class="uk-width-expand uk-flex uk-flex-middle">
-							<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
+							<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
 								<div>
 									<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="cite" [ratio]="0.8" [flex]="true"></icon></div>
 									<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="fire" [ratio]="0.8" [flex]="true"></icon></div>
@@ -618,11 +618,21 @@
 									<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 *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">Citations</div>
-									<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">Popularity</div>
-									<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">Influence</div>
-									<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
-									<div *ngIf="resultLandingInfo.measure.views" class="cell">Views</div>
+									<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'"
+										[title]="getCitationsTooltip">Citations</div>
+									<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom"
+										[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+										[title]="getPopularityTooltip">Popularity</div>
+									<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom"
+										[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+										[title]="getInfluenceTooltip">Influence</div>
+									<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'"
+										[title]="getDownloadsTooltip">Downloads</div>
+									<div *ngIf="resultLandingInfo.measure.views" class="cell"
+										[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+										[title]="getViewsTooltip">Views</div>
 								</div>
 								<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'" 
diff --git a/landingPages/result/resultLanding.component.ts b/landingPages/result/resultLanding.component.ts
index a9a4684b..d2f24466 100644
--- a/landingPages/result/resultLanding.component.ts
+++ b/landingPages/result/resultLanding.component.ts
@@ -1050,4 +1050,24 @@ export class ResultLandingComponent {
   public closeFsModal(fsModal: FullScreenModalComponent) {
     fsModal.cancel();
   }
+
+	get getCitationsTooltip() {
+		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";
+	}
+
+	get getPopularityTooltip() {
+		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";
+	}
+
+	get getInfluenceTooltip() {
+		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";
+	}
+
+	get getDownloadsTooltip() {
+		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";
+	}
+
+	get getViewsTooltip() {
+		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";
+	}
 }