Gene sets UI, right sidebar refactor (#2097)

* prototyping * render histos on open gene set * prototyping * render histos on open gene set * factor out add genes to own component * remove unused import * mock reducer * color by geneset stub * menus and buttons * geneset dialogue stub * remove heatmap mock * componetize histogram * reenable add genes * re-add isuserdefined * test data * remove have fetched * add isExpanded state to gene, and pass to histogram * expand button * toggleable * mini * bump number of genes to 50 * don't clear diffexp on subset * move create category to top * render diffexp as geneset * geneset show mean expression * gene set reducer * add geneset UI reducer * wire e2e gene set loading prototype * fix sniffing bug * fix typo * add gene modals * client/src/actions/ * add autosave * rename data-dir cli param * add geneset, add gene, delete set * prototype: remove csv upload placeholder * handle delete gene from set * prepopulate geneset with genes from modal * add geneset: rename action * icons, language consistency * chevron after * handle empty string case on genes for create geneset * edit geneset * fix language on create * copy correction * add popper2 upgrade react popper upgrade react popper adding popover2 package * truncate uses tooltip2 * gene set button text typo * remove logging * moving server over * remove test imports * don't try to destructure map, use array.from * fix add gene map datastructure error * Revert "fix add gene map datastructure error" This reverts commit b0eed45952. * name --> genesetName, genes --> geneSymbols * add gene to geneset, temporary format * handle empty case, clear form input * lint -- genesets wasn't passed via props * userinfo * move genes string to object conversion to action * remove tmp gene description * emptystring default for description * remove empty string * remove top level package json * remove package lock as well * remove flag for feature toggle * remove comments in geneset * comment cleanup * remove comment * revert diffexp genes to 10 * color by gene set * disable color by gene set * Gene menus are now inline, remove dead prototype code * remove todo, magic number to variable * remove jshint in rightsidebar Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com> * remove unused geneset validation code * tmp format pending geneset description * move magic number into variable * reorganize genesetsUI reducer pending tests * rewire edit given new action name * add basic validation and feedback for geneset name uniqueness * mv annoDialog * mv label, repair paths * Update client/src/components/brushableHistogram/header.js Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com> * add imports for icon in histo * update jest snapshots given blueprint/tooltip2 usage of index -1 * ensure no empty paragraph * intent from blueprint * remove remainder of jshint references * do not push undo when autosave fires * fix autosave bugs * remove todos * clamp to util * scient to util * revert clearing diffexp * rename value to be more specific stacked bar * clean up logging and commetns * remove gene entry tests pending rewrite * tab index -1 * update jest snapshot, blueprint tooltip 2 * caret margin * snapshot update * ensure histogram is centered * add geneset actions to config * comment maybeScientific * comment clamp * comment ui reducer * remove prototype code * remove error log * remove references to bl.ocks * componetize parseBulkGeneString * catch case where geneset rename same name * genesetui reducer tests * add geneset ui to index reducer config Co-authored-by: bkmartinjr <bruce@chanzuckerberg.com> Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
2026-10-04 05:58:12 +08:00 · 2021-03-24 16:33:26 -04:00
parent 5335c39184
commit e6e358ddc8
66 changed files with 1926 additions and 905 deletions
@@ -0,0 +1,92 @@
+import React from "react";
+import { connect } from "react-redux";
+import AnnoDialog from "../../annoDialog";
+import LabelInput from "../../labelInput";
+import parseBulkGeneString from "../../../util/parseBulkGeneString";
+
+@connect((state) => ({
+  genesetsUI: state.genesetsUI,
+}))
+class AddGeneToGenesetDialogue extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      genesToAdd: "",
+    };
+  }
+
+  disableAddGeneMode = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: "geneset: disable add new genes mode",
+    });
+  };
+
+  handleAddGeneToGeneSet = (e) => {
+    const { geneset, dispatch } = this.props;
+    const { genesToAdd } = this.state;
+
+    const genesTmpHardcodedFormat = [];
+
+    const genesArrayFromString = parseBulkGeneString(genesToAdd);
+
+    genesArrayFromString.forEach((_gene) => {
+      genesTmpHardcodedFormat.push({
+        geneSymbol: _gene,
+      });
+    });
+
+    dispatch({
+      type: "geneset: add genes",
+      genesetName: geneset,
+      genes: genesTmpHardcodedFormat,
+    });
+    dispatch({
+      type: "geneset: disable add new genes mode",
+    });
+    if (e) e.preventDefault();
+  };
+
+  handleChange = (e) => {
+    this.setState({ genesToAdd: e });
+  };
+
+  render() {
+    const { geneset, genesetsUI } = this.props;
+    const { genesToAdd } = this.state;
+
+    return (
+      <>
+        <AnnoDialog
+          isActive={genesetsUI.isAddingGenesToGeneset === geneset}
+          inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
+          primaryButtonProps={{
+            "data-testid": `${geneset}:submit-label`,
+          }}
+          title="Add genes to gene set"
+          instruction={`Add gene to ${geneset}`}
+          cancelTooltipContent="Close this dialog without adding genes to gene set."
+          primaryButtonText="Add genes"
+          text={genesToAdd}
+          validationError={false}
+          annoInput={
+            <LabelInput
+              onChange={this.handleChange}
+              inputProps={{
+                "data-testid": "add-genes",
+                leftIcon: "manually-entered-data",
+                intent: "none",
+                autoFocus: true,
+              }}
+              newLabelMessage="New category"
+            />
+          }
+          handleSubmit={this.handleAddGeneToGeneSet}
+          handleCancel={this.disableAddGeneMode}
+        />
+      </>
+    );
+  }
+}
+
+export default AddGeneToGenesetDialogue;