From 361f18bcc549e09fde2909f9c14f83bc8bcfffbe Mon Sep 17 00:00:00 2001
From: Michael Hoffmann <brennan.brisad@gmail.com>
Date: Tue, 30 Jul 2019 18:27:18 +0200
Subject: [PATCH] Add line and column number to flame graph and stack chart
 tooltips (#2173)

* Add line and column number to flame graph and stack chart tooltips

Fixes #2094

* Update FlameGraph snapshot test to include filename in the tooltips
---
 src/components/tooltip/CallNode.js                   | 12 +++++++++++-
 src/test/components/FlameGraph.test.js               |  9 +++++++++
 .../components/__snapshots__/FlameGraph.test.js.snap |  6 ++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/tooltip/CallNode.js b/src/components/tooltip/CallNode.js
index ae04ecee91..130f916285 100644
--- a/src/components/tooltip/CallNode.js
+++ b/src/components/tooltip/CallNode.js
@@ -169,6 +169,16 @@ export class TooltipCallNode extends React.PureComponent<Props> {
     // Only JavaScript functions have a filename.
     const fileNameIndex = thread.funcTable.fileName[funcIndex];
     if (fileNameIndex !== null) {
+      let fileName = thread.stringTable.getString(fileNameIndex);
+      const lineNumber = thread.funcTable.lineNumber[funcIndex];
+      if (lineNumber !== null) {
+        fileName += ':' + lineNumber;
+        const columnNumber = thread.funcTable.columnNumber[funcIndex];
+        if (columnNumber !== null) {
+          fileName += ':' + columnNumber;
+        }
+      }
+
       // Because of our use of Grid Layout, all our elements need to be direct
       // children of the grid parent. That's why we use arrays here, to add
       // the elements as direct children.
@@ -176,7 +186,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
         <div className="tooltipLabel" key="file">
           File:
         </div>,
-        thread.stringTable.getString(fileNameIndex),
+        fileName,
       ];
     } else {
       const resourceIndex = thread.funcTable.resource[funcIndex];
diff --git a/src/test/components/FlameGraph.test.js b/src/test/components/FlameGraph.test.js
index d3419e1959..ad79e1d6e0 100644
--- a/src/test/components/FlameGraph.test.js
+++ b/src/test/components/FlameGraph.test.js
@@ -189,6 +189,15 @@ function setupFlameGraph() {
     E[cat:Graphics]  G[cat:Graphics]
   `);
 
+  // Add some file and line number to the profile so that tooltips generate
+  // an interesting snapshot.
+  const { funcTable, stringTable } = profile.threads[0];
+  for (let funcIndex = 0; funcIndex < funcTable.length; funcIndex++) {
+    funcTable.lineNumber[funcIndex] = funcIndex + 10;
+    funcTable.columnNumber[funcIndex] = funcIndex + 100;
+    funcTable.fileName[funcIndex] = stringTable.indexForString('path/to/file');
+  }
+
   const store = storeWithProfile(profile);
 
   const renderResult = render(
diff --git a/src/test/components/__snapshots__/FlameGraph.test.js.snap b/src/test/components/__snapshots__/FlameGraph.test.js.snap
index 103e1b86ec..7a00ac3540 100644
--- a/src/test/components/__snapshots__/FlameGraph.test.js.snap
+++ b/src/test/components/__snapshots__/FlameGraph.test.js.snap
@@ -177,6 +177,12 @@ exports[`FlameGraph has a tooltip that matches the snapshot 1`] = `
           />
           DOM
         </div>
+        <div
+          class="tooltipLabel"
+        >
+          File:
+        </div>
+        path/to/file:10:100
       </div>
     </div>
   </div>