Made the logdir argument used to start up Tensorboard appear under the TOGGLE ALL RUNS button.

As part of this effort, made the handler respond with a JSON object with a single key 'logdir' containing the value. It seems like the request manager parses JSON. Previously, the endpoint returned a raw string that was the logdir argument.

Updated screen diff integration tests.
Change: 135722994

tensorflow/tensorboard/backend/handler.py

@@ -177,7 +177,7 @@ class TensorboardHandler(BaseHTTPServer.BaseHTTPRequestHandler):
   def _serve_logdir(self, unused_query_params):
     """Writes out the logdir argument with which this tensorboard was started.
     """
-    self.respond(self._logdir, 'text/plain')
+    self.respond({'logdir': self._logdir}, 'application/json')
 
   def _serve_scalars(self, query_params):
     """Given a tag and single run, return array of ScalarEvents.

tensorflow/tensorboard/backend/server_test.py

@@ -102,10 +102,9 @@ class TensorboardServerTest(tf.test.TestCase):
     self.assertEqual(response.status, 400)
 
   def testLogdir(self):
-    """Test the status code and content of the data/logdir endpoint."""
-    response = self._get('/data/logdir')
-    self.assertEqual(response.status, 200)
-    self.assertEqual(response.read().decode('utf-8'), '/foo/logdir/argument')
+    """Test the format of the data/logdir endpoint."""
+    parsed_object = self._getJson('/data/logdir')
+    self.assertEqual(parsed_object, {'logdir': '/foo/logdir/argument'})
 
   def testRuns(self):
     """Test the format of the /data/runs endpoint."""

tensorflow/tensorboard/components/tf-backend/backend.ts

@@ -24,9 +24,11 @@ module TF.Backend {
     run_metadata: string[];
   }
 
+  export interface LogdirResponse { logdir: string; }
+
   export interface RunsResponse { [runName: string]: RunEnumeration; }
 
-  export type RunToTag = {[run: string]: string[]};
+  export type RunToTag = {[run: string]: string[];};
 
   export interface Datum {
     wall_time: Date;
@@ -90,11 +92,18 @@ module TF.Backend {
      * @param requestManager The RequestManager, overwritable so you may
      * manually clear request queue, etc. Defaults to a new RequestManager.
      */
-    constructor(r: Router, requestManager?: RequestManager) {
-      this.router = r;
+    constructor(router: Router, requestManager?: RequestManager) {
+      this.router = router;
       this.requestManager = requestManager || new RequestManager();
     }
 
+    /**
+     * Returns a promise for requesting the logdir string.
+     */
+    public logdir(): Promise<LogdirResponse> {
+      return this.requestManager.request(this.router.logdir());
+    }
+
     /**
      * Returns a listing of all the available data in the TensorBoard backend.
      */

tensorflow/tensorboard/components/tf-backend/router.ts

@@ -16,6 +16,7 @@ module TF.Backend {
   export type RunTagUrlFn = (tag: string, run: string) => string;
 
   export interface Router {
+    logdir: () => string;
     runs: () => string;
     scalars: RunTagUrlFn;
     histograms: RunTagUrlFn;
@@ -86,6 +87,7 @@ module TF.Backend {
       return url;
     }
     return {
+      logdir: () => dataDir + '/logdir',
       runs: () => dataDir + '/runs' + (demoMode ? '.json' : ''),
       individualImage: individualImageUrl,
       individualAudio: individualAudioUrl,

tensorflow/tensorboard/components/tf-dashboard-common/tf-run-selector.html

@@ -53,6 +53,11 @@ Properties out:
     >
     Toggle All Runs
     </paper-button>
+    <template
+      is="dom-if"
+      if="[[logdir]]">
+      <div id="logdir" inner-h-t-m-l="{{_breakAtSlashes(logdir)}}"></div>
+    </template>
     <style>
       :host {
         display: flex;
@@ -65,7 +70,6 @@ Properties out:
         flex-grow: 0;
         flex-shrink: 0;
         padding-right: 16px;
-        padding-bottom: 6px;
         box-sizing: border-box;
         color: var(--paper-grey-800);
       }
@@ -77,7 +81,6 @@ Properties out:
       .x-button {
         font-size: 13px;
         background-color: var(--tb-ui-light-accent);
-        margin-top: 5px;
         color: var(--tb-ui-dark-accent);
       }
       #tooltip-help {
@@ -90,20 +93,45 @@ Properties out:
       paper-button {
         margin-left: 0;
       }
+      #logdir {
+        color: var(--tb-ui-dark-accent);
+        font-size: 13px;
+        margin: 5px 0 0 0;
+        max-width: 288px;
+      }
     </style>
   </template>
   <script>
   Polymer({
     is: "tf-run-selector",
     properties: {
+      backend: Object,
       outSelected: {type: Array, notify: true},
       // runs: an array of strings, representing the run names that may be chosen
       runs: Array,
       colorScale: Object, // TF.ColorScale
+      logdir: {
+        type: String,
+        notify: true,
+      },
+    },
+    ready: function() {
+      // Populate the logdir.
+      this.backend.logdir().then(logdirObject => {
+        this.set('logdir', logdirObject.logdir);
+      }).catch(e => {
+        // Fetching the logdir failed. Prevent the exception from logging to
+        // console. The console already logs a 404 network event.
+      });
     },
     _toggleAll: function() {
       this.$.multiCheckbox.toggleAll();
     },
+    // Makes a string only be broken at the right of slashes instead of in front
+    // of any arbitrary character.
+    _breakAtSlashes: function(originalString) {
+      return originalString.replace(/\//g, '/<wbr>');
+    },
   });
   </script>
 </dom-module>

tensorflow/tensorboard/components/tf-dashboard-common/tf-sidebar-helper.html

@@ -28,6 +28,7 @@ To use it, create the tf-sidebar-helper with the required properties. To extend
 it with extra configuration components, add them to the element's component:
 
 <tf-sidebar-helper
+  backend: "[[backend]]",
   categories: "{{outputCategories}}",
   colorScale: "[[colorScale]]",
   run2tag: "[[run2tag]]",
@@ -62,7 +63,8 @@ tf-run-selector.
     <content></content>
     <div class="sidebar-section">
       <tf-run-selector
-        id="runSelector"g4
+        id="runSelector"
+        backend="[[backend]]"
         runs="[[runs]]"
         color-scale="[[colorScale]]"
         out-selected="{{selectedRuns}}"
@@ -110,6 +112,11 @@ tf-run-selector.
     Polymer({
       is: "tf-sidebar-helper",
       properties: {
+        /**
+         * The backend object used to issue requests.
+         */
+        backend: Object,
+
         /**
          * This is an output of the categories that the user selected to
          * separate the different tags. Each category here should be given its

tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html

@@ -55,6 +55,7 @@ contains tf-distribution-charts embedded inside tf-panes-helper's.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -106,6 +107,7 @@ contains tf-distribution-charts embedded inside tf-panes-helper's.
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         _xType: {
           type: String,
           value: "step"

tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html

@@ -59,6 +59,7 @@ contains vz-line-charts embedded inside tf-panes-helper's.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -181,6 +182,7 @@ contains vz-line-charts embedded inside tf-panes-helper's.
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "scalar"

tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html

@@ -57,6 +57,7 @@ contains vz-histogram-timeseries embedded inside tf-panes-helper's.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -126,6 +127,7 @@ contains vz-histogram-timeseries embedded inside tf-panes-helper's.
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "histogram"

tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html

@@ -39,6 +39,7 @@ tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -77,6 +78,7 @@ tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
     Polymer({
       is: "tf-image-dashboard",
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "image"

tensorflow/tensorboard/http_api.md

@@ -30,8 +30,11 @@ is provided to the summary op (usually as a constant).
 
 ## `data/logdir`
 
-Returns the `logdir` argument (string) with which Tensorboard started up. That
-argument is the full path of the directory that contains events files.
+Returns a JSON object with a key "logdir" that maps to the `logdir` argument
+(string) with which Tensorboard started up. Example:
+`{logdir: '/foo/logdir/argument'}`
+
+The `logdir` argument is the path of the directory that contains events files.
 
 ## `data/runs`