Skip to content

Commit

Permalink
- Rename the "Help" button to "Hotkeys" to be more intuitive
Browse files Browse the repository at this point in the history
- Adjust analysis section style, to ensure each panel will always be displayed in the initial view window properly, making sure user will see the links section
- Added tools label to the links, so it's more intuitive what the links are

PiperOrigin-RevId: 570112409
zzzaries authored and copybara-github committed Oct 2, 2023
1 parent 325e1e8 commit 37244f5
Showing 1 changed file with 15 additions and 7 deletions.
22 changes: 15 additions & 7 deletions plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html
Original file line number Diff line number Diff line change
@@ -56,6 +56,7 @@
}

tr-ui-b-tab-view {
height: fit-content;
float: left;
flex: 1;
}
@@ -96,6 +97,8 @@

#analysis {
flex-flow: row nowrap;
/* make vertical drag handle and the tabs covering the whole content height */
height: fit-content;
}

#eventSummaryTable table.tr-ui-b-table {
@@ -128,6 +131,11 @@
white-space: normal;
}

tr-ui-a-generic-object-view {
/* Help break the long op name */
overflow-wrap: anywhere;
}

</style>

<div class="no-webcomponents-container hidden">
@@ -413,7 +421,7 @@
graphViewLink.searchParams.append("module_name", hloModule);
}
const graphViewLinkElement = document.createElement('div');
graphViewLinkElement.innerHTML = '<a href="' + graphViewLink.href +
graphViewLinkElement.innerHTML = 'Graph Viewer:<a href="' + graphViewLink.href +
'" target="_blank"> see hlo graph for ' +
hloOp + '@' + hloModule + '</a>';
this._eventDetails.appendChild(graphViewLinkElement);
@@ -422,7 +430,7 @@
hloOpStatsLink.searchParams.append("hlo_op_name", hloOp);
hloOpStatsLink.searchParams.append("program_id", hloModule);
const hloOpStatsLinkElement = document.createElement('div');
hloOpStatsLinkElement.innerHTML = '<a href="' + hloOpStatsLink.href +
hloOpStatsLinkElement.innerHTML = 'Hlo Stats:<a href="' + hloOpStatsLink.href +
'" target="_blank"> see hlo stats for ' +
hloOp + '@' + hloModule + '</a>';
hloOpStatsLinkElement.addEventListener('click', () => {
@@ -446,7 +454,7 @@
graphViewLink.searchParams.append("symbol_type", "MLIR_MODULE");
graphViewLink.searchParams.append("type", "pbtxt");
const graphViewLinkElement = document.createElement('div');
graphViewLinkElement.innerHTML = '<a href="' + graphViewLink.href +
graphViewLinkElement.innerHTML = 'Graph Viewer:<a href="' + graphViewLink.href +
'" target="_blank"> see the TF MLIR graph </a>';
this._eventDetails.appendChild(graphViewLinkElement);
}
@@ -459,7 +467,7 @@
graphViewLink.searchParams.append("symbol_type", "MLIR_MODULE");
graphViewLink.searchParams.append("type", "pbtxt");
const graphViewLinkElement = document.createElement('div');
graphViewLinkElement.innerHTML = '<a href="' + graphViewLink.href +
graphViewLinkElement.innerHTML = 'Graph Viewer:<a href="' + graphViewLink.href +
'" target="_blank"> see the TFRT MLIR graph </a>';
this._eventDetails.appendChild(graphViewLinkElement);
}
@@ -474,7 +482,7 @@
"selected_group_ids", event.args['connected_group_ids']);
this._addSelectedHostIndexToURL(traceViewerConnectedEventsLink);
const traceViewerConnectedEventsLinkElement = document.createElement('div');
traceViewerConnectedEventsLinkElement.innerHTML = '<a href="' +
traceViewerConnectedEventsLinkElement.innerHTML = 'Trace Viewer:<a href="' +
traceViewerConnectedEventsLink.href +
'" target="_blank"> see events for step/group ' +
event.args['group_id'] +
@@ -486,7 +494,7 @@
traceViewerStepLink.searchParams.append("selected_group_ids", event.args['group_id']);
this._addSelectedHostIndexToURL(traceViewerStepLink);
const traceViewerStepLinkElement = document.createElement('div');
traceViewerStepLinkElement.innerHTML = '<a href="' + traceViewerStepLink.href +
traceViewerStepLinkElement.innerHTML = 'Trace Viewer:<a href="' + traceViewerStepLink.href +
'" target="_blank"> see events ONLY for this step/group ' +
event.args['group_id'];
this._eventDetails.appendChild(traceViewerStepLinkElement);
@@ -612,7 +620,7 @@
const helpButton = document.getElementById('view_help_button');
helpButton.setAttribute('style', 'padding-left:5px;padding-right:5px;');
if (helpButton.children && helpButton.children.length && helpButton.children[0].textContent) {
helpButton.children[0].textContent = 'Help';
helpButton.children[0].textContent = 'Key Shortcuts';
}
const perfettoSelector = document.getElementById("perfetto");
Polymer.dom(this._traceViewer.leftControls).insertBefore(helpButton, perfettoSelector);

0 comments on commit 37244f5

Please sign in to comment.