From b359a610dadf4a17f090e922ac97712119a2d92d Mon Sep 17 00:00:00 2001
From: Bruce Martin <bruce@chanzuckerberg.com>
Date: Thu, 22 Aug 2019 20:56:33 -0700
Subject: [PATCH] tooltips improvements (#896)

* add and fix tooltips on toolbar

* move tooltips below buttons

* add global definition for tooltip hover over delay
---
 .../components/brushableHistogram/index.js    |  6 ++-
 client/src/components/categorical/category.js |  6 ++-
 .../src/components/menubar/cellSetButtons.js  |  4 +-
 client/src/components/menubar/clip.js         | 26 +++++++-----
 client/src/components/menubar/index.js        | 40 ++++++++++++++-----
 .../src/components/menubar/undoRedoReset.js   | 16 ++++++--
 client/src/globals.js                         |  3 ++
 7 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/client/src/components/brushableHistogram/index.js b/client/src/components/brushableHistogram/index.js
index 80b303a4..fe32f6b2 100644
--- a/client/src/components/brushableHistogram/index.js
+++ b/client/src/components/brushableHistogram/index.js
@@ -461,7 +461,11 @@ class HistogramBrush extends React.Component {
               remove
             </Button>
           ) : null}
-          <Tooltip content="Use as color scale" position="bottom">
+          <Tooltip
+            content="Use as color scale"
+            position="bottom"
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
+          >
             <Button
               onClick={this.handleColorAction.bind(this)}
               active={colorAccessor === field}
diff --git a/client/src/components/categorical/category.js b/client/src/components/categorical/category.js
index 2353c729..f7fe4711 100644
--- a/client/src/components/categorical/category.js
+++ b/client/src/components/categorical/category.js
@@ -169,7 +169,11 @@ class Category extends React.Component {
               )}
             </span>
           </div>
-          <Tooltip content="Use as color scale" position="bottom">
+          <Tooltip
+            content="Use as color scale"
+            position="bottom"
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
+          >
             <Button
               data-testclass="colorby"
               data-testid={`colorby-${metadataField}`}
diff --git a/client/src/components/menubar/cellSetButtons.js b/client/src/components/menubar/cellSetButtons.js
index 5822c748..c9b34115 100644
--- a/client/src/components/menubar/cellSetButtons.js
+++ b/client/src/components/menubar/cellSetButtons.js
@@ -3,6 +3,7 @@ import React from "react";
 import { AnchorButton, Tooltip } from "@blueprintjs/core";
 import { connect } from "react-redux";
 import { World } from "../../util/stateManager";
+import { tooltipHoverOpenDelay } from "../../globals";
 
 @connect()
 class CellSetButton extends React.Component {
@@ -38,7 +39,8 @@ class CellSetButton extends React.Component {
     return (
       <Tooltip
         content="Save current selection for differential expression computation"
-        position="top"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
       >
         <AnchorButton
           type="button"
diff --git a/client/src/components/menubar/clip.js b/client/src/components/menubar/clip.js
index b9fb8cf8..b0049085 100644
--- a/client/src/components/menubar/clip.js
+++ b/client/src/components/menubar/clip.js
@@ -5,8 +5,10 @@ import {
   Button,
   Popover,
   NumericInput,
-  Icon
+  Icon,
+  Tooltip
 } from "@blueprintjs/core";
+import { tooltipHoverOpenDelay } from "../../globals";
 
 function Clip(props) {
   const {
@@ -40,14 +42,20 @@ function Clip(props) {
     >
       <Popover
         target={
-          <Button
-            type="button"
-            data-testid="visualization-settings"
-            className={`bp3-button bp3-icon-timeline-bar-chart ${activeClipClass}`}
-            style={{
-              cursor: "pointer"
-            }}
-          />
+          <Tooltip
+            content="Clip all continuous values to a percentile range"
+            position="bottom"
+            hoverOpenDelay={tooltipHoverOpenDelay}
+          >
+            <Button
+              type="button"
+              data-testid="visualization-settings"
+              className={`bp3-button bp3-icon-timeline-bar-chart ${activeClipClass}`}
+              style={{
+                cursor: "pointer"
+              }}
+            />
+          </Tooltip>
         }
         position={Position.BOTTOM_RIGHT}
         onOpening={handleClipOpening}
diff --git a/client/src/components/menubar/index.js b/client/src/components/menubar/index.js
index 7c807f10..3d7fb1ae 100644
--- a/client/src/components/menubar/index.js
+++ b/client/src/components/menubar/index.js
@@ -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={
diff --git a/client/src/components/menubar/undoRedoReset.js b/client/src/components/menubar/undoRedoReset.js
index 7baafcf7..415f2642 100644
--- a/client/src/components/menubar/undoRedoReset.js
+++ b/client/src/components/menubar/undoRedoReset.js
@@ -1,6 +1,7 @@
 // jshint esversion: 6
 import React from "react";
 import { AnchorButton, Tooltip } from "@blueprintjs/core";
+import { tooltipHoverOpenDelay } from "../../globals";
 
 function InformationMenu(props) {
   const {
@@ -13,7 +14,11 @@ function InformationMenu(props) {
   } = props;
   return (
     <div style={{ marginLeft: 10 }} className="bp3-button-group">
-      <Tooltip content="Undo" position="left">
+      <Tooltip
+        content="Undo"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
+      >
         <AnchorButton
           type="button"
           className="bp3-button bp3-icon-undo"
@@ -26,7 +31,11 @@ function InformationMenu(props) {
           }}
         />
       </Tooltip>
-      <Tooltip content="Redo" position="left">
+      <Tooltip
+        content="Redo"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
+      >
         <AnchorButton
           type="button"
           className="bp3-button bp3-icon-redo"
@@ -41,7 +50,8 @@ function InformationMenu(props) {
       </Tooltip>
       <Tooltip
         content="Reset cellxgene, clearing all selections"
-        position="left"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
       >
         <AnchorButton
           disabled={isResetDisabled()}
diff --git a/client/src/globals.js b/client/src/globals.js
index 1ff89b05..4c3774aa 100644
--- a/client/src/globals.js
+++ b/client/src/globals.js
@@ -63,6 +63,9 @@ export const leftSidebarSectionHeading = {
 };
 export const leftSidebarSectionPadding = 10;
 
+/* various timing-related behaviors */
+export const tooltipHoverOpenDelay = 1000; /* ms delay before a tooltip displays */
+
 let _API = {
   // prefix: "http://api.clustering.czi.technology/api/",
   // prefix: "http://tabulamuris.cxg.czi.technology/api/",