Update static/canvas.js

static/canvas.js

@@ -60,13 +60,15 @@ document.getElementById('btnVisualize').addEventListener('click', () => {
         if(data.error) {
             log(data.error, 'error');
         } else {
-            drawGraph(data);
-            log(`Graph generated: ${data.nodes.length} nodes, ${data.connections.length} edges.`);
+            // PASS 'code' HERE so we can slice it later
+            drawGraph(data, code); 
+            log(`Graph generated: ${data.nodes.length} nodes.`);
         }
     })
     .catch(err => log('Network error', 'error'));
 });
 
+
 document.getElementById('btnDataset').addEventListener('click', () => {
     const code = document.getElementById('codeInput').value;
     log('Generating vector dataset entry...');
@@ -87,130 +89,93 @@ document.getElementById('btnDataset').addEventListener('click', () => {
 });
 
 // Drawing Logic
-function drawGraph(data) {
+function drawGraph(data, fullSourceCode) {
     layer.destroyChildren();
     
     if (data.nodes.length === 0) return;
 
+    // OPTIMIZATION: Split code once into lines for O(1) access
+    const sourceLines = fullSourceCode.split('\n');
+
     const nodeMap = {};
     const X_OFFSET = 100;
     const Y_START = 50;
     const INDENT_WIDTH = 60;
     const ROW_HEIGHT = 80;
 
-    // Node Colors based on Category
     const colors = {
-        'function': '#a29bfe', // Purple
-        'class': '#e84393',    // Pink
-        'if': '#fab1a0',       // Peach
-        'for': '#fdcb6e',      // Yellow
-        'while': '#fdcb6e',
-        'return': '#55efc4',   // Green
-        'assigned_variable': '#74b9ff', // Blue
-        'import': '#b2bec3'    // Grey
+        'function': '#a29bfe', 'class': '#e84393', 'if': '#fab1a0',
+        'for': '#fdcb6e', 'while': '#fdcb6e', 'return': '#55efc4',
+        'assigned_variable': '#74b9ff', 'import': '#b2bec3'
     };
 
-    // Draw Nodes
     data.nodes.forEach((node, index) => {
-        // Layout: Simple Waterfall with Indentation
-        const x = X_OFFSET + (node.level * INDENT_WIDTH);
+        // Use short keys: node.lvl instead of node.level
+        const x = X_OFFSET + (node.lvl * INDENT_WIDTH);
         const y = Y_START + (index * ROW_HEIGHT);
 
-        const group = new Konva.Group({
-            x: x,
-            y: y,
-            draggable: false // Keep rigid for structure visualization
-        });
+        const group = new Konva.Group({ x: x, y: y, draggable: false });
 
-        // Box
         const rect = new Konva.Rect({
-            width: 200,
-            height: 50,
+            width: 200, height: 50,
             fill: '#2d3436',
             stroke: colors[node.type] || '#636e72',
-            strokeWidth: 2,
-            cornerRadius: 8,
-            shadowColor: 'black',
-            shadowBlur: 10,
-            shadowOpacity: 0.3
+            strokeWidth: 2, cornerRadius: 8,
+            shadowColor: 'black', shadowBlur: 10, shadowOpacity: 0.3
         });
 
-        // Label
         const text = new Konva.Text({
-            x: 10,
-            y: 10,
-            text: node.label,
-            fontSize: 14,
-            fontFamily: 'JetBrains Mono',
-            fill: '#fff',
-            width: 180,
-            ellipsis: true
+            x: 10, y: 10,
+            text: node.lbl, // Use short key: lbl
+            fontSize: 14, fontFamily: 'JetBrains Mono', fill: '#fff',
+            width: 180, ellipsis: true
         });
 
-        // Vector Info (Mini UI)
         const vecText = new Konva.Text({
-            x: 10,
-            y: 32,
-            text: `V:[${node.vector[0]}, ${node.vector[1]}...]`,
-            fontSize: 10,
-            fontFamily: 'JetBrains Mono',
-            fill: '#636e72'
+            x: 10, y: 32,
+            text: `V:[${node.vec[0]}, ${node.vec[2]}...]`, // Use short key: vec
+            fontSize: 10, fontFamily: 'JetBrains Mono', fill: '#636e72'
         });
 
         group.add(rect);
         group.add(text);
         group.add(vecText);
         
-        // Interaction: Hover to see Source
-        group.on('mouseover', () => {
-            document.body.style.cursor = 'pointer';
-            rect.fill('#353b48');
-            layer.draw();
-        });
-        group.on('mouseout', () => {
-            document.body.style.cursor = 'default';
-            rect.fill('#2d3436');
-            layer.draw();
-        });
-        
-        // Click to log source code
+        // OPTIMIZATION: Reconstruct source on click
         group.on('click', () => {
-            log(`Node Source:\n${node.source}`);
+            // AST line numbers are 1-based, array is 0-based
+            const startLine = node.loc[0] - 1;
+            const endLine = node.loc[1];
+            
+            // Slice the specific lines from the main array
+            const snippet = sourceLines.slice(startLine, endLine).join('\n');
+            log(`Node Source:\n${snippet}`);
         });
 
+        // Hover effects
+        group.on('mouseover', () => { document.body.style.cursor = 'pointer'; rect.fill('#353b48'); layer.draw(); });
+        group.on('mouseout', () => { document.body.style.cursor = 'default'; rect.fill('#2d3436'); layer.draw(); });
+
         layer.add(group);
-        nodeMap[node.id] = { group, x, y };
+        nodeMap[node.id] = { x, y };
     });
 
-    // Draw Connections (Parent -> Child)
+    // Draw Connections
     data.connections.forEach(conn => {
-        const fromNode = nodeMap[conn.from];
-        const toNode = nodeMap[conn.to];
+        // Use short keys: f (from), t (to)
+        const fromNode = nodeMap[conn.f];
+        const toNode = nodeMap[conn.t];
 
         if (fromNode && toNode) {
-            // Bezier Connector
-            const startX = fromNode.x + 20; // Start from left side for tree-like feel
-            const startY = fromNode.y + 50; // Bottom of parent
-            const endX = toNode.x + 20;     // Top of child
+            const startX = fromNode.x + 20;
+            const startY = fromNode.y + 50;
+            const endX = toNode.x + 20;
             const endY = toNode.y;
 
-            // Draw clean elbow lines for code structure
-            const points = [
-                startX, startY,
-                startX, endY - 10,
-                endX, endY - 10,
-                endX, endY
-            ];
-
             const line = new Konva.Line({
-                points: points,
-                stroke: '#636e72',
-                strokeWidth: 2,
-                tension: 0.2,
-                opacity: 0.6
+                points: [startX, startY, startX, endY - 10, endX, endY - 10, endX, endY],
+                stroke: '#636e72', strokeWidth: 2, tension: 0.2, opacity: 0.6
             });
-
-            // Move lines to bottom so nodes are on top
             layer.add(line);
             line.moveToBottom();
         }
@@ -218,13 +183,12 @@ function drawGraph(data) {
 
     layer.batchDraw();
     
-    // Auto-center camera if nodes exist
     if (data.nodes.length > 0) {
-        const firstNode = nodeMap[data.nodes[0].id];
         stage.x(50);
         stage.y(50);
     }
 }
 
+
 // Initial Call
 setTimeout(() => document.getElementById('btnVisualize').click(), 500);