mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-20 11:28:47 +08:00
315 lines
8.7 KiB
JavaScript
315 lines
8.7 KiB
JavaScript
// jshint esversion: 6
|
|
// https://bl.ocks.org/Jverma/076377dd0125b1a508621441752735fc
|
|
// https://peterbeshai.com/scatterplot-in-d3-with-voronoi-interaction.html
|
|
|
|
import React from "react";
|
|
import _ from "lodash";
|
|
import { connect } from "react-redux";
|
|
|
|
import scatterplot from "./scatterplot";
|
|
import setupScatterplot from "./setupScatterplot";
|
|
import styles from "./scatterplot.css";
|
|
import drawScatterplotCanvas from "./drawScatterplotCanvas";
|
|
|
|
import mat4 from "gl-mat4";
|
|
import fit from "canvas-fit";
|
|
import _camera from "../../util/camera.js";
|
|
import _regl from "regl";
|
|
import _drawPoints from "./drawPointsRegl";
|
|
|
|
import { margin, width, height, createDimensions } from "./util";
|
|
|
|
@connect(state => {
|
|
const ranges =
|
|
state.cells.cells && state.cells.cells.data.ranges
|
|
? state.cells.cells.data.ranges
|
|
: null;
|
|
const metadata =
|
|
state.cells.cells && state.cells.cells.data.metadata
|
|
? state.cells.cells.data.metadata
|
|
: null;
|
|
const initializeRanges =
|
|
state.initialize.data && state.initialize.data.data.ranges
|
|
? state.initialize.data.data.ranges
|
|
: null;
|
|
|
|
return {
|
|
ranges,
|
|
metadata,
|
|
initializeRanges,
|
|
colorAccessor: state.controls.colorAccessor,
|
|
colorScale: state.controls.colorScale,
|
|
currentCellSelection: state.controls.currentCellSelection,
|
|
scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
|
|
scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
|
|
opacityForDeselectedCells: state.controls.opacityForDeselectedCells,
|
|
differential: state.differential,
|
|
expression: state.expression
|
|
};
|
|
})
|
|
class Scatterplot extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.count = 0;
|
|
this.state = {
|
|
svg: null,
|
|
// ctx: null,
|
|
axes: null,
|
|
dimensions: null,
|
|
xScale: null,
|
|
yScale: null
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { svg } = setupScatterplot(width, height, margin);
|
|
this.setState({
|
|
svg
|
|
});
|
|
|
|
const camera = _camera(this.reglCanvas, { scale: true, rotate: false });
|
|
const regl = _regl(this.reglCanvas);
|
|
|
|
const drawPoints = _drawPoints(regl);
|
|
|
|
// preallocate buffers
|
|
const pointBuffer = regl.buffer();
|
|
const colorBuffer = regl.buffer();
|
|
const sizeBuffer = regl.buffer();
|
|
|
|
regl.frame(({ viewportWidth, viewportHeight }) => {
|
|
regl.clear({
|
|
depth: 1,
|
|
color: [1, 1, 1, 1]
|
|
});
|
|
|
|
drawPoints({
|
|
distance: camera.distance,
|
|
color: colorBuffer,
|
|
position: pointBuffer,
|
|
size: sizeBuffer,
|
|
count: this.count,
|
|
view: camera.view(),
|
|
scale: viewportHeight / viewportWidth
|
|
});
|
|
|
|
camera.tick();
|
|
});
|
|
|
|
this.setState({
|
|
regl,
|
|
sizeBuffer,
|
|
pointBuffer,
|
|
colorBuffer
|
|
});
|
|
}
|
|
componentWillReceiveProps(nextProps) {
|
|
this.maybeSetupScalesAndDrawAxes(nextProps);
|
|
}
|
|
componentDidUpdate(prevProps) {
|
|
if (
|
|
(this.state.xScale &&
|
|
this.state.yScale &&
|
|
(this.props.scatterplotXXaccessor &&
|
|
this.props.scatterplotYYaccessor) &&
|
|
this.props.scatterplotXXaccessor !== prevProps.scatterplotXXaccessor) || // was CLU now FTH1 etc
|
|
this.props.scatterplotYYaccessor !== prevProps.scatterplotYYaccessor
|
|
) {
|
|
this.drawAxesSVG(this.state.xScale, this.state.yScale);
|
|
}
|
|
|
|
if (
|
|
this.state.regl &&
|
|
this.state.pointBuffer &&
|
|
this.state.colorBuffer &&
|
|
this.state.sizeBuffer &&
|
|
this.props.currentCellSelection &&
|
|
this.props.expression.data &&
|
|
this.props.expression.data.genes &&
|
|
this.props.scatterplotXXaccessor &&
|
|
this.props.scatterplotYYaccessor &&
|
|
this.state.xScale &&
|
|
this.state.yScale
|
|
) {
|
|
const _currentCellSelectionMap = _.keyBy(
|
|
this.props.currentCellSelection,
|
|
"CellName"
|
|
); /* move me to the reducer */
|
|
|
|
const positions = [];
|
|
const colors = [];
|
|
const sizes = [];
|
|
|
|
const glScaleX = d3
|
|
.scaleLinear()
|
|
.domain([0, width])
|
|
.range([-0.95, 0.95]); /* padding */
|
|
|
|
const glScaleY = d3
|
|
.scaleLinear()
|
|
.domain([0, height])
|
|
.range([-1, 1]);
|
|
|
|
/*
|
|
Construct Vectors
|
|
*/
|
|
_.each(this.props.expression.data.cells, (cell, i) => {
|
|
/*
|
|
this if is necessary until we are no longer getting expression for all cells, but only for 'world'
|
|
...which will mean refetching when we regraph, or 'go back up to all cells'
|
|
*/
|
|
if (_currentCellSelectionMap[cell.cellname]) {
|
|
/* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the cell array, check in reducer */
|
|
positions.push([
|
|
glScaleX(
|
|
this.state.xScale(
|
|
cell.e[
|
|
this.props.expression.data.genes.indexOf(
|
|
this.props.scatterplotXXaccessor
|
|
)
|
|
]
|
|
)
|
|
) /* scale each point first to the window as we calculate extents separately below, so no need to repeat */,
|
|
glScaleY(
|
|
this.state.yScale(
|
|
cell.e[
|
|
this.props.expression.data.genes.indexOf(
|
|
this.props.scatterplotYYaccessor
|
|
)
|
|
]
|
|
)
|
|
)
|
|
]);
|
|
|
|
colors.push(_currentCellSelectionMap[cell.cellname]["__colorRGB__"]);
|
|
sizes.push(
|
|
_currentCellSelectionMap[cell.cellname]["__selected__"] ? 4 : 0.2
|
|
); /* make this a function of the number of total cells, including regraph */
|
|
}
|
|
});
|
|
|
|
this.state.pointBuffer(positions);
|
|
this.state.colorBuffer(colors);
|
|
this.state.sizeBuffer(sizes);
|
|
this.count = positions.length;
|
|
}
|
|
}
|
|
maybeSetupScalesAndDrawAxes(nextProps) {
|
|
if (
|
|
nextProps.expression &&
|
|
nextProps.expression.data &&
|
|
nextProps.scatterplotXXaccessor &&
|
|
nextProps.scatterplotYYaccessor
|
|
) {
|
|
const xScale = d3
|
|
.scaleLinear()
|
|
.domain(
|
|
d3.extent(nextProps.expression.data.cells, (cell, i) => {
|
|
return cell.e[
|
|
nextProps.expression.data.genes.indexOf(
|
|
nextProps.scatterplotXXaccessor
|
|
)
|
|
];
|
|
})
|
|
)
|
|
.range([0, width]);
|
|
|
|
const yScale = d3
|
|
.scaleLinear()
|
|
.domain(
|
|
d3.extent(nextProps.expression.data.cells, cell => {
|
|
return cell.e[
|
|
nextProps.expression.data.genes.indexOf(
|
|
nextProps.scatterplotYYaccessor
|
|
)
|
|
];
|
|
})
|
|
)
|
|
.range([height, 0]);
|
|
|
|
this.setState({
|
|
xScale,
|
|
yScale
|
|
});
|
|
}
|
|
}
|
|
drawAxesSVG(xScale, yScale) {
|
|
this.state.svg.selectAll("*").remove();
|
|
|
|
// the axes are much cleaner and easier now. No need to rotate and orient the axis, just call axisBottom, axisLeft etc.
|
|
var xAxis = d3.axisBottom().scale(xScale);
|
|
|
|
var yAxis = d3.axisLeft().scale(yScale);
|
|
|
|
// adding axes is also simpler now, just translate x-axis to (0,height) and it's alread defined to be a bottom axis.
|
|
this.state.svg
|
|
.append("g")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.attr("class", "x axis")
|
|
.call(xAxis);
|
|
|
|
// y-axis is translated to (0,0)
|
|
this.state.svg
|
|
.append("g")
|
|
.attr("transform", "translate(0,0)")
|
|
.attr("class", "y axis")
|
|
.call(yAxis);
|
|
|
|
// adding label. For x-axis, it's at (10, 10), and for y-axis at (width, height-10).
|
|
this.state.svg
|
|
.append("text")
|
|
.attr("x", 10)
|
|
.attr("y", 10)
|
|
.attr("class", "label")
|
|
.text(this.props.scatterplotYYaccessor);
|
|
|
|
this.state.svg
|
|
.append("text")
|
|
.attr("x", width)
|
|
.attr("y", height - 10)
|
|
.attr("text-anchor", "end")
|
|
.attr("class", "label")
|
|
.text(this.props.scatterplotXXaccessor);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: "white",
|
|
borderRadius: 3,
|
|
marginTop: 15,
|
|
paddingBottom: 20,
|
|
boxShadow: "3px 4px 13px 0px rgba(201,201,201,1)"
|
|
}}
|
|
id="scatterplot_wrapper"
|
|
>
|
|
<div
|
|
className={styles.scatterplot}
|
|
id="scatterplot"
|
|
style={{
|
|
width: width + margin.left + margin.right + "px",
|
|
height: height + margin.top + margin.bottom + "px"
|
|
}}
|
|
>
|
|
<canvas
|
|
width={width}
|
|
height={height}
|
|
style={{
|
|
marginLeft: margin.left - 7,
|
|
marginTop: margin.top
|
|
}}
|
|
ref={canvas => {
|
|
this.reglCanvas = canvas;
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Scatterplot;
|
|
|
|
// <SectionHeader text="Continuous Metadata"/>
|