size

src/components/graph/drawGraphRegl.js

@@ -1 +0,0 @@
-

src/components/graph/drawPointsRegl.js

@@ -6,11 +6,12 @@ export default function (regl) {
     precision mediump float;
     attribute vec2 position;
     attribute vec3 color;
+    attribute float size;
     uniform float distance;
     uniform mat4 projection, view;
     varying vec3 fragColor;
     void main() {
-      gl_PointSize = 10.0 / pow(distance, 2.5);
+      gl_PointSize = 7.0 / pow(distance, 2.5) + size;
       gl_Position = projection * view * vec4(position.x, -position.y, 0, 1);
       fragColor = color;
     }`,
@@ -27,7 +28,8 @@ export default function (regl) {
 
     attributes: {
       position: regl.prop('position'),
-      color: regl.prop('color')
+      color: regl.prop('color'),
+      size: regl.prop('size')
     },
 
     uniforms: {

src/components/graph/graph.js

@@ -6,7 +6,6 @@ import {setupGraphElements, drawGraphUsingRenderQueue} from "./drawGraph";
 import SectionHeader from "../framework/sectionHeader";
 import { connect } from "react-redux";
 import actions from "../../actions";
-import drawScatterplotRegl from "./drawGraphRegl";
 
 import mat4 from 'gl-mat4';
 import fit from 'canvas-fit';
@@ -15,24 +14,13 @@ import _regl from 'regl'
 import _drawPoints from './drawPointsRegl'
 
 // import data generators
-const generatePoints = function (count) {
-  return Array(count).fill().map(function () {
-    return [
-      Math.random() - 0.5,
-      Math.random() - 0.5
-    ]
-  })
-}
+import {
+  generateSizes,
+  generateColors,
+  generatePoints,
+  scaleRGB,
+} from "./util";
 
-const generateColors = function (count) {
-  return Array(count).fill().map(function () {
-    return [
-      Math.random(),
-      Math.random(),
-      Math.random()
-    ]
-  })
-}
 // set constants
 const count = 1993
 
@@ -83,6 +71,7 @@ class Graph extends React.Component {
     // preallocate buffers
     const pointBuffer = regl.buffer(generatePoints(count))
     const colorBuffer = regl.buffer(generateColors(count))
+    const sizeBuffer = regl.buffer(generateSizes(count))
 
 
     regl.frame(({viewportWidth, viewportHeight}) => {
@@ -93,6 +82,7 @@ class Graph extends React.Component {
       })
 
       drawPoints({
+        size: sizeBuffer,
         distance: camera.distance,
         color: colorBuffer,
         position: pointBuffer,
@@ -108,6 +98,7 @@ class Graph extends React.Component {
       regl,
       pointBuffer,
       colorBuffer,
+      sizeBuffer,
     })
 
   }
@@ -141,25 +132,22 @@ class Graph extends React.Component {
 
       const positions = [];
       const colors = [];
+      const sizes = [];
 
+      const s = d3.scaleLinear()
+        .domain([0,1])
+        .range([-.95, .95]) /* padding */ 
+
+      /*
+        Construct Vectors
+      */
       _.each(nextProps.currentCellSelection, (cell, i) => {
         if (nextProps.graphMap[cell["CellName"]]) { /* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the cell array, check in reducer */
           positions.push([
-            nextProps.graphMap[cell["CellName"]][0],
-            nextProps.graphMap[cell["CellName"]][1]
+            s(nextProps.graphMap[cell["CellName"]][0]),
+            s(nextProps.graphMap[cell["CellName"]][1])
           ])
 
-          const scaleRGB = (input) => {
-            const outputMax = 1;
-            const outputMin = 0;
-
-            const inputMax = 255;
-            const inputMin = 0;
-
-            const percent = (input - inputMin) / (inputMax - inputMin);
-            return percent * (outputMax - outputMin) + outputMin;
-          }
-
           let c = cell["__color__"];
 
           if (c[0] !== "#") {
@@ -178,11 +166,14 @@ class Graph extends React.Component {
             ]);
           }
 
+          sizes.push(cell["__selected__"] ? 4 : 1)
+
         }
       })
 
       this.state.pointBuffer(positions)
       this.state.colorBuffer(colors)
+      this.state.sizeBuffer(sizes)
     }
   }
   handleBrushSelectAction() {
@@ -271,7 +262,7 @@ class Graph extends React.Component {
           >
         </div>
         <div style={{padding: 0, margin: 0}}>
-          <canvas width={1500} height={800} style={{border: "1px solid black"}}  ref={(canvas) => { this.reglCanvas = canvas}}/>
+          <canvas width={960} height={450} ref={(canvas) => { this.reglCanvas = canvas}}/>
         </div>
       </div>
     )

src/components/graph/util.js

@@ -1,25 +1,62 @@
-createExpressionsCountsMap () {
+// createExpressionsCountsMap () {
+//
+//   const CHANGE_ME_MAGIC_GENE_INDEX = 5;
+//
+//   const expressionsCountsMap = {};
+//
+//   /* currently selected gene */
+//   expressionsCountsMap.geneName = this.state.expressions.data.genes[3];
+//
+//   let maxExpressionValue = 0;
+//
+//   /* create map of expressions for every cell */
+//   this.state.expressions.data.cells.map((c) => {
+//     /* cellname = 234 */
+//     expressionsCountsMap[c.cellname] = c["e"][CHANGE_ME_MAGIC_GENE_INDEX];
+//     /* collect the maximum value as we iterate */
+//     if (c["e"][CHANGE_ME_MAGIC_GENE_INDEX] > maxExpressionValue) {
+//       maxExpressionValue = c["e"][CHANGE_ME_MAGIC_GENE_INDEX]
+//     }
+//   })
+//
+//   expressionsCountsMap.maxValue = maxExpressionValue;
+//
+//   return expressionsCountsMap;
+// }
 
-  const CHANGE_ME_MAGIC_GENE_INDEX = 5;
 
-  const expressionsCountsMap = {};
-
-  /* currently selected gene */
-  expressionsCountsMap.geneName = this.state.expressions.data.genes[3];
-
-  let maxExpressionValue = 0;
-
-  /* create map of expressions for every cell */
-  this.state.expressions.data.cells.map((c) => {
-    /* cellname = 234 */
-    expressionsCountsMap[c.cellname] = c["e"][CHANGE_ME_MAGIC_GENE_INDEX];
-    /* collect the maximum value as we iterate */
-    if (c["e"][CHANGE_ME_MAGIC_GENE_INDEX] > maxExpressionValue) {
-      maxExpressionValue = c["e"][CHANGE_ME_MAGIC_GENE_INDEX]
-    }
+export const generatePoints = function (count) {
+  return Array(count).fill().map(function () {
+    return [
+      Math.random() - 0.5,
+      Math.random() - 0.5
+    ]
   })
-
-  expressionsCountsMap.maxValue = maxExpressionValue;
-
-  return expressionsCountsMap;
+}
+
+export const generateSizes = function (count) {
+  return Array(count).fill().map(function () {
+    return Math.random() * 10
+  })
+}
+
+export const generateColors = function (count) {
+  return Array(count).fill().map(function () {
+    return [
+      Math.random(),
+      Math.random(),
+      Math.random()
+    ]
+  })
+}
+
+export const scaleRGB = (input) => {
+  const outputMax = 1;
+  const outputMin = 0;
+
+  const inputMax = 255;
+  const inputMin = 0;
+
+  const percent = (input - inputMin) / (inputMax - inputMin);
+  return percent * (outputMax - outputMin) + outputMin;
 }