Create / edit geneset description (#2139)

* geneset description add

* edit geneset description

* default state for desc

* remove log

* naming, todo

* check for both dup name and desc

* fixes

* do not store gene set modal state in history stack

* Update createGenesetDialogue.js

* Update editGenesetNameDialogue.js

Co-authored-by: bkmartinjr <bruce@chanzuckerberg.com>

client/src/components/geneExpression/menus/createGenesetDialogue.js

@@ -2,7 +2,8 @@ import pull from "lodash.pull";
 import uniq from "lodash.uniq";
 import React from "react";
 import { connect } from "react-redux";
-import AnnoDialog from "../../annoDialog";
+import { Button, Dialog, Classes, Colors } from "@blueprintjs/core";
+import { Tooltip2 } from "@blueprintjs/popover2";
 import LabelInput from "../../labelInput";
 import actions from "../../../actions";
 
@@ -20,6 +21,7 @@ class CreateGenesetDialogue extends React.PureComponent {
     this.state = {
       genesetName: "",
       genesToPopulateGeneset: "",
+      genesetDescription: "",
     };
   }
 
@@ -28,6 +30,7 @@ class CreateGenesetDialogue extends React.PureComponent {
     this.setState({
       genesetName: "",
       genesToPopulateGeneset: "",
+      genesetDescription: "",
     });
     dispatch({
       type: "geneset: disable create geneset mode",
@@ -37,12 +40,16 @@ class CreateGenesetDialogue extends React.PureComponent {
 
   createGeneset = (e) => {
     const { dispatch } = this.props;
-    const { genesetName, genesToPopulateGeneset } = this.state;
+    const {
+      genesetName,
+      genesToPopulateGeneset,
+      genesetDescription,
+    } = this.state;
 
     dispatch({
       type: "geneset: create",
       genesetName,
-      genesetDescription: "",
+      genesetDescription,
     });
     if (genesToPopulateGeneset) {
       const genesTmpHardcodedFormat = [];
@@ -82,10 +89,14 @@ class CreateGenesetDialogue extends React.PureComponent {
     this.setState({ genesToPopulateGeneset: e });
   };
 
+  handleDescriptionInputChange = (e) => {
+    this.setState({ genesetDescription: e });
+  };
+
   instruction = (genesetName, genesets) => {
     return genesets.has(genesetName)
-      ? "Geneset name must be unique."
-      : "New, unique geneset name";
+      ? "Gene set name must be unique."
+      : "New, unique gene set name";
   };
 
   validate = (genesetName, genesets) => {
@@ -98,47 +109,94 @@ class CreateGenesetDialogue extends React.PureComponent {
 
     return (
       <>
-        <AnnoDialog
-          isActive={genesetsUI.createGenesetModeActive}
-          inputProps={{
-            "data-testid": `${metadataField}:create-geneset-dialog`,
-          }}
-          primaryButtonProps={{
-            "data-testid": `${metadataField}:submit-geneset`,
-          }}
+        <Dialog
+          icon="tag"
           title="Create gene set"
-          instruction={this.instruction(genesetName, genesets)}
-          cancelTooltipContent="Close this dialog without creating a new gene set."
-          primaryButtonText="Create gene set"
-          text={genesetName}
-          validationError={this.validate(genesetName, genesets)}
-          annoInput={
-            <LabelInput
-              onChange={this.handleChange}
-              inputProps={{
-                "data-testid": "create-geneset-modal",
-                leftIcon: "manually-entered-data",
-                intent: "none",
-                autoFocus: true,
-              }}
-              newLabelMessage="Create gene set"
-            />
-          }
-          secondaryInstructions="Optionally add a list of comma separated genes to populate the gene set"
-          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}
-        />
+          isOpen={genesetsUI.createGenesetModeActive}
+          onClose={this.disableCreateGenesetMode}
+        >
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+            }}
+          >
+            <div className={Classes.DIALOG_BODY}>
+              <div style={{ marginBottom: 20 }}>
+                <p>{this.instruction(genesetName, genesets)}</p>
+                <LabelInput
+                  onChange={this.handleChange}
+                  inputProps={{
+                    "data-testid": "create-geneset-modal",
+                    leftIcon: "manually-entered-data",
+                    intent: "none",
+                    autoFocus: true,
+                  }}
+                  newLabelMessage="Create gene set"
+                />
+                <p
+                  style={{
+                    marginTop: 7,
+                    visibility: this.validate(genesetName, genesets)
+                      ? "visible"
+                      : "hidden",
+                    color: Colors.ORANGE3,
+                  }}
+                >
+                  {this.genesetNameError()}
+                </p>
+                <p style={{ marginTop: 20 }}>
+                  Optionally add a{" "}
+                  <span style={{ fontWeight: 700 }}>description</span> for this
+                  gene set
+                </p>
+                <LabelInput
+                  onChange={this.handleDescriptionInputChange}
+                  inputProps={{
+                    "data-testid": "add-geneset-description",
+                    intent: "none",
+                    autoFocus: false,
+                  }}
+                  newLabelMessage="Add geneset description"
+                />
+
+                <p style={{ marginTop: 20 }}>
+                  Optionally add a list of comma separated{" "}
+                  <span style={{ fontWeight: 700 }}>genes</span> to populate the
+                  gene set
+                </p>
+                <LabelInput
+                  onChange={this.handleGenesetInputChange}
+                  inputProps={{
+                    "data-testid": "add-genes",
+                    intent: "none",
+                    autoFocus: false,
+                  }}
+                  newLabelMessage="populate geneset with genes"
+                />
+              </div>
+            </div>
+            <div className={Classes.DIALOG_FOOTER}>
+              <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                <Tooltip2 content="Close this dialog without creating a new gene set.">
+                  <Button onClick={this.disableCreateGenesetMode}>
+                    Cancel
+                  </Button>
+                </Tooltip2>
+                <Button
+                  data-testid={`${metadataField}:submit-geneset`}
+                  onClick={this.createGeneset}
+                  disabled={
+                    !genesetName || this.validate(genesetName, genesets)
+                  }
+                  intent="primary"
+                  type="submit"
+                >
+                  Create gene set
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Dialog>
       </>
     );
   }

client/src/components/geneExpression/menus/editGenesetNameDialogue.js

@@ -14,14 +14,16 @@ class RenameGeneset extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      genesetName: props.parentGeneset,
+      newGenesetName: props.parentGeneset,
+      newGenesetDescription: props.parentGenesetDescription,
     };
   }
 
   disableEditGenesetNameMode = (e) => {
     const { dispatch } = this.props;
     this.setState({
-      genesetName: "",
+      newGenesetName: "",
+      newGenesetDescription: "",
     });
     dispatch({
       type: "geneset: disable rename geneset mode",
@@ -31,12 +33,15 @@ class RenameGeneset extends React.PureComponent {
 
   renameGeneset = (e) => {
     const { dispatch, genesetsUI } = this.props;
-    const { genesetName } = this.state;
+    const { newGenesetName, newGenesetDescription } = this.state;
 
     dispatch({
       type: "geneset: update",
       genesetName: genesetsUI.isEditingGenesetName,
-      update: { genesetName },
+      update: {
+        genesetName: newGenesetName,
+        genesetDescription: newGenesetDescription,
+      },
     });
     dispatch({
       type: "geneset: disable rename geneset mode",
@@ -49,12 +54,16 @@ class RenameGeneset extends React.PureComponent {
   };
 
   handleChange = (e) => {
-    this.setState({ genesetName: e });
+    this.setState({ newGenesetName: e });
+  };
+
+  handleChangeDescription = (e) => {
+    this.setState({ newGenesetDescription: e });
   };
 
   render() {
-    const { genesetName } = this.state;
-    const { genesetsUI, parentGeneset } = this.props;
+    const { newGenesetName, newGenesetDescription } = this.state;
+    const { genesetsUI, parentGeneset, parentGenesetDescription } = this.props;
 
     return (
       <>
@@ -66,15 +75,19 @@ class RenameGeneset extends React.PureComponent {
           primaryButtonProps={{
             "data-testid": `${genesetsUI.isEditingGenesetName}:submit-geneset`,
           }}
-          title="Rename gene set"
+          title="Edit gene set name and description"
           instruction={`Rename ${genesetsUI.isEditingGenesetName}`}
           cancelTooltipContent="Close this dialog without renaming the gene set."
-          primaryButtonText="Rename gene set"
-          text={genesetName}
-          validationError={genesetsUI.isEditingGenesetName === genesetName}
+          primaryButtonText="Edit gene set name and description"
+          text={newGenesetName}
+          secondaryText={newGenesetDescription}
+          validationError={
+            genesetsUI.isEditingGenesetName === newGenesetName &&
+            parentGenesetDescription === newGenesetDescription
+          }
           annoInput={
             <LabelInput
-              label={genesetName}
+              label={newGenesetName}
               onChange={this.handleChange}
               inputProps={{
                 "data-testid": "rename-geneset-modal",
@@ -82,7 +95,16 @@ class RenameGeneset extends React.PureComponent {
                 intent: "none",
                 autoFocus: true,
               }}
-              newLabelMessage="Rename gene set"
+            />
+          }
+          secondaryInstructions="Edit description"
+          secondaryInput={
+            <LabelInput
+              label={newGenesetDescription}
+              onChange={this.handleChangeDescription}
+              inputProps={{ "data-testid": "change geneset description" }}
+              intent="none"
+              autoFocus={false}
             />
           }
           handleSubmit={this.renameGeneset}

client/src/components/geneExpression/menus/genesetMenus.js

@@ -82,7 +82,7 @@ class GenesetMenus extends React.PureComponent {
                     data-testclass="activateEditGenesetNameMode"
                     data-testid={`${geneset}:edit-genesetName-mode`}
                     onClick={this.activateEditGenesetNameMode}
-                    text="Edit gene set name"
+                    text="Edit gene set name and description"
                   />
                   <MenuItem
                     icon="trash"