[Debugger Plugin]: Add clickable links to Session.runs table (#800)

Clicking a node or tensor in the table focuses on the corresponding node
in the graph visualizer, if it exists.

Author: caisq

tensorboard/plugins/debugger/tf_debugger_dashboard/tf-debugger-dashboard.html

@@ -76,25 +76,25 @@ <h2>Continue...</h2>
               force-expansion-node-name="[[_forceExpansionNodeName]]">
           </tf-op-selector>
         </div>
-        <div class="sidebar-section">
+        <div>
           <tf-session-runs-view
             id="sessionRunsView"
             latest-session-run="[[_latestSessionRun]]"
             session-run-key-to-device-names="[[_sessionRunKey2DeviceNames]]"
-            sole-active="[[_sessionRunSoleActive]]">
+            sole-active="[[_sessionRunSoleActive]]"
+            node-or-tensor-clicked="[[_createFeedFetchTargetClickedHandler()]]">
           </tf-session-runs-view>
-          <br/>
-          <div>
-              <paper-button raised class="continue-button" on-click="_step">
-                  <span>[[_stepButtonText]]</span>
-              </paper-button>
-              <paper-button
-                  raised
-                  class="continue-button"
-                  on-click="_openContinueDialog">
-                  <span>[[_continueButtonText]]</span>
-              </paper-button>
-          </div>
+        </div>
+        <div>
+          <paper-button raised class="continue-button" on-click="_step">
+              <span>[[_stepButtonText]]</span>
+          </paper-button>
+          <paper-button
+              raised
+              class="continue-button"
+              on-click="_openContinueDialog">
+              <span>[[_continueButtonText]]</span>
+          </paper-button>
         </div>
         <div class="container">
           <tf-graph-loader id="loader"
@@ -151,7 +151,7 @@ <h2>Continue...</h2>
         </div>
 
         <div id="tensor-data" class="tensor-data">
-          <div class="debugger-section-title">Tensor Value Summary</div>
+          <div class="debugger-section-title">Tensor Value Overview</div>
           <tf-tensor-data-summary
             latest-tensor-data="[[_latestTensorData]]"
             expand-handler="[[_createTensorDataExpandHandler()]]">
@@ -221,6 +221,10 @@ <h2>Continue...</h2>
         max-width: 540px;
         margin: 80px auto 0 auto;
       }
+      .sidebar {
+        position: relative;
+        height: 100%;
+      }
       .center {
         position: relative;
         height: 100%;
@@ -627,7 +631,8 @@ <h2>Continue...</h2>
               const gatedGrpcTensors = response['gated_grpc_tensors'][deviceName];
               for (let i = 0; i < gatedGrpcTensors.length; ++i) {
                 debugWatches.push(
-                    {'node_name': deviceName + '/' + gatedGrpcTensors[i][0],
+                    {'device_name': deviceName,
+                     'node_name': gatedGrpcTensors[i][0],
                      'op_type': gatedGrpcTensors[i][1],
                      'output_slot': gatedGrpcTensors[i][2],
                      'debug_op': gatedGrpcTensors[i][3]});
@@ -658,18 +663,45 @@ <h2>Continue...</h2>
           const state = checked ? 'break' : 'disable';
           // TODO(cais): Investigate why this is fired twice sometimes.
           this._requestBreakpointStateChange(
-              tf_debugger_dashboard.getCleanNodeName(debugObject.node_name),
+              tf_debugger_dashboard.getCleanNodeName(
+                  debugObject.device_name + '/' + debugObject.node_name),
               debugObject.output_slot, debugObject.debug_op, state);
         });
       },
