From 5f6bf4d145e926ad1655b6f18e93d5f5fa71e36f Mon Sep 17 00:00:00 2001
From: Lalit Maganti <lalitm@google.com>
Date: Fri, 9 Aug 2024 09:22:02 +0100
Subject: [PATCH] ui: display percentage of value in parent

Fixes: 357127581
Change-Id: I9caca2cfd93a4c626bbb258dc383a916bf9badfe
---
 .../perfetto_sql/stdlib/viz/flamegraph.sql    |  2 ++
 ui/src/core/query_flamegraph.ts               |  2 ++
 ui/src/widgets/flamegraph.ts                  | 35 +++++++++++++++++--
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/trace_processor/perfetto_sql/stdlib/viz/flamegraph.sql b/src/trace_processor/perfetto_sql/stdlib/viz/flamegraph.sql
index 3d6ac3a794..cd796cb9f1 100644
--- a/src/trace_processor/perfetto_sql/stdlib/viz/flamegraph.sql
+++ b/src/trace_processor/perfetto_sql/stdlib/viz/flamegraph.sql
@@ -385,6 +385,7 @@ AS (
     _metasql_map_join_column_list!($grouped, _viz_flamegraph_s_prefix),
     s.value AS selfValue,
     s.cumulativeValue,
+    p.cumulativeValue AS parentCumulativeValue,
     s.depth,
     g.xStart,
     g.xEnd
@@ -403,5 +404,6 @@ AS (
     )
   ) g
   JOIN $merged s USING (id)
+  LEFT JOIN $merged p ON s.parentId = p.id
   ORDER BY rootDistance, xStart
 );
diff --git a/ui/src/core/query_flamegraph.ts b/ui/src/core/query_flamegraph.ts
index 8e600af324..802aebcdcb 100644
--- a/ui/src/core/query_flamegraph.ts
+++ b/ui/src/core/query_flamegraph.ts
@@ -383,6 +383,7 @@ async function computeFlamegraphTree(
     name: STR,
     selfValue: NUM,
     cumulativeValue: NUM,
+    parentCumulativeValue: NUM_NULL,
     xStart: NUM,
     xEnd: NUM,
     ...Object.fromEntries(unaggCols.map((m) => [m, STR_NULL])),
@@ -408,6 +409,7 @@ async function computeFlamegraphTree(
       name: it.name,
       selfValue: it.selfValue,
       cumulativeValue: it.cumulativeValue,
+      parentCumulativeValue: it.parentCumulativeValue ?? undefined,
       xStart: it.xStart,
       xEnd: it.xEnd,
       properties,
diff --git a/ui/src/widgets/flamegraph.ts b/ui/src/widgets/flamegraph.ts
index 22722f61a7..42b294935c 100644
--- a/ui/src/widgets/flamegraph.ts
+++ b/ui/src/widgets/flamegraph.ts
@@ -88,6 +88,7 @@ export interface FlamegraphQueryData {
     readonly name: string;
     readonly selfValue: number;
     readonly cumulativeValue: number;
+    readonly parentCumulativeValue?: number;
     readonly properties: ReadonlyMap<string, string>;
     readonly xStart: number;
     readonly xEnd: number;
@@ -591,7 +592,13 @@ export class Flamegraph implements m.ClassComponent<FlamegraphAttrs> {
       );
     }
     const {queryIdx} = node.source;
-    const {name, cumulativeValue, selfValue, properties} = nodes[queryIdx];
+    const {
+      name,
+      cumulativeValue,
+      selfValue,
+      parentCumulativeValue,
+      properties,
+    } = nodes[queryIdx];
     const filterButtonClick = (filter: string) => {
       this.rawFilters = addFilter(this.rawFilters, filter);
       this.attrs.onFiltersChanged(
@@ -600,23 +607,45 @@ export class Flamegraph implements m.ClassComponent<FlamegraphAttrs> {
       this.tooltipPos = undefined;
       scheduleFullRedraw();
     };
+
     const percent = displayPercentage(
       cumulativeValue,
       unfilteredCumulativeValue,
     );
     const selfPercent = displayPercentage(selfValue, unfilteredCumulativeValue);
+
+    let percentText = `all: ${percent}`;
+    let selfPercentText = `all: ${selfPercent}`;
+    if (parentCumulativeValue !== undefined) {
+      const parentPercent = displayPercentage(
+        cumulativeValue,
+        parentCumulativeValue,
+      );
+      percentText += `, parent: ${parentPercent}`;
+      const parentSelfPercent = displayPercentage(
+        selfValue,
+        parentCumulativeValue,
+      );
+      selfPercentText += `, parent: ${parentSelfPercent}`;
+    }
     return m(
       'div',
       m('.tooltip-bold-text', name),
       m(
         '.tooltip-text-line',
         m('.tooltip-bold-text', 'Cumulative:'),
-        m('.tooltip-text', `${displaySize(cumulativeValue, unit)}, ${percent}`),
+        m(
+          '.tooltip-text',
+          `${displaySize(cumulativeValue, unit)} (${percentText})`,
+        ),
       ),
       m(
         '.tooltip-text-line',
         m('.tooltip-bold-text', 'Self:'),
-        m('.tooltip-text', `${displaySize(selfValue, unit)}, ${selfPercent}`),
+        m(
+          '.tooltip-text',
+          `${displaySize(selfValue, unit)} (${selfPercentText})`,
+        ),
       ),
       Array.from(properties, ([key, value]) => {
         return m(