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

delint

Browse Source
This commit is contained in:
bkmartinjr
2018-09-19 10:30:14 -04:00
committed by Colin Megill
parent f8b00af011
commit b2c42b6379
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/leftsidebar.js
+27 -25
View File
@@ -1,19 +1,16 @@
// jshint esversion: 6 // jshint esversion: 6
import React from "react"; import React from "react";
import _ from "lodash"; import { connect } from "react-redux";
import Categorical from "./categorical/categorical"; import Categorical from "./categorical/categorical";
import Continuous from "./continuous/continuous"; import Continuous from "./continuous/continuous";
import ExpressionButtons from "./expression/expressionButtons"; import ExpressionButtons from "./expression/expressionButtons";
import { connect } from "react-redux";
import Heatmap from "./expression/diffExpHeatmap"; import Heatmap from "./expression/diffExpHeatmap";
import * as globals from "../globals"; import * as globals from "../globals";
import DynamicScatterplot from "./scatterplot/scatterplot"; import DynamicScatterplot from "./scatterplot/scatterplot";
@connect(state => { @connect(state => ({
return { responsive: state.responsive
responsive: state.responsive }))
};
})
class LeftSideBar extends React.Component { class LeftSideBar extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -21,10 +18,16 @@ class LeftSideBar extends React.Component {
currentTab: "metadata" currentTab: "metadata"
}; };
} }
render() { render() {
/* this magic number should be made less fragile, if cellxgene logo or tabs change, this must as well */ const { currentTab } = this.state;
const metadataSectionPadding = const { responsive } = this.props;
this.state.currentTab === "metadata" ? 88 : 450;
/*
this magic number should be made less fragile,
if cellxgene logo or tabs change, this must as well
*/
const metadataSectionPadding = currentTab === "metadata" ? 88 : 450;
return ( return (
<div style={{ position: "fixed" }}> <div style={{ position: "fixed" }}>
<p <p
@@ -36,17 +39,18 @@ class LeftSideBar extends React.Component {
width: "100%" width: "100%"
}} }}
> >
cellxgene {globals.datasetTitle}{" "} cellxgene
{globals.datasetTitle}{" "}
</p> </p>
<div style={{ padding: 10 }}> <div style={{ padding: 10 }}>
<button <button
type="button"
style={{ style={{
padding: "none", padding: "none",
outline: 0, outline: 0,
fontSize: 14, fontSize: 14,
fontWeight: this.state.currentTab === "metadata" ? 700 : 400, fontWeight: currentTab === "metadata" ? 700 : 400,
fontStyle: fontStyle: currentTab === "metadata" ? "inherit" : "italic",
this.state.currentTab === "metadata" ? "inherit" : "italic",
cursor: "pointer", cursor: "pointer",
border: "none", border: "none",
backgroundColor: "#FFF", backgroundColor: "#FFF",
@@ -62,13 +66,13 @@ class LeftSideBar extends React.Component {
Metadata Metadata
</button> </button>
<button <button
type="button"
style={{ style={{
padding: "none", padding: "none",
outline: 0, outline: 0,
fontSize: 14, fontSize: 14,
fontWeight: this.state.currentTab === "expression" ? 700 : 400, fontWeight: currentTab === "expression" ? 700 : 400,
fontStyle: fontStyle: currentTab === "expression" ? "inherit" : "italic",
this.state.currentTab === "expression" ? "inherit" : "italic",
cursor: "pointer", cursor: "pointer",
border: "none", border: "none",
backgroundColor: "#FFF", backgroundColor: "#FFF",
@@ -86,16 +90,16 @@ class LeftSideBar extends React.Component {
</div> </div>
<div <div
style={{ style={{
height: this.props.responsive.height - metadataSectionPadding, height: responsive.height - metadataSectionPadding,
width: 400, width: 400,
padding: 10, padding: 10,
overflowY: "auto", overflowY: "auto",
overflowX: "hidden" overflowX: "hidden"
}} }}
> >
{this.state.currentTab === "metadata" ? <Categorical /> : null} {currentTab === "metadata" ? <Categorical /> : null}
{this.state.currentTab === "metadata" ? <Continuous /> : null} {currentTab === "metadata" ? <Continuous /> : null}
{this.state.currentTab === "expression" ? <Heatmap /> : null} {currentTab === "expression" ? <Heatmap /> : null}
</div> </div>
<div <div
style={{ style={{
@@ -104,12 +108,10 @@ class LeftSideBar extends React.Component {
left: 0 left: 0
}} }}
> >
{this.state.currentTab === "expression" ? ( {currentTab === "expression" ? <DynamicScatterplot /> : null}
<DynamicScatterplot />
) : null}
</div> </div>
<div style={{ position: "fixed", bottom: 0, right: 0 }}> <div style={{ position: "fixed", bottom: 0, right: 0 }}>
{this.state.currentTab === "metadata" ? <ExpressionButtons /> : null} {currentTab === "metadata" ? <ExpressionButtons /> : null}
</div> </div>
</div> </div>
); );