JS to ES2015

client/app/scripts/charts/edge.js

@@ -1,17 +1,16 @@
-const _ = require('lodash');
-const d3 = require('d3');
-const React = require('react');
-const Motion = require('react-motion').Motion;
-const spring = require('react-motion').spring;
+import _ from 'lodash';
+import d3 from 'd3';
+import React from 'react';
+import { Motion, spring } from 'react-motion';
 
-const AppActions = require('../actions/app-actions');
+import { enterEdge, leaveEdge } from '../actions/app-actions';
 
 const line = d3.svg.line()
   .interpolate('basis')
   .x(function(d) { return d.x; })
   .y(function(d) { return d.y; });
 
-const animConfig = [80, 20]; // stiffness, bounce
+const animConfig = [80, 20];// stiffness, bounce
 
 const flattenPoints = function(points) {
   const flattened = {};
@@ -35,23 +34,26 @@ const extractPoints = function(points) {
   return extracted;
 };
 
-const Edge = React.createClass({
+export default class Edge extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
 
-  getInitialState: function() {
-    return {
+    this.state = {
       points: []
     };
-  },
+  }
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.ensureSameLength(this.props.points);
-  },
+  }
 
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps(nextProps) {
     this.ensureSameLength(nextProps.points);
-  },
+  }
 
-  render: function() {
+  render() {
     const classNames = ['edge'];
     const points = flattenPoints(this.props.points);
     const props = this.props;
@@ -79,9 +81,9 @@ const Edge = React.createClass({
         }}
       </Motion>
     );
-  },
+  }
 
-  ensureSameLength: function(points) {
+  ensureSameLength(points) {
     // Spring needs constant list length, hoping that dagre will insert never more than 10
     const length = 10;
     let missing = length - points.length;
@@ -92,16 +94,13 @@ const Edge = React.createClass({
     }
 
     return points;
-  },
-
-  handleMouseEnter: function(ev) {
-    AppActions.enterEdge(ev.currentTarget.id);
-  },
-
-  handleMouseLeave: function(ev) {
-    AppActions.leaveEdge(ev.currentTarget.id);
   }
 
-});
+  handleMouseEnter(ev) {
+    enterEdge(ev.currentTarget.id);
+  }
 
-module.exports = Edge;
+  handleMouseLeave(ev) {
+    leaveEdge(ev.currentTarget.id);
+  }
+}

client/app/scripts/charts/node.js

@@ -1,16 +1,18 @@
-const React = require('react');
-const Motion = require('react-motion').Motion;
-const spring = require('react-motion').spring;
+import React from 'react';
+import { Motion, spring } from 'react-motion';
 
-const AppActions = require('../actions/app-actions');
-const NodeColorMixin = require('../mixins/node-color-mixin');
+import { clickNode, enterNode, leaveNode } from '../actions/app-actions';
+import { getNodeColor } from '../utils/color-utils';
 
-const Node = React.createClass({
-  mixins: [
-    NodeColorMixin
-  ],
+export default class Node extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.handleMouseClick = this.handleMouseClick.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
 
-  render: function() {
+  render() {
     const props = this.props;
     const nodeScale = props.focused ? props.selectedNodeScale : props.nodeScale;
     const zoomScale = this.props.zoomScale;
@@ -23,7 +25,7 @@ const Node = React.createClass({
     let labelOffsetY = 18;
     let subLabelOffsetY = 35;
     const isPseudo = !!this.props.pseudo;
-    const color = isPseudo ? '' : this.getNodeColor(this.props.rank, this.props.label);
+    const color = isPseudo ? '' : getNodeColor(this.props.rank, this.props.label);
     const onMouseEnter = this.handleMouseEnter;
     const onMouseLeave = this.handleMouseLeave;
     const onMouseClick = this.handleMouseClick;
@@ -83,31 +85,28 @@ const Node = React.createClass({
         }}
       </Motion>
     );
-  },
+  }
 
-  ellipsis: function(text, fontSize, maxWidth) {
+  ellipsis(text, fontSize, maxWidth) {
     const averageCharLength = fontSize / 1.5;
     const allowedChars = maxWidth / averageCharLength;
     let truncatedText = text;
     if (text && text.length > allowedChars) {
       truncatedText = text.slice(0, allowedChars) + '...';
     }
     return truncatedText;
-  },
+  }
 
-  handleMouseClick: function(ev) {
+  handleMouseClick(ev) {
     ev.stopPropagation();
-    AppActions.clickNode(ev.currentTarget.id);
-  },
-
-  handleMouseEnter: function(ev) {
-    AppActions.enterNode(ev.currentTarget.id);
-  },
-
-  handleMouseLeave: function(ev) {
-    AppActions.leaveNode(ev.currentTarget.id);
+    clickNode(ev.currentTarget.id);
   }
 
-});
+  handleMouseEnter(ev) {
+    enterNode(ev.currentTarget.id);
+  }
 
-module.exports = Node;
+  handleMouseLeave(ev) {
+    leaveNode(ev.currentTarget.id);
+  }
+}