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-06 09:38: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,120 @@
+import React from "react";
+import { connect } from "react-redux";
+import {
+  Button,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  Tooltip,
+  Icon,
+  PopoverInteractionKind,
+} from "@blueprintjs/core";
+
+import * as globals from "../../../globals";
+import AddGeneToGenesetDialogue from "./addGeneToGenesetDialogue";
+
+@connect((state) => {
+  return {
+    genesetsUI: state.genesetsUI,
+  };
+})
+class GenesetMenus extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  activateAddGeneToGenesetMode = () => {
+    const { dispatch, geneset } = this.props;
+    dispatch({
+      type: "geneset: activate add new genes mode",
+      geneset,
+    });
+  };
+
+  activateEditGenesetNameMode = () => {
+    const { dispatch, geneset } = this.props;
+
+    dispatch({
+      type: "geneset: activate rename geneset mode",
+      data: geneset,
+    });
+  };
+
+  handleDeleteCategory = () => {
+    const { dispatch, geneset } = this.props;
+    dispatch({ type: "geneset: delete", genesetName: geneset });
+  };
+
+  render() {
+    const { geneset, genesetsEditable, createText } = this.props;
+
+    return (
+      <>
+        {genesetsEditable ? (
+          <>
+            <Tooltip
+              content={createText}
+              position={Position.BOTTOM}
+              hoverOpenDelay={globals.tooltipHoverOpenDelay}
+            >
+              <Button
+                style={{ marginLeft: 0, marginRight: 2 }}
+                data-testclass="handleAddNewLabelToCategory"
+                data-testid={`${geneset}:add-new-label-to-category`}
+                icon={<Icon icon="plus" iconSize={10} />}
+                onClick={this.activateAddGeneToGenesetMode}
+                small
+                minimal
+              />
+            </Tooltip>
+            <AddGeneToGenesetDialogue geneset={geneset} />
+            <Popover
+              interactionKind={PopoverInteractionKind.HOVER}
+              boundary="window"
+              position={Position.BOTTOM}
+              content={
+                <Menu>
+                  <MenuItem
+                    icon="edit"
+                    data-testclass="activateEditGenesetNameMode"
+                    data-testid={`${geneset}:edit-genesetName-mode`}
+                    onClick={this.activateEditGenesetNameMode}
+                    text="Edit gene set name"
+                  />
+                  <MenuItem
+                    icon="trash"
+                    intent="danger"
+                    data-testclass="handleDeleteCategory"
+                    data-testid={`${geneset}:delete-category`}
+                    onClick={this.handleDeleteCategory}
+                    text="Delete this gene set (destructive, will remove set and collection of genes)"
+                  />
+                </Menu>
+              }
+            >
+              <Button
+                style={{ marginLeft: 0, marginRight: 5 }}
+                data-testclass="seeActions"
+                data-testid={`${geneset}:see-actions`}
+                icon={<Icon icon="more" iconSize={10} />}
+                small
+                minimal
+              />
+            </Popover>
+            <Button
+              disabled
+              style={{ marginLeft: 0 }}
+              data-testclass="colorby-entire-geneset"
+              data-testid={`${geneset}:colorby-entire-geneset`}
+              icon={<Icon icon="tint" iconSize={16} />}
+            />
+          </>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default GenesetMenus;