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) {