Changed svg nodes to use contrastMode state

client/app/scripts/charts/edge.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 
 import { enterEdge, leaveEdge } from '../actions/app-actions';
-import { isContrastMode } from '../utils/contrast-utils';
 import { NODE_BASE_SIZE } from '../constants/styles';
 
 class Edge extends React.Component {
@@ -15,9 +14,9 @@ class Edge extends React.Component {
   }
 
   render() {
-    const { id, path, highlighted, blurred, focused, scale } = this.props;
+    const { id, path, highlighted, blurred, focused, scale, contrastMode } = this.props;
     const className = classNames('edge', { highlighted, blurred, focused });
-    const thickness = scale * (isContrastMode() ? 0.02 : 0.01) * NODE_BASE_SIZE;
+    const thickness = scale * (contrastMode ? 0.02 : 0.01) * NODE_BASE_SIZE;
 
     // Draws the edge so that its thickness reflects the zoom scale.
     // Edge shadow is always made 10x thicker than the edge itself.
@@ -41,7 +40,13 @@ class Edge extends React.Component {
   }
 }
 
+function mapStateToProps(state) {
+  return {
+    contrastMode: state.get('contrastMode')
+  };
+}
+
 export default connect(
-  null,
+  mapStateToProps,
   { enterEdge, leaveEdge }
 )(Edge);

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { scaleBand } from 'd3-scale';
 import { List as makeList } from 'immutable';
+import { connect } from 'react-redux';
+
 import { getNetworkColor } from '../utils/color-utils';
-import { isContrastMode } from '../utils/contrast-utils';
 import { NODE_BASE_SIZE } from '../constants/styles';
 
 // Min size is about a quarter of the width, feels about right.
@@ -13,7 +14,7 @@ const borderRadius = 0.01;
 const offset = 0.67;
 const x = scaleBand();
 
-function NodeNetworksOverlay({ stack, networks = makeList() }) {
+function NodeNetworksOverlay({ stack, networks = makeList(), contrastMode }) {
   const barWidth = Math.max(1, minBarWidth * networks.size);
   const yPosition = offset - (barHeight * 0.5);
 
@@ -37,7 +38,7 @@ function NodeNetworksOverlay({ stack, networks = makeList() }) {
     />
   ));
 
-  const translateY = stack && isContrastMode() ? 0.15 : 0;
+  const translateY = stack && contrastMode ? 0.15 : 0;
   return (
     <g transform={`translate(0, ${translateY}) scale(${NODE_BASE_SIZE})`}>
       {bars.toJS()}
@@ -45,4 +46,10 @@ function NodeNetworksOverlay({ stack, networks = makeList() }) {
   );
 }
 
-export default NodeNetworksOverlay;
+function mapStateToProps(state) {
+  return {
+    contrastMode: state.get('contrastMode')
+  };
+}
+
+export default connect(mapStateToProps)(NodeNetworksOverlay);

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

@@ -1,10 +1,10 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { NODE_BASE_SIZE } from '../constants/styles';
-import { isContrastMode } from '../utils/contrast-utils';
 
-export default function NodeShapeStack(props) {
-  const shift = isContrastMode() ? 0.15 : 0.1;
+function NodeShapeStack(props) {
+  const shift = props.contrastMode ? 0.15 : 0.1;
   const highlightScale = [1, 1 + shift];
   const dy = NODE_BASE_SIZE * shift;
 
@@ -26,3 +26,11 @@ export default function NodeShapeStack(props) {
     </g>
   );
 }
+
+function mapStateToProps(state) {
+  return {
+    contrastMode: state.get('contrastMode')
+  };
+}
+
+export default connect(mapStateToProps)(NodeShapeStack);

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

@@ -1,5 +0,0 @@
-import { parseHashState } from './router-utils';
-
-export function isContrastMode() {
-  return parseHashState().contrastMode;
-}