From 6e76851c5ad7a2c746750ff1b3e7ca0768d31ee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Fri, 24 Aug 2018 14:28:51 +0200
Subject: [PATCH] Fix tooltip position when zoomed using +/- buttons

Previously zooming the entire graph would cause tooltips to show up in
the wrong place. Now, the zoomTransform is applied to the tooltip
position as well.

This patch also scales the font size inside tooltips. When zooming in,
the font size grows similarly to the font inside the stack frames. There
are some arbitrary upper and lower bounds on the font size, trying to
keep it large enough to be readable on low zoom levels, and small enough
to fit on a screen on high zoom levels.
---
 index.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/index.js b/index.js
index d61c94f..5e4c436 100644
--- a/index.js
+++ b/index.js
@@ -486,21 +486,28 @@ function flameGraph (opts) {
     var wrapper = d3.select(element)
     var canvas = wrapper.select('canvas').node()
     var transform = d3.zoomTransform(canvas)
-    var x = scaleToWidth(node.x0) + canvas.getBoundingClientRect().left
+    var x = transform.applyX(scaleToWidth(node.x0)) + canvas.getBoundingClientRect().left
     // y = the bottom of the node - the scroll from the top
     // (because the tooltip uses absolute positioning)
-    var y = h - frameDepth(node) * c - wrapper.node().scrollTop
+    var y = transform.applyY(h - frameDepth(node) * c) - wrapper.node().scrollTop
     var label = tooltipLabel(node)
 
     var tooltip = d3.select(element).select('.d3-flame-graph-tooltip')
       .style('top', y + 'px')
       .style('display', 'block')
+      // scale up the font size with the graph zoom level,
+      // but don't scale it down below 10pt because it'd be unreadable,
+      // and don't go above 25pt which should be huge enough for even the
+      // largest screens
+      .style('font-size', Math.max(10, Math.min(25, transform.k * 10)) + 'pt')
       .html(label)
 
-    if (x + 300 > window.innerWidth) {
-      // 300px is an arbitrary cut off point. if it's "too near"
-      // to the right edge, instead align with the rightmost end of
-      // the node
+    // 300px is an arbitrary cut off point. if it's "too near"
+    // to the right edge, instead align with the rightmost end of
+    // the node
+    // The 300px is scaled along with the rest of the graph to make sure that
+    // tooltips don't get super squished at higher zoom levels
+    if (x + (transform.k * 300) > window.innerWidth) {
       var right = canvas.getBoundingClientRect().left + w
       x = window.innerWidth - right + scaleToWidth(1 - node.x1)
       tooltip.style('left', 'auto').style('right', x + 'px')