diff --git a/src/components/continuous/continuous.js b/src/components/continuous/continuous.js index 677ee92c..ae196cfa 100644 --- a/src/components/continuous/continuous.js +++ b/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, - processedMetadata, + dimensions, + 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, - processedDimensions, + dimensions, }) 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) => { - return nextProps.continuousSelection.indexOf(d.CellName) > -1 /* perf */ - }), - this.state.processedDimensions, + nextProps.currentCellSelection, + this.state.dimensions, 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 */ }) } diff --git a/src/components/continuous/drawAxes.js b/src/components/continuous/drawAxes.js index 84aff1a0..c5869061 100644 --- a/src/components/continuous/drawAxes.js +++ b/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; diff --git a/src/components/continuous/drawLinesCanvas.js b/src/components/continuous/drawLinesCanvas.js index 0d3f8dcd..26b67020 100644 --- a/src/components/continuous/drawLinesCanvas.js +++ b/src/components/continuous/drawLinesCanvas.js @@ -76,11 +76,8 @@ const drawCellLinesUsingRenderQueue = ( colorScale, ) ).rate(50); - _renderLinesWithQueue(metadata); - return _renderLinesWithQueue; - } const drawCellLinesSync = ( diff --git a/src/reducers/controls.js b/src/reducers/controls.js index 7490adaf..b501775c 100644 --- a/src/reducers/controls.js +++ b/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, { - 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 */ + /* * * * * * * * * * * * * * * * * * + Keep a copy of data + * * * * * * * * * * * * * * * * * */ 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