- Created new foreignObject node label. I.e. tree.jsx now renders a s…

…eperate react component as a label.

- Root node will now be styled to a specific class.
- Child nodes will now be styled based upon parity.
- Related to issue #4

client/src/components/label.jsx

@@ -0,0 +1,34 @@
+import React, {Component} from 'react';
+
+export default class Label extends Component {
+
+    constructor(props) {
+        super(props);
+        this.nodeData = props.nodeData;
+        this.nodeName = this.nodeData.name;
+        this.nodeClass = this.computeNodeClass(this.nodeData.index);
+    }
+
+    computeNodeClass(index) {
+        if (index === 0) {
+            return '.root-node-label';
+        }
+        else if (index % 2 === 0) {
+            return '.even-node-label';
+        }
+        else if (index % 2 !== 0) {
+            return '.odd-node-label';
+        }
+        else {
+            console.warn(`Expected node index to be an even/odd/zero number but instead got ${index}.\nDefaulting to .even-node-label...`);
+            return '.even-node-label';
+        }
+
+    }
+
+    render() {
+        return (
+            <span className={this.nodeClass}>{this.nodeName}</span>
+        );
+    }
+}

client/src/components/tree.jsx

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 
 import Tree from 'react-d3-tree';
+import Label from './label';
 
 //  <Tree /> expects data in this form:
 // [
@@ -36,10 +37,14 @@ export default class Yggdrasil extends Component {  // TODO:  Functional compone
 	    <div id='container' ref={tc => (this.container = tc)}>
 	      {this.props.data.length !== 0 ?
 		  <Tree
+                allowForeignObjects
+                nodeLabelComponent={{
+                    render: <Label className='' />
+                }}
 			data={this.props.data}
 			orientation="vertical"
 			separation={{siblings: 0.9, nonSiblings: 3}}
-			textLayout={{textAnchor: "start", x: -20, y: 20 , transform: undefined }}
+			//textLayout={{textAnchor: "start", x: -20, y: 20 , transform: undefined }}
 			onClick={(data, event) => { console.log(data); }}
 			nodeSvgShape={{ shape: 'circle',
 					shapeProps: { r: 4 }