Skip to content

Commit 3a131cd

Browse files
qiuminxuqiuminxu
committed
Address the required changes
1 parent 3b4373c commit 3a131cd

File tree

9 files changed

+636
-642
lines changed

9 files changed

+636
-642
lines changed

‎tensorboard/plugins/profile/pod_viewer/details_card/details-card.html‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<!--
22
@license
3-
Copyright 2016 The TensorFlow Authors. All Rights Reserved.
3+
Copyright 2019 The TensorFlow Authors. All Rights Reserved.
44
Licensed under the Apache License, Version 2.0 (the "License");
55
you may not use this file except in compliance with the License.
66
You may obtain a copy of the License at
77
http://www.apache.org/licenses/LICENSE-2.0
8-
Unless required by applicable law or agreed to in writing, software
9-
distributed under the License is distributed on an "AS IS" BASIS,
10-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11-
See the License for the specific language governing permissions and
12-
limitations under the License.
8+
Unless required by applicable law or agreed to in writing, software
9+
distributed under the License is distributed on an "AS IS" BASIS,
10+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
See the License for the specific language governing permissions and
12+
limitations under the License.
13+
==============================================================================
1314
-->
1415

1516
<!--
@@ -42,13 +43,13 @@
4243
font-size: 20px;
4344
font-weight: bold;
4445
}
45-
.codeStyle {
46+
.code-style {
4647
font-size: 14px;
4748
font-weight: normal;
4849
}
4950
</style>
5051
<template>
51-
<paper-card id="card" heading="[[name]] [[id]]"
52+
<paper-card id="card" heading="[[name]] [[id]]"
5253
hidden="[[!name]]" elevation="2">
5354
<template is="dom-repeat" items=[[nodes]] as="node">
5455
<div class="card-content info">
@@ -59,42 +60,42 @@
5960
<p>Data Transferred: <span class="value">
6061
[[sizeMiB_(node.dataSize)]] MiB</span></p>
6162
<p>Latency: <span class="value">
62-
[[format_(node.durationUs)]] Us</span></p>
63+
[[format_(node.durationUs)]] &mu;s</span></p>
6364
<p>BW: <span class="value">
6465
[[bw_(node.dataSize, node.durationUs)]] GiB/s</span></p>
6566
</div>
6667
<div hidden="[[!isChannel]]">
6768
<p>Send Delay: <span class="value">
68-
[[format_(node.sendDelayUs)]] Us</span></p>
69+
[[format_(node.sendDelayUs)]] &mu;s</span></p>
6970
<p>From: <span class="value">
7071
Chip[[chipId_(node.srcCoreId)]], Core[[nodeId_(node.srcCoreId)]]
7172
</span></p>
7273
<p>To: <span class="value">
7374
Chip[[chipId_(node.dstCoreId)]], Core[[nodeId_(node.dstCoreId)]]
7475
</span></p>
7576
<p>Hlo Names</p>
76-
<code class="codeStyle">
77+
<code class="code-style">
7778
<template is="dom-repeat" items=[[node.hloNames]]>"[[item]]"
7879
</template>
7980
</code>
8081
</div>
81-
<div hidden="[[!hasReplicaGroups]]">
82-
<h5>Replica Groups</h5>
83-
<code class="codeStyle">
84-
<template is="dom-repeat" items=[[node.replicaGroups]]>
85-
{[[item.replicaIds]]}<br>
82+
<div hidden="[[!hasReplicaGroups]]">
83+
<h5>Replica Groups</h5>
84+
<code class="code-style">
85+
<template is="dom-repeat" items=[[node.replicaGroups]]>
86+
{[[item.replicaIds]]}<br>
87+
</template>
88+
</code>
89+
</div>
90+
<div hidden="[[!isStepBreakdown]]">
91+
<template is="dom-repeat" items=[[stepBreakdownLayers]]>
92+
<h5> [[item.label]]: <span class="value">
93+
[[getStepBreakdownValue_(node, item.key)]] &mu;s
94+
([[getStepBreakdownPct_(node, item.key)]])</span></h5>
8695
</template>
87-
</code>
88-
</div>
89-
<div hidden="[[!isStepBreakdown]]">
90-
<template is="dom-repeat" items=[[stepBreakdownEle]]>
91-
<h5> [[item.label]]: <span class="value">
92-
[[getStepBreakdownValue_(node, item.key)]] Us
93-
([[getStepBreakdownPct_(node, item.key)]])</span></h5>
94-
</template>
95-
</div>
96-
</div>
97-
</template>
96+
</div>
97+
</div>
98+
</template>
9899
</paper-card>
99100
</template>
100101
<script src="details-card.js"></script>

‎tensorboard/plugins/profile/pod_viewer/details_card/details-card.ts‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Copyright 2015 The TensorFlow Authors. All Rights Reserved.
1+
/* Copyright 2019 The TensorFlow Authors. All Rights Reserved.
22
Licensed under the Apache License, Version 2.0 (the "License");
33
you may not use this file except in compliance with the License.
44
You may obtain a copy of the License at
@@ -12,6 +12,12 @@ limitations under the License.
1212

1313
namespace pod_viewer_details_card {
1414

15+
interface StepBreakdownNode {
16+
/* Examples 'highFlopsComputeUs', 'lowFlopsComputeUs', 'Send', 'Recv'*/
17+
[key: string]: number;
18+
totalDurationUs: number;
19+
}
20+
1521
Polymer({
1622
is: 'details-card',
1723
properties: {
@@ -46,8 +52,16 @@ Polymer({
4652
type: Boolean,
4753
value: false,
4854
},
49-
stepBreakdownEle: {
55+
stepBreakdownLayers: {
5056
type: Array,
57+
value: () => { return [
58+
{key: 'highFlopsComputeUs', label: 'High flops compute'},
59+
{key: 'lowFlopsComputeUs', label: 'Low flops compute'},
60+
{key: 'hostInfeedDurationUs', label: 'Infeed'},
61+
{key: 'hostOutfeedDurationUs', label: 'Outfeed'},
62+
{key: 'crsDurationUs', label: 'All reduce'},
63+
{key: 'sendDurationUs', label: 'Send'},
64+
{key: 'recvDurationUs', label: 'Recv'},]; },
5165
},
5266
},
5367
/**
@@ -129,7 +143,8 @@ Polymer({
129143
/**
130144
* Return a formatted value associated with a specific breakdown.
131145
*/
132-
getStepBreakdownValue_: function(node, key): string {
146+
getStepBreakdownValue_: function(node: undefined | StepBreakdownNode,
147+
key: undefined|string): string {
133148
if (!key || !node) {
134149
return '';
135150
}
@@ -138,23 +153,13 @@ Polymer({
138153
/**
139154
* Return a the percentage of a specific breakdown.
140155
*/
141-
getStepBreakdownPct_: function(node, key): string {
156+
getStepBreakdownPct_: function(node: undefined | StepBreakdownNode,
157+
key: undefined|string): string {
142158
if (!key || !node || !node.totalDurationUs) {
143159
return '';
144160
}
145161
return (node[key] / node.totalDurationUs * 100).toFixed(2) + '%';
146162
},
147-
ready() {
148-
this.stepBreakdownEle = [
149-
{key: 'highFlopsComputeUs', label: 'High flops compute'},
150-
{key: 'lowFlopsComputeUs', label: 'Low flops compute'},
151-
{key: 'hostInfeedDurationUs', label: 'Infeed'},
152-
{key: 'hostOutfeedDurationUs', label: 'Outfeed'},
153-
{key: 'crsDurationUs', label: 'All reduce'},
154-
{key: 'sendDurationUs', label: 'Send'},
155-
{key: 'recvDurationUs', label: 'Recv'}
156-
];
157-
},
158163
});
159164

160165
} // namespace pod_viewer_details_card

‎tensorboard/plugins/profile/pod_viewer/pod_viewer_dashboard/pod-viewer-dashboard.html‎

Lines changed: 55 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<!--
22
@license
3-
Copyright 2016 The TensorFlow Authors. All Rights Reserved.
3+
Copyright 2019 The TensorFlow Authors. All Rights Reserved.
44
Licensed under the Apache License, Version 2.0 (the "License");
55
you may not use this file except in compliance with the License.
66
You may obtain a copy of the License at
77
http://www.apache.org/licenses/LICENSE-2.0
8-
Unless required by applicable law or agreed to in writing, software
9-
distributed under the License is distributed on an "AS IS" BASIS,
10-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11-
See the License for the specific language governing permissions and
12-
limitations under the License.
8+
Unless required by applicable law or agreed to in writing, software
9+
distributed under the License is distributed on an "AS IS" BASIS,
10+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
See the License for the specific language governing permissions and
12+
limitations under the License.
13+
==============================================================================
1314
-->
1415

1516
<!--
@@ -33,13 +34,13 @@
3334
display: flex;
3435
flex-flow: row nowrap;
3536
justify-content: space-between;
36-
overflow:auto;
37-
text-transform:uppercase;
37+
overflow: auto;
38+
text-transform: uppercase;
3839
padding: 0.5em;
3940
vertical-align: bottom;
4041
text-align: bottom;
4142
}
42-
.controlRowLeft {
43+
.control-row-left {
4344
display: flex;
4445
margin-left: 16px;
4546
flex-flow: row nowrap;
@@ -52,71 +53,82 @@
5253
--paper-slider-input: {width: 100px}
5354
--paper-slider-height: 3px;
5455
}
55-
.stepNumText {
56+
.step-num-text {
5657
padding-left: 1em;
5758
font-size: 20px;
5859
font-weight: bold;
5960
}
60-
.stackTitle {
61+
.stack-title {
6162
font-size: 24px;
6263
line-height: 32px;
6364
}
65+
.bar-chart {
66+
overflow: auto;
67+
}
6468
#title {
6569
margin-left: 16px;
6670
}
71+
.error-message {
72+
color: red;
73+
font-size: 32 px;
74+
font-weight: bold;
75+
margin-left: 16px;
76+
margin-top: 32px;
77+
}
78+
6779
</style>
68-
<div id="control">
80+
<div class="error-message" hidden=[[!_error_message]]>
81+
<span>[[_error_message]]</span>
82+
</div>
83+
<div id="control" hidden=[[_error_message]]>
6984
<!--
7085
paper-slider sets which step to show.
7186
-->
72-
<span class="controlRowLeft">Please select a step
73-
<paper-slider min=0 max="[[maxStepId]]" snaps step="1"
87+
<span class="control-row-left">Please select a step
88+
<paper-slider min=0 max="[[_maxStepId]]" snaps step="1"
7489
value="{{curStepId}}">
75-
</paper-slider> <span class="stepNumText">Step [[stepNum]]</span>
90+
</paper-slider> <span class="step-num-text">
91+
Step [[_getStepNum(_podStats)]]</span>
7692
</span>
7793
</div>
78-
<div class="pod-viewer-dashboard">
94+
<div class="pod-viewer-dashboard" hidden=[[_error_message]]>
7995
<div id="topo-graph">
80-
<topology-graph
81-
run-environment_={{runEnvironment}}
82-
data_={{podStats}}
83-
metrics=[[stepBreakdownEle]]
84-
active-bar-chart-ele=[[activeBarChartEle]]
85-
selected-chip-id={{selectedChipId}}
86-
selected-channel={{selectedChannel}}>
87-
</topology-graph>
96+
<topology-graph run-environment=[[_runEnvironment]]
97+
data=[[_podStats]] metrics=[[_stepBreakdownLayers]]
98+
active-bar=[[activeBar]] selected-channel={{selectedChannel}}>
99+
</topology-graph>
88100
</div>
89-
<div id="channel-bars" style="overflow:auto" hidden="[[!channelDb]]">
101+
<div id="channel-bars" class="bar-chart" hidden="[[!_channelDb]]">
90102
<div id="title">
91-
<div class="stackTitle">Latency of Send and Recv channels</div>
103+
<div class="stack-title">Latency of Send and Recv channels</div>
92104
<p>(x-axis: channel id, y-axis: time(us))</p>
93105
</div>
94-
<stack-bar-chart id="channel-chart" data=[[channelDb]]
95-
stack-ele=[[channelEle]]
96-
x-domain-func=[[channelFunc]]
97-
active={{activeBarChartEle}}></stack-bar-chart>
106+
<stack-bar-chart id="channel-chart" data=[[_channelDb]]
107+
stack-layers=[[_channelLayers]]
108+
x-domain-func=[[_channelFunc]]
109+
active-bar={{activeBar}}></stack-bar-chart>
98110
</div>
99-
<div id="all-reduce-bars" style="overflow:auto" hidden="[[!allReduceDb]]">
111+
<div id="all-reduce-bars" class="bar-chart" hidden="[[!_allReduceDb]]">
100112
<div id="title">
101-
<div class="stackTitle">
113+
<div class="stack-title">
102114
Duration of all-reduce op or custom fusion for all-reduce</div>
103115
<p>(x-axis: short names for all-reduces ops (a#)
104116
or fusion (f#), y-axis: time(us))</p>
105117
</div>
106-
<stack-bar-chart id="all-reduce-chart" data=[[allReduceDb]]
107-
stack-ele=[[allReduceEle]]
108-
x-domain-func=[[allReduceFunc]]
109-
active={{activeBarChartEle}}></stack-bar-chart>
118+
<stack-bar-chart id="all-reduce-chart" data=[[_allReduceDb]]
119+
stack-layers=[[_allReduceLayers]]
120+
x-domain-func=[[_allReduceFunc]]
121+
active-bar={{activeBar}}></stack-bar-chart>
110122
</div>
111-
<div id="stack-bars" style="overflow:auto" hidden="[[!stepStats]]">
123+
<div id="stack-bars" class="bar-chart" hidden="[[!_stepStats]]">
112124
<div id="title">
113-
<div class="stackTitle">Step breakdown</div>
114-
<p>(x-axis: global chip id, core id, y-axis: time(us)</p>
125+
<div class="stack-title">Step breakdown</div>
126+
<p>(x-axis: global chip id, core id, y-axis: time(us))</p>
115127
</div>
116-
<stack-bar-chart id="stack-bar-chart" data=[[stepStats]]
117-
stack-ele=[[stepBreakdownEle]]
118-
x-domain-func=[[stepBreakdownFunc]]
119-
active={{activeBarChartEle}}></stack-bar-chart>
128+
<stack-bar-chart id="stack-bar-chart" data=[[_stepStats]]
129+
stack-layers=[[_stepBreakdownLayers]]
130+
x-domain-func=[[_stepBreakdownFunc]]
131+
active-bar={{activeBar}}></stack-bar-chart>
120132
</div>
121133
</div>
122134
</template>

0 commit comments

Comments
 (0)