Merge pull request #193 from chanzuckerberg/#175-d3-globals

Remove d3 global import / add to bundle

client/index.html

@@ -24,7 +24,6 @@
     <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
 
     <div id="root"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
+
-    <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
   </body>
 </html>

client/index_template.html

@@ -23,7 +23,5 @@ window.CELLXGENE.datasetTitle = "{{ datasetTitle }}";
     <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
 
     <div id="root"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
-    <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
   </body>
 </html>

client/package-lock.json

@@ -3693,6 +3693,21 @@
         "d3-transition": "1.1.1",
         "d3-voronoi": "1.1.2",
         "d3-zoom": "1.7.1"
+      },
+      "dependencies": {
+        "d3-color": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
+          "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
+        },
+        "d3-interpolate": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
+          "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
+          "requires": {
+            "d3-color": "1"
+          }
+        }
       }
     },
     "d3-array": {
@@ -3732,9 +3747,9 @@
       "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
     },
     "d3-color": {
-      "version": "1.0.3",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.0.tgz",
-      "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
+      "integrity": "sha512-dmL9Zr/v39aSSMnLOTd58in2RbregCg4UtGyUArvEKTTN6S3HKEy+ziBWVYo9PTzRyVW+pUBHUtRKz0HYX+SQg=="
     },
     "d3-dispatch": {
       "version": "1.0.3",
@@ -3795,9 +3810,9 @@
       "integrity": "sha1-ochFxC+Eoga88cAcAQmOpN2qeiY="
     },
     "d3-interpolate": {
-      "version": "1.1.6",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.2.0.tgz",
-      "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
+      "integrity": "sha512-zLvTk8CREPFfc/2XglPQriAsXkzoRDAyBzndtKJWrZmHw7kmOWHNS11e40kPTd/oGk8P5mFJW5uBbcFQ+ybxyA==",
       "requires": {
         "d3-color": "1"
       }
@@ -3852,6 +3867,15 @@
         "d3-time-format": "2"
       }
     },
+    "d3-scale-chromatic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.3.0.tgz",
+      "integrity": "sha512-YwMbiaW2bStWvQFByK8hA6hk7ToWflspIo2TRukCqERd8isiafEMBXmwfh8c7/0Z94mVvIzIveRLVC6RAjhgeA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-interpolate": "1"
+      }
+    },
     "d3-selection": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",

client/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "canvas-fit": "^1.5.0",
     "d3": "^4.10.0",
+    "d3-scale-chromatic": "^1.3.0",
     "font-color-contrast": "^1.0.3",
     "gl-mat4": "^1.1.4",
     "gl-matrix": "^2.7.1",

client/src/components/app.js

@@ -9,7 +9,7 @@ import { connect } from "react-redux";
 import LeftSideBar from "./leftsidebar";
 import Parallel from "./continuous/parallel";
 import Legend from "./continuousLegend";
-import Joy from "./joy/joy";
+// import Joy from "./joy/joy";
 import Graph from "./graph/graph";
 import * as globals from "../globals";
 import actions from "../actions";
@@ -78,11 +78,7 @@ class App extends React.Component {
           </div>
         ) : null}
         {this.props.cells.error ? "Error loading cells" : null}
-        {false ? (
+
-          <Joy data={this.state.expressions && this.state.expressions.data} />
-        ) : (
-          ""
-        )}
         <div>
           <LeftSideBar />
           <div
@@ -103,3 +99,5 @@ class App extends React.Component {
 }
 
 export default App;
+
+// <Joy data={this.state.expressions && this.state.expressions.data} />

client/src/components/continuous/histogramBrush.js

@@ -9,6 +9,7 @@ import _ from "lodash";
 import { connect } from "react-redux";
 import FaPaintBrush from "react-icons/lib/fa/paint-brush";
 import * as globals from "../../globals";
