Dont scale graph on resize, only selected nodes

client/app/scripts/charts/node.js

@@ -12,7 +12,7 @@ const Node = React.createClass({
 
   render: function() {
     const props = this.props;
-    const nodeScale = this.props.nodeScale;
+    const nodeScale = props.focused ? props.selectedNodeScale : props.nodeScale;
     const zoomScale = this.props.zoomScale;
     let scaleFactor = 1;
     if (props.focused) {

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

@@ -32,6 +32,8 @@ const NodesChart = React.createClass({
       edges: makeMap(),
       panTranslate: [0, 0],
       scale: 1,
+      nodeScale: d3.scale.linear(),
+      selectedNodeScale: d3.scale.linear(),
       hasZoomed: false,
       maxNodesExceeded: false
     };
@@ -92,6 +94,7 @@ const NodesChart = React.createClass({
     const adjacency = hasSelectedNode ? AppStore.getAdjacentNodes(this.props.selectedNodeId) : null;
     const onNodeClick = this.props.onNodeClick;
     const zoomScale = this.state.scale;
+    const selectedNodeScale = this.state.selectedNodeScale;
 
     // highlighter functions
     const setHighlighted = node => {
@@ -137,6 +140,7 @@ const NodesChart = React.createClass({
             pseudo={node.get('pseudo')}
             subLabel={node.get('subLabel')}
             rank={node.get('rank')}
+            selectedNodeScale={selectedNodeScale}
             nodeScale={nodeScale}
             zoomScale={zoomScale}
             dx={node.get('x')}
@@ -194,8 +198,8 @@ const NodesChart = React.createClass({
   },
 
   render: function() {
-    const nodeElements = this.renderGraphNodes(this.state.nodes, this.props.nodeScale);
-    const edgeElements = this.renderGraphEdges(this.state.edges, this.props.nodeScale);
+    const nodeElements = this.renderGraphNodes(this.state.nodes, this.state.nodeScale);
+    const edgeElements = this.renderGraphEdges(this.state.edges, this.state.nodeScale);
     const scale = this.state.scale;
 
     const translate = this.state.panTranslate;
@@ -333,7 +337,11 @@ const NodesChart = React.createClass({
       return edge;
     });
 
+    // auto-scale node size for selected nodes
+    const selectedNodeScale = this.getNodeScale(props);
+
     return {
+      selectedNodeScale,
       edges: stateEdges,
       nodes: stateNodes
     };
@@ -383,11 +391,12 @@ const NodesChart = React.createClass({
 
     let stateNodes = this.initNodes(props.nodes, state.nodes);
     let stateEdges = this.initEdges(props.nodes, stateNodes);
+    const nodeScale = this.getNodeScale(props);
 
     const options = {
       width: props.width,
       height: props.height,
-      scale: props.nodeScale,
+      scale: nodeScale,
       margins: MARGINS,
       topologyId: this.props.topologyId
     };
@@ -431,10 +440,19 @@ const NodesChart = React.createClass({
       nodes: stateNodes,
       edges: stateEdges,
       scale: zoomScale,
+      nodeScale: nodeScale,
       maxNodesExceeded: false
     };
   },
 
+  getNodeScale: function(props) {
+    const expanse = Math.min(props.height, props.width);
+    const nodeSize = expanse / 3; // single node should fill a third of the screen
+    const maxNodeSize = expanse / 10;
+    const normalizedNodeSize = Math.min(nodeSize / Math.sqrt(props.nodes.size), maxNodeSize);
+    return this.state.nodeScale.copy().range([0, normalizedNodeSize]);
+  },
+
   zoomed: function() {
     // debug('zoomed', d3.event.scale, d3.event.translate);
     this.isZooming = true;

client/app/scripts/components/nodes.js

@@ -1,4 +1,3 @@
-const d3 = require('d3');
 const React = require('react');
 
 const NodesChart = require('../charts/nodes-chart');
@@ -10,14 +9,12 @@ const Nodes = React.createClass({
 
   getInitialState: function() {
     return {
-      nodeScale: d3.scale.linear(),
       width: window.innerWidth,
       height: window.innerHeight - navbarHeight - marginTop
     };
   },
 
   componentDidMount: function() {
-    this.setDimensions();
     window.addEventListener('resize', this.handleResize);
   },
 
@@ -34,7 +31,6 @@ const Nodes = React.createClass({
         nodes={this.props.nodes}
         width={this.state.width}
         height={this.state.height}
-        nodeScale={this.state.nodeScale}
         topologyId={this.props.topologyId}
         detailsWidth={this.props.detailsWidth}
         topMargin={this.props.topMargin}
@@ -49,13 +45,8 @@ const Nodes = React.createClass({
   setDimensions: function() {
     const width = window.innerWidth;
     const height = window.innerHeight - navbarHeight - marginTop;
-    const expanse = Math.min(height, width);
-    const nodeSize = expanse / 3; // single node should fill a third of the screen
-    const maxNodeSize = expanse / 10;
-    const normalizedNodeSize = Math.min(nodeSize / Math.sqrt(this.props.nodes.size), maxNodeSize);
-    const nodeScale = this.state.nodeScale.range([0, normalizedNodeSize]);
 
-    this.setState({height, width, nodeScale});
+    this.setState({height, width});
   }
 
 });