animate edges via react-motion

edges can have different point counts between updates, that throws
Spring off, therefor I'm making sure the number of points is always 10.
If anyone can find out how many points dagre maximally puts, please
change this (my guess is max. 4).

client/app/scripts/charts/edge.js

@@ -13,8 +13,8 @@ const line = d3.svg.line()
 const flattenPoints = function(points) {
   const flattened = {};
   points.forEach(function(point, i) {
-    flattened['x' + i] = point.x;
-    flattened['y' + i] = point.y;
+    flattened['x' + i] = {val: point.x};
+    flattened['y' + i] = {val: point.y};
   });
   return flattened;
 };
@@ -27,7 +27,7 @@ const extractPoints = function(points) {
     if (!extracted[index]) {
       extracted[index] = {};
     }
-    extracted[index][axis] = value;
+    extracted[index][axis] = value.val;
   });
   return extracted;
 };
@@ -35,7 +35,17 @@ const extractPoints = function(points) {
 const Edge = React.createClass({
 
   getInitialState: function() {
-    return flattenPoints(this.props.points);
+    return {
+      points: []
+    };
+  },
+
+  componentWillMount: function() {
+    this.ensureSameLength(this.props.points);
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.ensureSameLength(nextProps.points);
   },
 
   render: function() {
@@ -60,6 +70,19 @@ const Edge = React.createClass({
     );
   },
 
+  ensureSameLength: function(points) {
+    // Spring needs constant list length, hoping that dagre will insert never more than 10
+    const length = 10;
+    let missing = length - points.length;
+
+    while (missing) {
+      points.unshift(points[0]);
+      missing = length - points.length;
+    }
+
+    return points;
+  },
+
   handleMouseEnter: function(ev) {
     AppActions.enterEdge(ev.currentTarget.id);
   },

client/app/scripts/charts/node.js

@@ -9,13 +9,6 @@ const Node = React.createClass({
     NodeColorMixin
   ],
 
-  getInitialState: function() {
-    return {
-      x: 0,
-      y: 0
-    };
-  },
-
   render: function() {
     const props = this.props;
     const scale = this.props.scale;
@@ -38,9 +31,9 @@ const Node = React.createClass({
     }
 
     return (
-      <Spring endValue={{x: this.props.dx, y: this.props.dy}}>
+      <Spring endValue={{x: {val: this.props.dx}, y: {val: this.props.dy}}}>
         {function(interpolated) {
-          const transform = 'translate(' + interpolated.x + ',' + interpolated.y + ')';
+          const transform = 'translate(' + interpolated.x.val + ',' + interpolated.y.val + ')';
           return (
             <g className={classNames.join(' ')} transform={transform} id={props.id}
               onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>