parallel now rendering from centralized cell selection!

src/components/continuous/continuous.js

@@ -13,13 +13,7 @@ import {
   margin,
   width,
   height,
-  innerHeight,
-  color,
   createDimensions,
-  types,
-  processData,
-  yAxis,
-  d3_functor,
 } from "./util";
 
 @connect((state) => {
@@ -38,7 +32,7 @@ import {
     colorAccessor: state.controls.colorAccessor,
     colorScale: state.controls.colorScale,
     graphBrushSelection: state.controls.graphBrushSelection,
-    continuousSelection: state.controls.continuousSelection,
+    currentCellSelection: state.controls.currentCellSelection,
     axesHaveBeenDrawn: state.controls.axesHaveBeenDrawn,
   }
 })
@@ -69,24 +63,18 @@ class Continuous extends React.Component {
       !this.state.axes &&
       nextProps.initializeRanges /* axes are created on full range of data */
     ) {
+
       const dimensions = createDimensions(nextProps.initializeRanges);
+
       const xscale = d3.scalePoint()
         .domain(d3.range(dimensions.length))
         .range([0, width]);
 
-      const {
-        processedMetadata,
-        processedDimensions
-      } = processData(
-        nextProps.initializeMetadata,
-        dimensions
-      )
-
       const axes = drawAxes(
         this.state.svg,
         this.state.ctx,
-        processedDimensions,
+        dimensions,
-        processedMetadata,
+        nextProps.initializeMetadata, /* PERF this means brushes are always filtering on everything */
         xscale,
         height,
         width,
@@ -96,8 +84,7 @@ class Continuous extends React.Component {
       this.setState({
         axes,
         xscale,
-        processedMetadata,
+        dimensions,
-        processedDimensions,
       })
 
       this.props.dispatch({
@@ -109,7 +96,7 @@ class Continuous extends React.Component {
   maybeDrawLines = _.debounce((nextProps) => { /* https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js */
     if (
       nextProps.ranges &&
-      nextProps.continuousSelection &&
+      nextProps.currentCellSelection &&
       nextProps.axesHaveBeenDrawn
     ) {
 
@@ -120,10 +107,8 @@ class Continuous extends React.Component {
       this.state.ctx.clearRect(0, 0, width, height);
 
       const _drawLinesCanvas = drawLinesCanvas(
-        _.filter(this.state.processedMetadata, (d) => {
+        nextProps.currentCellSelection,
-          return nextProps.continuousSelection.indexOf(d.CellName) > -1 /* perf */
+        this.state.dimensions,
-        }),
-        this.state.processedDimensions,
         this.state.xscale,
         this.state.ctx,
         nextProps.colorAccessor,
@@ -131,7 +116,6 @@ class Continuous extends React.Component {
       );
 
       this.setState({
-        // dimensions,
         _drawLinesCanvas, /* this will only exist if the internals of drawLinesCanvas are using the render queue */
       })
     }

src/components/continuous/drawAxes.js

@@ -37,7 +37,7 @@ const drawAxes = (
         });
       });
 
-    var selected = metadata.filter(function(d) {
+    var selected = metadata.filter(function(d) { /* PERF we are filtering on all cells here, shouldn't be. these brushes need to be reinitialized every time there is a new cell set for instance */ 
       /* this is iterating over the enter dataset */
       if (actives.every(function(active) {
           var dim = active.dimension;

src/components/continuous/drawLinesCanvas.js

@@ -76,11 +76,8 @@ const drawCellLinesUsingRenderQueue = (
       colorScale,
     )
   ).rate(50);
-
   _renderLinesWithQueue(metadata);
-
   return _renderLinesWithQueue;
-
 }
 
 const drawCellLinesSync = (

src/reducers/controls.js

@@ -1,38 +1,45 @@
+import _ from "lodash";
+
 const Controls = (state = {
+  _ranges: null, /* this comes from initialize, this is universe */
+  allCellsOnClient: null, /* this comes from cells endpoint, this is world */
+  currentCellSelection: null, /* this comes from user actions, this is current cell selection */
+  graphMap: null,
   colorAccessor: null,
   colorScale: null,
-  continuousSelection: null,
   graphBrushSelection: null,
   axesHaveBeenDrawn: false,
 }, action) => {
   switch (action.type) {
-  case "color changed":
+  /* * * * * * * * * * * * * * * * * *
-    return Object.assign({}, state, {
+        Keep a copy of data
-      colorAccessor: action.colorAccessor,
+  * * * * * * * * * * * * * * * * * */
-      colorScale: d3.scaleLinear()
-        .domain([0, action.rangeMaxForColorAccessor])
-        .range([1,0])
-    });
-  case "continuous selection using parallel coords brushing": {
-    return Object.assign({}, state, {
-      continuousSelection: action.data,
-    });
-  }
-  /* on load, set the selection to 'all', if reactive is true */
   case "initialize success":
-    let allCellNames = null;
-    if (action.data.data.reactive) { /* we have metadata, get all cell names */
-      allCellNames = action.data.data.metadata.map((cell) => {
-        return cell.CellName
-      })
-    }
     return Object.assign({}, state, {
-      continuousSelection: allCellNames
+      _ranges: action.data.data.ranges
     });
+  case "request cells success":
+    const graphMap = {}
+    _.each(action.data.data.graph, (g) => { graphMap[g[0]] = [g[1], g[2]] })
+
+    return Object.assign({}, state, {
+      allCellsOnClient: action.data.data,
+      currentCellSelection: action.data.data.metadata,
+      graphMap,
+      graphBrushSelection: null, /* if we are getting new cells from the server, the layout (probably? definitely?) just changed, so this is now irrelevant, and we WILL need to call a function to reset state of this kind when cells success happens */
+    });
+  /* * * * * * * * * * * * * * * * * *
+            User events
+  * * * * * * * * * * * * * * * * * */
   case "parallel coordinates axes have been drawn":
     return Object.assign({}, state, {
       axesHaveBeenDrawn: true
     });
+  case "continuous selection using parallel coords brushing": {
+    return Object.assign({}, state, {
+      currentCellSelection: action.data,
+    });
+  }
   case "graph brush selection change":
     return Object.assign({}, state, {
       graphBrushSelection: action.brushCoords