shift canvas up/down if node circle off canvas

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);
 

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 (
       <div>
@@ -79,7 +80,7 @@ const App = React.createClass({
 
         <Nodes nodes={this.state.nodes} highlightedNodeIds={this.state.highlightedNodeIds}
           highlightedEdgeIds={this.state.highlightedEdgeIds} detailsWidth={detailsWidth}
-          selectedNodeId={this.state.selectedNodeId}
+          selectedNodeId={this.state.selectedNodeId} topMargin={topMargin}
           topologyId={this.state.currentTopologyId} />
 
         <div className="footer">

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}
         />
       </div>
     );