From f8d59d8dbdef1b4dfdbf3d790d645f78b5a4d491 Mon Sep 17 00:00:00 2001
From: E-Liang Tan <eliang@eliangtan.com>
Date: Thu, 6 Aug 2020 19:09:01 +0800
Subject: [PATCH] Fix root cause of #47 and improve tooltip styling

Tooltips would go offscreen because of the way `top` is defined. This
commit fixes that root cause by changing CanvasPage to position fixed so
that tooltips will be positioned relative to the DOM rather than the
CanvasPage div.

Undoes some of the changes made in #78 as this commit fixes the root
cause of the bug.
---
 src/CanvasPage.css           |  1 -
 src/EventTooltip.css         | 20 ++++++++++++++++++--
 src/EventTooltip.js          | 10 ++++++----
 src/utils/useSmartTooltip.js |  2 +-
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/CanvasPage.css b/src/CanvasPage.css
index 0a22311..e5d238a 100644
--- a/src/CanvasPage.css
+++ b/src/CanvasPage.css
@@ -4,5 +4,4 @@
   bottom: 0.5rem;
   left: 0.5rem;
   right: 0.5rem;
-  overflow: hidden;
 }
diff --git a/src/EventTooltip.css b/src/EventTooltip.css
index f60e832..789736c 100644
--- a/src/EventTooltip.css
+++ b/src/EventTooltip.css
@@ -1,5 +1,5 @@
 .Tooltip {
-  position: absolute;
+  position: fixed;
   display: inline-block;
   border-radius: 0.125rem;
   max-width: 300px;
@@ -31,12 +31,20 @@
 }
 
 .DetailsGridURL {
+  word-break: break-all;
+  max-height: 50vh;
   overflow: hidden;
 }
 
+.FlamechartStackFrameName {
+  word-break: break-word;
+  margin-left: 0.4rem;
+}
+
 .ComponentName {
   font-weight: bold;
-  word-wrap: break-word;
+  word-break: break-word;
+  margin-right: 0.4rem;
 }
 
 .ComponentStack {
@@ -61,3 +69,11 @@
   white-space: pre;
   --gradient-height: 5em;
 }
+
+.ReactMeasureLabel {
+  margin-left: 0.4rem;
+}
+
+.UserTimingLabel {
+  word-break: break-word;
+}
diff --git a/src/EventTooltip.js b/src/EventTooltip.js
index a33c559..b46a9c1 100644
--- a/src/EventTooltip.js
+++ b/src/EventTooltip.js
@@ -157,7 +157,8 @@ const TooltipFlamechartNode = ({
   } = stackFrame;
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {formatDuration(duration)} {trimComponentName(name)}
+      {formatDuration(duration)}
+      <span className={styles.FlamechartStackFrameName}>{name}</span>
       <div className={styles.DetailsGrid}>
         <div className={styles.DetailsGridLabel}>Timestamp:</div>
         <div>{formatTimestamp(timestamp)}</div>
@@ -202,7 +203,7 @@ const TooltipReactEvent = ({
         <span className={styles.ComponentName} style={{color}}>
           {trimComponentName(componentName)}
         </span>
-      )}{' '}
+      )}
       {label}
       <div className={styles.Divider} />
       <div className={styles.DetailsGrid}>
@@ -241,7 +242,8 @@ const TooltipReactMeasure = ({
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {formatDuration(duration)} {label}
+      {formatDuration(duration)}
+      <span className={styles.ReactMeasureLabel}>{label}</span>
       <div className={styles.Divider} />
       <div className={styles.DetailsGrid}>
         <div className={styles.DetailsGridLabel}>Timestamp:</div>
@@ -267,7 +269,7 @@ const TooltipUserTimingMark = ({
   const {name, timestamp} = mark;
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {name}
+      <span className={styles.UserTimingLabel}>{name}</span>
       <div className={styles.Divider} />
       <div className={styles.DetailsGrid}>
         <div className={styles.DetailsGridLabel}>Timestamp:</div>
diff --git a/src/utils/useSmartTooltip.js b/src/utils/useSmartTooltip.js
index 652721f..fede223 100644
--- a/src/utils/useSmartTooltip.js
+++ b/src/utils/useSmartTooltip.js
@@ -57,7 +57,7 @@ export default function useSmartTooltip({
         element.style.left = `${mouseX + TOOLTIP_OFFSET}px`;
       }
     }
-  });
+  }, [mouseX, mouseY, ref]);
 
   return ref;
 }