diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index d5a84ce3a..accbf6058 100644
--- a/client/app/scripts/charts/node.js
+++ b/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 (
{label}
-
- {subLabel}
+
+ {labelMinor}
);
}
- 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 {
-
@@ -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 (
{exportingGraph ?
- this.renderSvgLabels(labelClassName, subLabelClassName, labelOffsetY) :
- this.renderStandardLabels(labelClassName, subLabelClassName, labelOffsetY, mouseEvents)}
+ this.renderSvgLabels(labelClassName, labelMinorClassName, labelOffsetY) :
+ this.renderStandardLabels(labelClassName, labelMinorClassName, labelOffsetY, mouseEvents)}
diff --git a/client/app/scripts/charts/nodes-chart-nodes.js b/client/app/scripts/charts/nodes-chart-nodes.js
index 4f9a837d0..caed5a42f 100644
--- a/client/app/scripts/charts/nodes-chart-nodes.js
+++ b/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}
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 2718d47d5..c0d3263ad 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/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'
diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js
index ad7b6cd09..5ccc23027 100644
--- a/client/app/scripts/components/debug-toolbar.js
+++ b/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)
));
}
diff --git a/client/app/scripts/selectors/nodes-chart-layout.js b/client/app/scripts/selectors/nodes-chart-layout.js
index bb61cf8da..894c97492 100644
--- a/client/app/scripts/selectors/nodes-chart-layout.js
+++ b/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,
+ };
}
);
diff --git a/client/app/scripts/selectors/nodes.js b/client/app/scripts/selectors/nodes.js
index 8bf9fd588..f6470b768 100644
--- a/client/app/scripts/selectors/nodes.js
+++ b/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'),
diff --git a/client/app/scripts/utils/search-utils.js b/client/app/scripts/utils/search-utils.js
index 761421944..51ec0aa1d 100644
--- a/client/app/scripts/utils/search-utils.js
+++ b/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({
diff --git a/client/app/scripts/utils/topology-utils.js b/client/app/scripts/utils/topology-utils.js
index df4dab82a..80aca9e5a 100644
--- a/client/app/scripts/utils/topology-utils.js
+++ b/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) {
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 7e8c7a83e..d820c3f8b 100644
--- a/client/app/styles/_base.scss
+++ b/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;
}