graph componetized

src/components/graph/drawGraph.js

@@ -11,13 +11,15 @@ const x = d3.scaleLinear()
 const y = d3.scaleLinear()
   .range([height, 0]);
 
+const cellFillColor = "rgba(0,0,0,.5)";
+
 /******************************************
 *******************************************
-                  Main
+          put svg & canvas in DOM
 *******************************************
 ******************************************/
 
-const drawGraph = (data) => {
+export const setupGraphElements = (data) => {
 
   var svg = d3.select("#graphAttachPoint").append("svg")
     .attr("width", width + margin.left + margin.right)
@@ -37,31 +39,39 @@ const drawGraph = (data) => {
 
   var context = canvas.node().getContext("2d");
 
-  context.fillStyle = "rgba(0,0,0,.5)";
-
-  const draw = () => {
-
-    // Update canvas
-    context.clearRect(0, 0, width, height);
-
-    data.forEach((p, i) => {
-
-      context.beginPath();
-      /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
-      context.arc(
-        x(p[1]),            /* x */
-        y(p[2]),            /* y */
-        2,                  /* r */
-        0,                  /* sAngle */
-        2 * Math.PI         /* eAngle */
-      );
-      context.fill();
-
-    });
+  return {
+    svg,
+    context
   }
 
-  draw();
-
 }
 
-export default drawGraph;
+/******************************************
+*******************************************
+        draw cells on the canvas
+*******************************************
+******************************************/
+
+export const drawGraph = (data, context) => {
+
+  /* clear canvas */
+  context.clearRect(0, 0, width, height);
+
+  /* shuffle the data to overcome render order hiding cells */
+  data = d3.shuffle(data);
+
+  /* loop! */
+  data.forEach((p, i) => {
+    context.beginPath();
+    /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
+    context.arc(
+      x(p[1]),            /* x */
+      y(p[2]),            /* y */
+      2,                  /* r */
+      0,                  /* sAngle */
+      2 * Math.PI         /* eAngle */
+    );
+    context.fill();
+    context.fillStyle = cellFillColor;
+  });
+}

src/components/graph/graph.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from "lodash";
 import styles from "./graph.css";
-import drawGraph from "./drawGraph";
+import {setupGraphElements, drawGraph} from "./drawGraph";
 
 class Graph extends React.Component {
 
@@ -9,18 +9,29 @@ class Graph extends React.Component {
     super(props);
     this.state = {
       drawn: false,
+      svg: null,
+      context: null,
     };
   }
 
   componentWillReceiveProps(nextProps) {
     /* maybe should do a check here to confirm ref exists and pass it? */
-    if (nextProps.data && !this.state.drawn) {
-      console.log('About to draw graph. Data:', nextProps.data)
-      drawGraph(nextProps.data.data)
-      this.setState({drawn: true});
+    if (
+      nextProps.data &&
+      this.state.context
+    ) {
+      drawGraph(
+        nextProps.data.data,
+        this.state.context
+      );
     }
   }
 
+  componentDidMount() {
+    const {svg, context} = setupGraphElements();
+    this.setState({svg, context});
+  }
+
   render() {
     return (
       <div id="graphWrapper">

src/components/home.js

@@ -33,7 +33,7 @@ class Home extends React.Component {
         'Content-Type': 'application/json'
       }),
       body: JSON.stringify({
-        "celllist": ["1001000173.G8", "1001000173.D4"],
+        // "celllist": ["1001000173.G8", "1001000173.D4"],
         "genelist": ["1/2-SBSRNA4", "A1BG", "A1BG-AS1", "A1CF", "A2LD1", "A2M", "A2ML1", "A2MP1", "A4GALT"]
       })
     })
@@ -41,26 +41,28 @@ class Home extends React.Component {
       .then((res) => res.json())
       .then((data) => { this.setState({heatmap: data}) })
 
+
     const graph = fetch(`${prefix}${version}graph`)
       .then((res) => res.json())
       .then((data) => { this.setState({graph: data}) })
 
   }
   render() {
+    console.log('heatmap', this.state.heatmap)
     return (
       <Container>
         <Helmet title="cellxgene" />
         <h1><Link to="/page2">cellxgene</Link></h1>
+        Showing a cluster informed downsampling of 10,000 cells.
         <button
           className={buttonStyles.primaryButton}>
-          Showing a cluster informed downsampling of 10,000 cells. Refresh.
+           Refresh.
         </button>
         <h3 style={{marginTop: 50}}> Gene selection criteria </h3>
         {false ? <Joy data={this.state.heatmap && this.state.heatmap.data}/> : ""}
 
         <Categorical/>
         <Continuous/>
-        <h3 style={{marginTop: 50}}> T-SNE plot </h3>
         <button
           onClick={() => { this.setState({showClustersPlaceholderImage: true}) }}
           style={{marginBottom: 20}}