From beb43ed1b7c5b0e1dd6e1db4f076f75bb3e0265d Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Tue, 2 May 2023 12:00:40 +0300
Subject: [PATCH] project & data landing/search page: get usage counts from
 index (measure field)

---
 .../dataProvider/dataProvider.component.html  | 74 +++++++++----------
 .../dataProvider/dataProvider.component.ts    |  3 +-
 .../dataProvider/dataProvider.service.ts      |  3 +
 landingPages/project/project.component.html   | 74 +++++++++----------
 landingPages/project/project.component.ts     |  3 +-
 landingPages/project/project.service.ts       |  4 +
 services/searchDataproviders.service.ts       |  2 +
 services/searchProjects.service.ts            |  2 +
 utils/entities/dataProviderInfo.ts            |  2 +
 utils/entities/projectInfo.ts                 | 47 ++++++------
 utils/rangeFilter/rangeFilter.component.html  |  4 +-
 .../result-preview.component.html             |  4 +-
 .../result-preview.component.ts               |  6 ++
 13 files changed, 125 insertions(+), 103 deletions(-)

diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html
index 4d75685e..de65c000 100644
--- a/landingPages/dataProvider/dataProvider.component.html
+++ b/landingPages/dataProvider/dataProvider.component.html
@@ -189,17 +189,17 @@
                         <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="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 *ngIf="dataProviderInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon [name]="dataProviderInfo.measure.counts[1].icon" [ratio]="0.8" [flex]="true"></icon></div>
+                              <div *ngIf="dataProviderInfo.measure.counts[0].value" class="cell uk-flex uk-flex-middle"><icon [name]="dataProviderInfo.measure.counts[0].icon" [ratio]="0.8" [flex]="true"></icon></div>
                             </div>
                             <div>
-                              <div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">
-                                <a>Downloads</a>
-                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'downloads'}"></ng-container>
+                              <div *ngIf="dataProviderInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom">
+                                <a class="uk-text-capitalize">{{dataProviderInfo.measure.counts[1].name}}</a>
+                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: dataProviderInfo.measure.counts[1].name}"></ng-container>
                               </div>
-                              <div *ngIf="totalViews" class="cell">
-                                <a>Views</a>
-                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'views'}"></ng-container>
+                              <div *ngIf="dataProviderInfo.measure.counts[0].value" class="cell">
+                                <a class="uk-text-capitalize">{{dataProviderInfo.measure.counts[0].name}}</a>
+                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: dataProviderInfo.measure.counts[0].name}"></ng-container>
                               </div>
                             </div>
                             <ng-template #dropInfo let-option=option>
@@ -209,10 +209,10 @@
                               </div>
                             </ng-template>
                             <div class="uk-text-uppercase uk-text-bolder">
