Update static/canvas.js

static/canvas.js

@@ -1,47 +1,64 @@
-// static/js/canvas.js
-
-// --- Configuration ---
+// --- Globals & Config ---
 const CONFIG = {
-    // Only render nodes within this padding of the viewport
-    viewportPadding: 200, 
-    // Throttle scroll events to run only every 16ms (60fps)
-    throttleMs: 16,
-    // Visual settings
+    viewportPadding: 200,
     nodeWidth: 200,
     nodeHeight: 50,
     indentWidth: 60,
     rowHeight: 80
 };
 
-// --- Setup Stage ---
-const width = window.innerWidth - 400; // Adjust for sidebar
-const height = window.innerHeight;
+let currentTab = 'visualizer';
+let sourceLines = [];
+let allNodes = [];
+let isTicking = false;
 
+// --- Konva Setup ---
 const stage = new Konva.Stage({
     container: 'container',
-    width: width,
-    height: height,
+    width: window.innerWidth - 400, // Adjust for sidebar width
+    height: window.innerHeight,
     draggable: true
 });
 
 const layer = new Konva.Layer();
 stage.add(layer);
 
-// Global State
-let allNodes = [];      // Array of { group, x, y, visible }
-let sourceLines = [];   // Cached source code lines
-let isTicking = false;  // For throttling
+// --- UI Logic: Tabs ---
+function switchTab(tabId) {
+    document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active'));
+    document.getElementById(`tab-${tabId}`).classList.add('active');
+    
+    document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+    // Find the button that triggered this or match by ID if needed
+    const btn = document.querySelector(`button[onclick="switchTab('${tabId}')"]`);
+    if(btn) btn.classList.add('active');
+    
+    currentTab = tabId;
+    
+    if (tabId === 'dataset') {
+        loadDatasetTable();
+    }
+}
+
+// --- UI Logic: Status ---
+function setStatus(msg, state) {
+    const el = document.getElementById('statusIndicator');
+    el.innerText = msg;
+    el.className = ''; 
+    if(state === 'ready') el.classList.add('status-ready');
+    if(state === 'working') el.classList.add('status-working');
+    if(state === 'success') el.classList.add('status-success');
+    if(state === 'error') el.classList.add('status-error');
+}
 
