From fc3e50982297c5873202f43cd4bdbe154a882df2 Mon Sep 17 00:00:00 2001
From: qazal <77887910+Qazalin@users.noreply.github.com>
Date: Sat, 28 Jun 2025 16:04:51 +0300
Subject: [PATCH] viz: new canvas on first render (#11016)

---
 tinygrad/viz/index.html  |  5 +----
 tinygrad/viz/js/index.js | 15 ++++++++-------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/tinygrad/viz/index.html b/tinygrad/viz/index.html
index e756199cc8..81b3eaabfc 100644
--- a/tinygrad/viz/index.html
+++ b/tinygrad/viz/index.html
@@ -227,10 +227,7 @@
       </button>
     </div>
     <div class="container ctx-list-parent"><div class="ctx-list"></div></div>
-    <div class="view profiler">
-      <div id="device-list"></div>
-      <canvas id="timeline"></canvas>
-    </div>
+    <div class="view profiler"></div>
     <div class="view graph">
       <div class="progress-message">Rendering new layout...</div>
       <svg id="graph-svg" preserveAspectRatio="xMidYMid meet">
diff --git a/tinygrad/viz/js/index.js b/tinygrad/viz/js/index.js
index af0ab0a549..518ba89863 100644
--- a/tinygrad/viz/js/index.js
+++ b/tinygrad/viz/js/index.js
@@ -240,24 +240,25 @@ function formatTime(ts, dur=ts) {
 
 const colors = ["#1D1F2A", "#2A2D3D", "#373B4F", "#444862", "#12131A", "#2F3244", "#3B3F54", "#4A4E65", "#181A23", "#232532", "#313548", "#404459"];
 
-var data, canvasZoom, zoomLevel = d3.zoomIdentity;
+var profileRet, canvasZoom, zoomLevel = d3.zoomIdentity;
 async function renderProfiler() {
   displayGraph("profiler");
   d3.select(".metadata").html("");
-  if (data != null) return;
-  const { layout, st, et } = await (await fetch("/get_profile")).json();
+  const profiler = d3.select(".profiler").html("");
+  const deviceList = profiler.append("div").attr("id", "device-list").node();
+  const canvas = profiler.append("canvas").attr("id", "timeline").node();
+  if (profileRet == null) profileRet = await (await fetch("/get_profile")).json()
+  const { layout, st, et } = profileRet;
   const kernelMap = new Map();
   for (const [i, c] of ctxs.entries()) kernelMap.set(c.function_name, { name:c.name, i });
   // place devices on the y axis and set vertical positions
   const [tickSize, padding] = [10, 8];
-  const deviceList = document.getElementById("device-list");
   deviceList.style.paddingTop = `${tickSize+padding}px`;
-  const canvas = document.getElementById("timeline");
   const ctx = canvas.getContext("2d");
   const canvasTop = rect(canvas).top;
   // color by name
   const nameMap = new Map();
-  data = [];
+  const data = [];
   for (const [k, { timeline }] of Object.entries(layout)) {
     if (timeline.shapes.length === 0) continue;
     const div = deviceList.appendChild(document.createElement("div"));
@@ -274,7 +275,7 @@ async function renderProfiler() {
        nameMap.set(e.name, { fillColor:colors[i%colors.length], label });
      }
      // offset y by depth
-      data.push({ x:e.st-st, dur:e.dur, name:e.name, height:levelHeight, y:offsetY+levelHeight*e.depth, kernel, ...nameMap.get(e.name) });
+     data.push({ x:e.st-st, dur:e.dur, name:e.name, height:levelHeight, y:offsetY+levelHeight*e.depth, kernel, ...nameMap.get(e.name) });
     }
     // lastly, adjust device rect by number of levels
     div.style.height = `${levelHeight*timeline.maxDepth+padding}px`;