Revert "Graph layout optimizations"

client/app/scripts/charts/node-shape-cloud.js

@@ -1,27 +1,46 @@
 import React from 'react';
-import {
-  NODE_SHAPE_HIGHLIGHT_RADIUS,
-  NODE_SHAPE_BORDER_RADIUS,
-  NODE_SHAPE_SHADOW_RADIUS,
-  NODE_SHAPE_DOT_RADIUS,
-} from '../constants/styles';
+import { extent } from 'd3-array';
 
-// This path is already normalized so no rescaling is needed.
-const CLOUD_PATH = 'M-1.25 0.233Q-1.25 0.44-1.104 0.587-0.957 0.733-0.75 0.733H0.667Q0.908 '
-  + '0.733 1.079 0.562 1.25 0.391 1.25 0.15 1.25-0.022 1.158-0.164 1.065-0.307 0.914-0.377q'
-  + '0.003-0.036 0.003-0.056 0-0.276-0.196-0.472-0.195-0.195-0.471-0.195-0.206 0-0.373 0.115'
-  + '-0.167 0.115-0.244 0.299-0.091-0.081-0.216-0.081-0.138 0-0.236 0.098-0.098 0.098-0.098 '
-  + '0.236 0 0.098 0.054 0.179-0.168 0.039-0.278 0.175-0.109 0.136-0.109 0.312z';
+import { isContrastMode } from '../utils/contrast-utils';
 
-export default function NodeShapeCloud({highlighted, color}) {
-  const pathProps = r => ({ d: CLOUD_PATH, transform: `scale(${r})` });
+const CLOUD_PATH = 'M 1920,384 Q 1920,225 1807.5,112.5 1695,0 1536,0 H 448 '
+  + 'Q 263,0 131.5,131.5 0,263 0,448 0,580 71,689.5 142,799 258,853 '
+  + 'q -2,28 -2,43 0,212 150,362 150,150 362,150 158,0 286.5,-88 128.5,-88 '
+  + '187.5,-230 70,62 166,62 106,0 181,-75 75,-75 75,-181 0,-75 -41,-138 '
+  + '129,-30 213,-134.5 84,-104.5 84,-239.5 z';
+
+function toPoint(stringPair) {
+  return stringPair.split(',').map(p => parseFloat(p, 10));
+}
+
+function getExtents(svgPath) {
+  const points = svgPath.split(' ').filter(s => s.length > 1).map(toPoint);
+  return [extent(points, p => p[0]), extent(points, p => p[1])];
+}
+
+export default function NodeShapeCloud({highlighted, size, color}) {
+  const [[minx, maxx], [miny, maxy]] = getExtents(CLOUD_PATH);
+  const width = (maxx - minx);
+  const height = (maxy - miny);
+  const cx = width / 2;
+  const cy = height / 2;
+  const pathSize = (width + height) / 2;
+  const baseScale = (size * 2) / pathSize;
+  const strokeWidth = isContrastMode() ? 6 / baseScale : 4 / baseScale;
+
+  const pathProps = v => ({
+    d: CLOUD_PATH,
+    fill: 'none',
+    transform: `scale(-${v * baseScale}) translate(-${cx},-${cy})`,
+    strokeWidth
+  });
 
   return (
     <g className="shape shape-cloud">
-      {highlighted && <path className="highlighted" {...pathProps(NODE_SHAPE_HIGHLIGHT_RADIUS)} />}
-      <path className="border" stroke={color} {...pathProps(NODE_SHAPE_BORDER_RADIUS)} />
-      <path className="shadow" {...pathProps(NODE_SHAPE_SHADOW_RADIUS)} />
-      <circle className="node" r={NODE_SHAPE_DOT_RADIUS} />
+      {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
+      <path className="border" stroke={color} {...pathProps(0.5)} />
+      <path className="shadow" {...pathProps(0.45)} />
+      <circle className="node" r={Math.max(2, (size * 0.125))} />
     </g>
   );
 }