blob: 7e013ccc1c6498c4530680fc02663a2b206cc644 [file] [log] [blame]
// Copyright (C) 2021 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 {Disposable, NullDisposable} from '../base/disposable';
import {assertExists} from '../base/logging';
import {clamp, floatEqual} from '../base/math_utils';
import {Time, time} from '../base/time';
import {exists} from '../base/utils';
import {Actions} from '../common/actions';
import {
cropText,
drawIncompleteSlice,
drawTrackHoverTooltip,
} from '../common/canvas_utils';
import {colorCompare} from '../core/color';
import {UNEXPECTED_PINK} from '../core/colorizer';
import {
LegacySelection,
SelectionKind,
getLegacySelection,
} from '../common/state';
import {featureFlags} from '../core/feature_flags';
import {raf} from '../core/raf_scheduler';
import {EngineProxy, Slice, SliceRect, Track} from '../public';
import {LONG, NUM} from '../trace_processor/query_result';
import {checkerboardExcept} from './checkerboard';
import {globals} from './globals';
import {PanelSize} from './panel';
import {DEFAULT_SLICE_LAYOUT, SliceLayout} from './slice_layout';
import {NewTrackArgs} from './track';
import {BUCKETS_PER_PIXEL, CacheKey} from '../core/timeline_cache';
import {uuidv4Sql} from '../base/uuid';
// The common class that underpins all tracks drawing slices.
export const SLICE_FLAGS_INCOMPLETE = 1;
export const SLICE_FLAGS_INSTANT = 2;
// Slices smaller than this don't get any text:
const SLICE_MIN_WIDTH_FOR_TEXT_PX = 5;
const SLICE_MIN_WIDTH_PX = 1 / BUCKETS_PER_PIXEL;
const SLICE_MIN_WIDTH_FADED_PX = 0.1;
const CHEVRON_WIDTH_PX = 10;
const DEFAULT_SLICE_COLOR = UNEXPECTED_PINK;
const INCOMPLETE_SLICE_WIDTH_PX = 20;
export const CROP_INCOMPLETE_SLICE_FLAG = featureFlags.register({
id: 'cropIncompleteSlice',
name: 'Crop incomplete slices',
description: 'Display incomplete slices in short form',
defaultValue: false,
});
export const FADE_THIN_SLICES_FLAG = featureFlags.register({
id: 'fadeThinSlices',
name: 'Fade thin slices',
description: 'Display sub-pixel slices in a faded way',
defaultValue: false,
});
// Exposed and standalone to allow for testing without making this
// visible to subclasses.
function filterVisibleSlices<S extends Slice>(
slices: S[],
start: time,
end: time,
): S[] {
// Here we aim to reduce the number of slices we have to draw
// by ignoring those that are not visible. A slice is visible iff:
// slice.endNsQ >= start && slice.startNsQ <= end
// It's allowable to include slices which aren't visible but we
// must not exclude visible slices.
// We could filter this.slices using this condition but since most
// often we should have the case where there are:
// - First a bunch of non-visible slices to the left of the viewport
// - Then a bunch of visible slices within the viewport
// - Finally a second bunch of non-visible slices to the right of the
// viewport.
// It seems more sensible to identify the left-most and right-most
// visible slices then 'slice' to select these slices and everything
// between.
// We do not need to handle non-ending slices (where dur = -1
// but the slice is drawn as 'infinite' length) as this is handled
// by a special code path. See 'incomplete' in maybeRequestData.
// While the slices are guaranteed to be ordered by timestamp we must
// consider async slices (which are not perfectly nested). This is to
// say if we see slice A then B it is guaranteed the A.start <= B.start
// but there is no guarantee that (A.end < B.start XOR A.end >= B.end).
// Due to this is not possible to use binary search to find the first
// visible slice. Consider the following situation:
// start V V end
// AAA CCC DDD EEEEEEE
// BBBBBBBBBBBB GGG
// FFFFFFF
// B is visible but A and C are not. In general there could be
// arbitrarily many slices between B and D which are not visible.
// You could binary search to find D (i.e. the first slice which
// starts after |start|) then work backwards to find B.
// The last visible slice is simpler, since the slices are sorted
// by timestamp you can binary search for the last slice such
// that slice.start <= end.
// One specific edge case that will come up often is when:
// For all slice in slices: slice.startNsQ > end (e.g. all slices are
// to the right).
// Since the slices are sorted by startS we can check this easily:
const maybeFirstSlice: S | undefined = slices[0];
if (exists(maybeFirstSlice) && maybeFirstSlice.startNs > end) {
return [];
}
return slices.filter((slice) => slice.startNs <= end && slice.endNs >= start);
}
export const filterVisibleSlicesForTesting = filterVisibleSlices;
// The minimal set of columns that any table/view must expose to render tracks.
// Note: this class assumes that, at the SQL level, slices are:
// - Not temporally overlapping (unless they are nested at inner depth).
// - Strictly stacked (i.e. a slice at depth N+1 cannot be larger than any
// slices at depth 0..N.
// If you need temporally overlapping slices, look at AsyncSliceTrack, which
// merges several tracks into one visual track.
export const BASE_ROW = {
id: NUM, // The slice ID, for selection / lookups.
ts: LONG, // True ts in nanoseconds.
dur: LONG, // True duration in nanoseconds. -1 = incomplete, 0 = instant.
tsQ: LONG, // Quantized start time in nanoseconds.
durQ: LONG, // Quantized duration in nanoseconds.
depth: NUM, // Vertical depth.
};
export type BaseRow = typeof BASE_ROW;
// These properties change @ 60FPS and shouldn't be touched by the subclass.
// since the Impl doesn't see every frame attempting to reason on them in a
// subclass will run in to issues.
interface SliceInternal {
x: number;
w: number;
}
// We use this to avoid exposing subclasses to the properties that live on
// SliceInternal. Within BaseSliceTrack the underlying storage and private
// methods use CastInternal<T['slice']> (i.e. whatever the subclass requests
// plus our implementation fields) but when we call 'virtual' methods that
// the subclass should implement we use just T['slice'] hiding x & w.
type CastInternal<S extends Slice> = S & SliceInternal;
// The meta-type which describes the types used to extend the BaseSliceTrack.
// Derived classes can extend this interface to override these types if needed.
export interface BaseSliceTrackTypes {
slice: Slice;
row: BaseRow;
}
export abstract class BaseSliceTrack<
T extends BaseSliceTrackTypes = BaseSliceTrackTypes,
> implements Track
{
protected sliceLayout: SliceLayout = {...DEFAULT_SLICE_LAYOUT};
protected engine: EngineProxy;
protected trackKey: string;
protected trackUuid = uuidv4Sql();
// This is the over-skirted cached bounds:
private slicesKey: CacheKey = CacheKey.zero();
// This is the currently 'cached' slices:
private slices = new Array<CastInternal<T['slice']>>();
// Incomplete slices (dur = -1). Rather than adding a lot of logic to
// the SQL queries to handle this case we materialise them one off
// then unconditionally render them. This should be efficient since
// there are at most |depth| slices.
private incomplete = new Array<CastInternal<T['slice']>>();
// The currently selected slice.
// TODO(hjd): We should fetch this from the underlying data rather
// than just remembering it when we see it.
private selectedSlice?: CastInternal<T['slice']>;
private extraSqlColumns: string[];
private charWidth = -1;
private hoverPos?: {x: number; y: number};
protected hoveredSlice?: T['slice'];
private hoverTooltip: string[] = [];
private maxDataDepth = 0;
// Computed layout.
private computedTrackHeight = 0;
private computedSliceHeight = 0;
private computedRowSpacing = 0;
// Cleanup hook for onInit.
private initState?: Disposable;
// Extension points.
// Each extension point should take a dedicated argument type (e.g.,
// OnSliceOverArgs {slice?: T['slice']}) so it makes future extensions
// non-API-breaking (e.g. if we want to add the X position).
// onInit hook lets you do asynchronous set up e.g. creating a table
// etc. We guarantee that this will be resolved before doing any
// queries using the result of getSqlSource(). All persistent
// state in trace_processor should be cleaned up when dispose is
// called on the returned hook. In the common case of where
// the data for this track is a SQL fragment this does nothing.
async onInit(): Promise<Disposable> {
return new NullDisposable();
}
// This should be an SQL expression returning all the columns listed
// mentioned by getRowSpec() excluding tsq and tsqEnd.
// For example you might return an SQL expression of the form:
// `select id, ts, dur, 0 as depth from foo where bar = 'baz'`
abstract getSqlSource(): string;
getRowSpec(): T['row'] {
return BASE_ROW;
}
onSliceOver(_args: OnSliceOverArgs<T['slice']>): void {}
onSliceOut(_args: OnSliceOutArgs<T['slice']>): void {}
onSliceClick(_args: OnSliceClickArgs<T['slice']>): void {}
// The API contract of onUpdatedSlices() is:
// - I am going to draw these slices in the near future.
// - I am not going to draw any slice that I haven't passed here first.
// - This is guaranteed to be called at least once on every global
// state update.
// - This is NOT guaranteed to be called on every frame. For instance you
// cannot use this to do some colour-based animation.
onUpdatedSlices(slices: Array<T['slice']>): void {
this.highlightHovererdAndSameTitle(slices);
}
// TODO(hjd): Remove.
drawSchedLatencyArrow(
_: CanvasRenderingContext2D,
_selectedSlice?: T['slice'],
): void {}
constructor(args: NewTrackArgs) {
this.engine = args.engine;
this.trackKey = args.trackKey;
// Work out the extra columns.
// This is the union of the embedder-defined columns and the base columns
// we know about (ts, dur, ...).
const allCols = Object.keys(this.getRowSpec());
const baseCols = Object.keys(BASE_ROW);
this.extraSqlColumns = allCols.filter((key) => !baseCols.includes(key));
}
setSliceLayout(sliceLayout: SliceLayout) {
if (
sliceLayout.isFlat &&
sliceLayout.depthGuess !== undefined &&
sliceLayout.depthGuess !== 0
) {
const {isFlat, depthGuess} = sliceLayout;
throw new Error(
`if isFlat (${isFlat}) then depthGuess (${depthGuess}) must be 0 if defined`,
);
}
this.sliceLayout = sliceLayout;
}
onFullRedraw(): void {
// Give a chance to the embedder to change colors and other stuff.
this.onUpdatedSlices(this.slices);
this.onUpdatedSlices(this.incomplete);
if (this.selectedSlice !== undefined) {
this.onUpdatedSlices([this.selectedSlice]);
}
}
protected isSelectionHandled(selection: LegacySelection): boolean {
// TODO(hjd): Remove when updating selection.
// We shouldn't know here about CHROME_SLICE. Maybe should be set by
// whatever deals with that. Dunno the namespace of selection is weird. For
// most cases in non-ambiguous (because most things are a 'slice'). But some
// others (e.g. THREAD_SLICE) have their own ID namespace so we need this.
const supportedSelectionKinds: SelectionKind[] = ['SLICE', 'CHROME_SLICE'];
return supportedSelectionKinds.includes(selection.kind);
}
private getTitleFont(): string {
const size = this.sliceLayout.titleSizePx ?? 12;
return `${size}px Roboto Condensed`;
}
private getSubtitleFont(): string {
const size = this.sliceLayout.subtitleSizePx ?? 8;
return `${size}px Roboto Condensed`;
}
private getTableName(): string {
return `slice_${this.trackUuid}`;
}
async onCreate(): Promise<void> {
this.initState = await this.onInit();
// TODO(hjd): Consider case below:
// raw:
// 0123456789
// [A did not end)
// [B ]
//
//
// quantised:
// 0123456789
// [A did not end)
// [ B ]
// Does it lead to odd results?
const extraCols = this.extraSqlColumns.join(',');
let queryRes;
if (CROP_INCOMPLETE_SLICE_FLAG.get()) {
queryRes = await this.engine.query(`
select
${this.depthColumn()},
ts as tsQ,
ts,
-1 as durQ,
-1 as dur,
id
${extraCols ? ',' + extraCols : ''}
from (${this.getSqlSource()})
where dur = -1;
`);
} else {
queryRes = await this.engine.query(`
select
${this.depthColumn()},
max(ts) as tsQ,
ts,
-1 as durQ,
-1 as dur,
id
${extraCols ? ',' + extraCols : ''}
from (${this.getSqlSource()})
group by 1
having dur = -1
`);
}
const incomplete = new Array<CastInternal<T['slice']>>(queryRes.numRows());
const it = queryRes.iter(this.getRowSpec());
for (let i = 0; it.valid(); it.next(), ++i) {
incomplete[i] = this.rowToSliceInternal(it);
}
this.onUpdatedSlices(incomplete);
this.incomplete = incomplete;
await this.engine.query(`
create virtual table ${this.getTableName()}
using __intrinsic_slice_mipmap((
select id, ts, dur, ${this.depthColumn()}
from (${this.getSqlSource()})
where dur != -1
));
`);
}
async onUpdate(): Promise<void> {
const {visibleTimeScale: timeScale, visibleWindowTime: vizTime} =
globals.timeline;
const windowSizePx = Math.max(1, timeScale.pxSpan.delta);
const rawStartNs = vizTime.start.toTime();
const rawEndNs = vizTime.end.toTime();
const rawSlicesKey = CacheKey.create(rawStartNs, rawEndNs, windowSizePx);
// If the visible time range is outside the cached area, requests
// asynchronously new data from the SQL engine.
await this.maybeRequestData(rawSlicesKey);
}
render(ctx: CanvasRenderingContext2D, size: PanelSize): void {
// TODO(hjd): fonts and colors should come from the CSS and not hardcoded
// here.
const {visibleTimeScale: timeScale, visibleWindowTime: vizTime} =
globals.timeline;
// In any case, draw whatever we have (which might be stale/incomplete).
let charWidth = this.charWidth;
if (charWidth < 0) {
// TODO(hjd): Centralize font measurement/invalidation.
ctx.font = this.getTitleFont();
charWidth = this.charWidth = ctx.measureText('dbpqaouk').width / 8;
}
// Filter only the visible slices. |this.slices| will have more slices than
// needed because maybeRequestData() over-fetches to handle small pan/zooms.
// We don't want to waste time drawing slices that are off screen.
const vizSlices = this.getVisibleSlicesInternal(
vizTime.start.toTime('floor'),
vizTime.end.toTime('ceil'),
);
let selection = getLegacySelection(globals.state);
if (!selection || !this.isSelectionHandled(selection)) {
selection = null;
}
const selectedId = selection ? (selection as {id: number}).id : undefined;
if (selectedId === undefined) {
this.selectedSlice = undefined;
}
let discoveredSelection: CastInternal<T['slice']> | undefined;
// Believe it or not, doing 4xO(N) passes is ~2x faster than trying to draw
// everything in one go. The key is that state changes operations on the
// canvas (e.g., color, fonts) dominate any number crunching we do in JS.
const sliceHeight = this.computedSliceHeight;
const padding = this.sliceLayout.padding;
const rowSpacing = this.computedRowSpacing;
// First pass: compute geometry of slices.
// pxEnd is the last visible pixel in the visible viewport. Drawing
// anything < 0 or > pxEnd doesn't produce any visible effect as it goes
// beyond the visible portion of the canvas.
const pxEnd = Math.floor(timeScale.hpTimeToPx(vizTime.end));
for (const slice of vizSlices) {
// Compute the basic geometry for any visible slice, even if only
// partially visible. This might end up with a negative x if the
// slice starts before the visible time or with a width that overflows
// pxEnd.
slice.x = timeScale.timeToPx(slice.startNs);
slice.w = timeScale.durationToPx(slice.durNs);
if (slice.flags & SLICE_FLAGS_INSTANT) {
// In the case of an instant slice, set the slice geometry on the
// bounding box that will contain the chevron.
slice.x -= CHEVRON_WIDTH_PX / 2;
slice.w = CHEVRON_WIDTH_PX;
} else if (slice.flags & SLICE_FLAGS_INCOMPLETE) {
let widthPx;
if (CROP_INCOMPLETE_SLICE_FLAG.get()) {
widthPx =
slice.x > 0
? Math.min(pxEnd, INCOMPLETE_SLICE_WIDTH_PX)
: Math.max(0, INCOMPLETE_SLICE_WIDTH_PX + slice.x);
slice.x = Math.max(slice.x, 0);
} else {
slice.x = Math.max(slice.x, 0);
widthPx = pxEnd - slice.x;
}
slice.w = widthPx;
} else {
// If the slice is an actual slice, intersect the slice geometry with
// the visible viewport (this affects only the first and last slice).
// This is so that text is always centered even if we are zoomed in.
// Visually if we have
// [ visible viewport ]
// [ slice ]
// The resulting geometry will be:
// [slice]
// So that the slice title stays within the visible region.
const sliceVizLimit = Math.min(slice.x + slice.w, pxEnd);
slice.x = Math.max(slice.x, 0);
slice.w = sliceVizLimit - slice.x;
}
if (selectedId === slice.id) {
discoveredSelection = slice;
}
}
// Second pass: fill slices by color.
const vizSlicesByColor = vizSlices.slice();
vizSlicesByColor.sort((a, b) =>
colorCompare(a.colorScheme.base, b.colorScheme.base),
);
let lastColor = undefined;
for (const slice of vizSlicesByColor) {
const color = slice.isHighlighted
? slice.colorScheme.variant.cssString
: slice.colorScheme.base.cssString;
if (color !== lastColor) {
lastColor = color;
ctx.fillStyle = color;
}
const y = padding + slice.depth * (sliceHeight + rowSpacing);
if (slice.flags & SLICE_FLAGS_INSTANT) {
this.drawChevron(ctx, slice.x, y, sliceHeight);
} else if (slice.flags & SLICE_FLAGS_INCOMPLETE) {
const w = CROP_INCOMPLETE_SLICE_FLAG.get()
? slice.w
: Math.max(slice.w - 2, 2);
drawIncompleteSlice(
ctx,
slice.x,
y,
w,
sliceHeight,
!CROP_INCOMPLETE_SLICE_FLAG.get(),
);
} else {
const w = Math.max(
slice.w,
FADE_THIN_SLICES_FLAG.get()
? SLICE_MIN_WIDTH_FADED_PX
: SLICE_MIN_WIDTH_PX,
);
ctx.fillRect(slice.x, y, w, sliceHeight);
}
}
// Pass 2.5: Draw fillRatio light section.
ctx.fillStyle = `#FFFFFF50`;
for (const slice of vizSlicesByColor) {
// Can't draw fill ratio on incomplete or instant slices.
if (slice.flags & (SLICE_FLAGS_INCOMPLETE | SLICE_FLAGS_INSTANT)) {
continue;
}
// Clamp fillRatio between 0.0 -> 1.0
const fillRatio = clamp(slice.fillRatio, 0, 1);
// Don't draw anything if the fill ratio is 1.0ish
if (floatEqual(fillRatio, 1)) {
continue;
}
// Work out the width of the light section
const sliceDrawWidth = Math.max(slice.w, SLICE_MIN_WIDTH_PX);
const lightSectionDrawWidth = sliceDrawWidth * (1 - fillRatio);
// Don't draw anything if the light section is smaller than 1 px
if (lightSectionDrawWidth < 1) {
continue;
}
const y = padding + slice.depth * (sliceHeight + rowSpacing);
const x = slice.x + (sliceDrawWidth - lightSectionDrawWidth);
ctx.fillRect(x, y, lightSectionDrawWidth, sliceHeight);
}
// Third pass, draw the titles (e.g., process name for sched slices).
ctx.textAlign = 'center';
ctx.font = this.getTitleFont();
ctx.textBaseline = 'middle';
for (const slice of vizSlices) {
if (
slice.flags & SLICE_FLAGS_INSTANT ||
!slice.title ||
slice.w < SLICE_MIN_WIDTH_FOR_TEXT_PX
) {
continue;
}
// Change the title color dynamically depending on contrast.
const textColor = slice.isHighlighted
? slice.colorScheme.textVariant
: slice.colorScheme.textBase;
ctx.fillStyle = textColor.cssString;
const title = cropText(slice.title, charWidth, slice.w);
const rectXCenter = slice.x + slice.w / 2;
const y = padding + slice.depth * (sliceHeight + rowSpacing);
const yDiv = slice.subTitle ? 3 : 2;
const yMidPoint = Math.floor(y + sliceHeight / yDiv) + 0.5;
ctx.fillText(title, rectXCenter, yMidPoint);
}
// Fourth pass, draw the subtitles (e.g., thread name for sched slices).
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
ctx.font = this.getSubtitleFont();
for (const slice of vizSlices) {
if (
slice.w < SLICE_MIN_WIDTH_FOR_TEXT_PX ||
!slice.subTitle ||
slice.flags & SLICE_FLAGS_INSTANT
) {
continue;
}
const rectXCenter = slice.x + slice.w / 2;
const subTitle = cropText(slice.subTitle, charWidth, slice.w);
const y = padding + slice.depth * (sliceHeight + rowSpacing);
const yMidPoint = Math.ceil(y + (sliceHeight * 2) / 3) + 1.5;
ctx.fillText(subTitle, rectXCenter, yMidPoint);
}
// Here we need to ensure we never draw a slice that hasn't been
// updated via the math above so we don't use this.selectedSlice
// directly.
if (discoveredSelection !== undefined) {
this.selectedSlice = discoveredSelection;
// Draw a thicker border around the selected slice (or chevron).
const slice = discoveredSelection;
const color = slice.colorScheme;
const y = padding + slice.depth * (sliceHeight + rowSpacing);
ctx.strokeStyle = color.base.setHSL({s: 100, l: 10}).cssString;
ctx.beginPath();
const THICKNESS = 3;
ctx.lineWidth = THICKNESS;
ctx.strokeRect(
slice.x,
y - THICKNESS / 2,
slice.w,
sliceHeight + THICKNESS,
);
ctx.closePath();
}
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
ctx,
this.getHeight(),
0,
size.width,
timeScale.timeToPx(this.slicesKey.start),
timeScale.timeToPx(this.slicesKey.end),
);
// TODO(hjd): Remove this.
// The only thing this does is drawing the sched latency arrow. We should
// have some abstraction for that arrow (ideally the same we'd use for
// flows).
this.drawSchedLatencyArrow(ctx, this.selectedSlice);
// If a slice is hovered, draw the tooltip.
const tooltip = this.hoverTooltip;
const height = this.getHeight();
if (
this.hoveredSlice !== undefined &&
tooltip.length > 0 &&
this.hoverPos !== undefined
) {
if (tooltip.length === 1) {
drawTrackHoverTooltip(ctx, this.hoverPos, height, tooltip[0]);
} else {
drawTrackHoverTooltip(
ctx,
this.hoverPos,
height,
tooltip[0],
tooltip[1],
);
}
} // if (hoveredSlice)
}
async onDestroy(): Promise<void> {
if (this.initState) {
this.initState.dispose();
this.initState = undefined;
}
if (this.engine.isAlive) {
await this.engine.execute(`drop table ${this.getTableName()}`);
}
}
// This method figures out if the visible window is outside the bounds of
// the cached data and if so issues new queries (i.e. sorta subsumes the
// onBoundsChange).
private async maybeRequestData(rawSlicesKey: CacheKey) {
if (rawSlicesKey.isCoveredBy(this.slicesKey)) {
return; // We have the data already, no need to re-query
}
// Determine the cache key:
const slicesKey = rawSlicesKey.normalize();
if (!rawSlicesKey.isCoveredBy(slicesKey)) {
throw new Error(
`Normalization error ${slicesKey.toString()} ${rawSlicesKey.toString()}`,
);
}
const resolution = rawSlicesKey.bucketSize;
const extraCols = this.extraSqlColumns.join(',');
const queryRes = await this.engine.query(`
SELECT
(z.ts / ${resolution}) * ${resolution} as tsQ,
((z.dur / ${resolution}) + 1) * ${resolution} as durQ,
s.ts as ts,
s.dur as dur,
s.id,
z.depth
${extraCols ? ',' + extraCols : ''}
FROM ${this.getTableName()}(
${slicesKey.start},
${slicesKey.end},
${slicesKey.bucketSize}
) z
CROSS JOIN (${this.getSqlSource()}) s using (id)
`);
// Here convert each row to a Slice. We do what we can do
// generically in the base class, and delegate the rest to the impl
// via that rowToSlice() abstract call.
const slices = new Array<CastInternal<T['slice']>>();
const it = queryRes.iter(this.getRowSpec());
let maxDataDepth = this.maxDataDepth;
this.slicesKey = slicesKey;
for (let i = 0; it.valid(); it.next(), ++i) {
if (it.dur === -1n) {
continue;
}
maxDataDepth = Math.max(maxDataDepth, it.depth);
// Construct the base slice. The Impl will construct and return
// the full derived T["slice"] (e.g. CpuSlice) in the
// rowToSlice() method.
slices.push(this.rowToSliceInternal(it));
}
this.maxDataDepth = maxDataDepth;
this.onUpdatedSlices(slices);
this.slices = slices;
raf.scheduleRedraw();
}
private rowToSliceInternal(row: T['row']): CastInternal<T['slice']> {
const slice = this.rowToSlice(row) as CastInternal<T['slice']>;
// If this is a more updated version of the selected slice throw
// away the old one.
if (this.selectedSlice?.id === slice.id) {
this.selectedSlice = undefined;
}
slice.x = -1;
slice.w = -1;
return slice;
}
rowToSlice(row: T['row']): T['slice'] {
let flags = 0;
if (row.dur === -1n) {
flags |= SLICE_FLAGS_INCOMPLETE;
} else if (row.dur === 0n) {
flags |= SLICE_FLAGS_INSTANT;
}
return {
id: row.id,
startNs: Time.fromRaw(row.tsQ),
endNs: Time.fromRaw(row.tsQ + row.durQ),
durNs: row.durQ,
ts: Time.fromRaw(row.ts),
dur: row.dur,
flags,
depth: row.depth,
title: '',
subTitle: '',
fillRatio: 1,
// The derived class doesn't need to initialize these. They are
// rewritten on every renderCanvas() call. We just need to initialize
// them to something.
colorScheme: DEFAULT_SLICE_COLOR,
isHighlighted: false,
};
}
private findSlice({x, y}: {x: number; y: number}): undefined | Slice {
const trackHeight = this.computedTrackHeight;
const sliceHeight = this.computedSliceHeight;
const padding = this.sliceLayout.padding;
const rowSpacing = this.computedRowSpacing;
// Need at least a draw pass to resolve the slice layout.
if (sliceHeight === 0) {
return undefined;
}
const depth = Math.floor((y - padding) / (sliceHeight + rowSpacing));
if (y >= padding && y <= trackHeight - padding) {
for (const slice of this.slices) {
if (slice.depth === depth && slice.x <= x && x <= slice.x + slice.w) {
return slice;
}
}
}
for (const slice of this.incomplete) {
const visibleTimeScale = globals.timeline.visibleTimeScale;
const startPx = CROP_INCOMPLETE_SLICE_FLAG.get()
? visibleTimeScale.timeToPx(slice.startNs)
: slice.x;
const cropUnfinishedSlicesCondition = CROP_INCOMPLETE_SLICE_FLAG.get()
? startPx + INCOMPLETE_SLICE_WIDTH_PX >= x
: true;
if (
slice.depth === depth &&
startPx <= x &&
cropUnfinishedSlicesCondition
) {
return slice;
}
}
return undefined;
}
private isFlat(): boolean {
return this.sliceLayout.isFlat ?? false;
}
private depthColumn(): string {
return this.isFlat() ? '0 as depth' : 'depth';
}
onMouseMove(position: {x: number; y: number}): void {
this.hoverPos = position;
this.updateHoveredSlice(this.findSlice(position));
}
onMouseOut(): void {
this.updateHoveredSlice(undefined);
}
private updateHoveredSlice(slice?: T['slice']): void {
const lastHoveredSlice = this.hoveredSlice;
this.hoveredSlice = slice;
// Only notify the Impl if the hovered slice changes:
if (slice === lastHoveredSlice) return;
if (this.hoveredSlice === undefined) {
globals.dispatch(Actions.setHighlightedSliceId({sliceId: -1}));
this.onSliceOut({slice: assertExists(lastHoveredSlice)});
this.hoverTooltip = [];
this.hoverPos = undefined;
} else {
const args: OnSliceOverArgs<T['slice']> = {slice: this.hoveredSlice};
globals.dispatch(
Actions.setHighlightedSliceId({sliceId: this.hoveredSlice.id}),
);
this.onSliceOver(args);
this.hoverTooltip = args.tooltip || [];
}
}
onMouseClick(position: {x: number; y: number}): boolean {
const slice = this.findSlice(position);
if (slice === undefined) {
return false;
}
const args: OnSliceClickArgs<T['slice']> = {slice};
this.onSliceClick(args);
return true;
}
private getVisibleSlicesInternal(
start: time,
end: time,
): Array<CastInternal<T['slice']>> {
// Slice visibility is computed using tsq / endTsq. The means an
// event at ts=100n can end up with tsq=90n depending on the bucket
// calculation. start and end here are the direct unquantised
// boundaries so when start=100n we should see the event at tsq=90n
// Ideally we would quantize start and end via the same calculation
// we used for slices but since that calculation happens in SQL
// this is hard. Instead we increase the range by +1 bucket in each
// direction. It's fine to overestimate since false positives
// (incorrectly marking a slice as visible) are not a problem it's
// only false negatives we have to avoid.
start = Time.sub(start, this.slicesKey.bucketSize);
end = Time.add(end, this.slicesKey.bucketSize);
let slices = filterVisibleSlices<CastInternal<T['slice']>>(
this.slices,
start,
end,
);
slices = slices.concat(this.incomplete);
// The selected slice is always visible:
if (this.selectedSlice && !this.slices.includes(this.selectedSlice)) {
slices.push(this.selectedSlice);
}
return slices;
}
private updateSliceAndTrackHeight() {
const lay = this.sliceLayout;
const rows = Math.max(this.maxDataDepth, lay.depthGuess ?? 0) + 1;
// Compute the track height.
let trackHeight;
if (lay.heightMode === 'FIXED') {
trackHeight = lay.fixedHeight;
} else {
trackHeight = 2 * lay.padding + rows * (lay.sliceHeight + lay.rowSpacing);
}
// Compute the slice height.
let sliceHeight: number;
let rowSpacing: number = lay.rowSpacing;
if (lay.heightMode === 'FIXED') {
const rowHeight = (trackHeight - 2 * lay.padding) / rows;
sliceHeight = Math.floor(Math.max(rowHeight - lay.rowSpacing, 0.5));
rowSpacing = Math.max(lay.rowSpacing, rowHeight - sliceHeight);
rowSpacing = Math.floor(rowSpacing * 2) / 2;
} else {
sliceHeight = lay.sliceHeight;
}
this.computedSliceHeight = sliceHeight;
this.computedTrackHeight = trackHeight;
this.computedRowSpacing = rowSpacing;
}
private drawChevron(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
h: number,
) {
// Draw an upward facing chevrons, in order: A, B, C, D, and back to A.
// . (x, y)
// A
// ###
// ##C##
// ## ##
// D B
// . (x + CHEVRON_WIDTH_PX, y + h)
const HALF_CHEVRON_WIDTH_PX = CHEVRON_WIDTH_PX / 2;
const midX = x + HALF_CHEVRON_WIDTH_PX;
ctx.beginPath();
ctx.moveTo(midX, y); // A.
ctx.lineTo(x + CHEVRON_WIDTH_PX, y + h); // B.
ctx.lineTo(midX, y + h - HALF_CHEVRON_WIDTH_PX); // C.
ctx.lineTo(x, y + h); // D.
ctx.lineTo(midX, y); // Back to A.
ctx.closePath();
ctx.fill();
}
// This is a good default implementation for highlighting slices. By default
// onUpdatedSlices() calls this. However, if the XxxSliceTrack impl overrides
// onUpdatedSlices() this gives them a chance to call the highlighting without
// having to reimplement it.
protected highlightHovererdAndSameTitle(slices: Slice[]) {
for (const slice of slices) {
const isHovering =
globals.state.highlightedSliceId === slice.id ||
(this.hoveredSlice && this.hoveredSlice.title === slice.title);
slice.isHighlighted = !!isHovering;
}
}
getHeight(): number {
this.updateSliceAndTrackHeight();
return this.computedTrackHeight;
}
getSliceRect(tStart: time, tEnd: time, depth: number): SliceRect | undefined {
this.updateSliceAndTrackHeight();
const {windowSpan, visibleTimeScale, visibleTimeSpan} = globals.timeline;
const pxEnd = windowSpan.end;
const left = Math.max(visibleTimeScale.timeToPx(tStart), 0);
const right = Math.min(visibleTimeScale.timeToPx(tEnd), pxEnd);
const visible = visibleTimeSpan.intersects(tStart, tEnd);
const totalSliceHeight = this.computedRowSpacing + this.computedSliceHeight;
return {
left,
width: Math.max(right - left, 1),
top: this.sliceLayout.padding + depth * totalSliceHeight,
height: this.computedSliceHeight,
visible,
};
}
}
// This is the argument passed to onSliceOver(args).
// This is really a workaround for the fact that TypeScript doesn't allow
// inner types within a class (whether the class is templated or not).
export interface OnSliceOverArgs<S extends Slice> {
// Input args (BaseSliceTrack -> Impl):
slice: S; // The slice being hovered.
// Output args (Impl -> BaseSliceTrack):
tooltip?: string[]; // One entry per row, up to a max of 2.
}
export interface OnSliceOutArgs<S extends Slice> {
// Input args (BaseSliceTrack -> Impl):
slice: S; // The slice which is not hovered anymore.
}
export interface OnSliceClickArgs<S extends Slice> {
// Input args (BaseSliceTrack -> Impl):
slice: S; // The slice which is clicked.
}