Renamed 'subLabel' to 'labelMinor' and removed 'node_count' property.

client/app/scripts/charts/node.js

@@ -18,7 +18,7 @@ import NodeShapeCloud from './node-shape-cloud';
 import NodeNetworksOverlay from './node-networks-overlay';
 
 
-const labelWidth = 1.4 * NODE_BASE_SIZE;
+const labelWidth = 1.2 * NODE_BASE_SIZE;
 const nodeShapes = {
   circle: NodeShapeCircle,
   hexagon: NodeShapeHexagon,
@@ -54,20 +54,20 @@ class Node extends React.PureComponent {
     this.saveShapeRef = this.saveShapeRef.bind(this);
   }
 
-  renderSvgLabels(labelClassName, subLabelClassName, labelOffsetY) {
-    const { label, subLabel } = this.props;
+  renderSvgLabels(labelClassName, labelMinorClassName, labelOffsetY) {
+    const { label, labelMinor } = this.props;
     return (
       <g className="node-labels-container">
         <text className={labelClassName} y={13 + labelOffsetY} textAnchor="middle">{label}</text>
-        <text className={subLabelClassName} y={30 + labelOffsetY} textAnchor="middle">
-          {subLabel}
+        <text className={labelMinorClassName} y={30 + labelOffsetY} textAnchor="middle">
+          {labelMinor}
         </text>
       </g>
     );
   }
 
-  renderStandardLabels(labelClassName, subLabelClassName, labelOffsetY, mouseEvents) {
-    const { label, subLabel, matches = makeMap() } = this.props;
+  renderStandardLabels(labelClassName, labelMinorClassName, labelOffsetY, mouseEvents) {
+    const { label, labelMinor, matches = makeMap() } = this.props;
     const matchedMetadata = matches.get('metadata', makeList());
     const matchedParents = matches.get('parents', makeList());
     const matchedNodeDetails = matchedMetadata.concat(matchedParents);
@@ -83,8 +83,8 @@ class Node extends React.PureComponent {
           <div className={labelClassName}>
             <MatchedText text={label} match={matches.get('label')} />
           </div>
-          <div className={subLabelClassName}>
-            <MatchedText text={subLabel} match={matches.get('sublabel')} />
+          <div className={labelMinorClassName}>
+            <MatchedText text={labelMinor} match={matches.get('labelMinor')} />
           </div>
           <MatchedResults matches={matchedNodeDetails} />
         </div>
@@ -108,7 +108,7 @@ class Node extends React.PureComponent {
     });
 
     const labelClassName = classnames('node-label', { truncate });
-    const subLabelClassName = classnames('node-sublabel', { truncate });
+    const labelMinorClassName = classnames('node-label-minor', { truncate });
 
     const NodeShapeType = getNodeShape(this.props);
     const mouseEvents = {
@@ -120,8 +120,8 @@ class Node extends React.PureComponent {
     return (
       <g className={nodeClassName} transform={transform}>
         {exportingGraph ?
-          this.renderSvgLabels(labelClassName, subLabelClassName, labelOffsetY) :
-          this.renderStandardLabels(labelClassName, subLabelClassName, labelOffsetY, mouseEvents)}
+          this.renderSvgLabels(labelClassName, labelMinorClassName, labelOffsetY) :
+          this.renderStandardLabels(labelClassName, labelMinorClassName, labelOffsetY, mouseEvents)}
 
         <g {...mouseEvents} ref={this.saveShapeRef}>
           <NodeShapeType id={id} highlighted={highlighted} color={color} metric={metric} />

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

@@ -57,8 +57,8 @@ class NodesChartNodes extends React.Component {
           key={node.get('id')}
           id={node.get('id')}
           label={node.get('label')}
+          labelMinor={node.get('labelMinor')}
           pseudo={node.get('pseudo')}
-          subLabel={node.get('subLabel')}
           metric={nodeMetrics.get(node.get('id'))}
           rank={node.get('rank')}
           isAnimated={isAnimated}

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

@@ -17,7 +17,7 @@ import { layoutWithSelectedNode } from '../selectors/nodes-chart-focus';
 import { graphLayout } from '../selectors/nodes-chart-layout';
 
 
-const GRAPH_COMPLEXITY_NODES_TRESHOLD = 200;
+const GRAPH_COMPLEXITY_NODES_TRESHOLD = 100;
 const ZOOM_CACHE_FIELDS = [
   'panTranslateX', 'panTranslateY',
   'zoomScale', 'minZoomScale', 'maxZoomScale'

client/app/scripts/components/debug-toolbar.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import Perf from 'react-addons-perf';
 import { connect } from 'react-redux';
-import { sampleSize, sample, random, range, flattenDeep } from 'lodash';
+import { sampleSize, sample, random, range, flattenDeep, times } from 'lodash';
 import { fromJS, Set as makeSet } from 'immutable';
 import { hsl } from 'd3-color';
 import debug from 'debug';
@@ -13,7 +13,6 @@ import { getNodeColor, getNodeColorDark, text2degree } from '../utils/color-util
 
 
 const SHAPES = ['square', 'hexagon', 'heptagon', 'circle'];
-const NODE_COUNTS = [1, 2, 3];
 const STACK_VARIANTS = [false, true];
 const METRIC_FILLS = [0, 0.1, 50, 99.9, 100];
 const NETWORKS = [
@@ -42,15 +41,11 @@ const LABEL_PREFIXES = range('A'.charCodeAt(), 'Z'.charCodeAt() + 1)
   .map(n => String.fromCharCode(n));
 
 
-const deltaAdd = (
-  name, adjacency = [], shape = 'circle', stack = false, nodeCount = 1,
-    networks = NETWORKS
-) => ({
+const deltaAdd = (name, adjacency = [], shape = 'circle', stack = false, networks = NETWORKS) => ({
   adjacency,
   controls: {},
   shape,
   stack,
-  node_count: nodeCount,
   id: name,
   label: name,
   labelMinor: name,
@@ -82,8 +77,8 @@ function label(shape, stacked) {
 
 function addAllVariants(dispatch) {
   const newNodes = flattenDeep(STACK_VARIANTS.map(stack => (SHAPES.map((s) => {
-    if (!stack) return [deltaAdd(label(s, stack), [], s, stack, 1)];
-    return NODE_COUNTS.map(n => deltaAdd(label(s, stack), [], s, stack, n));
+    if (!stack) return [deltaAdd(label(s, stack), [], s, stack)];
+    return times(3).map(() => deltaAdd(label(s, stack), [], s, stack));
   }))));
 
   dispatch(receiveNodesDelta({
@@ -262,7 +257,6 @@ class DebugToolbar extends React.Component {
       sampleArray(allNodes),
       sample(SHAPES),
       sample(STACK_VARIANTS),
-      sample(NODE_COUNTS),
       sampleArray(NETWORKS, 10)
     ));
   }

client/app/scripts/selectors/nodes-chart-layout.js

@@ -83,22 +83,9 @@ export const graphLayout = createSelector(
     // computed property, but this is still useful.
     log(`graph layout calculation took ${timedLayouter.time}ms`);
 
-    const layoutEdges = graph.edges;
-    const layoutNodes = graph.nodes.map(node => makeMap({
-      x: node.get('x'),
-      y: node.get('y'),
-      id: node.get('id'),
-      label: node.get('label'),
-      pseudo: node.get('pseudo'),
-      subLabel: node.get('labelMinor'),
-      nodeCount: node.get('node_count'),
-      metrics: node.get('metrics'),
-      rank: node.get('rank'),
-      shape: node.get('shape'),
-      stack: node.get('stack'),
-      // networks: node.get('networks'),
-    }));
-
-    return { layoutNodes, layoutEdges };
+    return {
+      layoutNodes: graph.nodes,
+      layoutEdges: graph.edges,
+    };
   }
 );

client/app/scripts/selectors/nodes.js

@@ -19,7 +19,6 @@ export const nodeAdjacenciesSelector = createSelector(
     label: node.get('label'),
     pseudo: node.get('pseudo'),
     subLabel: node.get('labelMinor'),
-    nodeCount: node.get('node_count'),
     metrics: node.get('metrics'),
     rank: node.get('rank'),
     shape: node.get('shape'),

client/app/scripts/utils/search-utils.js

@@ -7,7 +7,7 @@ import { slugify } from './string-utils';
 // topolevel search fields
 const SEARCH_FIELDS = makeMap({
   label: 'label',
-  sublabel: 'labelMinor'
+  labelMinor: 'labelMinor'
 });
 
 const COMPARISONS = makeMap({

client/app/scripts/utils/topology-utils.js

@@ -175,7 +175,8 @@ export function getCurrentTopologyUrl(state) {
 }
 
 export function isNodeMatchingQuery(node, query) {
-  return node.get('label').includes(query) || node.get('subLabel').includes(query);
+  return node.get('label').includes(query) ||
+    node.get('labelMinor').includes(query);
 }
 
 export function graphExceedsComplexityThresh(stats) {

client/app/styles/_base.scss

@@ -308,14 +308,14 @@
       // stroke-width: 4px;
     }
 
-    .node-sublabel {
-      line-height: 125%;
-    }
-
     .node-label {
       color: $text-color;
     }
 
+    .node-label-minor {
+      line-height: 125%;
+    }
+
     .node-labels-container {
       transform: scale($node-text-scale);
       pointer-events: none;
@@ -346,12 +346,12 @@
       width: 100%;
     }
 
-    .node-sublabel {
+    .node-label-minor {
       color: $text-secondary-color;
       font-size: 0.85em;
     }
 
-    .node-label, .node-sublabel {
+    .node-label, .node-label-minor {
       span {
         border-radius: 2px;
       }
@@ -374,7 +374,7 @@
         fill: $text-secondary-color;
       }
 
-      .node-sublabel {
+      .node-label-minor {
         fill: $text-tertiary-color;
       }
 
@@ -396,7 +396,7 @@
       animation: throb 0.5s $base-ease;
     }
 
-    .node-label, .node-sublabel {
+    .node-label, .node-label-minor {
       text-align: center;
     }