# Components (React UI)

**Generated:** 2026-02-19
**Location:** src/components/

## OVERVIEW

React components for the topology visualization UI - header, panels, and graph.

## COMPONENTS

| Component | File | Purpose |
|-----------|------|---------|
| Header | Header.tsx | Top bar with title, refresh button, view mode |
| LeftPanel | LeftPanel.tsx | Collapsible host list sidebar |
| RightPanel | RightPanel.tsx | Collapsible details panel with tabs |
| TopologyGraph | Graph/TopologyGraph.tsx | React Flow graph rendering |

## ADDING A NEW COMPONENT

1. Create in `src/components/{Name}.tsx`
2. Export as default or named export
3. Import in parent (e.g., App.tsx)

## PATTERNS

- Use Zustand store: `import { useTopologyStore } from '../store/topologyStore'`
- Tailwind CSS classes for styling
- Props interfaces for type safety
- Follow existing component patterns (Header is good reference)

## SUB-COMPONENTS

- `Graph/TopologyGraph.tsx`: Uses @xyflow/react (React Flow) + dagre for auto-layout
  - Nodes: Network → Host → Container → Volume hierarchy
  - Edges: Connect related nodes

## NOTES

- Panels are collapsible via store state (leftPanelOpen, rightPanelOpen)
- Graph auto-layouts on data change using dagre
- All components use Tailwind for styling
