Add multiple program support to tf_op_profile. (#1470)

1. Add a by_program toggle button to switch and see per program
hlo_op_profile or overall by category hlo_op_profile.
2. Add an idle node under the root profile to show the portion of the
total execution time on device that is idle.
3. Display the number of ops being left out.

Author: qiuminxu

tensorboard/plugins/profile/tf_op_profile/BUILD

@@ -13,6 +13,8 @@ tf_web_library(
         ":tf_op_details",
         ":tf_op_table",
         ":utils",
+        "@org_polymer_paper_slider",
+        "@org_polymer_paper_toggle_button",
     ],
 )
 
@@ -32,8 +34,6 @@ tf_web_library(
     path = "/tf-op-profile",
     deps = [
         ":utils",
-        "@org_polymer_paper_slider",
-        "@org_polymer_paper_toggle_button",
     ],
 )
 

tensorboard/plugins/profile/tf_op_profile/tf-op-details.html

@@ -112,11 +112,11 @@
     <paper-card id="card" heading="[[node.name]]" elevation="2">
       <div id="subheader">[[_subheader(node)]]</div>
       <div class="card-content">
-        <div hidden="[[!node.metrics]]">
+        <div hidden="[[!_hasFlops(node)]]">
           <b>FLOPS utilization: </b>
           <tf-op-bar value="[[_utilization(node)]]"></tf-op-bar>
         </div>
-        <div hidden="[[_hasMemoryUtilization(node)]]">
+        <div hidden="[[!_hasMemoryUtilization(node)]]">
           <b>Memory utilization: </b>
           <tf-op-bar value="[[_memoryUtilization(node)]]"></tf-op-bar>
         </div>
@@ -159,9 +159,8 @@
   },
   _utilization: tf_op_profile.utilization,
   _memoryUtilization: tf_op_profile.memoryUtilization,
-  _hasMemoryUtilization: function(node) {
-    return !node || !node.metrics || !node.metrics.memoryBandwidth;
-  },
+  _hasFlops: tf_op_profile.hasFlops,
+  _hasMemoryUtilization: tf_op_profile.hasMemoryUtilization,
   _updateCard: function(node) {
     if (!node) return;
     var color = tf_op_profile.flameColor(tf_op_profile.utilization(node), 0.7);

tensorboard/plugins/profile/tf_op_profile/tf-op-profile.html

@@ -15,6 +15,8 @@
     limitations under the License.
 -->
 
+<link rel="import" href="../paper-slider/paper-slider.html">
+<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="tf-op-table.html">
 <link rel="import" href="tf-op-details.html">
 <link rel="import" href="utils.html">
@@ -33,6 +35,36 @@
   display: block;
   margin-right: 1.5em;
 }
+#control {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  overflow:auto;
+  text-transform:uppercase;
+  padding: 0.5em;
+  vertical-align: bottom;
+  text-align: bottom;
+}
+.controlRowLeft {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  line-height: 50px;
+  text-align: bottom;
+  justify-content: flex-start;
+}
+.controlRowRight{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  line-height: 50px;
+  text-align: bottom;
+  justify-content: flex-end;
+}
+paper-slider {
+  --paper-slider-input: {width: 100px}
+  --paper-slider-height: 3px;
+}
 #description {
   margin-bottom: 2em;
   width: 600px;
@@ -45,9 +77,32 @@ <h4>Overall TPU FLOPS utilization is
       </h4>
       <div id="description">
         <p>Modifying your model's architecture, data dimensions, and improving
