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 (
@@ -79,7 +80,7 @@ const App = React.createClass({
diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js index 961673bd9..c2e088c19 100644 --- a/client/app/scripts/components/nodes.js +++ b/client/app/scripts/components/nodes.js @@ -40,6 +40,7 @@ const Nodes = React.createClass({ height={this.state.height} topologyId={this.props.topologyId} detailsWidth={this.props.detailsWidth} + topMargin={this.props.topMargin} />
);