mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-10-01 05:28:11 +08:00
Gene sets UI, right sidebar refactor (#2097)
* prototyping
* render histos on open gene set
* prototyping
* render histos on open gene set
* factor out add genes to own component
* remove unused import
* mock reducer
* color by geneset stub
* menus and buttons
* geneset dialogue stub
* remove heatmap mock
* componetize histogram
* reenable add genes
* re-add isuserdefined
* test data
* remove have fetched
* add isExpanded state to gene, and pass to histogram
* expand button
* toggleable
* mini
* bump number of genes to 50
* don't clear diffexp on subset
* move create category to top
* render diffexp as geneset
* geneset show mean expression
* gene set reducer
* add geneset UI reducer
* wire e2e gene set loading prototype
* fix sniffing bug
* fix typo
* add gene modals
* client/src/actions/
* add autosave
* rename data-dir cli param
* add geneset, add gene, delete set
* prototype: remove csv upload placeholder
* handle delete gene from set
* prepopulate geneset with genes from modal
* add geneset: rename action
* icons, language consistency
* chevron after
* handle empty string case on genes for create geneset
* edit geneset
* fix language on create
* copy correction
* add popper2
upgrade react popper
upgrade react popper
adding popover2 package
* truncate uses tooltip2
* gene set button text typo
* remove logging
* moving server over
* remove test imports
* don't try to destructure map, use array.from
* fix add gene map datastructure error
* Revert "fix add gene map datastructure error"
This reverts commit b0eed45952.
* name --> genesetName, genes --> geneSymbols
* add gene to geneset, temporary format
* handle empty case, clear form input
* lint -- genesets wasn't passed via props
* userinfo
* move genes string to object conversion to action
* remove tmp gene description
* emptystring default for description
* remove empty string
* remove top level package json
* remove package lock as well
* remove flag for feature toggle
* remove comments in geneset
* comment cleanup
* remove comment
* revert diffexp genes to 10
* color by gene set
* disable color by gene set
* Gene menus are now inline, remove dead prototype code
* remove todo, magic number to variable
* remove jshint in rightsidebar
Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
* remove unused geneset validation code
* tmp format pending geneset description
* move magic number into variable
* reorganize genesetsUI reducer pending tests
* rewire edit given new action name
* add basic validation and feedback for geneset name uniqueness
* mv annoDialog
* mv label, repair paths
* Update client/src/components/brushableHistogram/header.js
Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
* add imports for icon in histo
* update jest snapshots given blueprint/tooltip2 usage of index -1
* ensure no empty paragraph
* intent from blueprint
* remove remainder of jshint references
* do not push undo when autosave fires
* fix autosave bugs
* remove todos
* clamp to util
* scient to util
* revert clearing diffexp
* rename value to be more specific stacked bar
* clean up logging and commetns
* remove gene entry tests pending rewrite
* tab index -1
* update jest snapshot, blueprint tooltip 2
* caret margin
* snapshot update
* ensure histogram is centered
* add geneset actions to config
* comment maybeScientific
* comment clamp
* comment ui reducer
* remove prototype code
* remove error log
* remove references to bl.ocks
* componetize parseBulkGeneString
* catch case where geneset rename same name
* genesetui reducer tests
* add geneset ui to index reducer config
Co-authored-by: bkmartinjr <bruce@chanzuckerberg.com>
Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
This commit is contained in:
Colin Megill
co-authored by
Severiano Badajoz
bkmartinjr
Severiano Badajoz
bkmartinjr
parent
5335c39184
commit
e6e358ddc8
@@ -0,0 +1,188 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import { AnchorButton, Icon } from "@blueprintjs/core";
|
||||
import Truncate from "../util/truncate";
|
||||
import HistogramBrush from "../brushableHistogram";
|
||||
|
||||
import * as globals from "../../globals";
|
||||
import actions from "../../actions";
|
||||
|
||||
@connect((state, ownProps) => {
|
||||
const { gene } = ownProps;
|
||||
|
||||
return {
|
||||
isColorAccessor: state.colors.colorAccessor === gene,
|
||||
isScatterplotXXaccessor: state.controls.scatterplotXXaccessor === gene,
|
||||
isScatterplotYYaccessor: state.controls.scatterplotYYaccessor === gene,
|
||||
};
|
||||
})
|
||||
class Gene extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
geneIsExpanded: false,
|
||||
};
|
||||
}
|
||||
|
||||
onColorChangeClick = () => {
|
||||
const { dispatch, gene } = this.props;
|
||||
dispatch(actions.requestSingleGeneExpressionCountsForColoringPOST(gene));
|
||||
};
|
||||
|
||||
handleGeneExpandClick = () => {
|
||||
const { geneIsExpanded } = this.state;
|
||||
this.setState({ geneIsExpanded: !geneIsExpanded });
|
||||
};
|
||||
|
||||
handleSetGeneAsScatterplotX = () => {
|
||||
const { dispatch, gene } = this.props;
|
||||
dispatch({
|
||||
type: "set scatterplot x",
|
||||
data: gene,
|
||||
});
|
||||
};
|
||||
|
||||
handleSetGeneAsScatterplotY = () => {
|
||||
const { dispatch, gene } = this.props;
|
||||
dispatch({
|
||||
type: "set scatterplot y",
|
||||
data: gene,
|
||||
});
|
||||
};
|
||||
|
||||
handleDeleteGeneFromSet = () => {
|
||||
const { dispatch, gene, geneset } = this.props;
|
||||
|
||||
dispatch({
|
||||
type: "geneset: delete genes",
|
||||
genesetName: geneset,
|
||||
geneSymbols: [gene],
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
gene,
|
||||
isColorAccessor,
|
||||
isScatterplotXXaccessor,
|
||||
isScatterplotYYaccessor,
|
||||
isDiffexp,
|
||||
} = this.props;
|
||||
const { geneIsExpanded } = this.state;
|
||||
const genesetNameLengthVisible = 310; /* this magic number determines how much of a long geneset name we see */
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: 5,
|
||||
marginRight: 0,
|
||||
marginTop: 2,
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
role="menuitem"
|
||||
tabIndex="0"
|
||||
data-testclass="gene-expand"
|
||||
data-testid={`${gene}:gene-expand`}
|
||||
onKeyPress={() => {}}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Icon
|
||||
icon="drag-handle-horizontal"
|
||||
iconSize={12}
|
||||
style={{
|
||||
marginRight: 7,
|
||||
cursor: "grab",
|
||||
position: "relative",
|
||||
top: -1,
|
||||
}}
|
||||
/>
|
||||
<Truncate>
|
||||
<span
|
||||
style={{
|
||||
width: globals.leftSidebarWidth - genesetNameLengthVisible,
|
||||
}}
|
||||
data-testid={`${gene}:gene-label`}
|
||||
>
|
||||
{gene}
|
||||
</span>
|
||||
</Truncate>
|
||||
</div>
|
||||
{!geneIsExpanded ? (
|
||||
<HistogramBrush isUserDefined field={gene} mini />
|
||||
) : null}
|
||||
</div>
|
||||
<div style={{ flexShrink: 0, marginLeft: 2 }}>
|
||||
{!isDiffexp ? (
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
data-testid={`delete-from-geneset-${gene}`}
|
||||
onClick={this.handleDeleteGeneFromSet}
|
||||
intent="none"
|
||||
style={{ fontWeight: 700, marginRight: 2 }}
|
||||
icon={<Icon icon="trash" iconSize={10} />}
|
||||
/>
|
||||
) : null}
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
data-testid={`plot-x-${gene}`}
|
||||
onClick={this.handleSetGeneAsScatterplotX}
|
||||
active={isScatterplotXXaccessor}
|
||||
intent={isScatterplotXXaccessor ? "primary" : "none"}
|
||||
style={{ fontWeight: 700, marginRight: 2 }}
|
||||
>
|
||||
x
|
||||
</AnchorButton>
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
data-testid={`plot-y-${gene}`}
|
||||
onClick={this.handleSetGeneAsScatterplotY}
|
||||
active={isScatterplotYYaccessor}
|
||||
intent={isScatterplotYYaccessor ? "primary" : "none"}
|
||||
style={{ fontWeight: 700, marginRight: 2 }}
|
||||
>
|
||||
y
|
||||
</AnchorButton>
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
data-testclass="maximize"
|
||||
data-testid={`maximize-${gene}`}
|
||||
onClick={this.handleGeneExpandClick}
|
||||
active={geneIsExpanded}
|
||||
intent="none"
|
||||
icon={<Icon icon="maximize" iconSize={10} />}
|
||||
style={{ marginRight: 2 }}
|
||||
/>
|
||||
<AnchorButton
|
||||
minimal
|
||||
small
|
||||
data-testclass="colorby"
|
||||
data-testid={`colorby-${gene}`}
|
||||
onClick={this.onColorChangeClick}
|
||||
active={isColorAccessor}
|
||||
intent={isColorAccessor ? "primary" : "none"}
|
||||
icon={<Icon icon="tint" iconSize={12} />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{geneIsExpanded ? <HistogramBrush isUserDefined field={gene} /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Gene;
|
||||
Reference in New Issue
Block a user