diff options
Diffstat (limited to 'tensorflow/tensorboard/components/tf-dashboard-common')
10 files changed, 523 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/dashboard-style.html b/tensorflow/tensorboard/components/tf-dashboard-common/dashboard-style.html new file mode 100644 index 0000000000..795cbbcac3 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/dashboard-style.html @@ -0,0 +1,97 @@ +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> +<link rel="import" href="../tf-dashboard-common/tensorboard-color.html"> + +<dom-module id="dashboard-style"> + <template> + <style> + .card { + height: 200px; + width: 300px; + display: flex; + flex-direction: column; + margin: 5px 5px; + padding: 5px; + border: 1px solid var(--paper-grey-500); + border-radius: 3px; + -webkit-user-select: none; + -moz-user-select: none; + position: relative; + } + + .card .card-title { + flex-grow: 0; + flex-shrink: 0; + margin-bottom: 2px; + font-size: 14px; + font-weight: bold; + text-overflow: ellipsis; + overflow: hidden; + } + + .card .card-content { + flex-grow: 1; + flex-shrink: 1; + display: flex; + } + .card .card-bottom-row { + flex-grow: 0; + flex-shrink: 0; + padding-left: 10px; + padding-right: 10px; + } + + .card.selected { + height: 400px; + width: 100%; + } + + [shift] { + bottom: 20px !important; + } + + .expand-button { + position: absolute; + left: 0px; + bottom: 0px; + color: #2196F3; + display: block; + } + + #content-container{ + display: block; + } + + .sidebar { + display: flex; + flex-direction: column; + height: 100%; + } + + #categorizer { + flex-shrink: 0; + } + + #xTypeSelector { + flex-shrink: 0; + margin: 20px 0; + } + + #runSelector { + flex-shrink: 1; + flex-grow: 1; + } + + #download-option { + padding-left: 55px; + color: var(--paper-grey-700); + font-size: 14px; + } + + #download-option paper-toggle-button { + --paper-toggle-button-checked-button-color: var(--tb-orange-strong); + --paper-toggle-button-checked-bar-color: var(--tb-orange-weak); + + } + </style> + </template> +</dom-module> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/run-color-style.html b/tensorflow/tensorboard/components/tf-dashboard-common/run-color-style.html new file mode 100644 index 0000000000..d9b12f366a --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/run-color-style.html @@ -0,0 +1,62 @@ +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> + +<dom-module id="run-color-style"> + <template> + <style> + [color-class="light-blue"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-light-blue-500); + --paper-checkbox-checked-ink-color: var(--paper-light-blue-500); + --paper-checkbox-unchecked-color: var(--paper-light-blue-900); + --paper-checkbox-unchecked-ink-color: var(--paper-light-blue-900); + } + [color-class="red"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-red-500); + --paper-checkbox-checked-ink-color: var(--paper-red-500); + --paper-checkbox-unchecked-color: var(--paper-red-900); + --paper-checkbox-unchecked-ink-color: var(--paper-red-900); + } + [color-class="green"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-green-500); + --paper-checkbox-checked-ink-color: var(--paper-green-500); + --paper-checkbox-unchecked-color: var(--paper-green-900); + --paper-checkbox-unchecked-ink-color: var(--paper-green-900); + } + [color-class="purple"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-purple-500); + --paper-checkbox-checked-ink-color: var(--paper-purple-500); + --paper-checkbox-unchecked-color: var(--paper-purple-900); + --paper-checkbox-unchecked-ink-color: var(--paper-purple-900); + } + [color-class="teal"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-teal-500); + --paper-checkbox-checked-ink-color: var(--paper-teal-500); + --paper-checkbox-unchecked-color: var(--paper-teal-900); + --paper-checkbox-unchecked-ink-color: var(--paper-teal-900); + } + [color-class="pink"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-pink-500); + --paper-checkbox-checked-ink-color: var(--paper-pink-500); + --paper-checkbox-unchecked-color: var(--paper-pink-900); + --paper-checkbox-unchecked-ink-color: var(--paper-pink-900); + } + [color-class="orange"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-orange-500); + --paper-checkbox-checked-ink-color: var(--paper-orange-500); + --paper-checkbox-unchecked-color: var(--paper-orange-900); + --paper-checkbox-unchecked-ink-color: var(--paper-orange-900); + } + [color-class="brown"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-brown-500); + --paper-checkbox-checked-ink-color: var(--paper-brown-500); + --paper-checkbox-unchecked-color: var(--paper-brown-900); + --paper-checkbox-unchecked-ink-color: var(--paper-brown-900); + } + [color-class="indigo"] paper-checkbox { + --paper-checkbox-checked-color: var(--paper-indigo-500); + --paper-checkbox-checked-ink-color: var(--paper-indigo-500); + --paper-checkbox-unchecked-color: var(--paper-indigo-900); + --paper-checkbox-unchecked-ink-color: var(--paper-indigo-900); + } + </style> + </template> +</dom-module> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/scrollbar-style.html b/tensorflow/tensorboard/components/tf-dashboard-common/scrollbar-style.html new file mode 100644 index 0000000000..90fc184e8d --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/scrollbar-style.html @@ -0,0 +1,28 @@ +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> + +<dom-module id="scrollbar-style"> + <template> + <style> + .scrollbar::-webkit-scrollbar-track + { + visibility: hidden; + } + + .scrollbar::-webkit-scrollbar + { + width: 10px; + } + + .scrollbar::-webkit-scrollbar-thumb + { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3); + background-color: var(--paper-grey-500); + color: var(--paper-grey-900); + } + .scrollbar { + box-sizing: border-box; + } + </style> + </template> +</dom-module> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tensorboard-color.html b/tensorflow/tensorboard/components/tf-dashboard-common/tensorboard-color.html new file mode 100644 index 0000000000..c3a59b7a31 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/tensorboard-color.html @@ -0,0 +1,11 @@ +<link rel="import" href="../../bower_components/polymer/polymer.html"> +<style is="custom-style"> + + :root { + --tb-orange-weak: #fcb938; + --tb-orange-strong: #f3913e; + --tb-grey-darker: #e2e2e2; + --tb-grey-lighter: #f3f3f3; + } + +</style> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-dashboard-layout.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-dashboard-layout.html new file mode 100644 index 0000000000..89c51342fe --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-dashboard-layout.html @@ -0,0 +1,50 @@ +<link rel="import" href="../../bower_components/polymer/polymer.html"> +<link rel="import" href="scrollbar-style.html"> +<link rel="import" href="tensorboard-color.html"> +<!-- +Generic layout for a dashboard. +--> +<dom-module id="tf-dashboard-layout"> + <template> + <div id="sidebar"> + <content select=".sidebar"></content> + </div> + + <div id="center" class="scrollbar"> + <content select=".center"></content> + </div> + <style include="scrollbar-style"></style> + <style> + #sidebar { + width: inherit; + height: 100%; + background-color: var(--tb-grey-darker); + background-image: linear-gradient(to right, var(--tb-grey-lighter), var(--tb-grey-lighter)); + overflow: ellipsis; + padding-left: 10px; + padding-right: 10px; + flex-grow: 0; + flex-shrink: 0; + } + + #center { + margin: 0 10px; + height: 100%; + overflow-y: scroll; + padding-right: 12px; + flex-grow: 1; + flex-shrink: 1; + } + :host { + display: flex; + flex-direction: row; + height: 100%; + } + </style> + </template> + <script> + Polymer({ + is: "tf-dashboard-layout", + }); + </script> +</dom-module> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-downloader.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-downloader.html new file mode 100644 index 0000000000..c7251ec578 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-downloader.html @@ -0,0 +1,85 @@ +<link rel="import" href="../../bower_components/polymer/polymer.html"> +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> +<link rel="import" href="../../bower_components/paper-item/paper-item.html"> + +<dom-module id="tf-downloader"> + <template> + <paper-dropdown-menu + no-label-float="true" + label="run to download" + selected-item-label="{{_run}}" + > + <paper-menu class="dropdown-content"> + <template is="dom-repeat" items="[[_runs]]"> + <paper-item no-label-float=true>[[item]]</paper-item> + </template> + </paper-menu> + </paper-dropdown-menu> + <a + download="[[_csvName(_run)]]" + href="[[_csvUrl(_run, urlFn)]]" + >CSV</a> + <a + download="[[_jsonName(_run)]]" + href="[[_jsonUrl(_run, urlFn)]]" + >JSON</a> + <style> + :host { + display: block; + } + paper-dropdown-menu { + width: 220px; + --paper-input-container-label: { + font-size: 10px; + } + --paper-input-container-input: { + font-size: 10px; + } + } + a { + font-size: 10px; + border-radius: 3px; + border: 1px solid #EEE; + } + paper-input { + font-size: 22px; + } + </style> + </template> + <script> + Polymer({ + is: "tf-downloader", + properties: { + _run: String, + _runs: { + type: Array, + computed: "_computeRuns(runToTag.*, selectedRuns.*)", + }, + selectedRuns: Array, + runToTag: Object, + tag: String, + urlFn: Function, + }, + _computeRuns: function(runToTagChange, selectedRunsChange) { + var runToTag = this.runToTag; + var tag = this.tag; + return this.selectedRuns.filter(function(x) { + return runToTag[x].indexOf(tag) !== -1; + }) + }, + _csvUrl: function(_run, urlFn) { + return urlFn(this.tag, _run) + "&format=csv"; + }, + _jsonUrl: function(_run, urlFn) { + return urlFn(this.tag, _run); + }, + _csvName: function(_run) { + return "run_" + _run + ",tag_" + this.tag + ".csv"; + }, + _jsonName: function(_run) { + return "run-" + _run + "-tag-" + this.tag + ".json"; + }, + }); + </script> +</dom-module> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-generator.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-generator.html new file mode 100644 index 0000000000..4d72552049 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-generator.html @@ -0,0 +1,97 @@ +<link rel="import" href="../../bower_components/polymer/polymer.html"> +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> +<link rel="import" href="../imports/lodash.html"> + +<!-- +tf-run-generator is a plumbing component that takes in a url to load runs from, and + produces the following upward-bindable properties: + + outRunToScalars: Maps from run name (string) to an array of scalar tags (strings). + outRunToHistograms: Maps from run name (string) to an array of histogram tags (strings). + outRunToImages: Maps from run name (string) to an array of image tags (strings). +--> +<dom-module id="tf-run-generator"> + <template> + <iron-ajax + id="ajax" + auto + url="[[url]]" + handle-as="json" + debounce="300" + on-response="_setResponse" + verbose=true + > + </iron-ajax> + </template> + <script> + Polymer({ + is: "tf-run-generator", + properties: { + url: String, + _runToTag: { + type: Object, + readOnly: true, + }, + outRunToScalars: { + // {[runName: string]: string[]} + // the names of scalar tags. + type: Object, + computed: "_scalars(_runToTag.*)", + notify: true, + }, + outRunToHistograms: { + // {[runName: string]: string[]} + // the names of histogram tags. + type: Object, + computed: "_histograms(_runToTag.*)", + notify: true, + }, + outRunToCompressedHistograms: { + // {[runName: string]: string[]} + // the names of histogram tags. + type: Object, + computed: "_compressedHistograms(_runToTag.*)", + notify: true, + }, + outRunToImages: { + // {[runName: string]: string[]} + // the names of image tags. + type: Object, + computed: "_images(_runToTag.*)", + notify: true, + }, + outRunsWithGraph: { + // ["run1", "run2", ...] + // array of run names that have an associated graph definition. + type: Array, + computed: "_graphs(_runToTag.*)", + notify: true + } + }, + _scalars: function(_runToTag) { + return _.mapValues(_runToTag.base, "scalars"); + }, + _histograms: function(_runToTag) { + return _.mapValues(_runToTag.base, "histograms"); + }, + _compressedHistograms: function(_runToTag) { + return _.mapValues(_runToTag.base, "compressedHistograms"); + }, + _images: function(_runToTag) { + return _.mapValues(_runToTag.base, "images"); + }, + _graphs: function(_runToTag) { + var runsWithGraph = []; + _.each(_runToTag.base, function(runInfo, runName) { + if (runInfo.graph === true) { + runsWithGraph.push(runName); + } + }); + return runsWithGraph; + }, + _setResponse: function(event) { + this._set_runToTag(event.detail.response); + } + }); + </script> +</dom-module> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-url-generator.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-url-generator.html new file mode 100644 index 0000000000..803998daeb --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-url-generator.html @@ -0,0 +1,50 @@ +<link rel="import" href="../../bower_components/polymer/polymer.html"> + +<!-- tf-url-generator is a plumbing component that provides two upward bindable properties: + outRunsUrl and outValuesUrlGenerator. These may be used by the rest of the application to communicate + with the backend, and by overriding the TF.Urls code that backs it, can be modified to load data from + a demo data source instead. + --> +<dom-module id="tf-url-generator"> + <script src="urlGenerator.js"></script> + <script> + var polymerObject = { + is: "tf-url-generator", + properties: { + outRunsUrl: { + type: String, + value: function() { + return TF.Urls.runsUrl(); + }, + readOnly: true, + notify: true, + }, + }, + }; + TF.Urls.routes.forEach(function(route) { + /* for each route (other than runs, handled seperately): + * out`RouteName`: { + * type: Function, + * readOnly: true, + * notify: true, + * value: function() { + * return TF.Urls.`routeName`Url; + * } + */ + if (route === "runs") { + return; + } + var urlName = route + "Url"; + var propertyName = Polymer.CaseMap.dashToCamelCase("out-" + urlName + "Generator"); + polymerObject.properties[propertyName] = { + type: Function, + value: function() { + return TF.Urls[urlName]; + }, + notify: true, + readOnly: true, + } + }); + Polymer(polymerObject); + </script> +</dom-module> diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/urlGenerator.ts b/tensorflow/tensorboard/components/tf-dashboard-common/urlGenerator.ts new file mode 100644 index 0000000000..c7bbcbf434 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/urlGenerator.ts @@ -0,0 +1,33 @@ +/// <reference path="../../typings/tsd.d.ts" /> +/// <reference path="../../bower_components/plottable/plottable.d.ts" /> + +module TF { + export module Urls { + + export var routes = ["runs", "scalars", "histograms", + "compressedHistograms", "images", + "individualImage", "graph"]; + + function router(route: string): ((tag: string, run: string) => string) { + return function(tag: string, run: string): string { + return "/" + route + "?tag=" + encodeURIComponent(tag) + + "&run=" + encodeURIComponent(run); + }; + } + + export function runsUrl() { + return "/runs"; + } + export var scalarsUrl = router("scalars"); + export var histogramsUrl = router("histograms"); + export var compressedHistogramsUrl = router("compressedHistograms"); + export var imagesUrl = router("images"); + export function individualImageUrl(query: string) { + return "/individualImage?" + query; + } + export function graphUrl(run: string) { + return "/graph?run=" + encodeURIComponent(run); + } + + } +} diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/warning-style.html b/tensorflow/tensorboard/components/tf-dashboard-common/warning-style.html new file mode 100644 index 0000000000..c4103a7248 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-dashboard-common/warning-style.html @@ -0,0 +1,10 @@ +<dom-module id="warning-style"> + <template> + <style> + .warning { + max-width: 540px; + margin: 80px auto 0 auto; + } + </style> + </template> +</dom-module> |