From b500fcb95757fdbdfc67581b0e3380315148e59d Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Thu, 4 May 2023 11:58:11 +0300
Subject: [PATCH] resultLanding: use common structure for metrics (measure)

---
 .../result/resultLanding.component.html       | 288 +++++++-----------
 .../result/resultLanding.component.ts         |   8 +-
 2 files changed, 119 insertions(+), 177 deletions(-)

diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index b65506c3..0f85204b 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -325,7 +325,7 @@
                       <ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
                     </div>
                   </ng-container>
-                  <ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
+                  <ng-container *ngIf="resultLandingInfo && ((resultLandingInfo.measure && (resultLandingInfo.measure.bip.length || resultLandingInfo.measure.counts.length)) || hasAltMetrics)">
                     <ng-container *ngTemplateOutlet="metricsContent"></ng-container>
                   </ng-container>
                 </div>
@@ -374,49 +374,69 @@
 
       <ng-template #right_column>
         <!-- new metrics box -->
-        <div *ngIf="resultLandingInfo && resultLandingInfo.measure && !viewAll"
+        <div *ngIf="resultLandingInfo && resultLandingInfo.measure && (resultLandingInfo.measure.bip.length || resultLandingInfo.measure.counts.length) && !viewAll"
           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-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>
-                  <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="landmark" [ratio]="0.8" [flex]="true"></icon></div>
-                  <div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [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>
+                  <ng-container *ngIf="resultLandingInfo.measure.bip.length">
+                    <ng-container *ngFor="let measure of resultLandingInfo.measure.bip">
+                      <div *ngIf="measure.value" class="cell uk-flex uk-flex-middle uk-margin-xsmall-bottom">
+                        <icon [name]="measure.icon" [ratio]="0.8" [flex]="true"></icon>
+                      </div>
+                    </ng-container>
+                  </ng-container>
+                  <ng-container *ngIf="resultLandingInfo.measure.counts.length">
+                    <ng-container *ngFor="let measure of resultLandingInfo.measure.counts; let i = index">
+                      <div *ngIf="measure.value" class="cell uk-flex uk-flex-middle" [class.uk-margin-xsmall-bottom]="i != resultLandingInfo.measure.counts.length - 1">
+                        <icon [name]="measure.icon" [ratio]="0.8" [flex]="true"></icon>
+                      </div>
+                    </ng-container>
+                  </ng-container>
                 </div>
                 <div>
-                  <div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">
-                    <a>Citations</a>
-                    <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'citations', isCompact: false}"></ng-container>
-                  </div>
-                  <div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">
-                    <a>Popularity</a>
-                    <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'popularity', isCompact: false}"></ng-container>
-                  </div>
-                  <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">
-                    <a>Influence</a>
-                    <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'influence', isCompact: false}"></ng-container>
-                  </div>
-                  <div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">
-                    <a>Downloads</a>
-                    <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>
+                  <ng-container *ngIf="resultLandingInfo.measure.bip.length">
+                    <ng-container *ngFor="let measure of resultLandingInfo.measure.bip">
+                      <div *ngIf="measure.value" class="cell uk-margin-xsmall-bottom">
+                        <a class="uk-text-capitalize">{{measure.name}}</a>
+                        <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
+                      </div>
+                    </ng-container>
+                  </ng-container>
+                  <ng-container *ngIf="resultLandingInfo.measure.counts.length">
+                    <ng-container *ngFor="let measure of resultLandingInfo.measure.counts; let i = index">
+                      <div *ngIf="measure.value" class="cell" [class.uk-margin-xsmall-bottom]="i != resultLandingInfo.measure.counts.length - 1">
+                        <a class="uk-text-capitalize">{{measure.name}}</a>
+                        <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
+                      </div>
+                    </ng-container>
+                  </ng-container>
                 </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'" 
