diff --git a/client/src/components/categorical/index.js b/client/src/components/categorical/index.js index 993fb4ee..05f14359 100644 --- a/client/src/components/categorical/index.js +++ b/client/src/components/categorical/index.js @@ -2,7 +2,6 @@ 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"; @@ -141,6 +140,17 @@ class Categories extends React.Component { padding: globals.leftSidebarSectionPadding, }} > + {writableCategoriesEnabled ? ( +
+ +
+ ) : null} ) : null )} - - {writableCategoriesEnabled ? ( -
- -
- ) : null} ); } diff --git a/client/src/components/categorical/value/index.js b/client/src/components/categorical/value/index.js index c04af970..66896af2 100644 --- a/client/src/components/categorical/value/index.js +++ b/client/src/components/categorical/value/index.js @@ -670,8 +670,8 @@ class CategoryValue extends React.Component { display={isColorBy && categoryValueIndices ? "auto" : "none"} style={{ marginLeft: 5, - width: VALUE_HEIGHT, - height: VALUE_HEIGHT, + width: 15, + height: 15, backgroundColor: isColorBy && categoryValueIndices ? colorScale(categoryValueIndices.get(label)) diff --git a/client/src/components/embedding/index.js b/client/src/components/embedding/index.js index d4c7562c..f9693ab4 100644 --- a/client/src/components/embedding/index.js +++ b/client/src/components/embedding/index.js @@ -55,15 +55,14 @@ class Embedding extends React.PureComponent { } diff --git a/client/src/components/geneExpression/createGenesetDialogue.js b/client/src/components/geneExpression/createGenesetDialogue.js index c7360a50..a0f7213c 100644 --- a/client/src/components/geneExpression/createGenesetDialogue.js +++ b/client/src/components/geneExpression/createGenesetDialogue.js @@ -1,117 +1,83 @@ -// 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"; +import React from "react"; +import { connect } from "react-redux"; +import AnnoDialog from "../categorical/annoDialog"; +// import LabelInput from "../labelInput"; +// import { genesetPrompt, isGenesetErroneous } from "../genesetUtil"; -// @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: "", -// }; -// } +@connect((state) => ({ + annotations: state.annotations, + schema: state.annoMatrix?.schema, + ontology: state.ontology, + obsCrossfilter: state.obsCrossfilter, + genesets: state.genesets, +})) +class CreateGenesetDialogue extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + genesetName: "", + }; + } -// disableAddNewLabelMode = (e) => { -// const { dispatch } = this.props; -// this.setState({ -// newLabelText: "", -// }); -// dispatch({ -// type: "annotation: disable add new label mode", -// }); -// if (e) e.preventDefault(); -// }; + disableCreateGenesetMode = (e) => { + const { dispatch } = this.props; + this.setState({ + genesetName: "", + }); + dispatch({ + type: "geneset: disable create geneset mode", + }); + if (e) e.preventDefault(); + }; -// handleAddNewLabelToCategory = (e) => { -// const { dispatch, metadataField } = this.props; -// const { newLabelText } = this.state; + createGeneset = (e) => { + const { dispatch } = this.props; + const { genesetName } = this.state; -// this.disableAddNewLabelMode(); -// dispatch( -// actions.annotationCreateLabelInCategory( -// metadataField, -// newLabelText, -// false -// ) -// ); -// e.preventDefault(); -// }; + dispatch({ type: "geneset: create", genesetName }); + e.preventDefault(); + }; -// addLabelAndAssignCells = (e) => { -// const { dispatch, metadataField } = this.props; -// const { newLabelText } = this.state; + genesetNameError = () => { + /* todo genesets validation */ + return false; + }; -// this.disableAddNewLabelMode(); -// dispatch( -// actions.annotationCreateLabelInCategory(metadataField, newLabelText, true) -// ); -// e.preventDefault(); -// }; + instruction = () => { + return "New, unique geneset"; + /* todo genesets */ + // return genesetPrompt(this.genesetNameError(geneset), "New, unique geneset", ":"); + }; -// labelNameError = (name) => { -// const { metadataField, ontology, schema } = this.props; -// return isLabelErroneous(name, metadataField, ontology, schema); -// }; + render() { + const { genesetName } = this.state; + const { metadataField, genesets } = this.props; + console.log("dialogue", this.props); -// instruction = (label) => { -// return labelPrompt(this.labelNameError(label), "New, unique label", ":"); -// }; + return ( + <> + { + /* todo genesets this.labelNameError(genesetName) */ + return false; + }} + handleSubmit={this.handleAddNewLabelToCategory} + handleCancel={this.disableCreateGenesetMode} + /> + + ); + } +} -// handleChangeOrSelect = (label) => { -// this.setState({ newLabelText: label }); -// }; - -// render() { -// const { newLabelText } = this.state; -// const { metadataField, annotations, ontology, obsCrossfilter } = this.props; -// const ontologyEnabled = ontology?.enabled ?? false; - -// return ( -// <> -// -// } -// /> -// -// ); -// } -// } - -// export default CreateGenesetDialogue; +export default CreateGenesetDialogue; diff --git a/client/src/components/geneExpression/gene.js b/client/src/components/geneExpression/gene.js index a2f86e16..e1433cb7 100644 --- a/client/src/components/geneExpression/gene.js +++ b/client/src/components/geneExpression/gene.js @@ -2,26 +2,101 @@ /* rc slider https://www.npmjs.com/package/rc-slider */ import React from "react"; -import _ from "lodash"; import { connect } from "react-redux"; -import HistogramBrush from "../brushableHistogram"; -import { Button, ButtonGroup, Tooltip } from "@blueprintjs/core"; -import actions from "../../actions"; +import { FaChevronRight, FaChevronDown } from "react-icons/fa"; -@connect((state) => { +import { AnchorButton } from "@blueprintjs/core"; +import Truncate from "../util/truncate"; + +import TestMiniHisto from "./test_miniHisto"; +import * as globals from "../../globals"; + +@connect(() => { return {}; }) class Gene extends React.Component { constructor(props) { super(props); - this.state = {}; + this.state = { + geneIsExpanded: false, + haveFetched: false, + }; } + onColorChangeClick = () => { + const { dispatch, gene } = this.props; + dispatch({ + type: "color by expression", + colorAccessor: gene, + }); + }; + + handleGeneExpandClick = () => { + const { geneIsExpanded, haveFetched } = this.state; + this.setState({ geneIsExpanded: !geneIsExpanded }); + if (!haveFetched) { + // this.fetchGene(); TODO + } + }; + render() { const { gene } = this.props; + const { geneIsExpanded } = this.state; return ( -
-

{gene}

+
+ {}} + style={{ + cursor: "pointer", + }} + onClick={this.handleGeneExpandClick} + > + {geneIsExpanded ? ( + + ) : ( + + )} + + + {gene} + + + + + + {}} + active={false /* todo gene sets */} + intent="none" + icon="tint" + />
); } diff --git a/client/src/components/geneExpression/geneSet.js b/client/src/components/geneExpression/geneSet.js index c61f193c..56320890 100644 --- a/client/src/components/geneExpression/geneSet.js +++ b/client/src/components/geneExpression/geneSet.js @@ -4,18 +4,21 @@ import React from "react"; import _ from "lodash"; import { connect } from "react-redux"; -import { Icon } from "@blueprintjs/core"; -import * as globals from "../../globals"; +import { AnchorButton } from "@blueprintjs/core"; +import { FaChevronRight, FaChevronDown } from "react-icons/fa"; import actions from "../../actions"; import Gene from "./gene"; import { memoize } from "../../util/dataframe/util"; import Truncate from "../util/truncate"; +import TestMiniHisto from "./test_miniHisto"; +import * as globals from "../../globals"; -@connect((state) => { +@connect((state, ownProps) => { return { world: state.world, userDefinedGenes: state.controls.userDefinedGenes, userDefinedGenesLoading: state.controls.userDefinedGenesLoading, + isColorAccessor: state.colors.colorAccessor === ownProps.setName, }; }) class GeneSet extends React.Component { @@ -89,43 +92,74 @@ class GeneSet extends React.Component { } }; + onColorChangeClick = () => { + const { dispatch, setName } = this.props; + dispatch({ + type: "color by gene set", + colorAccessor: setName, + }); + }; + render() { - const { setName, setGenes } = this.props; + const { setName, setGenes, isColorAccessor } = this.props; const { isOpen } = this.state; - // console.log("geneSet setGenes variable: ", setGenes); return ( -
- {}} +
+
- - - {setName} - - - - + {}} + style={{ + cursor: "pointer", + }} + onClick={this.onGenesetMenuClick} + > + {isOpen ? ( + + ) : ( + + )} + + + {setName} + + + +
+ + + +
+
{isOpen ? _.map(setGenes, (gene) => { diff --git a/client/src/components/geneExpression/index.js b/client/src/components/geneExpression/index.js index 81beda76..031110e2 100644 --- a/client/src/components/geneExpression/index.js +++ b/client/src/components/geneExpression/index.js @@ -3,13 +3,12 @@ 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 testGeneSets from "./test_data"; +import CreateGenesetDialogue from "./createGenesetDialogue"; @connect((state) => { return { @@ -39,35 +38,21 @@ class GeneExpression extends React.Component { render() { const { userDefinedGenes, differential } = this.props; const geneSetsFeatureEnabledTODO = true; - console.log("genesets", this.props); return ( -
+
{geneSetsFeatureEnabledTODO ? ( -
+
) : null} + {/* */} {userDefinedGenes.length > 0 ? _.map(userDefinedGenes, (geneName, index) => { diff --git a/client/src/components/geneExpression/test_miniHisto.js b/client/src/components/geneExpression/test_miniHisto.js new file mode 100644 index 00000000..c3d03e40 --- /dev/null +++ b/client/src/components/geneExpression/test_miniHisto.js @@ -0,0 +1,23 @@ +import React from "react"; + +export default () => ( + + + + + + + + + +); diff --git a/client/src/components/leftSidebar/index.js b/client/src/components/leftSidebar/index.js index 4cc60658..cd11acee 100644 --- a/client/src/components/leftSidebar/index.js +++ b/client/src/components/leftSidebar/index.js @@ -5,6 +5,7 @@ import Categorical from "../categorical"; import * as globals from "../../globals"; import DynamicScatterplot from "../scatterplot/scatterplot"; import TopLeftLogoAndTitle from "./topLeftLogoAndTitle"; +import Continuous from "../continuous/continuous"; @connect((state) => ({ scatterplotXXaccessor: state.controls.scatterplotXXaccessor, @@ -32,6 +33,7 @@ class LeftSideBar extends React.Component { }} > +
{scatterplotXXaccessor && scatterplotYYaccessor ? ( diff --git a/client/src/components/rightSidebar/index.js b/client/src/components/rightSidebar/index.js index dda4ea53..aa4d9bf4 100644 --- a/client/src/components/rightSidebar/index.js +++ b/client/src/components/rightSidebar/index.js @@ -1,7 +1,6 @@ // jshint esversion: 6 import React from "react"; import { connect } from "react-redux"; -import Continuous from "../continuous/continuous"; import GeneExpression from "../geneExpression"; import * as globals from "../../globals"; @@ -26,7 +25,6 @@ class RightSidebar extends React.Component { }} > -
); } diff --git a/client/src/reducers/colors.js b/client/src/reducers/colors.js index a95b51ce..cfc31a27 100644 --- a/client/src/reducers/colors.js +++ b/client/src/reducers/colors.js @@ -66,6 +66,7 @@ const ColorsReducer = ( }; } + case "color by gene set": case "color by categorical metadata": case "color by continuous metadata": { /* toggle between this mode and reset */ diff --git a/client/src/reducers/genesets.js b/client/src/reducers/genesets.js index b6812c2c..853573da 100644 --- a/client/src/reducers/genesets.js +++ b/client/src/reducers/genesets.js @@ -3,9 +3,10 @@ Reducers for geneset UI-state. */ const GeneSets = ( state = { - addGenesetModeActive: false, + createGenesetModeActive: false, isEditingGenesetName: false, genesetAddingNewGenes: null, + userCreatedGenesets: {}, }, action ) => { @@ -13,10 +14,25 @@ const GeneSets = ( case "geneset: activate add new geneset mode": { return { ...state, - addGenesetModeActive: true, + createGenesetModeActive: true, + }; + } + case "geneset: disable create geneset mode": { + return { + ...state, + createGenesetModeActive: false, + }; + } + case "geneset: create": { + return { + ...state, + userCreatedGenesets: Object.assign( + {}, + { [action.genesetName]: {} }, + ...state.userCreatedGenesets + ), }; } - default: return state; }