From c0b0e5f807bc546b92c8bf9f743a892d95d9fdf3 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 4 Sep 2015 17:09:29 +0200
Subject: [PATCH] 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 | 31 +++++++++++++++++++++++++++----
 client/app/scripts/charts/node.js | 11 ++---------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/client/app/scripts/charts/edge.js b/client/app/scripts/charts/edge.js
index da147741f..bb962803e 100644
--- a/client/app/scripts/charts/edge.js
+++ b/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);
   },
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index a9249c40e..4ed254cb6 100644
--- a/client/app/scripts/charts/node.js
+++ b/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}>