-                              <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>
-                              <div *ngIf="totalViews" [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                                title="{{totalViews | number}}" class="cell">{{formatNumber(totalViews)}}</div>
+                              <div *ngIf="dataProviderInfo.measure.counts[1].value" [attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                                title="{{dataProviderInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div>
+                              <div *ngIf="dataProviderInfo.measure.counts[0].value" [attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                                title="{{dataProviderInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(dataProviderInfo.measure.counts[0].value)}}</div>
                             </div>
                           </div>
                         </div>
@@ -780,14 +780,14 @@
       <li class="uk-padding-remove">
         <a href="#">Overview</a>
       </li>
-      <li *ngIf="totalDownloads ||totalViews">
+      <li *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
         <a href="#" (click)="clickedUsageMetrics()">Usage</a>
       </li>
     </ul>
     <ul class="uk-switcher uk-margin-large-top">
       <!-- overview -->
       <li>
-        <div *ngIf="totalDownloads || totalViews">
+        <div *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
           <div class="uk-grid-divider" uk-grid>
             <div>
               <div class="uk-text-center uk-margin-small-bottom">
@@ -803,30 +803,30 @@
             <div>
               <table class="uk-table uk-table-small">
                 <tbody>
-                  <tr *ngIf="totalDownloads">
+                  <tr *ngIf="dataProviderInfo.measure.counts[1].value">
                     <td class="uk-padding-remove-top">
-                      <icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
+                      <icon [name]="dataProviderInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
                     </td>
-                    <td class="uk-padding-remove-top">
-                      Downloads
+                    <td class="uk-padding-remove-top uk-text-capitalize">
+                      {{dataProviderInfo.measure.counts[1].name}}
                     </td>
                     <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder" 
-                      [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                      title="{{totalDownloads | number}}">
-                      {{formatNumber(totalDownloads)}}
+                      [attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                      title="{{dataProviderInfo.measure.counts[1].value | number}}">
+                      {{formatNumber(dataProviderInfo.measure.counts[1].value)}}
                     </td>
                   </tr>
-                  <tr *ngIf="totalViews">
+                  <tr *ngIf="dataProviderInfo.measure.counts[0].value">
                     <td class="uk-padding-remove-bottom">
-                      <icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
+                      <icon [name]="dataProviderInfo.measure.counts[0].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
                     </td>
-                    <td class="uk-padding-remove-bottom">
-                      Views
+                    <td class="uk-padding-remove-bottom uk-text-capitalize">
+                      {{dataProviderInfo.measure.counts[0].name}}
                     </td>
                     <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
-                      [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                      title="{{totalViews | number}}">
-                      {{formatNumber(totalViews)}}
+                      [attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                      title="{{dataProviderInfo.measure.counts[0].value | number}}">
+                      {{formatNumber(dataProviderInfo.measure.counts[0].value)}}
                     </td>
                   </tr>
                 </tbody>
@@ -836,20 +836,20 @@
         </div>
       </li>
       <!-- usage -->
-      <li *ngIf="totalDownloads || totalViews">
+      <li *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
         <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="totalDownloads" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
+            <div *ngIf="dataProviderInfo.measure.counts[1].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]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div>
-              <div class="uk-text-bold">Downloads</div>
+                [attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                title="{{dataProviderInfo.measure.counts[1].value | number}}">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div>
+              <div class="uk-text-bold uk-text-capitalize">{{dataProviderInfo.measure.counts[1].name}}</div>
             </div>
-            <div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
+            <div *ngIf="dataProviderInfo.measure.counts[0].value" class="uk-text-center uk-margin-medium-bottom">
               <div class="uk-text-background uk-text-bold number metrics-number"
-                [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                title="{{totalViews | number}}">{{formatNumber(totalViews)}}</div>
-              <div class="uk-text-bold">Views</div>
+                [attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                title="{{dataProviderInfo.measure.counts[0].value | number}}">{{formatNumber(dataProviderInfo.measure.counts[0].value)}}</div>
+              <div class="uk-text-bold uk-text-capitalize">{{dataProviderInfo.measure.counts[0].name}}</div>
             </div>
           </div>
           <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
diff --git a/landingPages/dataProvider/dataProvider.component.ts b/landingPages/dataProvider/dataProvider.component.ts
index 1e9846ea..d7812330 100644
--- a/landingPages/dataProvider/dataProvider.component.ts
+++ b/landingPages/dataProvider/dataProvider.component.ts
@@ -712,7 +712,8 @@ export class DataProviderComponent {
 
   public get hasMetrics(): boolean {
     // return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
-    return (this.totalViews != null &&  this.totalViews > 0) || (this.totalDownloads != null && this.totalDownloads > 0);
+    // return (this.totalViews != null &&  this.totalViews > 0) || (this.totalDownloads != null && this.totalDownloads > 0);
+    return this.dataProviderInfo.measure?.counts?.length && (this.dataProviderInfo.measure?.counts[0].value > 0 || this.dataProviderInfo.measure?.counts[1].value);
   }
 
   // public openStatistics() {
diff --git a/landingPages/dataProvider/dataProvider.service.ts b/landingPages/dataProvider/dataProvider.service.ts
index d13e4cdd..eaaa6409 100644
--- a/landingPages/dataProvider/dataProvider.service.ts
+++ b/landingPages/dataProvider/dataProvider.service.ts
@@ -364,6 +364,9 @@ export class DataProviderService {
             this.dataProviderInfo.journal = null;
             // this.dataProviderInfo.journal = {"journal": "", "issn": "", "lissn": "", "eissn": ""};
         }
+        if (data[0]?.measure) {
+          this.dataProviderInfo.measure = this.parsingFunctions.parseMeasures(data[0].measure);
+        }
 
         return this.dataProviderInfo;
     }
diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html
index f1661901..eeef97ba 100644
--- a/landingPages/project/project.component.html
+++ b/landingPages/project/project.component.html
@@ -322,17 +322,17 @@
                         <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="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 *ngIf="projectInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon [name]="projectInfo.measure.counts[1].icon" [ratio]="0.8" [flex]="true"></icon></div>
+                              <div *ngIf="projectInfo.measure.counts[0].value" class="cell uk-flex uk-flex-middle"><icon [name]="projectInfo.measure.counts[0].icon" [ratio]="0.8" [flex]="true"></icon></div>
                             </div>
                             <div>
-                              <div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">
-                                <a>Downloads</a>
-                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'downloads'}"></ng-container>
+                              <div *ngIf="projectInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom">
+                                <a class="uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</a>
+                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: projectInfo.measure.counts[1].name}"></ng-container>
                               </div>
-                              <div *ngIf="totalViews" class="cell">
-                                <a>Views</a>
-                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: 'views'}"></ng-container>
+                              <div *ngIf="projectInfo.measure.counts[0].value" class="cell">
+                                <a class="uk-text-capitalize">{{projectInfo.measure.counts[0].name}}</a>
+                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: projectInfo.measure.counts[0].name}"></ng-container>
                               </div>
                             </div>
                             <ng-template #dropInfo let-option=option>
@@ -342,10 +342,10 @@
                               </div>
                             </ng-template>
                             <div class="uk-text-uppercase uk-text-bolder">
-                              <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>
-                              <div *ngIf="totalViews" [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                                title="{{totalViews | number}}" class="cell">{{formatNumber(totalViews)}}</div>
+                              <div *ngIf="projectInfo.measure.counts[1].value" [attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                                title="{{projectInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(projectInfo.measure.counts[1].value)}}</div>
+                              <div *ngIf="projectInfo.measure.counts[0].value" [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                                title="{{projectInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(projectInfo.measure.counts[0].value)}}</div>
                             </div>
                           </div>
                         </div>
@@ -843,14 +843,14 @@
       <li class="uk-padding-remove">
         <a href="#">Overview</a>
       </li>
-      <li *ngIf="totalDownloads ||totalViews">
+      <li *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
         <a href="#" (click)="clickedUsageMetrics()">Usage</a>
       </li>
     </ul>
     <ul class="uk-switcher uk-margin-large-top">
       <!-- overview -->
       <li>
-        <div *ngIf="totalDownloads || totalViews">
+        <div *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
           <div class="uk-grid-divider" uk-grid>
             <div>
               <div class="uk-text-center uk-margin-small-bottom">
@@ -866,30 +866,30 @@
             <div>
               <table class="uk-table uk-table-small">
                 <tbody>
-                  <tr *ngIf="totalDownloads">
+                  <tr *ngIf="projectInfo.measure.counts[1].value">
                     <td class="uk-padding-remove-top">
-                      <icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
+                      <icon [name]="projectInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
                     </td>
-                    <td class="uk-padding-remove-top">
-                      Downloads
+                    <td class="uk-padding-remove-top uk-text-capitalize">
+                      {{projectInfo.measure.counts[1].name}}
                     </td>
                     <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder" 
-                      [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                      title="{{totalDownloads | number}}">
-                      {{formatNumber(totalDownloads)}}
+                      [attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                      title="{{projectInfo.measure.counts[1].value | number}}">
+                      {{formatNumber(projectInfo.measure.counts[1].value)}}
                     </td>
                   </tr>
-                  <tr *ngIf="totalViews">
+                  <tr *ngIf="projectInfo.measure.counts[0].value">
                     <td class="uk-padding-remove-bottom">
-                      <icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
+                      <icon [name]="projectInfo.measure.counts[0].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
                     </td>
-                    <td class="uk-padding-remove-bottom">
-                      Views
+                    <td class="uk-padding-remove-bottom uk-text-capitalize">
+                      {{projectInfo.measure.counts[0].name}}
                     </td>
                     <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
-                      [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                      title="{{totalViews | number}}">
-                      {{formatNumber(totalViews)}}
+                      [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                      title="{{projectInfo.measure.counts[0].value | number}}">
+                      {{formatNumber(projectInfo.measure.counts[0].value)}}
                     </td>
                   </tr>
                 </tbody>
@@ -899,18 +899,18 @@
         </div>
       </li>
       <!-- usage -->
-      <li *ngIf="totalDownloads || totalViews">
+      <li *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
         <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="totalDownloads" 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]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                title="{{totalDownloads | number}}">{{formatNumber(totalDownloads)}}</div>
-              <div class="uk-text-bold">Downloads</div>
+            <div *ngIf="projectInfo.measure.counts[1].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]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                title="{{projectInfo.measure.counts[1].value | number}}">{{formatNumber(projectInfo.measure.counts[1].value)}}</div>
+              <div class="uk-text-bold uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</div>
             </div>
-            <div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
-              <div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                title="{{totalViews | number}}">{{formatNumber(totalViews)}}</div>
-              <div class="uk-text-bold">Views</div>
+            <div *ngIf="projectInfo.measure.counts[0].value" class="uk-text-center uk-margin-medium-bottom">
+              <div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                title="{{projectInfo.measure.counts[0].value | number}}">{{formatNumber(projectInfo.measure.counts[0].value)}}</div>
+              <div class="uk-text-bold uk-text-capitalize">{{projectInfo.measure.counts[0].name}}</div>
             </div>
           </div>
           <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
diff --git a/landingPages/project/project.component.ts b/landingPages/project/project.component.ts
index 9c3eafc0..e3faee57 100644
--- a/landingPages/project/project.component.ts
+++ b/landingPages/project/project.component.ts
@@ -596,7 +596,8 @@ export class ProjectComponent {
 	}
 
   public get hasMetrics(): boolean {
-    return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
+    // return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
+    return this.projectInfo.measure?.counts?.length && (this.projectInfo.measure?.counts[0].value > 0 || this.projectInfo.measure?.counts[1].value);
   }
 
   public viewAllOrganizationsClick() {
diff --git a/landingPages/project/project.service.ts b/landingPages/project/project.service.ts
index 17084a51..f1224980 100644
--- a/landingPages/project/project.service.ts
+++ b/landingPages/project/project.service.ts
@@ -236,6 +236,10 @@ export class ProjectService {
             this.projectInfo.urlInfo = "Detailed project information (CORDIS)";
         }
 
+        if (data[0]?.measure) {
+          this.projectInfo.measure = this.parsingFunctions.parseMeasures(data[0].measure);
+        }
+
         return this.projectInfo;
 
     }
diff --git a/services/searchDataproviders.service.ts b/services/searchDataproviders.service.ts
index 3160d7ee..91c4fd14 100644
--- a/services/searchDataproviders.service.ts
+++ b/services/searchDataproviders.service.ts
@@ -169,6 +169,8 @@ export class SearchDataprovidersService {
             if(resData['pid']) {
               result.identifiers = this.parsingFunctions.parseIdentifiers(resData['pid']);
             }
+            // Measure
+            result.measure = this.parsingFunctions.parseMeasures(resData['measure']);
 
           results.push(result);
         }
diff --git a/services/searchProjects.service.ts b/services/searchProjects.service.ts
index e898dcda..2109666f 100644
--- a/services/searchProjects.service.ts
+++ b/services/searchProjects.service.ts
@@ -254,6 +254,8 @@ export class SearchProjectsService {
             if(resData.hasOwnProperty("enddate")) {
               result.endYear = resData.enddate.split('-')[0];
             }
+            // Measure
+            result.measure = this.parsingFunctions.parseMeasures(resData['measure']);
 
             results.push(result);
         }
diff --git a/utils/entities/dataProviderInfo.ts b/utils/entities/dataProviderInfo.ts
index 47cabf6c..449bcc64 100644
--- a/utils/entities/dataProviderInfo.ts
+++ b/utils/entities/dataProviderInfo.ts
@@ -1,4 +1,5 @@
 import {properties} from "../../../../environments/environment";
+import {Measure} from "./resultLandingInfo";
 
 export class DataproviderProvenance {
   provenance: Map<string, {"urlPrefix": string, "name": string}>;
@@ -36,6 +37,7 @@ export class DataProviderInfo {
     identifiers: Map<string, string[]>;     //key is the classname
 
   fundedContent: string; // search query
+  measure: Measure;
 
   //collected from datasource api
   // aggregationStatus: {"fundedContent": string, "indexRecords": string, "fulltexts": string, "lastUpdateDate": string};
diff --git a/utils/entities/projectInfo.ts b/utils/entities/projectInfo.ts
index 84d0f47b..e66736fe 100644
--- a/utils/entities/projectInfo.ts
+++ b/utils/entities/projectInfo.ts
@@ -1,25 +1,26 @@
+import {Measure} from "./resultLandingInfo";
+
 export class ProjectInfo {
-    id:string;
-    acronym: string;
-    title: string;
-
-    funding: {funderName: string, funderShortName: string, code: string, callIdentifier: string,
-      fundingStream: string, budget: string, contribution: string, currency: string};
-    startDate: number;
-    endDate: number;
-    currentDate: number;
-    status: string;
-    openAccessMandatePublications: string;
-    openAccessMandateDatasets: string;
-    // specialClause39: string;
-    organizations: { "acronym": string, "name": string, "id": string }[];//Map<string, string>;
-    url: string;
-    urlInfo: string;
-    description: string;
-    //publications: any;
-    researchData: any;
-
-    totalPublications: number;
-    totalDatasets: number;
-    publicationsStatus: any;
+  id:string;
+  acronym: string;
+  title: string;
+  funding: {funderName: string, funderShortName: string, code: string, callIdentifier: string,
+    fundingStream: string, budget: string, contribution: string, currency: string};
+  startDate: number;
+  endDate: number;
+  currentDate: number;
+  status: string;
+  openAccessMandatePublications: string;
+  openAccessMandateDatasets: string;
+  // specialClause39: string;
+  organizations: { "acronym": string, "name": string, "id": string }[];//Map<string, string>;
+  url: string;
+  urlInfo: string;
+  description: string;
+  //publications: any;
+  researchData: any;
+  totalPublications: number;
+  totalDatasets: number;
+  publicationsStatus: any;
+  measure: Measure;
 }
diff --git a/utils/rangeFilter/rangeFilter.component.html b/utils/rangeFilter/rangeFilter.component.html
index 5159299d..a93220e0 100644
--- a/utils/rangeFilter/rangeFilter.component.html
+++ b/utils/rangeFilter/rangeFilter.component.html
@@ -12,10 +12,10 @@
         <div class="searchFilterBoxValues ">
           <form [class]="(isDisabled ? 'uk-disabled' : '') + ' uk-flex uk-flex-middle uk-flex-wrap'" [formGroup]="rangeForm">
             <div input [formInput]="rangeForm.get('yearFrom')" [placeholder]="{label: 'e.g. ' + yearMin, static: true}"
-                 inputClass="inner small" class=" uk-width-1-3"></div>
+                 inputClass="flat small" class=" uk-width-1-3"></div>
             <span class="uk-margin-small-left uk-margin-small-right">-</span>
             <div input [formInput]="rangeForm.get('yearTo')" [placeholder]="{label: 'e.g. ' + yearMax, static: true}"
-                 inputClass="inner small" class=" uk-width-1-3"></div>
+                 inputClass="flat small" class=" uk-width-1-3"></div>
             <button type="submit" (click)="yearChanged()"
                     [ngStyle]="{'cursor': (rangeForm.valid && (rangeForm.get('yearFrom').dirty || rangeForm.get('yearTo').dirty)) ? 'pointer' : 'default'}"
                     class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
diff --git a/utils/result-preview/result-preview.component.html b/utils/result-preview/result-preview.component.html
index 9a6157fa..7db00273 100644
--- a/utils/result-preview/result-preview.component.html
+++ b/utils/result-preview/result-preview.component.html
@@ -226,7 +226,7 @@
               <a class="uk-flex uk-flex-middle uk-margin-small-left uk-link-reset">
                 <icon class="text-usage-counts-hover" [flex]="true" [ratio]="0.8"
                       [name]="result.measure.counts[0].icon"></icon>
-                <span class="uk-margin-xsmall-left">{{result.measure.counts[0].value}}</span>
+                <span class="uk-margin-xsmall-left">{{formatNumber(result.measure.counts[0].value)}}</span>
               </a>
               <div uk-drop="pos: top-right" class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
                 <table>
@@ -235,7 +235,7 @@
                       <icon [flex]="true" [ratio]="0.7" [name]="metric.icon"></icon>
                     </td>
                     <td class="uk-text-capitalize">{{metric.name}}</td>
-                    <td class="uk-text-bolder">{{metric.value}}</td>
+                    <td class="uk-text-bolder">{{metric.value | number}}</td>
                   </tr>
                 </table>
                 <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
diff --git a/utils/result-preview/result-preview.component.ts b/utils/result-preview/result-preview.component.ts
index aba09805..d6a88335 100644
--- a/utils/result-preview/result-preview.component.ts
+++ b/utils/result-preview/result-preview.component.ts
@@ -7,6 +7,7 @@ import {properties} from "../../../../environments/environment";
 import {Identifier, StringUtils} from "../string-utils.class";
 import {OpenaireEntities} from "../properties/searchFields";
 import {HelperFunctions} from "../HelperFunctions.class";
+import {NumberUtils} from '../../utils/number-utils.class';
 
 @Component({
   selector: 'result-preview',
@@ -213,4 +214,9 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
     return this.result.resultType == "publication" || this.result.resultType == "dataset" ||
         this.result.resultType == "software" || this.result.resultType == "other" || this.result.resultType == "result";
   }
+
+  public formatNumber(num: number | string) {
+    let formatted = NumberUtils.roundNumber(+num);
+    return formatted.number + formatted.size;
+  }
 }