menus and buttons

client/src/components/geneExpression/gene.js

@@ -3,13 +3,14 @@
 
 import React from "react";
 import { connect } from "react-redux";
-import { FaChevronRight, FaChevronDown } from "react-icons/fa";
+// import { FaChevronRight, FaChevronDown } from "react-icons/fa";
 
-import { AnchorButton } from "@blueprintjs/core";
+import { AnchorButton, Icon } from "@blueprintjs/core";
 import Truncate from "../util/truncate";
 
 import TestMiniHisto from "./test_miniHisto";
 import * as globals from "../../globals";
+import GeneMenus from "./menus/geneMenus";
 
 @connect(() => {
   return {};
@@ -41,7 +42,6 @@ class Gene extends React.Component {
 
   render() {
     const { gene } = this.props;
-    const { geneIsExpanded } = this.state;
     return (
       <div
         style={{
@@ -51,55 +51,82 @@ class Gene extends React.Component {
           marginLeft: 15,
         }}
       >
-        <span
+        <div>
-          role="menuitem"
+          <Icon
-          tabIndex="0"
+            icon="drag-handle-horizontal"
-          data-testclass="gene-expand"
+            iconSize={12}
-          data-testid={`${gene}:gene-expand`}
+            style={{
-          onKeyPress={/* todo_genesets */ () => {}}
+              marginRight: 10,
-          style={{
+              cursor: "grab",
-            cursor: "pointer",
+              position: "relative",
-          }}
+              top: -2,
-          onClick={this.handleGeneExpandClick}
+            }}
-        >
+          />
-          {geneIsExpanded ? (
+          <span
-            <FaChevronDown
+            role="menuitem"
-              data-testclass="gene-expand-is-expanded"
+            tabIndex="0"
-              style={{ fontSize: 10, marginRight: 5 }}
+            data-testclass="gene-expand"
-            />
+            data-testid={`${gene}:gene-expand`}
-          ) : (
+            onKeyPress={/* todo_genesets */ () => {}}
-            <FaChevronRight
+            style={{
-              data-testclass="gene-expand-is-not-expanded"
+              cursor: "pointer",
-              style={{ fontSize: 10, marginRight: 5 }}
+            }}
-            />
+            onClick={this.handleGeneExpandClick}
-          )}
+          >
-          <Truncate>
+            <Truncate>
-            <span
+              <span
-              style={{
+                style={{
-                width:
+                  width:
-                  globals.leftSidebarWidth -
+                    globals.leftSidebarWidth -
-                  310 /* todo_genesets this magic number determines how much of a long geneset name we see, and will be tweaked as we build */,
+                    310 /* todo_genesets this magic number determines how much of a long geneset name we see, and will be tweaked as we build */,
-              }}
+                }}
-              data-testid={`${gene}:gene-label`}
+                data-testid={`${gene}:gene-label`}
-            >
+              >
-              {gene}
+                {gene}
-            </span>
+              </span>
-          </Truncate>
+            </Truncate>
-          <TestMiniHisto />
+            <TestMiniHisto />
-        </span>
+          </span>
+        </div>
 
-        <AnchorButton
+        <div>
-          minimal
+          <GeneMenus genesetsEditable gene={gene} />
-          data-testclass="colorby"
+          <AnchorButton
-          data-testid={`colorby-${gene}`}
+            minimal
-          onClick={/* todo gene sets */ () => {}}
+            small
-          active={false /* todo gene sets */}
+            data-testclass="colorby"
-          intent="none"
+            data-testid={`colorby-${gene}`}
-          icon="tint"
+            onClick={/* todo gene sets */ () => {}}
-        />
+            active={false /* todo gene sets */}
+            intent="none"
+            icon={<Icon icon="tint" iconSize={12} />}
+          />
+          <AnchorButton
+            minimal
+            small
+            data-testclass="maximize"
+            data-testid={`maximize-${gene}`}
+            onClick={/* todo gene sets */ () => {}}
+            active={false /* todo gene sets */}
+            intent="none"
+            icon={<Icon icon="maximize" iconSize={10} />}
+          />
+        </div>
       </div>
     );
   }
 }
 
 export default Gene;
+
+// {geneIsExpanded ? (
+//   <FaChevronDown
+//     data-testclass="gene-expand-is-expanded"
+//     style={{ fontSize: 10, marginRight: 5 }}
+//   />
+// ) : (
+//   <FaChevronRight
+//     data-testclass="gene-expand-is-not-expanded"
+//     style={{ fontSize: 10, marginRight: 5 }}
+//   />
+// )}

client/src/components/geneExpression/geneSet.js

@@ -4,7 +4,7 @@
 import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
-import { AnchorButton } from "@blueprintjs/core";
+import { AnchorButton, Icon } from "@blueprintjs/core";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
 import actions from "../../actions";
 import Gene from "./gene";
@@ -12,6 +12,7 @@ import { memoize } from "../../util/dataframe/util";
 import Truncate from "../util/truncate";
 import TestMiniHisto from "./test_miniHisto";
 import * as globals from "../../globals";
+import GenesetMenus from "./menus/genesetMenus";
 
 @connect((state, ownProps) => {
   return {
@@ -139,7 +140,7 @@ class GeneSet extends React.Component {
                 style={{
                   maxWidth:
                     globals.leftSidebarWidth -
-                    200 /* todo_genesets this magic number determines how much of a long geneset name we see, and will be tweaked as we build */,
+                    240 /* todo_genesets this magic number determines how much of a long geneset name we see, and will be tweaked as we build */,
                 }}
                 data-testid={`${setName}:geneset-label`}
               >
@@ -149,21 +150,21 @@ class GeneSet extends React.Component {
           </span>
           <div>
             <TestMiniHisto />
-
+            <GenesetMenus genesetsEditable geneset={setName} />
             <AnchorButton
               data-testclass="colorby"
               data-testid={`colorby-${setName}`}
               onClick={this.onColorChangeClick}
               active={isColorAccessor}
               intent={isColorAccessor ? "primary" : "none"}
-              icon="tint"
+              icon={<Icon icon="tint" iconSize={16} />}
             />
           </div>
         </div>
 
         {isOpen
           ? _.map(setGenes, (gene) => {
-              return <Gene key={gene} gene={gene} />;
+              return <Gene key={gene} gene={gene} geneset={setName} />;
             })
           : null}
       </div>

client/src/components/geneExpression/index.js

@@ -8,7 +8,7 @@ import HistogramBrush from "../brushableHistogram";
 import GeneSet from "./geneSet";
 
 import testGeneSets from "./test_data";
-import CreateGenesetDialogue from "./createGenesetDialogue";
+import CreateGenesetDialogue from "./menus/createGenesetDialogue";
 
 @connect((state) => {
   return {

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

@@ -12,14 +12,14 @@ import {
   InputGroup,
   ControlGroup,
 } from "@blueprintjs/core";
-import * as globals from "../../globals";
+import * as globals from "../../../globals";
-import actions from "../../actions";
+import actions from "../../../actions";
 import {
   postUserErrorToast,
   keepAroundErrorToast,
-} from "../framework/toasters";
+} from "../../framework/toasters";
 
-import { memoize } from "../../util/dataframe/util";
+import { memoize } from "../../../util/dataframe/util";
 
 const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
   if (!modifiers.matchesPredicate) {

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import AnnoDialog from "../categorical/annoDialog";
+import AnnoDialog from "../../categorical/annoDialog";
 // import LabelInput from "../labelInput";
 // import { genesetPrompt, isGenesetErroneous } from "../genesetUtil";
 
@@ -52,7 +52,6 @@ class CreateGenesetDialogue extends React.PureComponent {
   render() {
     const { genesetName } = this.state;
     const { metadataField, genesets } = this.props;
-    console.log("dialogue", this.props);
 
     return (
       <>

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { connect } from "react-redux";
+import {
+  Button,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  Icon,
+  PopoverInteractionKind,
+} from "@blueprintjs/core";
+
+@connect(() => ({}))
+class GenesetMenus extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  handleDeleteGeneFromGeneset = () => {
+    // const { dispatch, geneset } = this.props;
+    // dispatch(actions.geneDeleteFromGenesetAction(geneset, gene));
+    // todo genesets
+  };
+
+  setGeneScatterplotX = () => {
+    // todo genesets
+  };
+
+  setGeneScatterplotY = () => {
+    // todo genesets
+  };
+
+  render() {
+    const { geneset, genesetsEditable, gene } = this.props;
+
+    return (
+      <>
+        {genesetsEditable ? (
+          <>
+            <Popover
+              interactionKind={PopoverInteractionKind.HOVER}
+              boundary="window"
+              position={Position.BOTTOM}
+              content={
+                <Menu>
+                  <MenuItem
+                    icon={<Icon icon="scatter-plot" iconSize={16} />}
+                    intent="none"
+                    data-testclass="setGeneScatterplotX"
+                    data-testid={`${geneset}:set-gene-as-scatterplot-x`}
+                    onClick={this.setGeneScatterplotX}
+                    text={`X: Set ${gene}'s values as as 'x' on a scatterplot`}
+                  />
+                  <MenuItem
+                    icon={<Icon icon="scatter-plot" iconSize={16} />}
+                    intent="none"
+                    data-testclass="setGeneScatterplotY"
+                    data-testid={`${geneset}:set-gene-as-scatterplot-y`}
+                    onClick={this.setGeneScatterplotY}
+                    text={`Y: Set ${gene}'s values as as 'y' on a scatterplot`}
+                  />
+                  <MenuItem
+                    icon="delete"
+                    intent="danger"
+                    data-testclass="handleDeleteGeneFromGeneset"
+                    data-testid={`${geneset}:delete-gene-from-geneset`}
+                    onClick={this.handleDeleteGeneFromGeneset}
+                    text="Remove this gene from the geneset"
+                  />
+                </Menu>
+              }
+            >
+              <Button
+                style={{ marginLeft: 0, marginRight: 5 }}
+                data-testclass="seeActions"
+                data-testid={`${gene}:see-actions`}
+                icon={<Icon icon="more" iconSize={10} />}
+                small
+                minimal
+              />
+            </Popover>
+          </>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default GenesetMenus;

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

@@ -0,0 +1,108 @@
+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 actions from "../../../actions";
+
+@connect(() => ({}))
+class GenesetMenus extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  activateAddNewLabelMode = () => {
+    const { dispatch, geneset } = this.props;
+    dispatch({
+      type: "geneset: activate add new genes mode",
+      data: geneset,
+    });
+  };
+
+  activateEditGenesetNameMode = () => {
+    const { dispatch, geneset } = this.props;
+
+    dispatch({
+      type: "geneset: activate geneset edit mode",
+      data: geneset,
+    });
+  };
+
+  handleDeleteCategory = () => {
+    const { dispatch, geneset } = this.props;
+    dispatch(actions.genesetDeleteAction(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.activateAddNewLabelMode}
+                small
+                minimal
+              />
+            </Tooltip>
+            <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="delete"
+                    intent="danger"
+                    data-testclass="handleDeleteCategory"
+                    data-testid={`${geneset}:delete-category`}
+                    onClick={this.handleDeleteCategory}
+                    text="Delete this geneset (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>
+          </>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default GenesetMenus;