Fix some styling

src/components/GraphEditor/GraphEditor.jsx

@@ -545,9 +545,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
                             y: orgEvent.clientY,
                         },
                     },
-                });
-
-                setTimeout(() => {
+                }, () => {
                     setActiveSelection([nodeId]);
                 });
             }

src/components/GraphEditor/ReactCytoscape.jsx

@@ -38,23 +38,31 @@ export default class ReactCytoscape extends Component {
     };
 
     componentDidMount() {
+        const {
+            style,
+            layout,
+            elements,
+            hyperEdges,
+            cytoscapeOptions,
+            cyRef,
+        } = this.props;
         const opts = Object.assign({
             container: this.container,
 
             boxSelectionEnabled: false,
             autounselectify: true,
 
-            style: this.props.style,
-            layout: this.props.layout,
-        }, this.props.cytoscapeOptions);
+            style,
+            layout,
+        }, cytoscapeOptions);
 
         this.cy = cytoscape(opts);
         this.edgeConnHandler = this.cy.edgeConnections();
-        this.cy.json({elements: this.props.elements});
-        this.edgeConnHandler.addEdges(this.props.hyperEdges);
+        this.cy.json({elements});
+        this.edgeConnHandler.addEdges(hyperEdges);
 
-        if (this.props.cyRef) {
-            this.props.cyRef(this.cy, this.container);
+        if (cyRef) {
+            cyRef(this.cy, this.container);
         }
 
         return this.cy;
@@ -97,17 +105,18 @@ export default class ReactCytoscape extends Component {
     }
 
     render() {
+        const {style, containerID} = this.props;
         const styleContainer = Object.assign({
             height: '100%',
             width: '100%',
             display: 'block',
             position: 'relative',
             top: -40, // Magic: this is to float under the action buttons
-        }, ...this.props.style);
+        }, ...style);
         return (
             <div
                 className="graph"
-                id={this.props.containerID}
+                id={containerID}
                 ref={(elt) => {
                     this.container = elt;
                 }}

src/components/SubTreeWatcher/SubTreeWatcher.jsx

@@ -80,12 +80,13 @@ export default class SubTreeWatcher extends Component {
 
     componentWillReceiveProps(newProps) {
         const {activeNode} = newProps;
+        const {options: currOptions, activeNode: currActiveNode} = this.props;
 
-        if (newProps.options !== this.props.options) {
+        if (newProps.options !== currOptions) {
             this.options = Object.assign(DEFAULT_OPTIONS, newProps.options);
         }
 
-        if (activeNode !== this.props.activeNode) {
+        if (activeNode !== currActiveNode) {
             this.setState({
                 territory: {
                     [activeNode]: {children: this.options.depth},
@@ -212,7 +213,7 @@ export default class SubTreeWatcher extends Component {
 
     render() {
         const {territory, children} = this.state;
-        const {gmeClient} = this.props;
+        const {gmeClient, children: childElements} = this.props;
 
         return (
             <div style={{width: '100%', height: '100%'}}>
@@ -224,7 +225,7 @@ export default class SubTreeWatcher extends Component {
                     reuseTerritory={false}
                 />
                 {React.cloneElement(
-                    React.Children.only(this.props.children),
+                    React.Children.only(childElements),
                     Object.assign({}, this.props, {nodes: children}),
                 )}
             </div>);