Revert "Graph layout optimizations"

client/app/scripts/utils/__tests__/math-utils-test.js

@@ -19,4 +19,21 @@ describe('MathUtils', () => {
       expect(f(-5, 5)).toBe(0);
     });
   });
+
+  describe('round', () => {
+    const f = MathUtils.round;
+
+    it('it should round the decimal number to given precision', () => {
+      expect(f(-173.6499023, -2)).toBe(-200);
+      expect(f(-173.6499023, -1)).toBe(-170);
+      expect(f(-173.6499023, 0)).toBe(-174);
+      expect(f(-173.6499023)).toBe(-174);
+      expect(f(-173.6499023, 1)).toBe(-173.6);
+      expect(f(-173.6499023, 2)).toBe(-173.65);
+      expect(f(0.0013, 2)).toBe(0);
+      expect(f(0.0013, 3)).toBe(0.001);
+      expect(f(0.0013, 4)).toBe(0.0013);
+      expect(f(0.0013, 5)).toBe(0.0013);
+    });
+  });
 });

client/app/scripts/utils/math-utils.js

@@ -18,3 +18,10 @@
 export function modulo(i, n) {
   return ((i % n) + n) % n;
 }
+
+// Does the same that the deprecated d3.round was doing.
+// Possibly imprecise: This https://github.com/d3/d3/issues/210
+export function round(value, decimals = 0) {
+  const p = Math.pow(10, decimals);
+  return Math.round(value * p) / p;
+}

client/app/scripts/utils/metric-utils.js

@@ -2,30 +2,32 @@ import { includes } from 'lodash';
 import { scaleLog } from 'd3-scale';
 import React from 'react';
 
-import { NODE_SHAPE_DOT_RADIUS } from '../constants/styles';
 import { formatMetricSvg } from './string-utils';
 import { colors } from './color-utils';
 
-export function getClipPathDefinition(clipId, height) {
+export function getClipPathDefinition(clipId, size, height,
+  x = -size * 0.5, y = (size * 0.5) - height) {
   return (
     <defs>
       <clipPath id={clipId}>
-        <rect width={1} height={1} x={-0.5} y={0.5 - height} />
+        <rect
+          width={size}
+          height={size}
+          x={x}
+          y={y}
+          />
       </clipPath>
     </defs>
   );
 }
 
-export function renderMetricValue(value, condition) {
-  return condition ? <text>{value}</text> : <circle className="node" r={NODE_SHAPE_DOT_RADIUS} />;
-}
 
 //
 // loadScale(1) == 0.5; E.g. a nicely balanced system :).
 const loadScale = scaleLog().domain([0.01, 100]).range([0, 1]);
 
 
-export function getMetricValue(metric) {
+export function getMetricValue(metric, size) {
   if (!metric) {
     return {height: 0, value: null, formattedValue: 'n/a'};
   }
@@ -46,9 +48,10 @@ export function getMetricValue(metric) {
   } else if (displayedValue >= m.max && displayedValue > 0) {
     displayedValue = 1;
   }
+  const height = size * displayedValue;
 
   return {
-    height: displayedValue,
+    height,
     hasMetric: value !== null,
     formattedValue: formatMetricSvg(value, m)
   };

client/app/scripts/utils/node-shape-utils.js

@@ -1,12 +0,0 @@
-import { line, curveCardinalClosed } from 'd3-shape';
-import range from 'lodash/range';
-
-const shapeSpline = line().curve(curveCardinalClosed.tension(0.65));
-
-export function nodeShapePolygon(radius, n) {
-  const innerAngle = (2 * Math.PI) / n;
-  return shapeSpline(range(0, n).map(k => [
-    radius * Math.sin(k * innerAngle),
-    -radius * Math.cos(k * innerAngle)
-  ]));
-}

client/app/scripts/utils/topology-utils.js

@@ -182,7 +182,3 @@ export function graphExceedsComplexityThresh(stats) {
   // Check to see if complexity is high. Used to trigger table view on page load.
   return (stats.get('node_count') + (2 * stats.get('edge_count'))) > 500;
 }
-
-export function zoomCacheKey(props) {
-  return `${props.topologyId}-${JSON.stringify(props.topologyOptions)}`;
-}