+      _focusOnGraphNode(deviceName, nodeName) {
+        if (deviceName != null &&
+            this._activeRuntimeGraphDeviceName !== deviceName) {
+          this.set('_activeRuntimeGraphDeviceName', deviceName);
+        }
+        this._setTopRightRuntimeGraphsToActive();
+        this.$$('#graph').set('selectedNode', nodeName);
+      },
       _createListNodeClickedHandler() {
         return((deviceName, nodeName) => {
-          if (deviceName != null &&
-              this._activeRuntimeGraphDeviceName !== deviceName) {
-            this.set('_activeRuntimeGraphDeviceName', deviceName);
+          this._focusOnGraphNode(deviceName, nodeName);
+        });
+      },
+      _createFeedFetchTargetClickedHandler() {
+        return((graphElementName) => {
+          let nodeName = graphElementName;
+          // If it is a tensor name, get the node name.
+          if (nodeName.indexOf(':') !== -1) {
+            nodeName = nodeName.slice(0, nodeName.indexOf(':'));
+          }
+          // Find the debug watch that matches the clicked node.
+          const matchingDebugWatch = _.find(this._debugWatches, debugWatch => {
+            // Take into account the possibility of base-expanded node names.
+            return (debugWatch.node_name === nodeName ||
+                debugWatch.node_name.indexOf(nodeName) === 0 &&
+                debugWatch.node_name[nodeName.length] === '(');
+          });
+          if (matchingDebugWatch == null) {
+            this._showToast(
+              'Node \'' + nodeName + '\' is not in the runtime graph of the ' +
+              'current Session.run or does not have a debug op attached.');
+          } else {
+            this._focusOnGraphNode(matchingDebugWatch.device_name, nodeName);
           }
-          this._setTopRightRuntimeGraphsToActive();
-          this.$$('#graph').set('selectedNode', nodeName);
         });
       },
 

tensorboard/plugins/debugger/tf_debugger_dashboard/tf-op-selector.html

@@ -31,7 +31,7 @@
   <template>
     <div>
       <paper-dropdown-menu
-        id="f-mode"
+        id="filter-mode"
         no-label-float="true"
         label="Filter Mode"
         selected-item-label="{{_filterMode}}"
@@ -82,6 +82,10 @@
         cursor: pointer;
       }
 
+      :host .op-title-leaf:hover {
+        color: blue;
+      }
+
       :host .partial-checkbox {
         background: #f57c00;
       }
@@ -109,14 +113,18 @@
       }
 
       :host #filter-mode {
-        width: 100px;
+        width: 150px;
         display: inline-block;
       }
 
       :host #filter-input {
         width: 250px;
         display: inline-block;
       }
+
+      #selector-hierarchy {
+        width: 100%;
+      }
     </style>
   </template>
   <script src="selection-tree-node.js"></script>
