This commit is contained in:
bkmartinjr
2018-05-05 13:15:10 -07:00
parent d91d42f2c4
commit 90c7daf571
62 changed files with 2398 additions and 1912 deletions
+73 -36
View File
@@ -1,3 +1,4 @@
// jshint esversion: 6
import React from "react";
import _ from "lodash";
import Categorical from "./categorical/categorical";
@@ -7,10 +8,8 @@ import { connect } from "react-redux";
import Heatmap from "./expression/diffExpHeatmap";
import * as globals from "../globals";
@connect((state) => {
return {
}
@connect(state => {
return {};
})
class LeftSideBar extends React.Component {
constructor(props) {
@@ -21,24 +20,42 @@ class LeftSideBar extends React.Component {
}
render() {
return (
<div style={{position: "fixed"}}>
<p style={{margin: 10, fontSize: 16, fontWeight: 700, width: "100%"}}>CELLxGENE {globals.datasetTitle} </p>
<div style={{padding: 10}}>
<div style={{ position: "fixed" }}>
<p style={{ margin: 10, fontSize: 16, fontWeight: 700, width: "100%" }}>
CELLxGENE {globals.datasetTitle}{" "}
</p>
<div style={{ padding: 10 }}>
<button
style={{
padding: "10px 30px",
outline: 0,
fontSize: 18,
fontStyle: this.state.currentTab === "metadata" ? "inherit" : "italic",
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:
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"
}}
onClick={() => {this.setState({currentTab: "metadata"})}}>
onClick={() => {
this.setState({ currentTab: "metadata" });
}}
>
Metadata
</button>
<button
@@ -46,39 +63,59 @@ class LeftSideBar extends React.Component {
padding: "10px 30px",
outline: 0,
fontSize: 18,
fontStyle: this.state.currentTab === "expression" ? "inherit" : "italic",
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:
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"
}}
onClick={() => {this.setState({currentTab: "expression"})}}>
onClick={() => {
this.setState({ currentTab: "expression" });
}}
>
Expression
</button>
</div>
<div style={{
height: 500,
width: 350,
padding: 10,
overflowY: "scroll",
overflowX: "hidden",
}}>
{this.state.currentTab === "metadata" ? <Categorical/> : null}
{this.state.currentTab === "metadata" ? <Continuous/> : null}
{this.state.currentTab === "expression" ? <Heatmap/> : null}
<div
style={{
height: 500,
width: 350,
padding: 10,
overflowY: "scroll",
overflowX: "hidden"
}}
>
{this.state.currentTab === "metadata" ? <Categorical /> : null}
{this.state.currentTab === "metadata" ? <Continuous /> : null}
{this.state.currentTab === "expression" ? <Heatmap /> : null}
</div>
<div style={{
boxShadow: "-3px -4px 13px 0px rgba(201,201,201,1)",
paddingTop: 10
}}>
<ExpressionButtons/>
<div
style={{
boxShadow: "-3px -4px 13px 0px rgba(201,201,201,1)",
paddingTop: 10
}}
>
<ExpressionButtons />
</div>
</div>
)
);
}
};
}
export default LeftSideBar;