opacity

src/components/graph/drawGraph.js

@@ -58,6 +58,7 @@ export const drawGraph = (
   graphBrushSelection,
   colorScale,
   graphMap, /* tmp remove when structure exists on server */
+  opacityForDeselectedCells,
 ) => {
 
   /* clear canvas */
@@ -112,7 +113,7 @@ export const drawGraph = (
     if (_currentCellSelectionMap[p[0]]["__selected__"]) {
       context.globalAlpha = 1;
     } else {
-      context.globalAlpha = .2;
+      context.globalAlpha = opacityForDeselectedCells;
     }
 
     // if (i < 20) {

src/components/graph/graph.js

@@ -20,7 +20,8 @@ import { connect } from "react-redux";
     continuousSelection: state.controls.continuousSelection,
     graphMap: state.controls.graphMap,
     currentCellSelection: state.controls.currentCellSelection,
-    graphBrushSelection: state.controls.graphBrushSelection
+    graphBrushSelection: state.controls.graphBrushSelection,
+    opacityForDeselectedCells: state.controls.opacityForDeselectedCells,
   }
 })
 class Graph extends React.Component {
@@ -89,6 +90,7 @@ class Graph extends React.Component {
         nextProps.graphBrushSelection,
         nextProps.colorScale,
         nextProps.graphMap,
+        nextProps.opacityForDeselectedCells,
       )
     }
   }
@@ -101,9 +103,26 @@ class Graph extends React.Component {
     this.setState({svg, ctx});
   }
 
+  handleOpacityRangeChange(e) {
+    this.props.dispatch({
+      type: "change opacity deselected cells in 2d graph background",
+      data: e.target.value
+    })
+  }
+
   render() {
     return (
       <div id="graphWrapper" style={{height: 540 /* move this to globals */}}>
+        <span>
+          background opacity
+        </span>
+        <input
+          type="range"
+          onChange={this.handleOpacityRangeChange.bind(this)}
+          min={0}
+          max={1}
+          step="0.01"
+          />
         <div id="graphAttachPoint"> </div>
       </div>
     )

src/reducers/controls.js

@@ -8,7 +8,7 @@ const Controls = (state = {
   categoricalAsBooleansMap: null,
   colorAccessor: null,
   colorScale: null,
-  opacityForDeselectedCells: .5,
+  opacityForDeselectedCells: .2,
   graphBrushSelection: null,
   continuousSelection: null,
   axesHaveBeenDrawn: false,
@@ -80,6 +80,10 @@ const Controls = (state = {
       graphBrushSelection: null,
       currentCellSelection: action.newSelection /* this comes from middleware */
     })
+  case "change opacity deselected cells in 2d graph background":
+    return Object.assign({}, state, {
+      opacityForDeselectedCells: action.data,
+    })
   case "categorical metadata filter select":
     return Object.assign({}, state, {
       categoricalAsBooleansMap: action.newCategoricalAsBooleansMap, /* this comes from middleware */