Update static/canvas.js

static/canvas.js

@@ -1,21 +1,29 @@
+// Initialization
+const width = window.innerWidth - 400; // Subtract sidebar width
+const height = window.innerHeight;
+
 const stage = new Konva.Stage({
     container: 'container',
-    width: window.innerWidth - 350,
-    height: window.innerHeight,
+    width: width,
+    height: height,
     draggable: true
 });
 
 const layer = new Konva.Layer();
 stage.add(layer);
 
+// State
 let scale = 1;
+
+// Zoom Handler
 stage.on('wheel', (e) => {
     e.evt.preventDefault();
     const oldScale = stage.scaleX();
     const pointer = stage.getPointerPosition();
-    const scaleBy = 1.1;
+    const scaleBy = 1.05;
     const newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy;
     stage.scale({ x: newScale, y: newScale });
+    
     const newPos = {
         x: pointer.x - (pointer.x - stage.x()) / oldScale * newScale,
         y: pointer.y - (pointer.y - stage.y()) / oldScale * newScale
@@ -23,8 +31,25 @@ stage.on('wheel', (e) => {
     stage.position(newPos);
 });
 
-function parseCode() {
+// Resize Handler
+window.addEventListener('resize', () => {
+    stage.width(window.innerWidth - 400);
+    stage.height(window.innerHeight);
+});
+
+// Logger
+function log(msg, type='info') {
+    const consoleBody = document.getElementById('logOutput');
+    const color = type === 'error' ? '#ff7675' : '#55efc4';
+    consoleBody.innerHTML += `<div style="color:${color}">> ${msg}</div>`;
+    consoleBody.scrollTop = consoleBody.scrollHeight;
+}
+
+// API Calls
+document.getElementById('btnVisualize').addEventListener('click', () => {
     const code = document.getElementById('codeInput').value;
+    log('Parsing code structure...');
+    
     fetch('/parse', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -32,127 +57,174 @@ function parseCode() {
     })
     .then(res => res.json())
     .then(data => {
-        drawGraph(data);
-        document.getElementById('stats').innerHTML = `Nodes: ${data.nodes.length}<br>Generated Vectors: ${data.nodes.length}`;
-    });
-}
+        if(data.error) {
+            log(data.error, 'error');
+        } else {
+            drawGraph(data);
+            log(`Graph generated: ${data.nodes.length} nodes, ${data.connections.length} edges.`);
+        }
+    })
+    .catch(err => log('Network error', 'error'));
+});
 
-function exportDataset() {
+document.getElementById('btnDataset').addEventListener('click', () => {
     const code = document.getElementById('codeInput').value;
-    fetch('/generate_dataset', {
+    log('Generating vector dataset entry...');
+    
+    fetch('/add_to_dataset', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ code: code })
     })
     .then(res => res.json())
-    .then(data => alert(`Dataset entry created at: ${data.path}`));
-}
+    .then(data => {
+        if(data.status === 'success') {
+            log(`Dataset updated. ID: ${data.entry_id}`);
+        } else {
+            log(data.message, 'error');
+        }
+    });
+});
 
+// Drawing Logic
 function drawGraph(data) {
     layer.destroyChildren();
     
+    if (data.nodes.length === 0) return;
+
     const nodeMap = {};
-    const startX = 50;
-    const startY = 50;
-    
-    // Auto-Layout Logic: Indent based on 'level'
-    data.nodes.forEach((n, i) => {
-        const x = startX + (n.level * 60);
-        const y = startY + (i * 90);
+    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
+    };
+
+    // Draw Nodes
+    data.nodes.forEach((node, index) => {
+        // Layout: Simple Waterfall with Indentation
+        const x = X_OFFSET + (node.level * 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
+        });
+
+        // Box
+        const rect = new Konva.Rect({
+            width: 200,
+            height: 50,
+            fill: '#2d3436',
+            stroke: colors[node.type] || '#636e72',
+            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
+        });
+
+        // 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'
+        });
+
+        group.add(rect);
+        group.add(text);
+        group.add(vecText);
         
-        const grp = createNodeGroup(x, y, n);
-        layer.add(grp);
-        nodeMap[n.id] = { grp, x, y, ...n };
+        // 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
+        group.on('click', () => {
+            log(`Node Source:\n${node.source}`);
+        });
+
+        layer.add(group);
+        nodeMap[node.id] = { group, x, y };
     });
 
