diff --git a/tinygrad/viz/js/index.js b/tinygrad/viz/js/index.js index 81d3ca47c6..1678358168 100644 --- a/tinygrad/viz/js/index.js +++ b/tinygrad/viz/js/index.js @@ -345,11 +345,10 @@ async function renderProfiler() { for (const [_, { offsetY, shapes, visible, valueMap }] of data.tracks) { visible.length = 0; for (const e of shapes) { - // generic polygon - if (e.width == null) { + const p = new Path2D(); + if (e.width == null) { // generic polygon if (e.x[0]>et || e.x.at(-1)=0; i--) p.lineTo(x[i], offsetY+e.y1[i]); p.closePath(); ctx.fillStyle = e.fillColor; ctx.fill(p); - if (focusedShape?.key && e.arg?.key === focusedShape.key) { paths.push(p); } - continue; - } - // contiguous rect - if (e.x>et || e.x+e.width width) { - if (labelWidth !== 0) ctx.fillText("...", labelX, labelY); - break; + } else { // contiguous rect + if (e.x>et || e.x+e.width width) { + if (lw>0) ctx.fillText("...", lx+lw, ly); + break; + } + ctx.textAlign = "left"; ctx.textBaseline = "middle"; + ctx.fillStyle = e.label[li].color; + ctx.fillText(e.label[li].st, lx+lw, ly); + lw += e.label[li].width; } - ctx.fillStyle = l.color; - ctx.fillText(l.st, labelX, labelY); - labelWidth += l.width; - labelX += l.width; } + if (focusedShape?.key && e.arg?.key === focusedShape.key) { paths.push(p); } } } // draw axes