github/tinygrad
1
1
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-04-29 03:00:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

viz: small uop click changes (#11846)

Browse Source 
* also highlight self

* can always unselect by clicking outside

* less layout
This commit is contained in:
qazal
2025-08-26 14:56:13 +03:00
committed by GitHub
parent f2a3c27372
commit 3674c0754e
2 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
tinygrad/viz/index.html
View File

@@ -100,9 +100,6 @@
.highlight rect, .edgePath.highlight {
stroke: #FFC53D;
}
.highlight rect {
stroke-width: 3px;
}
#arrowhead {
fill: #4a4b57;
}

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

@@ -56,12 +56,14 @@ async function renderDag(graph, additions, recenter=false) {
const g = dagre.graphlib.json.read(e.data);
// draw nodes
const STROKE_WIDTH = 1.4;
d3.select("#graph-svg").on("click", () => d3.selectAll(".highlight").classed("highlight", false));
const nodes = d3.select("#nodes").selectAll("g").data(g.nodes().map(id => g.node(id)), d => d).join("g")
.attr("transform", d => `translate(${d.x},${d.y})`).classed("clickable", d => d.ref != null).on("click", (_,d) => {
.attr("transform", d => `translate(${d.x},${d.y})`).classed("clickable", d => d.ref != null).on("click", (e,d) => {
if (d.ref != null) return setCtxWithHistory(d.ref);
const src = g.predecessors(d.id) || [];
const src = [...g.predecessors(d.id), d.id];
nodes.classed("highlight", n => src.includes(n.id));
d3.select("#edges").selectAll("path.edgePath").classed("highlight", e => src.includes(e.v) && e.w===d.id);
e.stopPropagation();
});
nodes.selectAll("rect").data(d => [d]).join("rect").attr("width", d => d.width).attr("height", d => d.height).attr("fill", d => d.color)
.attr("x", d => -d.width/2).attr("y", d => -d.height/2).attr("class", d => d.className ?? "node");