From c6ad970c4166146532f18e2661ebd1a2febaca39 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Fri, 22 Jan 2021 12:09:22 -0800
Subject: [PATCH] add gene modals

---
 client/src/components/geneExpression/index.js |  2 -
 .../menus/addGeneToGenesetDialogue.js         | 65 +++++++++++++++++++
 .../geneExpression/menus/genesetMenus.js      | 14 ++--
 client/src/components/rightSidebar/index.js   | 14 ++++
 client/src/reducers/genesetsUI.js             | 14 +++-
 5 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js

diff --git a/client/src/components/geneExpression/index.js b/client/src/components/geneExpression/index.js
index 92f97fee..c8ceee0a 100644
--- a/client/src/components/geneExpression/index.js
+++ b/client/src/components/geneExpression/index.js
@@ -35,8 +35,6 @@ class GeneExpression extends React.Component {
       });
     }
 
-    console.log(differential.diffExp);
-
     return differential.diffExp ? (
       <GeneSet
         key="Temp DiffExp Set"
diff --git a/client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js b/client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js
new file mode 100644
index 00000000..b6bd8c90
--- /dev/null
+++ b/client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js
@@ -0,0 +1,65 @@
+import React from "react";
+import { connect } from "react-redux";
+import AnnoDialog from "../../categorical/annoDialog";
+import LabelInput from "../../categorical/labelInput";
+
+@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",
+    });
+  };
+
+  render() {
+    const { geneset, genesetsUI } = this.props;
+
+    return (
+      <>
+        <AnnoDialog
+          isActive={genesetsUI.isAddingGenesToGeneset === geneset}
+          inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
+          primaryButtonProps={{
+            "data-testid": `${geneset}:submit-label`,
+          }}
+          title="Add gene to geneset"
+          instruction={`Add gene to ${geneset}`}
+          cancelTooltipContent="Close this dialog without adding genes to geneset."
+          primaryButtonText="Add Gene(s)"
+          text="todo"
+          validationError={() => {
+            /* todo genesets this.labelNameError(genesetName) */
+            return false;
+          }}
+          annoInput={
+            <LabelInput
+              onChange={this.handleChange}
+              onSelect={this.handleSelect}
+              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;
diff --git a/client/src/components/geneExpression/menus/genesetMenus.js b/client/src/components/geneExpression/menus/genesetMenus.js
index 7ee66a12..7e0366b6 100644
--- a/client/src/components/geneExpression/menus/genesetMenus.js
+++ b/client/src/components/geneExpression/menus/genesetMenus.js
@@ -13,19 +13,24 @@ import {
 
 import * as globals from "../../../globals";
 import actions from "../../../actions";
+import AddGeneToGenesetDialogue from "./addGeneToGenesetDialogue";
 
-@connect(() => ({}))
+@connect((state) => {
+  return {
+    genesetsUI: state.genesetsUI,
+  };
+})
 class GenesetMenus extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
   }
 
-  activateAddNewLabelMode = () => {
+  activateAddGeneToGenesetMode = () => {
     const { dispatch, geneset } = this.props;
     dispatch({
       type: "geneset: activate add new genes mode",
-      data: geneset,
+      geneset,
     });
   };
 
@@ -60,11 +65,12 @@ class GenesetMenus extends React.PureComponent {
                 data-testclass="handleAddNewLabelToCategory"
                 data-testid={`${geneset}:add-new-label-to-category`}
                 icon={<Icon icon="plus" iconSize={10} />}
-                onClick={this.activateAddNewLabelMode}
+                onClick={this.activateAddGeneToGenesetMode}
                 small
                 minimal
               />
             </Tooltip>
+            <AddGeneToGenesetDialogue geneset={geneset} />
             <Popover
               interactionKind={PopoverInteractionKind.HOVER}
               boundary="window"
diff --git a/client/src/components/rightSidebar/index.js b/client/src/components/rightSidebar/index.js
index aa4d9bf4..ef88f9e6 100644
--- a/client/src/components/rightSidebar/index.js
+++ b/client/src/components/rightSidebar/index.js
@@ -24,6 +24,20 @@ class RightSidebar extends React.Component {
           padding: globals.leftSidebarSectionPadding,
         }}
       >
+        <div
+          style={{
+            border: "1px dotted #738694",
+            background: "#F5F8FA",
+            width: "100%",
+            textAlign: "center",
+            marginBottom: 5,
+            position: "relative",
+            top: -2,
+            padding: 5,
+          }}
+        >
+          upload geneset csv
+        </div>
         <GeneExpression />
       </div>
     );
diff --git a/client/src/reducers/genesetsUI.js b/client/src/reducers/genesetsUI.js
index 63a84ed6..ad90a07e 100644
--- a/client/src/reducers/genesetsUI.js
+++ b/client/src/reducers/genesetsUI.js
@@ -5,7 +5,7 @@ const GeneSetsUI = (
   state = {
     createGenesetModeActive: false,
     isEditingGenesetName: false,
-    genesetAddingNewGenes: null,
+    isAddingGenesToGeneset: null,
   },
   action
 ) => {
@@ -22,6 +22,18 @@ const GeneSetsUI = (
         createGenesetModeActive: false,
       };
     }
+    case "geneset: activate add new genes mode": {
+      return {
+        ...state,
+        isAddingGenesToGeneset: action.geneset,
+      };
+    }
+    case "geneset: disable add new genes mode": {
+      return {
+        ...state,
+        isAddingGenesToGeneset: null,
+      };
+    }
     default:
       return state;
   }