Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 11, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 54 additions & 22 deletions tensorboard/plugins/debugger/tf_debugger_dashboard/tf-debugger-dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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()]]">
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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]});
Expand Down Expand Up @@ -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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional: Maybe compute once and reuse value.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This computation is pretty cheap. So I'd rather save the space.

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);
});
},

Expand Down
29 changes: 22 additions & 7 deletions tensorboard/plugins/debugger/tf_debugger_dashboard/tf-op-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}"
Expand Down Expand Up @@ -82,6 +82,10 @@
cursor: pointer;
}

:host .op-title-leaf:hover {
color: blue;
}

:host .partial-checkbox {
background: #f57c00;
}
Expand Down Expand Up @@ -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>
Expand All @@ -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.
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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);
},
Expand Down
42 changes: 34 additions & 8 deletions tensorboard/plugins/debugger/tf_debugger_dashboard/tf-session-runs-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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;
Expand All @@ -66,6 +69,15 @@
background-color: rgb(172, 232, 188);
font-weight: bold;
}

.node-or-tensor-element {
text-decoration: underline;
cursor: pointer;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional: Add a .node-or-tensor-element:hover effect to emphasize how an item is clickable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion. I did this for all clickable elements currently present in the Debugger Plugin.

}

.node-or-tensor-element:hover {
color: blue;
}
</style>
</template>
<script>
Expand All @@ -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: {
Expand Down Expand Up @@ -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');
Expand All @@ -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>