Split the zooming and layout logic in nodes-chart.js between a bunch …

…of selectors

client/.eslintrc

@@ -36,6 +36,5 @@
     "react/prefer-stateless-function": 0,
     "react/sort-comp": 0,
     "react/prop-types": 0,
-    "no-unused-vars": 0,
   }
 }

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

@@ -167,54 +167,6 @@ describe('NodesLayout', () => {
     expect(hasUnseen).toBeTruthy();
   });
 
-  it('shifts layouts to center', () => {
-    let xMin;
-    let xMax;
-    let yMin;
-    let yMax;
-    let xCenter;
-    let yCenter;
-
-    // make sure initial layout is centered
-    const original = NodesLayout.doLayout(
-      nodeSets.initial4.nodes,
-      nodeSets.initial4.edges
-    );
-    xMin = original.nodes.minBy(n => n.get('x'));
-    xMax = original.nodes.maxBy(n => n.get('x'));
-    yMin = original.nodes.minBy(n => n.get('y'));
-    yMax = original.nodes.maxBy(n => n.get('y'));
-    xCenter = (xMin.get('x') + xMax.get('x')) / 2;
-    yCenter = (yMin.get('y') + yMax.get('y')) / 2;
-    expect(xCenter).toEqual(NodesLayout.DEFAULT_WIDTH / 2);
-    expect(yCenter).toEqual(NodesLayout.DEFAULT_HEIGHT / 2);
-
-    // make sure re-running is idempotent
-    const rerun = NodesLayout.shiftLayoutToCenter(original);
-    xMin = rerun.nodes.minBy(n => n.get('x'));
-    xMax = rerun.nodes.maxBy(n => n.get('x'));
-    yMin = rerun.nodes.minBy(n => n.get('y'));
-    yMax = rerun.nodes.maxBy(n => n.get('y'));
-    xCenter = (xMin.get('x') + xMax.get('x')) / 2;
-    yCenter = (yMin.get('y') + yMax.get('y')) / 2;
-    expect(xCenter).toEqual(NodesLayout.DEFAULT_WIDTH / 2);
-    expect(yCenter).toEqual(NodesLayout.DEFAULT_HEIGHT / 2);
-
-    // shift after window was resized
-    const shifted = NodesLayout.shiftLayoutToCenter(original, {
-      width: 128,
-      height: 256
-    });
-    xMin = shifted.nodes.minBy(n => n.get('x'));
-    xMax = shifted.nodes.maxBy(n => n.get('x'));
-    yMin = shifted.nodes.minBy(n => n.get('y'));
-    yMax = shifted.nodes.maxBy(n => n.get('y'));
-    xCenter = (xMin.get('x') + xMax.get('x')) / 2;
-    yCenter = (yMin.get('y') + yMax.get('y')) / 2;
-    expect(xCenter).toEqual(128 / 2);
-    expect(yCenter).toEqual(256 / 2);
-  });
-
   it('lays out initial nodeset in a rectangle', () => {
     const result = NodesLayout.doLayout(
       nodeSets.initial4.nodes,

client/app/scripts/charts/edge.js

@@ -3,6 +3,8 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 
 import { enterEdge, leaveEdge } from '../actions/app-actions';
+import { isContrastMode } from '../utils/contrast-utils';
+import { NODE_BASE_SIZE } from '../constants/styles';
 
 class Edge extends React.Component {
 
@@ -13,15 +15,19 @@ class Edge extends React.Component {
   }
 
   render() {
-    const { id, path, highlighted, blurred, focused } = this.props;
-    const className = classNames('edge', {highlighted, blurred, focused});
+    const { id, path, highlighted, blurred, focused, scale } = this.props;
+    const className = classNames('edge', { highlighted, blurred, focused });
+    const thickness = scale * (isContrastMode() ? 0.015 : 0.0075) * NODE_BASE_SIZE;
 
+    // Draws the edge so that its thickness reflects the zoom scale.
+    // Edge shadow is always made 10x thicker than the edge itself.
     return (
       <g
-        className={className} onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave} id={id}>
-        <path d={path} className="shadow" />
-        <path d={path} className="link" />
+        id={id} className={className}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}>
+        <path className="shadow" d={path} style={{ strokeWidth: 10 * thickness }} />
+        <path className="link" d={path} style={{ strokeWidth: thickness }} />
       </g>
     );
   }

client/app/scripts/charts/node.js

@@ -102,7 +102,7 @@ class Node extends React.Component {
 
     const color = getNodeColor(rank, label, pseudo);
     const truncate = !focused && !hovered;
-    const labelOffsetY = (showingNetworks && networks) ? 40 : 30;
+    const labelOffsetY = (showingNetworks && networks) ? 40 : 28;
     const networkOffset = 0.67;
 
     const nodeClassName = classnames('node', {

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

@@ -7,9 +7,9 @@ import EdgeContainer from './edge-container';
 
 class NodesChartEdges extends React.Component {
   render() {
-    const { hasSelectedNode, highlightedEdgeIds, layoutEdges,
-      searchNodeMatches = makeMap(), searchQuery, isAnimated,
-      selectedNodeId, selectedNetwork, selectedNetworkNodes } = this.props;
+    const { hasSelectedNode, highlightedEdgeIds, layoutEdges, searchQuery,
+      isAnimated, selectedScale, selectedNodeId, selectedNetwork, selectedNetworkNodes,
+      searchNodeMatches = makeMap() } = this.props;
 
     return (
       <g className="nodes-chart-edges">
@@ -36,6 +36,7 @@ class NodesChartEdges extends React.Component {
               source={edge.get('source')}
               target={edge.get('target')}
               waypoints={edge.get('points')}
+              scale={focused ? selectedScale : 1}
               isAnimated={isAnimated}
               blurred={blurred}
               focused={focused}

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

@@ -12,10 +12,10 @@ class NodesChartElements extends React.Component {
       <g className="nodes-chart-elements" transform={props.transform}>
         <NodesChartEdges
           layoutEdges={props.layoutEdges}
+          selectedScale={props.selectedScale}
           isAnimated={props.isAnimated} />
         <NodesChartNodes
           layoutNodes={props.completeNodes}
-          scale={props.scale}
           selectedScale={props.selectedScale}
           isAnimated={props.isAnimated} />
       </g>

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

@@ -7,9 +7,9 @@ import NodeContainer from './node-container';
 
 class NodesChartNodes extends React.Component {
   render() {
-    const { adjacentNodes, highlightedNodeIds, layoutNodes, isAnimated, mouseOverNodeId, scale,
-      selectedScale, searchQuery, selectedMetric, selectedNetwork, selectedNodeId, topCardNode,
-      searchNodeMatches = makeMap() } = this.props;
+    const { adjacentNodes, highlightedNodeIds, layoutNodes, isAnimated, mouseOverNodeId,
+      selectedScale, searchQuery, selectedMetric, selectedNetwork, selectedNodeId,
+      topCardNode, searchNodeMatches = makeMap() } = this.props;
 
     // highlighter functions
     const setHighlighted = node => node.set('highlighted',
@@ -71,7 +71,7 @@ class NodesChartNodes extends React.Component {
           metric={metric(node)}
           rank={node.get('rank')}
           isAnimated={isAnimated}
-          magnified={node.get('focused') ? selectedScale / scale : 1}
+          magnified={node.get('focused') ? selectedScale : 1}
           dx={node.get('x')}
           dy={node.get('y')}
         />)}