Remove the hatched background from functions (#601)

Previously, the graph explorer had made functions stand out via giving
them a hatched background. However, functions are intended to seamlessly
integrate into the graph, so remove the hatch. @wchargin brought up some
good points.

* The nodes are extremely hard to read. To quote from pgfmanual (3.0.1a,
95): Do not use background patterns, like a crosshatch or diagonal
lines, instead of colors. They distract. Background patterns in
information graphics are _evil_.
* We already have a "Usages of the Function" section within the info
card that shows up when either a function template or one of its calls
is selected. This suffices to identify the node as being associated with
a function.
* We already have triangles within function nodes that uniquely identify
function input and output ops.

Author: chihuahua

Diff for: tensorboard/plugins/graph/tf_graph/tf-graph-scene.html

@@ -48,53 +48,36 @@
 
 /* --- Node and annotation-node for Metanode --- */
 
-::content .meta > .nodeshape > rect.nodecolortarget,
-::content .meta > .annotation-node > rect.nodecolortarget {
-  fill: hsl(0, 0%, 70%);
-}
-
-::content .meta > .nodeshape > rect.function-indicator-layer,
-::content .meta > .annotation-node > rect.function-indicator-layer {
-  fill: url(#stripe-pattern);
-  fill-opacity: 0.07;
-}
-
-::content .node.meta > .nodeshape > rect.event-handling-layer,
-::content .node.meta > .annotation-node > rect.event-handling-layer {
+::content .meta > .nodeshape > rect,
+::content .meta > .annotation-node > rect {
   cursor: pointer;
-  fill-opacity: 0;
+  fill: hsl(0, 0%, 70%);
 }
-
-::content .node.meta.highlighted > .nodeshape > rect.event-handling-layer,
-::content .node.meta.highlighted > .annotation-node > rect.event-handling-layer {
+::content .node.meta.highlighted > .nodeshape > rect,
+::content .node.meta.highlighted > .annotation-node > rect {
   stroke-width: 2;
 }
-
-::content .annotation.meta.highlighted > .nodeshape > rect.event-handling-layer,
-::content .annotation.meta.highlighted > .annotation-node > rect.event-handling-layer {
+::content .annotation.meta.highlighted > .nodeshape > rect,
+::content .annotation.meta.highlighted > .annotation-node > rect {
   stroke-width: 1;
 }
-
-::content .meta.selected > .nodeshape > rect.event-handling-layer,
-::content .meta.selected > .annotation-node > rect.event-handling-layer {
+::content .meta.selected > .nodeshape > rect,
+::content .meta.selected > .annotation-node > rect {
   stroke: red;
   stroke-width: 2;
 }
-
-::content .node.meta.selected.expanded > .nodeshape > rect.event-handling-layer,
-::content .node.meta.selected.expanded > .annotation-node > rect.event-handling-layer {
+::content .node.meta.selected.expanded > .nodeshape > rect,
+::content .node.meta.selected.expanded > .annotation-node > rect {
   stroke: red;
   stroke-width: 3;
 }
-
-::content .annotation.meta.selected > .nodeshape > rect.event-handling-layer,
-::content .annotation.meta.selected > .annotation-node > rect.event-handling-layer {
+::content .annotation.meta.selected > .nodeshape > rect,
+::content .annotation.meta.selected > .annotation-node > rect {
   stroke: red;
   stroke-width: 2;
 }
-
-::content .node.meta.selected.expanded.highlighted > .nodeshape > rect.event-handling-layer,
-::content .node.meta.selected.expanded.highlighted > .annotation-node > rect.event-handling-layer {
+::content .node.meta.selected.expanded.highlighted > .nodeshape > rect,
+::content .node.meta.selected.expanded.highlighted > .annotation-node > rect {
   stroke: red;
   stroke-width: 4;
 }
@@ -111,7 +94,6 @@
   stroke: #e0d4b3 !important;
 }
 
-
 ::content .faded path {
   stroke-width: 1px !important;
 }
@@ -641,15 +623,6 @@
         <feMergeNode in="SourceGraphic"/>
       </feMerge>
     </filter>
-
-    <!-- A striped background pattern. -->
-    <pattern id="stripe-pattern"
-             width="6"
-             height="6"
-             patternTransform="rotate(45)"
-             patternUnits="userSpaceOnUse">
-      <rect width="3" height="6" fill="#000"></rect>
-    </pattern>
   </defs>
   <!-- Make a large rectangle that fills the svg space so that
   zoom events get captured on safari -->

Diff for: tensorboard/plugins/graph/tf_graph_common/node.ts

@@ -517,24 +517,8 @@ export function buildShape(nodeGroup, d, nodeClass: string): d3.Selection<any, a
           .attr('rx', d.radius).attr('ry', d.radius);
       break;
     case NodeType.META:
-      // Create 1 rect that will be responsible for coloring (by structure,
-      // device, etc).
-      const rects = [
-          scene.selectOrCreateChild(
-              shapeGroup, 'rect', Class.Node.COLOR_TARGET)];
-      if ((d.node as Metanode).associatedFunction) {
-        // Create a rect that uses a pattern to distinguish this shape as a
-        // TensorFlow function.
-        rects.push(scene.selectOrCreateChild(
-            shapeGroup, 'rect', Class.Node.FUNCTION_INDICATOR_LAYER));
-      }
-      // Create a rect for actually handling events (clicks, etc).
-      rects.push(scene.selectOrCreateChild(
-          shapeGroup, 'rect', Class.Node.EVENT_HANDLING_LAYER));
-      // Round the corners of the rects.
-      _.forEach(rects, rect => {
-        rect.attr('rx', d.radius).attr('ry', d.radius);
-      });
+      scene.selectOrCreateChild(shapeGroup, 'rect', Class.Node.COLOR_TARGET)
+          .attr('rx', d.radius).attr('ry', d.radius);
       break;
     default:
       throw Error('Unrecognized node type: ' + d.node.type);

Diff for: tensorboard/plugins/graph/tf_graph_common/scene.ts

@@ -26,10 +26,6 @@ module tf.graph.scene {
       SHAPE: 'nodeshape',
       // <*> element(s) under SHAPE that should receive color updates.
       COLOR_TARGET: 'nodecolortarget',
-      // The layer (or shape in the stack) that handles events (clicks, etc).
-      EVENT_HANDLING_LAYER: 'event-handling-layer',
-      // The layer that visually distinguishes a shape as a TensorFlow function.
-      FUNCTION_INDICATOR_LAYER: 'function-indicator-layer',
       // <text> element showing the node's label.
       LABEL: 'nodelabel',
       // <g> element that contains all visuals for the expand/collapse