performance, remove unused data connections

app/components/AxisLine.js

@@ -46,7 +46,7 @@ export default React.createClass({
     var props = this.props;
     var sign = props.orient === 'top' || props.orient === 'left' ? -1 : 1;
 
-    var range = this._d3_scaleRange(props.scale);
+    var range = this._d3_scaleRange(this.props.scale);
 
     var d;
 

app/components/ScatterPlots.js

@@ -18,7 +18,6 @@ class ScatterPlots extends React.Component {
     width: React.PropTypes.number.isRequired,
     dataset: React.PropTypes.object,
     features: React.PropTypes.array.isRequired,
-    numFeatures: React.PropTypes.number.isRequired,
     layout: React.PropTypes.object.isRequired,
     muiTheme: React.PropTypes.object
   };
@@ -58,8 +57,7 @@ class ScatterPlots extends React.Component {
           xOffset: box.x,
           yOffset: box.y,
           sideLength: sideLength - margin,
-          muiTheme: this.props.muiTheme,
-          pointsUnderBrush: this.props.pointsUnderBrush
+          muiTheme: this.props.muiTheme
         });
 
         children.push(sp);

app/components/SelectArea.js

@@ -4,6 +4,7 @@
  *
  * Adapted from https://github.com/d3/d3-brush
  */
+import _ from 'lodash';
 import React from 'react';
 import style from './SelectArea.css';
 
@@ -203,6 +204,16 @@ export default class SelectArea extends React.Component {
         ]
       };
     }
