Geneset remove toggle (#2184)

* no toggle, histo at top

* set mean expression, truncation

* gene set
This commit is contained in:
Colin Megill
2021-05-05 19:51:05 -04:00
committed by GitHub
parent 25b308c532
commit 096d8ff1d2
4 changed files with 20 additions and 66 deletions
@@ -11,6 +11,7 @@ const HistogramFooter = React.memo(
logFoldChange, logFoldChange,
pvalAdj, pvalAdj,
isObs, isObs,
isGeneSetSummary,
}) => { }) => {
/* /*
Footer of each histogram. Will render range, title, and optionally Footer of each histogram. Will render range, title, and optionally
@@ -44,7 +45,8 @@ const HistogramFooter = React.memo(
data-testclass="brushable-histogram-field-name" data-testclass="brushable-histogram-field-name"
style={{ fontStyle: "italic" }} style={{ fontStyle: "italic" }}
> >
{isObs ? displayName : null} {isObs && displayName}
{isGeneSetSummary && "gene set mean expression"}
</span> </span>
<div style={{ display: hideRanges ? "block" : "none" }}> <div style={{ display: hideRanges ? "block" : "none" }}>
: {rangeMin} : {rangeMin}
@@ -364,6 +364,7 @@ class HistogramBrush extends React.PureComponent {
isUserDefined, isUserDefined,
isDiffExp, isDiffExp,
logFoldChange, logFoldChange,
isGeneSetSummary,
pvalAdj, pvalAdj,
isScatterplotXXaccessor, isScatterplotXXaccessor,
isScatterplotYYaccessor, isScatterplotYYaccessor,
@@ -449,8 +450,9 @@ class HistogramBrush extends React.PureComponent {
selectionRange={continuousSelectionRange} selectionRange={continuousSelectionRange}
mini={mini} mini={mini}
/> />
{!mini ? ( {!mini && (
<HistogramFooter <HistogramFooter
isGeneSetSummary={isGeneSetSummary}
isObs={isObs} isObs={isObs}
isDiffExp={isDiffExp} isDiffExp={isDiffExp}
displayName={field} displayName={field}
@@ -462,7 +464,7 @@ class HistogramBrush extends React.PureComponent {
logFoldChange={logFoldChange} logFoldChange={logFoldChange}
pvalAdj={pvalAdj} pvalAdj={pvalAdj}
/> />
) : null} )}
</div> </div>
) : null ) : null
} }
+11 -49
View File
@@ -1,7 +1,5 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Position, Switch } from "@blueprintjs/core";
import { Tooltip2 } from "@blueprintjs/popover2";
import { FaChevronRight, FaChevronDown } from "react-icons/fa"; import { FaChevronRight, FaChevronDown } from "react-icons/fa";
import actions from "../../actions"; import actions from "../../actions";
import Gene from "./gene"; import Gene from "./gene";
@@ -27,7 +25,6 @@ class GeneSet extends React.Component {
super(props); super(props);
this.state = { this.state = {
isOpen: false, isOpen: false,
toggleSummaryHisto: false,
}; };
} }
@@ -81,11 +78,6 @@ class GeneSet extends React.Component {
// }); // });
}; };
toggleSummaryHisto = () => {
const { toggleSummaryHisto } = this.state;
this.setState({ toggleSummaryHisto: !toggleSummaryHisto });
};
renderGenes() { renderGenes() {
const { const {
setName, setName,
@@ -130,8 +122,8 @@ class GeneSet extends React.Component {
render() { render() {
const { setName, setGenes, genesetDescription } = this.props; const { setName, setGenes, genesetDescription } = this.props;
const { isOpen, toggleSummaryHisto } = this.state; const { isOpen } = this.state;
const genesetNameLengthVisible = 120; /* this magic number determines how much of a long geneset name we see */ const genesetNameLengthVisible = 150; /* this magic number determines how much of a long geneset name we see */
const genesetIsEmpty = setGenes.length === 0; const genesetIsEmpty = setGenes.length === 0;
return ( return (
@@ -184,55 +176,25 @@ class GeneSet extends React.Component {
)} )}
</span> </span>
<div> <div>
<GenesetMenus <GenesetMenus isOpen={isOpen} genesetsEditable geneset={setName} />
isOpen={isOpen}
toggleSummaryHisto={toggleSummaryHisto}
genesetsEditable
geneset={setName}
/>
</div> </div>
</div> </div>
<div style={{ marginLeft: 15, marginTop: 5, marginRight: 0 }}> <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 && ( {isOpen && genesetIsEmpty && (
<p style={{ fontStyle: "italic", color: "lightgrey" }}> <p style={{ fontStyle: "italic", color: "lightgrey" }}>
No genes to display No genes to display
</p> </p>
)} )}
</div> </div>
{isOpen && {isOpen && !genesetIsEmpty && setGenes.length > 0 && (
(!toggleSummaryHisto && !genesetIsEmpty <HistogramBrush
? this.renderGenes() isGeneSetSummary
: setGenes.length > 0 && ( field={setName}
<HistogramBrush setGenes={setGenes}
isGeneSetSummary />
field={setName} )}
setGenes={setGenes} {isOpen && !genesetIsEmpty && this.renderGenes()}
/>
))}
<EditGenesetNameDialogue <EditGenesetNameDialogue
parentGeneset={setName} parentGeneset={setName}
parentGenesetDescription={genesetDescription} parentGenesetDescription={genesetDescription}
@@ -61,20 +61,9 @@ class GenesetMenus extends React.PureComponent {
}; };
render() { render() {
const { const { geneset, genesetsEditable, createText, colorAccessor } = this.props;
geneset,
genesetsEditable,
createText,
colorAccessor,
isOpen,
toggleSummaryHisto,
} = this.props;
const isColorBy = geneset === colorAccessor; const isColorBy = geneset === colorAccessor;
const genesetClosed = !isOpen;
const showingAllGenes = !toggleSummaryHisto;
const notShowingSummary = genesetClosed || showingAllGenes;
return ( return (
<> <>
@@ -130,12 +119,11 @@ class GenesetMenus extends React.PureComponent {
/> />
</Popover> </Popover>
<Tooltip2 <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} position={Position.BOTTOM}
hoverOpenDelay={globals.tooltipHoverOpenDelay} hoverOpenDelay={globals.tooltipHoverOpenDelay}
> >
<AnchorButton <AnchorButton
disabled={notShowingSummary && !isColorBy}
active={isColorBy} active={isColorBy}
intent={isColorBy ? "primary" : "none"} intent={isColorBy ? "primary" : "none"}
style={{ marginLeft: 0 }} style={{ marginLeft: 0 }}