Live memory page

Author: stevegolton

ui/src/components/widgets/charts/chart_option_builder.ts

@@ -127,6 +127,8 @@ export function buildTooltipOption(
   extra?: Record<string, unknown>,
 ): Record<string, unknown> {
   return {
+    showDelay: 0,
+    transitionDuration: 0,
     ...extra,
   };
 }
@@ -155,7 +157,7 @@ export function buildBrushOption(config: BrushConfig): Record<string, unknown> {
  * Theme colors are applied by EChartView.
  */
 export function buildLegendOption(
-  position: 'top' | 'right' = 'top',
+  position: 'top' | 'right' | 'bottom' = 'top',
 ): Record<string, unknown> {
   if (position === 'right') {
     return {
@@ -175,6 +177,14 @@ export function buildLegendOption(
       pageButtonPosition: 'end',
     };
   }
+  if (position === 'bottom') {
+    return {
+      show: true,
+      type: 'scroll',
+      bottom: 0,
+      textStyle: {fontSize: 10},
+    };
+  }
   return {
     show: true,
     top: 0,

ui/src/components/widgets/charts/line_chart.ts

@@ -166,6 +166,17 @@ export interface LineChartAttrs {
    * Note: When stacked, all series must be aligned to the same X values.
    */
   readonly stacked?: boolean;
+
+  /**
+   * Position of the legend. Defaults to 'bottom' when multiple series,
+   * 'top' otherwise.
+   */
+  readonly legendPosition?: 'top' | 'right' | 'bottom';
+
+  /**
+   * Callback when a series is clicked. Called with the series name.
+   */
+  readonly onSeriesClick?: (seriesName: string) => void;
 }
 
 export class LineChart implements m.ClassComponent<LineChartAttrs> {
@@ -208,12 +219,17 @@ function buildLineOption(
     lineWidth = 2,
     gridLines,
     stacked = false,
+    legendPosition,
   } = attrs;
   const fmtX = formatXValue ?? formatNumber;
   const fmtY = formatYValue ?? formatNumber;
 
   const displayLegend = showLegend ?? data.series.length > 1;
+  const legendPos =
+    legendPosition ?? (data.series.length > 1 ? 'bottom' : 'top');
 
+  // When stacking, reverse the series order so that the first series is drawn
+  // on top. This aligns the series order with the legend and tooltip.
   const series = data.series.map((s, i) => {
     const base: Record<string, unknown> = {
       type: 'line',
@@ -227,9 +243,13 @@ function buildLineOption(
       showSymbol: showPoints,
       symbolSize: 6,
       triggerLineEvent: true,
-      emphasis: {focus: 'series', itemStyle: {borderWidth: 2}},
+      emphasis: stacked
+        ? {focus: 'series', blurScope: 'global' as const}
+        : {focus: 'series', itemStyle: {borderWidth: 2}},
       stack: stacked ? 'total' : undefined,
-      areaStyle: stacked ? {} : undefined,
+      areaStyle: stacked ? {opacity: 0.8} : undefined,
+      // invisible wider hitbox
+      silent: false,
     };
 
     // Render selection highlight on the first series only.
@@ -243,8 +263,16 @@ function buildLineOption(
 
   const option = buildChartOption({
     grid: {
-      top: displayLegend ? 30 : 10,
-      bottom: xAxisLabel ? 40 : 25,
+      top: legendPos === 'top' && displayLegend ? 30 : 10,
+      right: legendPos === 'right' && displayLegend ? 150 : undefined,
+      bottom:
+        legendPos === 'bottom' && displayLegend
+          ? xAxisLabel
+            ? 70
+            : 55
+          : xAxisLabel
+            ? 40
+            : 25,
     },
     xAxis: {
       // Nasty ECharts quirk: when stacking, the xAxis must be type 'category'
@@ -282,16 +310,31 @@ function buildLineOption(
       ) => {
         if (!Array.isArray(params) || params.length === 0) return '';
         const xVal = params[0].data?.[0];
-        const header = xVal !== undefined ? `X: ${fmtX(xVal)}` : '';
-        const lines = params.map(
+        const header = xVal !== undefined ? fmtX(xVal) : '';
+        const ordered = stacked ? [...params].reverse() : params;
+        const lines = ordered.map(
           (p) =>
             `${p.marker ?? ''} ${p.seriesName ?? ''}: ${fmtY(p.data?.[1] ?? 0)}`,
         );
         return [header, ...lines].join('<br>');
       },
     },
     brush: attrs.onBrush ? {xAxisIndex: 0, brushType: 'lineX'} : undefined,
-    legend: displayLegend ? buildLegendOption() : {show: false},
+    legend: displayLegend
+      ? {
+          ...buildLegendOption(legendPos),
+          ...(stacked
+            ? {data: [...data.series].reverse().map((s) => s.name)}
+            : {}),
+          formatter: (name: string) => {
+            const s = data.series.find((sr) => sr.name === name);
+            if (s !== undefined && s.points.length > 0) {
+              return `${name}  ${fmtY(s.points[s.points.length - 1].y)}`;
+            }
+            return name;
+          },
+        }
+      : {show: false},
   });
 
   (option as Record<string, unknown>).series = series;
@@ -302,18 +345,16 @@ function buildLineEventHandlers(
   attrs: LineChartAttrs,
   data: LineChartData | undefined,
 ): ReadonlyArray<EChartEventHandler> {
+  const handlers: EChartEventHandler[] = [];
+
   if (
-    !attrs.onBrush ||
-    data === undefined ||
-    data.series.length === 0 ||
-    data.series.every((s) => s.points.length === 0)
+    attrs.onBrush &&
+    data !== undefined &&
+    data.series.length > 0 &&
+    data.series.some((s) => s.points.length > 0)
   ) {
-    return [];
-  }
-  const onBrush = attrs.onBrush;
-
-  return [
-    {
+    const onBrush = attrs.onBrush;
+    handlers.push({
       eventName: 'brushEnd',
       handler: (params) => {
         const range = extractBrushRange(params);
@@ -322,6 +363,21 @@ function buildLineEventHandlers(
           onBrush({start, end});
         }
       },
-    },
-  ];
+    });
+  }
+
+  if (attrs.onSeriesClick) {
+    const onSeriesClick = attrs.onSeriesClick;
+    handlers.push({
+      eventName: 'click',
+      handler: (params) => {
+        const p = params as {seriesName?: string};
+        if (p.seriesName !== undefined) {
+          onSeriesClick(p.seriesName);
+        }
+      },
+    });
+  }
+
+  return handlers;
 }

ui/src/components/widgets/charts/sankey.ts

@@ -15,7 +15,12 @@
 import m from 'mithril';
 import type {EChartsCoreOption} from 'echarts/core';
 import {formatNumber} from './chart_utils';
-import {EChartView, EChartEventHandler, EChartClickParams} from './echart_view';
+import {
+  type ThemeColors,
+  EChartView,
+  EChartEventHandler,
+  EChartClickParams,
+} from './echart_view';
 import {buildTooltipOption} from './chart_option_builder';
 
 export interface SankeyNode {
@@ -63,6 +68,7 @@ export class Sankey implements m.ClassComponent<SankeyChartAttrs> {
       className,
       empty: isEmpty,
       eventHandlers: buildSankeyEventHandlers(attrs, data),
+      resolveOption: applySankeyTheme,
     });
   }
 }
@@ -131,6 +137,7 @@ function buildSankeyOption(
         emphasis: {
           focus: 'adjacency',
         },
+        draggable: false,
         nodeWidth: 24,
         nodeGap: 16,
         layoutIterations: 0,
@@ -143,6 +150,28 @@ function buildSankeyOption(
   };
 }
 
+interface SankeySeries {
+  type?: string;
+  label?: {color?: unknown};
+}
+
+function applySankeyTheme(
+  option: EChartsCoreOption,
+  colors: ThemeColors,
+): EChartsCoreOption {
+  const series = (option as {series?: unknown[]}).series;
+  if (!Array.isArray(series) || series.length === 0) return option;
+
+  const sankey = series[0] as SankeySeries;
+  if (sankey.type !== 'sankey') return option;
+
+  if (sankey.label) {
+    sankey.label.color = colors.textColor;
+  }
+
+  return option;
+}
+
 function buildSankeyEventHandlers(
   attrs: SankeyChartAttrs,
   data: SankeyData | undefined,

ui/src/components/widgets/datagrid/datagrid.ts

@@ -2300,7 +2300,7 @@ export class DataGrid implements m.ClassComponent<DataGridAttrs> {
   }
 }
 
-export function renderCell(value: SqlValue, columnName: string) {
+export function renderCell(value: SqlValue, columnName?: string) {
   if (value === undefined) {
     return '';
   } else if (value instanceof Uint8Array) {
@@ -2310,7 +2310,7 @@ export function renderCell(value: SqlValue, columnName: string) {
         icon: Icons.Download,
         onclick: () =>
           download({
-            fileName: `${columnName}.blob`,
+            fileName: `${columnName ?? 'untitled'}.bin`,
             content: value,
           }),
       },

ui/src/core/default_plugins.ts

@@ -66,6 +66,7 @@ export const defaultPlugins = [
   'dev.perfetto.InstrumentsSamplesProfile',
   'dev.perfetto.KernelTrackEvent',
   'dev.perfetto.LinuxPerf',
+  'dev.perfetto.LiveMemory',
   'dev.perfetto.MetricsPage',
   'dev.perfetto.Notes',
   'dev.perfetto.PowerRails',

ui/src/plugins/dev.perfetto.LiveMemory/index.ts

@@ -0,0 +1,40 @@
+// Copyright (C) 2026 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import m from 'mithril';
+import {App} from '../../public/app';
+import {PerfettoPlugin} from '../../public/plugin';
+import {LiveMemoryPage} from './live_memory_page';
+import RecordPageV2 from '../dev.perfetto.RecordTraceV2';
+
+export default class implements PerfettoPlugin {
+  static readonly id = 'dev.perfetto.LiveMemory';
+
+  // The live memory page depends on record page imports only, not at runtime.
+  static readonly dependencies = [RecordPageV2];
+
+  static onActivate(app: App) {
+    app.sidebar.addMenuItem({
+      section: 'trace_files',
+      text: 'Memory Monitor',
+      href: '#!/memory_monitor',
+      icon: 'memory',
+      sortOrder: 2.5,
+    });
+    app.pages.registerPage({
+      route: '/memory_monitor',
+      render: () => m(LiveMemoryPage, {app}),
+    });
+  }
+}