diff --git a/client/src/components/geneExpression/gene.js b/client/src/components/geneExpression/gene.js index e1433cb7..81823ca1 100644 --- a/client/src/components/geneExpression/gene.js +++ b/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 (
- {}} - style={{ - cursor: "pointer", - }} - onClick={this.handleGeneExpandClick} - > - {geneIsExpanded ? ( - - ) : ( - - )} - - - {gene} - - - - +
+ + {}} + style={{ + cursor: "pointer", + }} + onClick={this.handleGeneExpandClick} + > + + + {gene} + + + + +
- {}} - active={false /* todo gene sets */} - intent="none" - icon="tint" - /> +
+ + {}} + active={false /* todo gene sets */} + intent="none" + icon={} + /> + {}} + active={false /* todo gene sets */} + intent="none" + icon={} + /> +
); } } export default Gene; + +// {geneIsExpanded ? ( +// +// ) : ( +// +// )} diff --git a/client/src/components/geneExpression/geneSet.js b/client/src/components/geneExpression/geneSet.js index 56320890..42a6a3fd 100644 --- a/client/src/components/geneExpression/geneSet.js +++ b/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 {
- + } />
{isOpen ? _.map(setGenes, (gene) => { - return ; + return ; }) : null} diff --git a/client/src/components/geneExpression/index.js b/client/src/components/geneExpression/index.js index 031110e2..5eecc1a2 100644 --- a/client/src/components/geneExpression/index.js +++ b/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 { diff --git a/client/src/components/geneExpression/addGenes.js b/client/src/components/geneExpression/menus/addGenes.js similarity index 98% rename from client/src/components/geneExpression/addGenes.js rename to client/src/components/geneExpression/menus/addGenes.js index bc3e2f82..73a920ce 100644 --- a/client/src/components/geneExpression/addGenes.js +++ b/client/src/components/geneExpression/menus/addGenes.js @@ -12,14 +12,14 @@ import { InputGroup, ControlGroup, } from "@blueprintjs/core"; -import * as globals from "../../globals"; -import actions from "../../actions"; +import * as globals from "../../../globals"; +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) { diff --git a/client/src/components/geneExpression/createGenesetDialogue.js b/client/src/components/geneExpression/menus/createGenesetDialogue.js similarity index 96% rename from client/src/components/geneExpression/createGenesetDialogue.js rename to client/src/components/geneExpression/menus/createGenesetDialogue.js index a0f7213c..f56b494b 100644 --- a/client/src/components/geneExpression/createGenesetDialogue.js +++ b/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 ( <> diff --git a/client/src/components/geneExpression/menus/geneMenus.js b/client/src/components/geneExpression/menus/geneMenus.js new file mode 100644 index 00000000..e2622785 --- /dev/null +++ b/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 ? ( + <> + + } + 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`} + /> + } + 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`} + /> + + + } + > +