Fix flamegraph percentages for the function list subtree views.

Author: mstange

src/components/flame-graph/Canvas.tsx

@@ -245,7 +245,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     // The graph is drawn from bottom to top, in order of increasing depth.
     for (let depth = startDepth; depth < endDepth; depth++) {
       // Get the timing information for a row of stack frames.
-      const stackTiming = flameGraphTiming[depth];
+      const stackTiming = flameGraphTiming.rows[depth];
 
       if (!stackTiming) {
         continue;
@@ -373,7 +373,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       return null;
     }
 
-    const stackTiming = flameGraphTiming[depth];
+    const stackTiming = flameGraphTiming.rows[depth];
     if (!stackTiming) {
       return null;
     }
@@ -383,8 +383,9 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     }
 
     const ratio =
-      stackTiming.end[flameGraphTimingIndex] -
-      stackTiming.start[flameGraphTimingIndex];
+      (stackTiming.end[flameGraphTimingIndex] -
+        stackTiming.start[flameGraphTimingIndex]) *
+      flameGraphTiming.tooltipRatioMultiplier;
 
     let percentage = formatPercent(ratio);
     if (tracedTiming) {
@@ -443,7 +444,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
 
     const { depth, flameGraphTimingIndex } = hoveredItem;
     const { flameGraphTiming } = this.props;
-    const stackTiming = flameGraphTiming[depth];
+    const stackTiming = flameGraphTiming.rows[depth];
     const callNodeIndex = stackTiming.callNode[flameGraphTimingIndex];
     return callNodeIndex;
   }
@@ -477,7 +478,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     const depth = Math.floor(
       maxStackDepthPlusOne - (y + viewportTop) / ROW_HEIGHT
     );
-    const stackTiming = flameGraphTiming[depth];
+    const stackTiming = flameGraphTiming.rows[depth];
 
     if (!stackTiming) {
       return null;

src/components/flame-graph/FlameGraph.tsx

@@ -120,7 +120,7 @@ class FlameGraphImpl
 
     const callNodeTable = callNodeInfo.getCallNodeTable();
     const depth = callNodeTable.depth[callNodeIndex];
-    const row = flameGraphTiming[depth];
+    const row = flameGraphTiming.rows[depth];
     const columnIndex = row.callNode.indexOf(callNodeIndex);
     return row.end[columnIndex] - row.start[columnIndex] > SELECTABLE_THRESHOLD;
   };
@@ -145,7 +145,7 @@ class FlameGraphImpl
 
     const callNodeTable = callNodeInfo.getCallNodeTable();
     const depth = callNodeTable.depth[callNodeIndex];
-    const row = flameGraphTiming[depth];
+    const row = flameGraphTiming.rows[depth];
     let columnIndex = row.callNode.indexOf(callNodeIndex);
 
     do {

src/profile-logic/call-tree.ts

@@ -51,6 +51,7 @@ export type CallTreeTimingsNonInverted = {
   self: Float64Array;
   total: Float64Array;
   rootTotalSummary: number; // sum of absolute values, this is used for computing percentages
+  flameGraphTotalForScaling: number; // used as 100% reference for flame graph box widths
 };
 
 type TotalAndHasChildren = { total: number; hasChildren: boolean };
@@ -762,7 +763,7 @@ export function computeCallNodeSelfAndSummary(
     rootTotalSummary += abs(callNodeSelf[callNodeIndex]);
   }
 
-  return { callNodeSelf, rootTotalSummary };
+  return { callNodeSelf, rootTotalSummary, flameGraphTotalForScaling: rootTotalSummary };
 }
 
 export function getSelfAndTotalForCallNode(
@@ -950,6 +951,7 @@ export function computeLowerWingTimings(
     timings: computeCallTreeTimingsInverted(callNodeInfo, {
       callNodeSelf: mappedSelf,
       rootTotalSummary,
+      flameGraphTotalForScaling: rootTotalSummary,
     }),
   };
 }
