fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-23 22:08:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Remove d3 global import / add to bundle
This commit is contained in:
Colin Megill
2018-08-16 10:58:48 -04:00
committed by GitHub
parent f8bf32656c 44ef1af863
commit 6665f55075
14 changed files with 71 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+1 -2
View File
@@ -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
-2
View File
@@ -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
Generated
+30 -6
View File
@@ -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",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
"integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.0.tgz",
"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",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
"integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.2.0.tgz",
"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
+1
View File
@@ -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
+4 -6
View File
@@ -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
+17 -15
View File
@@ -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: this.height - 22,
top: -29,
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
View File
@@ -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
+2
View File
@@ -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
+6 -8
View File
@@ -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(
this
)}
onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(this)}
style={{
fontSize: 16,
color:
@@ -152,9 +152,7 @@ class HeatmapRow extends React.Component {
X
</span>
<span
onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(
this
)}
onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+2
View File
@@ -5,6 +5,8 @@
******************************************
******************************************/
import * as d3 from "d3";
const setupScatterplot = (width, height, margin) => {
var container = d3.select("#scatterplot");
client/src/middleware/updateCellColors.js
+4 -2
View File
@@ -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;