Revert "Upgraded eslint & eslint-config-airbnb"

client/.eslintignore

@@ -1 +1,2 @@
 app/scripts/vendor/term.js
+test/

client/.eslintrc

@@ -7,32 +7,11 @@
   },
   "rules": {
     "comma-dangle": 0,
-    "global-require": 0,
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": true,
-        "optionalDependencies": true,
-        "peerDependencies": true
-      }
-    ],
-    "import/prefer-default-export": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
     "no-param-reassign": 0,
-    "no-restricted-properties": 0,
     "object-curly-spacing": 0,
     "react/jsx-closing-bracket-location": 0,
-    "react/jsx-filename-extension": [
-      2,
-      {
-        "extensions": [
-          ".js",
-          ".jsx"
-        ]
-      }
-    ],
     "react/prefer-stateless-function": 0,
     "react/sort-comp": 0,
-    "react/prop-types": 0,
+    "react/prop-types": 0
   }
 }

client/app/scripts/actions/app-actions.js

@@ -39,8 +39,7 @@ export function sortOrderChanged(sortedBy, sortedDesc) {
   return (dispatch, getState) => {
     dispatch({
       type: ActionTypes.SORT_ORDER_CHANGED,
-      sortedBy,
-      sortedDesc
+      sortedBy, sortedDesc
     });
     updateRoute(getState);
   };

client/app/scripts/charts/__tests__/node-layout-test.js

@@ -9,7 +9,7 @@ describe('NodesLayout', () => {
     const coords = [];
     nodes
       .sortBy(node => node.get('id'))
-      .forEach((node) => {
+      .forEach(node => {
         coords.push(node.get('x'));
         coords.push(node.get('y'));
       });

client/app/scripts/charts/edge.js

@@ -17,8 +17,7 @@ class Edge extends React.Component {
     const className = classNames('edge', {highlighted, blurred, focused});
 
     return (
-      <g
-        className={className} onMouseEnter={this.handleMouseEnter}
+      <g className={className} onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave} id={id}>
         <path d={path} className="shadow" />
         <path d={path} className="link" />

client/app/scripts/charts/node-container.js

@@ -14,13 +14,12 @@ class NodeContainer extends React.Component {
     const other = omit(this.props, 'dx', 'dy');
 
     return (
-      <Motion
-        style={{
-          x: spring(dx, animConfig),
-          y: spring(dy, animConfig),
-          f: spring(scaleFactor, animConfig)
-        }}>
-        {(interpolated) => {
+      <Motion style={{
+        x: spring(dx, animConfig),
+        y: spring(dy, animConfig),
+        f: spring(scaleFactor, animConfig)
+      }}>
+        {interpolated => {
           const transform = `translate(${round(interpolated.x, layoutPrecision)},`
             + `${round(interpolated.y, layoutPrecision)})`;
           return <Node {...other} transform={transform} scaleFactor={interpolated.f} />;

client/app/scripts/charts/node-networks-overlay.js

@@ -26,7 +26,7 @@ function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) {
   const bars = networks.map((n, i) => (
     <rect
       x={x(i)}
-      y={offset - (barHeight * 0.5)}
+      y={offset - barHeight * 0.5}
       width={x.bandwidth()}
       height={barHeight}
       rx={rx}

client/app/scripts/charts/node-shape-circle.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
-import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
+import {getMetricValue, getMetricColor, getClipPathDefinition} from '../utils/metric-utils.js';
+import {CANVAS_METRIC_FONT_SIZE} from '../constants/styles.js';
 
 
 export default function NodeShapeCircle({id, highlighted, size, color, metric}) {
@@ -17,12 +17,8 @@ export default function NodeShapeCircle({id, highlighted, size, color, metric})
       {highlighted && <circle r={size * 0.7} className="highlighted" />}
       <circle r={size * 0.5} className="border" stroke={color} />
       <circle r={size * 0.45} className="shadow" />
-      {hasMetric && <circle
-        r={size * 0.45}
-        className="metric-fill"
-        style={metricStyle}
-        clipPath={`url(#${clipId})`}
-      />}
+      {hasMetric && <circle r={size * 0.45} className="metric-fill" style={metricStyle}
+        clipPath={`url(#${clipId})`} />}
       {highlighted && hasMetric ?
         <text style={{fontSize}}>{formattedValue}</text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}

client/app/scripts/charts/node-shape-cloud.js

@@ -37,7 +37,8 @@ export default function NodeShapeCloud({highlighted, size, color}) {
 
   return (
     <g className="shape shape-cloud">
-      {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
+      {highlighted &&
+          <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(0.45)} />
       <circle className="node" r={Math.max(2, (size * 0.125))} />

client/app/scripts/charts/node-shape-heptagon.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { line, curveCardinalClosed } from 'd3-shape';
-import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
-import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
+import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils.js';
+import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles.js';
 
 
 const spline = line()
@@ -12,7 +12,7 @@ const spline = line()
 function polygon(r, sides) {
   const a = (Math.PI * 2) / sides;
   const points = [];
-  for (let i = 0; i < sides; i += 1) {
+  for (let i = 0; i < sides; i++) {
     points.push([r * Math.sin(a * i), -r * Math.cos(a * i)]);
   }
   return points;
@@ -30,20 +30,15 @@ export default function NodeShapeHeptagon({id, highlighted, size, color, metric}
   const metricStyle = { fill: getMetricColor(metric) };
   const className = classNames('shape', { metrics: hasMetric });
   const fontSize = size * CANVAS_METRIC_FONT_SIZE;
-  const halfSize = size * 0.5;
 
   return (
     <g className={className}>
-      {hasMetric && getClipPathDefinition(clipId, size, height, -halfSize, halfSize - height)}
+      {hasMetric && getClipPathDefinition(clipId, size, height, -size * 0.5, size * 0.5 - height)}
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(0.45)} />
-      {hasMetric && <path
-        className="metric-fill"
-        clipPath={`url(#${clipId})`}
-        style={metricStyle}
-        {...pathProps(0.45)}
-      />}
+      {hasMetric && <path className="metric-fill" clipPath={`url(#${clipId})`}
+        style={metricStyle} {...pathProps(0.45)} />}
       {highlighted && hasMetric ?
         <text style={{fontSize}}>{formattedValue}</text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}

client/app/scripts/charts/node-shape-hexagon.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { line, curveCardinalClosed } from 'd3-shape';
-import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
-import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
+import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils.js';
+import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles.js';
 
 
 const spline = line()
@@ -48,22 +48,13 @@ export default function NodeShapeHexagon({id, highlighted, size, color, metric})
 
   return (
     <g className={className}>
-      {hasMetric && getClipPathDefinition(
-        clipId,
-        size * (1 + (hexCurve * 2)),
-        height,
-        -(size * hexCurve),
-        (size - height) * (shadowSize * 2)
-      )}
+      {hasMetric && getClipPathDefinition(clipId,
+        size * (1 + hexCurve * 2), height, -size * hexCurve, (size - height) * shadowSize * 2)}
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(shadowSize)} />
-      {hasMetric && <path
-        className="metric-fill"
-        style={metricStyle}
-        clipPath={`url(#${clipId})`}
-        {...pathProps(shadowSize)}
-      />}
+      {hasMetric && <path className="metric-fill" style={metricStyle}
+        clipPath={`url(#${clipId})`} {...pathProps(shadowSize)} />}
       {highlighted && hasMetric ?
         <text style={{fontSize}}>
           {formattedValue}

client/app/scripts/charts/node-shape-square.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
-import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
+import {getMetricValue, getMetricColor, getClipPathDefinition} from '../utils/metric-utils.js';
+import {CANVAS_METRIC_FONT_SIZE} from '../constants/styles.js';
 
 
 export default function NodeShapeSquare({
@@ -28,11 +28,8 @@ export default function NodeShapeSquare({
       {highlighted && <rect className="highlighted" {...rectProps(0.7)} />}
       <rect className="border" stroke={color} {...rectProps(0.5, 0.5)} />
       <rect className="shadow" {...rectProps(0.45, 0.39)} />
-      {hasMetric && <rect
-        className="metric-fill" style={metricStyle}
-        clipPath={`url(#${clipId})`}
-        {...rectProps(0.45, 0.39)}
-      />}
+      {hasMetric && <rect className="metric-fill" style={metricStyle}
+        clipPath={`url(#${clipId})`} {...rectProps(0.45, 0.39)} />}
       {highlighted && hasMetric ?
         <text style={{fontSize}}>
           {formattedValue}

client/app/scripts/charts/node-shape-stack.js

@@ -5,8 +5,8 @@ export default function NodeShapeStack(props) {
   const contrastMode = isContrastMode();
   const Shape = props.shape;
   const [dx, dy] = contrastMode ? [0, 8] : [0, 5];
-  const dsx = (props.size + dx) / props.size;
-  const dsy = (props.size + dy) / props.size;
+  const dsx = (props.size * 2 + (dx * 2)) / (props.size * 2);
+  const dsy = (props.size * 2 + (dy * 2)) / (props.size * 2);
   const hls = [dsx, dsy];
 
   return (

client/app/scripts/charts/node.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { Map as makeMap, List as makeList } from 'immutable';
@@ -126,12 +127,9 @@ class Node extends React.Component {
 
           svgLabels(label, subLabel, labelClassName, subLabelClassName, labelOffsetY) :
 
-          <foreignObject
-            style={{pointerEvents: 'none'}}
-            x={labelOffsetX} y={labelOffsetY}
+          <foreignObject style={{pointerEvents: 'none'}} x={labelOffsetX} y={labelOffsetY}
             width={labelWidth} height="100em">
-            <div
-              className="node-label-wrapper"
+            <div className="node-label-wrapper"
               style={{pointerEvents: 'all', fontSize, maxWidth: labelWidth}}
               {...mouseEvents}>
               <div className={labelClassName}>
@@ -151,11 +149,8 @@ class Node extends React.Component {
             {...this.props} />
         </g>
 
-        {showingNetworks && <NodeNetworksOverlay
-          offset={networkOffset}
-          size={size} networks={networks}
-          stack={stack}
-        />}
+        {showingNetworks && <NodeNetworksOverlay offset={networkOffset}
+          size={size} networks={networks} stack={stack} />}
       </g>
     );
   }
@@ -166,7 +161,8 @@ class Node extends React.Component {
 
   handleMouseClick(ev) {
     ev.stopPropagation();
-    this.props.clickNode(this.props.id, this.props.label, this.shapeRef.getBoundingClientRect());
+    this.props.clickNode(this.props.id, this.props.label,
+      ReactDOM.findDOMNode(this.shapeRef).getBoundingClientRect());
   }
 
   handleMouseEnter() {

client/app/scripts/charts/nodes-chart-edges.js

@@ -13,7 +13,7 @@ class NodesChartEdges extends React.Component {
 
     return (
       <g className="nodes-chart-edges">
-        {layoutEdges.toIndexedSeq().map((edge) => {
+        {layoutEdges.toIndexedSeq().map(edge => {
           const sourceSelected = selectedNodeId === edge.get('source');
           const targetSelected = selectedNodeId === edge.get('target');
           const highlighted = highlightedEdgeIds.has(edge.get('id'));
@@ -26,8 +26,8 @@ class NodesChartEdges extends React.Component {
             !(selectedNetworkNodes.contains(edge.get('source')) &&
               selectedNetworkNodes.contains(edge.get('target')));
           const blurred = !highlighted && (otherNodesSelected ||
-                                           (!focused && noMatches) ||
-                                             (!focused && noSelectedNetworks));
+                                           !focused && noMatches ||
+                                             !focused && noSelectedNetworks);
 
           return (
             <EdgeContainer

client/app/scripts/charts/nodes-chart-nodes.js

@@ -21,12 +21,14 @@ class NodesChartNodes extends React.Component {
       && (selectedNodeId === node.get('id')
       || (adjacentNodes && adjacentNodes.includes(node.get('id')))));
     const setBlurred = node => node.set('blurred',
-      (selectedNodeId && !node.get('focused'))
-      || (searchQuery && !searchNodeMatches.has(node.get('id')) && !node.get('highlighted'))
-      || (selectedNetwork && !(node.get('networks') || makeList()).find(n => n.get('id') === selectedNetwork)));
+      selectedNodeId && !node.get('focused')
+      || searchQuery && !searchNodeMatches.has(node.get('id'))
+        && !node.get('highlighted')
+      || selectedNetwork
+        && !(node.get('networks') || makeList()).find(n => n.get('id') === selectedNetwork));
 
     // make sure blurred nodes are in the background
-    const sortNodes = (node) => {
+    const sortNodes = node => {
       if (node.get('id') === mouseOverNodeId) {
         return 3;
       }
@@ -40,7 +42,7 @@ class NodesChartNodes extends React.Component {
     };
 
     // TODO: think about pulling this up into the store.
-    const metric = (node) => {
+    const metric = node => {
       const isHighlighted = topCardNode && topCardNode.details && topCardNode.id === node.get('id');
       const sourceNode = isHighlighted ? fromJS(topCardNode.details) : node;
       return sourceNode.get('metrics') && sourceNode.get('metrics')