github/tinygrad
1
1
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-01-10 07:28:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

viz: small profiler resizing improvements (#12026)

Browse Source 
* switch to ResizeObserver

* set a fixed size for device-list

* less

* height from devices

* int

* side rect, more const
This commit is contained in:
qazal
2025-09-05 18:29:03 +03:00
committed by GitHub
parent 5dcc4c7f1b
commit f08299d2ec
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tinygrad/viz/index.html
View File

@@ -252,7 +252,7 @@
}
#device-list > div {
min-height: 32px;
max-width: 132px;
width: 132px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
@@ -261,6 +261,9 @@
#device-list > div:hover {
background-color: rgba(20, 23, 35, 0.3);
}
#device-list {
height: fit-content;
}
.raw-text {
padding: 0 8px;
width: 100%;

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

@@ -380,9 +380,9 @@ async function renderProfiler() {
function resize() {
const profiler = document.querySelector(".profiler");
// NOTE: use clientWidth to account for the scrollbar
let [width, height] = [profiler.clientWidth, profiler.scrollHeight];
width -= rect("#device-list").width+padding;
const sideRect = rect("#device-list");
const width = profiler.clientWidth-(sideRect.width+padding), height = Math.round(sideRect.height);
if (canvas.width === width*dpr && canvas.height === height*dpr) return;
canvas.width = width*dpr;
canvas.height = height*dpr;
canvas.style.height = `${height}px`;
@@ -395,8 +395,7 @@ async function renderProfiler() {
d3.select(canvas).call(canvasZoom);
document.addEventListener("contextmenu", e => e.ctrlKey && e.preventDefault());
resize();
window.addEventListener("resize", resize);
new ResizeObserver(([e]) => e.contentRect.width > 0 && resize()).observe(profiler.node());
function findRectAtPosition(x, y) {
const { top, left, width, height } = rect(canvas);