spike: Network interface visualization research

[ggfevans]

Research Question

How should Rackula visualize network interfaces on devices and track connections between them?

Context

Issue #71 proposes network interface visualization and connectivity features. Before committing to implementation, we need to:

1. Understand how to render interface ports on device SVGs
2. Design a data model for connections that aligns with NetBox
3. Research UX patterns from similar tools

Research Areas

1. SVG Rendering Approach

• How to position interface ports on device front/rear faces
• Scaling behavior (ports visible at different zoom levels?)
• Interactivity (hover, click to select, drag to connect?)
• Performance with many interfaces (48-port switches)
• Prototype: simple SVG with clickable port indicators

2. Data Model Design

• Review NetBox interface schema (already supported in Rackula schema)
• Design connection/cable data model
• Define cable types (Ethernet, fiber, power, etc.)
• Plan how connections persist in .Rackula.zip archives
• Consider: connection endpoints (device:interface pairs)

3. UX Patterns Research

• NetBox: How does it display interface connections?
• draw.io / Lucidchart: Network diagram patterns
• Existing rack tools: How do they handle cabling?
• Mockup: Connection creation flow (drag-and-drop? modal?)
• Mockup: Cable visualization in rack view (lines? curved paths?)

Expected Deliverables

• Findings doc summarizing research with screenshots/references
• Data model proposal for connections (TypeScript types)
• SVG prototype showing interface ports on a sample device
• Recommendation for Phase 1 implementation approach
• Scope estimate for Phase 1 implementation

Time Box

4-8 hours

Related

• Parent epic: feat: network interface visualization and connectivity #71
• Schema support: research: Session persistence strategy for mobile reload #88 (interfaces already in DeviceType)

---

Created via /create-issue