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

performance and correctness fixes to brushable histogram (#1390)

Browse Source
This commit is contained in:
Bruce Martin
2020-04-13 20:03:46 -07:00
committed by GitHub
parent 5c0b8c6296
commit a3df1a9f4a
5 changed files with 152 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/brushableHistogram/index.js
+98 -64
View File
@@ -24,10 +24,10 @@ import { makeContinuousDimensionName } from "../../util/nameCreators";
);
return {
world: state.world,
scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
isScatterplotXXaccessor: state.controls.scatterplotXXaccessor === field,
isScatterplotYYaccessor: state.controls.scatterplotYYaccessor === field,
continuousSelectionRange: state.continuousSelection[myName],
colorAccessor: state.colors.colorAccessor
isColorAccessor: state.colors.colorAccessor === field,
};
})
class HistogramBrush extends React.PureComponent {
@@ -47,7 +47,7 @@ class HistogramBrush extends React.PureComponent {
return varData.col(field);
}
calcHistogramCache = memoize(col => {
calcHistogramCache = memoize((col) => {
/*
recalculate expensive stuff, notably bins, summaries, etc.
*/
@@ -61,13 +61,17 @@ class HistogramBrush extends React.PureComponent {
.domain([domainMin, domainMax])
.range([this.marginLeft, this.marginLeft + this.width]);
histogramCache.bins = histogramContinuous(col, numBins, [domainMin, domainMax]);
histogramCache.bins = histogramContinuous(col, numBins, [
domainMin,
domainMax,
]);
histogramCache.binWidth = (domainMax - domainMin) / numBins;
histogramCache.binStart = i => domainMin + i * histogramCache.binWidth;
histogramCache.binEnd = i => domainMin + (i + 1) * histogramCache.binWidth;
histogramCache.binStart = (i) => domainMin + i * histogramCache.binWidth;
histogramCache.binEnd = (i) =>
domainMin + (i + 1) * histogramCache.binWidth;
const yMax = histogramCache.bins.reduce((l, r) => l > r ? l : r);
const yMax = histogramCache.bins.reduce((l, r) => (l > r ? l : r));
histogramCache.y = d3
.scaleLinear()
@@ -90,32 +94,47 @@ class HistogramBrush extends React.PureComponent {
}
componentDidMount() {
const { field, colorAccessor } = this.props;
const { field, isColorAccessor } = this.props;
this.renderHistogram(this._histogram, field, colorAccessor);
this.renderHistogram(this._histogram, field, isColorAccessor);
}
componentDidUpdate(prevProps) {
const { field, world, continuousSelectionRange: range, colorAccessor } = this.props;
const {
field,
world,
continuousSelectionRange: range,
isColorAccessor,
} = this.props;
const { x } = this._histogram;
let { brushX, brushXselection } = this.state;
const dfColumn = HistogramBrush.getColumn(world, field);
const oldDfColumn = HistogramBrush.getColumn(prevProps.world, prevProps.field);
const oldDfColumn = HistogramBrush.getColumn(
prevProps.world,
prevProps.field
);
const rangeChanged = range !== prevProps.continuousSelectionRange;
const dfChanged = dfColumn !== oldDfColumn;
const colorSelectionChanged = prevProps.colorAccessor !== colorAccessor;
const colorSelectionChanged = prevProps.isColorAccessor !== isColorAccessor;
if (dfChanged || colorSelectionChanged) {
({brushX, brushXselection} = this.renderHistogram(this._histogram, field, colorAccessor));
({ brushX, brushXselection } = this.renderHistogram(
this._histogram,
field,
isColorAccessor
));
}
/*
if the selection has changed, ensure that the brush correctly reflects
the underlying selection.
*/
if ((dfChanged || rangeChanged || colorSelectionChanged) && brushXselection) {
if (
(dfChanged || rangeChanged || colorSelectionChanged) &&
brushXselection
) {
const selection = d3.brushSelection(brushXselection.node());
if (!range && selection) {
/* no active selection - clear brush */
@@ -160,9 +179,9 @@ class HistogramBrush extends React.PureComponent {
continuousNamespace: {
isObs,
isUserDefined,
isDiffExp
isDiffExp,
},
range: [x(d3.event.selection[0]), x(d3.event.selection[1])]
range: [x(d3.event.selection[0]), x(d3.event.selection[1])],
});
} else {
dispatch({
@@ -171,9 +190,9 @@ class HistogramBrush extends React.PureComponent {
continuousNamespace: {
isObs,
isUserDefined,
isDiffExp
isDiffExp,
},
range: null
range: null,
});
}
};
@@ -216,9 +235,9 @@ class HistogramBrush extends React.PureComponent {
continuousNamespace: {
isObs,
isUserDefined,
isDiffExp
isDiffExp,
},
range: _range
range: _range,
});
} else {
dispatch({
@@ -227,8 +246,8 @@ class HistogramBrush extends React.PureComponent {
continuousNamespace: {
isObs,
isUserDefined,
isDiffExp
}
isDiffExp,
},
});
}
};
@@ -238,7 +257,7 @@ class HistogramBrush extends React.PureComponent {
const { dispatch, field } = this.props;
dispatch({
type: "set scatterplot x",
data: field
data: field,
});
};
@@ -246,7 +265,7 @@ class HistogramBrush extends React.PureComponent {
const { dispatch, field } = this.props;
dispatch({
type: "set scatterplot y",
data: field
data: field,
});
};
@@ -257,7 +276,7 @@ class HistogramBrush extends React.PureComponent {
dispatch({
type: "color by continuous metadata",
colorAccessor: field,
rangeForColorAccessor: ranges
rangeForColorAccessor: ranges,
});
} else if (world.varData.hasCol(field)) {
dispatch(actions.requestSingleGeneExpressionCountsForColoringPOST(field));
@@ -268,29 +287,29 @@ class HistogramBrush extends React.PureComponent {
const {
dispatch,
field,
colorAccessor,
scatterplotXXaccessor,
scatterplotYYaccessor
isColorAccessor,
isScatterplotXXaccessor,
isScatterplotYYaccessor,
} = this.props;
dispatch({
type: "clear user defined gene",
data: field
data: field,
});
if (field === colorAccessor) {
if (isColorAccessor) {
dispatch({
type: "reset colorscale"
type: "reset colorscale",
});
}
if (field === scatterplotXXaccessor) {
if (isScatterplotXXaccessor) {
dispatch({
type: "set scatterplot x",
data: null
data: null,
});
}
if (field === scatterplotYYaccessor) {
if (isScatterplotYYaccessor) {
dispatch({
type: "set scatterplot y",
data: null
data: null,
});
}
};
@@ -300,11 +319,11 @@ class HistogramBrush extends React.PureComponent {
const col = HistogramBrush.getColumn(world, field);
this._histogram = {
...this.calcHistogramCache(col),
svgRef
svgRef,
};
}
renderHistogram(histogram, field, colorAccessor) {
renderHistogram(histogram, field, isColorAccessor) {
const { x, y, bins, svgRef, binStart, binEnd, binWidth } = histogram;
const svg = d3.select(svgRef);
@@ -319,14 +338,16 @@ class HistogramBrush extends React.PureComponent {
.attr("class", "histogram-container")
.attr("transform", `translate(${this.marginLeft},${this.marginTop})`);
const colorScale = d3.scaleSequential(interpolateCool).domain([0, bins.length]);
const colorScale = d3
.scaleSequential(interpolateCool)
.domain([0, bins.length]);
const histogramScale = d3
.scaleLinear()
.domain(x.domain())
.range([
colorScale.domain()[1],
colorScale.domain()[0]
colorScale.domain()[0],
]); /* we flip this to make colors dark if high in the color scale */
if (binWidth > 0) {
@@ -338,10 +359,15 @@ class HistogramBrush extends React.PureComponent {
.enter()
.append("rect")
.attr("x", (d, i) => x(binStart(i)) + 1)
.attr("y", d => y(d))
.attr("y", (d) => y(d))
.attr("width", (d, i) => x(binEnd(i)) - x(binStart(i)) - 1)
.attr("height", d => y(0) - y(d))
.style("fill", colorAccessor === field ? (d, i) => colorScale(histogramScale(binStart(i))) : "#bbb");
.attr("height", (d) => y(0) - y(d))
.style(
"fill",
isColorAccessor
? (d, i) => colorScale(histogramScale(binStart(i)))
: "#bbb"
);
}
// BRUSH
@@ -350,7 +376,7 @@ class HistogramBrush extends React.PureComponent {
.brushX()
.extent([
[x.range()[0], y.range()[1]],
[x.range()[1], this.marginTop + this.height + this.marginBottom]
[x.range()[1], this.marginTop + this.height + this.marginBottom],
])
/*
emit start so that the Undoable history can save an undo point
@@ -375,7 +401,11 @@ class HistogramBrush extends React.PureComponent {
d3
.axisBottom(x)
.ticks(4)
.tickFormat(d3.format(x.domain().some(n => Math.abs(n) >= 10000) ? ".2e" : ","))
.tickFormat(
d3.format(
x.domain().some((n) => Math.abs(n) >= 10000) ? ".2e" : ","
)
)
);
/* Y AXIS */
@@ -387,7 +417,11 @@ class HistogramBrush extends React.PureComponent {
d3
.axisRight(y)
.ticks(3)
.tickFormat(d3.format(y.domain().some(n => Math.abs(n) >= 10000) ? ".0e" : ","))
.tickFormat(
d3.format(
y.domain().some((n) => Math.abs(n) >= 10000) ? ".0e" : ","
)
)
);
/* axis style */
@@ -404,19 +438,19 @@ class HistogramBrush extends React.PureComponent {
const {
field,
world,
colorAccessor,
isColorAccessor,
isUserDefined,
isDiffExp,
logFoldChange,
pvalAdj,
scatterplotXXaccessor,
scatterplotYYaccessor,
zebra
isScatterplotXXaccessor,
isScatterplotYYaccessor,
zebra,
} = this.props;
const fieldForId = field.replace(/\s/g, "_");
const {
min: unclippedRangeMin,
max: unclippedRangeMax
max: unclippedRangeMax,
} = HistogramBrush.getColumn(world, field, false).summarize();
const unclippedRangeMinColor =
world.clipQuantiles.min === 0 ? "#bbb" : globals.blue;
@@ -436,14 +470,14 @@ class HistogramBrush extends React.PureComponent {
}
style={{
padding: globals.leftSidebarSectionPadding,
backgroundColor: zebra ? globals.lightestGrey : "white"
backgroundColor: zebra ? globals.lightestGrey : "white",
}}
>
<div
style={{
display: "flex",
justifyContent: "flex-end",
paddingBottom: "8px"
paddingBottom: "8px",
}}
>
{isDiffExp || isUserDefined ? (
@@ -456,16 +490,16 @@ class HistogramBrush extends React.PureComponent {
<Button
data-testid={`plot-x-${field}`}
onClick={this.handleSetGeneAsScatterplotX}
active={scatterplotXXaccessor === field}
intent={scatterplotXXaccessor === field ? "primary" : "none"}
active={isScatterplotXXaccessor}
intent={isScatterplotXXaccessor ? "primary" : "none"}
>
plot x
</Button>
<Button
data-testid={`plot-y-${field}`}
onClick={this.handleSetGeneAsScatterplotY}
active={scatterplotYYaccessor === field}
intent={scatterplotYYaccessor === field ? "primary" : "none"}
active={isScatterplotYYaccessor}
intent={isScatterplotYYaccessor ? "primary" : "none"}
>
plot y
</Button>
@@ -479,7 +513,7 @@ class HistogramBrush extends React.PureComponent {
style={{
color: globals.blue,
cursor: "pointer",
marginLeft: 7
marginLeft: 7,
}}
>
remove
@@ -492,8 +526,8 @@ class HistogramBrush extends React.PureComponent {
>
<Button
onClick={this.handleColorAction}
active={colorAccessor === field}
intent={colorAccessor === field ? "primary" : "none"}
active={isColorAccessor}
intent={isColorAccessor ? "primary" : "none"}
data-testclass="colorby"
data-testid={`colorby-${field}`}
icon="tint"
@@ -506,12 +540,12 @@ class HistogramBrush extends React.PureComponent {
id={`histogram_${fieldForId}_svg`}
data-testclass="histogram-plot"
data-testid={`histogram-${field}-plot`}
ref={svgRef => this.drawHistogram(svgRef)}
ref={(svgRef) => this.drawHistogram(svgRef)}
/>
<div
style={{
display: "flex",
justifyContent: "space-between"
justifyContent: "space-between",
}}
>
<span style={{ color: unclippedRangeMinColor }}>
@@ -533,7 +567,7 @@ class HistogramBrush extends React.PureComponent {
style={{
display: "flex",
justifyContent: "center",
alignItems: "baseline"
alignItems: "baseline",
}}
>
<span>
@@ -543,7 +577,7 @@ class HistogramBrush extends React.PureComponent {
<span
style={{
marginLeft: 7,
padding: 2
padding: 2,
}}
>
<strong>p-value (adj):</strong>
client/src/components/continuous/continuous.js
+9 -22
View File
@@ -8,32 +8,20 @@ import { Button } from "@blueprintjs/core";
import * as globals from "../../globals";
import HistogramBrush from "../brushableHistogram";
@connect(state => ({
@connect((state) => ({
obsAnnotations: state.world?.obsAnnotations,
colorAccessor: state.colors.colorAccessor,
colorScale: state.colors.scale,
schema: state.world?.schema
schema: state.world?.schema,
}))
class Continuous extends React.PureComponent {
handleColorAction = key => {
return () => {
const { dispatch, obsAnnotations } = this.props;
const summary = obsAnnotations.col(key).summarize();
dispatch({
type: "color by continuous metadata",
colorAccessor: key,
rangeForColorAccessor: summary
});
};
};
static renderIsStillLoading(zebra, key) {
return (
<div
key={key}
style={{
padding: globals.leftSidebarSectionPadding,
backgroundColor: zebra % 2 === 0 ? globals.lightestGrey : "white"
backgroundColor: zebra % 2 === 0 ? globals.lightestGrey : "white",
}}
>
<div
@@ -41,7 +29,7 @@ class Continuous extends React.PureComponent {
display: "flex",
justifyContent: "space-between",
justifyItems: "center",
alignItems: "center"
alignItems: "center",
}}
>
<div style={{ minWidth: 30 }} />
@@ -51,7 +39,7 @@ class Continuous extends React.PureComponent {
<div
style={{
display: "flex",
justifyContent: "flex-end"
justifyContent: "flex-end",
}}
>
<Button minimal loading intent="primary" />
@@ -66,16 +54,16 @@ class Continuous extends React.PureComponent {
const obsIndex = schema.annotations.obs.index;
const allContinuousNames = schema.annotations.obs.columns
.filter(col => col.type === "int32" || col.type === "float32")
.filter(col => col.name !== obsIndex)
.map(col => col.name);
.filter((col) => col.type === "int32" || col.type === "float32")
.filter((col) => col.name !== obsIndex)
.map((col) => col.name);
/* initial value for iterator to simulate index, ranges is an object */
let zebra = 0;
return (
<div>
{allContinuousNames.map(key => {
{allContinuousNames.map((key) => {
if (!obsAnnotations.hasCol(key)) {
// still loading!
zebra += 1;
@@ -98,7 +86,6 @@ class Continuous extends React.PureComponent {
isObs
zebra={zebra % 2 === 0}
ranges={summary}
handleColorAction={this.handleColorAction(key)}
/>
);
}
client/src/reducers/continuousSelection.js
+1 -1
View File
@@ -15,7 +15,7 @@ const ContinuousSelection = (state = {}, action) => {
);
return {
...state,
[name]: action.range
[name]: action.range,
};
}
case "continuous metadata histogram cancel": {
client/src/reducers/crossfilter.js
+14 -9
View File
@@ -4,14 +4,14 @@ import Crossfilter from "../util/typedCrossfilter";
import {
World,
ControlsHelpers,
AnnotationsHelpers
AnnotationsHelpers,
} from "../util/stateManager";
import {
layoutDimensionName,
obsAnnoDimensionName,
userDefinedDimensionName,
diffexpDimensionName,
makeContinuousDimensionName
makeContinuousDimensionName,
} from "../util/nameCreators";
const XYDimName = layoutDimensionName("XY");
@@ -124,7 +124,7 @@ const CrossfilterReducerBase = (
case "request differential expression success": {
const { world } = prevSharedState;
const varIndexName = world.schema.annotations.var.index;
const genes = _.map(action.data, d =>
const genes = _.map(action.data, (d) =>
world.varAnnotations.at(d[0], varIndexName)
);
const crossfilter = _.reduce(
@@ -216,7 +216,7 @@ const CrossfilterReducerBase = (
minX,
minY,
maxX,
maxY
maxY,
});
}
@@ -224,7 +224,7 @@ const CrossfilterReducerBase = (
const { polygon } = action;
return state.select(XYDimName, {
mode: "within-polygon",
polygon
polygon,
});
}
@@ -249,7 +249,12 @@ const CrossfilterReducerBase = (
return state.select(name, { mode: "all" });
}
const [lo, hi] = action.range;
const newState = state.select(name, { mode: "range", lo, hi });
const newState = state.select(name, {
mode: "range",
lo,
hi,
inclusive: true, // [lo, hi] incluisve selection
});
return newState;
}
@@ -261,19 +266,19 @@ const CrossfilterReducerBase = (
const values = categoryValues.filter((v, i) => categoryValueSelected[i]);
return state.select(obsAnnoDimensionName(action.metadataField), {
mode: "exact",
values
values,
});
}
case "categorical metadata filter none of these": {
return state.select(obsAnnoDimensionName(action.metadataField), {
mode: "none"
mode: "none",
});
}
case "categorical metadata filter all of these": {
return state.select(obsAnnoDimensionName(action.metadataField), {
mode: "all"
mode: "all",
});
}
client/src/util/typedCrossfilter/crossfilter.js
+30 -23
View File
@@ -5,7 +5,7 @@ import {
lowerBound,
binarySearch,
lowerBoundIndirect,
upperBoundIndirect
upperBoundIndirect,
} from "./sort";
import { makeSortIndex } from "./util";
@@ -101,12 +101,12 @@ export default class ImmutableTypedCrossfilter {
id,
dim,
name,
selection: dim.select({ mode: "all" })
}
selection: dim.select({ mode: "all" }),
},
};
return new ImmutableTypedCrossfilter(data, dimensions, {
bitArray
bitArray,
});
}
@@ -126,7 +126,7 @@ export default class ImmutableTypedCrossfilter {
}
return new ImmutableTypedCrossfilter(data, dimensions, {
bitArray
bitArray,
});
}
@@ -138,8 +138,8 @@ export default class ImmutableTypedCrossfilter {
[newName]: {
...dim,
name: newName,
dim: dim.dim.rename(newName)
}
dim: dim.dim.rename(newName),
},
};
return new ImmutableTypedCrossfilter(data, newDimensions, selectionCache);
}
@@ -205,19 +205,19 @@ export default class ImmutableTypedCrossfilter {
If sort index exists in the dimension, assume sort ordered ranges.
*/
if (oldSeln.index) {
dels.forEach(interval =>
dels.forEach((interval) =>
bitArray.deselectIndirectFromRange(id, oldSeln.index, interval)
);
} else {
dels.forEach(interval => bitArray.deselectFromRange(id, interval));
dels.forEach((interval) => bitArray.deselectFromRange(id, interval));
}
if (newSeln.index) {
adds.forEach(interval =>
adds.forEach((interval) =>
bitArray.selectIndirectFromRange(id, newSeln.index, interval)
);
} else {
adds.forEach(interval => bitArray.selectFromRange(id, interval));
adds.forEach((interval) => bitArray.selectFromRange(id, interval));
}
return { bitArray };
@@ -229,12 +229,12 @@ export default class ImmutableTypedCrossfilter {
if (!this.selectionCache.bitArray) {
// console.log("...rebuilding crossfilter cache...");
const bitArray = new BitArray(this.data.length);
Object.keys(this.dimensions).forEach(name => {
Object.keys(this.dimensions).forEach((name) => {
const { selection } = this.dimensions[name];
const id = bitArray.allocDimension();
this.dimensions[name].id = id;
const { ranges, index } = selection;
ranges.forEach(range => {
ranges.forEach((range) => {
if (index) {
bitArray.selectIndirectFromRange(id, index, range);
} else {
@@ -395,7 +395,7 @@ class ImmutableScalarDimension extends _ImmutableBaseDimension {
// only by enumerated dimensions
array = this._createValueArray(
data,
i => value[i],
(i) => value[i],
new ValueArrayType(data.length)
);
} else {
@@ -448,7 +448,7 @@ class ImmutableScalarDimension extends _ImmutableBaseDimension {
for (let v = 0, len = values.length; v < len; v += 1) {
const r = [
lowerBoundIndirect(value, index, values[v], 0, value.length),
upperBoundIndirect(value, index, values[v], 0, value.length)
upperBoundIndirect(value, index, values[v], 0, value.length),
];
if (r[0] <= r[1]) {
ranges.push(r);
@@ -459,12 +459,16 @@ class ImmutableScalarDimension extends _ImmutableBaseDimension {
selectRange(spec) {
const { value, index } = this;
/* [lo, hi) */
const { lo, hi } = spec;
/*
if !inclusive: [lo, hi) else [lo, hi]
*/
const { lo, hi, inclusive } = spec;
const ranges = [];
const r = [
lowerBoundIndirect(value, index, lo, 0, value.length),
lowerBoundIndirect(value, index, hi, 0, value.length)
!!inclusive
? upperBoundIndirect(value, index, hi, 0, value.length)
: lowerBoundIndirect(value, index, hi, 0, value.length),
];
if (r[0] < r[1]) ranges.push(r);
return { ranges, index };
@@ -504,7 +508,9 @@ class ImmutableEnumDimension extends ImmutableScalarDimension {
const { values } = spec;
return super.selectExact({
mode: spec.mode,
values: values.map(v => binarySearch(enumIndex, v, 0, enumIndex.length))
values: values.map((v) =>
binarySearch(enumIndex, v, 0, enumIndex.length)
),
});
}
@@ -593,13 +599,13 @@ class ImmutableSpatialDimension extends _ImmutableBaseDimension {
if (maxY - minY > maxX - minX) {
slice = [
lowerBoundIndirect(X, Xindex, minX, 0, length),
lowerBoundIndirect(X, Xindex, maxX, 0, length)
lowerBoundIndirect(X, Xindex, maxX, 0, length),
];
index = Xindex;
} else {
slice = [
lowerBoundIndirect(Y, Yindex, minY, 0, length),
lowerBoundIndirect(Y, Yindex, maxY, 0, length)
lowerBoundIndirect(Y, Yindex, maxY, 0, length),
];
index = Yindex;
}
@@ -632,7 +638,7 @@ class ImmutableSpatialDimension extends _ImmutableBaseDimension {
export const DimTypes = {
scalar: ImmutableScalarDimension,
enum: ImmutableEnumDimension,
spatial: ImmutableSpatialDimension
spatial: ImmutableSpatialDimension,
};
function isArrayOrTypedArray(x) {
@@ -682,7 +688,8 @@ function withinPolygon(polygon, x, y) {
x1 = p[0];
y1 = p[1];
if (((y1 > y) !== (y0 > y)) && (x < (x0 - x1) * (y - y1) / (y0 - y1) + x1)) inside = !inside;
if (y1 > y !== y0 > y && x < ((x0 - x1) * (y - y1)) / (y0 - y1) + x1)
inside = !inside;
x0 = x1;
y0 = y1;
}