diff --git a/tensorboard/plugins/text/tf_text_dashboard/BUILD b/tensorboard/plugins/text/tf_text_dashboard/BUILD index 5e8e7e9d13..5c36601ac1 100644 --- a/tensorboard/plugins/text/tf_text_dashboard/BUILD +++ b/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", diff --git a/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html b/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html index b9fb2e14ac..762c7e26d1 100644 --- a/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html +++ b/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html @@ -26,6 +26,7 @@ + @@ -36,6 +37,13 @@ @@ -119,6 +128,13 @@

No text data was found.

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 @@

No text data was found.

_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({ diff --git a/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html b/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html index c9df30a4f9..f346605817 100644 --- a/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html +++ b/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html @@ -43,7 +43,19 @@ step [[_formatStep(item.step)]] - + + @@ -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'); + }, });