1 files changed, 91 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-graph-info/tf-node-list-item.html b/tensorflow/tensorboard/components/tf-graph-info/tf-node-list-item.html
new file mode 100644
index 0000000000..f16e9e4511
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-graph-info/tf-node-list-item.html
@@ -0,0 +1,91 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../tf-graph/tf-graph-icon.html">
+
+<dom-module id="tf-node-list-item">
+  <style>
+  #list-item {
+    width: 100%;
+    color: #565656;
+    font-size: 11pt;
+    font-weight: 400;
+    position: relative;
+  }
+
+  #list-item:hover {
+    background-color: var(--google-yellow-100);
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
+
+  #list-item span {
+    display: block;
+    margin-left: 40px;
+  }
+
+  #list-item.excluded span {
+    color: #999;
+  }
+
+  .node-icon {
+    position: absolute;
+    top: 1px;
+    left: 2px;
+  }
+  </style>
+  <template>
+    <div id="list-item"
+         on-mouseover="_nodeListener"
+         on-mouseout="_nodeListener"
+         on-click="_nodeListener">
+      <tf-graph-icon class="node-icon"
+          node="[[itemNode]]" height="12"></tf-graph-icon>
+      <span title$="[[name]]">[[name]]</span>
+    </div>
+  </template>
+
+  <script>
+    (function() {
+      Polymer({
+        is: 'tf-node-list-item',
+
+        properties: {
+          /**
+           * The Node for the card itself, on which this item is being drawn.
+           * @type {tf.graph.Node}
+           */
+          cardNode: Object,
+          /**
+           * The Node for the item within the card, somehow related to cardNode.
+           * @type {tf.graph.Node}
+           */
+          itemNode: Object,
+          name: String,
+          itemType: {
+            type: String,
+            observer: '_itemTypeChanged'
+          }
+        },
+
+        _itemTypeChanged: function() {
+          if (this.itemType !== 'subnode') {
+            this.$['list-item'].classList.add('clickable');
+          } else {
+            this.$['list-item'].classList.remove('clickable');
+          }
+        },
+
+        _nodeListener: function(event) {
+          // fire node.click/mouseover/mouseout
+          this.fire('node-list-item-' + event.type, {
+            cardNode: this.cardNode.name,
+            nodeName: this.name,
+            type: this.itemType
+          });
+        }
+
+      });
+    })();
+  </script>
+</dom-module>