Skip to content

Commit

Permalink
Network colors from a scale
Browse files Browse the repository at this point in the history
* all colors are unique and separated enough
* only 10 colors are available
* contains red and green
  • Loading branch information
davkal committed Jun 16, 2016
1 parent cb21a0d commit c37c175
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 20 deletions.
4 changes: 2 additions & 2 deletions client/app/scripts/charts/node-networks-overlay.js
Original file line number Diff line number Diff line change
@@ -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';


Expand Down Expand Up @@ -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')}
/>
Expand Down
4 changes: 2 additions & 2 deletions client/app/scripts/components/network-selector-item.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -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 (
Expand Down
16 changes: 0 additions & 16 deletions client/app/scripts/reducers/root.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 => (
Expand Down
5 changes: 5 additions & 0 deletions client/app/scripts/utils/color-utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit c37c175

Please sign in to comment.