From 3833bada54428f71c07e67addcf11abdc7563af5 Mon Sep 17 00:00:00 2001
From: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
Date: Sat, 13 Jul 2019 16:52:00 -0700
Subject: [PATCH] style mini-histogram popups (#845)

* popup styling changes

* change to target hover only and change delay

* change popover wording

* change popover wording
---
 .../src/components/categorical/occupancy.js   | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/components/categorical/occupancy.js b/client/src/components/categorical/occupancy.js
index d0d8b148..aeb61553 100644
--- a/client/src/components/categorical/occupancy.js
+++ b/client/src/components/categorical/occupancy.js
@@ -130,7 +130,12 @@ class Occupancy extends React.Component {
   };
 
   render() {
-    const { colorAccessor, categoricalSelection } = this.props;
+    const {
+      colorAccessor,
+      categoricalSelection,
+      category,
+      categoryIndex
+    } = this.props;
 
     this.canvas?.getContext("2d").clearRect(0, 0, this._WIDTH, this._HEIGHT);
 
@@ -138,8 +143,9 @@ class Occupancy extends React.Component {
 
     return (
       <Popover
-        interactionKind={PopoverInteractionKind.HOVER}
-        hoverOpenDelay={1000}
+        interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
+        hoverOpenDelay={1500}
+        hoverCloseDelay={200}
         position={Position.LEFT}
         modifiers={{
           preventOverflow: { enabled: false },
@@ -170,11 +176,14 @@ class Occupancy extends React.Component {
         />
         <div key="text" style={{ fontFamily: "Roboto", fontSize: "14px" }}>
           <p style={{ margin: "0" }}>
-            These histograms show the distribution of{" "}
-            <strong>{colorAccessor}</strong> within each category.
+            This histograms shows the distribution of{" "}
+            <strong>{colorAccessor}</strong> within{" "}
+            <strong>{category.categoryValues[categoryIndex]}</strong>.
+            <br />
             <br />
             The x axis is the same for each histogram, while the y axis is
-            scaled to the highest bin within each histogram.
+            scaled to the largest bin within this histogram instead of the
+            largest bin within the whole category.
           </p>
         </div>
       </Popover>