Merge pull request #46 from chanzuckerberg/freeman-lab-brushing-fix

fix scale inversion for brushing

src/components/graph/graph.js

@@ -95,17 +95,7 @@ class Graph extends React.Component {
         scale: viewportHeight / viewportWidth
       });
 
-      // var view = camera.view(); // get the camera matrix
-      // var projection = mat4.perspective(
-      //   [],
-      //   Math.PI / 2,
-      //   context.viewportWidth * props.scale / context.viewportHeight,
-      //   0.01,
-      //   1000
-      // ); // get the projection matrix
-      // var combined = mat.multiply([], projection, view); // this is the matrix applied to the transform
-      // this.inverse = mat.invert([], combined); // this is the inverse
-
+      this.setState({camera})
       camera.tick();
     });
 
@@ -170,15 +160,22 @@ class Graph extends React.Component {
       |       |
       |-------@
     */
-    const brushCoords = {
-      northwestX: s[0][0],
-      northwestY: s[0][1],
-      southeastX: s[1][0],
-      southeastY: s[1][1]
+
+    // compute inverse view matrix
+    const inverse = mat4.invert([], this.state.camera.view());
+
+    // transform screen coordinates -> cell coordinates
+    const invert = (pin) => {
+      const x = 2 * pin[0] / globals.graphWidth - 1;
+      const y = 2 * (1 - pin[1] / globals.graphHeight) - 1;
+      const pout = [x + inverse[12], y + inverse[13]];
+      return [(pout[0] + 1) / 2, (pout[1] + 1) / 2];
     };
 
-    brushCoords.dx = brushCoords.southeastX - brushCoords.northwestX;
-    brushCoords.dy = brushCoords.southeastY - brushCoords.northwestY;
+    const brushCoords = {
+      northwest: invert([s[0][0], s[0][1]]),
+      southeast: invert([s[1][0], s[1][1]])
+    };
 
     this.props.dispatch({
       type: "graph brush selection change",

src/globals.js

@@ -47,8 +47,8 @@ export const bolder = 700;
 
 export let API = {
   // prefix: "http://api.clustering.czi.technology/api/",
-  prefix: "http://tabulamuris.cxg.czi.technology/api/",
-  // prefix: "http://pbmc3k.cxg.czi.technology/api/",
+  //prefix: "http://tabulamuris.cxg.czi.technology/api/",
+   prefix: "http://pbmc3k.cxg.czi.technology/api/",
   // prefix: "http://pbmc33k.cxg.czi.technology/api/",
 
   // prefix: "http://api-staging.clustering.czi.technology/api/",
@@ -72,26 +72,6 @@ export const graphMargin = { top: 20, right: 10, bottom: 30, left: 40 };
 export const graphWidth = 700;
 export const graphHeight = 700;
 
-import { scaleLinear } from "./util/scaleLinear";
-// d3.scaleLinear().domain([0,1]).range([0 + graphMargin.left, graphWidth - graphMargin.right])
-export const graphXScale = scaleLinear(
-  [0, 1],
-  [0 + graphMargin.left, graphWidth - graphMargin.right]
-);
-graphXScale.invert = scaleLinear(
-  [0 + graphMargin.left, graphWidth - graphMargin.right],
-  [0, 1]
-);
-// d3.scaleLinear().domain([0,1]).range([graphHeight - graphMargin.bottom, 0 + graphMargin.top])
-export const graphYScale = scaleLinear(
-  [0, 1],
-  [graphHeight - graphMargin.bottom, 0 + graphMargin.top]
-);
-graphYScale.invert = scaleLinear(
-  [graphHeight - graphMargin.bottom, 0 + graphMargin.top],
-  [0, 1]
-);
-
 export const ordinalColors = [
   "#0ac115",
   "#c10ab6",

src/middleware/updateCellSelectionMiddleware.js

@@ -73,19 +73,6 @@ const updateCellSelectionMiddleware = store => {
             ? action.brushCoords
             : s.controls.graphBrushSelection;
 
-        const northwestX = globals.graphXScale.invert(
-          graphBrushSelection.northwestX
-        );
-        const southeastX = globals.graphXScale.invert(
-          graphBrushSelection.southeastX
-        );
-        const northwestY = globals.graphYScale.invert(
-          graphBrushSelection.northwestY
-        );
-        const southeastY = globals.graphYScale.invert(
-          graphBrushSelection.southeastY
-        );
-
         const graphVec = s.controls.graphVec;
         for (let i = 0; i < newSelection.length; i++) {
           const cell = newSelection[i];
@@ -94,10 +81,10 @@ const updateCellSelectionMiddleware = store => {
           const y = graphVec[2 * cellId + 1];
 
           const pointIsInsideBrushBounds =
-            x >= northwestX &&
-            x <= southeastX &&
-            y <= northwestY &&
-            y >= southeastY;
+            x >= graphBrushSelection.northwest[0] &&
+            x <= graphBrushSelection.southeast[0] &&
+            y <= graphBrushSelection.northwest[1] &&
+            y >= graphBrushSelection.southeast[1];
 
           if (!pointIsInsideBrushBounds) {
             cell.__selected__ = false;