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

expression layout and buttons vs tabs

Browse Source
This commit is contained in:
Colin Megill
2018-05-10 02:27:35 -07:00
parent 8e110077cc
commit 372781a533
2 changed files with 92 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/expression/diffExpHeatmap.js
+74 -73
View File
@@ -100,77 +100,6 @@ class HeatmapRow extends React.Component {
}}
>
<div style={{ width: 150, flexShrink: 0 }}>
<span
onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(
this
)}
style={{
fontSize: 16,
color:
this.props.scatterplotXXaccessor === this.props.gene
? "white"
: globals.brightBlue,
cursor: "pointer",
position: "relative",
top: 1,
fontWeight: 700,
marginRight: 4,
borderRadius: 3,
padding: "2px 3px",
backgroundColor:
this.props.scatterplotXXaccessor === this.props.gene
? globals.brightBlue
: "inherit"
}}
>
X
</span>
<span
onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(
this
)}
style={{
fontSize: 16,
color:
this.props.scatterplotYYaccessor === this.props.gene
? "white"
: globals.brightBlue,
cursor: "pointer",
position: "relative",
top: 1,
fontWeight: 700,
marginRight: 4,
borderRadius: 3,
padding: "2px 3px",
backgroundColor:
this.props.scatterplotYYaccessor === this.props.gene
? globals.brightBlue
: "inherit"
}}
>
Y
</span>
<span
onClick={this.handleGeneColorScaleClick(this.props.gene).bind(this)}
style={{
fontSize: 16,
cursor: "pointer",
position: "relative",
marginRight: 6,
borderRadius: 3,
padding: "0px 2px 2px 2px",
color:
this.props.colorAccessor === this.props.gene
? "white"
: "inherit",
backgroundColor:
this.props.colorAccessor === this.props.gene
? globals.brightBlue
: "inherit"
}}
>
<FaPaintBrush style={{ display: "inline-block" }} />
</span>
<span
style={{
fontSize: 14
@@ -190,12 +119,84 @@ class HeatmapRow extends React.Component {
<span
title={this.props.aveDiff}
style={{
fontSize: 14,
paddingLeft: 10
fontSize: 12,
marginLeft: 10,
marginRight: 10,
}}
>
{this.props.aveDiff.toFixed(2)}
</span>
<span
onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(
this
)}
style={{
fontSize: 16,
color:
this.props.scatterplotXXaccessor === this.props.gene
? "white"
: globals.brightBlue,
cursor: "pointer",
position: "relative",
top: 1,
fontWeight: 700,
marginRight: 4,
borderRadius: 3,
padding: "2px 3px",
backgroundColor:
this.props.scatterplotXXaccessor === this.props.gene
? globals.brightBlue
: "inherit"
}}
>
X
</span>
<span
onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(
this
)}
style={{
fontSize: 16,
color:
this.props.scatterplotYYaccessor === this.props.gene
? "white"
: globals.brightBlue,
cursor: "pointer",
position: "relative",
top: 1,
fontWeight: 700,
marginRight: 4,
borderRadius: 3,
padding: "2px 3px",
backgroundColor:
this.props.scatterplotYYaccessor === this.props.gene
? globals.brightBlue
: "inherit"
}}
>
Y
</span>
<span
onClick={this.handleGeneColorScaleClick(this.props.gene).bind(this)}
style={{
fontSize: 16,
cursor: "pointer",
position: "relative",
marginRight: 6,
borderRadius: 3,
padding: "0px 2px 2px 2px",
color:
this.props.colorAccessor === this.props.gene
? "white"
: "inherit",
backgroundColor:
this.props.colorAccessor === this.props.gene
? globals.brightBlue
: "inherit"
}}
>
<FaPaintBrush style={{ display: "inline-block" }} />
</span>
</div>
);
}
src/components/leftsidebar.js
+18 -38
View File
@@ -36,30 +36,20 @@ class LeftSideBar extends React.Component {
<div style={{ padding: 10 }}>
<button
style={{
padding: "10px 30px",
padding: "none",
outline: 0,
fontSize: 18,
fontSize: 14,
fontWeight:
this.state.currentTab === "metadata" ? 700 : 400,
fontStyle:
this.state.currentTab === "metadata" ? "inherit" : "italic",
cursor: "pointer",
border: "none",
backgroundColor: "#FFF",
borderTop:
this.state.currentTab === "metadata"
? "4px solid " + globals.brightBlue
: "none",
borderBottom:
this.state.currentTab === "metadata"
? "none"
: "1px solid " + globals.lightGrey,
borderRight:
this.state.currentTab === "metadata"
? "1px solid " + globals.lightGrey
: "none",
borderLeft:
this.state.currentTab === "metadata"
? "1px solid " + globals.lightGrey
: "none"
borderTop: "none",
borderBottom: "none",
borderRight: "none",
borderLeft: "none",
}}
onClick={() => {
this.setState({ currentTab: "metadata" });
@@ -69,30 +59,20 @@ class LeftSideBar extends React.Component {
</button>
<button
style={{
padding: "10px 30px",
padding: "none",
outline: 0,
fontSize: 18,
fontSize: 14,
fontWeight:
this.state.currentTab === "expression" ? 700 : 400,
fontStyle:
this.state.currentTab === "expression" ? "inherit" : "italic",
cursor: "pointer",
border: "none",
backgroundColor: "#FFF",
borderTop:
this.state.currentTab === "expression"
? "4px solid " + globals.brightBlue
: "none",
borderBottom:
this.state.currentTab === "expression"
? "none"
: "1px solid " + globals.lightGrey,
borderRight:
this.state.currentTab === "expression"
? "1px solid " + globals.lightGrey
: "none",
borderLeft:
this.state.currentTab === "expression"
? "1px solid " + globals.lightGrey
: "none"
borderTop: "none",
borderBottom: "none",
borderRight: "none",
borderLeft: "none",
}}
onClick={() => {
this.setState({ currentTab: "expression" });
@@ -103,8 +83,8 @@ class LeftSideBar extends React.Component {
</div>
<div
style={{
height: 500,
width: 350,
height: 350,
width: 400,
padding: 10,
overflowY: "auto",
overflowX: "hidden"