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 (
+ {this.nodeName}
+ );
+ }
+}
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';
//