From 8dbe7080750c1a2ccadf47df2350dca15050d4dc Mon Sep 17 00:00:00 2001 From: Sanjay Ghemawat Date: Wed, 25 Sep 2024 14:12:11 -0700 Subject: [PATCH] Display hovered box details immediately. Display the details (name + samples) of the currently hovered box above the flame graph. If no box is currently being hovered over, we display the total samples in the flame graph. --- internal/driver/html/stacks.css | 22 ++++++++++++++++++---- internal/driver/html/stacks.html | 5 ++++- internal/driver/html/stacks.js | 32 +++++++++++++++++++++++++------- 3 files changed, 47 insertions(+), 12 deletions(-) diff --git a/internal/driver/html/stacks.css b/internal/driver/html/stacks.css index 34c54ebb..1df4f719 100644 --- a/internal/driver/html/stacks.css +++ b/internal/driver/html/stacks.css @@ -14,12 +14,26 @@ body { width: 100%; position: relative; /* Allows absolute positioning of child boxes */ } -/* Shows details of frame that is under the mouse */ +/* Holder for current frame details. */ #current-details { - position: absolute; - top: 5px; - right: 5px; + position: relative; + background: #eee; /* Light grey gives better contrast with boxes */ font-size: 12pt; + padding: 0 4px; + width: 100%; +} +/* Shows details of frame that is under the mouse */ +#current-details-left { + float: left; + max-width: 60%; + white-space: nowrap; + overflow-x: hidden; +} +#current-details-right { + float: right; + max-width: 40%; + white-space: nowrap; + overflow-x: hidden; } /* Background of a single flame-graph frame */ .boxbg { diff --git a/internal/driver/html/stacks.html b/internal/driver/html/stacks.html index c2f8cf26..a4e4077e 100644 --- a/internal/driver/html/stacks.html +++ b/internal/driver/html/stacks.html @@ -8,9 +8,12 @@ {{template "header" .}} +
+
+
 
+
-