ui: Add bulk columnar decode to QueryResult and use it on track hot paths

Add a decodeColumns() API to QueryResult that decodes entire columns at
once into TypedArrays (Float64Array, BigInt64Array, etc.) instead of
row-by-row iteration. The return type is fully mapped from the spec so
callers get correctly-typed columns without casts.

Also adds an allocation-free varint reader (readVarint/varintToNumber/
varintToBigInt) used by decodeColumns to avoid per-cell LongBits
allocation from protobufjs.

Switch counter_track, slice_track, and cpu_freq_track rendering hot
paths to use the new columnar decode. Includes benchmarks and unit
tests.

Author: stevegolton

ui/src/components/sql_utils/thread_state.ts

@@ -172,7 +172,7 @@ export async function getThreadStateFromConstraints(
     // TODO(altimin): Consider fetching thread / process info using a single
     // query instead of one per row.
     result.push({
-      id: it.id as ThreadStateSqlId,
+      id: it.id as unknown as ThreadStateSqlId,
       schedSqlId: fromNumNull(it.sched_id) as SchedSqlId | undefined,
       ts: Time.fromRaw(it.ts),
       dur: it.dur,

ui/src/components/tracks/counter_track.ts

@@ -915,41 +915,47 @@ export class CounterTrack implements TrackRenderer {
       : undefined;
     const task = await deferChunkedTask({priority});
 
-    const it = queryRes.iter({
+    // Bulk-decode the whole result into columnar typed arrays in one pass. This
+    // is much faster than iter() for large counter tracks: it avoids the
+    // per-row valid()/next()/get round-trip, and (when the engine emits
+    // fixed-width int cells) lifts the integer columns straight off the wire
+    // buffer without a per-cell varint decode.
+    const cols = queryRes.decodeColumns({
       tsRel: NUM,
       minDisplayValue: NUM,
       maxDisplayValue: NUM,
       lastDisplayValue: NUM,
     });
+    const tsRelCol = cols.tsRel;
+    const minCol = cols.minDisplayValue;
+    const maxCol = cols.maxDisplayValue;
+    const lastCol = cols.lastDisplayValue;
 
     const numRows = queryRes.numRows();
-    const timestampsRel = new Float32Array(numRows);
-    const timestampsRelNext = new Float32Array(numRows);
-    const minDisplayValues = new Float32Array(numRows);
-    const maxDisplayValues = new Float32Array(numRows);
-    const lastDisplayValues = new Float32Array(numRows);
+    // Bulk Float64 -> Float32 conversion (native optimized code, no per-element
+    // JS loop).
+    const timestampsRel = new Float32Array(tsRelCol);
+    const minDisplayValues = new Float32Array(minCol);
+    const maxDisplayValues = new Float32Array(maxCol);
+    const lastDisplayValues = new Float32Array(lastCol);
+
+    // Compute min/max.
     let min = 0;
     let max = 0;
-
-    for (let row = 0; it.valid(); it.next(), row++) {
-      if (signal.isCancelled) throw TASK_CANCELLED;
-      if (row % 50 === 0 && task.shouldYield()) {
-        await task.yield();
-      }
-
-      timestampsRel[row] = it.tsRel;
-      minDisplayValues[row] = it.minDisplayValue;
-      maxDisplayValues[row] = it.maxDisplayValue;
-      lastDisplayValues[row] = it.lastDisplayValue;
-      min = Math.min(min, it.minDisplayValue);
-      max = Math.max(max, it.maxDisplayValue);
-
-      if (row > 0) {
-        // Fill in the next
-        timestampsRelNext[row - 1] = it.tsRel;
+    for (let row = 0; row < numRows; row++) {
+      if (row % 64 === 0) {
+        if (signal.isCancelled) throw TASK_CANCELLED;
+        if (task.shouldYield()) await task.yield();
       }
+      min = Math.min(min, minCol[row]);
+      max = Math.max(max, maxCol[row]);
     }
 
+    // timestampsRelNext[i] = timestampsRel[i+1], last element = end - start.
+    const timestampsRelNext = new Float32Array(numRows);
+    if (numRows > 1) {
+      timestampsRelNext.set(timestampsRel.subarray(1));
+    }
     if (numRows > 0) {
       timestampsRelNext[numRows - 1] = Number(end - start);
     }

ui/src/components/tracks/slice_track.ts

@@ -911,37 +911,44 @@ export class SliceTrack<T extends RowSchema> implements TrackRenderer {
     const depths = new Uint16Array(count);
     const instants = new Array<Instant<T>>(count);
 
-    const it = queryResult.iter({
+    // Bulk-decode all columns in one pass (much faster than per-row iter() for
+    // large tracks). The fixed columns come back as typed arrays; the schema
+    // columns are read per-row to build the `row` object the callbacks need.
+    const cols = queryResult.decodeColumns({
       __id: NUM,
       __ts: NUM,
       __count: NUM,
       __depth: NUM,
       ...dataset.schema,
     });
+    const idCol = cols.__id;
+    const tsCol = cols.__ts;
+    const countCol = cols.__count;
+    const depthCol = cols.__depth;
+    const schemaKeys = Object.keys(dataset.schema);
+    const schemaCols = schemaKeys.map(
+      (k) => cols[k] as unknown as ArrayLike<SqlValue>,
+    );
 
-    for (let i = 0; it.valid(); it.next(), ++i) {
+    for (let i = 0; i < count; i++) {
       if (i % 64 === 0) {
         if (signal.isCancelled) throw TASK_CANCELLED;
         if (task.shouldYield()) await task.yield();
       }
 
-      const id = it.__id;
-      const ts = it.__ts;
-      const count = it.__count;
-      const depth = it.__depth;
-      const title = this.getTitle(it);
-      const subtitle = this.getSubtitle(it);
-      const colorScheme = this.getColor(it, title);
-      const row = this.extractKeys(it, dataset.schema);
-
-      xs[i] = ts;
-      depths[i] = depth;
+      const row = this.buildSchemaRow(schemaKeys, schemaCols, i);
+      const title = this.getTitle(row);
+      const subtitle = this.getSubtitle(row);
+      const colorScheme = this.getColor(row, title);
+
+      xs[i] = tsCol[i];
+      depths[i] = depthCol[i];
       instants[i] = {
-        id,
+        id: idCol[i],
         title,
         subtitle,
         colorScheme,
-        count,
+        count: countCol[i],
         row,
       };
     }
@@ -1014,7 +1021,10 @@ export class SliceTrack<T extends RowSchema> implements TrackRenderer {
     const patterns = new Uint8Array(count);
     const slices = new Array<Slice<T>>(count);
 
-    const it = sliceQueryRes.iter({
+    // Bulk-decode all columns in one pass. Fixed columns become typed arrays;
+    // schema columns are read per-row to build the `row` object the callbacks
+    // need. __end is nullable (NUM_NULL) so comes back as a plain array.
+    const cols = sliceQueryRes.decodeColumns({
       __id: NUM,
       __start: NUM,
       __end: NUM_NULL,
@@ -1023,38 +1033,42 @@ export class SliceTrack<T extends RowSchema> implements TrackRenderer {
       __incomplete: NUM,
       ...dataset.schema,
     });
+    const idCol = cols.__id;
+    const startCol = cols.__start;
+    const endCol = cols.__end;
+    const countCol = cols.__count;
+    const depthCol = cols.__depth;
+    const incompleteCol = cols.__incomplete;
+    const schemaKeys = Object.keys(dataset.schema);
+    const schemaCols = schemaKeys.map((k) => cols[k]);
 
-    for (let i = 0; it.valid(); it.next(), ++i) {
+    for (let i = 0; i < count; i++) {
       if (i % 64 === 0) {
         if (signal.isCancelled) throw TASK_CANCELLED;
         if (task.shouldYield()) await task.yield();
       }
 
-      const count = it.__count;
-      const id = it.__id;
-      const start = it.__start;
-      const end = it.__end;
-      const depth = it.__depth;
-      const title = this.getTitle(it);
-      const subtitle = this.getSubtitle(it);
-      const colorScheme = this.getColor(it, title);
-      const isIncomplete = it.__incomplete === 1;
-      const row = this.extractKeys(it, dataset.schema);
-
-      starts[i] = start;
+      const row = this.buildSchemaRow(schemaKeys, schemaCols, i);
+      const title = this.getTitle(row);
+      const subtitle = this.getSubtitle(row);
+      const colorScheme = this.getColor(row, title);
+      const end = endCol[i];
+      const isIncomplete = incompleteCol[i] === 1;
+
+      starts[i] = startCol[i];
       // Incomplete slices are assigned a +Infinity end
       ends[i] = end === null ? Number.POSITIVE_INFINITY : end;
-      depths[i] = depth;
+      depths[i] = depthCol[i];
       patterns[i] = isIncomplete
         ? RECT_PATTERN_FADE_RIGHT
-        : (this.attrs.slicePattern?.(it) ?? 0);
+        : (this.attrs.slicePattern?.(row) ?? 0);
       slices[i] = {
-        id,
+        id: idCol[i],
         title,
         subtitle,
         colorScheme,
-        count,
-        fillRatio: this.attrs.fillRatio?.(it) ?? 1,
+        count: countCol[i],
+        fillRatio: this.attrs.fillRatio?.(row) ?? 1,
         row,
       };
     }
@@ -1069,16 +1083,23 @@ export class SliceTrack<T extends RowSchema> implements TrackRenderer {
     };
   }
 
-  // Efficiently copy a sebset of keys from a raw value based on some template.
-  // Note: Only the template's keys are used, the values are ignored (hence the
-  // unknown value types).
-  private extractKeys(from: T, template: Record<keyof T, unknown>): T {
-    const result = {} as T;
-    // eslint-disable-next-line guard-for-in
-    for (const k in template) {
-      result[k] = from[k];
+  // Builds a per-row object holding just the dataset.schema columns, read out
+  // of the columnar arrays returned by QueryResult.decodeColumns(). |keys| and
+  // |cols| are parallel arrays (key[k] is stored in cols[k]) precomputed once
+  // per query. This is the columnar replacement for the old per-row
+  // extractKeys(it, schema) copy: the resulting object is both stored as the
+  // slice/instant `row` and handed to the user-provided title/colorizer/pattern
+  // callbacks (which only ever read schema fields).
+  private buildSchemaRow(
+    keys: ReadonlyArray<string>,
+    cols: ReadonlyArray<ArrayLike<SqlValue>>,
+    i: number,
+  ): T {
+    const row: Record<string, SqlValue> = {};
+    for (let k = 0; k < keys.length; k++) {
+      row[keys[k]] = cols[k][i];
     }
-    return result;
+    return row as T;
   }
 
   private async deferChunkedTask() {

ui/src/plugins/dev.perfetto.CpuFreq/cpu_freq_track.ts

@@ -293,43 +293,60 @@ export class CpuFreqTrack implements TrackRenderer {
     const maxYs = new Float32Array(freqRows); // Min freq (lower value = higher Y after transform)
     const fills = new Float32Array(freqRows); // 1.0 when not idle, 0.0 when idle
 
-    const freqIt = freqResult.iter({
+    // Bulk-decode both results into columnar typed arrays in one pass each.
+    // This is faster than iter() for large tracks (no per-row valid()/next()
+    // round-trip) and, when the engine emits fixed-width int cells, lifts the
+    // integer columns straight off the wire buffer without a per-cell varint
+    // decode.
+    const freqCols = freqResult.decodeColumns({
       ts: LONG,
       minFreq: NUM,
       maxFreq: NUM,
       lastFreq: NUM,
     });
-    const idleIt = idleResult.iter({
+    const idleCols = idleResult.decodeColumns({
       lastIdle: NUM,
     });
-    for (let i = 0; freqIt.valid(); ++i, freqIt.next(), idleIt.next()) {
-      if (i % 50 === 0) {
+    const tsCol = freqCols.ts as BigInt64Array;
+    const minFreqCol = freqCols.minFreq as Float64Array;
+    const maxFreqCol = freqCols.maxFreq as Float64Array;
+    const lastFreqCol = freqCols.lastFreq as Float64Array;
+    const lastIdleCol = idleCols.lastIdle as Float64Array;
+
+    for (let i = 0; i < freqRows; ++i) {
+      if (i % 64 === 0) {
         if (signal.isCancelled) return TASK_CANCELLED;
         if (task.shouldYield()) {
           await task.yield();
         }
       }
 
-      timestamps[i] = freqIt.ts;
-      minFreqKHz[i] = freqIt.minFreq;
-      maxFreqKHz[i] = freqIt.maxFreq;
-      lastFreqKHz[i] = freqIt.lastFreq;
-      lastIdleValues[i] = idleIt.lastIdle;
+      const ts = tsCol[i];
+      const minFreq = minFreqCol[i];
+      const maxFreq = maxFreqCol[i];
+      const lastFreq = lastFreqCol[i];
+      const lastIdle = lastIdleCol[i];
+
+      timestamps[i] = ts;
+      minFreqKHz[i] = minFreq;
+      maxFreqKHz[i] = maxFreq;
+      lastFreqKHz[i] = lastFreq;
+      lastIdleValues[i] = lastIdle;
 
       // Populate step area buffers with raw values
-      const x = Number(freqIt.ts - start);
+      const x = Number(ts - start);
       xs[i] = Math.max(0, x); // Clamp to the start of the frame
-      ys[i] = freqIt.lastFreq;
+      ys[i] = lastFreq;
 
-      fills[i] = idleIt.lastIdle < 0 ? 1.0 : 0.0;
+      fills[i] = lastIdle < 0 ? 1.0 : 0.0;
       if (i > 0) {
         xnext[i - 1] = x;
         const yprev = ys[i - 1];
-        minYs[i] = Math.min(freqIt.minFreq, yprev);
-        maxYs[i] = Math.max(freqIt.maxFreq, yprev);
+        minYs[i] = Math.min(minFreq, yprev);
+        maxYs[i] = Math.max(maxFreq, yprev);
       } else {
-        minYs[i] = freqIt.minFreq;
-        maxYs[i] = freqIt.maxFreq;
+        minYs[i] = minFreq;
+        maxYs[i] = maxFreq;
       }
     }
 

ui/src/trace_processor/dataset.ts

@@ -17,6 +17,7 @@ import {getOrCreate} from '../base/utils';
 import {
   checkExtends,
   NUM,
+  type Row,
   type SqlValue,
   unionTypes,
   UNKNOWN,
@@ -66,9 +67,10 @@ export interface Dataset<T extends DatasetSchema = DatasetSchema> {
 
 /**
  * Defines a list of columns and types that define the shape of the data
- * represented by a dataset.
+ * represented by a dataset. Uses the same type as the query result spec
+ * so that dataset schemas can be passed directly to iter()/decodeColumns().
  */
-export type DatasetSchema = Readonly<Record<string, SqlValue>>;
+export type DatasetSchema = Row;
 
 /**
  * A filter used to express that a column must equal a value.
@@ -709,7 +711,10 @@ ${indent(chunk.join('\nUNION ALL\n'), 2)}
    * @param row - A row object containing __groupid and __partition values
    * @returns The source dataset(s) that produced this row
    */
-  resolveLineage(row: typeof lineageSchema): readonly Dataset[] {
+  resolveLineage(row: {
+    __groupid: number;
+    __partition: SqlValue;
+  }): readonly Dataset[] {
     const groupId = row.__groupid as number;
     const partitionValue = row.__partition;