mock reducer

client/src/components/categorical/index.js

@@ -2,6 +2,7 @@
 import React from "react";
 import { Button } from "@blueprintjs/core";
 import { connect } from "react-redux";
+import emoji from "react-easy-emoji";
 import * as globals from "../../globals";
 import Category from "./category";
 import { AnnotationsHelpers, ControlsHelpers } from "../../util/stateManager";
@@ -207,9 +208,19 @@ class Categories extends React.Component {
             <Button
               data-testid="open-annotation-dialog"
               onClick={this.handleEnableAnnoMode}
-              intent="primary"
+              intent="none"
             >
-              Create new category
+              <span
+                style={{
+                  marginRight: 4,
+                  position: "relative",
+                  top: 1,
+                  left: -1,
+                }}
+              >
+                {emoji("🧫")}
+              </span>
+              Create new <strong>category</strong>
             </Button>
           </div>
         ) : null}

client/src/components/geneExpression/createGenesetDialogue.js

@@ -0,0 +1,117 @@
+// import React from "react";
+// import { connect } from "react-redux";
+// import AnnoDialog from "../annoDialog";
+// // import LabelInput from "../labelInput";
+// // import { labelPrompt, isLabelErroneous } from "../labelUtil";
+// import actions from "../../actions";
+
+// @connect((state) => ({
+//   annotations: state.annotations,
+//   schema: state.annoMatrix?.schema,
+//   ontology: state.ontology,
+//   obsCrossfilter: state.obsCrossfilter,
+// }))
+// class CreateGenesetDialogue extends React.PureComponent {
+//   constructor(props) {
+//     super(props);
+//     this.state = {
+//       newLabelText: "",
+//     };
+//   }
+
+//   disableAddNewLabelMode = (e) => {
+//     const { dispatch } = this.props;
+//     this.setState({
+//       newLabelText: "",
+//     });
+//     dispatch({
+//       type: "annotation: disable add new label mode",
+//     });
+//     if (e) e.preventDefault();
+//   };
+
+//   handleAddNewLabelToCategory = (e) => {
+//     const { dispatch, metadataField } = this.props;
+//     const { newLabelText } = this.state;
+
+//     this.disableAddNewLabelMode();
+//     dispatch(
+//       actions.annotationCreateLabelInCategory(
+//         metadataField,
+//         newLabelText,
+//         false
+//       )
+//     );
+//     e.preventDefault();
+//   };
+
+//   addLabelAndAssignCells = (e) => {
+//     const { dispatch, metadataField } = this.props;
+//     const { newLabelText } = this.state;
+
+//     this.disableAddNewLabelMode();
+//     dispatch(
+//       actions.annotationCreateLabelInCategory(metadataField, newLabelText, true)
+//     );
+//     e.preventDefault();
+//   };
+
+//   labelNameError = (name) => {
+//     const { metadataField, ontology, schema } = this.props;
+//     return isLabelErroneous(name, metadataField, ontology, schema);
+//   };
+
+//   instruction = (label) => {
+//     return labelPrompt(this.labelNameError(label), "New, unique label", ":");
+//   };
+
+//   handleChangeOrSelect = (label) => {
+//     this.setState({ newLabelText: label });
+//   };
+
+//   render() {
+//     const { newLabelText } = this.state;
+//     const { metadataField, annotations, ontology, obsCrossfilter } = this.props;
+//     const ontologyEnabled = ontology?.enabled ?? false;
+
+//     return (
+//       <>
+//         <AnnoDialog
+//           isActive={
+//             annotations.isAddingNewLabel &&
+//             annotations.categoryAddingNewLabel === metadataField
+//           }
+//           inputProps={{ "data-testid": `${metadataField}:create-label-dialog` }}
+//           primaryButtonProps={{
+//             "data-testid": `${metadataField}:submit-label`,
+//           }}
+//           title="Add new label to category"
+//           instruction={this.instruction(newLabelText)}
+//           cancelTooltipContent="Close this dialog without adding a label."
+//           primaryButtonText="Add label"
+//           secondaryButtonText={`Add label & assign ${obsCrossfilter.countSelected()} selected cells`}
+//           handleSecondaryButtonSubmit={this.addLabelAndAssignCells}
+//           text={newLabelText}
+//           validationError={this.labelNameError(newLabelText)}
+//           handleSubmit={this.handleAddNewLabelToCategory}
+//           handleCancel={this.disableAddNewLabelMode}
+//           annoInput={
+//             <LabelInput
+//               labelSuggestions={ontologyEnabled ? ontology.terms : null}
+//               onChange={this.handleChangeOrSelect}
+//               onSelect={this.handleChangeOrSelect}
+//               inputProps={{
+//                 "data-testid": `${metadataField}:new-label-name`,
+//                 leftIcon: "tag",
+//                 intent: "none",
+//                 autoFocus: true,
+//               }}
+//             />
+//           }
+//         />
+//       </>
+//     );
+//   }
+// }
+
+// export default CreateGenesetDialogue;

