github/tinygrad
1
1
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-01-08 22:48:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

viz UI cleanups (#13490)

Browse Source
This commit is contained in:
qazal
2025-11-29 22:07:00 +08:00
committed by GitHub
parent d457ee0ba4
commit 941597db71
2 changed files with 27 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tinygrad/viz/index.html
View File

@@ -56,6 +56,10 @@
}
ul > ul {
display: none;
margin-left: 6px;
}
ul.has-children ul {
margin-left: calc(6px + 1ch);
}
ul.has-children > p::before {
content:"▸ ";

56
tinygrad/viz/js/index.js
View File

@@ -192,7 +192,7 @@ function tabulate(rows) {
return root;
}
var data, focusedDevice, focusedShape, canvasZoom, formatTime, zoomLevel = d3.zoomIdentity;
var data, focusedDevice, focusedShape, formatTime, canvasZoom, zoomLevel = d3.zoomIdentity;
function selectShape(key) {
if (key == null) return {};
@@ -254,7 +254,7 @@ async function renderProfiler(path, unit, opts) {
displaySelection("#profiler");
// support non realtime x axis units
formatTime = unit === "realtime" ? formatMicroseconds : (s) => formatUnit(s, " "+unit);
if (data?.path !== path) data = {tracks:new Map(), axes:{}, path, first:null};
if (data?.path !== path) { data = {tracks:new Map(), axes:{}, path, first:null}; focusedDevice = null; focusedShape = null; }
metadata.replaceChildren(getMetadata(focusedShape));
// layout once!
if (data.tracks.size !== 0) return updateProgress({ start:false });
@@ -715,7 +715,6 @@ async function main() {
const list = stack.length > 0 ? stack.at(-1).li : ul;
u.li = list.appendChild(document.createElement("ul"));
u.li.id = `step-${i}-${j}`
u.li.style.marginLeft = u.depth > 0 ? "calc(6px + 1ch)" : "6px";
const p = u.li.appendChild(document.createElement("p"));
p.appendChild(colored(`${u.name}`+(u.match_count ? ` - ${u.match_count}` : '')));
p.onclick = (e) => {
@@ -761,45 +760,36 @@ async function main() {
}
displaySelection("#custom");
metadata.innerHTML = "";
const root = d3.create("div").classed("raw-text", true).node();
const root = d3.create("div").classed("raw-text", true);
// detailed assembly view
function renderTable(root, ret) {
const table = root.appendChild(document.createElement("table"));
const thead = table.appendChild(document.createElement("thead"));
for (const c of ret.cols) thead.appendChild(document.createElement("th")).innerText = c.title ?? c;
const table = root.append("table");
const thead = table.append("thead");
for (const c of ret.cols) thead.append("th").text(c.title ?? c);
for (const r of ret.rows) {
const tr = table.appendChild(document.createElement("tr"));
tr.className = "main-row";
const tr = table.append("tr").classed("main-row", true);
for (const [i,value] of r.entries()) {
// nested table
if (value.cols != null) {
tr.classList.add("has-children");
tr.onclick = () => {
const el = tr.nextElementSibling;
if (el?.classList.contains("nested-row")) { tr.classList.remove("expanded"); return el.remove(); }
tr.classList.add("expanded");
const nestedTr = table.insertBefore(document.createElement("tr"), tr.nextSibling); nestedTr.className = "nested-row"; ;
const td = nestedTr.appendChild(document.createElement("td"));
td.colSpan = ret.cols.length;
tr.classed("has-children", true);
tr.on("click", () => {
const el = tr.node().nextElementSibling;
if (el?.classList.contains("nested-row")) { tr.classed("expanded", false); return el.remove(); }
tr.classed("expanded", true);
const td = table.insert("tr", () => tr.node().nextSibling).classed("nested-row", true).append("td");
td.attr("colSpan", ret.cols.length);
renderTable(td, value);
}
});
continue;
}
const td = tr.appendChild(document.createElement("td"));
td.className = ret.cols[i];
const td = tr.append("td").classed(ret.cols[i], true);
// string format scalar values
if (!Array.isArray(value)) td.innerText = value;
if (!Array.isArray(value)) { td.text(value); continue; }
// display arrays in a bar graph
else {
td.classList.add("pct-row");
const usageBar = td.appendChild(document.createElement("div"));
for (const [k, v, width] of value) {
const seg = usageBar.appendChild(document.createElement("div"));
seg.style.width = width+"%";
seg.title = `${ret.cols[i].labels[k]} ${v}`;
seg.style.background = cycleColors(colorScheme.CATEGORICAL, parseInt(k));
}
}
td.classed("pct-row", true);
const bar = td.append("div");
value.forEach(([k, v, width]) => bar.append("div").style("width", width+"%").attr("title", `${ret.cols[i].labels[k]} ${v}`)
.style("background", cycleColors(colorScheme.CATEGORICAL, parseInt(k))))
}
}
return table;
@@ -810,8 +800,8 @@ async function main() {
const div = d3.create("div").style("background", cycleColors(colorScheme.CATEGORICAL, s.idx)).style("width", "100%").style("height", "100%");
return [s.label.trim(), div.text(s.value.toLocaleString()).node()];
})).node());
} else root.appendChild(codeBlock(ret.src, ret.lang || "txt"));
return document.querySelector("#custom").replaceChildren(root);
} else root.append(() => codeBlock(ret.src, ret.lang || "txt"));
return document.querySelector("#custom").replaceChildren(root.node());
}
// ** UOp view (default)
// if we don't have a complete cache yet we start streaming rewrites in this step