Merge pull request #224 from steptools/Speel-Chek

Performance Improvement

Author: Sjbeale

CHANGELOG.md

@@ -16,6 +16,7 @@ Features:
 
 Bugfixes:
 
+- Sidebar now renders only when needed
 - Sidebar can now be scrolled in Firefox
 - Render radius is properly calculated when workingstep changes
 - Bounding boxes update properly with each workingstep

src/client/views/sidebar/workingstepslist/index.jsx

@@ -9,7 +9,7 @@ export default class WorkingstepList extends React.Component {
 
     this.renderNode = this.renderNode.bind(this);
   }
-  
+
   getNodeIcon(node, num){
     if (node.type == "workplan"){
       return <span className='icon-letter'>W</span>;
@@ -18,10 +18,14 @@ export default class WorkingstepList extends React.Component {
     }else{
       return <span className='icon-letter'>{num+1}</span>;
     }
-  } 
-  
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+  return this.props.ws !== nextProps.ws;
+}
+
   renderNode(nodeId, num){
-    
+
     let node = this.props.workingstepCache[nodeId];
     node.icon = this.getNodeIcon(node, num);
     let cName = 'node';
@@ -39,7 +43,7 @@ export default class WorkingstepList extends React.Component {
   }
 
   componentDidMount(){
-      
+
   }
 
   render(){
@@ -55,4 +59,4 @@ export default class WorkingstepList extends React.Component {
   }
 }
 
-WorkingstepList.propTypes = {cbMode: React.PropTypes.func.isRequired, cbTree: React.PropTypes.func.isRequired, ws: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired};
+WorkingstepList.propTypes = {cbMode: React.PropTypes.func.isRequired, cbTree: React.PropTypes.func.isRequired, ws: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired};

src/client/views/sidebar/workplanlist/index.jsx

@@ -23,9 +23,9 @@ export default class WorkplanList extends React.Component {
         if(node.enabled === false)
           cName = 'node disabled';
       }
-    
+
     node.icon = this.getNodeIcon(node);
-    
+
       return <span
           id={node.id}
           className={cName}
@@ -36,7 +36,11 @@ export default class WorkplanList extends React.Component {
           {node.name}
       </span>;
   }
-  
+
+  shouldComponentUpdate(nextProps, nextState) {
+  return this.props.ws !== nextProps.ws;
+}
+
   getNodeIcon(node){
     if (node.type == "workplan"){
       return <span className='icon-letter'>W</span>;
@@ -47,7 +51,7 @@ export default class WorkplanList extends React.Component {
     }
   }
   componentDidMount(){
-      
+
   }
 
   render(){