Merge pull request #143 from chanzuckerberg/#53-react-upgrade

React 16

client/package.json

@@ -4,10 +4,8 @@
   "license": "MIT",
   "repository": "https://github.com/chanzuckerberg/cellxgene",
   "scripts": {
-    "build":
+    "build": "npm run clean && webpack --config configuration/webpack/webpack.config.prod.js",
-      "npm run clean && webpack --config configuration/webpack/webpack.config.prod.js",
+    "dev": "npm run clean && webpack --config configuration/webpack/webpack.config.dev.js",
-    "dev":
-      "npm run clean && webpack --config configuration/webpack/webpack.config.dev.js",
     "clean": "rimraf build",
     "start": "node server/development.js",
     "lint": "eslint src",
@@ -35,9 +33,10 @@
     "express": "^4.14.0",
     "font-color-contrast": "^1.0.3",
     "gl-mat4": "^1.1.4",
-    "gl-matrix": "^2.4.0",
+    "gl-matrix": "^2.7.1",
     "halogen": "^0.2.0",
     "hsv2rgb": "^1.1.0",
+    "jest": "^23.4.1",
     "key-pressed": "0.0.1",
     "lodash": "^4.17.4",
     "luma.gl": "^4.0.3",
@@ -45,9 +44,9 @@
     "mouse-pressed": "^1.0.0",
     "orbit-camera": "^1.0.0",
     "query-string": "^5.0.0",
-    "react": "^15.3.0",
+    "react": "^16.4.1",
     "react-autocomplete": "^1.7.2",
-    "react-dom": "^15.3.0",
+    "react-dom": "^16.4.1",
     "react-helmet": "^5.2.0",
     "react-hot-loader": "^3.0.0-beta.7",
     "react-icons": "^2.2.7",
@@ -59,6 +58,7 @@
     "scroll-speed": "^1.0.0",
     "serve-favicon": "^2.3.0",
     "urijs": "^1.19.0",
+    "webpack-hot-middleware": "^2.22.3",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {

client/src/components/app.js

@@ -4,7 +4,7 @@ import _ from "lodash";
 import Helmet from "react-helmet";
 import Container from "./framework/container";
 import { connect } from "react-redux";
-import PulseLoader from "halogen/PulseLoader";
+// import PulseLoader from "halogen/PulseLoader";
 
 import LeftSideBar from "./leftsidebar";
 import Parallel from "./continuous/parallel";
@@ -69,7 +69,7 @@ class App extends React.Component {
           <div
             style={{ position: "fixed", left: window.innerWidth / 2, top: 150 }}
           >
-            <PulseLoader color="rgb(0,0,0)" size="10px" margin="4px" />
+            {/*<PulseLoader color="rgb(0,0,0)" size="10px" margin="4px" />*/}
             <span
               style={{ fontFamily: globals.accentFont, fontStyle: "italic" }}
             >

client/src/components/continuous/continuous.js

@@ -51,10 +51,6 @@ class Continuous extends React.Component {
       dimensions: null
     };
   }
-  componentDidMount() {}
-  componentWillReceiveProps(nextProps) {}
-
-  componentDidMount() {}
   handleBrushAction(selection) {
     this.props.dispatch({
       type: "continuous selection using parallel coords brushing",

client/src/components/continuous/histogramBrush.js

@@ -49,9 +49,6 @@ class HistogramBrush extends React.Component {
       brush: null
     };
   }
-  componentDidMount() {}
-  componentDidUpdate() {}
-
   calcHistogramCache(nextProps) {
     // recalculate expensive stuff
     const allValuesForContinuousFieldAsArray = _.map(
@@ -80,14 +77,6 @@ class HistogramBrush extends React.Component {
   componentWillMount() {
     this.calcHistogramCache(this.props);
   }
-  componentWillReceiveProps(nextProps) {
-    if (
-      this.props.metadataField !== nextProps.metadataField ||
-      !this.histogramCache.x
-    ) {
-      this.calcHistogramCache(nextProps);
-    }
-  }
 
   onBrush(selection, x) {
     return () => {

client/src/components/continuousLegend/index.js

@@ -102,27 +102,26 @@ class ContinuousLegend extends React.Component {
     super(props);
     this.state = {};
   }
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     if (
-      nextProps.colorAccessor !== this.props.colorAccessor ||
+      prevProps.colorAccessor !== this.props.colorAccessor ||
-      nextProps.responsive.height !== this.props.responsive.height ||
+      prevProps.responsive.height !== this.props.responsive.height ||
-      nextProps.responsive.width !== this.props.responsive.width
+      prevProps.responsive.width !== this.props.responsive.width
     ) {
       /* always remove it, if it's not continuous we don't put it back. */
-      d3
+      d3.select("#continuous_legend")
-        .select("#continuous_legend")
         .selectAll("*")
         .remove();
     }
 
-    if (nextProps.colorAccessor && nextProps.colorScale) {
+    if (this.props.colorAccessor && this.props.colorScale) {
       /* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
-      if (nextProps.colorScale.range()[0][0] !== "#") {
+      if (this.props.colorScale.range()[0][0] !== "#") {
         continuous(
           "#continuous_legend",
           d3
             .scaleSequential(d3.interpolateViridis)
-            .domain(nextProps.colorScale.domain())
+            .domain(this.props.colorScale.domain())
         );
       }
     }

client/src/components/graph/graph.js

@@ -117,10 +117,19 @@ class Graph extends React.Component {
       reglRender
     });
   }
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps, prevState) {
-    if (this.state.regl && nextProps.crossfilter) {
+    if (
+      this.state.reglRender &&
+      this.reglRenderState === "rendering" &&
+      this.state.mode !== "zoom"
+    ) {
+      this.state.reglRender.cancel();
+      this.reglRenderState = "paused";
+    }
+
+    if (this.state.regl && this.props.crossfilter) {
       /* update the regl state */
-      const crossfilter = nextProps.crossfilter.cells;
+      const crossfilter = this.props.crossfilter.cells;
       const cells = crossfilter.all();
       const cellCount = cells.length;
 
@@ -129,7 +138,7 @@ class Graph extends React.Component {
       //
       if (
         !this.renderCache.positions ||
-        this.props.crossfilter.cells != nextProps.crossfilter.cells
+        this.props.crossfilter.cells != prevProps.crossfilter.cells
       ) {
         if (!this.renderCache.positions)
           this.renderCache.positions = new Float32Array(2 * cellCount);
@@ -161,7 +170,7 @@ class Graph extends React.Component {
       // we could add some sort of color-specific indicator to the app state.
       if (
         !this.renderCache.colors ||
-        this.props.cellsMetadata != nextProps.cellsMetadata
+        this.props.cellsMetadata != prevProps.cellsMetadata
       ) {
         if (!this.renderCache.colors)
           this.renderCache.colors = new Float32Array(3 * cellCount);
@@ -178,7 +187,7 @@ class Graph extends React.Component {
       //
       if (
         !this.renderCache.sizes ||
-        this.props.crossfilter.cells != nextProps.crossfilter.cells
+        this.props.crossfilter.cells != prevProps.crossfilter.cells
       ) {
         this.renderCache.sizes = new Float32Array(cellCount);
       }
@@ -200,33 +209,22 @@ class Graph extends React.Component {
 
     if (
       /* invisibly handles the initial null vs integer case as well as resize events */
-      nextProps.responsive.height !== this.props.responsive.height ||
+      prevProps.responsive.height !== this.props.responsive.height ||
-      nextProps.responsive.width !== this.props.responsive.width
+      prevProps.responsive.width !== this.props.responsive.width
     ) {
       /* clear out whatever was on the div, even if nothing, but usually the brushes etc */
-      d3
+      d3.select("#graphAttachPoint")
-        .select("#graphAttachPoint")
         .selectAll("svg")
         .remove();
       const { svg, brush, brushContainer } = setupSVGandBrushElements(
         this.handleBrushSelectAction.bind(this),
         this.handleBrushDeselectAction.bind(this),
-        nextProps.responsive,
+        this.props.responsive,
         this.graphPaddingTop
       );
       this.setState({ svg, brush, brushContainer });
     }
   }
-  componentDidUpdate() {
-    if (
-      this.state.reglRender &&
-      this.reglRenderState === "rendering" &&
-      this.state.mode !== "zoom"
-    ) {
-      this.state.reglRender.cancel();
-      this.reglRenderState = "paused";
-    }
-  }
   handleBrushSelectAction() {
     /* This conditional handles procedural brush deselect. Brush emits an event on procedural deselect because it is move: null */
     if (d3.event.sourceEvent !== null) {
@@ -251,7 +249,7 @@ class Graph extends React.Component {
       // transform screen coordinates -> cell coordinates
       const invert = pin => {
         const x =
-          2 * pin[0] / (this.props.responsive.height - this.graphPaddingTop) -
+          (2 * pin[0]) / (this.props.responsive.height - this.graphPaddingTop) -
           1;
         const y =
           2 *

client/src/components/scatterplot/scatterplot.js

@@ -123,21 +123,6 @@ class Scatterplot extends React.Component {
       colorBuffer
     });
   }
-  componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.expression &&
-      nextProps.expression.data &&
-      nextProps.scatterplotXXaccessor &&
-      nextProps.scatterplotYYaccessor
-    ) {
-      const scales = this.setupScales(
-        nextProps.expression,
-        nextProps.scatterplotXXaccessor,
-        nextProps.scatterplotYYaccessor
-      );
-      this.setState(scales);
-    }
-  }
   componentDidUpdate(prevProps) {
     if (
       this.state.svg &&
@@ -213,6 +198,22 @@ class Scatterplot extends React.Component {
       this.state.sizeBuffer({ data: sizes, dimension: 1 });
       this.count = cellCount;
     }
+
+    if (
+      this.props.expression &&
+      this.props.expression.data &&
+      this.props.scatterplotXXaccessor &&
+      this.props.scatterplotYYaccessor &&
+      (this.props.scatterplotXXaccessor !== prevProps.scatterplotXXaccessor || // was CLU now FTH1 etc
+        this.props.scatterplotYYaccessor !== prevProps.scatterplotYYaccessor)
+    ) {
+      const scales = this.setupScales(
+        this.props.expression,
+        this.props.scatterplotXXaccessor,
+        this.props.scatterplotYYaccessor
+      );
+      this.setState(scales);
+    }
   }
   setupScales(expression, scatterplotXXaccessor, scatterplotYYaccessor) {
     const xScale = d3