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: switch sqtt sidebar to a simple asm list (#15350)

Browse Source 
* work

* something like this

* Revert "something like this"

This reverts commit 6c45098d2b.

* less

* path includes

* scroll only jumps up and down

* it's only pc and line now
This commit is contained in:
qazal
2026-03-18 18:40:25 +02:00
committed by GitHub
parent 709fc52d7b
commit 23e0431848
2 changed files with 13 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tinygrad/viz/index.html
View File

@@ -146,7 +146,6 @@
#insts .line {
display: flex;
flex-direction: column;
cursor: pointer;
margin-bottom: 8px;
}
#insts .left {
@@ -157,10 +156,6 @@
#insts .left.highlight {
background-color: rgba(0, 199, 47, 0.2);
}
#insts .wave {
color: #7aa2f7;
min-width: 2ch;
}
#insts .pc {
color: #73daca;
}

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

@@ -335,23 +335,22 @@ function setFocus(key) {
}
// instructions list renderer
let instList = document.getElementById("insts");
if (data.pcToShape.size == 0) return d3.select(instList?.parentElement).html("");
if (data.pcMap == null) return d3.select(instList?.parentElement).html("");
if (instList == null) {
let contents = "";
for (const [k, v] of data.pcToShape) {
const pcHex = v.pc.toString(16);
contents += `<div class="line" data-k="${k}"><span class="left" id="inst-${k}"><span class="wave">${v.wave}</span>
<span class="pc">${"0x"+pcHex.padStart(Math.max(4, Math.ceil(pcHex.length/4)*4), 0)}</span><span class="label">${data.pcMap[v.pc]}</span></div>`;
for (let [pc, label] of Object.entries(data.pcMap)) {
pc = parseInt(pc);
const pcHex = pc.toString(16);
contents += `<div class="line"><span class="left" id="inst-${pc}"><span class="pc">${"0x"+pcHex.padStart(Math.max(4, Math.ceil(pcHex.length/4)*4), 0)}</span><span class="label">${label}</span></span></div>`;
}
instList = d3.create("pre").append("code").classed("hljs", true).style("margin-top", "20px").attr("id", "insts").html(contents)
.on("click", e => { const line = e.target.closest(".line"); line && setFocus(line.dataset.k); }).node();
instList = d3.create("pre").append("code").classed("hljs", true).style("margin-top", "20px").attr("id", "insts").html(contents).node();
metadata.insertBefore(instList.parentElement, html.node());
}
d3.select(instList).selectAll("span").classed("highlight", false);
const instLine = document.getElementById(`inst-${key}`); instLine?.classList.add("highlight");
const instLine = document.getElementById(`inst-${e?.arg.pc}`); instLine?.classList.add("highlight");
if (instLine != null) {
const r = rect(instLine), c = rect(instList);
if (Math.max(c.top-r.bottom, r.top-c.bottom)>=-30) instLine.scrollIntoView({ block:"center" });
if (Math.max(c.top-r.bottom, r.top-c.bottom)>=-30) instList.scrollTop = instLine.offsetTop-instList.clientHeight/2+instLine.clientHeight/2;
}
}
@@ -362,7 +361,7 @@ async function renderProfiler(path, opts) {
displaySelection("#profiler");
// support non realtime x axis units
formatTime = opts.unit === "ms" ? formatMicroseconds : formatCycles;
if (data?.path !== path) { data = {tracks:new Map(), axes:{}, path, first:null, pcToShape:new Map()}; focusedDevice = null; focusedShape = null; }
if (data?.path !== path) { data = {tracks:new Map(), axes:{}, path, first:null}; focusedDevice = null; focusedShape = null; }
setFocus(focusedShape);
// layout once!
if (data.tracks.size !== 0) return updateProgress(Status.COMPLETE);
@@ -451,10 +450,10 @@ async function renderProfiler(path, opts) {
}
// tiny device events go straight to the rewrite rule
const key = k.startsWith("TINY") ? null : `${k}-${j}`;
let info = e.info != null ? "\n"+e.info : "", trace = null
if (info.startsWith("\nPC:")) { data.pcToShape.set(key, {wave:dnum, pc:parseInt(e.info.split(":")[1]), st:e.st}); info = ""; }
let info = e.info != null ? "\n"+e.info : "", trace = null, pc = null
if (info.startsWith("\nPC:")) { pc = parseInt(e.info.split(":")[1]); info = ""; }
if (info.startsWith("\nTB:")) { trace = info; info = ""; }
const arg = { tooltipText:" N:"+shapes.length+"\n"+formatTime(e.dur)+info, label, trace, bufs:[], key, ctx:shapeRef?.ctx, step:shapeRef?.step };
const arg = { tooltipText:" N:"+shapes.length+"\n"+formatTime(e.dur)+info, label, pc, trace, bufs:[], key, ctx:shapeRef?.ctx, step:shapeRef?.step };
if (e.key != null) shapeMap.set(e.key, key);
// offset y by depth
shapes.push({x:e.st, y:levelHeight*depth, width:e.dur, height:levelHeight, arg, label:opts.hideLabels ? null : label, fillColor });
@@ -550,11 +549,10 @@ async function renderProfiler(path, opts) {
}
}
for (const m of markers) m.label = m.name.split(/(\s+)/).map(st => ({ st, color:m.color, width:ctx.measureText(st).width }));
data.pcToShape = new Map([...data.pcToShape].sort((a, b) => a[1].st - b[1].st));
if (extData.pcMap != null) data.pcMap = extData.pcMap; setFocus(focusedShape);
// secondary axis mapping
let instRange = null;
for (const [k, { shapes }] of data.tracks) if (!k.includes("Clock")) {
for (const [k, { shapes }] of data.tracks) if (!k.includes("Clock") && path.includes("pkts")) {
const first = shapes[0].x, last = shapes.at(-1).x+shapes.at(-1).width;
instRange = instRange == null ? [first, last] : [Math.min(first, instRange[0]), Math.max(last, instRange[1])];
}