@@ -986,7 +988,7 @@ export function computeCallTreeTimingsNonInverted(
   callNodeSelfAndSummary: CallNodeSelfAndSummary
 ): CallTreeTimingsNonInverted {
   const callNodeTable = callNodeInfo.getCallNodeTable();
-  const { callNodeSelf, rootTotalSummary } = callNodeSelfAndSummary;
+  const { callNodeSelf, rootTotalSummary, flameGraphTotalForScaling } = callNodeSelfAndSummary;
 
   // Compute the following variables:
   const callNodeTotal = new Float64Array(callNodeTable.length);
@@ -1024,6 +1026,7 @@ export function computeCallTreeTimingsNonInverted(
     total: callNodeTotal,
     callNodeHasChildren,
     rootTotalSummary,
+    flameGraphTotalForScaling,
   };
 }
 
@@ -1426,5 +1429,5 @@ export function computeCallNodeTracedSelfAndSummary(
     }
   }
 
-  return { callNodeSelf, rootTotalSummary };
+  return { callNodeSelf, rootTotalSummary, flameGraphTotalForScaling: rootTotalSummary };
 }

src/profile-logic/flame-graph.ts

@@ -30,13 +30,28 @@ export type IndexIntoFlameGraphTiming = number;
  * selfRelative contains the self time relative to the total time,
  * which is used to color the drawn functions.
  */
