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>

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

@@ -0,0 +1,149 @@
+import _ from "lodash";
+import React from "react";
+import { connect } from "react-redux";
+import AnnoDialog from "../../annoDialog";
+import LabelInput from "../../labelInput";
+
+@connect((state) => ({
+  annotations: state.annotations,
+  schema: state.annoMatrix?.schema,
+  ontology: state.ontology,
+  obsCrossfilter: state.obsCrossfilter,
+  genesets: state.genesets.genesets,
+  genesetsUI: state.genesetsUI,
+}))
+class CreateGenesetDialogue extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      genesetName: "",
+      genesToPopulateGeneset: "",
+    };
+  }
+
+  disableCreateGenesetMode = (e) => {
+    const { dispatch } = this.props;
+    this.setState({
+      genesetName: "",
+      genesToPopulateGeneset: "",
+    });
+    dispatch({
+      type: "geneset: disable create geneset mode",
+    });
+    if (e) e.preventDefault();
+  };
+
+  createGeneset = (e) => {
+    const { dispatch } = this.props;
+    const { genesetName, genesToPopulateGeneset } = this.state;
+
+    dispatch({
+      type: "geneset: create",
+      genesetName,
+      genesetDescription: "",
+    });
+    if (genesToPopulateGeneset) {
+      const genesTmpHardcodedFormat = [];
+
+      const genesArrayFromString = _.pull(
+        _.uniq(genesToPopulateGeneset.split(/[ ,]+/)),
+        ""
+      );
+
+      genesArrayFromString.forEach((_gene) => {
+        genesTmpHardcodedFormat.push({
+          geneSymbol: _gene,
+        });
+      });
+
+      dispatch({
+        type: "geneset: add genes",
+        genesetName,
+        genes: genesTmpHardcodedFormat,
+      });
+    }
+    dispatch({
+      type: "geneset: disable create geneset mode",
+    });
+    this.setState({
+      genesetName: "",
+      genesToPopulateGeneset: "",
+    });
+    e.preventDefault();
+  };
+
+  genesetNameError = () => {
+    return false;
+  };
+
+  handleChange = (e) => {
+    this.setState({ genesetName: e });
+  };
+
+  handleGenesetInputChange = (e) => {
+    this.setState({ genesToPopulateGeneset: e });
+  };
+
+  instruction = (genesetName, genesets) => {
+    return genesets.has(genesetName)
+      ? "Geneset name must be unique."
+      : "New, unique geneset name";
+  };
+
+  validate = (genesetName, genesets) => {
+    return genesets.has(genesetName);
+  };
+
+  render() {
+    const { genesetName } = this.state;
+    const { metadataField, genesetsUI, genesets } = this.props;
+
+    return (
+      <>
+        <AnnoDialog
+          isActive={genesetsUI.createGenesetModeActive}
+          inputProps={{
+            "data-testid": `${metadataField}:create-geneset-dialog`,
+          }}
+          primaryButtonProps={{
+            "data-testid": `${metadataField}:submit-geneset`,
+          }}
+          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}
+        />
+      </>
+    );
+  }
+}
+
+export default CreateGenesetDialogue;