hook up parallel coords to real data

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 (
       <div id="parcoords_wrapper" style={{marginTop: 50}}>
         <SectionHeader text="Continuous Metadata"/>

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);
 

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",