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

black borders --> blue boxes

Browse Source
This commit is contained in:
Colin Megill
2018-03-16 15:38:04 -07:00
parent f6af56e7d2
commit 133d295556
1 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/expression/diffExpHeatmap.js
+31 -13
View File
@@ -28,6 +28,7 @@ class HeatmapSquare extends React.Component {
textAlign: "center", textAlign: "center",
color: contrastColor, color: contrastColor,
width: 40, width: 40,
flexShrink: 0,
fontSize: 12, fontSize: 12,
margin: 0, margin: 0,
backgroundColor: this.props.backgroundColor, backgroundColor: this.props.backgroundColor,
@@ -91,30 +92,34 @@ class HeatmapRow extends React.Component {
justifyContent: "flex-start", justifyContent: "flex-start",
alignItems: "baseline", alignItems: "baseline",
}}> }}>
<div style={{width: 200}}> <div style={{width: 150, flexShrink: 0}}>
<span <span
onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(this)} onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(this)}
style={{ style={{
fontSize: 16, fontSize: 16,
color: "#0074D9", // http://clrs.cc/ color: this.props.scatterplotXXaccessor === this.props.gene ? "white" : globals.brightBlue,
cursor: "pointer", cursor: "pointer",
position: "relative", position: "relative",
top: 1, top: 1,
fontWeight: 700, fontWeight: 700,
marginRight: 6, marginRight: 4,
border: this.props.scatterplotXXaccessor === this.props.gene ? "1px solid black" : "none", borderRadius: 3,
padding: "2px 3px",
backgroundColor: this.props.scatterplotXXaccessor === this.props.gene ? globals.brightBlue : "inherit",
}}>X</span> }}>X</span>
<span <span
onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(this)} onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(this)}
style={{ style={{
fontSize: 16, fontSize: 16,
color: "#0074D9", // http://clrs.cc/ color: this.props.scatterplotYYaccessor === this.props.gene ? "white" : globals.brightBlue,
cursor: "pointer", cursor: "pointer",
position: "relative", position: "relative",
top: 1, top: 1,
fontWeight: 700, fontWeight: 700,
marginRight: 6, marginRight: 4,
border: this.props.scatterplotYYaccessor === this.props.gene ? "1px solid black" : "none", borderRadius: 3,
padding: "2px 3px",
backgroundColor: this.props.scatterplotYYaccessor === this.props.gene ? globals.brightBlue : "inherit",
}}>Y</span> }}>Y</span>
<span <span
onClick={this.handleGeneColorScaleClick(this.props.gene).bind(this)} onClick={this.handleGeneColorScaleClick(this.props.gene).bind(this)}
@@ -124,7 +129,9 @@ class HeatmapRow extends React.Component {
position: "relative", position: "relative",
top: 2, top: 2,
marginRight: 6, marginRight: 6,
border: this.props.colorAccessor === this.props.gene ? "1px solid black" : "none", borderRadius: 3,
padding: "2px 3px",
backgroundColor: this.props.colorAccessor === this.props.gene ? globals.brightBlue : "inherit",
}}>🖌️</span> }}>🖌️</span>
<span <span
style={{ style={{
@@ -139,6 +146,14 @@ class HeatmapRow extends React.Component {
<HeatmapSquare <HeatmapSquare
backgroundColor={this.props.greyColorScale(this.props.set2exp)} backgroundColor={this.props.greyColorScale(this.props.set2exp)}
text={this.props.set2exp}/> text={this.props.set2exp}/>
<span
title={this.props.aveDiff}
style={{
fontSize: 14,
paddingLeft: 10
}}>
{this.props.aveDiff.toFixed(2)}
</span>
</div> </div>
) )
} }
@@ -208,13 +223,14 @@ class Heatmap extends React.Component {
/> />
<div style={{ <div style={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "flex-start",
width: 165, width: 400,
fontWeight: 700, fontWeight: 700,
}}> }}>
<p style={{width: 100}}>Gene</p> <p style={{marginRight: 110}}>Gene</p>
<p>1</p> <p style={{marginRight: 25}}>1</p>
<p>2</p> <p style={{marginRight: 20}}>2</p>
<p>ave diff</p>
</div> </div>
{ {
topGenesForCellSet1.topgenes.map((gene, i) => { topGenesForCellSet1.topgenes.map((gene, i) => {
@@ -222,6 +238,7 @@ class Heatmap extends React.Component {
key={gene} key={gene}
gene={gene} gene={gene}
greyColorScale={greyColorScale} greyColorScale={greyColorScale}
aveDiff={topGenesForCellSet1.ave_diff[i]}
set1exp={Math.floor(topGenesForCellSet1.mean_expression_cellset1[i])} set1exp={Math.floor(topGenesForCellSet1.mean_expression_cellset1[i])}
set2exp={Math.floor(topGenesForCellSet1.mean_expression_cellset2[i])} set2exp={Math.floor(topGenesForCellSet1.mean_expression_cellset2[i])}
/> />
@@ -233,6 +250,7 @@ class Heatmap extends React.Component {
key={gene} key={gene}
gene={gene} gene={gene}
greyColorScale={greyColorScale} greyColorScale={greyColorScale}
aveDiff={topGenesForCellSet2.ave_diff[i]}
set1exp={Math.floor(topGenesForCellSet2.mean_expression_cellset1[i])} set1exp={Math.floor(topGenesForCellSet2.mean_expression_cellset1[i])}
set2exp={Math.floor(topGenesForCellSet2.mean_expression_cellset2[i])} set2exp={Math.floor(topGenesForCellSet2.mean_expression_cellset2[i])}
/> />