mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-24 07:48:12 +08:00
Geneset remove toggle (#2184)
* no toggle, histo at top * set mean expression, truncation * gene set
This commit is contained in:
@@ -11,6 +11,7 @@ const HistogramFooter = React.memo(
|
||||
logFoldChange,
|
||||
pvalAdj,
|
||||
isObs,
|
||||
isGeneSetSummary,
|
||||
}) => {
|
||||
/*
|
||||
Footer of each histogram. Will render range, title, and optionally
|
||||
@@ -44,7 +45,8 @@ const HistogramFooter = React.memo(
|
||||
data-testclass="brushable-histogram-field-name"
|
||||
style={{ fontStyle: "italic" }}
|
||||
>
|
||||
{isObs ? displayName : null}
|
||||
{isObs && displayName}
|
||||
{isGeneSetSummary && "gene set mean expression"}
|
||||
</span>
|
||||
<div style={{ display: hideRanges ? "block" : "none" }}>
|
||||
: {rangeMin}
|
||||
|
||||
@@ -364,6 +364,7 @@ class HistogramBrush extends React.PureComponent {
|
||||
isUserDefined,
|
||||
isDiffExp,
|
||||
logFoldChange,
|
||||
isGeneSetSummary,
|
||||
pvalAdj,
|
||||
isScatterplotXXaccessor,
|
||||
isScatterplotYYaccessor,
|
||||
@@ -449,8 +450,9 @@ class HistogramBrush extends React.PureComponent {
|
||||
selectionRange={continuousSelectionRange}
|
||||
mini={mini}
|
||||
/>
|
||||
{!mini ? (
|
||||
{!mini && (
|
||||
<HistogramFooter
|
||||
isGeneSetSummary={isGeneSetSummary}
|
||||
isObs={isObs}
|
||||
isDiffExp={isDiffExp}
|
||||
displayName={field}
|
||||
@@ -462,7 +464,7 @@ class HistogramBrush extends React.PureComponent {
|
||||
logFoldChange={logFoldChange}
|
||||
pvalAdj={pvalAdj}
|
||||
/>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { Position, Switch } from "@blueprintjs/core";
|
||||
import { Tooltip2 } from "@blueprintjs/popover2";
|
||||
import { FaChevronRight, FaChevronDown } from "react-icons/fa";
|
||||
import actions from "../../actions";
|
||||
import Gene from "./gene";
|
||||
@@ -27,7 +25,6 @@ class GeneSet extends React.Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
toggleSummaryHisto: false,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -81,11 +78,6 @@ class GeneSet extends React.Component {
|
||||
// });
|
||||
};
|
||||
|
||||
toggleSummaryHisto = () => {
|
||||
const { toggleSummaryHisto } = this.state;
|
||||
this.setState({ toggleSummaryHisto: !toggleSummaryHisto });
|
||||
};
|
||||
|
||||
renderGenes() {
|
||||
const {
|
||||
setName,
|
||||
@@ -130,8 +122,8 @@ class GeneSet extends React.Component {
|
||||
|
||||
render() {
|
||||
const { setName, setGenes, genesetDescription } = this.props;
|
||||
const { isOpen, toggleSummaryHisto } = this.state;
|
||||
const genesetNameLengthVisible = 120; /* this magic number determines how much of a long geneset name we see */
|
||||
const { isOpen } = this.state;
|
||||
const genesetNameLengthVisible = 150; /* this magic number determines how much of a long geneset name we see */
|
||||
const genesetIsEmpty = setGenes.length === 0;
|
||||
|
||||
return (
|
||||
@@ -184,55 +176,25 @@ class GeneSet extends React.Component {
|
||||
)}
|
||||
</span>
|
||||
<div>
|
||||
<GenesetMenus
|
||||
isOpen={isOpen}
|
||||
toggleSummaryHisto={toggleSummaryHisto}
|
||||
genesetsEditable
|
||||
geneset={setName}
|
||||
/>
|
||||
<GenesetMenus isOpen={isOpen} genesetsEditable geneset={setName} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginLeft: 15, marginTop: 5, marginRight: 0 }}>
|
||||
{isOpen && !genesetIsEmpty && (
|
||||
<Tooltip2
|
||||
content="Aggregate all genes in this geneset, and allow coloring by and selecting on the entire set."
|
||||
position={Position.BOTTOM_RIGHT}
|
||||
usePortal
|
||||
hoverOpenDelay={globals.tooltipHoverOpenDelay}
|
||||
modifiers={{
|
||||
preventOverflow: { enabled: false },
|
||||
hide: { enabled: false },
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
style={{ fontStyle: "italic" }}
|
||||
checked={toggleSummaryHisto}
|
||||
label="Show mean expression across entire set"
|
||||
alignIndicator="left"
|
||||
innerLabel="off"
|
||||
innerLabelChecked="on"
|
||||
onChange={this.toggleSummaryHisto}
|
||||
/>
|
||||
</Tooltip2>
|
||||
)}
|
||||
|
||||
{isOpen && genesetIsEmpty && (
|
||||
<p style={{ fontStyle: "italic", color: "lightgrey" }}>
|
||||
No genes to display
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isOpen &&
|
||||
(!toggleSummaryHisto && !genesetIsEmpty
|
||||
? this.renderGenes()
|
||||
: setGenes.length > 0 && (
|
||||
<HistogramBrush
|
||||
isGeneSetSummary
|
||||
field={setName}
|
||||
setGenes={setGenes}
|
||||
/>
|
||||
))}
|
||||
{isOpen && !genesetIsEmpty && setGenes.length > 0 && (
|
||||
<HistogramBrush
|
||||
isGeneSetSummary
|
||||
field={setName}
|
||||
setGenes={setGenes}
|
||||
/>
|
||||
)}
|
||||
{isOpen && !genesetIsEmpty && this.renderGenes()}
|
||||
<EditGenesetNameDialogue
|
||||
parentGeneset={setName}
|
||||
parentGenesetDescription={genesetDescription}
|
||||
|
||||
@@ -61,20 +61,9 @@ class GenesetMenus extends React.PureComponent {
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
geneset,
|
||||
genesetsEditable,
|
||||
createText,
|
||||
colorAccessor,
|
||||
isOpen,
|
||||
toggleSummaryHisto,
|
||||
} = this.props;
|
||||
const { geneset, genesetsEditable, createText, colorAccessor } = this.props;
|
||||
|
||||
const isColorBy = geneset === colorAccessor;
|
||||
const genesetClosed = !isOpen;
|
||||
const showingAllGenes = !toggleSummaryHisto;
|
||||
|
||||
const notShowingSummary = genesetClosed || showingAllGenes;
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -130,12 +119,11 @@ class GenesetMenus extends React.PureComponent {
|
||||
/>
|
||||
</Popover>
|
||||
<Tooltip2
|
||||
content={`Color by gene set ${geneset} mean (gene set must be open, and toggled to mean expression histogram)`}
|
||||
content={`Color by gene set ${geneset} mean`}
|
||||
position={Position.BOTTOM}
|
||||
hoverOpenDelay={globals.tooltipHoverOpenDelay}
|
||||
>
|
||||
<AnchorButton
|
||||
disabled={notShowingSummary && !isColorBy}
|
||||
active={isColorBy}
|
||||
intent={isColorBy ? "primary" : "none"}
|
||||
style={{ marginLeft: 0 }}
|
||||
|
||||
Reference in New Issue
Block a user