-        the efficiency of CPU operations may help reach the TPU's FLOPS potential.
-      </p></div>
-      <tf-op-table root-node="[[_root]]" active={{active}}></tf-op-table>
+        the efficiency of CPU operations may help reach the TPU's FLOPS
+        potential.
+        </p>
+        <p>"Idle" represents the portion of the total execution time on device
+        that is idle.</p>
+      </div>
+      <div id="control">
+        <span class="controlRowLeft" hidden="[[!_hasTwoProfiles]]">By Program
+          <paper-toggle-button checked={{isByCategory}}>
+          </paper-toggle-button>By Category</span>
+        <!--
+          paper-slider sets how many child nodes to show for each category.
+          If paper-toggle-button is checked, then only children in top 90th
+          percentile of time spent are listed.
+        -->
+        <span class="controlRowLeft">Show top
+          <paper-slider min="10" max="100" snaps step="10"
+              value="{{childrenCount}}" editable>
+          </paper-slider>ops</span>
+        <span class="controlRowRight">off&nbsp;
+          <paper-toggle-button checked={{showP90}}>
+          </paper-toggle-button>Top 90%</span>
+      </div>
+      <tf-op-table root-node="[[_root]]" active={{active}}
+                   show-p90="{{showP90}}" children-count="{{childrenCount}}">
+      </tf-op-table>
     </div>
   </template>
 
@@ -61,19 +116,58 @@ <h4>Overall TPU FLOPS utilization is
     },
     _root: {
       type: Object,
-      computed: '_getRoot(_data, "byCategory")',
       notify: true,
     },
     active: {
       type: Object,
       notify: true,
       value: null,
     },
+    _hasTwoProfiles: {
+      type: Boolean,
+      computed: '_checkProfiles(_data)',
+      notify: true,
+    },
+    isByCategory: {
+      type: Boolean,
+      value: false,
+      notify: true,
+    },
+    showP90: {
+      type: Boolean,
+      value: false,
+      notify: true,
+    },
+    childrenCount: {
+      type: Number,
+      value: 10,
+      notify: true,
+    },
+  },
+  observers: [
+    '_getRoot(_data, isByCategory)',
+  ],
+  _load: function(run) {
+    this._data = run;
+  },
+  _getRoot: function(data, isByCategory) {
+    if (!this._hasTwoProfiles) {
+      this._root = data['byCategory'] || data['byProgram'];
+    } else if (isByCategory) {
+      this._root = data['byCategory'];
+    } else {
+      this._root = data['byProgram'];
+    }
+  },
+  // Returns true if we have both byProgram and byCategory.
+  _checkProfiles: function(data) {
+    return data['byProgram'] != null && data['byCategory'] != null;
   },
-  _getRoot: function(data, breakdown) { return data[breakdown]; },
-  _utilizationPercent: function(node) { return tf_op_profile.percent(tf_op_profile.utilization(node)); },
+  _utilizationPercent: function(node) {
+      return tf_op_profile.percent(tf_op_profile.utilization(node)); },
   _hasFlops: function(node) { return node.metrics.flops > 0; },
-  _textColor: function(node) { return tf_op_profile.flameColor(tf_op_profile.utilization(node), 0.7); },
+  _textColor: function(node) {
+      return tf_op_profile.flameColor(tf_op_profile.utilization(node), 0.7); },
 });
   </script>
 </dom-module>

tensorboard/plugins/profile/tf_op_profile/tf-op-table.html

@@ -15,8 +15,6 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../paper-slider/paper-slider.html">
-<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="utils.html">
 
 <!-- tf-op-table-styles contains shared styles used in this file -->
@@ -64,41 +62,6 @@
   display: block;
   background-color: white;
 }
-#control {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-
-  overflow:auto;
-  text-transform:uppercase;
-  padding: 0.5em;
-  vertical-align: bottom;
-  text-align: bottom;
-}
-
-.controlRowLeft {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  line-height: 50px;
-  text-align: bottom;
-  justify-content: flex-start;
-}
-
-.controlRowRight{
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  line-height: 50px;
-  text-align: bottom;
-  justify-content: flex-end;
-}
-
-paper-slider {
-  --paper-slider-input: {width: 100px}
-  --paper-slider-height: 3px;
-}
-
 #header {
   font-size: smaller;
   font-weight: bold;
