From ab426cb6718301d0c0f615f689dfa0a283da7885 Mon Sep 17 00:00:00 2001
From: qazal <77887910+Qazalin@users.noreply.github.com>
Date: Mon, 19 Jan 2026 10:00:28 -0500
Subject: [PATCH] viz: simplify row line logic (#14227)

---
 tinygrad/viz/js/index.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/tinygrad/viz/js/index.js b/tinygrad/viz/js/index.js
index d5a41deb59..7f21456986 100644
--- a/tinygrad/viz/js/index.js
+++ b/tinygrad/viz/js/index.js
@@ -325,7 +325,7 @@ async function renderProfiler(path, unit, opts) {
     const eventType = u8(), eventsLen = u32();
     const [pcolor, scolor] = path.includes("pkts") ? ["#00c72f", "#858b9d"] : ["#9ea2ad", null];
     // last row doesn't get a border
-    const rowBorderColor = i<layoutsLen ? "#22232a" : null;
+    const rowBorderColor = i<layoutsLen-1 ? "#22232a" : null;
     if (rowBorderColor != null) div.style("border-bottom", `1px solid ${rowBorderColor}`);
     if (eventType === EventTypes.EXEC) {
       const levelHeight = (baseHeight-padding)*(opts.heightScale ?? 1);
@@ -377,9 +377,7 @@ async function renderProfiler(path, unit, opts) {
         shapes.push({x:e.st, y:levelHeight*depth, width:e.dur, height:levelHeight, arg, label:opts.hideLabels ? null : label, fillColor });
         if (j === 0) data.first = data.first == null ? e.st : Math.min(data.first, e.st);
       }
-      const height = levelHeight*levels.length;
-      div.style("height", height+padding+"px").style("pointerEvents", "none");
-      data.tracks.get(k).height = Math.max(rect(div.node()).height-padding, levelHeight*levels.length);
+      div.style("height", levelHeight*levels.length+padding+"px").style("pointerEvents", "none");
     } else {
       const peak = u64();
       let x = 0, y = 0;
@@ -485,7 +483,7 @@ async function renderProfiler(path, unit, opts) {
     ctx.textBaseline = "middle";
     // draw shapes
     const paths = [];
-    for (const [_, { shapes, eventType, visible, offsetY, valueMap, pcolor, scolor, height, rowBorderColor }] of data.tracks) {
+    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;
       for (const e of shapes) {
@@ -519,7 +517,7 @@ async function renderProfiler(path, unit, opts) {
       }
       // draw row line
       if (rowBorderColor != null) {
-        const y = offsetY+height+padding/2 - 0.5;
+        const y = offsetY+rect(document.getElementById(k)).height-padding/2 - 0.5;
         drawLine(ctx, [0, canvasWidth], [y, y], { color:rowBorderColor });
       }
     }