Problem: Cluster colors are not visible or disappear after loading. Solution:
- Check browser console for errors
- Verify cluster data in API response
- Clear browser cache
- Ensure proper style application
Code Check:
// Verify cluster data
console.log('Cluster data:', graph.clusters);
// Check style application
cy.nodes('.clustered').forEach(node => {
console.log('Node styles:', {
id: node.id(),
color: node.data('clusterColor'),
classes: node.classes()
});
});Problem: Nodes overlap or layout is chaotic. Solution:
- Adjust layout parameters
- Increase node spacing
- Reduce animation speed
Problem: Graph expansion not working. Solution:
- Check API key validity
- Verify request format
- Review server logs
- Check rate limits
Problem: Database connection errors. Solution:
- Verify DATABASE_URL
- Check database status
- Review connection pool settings
- Check server logs
Problem: Graph becomes slow with many nodes. Solution:
- Implement pagination
- Use lazy loading
- Optimize layout calculations
- Reduce unnecessary redraws
Problem: Browser memory usage grows over time. Solution:
- Clear unused elements
- Implement garbage collection
- Monitor memory usage
- Reset graph periodically
// Add to GraphViewer component
useEffect(() => {
console.log('Graph state:', {
nodes: data.nodes.length,
edges: data.edges.length,
clusters: data.clusters?.length
});
}, [data]);// Add to graph_manager.ts
console.log('Graph operation:', {
operation: 'expand',
nodesAdded: newNodes.length,
edgesAdded: newEdges.length,
currentSize: this.graph.size
});ERR_CLUSTER_001: Clustering calculation failedERR_GRAPH_001: Graph expansion errorERR_DB_001: Database connection errorERR_WS_001: WebSocket connection failed
- System Logs
- API Documentation
- Component Documentation
- Database Schema