tinygrad/tinygrad
2
0
Fork 3
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-09-05 21:46:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

viz: light up children (#12107)

Browse Source 
* viz: light up children

* keep tag coloring
This commit is contained in:
qazal
2025-09-11 01:28:01 +03:00
committed by GitHub
parent 3989f5b559
commit 78610b681e
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tinygrad/viz/index.html
+3
View File
@@ -105,6 +105,9 @@
.highlight rect, .edgePath.highlight, g.port circle {
stroke: #89C9A2;
}
.highlight.child rect, .edgePath.highlight.child {
stroke: #C888B0;
}
#edge-labels g.port.highlight {
display: block
}
tinygrad/viz/js/index.js
+7 -8
View File
@@ -70,14 +70,13 @@ function renderDag(graph, additions, recenter) {
.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 parents = g.predecessors(d.id);
if (parents == null) return;
const src = [...parents, 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);
d3.select("#edge-labels").selectAll("g.port").classed("highlight", (_, i, nodes) => {
const [v, w] = nodes[i].id.split("-");
return src.includes(v) && w===d.id;
});
const children = g.successors(d.id);
if (parents == null && children == null) return;
const src = [...parents, ...children, d.id];
nodes.classed("highlight", n => src.includes(n.id)).classed("child", n => children.includes(n.id));
const matchEdge = (v, w) => (v===d.id && children.includes(w)) ? "highlight child " : (parents.includes(v) && w===d.id) ? "highlight " : "";
d3.select("#edges").selectAll("path.edgePath").attr("class", e => matchEdge(e.v, e.w)+"edgePath");
d3.select("#edge-labels").selectAll("g.port").attr("class", (_, i, n) => matchEdge(...n[i].id.split("-"))+"port");
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)