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;

client/app/styles/main.less

@@ -368,7 +368,6 @@ h2 {
 
     .node-label {
       color: @text-color;
-      font-size: 14px;
     }
 
     .node-label-wrapper {
@@ -390,7 +389,7 @@ h2 {
 
     .node-sublabel {
       color: @text-secondary-color;
-      font-size: 12px;
+      font-size: 0.85em;
     }
 
     &.hovered {
@@ -547,7 +546,7 @@ h2 {
   text-align: center;
 
   &-match {
-    font-size: 0.7rem;
+    font-size: 0.8rem;
 
     &-wrapper {
       display: inline-block;
@@ -564,7 +563,7 @@ h2 {
 
   &-more {
     text-transform: uppercase;
-    font-size: 0.6rem;
+    font-size: 0.7rem;
     color: darken(@weave-blue, 10%);
     margin-top: -2px;
   }