Figure out the orbit size in global traffic graph so graphs with n nu…

…mber of nodes will fit in the viewport.
Netflix · Nov 4, 2016 · 386ee4e · 386ee4e
1 parent 8cde289
commit 386ee4e
Showing 1 changed file with 31 additions and 9 deletions.
diff --git a/src/global/globalTrafficGraph.js b/src/global/globalTrafficGraph.js
@@ -22,17 +22,17 @@ import GlobalNode from './globalNode';
 import RendererUtils from '../rendererUtils';
 import TrafficGraph from '../base/trafficGraph';
 
-function updatePosition (node, nodeCount, nodeIndex, orbitSize) {
+function updatePosition (node, nodeCount, nodeIndex, orbitSize, nodeSize) {
   const rotationAdjustment = nodeCount % 2 === 0 ? Math.PI / 4 : (5 / 6) * Math.PI;
-  node.size = 120;
+  node.size = nodeSize;
   const adjustment = (((2 * Math.PI) * nodeIndex) / nodeCount) + rotationAdjustment;
   node.position = {
     x: ((orbitSize / 2) * Math.cos(adjustment)),
     y: ((orbitSize / 2) * Math.sin(adjustment))
   };
 }
 
-function positionNodes (nodes, orbitSize) {
+function positionNodes (nodes, orbitSize, nodeSize) {
   let nodeIndex = 0;
   const nodeCount = Object.keys(nodes).length - 1;
 
@@ -45,16 +45,18 @@ function positionNodes (nodes, orbitSize) {
     const node = nodeMap[nodeName];
     if (!node.isEntryNode()) {
       nodeIndex++;
-      updatePosition(node, nodeCount, nodeIndex, orbitSize);
+      updatePosition(node, nodeCount, nodeIndex, orbitSize, nodeSize);
     } else {
-      node.size = 150;
+      node.size = nodeSize * 1.25;
       node.position = {
         x: 0,
         y: 0
       };
     }
   });
+}
 
+function centerNodesVertically (nodes) {
   // Center the nodes vertically on the canvas
   const yPositions = _.map(nodes, n => n.position.y);
   const yOffset = Math.abs(Math.abs(_.max(yPositions)) - Math.abs(_.min(yPositions))) / 2;
@@ -63,12 +65,24 @@ function positionNodes (nodes, orbitSize) {
   });
 }
 
+function recalculateOrbitSize (nodes, orbitSize, nodeSize) {
+  const yPositions = _.map(nodes, n => n.position.y);
+  const yDistance = _.max(yPositions) - _.min(yPositions);
+  const totalHeight = (nodeSize * 2.25) + yDistance;
+  const newOrbitSize = orbitSize - Math.max(totalHeight - orbitSize, 0);
+
+  return newOrbitSize;
+}
+
 class GlobalTrafficGraph extends TrafficGraph {
   constructor (name, mainView, parentGraph, graphWidth, graphHeight) {
     super(name, mainView, parentGraph, graphWidth, graphHeight, GlobalNode, GlobalConnection);
     this.type = 'global';
 
-    this.orbitSize = Math.min(graphWidth, graphHeight);
+    this.nodeSize = 120;
+    this.maxDimension = Math.min(graphWidth, graphHeight);
+    this.orbitSize = this.maxDimension;
+
     this.linePrecision = 50;
     this.state = {
       nodes: [],
@@ -85,6 +99,7 @@ class GlobalTrafficGraph extends TrafficGraph {
       if (existingNodeIndex !== -1) {
         this.state.nodes[existingNodeIndex] = node;
       } else {
+        this.layoutValid = false;
         this.state.nodes.push(node);
         if (!this.contextDivs[node.name]) {
           const parentDiv = RendererUtils.getParent();
@@ -124,16 +139,23 @@ class GlobalTrafficGraph extends TrafficGraph {
 
     super.setState(this.state, force);
     this.validateLayout();
-    positionNodes(this.nodes, this.orbitSize);
-    this._relayout();
   }
 
   setFilters () {
     // no-op
   }
 
   _relayout () {
-    this.updateView();
+    if (Object.keys(this.nodes).length > 0) {
+      // Position the nodes based on the current orbitSize
+      positionNodes(this.nodes, this.orbitSize, this.nodeSize);
+      // Now that the nodes are positioned, adjust orbit size accordingly so the nodes all fit
+      this.orbitSize = recalculateOrbitSize(this.nodes, this.maxDimension, this.nodeSize);
+      // Position again with the proper orbitSize
+      positionNodes(this.nodes, this.orbitSize, this.nodeSize);
+      centerNodesVertically(this.nodes);
+      this.updateView();
+    }
   }
 
   handleIntersectedObjectClick () {