mirrors/tinygrad
2
0
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-06-24 02:14:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

viz: stable node position for +- toggle (#16367)

Browse source
This commit is contained in:
qazal 2026-05-26 00:30:47 +03:00 • committed by GitHub
commit 4bcc53eb26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
tinygrad/viz/js/index.js
View file

@ -62,6 +62,7 @@ function addTags(root, path) {
else root.selectAll("text").data(d => [d]).join("text").text(d => d).attr("dy", "0.35em");
}
anchor = null;
const drawGraph = (data) => {
const g = dagre.graphlib.json.read(data);
// draw nodes
@ -70,6 +71,9 @@ const drawGraph = (data) => {
const nodes = d3.select("#nodes").selectAll("g").data(g.nodes().map(id => g.node(id)), d => d).join("g").attr("class", d => d.className ?? "node")
.attr("transform", d => `translate(${d.x},${d.y})`).on("click", (e,d) => {
if (d.callNode) {
const t = d3.zoomTransform(document.getElementById("graph-svg"));
const [x, y] = t.apply([d.x, d.y]);
anchor = {id:d.id, x, y, k:t.k};
if (state.callSrcMask.has(d.id)) state.callSrcMask.delete(d.id); else state.callSrcMask.add(d.id);
if (state.callSrcMask.size >= callCount) { showCallSrc.toggle.checked = !showCallSrc.toggle.checked; state.callSrcMask.clear(); }
return setState({});
@ -131,6 +135,7 @@ const drawGraph = (data) => {
points.push(intersectRect(g.node(e.w), points[points.length-1]));
return line(points);
}).attr("marker-end", "url(#arrowhead)").attr("stroke", e => g.edge(e).color || "#4a4b57");
return g;
}
// ** UOp graph
@ -155,7 +160,7 @@ function renderDag(layoutSpec, { recenter }) {
const data = e.data.result;
displaySelection("#graph");
updateProgress(Status.COMPLETE);
drawGraph(data);
const g = drawGraph(data);
addTags(d3.select("#edge-labels").selectAll("g").data(data.edges).join("g").attr("transform", (e) => {
// get a point near the end
const [p1, p2] = e.value.points.slice(-2);
@ -171,7 +176,11 @@ function renderDag(layoutSpec, { recenter }) {
const y = p2.y - uy * offset;
return `translate(${x}, ${y})`
}).attr("class", e => e.value.label.type).attr("id", e => `${e.v}-${e.w}`).datum(e => e.value.label.text));
if (recenter) document.getElementById("zoom-to-fit-btn").click();
if (anchor != null) {
const n = g.node(anchor.id);
d3.select("#graph-svg").call(svgZoom.transform, d3.zoomIdentity.translate(anchor.x-n.x*anchor.k, anchor.y-n.y*anchor.k).scale(anchor.k));
} else if (recenter) document.getElementById("zoom-to-fit-btn").click();
anchor = null;
};
worker.onerror = (e) => {
e.preventDefault();