shift canvas if selected nodes are hidden

client/app/scripts/charts/nodes-chart.js

@@ -28,7 +28,7 @@ const NodesChart = React.createClass({
       nodes: {},
       edges: {},
       nodeScale: 1,
-      translate: '0,0',
+      translate: [0, 0],
       scale: 1,
       hasZoomed: false
     };
@@ -146,6 +146,7 @@ const NodesChart = React.createClass({
     const edgeElements = this.renderGraphEdges(this.state.edges, this.state.nodeScale);
     const transform = 'translate(' + this.state.translate + ')' +
       ' scale(' + this.state.scale + ')';
+    debug('translate', transform);
 
     return (
       <svg width="100%" height="100%" className="nodes-chart">
@@ -264,9 +265,26 @@ const NodesChart = React.createClass({
       }
     });
 
+    // shift canvas selected node out of view
+    const visibleWidth = Math.max(props.width - props.detailsWidth, 0);
+    const translate = state.translate;
+    const offsetX = translate[0];
+    if (offsetX + centerX + radius > visibleWidth) {
+      // shift left if blocked by details
+      const shift = centerX + radius - visibleWidth;
+      translate[0] = -shift;
+    } else if (offsetX + centerX - radius < 0) {
+      // shift right if off canvas
+      const shift = offsetX - offsetX + centerX - radius;
+      translate[0] = -shift;
+    }
+    // saving translate in d3's panning cache
+    this.zoom.translate(translate);
+
     return {
       edges: layoutEdges,
-      nodes: layoutNodes
+      nodes: layoutNodes,
+      translate: translate
     };
   },
 

client/app/scripts/components/app.js

@@ -60,6 +60,8 @@ const App = React.createClass({
   render: function() {
     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;
 
     return (
       <div>
@@ -76,7 +78,7 @@ const App = React.createClass({
         </div>
 
         <Nodes nodes={this.state.nodes} highlightedNodeIds={this.state.highlightedNodeIds}
-          highlightedEdgeIds={this.state.highlightedEdgeIds}
+          highlightedEdgeIds={this.state.highlightedEdgeIds} detailsWidth={detailsWidth}
           selectedNodeId={this.state.selectedNodeId}
           topologyId={this.state.currentTopologyId} />
 

client/app/scripts/components/nodes.js

@@ -39,6 +39,7 @@ const Nodes = React.createClass({
           width={this.state.width}
           height={this.state.height}
           topologyId={this.props.topologyId}
+          detailsWidth={this.props.detailsWidth}
         />
       </div>
     );