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,
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
}
+11 -49
View File
@@ -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 }}