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

rerender axes on regraph (#403)

Browse Source 
* remove cells loading now that we have toast

* rerender histogram axes

* remove logging
This commit is contained in:
Colin Megill
2018-11-05 09:29:49 -05:00
committed by GitHub
parent e2d864a336
commit 0dcc17d6d5
2 changed files with 64 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/app.js
+1 -2
View File
@@ -54,7 +54,7 @@ class App extends React.Component {
}
render() {
const { loading, error } = this.props;
const { loading } = this.props;
return (
<Container>
<Helmet title="cellxgene" />
@@ -70,7 +70,6 @@ class App extends React.Component {
loading cellxgene
</div>
) : null}
{error ? "Error loading cells" : null}
<div>
{loading ? null : <LeftSideBar />}
<div
client/src/components/brushableHistogram/index.js
+63 -48
View File
@@ -77,10 +77,22 @@ class HistogramBrush extends React.Component {
this.width = 340;
this.height = 100;
this.marginBottom = 20;
}
this.state = {
brush: null
};
componentDidMount() {
const { field } = this.props;
const { x, y, bins, numValues, svgRef } = this._histogram;
this.renderAxesBrushBins(x, y, bins, numValues, svgRef, field);
}
componentDidUpdate(prevProps) {
const { field, obsAnnotations } = this.props;
const { x, y, bins, numValues, svgRef } = this._histogram;
if (obsAnnotations !== prevProps.obsAnnotations) {
this.renderAxesBrushBins(x, y, bins, numValues, svgRef, field);
}
}
onBrush(selection, x) {
@@ -115,7 +127,6 @@ class HistogramBrush extends React.Component {
drawHistogram(svgRef) {
const { obsAnnotations, field, ranges } = this.props;
const { brush, axis } = this.state;
const histogramCache = this.calcHistogramCache(
obsAnnotations,
field,
@@ -123,51 +134,8 @@ class HistogramBrush extends React.Component {
);
const { x, y, bins, numValues } = histogramCache;
d3.select(svgRef)
.selectAll(".bar")
.remove();
d3.select(svgRef)
.insert("g", "*")
.attr("fill", "#bbb")
.selectAll("rect")
.data(bins)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", d => x(d.x0) + 1)
.attr("y", d => y(d.length / numValues))
.attr("width", d => Math.abs(x(d.x1) - x(d.x0) - 1))
.attr("height", d => y(0) - y(d.length / numValues));
if (!brush && !axis) {
const newBrush = d3
.select(svgRef)
.append("g")
.attr("class", "brush")
.call(d3.brushX().on("end", this.onBrush(field, x.invert).bind(this)));
const xAxis = d3
.select(svgRef)
.append("g")
.attr("class", "axis axis--x")
.attr("transform", `translate(0,${this.height - this.marginBottom})`)
.call(d3.axisBottom(x).ticks(5));
d3.select(svgRef)
.selectAll(".axis--x text")
.style("fill", "rgb(80,80,80)");
d3.select(svgRef)
.selectAll(".axis--x path")
.style("stroke", "rgb(230,230,230)");
d3.select(svgRef)
.selectAll(".axis--x line")
.style("stroke", "rgb(230,230,230)");
this.setState({ brush: newBrush, xAxis }); // eslint-disable-line react/no-unused-state
}
this._histogram = { x, y, bins, numValues, svgRef };
}
handleColorAction() {
@@ -223,6 +191,52 @@ class HistogramBrush extends React.Component {
};
}
renderAxesBrushBins(x, y, bins, numValues, svgRef, field) {
/* Remove everything */
d3.select(svgRef)
.selectAll("*")
.remove();
/* BINS */
d3.select(svgRef)
.insert("g", "*")
.attr("fill", "#bbb")
.selectAll("rect")
.data(bins)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", d => x(d.x0) + 1)
.attr("y", d => y(d.length / numValues))
.attr("width", d => Math.abs(x(d.x1) - x(d.x0) - 1))
.attr("height", d => y(0) - y(d.length / numValues));
/* BRUSH */
d3.select(svgRef)
.append("g")
.attr("class", "brush")
.call(d3.brushX().on("end", this.onBrush(field, x.invert).bind(this)));
/* AXIS */
d3.select(svgRef)
.append("g")
.attr("class", "axis axis--x")
.attr("transform", `translate(0,${this.height - this.marginBottom})`)
.call(d3.axisBottom(x).ticks(5));
d3.select(svgRef)
.selectAll(".axis--x text")
.style("fill", "rgb(80,80,80)");
d3.select(svgRef)
.selectAll(".axis--x path")
.style("stroke", "rgb(230,230,230)");
d3.select(svgRef)
.selectAll(".axis--x line")
.style("stroke", "rgb(230,230,230)");
}
render() {
const {
field,
@@ -295,6 +309,7 @@ class HistogramBrush extends React.Component {
<svg
width={this.width}
height={this.height}
id={`histogram_${field}_svg`}
ref={svgRef => {
this.drawHistogram(svgRef);
}}