Merge pull request #1239 from weaveworks/improve-highlight-perf

Improve canvas highlighting performance.

client/app/scripts/charts/edge-container.js

@@ -43,7 +43,10 @@ export default class EdgeContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.preparePoints(nextProps.points);
+    // immutablejs allows us to `===`! \o/
+    if (nextProps.points !== this.props.points) {
+      this.preparePoints(nextProps.points);
+    }
   }
 
   render() {

client/app/scripts/charts/edge.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import reactMixin from 'react-mixin';
+import classNames from 'classnames';
 
 import { enterEdge, leaveEdge } from '../actions/app-actions';
 
@@ -13,26 +14,11 @@ export default class Edge extends React.Component {
   }
 
   render() {
-    const { hasSelectedNode, highlightedEdgeIds, id, layoutPrecision,
-      path, selectedNodeId, source, target } = this.props;
-
-    const classNames = ['edge'];
-    if (highlightedEdgeIds.has(id)) {
-      classNames.push('highlighted');
-    }
-    if (hasSelectedNode
-      && source !== selectedNodeId
-      && target !== selectedNodeId) {
-      classNames.push('blurred');
-    }
-    if (hasSelectedNode && layoutPrecision === 0
-      && (source === selectedNodeId || target === selectedNodeId)) {
-      classNames.push('focused');
-    }
-    const classes = classNames.join(' ');
+    const { id, path, highlighted, blurred, focused } = this.props;
+    const className = classNames('edge', {highlighted, blurred, focused});
 
     return (
-      <g className={classes} onMouseEnter={this.handleMouseEnter}
+      <g className={className} onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave} id={id}>
         <path d={path} className="shadow" />
         <path d={path} className="link" />

client/app/scripts/charts/nodes-chart-edges.js

@@ -11,11 +11,26 @@ export default class NodesChartEdges extends React.Component {
 
     return (
       <g className="nodes-chart-edges">
-        {layoutEdges.toIndexedSeq().map(edge => <EdgeContainer key={edge.get('id')}
-          id={edge.get('id')} source={edge.get('source')} target={edge.get('target')}
-          points={edge.get('points')} layoutPrecision={layoutPrecision}
-          highlightedEdgeIds={highlightedEdgeIds} hasSelectedNode={hasSelectedNode}
-          selectedNodeId={selectedNodeId} />)}
+        {layoutEdges.toIndexedSeq().map(edge => {
+          const sourceSelected = selectedNodeId === edge.get('source');
+          const targetSelected = selectedNodeId === edge.get('target');
+          const blurred = hasSelectedNode && !sourceSelected && !targetSelected;
+          const focused = hasSelectedNode && (sourceSelected || targetSelected);
+
+          return (
+            <EdgeContainer
+              key={edge.get('id')}
+              id={edge.get('id')}
+              source={edge.get('source')}
+              target={edge.get('target')}
+              points={edge.get('points')}
+              blurred={blurred}
+              focused={focused}
+              layoutPrecision={layoutPrecision}
+              highlighted={highlightedEdgeIds.has(edge.get('id'))}
+            />
+          );
+        })}
       </g>
     );
   }