client/src/components/geneExpression/geneSet.js

@@ -4,34 +4,32 @@
 import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
-import HistogramBrush from "../brushableHistogram";
+import { Icon } from "@blueprintjs/core";
 import * as globals from "../../globals";
 import actions from "../../actions";
 import Gene from "./gene";
-import { Button, ButtonGroup, Tooltip } from "@blueprintjs/core";
-import {
-  postUserErrorToast,
-  keepAroundErrorToast
-} from "../framework/toasters";
 import { memoize } from "../../util/dataframe/util";
+import Truncate from "../util/truncate";
 
-@connect(state => {
+@connect((state) => {
   return {
     world: state.world,
     userDefinedGenes: state.controls.userDefinedGenes,
-    userDefinedGenesLoading: state.controls.userDefinedGenesLoading
+    userDefinedGenesLoading: state.controls.userDefinedGenesLoading,
   };
 })
 class GeneSet extends React.Component {
+  _memoGenesToUpper = memoize(this._genesToUpper, (arr) => arr);
+
   constructor(props) {
     super(props);
     this.state = {
       isOpen: false,
-      haveFetched: false
+      haveFetched: false,
     };
   }
 
-  _genesToUpper = listGenes => {
+  _genesToUpper = (listGenes) => {
     // Has to be a Map to preserve index
     const upperGenes = new Map();
     for (let i = 0, { length } = listGenes; i < length; i += 1) {
@@ -41,23 +39,19 @@ class GeneSet extends React.Component {
     return upperGenes;
   };
 
-  _memoGenesToUpper = memoize(this._genesToUpper, arr => arr);
-
   fetchGenes = () => {
-    const { world, dispatch, userDefinedGenes, setGenes } = this.props;
+    const { world, dispatch, setGenes } = this.props;
     const varIndexName = world.schema.annotations.var.index;
-    const { haveFetched } = this.state;
 
     const worldGenes = world.varAnnotations.col(varIndexName).asArray();
 
     const upperGenes = this._genesToUpper(setGenes);
-    const upperUserDefinedGenes = this._genesToUpper(userDefinedGenes);
     const upperWorldGenes = this._memoGenesToUpper(worldGenes);
 
     dispatch({ type: "bulk user defined gene start" });
 
     Promise.all(
-      [...upperGenes.keys()].map(upperGene => {
+      [...upperGenes.keys()].map((upperGene) => {
         /* Unlike bulk add... with gene sets this test needs to be within the set... */
         // if (upperUserDefinedGenes.get(upperGene) !== undefined) {
         //   return keepAroundErrorToast(`${upperGene} already exists`);
@@ -87,25 +81,54 @@ class GeneSet extends React.Component {
     return undefined;
   };
 
+  onGenesetMenuClick = () => {
+    const { isOpen, haveFetched } = this.state;
+    this.setState({ isOpen: !isOpen });
+    if (!haveFetched) {
+      // this.fetchGenes(); TODO
+    }
+  };
+
   render() {
     const { setName, setGenes } = this.props;
-    const { haveFetched, isOpen } = this.state;
+    const { isOpen } = this.state;
     // console.log("geneSet setGenes variable: ", setGenes);
     return (
       <div>
-        <Button
-          minimal
-          onClick={() => {
-            this.setState({ isOpen: !isOpen });
-            if (!haveFetched) {
-              this.fetchGenes();
-            }
+        <span
+          role="menuitem"
+          tabIndex="0"
+          data-testclass="geneset-expand"
+          data-testid={`${setName}:geneset-expand`}
+          onKeyPress={/* todo */ () => {}}
+          style={{
+            cursor: "pointer",
           }}
+          onClick={this.onGenesetMenuClick}
         >
-          {setName}
-        </Button>
+          <Truncate>
+            <span
+              style={{
+                maxWidth: globals.leftSidebarWidth - 150,
+              }}
+              data-testid={`${setName}:geneset-label`}
+            >
+              {setName}
+            </span>
+          </Truncate>
+          <Icon
+            data-testclass={
+              isOpen
+                ? "geneset-expand-is-expanded"
+                : "geneset-expand-is-not-expanded"
+            }
+            icon={isOpen ? "caret-down" : "caret-right"}
+            iconSize={14}
+          />
+        </span>
+
         {isOpen
-          ? _.map(setGenes, gene => {
+          ? _.map(setGenes, (gene) => {
               return <Gene key={gene} gene={gene} />;
             })
           : null}

client/src/components/geneExpression/index.js

@@ -3,10 +3,11 @@
 import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
+import emoji from "react-easy-emoji";
+import { Button } from "@blueprintjs/core";
 import HistogramBrush from "../brushableHistogram";
 import * as globals from "../../globals";
 import GeneSet from "./geneSet";
-import AddGenes from "./addGenes";
 
 import testGeneSets from "./test_data";
 
@@ -14,6 +15,7 @@ import testGeneSets from "./test_data";
   return {
     userDefinedGenes: state.controls.userDefinedGenes,
     differential: state.differential,
+    genesets: state.genesets,
   };
 })
 class GeneExpression extends React.Component {
@@ -29,8 +31,15 @@ class GeneExpression extends React.Component {
     return sets;
   };
 
+  handleActivateCreateGenesetMode = () => {
+    const { dispatch } = this.props;
+    dispatch({ type: "geneset: activate add new geneset mode" });
+  };
+
   render() {
     const { userDefinedGenes, differential } = this.props;
+    const geneSetsFeatureEnabledTODO = true;
+    console.log("genesets", this.props);
     return (
       <div
         style={{
@@ -38,7 +47,28 @@ class GeneExpression extends React.Component {
         }}
       >
         <div>
-          <AddGenes />
+          {geneSetsFeatureEnabledTODO ? (
+            <div>
+              <Button
+                data-testid="open-create-geneset-dialog"
+                onClick={this.handleActivateCreateGenesetMode}
+                intent="none"
+              >
+                <span
+                  style={{
+                    marginRight: 4,
+                    position: "relative",
+                    top: 1,
+                    left: -1,
+                  }}
+                >
+                  {emoji("🧬")}
+                </span>
+                Create new <strong>geneset</strong>
+              </Button>
+            </div>
+          ) : null}
+          {/* <AddGenes /> */}
           {userDefinedGenes.length > 0
             ? _.map(userDefinedGenes, (geneName, index) => {
                 return (

client/src/components/rightSidebar/index.js

@@ -22,6 +22,7 @@ class RightSidebar extends React.Component {
           overflowY: "inherit",
           height: "inherit",
           width: "inherit",
+          padding: globals.leftSidebarSectionPadding,
         }}
       >
         <GeneExpression />