@@ -125,8 +133,9 @@
   Polymer({
     is: "tf-op-selector",
     properties: {
-      // A list of debug watches. A debug watch object has 3 properties:
-      // node_name (string), output_slot (number), and debug_op (string).
+      // A list of debug watches. A debug watch object has 4 properties:
+      // device_name (string), node_name (string), output_slot (number), and
+      // debug_op (string).
       debugWatches: Array,
       // A function called when a debug watch is toggled. This function takes
       // the click event.
@@ -204,7 +213,8 @@
       hierarchy.isRoot = true;
 
       _.forEach(filteredDebugWatches, debugWatch => {
-        const portions = tf_debugger_dashboard.splitNodeName(debugWatch.node_name);
+        const nodeNameWithDevice = debugWatch.device_name + '/' + debugWatch.node_name;
+        const portions = tf_debugger_dashboard.splitNodeName(nodeNameWithDevice);
         // Start at the highest level.
         let currentNode = hierarchy;
         _.forEach(portions, (portion, i) => {
@@ -237,6 +247,10 @@
     },
 
     _renderHierarchyWithTimeout(watchHierarchy, debugWatchChange, filterMode, filterInput) {
+      if (this._isLoading) {
+        // Wait till the ongoing rendering finishes.
+        return;
+      }
       this._clearSelectorHierarchy();
       this.set('_isLoading', true);
       setTimeout(() => {
@@ -457,10 +471,11 @@
     },
 
     _handleLeafNodeSelected(debugWatchChangeMethod, debugWatch, isChecked) {
+      const nodeNameWidthDevice = debugWatch.device_name + '/' + debugWatch.node_name;
       if (isChecked) {
-        this._selectedDebugWatchMapping[debugWatch.node_name] = debugWatch;
+        this._selectedDebugWatchMapping[nodeNameWidthDevice] = debugWatch;
       } else {
-        delete this._selectedDebugWatchMapping[debugWatch.node_name];
+        delete this._selectedDebugWatchMapping[nodeNameWidthDevice];
       }
       debugWatchChangeMethod(debugWatch, isChecked);
     },

tensorboard/plugins/debugger/tf_debugger_dashboard/tf-session-runs-view.html

@@ -23,7 +23,7 @@
 -->
 <dom-module id="tf-session-runs-view">
   <template>
-    <div id="tensor-data-div" class="tensor-data-div">
+    <div class="session-runs-div">
       <div class="section-title">Session Runs</div>
       <table id="session-runs-table" align="left" class="session-runs-table">
         <tr align="left">
@@ -43,15 +43,18 @@
       :host .indented-level-container .content-container {
         margin: 0 0 0 10px;
       }
+
       /* TODO(cais): This needs work: the table shouldn't get too wide when
          there are many feeds/fetches/targte names. */
       .session-runs-table {
         align-content: left;
         align-items: left;
         text-align: left;
+        font-size: 90%;
         border-style: solid 1px black;
-        width: 400px;
         table-layout: fixed;
+        min-width: 400px;
+        max-width: 450px;
         word-break: break-all;
         padding-top: 3px;
         padding-left: 3px;
@@ -66,6 +69,15 @@
         background-color: rgb(172, 232, 188);
         font-weight: bold;
       }
+
+      .node-or-tensor-element {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      .node-or-tensor-element:hover {
+        color: blue;
+      }
     </style>
   </template>
   <script>
@@ -87,6 +99,9 @@
       // breakpoint being active.
       soleActive: Boolean,
 
+      // A function called when a node or tensor in the list is clicked.
+      nodeOrTensorClicked: Function,
+
       // A map from session.run key to count of how many the session.run's
       // execution has started.
       _runKey2Count: {
@@ -184,12 +199,9 @@
       // clickable links, which when clicked, will focus on the corresponding
       // node in the Graph View and/or highlight corresponding tensors in the
       // Tensor Summary View and the Tensor Value View.
-      const feedsCell = document.createElement('td');
-      feedsCell.textContent = JSON.stringify(sessionRun.feeds);
-      const fetchesCell = document.createElement('td');
-      fetchesCell.textContent = JSON.stringify(sessionRun.fetches);
-      const targetsCell = document.createElement('td');
-      targetsCell.textContent = JSON.stringify(sessionRun.targets);
+      const feedsCell = this._renderGraphElements(sessionRun.feeds);
+      const fetchesCell = this._renderGraphElements(sessionRun.fetches);
+      const targetsCell = this._renderGraphElements(sessionRun.targets);
       const numDevicesCell = document.createElement('td');
       numDevicesCell.textContent = numDevices;
       const countCell = document.createElement('td');
@@ -211,6 +223,20 @@
 
       Polymer.dom(this.$$('#session-runs-table')).appendChild(sessionRunRow);
     },
+
+    _renderGraphElements(graphElements) {
+      const container = document.createElement('td');
+      _.forEach(graphElements, element => {
+        const elementDiv = document.createElement('div');
+        elementDiv.textContent = element;
+        elementDiv.setAttribute('class', 'node-or-tensor-element');
+        elementDiv.addEventListener('click', () => {
+          this.nodeOrTensorClicked(element);
+        });
+        container.appendChild(elementDiv);
+      });
+      return container;
+    }
   });
   </script>
 </dom-module>