Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS to ES2015 #712

Merged
merged 3 commits into from
Dec 1, 2015
Merged

JS to ES2015 #712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ce9de6
add empty eslintignore, original source maps
davkal Nov 30, 2015
6b44546
Move JS to ES2015
davkal Nov 30, 2015
4b33e32
Fixes small ES2015 errors introduced while rebasing.
foot Dec 1, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added client/.eslintignore
View file
Open in desktop
Empty file.
404 changes: 197 additions & 207 deletions client/app/scripts/actions/app-actions.js
View file
Open in desktop

Large diffs are not rendered by default.

55 changes: 27 additions & 28 deletions client/app/scripts/charts/edge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {};
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
}
51 changes: 25 additions & 26 deletions client/app/scripts/charts/node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}
Loading