Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix some rendering issues with -Ztimings. #7397

Merged
merged 2 commits into from
Sep 21, 2019
Merged

Fix some rendering issues with -Ztimings. #7397

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67ef2cb
Fix some rendering issues with -Ztimings.
ehuss Sep 20, 2019
e6c5758
Better fix for overflowing text.
ehuss Sep 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 51 additions & 37 deletions src/cargo/core/compiler/timings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,14 @@ function render_pipeline_graph() {
const units = UNIT_DATA.filter(unit => unit.duration >= min_time);

const graph_height = Y_TICK_DIST * units.length;
const {ctx, width, height} = draw_graph_axes('pipeline-graph', graph_height);
const {ctx, graph_width, canvas_width, canvas_height, px_per_sec} = draw_graph_axes('pipeline-graph', graph_height);
const container = document.getElementById('pipeline-container');
container.style.width = width;
container.style.height = height;
const PX_PER_SEC = document.getElementById('scale').valueAsNumber;
container.style.width = canvas_width;
container.style.height = canvas_height;

// Canvas for hover highlights. This is a separate layer to improve performance.
const linectx = setup_canvas('pipeline-graph-lines', width, height);
linectx.clearRect(0, 0, width, height);
const linectx = setup_canvas('pipeline-graph-lines', canvas_width, canvas_height);
linectx.clearRect(0, 0, canvas_width, canvas_height);

// Draw Y tick marks.
for (let n=1; n<units.length; n++) {
Expand All @@ -79,12 +78,12 @@ function render_pipeline_graph() {
for (i=0; i<units.length; i++) {
let unit = units[i];
let y = i * Y_TICK_DIST + 1;
let x = PX_PER_SEC * unit.start;
let x = px_per_sec * unit.start;
let rmeta_x = null;
if (unit.rmeta_time != null) {
rmeta_x = x + PX_PER_SEC * unit.rmeta_time;
rmeta_x = x + px_per_sec * unit.rmeta_time;
}
let width = Math.max(PX_PER_SEC * unit.duration, 1.0);
let width = Math.max(px_per_sec * unit.duration, 1.0);
UNIT_COORDS[unit.i] = {x, y, width, rmeta_x};
}

Expand All @@ -104,14 +103,17 @@ function render_pipeline_graph() {
ctx.beginPath();
ctx.fillStyle = '#aa95e8';
let ctime = unit.duration - unit.rmeta_time;
roundedRect(ctx, rmeta_x, y, PX_PER_SEC * ctime, BOX_HEIGHT, RADIUS);
roundedRect(ctx, rmeta_x, y, px_per_sec * ctime, BOX_HEIGHT, RADIUS);
ctx.fill();
}
ctx.fillStyle = "#000";
ctx.textAlign = 'start';
ctx.textBaseline = 'hanging';
ctx.font = '14px sans-serif';
ctx.fillText(`${unit.name}${unit.target} ${unit.duration}s`, x + 5.0, y + BOX_HEIGHT / 2 - 6);
const label = `${unit.name}${unit.target} ${unit.duration}s`;
const text_info = ctx.measureText(label);
const label_x = Math.min(x + 5.0, canvas_width - text_info.width - X_LINE);
ctx.fillText(label, label_x, y + BOX_HEIGHT / 2 - 6);
draw_dep_lines(ctx, unit.i, false);
}
ctx.restore();
Expand Down Expand Up @@ -154,7 +156,7 @@ function render_timing_graph() {
const TOP_MARGIN = 10;
const GRAPH_HEIGHT = AXIS_HEIGHT - TOP_MARGIN;

const {graph_width, ctx} = draw_graph_axes('timing-graph', AXIS_HEIGHT);
const {canvas_width, graph_width, ctx} = draw_graph_axes('timing-graph', AXIS_HEIGHT);

// Draw Y tick marks and labels.
let max_v = 0;
Expand Down Expand Up @@ -195,18 +197,20 @@ function render_timing_graph() {
}

const cpuFillStyle = 'rgba(250, 119, 0, 0.2)';
ctx.beginPath();
ctx.fillStyle = cpuFillStyle;
let bottomLeft = coord(CPU_USAGE[0][0], 0);
ctx.moveTo(bottomLeft.x, bottomLeft.y);
for (let i=0; i < CPU_USAGE.length; i++) {
let [time, usage] = CPU_USAGE[i];
let {x, y} = coord(time, usage / 100.0 * max_v);
ctx.lineTo(x, y);
if (CPU_USAGE.length > 1) {
ctx.beginPath();
ctx.fillStyle = cpuFillStyle;
let bottomLeft = coord(CPU_USAGE[0][0], 0);
ctx.moveTo(bottomLeft.x, bottomLeft.y);
for (let i=0; i < CPU_USAGE.length; i++) {
let [time, usage] = CPU_USAGE[i];
let {x, y} = coord(time, usage / 100.0 * max_v);
ctx.lineTo(x, y);
}
let bottomRight = coord(CPU_USAGE[CPU_USAGE.length - 1][0], 0);
ctx.lineTo(bottomRight.x, bottomRight.y);
ctx.fill();
}
let bottomRight = coord(CPU_USAGE[CPU_USAGE.length - 1][0], 0);
ctx.lineTo(bottomRight.x, bottomRight.y);
ctx.fill();

function draw_line(style, key) {
let first = CONCURRENCY_DATA[0];
Expand All @@ -231,7 +235,7 @@ function render_timing_graph() {
// Draw a legend.
ctx.restore();
ctx.save();
ctx.translate(graph_width-150, MARGIN);
ctx.translate(canvas_width-200, MARGIN);
// background
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#000';
Expand Down Expand Up @@ -289,13 +293,18 @@ function setup_canvas(id, width, height) {
}

function draw_graph_axes(id, graph_height) {
const PX_PER_SEC = document.getElementById('scale').valueAsNumber;
const graph_width = PX_PER_SEC * DURATION;
const width = graph_width + X_LINE + 30;
const height = graph_height + MARGIN + Y_LINE;
let ctx = setup_canvas(id, width, height);
const scale = document.getElementById('scale').valueAsNumber;
// Cap the size of the graph. It is hard to view if it is too large, and
// browsers may not render a large graph because it takes too much memory.
// 4096 is still ridiculously large, and probably won't render on mobile
// browsers, but should be ok for many desktop environments.
const graph_width = Math.min(scale * DURATION, 4096);
const px_per_sec = Math.floor(graph_width / DURATION);
const canvas_width = Math.max(graph_width + X_LINE + 30, X_LINE + 250);
const canvas_height = graph_height + MARGIN + Y_LINE;
let ctx = setup_canvas(id, canvas_width, canvas_height);
ctx.fillStyle = '#f7f7f7';
ctx.fillRect(0, 0, width, height);
ctx.fillRect(0, 0, canvas_width, canvas_height);

ctx.lineWidth = 2;
ctx.font = '16px sans-serif';
Expand All @@ -309,19 +318,18 @@ function draw_graph_axes(id, graph_height) {
ctx.stroke();

// Draw X tick marks.
const tick_width = graph_width - 10;
const [step, top] = split_ticks(DURATION, tick_width / MIN_TICK_DIST);
const [step, top] = split_ticks(DURATION, graph_width / MIN_TICK_DIST);
const num_ticks = top / step;
const tick_dist = tick_width / num_ticks;
const tick_dist = graph_width / num_ticks;
ctx.fillStyle = '#303030';
for (let n=0; n<num_ticks; n++) {
const x = X_LINE + ((n + 1) * tick_dist);
ctx.beginPath();
ctx.moveTo(x, height-Y_LINE);
ctx.lineTo(x, height-Y_LINE+5);
ctx.moveTo(x, canvas_height-Y_LINE);
ctx.lineTo(x, canvas_height-Y_LINE+5);
ctx.stroke();

ctx.fillText(`${(n+1) * step}s`, x, height - Y_LINE + 20);
ctx.fillText(`${(n+1) * step}s`, x, canvas_height - Y_LINE + 20);
}

// Draw vertical lines.
Expand All @@ -336,7 +344,7 @@ function draw_graph_axes(id, graph_height) {
}
ctx.strokeStyle = '#000';
ctx.setLineDash([]);
return {width, height, graph_width, graph_height, ctx};
return {canvas_width, canvas_height, graph_width, graph_height, ctx, px_per_sec};
}

function round_up(n, step) {
Expand All @@ -349,6 +357,7 @@ function round_up(n, step) {

// Determine the `(step, max_value)` of the number of ticks along an axis.
function split_ticks(n, max_ticks) {
max_ticks = Math.ceil(max_ticks);
if (n <= max_ticks) {
return [1, n];
} else if (n <= max_ticks * 2) {
Expand All @@ -359,7 +368,12 @@ function split_ticks(n, max_ticks) {
return [5, round_up(n, 5)];
} else {
let step = 10;
let count = 0;
while (true) {
if (count > 100) {
throw Error("tick loop too long");
}
count += 1;
let top = round_up(n, step);
if (top <= max_ticks * step) {
return [step, top];
Expand Down