+import * as d3 from "d3";
 
 @connect(state => {
   const initializeRanges = _.get(state, "initialize.data.data.ranges", null);
@@ -155,9 +156,23 @@ class HistogramBrush extends React.Component {
   render() {
     return (
       <div
-        style={{ marginTop: 10, position: "relative" }}
+        style={{
+          marginTop: 10,
+          position: "flex"
+        }}
         id={"histogram_" + this.props.metadataField}
       >
+        <svg
+          width={this.width}
+          height={this.height}
+          ref={svgRef => {
+            this.drawHistogram(svgRef);
+          }}
+        >
+          {this.props.ranges.min}
+          {" to "}
+          {this.props.ranges.max}
+        </svg>
         <span
           onClick={this.handleColorAction.bind(this)}
           style={{
@@ -170,26 +185,13 @@ class HistogramBrush extends React.Component {
                 ? globals.brightBlue
                 : "black",
             // backgroundColor: this.props.colorAccessor === this.props.metadataField ? globals.brightBlue : "inherit",
-            display: "inline-block",
             position: "relative",
-            left: this.width,
+            top: -29,
-            top: this.height - 22,
             cursor: "pointer"
           }}
         >
           <FaPaintBrush />
         </span>
-        <svg
-          width={this.width}
-          height={this.height}
-          ref={svgRef => {
-            this.drawHistogram(svgRef);
-          }}
-        >
-          {this.props.ranges.min}
-          {" to "}
-          {this.props.ranges.max}
-        </svg>
       </div>
     );
   }

client/src/components/continuous/util.js

@@ -1,5 +1,6 @@
 // jshint esversion: 6
 import _ from "lodash";
+import * as d3 from "d3";
 
 const paddingRight = 120;
 const continuousChartWidth = 1200;

client/src/components/continuousLegend/index.js

@@ -3,6 +3,8 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import * as globals from "../../globals";
+import * as d3 from "d3";
+import { interpolateViridis } from "d3-scale-chromatic";
 
 // create continuous color legend
 // http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f

client/src/components/expression/diffExpHeatmap.js

@@ -9,6 +9,8 @@ import actions from "../../actions";
 import ReactAutocomplete from "react-autocomplete"; /* http://emilebres.github.io/react-virtualized-checkbox/ */
 import getContrast from "font-color-contrast"; // https://www.npmjs.com/package/font-color-contrast
 import FaPaintBrush from "react-icons/lib/fa/paint-brush";
+import * as d3 from "d3";
+import { interpolateGreys } from "d3-scale-chromatic";
 
 class HeatmapSquare extends React.Component {
   constructor(props) {
@@ -121,15 +123,13 @@ class HeatmapRow extends React.Component {
           style={{
             fontSize: 12,
             marginLeft: 10,
-            marginRight: 10,
+            marginRight: 10
           }}
         >
           {this.props.aveDiff.toFixed(2)}
         </span>
         <span
-          onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(
+          onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(this)}
-            this
-          )}
           style={{
             fontSize: 16,
             color:
@@ -152,9 +152,7 @@ class HeatmapRow extends React.Component {
           X
         </span>
         <span
-          onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(
+          onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(this)}
-            this
-          )}
           style={{
             fontSize: 16,
             color:
@@ -242,7 +240,7 @@ class Heatmap extends React.Component {
     const greyColorScale = d3
       .scaleSequential()
       .domain(extent)
-      .interpolator(d3.interpolateGreys);
+      .interpolator(interpolateGreys);
 
     return (
       <div>

client/src/components/graph/graph.js

@@ -7,6 +7,7 @@ import { setupSVGandBrushElements } from "./setupSVGandBrush";
 import SectionHeader from "../framework/sectionHeader";
 import { connect } from "react-redux";
 import actions from "../../actions";
+import * as d3 from "d3";
 
 import mat4 from "gl-mat4";
 import fit from "canvas-fit";

client/src/components/graph/setupSVGandBrush.js

@@ -2,6 +2,7 @@
 import styles from "./graph.css";
 import _ from "lodash";
 import * as globals from "../../globals";
+import * as d3 from "d3";
 
 /******************************************
 *******************************************

client/src/components/scatterplot/scatterplot.js

@@ -9,6 +9,7 @@ import { connect } from "react-redux";
 import scatterplot from "./scatterplot";
 import setupScatterplot from "./setupScatterplot";
 import styles from "./scatterplot.css";
+import * as d3 from "d3";
 
 import mat4 from "gl-mat4";
 import fit from "canvas-fit";

client/src/components/scatterplot/setupScatterplot.js

@@ -5,6 +5,8 @@
 ******************************************
 ******************************************/
 
+import * as d3 from "d3";
+
 const setupScatterplot = (width, height, margin) => {
   var container = d3.select("#scatterplot");
 

client/src/middleware/updateCellColors.js

@@ -3,6 +3,8 @@ import uri from "urijs";
 import * as globals from "../globals";
 import _ from "lodash";
 import { parseRGB } from "../util/parseRGB";
+import * as d3 from "d3";
+import { interpolateViridis } from "d3-scale-chromatic";
 
 /*
   https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6
@@ -67,7 +69,7 @@ const updateCellColorsMiddleware = store => {
           .range([1, 0]);
 
         _.each(cellsMetadataWithUpdatedColors, (cell, i) => {
-          let c = d3.interpolateViridis(colorScale(cell[action.colorAccessor]));
+          let c = interpolateViridis(colorScale(cell[action.colorAccessor]));
           cellsMetadataWithUpdatedColors[i]["__color__"] = c;
           cellsMetadataWithUpdatedColors[i]["__colorRGB__"] = parseRGB(c);
         });
@@ -112,7 +114,7 @@ const updateCellColorsMiddleware = store => {
           ]); /* invert viridis... probably pass this scale through to others */
 
         _.each(cellsMetadataWithUpdatedColors, (cell, i) => {
-          let c = d3.interpolateViridis(
+          let c = interpolateViridis(
             colorScale(expressionMap[cell.CellName][indexOfGene])
           );
           cellsMetadataWithUpdatedColors[i]["__color__"] = c;