Merge pull request #256 from usnistgov/fix/metrics-performance

Fix/metrics performance
usnistgov · Jun 10, 2022 · c5a98d7 · c5a98d7
2 parents bafbeef + 4430fe3
commit c5a98d7
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 39 deletions.
diff --git a/angular/src/app/landing/data-files/data-files.component.html b/angular/src/app/landing/data-files/data-files.component.html
@@ -22,7 +22,7 @@
                         </span>
                     </div>
                     <ng-template #editDisabled>
-                        <div style="flex: 0 0 120px; text-align: left; padding-bottom: 0em;">
+                        <div style="flex: 0 0 130px; text-align: left; padding-bottom: 0em;">
                             <span><b id="filelist-heading">Files </b> </span>
                             <a class="faa-stack fa-lg icon-download" *ngIf="!editEnabled"
                                 (click)="downloadAllFiles()"

diff --git a/angular/src/app/landing/filters/filters.component.css b/angular/src/app/landing/filters/filters.component.css
@@ -14,12 +14,6 @@
     cursor: pointer;
 }
 
-.spinner {
-    position: relative;
-    width: 100%;
-    margin-top: 2em;
-}
-
 #clear-all {
     float: right;
     font-weight:900;

diff --git a/angular/src/app/landing/filters/filters.component.ts b/angular/src/app/landing/filters/filters.component.ts
@@ -581,14 +581,14 @@ export class FiltersComponent implements OnInit {
      * @param event - search query that user typed into the keyword filter box
      */
      updateSuggestedKeywords(event: any) {
-        let keyword = event.query;
+        let keyword = event.query.toLowerCase();
         this.suggestedKeywords = [];
         this.suggestedKeywordsLkup = {};
 
         // Handle current keyword: update suggested keywords and lookup
         for (let i = 0; i < this.keywords.length; i++) {
-            let keyw = this.keywords[i].trim();
-            if (keyw.toLowerCase().indexOf(keyword.toLowerCase()) >= 0) {
+            let keyw = this.keywords[i].trim().toLowerCase();
+            if (keyw.indexOf(keyword) >= 0) {
                 this.suggestedKeywords.push(this.shortenKeyword(keyw));
                 this.suggestedKeywordsLkup[this.shortenKeyword(keyw)] = keyw;
             }
@@ -597,8 +597,8 @@ export class FiltersComponent implements OnInit {
         // Handle selected keyword: update suggested keywords lookup. Lookup array must cover all selected keywords.
         this.selectedKeywords.forEach(kw => {
             for (let i = 0; i < this.keywords.length; i++) {
-                let keyw = this.keywords[i].trim();
-                if (keyw.toLowerCase().indexOf(kw.toLowerCase()) >= 0) {
+                let keyw = this.keywords[i].trim().toLowerCase();
+                if (keyw.indexOf(kw.toLowerCase()) >= 0) {
                     this.suggestedKeywordsLkup[this.shortenKeyword(keyw)] = keyw;
                 }
             }

diff --git a/angular/src/app/landing/landingbody.component.html b/angular/src/app/landing/landingbody.component.html
@@ -7,7 +7,7 @@
             <a name="identity" #identity></a>
             <!-- <div style="margin-left: -10px;"> -->
             <div>
-                <pdr-resource-id [record]="md" [inBrowser]="inBrowser">
+                <pdr-resource-id [record]="md" [inBrowser]="inBrowser" [theme]="theme">
                 </pdr-resource-id>
 
                 <!-- description: abstract, keywords, research areas, etc. -->

diff --git a/angular/src/app/landing/landingpage.component.ts b/angular/src/app/landing/landingpage.component.ts
@@ -332,20 +332,25 @@ export class LandingPageComponent implements OnInit, AfterViewInit {
                             if(hasFile){
                                 //Now check if there is any metrics data
                                 this.metricsData.totalDatasetDownload = this.recordLevelMetrics.DataSetMetrics[0] != undefined? this.recordLevelMetrics.DataSetMetrics[0].record_download : 0;
-                    
+
                                 this.metricsData.totalDownloadSize = this.recordLevelMetrics.DataSetMetrics[0] != undefined? this.recordLevelMetrics.DataSetMetrics[0].total_size : 0;
 
                                 this.metricsData.totalUsers = this.recordLevelMetrics.DataSetMetrics[0] != undefined? this.recordLevelMetrics.DataSetMetrics[0].number_users : 0;
 
-                                this.metricsData.totalUsers = this.metricsData.totalUsers == undefined? 0 : this.metricsData.totalUsers;
+                                this.metricsData.totalUsers = this.metricsData.totalUsers == undefined? 0 : this.metricsData.totalUsers;                                    
                             }
+
+                            this.metricsData.dataReady = true;
                         }
                     },
                     (err) => {
                         console.error("Failed to retrieve dataset metrics: ", err);
                         this.metricsData.hasCurrentMetrics = false;
                         this.showMetrics = true;
+                        this.metricsData.dataReady = true;
                     });  
+                }else{
+                    this.metricsData.dataReady = true;
                 }
                 this.showMetrics = true;
             }
@@ -354,6 +359,7 @@ export class LandingPageComponent implements OnInit, AfterViewInit {
             console.error("Failed to retrieve file metrics: ", err);
             this.metricsData.hasCurrentMetrics = false;
             this.showMetrics = true;
+            this.metricsData.dataReady = true; // ready to display message
         });                    
     }
 

diff --git a/angular/src/app/landing/metrics-data.ts b/angular/src/app/landing/metrics-data.ts
@@ -4,17 +4,20 @@ export class MetricsData {
     totalUsers: number;
     totalDownloadSize: number;
     url: string;
+    dataReady: boolean;
 
     constructor(hasCurrentMetrics:boolean = false, 
                 totalDatasetDownload:number = 0, 
                 totalUsers:number = 0,
                 totalDownloadSize:number = 0,
-                url:string = ""){
+                url:string = "",
+                dataReady: boolean = false){
 
         this.hasCurrentMetrics = hasCurrentMetrics;
         this.totalDatasetDownload = totalDatasetDownload;
         this.totalUsers = totalUsers;
         this.totalDownloadSize = totalDownloadSize;
         this.url = url;
+        this.dataReady = dataReady;
     }
 }
diff --git a/angular/src/app/landing/metricsinfo/metricsinfo.component.css b/angular/src/app/landing/metricsinfo/metricsinfo.component.css
@@ -3,7 +3,6 @@
     color: white; 
     width: 100%; 
     height: 2em; 
-    /* margin-top: 1em; */
     border-radius: 3px; 
     font-weight: bold; 
     padding: .2em .7em;
@@ -18,3 +17,8 @@ ul {
     margin-left: 15px;
     padding: 0;
 }
+
+.metrics-spinner {
+    position: relative;
+    width: 100%;
+}
diff --git a/angular/src/app/landing/metricsinfo/metricsinfo.component.html b/angular/src/app/landing/metricsinfo/metricsinfo.component.html
@@ -1,28 +1,32 @@
 <div *ngIf="showMetrics" >
     <div class="metrics-header">
-        Dataset Metrics
+        Dataset Metrics 
+        <!-- Display spinner while loading metrics data -->
+        <span *ngIf="!metricsData.dataReady" class="metrics-spinner" style="color:#ffffff;width: 1em;float: right;"><i class="faa faa-spinner faa-spin faa-stack-1x"  aria-hidden="true"></i></span>
     </div>
 
     <div class="metrics-info">
-        <div *ngIf="metricsData.hasCurrentMetrics; else noMetrics">
-            <ul style="font-size: 14px;">
-                <li>
-                    {{metricsData.totalDatasetDownload}} dataset downloads
-                </li>
-                <li>
-                    {{totalUsers}}
-                </li>
-                <li>
-                    {{totalDownloadSize}} downloaded
-                </li>
-            </ul>
-            <div style="width: 100%;text-align: right;margin-top: -15px;font-size: small;">
-                <a *ngIf="metricsData.hasCurrentMetrics" href="{{metricsData.url}}" target="_blank"><span data-toggle="tooltip" title="More Metrics Data"><i class="faa faa-bar-chart" style="margin-right: 5px;"></i>More...</span></a>
+        <div *ngIf="metricsData.dataReady">
+            <div *ngIf="metricsData.hasCurrentMetrics; else noMetrics">
+                <ul style="font-size: 14px;">
+                    <li>
+                        {{metricsData.totalDatasetDownload}} dataset downloads
+                    </li>
+                    <li>
+                        {{totalUsers}}
+                    </li>
+                    <li>
+                        {{totalDownloadSize}} downloaded
+                    </li>
+                </ul>
+                <div style="width: 100%;text-align: right;margin-top: -15px;font-size: small;">
+                    <a *ngIf="metricsData.hasCurrentMetrics" href="{{metricsData.url}}" target="_blank"><span data-toggle="tooltip" title="More Metrics Data"><i class="faa faa-bar-chart" style="margin-right: 5px;"></i>More...</span></a>
+                </div>
             </div>
+            <ng-template #noMetrics>
+                <span style="font-size: 14px;">Metrics not availabl</span>e
+            </ng-template>
         </div>
-        <ng-template #noMetrics>
-            Metrics not available
-        </ng-template>
     </div>
 </div>
 

diff --git a/angular/src/app/landing/resultlist/resultlist.component.html b/angular/src/app/landing/resultlist/resultlist.component.html
@@ -1,6 +1,6 @@
 <div style="width: 100%;margin: 38px 0 20px 0px; padding: 10px 10px 20px 0px; "
     *ngIf="showResult">
-    <div id="table" style="height: 25px !important;padding:0px">
+    <div id="table" style="height: 25px !important;padding:0px" *ngIf="searchResultsForDisplay">
         <div class="tr result-header">
             <!-- Number of search result -->
             <div class="td" style="width: 20%;margin-bottom: 0px;">
@@ -118,7 +118,7 @@
         </div>
     </div>
 
-    <div *ngIf="!searchResults">
-        Loading search result...
+    <div class="spinner" *ngIf="!searchResults">
+        <i class="faa faa-spinner faa-spin faa-stack-2x" style="color:#1E6BA1;" aria-hidden="true"></i>
     </div>
 </div>
diff --git a/angular/src/app/landing/resultlist/resultlist.component.ts b/angular/src/app/landing/resultlist/resultlist.component.ts
@@ -428,7 +428,7 @@ export class ResultlistComponent implements OnInit {
                                 object["keyword"].forEach((keyword) => {
                                     //Loop through each search keyword from keyword filter
                                     filter.split("=")[1].split(",").forEach(kw => {
-                                        if(keyword.includes(kw)){
+                                        if(keyword.toLowerCase().includes(kw)){
                                             object.active = true;
                                         }
                                     })   

diff --git a/angular/src/app/landing/sections/resourceidentity.component.html b/angular/src/app/landing/sections/resourceidentity.component.html
@@ -47,6 +47,7 @@
                 <a href={{record.landingPage}} target="_blank">
                     <button type="button" pButton type="submit" [disabled]="!inViewMode"
                         class="home_button p-button p-component ui-button-text-empty"
+                        [ngStyle]="{'background-color': visitHomePageBtnStyle()}"
                         (click)="googleAnalytics(record.landingPage, $event, 'Resource title: '+record.title)">
                         <i class="faa faa-external-link"
                             style="color: #fff;padding-left: .5em;padding-right: .5em;"></i>

diff --git a/angular/src/app/landing/sections/resourceidentity.component.ts b/angular/src/app/landing/sections/resourceidentity.component.ts
@@ -6,6 +6,7 @@ import { VersionComponent } from '../version/version.component';
 import { GoogleAnalyticsService } from '../../shared/ga-service/google-analytics.service';
 import { EditStatusService } from '../../landing/editcontrol/editstatus.service';
 import { LandingConstants } from '../../landing/constants';
+import { Themes, ThemesPrefs } from '../../shared/globals/globals';
 
 /**
  * a component that lays out the "identity" section of a landing page
@@ -26,10 +27,13 @@ export class ResourceIdentityComponent implements OnChanges {
     editMode: string;
     EDIT_MODES: any;
     isPartOf: string[] = null;
+    scienceTheme = Themes.SCIENCE_THEME;
+    defaultTheme = Themes.DEFAULT_THEME;
 
     // passed in by the parent component:
     @Input() record: NerdmRes = null;
     @Input() inBrowser: boolean = false;
+    @Input() theme: string;
 
     /**
      * create an instance of the Identity section
@@ -129,6 +133,15 @@ export class ResourceIdentityComponent implements OnChanges {
         this.gaService.gaTrackEvent('homepage', event, title, url);
     }
 
+    visitHomePageBtnStyle() {
+        if(this.theme == this.scienceTheme) {
+            return "var(--science-theme-background-default)";
+        }else{
+            return "var(--nist-green-default)"
+        }
+
+    }
+
     /*
      * uncomment this as needed for debugging purposes
      *

diff --git a/angular/src/styles.scss b/angular/src/styles.scss
@@ -1,5 +1,9 @@
 @import "~ngx-toastr/toastr.css";
 
+* {
+    font-family: sans-serif;
+}
+
 :root {
     /* Colors */
     --science-theme-background-default: #008097;
@@ -196,3 +200,8 @@ a {
     background-color: var(--nist-blue-default);
 }
 
+.spinner {
+    position: relative;
+    width: 100%;
+    margin-top: 2em;
+}