@@ -111,20 +74,6 @@
 /* Match indented names */
 #header > #name { padding-left: 2em; }
     </style>
-    <div id="control">
-    <!--
-      paper-slider sets how many child nodes to show for each category.
-      If paper-toggle-button is checked, then only children in top 90th
-      percentile of time spent are listed.
-    -->
-    <span class="controlRowLeft">Show top
-      <paper-slider min="10" max="100" snaps step="10"
-        value="{{childrenCount}}" editable>
-      </paper-slider>ops</span>
-    <span class="controlRowRight">off&nbsp;
-    <paper-toggle-button checked={{showP90}}>
-    </paper-toggle-button>Top 90%</span>
-    </div>
     <div id="header">
       <span id="time">Time</span>
       <span id="name">Name</span>
@@ -271,7 +220,7 @@
         </span>{{node.name}}
       </span>
       <span id="provenance">{{_provenance(node)}}&nbsp;</span>
-      <span id="utilization" hidden="[[!node.metrics]]"
+      <span id="utilization" hidden="[[!_hasFlops(node)]]"
         style$="background-color:{{_flameColor(node)}}">
         {{_utilization(node)}}</span>
     </div>
@@ -287,6 +236,12 @@
           header-click="{{headerClick}}">
         </tf-op-table-entry>
       </template>
+      <template is="dom-if" if="[[_hasLeftout(node, childrenCount, level)]]">
+        <span id="name" style$="padding-left:[[_getPaddingLeft(level)]]em;">
+          [[_numLeftout(node, childrenCount)]] categories or ops
+          have been left out.
+        </span>
+      </template>
     </template>
   </template>
 
@@ -345,6 +300,7 @@
   _utilization: function(node) {
     return tf_op_profile.percent(tf_op_profile.utilization(node));
   },
+  _hasFlops: tf_op_profile.hasFlops,
   _flameColor: function(node) {
     return tf_op_profile.flameColor(tf_op_profile.utilization(node), 1, 0.2);
   },
@@ -355,7 +311,7 @@
   _selectedChanged: function(v) { this.classList.toggle('selected', v); },
   /*
     Returns top K children for the node. If p90 is true, then only children
-    fallen in the top 90th percentile in time are returned. 
+    fallen in the top 90th percentile in time are returned.
   */
   _getKChildren: function(node, k, p90, level) {
     if (p90 && node.children.length > 0 && node.children[0].metrics) {
@@ -368,6 +324,16 @@
     }
     return level ? node.children.slice(0, k) : node.children;
   },
+  _hasLeftout: function(node, k, level) {
+   if (!level) return false;
+   return node.numChildren > Math.min(k, node.children.length);
+  },
+  _numLeftout: function(node, k) {
+   return node.numChildren - Math.min(k, node.children.length);
+  },
+  _getPaddingLeft: function(level) {
+   return level + 5;
+  },
 });
   </script>
 </dom-module>

tensorboard/plugins/profile/tf_op_profile/utils.ts

@@ -40,7 +40,7 @@ export function utilization(node: any) {
   // NaN indicates undefined utilization for fused operations (we can't measure
   // performance inside a fusion). It could also indicate operations with zero
   // time, but they currently don't appear in the profile.
-  if (!node || !node.metrics) return 0/0;
+  if (!node || !node.metrics || !node.metrics.time) return 0/0;
   return node.metrics.flops / node.metrics.time;
 }
 
@@ -51,6 +51,14 @@ export function memoryUtilization(node: any) {
   return node.metrics.memoryBandwidth;
 }
 
+export function hasMemoryUtilization(node: any) {
+  return node && node.metrics && node.metrics.memoryBandwidth;
+}
+
+export function hasFlops(node: any) {
+  return node && node.metrics && node.metrics.time;
+}
+
 export function percent(fraction: number) {
   if (isNaN(fraction)) return "-";
   return fraction >= 0.995 ? "100%" : fraction < 0.00001 ? "0.00%" :