From 4e4848f3c4b78fc635d6432c0ae6eb654541a72a Mon Sep 17 00:00:00 2001
From: jpellizzari <jordan@weave.works>
Date: Mon, 13 Feb 2017 09:45:06 -0800
Subject: [PATCH] Changed svg nodes to use contrastMode state

---
 client/app/scripts/charts/edge.js                 | 13 +++++++++----
 .../app/scripts/charts/node-networks-overlay.js   | 15 +++++++++++----
 client/app/scripts/charts/node-shape-stack.js     | 14 +++++++++++---
 client/app/scripts/utils/contrast-utils.js        |  5 -----
 4 files changed, 31 insertions(+), 16 deletions(-)
 delete mode 100644 client/app/scripts/utils/contrast-utils.js

diff --git a/client/app/scripts/charts/edge.js b/client/app/scripts/charts/edge.js
index 1deab2f04..f443a1953 100644
--- a/client/app/scripts/charts/edge.js
+++ b/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);
diff --git a/client/app/scripts/charts/node-networks-overlay.js b/client/app/scripts/charts/node-networks-overlay.js
index ae1b45710..0522a83e0 100644
--- a/client/app/scripts/charts/node-networks-overlay.js
+++ b/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);
diff --git a/client/app/scripts/charts/node-shape-stack.js b/client/app/scripts/charts/node-shape-stack.js
index 268ab1c04..330a948cb 100644
--- a/client/app/scripts/charts/node-shape-stack.js
+++ b/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);
diff --git a/client/app/scripts/utils/contrast-utils.js b/client/app/scripts/utils/contrast-utils.js
deleted file mode 100644
index 7cb71db2f..000000000
--- a/client/app/scripts/utils/contrast-utils.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { parseHashState } from './router-utils';
-
-export function isContrastMode() {
-  return parseHashState().contrastMode;
-}