# Quick Start: Testing Dagre Grid Layout

**Status**: ✅ Ready for Testing  
**URL**: http://localhost:5173/uml-viewer

---

## How to Test (60 Seconds)

### 1. Open UML Viewer
```bash
# Dev server should already be running
# If not: cd frontend && npm run dev

# Open browser to:
http://localhost:5173/uml-viewer
```

### 2. Select a Diagram
- Click any diagram in the left sidebar
- Example: "Custodian Multi-Aspect (Mermaid Class)"

### 3. Try Force Layout (Default)
- You'll see scattered nodes (organic, physics-based)
- Nodes bounce around initially, then settle
- This is the original behavior

### 4. Switch to Grid Layout
- Click **[Grid]** button in toolbar (top-right area)
- Watch nodes snap into hierarchical grid
- Notice tight, organized arrangement

### 5. Switch Back to Force
- Click **[Force]** button in toolbar
- Watch nodes scatter organically
- Notice active button highlight (blue)

### 6. Test Persistence
- Refresh page (Cmd+R / Ctrl+R)
- Your layout preference should be remembered

---

## What to Look For

### ✅ **Grid Layout Should**:
- Arrange nodes in hierarchical rows/columns
- Point inheritance arrows top-to-bottom
- Use consistent spacing (80px horizontal, 120px vertical)
- Render instantly (no animation delay)
- Look similar to Mermaid diagrams

### ✅ **Force Layout Should**:
- Scatter nodes organically
- Animate for ~5 seconds before settling
- Keep nodes spread out (physics repulsion)
- Look like original D3 force simulation

### ✅ **Both Layouts Should**:
- Support zoom (mouse wheel / pinch)
- Support pan (click + drag background)
- Support node dragging (click + drag node)
- Export to PNG/SVG correctly
- Show active button highlight

---

## Troubleshooting

### Grid layout not showing?
- Check browser console for errors
- Try force layout first, then switch to grid
- Refresh page

### Buttons not working?
- Check that dagre is installed: `npm list dagre`
- Should show `dagre@0.8.5` or similar

### Layout preference not saving?
- Check localStorage in DevTools:
  - Key: `uml-layout-type`
  - Value: `"force"` or `"dagre"`

### TypeScript errors?
```bash
cd frontend
npx tsc --noEmit
```

---

## Quick Visual Test

**Expected Grid Layout** (Top-to-Bottom):
```
     HeritageCustodian
            ↓
    ┌───────┴───────┐
    ↓               ↓
DutchHeritage    Collection
Custodian
```

**Expected Force Layout** (Scattered):
```
  HeritageCustodian
         
    DutchHeritage    Collection
      Custodian
```

---

## Performance Benchmark

| Diagram Size | Force Layout | Dagre Grid |
|--------------|--------------|------------|
| 5 nodes      | ~2 sec anim  | Instant    |
| 10 nodes     | ~3 sec anim  | Instant    |
| 20 nodes     | ~5 sec anim  | Instant    |
| 50+ nodes    | ~10 sec anim | <1 sec     |

**Recommendation**: Use Grid for most diagrams (faster, cleaner).

---

## Files to Check If Issues

```
frontend/src/
├── components/uml/
│   └── UMLVisualization.tsx   ← Main layout logic (line 250-550)
│
├── pages/
│   ├── UMLViewerPage.tsx      ← Toggle buttons (line 460-502)
│   └── UMLViewerPage.css      ← Button styles (line 631-650)
│
└── package.json               ← dagre dependency
```

---

## Need Help?

**Documentation**:
- `DAGRE_GRID_LAYOUT_IMPLEMENTATION.md` - Full technical docs
- `SESSION_SUMMARY_DAGRE_IMPLEMENTATION.md` - Session overview
- `UML_VIEWER_VS_MERMAID_ANALYSIS.md` - Root cause analysis

**Browser Console**:
```javascript
// Check if dagre loaded
console.log(typeof dagre)  // Should log "object"

// Check layout type
localStorage.getItem('uml-layout-type')  // "force" or "dagre"

// Force layout switch
localStorage.setItem('uml-layout-type', 'dagre')
location.reload()
```

---

## Report Issues

When reporting issues, include:
1. **Layout type**: Force or Grid?
2. **Diagram name**: Which diagram from sidebar?
3. **Browser**: Chrome, Firefox, Safari?
4. **Console errors**: Any red errors in DevTools?
5. **Screenshot**: Visual of the issue

---

## Success Criteria

### ✅ Implementation Complete When:
- [x] Grid layout renders hierarchical arrangement
- [x] Force layout still works (default)
- [x] Toggle buttons switch between layouts
- [x] Active button highlights correctly
- [x] Preference saves to localStorage
- [x] Preference loads on reload
- [x] No TypeScript errors
- [x] No browser console errors

### 🎯 User Testing Complete When:
- [ ] 3+ users test layout toggle
- [ ] 5+ different diagrams tested
- [ ] Zoom/pan/drag tested in both layouts
- [ ] Export tested in both layouts
- [ ] Performance measured (5-50 node diagrams)
- [ ] Preference persistence verified

---

**Ready to Test?** → Open http://localhost:5173/uml-viewer

**Need Context?** → Read `SESSION_SUMMARY_DAGRE_IMPLEMENTATION.md`

**Found a Bug?** → Check browser console → Report with details above