[Feature] Graph Visualization Improvements

[DJurincic]

Is there an existing issue for the same feature request?

• [x] I have checked the existing issues.

Describe the feature request

Possible graph visualization improvements are the following:

1. Graph scaling:

• the visualization of large workflows must be more orderly and readable

2. Orientation:

• ideally, the workflow graph should start at the top and end at the bottom

3. Overlap:

• multi-workflow graphs should have as little overlap as possible

4. Style improvements:

• START and END nodes could have a distinct shape, edges between agents and edges between agents and tools should be different etc.

Do you have any ideas for the technical implementation?

No response

[michaeloboyle]

vis.js Evaluation for Graph Visualization Improvements

I've completed a detailed technical evaluation of vis.js as a solution for the graph visualization improvements requested in this issue. Here's my analysis:

Current State vs Proposed Solution

• Current: force-graph.js v1.49.5 (physics-based force simulation)
• Proposed: vis.js network component (structured hierarchical layouts)

Issue Requirements Analysis

1. Graph Scaling ⭐⭐⭐⭐⭐ Excellent Fit

• Built-in automatic clustering for networks >150 nodes
• Performance optimization handles thousands of nodes smoothly
• Block shifting reduces whitespace and compacts layout
• Edge minimization algorithmically reduces visual complexity

Current Problem: Physics simulation becomes chaotic with many nodes vis.js Solution: Native clustering and hierarchical organization

2. Top-to-Bottom Orientation ⭐⭐⭐⭐⭐ Excellent Fit

• Hierarchical layout with 4 orientations: Up-Down, Down-Up, Left-Right, Right-Left
• Level separation control for customizable spacing
• Sorting methods: "directed" follows edge connections, "hubsize" by importance

Current Problem: No directional layout concepts in force simulation vis.js Solution:

layout: {
  hierarchical: {
    direction: 'UD',        // Top-to-bottom
    sortMethod: 'directed', // Follow workflow flow
    levelSeparation: 200
  }
}

3. Overlap Reduction ⭐⭐⭐⭐ Very Good Fit

• Intelligent positioning minimizes overlaps by design
• Node spacing control with configurable separation
• Physics stabilization converges to stable, non-overlapping positions

Current Problem: Random physics often creates overlaps vis.js Solution: Hierarchical layouts prevent overlaps structurally

4. Distinct START/END Node Shapes ⭐⭐⭐⭐⭐ Excellent Fit

• 6+ built-in shapes: ellipse, circle, box, diamond, triangle, hexagon
• Perfect workflow shapes: Diamond for decisions, triangle for direction
• Rich customization: size, color, border, shadow options

Current Problem: Limited to canvas circles/images only vis.js Solution:

{id: 'start', shape: 'triangle', color: {background: '#4CAF50'}}
{id: 'end', shape: 'diamond', color: {background: '#F44336'}}

5. Edge Style Differentiation ⭐⭐⭐⭐⭐ Excellent Fit

• Multiple styles: solid, dashed, colors, widths
• Arrow customization: different types, sizes, positioning
• Conditional styling based on connection type

Current Problem: Limited edge customization vis.js Solution:

// Agent-to-agent: solid blue arrows
{color: '#2196F3', width: 3, arrows: 'to'}
// Agent-to-tool: dashed orange with bar arrows  
{color: '#FF9800', dashes: [5,5], arrows: {to: {type: 'bar'}}}

Migration Considerations

• Data format: Convert {nodes, links} → {nodes, edges}
• Bundle size: ~200KB vs ~150KB (minimal impact)
• API differences: New configuration syntax
• Learning curve: Well-documented API

Recommendation

Strong recommendation to migrate to vis.js for this issue. The hierarchical layout capabilities alone solve 3/5 requirements immediately, while remaining requirements are much easier to implement.

Next Steps: Would the team be open to a proof-of-concept implementation showing the vis.js approach side-by-side with current force-graph output?

---

This analysis was conducted as part of PR #107 development work.