Adjust node borders

* increase stack node borders by 0.5px (fixes #1080)
* space out stacks in contrast mode (fixes #1020)
* fix cloud border stroke-width setting (exlude from CSS styling)
* adjust cloud border for contrast mode

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import d3 from 'd3';
 
+import { isContrastMode } from '../utils/contrast-utils';
+
 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) {
@@ -20,12 +22,14 @@ export default function NodeShapeCloud({highlighted, size, color}) {
   const cy = height / 2;
   const pathSize = (width + height) / 2;
   const baseScale = (size * 2) / pathSize;
+  const strokeWidth = isContrastMode() ? 6 / baseScale : 4 / baseScale;
 
   const pathProps = (v) => {
     return {
       d: CLOUD_PATH,
+      fill: 'none',
       transform: `scale(-${v * baseScale}) translate(-${cx},-${cy})`,
-      style: {strokeWidth: 1 / baseScale}
+      strokeWidth
     };
   };
 

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 
+import { isContrastMode } from '../utils/contrast-utils';
+
 function dissoc(obj, key) {
   const newObj = _.clone(obj);
   delete newObj[key];
@@ -10,16 +12,17 @@ function dissoc(obj, key) {
 export default function NodeShapeStack(props) {
   const propsNoHighlight = dissoc(props, 'highlighted');
   const propsOnlyHighlight = Object.assign({}, props, {onlyHighlight: true});
+  const contrastMode = isContrastMode();
 
   const Shape = props.shape;
-  const [dx, dy] = [0, 4];
+  const [dx, dy] = contrastMode ? [0, 8] : [0, 5];
   const dsx = (props.size * 2 + (dx * 2)) / (props.size * 2);
   const dsy = (props.size * 2 + (dy * 2)) / (props.size * 2);
   const hls = [dsx, dsy];
 
   return (
-    <g transform={`translate(${dx * -1}, ${dy * -2})`} className="stack">
-      <g transform={`scale(${hls})translate(${dx}, ${dy}) `} className="stack">
+    <g transform={`translate(${dx * -1}, ${dy * -2.5})`} className="stack">
+      <g transform={`scale(${hls})translate(${dx}, ${dy}) `}>
         <Shape {...propsOnlyHighlight} />
       </g>
       <g transform={`translate(${dx * 2}, ${dy * 2})`}>

client/app/scripts/charts/node.js

@@ -83,6 +83,9 @@ export default class Node extends React.Component {
     if (this.props.pseudo) {
       classNames.push('pseudo');
     }
+    if (this.props.shape === 'cloud') {
+      classNames.push('cloud');
+    }
 
     const classes = classNames.join(' ');
 

client/app/scripts/components/app.js

@@ -6,6 +6,7 @@ import Sidebar from './sidebar.js';
 import Status from './status.js';
 import Topologies from './topologies.js';
 import TopologyOptions from './topology-options.js';
+import { contrastModeUrl, isContrastMode } from '../utils/contrast-utils';
 import { getApiDetails, getTopologies, basePathSlash } from '../utils/web-api-utils';
 import { clickDownloadGraph, clickForceRelayout, hitEsc } from '../actions/app-actions';
 import Details from './details';
@@ -76,9 +77,9 @@ export default class App extends React.Component {
     // width of details panel blocking a view
     const detailsWidth = showingDetails ? 450 : 0;
     const topMargin = 100;
-    const contrastMode = window.location.pathname.indexOf('contrast') > -1;
+    const contrastMode = isContrastMode();
     // link url to switch contrast with current UI state
-    const otherContrastModeUrl = contrastMode ? basePathSlash(window.location.pathname) : 'contrast.html';
+    const otherContrastModeUrl = contrastMode ? basePathSlash(window.location.pathname) : contrastModeUrl;
     const otherContrastModeTitle = contrastMode ? 'Switch to normal contrast' : 'Switch to high contrast';
     const forceRelayoutClassName = 'footer-label footer-label-icon';
     const forceRelayoutTitle = 'Force re-layout (might reduce edge crossings, but may shift nodes around)';

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

@@ -0,0 +1,7 @@
+const contrastMode = window.location.pathname.indexOf('contrast') > -1;
+
+export function isContrastMode() {
+  return contrastMode;
+}
+
+export const contrastModeUrl = 'contrast.html';

client/app/styles/contrast.less

@@ -16,8 +16,7 @@
 @node-highlight-fill-opacity: 0.3;
 @node-highlight-stroke-opacity: 0.5;
 @node-highlight-stroke-width: 3px;
-@node-border-stroke-width: 6px;
-@node-pseudo-border-stroke-width: 2px;
+@node-border-stroke-width: 5px;
 @node-pseudo-opacity: 1;
 @edge-highlight-opacity: 0.3;
 @edge-opacity-blurred: 0;

client/app/styles/main.less

@@ -44,7 +44,6 @@
 @node-highlight-stroke-opacity: 0.4;
 @node-highlight-stroke-width: 1px;
 @node-border-stroke-width: 3px;
-@node-pseudo-border-stroke-width: 1px;
 @node-pseudo-opacity: 0.8;
 @edge-highlight-opacity: 0.1;
 @edge-opacity-blurred: 0.2;
@@ -314,14 +313,20 @@ h2 {
     }
   }
 
-  g.stack g.shape .border {
-    stroke-width: @node-border-stroke-width - 1;
-  }
-
   g.node {
     cursor: pointer;
     transition: opacity .5s ease-in-out;
 
+    /* cloud paths have stroke-width set dynamically */
+    &:not(.cloud) .shape .border {
+      stroke-width: @node-border-stroke-width;
+      fill: @background-color;
+    }
+
+    &:not(.cloud) .stack .shape .border {
+      stroke-width: @node-border-stroke-width - 0.5;
+    }
+
     &.pseudo {
       opacity: @node-pseudo-opacity;
       cursor: default;
@@ -336,7 +341,6 @@ h2 {
 
       .border {
         stroke: @text-tertiary-color;
-        stroke-width: @node-pseudo-border-stroke-width;
       }
     }
 
@@ -373,10 +377,6 @@ h2 {
 
 
   .shape {
-    .border {
-      stroke-width: @node-border-stroke-width;
-      fill: @background-color;
-    }
 
     .shadow {
       stroke: none;