diff options
Diffstat (limited to 'tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html')
| -rw-r--r-- | tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html new file mode 100644 index 0000000000..b7787b98c4 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html @@ -0,0 +1,166 @@ +<link rel="import" href="../../bower_components/polymer/polymer.html"> +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> +<link rel="import" href="tf-image-loader.html"> +<link rel="import" href="../imports/lodash.html"> +<link rel="import" href="../tf-dashboard-common/scrollbar-style.html"> + +<!-- +tf-image-grid creates a grid for examining image data. The columsn correspond +to runs and the rows correspond to tags. Each cell is an image. + +Structurally, it makes extensive use of flexbox for layout: it has a top-level +columnar flexbox that contains the topRow (run names) and then a +bottomContainer. The bottomContainer is another columnar flexbox which contains +repeated image-rows. Each image-row is a row flexbox which contains a tag name +cell, and then image cells. + +In the future, we should improve on the layout by making the tag names and run names have fixed positions +within the image-grid, so that when you scroll you always have context (e.g. row and column names in a spreadsheet). +For now, it just scrolls. + +The image grid provides internal scroll bars (with styling) so that it can be dropped into +a dashboard in a predictable fashion, even though the internal image grid may be enormous. + +Room for future improvement: + +- Make it obvious when an image didn't load due to the image not existing. +- Find some way to collapse sparse image grids into denser ones (when sparsity +is high) +- Fix column/row names +- Include hook for loading past images (by step/timestamp? or index?) + +--> +<dom-module id="tf-image-grid"> + <template> + <style include="scrollbar-style"></style> + <div id="fullContainer" class="container scrollbar"> + <div id="topRow" class="container"> + <div class="noshrink" id="paddingCell"></div> + <template + is="dom-repeat" + items="[[_runs]]" + as="run" + > + <div class="run-name-cell noshrink"> + <span>[[run]]</span> + </div> + </template> + </div> + <div id="bottomContainer" class="container"> + <template + is="dom-repeat" + items="[[_tags]]" + sort + as="tag" + > + <div class="image-row container noshrink"> + <div class="tag-name-cell noshrink"> + <span class="tag-name">[[tag]]</span> + </div> + <template + is="dom-repeat" + items="[[_runs]]" + as="run" + > + <div class="image-cell noshrink"> + <template is="dom-if" if="[[_exists(run, tag, runToImages.*)]]"> + <tf-image-loader + id="loader" + run="[[run]]" + tag="[[tag]]" + images-generator="[[imagesGenerator]]" + individual-image-generator="[[individualImageGenerator]]" + > + </tf-image-loader> + </template> + </div> + </template> + </div> + </template> + </div> + </div> + <style> + :host { + display: block; + height: 100%; + } + .container { + display: flex; + flex-wrap: nowrap; + } + #fullContainer { + width: 100%; + height: 100%; + flex-direction: column; + padding-top: 20px; + overflow: scroll; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + #topRow { + flex-direction: row; + } + #bottomContainer { + flex-direction: column; + height: 100%; + width: 100%; + } + .image-row { + flex-direction: row; + } + .image-cell { + width: 300px; + height: 300px; + border: 1px solid black; + } + .tag-name-cell { + height: 300px; + width: 300px; + display:flex; + flex-direction: column; + justify-content: center; + } + .tag-name { + word-wrap: break-word; + text-align: center; + white-space: nowrap; + } + .run-name-cell { + width: 300px; + height: 30px; + text-align: center; + } + .noshrink { + flex-shrink: 0; + } + #paddingCell { + width: 300px; + height: 30px; + } + </style> + </template> + <script> + Polymer({ + is: "tf-image-grid", + properties: { + runToImages: Object, + _tags: {type: Array, computed: "_getTags(runToImages.*)"}, + _runs: {type: Array, computed: "_getRuns(runToImages.*)"}, + imagesGenerator: Function, + individualImageGenerator: Function, + }, + _getTags: function(runToImages) { + return _.chain(runToImages.base).values().flatten().union().value(); + }, + _getRuns(runToImages) { + var r2i = runToImages.base; + return _.keys(r2i).filter(function(x) {return r2i[x].length > 0;}); + }, + _exists: function (run, tag, runToImages) { + runToImages = runToImages.base; + return runToImages[run].indexOf(tag) !== -1; + }, + }); + </script> +</dom-module> |