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

Remove heatmap, add diffexp info to histograms (#339)

Browse Source 
* Create Release_Validation_Recipe.md

* compose middle ware for redux devtools

* update package.json and lock

* remove heatmap, add to left side bar

* redux devtools extension
This commit is contained in:
Colin Megill
2018-10-16 16:29:20 -07:00
committed by GitHub
parent 76ec29734a
commit 952578680a
11 changed files with 266 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/brushableHistogram/index.js
+112 -1
View File
@@ -16,7 +16,10 @@ import actions from "../../actions";
@connect(state => ({
world: state.controls.world,
scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
crossfilter: state.controls.crossfilter,
differential: state.differential,
initializeRanges: _.get(state.controls.world, "summary.obs"),
colorAccessor: state.controls.colorAccessor,
colorScale: state.controls.colorScale,
@@ -208,8 +211,38 @@ class HistogramBrush extends React.Component {
}
}
handleSetGeneAsScatterplotX() {
return () => {
const { dispatch, field } = this.props;
dispatch({
type: "set scatterplot x",
data: field
});
};
}
handleSetGeneAsScatterplotY() {
return () => {
const { dispatch, field } = this.props;
dispatch({
type: "set scatterplot y",
data: field
});
};
}
render() {
const { field, ranges, colorAccessor, isUserDefined } = this.props;
const {
field,
colorAccessor,
isUserDefined,
isDiffExp,
diffExp_avgDiff,
diffExp_set1AvgExp,
diffExp_set2AvgExp,
scatterplotXXaccessor,
scatterplotYYaccessor
} = this.props;
return (
<div
@@ -234,6 +267,84 @@ class HistogramBrush extends React.Component {
remove
</span>
) : null}
{isDiffExp ? (
<span>
<span
style={{
fontSize: globals.tiniestFontSize,
marginLeft: 7
}}
>
<strong>1:</strong>
{` ${diffExp_set1AvgExp.toPrecision(2)}`}
</span>
<span
style={{
fontSize: globals.tiniestFontSize,
marginLeft: 7,
backgroundColor: globals.lighterGrey,
padding: 2
}}
>
<strong>2:</strong>
{` ${diffExp_set2AvgExp.toPrecision(2)}`}
</span>
<span
style={{
fontSize: globals.tiniestFontSize,
marginLeft: 7
}}
>
{`Av. Diff: ${diffExp_avgDiff.toFixed(2)}`}
</span>
<span
onClick={this.handleSetGeneAsScatterplotX(field).bind(this)}
style={{
fontSize: 16,
color:
scatterplotXXaccessor === field
? "white"
: globals.brightBlue,
cursor: "pointer",
position: "relative",
top: 1,
fontWeight: 700,
marginRight: 4,
borderRadius: 3,
padding: "2px 3px",
backgroundColor:
scatterplotXXaccessor === field
? globals.brightBlue
: "inherit"
}}
>
X
</span>
<span
onClick={this.handleSetGeneAsScatterplotY(field).bind(this)}
style={{
fontSize: 16,
color:
scatterplotYYaccessor === field
? "white"
: globals.brightBlue,
cursor: "pointer",
position: "relative",
top: 1,
fontWeight: 700,
marginRight: 4,
borderRadius: 3,
padding: "2px 3px",
backgroundColor:
scatterplotYYaccessor === field
? globals.brightBlue
: "inherit"
}}
>
Y
</span>
</span>
) : null}
</div>
<svg
width={this.width}
client/src/components/categorical/categorical.js
+4 -5
View File
@@ -3,9 +3,7 @@ import React from "react";
import _ from "lodash";
import { connect } from "react-redux";
import { FaChevronRight } from "react-icons/fa";
import { FaChevronDown } from "react-icons/fa";
import { FaPaintBrush } from "react-icons/fa";
import { FaChevronRight, FaChevronDown, FaPaintBrush } from "react-icons/fa";
import * as globals from "../../globals";
import Value from "./value";
@@ -126,7 +124,7 @@ class Category extends React.Component {
cursor: "pointer",
display: "inline-block",
position: "relative",
top: -1
top: 2
}}
onClick={() => {
this.setState({ isExpanded: !isExpanded });
@@ -155,7 +153,7 @@ class Category extends React.Component {
// backgroundColor: this.props.colorAccessor === this.props.metadataField ? globals.brightBlue : "inherit",
display: "inline-block",
position: "relative",
top: -1,
top: 2,
cursor: "pointer"
}}
>
@@ -196,6 +194,7 @@ class Categories extends React.Component {
// overflow: "auto",
}}
>
<p> Categorical Metadata </p>
{_.map(ranges, (value, key) => {
const isColorField = key.includes("color") || key.includes("Color");
if (value.options && !isColorField && key !== "name") {
client/src/components/continuous/continuous.js
-2
View File
@@ -37,8 +37,6 @@ class Continuous extends React.Component {
};
}
componentDidUpdate() {}
render() {
const { ranges, obsAnnotations, schema } = this.props;
if (schema && !this.continuousChecked) {
client/src/components/expression/diffExpHeatmap.js
+1 -1
View File
@@ -3,7 +3,7 @@ import React from "react";
import _ from "lodash";
import memoize from "memoize-one";
import { connect } from "react-redux";
import ReactAutocomplete from "react-autocomplete"; /* http://emilebres.github.io/react-virtualized-checkbox/ */
// import ReactAutocomplete from "react-autocomplete"; /* http://emilebres.github.io/react-virtualized-checkbox/ */
import getContrast from "font-color-contrast"; // https://www.npmjs.com/package/font-color-contrast
import { FaPaintBrush } from "react-icons/fa";
import * as d3 from "d3";
client/src/components/geneExpression/index.js
+5
View File
@@ -93,6 +93,8 @@ class GeneExpression extends React.Component {
style={{
display: "inline-block",
marginLeft: 7,
position: "relative",
top: 5,
color: globals.brightBlue,
fontSize: 22
}}
@@ -135,6 +137,9 @@ class GeneExpression extends React.Component {
field={name}
ranges={d3.extent(values)}
isDiffExp
diffExp_avgDiff={value[1]}
diffExp_set1AvgExp={value[4]}
diffExp_set2AvgExp={value[5]}
/>
);
}
client/src/components/graph/graph.js
+6 -2
View File
@@ -393,7 +393,9 @@ class Graph extends React.Component {
border:
mode === "brush" ? "1px solid black" : "1px solid white",
backgroundColor: "white",
padding: 5,
padding: "5px 5px 2px 5px",
position: "relative",
top: 2,
marginRight: 10,
borderRadius: 3
}}
@@ -413,7 +415,9 @@ class Graph extends React.Component {
border:
mode === "zoom" ? "1px solid black" : "1px solid white",
backgroundColor: "white",
padding: 5,
padding: "5px 5px 2px 5px",
position: "relative",
top: 2,
marginRight: 10,
borderRadius: 3
}}
client/src/components/leftsidebar.js
+24 -58
View File
@@ -12,7 +12,9 @@ import DynamicScatterplot from "./scatterplot/scatterplot";
@connect(state => ({
responsive: state.responsive,
datasetTitle: _.get(state.config, "displayNames.dataset")
datasetTitle: _.get(state.config, "displayNames.dataset"),
scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
scatterplotYYaccessor: state.controls.scatterplotYYaccessor
}))
class LeftSideBar extends React.Component {
constructor(props) {
@@ -24,86 +26,48 @@ class LeftSideBar extends React.Component {
render() {
const { currentTab } = this.state;
const { responsive, datasetTitle } = this.props;
const {
responsive,
datasetTitle,
scatterplotXXaccessor,
scatterplotYYaccessor
} = this.props;
/*
this magic number should be made less fragile,
if cellxgene logo or tabs change, this must as well
*/
const metadataSectionPadding = currentTab === "metadata" ? 88 : 450;
const metadataSectionPadding =
scatterplotXXaccessor && scatterplotYYaccessor ? 450 : 0;
return (
<div style={{ position: "fixed" }}>
<p
style={{
margin: 10,
position: "fixed",
left: responsive.width / 2,
top: 14,
margin: 0,
fontSize: 24,
color: globals.lightGrey,
color: globals.darkerGrey,
fontWeight: 700,
width: "100%"
}}
>
cellxgene &nbsp;
cellxgene: &nbsp;
{datasetTitle}
</p>
<div style={{ padding: 10 }}>
<button
type="button"
style={{
padding: "none",
outline: 0,
fontSize: 14,
fontWeight: currentTab === "metadata" ? 700 : 400,
fontStyle: currentTab === "metadata" ? "inherit" : "italic",
cursor: "pointer",
border: "none",
backgroundColor: "#FFF",
borderTop: "none",
borderBottom: "none",
borderRight: "none",
borderLeft: "none"
}}
onClick={() => {
this.setState({ currentTab: "metadata" });
}}
>
Metadata
</button>
<button
type="button"
style={{
padding: "none",
outline: 0,
fontSize: 14,
fontWeight: currentTab === "expression" ? 700 : 400,
fontStyle: currentTab === "expression" ? "inherit" : "italic",
cursor: "pointer",
border: "none",
backgroundColor: "#FFF",
borderTop: "none",
borderBottom: "none",
borderRight: "none",
borderLeft: "none"
}}
onClick={() => {
this.setState({ currentTab: "expression" });
}}
>
Expression
</button>
</div>
<div
style={{
height: responsive.height - metadataSectionPadding,
width: 400,
padding: 10,
padding: "0px 10px 10px 10px",
overflowY: "auto",
overflowX: "hidden"
}}
>
{currentTab === "metadata" ? <Categorical /> : null}
{currentTab === "metadata" ? <GeneExpression /> : null}
{currentTab === "metadata" ? <Continuous /> : null}
{currentTab === "expression" ? <Heatmap /> : null}
<Categorical />
<GeneExpression />
<Continuous />
</div>
<div
style={{
@@ -112,7 +76,9 @@ class LeftSideBar extends React.Component {
left: 0
}}
>
{currentTab === "expression" ? <DynamicScatterplot /> : null}
{scatterplotXXaccessor && scatterplotYYaccessor ? (
<DynamicScatterplot />
) : null}
</div>
<div style={{ position: "fixed", bottom: 0, right: 0 }}>
{currentTab === "metadata" ? <ExpressionButtons /> : null}