Update templates/index.html

templates/index.html

@@ -61,7 +61,14 @@
                 const y = vector[1] * 10; // level
                 const z = vector[2] * 100; // center_pos
                 positions.push(x, y, z);
-                colors.push(1, 0.5, 0); // Orange points (can vary by category)
+                // Color by category (e.g., variables in blue, others in orange)
+                let color;
+                if (['input_variable', 'assigned_variable', 'returned_variable'].includes(part.category)) {
+                    color = [0, 0, 1]; // Blue for variables
+                } else {
+                    color = [1, 0.5, 0]; // Orange for non-variables
+                }
+                colors.push(...color);
                 part.pointIndex = index * 3; // Store index for lookup
             });
 
@@ -111,8 +118,8 @@
                     const part = window.parts.find(p => p.pointIndex === index * 3);
                     if (part && hoveredPoint !== part) {
                         hoveredPoint = part;
-                        const variableRole = part.vector[6] === 0 ? '-' : ['Input', 'Assigned', 'Returned'][part.vector[6] - 1];
-                        const variableName = part.vector[7] === 0 ? '-' : (part.vector[7] * 1000).toFixed(3); // Reconstruct hash
+                        const variableRole = part.category in ['input_variable', 'assigned_variable', 'returned_variable'] ? 
+                            part.category.replace('_variable', '').capitalize() : '-';
                         pointDetails.innerHTML = `
                             <div class="text-gray-200">
                                 <strong>Category:</strong> ${part.category}<br>
@@ -121,7 +128,6 @@
                                 <strong>Level:</strong> ${part.level}<br>
                                 <strong>Location:</strong> Lines ${part.location[0]} to ${part.location[1]}<br>
                                 <strong>Variable Role:</strong> ${variableRole}<br>
-                                <strong>Variable Name:</strong> ${variableName}<br>
                                 <strong>Vector:</strong> [${part.vector.join(', ')}]<br>
                                 <strong>Code:</strong><pre class="text-xs text-gray-300">${part.source}</pre>
                             </div>