Scale node labels with the node's size.

- Within certain bounds. Still have min-label size, mainly effects nodes
  that get really big.
- Set a max size on nodes too, really big ones lose their border.

client/app/scripts/charts/node.js

@@ -16,6 +16,12 @@ import NodeShapeHex from './node-shape-hex';
 import NodeShapeHeptagon from './node-shape-heptagon';
 import NodeShapeCloud from './node-shape-cloud';
 import NodeNetworksOverlay from './node-networks-overlay';
+import { MIN_NODE_LABEL_SIZE, BASE_NODE_LABEL_SIZE, BASE_NODE_SIZE } from '../constants/styles';
+
+
+function labelFontSize(nodeSize) {
+  return Math.max(MIN_NODE_LABEL_SIZE, (BASE_NODE_LABEL_SIZE / BASE_NODE_SIZE) * nodeSize);
+}
 
 function stackedShape(Shape) {
   const factory = React.createFactory(NodeShapeStack);
@@ -104,6 +110,7 @@ class Node extends React.Component {
     const NodeShapeType = getNodeShape(this.props);
     const useSvgLabels = exportingGraph;
     const size = nodeScale(scaleFactor);
+    const fontSize = labelFontSize(size);
     const networkOffset = focused ? nodeScale(scaleFactor * 0.67) : nodeScale(0.67);
     const mouseEvents = {
       onClick: this.handleMouseClick,
@@ -120,7 +127,9 @@ class Node extends React.Component {
 
           <foreignObject style={{pointerEvents: 'none'}} x={labelOffsetX} y={labelOffsetY}
             width={labelWidth} height="100em" transform={labelTransform}>
-            <div className="node-label-wrapper" style={{pointerEvents: 'all'}} {...mouseEvents}>
+            <div className="node-label-wrapper"
+              style={{pointerEvents: 'all', fontSize}}
+              {...mouseEvents}>
               <div className={labelClassName}>
                 <MatchedText text={label} match={matches.get('label')} />
               </div>

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

@@ -8,7 +8,7 @@ import timely from 'timely';
 
 import { clickBackground } from '../actions/app-actions';
 import { EDGE_ID_SEPARATOR } from '../constants/naming';
-import { DETAILS_PANEL_WIDTH } from '../constants/styles';
+import { DETAILS_PANEL_WIDTH, MAX_NODE_SIZE } from '../constants/styles';
 import Logo from '../components/logo';
 import { doLayout } from './nodes-layout';
 import NodesChartElements from './nodes-chart-elements';
@@ -370,7 +370,7 @@ class NodesChart extends React.Component {
   getNodeScale(nodes, width, height) {
     const expanse = Math.min(height, width);
     const nodeSize = expanse / 3; // single node should fill a third of the screen
-    const maxNodeSize = expanse / 10;
+    const maxNodeSize = Math.min(MAX_NODE_SIZE, expanse / 10);
     const normalizedNodeSize = Math.min(nodeSize / Math.sqrt(nodes.size), maxNodeSize);
     return this.state.nodeScale.copy().range([0, normalizedNodeSize]);
   }

client/app/scripts/constants/styles.js

@@ -17,3 +17,11 @@ export const CANVAS_MARGINS = {
   right: 40,
   bottom: 100,
 };
+
+//
+// The base size the shapes were defined at matches nicely w/ a 14px font.
+//
+export const BASE_NODE_SIZE = 64;
+export const MAX_NODE_SIZE = 96;
+export const BASE_NODE_LABEL_SIZE = 14;
+export const MIN_NODE_LABEL_SIZE = BASE_NODE_LABEL_SIZE;