Merge pull request #1593 from weaveworks/network-colors-unique

Network colors from a scale

client/app/scripts/charts/node-networks-overlay.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import d3 from 'd3';
 import { List as makeList } from 'immutable';
-import { getNodeColor } from '../utils/color-utils';
+import { getNetworkColor } from '../utils/color-utils';
 import { isContrastMode } from '../utils/contrast-utils';
 
 
@@ -35,7 +35,7 @@ function NodeNetworksOverlay({labelOffsetY, size, stack, networks = makeList()})
       ry={ry}
       className="node-network"
       style={{
-        fill: getNodeColor(n.get('colorKey'))
+        fill: getNetworkColor(n.get('colorKey', n.get('id')))
       }}
       key={n.get('id')}
     />

client/app/scripts/components/network-selector-item.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 
 import { selectNetwork, pinNetwork, unpinNetwork } from '../actions/app-actions';
-import { getNodeColor } from '../utils/color-utils';
+import { getNetworkColor } from '../utils/color-utils';
 
 class NetworkSelectorItem extends React.Component {
 
@@ -39,7 +39,7 @@ class NetworkSelectorItem extends React.Component {
       'network-selector-action-selected': isSelected
     });
     const style = {
-      borderBottomColor: getNodeColor(network.get('colorKey', id))
+      borderBottomColor: getNetworkColor(network.get('colorKey', id))
     };
 
     return (

client/app/scripts/reducers/root.js

@@ -7,7 +7,6 @@ import ActionTypes from '../constants/action-types';
 import { EDGE_ID_SEPARATOR } from '../constants/naming';
 import { applyPinnedSearches, updateNodeMatches } from '../utils/search-utils';
 import { getNetworkNodes, getAvailableNetworks } from '../utils/network-view-utils';
-import { longestCommonPrefix } from '../utils/string-utils';
 import { findTopologyById, getAdjacentNodes, setTopologyUrlsById,
   updateTopologyIds, filterHiddenTopologies } from '../utils/topology-utils';
 
@@ -538,21 +537,6 @@ export function rootReducer(state = initialState, action) {
       state = state.set('networkNodes', getNetworkNodes(state.get('nodes')));
       state = state.set('availableNetworks', getAvailableNetworks(state.get('nodes')));
 
-      // optimize color coding for networks
-      const networkPrefix = longestCommonPrefix(state.get('availableNetworks')
-        .map(n => n.get('id')).toJS());
-
-      if (networkPrefix) {
-        state = state.update('nodes',
-          nodes => nodes.map(node => node.update('networks',
-            networks => networks && networks.map(n => n.set('colorKey',
-              n.get('colorKey').substr(networkPrefix.length))))));
-
-        state = state.update('availableNetworks',
-          networks => networks.map(network => network
-            .set('colorKey', network.get('id').substr(networkPrefix.length))));
-      }
-
       state = state.set('availableCanvasMetrics', state.get('nodes')
         .valueSeq()
         .flatMap(n => (n.get('metrics') || makeList()).map(m => (

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

@@ -3,6 +3,7 @@ import d3 from 'd3';
 const PSEUDO_COLOR = '#b1b1cb';
 const hueRange = [20, 330]; // exclude red
 const hueScale = d3.scale.linear().range(hueRange);
+const networkColorScale = d3.scale.category10();
 // map hues to lightness
 const lightnessScale = d3.scale.linear().domain(hueRange).range([0.5, 0.7]);
 const startLetterRange = 'A'.charCodeAt();
@@ -69,6 +70,10 @@ export function getNodeColorDark(text = '', secondText = '', isPseudo = false) {
   return hsl.toString();
 }
 
+export function getNetworkColor(text) {
+  return networkColorScale(text);
+}
+
 export function brightenColor(color) {
   let hsl = d3.rgb(color).hsl();
   if (hsl.l > 0.5) {