From e269084a1e2f4d66bb2b3132310017373f192282 Mon Sep 17 00:00:00 2001
From: alex0112 <alarsen0112@gmail.com>
Date: Tue, 25 Jun 2019 20:13:23 -0600
Subject: [PATCH] - Created new foreignObject node label.  I.e. tree.jsx now
 renders a seperate 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 | 34 +++++++++++++++++++++++++++++++++
 client/src/components/tree.jsx  |  7 ++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/label.jsx

diff --git a/client/src/components/label.jsx b/client/src/components/label.jsx
new file mode 100644
index 0000000..fb6c3fd
--- /dev/null
+++ b/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>
+        );
+    }
+}
diff --git a/client/src/components/tree.jsx b/client/src/components/tree.jsx
index 991850d..3107635 100644
--- a/client/src/components/tree.jsx
+++ b/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 }