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

tooltips improvements (#896)

Browse Source 
* add and fix tooltips on toolbar

* move tooltips below buttons

* add global definition for tooltip hover over delay
This commit is contained in:
Bruce Martin
2019-08-22 20:56:33 -07:00
committed by GitHub
parent 0f36b49840
commit b359a610da
7 changed files with 75 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/menubar/index.js
+29 -11
View File
@@ -16,6 +16,7 @@ import CellSetButton from "./cellSetButtons";
import InformationMenu from "./infoMenu";
import UndoRedoReset from "./undoRedoReset";
import Clip from "./clip";
import { tooltipHoverOpenDelay } from "../../globals";
@connect(state => ({
universe: state.universe,
@@ -299,6 +300,7 @@ class MenuBar extends React.Component {
<Tooltip
content="Add two cells selections, see the top 15 differentially expressed genes between them"
position="bottom"
hoverOpenDelay={tooltipHoverOpenDelay}
>
<AnchorButton
disabled={!haveBothCellSets}
@@ -319,6 +321,7 @@ class MenuBar extends React.Component {
<Tooltip
content="Remove differentially expressed gene list and clear cell selections"
position="bottom"
hoverOpenDelay={tooltipHoverOpenDelay}
>
<Button
type="button"
@@ -333,7 +336,8 @@ class MenuBar extends React.Component {
</div>
<Tooltip
content="Show only metadata and cells which are currently selected"
position="left"
position="bottom"
hoverOpenDelay={tooltipHoverOpenDelay}
>
<AnchorButton
type="button"
@@ -355,7 +359,11 @@ class MenuBar extends React.Component {
</AnchorButton>
</Tooltip>
<div className="bp3-button-group">
<Tooltip content={selectionTooltip} position="left">
<Tooltip
content={selectionTooltip}
position="bottom"
hoverOpenDelay={tooltipHoverOpenDelay}
>
<Button
type="button"
data-testid="mode-lasso"
@@ -372,7 +380,11 @@ class MenuBar extends React.Component {
}}
/>
</Tooltip>
<Tooltip content="Pan and zoom" position="left">
<Tooltip
content="Drag to pan, scroll to zoom"
position="bottom"
hoverOpenDelay={tooltipHoverOpenDelay}
>
<Button
type="button"
data-testid="mode-pan-zoom"
@@ -398,14 +410,20 @@ class MenuBar extends React.Component {
>
<Popover
target={
<Button
type="button"
data-testid="layout-choice"
className="bp3-button bp3-icon-heatmap"
style={{
cursor: "pointer"
}}
/>
<Tooltip
content="Select embedding for visualization"
position="bottom"
hoverOpenDelay={tooltipHoverOpenDelay}
>
<Button
type="button"
data-testid="layout-choice"
className="bp3-button bp3-icon-heatmap"
style={{
cursor: "pointer"
}}
/>
</Tooltip>
}
position={Position.BOTTOM_RIGHT}
content={