diff --git a/index.html b/index.html
index d7c05be..10f7497 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,11 @@
       flex-direction: column;
       background: #1e1e1e;
       color: #dcdcdc;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      margin: 0;
+      overflow: hidden;
     }
 
     h1 {
@@ -79,20 +84,24 @@
     }
 
     #split {
-      flex: 1;
       display: flex;
-      height: 100%;
+      flex-direction: row;
+      height: 100vh;
     }
 
-    #left,
     #right {
-      height: 100%;
-      overflow: hidden;
+      flex: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
     }
 
     #left {
-      padding: 5px;
-      border-right: 1px solid #3a3a3a;
+      width: 30%;
+      border-right: 1px solid #333;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
     }
 
     /* Call Tree box matching right tabs */
@@ -107,32 +116,56 @@
       margin-right: 5px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
       font-weight: bold;
+
     }
 
     #tree {
       width: 100%;
       height: calc(100vh - 120px);
+      overflow-y: auto;
       border: 1px solid #3a3a3a;
-      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
       background: #2b2b2b;
+      position: relative;
+      contain: layout paint size;
+
+    }
+
+    #tree::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    #tree::-webkit-scrollbar-thumb {
+      background-color: #666;
+      border-radius: 5px;
+    }
+
+    #tree::-webkit-scrollbar-track {
+      background-color: #222;
+    }
+
+    .profiler-table td {
+      padding: 4px 8px;
     }
 
     #tabs {
+      height: 40px;
+      background: #222;
       display: flex;
-      border-bottom: 1px solid #3a3a3a;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 10px;
     }
 
+
     .tab {
+      display: inline-block;
       padding: 10px 20px;
+      margin-right: 5px;
       border: 1px solid #3a3a3a;
-      border-bottom: none;
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
       background: #2b2b2b;
-      color: #dcdcdc;
-      margin-right: 5px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+      color: #fff;
       cursor: pointer;
+      white-space: nowrap;
     }
 
     .tab.active {
@@ -142,18 +175,28 @@
     }
 
     .tab-content {
-      display: none;
-      height: calc(100% - 40px);
-      overflow: auto;
-      padding: 10px;
+      position: absolute;
+      top: 40px;
+      /* height of tabs */
+      left: 0;
+      right: 0;
+      bottom: 0;
+      visibility: hidden;
+      z-index: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
     }
 
     .tab-content.active {
-      display: block;
+      visibility: visible;
+      z-index: 1;
     }
 
     #flamegraphView svg {
       background: #1e1e1e;