-export type FlameGraphTiming = Array<{
+export type FlameGraphTimingRow = {
   start: UnitIntervalOfProfileRange[];
   end: UnitIntervalOfProfileRange[];
   selfRelative: Array<number>;
   callNode: IndexIntoCallNodeTable[];
   length: number;
-}>;
+};
+
+/**
+ * FlameGraphTiming is an array of rows plus a scalar adjustment factor.
+ *
+ * tooltipRatioMultiplier converts a box's (end - start) width to a percentage
+ * relative to all filtered samples. Multiply (end - start) by this to get the
+ * tooltip percentage. It equals flameGraphTotalForScaling / rootTotalSummary,
+ * which is 1.0 for normal flame graphs and < 1.0 for the upper wing (where
+ * boxes are scaled so that the root fills the full width, but tooltips still
+ * show percentages relative to all filtered samples).
+ */
+export type FlameGraphTiming = {
+  rows: FlameGraphTimingRow[];
+  tooltipRatioMultiplier: number;
+};
 
 /**
  * FlameGraphRows is an array of rows, where each row is an array of call node
@@ -232,7 +247,7 @@ export function getFlameGraphTiming(
   callNodeTable: CallNodeTable,
   callTreeTimings: CallTreeTimingsNonInverted
 ): FlameGraphTiming {
-  const { total, self, rootTotalSummary } = callTreeTimings;
+  const { total, self, rootTotalSummary, flameGraphTotalForScaling } = callTreeTimings;
   const { prefix } = callNodeTable;
 
   // This is where we build up the return value, one row at a time.
@@ -284,8 +299,8 @@ export function getFlameGraphTiming(
       startPerCallNode[nodeIndex] = currentStart;
 
       // Take the absolute value, as native deallocations can be negative.
-      const totalRelativeVal = abs(totalVal / rootTotalSummary);
-      const selfRelativeVal = abs(self[nodeIndex] / rootTotalSummary);
+      const totalRelativeVal = abs(totalVal / flameGraphTotalForScaling);
+      const selfRelativeVal = abs(self[nodeIndex] / flameGraphTotalForScaling);
 
       const currentEnd = currentStart + totalRelativeVal;
       start.push(currentStart);
@@ -305,5 +320,8 @@ export function getFlameGraphTiming(
     };
   }
 
-  return timing;
+  return {
+    rows: timing,
+    tooltipRatioMultiplier: flameGraphTotalForScaling / rootTotalSummary,
+  };
 }

src/selectors/per-thread/stack-sample.ts

@@ -465,12 +465,20 @@ export function getStackAndSampleSelectorsPerThread(
         regularTreeSelfAndSummary
       ) => {
         const { rootTotalSummary } = regularTreeSelfAndSummary;
-        const { callNodeSelf } = CallTree.computeCallNodeSelfAndSummary(
+        const upperWingSelfAndSummary = CallTree.computeCallNodeSelfAndSummary(
           samples,
           sampleIndexToCallNodeIndex,
           callNodeInfo.getCallNodeTable().length
         );
-        return { rootTotalSummary, callNodeSelf };
+        const { callNodeSelf } = upperWingSelfAndSummary;
+        // Use the upper wing's own total as the flame graph scaling reference,
+        // so that the root node (the selected function) fills the full flame
+        // graph width. The rootTotalSummary from the regular tree is kept for
+        // percentage display, so tooltips show percentages relative to all
+        // filtered samples (e.g. "80%" if 800 of 1000 samples contain the
+        // selected function).
+        const flameGraphTotalForScaling = upperWingSelfAndSummary.rootTotalSummary;
+        return { rootTotalSummary, callNodeSelf, flameGraphTotalForScaling };
       }
     );
 
@@ -723,7 +731,23 @@ export function getStackAndSampleSelectorsPerThread(
       _getSelfWingSampleIndexToCallNodeIndex,
       (state: State) =>
         _getSelfWingCallNodeInfo(state).getCallNodeTable().length,
-      CallTree.computeCallNodeSelfAndSummary
+      getCallNodeSelfAndSummary,
+      (samples, sampleIndexToCallNodeIndex, callNodeCount, regularTreeSelfAndSummary) => {
+        const selfWingSelfAndSummary = CallTree.computeCallNodeSelfAndSummary(
+          samples,
+          sampleIndexToCallNodeIndex,
+          callNodeCount
+        );
+        // Keep flameGraphTotalForScaling as the self wing's own total so the
+        // root fills the full flame graph width. Override rootTotalSummary with
+        // the regular tree's value so tooltips show percentages relative to all
+        // filtered samples.
+        return {
+          callNodeSelf: selfWingSelfAndSummary.callNodeSelf,
+          flameGraphTotalForScaling: selfWingSelfAndSummary.rootTotalSummary,
+          rootTotalSummary: regularTreeSelfAndSummary.rootTotalSummary,
+        };
+      }
     );
 
   const _getSelfWingCallTreeTimings: Selector<CallTree.CallTreeTimings> =

src/test/store/actions.test.ts

@@ -206,7 +206,7 @@ describe('selectors/getFlameGraphTiming', function () {
       store.getState()
     );
 
-    return flameGraphTiming.map(({ callNode, end, length, start }) => {
+    return flameGraphTiming.rows.map(({ callNode, end, length, start }) => {
       const lines = [];
       for (let i = 0; i < length; i++) {
         const callNodeIndex = callNode[i];
@@ -240,7 +240,7 @@ describe('selectors/getFlameGraphTiming', function () {
       store.getState()
     );
 
-    return flameGraphTiming.map(({ selfRelative, callNode, length }) => {
+    return flameGraphTiming.rows.map(({ selfRelative, callNode, length }) => {
       const lines = [];
       for (let i = 0; i < length; i++) {
         const callNodeIndex = callNode[i];

src/types/profile-derived.ts

@@ -729,6 +729,12 @@ export type CallNodeSelfAndSummary = {
   // The sum of absolute values in callNodeSelf.
   // This is used for computing the percentages displayed in the call tree.
   rootTotalSummary: number;
+  // The total used as the 100% reference for flame graph box widths.
+  // Usually equals rootTotalSummary, but for the upper wing it is set to the
+  // total of samples that contain the selected function, so that the root node
+  // fills the full flame graph width while percentages remain relative to all
+  // filtered samples.
+  flameGraphTotalForScaling: number;
 };
 
 /**