improve tooltip rendering

package.json

@@ -77,6 +77,7 @@
     "react-datepicker": "^3.4.1",
     "react-dom": "^16.13.1",
     "react-flot": "^1.3.0",
+    "react-fps-stats": "^0.1.3",
     "react-keybind": "^0.8.1",
     "react-modal": "^3.12.1",
     "react-outside-click-handler": "^1.3.0",

webapp/javascript/components/FlameGraphRenderer.jsx

@@ -68,6 +68,7 @@ class FlameGraphRenderer extends React.Component {
       flamebearer: null,
     };
     this.canvasRef = React.createRef();
+    this.highlightRef = React.createRef();
     this.tooltipRef = React.createRef();
     this.currentJSONController = null;
   }
@@ -308,6 +309,7 @@ class FlameGraphRenderer extends React.Component {
       this.graphWidth / numTicks / (this.rangeMax - this.rangeMin);
     this.canvas.height = PX_PER_LEVEL * (levels.length - this.topLevel);
     this.canvas.style.height = `${this.canvas.height}px`;
+    this.canvas.style.cursor = "pointer";
 
     if (devicePixelRatio > 1) {
       this.canvas.width *= 2;
@@ -319,7 +321,7 @@ class FlameGraphRenderer extends React.Component {
     this.ctx.font =
       '400 12px system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
 
-    const formatter = this.createFormatter();
+    this.formatter = this.createFormatter();
     // i = level
     for (let i = 0; i < levels.length - this.topLevel; i++) {
       const level = levels[this.topLevel + i];
@@ -388,7 +390,7 @@ class FlameGraphRenderer extends React.Component {
 
         if (!collapsed && sw >= LABEL_THRESHOLD) {
           const percent = formatPercent(ratio);
-          const name = `${names[level[j + 3]]} (${percent}, ${formatter.format(numBarTicks, sampleRate)})`;
+          const name = `${names[level[j + 3]]} (${percent}, ${this.formatter.format(numBarTicks, sampleRate)})`;
 
           this.ctx.save();
           this.ctx.clip();
@@ -412,8 +414,6 @@ class FlameGraphRenderer extends React.Component {
       return;
     }
 
-    this.canvas.style.cursor = "pointer";
-
     const level = this.state.levels[i];
     const x = Math.max(this.tickToX(level[j]), 0);
     const y = (i - this.topLevel) * PX_PER_LEVEL;
@@ -422,52 +422,35 @@ class FlameGraphRenderer extends React.Component {
       this.graphWidth
     );
 
+    const highlightEl = this.highlightRef.current;
     const tooltipEl = this.tooltipRef.current;
     const numBarTicks = level[j + 1];
     const percent = formatPercent(numBarTicks / this.state.numTicks);
-
-    // a little hacky but this is here so that we can get tooltipWidth after text is updated.
     const tooltipTitle = this.state.names[level[j + 3]];
-    tooltipEl.children[0].innerText = tooltipTitle;
-    const tooltipWidth = tooltipEl.clientWidth;
 
-    const formatter = this.createFormatter();
+    // Before you change all of this to React consider performance implications.
+    // Doing this with setState leads to significant lag.
+    // See this issue https://github.com/pyroscope-io/pyroscope/issues/205
+    //   and this PR https://github.com/pyroscope-io/pyroscope/pull/266 for more info.
+    highlightEl.style.opacity = 1;
+    highlightEl.style.left = `${this.canvas.offsetLeft + x}px`;
+    highlightEl.style.top = `${this.canvas.offsetTop + y}px`;
+    highlightEl.style.width = `${sw}px`;
+    highlightEl.style.height = `${PX_PER_LEVEL}px`;
 
-    this.setState({
-      highlightStyle: {
-        display: "block",
-        left: `${this.canvas.offsetLeft + x}px`,
-        top: `${this.canvas.offsetTop + y}px`,
-        width: `${sw}px`,
-        height: `${PX_PER_LEVEL}px`,
-      },
-      tooltipStyle: {
-        display: "block",
-        left: `${
-          Math.min(
-            this.canvas.offsetLeft + e.nativeEvent.offsetX + 15 + tooltipWidth,
-            this.canvas.offsetLeft + this.graphWidth
-          ) - tooltipWidth
-        }px`,
-        top: `${this.canvas.offsetTop + e.nativeEvent.offsetY + 12}px`,
-      },
-      tooltipTitle,
-      tooltipSubtitle: `${percent}, ${numberWithCommas(
-        numBarTicks
-      )} samples, ${formatter.format(numBarTicks, this.state.sampleRate)}`,
-    });
+    tooltipEl.style.opacity = 1;
+    tooltipEl.style.left = `${e.clientX+12}px`;
+    tooltipEl.style.top = `${e.clientY+12}px`;
+
+    tooltipEl.children[0].innerText = tooltipTitle;
+    tooltipEl.children[1].innerText = `${percent}, ${numberWithCommas(
+      numBarTicks
+    )} samples, ${this.formatter.format(numBarTicks, this.state.sampleRate)}`;
   };
 
   mouseOutHandler = () => {
-    this.canvas.style.cursor = "";
-    this.setState({
-      highlightStyle: {
-        display: "none",
-      },
-      tooltipStyle: {
-        display: "none",
-      },
-    });
+    this.highlightRef.current.style.opacity = "0";
+    this.tooltipRef.current.style.opacity = "0";
   };
 
   updateSortBy = (newSortBy) => {
@@ -575,14 +558,16 @@ class FlameGraphRenderer extends React.Component {
             </span>
           </div>
         </div>
-        <div className="flamegraph-highlight" style={this.state.highlightStyle} />
+        <div
+          className="flamegraph-highlight"
+          ref={this.highlightRef}
+        />
         <div
           className="flamegraph-tooltip"
           ref={this.tooltipRef}
-          style={this.state.tooltipStyle}
         >
-          <div className="flamegraph-tooltip-name">{this.state.tooltipTitle}</div>
-          <div>{this.state.tooltipSubtitle}</div>
+          <div className="flamegraph-tooltip-name"></div>
+          <div></div>
         </div>
       </div>
     )

webapp/javascript/index.jsx

@@ -4,6 +4,7 @@ import React from "react";
 import { Provider } from "react-redux";
 import { ShortcutProvider } from "react-keybind";
 import { Router, Switch, Route } from "react-router-dom";
+import FPSStats from "react-fps-stats";
 import store from "./redux/store";
 
 import PyroscopeApp from "./components/PyroscopeApp";
@@ -12,6 +13,15 @@ import Sidebar from "./components/Sidebar";
 
 import history from "./util/history";
 
+let showFps = false;
+try {
+  // run this to enable FPS meter:
+  //   window.localStorage.setItem("showFps", true);
+  showFps = window.localStorage.getItem("showFps");
+} catch(e) {
+  console.error(e);
+}
+
 ReactDOM.render(
   <Provider store={store}>
     <Router history={history}>
@@ -27,6 +37,7 @@ ReactDOM.render(
         </Switch>
       </ShortcutProvider>
     </Router>
+    { showFps ? <FPSStats left={"auto"} top={"auto"} bottom={2} right={2} /> : "" }
   </Provider>,
   document.getElementById("root")
 );

webapp/sass/flamebearer.scss

@@ -19,14 +19,18 @@
   max-width: 80%;
 
   position: absolute;
+  top: 0;
+  left: 0;
   pointer-events: none;
   background: #ffffff;
   white-space: nowrap;
   box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   padding: 3px 5px;
   color: #333;
+  will-change: left, top, opacity;
   font-size: 12px;
+  opacity: 0;
 }
 
 .flamegraph-tooltip-name {
@@ -38,8 +42,12 @@
 
 .flamegraph-highlight {
   position: absolute;
+  top: 0;
+  left: 0;
   pointer-events: none;
   background: #ffffff40;
   // this makes it so that text doesn't get dimmer
   mix-blend-mode: overlay;
+  will-change: left, top, opacity;
+  opacity: 0;
 }

yarn.lock

@@ -7807,6 +7807,11 @@ react-flot@^1.3.0:
     deep-equal "^1.0.1"
     jquery "^3.1.1"
 
+react-fps-stats@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/react-fps-stats/-/react-fps-stats-0.1.3.tgz#c6adbbe27d9de5436730a5eb0136780df78f588d"
+  integrity sha512-/HS2dOP20L8X8Q+iHqQI1T5txXIL53yRt72iHuk2a2tIvhIKKDWfgCadBW2wwYkSiDTtPKe0cRwoGXVumrPy3A==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"