Merge aad3cec into 815537b

adsabs · Aug 30, 2022 · 3838a8c · 3838a8c
2 parents 815537b + aad3cec
commit 3838a8c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 17 deletions.
diff --git a/src/js/widgets/facet/graph-facet/templates/graph.html b/src/js/widgets/facet/graph-facet/templates/graph.html
@@ -1,10 +1,33 @@
-<div class="pull-right s-view-metrics-button-container"></div>
 {{#if statsCount}}
-  <div style="width:80%">
-    {{statsDescription}} : <b>{{statsCount}}</b>
-  </div>
-  <hr/>
+
+  <!-- citations section -->
+  {{#compare section "citations"}}
+    <div style="display: flex;">
+      <div style="flex: 1; padding-right: 10px"> 
+        <p style="font-size: 1.3rem;">{{totalCount}} top cited records with <strong>{{subTotal}}</strong> total citations</p>
+      </div>
+      <div class="s-view-metrics-button-container" style="width:40px"></div>
+    </div>
+    {{#if showTotalMessage}}
+      <p style="font-size: 1.3rem;">(<strong>{{statsCount}}</strong> total citations for full set)</p>
+    {{/if}}
+  {{/compare}}
+
+  <!-- reads section -->
+  {{#compare section "reads"}}
+    <div style="display: flex;">
+      <div style="flex: 1; padding-right: 10px">
+        <p style="font-size: 1.3rem;">{{totalCount}} top read records with <strong>{{subTotal}}</strong> total recent reads </p>
+      </div>
+      <div class="s-view-metrics-button-container" style="width:40px"></div>
+    </div>
+    {{#if showTotalMessage}}
+      <p style="font-size: 1.3rem;">(<strong>{{statsCount}}</strong> total recent reads for full set)</p>
+    {{/if}}
+  {{/compare}}
 {{/if}}
+{{#if statsCount}}<hr/>{{/if}}
+
 <div class="graph-legend" {{#unless statsCount}} style="width:80%" {{/unless}}></div>
 {{#unless graphData}}
   {{#if error}}

diff --git a/src/js/wraps/graph_tabs.js b/src/js/wraps/graph_tabs.js
@@ -78,6 +78,7 @@ define([
           // if the year exists, then grab it, otherwise fill with an empty (x,y)
           if (yearMap.has(year)) {
             const { refereed, notrefereed } = yearMap.get(year);
+
             return {
               x: year,
               y: refereed + notrefereed,
@@ -90,6 +91,7 @@ define([
         if (finalData.length <= 1) {
           return noData();
         }
+
         this.model.set({ graphData: finalData });
 
         // update widget state
@@ -131,13 +133,15 @@ define([
         // map counts into coordinates for graph
         const finalData = [];
         let xCounter = 0;
+        let yCounter = 0;
         counts.some((item) => {
           xCounter += item.count;
           // one dot per paper (this way we'll only plot the top ranked X - fraction of results)
           while (
             xCounter > finalData.length &&
             finalData.length < maxDataPoints
           ) {
+            yCounter += item.val;
             finalData.push({ y: item.val, x: finalData.length + 1 });
           }
           if (finalData.length > maxDataPoints) {
@@ -157,9 +161,12 @@ define([
         }
 
         this.model.set({
+          section: 'citations',
           graphData: finalData,
-          statsCount: statsCount,
-          statsDescription: `${finalData.length} top ranked citations of`,
+          statsCount: statsCount.toLocaleString(),
+          totalCount: finalData.length.toLocaleString(),
+          subTotal: yCounter.toLocaleString(),
+          showTotalMessage: finalData.length === maxDataPoints,
         });
       },
     });
@@ -197,6 +204,7 @@ define([
 
         // map counts into coordinates for graph
         const finalData = [];
+        let yCounter = 0;
         let xCounter = 0;
         counts.some((item) => {
           xCounter += item.count;
@@ -205,6 +213,7 @@ define([
             xCounter > finalData.length &&
             finalData.length < maxDataPoints
           ) {
+            yCounter += item.val;
             finalData.push({ y: item.val, x: finalData.length + 1 });
           }
           if (finalData.length > maxDataPoints) {
@@ -224,9 +233,12 @@ define([
         }
 
         this.model.set({
+          section: 'reads',
           graphData: finalData,
-          statsCount: statsCount,
-          statsDescription: `${finalData.length} top ranked reads of`,
+          statsCount: statsCount.toLocaleString(),
+          totalCount: finalData.length.toLocaleString(),
+          subTotal: yCounter.toLocaleString(),
+          showTotalMessage: finalData.length === maxDataPoints,
         });
       },
     });

diff --git a/src/styles/sass/ads-sass/results-page-widgets.scss b/src/styles/sass/ads-sass/results-page-widgets.scss
@@ -17,7 +17,7 @@
     padding: 10px 0;
     .btn {
       font-size: 16px;
-      margin:2px;
+      margin: 2px;
       @media screen and (max-width: $screen-xs) {
         font-size: 0.8em;
       }
@@ -132,14 +132,13 @@
   }
 }
 
-
 .s-create-notification-title__title {
   display: flex;
   justify-content: space-between;
   color: #5d5d5d;
   font-size: 1.25em;
 }
-  
+
 .create-notification-title {
   &:hover,
   &:focus {
@@ -179,11 +178,9 @@
       transform: translate(-100%);
     }
   }
-
 }
 
 #search-results-actions {
-  border-bottom: 1px solid darken($gray-lighter, 10%);
   padding: 5px 0 15px 0;
 
   &.sticky {

diff --git a/src/styles/sass/ads-sass/visualizations.scss b/src/styles/sass/ads-sass/visualizations.scss
@@ -88,8 +88,7 @@ Year, Citation and Reference Graphs
 */
 
 .s-view-metrics-button-container {
-  @extend .pull-right;
-  margin-right: 10px;
+  width: 30px;
 }
 
 .change-scale {
@@ -673,7 +672,6 @@ rect.selection {
 }
 
 .s-bubble-chart {
-
   .s-controls {
     font-size: 14px;
     background-color: $gray-lighter;