add json view under document level for watson-developer-cloud#49

personality-insights · May 12, 2016 · 721b7ce · 721b7ce
1 parent 41bc045
commit 721b7ce
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 5 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1806,7 +1806,10 @@ pre[class*=" language-"] {
     .summary-social-graph--label-container:hover .bar-graph--tooltip:hover {
       visibility: hidden;
       opacity: 0; }
-
+  .summary-view-code-button {
+    float: right; }
+  .summary-json {
+    display: none; }
 .sentences {
   min-width: 732px; }
   .sentences--filters {

diff --git a/public/images/icons/code.svg b/public/images/icons/code.svg
diff --git a/public/js/demo.js b/public/js/demo.js
@@ -63,6 +63,9 @@ function allReady(thresholds, sampleText) {
       $emotionGraph = $('.summary-emotion-graph'),
       $writingGraph = $('.summary-writing-graph'),
       $socialGraph = $('.summary-social-graph'),
+      $summaryJsonButton = $('.js-toggle-summary-json'),
+      $summaryJson = $('.js-summary-json'),
+      $summaryJsonCode = $('.js-summary-json .json--code'),
       $emotionFilters = $('.filters--emotion'),
       $writingFilters = $('.filters--writing'),
       $socialFilters = $('.filters--social'),
@@ -71,7 +74,7 @@ function allReady(thresholds, sampleText) {
       $originalTextTooltipContainer = $('.original-text--tooltip-container'),
       $legend = $('.original-text--legend'),
       $sentenceRankTable = $('.sentence-rank--table'),
-      $jsonCode = $('.json--code'),
+      $sentenceJson = $('.json .json--code'),
       $outputResetButton = $('.output--reset-button'),
       barGraph_template = barGraphTemplate.innerHTML,
       verticalBarGraph_template = verticalBarGraphTemplate.innerHTML,
@@ -274,13 +277,31 @@ function allReady(thresholds, sampleText) {
       });
     }
 
+    /**
+     * Emit view update for json view sentence tones
+     * @param {Object} data
+     */
+    function updateJSONSentenceTones(data) {
+      $sentenceJson.empty();
+      $sentenceJson.html(JSON.stringify({'sentences_tone' : data['sentences_tone']}, null, 2));
+    }
+
+    /**
+     * Emit view update for json view sentence tones
+     * @param {Object} data
+     */
+    function updateJSONDocumentTones(data) {
+      $summaryJsonCode.empty();
+      $summaryJsonCode.html(JSON.stringify({'document_tone' : data['document_tone']}, null, 2));
+    }
+
     /**
      * Emit view update for json view
      * @param {Object} data
      */
     function updateJSON(data) {
-      $jsonCode.empty();
-      $jsonCode.html(JSON.stringify(data, null, 2));
+      updateJSONSentenceTones(data);
+      updateJSONDocumentTones(data);
     }
 
     app.selectFilterBySample();
@@ -323,7 +344,7 @@ function allReady(thresholds, sampleText) {
     updateLegend();
     bindOriginalTextHoverEvents();
 
-    $jsonCode.html(JSON.stringify(data, null, 2));
+    updateJSON(data);
 
     $('.filters--radio').on('click', function() {
       clickFilter($(this).data('id'));
@@ -411,6 +432,10 @@ function allReady(thresholds, sampleText) {
   });
 
   updateTextarea($('.input--radio:checked').val());
+
+  $summaryJsonButton.click(function() {
+    $summaryJson.toggle();
+  });
 }
 
 $(document).ready(ready);
diff --git a/views/index.ejs b/views/index.ejs
@@ -131,6 +131,19 @@
             <div class="summary-social-graph bar-graph"></div>
           </div>
         </div>
+        <div class="summary-row">
+          <span class="icon-hyperlink summary-view-code-button">
+  					<img class="icon icon-code" src="images/icons/code.svg" />
+  					<button class="base--a icon-hyperlink--button_BLANK js-toggle-summary-json" href="">
+  						View JSON
+  			    </button>
+  			  </span>
+        </div>
+        <div class="summary-json js-summary-json">
+          <pre class="base--pre json--pre language-javascript">
+            <code class="base--code json--code language-javascript"></code>
+          </pre>
+        </div>
         <h3 class="base--h2 output--sentence-title">Sentence-level tone</h3>
         <p class="base--p output--sentence-description">Identify sentences with stronger tones in context or sorted by score. Highlighted sentences indicate the likelihood of a tone present. If more than one tone is present, the stronger one is shown. Click on a sentence to see a breakdown of all tones.</p>
         <div class="output--reset icon-hyperlink">