diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index ded648668..039ac5f21 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -297,6 +297,17 @@ const NodesChart = React.createClass({ const shift = offsetX - offsetX + centerX - radius; translate[0] = -shift; } + const offsetY = translate[1]; + if (offsetY + centerY + radius > props.height) { + // shift up if past bottom + const shift = centerY + radius - props.height; + translate[1] = -shift; + } else if (offsetY + centerY - radius - props.topMargin < 0) { + // shift down if off canvas + const shift = offsetY - offsetY + centerY - radius - props.topMargin; + translate[1] = -shift; + } + // saving translate in d3's panning cache this.zoom.translate(translate); diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index 255a6732e..b02e79768 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -62,6 +62,7 @@ const App = React.createClass({ const versionString = this.state.version ? 'Version ' + this.state.version : ''; // width of details panel blocking a view const detailsWidth = showingDetails ? 420 : 0; + const topMargin = 100; return (