diff --git a/src/components/continuous/continuous.js b/src/components/continuous/continuous.js
index b33e3acc..27b7fdca 100644
--- a/src/components/continuous/continuous.js
+++ b/src/components/continuous/continuous.js
@@ -1,9 +1,10 @@
import React from 'react';
import _ from "lodash";
-import cells from "../../../data/GBM_metadata.js";
+// import cells from "../../../data/GBM_metadata.js";
import drawParallelCoordinates from "./drawParallelCoordinates";
import styles from './parallelCoordinates.css';
import SectionHeader from "../framework/sectionHeader";
+import { connect } from "react-redux";
import {
margin,
@@ -11,6 +12,16 @@ import {
height
} from "./util";
+@connect((state) => {
+
+ const ranges = state.cells.cells && state.cells.cells.data.ranges ? state.cells.cells.data.ranges : null;
+ const metadata = state.cells.cells && state.cells.cells.data.metadata ? state.cells.cells.data.metadata : null;
+
+ return {
+ ranges,
+ metadata
+ }
+})
class Continuous extends React.Component {
constructor(props) {
@@ -22,10 +33,17 @@ class Continuous extends React.Component {
}
componentDidMount() {
- drawParallelCoordinates(cells)
+
+ }
+
+ componentWillUpdate(nextProps) {
+ if (nextProps.ranges) {
+ drawParallelCoordinates(nextProps.metadata, nextProps.ranges)
+ }
}
render() {
+
return (
diff --git a/src/components/continuous/drawParallelCoordinates.js b/src/components/continuous/drawParallelCoordinates.js
index d1fa8d86..6990cc66 100644
--- a/src/components/continuous/drawParallelCoordinates.js
+++ b/src/components/continuous/drawParallelCoordinates.js
@@ -6,7 +6,7 @@ import {
height,
innerHeight,
color,
- dimensions,
+ createDimensions,
types,
xscale,
yAxis,
@@ -18,7 +18,11 @@ Canvas Parallel coordinates with svg brushing via /* via https://bl.ocks.org/syn
******************************************
******************************************/
-const drawParallelCoordinates = (data) => {
+const drawParallelCoordinates = (data, ranges) => {
+
+ const dimensions = createDimensions(ranges);
+
+ console.log('ranges', data)
const d3_functor = (v) => {
return typeof v === "function" ? v : function() { return v; };
@@ -191,6 +195,9 @@ const drawParallelCoordinates = (data) => {
ctx.clearRect(0,0,width,height);
ctx.globalAlpha = d3.min([0.85/Math.pow(selected.length,0.3),1]);
+ /* send the selected cells to redux */
+
+
/* pass the result of the filter above to a fresh canvas, using RAF */
render(selected);
diff --git a/src/components/continuous/util.js b/src/components/continuous/util.js
index 5e365005..a8aa18b3 100644
--- a/src/components/continuous/util.js
+++ b/src/components/continuous/util.js
@@ -1,3 +1,5 @@
+import _ from "lodash";
+
const paddingRight = 120;
export const margin = {top: 66, right: 110, bottom: 20, left: 60};
@@ -7,9 +9,6 @@ export const innerHeight = height - 2;
export const devicePixelRatio = window.devicePixelRatio || 1;
-export const color = d3.scaleOrdinal()
- .range(["#5DA5B3","#D58323","#DD6CA7","#54AF52","#8C92E8","#E15E5A","#725D82","#776327","#50AB84","#954D56","#AB9C27","#517C3F","#9D5130","#357468","#5E9ACF","#C47DCB","#7D9E33","#DB7F85","#BA89AD","#4C6C86","#B59248","#D8597D","#944F7E","#D67D4B","#8F86C2"]);
-
export const types = {
"Number": {
key: "Number",
@@ -34,6 +33,20 @@ export const types = {
}
};
+export const createDimensions = (data) => {
+ const newArr = []
+ _.each(data, (value, key) => {
+ if (value.range) {
+ newArr.push({
+ key: key, /* room for confusion: lodash calls this key, it's also the name of the property parallel coords code is looking for */
+ type: types["Number"],
+ scale: d3.scaleSqrt().range([innerHeight, 0])
+ })
+ }
+ })
+ return newArr;
+}
+
export const dimensions = [
{
key: "Total_reads",