sirhcm/tinygrad
1
0
Fork 0
forked from tinygrad/tinygrad
Code Pull Requests Activity

viz: draw shapes directly on the canvas (#14229)

Browse Source
This commit is contained in:
qazal
2026-01-20 00:57:06 +09:00
committed by GitHub
parent acb0045ba0
commit 0f61cbd51f
1 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tinygrad/viz/js/index.js
+12 -13
View File
@@ -482,38 +482,38 @@ async function renderProfiler(path, unit, opts) {
xscale.domain([st, et]);
ctx.textBaseline = "middle";
// draw shapes
const paths = [];
for (const [k, { shapes, eventType, visible, offsetY, valueMap, pcolor, scolor, rowBorderColor }] of data.tracks) {
visible.length = 0;
const addBorder = scolor != null ? (p,w) => { if (w > 10) { ctx.strokeStyle = scolor; ctx.stroke(p); } } : null;
const addBorder = scolor != null ? (w) => { if (w > 10) { ctx.strokeStyle = scolor; ctx.stroke(); } } : null;
for (const e of shapes) {
const p = new Path2D();
if (eventType === EventTypes.BUF) { // generic polygon
if (e.x[0]>et || e.x.at(-1)<st) continue;
ctx.beginPath();
const x = e.x.map(xscale);
p.moveTo(x[0], offsetY+e.y0[0]);
ctx.moveTo(x[0], offsetY+e.y0[0]);
for (let i=1; i<x.length; i++) {
p.lineTo(x[i], offsetY+e.y0[i]);
ctx.lineTo(x[i], offsetY+e.y0[i]);
let arg = e.arg;
if (arg == null && valueMap != null) arg = {tooltipText: `Total: ${formatUnit(valueMap.get(e.x[i-1]), 'B')}`}
visible.push({ x0:x[i-1], x1:x[i], y0:offsetY+e.y1[i-1], y1:offsetY+e.y0[i], arg });
}
for (let i=x.length-1; i>=0; i--) p.lineTo(x[i], offsetY+e.y1[i]);
p.closePath();
ctx.fillStyle = e.fillColor; ctx.fill(p);
for (let i=x.length-1; i>=0; i--) ctx.lineTo(x[i], offsetY+e.y1[i]);
ctx.closePath();
ctx.fillStyle = e.fillColor; ctx.fill();
} else { // contiguous rect
if (e.x>et || e.x+e.width<st) continue;
const x = xscale(e.x);
const y = offsetY+e.y;
const width = xscale(e.x+e.width)-x;
p.rect(x, y, width, e.height);
ctx.beginPath();
ctx.rect(x, y, width, e.height);
visible.push({ y0:y, y1:y+e.height, x0:x, x1:x+width, arg:e.arg });
ctx.fillStyle = e.fillColor; ctx.fill(p);
addBorder?.(p, width);
ctx.fillStyle = e.fillColor; ctx.fill();
addBorder?.(width);
// add label
drawText(ctx, e.label, x+2, y+e.height/2, width);
}
if (focusedShape != null && e.arg?.key === focusedShape) { paths.push([p, pcolor]); }
if (focusedShape != null && e.arg?.key === focusedShape) { ctx.strokeStyle = pcolor; ctx.stroke(); }
}
// draw row line
if (rowBorderColor != null) {
@@ -559,7 +559,6 @@ async function renderProfiler(path, unit, opts) {
if (maxWidth <= 0) continue;
drawText(ctx, m.label, tx, 1, maxWidth);
}
for (const [p, color] of paths) { ctx.strokeStyle = color; ctx.stroke(p); }
}
function resize() {