Improved rendering order of nodes/edges in Graph View

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

@@ -5,7 +5,7 @@ import { line, curveBasis } from 'd3-shape';
 import { each, omit, times, constant } from 'lodash';
 
 import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
-import { EDGE_WAYPOINTS_CAP } from '../constants/styles';
+import { NODE_BASE_SIZE, EDGE_WAYPOINTS_CAP } from '../constants/styles';
 import Edge from './edge';
 
 
@@ -14,8 +14,8 @@ const spline = line()
   .x(d => d.x)
   .y(d => d.y);
 
-const transformedEdge = (props, path) => (
-  <Edge {...props} path={spline(path)} />
+const transformedEdge = (props, path, thickness) => (
+  <Edge {...props} path={spline(path)} thickness={thickness} />
 );
 
 // Converts a waypoints map of the format { x0: 11, y0: 22, x1: 33, y1: 44 }
@@ -45,7 +45,11 @@ const waypointsArrayToMap = (waypointsArray) => {
 export default class EdgeContainer extends React.PureComponent {
   constructor(props, context) {
     super(props, context);
-    this.state = { waypointsMap: makeMap() };
+
+    this.state = {
+      waypointsMap: makeMap(),
+      thickness: 1,
+    };
   }
 
   componentWillMount() {
@@ -59,21 +63,32 @@ export default class EdgeContainer extends React.PureComponent {
     if (this.props.isAnimated && nextProps.waypoints !== this.props.waypoints) {
       this.prepareWaypointsForMotion(nextProps.waypoints);
     }
+    // Edge thickness will reflect the zoom scale.
+    const baseScale = (nextProps.scale * 0.01) * NODE_BASE_SIZE;
+    const thickness = (nextProps.focused ? 3 : 1) * baseScale;
+    this.setState({ thickness });
   }
 
   render() {
     const { isAnimated, waypoints } = this.props;
-    const forwardedProps = omit(this.props, 'isAnimated', 'waypoints');
+    const forwardedProps = omit(this.props, 'isAnimated', 'waypoints', 'scale');
 
     if (!isAnimated) {
-      return transformedEdge(forwardedProps, waypoints.toJS());
+      return transformedEdge(forwardedProps, waypoints.toJS(), this.state.thickness);
     }
 
     return (
       // For the Motion interpolation to work, the waypoints need to be in a map format like
       // { x0: 11, y0: 22, x1: 33, y1: 44 } that we convert to the array format when rendering.
-      <Motion style={this.state.waypointsMap.toJS()}>
-        {interpolated => transformedEdge(forwardedProps, waypointsMapToArray(interpolated))}
+      <Motion
+        style={{
+          thickness: spring(this.state.thickness, NODES_SPRING_ANIMATION_CONFIG),
+          ...this.state.waypointsMap.toJS(),
+        }}
+      >
+        {({ thickness, ...interpolatedWaypoints}) => transformedEdge(
+          forwardedProps, waypointsMapToArray(interpolatedWaypoints), thickness
+        )}
       </Motion>
     );
   }

client/app/scripts/charts/edge.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 
 import { enterEdge, leaveEdge } from '../actions/app-actions';
-import { NODE_BASE_SIZE } from '../constants/styles';
 
 class Edge extends React.Component {
 
@@ -14,34 +13,22 @@ class Edge extends React.Component {
   }
 
   render() {
-    const {
-      id,
-      path,
-      highlighted,
-      blurred,
-      focused,
-      scale,
-      source,
-      target
-    } = this.props;
-    const className = classNames('edge', { highlighted, blurred, focused });
-    const thickness = (scale * 0.01) * NODE_BASE_SIZE;
-    const strokeWidth = focused ? thickness * 3 : thickness;
+    const { id, path, highlighted, blurred, focused, thickness, source, target } = this.props;
     const shouldRenderMarker = (focused || highlighted) && (source !== target);
-    // Draws the edge so that its thickness reflects the zoom scale.
-    // Edge shadow is always made 10x thicker than the edge itself.
+    const className = classNames('edge', { highlighted, blurred });
+
     return (
       <g
         id={id} className={className}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
-        <path className="shadow" d={path} style={{ strokeWidth: 10 * strokeWidth }} />
+        <path className="shadow" d={path} style={{ strokeWidth: 10 * thickness }} />
         <path
           className="link"
           d={path}
           markerEnd={shouldRenderMarker ? 'url(#end-arrow)' : null}
-          style={{ strokeWidth }}
+          style={{ strokeWidth: thickness }}
         />
       </g>
     );