import modularized files in continuous

src/components/continuous/continuous.js

@@ -2,6 +2,8 @@ import React from 'react';
 import _ from "lodash";
 // import cells from "../../../data/GBM_metadata.js";
 import drawParallelCoordinates from "./drawParallelCoordinates";
+import drawAxes from "./drawAxes";
+import setupParallelCoordinates from "./setupParallelCoordinates";
 import styles from './parallelCoordinates.css';
 import SectionHeader from "../framework/sectionHeader";
 import { connect } from "react-redux";
@@ -9,7 +11,13 @@ import { connect } from "react-redux";
 import {
   margin,
   width,
-  height
+  height,
+  innerHeight,
+  color,
+  createDimensions,
+  types,
+  xscale,
+  yAxis,
 } from "./util";
 
 @connect((state) => {
@@ -19,7 +27,7 @@ import {
 
   return {
     ranges,
-    metadata
+    metadata,
   }
 })
 class Continuous extends React.Component {
@@ -27,19 +35,52 @@ class Continuous extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      svg: null,
       ctx: null,
-      parallelExists: false
+      axes: null,
+      parallelExists: false,
+      dimensions: null,
     };
   }
 
   componentDidMount() {
-
+    const {svg, ctx} = setupParallelCoordinates(
+      width,
+      height,
+      margin
+    );
+    this.setState({svg, ctx})
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.ranges && !this.state.parallelExists) {
-      drawParallelCoordinates(nextProps.metadata, nextProps.ranges)
-      this.setState({parallelExists: true})
+
+
+
+
+    if (
+      nextProps.ranges &&
+      !this.state.parallelExists
+    ) {
+      const dimensions = createDimensions(nextProps.ranges);
+      const axes = drawAxes(
+        this.state.svg,
+        dimensions,
+        xscale
+      )
+      drawParallelCoordinates(
+        nextProps.metadata,
+        dimensions,
+        this.state.ctx,
+        xscale,
+        width,
+        height,
+        margin
+      )
+      this.setState({
+        parallelExists: true,
+        dimensions,
+        axes,
+      })
     }
   }
 
@@ -64,6 +105,7 @@ export default Continuous;
 
 /* text appended to parellel coords giving N instances of selection */
 // <pre id="parcoords_output" className={styles.pre}></pre>
+// var output = d3.select("#parcoords_output");
 
 /*