Gentle perspective in the nodestacks.

- They get a little bit smaller as they go down.
- Small tweak for shape stacks + high contrast mode.

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

@@ -24,7 +24,7 @@ function getPoints(h) {
 }
 
 
-export default function NodeShapeHex({highlighted, size, color}) {
+export default function NodeShapeHex({onlyHighlight, highlighted, size, color}) {
   const pathProps = (v) => {
     return {
       d: getPoints(size * v * 2),
@@ -32,10 +32,19 @@ export default function NodeShapeHex({highlighted, size, color}) {
     };
   };
 
+  const hightlightNode = <path className="highlighted" {...pathProps(0.7)} />;
+
+  if (onlyHighlight) {
+    return (
+      <g className="shape">
+        {highlighted && hightlightNode}
+      </g>
+    );
+  }
+
   return (
     <g className="shape">
-      {highlighted &&
-        <path className="highlighted" {...pathProps(0.7)} />}
+      {highlighted && hightlightNode}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(0.45)} />
       <circle className="node" r={Math.max(2, (size * 0.125))} />

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function NodeShapeSquare({highlighted, size, color, rx = 0, ry = 0}) {
+export default function NodeShapeSquare({onlyHighlight, highlighted, size, color, rx = 0, ry = 0}) {
   const rectProps = (v) => {
     return {
       width: v * size * 2,
@@ -11,11 +11,19 @@ export default function NodeShapeSquare({highlighted, size, color, rx = 0, ry =
     };
   };
 
+  const hightlightNode = <rect className="highlighted" {...rectProps(0.7)} />;
+
+  if (onlyHighlight) {
+    return (
+      <g className="shape">
+        {highlighted && hightlightNode}
+      </g>
+    );
+  }
+
   return (
     <g className="shape">
-      {highlighted &&
-        <rect className="highlighted" {...rectProps(0.7)} />}
-
+      {highlighted && hightlightNode}
       <rect className="border" stroke={color} {...rectProps(0.5)} />
       <rect className="shadow" {...rectProps(0.45)} />
       <circle className="node" r={Math.max(2, (size * 0.125))} />

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

@@ -1,19 +1,29 @@
 import React from 'react';
 import _ from 'lodash';
 
-export default function NodeShapeCircleStack(props) {
+export default function NodeShapeStack(props) {
   const propsNoHighlight = _.clone(props);
   const Shape = props.shape;
   delete propsNoHighlight.highlighted;
+  const propsOnlyHighlight = Object.assign({}, props, {onlyHighlight: true});
+  const [dx, dy] = [0, 6];
+  const ds = 0.075;
+  const dsx = (props.size * 2 + dx) / (props.size * 2);
+  const dsy = (props.size * 2 + dy) / (props.size * 2);
+  const hls = [dsx, dsy];
+
   return (
-    <g className="stack">
-      <g transform="translate(0, 4)">
+    <g transform={`translate(${dx * -1}, ${dy * -1})`} className="stack">
+      <g transform={`translate(${dx * 2}, ${dy * 2}) scale(${1 - (2 * ds)}, ${1 - (2 * ds)})`}>
         <Shape {...propsNoHighlight} />
       </g>
-      <Shape {...props} />
-      <g transform="translate(0, -4)">
+      <g transform={`translate(${dx * 1}, ${dy * 1}) scale(${1 - (1 * ds)}, ${1 - (1 * ds)})`}>
         <Shape {...propsNoHighlight} />
       </g>
+      <g transform={`translate(${dx * 0.5}, ${dy * 0.5}) scale(${hls})`} className="stack">
+        <Shape {...propsOnlyHighlight} />
+      </g>
+      <Shape {...propsNoHighlight} />
     </g>
   );
 }

client/app/styles/main.less

@@ -304,7 +304,7 @@ h2 {
   }
 
   g.stack g.shape .border {
-    stroke-width: 2px;
+    stroke-width: @node-border-stroke-width - 1;
   }
 
   g.node {