Merge "ui: display percentage of value in parent" into main

google · Aug 13, 2024 · e4df4ae · e4df4ae
2 parents 5818482 + 5f6bf4d
commit e4df4ae
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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(