diff --git a/client/app/scripts/charts/node-container.js b/client/app/scripts/charts/node-container.js index 2296731ae..75506b290 100644 --- a/client/app/scripts/charts/node-container.js +++ b/client/app/scripts/charts/node-container.js @@ -11,7 +11,7 @@ export default class NodeContainer extends React.Component { render() { const { dx, dy, focused, layoutPrecision, zoomScale } = this.props; const animConfig = [80, 20]; // stiffness, damping - const scaleFactor = focused ? (2 / zoomScale) : 1; + const scaleFactor = focused ? (1 / zoomScale) : 1; const other = _.omit(this.props, 'dx', 'dy'); return ( diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 05fef8e9d..a7c458162 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -55,9 +55,11 @@ export default class Node extends React.Component { } render() { - const { blurred, focused, highlighted, label, nodeScale, pseudo, rank, + const { blurred, focused, highlighted, label, pseudo, rank, subLabel, scaleFactor, transform, zoomScale } = this.props; + const nodeScale = focused ? this.props.selectedNodeScale : this.props.nodeScale; + const color = getNodeColor(rank, label, pseudo); const truncate = !focused && !highlighted; const labelText = truncate ? ellipsis(label, 14, nodeScale(4 * scaleFactor)) : label; diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index d6123a582..0308f2e6e 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -270,7 +270,7 @@ export default class NodesChart extends React.Component { }); // auto-scale node size for selected nodes - const selectedNodeScale = this.getNodeScale(props); + const selectedNodeScale = this.getNodeScale(adjacentNodes, props.width, props.height); return { selectedNodeScale, @@ -314,7 +314,7 @@ export default class NodesChart extends React.Component { const nodeMetrics = stateNodes.map(node => makeMap({ metrics: node.get('metrics') })); - const nodeScale = this.getNodeScale(props); + const nodeScale = this.getNodeScale(props.nodes, props.width, props.height); const nextState = { nodeScale }; const options = { @@ -365,11 +365,11 @@ export default class NodesChart extends React.Component { return nextState; } - getNodeScale(props) { - const expanse = Math.min(props.height, props.width); + 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 normalizedNodeSize = Math.min(nodeSize / Math.sqrt(props.nodes.size), maxNodeSize); + const normalizedNodeSize = Math.min(nodeSize / Math.sqrt(nodes.size), maxNodeSize); return this.state.nodeScale.copy().range([0, normalizedNodeSize]); }