-// --- 1. Optimization Core: Viewport Culling ---
+// --- Core: Culling & Rendering Optimization ---
 function updateVisibleNodes() {
     isTicking = false;
     
-    // Get the visible viewport in "World Coordinates" (accounting for zoom/pan)
     const scale = stage.scaleX();
     const stageX = stage.x();
     const stageY = stage.y();
 
-    // The logic: Invert the transform to find what part of the world is visible
     const viewX = -(stageX / scale) - CONFIG.viewportPadding;
     const viewY = -(stageY / scale) - CONFIG.viewportPadding;
     const viewW = (stage.width() / scale) + (CONFIG.viewportPadding * 2);
@@ -50,14 +67,10 @@ function updateVisibleNodes() {
     const viewRight = viewX + viewW;
     const viewBottom = viewY + viewH;
 
-    // Batch updates to prevent multiple redraws
     let nodesChanged = false;
 
-    // Fast loop (standard for-loop is faster than .forEach for massive arrays)
     for (let i = 0; i < allNodes.length; i++) {
         const node = allNodes[i];
-        
-        // Simple Bounding Box Collision Check
         const isVisible = (
             node.x < viewRight && 
             node.x + CONFIG.nodeWidth > viewX && 
@@ -65,7 +78,6 @@ function updateVisibleNodes() {
             node.y + CONFIG.nodeHeight > viewY
         );
 
-        // Only touch the DOM/Konva object if state changes (Save CPU)
         if (node.visible !== isVisible) {
             node.group.visible(isVisible);
             node.visible = isVisible;
@@ -74,12 +86,10 @@ function updateVisibleNodes() {
     }
 
     if (nodesChanged) {
-        // layer.batchDraw() is more efficient than layer.draw()
         layer.batchDraw();
     }
 }
 
-// Request Animation Frame Wrapper (Throttling)
 function requestUpdate() {
     if (!isTicking) {
         requestAnimationFrame(updateVisibleNodes);
@@ -87,18 +97,9 @@ function requestUpdate() {
     }
 }
 
-// Bind optimization to interactions
+// --- Canvas Interactions ---
 stage.on('dragmove', requestUpdate);
-stage.on('wheel', (e) => {
-    // ... (Zoom logic below) ...
-    // After zoom, we must update visibility
-    requestUpdate(); 
-});
-
-
-// --- 2. Standard Logic (Zoom & Draw) ---
 
-// Zoom Logic
 stage.on('wheel', (e) => {
     e.evt.preventDefault();
     const oldScale = stage.scaleX();
@@ -113,19 +114,19 @@ stage.on('wheel', (e) => {
         y: pointer.y - (pointer.y - stage.y()) / oldScale * newScale
     };
     stage.position(newPos);
+    requestUpdate();
 });
 
-// Resize Handler
 window.addEventListener('resize', () => {
     stage.width(window.innerWidth - 400);
     stage.height(window.innerHeight);
     requestUpdate();
 });
 
-// API Listener
-document.getElementById('btnVisualize').addEventListener('click', () => {
+// --- API: Visualizer ---
+function visualize() {
     const code = document.getElementById('codeInput').value;
-    log('Parsing...');
+    setStatus('Parsing...', 'working');
     
     fetch('/parse', {
         method: 'POST',
@@ -134,40 +135,37 @@ document.getElementById('btnVisualize').addEventListener('click', () => {
     })
     .then(res => res.json())
     .then(data => {
-        if(data.error) log(data.error, 'error');
-        else {
+        if(data.error) {
+            alert(data.error);
+            setStatus('Error', 'error');
+        } else {
             drawGraph(data, code);
-            log(`Graph: ${data.nodes.length} nodes`);
+            setStatus(`Rendered ${data.nodes.length} nodes`, 'ready');
         }
-    });
-});
+    })
+    .catch(err => setStatus('Network Error', 'error'));
+}
 
 function drawGraph(data, fullSourceCode) {
-    // Cleanup old memory
     layer.destroyChildren();
-    allNodes = []; 
-    
-    // Cache source lines
+    allNodes = [];
     sourceLines = fullSourceCode.split('\n');
 
     const nodeMap = {};
-    
-    // --- Batch Create Nodes ---
+    const colors = {
+        'function': '#a29bfe', 'class': '#e84393', 'if': '#fab1a0',
+        'for': '#fdcb6e', 'while': '#fdcb6e', 'return': '#55efc4',
+        'assigned_variable': '#74b9ff', 'import': '#b2bec3', 'try': '#ff7675'
+    };
+
+    // Draw Nodes
     data.nodes.forEach((node, index) => {
         const x = 100 + (node.lvl * CONFIG.indentWidth);
         const y = 50 + (index * CONFIG.rowHeight);
 
-        // Styling
-        const colors = {
-            'function': '#a29bfe', 'class': '#e84393', 'if': '#fab1a0',
-            'for': '#fdcb6e', 'while': '#fdcb6e', 'return': '#55efc4',
-            'assigned_variable': '#74b9ff', 'import': '#b2bec3'
-        };
-
         const group = new Konva.Group({ 
             x: x, 
             y: y,
-            // Optimization: Stop this group from catching mouse events if not needed
             listening: true 
         });
 
@@ -181,7 +179,6 @@ function drawGraph(data, fullSourceCode) {
             shadowColor: 'black', 
             shadowBlur: 10, 
             shadowOpacity: 0.3,
-            // Optimization: Perfect bounding box for hit detection
             hitStrokeWidth: 0
         });
 
@@ -190,7 +187,6 @@ function drawGraph(data, fullSourceCode) {
             text: node.lbl,
             fontSize: 14, fontFamily: 'JetBrains Mono', fill: '#fff',
             width: 180, ellipsis: true,
-            // Optimization: Text doesn't need to listen to clicks, the Group/Rect handles it
             listening: false 
         });
 
@@ -210,35 +206,40 @@ function drawGraph(data, fullSourceCode) {
             const start = node.loc[0] - 1;
             const end = node.loc[1];
             const snippet = sourceLines.slice(start, end).join('\n');
-            log(`Source:\n${snippet}`);
+            console.log(snippet); // Optional: log to console
+            // Could add a toast or modal to show snippet here
         });
 
-        // Hover
-        group.on('mouseover', () => { document.body.style.cursor = 'pointer'; rect.fill('#353b48'); layer.batchDraw(); });
-        group.on('mouseout', () => { document.body.style.cursor = 'default'; rect.fill('#2d3436'); layer.batchDraw(); });
+        group.on('mouseover', () => { 
+            document.body.style.cursor = 'pointer'; 
+            rect.fill('#353b48'); 
+            layer.batchDraw(); 
+        });
+        
+        group.on('mouseout', () => { 
+            document.body.style.cursor = 'default'; 
+            rect.fill('#2d3436'); 
+            layer.batchDraw(); 
+        });
 
         layer.add(group);
         
-        // Save Reference for Culling Logic
         nodeMap[node.id] = { x, y };
-        allNodes.push({
-            group: group,
-            x: x,
-            y: y,
-            visible: true
-        });
+        allNodes.push({ group, x, y, visible: true });
     });
 
     // Draw Connections
-    // Optimization: Draw connections on a generic "listening: false" shape to avoid hit-detection overhead
     data.connections.forEach(conn => {
         const f = nodeMap[conn.f];
         const t = nodeMap[conn.t];
         if (f && t) {
             const line = new Konva.Line({
                 points: [f.x+20, f.y+50, f.x+20, t.y-10, t.x+20, t.y-10, t.x+20, t.y],
-                stroke: '#636e72', strokeWidth: 2, tension: 0.2, opacity: 0.5,
-                listening: false // Critical: Don't calculate mouse hits for lines
+                stroke: '#636e72', 
+                strokeWidth: 2, 
+                tension: 0.2, 
+                opacity: 0.5,
+                listening: false 
             });
             layer.add(line);
             line.moveToBottom();
@@ -246,15 +247,99 @@ function drawGraph(data, fullSourceCode) {
     });
 
     layer.batchDraw();
-    // Initial cull calculation
-    updateVisibleNodes();
+    stage.x(50);
+    stage.y(50);
+    requestUpdate();
 }
 
-function log(msg, type='info') {
-    const consoleBody = document.getElementById('logOutput');
-    const color = type === 'error' ? '#ff7675' : '#55efc4';
-    if(consoleBody) {
-        consoleBody.innerHTML += `<div style="color:${color}">> ${msg}</div>`;
-        consoleBody.scrollTop = consoleBody.scrollHeight;
-    }
+// --- API: Dataset ---
+function addToDataset() {
+    const code = document.getElementById('codeInput').value;
+    setStatus('Saving...', 'working');
+    
+    fetch('/dataset/add', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: code })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            setStatus('Saved to Dataset!', 'success');
+        } else {
+            alert(data.message);
+            setStatus('Save Failed', 'error');
+        }
+    })
+    .catch(() => setStatus('Network Error', 'error'));
+}
+
+function loadDatasetTable() {
+    const tbody = document.getElementById('datasetTableBody');
+    tbody.innerHTML = '<tr><td colspan="4">Loading...</td></tr>';
+    
+    fetch('/dataset/list')
+    .then(res => res.json())
+    .then(entries => {
+        tbody.innerHTML = '';
+        if(entries.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; opacity:0.5">Dataset is empty</td></tr>';
+            return;
+        }
+        
+        entries.forEach(entry => {
+            const row = `
+                <tr>
+                    <td class="mono">${entry.id.split('_')[1]}</td>
+                    <td>${new Date(entry.timestamp).toLocaleTimeString()}</td>
+                    <td><span class="badge">${entry.node_count} nodes</span></td>
+                    <td class="mono-dim">${entry.snippet}</td>
+                </tr>
+            `;
+            tbody.innerHTML += row;
+        });
+    });
+}
+
+// --- API: Hugging Face Upload ---
+function openUploadModal() {
+    document.getElementById('uploadModal').classList.remove('hidden');
+}
+
+function closeUploadModal() {
+    document.getElementById('uploadModal').classList.add('hidden');
+}
+
+function performUpload() {
+    const token = document.getElementById('hfToken').value;
+    const repo = document.getElementById('hfRepo').value;
+    
+    if(!token || !repo) return alert("Please fill in both fields");
+    
+    const btn = document.querySelector('#uploadModal .btn-primary');
+    const originalText = btn.innerText;
+    btn.innerText = "Pushing...";
+    btn.disabled = true;
+    
+    fetch('/dataset/upload_hf', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token: token, repo_id: repo })
+    })
+    .then(res => res.json())
+    .then(data => {
+        btn.innerText = originalText;
+        btn.disabled = false;
+        if(data.status === 'success') {
+            closeUploadModal();
+            alert(data.message);
+        } else {
+            alert("Error: " + data.message);
+        }
+    })
+    .catch(err => {
+        btn.innerText = originalText;
+        btn.disabled = false;
+        alert("Network Error");
+    });
 }