mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-29 08:48:11 +08:00
prepopulate geneset with genes from modal
This commit is contained in:
@@ -18,6 +18,8 @@ class AnnoDialog extends React.PureComponent {
|
||||
validationError,
|
||||
annoSelect,
|
||||
annoInput,
|
||||
secondaryInstructions,
|
||||
secondaryInput,
|
||||
handleCancel,
|
||||
handleSubmit,
|
||||
primaryButtonText,
|
||||
@@ -46,6 +48,10 @@ class AnnoDialog extends React.PureComponent {
|
||||
>
|
||||
{errorMessage}
|
||||
</p>
|
||||
<p style={{ marginTop: secondaryInstructions ? 20 : 0 }}>
|
||||
{secondaryInstructions || null}
|
||||
</p>
|
||||
{secondaryInput || null}
|
||||
</div>
|
||||
{annoSelect || null}
|
||||
</div>
|
||||
|
||||
@@ -74,6 +74,7 @@ class Gene extends React.Component {
|
||||
isColorAccessor,
|
||||
isScatterplotXXaccessor,
|
||||
isScatterplotYYaccessor,
|
||||
isDiffexp,
|
||||
} = this.props;
|
||||
const { geneIsExpanded } = this.state;
|
||||
return (
|
||||
@@ -127,15 +128,17 @@ class Gene extends React.Component {
|
||||
) : null}
|
||||
</span>
|
||||
<span>
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
data-testid={`delete-from-geneset-${gene}`}
|
||||
onClick={this.handleDeleteGeneFromSet}
|
||||
intent="danger"
|
||||
style={{ fontWeight: 700, marginRight: 2 }}
|
||||
icon={<Icon icon="trash" iconSize={10} />}
|
||||
/>
|
||||
{!isDiffexp ? (
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
data-testid={`delete-from-geneset-${gene}`}
|
||||
onClick={this.handleDeleteGeneFromSet}
|
||||
intent="danger"
|
||||
style={{ fontWeight: 700, marginRight: 2 }}
|
||||
icon={<Icon icon="trash" iconSize={10} />}
|
||||
/>
|
||||
) : null}
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
|
||||
@@ -102,7 +102,7 @@ class GeneSet extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { setName, setGenes } = this.props;
|
||||
const { setName, setGenes, isDiffexp } = this.props;
|
||||
const { isOpen, toggleSummaryHisto } = this.state;
|
||||
return (
|
||||
<div style={{ marginBottom: 3 }}>
|
||||
@@ -181,7 +181,14 @@ class GeneSet extends React.Component {
|
||||
|
||||
{isOpen && !toggleSummaryHisto
|
||||
? _.map(setGenes, (gene) => {
|
||||
return <Gene key={gene} gene={gene} geneset={setName} />;
|
||||
return (
|
||||
<Gene
|
||||
key={gene}
|
||||
gene={gene}
|
||||
geneset={setName}
|
||||
isDiffexp={isDiffexp}
|
||||
/>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</div>
|
||||
|
||||
@@ -39,6 +39,7 @@ class GeneExpression extends React.Component {
|
||||
<GeneSet
|
||||
key="Temp DiffExp Set"
|
||||
setGenes={setGenes}
|
||||
isDiffexp
|
||||
setName="Temp DiffExp Set"
|
||||
/>
|
||||
) : null;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import _ from "lodash";
|
||||
import { connect } from "react-redux";
|
||||
import AnnoDialog from "../../categorical/annoDialog";
|
||||
import LabelInput from "../../categorical/labelInput";
|
||||
@@ -27,7 +28,7 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
|
||||
dispatch({
|
||||
type: "geneset: add genes",
|
||||
name: geneset,
|
||||
genes: genesToAdd.split(","),
|
||||
genes: _.pull(_.uniq(genesToAdd.split(/[ ,]+/)), ""),
|
||||
});
|
||||
dispatch({
|
||||
type: "geneset: disable add new genes mode",
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import _ from "lodash";
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import AnnoDialog from "../../categorical/annoDialog";
|
||||
@@ -24,6 +25,7 @@ class CreateGenesetDialogue extends React.PureComponent {
|
||||
const { dispatch } = this.props;
|
||||
this.setState({
|
||||
genesetName: "",
|
||||
genesToPopulateGeneset: "",
|
||||
});
|
||||
dispatch({
|
||||
type: "geneset: disable create geneset mode",
|
||||
@@ -33,9 +35,13 @@ class CreateGenesetDialogue extends React.PureComponent {
|
||||
|
||||
createGeneset = (e) => {
|
||||
const { dispatch } = this.props;
|
||||
const { genesetName } = this.state;
|
||||
const { genesetName, genesToPopulateGeneset } = this.state;
|
||||
|
||||
dispatch({ type: "geneset: create", name: genesetName });
|
||||
dispatch({
|
||||
type: "geneset: create",
|
||||
name: genesetName,
|
||||
genes: _.pull(_.uniq(genesToPopulateGeneset.split(/[ ,]+/)), "") || null,
|
||||
});
|
||||
dispatch({
|
||||
type: "geneset: disable create geneset mode",
|
||||
});
|
||||
@@ -51,6 +57,10 @@ class CreateGenesetDialogue extends React.PureComponent {
|
||||
this.setState({ genesetName: e });
|
||||
};
|
||||
|
||||
handleGenesetInputChange = (e) => {
|
||||
this.setState({ genesToPopulateGeneset: e });
|
||||
};
|
||||
|
||||
instruction = () => {
|
||||
return "New, unique geneset";
|
||||
/* todo genesets */
|
||||
@@ -80,7 +90,7 @@ class CreateGenesetDialogue extends React.PureComponent {
|
||||
<LabelInput
|
||||
onChange={this.handleChange}
|
||||
inputProps={{
|
||||
"data-testid": "add-genes",
|
||||
"data-testid": "create-geneset-modal",
|
||||
leftIcon: "manually-entered-data",
|
||||
intent: "none",
|
||||
autoFocus: true,
|
||||
@@ -88,6 +98,18 @@ class CreateGenesetDialogue extends React.PureComponent {
|
||||
newLabelMessage="New geneset"
|
||||
/>
|
||||
}
|
||||
secondaryInstructions="Optionally add a list of comma separated genes to populate the geneset"
|
||||
secondaryInput={
|
||||
<LabelInput
|
||||
onChange={this.handleGenesetInputChange}
|
||||
inputProps={{
|
||||
"data-testid": "add-genes",
|
||||
intent: "none",
|
||||
autoFocus: false,
|
||||
}}
|
||||
newLabelMessage="populate geneset with genes"
|
||||
/>
|
||||
}
|
||||
handleSubmit={this.createGeneset}
|
||||
handleCancel={this.disableCreateGenesetMode}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user