Add a bit to control whether to display the run metadata dropdown and the upload file button.

Change: 126872910

2 files changed, 58 insertions, 20 deletions

diff --git a/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html b/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
index 902f606cae..ab98268c25 100644
--- a/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
+++ b/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
@@ -43,6 +43,10 @@ Example
 </style>
 <div class="all">
   <div class="side">
+    <!-- The observatory header component is injected in during vulcanization
+         and an instance of it is initialized and filled here when the demo
+         app initializes. -->
+    <div id="observatory-header"></div>
     <tf-graph-controls
         devices-for-stats="{{_devicesForStats}}"
         color-by-params="[[colorByParams]]"
@@ -53,6 +57,8 @@ Example
         selected-dataset="{{selectedDataset}}"
         selected-file="{{selectedFile}}"
         selected-metadata-tag="{{selectedMetadataTag}}"
+        show-session-runs-dropdown="[[showSessionRunsDropdown]]"
+        show-upload-button="[[showUploadButton]]"
     ></tf-graph-controls>
     <tf-graph-loader id="loader"
         datasets="[[datasets]]"
@@ -97,15 +103,24 @@ Polymer({
       value: 0
     },
     _renderHierarchy: Object,
-    _progress: Object
+    _progress: Object,
+    showSessionRunsDropdown: {
+      type: Boolean,
+      value: true
+    },
+    showUploadButton: {
+      type: Boolean,
+      value: true
+    }
   },
   created: function() {
     let queryParams = tf.graph.util.getQueryParams(location.search);
     let selectedDataset = 0;
 
-    if(typeof DEMO_DATASETS === 'undefined') {
+    if (typeof DEMO_DATASETS === 'undefined') {
       DEMO_DATASETS = 'demo_datasets.json';
     }
+
     d3.json(DEMO_DATASETS, function (error, datasets) {
         if (error) {
           console.log('Error loading demo datasets:');
@@ -134,6 +149,17 @@ Polymer({
         }
     }.bind(this));
   },
+  ready: function() {
+    if (typeof IS_OBSERVATORY !== 'undefined' && IS_OBSERVATORY) {
+      // Create the header and add it to the DOM. This component is injected in
+      // during vulcanization.
+      document.getElementById('observatory-header').appendChild(
+          document.createElement('tf-graph-observatory-header'));
+
+      this.set('showSessionRunsDropdown', false);
+      this.set('showUploadButton', false);
+    }
+  },
   _normalizePath: function(path) {
     return this.resolveUrl(DEMO_DIR_PREFIX + path);
   }
diff --git a/tensorflow/tensorboard/components/tf-graph/tf-graph-controls.html b/tensorflow/tensorboard/components/tf-graph/tf-graph-controls.html
index bf48f9fd90..3b90a8c6a4 100644
--- a/tensorflow/tensorboard/components/tf-graph/tf-graph-controls.html
+++ b/tensorflow/tensorboard/components/tf-graph/tf-graph-controls.html
@@ -244,25 +244,29 @@ span.counter {
       </paper-menu>
     </paper-dropdown-menu>
   </div>
-  <div class="control-holder">
-    <div class="title">Session runs <span class="counter">([[_numSessionRuns(metadataTags)]])</span></div>
-    <paper-dropdown-menu no-label-float no-animations noink class="run-dropdown">
-      <paper-menu id="select" class="dropdown-content" selected="{{selectedMetadataTag}}">
-        <template is="dom-repeat" items="[[metadataTags]]">
-          <paper-item>[[item.tag]]</paper-item>
-        </template>
-        <paper-item>None</paper-item>
-      </paper-menu>
-    </paper-dropdown-menu>
-  </div>
-  <div class="control-holder">
-    <div class="title">Upload</div>
-    <paper-button raised class="text-button upload-button"
-        on-click="_getFile">Choose File</paper-button>
-    <div class="hidden-input">
-      <input type="file" id="file" name="file" on-change="_updateFileInput" />
+  <template is="dom-if" if="[[showSessionRunsDropdown]]">
+    <div class="control-holder">
+      <div class="title">Session runs <span class="counter">([[_numSessionRuns(metadataTags)]])</span></div>
+      <paper-dropdown-menu no-label-float no-animations noink class="run-dropdown">
+        <paper-menu id="select" class="dropdown-content" selected="{{selectedMetadataTag}}">
+          <template is="dom-repeat" items="[[metadataTags]]">
+            <paper-item>[[item.tag]]</paper-item>
+          </template>
+          <paper-item>None</paper-item>
+        </paper-menu>
+      </paper-dropdown-menu>
     </div>
-  </div>
+  </template>
+  <template is="dom-if" if="[[showUploadButton]]">
+    <div class="control-holder">
+      <div class="title">Upload</div>
+      <paper-button raised class="text-button upload-button"
+          on-click="_getFile">Choose File</paper-button>
+      <div class="hidden-input">
+        <input type="file" id="file" name="file" on-change="_updateFileInput" />
+      </div>
+    </div>
+  </template>
   <div class="control-holder">
     <div class="title">
       Trace inputs
@@ -550,6 +554,14 @@ Polymer({
     _currentGradientParams: {
       type: Object,
       computed: '_getCurrentGradientParams(colorByParams, colorBy)'
+    },
+    showSessionRunsDropdown: {
+      type: Boolean,
+      value: true
+    },
+    showUploadButton: {
+      type: Boolean,
+      value: true
     }
   },
   listeners: {