perfViz

mmainguy/perfViz

Fork 0

Commit Graph

Author	SHA1	Message	Date
Michael Mainguy	b5b7aafca5	Add comprehensive column sorting with icons and tooltips to RequestBreakdown Enhance all breakdown sections (Resource Type, Status Code, Hostname) with: - Clickable column headers for sorting by any field - Visual sort indicators: neutral (⇅), ascending (▲), descending (▼) - Interactive tooltips showing current sort state and available actions - Default sort by request count in descending order - Toggle between ascending/descending by clicking same column - Consistent styling with brand colors and hover effects - Proper flexbox layout for icon positioning All 8 columns are sortable: name, count, count %, size, size %, response time, response time %, and average response time. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-19 09:08:14 -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

Author

SHA1

Message

Date

Michael Mainguy

b5b7aafca5

Add comprehensive column sorting with icons and tooltips to RequestBreakdown

Enhance all breakdown sections (Resource Type, Status Code, Hostname) with:
- Clickable column headers for sorting by any field
- Visual sort indicators: neutral (⇅), ascending (▲), descending (▼)
- Interactive tooltips showing current sort state and available actions
- Default sort by request count in descending order
- Toggle between ascending/descending by clicking same column
- Consistent styling with brand colors and hover effects
- Proper flexbox layout for icon positioning

All 8 columns are sortable: name, count, count %, size, size %,
response time, response time %, and average response time.

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

Co-Authored-By: Claude <noreply@anthropic.com>

2025-08-19 09:08:14 -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

2 Commits