From 6a23892a2e7d378d09de8a84bb0ba6746f29ad51 Mon Sep 17 00:00:00 2001
From: JAMES ZHANG <jzhang300@us.ibm.com>
Date: Fri, 19 Feb 2016 13:57:56 -0600
Subject: [PATCH] add thresholds, select highest tone for each sample, update
 legend

---
 public/css/style.css            | 355 ++++++++++++++++++--------------
 public/js/components/App.js     |  31 +--
 public/js/components/helpers.js |   6 +-
 public/js/demo.js               |   5 +-
 views/index.ejs                 |  23 ++-
 5 files changed, 236 insertions(+), 184 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 1ba296d4..0fc6e690 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1199,13 +1199,12 @@ pre[class*=" language-"] {
     background-color: #075CD8; }
   .bar-graph--threshold {
     position: absolute;
-    top: 0rem;
+    top: -40%;
     left: 0%;
-    height: 100%;
-    width: 2px;
+    height: 180%;
+    width: 1px;
     margin-top: 0rem;
-    margin-left: -1px;
-    background-color: #000; }
+    background-color: #aeaeae; }
   .bar-graph--tooltip {
     position: absolute;
     background-color: #325c80;
@@ -1339,7 +1338,8 @@ pre[class*=" language-"] {
 
 .summary--emotion {
   background-color: #f9f9f9;
-  padding: 1rem; }
+  padding: 1rem;
+  height: 16.5rem; }
   @media (min-width: 768px) {
     .summary--emotion {
       width: 31.91489%;
@@ -1348,11 +1348,17 @@ pre[class*=" language-"] {
       float: left;
       display: block;
       margin-top: 0rem; } }
+  @media (min-width: 768px) {
+    .summary--emotion {
+      height: 18.5rem; } }
+  @media (min-width: 1200px) {
+    .summary--emotion {
+      height: 16.5rem; } }
 
 .summary--writing {
   background-color: #f9f9f9;
   padding: 1rem;
-  height: 14.78rem; }
+  height: 16.5rem; }
   @media (min-width: 768px) {
     .summary--writing {
       width: 31.91489%;
@@ -1361,10 +1367,17 @@ pre[class*=" language-"] {
       float: left;
       display: block;
       margin-top: 0rem; } }
+  @media (min-width: 768px) {
+    .summary--writing {
+      height: 18.5rem; } }
+  @media (min-width: 1200px) {
+    .summary--writing {
+      height: 16.5rem; } }
 
 .summary--social {
   background-color: #f9f9f9;
-  padding: 1rem; }
+  padding: 1rem;
+  height: 16.5rem; }
   @media (min-width: 768px) {
     .summary--social {
       width: 31.91489%;
@@ -1373,6 +1386,12 @@ pre[class*=" language-"] {
       float: left;
       display: block;
       margin-top: 0rem; } }
+  @media (min-width: 768px) {
+    .summary--social {
+      height: 18.5rem; } }
+  @media (min-width: 1200px) {
+    .summary--social {
+      height: 16.5rem; } }
   @media (min-width: 768px) {
     .summary--social {
       width: auto;
@@ -1385,151 +1404,172 @@ pre[class*=" language-"] {
       float: left;
       display: block; } }
 
-.summary-emotion-graph--bar-value {
-  background-color: #1AE5CD; }
-  .summary-emotion-graph--bar-value_Anger {
-    background-color: #E80521; }
-  .summary-emotion-graph--bar-value_Disgust {
-    background-color: #592684; }
-  .summary-emotion-graph--bar-value_Fear {
-    background-color: #325E2B; }
-  .summary-emotion-graph--bar-value_Joy {
-    background-color: #FFD629; }
-  .summary-emotion-graph--bar-value_Sadness {
-    background-color: #086DB2; }
-
-.summary-emotion-graph--bar-tooltip_Anger {
-  position: absolute;
-  background-color: #E80521;
-  padding: 1rem;
-  width: 5.5rem;
-  left: -2.75rem;
-  color: white;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.2;
-  visibility: hidden;
-  opacity: 0;
-  bottom: calc(100% + 1.25rem);
-  color: #ffffff; }
-  .summary-emotion-graph--bar-tooltip_Anger:after {
-    content: '';
+.summary-emotion-graph {
+  position: relative; }
+  .summary-emotion-graph--bar-value {
+    background-color: #1AE5CD; }
+    .summary-emotion-graph--bar-value_Anger {
+      background-color: #E80521; }
+    .summary-emotion-graph--bar-value_Disgust {
+      background-color: #592684; }
+    .summary-emotion-graph--bar-value_Fear {
+      background-color: #325E2B; }
+    .summary-emotion-graph--bar-value_Joy {
+      background-color: #FFD629; }
+    .summary-emotion-graph--bar-value_Sadness {
+      background-color: #086DB2; }
+  .summary-emotion-graph--bar-tooltip_Anger {
     position: absolute;
-    left: 2rem;
-    border: 0.75rem solid transparent;
-    top: 100%;
-    border-top-color: #E80521; }
-  .summary-emotion-graph--bar-tooltip_Anger .base--a {
-    color: white; }
-    .summary-emotion-graph--bar-tooltip_Anger .base--a:hover {
-      color: #e0e0e0; }
-
-.summary-emotion-graph--bar-tooltip_Disgust {
-  position: absolute;
-  background-color: #592684;
-  padding: 1rem;
-  width: 5.5rem;
-  left: -2.75rem;
-  color: white;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.2;
-  visibility: hidden;
-  opacity: 0;
-  bottom: calc(100% + 1.25rem);
-  color: #ffffff; }
-  .summary-emotion-graph--bar-tooltip_Disgust:after {
-    content: '';
+    background-color: #E80521;
+    padding: 1rem;
+    width: 5.5rem;
+    left: -2.75rem;
+    color: white;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.2;
+    visibility: hidden;
+    opacity: 0;
+    bottom: calc(100% + 1.25rem);
+    color: #ffffff; }
+    .summary-emotion-graph--bar-tooltip_Anger:after {
+      content: '';
+      position: absolute;
+      left: 2rem;
+      border: 0.75rem solid transparent;
+      top: 100%;
+      border-top-color: #E80521; }
+    .summary-emotion-graph--bar-tooltip_Anger .base--a {
+      color: white; }
+      .summary-emotion-graph--bar-tooltip_Anger .base--a:hover {
+        color: #e0e0e0; }
+  .summary-emotion-graph--bar-tooltip_Disgust {
     position: absolute;
-    left: 2rem;
-    border: 0.75rem solid transparent;
-    top: 100%;
-    border-top-color: #592684; }
-  .summary-emotion-graph--bar-tooltip_Disgust .base--a {
-    color: white; }
-    .summary-emotion-graph--bar-tooltip_Disgust .base--a:hover {
-      color: #e0e0e0; }
-
-.summary-emotion-graph--bar-tooltip_Fear {
-  position: absolute;
-  background-color: #325E2B;
-  padding: 1rem;
-  width: 5.5rem;
-  left: -2.75rem;
-  color: white;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.2;
-  visibility: hidden;
-  opacity: 0;
-  bottom: calc(100% + 1.25rem);
-  color: #ffffff; }
-  .summary-emotion-graph--bar-tooltip_Fear:after {
-    content: '';
+    background-color: #592684;
+    padding: 1rem;
+    width: 5.5rem;
+    left: -2.75rem;
+    color: white;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.2;
+    visibility: hidden;
+    opacity: 0;
+    bottom: calc(100% + 1.25rem);
+    color: #ffffff; }
+    .summary-emotion-graph--bar-tooltip_Disgust:after {
+      content: '';
+      position: absolute;
+      left: 2rem;
+      border: 0.75rem solid transparent;
+      top: 100%;
+      border-top-color: #592684; }
+    .summary-emotion-graph--bar-tooltip_Disgust .base--a {
+      color: white; }
+      .summary-emotion-graph--bar-tooltip_Disgust .base--a:hover {
+        color: #e0e0e0; }
+  .summary-emotion-graph--bar-tooltip_Fear {
     position: absolute;
-    left: 2rem;
-    border: 0.75rem solid transparent;
-    top: 100%;
-    border-top-color: #325E2B; }
-  .summary-emotion-graph--bar-tooltip_Fear .base--a {
-    color: white; }
-    .summary-emotion-graph--bar-tooltip_Fear .base--a:hover {
-      color: #e0e0e0; }
-
-.summary-emotion-graph--bar-tooltip_Joy {
-  position: absolute;
-  background-color: #FFD629;
-  padding: 1rem;
-  width: 5.5rem;
-  left: -2.75rem;
-  color: white;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.2;
-  visibility: hidden;
-  opacity: 0;
-  bottom: calc(100% + 1.25rem);
-  color: #000000; }
-  .summary-emotion-graph--bar-tooltip_Joy:after {
-    content: '';
+    background-color: #325E2B;
+    padding: 1rem;
+    width: 5.5rem;
+    left: -2.75rem;
+    color: white;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.2;
+    visibility: hidden;
+    opacity: 0;
+    bottom: calc(100% + 1.25rem);
+    color: #ffffff; }
+    .summary-emotion-graph--bar-tooltip_Fear:after {
+      content: '';
+      position: absolute;
+      left: 2rem;
+      border: 0.75rem solid transparent;
+      top: 100%;
+      border-top-color: #325E2B; }
+    .summary-emotion-graph--bar-tooltip_Fear .base--a {
+      color: white; }
+      .summary-emotion-graph--bar-tooltip_Fear .base--a:hover {
+        color: #e0e0e0; }
+  .summary-emotion-graph--bar-tooltip_Joy {
     position: absolute;
-    left: 2rem;
-    border: 0.75rem solid transparent;
-    top: 100%;
-    border-top-color: #FFD629; }
-  .summary-emotion-graph--bar-tooltip_Joy .base--a {
-    color: white; }
-    .summary-emotion-graph--bar-tooltip_Joy .base--a:hover {
-      color: #e0e0e0; }
-
-.summary-emotion-graph--bar-tooltip_Sadness {
-  position: absolute;
-  background-color: #086DB2;
-  padding: 1rem;
-  width: 5.5rem;
-  left: -2.75rem;
-  color: white;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.2;
-  visibility: hidden;
-  opacity: 0;
-  bottom: calc(100% + 1.25rem);
-  color: #ffffff; }
-  .summary-emotion-graph--bar-tooltip_Sadness:after {
-    content: '';
+    background-color: #FFD629;
+    padding: 1rem;
+    width: 5.5rem;
+    left: -2.75rem;
+    color: white;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.2;
+    visibility: hidden;
+    opacity: 0;
+    bottom: calc(100% + 1.25rem);
+    color: #000000; }
+    .summary-emotion-graph--bar-tooltip_Joy:after {
+      content: '';
+      position: absolute;
+      left: 2rem;
+      border: 0.75rem solid transparent;
+      top: 100%;
+      border-top-color: #FFD629; }
+    .summary-emotion-graph--bar-tooltip_Joy .base--a {
+      color: white; }
+      .summary-emotion-graph--bar-tooltip_Joy .base--a:hover {
+        color: #e0e0e0; }
+  .summary-emotion-graph--bar-tooltip_Sadness {
+    position: absolute;
+    background-color: #086DB2;
+    padding: 1rem;
+    width: 5.5rem;
+    left: -2.75rem;
+    color: white;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.2;
+    visibility: hidden;
+    opacity: 0;
+    bottom: calc(100% + 1.25rem);
+    color: #ffffff; }
+    .summary-emotion-graph--bar-tooltip_Sadness:after {
+      content: '';
+      position: absolute;
+      left: 2rem;
+      border: 0.75rem solid transparent;
+      top: 100%;
+      border-top-color: #086DB2; }
+    .summary-emotion-graph--bar-tooltip_Sadness .base--a {
+      color: white; }
+      .summary-emotion-graph--bar-tooltip_Sadness .base--a:hover {
+        color: #e0e0e0; }
+  .summary-emotion-graph--legend-label-container {
     position: absolute;
-    left: 2rem;
-    border: 0.75rem solid transparent;
     top: 100%;
-    border-top-color: #086DB2; }
-  .summary-emotion-graph--bar-tooltip_Sadness .base--a {
-    color: white; }
-    .summary-emotion-graph--bar-tooltip_Sadness .base--a:hover {
-      color: #e0e0e0; }
+    right: 0rem;
+    width: calc(100% - 4rem); }
+  .summary-emotion-graph--legend-label {
+    width: calc(33.33333% - 0rem);
+    margin-right: 0rem;
+    display: block;
+    float: left;
+    margin-top: 0rem;
+    text-align: center;
+    font-size: 0.8rem; }
+    .summary-emotion-graph--legend-label:nth-of-type(3n) {
+      margin-right: 0rem; }
+    @media (min-width: 768px) {
+      .summary-emotion-graph--legend-label {
+        font-size: 0.5rem; } }
 
 .summary-writing-graph {
   height: calc(100% - 2.5rem); }
+  @media (min-width: 768px) {
+    .summary-writing-graph {
+      height: calc(100% - 3.5rem); } }
+  @media (min-width: 1200px) {
+    .summary-writing-graph {
+      height: calc(100% - 2.5rem); } }
   .summary-writing-graph--column {
     width: calc(33.33333% - 0rem);
     margin-right: 0rem;
@@ -1631,13 +1671,12 @@ pre[class*=" language-"] {
     background-color: #075CD8; }
   .summary-social-graph--threshold {
     position: absolute;
-    top: 0rem;
+    top: -40%;
     left: 0%;
-    height: 100%;
-    width: 2px;
+    height: 180%;
+    width: 1px;
     margin-top: 0rem;
-    margin-left: -1px;
-    background-color: #000; }
+    background-color: #aeaeae; }
   .summary-social-graph--tooltip {
     position: absolute;
     background-color: #325c80;
@@ -1889,22 +1928,22 @@ pre[class*=" language-"] {
   .original-text--legend {
     text-align: right;
     position: relative;
-    height: 3.75rem; }
+    height: 4.75rem; }
   .original-text--legend-bar {
     position: absolute;
     right: 0rem;
     margin: 0rem; }
   .original-text--legend-block {
-    height: 2rem;
-    width: 1.75rem;
+    height: 2.5rem;
+    width: 4.5rem;
     background-color: #e0e0e0;
     margin-top: 0rem;
     position: absolute;
     right: 0rem; }
     .original-text--legend-block_low {
-      right: 3.5rem; }
+      right: 9rem; }
     .original-text--legend-block_med {
-      right: 1.75rem; }
+      right: 4.5rem; }
     .original-text--legend-block_high {
       right: 0rem; }
     .original-text--legend-block_anger-low {
@@ -1986,19 +2025,19 @@ pre[class*=" language-"] {
     .original-text--legend-block_emotional-range-high {
       background-color: #1AE5CD; }
   .original-text--legend-label {
-    margin-top: 0rem;
+    margin-top: 0.35rem;
     position: absolute;
-    top: 2rem;
+    top: 2.5rem;
     font-size: 0.8rem; }
     .original-text--legend-label_low {
-      left: calc(100% - 5.25rem); }
+      left: calc(100% - 13.5rem); }
     .original-text--legend-label_high {
       right: 0rem; }
   .original-text--texts-container {
     background-color: white;
     padding: 1rem;
     overflow-y: auto;
-    height: calc(100% - 9.5rem);
+    height: calc(100% - 10.5rem);
     margin-top: 0rem; }
   .original-text--sentence-container {
     margin-top: 0.4rem;
diff --git a/public/js/components/App.js b/public/js/components/App.js
index 7983b1b8..31de93a2 100644
--- a/public/js/components/App.js
+++ b/public/js/components/App.js
@@ -347,21 +347,22 @@ function App(documentTones, sentences, thresholds, selectedSample) {
    * Select initial filter depending on sample text picked
    */
   output.selectFilterBySample = function() {
-    var sample = {
-      'customer-call': 'Anger',
-      'email': 'Openness',
-      'corporate-announcement': 'Analytical',
-      'own-text': (function() {
-        var highestTone = 'Anger',
-            highestScore = 0;
-        _documentTones.tone_categories[0].tones.forEach(function(item) {
-          if (highestScore < item.score) {
-            highestScore = item.score;
-            highestTone = item.tone_name;
-          }
-        });
-        return highestTone;
-      })(),
+    var getHighestTone = function(toneCategory) {
+      var highestTone = _documentTones.tone_categories[_searchIndex(toneCategory)].tones[0].tone_name,
+          highestScore = 0;
+      _documentTones.tone_categories[_searchIndex(toneCategory)].tones.forEach(function(item) {
+        if (highestScore < item.score) {
+          highestScore = item.score;
+          highestTone = item.tone_name;
+        }
+      });
+      return highestTone;
+    },
+    sample = {
+      'customer-call': getHighestTone('Emotion Tone'),
+      'email': getHighestTone('Social Tone'),
+      'corporate-announcement': getHighestTone('Writing Tone'),
+      'own-text': getHighestTone('Emotion Tone')
     };
 
     if (_selectedSample in sample)
diff --git a/public/js/components/helpers.js b/public/js/components/helpers.js
index 64ea4261..3e52130b 100644
--- a/public/js/components/helpers.js
+++ b/public/js/components/helpers.js
@@ -51,10 +51,10 @@ function normalize(str) {
 
 /**
  * Scrolls page to @param element
- * @param {$element} element
+ * @param {$element} $element
  */
-function scrollTo(element) {
-  $('html, body').animate({ scrollTop: element.offset().top }, 'fast');
+function scrollTo($element) {
+  $('html, body').animate({ scrollTop: $element.offset().top }, 'fast');
 }
 
 /**
diff --git a/public/js/demo.js b/public/js/demo.js
index ce4f415e..aae1626f 100755
--- a/public/js/demo.js
+++ b/public/js/demo.js
@@ -113,7 +113,8 @@ function allReady(thresholds, sampleText) {
       return {
         label: item.tone_name,
         score: app.percentagify(item.score, 'Emotion Tone'),
-        threshold: app.percentagify(app.thresholds().doc[item.tone_name][0])
+        thresholdLow: app.percentagify(app.thresholds().doc[item.tone_name][0]),
+        thresholdHigh: app.percentagify(app.thresholds().doc[item.tone_name][1])
       };
     }
 
@@ -138,7 +139,6 @@ function allReady(thresholds, sampleText) {
       return {
         label: item.tone_name,
         score: app.percentagify(item.score, 'Social Tone'),
-        threshold: app.percentagify(app.thresholds().doc[item.tone_name][1]),
         tooltip: app.toneHash()[item.tone_name].tooltip
       };
     }
@@ -332,7 +332,6 @@ function allReady(thresholds, sampleText) {
    * @param {Object} error
    */
   function _error(error) {
-    console.log();
     var message = typeof error.responseJSON.error === 'string' ?
       error.responseJSON.error :
       'Error code ' + error.responseJSON.error.code + ': ' + error.responseJSON.error.message;
diff --git a/views/index.ejs b/views/index.ejs
index 3f2dcbe1..e38f1944 100755
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -121,15 +121,15 @@
         <p class="base--p output--document-description">Quickly assess the ways your text is or is not making the right impression.  Learn how to interpret these graphs for your use case in the <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/overview.shtml#analyzing" target="blank" class="base--a">Documentation</a>.</p>
         <div class="summary--row">
           <div class="summary--emotion">
-            <h4 class="">Emotion Summary</h4>
+            <h5 class="base--h5">Emotion summary (probability)</h5>
             <div class="summary-emotion-graph bar-graph"></div>
           </div>
           <div class="summary--writing">
-            <h4 class="">Language Summary</h4>
+            <h5 class="base--h5">Language Style summary (raw score)</h5>
             <div class="summary-writing-graph"></div>
           </div>
           <div class="summary--social">
-            <h4 class="">Social Summary</h4>
+            <h5 class="base--h5">Social summary (raw score)</h5>
             <div class="summary-social-graph bar-graph"></div>
           </div>
         </div>
@@ -241,9 +241,22 @@
             <div class="summary-<%= className %>-graph--bar-tooltip summary-<%= className %>-graph--bar-tooltip_<%= item.label.replace(/\s+/g, '-') %> bar-graph--bar-tooltip" style="margin-left: <%= item.score %>%;">
               <%= (item.score / 100).toFixed(2) %>
             </div>
+            <% if (item.thresholdLow) { %>
+              <div class="bar-graph--threshold" style="<%= 'left: ' + item.thresholdLow + '%' %>"></div>
+            <% } %>
+            <% if (item.thresholdHigh) { %>
+              <div class="bar-graph--threshold" style="<%= 'left: ' + item.thresholdHigh + '%' %>"></div>
+            <% } %>
           </div>
         </div>
       </div>
+      <% if (key === list.length - 1 && item.thresholdLow) { %>
+        <div class="summary-<%= className %>-graph--legend-label-container">
+          <div class="summary-<%= className %>-graph--legend-label">Low evidence</div>
+          <div class="summary-<%= className %>-graph--legend-label">Medium</div>
+          <div class="summary-<%= className %>-graph--legend-label">High</div>
+        </div>
+      <% } %>
       <% }); %>
   </script>
 
@@ -313,8 +326,8 @@
       <div class="original-text--legend-block original-text--legend-block_low original-text--legend-block_<%= className %>-low"></div>
       <div class="original-text--legend-block original-text--legend-block_med original-text--legend-block_<%= className %>-medium"></div>
       <div class="original-text--legend-block original-text--legend-block_high original-text--legend-block_<%= className %>-high"></div>
-      <div class="original-text--legend-label original-text--legend-label_low">Lower</div>
-      <div class="original-text--legend-label original-text--legend-label_high">Higher</div>
+      <div class="original-text--legend-label original-text--legend-label_low">No evidence</div>
+      <div class="original-text--legend-label original-text--legend-label_high">Strong</div>
     </div>
   </script>