-    // Draw Connections
+    // Draw Connections (Parent -> Child)
     data.connections.forEach(conn => {
-        const from = nodeMap[conn.from];
-        const to = nodeMap[conn.to];
-        if (from && to) {
-            const arrow = new Konva.Arrow({
-                points: [from.x + 100, from.y + 25, to.x, to.y + 25],
-                pointerLength: 6,
-                pointerWidth: 6,
-                fill: '#555',
-                stroke: '#555',
-                strokeWidth: 2,
-                tension: 0.4
-            });
-            layer.add(arrow);
-            arrow.moveToBottom();
-        }
-    });
+        const fromNode = nodeMap[conn.from];
+        const toNode = nodeMap[conn.to];
 
-    layer.draw();
-}
+        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 endY = toNode.y;
 
-function createNodeGroup(x, y, data) {
-    const group = new Konva.Group({ x, y, draggable: true });
-    
-    // Color mapping
-    const colors = {
-        'function': '#C586C0', // Purple
-        'if': '#CE9178', // Orange/Brown
-        'for': '#CE9178',
-        'assigned_variable': '#9CDCFE', // Blue
-        'return': '#569CD6', // Dark Blue
-        'other': '#4EC9B0' // Teal
-    };
-    const color = colors[data.type] || '#CCCCCC';
-
-    const rect = new Konva.Rect({
-        width: 180,
-        height: 50,
-        fill: '#252526',
-        stroke: color,
-        strokeWidth: 2,
-        cornerRadius: 6,
-        shadowColor: 'black',
-        shadowBlur: 10,
-        shadowOpacity: 0.3
-    });
+            // Draw clean elbow lines for code structure
+            const points = [
+                startX, startY,
+                startX, endY - 10,
+                endX, endY - 10,
+                endX, endY
+            ];
 
-    const label = new Konva.Text({
-        x: 10, y: 10,
-        text: data.label,
-        fontSize: 14,
-        fontFamily: 'JetBrains Mono',
-        fill: '#ffffff',
-        width: 160,
-        ellipsis: true
-    });
-    
-    const subLabel = new Konva.Text({
-        x: 10, y: 30,
-        text: `Vec: [${data.vector[0]}, ${data.vector[1]}...]`,
-        fontSize: 10,
-        fontFamily: 'JetBrains Mono',
-        fill: '#888',
-        width: 160
-    });
+            const line = new Konva.Line({
+                points: points,
+                stroke: '#636e72',
+                strokeWidth: 2,
+                tension: 0.2,
+                opacity: 0.6
+            });
 
-    group.add(rect);
-    group.add(label);
-    group.add(subLabel);
-    
-    // Add tooltip on hover
-    group.on('mouseover', () => {
-        document.body.style.cursor = 'pointer';
-        rect.stroke('#fff');
-        layer.draw();
-    });
-    
-    group.on('mouseout', () => {
-        document.body.style.cursor = 'default';
-        rect.stroke(color);
-        layer.draw();
+            // Move lines to bottom so nodes are on top
+            layer.add(line);
+            line.moveToBottom();
+        }
     });
 
-    return group;
+    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);
+    }
 }
 
-window.addEventListener('resize', () => {
-    stage.width(window.innerWidth - 350);
-    stage.height(window.innerHeight);
-});
+// Initial Call
+setTimeout(() => document.getElementById('btnVisualize').click(), 500);