+      contain: layout paint size;
+
     }
 
     .tab-content>div {
@@ -228,6 +271,7 @@ <h1>Python Profiler Viewer</h1>
     </div>
 
     <div id="right">
+
       <div id="tabs">
         <div class="tab active" data-tab="timelineTab">Timeline</div>
         <div class="tab" data-tab="flamegraphTab">Flamegraph</div>
@@ -235,7 +279,6 @@ <h1>Python Profiler Viewer</h1>
         <div class="tab" data-tab="detailsTab">Details</div>
         <div class="tab" data-tab="compareTab">Compare</div>
       </div>
-
       <div id="timelineTab" class="tab-content active">
         <div id="timeline"></div>
       </div>
@@ -256,10 +299,11 @@ <h1>Python Profiler Viewer</h1>
 
   <!-- Inline Streaming Worker -->
   <script>
+    let flamegraphActive = false;
     const workerCode = `
     self.addEventListener("message", async function(e) {
       const file = e.data.file;
-      const CHUNK_SIZE = 2024 * 2024  ;
+      const CHUNK_SIZE = 2*1024 * 1024 ;
       let offset = 0;
       const decoder = new TextDecoder();
       let leftover = '';
@@ -334,6 +378,7 @@ <h1>Python Profiler Viewer</h1>
     const blob = new Blob([workerCode], { type: "application/javascript" });
     const workerURL = URL.createObjectURL(blob);
 
+
     let worker;
 
     document.getElementById("logFile").addEventListener("change", function (e) {
@@ -348,7 +393,6 @@ <h1>Python Profiler Viewer</h1>
 
       worker = new Worker(workerURL);
       worker.postMessage({ file });
-
       worker.addEventListener("message", function (e) {
         const { type, data, message, loaded, total } = e.data;
 
@@ -407,10 +451,6 @@ <h1>Python Profiler Viewer</h1>
     });
 
 
-
-
-
-
     resizeObserver = new ResizeObserver(() => {
       if (flamegraphActive) {
         renderFlamegraph(flamegraphRoot);
diff --git a/profiler.js b/profiler.js
index 8b98a48..8e83ecd 100644
--- a/profiler.js
+++ b/profiler.js
@@ -1,15 +1,31 @@
+
+
+let queue = []
+
+function queuehandler(ms){
+  
+  // Calculate the time difference in milliseconds
+  queue.forEach(element => {
+    const date1 = new Date();
+    element();
+    while(new date()  -  date1 < ms)
+      console.log("slept a tick")
+    });
+
+
+}
+
+
 // GLOBAL STATE
 let calls = {};
 let idMap = {};
-let treeRoot = null;
+let aggregates = {};
 let processedBatches = 0;
 const renderEvery = 5;
-const MAX_NODES = 5000;
-const MAX_TIMELINE = 5000;
-
 
 
 
+// classes
 function CallEntity(call_id, start,end, parent_call_id,children,type,expanded,functionName) {
   this.call_id = call_id;
   
@@ -27,260 +43,168 @@ function CallEntity(call_id, start,end, parent_call_id,children,type,expanded,fu
 }
 
 
-// Build call map and tree structure
-function buildCallMap(calls) {
-  const map = {};
-  for (const id in calls) {
-    var cCall = calls[id];
-    map[id] = new CallEntity(cCall["call_id"]  ,cCall["start"],cCall["end"]  ,cCall["parent_call_id"],[],cCall["type"], cCall?.expanded ?? false , cCall["function"])
-  }
-  for (const id in map) {
-    const node = map[id];
-    if (node.parent_call_id != null && map[node.parent_call_id]) {
-      map[node.parent_call_id].children.push(node);
-    }
-  }
-  return map;
-}
-
-
+// processing 
 
 function finalizeProcessing() {
-  idMap = buildCallMap(calls);
-  treeRoot = buildTree(idMap);
-  renderTree(treeRoot);
+  const forest = buildForest(calls);
+  renderForest(forest);
   renderTimeline(Object.values(calls));
-  renderSummary(computeAggregates(Object.values(calls)));
-
-  if (flamegraphActive) {
-    requestFlamegraphRender();
-  }
+  renderSummary(aggregates);
+  renderFlamegraph(flamegraphRoot);
+  if (forest) showFunctionDetails(forest[0]);
 }
 
-function renderSummary(aggregates) {
-  let html = "<table class='profiler-table'>";
-  html += "<thead><tr><th>Function</th><th>Calls</th><th>Total Time (ms)</th></tr></thead><tbody>";
-  const sorted = Object.entries(aggregates).sort((a, b) => b[1].total - a[1].total);
-  for (const [func, stat] of sorted) {
-    html += `<tr><td>${func}</td><td>${stat.count}</td><td>${stat.total}</td></tr>`;
+function maybeRender() {
+  if (processedBatches % renderEvery === 0) {
+    requestSummaryRender();
+    requestTreeRender();
+    // renderTimeline(Object.values(calls));
+    // if (flamegraphActive) requestFlamegraphRender();
   }
-  html += "</tbody></table>";
-  document.getElementById("summaryTable").innerHTML = html;
 }
 
-
-
-
-function parseTime(timeStr) {
-  const [h, m, s] = timeStr.split(':');
-  const [sec, ms = "0"] = s.split('.');
-  const date = new Date();
-  date.setHours(parseInt(h), parseInt(m), parseInt(sec), parseInt(ms));
-  return date;
-}
-
-
-
-
-// Streaming batch processing
 function processBatch(batch) {
   for (const entry of batch) {
     const id = entry.call_id;
+    var cCall;
+    // Create or update call
     if (!calls[id]) {
-      calls[id] = {
+      calls[id] =  {
         call_id: id,
         parent_call_id: entry.parent_call_id,
         function: entry.function,
         type: entry.type,
+        children : new Set(),
+        expanded: false,
         start: null,
         end: null
       };
     }
-    if (entry.event === "start") {
-      calls[id].start = parseTime(entry.time);
-    } else if (entry.event === "end") {
-      calls[id].end = parseTime(entry.time);
-      // Update flamegraph only when both start & end exist
-      if (calls[id].start) {
-        addToFlamegraph(calls[id]);
-      }
-    }
-  }
-  processedBatches++;
-}
-
-function maybeRender() {
-  if (processedBatches % renderEvery === 0) {
-    renderPartial();
-
-    if (flamegraphActive) {
-      requestFlamegraphRender();
-    }
-  }
-}
-
-
-function renderPartial() {
-  const partialAgg = computeAggregates(Object.values(calls));
-  renderSummary(partialAgg);
-}
 
+    cCall = calls[id];
 
+    if (entry.event === "start") 
+      cCall.start = parseTime(entry.time);
+    else if (entry.event === "end") 
+      cCall.end = parseTime(entry.time);
+    
 
+    // if (cCall.start && cCall.end)
+    //     addToFlamegraph(cCall);
+      
+    // Link to parent
+    if (cCall.parent_call_id && calls[cCall.parent_call_id])
+        calls[cCall.parent_call_id].children.add(cCall.call_id);
 
-function flattenVisibleTree(node, result = [], depth = 0) {
-  result.push({ node, depth });
-  if (node.expanded) {
-    for (const child of node.children) {
-      flattenVisibleTree(child, result, depth + 1);
+    
+    if (!aggregates[entry.function]) {
+      aggregates[entry.function] = { count: 0, total: 0 };
     }
-  }
-  return result;
-}
-
-function buildTree(idMap) {
-  for (const id in idMap) {
-    if (idMap[id].parent_call_id == null || !idMap[idMap[id].parent_call_id]) {
-      return idMap[id];
+    aggregates[entry.function].count += 1;
+    if (entry.start && entry.end) {
+      aggregates[entry.function].total += (entry.end - entry.start);
     }
   }
-  return null;
+  processedBatches++;
 }
 
-function renderTree(treeData) {
-  if (!treeData) return;
 
-  const container = document.getElementById("tree");
-  container.innerHTML = "";
 
-  const table = document.createElement("table");
-  table.className = "profiler-table";
-  container.appendChild(table);
 
-  const visibleNodes = flattenVisibleTree(treeData);
-  
-  for (const { node, depth } of visibleNodes) {
-    const row = table.insertRow();
-    const cell = row.insertCell();
-
-    cell.style.paddingLeft = (depth * 20) + "px";
-
-    // Expand/collapse toggle
-    if (node.children.length > 0) {
-      const toggle = document.createElement("span");
-      toggle.textContent = node.expanded ? "▼ " : "▶ ";
-      toggle.style.cursor = "pointer";
-      toggle.onclick = () => {
-        node.expanded = !node.expanded;
-        renderTree(treeData); // re-render after toggle
-      };
-      cell.appendChild(toggle);
-    } else {
-      cell.textContent = "• ";
-    }
-
-    const label = document.createElement("span");
-    label.textContent = `${node.function} (${node.call_id})`;
-    label.style.cursor = "pointer";
-    label.onclick = () => showFunctionDetails(node);
-    cell.appendChild(label);
+// details handler
+function showFunctionDetails(data) {
+  let html = "<table class='profiler-table'>";
+  html += "<thead><tr><th colspan='2'>Function Details</th></tr></thead><tbody>";
+  html += `<tr><td>Function:</td><td>${data.function}</td></tr>`;
+  html += `<tr><td>Call ID:</td><td>${data.call_id}</td></tr>`;
+  if (data.parent_call_id && calls[data.parent_call_id]) {
+    html += `<tr><td>Parent:</td><td>${calls[data.parent_call_id].function} (${data.parent_call_id})</td></tr>`;
   }
+  html += `<tr><td>Start:</td><td>${data.start || "missing"}</td></tr>`;
+  html += `<tr><td>End:</td><td>${data.end || "missing"}</td></tr>`;
+  if (data.start && data.end)
+    html += `<tr><td>Duration:</td><td>${data.end - data.start} ms</td></tr>`;
+  else
+    html += `<tr><td>Duration:</td><td>incomplete</td></tr>`;
+  html += "</tbody></table>";
+  document.getElementById("functionInfo").innerHTML = html;
 }
-// === SAFE TIMELINE RENDERING ===
+
+// timeline handler ===============================================================================================================================================================================================================
+const MAX_TIMELINE = 5000;
 function renderTimeline(callArray) {
   const limited = callArray.slice(0, MAX_TIMELINE);
+  const programStart = Math.min(...limited.map(c => c.start.getTime()));
+
   const bars = limited.map(call => {
     let end = call.end || new Date();
+    const startSec = (call.start.getTime() - programStart) / 1000;
+    const endSec = (call.end  - programStart) / 1000;
+    const durationSec = (endSec - startSec).toFixed(2);
+    // 
     return {
-      x: [call.start, end],
+      x: [startSec, endSec],
       y: [call.function + ` [${call.call_id}]`, call.function + ` [${call.call_id}]`],
       mode: 'lines',
       type: 'scatter',
       name: `${call.function} [${call.call_id}]`,
-      call_id: call.call_id
+      call_id: call.call_id,
+            hovertemplate: `<br>Duration: ${durationSec} S</br><extra></extra>`
+
     };
   });
 
   Plotly.newPlot('timeline', bars, {
     title: 'Global Timeline',
-    xaxis: { type: 'date' },
+    xaxis: {       title: 'Time (s)',
+      tickformat: '.1f',
+      zeroline: false
+    },
     paper_bgcolor: '#1e1e1e',
     plot_bgcolor: '#1e1e1e',
     font: { color: '#dcdcdc' },
-    height: document.getElementById("timeline").clientHeight
+    height: document.getElementById("timeline").clientHeight,
+    hovermode:'closest'
   });
 }
 
-function showFunctionDetails(data) {
-  let html = "<table class='profiler-table'>";
-  html += "<thead><tr><th colspan='2'>Function Details</th></tr></thead><tbody>";
-  html += `<tr><td>Function:</td><td>${data.function}</td></tr>`;
-  html += `<tr><td>Call ID:</td><td>${data.call_id}</td></tr>`;
-  if (data.parent_call_id && idMap[data.parent_call_id]) {
-    html += `<tr><td>Parent:</td><td>${idMap[data.parent_call_id].function} (${data.parent_call_id})</td></tr>`;
-  }
-  html += `<tr><td>Start:</td><td>${data.start || "missing"}</td></tr>`;
-  html += `<tr><td>End:</td><td>${data.end || "missing"}</td></tr>`;
-  if (data.start && data.end)
-    html += `<tr><td>Duration:</td><td>${data.end - data.start} ms</td></tr>`;
-  else
-    html += `<tr><td>Duration:</td><td>incomplete</td></tr>`;
-  html += "</tbody></table>";
-  document.getElementById("functionInfo").innerHTML = html;
-}
+// Summary handler ===============================================================================================================================================================================================================
+let summaryLastRender = 0;
+const summaryRenderInterval = 100;
 
-function computeAggregates(callArray) {
-  const agg = {};
-  for (const call of callArray) {
-    if (!agg[call.function]) {
-      agg[call.function] = { count: 0, total: 0 };
-    }
-    agg[call.function].count += 1;
-    if (call.start && call.end) {
-      agg[call.function].total += (call.end - call.start);
-    }
+
+function requestSummaryRender() {
+  const now = performance.now();
+  if (now - summaryLastRender >= summaryRenderInterval) {
+    summaryLastRender = now;
+    renderSummary(aggregates);
   }
-  return agg;
 }
-
-
-function buildFlamegraphTree(calls) {
-  const root = { name: "__ROOT__", value: 0, children: [] };
-
-  for (const call of Object.values(calls)) {
-    let current = call;
-    const path = [];
-    while (current) {
-      path.unshift(current.function);
-      current = current.parent_call_id ? calls[current.parent_call_id] : null;
-    }
-
-    let node = root;
-    for (const func of path) {
-      let child = node.children.find(c => c.name === func);
-      if (!child) {
-        child = { name: func, value: 0, children: [] };
-        node.children.push(child);
-      }
-      node = child;
-    }
-    if (call.start && call.end)
-      node.value += call.end - call.start;
+function renderSummary(aggregates) {
+  let html = "<table class='profiler-table'>";
+  html += "<thead><tr><th>Function</th><th>Calls</th><th>Total Time (ms)</th></tr></thead><tbody>";
+  const sorted = Object.entries(aggregates).sort((a, b) => b[1].total - a[1].total);
+  for (const [func, stat] of sorted) {
+    html += `<tr><td>${func}</td><td>${stat.count}</td><td>${stat.total}</td></tr>`;
   }
-  return root;
+  html += "</tbody></table>";
+  document.getElementById("summaryTable").innerHTML = html;
 }
 
 
+// Flame graph handler ===============================================================================================================================================================================================================
+let flamegraphLastRender = 0;
+const flamegraphRenderInterval = 100;
 
+let resizeObserver;
+
+let flamegraphRenderTimeout = null;
 
-let flamegraphActive = false;
 let flamegraphSVG = null;
 let flamegraphG = null;
 let flamegraphPendingRender = false;
 let flamegraphRoot = { name: "__ROOT__", value: 0, children: [] };
 const color = d3.scaleOrdinal(d3.schemeTableau10);
-let resizeObserver;
-
 
 function getNodePath(d) {
   return d.ancestors().map(n => n.data.name).reverse().join("/");
@@ -418,7 +342,7 @@ function addToFlamegraph(call) {
   node.value += call.end - call.start;
 }
 
-let flamegraphRenderTimeout = null;
+
 
 function requestFlamegraphRender() {
   if (flamegraphRenderTimeout) {
@@ -426,5 +350,198 @@ function requestFlamegraphRender() {
   }
   flamegraphRenderTimeout = setTimeout(() => {
     renderFlamegraph(flamegraphRoot);
-  }, 50);  // slight delay to batch fast incoming updates
-}
\ No newline at end of file
+  }, 100);  // slight delay to batch fast incoming updates
+}
+
+
+// tree Handler ===============================================================================================================================================================================================================
+let treeLastRender = 0;
+const treeRenderInterval = 100;
+const BUFFER_ROWS = 10;  // render slightly more than viewport to avoid blank areas
+let rowPool = [];
+
+
+
+function requestTreeRender() {
+  const now = performance.now();
+  if (now - treeLastRender >= treeRenderInterval) {
+    treeLastRender = now;
+    renderForestSnapshot = buildForest(calls);
+    renderVirtualTree(renderForestSnapshot);
+  }
+}
+function buildForest(calls) {
+  const roots = [];
+  for (const id in calls) {
+    const node = calls[id];
+    if (!node.parent_call_id || !calls[node.parent_call_id]) {
+      roots.push(node);
+    }
+  }
+  return roots;
+}
+function flattenVisibleTree(node, result = [], depth = 0) {
+  result.push({ node, depth });
+  if (node.expanded) {
+    for (const child of node.children) {
+      flattenVisibleTree(calls[child], result, depth + 1);
+    }
+  }
+  return result;
+}
+
+function renderForest(forest) {
+  const container = document.getElementById("tree");
+  container.innerHTML = "";
+
+  const table = document.createElement("table");
+  table.className = "profiler-table";
+  container.appendChild(table);
+
+  for (const root of forest) {
+    renderSubtree(root, table, 0);
+  }
+}
+
+function renderSubtree(node, table, depth) {
+  const row = table.insertRow();
+  const cell = row.insertCell();
+  cell.style.paddingLeft = (depth * 20) + "px";
+
+  if (node.children.size > 0) {
+    const toggle = document.createElement("span");
+    toggle.textContent = node.expanded ? "▼ " : "▶ ";
+    toggle.style.cursor = "pointer";
+    toggle.onclick = () => {
+      node.expanded = !node.expanded;
+      renderForest(buildForest(calls));
+    };
+    cell.appendChild(toggle);
+  } else {
+    cell.textContent = "• ";
+  }
+
+  const label = document.createElement("span");
+  label.textContent = `${node.function} (${node.call_id})`;
+  label.style.cursor = "pointer";
+  label.onclick = () => showFunctionDetails(node);
+  cell.appendChild(label);
+
+  if (node.expanded) {
+    for (const child of node.children) {
+      renderSubtree(calls[child], table, depth + 1);
+    }
+  }
+}
+
+const ROW_HEIGHT = 25;
+
+function renderVirtualTree(forest) {
+  const container = document.getElementById("tree");
+  const visibleNodes = [];
+  for (const root of forest) {
+    flattenVisibleTree(root, visibleNodes);
+  }
+
+  const totalHeight = visibleNodes.length * ROW_HEIGHT;
+
+  let scroller;
+  if (rowPool.length === 0) {
+    const viewportHeight = container.clientHeight;
+    const poolSize = Math.ceil(viewportHeight / ROW_HEIGHT) + BUFFER_ROWS;
+    scroller = initRowPool(container, poolSize);
+  } else {
+    scroller = container.firstChild;
+  }
+
+  scroller.style.height = totalHeight + "px";
+
+  // Attach scroll handler
+  container.onscroll = () => {
+    updateVirtualTree(container, scroller, visibleNodes);
+  };
+
+  updateVirtualTree(container, scroller, visibleNodes);
+}
+
+function updateVirtualTree(container, scroller, visibleNodes) {
+  const scrollTop = container.scrollTop;
+  const firstIndex = Math.floor(scrollTop / ROW_HEIGHT);
+  const poolSize = rowPool.length;
+
+  for (let i = 0; i < poolSize; i++) {
+    const nodeIndex = firstIndex + i;
+    const row = rowPool[i];
+
+    if (nodeIndex >= visibleNodes.length) {
+      row.style.display = "none";
+      continue;
+    }
+
+    row.style.display = "flex";
+    row.style.top = (nodeIndex * ROW_HEIGHT) + "px";
+    const { node, depth } = visibleNodes[nodeIndex];
+
+    row.innerHTML = "";  // Replace with smart row reuse later
+
+    row.style.paddingLeft = (depth * 20) + "px";
+
+    if (node.children.size > 0) {
+      const toggle = document.createElement("span");
+      toggle.textContent = node.expanded ? "▼ " : "▶ ";
+      toggle.style.marginRight = "5px";
+      toggle.onclick = (e) => {
+        e.stopPropagation();
+        node.expanded = !node.expanded;
+        renderVirtualTree(buildForest(calls));
+      };
+      row.appendChild(toggle);
+    } else {
+      row.appendChild(document.createTextNode("• "));
+    }
+
+    const label = document.createElement("span");
+    label.textContent = `${node.function} (${node.call_id})`;
+    label.onclick = () => showFunctionDetails(node);
+    row.appendChild(label);
+  }
+}
+
+function initRowPool(container, poolSize) {
+  const scroller = document.createElement("div");
+  scroller.style.position = "relative";
+  scroller.style.width = "100%";
+  container.innerHTML = "";
+  container.appendChild(scroller);
+  rowPool = [];
+
+  for (let i = 0; i < poolSize; i++) {
+    const row = document.createElement("div");
+    row.style.position = "absolute";
+    row.style.left = "0";
+    row.style.right = "0";
+    row.style.height = ROW_HEIGHT + "px";
+    row.style.display = "flex";
+    row.style.alignItems = "center";
+    row.style.paddingLeft = "0px";
+    row.style.cursor = "pointer";
+    rowPool.push(row);
+    scroller.appendChild(row);
+  }
+
+  return scroller;
+}
+
+
+
+// Helper functions ===============================================================================================================================================================================================================
+
+function parseTime(timeStr) {
+  const [h, m, s] = timeStr.split(':');
+  const [sec, ms = "0"] = s.split('.');
+  const date = new Date();
+  date.setHours(parseInt(h), parseInt(m), parseInt(sec), parseInt(ms));
+  return date;
+}
+
+