github/tinygrad
1
1
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-01-09 15:08:02 -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 { ul > ul {
display: none; display: none;
margin-left: 6px;
}
ul.has-children ul {
margin-left: calc(6px + 1ch);
} }
ul.has-children > p::before { ul.has-children > p::before {
content:"▸ "; content:"▸ ";

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

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