-                    title="{{resultLandingInfo.measure.citations | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(resultLandingInfo.measure.citations)}}</div>
-                  <div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div>
-                  <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div>
-                  <div *ngIf="resultLandingInfo.measure.downloads" [attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                    title="{{resultLandingInfo.measure.downloads | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
-                  <div *ngIf="resultLandingInfo.measure.views" [attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                    title="{{resultLandingInfo.measure.views | number}}" class="cell">{{formatNumber(resultLandingInfo.measure.views)}}</div>
+                    <ng-container *ngIf="resultLandingInfo.measure.bip.length">
+                      <ng-container *ngFor="let measure of resultLandingInfo.measure.bip">
+                        <ng-container *ngIf="isNumber(measure)">
+                          <div *ngIf="measure.value" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                            title="{{measure.value | number}}" class="cell uk-margin-xsmall-bottom">
+                            {{formatNumber(measure.value)}}
+                          </div>
+                        </ng-container>
+                        <ng-container *ngIf="!isNumber(measure)">
+                          <div *ngIf="measure.value" class="cell uk-margin-xsmall-bottom">
+                            {{measure.value}}
+                          </div>
+                        </ng-container>
+                      </ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="resultLandingInfo.measure.counts.length">
+                      <ng-container *ngFor="let measure of resultLandingInfo.measure.counts; let i = index">
+                        <div *ngIf="measure.value" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                          title="{{measure.value | number}}" class="cell" [class.uk-margin-xsmall-bottom]="i != resultLandingInfo.measure.counts.length - 1">
+                          {{formatNumber(measure.value)}}
+                        </div>
+                      </ng-container>
+                    </ng-container>
                 </div>
               </div>
             </div>
@@ -1009,13 +1029,13 @@
       <li class="uk-padding-remove">
         <a href="#">Overview</a>
       </li>
-      <li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
+      <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
         <a href="#">Impact</a>
       </li>
       <li *ngIf="hasAltMetrics">
         <a href="#">Social</a>
       </li>
-      <li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
+      <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
         <a href="#" (click)="clickedUsageMetrics()">Usage</a>
       </li>
     </ul>
@@ -1023,7 +1043,7 @@
       <!-- overview -->
       <li>
         <div class="uk-flex uk-flex-wrap landing-metrics-overview">
-          <div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
+          <div *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
             <div class="uk-grid-divider" uk-grid>
               <div>
                 <div class="uk-text-center uk-margin-small-bottom">
@@ -1040,54 +1060,20 @@
               <div>
                 <table class="uk-table uk-table-small">
                   <tbody>
-                  <tr>
-                    <td class="uk-padding-remove-top">
-                      <icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
-                    </td>
-                    <td class="uk-padding-remove-top">
-                      <a class="uk-link uk-link-text">Citations</a>
-                      <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'citations', isCompact: true}"></ng-container>
-                    </td>
-                    <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
-                      {{formatNumber(resultLandingInfo.measure.citations)}}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
-                    </td>
-                    <td>
-                      <a class="uk-link uk-link-text">Popularity</a>
-                      <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'popularity', isCompact: true}"></ng-container>
-                    </td>
-                    <td class="uk-text-uppercase uk-text-bolder">
-                      {{resultLandingInfo.measure.popularity}}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
-                    </td>
-                    <td>
-                      <a class="uk-link uk-link-text">Influence</a>
-                      <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'influence', isCompact: true}"></ng-container>
-                    </td>
-                    <td class="uk-text-uppercase uk-text-bolder">
-                      {{resultLandingInfo.measure.influence}}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="uk-padding-remove-bottom">
-                      <icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
-                    </td>
-                    <td class="uk-padding-remove-bottom">
-                      <a class="uk-link uk-link-text">Impulse</a>
-                      <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'impulse', isCompact: true}"></ng-container>
-                    </td>
-                    <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
-                      {{resultLandingInfo.measure.impulse}}
-                    </td>
-                  </tr>
+                    <ng-container *ngFor="let measure of resultLandingInfo.measure.bip; let i = index">
+                      <tr>
+                        <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
+                          <icon [name]="measure.icon" [flex]="true" [customClass]="'bip-icon'"></icon>
+                        </td>
+                        <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
+                          <a class="uk-link uk-link-text uk-text-capitalize">{{measure.name}}</a>
+                          <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: true}"></ng-container>
+                        </td>
+                        <td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
+                          {{isNumber(measure.value) ? formatNumber(measure.value) : measure.value}}
+                        </td>
+                      </tr>
+                    </ng-container>
                   </tbody>
                 </table>
               </div>
@@ -1096,7 +1082,7 @@
           <div *ngIf="hasAltMetrics">
             <altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
           </div>
-          <div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
+          <div *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
             <div class="uk-grid-divider" uk-grid>
               <div>
                 <div class="uk-text-center uk-margin-small-bottom">
@@ -1112,32 +1098,21 @@
               <div>
                 <table class="uk-table uk-table-small">
                   <tbody>
