fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-02 07:58:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

avoid overflow on clip dialogue (#740)

Browse Source
This commit is contained in:
Colin Megill
2019-05-01 15:41:54 -04:00
committed by GitHub
parent 8a72010768
commit 86bf64e793
1 changed files with 83 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/graph/graph.js
+83 -90
View File
@@ -362,9 +362,9 @@ class Graph extends React.Component {
}; };
handleClipOnKeyPress = e => { handleClipOnKeyPress = e => {
/* /*
allow only numbers, plus other critical keys which allow only numbers, plus other critical keys which
may be required to make a number may be required to make a number
*/ */
if (!Graph.isValidDigitKeyEvent(e)) { if (!Graph.isValidDigitKeyEvent(e)) {
e.preventDefault(); e.preventDefault();
@@ -894,102 +894,95 @@ class Graph extends React.Component {
marginLeft: 10 marginLeft: 10
}} }}
> >
<Tooltip content="Visualization settings" position="left"> <Popover
<Popover target={
target={ <Button
<Button type="button"
type="button" className={`bp3-button bp3-icon-timeline-bar-chart ${activeClipClass}`}
className={`bp3-button bp3-icon-timeline-bar-chart ${activeClipClass}`} style={{
style={{ cursor: "pointer"
cursor: "pointer" }}
}} />
/> }
} position={Position.BOTTOM_RIGHT}
onOpening={this.handleClipOpening} onOpening={this.handleClipOpening}
onClosing={this.handleClipClosing} onClosing={this.handleClipClosing}
content={ content={
<div
style={{
display: "flex",
justifyContent: "flex-start",
alignItems: "flex-start",
flexDirection: "column",
padding: 10
}}
>
<div>Clip all continuous values to percentile range</div>
<div <div
style={{ style={{
display: "flex", display: "flex",
justifyContent: "flex-start", justifyContent: "space-between",
alignItems: "flex-start", alignItems: "center",
flexDirection: "column", paddingTop: 5,
padding: 10 paddingBottom: 5
}} }}
> >
<div>Clip all continuous values to percentile range</div> <NumericInput
<div style={{ width: 50 }}
onValueChange={this.handleClipPercentileMinValueChange}
onKeyPress={this.handleClipOnKeyPress}
value={clipMin}
min={0}
max={100}
fill={false}
minorStepSize={null}
rightElement={
<div style={{ padding: "4px 2px" }}>
<Icon
icon="percentage"
intent="primary"
iconSize={14}
/>
</div>
}
/>
<span style={{ marginRight: 5, marginLeft: 5 }}> - </span>
<NumericInput
style={{ width: 50 }}
onValueChange={this.handleClipPercentileMaxValueChange}
onKeyPress={this.handleClipOnKeyPress}
value={clipMax}
min={0}
max={100}
fill={false}
minorStepSize={null}
rightElement={
<div style={{ padding: "4px 2px" }}>
<Icon
icon="percentage"
intent="primary"
iconSize={14}
/>
</div>
}
/>
<Button
type="button"
className="bp3-button"
disabled={this.isClipDisabled()}
style={{ style={{
display: "flex", cursor: "pointer",
justifyContent: "space-between", marginRight: 5,
alignItems: "center", marginLeft: 5
paddingTop: 5,
paddingBottom: 5
}} }}
onClick={this.handleClipCommit}
> >
<NumericInput Clip
style={{ width: 50 }} </Button>
onValueChange={
this.handleClipPercentileMinValueChange
}
onKeyPress={this.handleClipOnKeyPress}
value={clipMin}
min={0}
max={100}
fill={false}
minorStepSize={null}
rightElement={
<div style={{ padding: "4px 2px" }}>
<Icon
icon="percentage"
intent="primary"
iconSize={14}
/>
</div>
}
/>
<span style={{ marginRight: 5, marginLeft: 5 }}>
{" "}
-{" "}
</span>
<NumericInput
style={{ width: 50 }}
onValueChange={
this.handleClipPercentileMaxValueChange
}
onKeyPress={this.handleClipOnKeyPress}
value={clipMax}
min={0}
max={100}
fill={false}
minorStepSize={null}
rightElement={
<div style={{ padding: "4px 2px" }}>
<Icon
icon="percentage"
intent="primary"
iconSize={14}
/>
</div>
}
/>
<span style={{ marginRight: 5, marginLeft: 5 }}> </span>
<Button
type="button"
className="bp3-button"
disabled={this.isClipDisabled()}
style={{
cursor: "pointer"
}}
onClick={this.handleClipCommit}
>
Clip
</Button>
</div>
</div> </div>
} </div>
/> }
</Tooltip> />
</div> </div>
<div style={{ marginLeft: 10 }} className="bp3-button-group"> <div style={{ marginLeft: 10 }} className="bp3-button-group">