github/tinygrad
1
1
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-01-26 07:18:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix viz recenter + worker cleanup (#9607)

Browse Source
This commit is contained in:
qazal
2025-03-28 15:24:53 +08:00
committed by GitHub
parent 50dee4a7b3
commit b4ea45b4a6
2 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tinygrad/viz/index.html
View File

@@ -262,7 +262,7 @@
const x0 = document.querySelector(".kernel-list-parent").getBoundingClientRect().right;
const x1 = document.querySelector(".metadata").getBoundingClientRect().left;
const pad = 16;
const R = { x: x0+pad, y: mainRect.top+pad, width: x1-x0-2*pad, height: mainRect.height-2*pad };
const R = { x: x0+pad, y: mainRect.top+pad, width: (x1>0 ? x1-x0 : mainRect.width)-2*pad, height: mainRect.height-2*pad };
const r = document.querySelector("#render").getBoundingClientRect();
if (r.width === 0) return;
const scale = Math.min(R.width/r.width, R.height/r.height);
@@ -416,7 +416,8 @@
document.querySelector(".collapse-btn").addEventListener("click", (e) => {
isCollapsed = !isCollapsed;
mainContainer.classList.toggle("collapsed", isCollapsed);
e.target.style.transform = isCollapsed ? "rotate(180deg)" : "rotate(0deg)";
e.currentTarget.blur();
e.currentTarget.style.transform = isCollapsed ? "rotate(180deg)" : "rotate(0deg)";
});
// **** resizer
function appendResizer(element, { minWidth, maxWidth }, left=false) {

26
tinygrad/viz/lib/graph.js
View File

@@ -8,31 +8,27 @@ function intersectRect(r1, r2) {
return {x:r1.x+dx*scale, y:r1.y+dy*scale};
}
const allWorkers = [];
let workerUrl = null;
let [workerUrl, worker, timeout] = [null, null, null];
window.renderGraph = async function(graph, additions, name) {
if (workerUrl == null) {
const resp = await Promise.all(["/assets/dagrejs.github.io/project/dagre/latest/dagre.min.js","/lib/worker.js"].map(u => fetch(u)));
workerUrl = URL.createObjectURL(new Blob([(await Promise.all(resp.map((r) => r.text()))).join("\n")], { type: "application/javascript" }));
}
while (allWorkers.length) {
const { worker, timeout } = allWorkers.pop();
worker.terminate();
clearTimeout(timeout);
}
if (name === "View Memory Graph") {
return renderMemoryGraph(graph);
}
d3.select("#bars").html("");
// ** start calculating the new layout (non-blocking)
worker = new Worker(workerUrl);
if (worker == null) {
const resp = await Promise.all(["/assets/dagrejs.github.io/project/dagre/latest/dagre.min.js","/lib/worker.js"].map(u => fetch(u)));
workerUrl = URL.createObjectURL(new Blob([(await Promise.all(resp.map((r) => r.text()))).join("\n")], { type: "application/javascript" }));
worker = new Worker(workerUrl);
} else {
worker.terminate();
worker = new Worker(workerUrl);
}
if (timeout != null) clearTimeout(timeout);
const progressMessage = document.querySelector(".progress-message");
const timeout = setTimeout(() => {
timeout = setTimeout(() => {
progressMessage.style.display = "block";
}, 2000);
allWorkers.push({worker, timeout});
worker.postMessage({graph, additions});
worker.onmessage = (e) => {