Make list of devices display correctly when coloring by "Device", "Compute", or "Memory" (#901)

Fixes two polymer bugs/misuses:
  dom-repeat items can't be intialized from a function call that takes a property
  dom-repeat can't be used with table rows.

Additionally, the device checkboxes:
  now display the trimmed item suffix
  is aligned with item suffix

* Syntax/convention update

1) Made devices-checkbox a class, and included this class in the DIV containing the device checkboxes
2) Removed the inline style (style="text-align:left;vertical-align:middle") for the device checkbox, and used the CSS class "devices-checkbox" in its place.

Author: cvinson830

tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.html

@@ -200,6 +200,15 @@
   stroke: var(--tb-graph-faded);
 }
 
+#unfilled-rect {
+  stroke: #a6a6a6;
+}
+
+.devices-checkbox input {
+  text-align: left;
+  vertical-align: middle
+}
+
 .button-text {
   text-transform: none;
   padding: 8px 18px 0 18px;
@@ -285,6 +294,10 @@
        <use xmlns:xlink="http://www.w3.org/1999/xlink"
             xlink:href="#legend-rect"/>
      </g>
+     <g id="unfilled-rect">
+       <use xmlns:xlink="http://www.w3.org/1999/xlink"
+            xlink:href="#legend-rect"/>
+     </g>
   </defs>
 </svg>
 <div class="allcontrols">
@@ -412,24 +425,16 @@
       <br style="clear: both">
       <div>Devices included in stats:</div>
       <div class="deviceList">
-        <table>
-        <template is="dom-repeat" items="[[_getDevices(devicesForStats)]]">
-          <tr>
-            <td>
-              <input type="checkbox" value$="[[item.device]]" checked$="[[item.used]]" on-click="_deviceCheckboxClicked"/>
-            </td>
-            <td>
-              <div>
-                <span>[[item.suffix]]</span>
-                <template is="dom-if" if="[[item.ignoredMsg]]">
-                  <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
-                  <paper-tooltip position="right" animation-delay="0">[[item.ignoredMsg]]</paper-tooltip>
-                </template>
-              </div>
-            </td>
-          </tr>
+        <template is="dom-repeat" items="[[_currentDevices]]">
+          <div class="color-legend-row devices-checkbox">
+            <span><input type="checkbox" value$="[[item.device]]" checked$="[[item.used]]" on-click="_deviceCheckboxClicked"/></span>
+            <span>[[item.suffix]]</span>
+            <template is="dom-if" if="[[item.ignoredMsg]]">
+              <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
+              <paper-tooltip position="right" animation-delay="0">[[item.ignoredMsg]]</paper-tooltip>
+            </template>
+          </div>
         </template>
-        </table>
       </div>
     </template>
     <template is="dom-if" if="[[_equals(colorBy, 'structure')]]">
@@ -450,22 +455,16 @@
       </div>
     </template>
     <template is="dom-if" if="[[_equals(colorBy, 'device')]]">
-      <div class="color-text">
-        <div class="deviceList">
-          <table>
-          <template is="dom-repeat" items="[[colorByParams.device]]">
-            <tr>
-              <td style$="[[_getBackgroundColor(item.color)]]">
-                <div class="colorBox"></div>
-              </td>
-              <td>
-                <div>[[item.device]]</div>
-              </td>
-            </tr>
-          </template>
-          </table>
-        </div>
-        <br/>
+      <div>
+        <template is="dom-repeat" items="[[_currentDeviceParams]]">
+          <div class="color-legend-row">
+            <svg>
+              <use xmlns:xlink="http://www.w3.org/1999/xlink"
+                   xlink:href="#unfilled-rect" x="0" y="0" style="fill:[[item.color]]"/>
+            </svg>
+            <span class="color-legend-value">[[item.device]]</span>
+          </div>
+        </template>
         <div class="color-legend-row">
           <svg>
             <use xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -479,7 +478,7 @@
       <div class="color-text">
         <div class="xlaClusterList">
           <table>
-          <template is="dom-repeat" items="[[colorByParams.xla_cluster]]">
+          <template is="dom-repeat" items="[[_currentXlaClusterParams]]">
             <tr>
               <td style$="[[_getBackgroundColor(item.color)]]">
                 <div class="colorBox"></div>
@@ -730,16 +729,26 @@
 <script>
 (function() { // Private scope.
 /**
- * Stats from device names that match these regexes will be excluded by default.
- * The user can still turn on a device by selecting the checkbox in the device list.
+ * Display only devices matching one of the following regex.
  */
-var DEVICE_NAMES_EXCLUDE = [
+var DEVICE_NAMES_INCLUDE = [
   {
-    regex: /gpu:[0-9]+$/,
-    msg: 'Excluded by default since this is a CPU thread setting up GPU kernels.'
+    // Don't include GPU stream, memcpy, etc. devices
+    regex: /device:[^:]+:[0-9]+$/,
   }
 ];
 
+/**
+ * Stats from device names that match these regexes will be disabled by default.
+ * The user can still turn on a device by selecting the checkbox in the device list.
+ */
+var DEVICE_STATS_DEFAULT_OFF = [
+//  {
+//    regex: //,
+//    msg: 'Excluded by default since...'
+//  }
+];
+
 Polymer({
   is: 'tf-graph-controls',
   properties: {
@@ -761,7 +770,11 @@
       notify: true,
       readonly: true
     },
-    colorByParams: Object,
+    colorByParams: {
+      type: Object,
+      notify: true,
+      readonly: true,
+    },
     datasets: {
       type: Array,
       observer: '_datasetsChanged'
@@ -789,6 +802,18 @@
       notify: true,
       value: -1
     },
+    _currentDevices: {
+      type: Array,
+      computed: '_getCurrentDevices(devicesForStats)'
+    },
+    _currentDeviceParams: {
+      type: Array,
+      computed: '_getCurrentDeviceParams(colorByParams)'
+    },
+    _currentXlaClusterParams: {
+      type: Array,
+      computed: '_getCurrentXlaClusterParams(colorByParams)'
+    },
     _currentGradientParams: {
       type: Object,
       computed: '_getCurrentGradientParams(colorByParams, colorBy)'
@@ -833,26 +858,41 @@
     }
     var devicesForStats = {};
     var devices = _.each(stats.dev_stats, function(d) {
-      // Avoid device names that are ignored by default.
-      var exclude = _.some(DEVICE_NAMES_EXCLUDE, function(rule) {
+      // Only considered included devices.
+      var include = _.some(DEVICE_NAMES_INCLUDE, function(rule) {
+        return rule.regex.test(d.device);
+      });
+      // Exclude device names that are ignored by default.
+      var exclude = _.some(DEVICE_STATS_DEFAULT_OFF, function(rule) {
         return rule.regex.test(d.device);
       });
-      if (!exclude) {
+      if (include && !exclude) {
         devicesForStats[d.device] = true;
       }
     });
     this.set('devicesForStats', devicesForStats);
   },
-  _getDevices: function(devicesForStats) {
-    var devices = _.map(this.stats.dev_stats, function(d) {
+  _getCurrentDevices: function(devicesForStats) {
+    var all_devices = _.map(this.stats && this.stats.dev_stats, function(d) {
       return d.device;
     });
+    var devices = _.filter(all_devices, function(d) {
+      return _.some(DEVICE_NAMES_INCLUDE, function(rule) {
+        return rule.regex.test(d);
+      });
+    });
     // Devices names can be long so we remove the longest common prefix
     // before showing the devices in a list.
     var suffixes = tf.graph.util.removeCommonPrefix(devices);
+    if (suffixes.length == 1) {
+      var found = suffixes[0].match(/device:([^:]+:[0-9]+)$/);
+      if (found) {
+        suffixes[0] = found[1];
+      }
+    }
     return _.map(devices, function(device, i) {
       var ignoredMsg = null;
-      _.each(DEVICE_NAMES_EXCLUDE, function(rule) {
+      _.each(DEVICE_STATS_DEFAULT_OFF, function(rule) {
         if (rule.regex.test(device)) {
           ignoredMsg = rule.msg;
         }
@@ -892,6 +932,29 @@
   _equals: function(a, b) {
     return a === b;
   },
+  _getCurrentDeviceParams: function(colorByParams) {
+    var deviceParams = _.filter(colorByParams.device, function(param) {
+      return _.some(DEVICE_NAMES_INCLUDE, function(rule) {
+        return rule.regex.test(param.device);
+      });
+    });
+    // Remove common prefix and merge back corresponding color. If
+    // there is only one device then remove everything up to "/device:".
+    var suffixes = tf.graph.util.removeCommonPrefix(
+            _.map(deviceParams, function(d) { return d.device; }));
+    if (suffixes.length == 1) {
+      var found = suffixes[0].match(/device:([^:]+:[0-9]+)$/);
+      if (found) {
+        suffixes[0] = found[1];
+      }
+    }
+    return _.map(deviceParams, function(d, i) {
+      return { device : suffixes[i], color : d.color };
+    });
+  },
+  _getCurrentXlaClusterParams: function(colorByParams) {
+    return colorByParams.xla_cluster;
+  },
   _getCurrentGradientParams: function(colorByParams, colorBy) {
     if (!this._isGradientColoring(this.stats, colorBy)) {
       return;