mmainguy/perfViz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
3 Commits 1 Branch 0 Tags 8.3 MiB
ec91cfbafd
Commit Graph

3 Commits

This Branch
This Branch
All Branches
Author SHA1 Message Date
Michael Mainguy
ec91cfbafd Refactored code to use css and be more modular. 2025-08-08 13:21:17 -05:00
Michael Mainguy
8a791a1186 Implement comprehensive 3D timeline visualization with enhanced features 
- Create new BabylonTimelineViewer with swimlane-based layout
- Add dual-box system: gray server time (50% opacity) + blue network time boxes
- Implement yellow queue time visualization with 25% opacity
- Add host-based swimlanes with alternating left/right positioning sorted by earliest request time
- Create timeline grid lines with adaptive time labels (microseconds/milliseconds/seconds)
- Add UniversalCamera with WASD keyboard navigation from behind timeline (z: -10)
- Implement vertical gradient coloring for stacked overlapping requests
- Extract reusable timeline label creation function
- Position hostname labels below ground level (y: -1) for cleaner visualization
- Support both 3D Network View (radial) and 3D Timeline View (swimlanes) as modal overlays
- Add SSIM.js integration for intelligent screenshot similarity analysis
- Enhance CDN detection with comprehensive Akamai patterns and improved accuracy
- Add server latency calculation and color-coded display
- Add content-length header extraction and color-coded display
- Move 3D viewer from main nav to HTTP requests page with modal interface

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-08-07 09:21:45 -05:00
Michael Mainguy
1f12b143ef Initial commit: Performance Trace Analyzer with comprehensive features 
🚀 Features implemented:
- IndexedDB local database for trace storage and management
- Drag & drop trace file upload with validation
- HTTP Request viewer with advanced filtering and analysis
- CDN provider detection (Cloudflare, Akamai, CloudFront, etc.)
- Queue time analysis with bottleneck detection
- Visual highlighting for file sizes and request durations
- Priority-based request analysis
- Phase event viewer with detailed trace exploration
- Filmstrip screenshot integration (with debugging)
- 3D Babylon.js viewer component

📊 Analysis capabilities:
- HTTP/1.1 vs HTTP/2 performance comparison
- CDN edge vs origin detection
- Connection limit bottleneck identification
- Priority queue analysis
- Visual correlation with network requests
- Performance bottleneck identification

🛠️ Technical stack:
- React 19.1.0 + TypeScript 5.8.3
- Vite build system
- IndexedDB for local storage
- Babylon.js 8+ for 3D visualization
- Chrome DevTools trace format support

🎨 User experience:
- Clean, professional interface design
- Color-coded performance indicators
- Expandable detailed views
- Search and filtering capabilities
- Responsive grid layouts
- Intuitive navigation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-08-06 19:27:12 -05:00