+
+    this.handlers = {
+      overlayTap: (event) => this._started(event, {type: 'overlay'}),
+      selectionTap: (event) => this._started(event, {type: 'selection'}),
+      onMouseMove: this._moved.bind(this),
+      onMouseUp: this._ended.bind(this),
+      onTouchMove: this._moved.bind(this),
+      onTouchEnd: this._ended.bind(this),
+      onMouseEnter: this._mouseEnter.bind(this)
+    };
   }
 
   _shouldHandleEvent(event) {
@@ -349,13 +360,13 @@ export default class SelectArea extends React.Component {
       }
       case MODE_CENTER: {
         if (signX) {
-          w1 = Math.max(W, Math.min(E, this.w0 - dx * signX));
-          e1 = Math.max(W, Math.min(E, this.e0 + dx * signX));
+          w1 = Math.max(W, Math.min(E, this.w0 - (dx * signX)));
+          e1 = Math.max(W, Math.min(E, this.e0 + (dx * signX)));
         }
 
         if (signY) {
-          n1 = Math.max(N, Math.min(S, this.n0 - dy * signY));
-          s1 = Math.max(N, Math.min(S, this.s0 + dy * signY));
+          n1 = Math.max(N, Math.min(S, this.n0 - (dy * signY)));
+          s1 = Math.max(N, Math.min(S, this.s0 + (dy * signY)));
         }
 
         break;
@@ -464,34 +475,45 @@ export default class SelectArea extends React.Component {
   }
 
   // TODO willsetProps copy extent
+  shouldComponentUpdate(nextProps, nextState) {
+    for (let prop of ['base', 'domain', 'overlayClassName', 'selected', 'show']) {
+      if (!_.isEqual(this.props[prop], nextProps[prop])) {
+        return true;
+      }
+    }
+
+    if (!_.isEqual(this.state.selected, nextState.selected)) {
+      return true;
+    }
+
+    return false;
+  }
 
   render() {
     const domain = this.props.domain;
     const selected = this.state.selected;
 
-    let overlayTapHandler = (event) => this._started(event, {type: 'overlay'});
     let overlay = (
       <rect
         className={this.props.overlayClassName || style.overlay}
         key="overlay"
         pointerEvents="all"
         cursor={cursors.overlay}
         style={{ visibility: 'visible', cursor: cursors.overlay }}
-        onMouseDown={overlayTapHandler}
-        onTouchStart={overlayTapHandler}
+        onMouseDown={this.handlers.overlayTap}
+        onTouchStart={this.handlers.overlayTap}
         {...domain}
       />
     );
 
-    let selectionTapHandler = (event) => this._started(event, {type: 'selection'});
     let selection = (
       <rect
         className={this.props.selectionClassName || style.selection}
         key="selection"
         cursor={cursors.selection}
         shapeRendering="crispEdges"
-        onMouseDown={selectionTapHandler}
-        onTouchStart={selectionTapHandler}
+        onMouseDown={this.handlers.selectionTap}
+        onTouchStart={this.handlers.selectionTap}
         {...box(selected)}
       />
     );
@@ -522,11 +544,11 @@ export default class SelectArea extends React.Component {
           WebkitTapHighlightColor: 'rbga(0,0,0,0)',
           visibility: this.props.show ? 'visible' : 'hidden'
         }}
-        onMouseMove={this._moved.bind(this)}
-        onMouseUp={this._ended.bind(this)}
-        onTouchMove={this._moved.bind(this)}
-        onTouchEnd={this._ended.bind(this)}
-        onMouseEnter={this._mouseEnter.bind(this)}
+        onMouseMove={this.handlers.onMouseMove}
+        onMouseUp={this.handlers.onMouseUp}
+        onTouchMove={this.handlers.onTouchMove}
+        onTouchEnd={this.handlers.onTouchEnd}
+        onMouseEnter={this.handlers.onMouseEnter}
         {...domain}
       >
         {overlay}{selection}{handles}

app/containers/App.js

@@ -6,7 +6,7 @@ import styles from './App.css';
 /**
  * App is the parent top level component which just wraps
  * the route and inserts DevTools.
- * 
+ *
  * The route is standard in React apps (using react-router)
  * for switching between multiple pages / layouts
  * but in this case there is only one route: Main

app/containers/MainLayout.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import connect from '../utils/reduxers';
+import _ from 'lodash';
+import React from 'react';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import * as _ from 'lodash';
+import connect from '../utils/reduxers';
 
 import Sidebar from './Sidebar';
 import SVGFrame from './SVGFrame';
@@ -12,11 +12,6 @@ import {
   getMuiTheme
 } from '../selectors/index';
 
-const stateToProps = {
-  layout: getLayout,
-  muiTheme: getMuiTheme
-};
-
 /**
  * This is the layout of the application itself.
  * An SVG plot area on the left and a Sidebar on the right.
@@ -28,7 +23,7 @@ const stateToProps = {
  * when the window size changes, also on change of number of dataset features,
  * number of boxes etc.
  */
-class MainLayout extends Component {
+class MainLayout extends React.Component {
 
   static propTypes = {
     muiTheme: React.PropTypes.object.isRequired,
@@ -72,4 +67,7 @@ class MainLayout extends Component {
   }
 }
 
-export default connect(stateToProps)(MainLayout);
+export default connect({
+  layout: getLayout,
+  muiTheme: getMuiTheme
+})(MainLayout);

app/containers/ScatterPlotsContainer.js

@@ -11,7 +11,6 @@ import LoopPlayHead from '../components/LoopPlayHead';
 import {
   getPointsForPlot,
   getLayout,
-  getNumFeatures,
   getDatasetMetadata
 } from '../selectors/index';
 
@@ -33,17 +32,15 @@ class ScatterPlotsContainer extends Component {
     height: React.PropTypes.number.isRequired,
     dataset: React.PropTypes.object,
     features: React.PropTypes.array.isRequired,
-    layout: React.PropTypes.object.isRequired,
-    numFeatures: React.PropTypes.number.isRequired
+    layout: React.PropTypes.object.isRequired
   };
 
   render() {
     const padding = this.props.layout.scatterPlotsMargin;
     const props = _.pick(this.props, [
       'dataset',
       'features',
-      'layout',
-      'numFeatures'
+      'layout'
     ]);
 
     props.height = this.props.height - (padding * 2);
@@ -77,6 +74,5 @@ class ScatterPlotsContainer extends Component {
 export default connect({
   dataset: getDatasetMetadata,
   features: getPointsForPlot,
-  layout: getLayout,
-  numFeatures: getNumFeatures
+  layout: getLayout
 })(ScatterPlotsContainer);

app/containers/Sidebar.js

@@ -3,7 +3,7 @@ import DatasetSelector from './DatasetSelector';
 import LoopControl from '../components/LoopControl';
 import SoundSelector from './SoundSelector';
 import ParamMapping from './ParamMapping';
-import Help from './Help';
+// import Help from './Help';
 import styles from './Sidebar.css';
 
 /**
@@ -17,7 +17,7 @@ export default class Sidebar extends Component {
         <SoundSelector />
         <LoopControl />
         <ParamMapping />
-        <Help />
+        {/* <Help /> */}
       </aside>
     );
   }

app/selectors/ui.js

@@ -1,5 +1,5 @@
-import { centeredSquareWithMargin } from '../utils/layout';
 import { createSelector } from 'reselect';
+import { centeredSquareWithMargin } from '../utils/layout';
 import { getDatasetMetadata, getFeatures } from './dataset';
 import { getLoop } from './sound';
 
@@ -60,9 +60,9 @@ export const getLayout = createSelector(
     // each box
     layout.boxes = [];
     if (layout.sideLength > 0) {
-      for (let m = 0; m < numFeatures; m++) {
+      for (let m = 0; m < numFeatures; m += 1) {
         const x = m * layout.sideLength;
-        for (let n = 0; n < numFeatures; n++) {
+        for (let n = 0; n < numFeatures; n += 1) {
           // identity
           // if (m === n) {
           //   continue;