Change selectOrCreateChild to accept an optional array of classes and use it for selecting

the faded class on series nodes.
Change: 124146384

tensorflow/tensorboard/components/tf-graph-common/lib/scene/node.ts

@@ -420,12 +420,11 @@ export function buildShape(nodeGroup, d, nodeClass: string) {
         stampType =
             groupNodeInfo.node.hasNonControlEdges ? 'vertical' : 'horizontal';
       }
-      scene
-          .selectOrCreateChild(
-              shapeGroup, 'use',
-              Class.Node.COLOR_TARGET + ' ' + groupNodeInfo.isFadedOut ?
-                  'faded-ellipse' :
-                  '')
+      let classList = [Class.Node.COLOR_TARGET];
+      if (groupNodeInfo.isFadedOut) {
+        classList.push('faded-ellipse');
+      }
+      scene.selectOrCreateChild(shapeGroup, 'use', classList)
           .attr('xlink:href', '#op-series-' + stampType + '-stamp');
       scene.selectOrCreateChild(shapeGroup, 'rect', Class.Node.COLOR_TARGET)
           .attr({rx: d.radius, ry: d.radius});

tensorflow/tensorboard/components/tf-graph-common/lib/scene/scene.ts

@@ -172,19 +172,24 @@ export function panToNode(nodeName: String, svg, zoomG, d3zoom): boolean {
  *
  * @param container
  * @param tagName tag name.
- * @param className (optional) Class name.
+ * @param className (optional) Class name or a list of class names.
  * @param before (optional) reference DOM node for insertion.
  * @return selection of the element
  */
-export function selectOrCreateChild(container, tagName: string,
-    className?: string, before?) {
+export function selectOrCreateChild(
+    container, tagName: string, className?: string | string[], before?) {
   let child = selectChild(container, tagName, className);
   if (!child.empty()) {
     return child;
   }
   let newElement =
       document.createElementNS('http://www.w3.org/2000/svg', tagName);
-  if (className) {
+
+  if (className instanceof Array) {
+    for (let i = 0; i < className.length; i++) {
+      newElement.classList.add(className[i]);
+    }
+  } else {
     newElement.classList.add(className);
   }
 
@@ -205,17 +210,27 @@ export function selectOrCreateChild(container, tagName: string,
  *
  * @param container
  * @param tagName tag name.
- * @param className (optional) Class name.
+ * @param className (optional) Class name or list of class names.
  * @return selection of the element, or an empty selection
  */
-export function selectChild(container, tagName: string, className?: string) {
+export function selectChild(
+    container, tagName: string, className?: string | string[]) {
   let children = container.node().childNodes;
   for (let i = 0; i < children.length; i++) {
     let child = children[i];
-    if (child.tagName === tagName &&
-        (!className || child.classList.contains(className))
-          ) {
-      return d3.select(child);
+    if (child.tagName === tagName) {
+      if (className instanceof Array) {
+        let hasAllClasses = true;
+        for (let j = 0; j < className.length; j++) {
+          hasAllClasses =
+              hasAllClasses && child.classList.contains(className[j]);
+        }
+        if (hasAllClasses) {
+          return d3.select(child);
+        }
+      } else if ((!className || child.classList.contains(className))) {
+        return d3.select(child);
+      }
     }
   }
   return d3.select(null);