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 ux improvements (#15483)

Browse Source 
* test

* better

* work
This commit is contained in:
qazal
2026-03-25 20:18:25 +02:00
committed by GitHub
parent 737d5f67f9
commit 7c2c8d3905
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -250,7 +250,7 @@ var data, focusedDevice, focusedShape, formatTime, canvasZoom, zoomLevel = d3.zo
const canvasDims = () => {
const sideRect = rect("#device-list");
return [document.querySelector("#profiler").clientWidth-sideRect.width, Math.round(sideRect.height)];
return [Math.round(document.querySelector("#profiler").clientWidth-sideRect.width), Math.round(sideRect.height)];
}
function selectShape(key) {
@@ -307,6 +307,8 @@ function setFocus(key) {
const link = e?.arg.link ?? data.links.get(key);
data.link = link == null ? null : [key, link];
focusedShape = key; d3.select("#timeline").call(canvasZoom.transform, zoomLevel);
const tooltip = document.getElementById("tooltip");
if (tooltip.dataset.key !== key) tooltip.style.display = "none";
}
const { eventType, e } = selectShape(key);
if (metadata.querySelector(".info") == null) d3.select(metadata).html("").append("div").classed("info", true);
@@ -601,7 +603,7 @@ async function renderProfiler(path, opts) {
const canvasWidth = canvas.clientWidth;
ctx.clearRect(0, 0, canvasWidth, canvas.clientHeight);
// rescale to match current zoom
const xscale = d3.scaleLinear().domain([data.first, dur]).range([0, canvasWidth]);
const xscale = timelineScale();
const visibleX = xscale.range().map(zoomLevel.invertX, zoomLevel).map(xscale.invert, xscale);
const st = visibleX[0], et = visibleX[1];
xscale.domain([st, et]);
@@ -759,6 +761,7 @@ async function renderProfiler(path, opts) {
tooltip.style.display = "block";
tooltip.style.left = (e.pageX+10)+"px";
tooltip.style.top = (e.pageY)+"px";
tooltip.dataset.key = foundRect.key ?? "";
} else tooltip.style.display = "none";
});
canvas.addEventListener("mouseleave", () => document.getElementById("tooltip").style.display = "none");