From 75e0d383fed264954ac5eeb639baa0fd6858bbd6 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Mon, 11 Sep 2017 18:50:23 +0200
Subject: [PATCH] Simplified spring usage.

---
 client/app/scripts/charts/edge-container.js           | 10 +++++-----
 client/app/scripts/charts/node-container.js           | 11 +++--------
 client/app/scripts/components/time-travel-timeline.js |  8 ++++----
 client/app/scripts/constants/animation.js             |  3 ---
 client/app/scripts/utils/animation-utils.js           | 10 ++++++++++
 5 files changed, 22 insertions(+), 20 deletions(-)
 delete mode 100644 client/app/scripts/constants/animation.js
 create mode 100644 client/app/scripts/utils/animation-utils.js

diff --git a/client/app/scripts/charts/edge-container.js b/client/app/scripts/charts/edge-container.js
index 9e99df19e..ce06215fc 100644
--- a/client/app/scripts/charts/edge-container.js
+++ b/client/app/scripts/charts/edge-container.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Motion, spring } from 'react-motion';
+import { Motion } from 'react-motion';
 import { fromJS, Map as makeMap } from 'immutable';
 import { line, curveBasis } from 'd3-shape';
 import { times, constant } from 'lodash';
 
-import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
 import { NODE_BASE_SIZE, EDGE_WAYPOINTS_CAP } from '../constants/styles';
+import { weakSpring } from '../utils/animation-utils';
 import Edge from './edge';
 
 
@@ -35,8 +35,8 @@ const waypointsMapToArray = (waypointsMap) => {
 const waypointsArrayToMap = (waypointsArray) => {
   let waypointsMap = makeMap();
   waypointsArray.forEach((point, index) => {
-    waypointsMap = waypointsMap.set(`x${index}`, spring(point.get('x'), NODES_SPRING_ANIMATION_CONFIG));
-    waypointsMap = waypointsMap.set(`y${index}`, spring(point.get('y'), NODES_SPRING_ANIMATION_CONFIG));
+    waypointsMap = waypointsMap.set(`x${index}`, weakSpring(point.get('x')));
+    waypointsMap = waypointsMap.set(`y${index}`, weakSpring(point.get('y')));
   });
   return waypointsMap;
 };
@@ -81,7 +81,7 @@ export default class EdgeContainer extends React.PureComponent {
       // { x0: 11, y0: 22, x1: 33, y1: 44 } that we convert to the array format when rendering.
       <Motion
         style={{
-          thickness: spring(this.state.thickness, NODES_SPRING_ANIMATION_CONFIG),
+          thickness: weakSpring(this.state.thickness),
           ...this.state.waypointsMap.toJS(),
         }}
       >
diff --git a/client/app/scripts/charts/node-container.js b/client/app/scripts/charts/node-container.js
index 0851035b7..b613c680c 100644
--- a/client/app/scripts/charts/node-container.js
+++ b/client/app/scripts/charts/node-container.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Motion, spring } from 'react-motion';
+import { Motion } from 'react-motion';
 
-import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
+import { weakSpring } from '../utils/animation-utils';
 import Node from './node';
 
 
@@ -24,12 +24,7 @@ export default class NodeContainer extends React.PureComponent {
 
     return (
       // Animate the node if the layout is sufficiently small
-      <Motion
-        style={{
-          x: spring(dx, NODES_SPRING_ANIMATION_CONFIG),
-          y: spring(dy, NODES_SPRING_ANIMATION_CONFIG),
-          k: spring(scale, NODES_SPRING_ANIMATION_CONFIG),
-        }}>
+      <Motion style={{ x: weakSpring(dx), y: weakSpring(dy), k: weakSpring(scale) }}>
         {interpolated => transformedNode(forwardedProps, interpolated)}
       </Motion>
     );
diff --git a/client/app/scripts/components/time-travel-timeline.js b/client/app/scripts/components/time-travel-timeline.js
index fc427fbb4..c8abe83a5 100644
--- a/client/app/scripts/components/time-travel-timeline.js
+++ b/client/app/scripts/components/time-travel-timeline.js
@@ -6,9 +6,10 @@ import { connect } from 'react-redux';
 import { drag } from 'd3-drag';
 import { scaleUtc } from 'd3-scale';
 import { event as d3Event, select } from 'd3-selection';
-import { Motion, spring } from 'react-motion';
+import { Motion } from 'react-motion';
 
 import { zoomFactor } from '../utils/zoom-utils';
+import { strongSpring } from '../utils/animation-utils';
 import { linearGradientValue } from '../utils/math-utils';
 import { trackMixpanelEvent } from '../utils/tracking-utils';
 import {
@@ -17,7 +18,6 @@ import {
   scaleDuration,
 } from '../utils/time-utils';
 
-import { NODES_SPRING_FAST_ANIMATION_CONFIG } from '../constants/animation';
 import { TIMELINE_TICK_INTERVAL, ZOOM_TRACK_DEBOUNCE_INTERVAL } from '../constants/timer';
 
 
@@ -359,8 +359,8 @@ class TimeTravelTimeline extends React.Component {
     return (
       <Motion
         style={{
-          focusedTimestampValue: spring(focusedTimestampValue, NODES_SPRING_FAST_ANIMATION_CONFIG),
-          durationPerPixelValue: spring(durationPerPixelValue, NODES_SPRING_FAST_ANIMATION_CONFIG),
+          focusedTimestampValue: strongSpring(focusedTimestampValue),
+          durationPerPixelValue: strongSpring(durationPerPixelValue),
         }}>
         {interpolated => this.renderAxis({
           focusedTimestamp: moment(interpolated.focusedTimestampValue),
diff --git a/client/app/scripts/constants/animation.js b/client/app/scripts/constants/animation.js
deleted file mode 100644
index 765fa258d..000000000
--- a/client/app/scripts/constants/animation.js
+++ /dev/null
@@ -1,3 +0,0 @@
-
-export const NODES_SPRING_ANIMATION_CONFIG = { stiffness: 100, damping: 18, precision: 1 };
-export const NODES_SPRING_FAST_ANIMATION_CONFIG = { stiffness: 800, damping: 50, precision: 1 };
diff --git a/client/app/scripts/utils/animation-utils.js b/client/app/scripts/utils/animation-utils.js
new file mode 100644
index 000000000..24498154c
--- /dev/null
+++ b/client/app/scripts/utils/animation-utils.js
@@ -0,0 +1,10 @@
+import { spring } from 'react-motion';
+
+
+export function weakSpring(value) {
+  return spring(value, { stiffness: 100, damping: 18, precision: 1 });
+}
+
+export function strongSpring(value) {
+  return spring(value, { stiffness: 800, damping: 50, precision: 1 });
+}