diff --git a/tinygrad/viz/index.html b/tinygrad/viz/index.html index 34f68ce448..8731a457b6 100644 --- a/tinygrad/viz/index.html +++ b/tinygrad/viz/index.html @@ -41,11 +41,13 @@ } ul { padding: 0; - opacity: 0.6; white-space: nowrap; cursor: pointer; } - ul.active { + ul > p { + opacity: 0.6; + } + ul.active > p { opacity: 1; } ul > ul { @@ -54,8 +56,10 @@ ul.expanded > ul { display: block; } - ul.disabled { + ul.disabled > p { opacity: 0.4; + } + ul.disabled { pointer-events: none; } label { diff --git a/tinygrad/viz/js/index.js b/tinygrad/viz/js/index.js index 90ad10b6be..a0f5a3af25 100644 --- a/tinygrad/viz/js/index.js +++ b/tinygrad/viz/js/index.js @@ -608,7 +608,8 @@ async function main() { for (const [j,u] of steps.entries()) { const inner = ul.appendChild(document.createElement("ul")); inner.id = `step-${i}-${j}`; - inner.innerText = `${u.name}`+(u.match_count ? ` - ${u.match_count}` : ''); + const p = inner.appendChild(document.createElement("p")); + p.innerText = `${u.name}`+(u.match_count ? ` - ${u.match_count}` : ''); inner.style.marginLeft = `${8*u.depth}px`; inner.onclick = (e) => { e.stopPropagation(); @@ -706,8 +707,9 @@ async function main() { rewriteList.className = "rewrite-list"; for (let s=0; s<=step.match_count; s++) { const ul = rewriteList.appendChild(document.createElement("ul")); - ul.innerText = s; ul.id = `rewrite-${s}`; + const p = ul.appendChild(document.createElement("p")); + p.innerText = s; ul.onclick = () => setState({ currentRewrite:s }); ul.className = s > ret.length-1 ? "disabled" : s === currentRewrite ? "active" : ""; if (s > 0 && s === currentRewrite) {