ui/src/frontend/flow_events_renderer.ts - third_party/perfetto - Git at Google

 // Copyright (C) 2020 The Android Open Source Project
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use size 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 {time} from '../base/time';
 import {exists} from '../base/utils';
 import {TrackState} from '../common/state';
 import {SliceRect} from '../public';

 import {TRACK_SHELL_WIDTH} from './css_constants';
 import {ALL_CATEGORIES, getFlowCategories} from './flow_events_panel';
 import {Flow, FlowPoint, globals} from './globals';
 import {Panel} from './panel_container';

 const TRACK_GROUP_CONNECTION_OFFSET = 5;
 const TRIANGLE_SIZE = 5;
 const CIRCLE_RADIUS = 3;
 const BEZIER_OFFSET = 30;

 const CONNECTED_FLOW_HUE = 10;
 const SELECTED_FLOW_HUE = 230;

 const DEFAULT_FLOW_WIDTH = 2;
 const FOCUSED_FLOW_WIDTH = 3;

 const HIGHLIGHTED_FLOW_INTENSITY = 45;
 const FOCUSED_FLOW_INTENSITY = 55;
 const DEFAULT_FLOW_INTENSITY = 70;

 type LineDirection = 'LEFT' | 'RIGHT' | 'UP' | 'DOWN';
 type ConnectionType = 'TRACK' | 'TRACK_GROUP';

 interface TrackPanelInfo {
   panel: Panel;
   yStart: number;
 }

 interface TrackGroupPanelInfo {
   panel: Panel;
   yStart: number;
   height: number;
 }

 function getTrackIds(track: TrackState): number[] {
   const trackDesc = globals.trackManager.resolveTrackInfo(track.uri);
   return trackDesc?.trackIds ?? [];
 }

 export class FlowEventsRendererArgs {
   trackIdToTrackPanel: Map<number, TrackPanelInfo>;
   groupIdToTrackGroupPanel: Map<string, TrackGroupPanelInfo>;

   constructor(public canvasWidth: number, public canvasHeight: number) {
     this.trackIdToTrackPanel = new Map<number, TrackPanelInfo>();
     this.groupIdToTrackGroupPanel = new Map<string, TrackGroupPanelInfo>();
   }

   registerPanel(panel: Panel, yStart: number, height: number) {
     if (exists(panel.trackKey)) {
       const track = globals.state.tracks[panel.trackKey];
       for (const trackId of getTrackIds(track)) {
         this.trackIdToTrackPanel.set(trackId, {panel, yStart});
       }
     } else if (exists(panel.trackGroupId)) {
       this.groupIdToTrackGroupPanel.set(panel.trackGroupId, {
         panel,
         yStart,
         height,
       });
     }
   }
 }

 export class FlowEventsRenderer {
   private getTrackGroupIdByTrackId(trackId: number): string | undefined {
     const trackKey = globals.trackManager.trackKeyByTrackId.get(trackId);
     return trackKey ? globals.state.tracks[trackKey].trackGroup : undefined;
   }

   private getTrackGroupYCoordinate(
     args: FlowEventsRendererArgs,
     trackId: number,
   ): number | undefined {
     const trackGroupId = this.getTrackGroupIdByTrackId(trackId);
     if (!trackGroupId) {
       return undefined;
     }
     const trackGroupInfo = args.groupIdToTrackGroupPanel.get(trackGroupId);
     if (!trackGroupInfo) {
       return undefined;
     }
     return (
       trackGroupInfo.yStart +
       trackGroupInfo.height -
       TRACK_GROUP_CONNECTION_OFFSET
     );
   }

   private getTrackYCoordinate(
     args: FlowEventsRendererArgs,
     trackId: number,
   ): number | undefined {
     return args.trackIdToTrackPanel.get(trackId)?.yStart;
   }

   private getYConnection(
     args: FlowEventsRendererArgs,
     trackId: number,
     rect?: SliceRect,
   ): {y: number; connection: ConnectionType} | undefined {
     if (!rect) {
       const y = this.getTrackGroupYCoordinate(args, trackId);
       if (y === undefined) {
         return undefined;
       }
       return {y, connection: 'TRACK_GROUP'};
     }
     const y =
       (this.getTrackYCoordinate(args, trackId) ?? 0) +
       rect.top +
       rect.height * 0.5;

     return {
       y: Math.min(Math.max(0, y), args.canvasHeight),
       connection: 'TRACK',
     };
   }

   private getXCoordinate(ts: time): number {
     return globals.timeline.visibleTimeScale.timeToPx(ts);
   }

   private getSliceRect(
     args: FlowEventsRendererArgs,
     point: FlowPoint,
   ): SliceRect | undefined {
     const trackPanel = args.trackIdToTrackPanel.get(point.trackId)?.panel;
     if (!trackPanel) {
       return undefined;
     }
     return trackPanel.getSliceRect?.(
       point.sliceStartTs,
       point.sliceEndTs,
       point.depth,
     );
   }

   render(ctx: CanvasRenderingContext2D, args: FlowEventsRendererArgs) {
     ctx.save();
     ctx.translate(TRACK_SHELL_WIDTH, 0);
     ctx.rect(0, 0, args.canvasWidth - TRACK_SHELL_WIDTH, args.canvasHeight);
     ctx.clip();

     globals.connectedFlows.forEach((flow) => {
       this.drawFlow(ctx, args, flow, CONNECTED_FLOW_HUE);
     });

     globals.selectedFlows.forEach((flow) => {
       const categories = getFlowCategories(flow);
       for (const cat of categories) {
         if (
           globals.visibleFlowCategories.get(cat) ||
           globals.visibleFlowCategories.get(ALL_CATEGORIES)
         ) {
           this.drawFlow(ctx, args, flow, SELECTED_FLOW_HUE);
           break;
         }
       }
     });

     ctx.restore();
   }

   private drawFlow(
     ctx: CanvasRenderingContext2D,
     args: FlowEventsRendererArgs,
     flow: Flow,
     hue: number,
   ) {
     const beginSliceRect = this.getSliceRect(args, flow.begin);
     const endSliceRect = this.getSliceRect(args, flow.end);

     const beginYConnection = this.getYConnection(
       args,
       flow.begin.trackId,
       beginSliceRect,
     );
     const endYConnection = this.getYConnection(
       args,
       flow.end.trackId,
       endSliceRect,
     );

     if (!beginYConnection || !endYConnection) {
       return;
     }

     let beginDir: LineDirection = 'LEFT';
     let endDir: LineDirection = 'RIGHT';
     if (beginYConnection.connection === 'TRACK_GROUP') {
       beginDir = beginYConnection.y > endYConnection.y ? 'DOWN' : 'UP';
     }
     if (endYConnection.connection === 'TRACK_GROUP') {
       endDir = endYConnection.y > beginYConnection.y ? 'DOWN' : 'UP';
     }

     const begin = {
       // If the flow goes to a descendant, we want to draw the arrow from the
       // beginning of the slice
       // rather from the end to avoid the flow arrow going backwards.
       x: this.getXCoordinate(
         flow.flowToDescendant ||
           flow.begin.sliceStartTs >= flow.end.sliceStartTs
           ? flow.begin.sliceStartTs
           : flow.begin.sliceEndTs,
       ),
       y: beginYConnection.y,
       dir: beginDir,
     };
     const end = {
       x: this.getXCoordinate(flow.end.sliceStartTs),
       y: endYConnection.y,
       dir: endDir,
     };
     const highlighted =
       flow.end.sliceId === globals.state.highlightedSliceId ||
       flow.begin.sliceId === globals.state.highlightedSliceId;
     const focused =
       flow.id === globals.state.focusedFlowIdLeft ||
       flow.id === globals.state.focusedFlowIdRight;

     let intensity = DEFAULT_FLOW_INTENSITY;
     let width = DEFAULT_FLOW_WIDTH;
     if (focused) {
       intensity = FOCUSED_FLOW_INTENSITY;
       width = FOCUSED_FLOW_WIDTH;
     }
     if (highlighted) {
       intensity = HIGHLIGHTED_FLOW_INTENSITY;
     }
     this.drawFlowArrow(ctx, begin, end, hue, intensity, width);
   }

   private getDeltaX(dir: LineDirection, offset: number): number {
     switch (dir) {
       case 'LEFT':
         return -offset;
       case 'RIGHT':
         return offset;
       case 'UP':
         return 0;
       case 'DOWN':
         return 0;
       default:
         return 0;
     }
   }

   private getDeltaY(dir: LineDirection, offset: number): number {
     switch (dir) {
       case 'LEFT':
         return 0;
       case 'RIGHT':
         return 0;
       case 'UP':
         return -offset;
       case 'DOWN':
         return offset;
       default:
         return 0;
     }
   }

   private drawFlowArrow(
     ctx: CanvasRenderingContext2D,
     begin: {x: number; y: number; dir: LineDirection},
     end: {x: number; y: number; dir: LineDirection},
     hue: number,
     intensity: number,
     width: number,
   ) {
     const hasArrowHead = Math.abs(begin.x - end.x) > 3 * TRIANGLE_SIZE;
     const END_OFFSET =
       (end.dir === 'RIGHT' || end.dir === 'LEFT') && hasArrowHead
         ? TRIANGLE_SIZE
         : 0;
     const color = `hsl(${hue}, 50%, ${intensity}%)`;
     // draw curved line from begin to end (bezier curve)
     ctx.strokeStyle = color;
     ctx.lineWidth = width;
     ctx.beginPath();
     ctx.moveTo(begin.x, begin.y);
     ctx.bezierCurveTo(
       begin.x - this.getDeltaX(begin.dir, BEZIER_OFFSET),
       begin.y - this.getDeltaY(begin.dir, BEZIER_OFFSET),
       end.x - this.getDeltaX(end.dir, BEZIER_OFFSET + END_OFFSET),
       end.y - this.getDeltaY(end.dir, BEZIER_OFFSET + END_OFFSET),
       end.x - this.getDeltaX(end.dir, END_OFFSET),
       end.y - this.getDeltaY(end.dir, END_OFFSET),
     );
     ctx.stroke();

     // TODO (andrewbb): probably we should add a parameter 'MarkerType' to be
     // able to choose what marker we want to draw _before_ the function call.
     // e.g. triangle, circle, square?
     if (begin.dir !== 'RIGHT' && begin.dir !== 'LEFT') {
       // draw a circle if we the line has a vertical connection
       ctx.fillStyle = color;
       ctx.beginPath();
       ctx.arc(begin.x, begin.y, 3, 0, 2 * Math.PI);
       ctx.closePath();
       ctx.fill();
     }

     if (end.dir !== 'RIGHT' && end.dir !== 'LEFT') {
       // draw a circle if we the line has a vertical connection
       ctx.fillStyle = color;
       ctx.beginPath();
       ctx.arc(end.x, end.y, CIRCLE_RADIUS, 0, 2 * Math.PI);
       ctx.closePath();
       ctx.fill();
     } else if (hasArrowHead) {
       this.drawArrowHead(end, ctx, color);
     }
   }

   private drawArrowHead(
     end: {x: number; y: number; dir: LineDirection},
     ctx: CanvasRenderingContext2D,
     color: string,
   ) {
     const dx = this.getDeltaX(end.dir, TRIANGLE_SIZE);
     const dy = this.getDeltaY(end.dir, TRIANGLE_SIZE);
     // draw small triangle
     ctx.fillStyle = color;
     ctx.beginPath();
     ctx.moveTo(end.x, end.y);
     ctx.lineTo(end.x - dx - dy, end.y + dx - dy);
     ctx.lineTo(end.x - dx + dy, end.y - dx - dy);
     ctx.closePath();
     ctx.fill();
   }
 }
	// Copyright (C) 2020 The Android Open Source Project
	//
	// Licensed under the Apache License, Version 2.0 (the "License");
	// you may not use size 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 {time} from '../base/time';
	import {exists} from '../base/utils';
	import {TrackState} from '../common/state';
	import {SliceRect} from '../public';

	import {TRACK_SHELL_WIDTH} from './css_constants';
	import {ALL_CATEGORIES, getFlowCategories} from './flow_events_panel';
	import {Flow, FlowPoint, globals} from './globals';
	import {Panel} from './panel_container';

	const TRACK_GROUP_CONNECTION_OFFSET = 5;
	const TRIANGLE_SIZE = 5;
	const CIRCLE_RADIUS = 3;
	const BEZIER_OFFSET = 30;

	const CONNECTED_FLOW_HUE = 10;
	const SELECTED_FLOW_HUE = 230;

	const DEFAULT_FLOW_WIDTH = 2;
	const FOCUSED_FLOW_WIDTH = 3;

	const HIGHLIGHTED_FLOW_INTENSITY = 45;
	const FOCUSED_FLOW_INTENSITY = 55;
	const DEFAULT_FLOW_INTENSITY = 70;

	type LineDirection = 'LEFT' \| 'RIGHT' \| 'UP' \| 'DOWN';
	type ConnectionType = 'TRACK' \| 'TRACK_GROUP';

	interface TrackPanelInfo {
	panel: Panel;
	yStart: number;
	}

	interface TrackGroupPanelInfo {
	panel: Panel;
	yStart: number;
	height: number;
	}

	function getTrackIds(track: TrackState): number[] {
	const trackDesc = globals.trackManager.resolveTrackInfo(track.uri);
	return trackDesc?.trackIds ?? [];
	}

	export class FlowEventsRendererArgs {
	trackIdToTrackPanel: Map<number, TrackPanelInfo>;
	groupIdToTrackGroupPanel: Map<string, TrackGroupPanelInfo>;

	constructor(public canvasWidth: number, public canvasHeight: number) {
	this.trackIdToTrackPanel = new Map<number, TrackPanelInfo>();
	this.groupIdToTrackGroupPanel = new Map<string, TrackGroupPanelInfo>();
	}

	registerPanel(panel: Panel, yStart: number, height: number) {
	if (exists(panel.trackKey)) {
	const track = globals.state.tracks[panel.trackKey];
	for (const trackId of getTrackIds(track)) {
	this.trackIdToTrackPanel.set(trackId, {panel, yStart});
	}
	} else if (exists(panel.trackGroupId)) {
	this.groupIdToTrackGroupPanel.set(panel.trackGroupId, {
	panel,
	yStart,
	height,
	});
	}
	}
	}

	export class FlowEventsRenderer {
	private getTrackGroupIdByTrackId(trackId: number): string \| undefined {
	const trackKey = globals.trackManager.trackKeyByTrackId.get(trackId);
	return trackKey ? globals.state.tracks[trackKey].trackGroup : undefined;
	}

	private getTrackGroupYCoordinate(
	args: FlowEventsRendererArgs,
	trackId: number,
	): number \| undefined {
	const trackGroupId = this.getTrackGroupIdByTrackId(trackId);
	if (!trackGroupId) {
	return undefined;
	}
	const trackGroupInfo = args.groupIdToTrackGroupPanel.get(trackGroupId);
	if (!trackGroupInfo) {
	return undefined;
	}
	return (
	trackGroupInfo.yStart +
	trackGroupInfo.height -
	TRACK_GROUP_CONNECTION_OFFSET
	);
	}

	private getTrackYCoordinate(
	args: FlowEventsRendererArgs,
	trackId: number,
	): number \| undefined {
	return args.trackIdToTrackPanel.get(trackId)?.yStart;
	}

	private getYConnection(
	args: FlowEventsRendererArgs,
	trackId: number,
	rect?: SliceRect,
	): {y: number; connection: ConnectionType} \| undefined {
	if (!rect) {
	const y = this.getTrackGroupYCoordinate(args, trackId);
	if (y === undefined) {
	return undefined;
	}
	return {y, connection: 'TRACK_GROUP'};
	}
	const y =
	(this.getTrackYCoordinate(args, trackId) ?? 0) +
	rect.top +
	rect.height * 0.5;

	return {
	y: Math.min(Math.max(0, y), args.canvasHeight),
	connection: 'TRACK',
	};
	}

	private getXCoordinate(ts: time): number {
	return globals.timeline.visibleTimeScale.timeToPx(ts);
	}

	private getSliceRect(
	args: FlowEventsRendererArgs,
	point: FlowPoint,
	): SliceRect \| undefined {
	const trackPanel = args.trackIdToTrackPanel.get(point.trackId)?.panel;
	if (!trackPanel) {
	return undefined;
	}
	return trackPanel.getSliceRect?.(
	point.sliceStartTs,
	point.sliceEndTs,
	point.depth,
	);
	}

	render(ctx: CanvasRenderingContext2D, args: FlowEventsRendererArgs) {
	ctx.save();
	ctx.translate(TRACK_SHELL_WIDTH, 0);
	ctx.rect(0, 0, args.canvasWidth - TRACK_SHELL_WIDTH, args.canvasHeight);
	ctx.clip();

	globals.connectedFlows.forEach((flow) => {
	this.drawFlow(ctx, args, flow, CONNECTED_FLOW_HUE);
	});

	globals.selectedFlows.forEach((flow) => {
	const categories = getFlowCategories(flow);
	for (const cat of categories) {
	if (
	globals.visibleFlowCategories.get(cat) \|\|
	globals.visibleFlowCategories.get(ALL_CATEGORIES)
	) {
	this.drawFlow(ctx, args, flow, SELECTED_FLOW_HUE);
	break;
	}
	}
	});

	ctx.restore();
	}

	private drawFlow(
	ctx: CanvasRenderingContext2D,
	args: FlowEventsRendererArgs,
	flow: Flow,
	hue: number,
	) {
	const beginSliceRect = this.getSliceRect(args, flow.begin);
	const endSliceRect = this.getSliceRect(args, flow.end);

	const beginYConnection = this.getYConnection(
	args,
	flow.begin.trackId,
	beginSliceRect,
	);
	const endYConnection = this.getYConnection(
	args,
	flow.end.trackId,
	endSliceRect,
	);

	if (!beginYConnection \|\| !endYConnection) {
	return;
	}

	let beginDir: LineDirection = 'LEFT';
	let endDir: LineDirection = 'RIGHT';
	if (beginYConnection.connection === 'TRACK_GROUP') {
	beginDir = beginYConnection.y > endYConnection.y ? 'DOWN' : 'UP';
	}
	if (endYConnection.connection === 'TRACK_GROUP') {
	endDir = endYConnection.y > beginYConnection.y ? 'DOWN' : 'UP';
	}

	const begin = {
	// If the flow goes to a descendant, we want to draw the arrow from the
	// beginning of the slice
	// rather from the end to avoid the flow arrow going backwards.
	x: this.getXCoordinate(
	flow.flowToDescendant \|\|
	flow.begin.sliceStartTs >= flow.end.sliceStartTs
	? flow.begin.sliceStartTs
	: flow.begin.sliceEndTs,
	),
	y: beginYConnection.y,
	dir: beginDir,
	};
	const end = {
	x: this.getXCoordinate(flow.end.sliceStartTs),
	y: endYConnection.y,
	dir: endDir,
	};
	const highlighted =
	flow.end.sliceId === globals.state.highlightedSliceId \|\|
	flow.begin.sliceId === globals.state.highlightedSliceId;
	const focused =
	flow.id === globals.state.focusedFlowIdLeft \|\|
	flow.id === globals.state.focusedFlowIdRight;

	let intensity = DEFAULT_FLOW_INTENSITY;
	let width = DEFAULT_FLOW_WIDTH;
	if (focused) {
	intensity = FOCUSED_FLOW_INTENSITY;
	width = FOCUSED_FLOW_WIDTH;
	}
	if (highlighted) {
	intensity = HIGHLIGHTED_FLOW_INTENSITY;
	}
	this.drawFlowArrow(ctx, begin, end, hue, intensity, width);
	}

	private getDeltaX(dir: LineDirection, offset: number): number {
	switch (dir) {
	case 'LEFT':
	return -offset;
	case 'RIGHT':
	return offset;
	case 'UP':
	return 0;
	case 'DOWN':
	return 0;
	default:
	return 0;
	}
	}

	private getDeltaY(dir: LineDirection, offset: number): number {
	switch (dir) {
	case 'LEFT':
	return 0;
	case 'RIGHT':
	return 0;
	case 'UP':
	return -offset;
	case 'DOWN':
	return offset;
	default:
	return 0;
	}
	}

	private drawFlowArrow(
	ctx: CanvasRenderingContext2D,
	begin: {x: number; y: number; dir: LineDirection},
	end: {x: number; y: number; dir: LineDirection},
	hue: number,
	intensity: number,
	width: number,
	) {
	const hasArrowHead = Math.abs(begin.x - end.x) > 3 * TRIANGLE_SIZE;
	const END_OFFSET =
	(end.dir === 'RIGHT' \|\| end.dir === 'LEFT') && hasArrowHead
	? TRIANGLE_SIZE
	: 0;
	const color = `hsl(${hue}, 50%, ${intensity}%)`;
	// draw curved line from begin to end (bezier curve)
	ctx.strokeStyle = color;
	ctx.lineWidth = width;
	ctx.beginPath();
	ctx.moveTo(begin.x, begin.y);
	ctx.bezierCurveTo(
	begin.x - this.getDeltaX(begin.dir, BEZIER_OFFSET),
	begin.y - this.getDeltaY(begin.dir, BEZIER_OFFSET),
	end.x - this.getDeltaX(end.dir, BEZIER_OFFSET + END_OFFSET),
	end.y - this.getDeltaY(end.dir, BEZIER_OFFSET + END_OFFSET),
	end.x - this.getDeltaX(end.dir, END_OFFSET),
	end.y - this.getDeltaY(end.dir, END_OFFSET),
	);
	ctx.stroke();

	// TODO (andrewbb): probably we should add a parameter 'MarkerType' to be
	// able to choose what marker we want to draw _before_ the function call.
	// e.g. triangle, circle, square?
	if (begin.dir !== 'RIGHT' && begin.dir !== 'LEFT') {
	// draw a circle if we the line has a vertical connection
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.arc(begin.x, begin.y, 3, 0, 2 * Math.PI);
	ctx.closePath();
	ctx.fill();
	}

	if (end.dir !== 'RIGHT' && end.dir !== 'LEFT') {
	// draw a circle if we the line has a vertical connection
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.arc(end.x, end.y, CIRCLE_RADIUS, 0, 2 * Math.PI);
	ctx.closePath();
	ctx.fill();
	} else if (hasArrowHead) {
	this.drawArrowHead(end, ctx, color);
	}
	}

	private drawArrowHead(
	end: {x: number; y: number; dir: LineDirection},
	ctx: CanvasRenderingContext2D,
	color: string,
	) {
	const dx = this.getDeltaX(end.dir, TRIANGLE_SIZE);
	const dy = this.getDeltaY(end.dir, TRIANGLE_SIZE);
	// draw small triangle
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.moveTo(end.x, end.y);
	ctx.lineTo(end.x - dx - dy, end.y + dx - dy);
	ctx.lineTo(end.x - dx + dy, end.y - dx - dy);
	ctx.closePath();
	ctx.fill();
	}
	}