add d3 and scale chromatic imports

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;