Add text dashboard toggle for enabling markdown

tensorboard/plugins/text/tf_text_dashboard/BUILD

@@ -24,6 +24,7 @@ tf_web_library(
         "//tensorboard/components/tf_markdown_view",
         "//tensorboard/components/tf_paginated_view",
         "//tensorboard/components/tf_runs_selector",
+        "//tensorboard/components/tf_storage",
         "//tensorboard/components/tf_tensorboard:registry",
         "@org_polymer_iron_icon",
         "@org_polymer_paper_dialog",

tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html

@@ -26,6 +26,7 @@
 <link rel="import" href="../tf-dashboard-common/tf-dashboard-layout.html">
 <link rel="import" href="../tf-paginated-view/tf-paginated-view.html">
 <link rel="import" href="../tf-runs-selector/tf-runs-selector.html">
+<link rel="import" href="../tf-storage/tf-storage.html">
 <link rel="import" href="../tf-tensorboard/registry.html">
 <link rel="import" href="tf-text-loader.html">
 
@@ -36,6 +37,13 @@
   <template>
     <tf-dashboard-layout>
       <div class="sidebar">
+        <div class="sidebar-section">
+          <div class="line-item">
+            <paper-checkbox
+              checked="{{_markdownEnabled}}"
+            >Enable markdown</paper-checkbox>
+          </div>
+        </div>
         <div class="sidebar-section">
           <tf-runs-selector selected-runs="{{_selectedRuns}}">
           </tf-runs-selector>
@@ -77,6 +85,7 @@ <h3>No text data was found.</h3>
                           tag="[[item.tag]]"
                           run="[[item.run]]"
                           request-manager="[[_requestManager]]"
+                          markdown-enabled="[[_markdownEnabled]]"
                         ></tf-text-loader>
                       </template>
                     </div>
@@ -119,6 +128,13 @@ <h3>No text data was found.</h3>
           type: Object,
           value: () => new tf_backend.RequestManager(),
         },
+        _markdownEnabled: {
+          type: Boolean,
+          notify: true,
+          value: tf_storage.getBooleanInitializer('_markdownEnabled',
+              {defaultValue: true, useLocalStorage: true}),
+          observer: '_markdownEnabledObserver',
+        },
       },
       ready() {
         this.reload();
@@ -152,6 +168,8 @@ <h3>No text data was found.</h3>
       _makeCategories(runToTag, selectedRuns, tagFilter, categoriesDomReady) {
         return tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
       },
+      _markdownEnabledObserver: tf_storage.getBooleanObserver(
+          '_markdownEnabled', {defaultValue: true, useLocalStorage: true}),
     });
 
     tf_tensorboard.registerDashboard({

tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html

@@ -43,7 +43,19 @@
           step <span class="step-value">[[_formatStep(item.step)]]</span>
         </paper-material>
         <paper-material elevation="1" class="text">
-          <tf-markdown-view html="[[item.text]]"></tf-markdown-view>
+          <template is="dom-if" if="[[markdownEnabled]]">
+            <tf-markdown-view html="[[item.text]]"></tf-markdown-view>
+          </template>
+          <template is="dom-if" if="[[!markdownEnabled]]">
+            <div class="raw-text-container">
+              <!-- Use comments to remove empty space. -->
+              <pre><!--
+                --><template is="dom-repeat" items="[[_splitIntoLines(item.text)]]" as="line"><!--
+                  --><span>[[line]]</span>
+<!--            --></template><!--
+           --></pre>
+            </div>
+          </template>
         </paper-material>
       </template>
     </paper-material>
@@ -71,6 +83,31 @@
         padding: 5px;
         word-break: break-word;
       }
+      .raw-text-container {
+        overflow: auto;
+        max-height: 500px;
+        padding: 5px;
+        width: 100%;
+      }
+      .raw-text-container pre {
+        counter-reset: line;
+        line-height: 0;
+      }
+      .raw-text-container pre span {
+        display: block;
+        line-height: 1.5rem;
+      }
+      .raw-text-container pre span:before {
+        border-right: 1px solid var(--tb-ui-light-accent);
+        color: var(--tb-ui-dark-accent);
+        content: counter(line);
+        counter-increment: line;
+        display: inline-block;
+        margin: 0 0.5em 0 0;
+        padding: 0 1em 0 0;
+        text-align: right;
+        width: 30px;
+      }
       .step-container {
         background-color: var(--tb-ui-light-accent);
         border-bottom: none;
@@ -98,6 +135,7 @@
       properties: {
         run: String,
         tag: String,
+        markdownEnabled: Boolean,
         _runColor: {
           type: String,
           computed: '_computeRunColor(run)',
@@ -152,7 +190,10 @@
       },
       _formatStep(n) {
         return d3.format(",")(n);
-      }
+      },
+      _splitIntoLines(rawText) {
+        return rawText.split('\n');
+      },
     });
   </script>
 </dom-module>