spike: cable path rendering algorithm

[ggfevans]

Parent Epic

Part of #71 (Network Interface Visualization and Connectivity)

Dependencies

• feat: Connection Graph Model - Phase 1: Port-Based Architecture #362 (Connection Graph Model) - data model must be complete
• feat: MVP Connection model #365 (Connection model) - provides Connection type

---

Summary

Research and design an algorithm for rendering connection paths between device ports in the rack SVG.

Challenges

1. Intra-rack connections - Both endpoints in same rack
2. Cross-face connections - Front port to rear port (how to show "through" rack?)
3. Overlapping connections - Multiple connections same route
4. Connection bundling - Group connections going same direction
5. Visual clarity - Don't obscure devices

Research Areas

• Bezier curves vs straight lines vs orthogonal paths
• Connection channel placement (left/right of rack? overlay?)
• Path finding algorithm (avoid overlaps)
• Bundling/grouping approach
• Color-coding by connection class
• Hover highlighting implementation

Options to Evaluate

1. Simple lines - Straight SVG lines between ports
2. Curved paths - Bezier curves with smart control points
3. Orthogonal routing - Right-angle paths like circuit diagrams
4. External channel - Connections route outside rack area
5. Abstract view - Matrix/table instead of visual lines

Deliverables

• Algorithm design document
• SVG prototype with sample connections
• Performance estimate for N connections
• Recommendation for Phase 3 implementation

References

• UX patterns: docs/research/spike-237-network-interface-visualization.md
• draw.io connector patterns
• Device42 cable visualization