diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index 039ac5f21..738c9f111 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -288,23 +288,24 @@ const NodesChart = React.createClass({ const visibleWidth = Math.max(props.width - props.detailsWidth, 0); const translate = state.translate; const offsetX = translate[0]; - if (offsetX + centerX + radius > visibleWidth) { + const outerRadius = radius + this.state.nodeScale(2); + if (offsetX + centerX + outerRadius > visibleWidth) { // shift left if blocked by details - const shift = centerX + radius - visibleWidth; + const shift = centerX + outerRadius - visibleWidth; translate[0] = -shift; - } else if (offsetX + centerX - radius < 0) { + } else if (offsetX + centerX - outerRadius < 0) { // shift right if off canvas - const shift = offsetX - offsetX + centerX - radius; + const shift = offsetX - offsetX + centerX - outerRadius; translate[0] = -shift; } const offsetY = translate[1]; - if (offsetY + centerY + radius > props.height) { + if (offsetY + centerY + outerRadius > props.height) { // shift up if past bottom - const shift = centerY + radius - props.height; + const shift = centerY + outerRadius - props.height; translate[1] = -shift; - } else if (offsetY + centerY - radius - props.topMargin < 0) { + } else if (offsetY + centerY - outerRadius - props.topMargin < 0) { // shift down if off canvas - const shift = offsetY - offsetY + centerY - radius - props.topMargin; + const shift = offsetY - offsetY + centerY - outerRadius - props.topMargin; translate[1] = -shift; } diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index 8f23c3b30..9f1fa120b 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -72,7 +72,7 @@ const App = React.createClass({ const showingDetails = this.state.selectedNodeId; const versionString = this.state.version ? 'Version ' + this.state.version : ''; // width of details panel blocking a view - const detailsWidth = showingDetails ? 420 : 0; + const detailsWidth = showingDetails ? 450 : 0; const topMargin = 100; return (