-                  <tr *ngIf="resultLandingInfo.measure.downloads">
-                    <td class="uk-padding-remove-top">
-                      <icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
-                    </td>
-                    <td class="uk-padding-remove-top">
-                      Downloads
-                    </td>
-                    <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
-                        [attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                        title="{{resultLandingInfo.measure.downloads | number}}">
-                      {{formatNumber(resultLandingInfo.measure.downloads)}}
-                    </td>
-                  </tr>
-                  <tr *ngIf="resultLandingInfo.measure.views">
-                    <td class="uk-padding-remove-bottom">
-                      <icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
-                    </td>
-                    <td class="uk-padding-remove-bottom">
-                      Views
-                    </td>
-                    <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
-                        [attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                        title="{{resultLandingInfo.measure.views | number}}">
-                      {{formatNumber(resultLandingInfo.measure.views)}}
-                    </td>
-                  </tr>
+                    <ng-container *ngFor="let measure of resultLandingInfo.measure.counts; let i = index">
+                      <tr>
+                        <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.counts.length - 1">
+                          <icon [name]="measure.icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
+                        </td>
+                        <td class="uk-text-capitalize" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.counts.length - 1">
+                          {{measure.name}}
+                        </td>
+                        <td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.counts.length - 1"
+                          [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                          title="{{measure.value | number}}">
+                          {{formatNumber(measure.value)}}
+                        </td>
+                      </tr>
+                    </ng-container>
                   </tbody>
                 </table>
               </div>
@@ -1146,59 +1121,25 @@
         </div>
       </li>
       <!-- impact -->
-      <li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
+      <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
         <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
           <div class="uk-card uk-card-default uk-padding-small">
             <table class="uk-table uk-table-small uk-margin-remove">
               <tbody>
-              <tr>
-                <td class="uk-padding-remove-top">
-                  <icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
-                </td>
-                <td class="uk-padding-remove-top">
-                  <a class="uk-link uk-link-text">Citations</a>
-                  <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'citations', isCompact: true}"></ng-container>
-                </td>
-                <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
-                  {{formatNumber(resultLandingInfo.measure.citations)}}
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
-                </td>
-                <td>
-                  <a class="uk-link uk-link-text">Popularity</a>
-                  <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'popularity', isCompact: true}"></ng-container>
-                </td>
-                <td class="uk-text-uppercase uk-text-bolder">
-                  {{resultLandingInfo.measure.popularity}}
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
-                </td>
-                <td>
-                  <a class="uk-link uk-link-text">Influence</a>
-                  <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'influence', isCompact: true}"></ng-container>
-                </td>
-                <td class="uk-text-uppercase uk-text-bolder">
-                  {{resultLandingInfo.measure.influence}}
-                </td>
-              </tr>
-              <tr>
-                <td class="uk-padding-remove-bottom">
-                  <icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
-                </td>
-                <td>
-                  <a class="uk-link uk-link-text">Impulse</a>
-                  <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'impulse', isCompact: true}"></ng-container>
-                </td>
-                <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
-                  {{resultLandingInfo.measure.impulse}}
-                </td>
-              </tr>
+                <ng-container *ngFor="let measure of resultLandingInfo.measure.bip; let i = index">
+                  <tr>
+                    <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
+                      <icon [name]="measure.icon" [flex]="true" [customClass]="'bip-icon'"></icon>
+                    </td>
+                    <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
+                      <a class="uk-link uk-link-text uk-text-capitalize">{{measure.name}}</a>
+                      <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: true}"></ng-container>
+                    </td>
+                    <td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
+                      {{isNumber(measure.value) ? formatNumber(measure.value) : measure.value}}
+                    </td>
+                  </tr>
+                </ng-container>
               </tbody>
             </table>
           </div>
@@ -1221,22 +1162,17 @@
         <altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
       </li>
       <!-- usage -->
-      <li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
+      <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
         <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
           <div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
-            <div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
-              <div class="uk-text-background uk-text-bold number metrics-number"
-                   [attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                   title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
-              <div class="uk-text-bold">Downloads</div>
-            </div>
-            <div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom"
-                 [class.uk-margin-medium-left]="isMobile && resultLandingInfo.measure.downloads">
-              <div class="uk-text-background uk-text-bold number metrics-number"
-                   [attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                   title="{{resultLandingInfo.measure.views | number}}">{{formatNumber(resultLandingInfo.measure.views)}}</div>
-              <div class="uk-text-bold">Views</div>
-            </div>
+            <ng-container *ngFor="let measure of resultLandingInfo.measure.counts; let i = index">
+              <div *ngIf="measure.value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
+                <div class="uk-text-background uk-text-bold number metrics-number"
+                     [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                     title="{{measure.value | number}}">{{formatNumber(measure.value)}}</div>
+                <div class="uk-text-bold uk-text-capitalize">{{measure.name}}</div>
+              </div>
+            </ng-container>
           </div>
           <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
             <div *ngIf="metricsClicked && downloadsFrameUrl && resultLandingInfo.measure.downloads" class="uk-margin-large-right">
diff --git a/landingPages/result/resultLanding.component.ts b/landingPages/result/resultLanding.component.ts
index 5b1c9b53..815cd238 100644
--- a/landingPages/result/resultLanding.component.ts
+++ b/landingPages/result/resultLanding.component.ts
@@ -1084,11 +1084,17 @@ export class ResultLandingComponent {
 				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') {
 				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 == 'impulse') {
+        return "<div>This indicator reflects the initial momentum of an article directly after its publication, 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'>Impulse provided by <a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'><strong>BIP!</strong></a></div>";
+      } else if (value == 'downloads') {
 				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') {
 				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>";
 			}
 		}
 	}
+
+  public isNumber(value): boolean {
+    return typeof value === 'number';
+  }
 }