From 6191999c9ee7b477e2822b8e6899753e44d11217 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 11 Sep 2015 16:39:00 +0200
Subject: [PATCH] shift canvas up/down if node circle off canvas

---
 client/app/scripts/charts/nodes-chart.js | 11 +++++++++++
 client/app/scripts/components/app.js     |  3 ++-
 client/app/scripts/components/nodes.js   |  1 +
 3 files changed, 14 insertions(+), 1 deletion(-)

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