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>
This commit is contained in:
commit
1f12b143ef
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
68
CLAUDE.md
Normal file
68
CLAUDE.md
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
This is a React + TypeScript + Vite project called "perfviz" - a modern web application built with the latest versions of React (19.1.0), TypeScript (5.8.3), and Vite (7.0.4).
|
||||||
|
|
||||||
|
## Development Commands
|
||||||
|
|
||||||
|
- **Start development server**: `npm run dev` - Runs Vite dev server with HMR on http://localhost:5173/
|
||||||
|
- **Build for production**: `npm run build` - TypeScript compilation followed by Vite build
|
||||||
|
- **Lint code**: `npm run lint` - Run ESLint on the entire codebase
|
||||||
|
- **Preview production build**: `npm run preview` - Preview the production build locally
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Build System
|
||||||
|
- **Vite** as the build tool with React plugin for Fast Refresh
|
||||||
|
- **ES modules** configuration (`"type": "module"` in package.json)
|
||||||
|
- **Bundler module resolution** with TypeScript extensions allowed in imports
|
||||||
|
|
||||||
|
### TypeScript Configuration
|
||||||
|
- **Dual TypeScript configs**:
|
||||||
|
- `tsconfig.app.json` for application code (`src/` directory)
|
||||||
|
- `tsconfig.node.json` for build tooling (Vite config)
|
||||||
|
- **Strict TypeScript** with unused locals/parameters checking enabled
|
||||||
|
- **React JSX transform** (`react-jsx`) for React 19+ compatibility
|
||||||
|
|
||||||
|
### Code Quality
|
||||||
|
- **ESLint** with TypeScript support and React-specific rules:
|
||||||
|
- React Hooks rules for proper hooks usage
|
||||||
|
- React Refresh rules for HMR compatibility
|
||||||
|
- TypeScript recommended rules
|
||||||
|
- **Globals configured** for browser environment
|
||||||
|
|
||||||
|
### Application Structure
|
||||||
|
- **Entry point**: `src/main.tsx` renders the App component in React 19 StrictMode
|
||||||
|
- **Root component**: `src/App.tsx` contains the main application logic
|
||||||
|
- **3D Viewer**: `src/BabylonViewer.tsx` React component wrapping Babylon.js 3D scene
|
||||||
|
- **Styling**: CSS modules with `src/index.css` and `src/App.css`
|
||||||
|
- **Assets**: Static assets in `public/` and component assets in `src/assets/`
|
||||||
|
|
||||||
|
## Key Dependencies
|
||||||
|
|
||||||
|
- **React 19.1.0** with modern features and concurrent rendering
|
||||||
|
- **TypeScript 5.8.3** with latest language features
|
||||||
|
- **Vite 7.0.4** for fast development and optimized builds
|
||||||
|
- **ESLint 9.30.1** with typescript-eslint for code quality
|
||||||
|
- **BabylonJS 8.21.1** for 3D graphics and visualization
|
||||||
|
|
||||||
|
## Development Notes
|
||||||
|
|
||||||
|
- The project uses **React 19's new JSX transform** and concurrent features
|
||||||
|
- **HMR (Hot Module Replacement)** is enabled through Vite's React plugin
|
||||||
|
- **Strict mode** is enabled in development for better debugging
|
||||||
|
- **Browser targets** are ES2022+ for modern JavaScript features
|
||||||
|
|
||||||
|
## Babylon.js Integration
|
||||||
|
|
||||||
|
- **Version**: Using Babylon.js 8.21.1 (modern version 8+)
|
||||||
|
- **Camera Management**: Use `scene.activeCamera` instead of deprecated `camera.attachToCanvas()`
|
||||||
|
- **ArcRotateCamera Controls**: Use `camera.attachControl(canvas, true)` for mouse interaction
|
||||||
|
- **Scene Setup**: Cameras, lights, and meshes are added directly to the scene object
|
||||||
|
- **Engine Integration**: Engine handles canvas interaction and render loop
|
||||||
|
- **React Integration**: Proper cleanup with engine disposal in useEffect return function
|
||||||
|
- **Version-Specific Documentation**: ALWAYS check Babylon.js documentation for version 8.21.1 specifically to avoid deprecated methods and ensure current API usage
|
||||||
|
- **API Verification**: Before suggesting any Babylon.js code, verify method signatures and availability in the current version
|
||||||
69
README.md
Normal file
69
README.md
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default tseslint.config([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
|
||||||
|
// Remove tseslint.configs.recommended and replace with this
|
||||||
|
...tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
...tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
...tseslint.configs.stylisticTypeChecked,
|
||||||
|
|
||||||
|
// Other configs...
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default tseslint.config([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
// Enable lint rules for React
|
||||||
|
reactX.configs['recommended-typescript'],
|
||||||
|
// Enable lint rules for React DOM
|
||||||
|
reactDom.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
23
eslint.config.js
Normal file
23
eslint.config.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default tseslint.config([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs['recommended-latest'],
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
12
index.html
Normal file
12
index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Perf Viz</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3383
package-lock.json
generated
Normal file
3383
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "perfviz",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"babylonjs": "^8.21.1",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.30.1",
|
||||||
|
"@types/react": "^19.1.8",
|
||||||
|
"@types/react-dom": "^19.1.6",
|
||||||
|
"@vitejs/plugin-react": "^4.6.0",
|
||||||
|
"eslint": "^9.30.1",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.20",
|
||||||
|
"globals": "^16.3.0",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"typescript-eslint": "^8.35.1",
|
||||||
|
"vite": "^7.0.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/App.css
Normal file
1
src/App.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
207
src/App.tsx
Normal file
207
src/App.tsx
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import './App.css'
|
||||||
|
import BabylonViewer from './BabylonViewer'
|
||||||
|
import TraceViewer from './components/TraceViewer'
|
||||||
|
import PhaseViewer from './components/PhaseViewer'
|
||||||
|
import HTTPRequestViewer from './components/HTTPRequestViewer'
|
||||||
|
import TraceUpload from './components/TraceUpload'
|
||||||
|
import TraceSelector from './components/TraceSelector'
|
||||||
|
import { traceDatabase } from './utils/traceDatabase'
|
||||||
|
|
||||||
|
type AppView = '3d' | 'trace' | 'phases' | 'http'
|
||||||
|
type AppMode = 'selector' | 'upload' | 'analysis'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [mode, setMode] = useState<AppMode>('selector')
|
||||||
|
const [currentView, setCurrentView] = useState<AppView>('http')
|
||||||
|
const [selectedTraceId, setSelectedTraceId] = useState<string | null>(null)
|
||||||
|
const [hasTraces, setHasTraces] = useState<boolean>(false)
|
||||||
|
const [dbInitialized, setDbInitialized] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initializeApp()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const initializeApp = async () => {
|
||||||
|
try {
|
||||||
|
// Initialize the database
|
||||||
|
await traceDatabase.init()
|
||||||
|
setDbInitialized(true)
|
||||||
|
|
||||||
|
// Check if we have any traces
|
||||||
|
const traces = await traceDatabase.getAllTraces()
|
||||||
|
setHasTraces(traces.length > 0)
|
||||||
|
|
||||||
|
// If no traces, show upload screen
|
||||||
|
if (traces.length === 0) {
|
||||||
|
setMode('upload')
|
||||||
|
} else {
|
||||||
|
setMode('selector')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to initialize database:', error)
|
||||||
|
setMode('upload') // Fallback to upload mode
|
||||||
|
setDbInitialized(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTraceSelect = (traceId: string) => {
|
||||||
|
setSelectedTraceId(traceId)
|
||||||
|
setMode('analysis')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUploadSuccess = (traceId: string) => {
|
||||||
|
setSelectedTraceId(traceId)
|
||||||
|
setMode('analysis')
|
||||||
|
setHasTraces(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBackToSelector = () => {
|
||||||
|
setSelectedTraceId(null)
|
||||||
|
setMode('selector')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUploadNew = () => {
|
||||||
|
setMode('upload')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dbInitialized) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: '100vh',
|
||||||
|
fontFamily: 'system-ui, sans-serif'
|
||||||
|
}}>
|
||||||
|
<div>Initializing database...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode === 'upload') {
|
||||||
|
return <TraceUpload onUploadSuccess={handleUploadSuccess} />
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode === 'selector') {
|
||||||
|
return (
|
||||||
|
<TraceSelector
|
||||||
|
onTraceSelect={handleTraceSelect}
|
||||||
|
onUploadNew={handleUploadNew}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Analysis mode - show the main interface
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
padding: '10px 20px',
|
||||||
|
background: '#f8f9fa',
|
||||||
|
borderBottom: '1px solid #dee2e6',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
|
||||||
|
<button
|
||||||
|
onClick={handleBackToSelector}
|
||||||
|
style={{
|
||||||
|
background: 'transparent',
|
||||||
|
border: '1px solid #6c757d',
|
||||||
|
color: '#6c757d',
|
||||||
|
padding: '6px 12px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '12px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
← Back to Traces
|
||||||
|
</button>
|
||||||
|
<h1 style={{ margin: '0', color: '#495057' }}>Perf Viz</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav style={{ display: 'flex', gap: '10px' }}>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentView('3d')}
|
||||||
|
style={{
|
||||||
|
background: currentView === '3d' ? '#007bff' : '#6c757d',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '8px 16px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
3D Viewer
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentView('trace')}
|
||||||
|
style={{
|
||||||
|
background: currentView === 'trace' ? '#007bff' : '#6c757d',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '8px 16px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Trace Stats
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentView('phases')}
|
||||||
|
style={{
|
||||||
|
background: currentView === 'phases' ? '#007bff' : '#6c757d',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '8px 16px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Phase Events
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentView('http')}
|
||||||
|
style={{
|
||||||
|
background: currentView === 'http' ? '#007bff' : '#6c757d',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '8px 16px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
HTTP Requests
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{currentView === '3d' && (
|
||||||
|
<div style={{ width: '100%', height: '600px' }}>
|
||||||
|
<BabylonViewer />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'trace' && (
|
||||||
|
<TraceViewer traceId={selectedTraceId} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'phases' && (
|
||||||
|
<PhaseViewer traceId={selectedTraceId} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'http' && (
|
||||||
|
<HTTPRequestViewer traceId={selectedTraceId} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
77
src/BabylonViewer.tsx
Normal file
77
src/BabylonViewer.tsx
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
import {
|
||||||
|
Engine,
|
||||||
|
Scene,
|
||||||
|
ArcRotateCamera,
|
||||||
|
Vector3,
|
||||||
|
HemisphericLight,
|
||||||
|
MeshBuilder,
|
||||||
|
StandardMaterial,
|
||||||
|
Color3
|
||||||
|
} from 'babylonjs'
|
||||||
|
|
||||||
|
interface BabylonViewerProps {
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BabylonViewer({ width = 800, height = 600 }: BabylonViewerProps) {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||||
|
const engineRef = useRef<Engine | null>(null)
|
||||||
|
const sceneRef = useRef<Scene | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!canvasRef.current) return
|
||||||
|
|
||||||
|
const canvas = canvasRef.current
|
||||||
|
const engine = new Engine(canvas, true)
|
||||||
|
engineRef.current = engine
|
||||||
|
|
||||||
|
const scene = new Scene(engine)
|
||||||
|
sceneRef.current = scene
|
||||||
|
|
||||||
|
const camera = new ArcRotateCamera('camera1', -Math.PI / 2, Math.PI / 2.5, 10, Vector3.Zero(), scene)
|
||||||
|
camera.attachControl(canvas, true)
|
||||||
|
scene.activeCamera = camera
|
||||||
|
|
||||||
|
const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene)
|
||||||
|
light.intensity = 0.7
|
||||||
|
|
||||||
|
const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene)
|
||||||
|
sphere.position.y = 1
|
||||||
|
|
||||||
|
const ground = MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene)
|
||||||
|
|
||||||
|
const sphereMaterial = new StandardMaterial('sphereMaterial', scene)
|
||||||
|
sphereMaterial.diffuseColor = new Color3(1, 0, 1)
|
||||||
|
sphere.material = sphereMaterial
|
||||||
|
|
||||||
|
const groundMaterial = new StandardMaterial('groundMaterial', scene)
|
||||||
|
groundMaterial.diffuseColor = new Color3(0.5, 0.5, 0.5)
|
||||||
|
ground.material = groundMaterial
|
||||||
|
|
||||||
|
engine.runRenderLoop(() => {
|
||||||
|
scene.render()
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
engine.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize)
|
||||||
|
engine.dispose()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
style={{ width: '100%', height: '100%', display: 'block' }}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
1518
src/components/HTTPRequestViewer.tsx
Normal file
1518
src/components/HTTPRequestViewer.tsx
Normal file
File diff suppressed because it is too large
Load Diff
537
src/components/PhaseViewer.tsx
Normal file
537
src/components/PhaseViewer.tsx
Normal file
@ -0,0 +1,537 @@
|
|||||||
|
import { useState, useMemo } from 'react'
|
||||||
|
import { useDatabaseTraceData } from '../hooks/useDatabaseTraceData'
|
||||||
|
import type { TraceEvent, TraceEventPhase } from '../../types/trace'
|
||||||
|
|
||||||
|
interface ExtendedTraceEvent extends TraceEvent {
|
||||||
|
dur?: number
|
||||||
|
tdur?: number
|
||||||
|
tts?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const PHASE_DESCRIPTIONS: Record<string, string> = {
|
||||||
|
'M': 'Metadata',
|
||||||
|
'X': 'Complete Events',
|
||||||
|
'I': 'Instant Events',
|
||||||
|
'B': 'Begin Events',
|
||||||
|
'E': 'End Events',
|
||||||
|
'D': 'Deprecated',
|
||||||
|
'b': 'Nestable Start',
|
||||||
|
'e': 'Nestable End',
|
||||||
|
'n': 'Nestable Instant',
|
||||||
|
'S': 'Async Start',
|
||||||
|
'T': 'Async Instant',
|
||||||
|
'F': 'Async End',
|
||||||
|
'P': 'Sample',
|
||||||
|
'C': 'Counter',
|
||||||
|
'R': 'Mark'
|
||||||
|
}
|
||||||
|
|
||||||
|
const ITEMS_PER_PAGE = 50
|
||||||
|
|
||||||
|
// Helper functions to extract valuable fields
|
||||||
|
const getURL = (event: ExtendedTraceEvent): string | null => {
|
||||||
|
const args = event.args as any
|
||||||
|
return args?.url || args?.beginData?.url || args?.data?.frames?.[0]?.url || null
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStackTrace = (event: ExtendedTraceEvent): any[] | null => {
|
||||||
|
const args = event.args as any
|
||||||
|
return args?.beginData?.stackTrace || null
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFrameInfo = (event: ExtendedTraceEvent): string | null => {
|
||||||
|
const args = event.args as any
|
||||||
|
return args?.beginData?.frame || args?.data?.frameTreeNodeId || null
|
||||||
|
}
|
||||||
|
|
||||||
|
const getScriptInfo = (event: ExtendedTraceEvent): { contextId?: number, scriptId?: number } => {
|
||||||
|
const args = event.args as any
|
||||||
|
return {
|
||||||
|
contextId: args?.data?.executionContextId,
|
||||||
|
scriptId: args?.data?.scriptId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLayoutInfo = (event: ExtendedTraceEvent): { dirtyObjects?: number, totalObjects?: number, elementCount?: number } => {
|
||||||
|
const args = event.args as any
|
||||||
|
return {
|
||||||
|
dirtyObjects: args?.beginData?.dirtyObjects,
|
||||||
|
totalObjects: args?.beginData?.totalObjects,
|
||||||
|
elementCount: args?.elementCount
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getSampleTraceId = (event: ExtendedTraceEvent): number | null => {
|
||||||
|
const args = event.args as any
|
||||||
|
return args?.beginData?.sampleTraceId || null
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PhaseViewerProps {
|
||||||
|
traceId: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PhaseViewer({ traceId }: PhaseViewerProps) {
|
||||||
|
const { traceData, loading, error, stats } = useDatabaseTraceData(traceId)
|
||||||
|
const [selectedPhase, setSelectedPhase] = useState<string>('all')
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
|
const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
|
||||||
|
|
||||||
|
const filteredEvents = useMemo(() => {
|
||||||
|
if (!traceData) return []
|
||||||
|
|
||||||
|
let events = traceData.traceEvents
|
||||||
|
|
||||||
|
// Filter by phase
|
||||||
|
if (selectedPhase !== 'all') {
|
||||||
|
events = events.filter(event => event.ph === selectedPhase)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by search term
|
||||||
|
if (searchTerm) {
|
||||||
|
const term = searchTerm.toLowerCase()
|
||||||
|
events = events.filter(event =>
|
||||||
|
event.name.toLowerCase().includes(term) ||
|
||||||
|
event.cat.toLowerCase().includes(term) ||
|
||||||
|
event.pid.toString().includes(term) ||
|
||||||
|
event.tid.toString().includes(term)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return events
|
||||||
|
}, [traceData, selectedPhase, searchTerm])
|
||||||
|
|
||||||
|
const paginatedEvents = useMemo(() => {
|
||||||
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE
|
||||||
|
const endIndex = startIndex + ITEMS_PER_PAGE
|
||||||
|
return filteredEvents.slice(startIndex, endIndex)
|
||||||
|
}, [filteredEvents, currentPage])
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(filteredEvents.length / ITEMS_PER_PAGE)
|
||||||
|
|
||||||
|
const formatTimestamp = (ts: number) => {
|
||||||
|
return (ts / 1000).toFixed(3) + 'ms'
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDuration = (dur?: number) => {
|
||||||
|
if (!dur) return '-'
|
||||||
|
return (dur / 1000).toFixed(3) + 'ms'
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatThreadTime = (tts?: number) => {
|
||||||
|
if (!tts) return '-'
|
||||||
|
return (tts / 1000).toFixed(3) + 'ms'
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleRowExpansion = (eventKey: string) => {
|
||||||
|
const newExpanded = new Set(expandedRows)
|
||||||
|
if (newExpanded.has(eventKey)) {
|
||||||
|
newExpanded.delete(eventKey)
|
||||||
|
} else {
|
||||||
|
newExpanded.add(eventKey)
|
||||||
|
}
|
||||||
|
setExpandedRows(newExpanded)
|
||||||
|
}
|
||||||
|
|
||||||
|
const truncateText = (text: string, maxLength: number = 50) => {
|
||||||
|
if (text.length <= maxLength) return text
|
||||||
|
return text.substring(0, maxLength) + '...'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: '400px',
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#6c757d'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
width: '50px',
|
||||||
|
height: '50px',
|
||||||
|
border: '4px solid #f3f3f3',
|
||||||
|
borderTop: '4px solid #007bff',
|
||||||
|
borderRadius: '50%',
|
||||||
|
animation: 'spin 1s linear infinite',
|
||||||
|
marginBottom: '20px'
|
||||||
|
}} />
|
||||||
|
<div>Loading trace events...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '20px', textAlign: 'center' }}>
|
||||||
|
<div style={{
|
||||||
|
background: '#f8d7da',
|
||||||
|
color: '#721c24',
|
||||||
|
padding: '15px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #f5c6cb'
|
||||||
|
}}>
|
||||||
|
<h3>Error Loading Trace Data</h3>
|
||||||
|
<p>{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!traceData || !stats) {
|
||||||
|
return <div style={{ padding: '20px', textAlign: 'center' }}>No trace data available</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
const phaseOptions = Object.keys(stats.eventsByPhase).sort()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
|
||||||
|
<h2>Phase Event Viewer</h2>
|
||||||
|
|
||||||
|
{/* Controls */}
|
||||||
|
<div style={{
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '20px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
marginBottom: '20px',
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
gap: '15px',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}>
|
||||||
|
{/* Phase Filter */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||||
|
<label style={{ fontWeight: 'bold', fontSize: '14px' }}>Filter by Phase:</label>
|
||||||
|
<select
|
||||||
|
value={selectedPhase}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSelectedPhase(e.target.value)
|
||||||
|
setCurrentPage(1)
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
border: '1px solid #ced4da',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '14px',
|
||||||
|
minWidth: '200px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="all">All Phases ({stats.totalEvents.toLocaleString()})</option>
|
||||||
|
{phaseOptions.map(phase => (
|
||||||
|
<option key={phase} value={phase}>
|
||||||
|
{phase} - {PHASE_DESCRIPTIONS[phase] || 'Unknown'} ({stats.eventsByPhase[phase].toLocaleString()})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||||
|
<label style={{ fontWeight: 'bold', fontSize: '14px' }}>Search:</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by name, category, PID, or TID..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSearchTerm(e.target.value)
|
||||||
|
setCurrentPage(1)
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
border: '1px solid #ced4da',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '14px',
|
||||||
|
minWidth: '300px'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Results count */}
|
||||||
|
<div style={{
|
||||||
|
marginLeft: 'auto',
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#6c757d',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}}>
|
||||||
|
{filteredEvents.length.toLocaleString()} events found
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination Controls */}
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '10px',
|
||||||
|
marginBottom: '20px'
|
||||||
|
}}>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
style={{
|
||||||
|
padding: '8px 16px',
|
||||||
|
border: '1px solid #ced4da',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: currentPage === 1 ? '#e9ecef' : '#fff',
|
||||||
|
cursor: currentPage === 1 ? 'not-allowed' : 'pointer'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span style={{ margin: '0 15px', fontSize: '14px' }}>
|
||||||
|
Page {currentPage} of {totalPages}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
style={{
|
||||||
|
padding: '8px 16px',
|
||||||
|
border: '1px solid #ced4da',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: currentPage === totalPages ? '#e9ecef' : '#fff',
|
||||||
|
cursor: currentPage === totalPages ? 'not-allowed' : 'pointer'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Events Table */}
|
||||||
|
<div style={{
|
||||||
|
background: 'white',
|
||||||
|
border: '1px solid #dee2e6',
|
||||||
|
borderRadius: '8px',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}}>
|
||||||
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||||
|
<thead>
|
||||||
|
<tr style={{ background: '#f8f9fa' }}>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'center', borderBottom: '1px solid #dee2e6', fontSize: '12px', width: '30px' }}>Expand</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'center', borderBottom: '1px solid #dee2e6', fontSize: '12px', width: '50px' }}>Phase</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontSize: '12px' }}>Name</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontSize: '12px' }}>Category</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'right', borderBottom: '1px solid #dee2e6', fontSize: '12px' }}>Duration</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'right', borderBottom: '1px solid #dee2e6', fontSize: '12px' }}>Thread Time</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontSize: '12px' }}>URL</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'right', borderBottom: '1px solid #dee2e6', fontSize: '12px' }}>PID</th>
|
||||||
|
<th style={{ padding: '8px', textAlign: 'right', borderBottom: '1px solid #dee2e6', fontSize: '12px' }}>TID</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{paginatedEvents.map((event, index) => {
|
||||||
|
const eventKey = `${event.pid}-${event.tid}-${event.ts}-${index}`
|
||||||
|
const isExpanded = expandedRows.has(eventKey)
|
||||||
|
const url = getURL(event as ExtendedTraceEvent)
|
||||||
|
const stackTrace = getStackTrace(event as ExtendedTraceEvent)
|
||||||
|
const layoutInfo = getLayoutInfo(event as ExtendedTraceEvent)
|
||||||
|
const scriptInfo = getScriptInfo(event as ExtendedTraceEvent)
|
||||||
|
const sampleTraceId = getSampleTraceId(event as ExtendedTraceEvent)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<tr key={eventKey} style={{
|
||||||
|
borderBottom: '1px solid #f1f3f4',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
onClick={() => toggleRowExpansion(eventKey)}
|
||||||
|
>
|
||||||
|
<td style={{
|
||||||
|
padding: '8px',
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#007bff',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}}>
|
||||||
|
{isExpanded ? '−' : '+'}
|
||||||
|
</td>
|
||||||
|
<td style={{
|
||||||
|
padding: '8px',
|
||||||
|
fontSize: '12px',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
background: getPhaseColor(event.ph),
|
||||||
|
color: 'white',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
{event.ph}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '8px', fontSize: '12px', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||||
|
{event.name}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '8px', fontSize: '12px', color: '#6c757d', maxWidth: '120px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||||
|
{event.cat}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '8px', fontSize: '12px', textAlign: 'right', fontFamily: 'monospace' }}>
|
||||||
|
{formatDuration((event as ExtendedTraceEvent).dur)}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '8px', fontSize: '12px', textAlign: 'right', fontFamily: 'monospace' }}>
|
||||||
|
{formatThreadTime((event as ExtendedTraceEvent).tts)}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '8px', fontSize: '11px', color: '#007bff', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||||
|
{url ? (
|
||||||
|
<a href={url} target="_blank" rel="noopener noreferrer" style={{ color: '#007bff', textDecoration: 'none' }}>
|
||||||
|
{truncateText(url, 40)}
|
||||||
|
</a>
|
||||||
|
) : '-'}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '8px', fontSize: '12px', textAlign: 'right', fontFamily: 'monospace' }}>
|
||||||
|
{event.pid}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '8px', fontSize: '12px', textAlign: 'right', fontFamily: 'monospace' }}>
|
||||||
|
{event.tid}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
{/* Expanded Row Details */}
|
||||||
|
{isExpanded && (
|
||||||
|
<tr key={`${eventKey}-expanded`}>
|
||||||
|
<td colSpan={9} style={{
|
||||||
|
padding: '15px',
|
||||||
|
background: '#f8f9fa',
|
||||||
|
border: '1px solid #e9ecef'
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '15px' }}>
|
||||||
|
|
||||||
|
{/* Timing Information */}
|
||||||
|
<div style={{ background: 'white', padding: '10px', borderRadius: '4px', border: '1px solid #dee2e6' }}>
|
||||||
|
<h4 style={{ margin: '0 0 8px 0', color: '#495057', fontSize: '14px' }}>Timing</h4>
|
||||||
|
<div style={{ fontSize: '12px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||||
|
<div><strong>Timestamp:</strong> {formatTimestamp(event.ts)}</div>
|
||||||
|
<div><strong>Duration:</strong> {formatDuration((event as ExtendedTraceEvent).dur)}</div>
|
||||||
|
<div><strong>Thread Duration:</strong> {formatDuration((event as ExtendedTraceEvent).tdur)}</div>
|
||||||
|
<div><strong>Thread Time:</strong> {formatThreadTime((event as ExtendedTraceEvent).tts)}</div>
|
||||||
|
{sampleTraceId && <div><strong>Sample Trace ID:</strong> {sampleTraceId}</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Script/Context Information */}
|
||||||
|
{(scriptInfo.contextId || scriptInfo.scriptId) && (
|
||||||
|
<div style={{ background: 'white', padding: '10px', borderRadius: '4px', border: '1px solid #dee2e6' }}>
|
||||||
|
<h4 style={{ margin: '0 0 8px 0', color: '#495057', fontSize: '14px' }}>Script Context</h4>
|
||||||
|
<div style={{ fontSize: '12px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||||
|
{scriptInfo.contextId && <div><strong>Execution Context:</strong> {scriptInfo.contextId}</div>}
|
||||||
|
{scriptInfo.scriptId && <div><strong>Script ID:</strong> {scriptInfo.scriptId}</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Layout Information */}
|
||||||
|
{(layoutInfo.dirtyObjects || layoutInfo.totalObjects || layoutInfo.elementCount) && (
|
||||||
|
<div style={{ background: 'white', padding: '10px', borderRadius: '4px', border: '1px solid #dee2e6' }}>
|
||||||
|
<h4 style={{ margin: '0 0 8px 0', color: '#495057', fontSize: '14px' }}>Layout Metrics</h4>
|
||||||
|
<div style={{ fontSize: '12px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||||
|
{layoutInfo.dirtyObjects && <div><strong>Dirty Objects:</strong> {layoutInfo.dirtyObjects}</div>}
|
||||||
|
{layoutInfo.totalObjects && <div><strong>Total Objects:</strong> {layoutInfo.totalObjects}</div>}
|
||||||
|
{layoutInfo.elementCount && <div><strong>Element Count:</strong> {layoutInfo.elementCount}</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stack Trace */}
|
||||||
|
{stackTrace && stackTrace.length > 0 && (
|
||||||
|
<div style={{
|
||||||
|
background: 'white',
|
||||||
|
padding: '10px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
border: '1px solid #dee2e6',
|
||||||
|
gridColumn: '1 / -1'
|
||||||
|
}}>
|
||||||
|
<h4 style={{ margin: '0 0 8px 0', color: '#495057', fontSize: '14px' }}>
|
||||||
|
Stack Trace ({stackTrace.length} frames)
|
||||||
|
</h4>
|
||||||
|
<div style={{
|
||||||
|
maxHeight: '200px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
fontSize: '11px',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '8px',
|
||||||
|
borderRadius: '3px'
|
||||||
|
}}>
|
||||||
|
{stackTrace.slice(0, 10).map((frame: any, frameIndex: number) => (
|
||||||
|
<div key={frameIndex} style={{
|
||||||
|
marginBottom: '4px',
|
||||||
|
paddingBottom: '4px',
|
||||||
|
borderBottom: frameIndex < Math.min(stackTrace.length, 10) - 1 ? '1px solid #e9ecef' : 'none'
|
||||||
|
}}>
|
||||||
|
<div style={{ color: '#007bff', fontWeight: 'bold' }}>
|
||||||
|
{frame.functionName || '(anonymous)'}
|
||||||
|
</div>
|
||||||
|
<div style={{ color: '#6c757d' }}>
|
||||||
|
{frame.url ? truncateText(frame.url, 80) : 'unknown'}
|
||||||
|
{frame.lineNumber && `:${frame.lineNumber}`}
|
||||||
|
{frame.columnNumber && `:${frame.columnNumber}`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{stackTrace.length > 10 && (
|
||||||
|
<div style={{ color: '#6c757d', fontStyle: 'italic', marginTop: '8px' }}>
|
||||||
|
... and {stackTrace.length - 10} more frames
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{paginatedEvents.length === 0 && (
|
||||||
|
<div style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '40px',
|
||||||
|
color: '#6c757d',
|
||||||
|
fontSize: '16px'
|
||||||
|
}}>
|
||||||
|
No events found matching the current filters
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPhaseColor(phase: TraceEventPhase): string {
|
||||||
|
const colors: Record<string, string> = {
|
||||||
|
'M': '#6c757d', // Metadata - gray
|
||||||
|
'X': '#007bff', // Complete - blue
|
||||||
|
'I': '#28a745', // Instant - green
|
||||||
|
'B': '#ffc107', // Begin - yellow
|
||||||
|
'E': '#fd7e14', // End - orange
|
||||||
|
'D': '#6f42c1', // Deprecated - purple
|
||||||
|
'b': '#20c997', // Nestable start - teal
|
||||||
|
'e': '#e83e8c', // Nestable end - pink
|
||||||
|
'n': '#17a2b8', // Nestable instant - cyan
|
||||||
|
'S': '#dc3545', // Async start - red
|
||||||
|
'T': '#ffc107', // Async instant - warning
|
||||||
|
'F': '#fd7e14', // Async end - orange
|
||||||
|
'P': '#6f42c1', // Sample - purple
|
||||||
|
'C': '#20c997', // Counter - teal
|
||||||
|
'R': '#e83e8c' // Mark - pink
|
||||||
|
}
|
||||||
|
return colors[phase] || '#6c757d'
|
||||||
|
}
|
||||||
331
src/components/TraceSelector.tsx
Normal file
331
src/components/TraceSelector.tsx
Normal file
@ -0,0 +1,331 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { traceDatabase, type TraceRecord } from '../utils/traceDatabase'
|
||||||
|
|
||||||
|
interface TraceSelectorProps {
|
||||||
|
onTraceSelect: (traceId: string) => void
|
||||||
|
onUploadNew: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TraceSelector({ onTraceSelect, onUploadNew }: TraceSelectorProps) {
|
||||||
|
const [traces, setTraces] = useState<TraceRecord[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null)
|
||||||
|
const [editingName, setEditingName] = useState('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadTraces()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const loadTraces = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
const allTraces = await traceDatabase.getAllTraces()
|
||||||
|
// Sort by upload date (newest first)
|
||||||
|
allTraces.sort((a, b) => b.uploadedAt.getTime() - a.uploadedAt.getTime())
|
||||||
|
setTraces(allTraces)
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Failed to load traces')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id: string) => {
|
||||||
|
if (confirm('Are you sure you want to delete this trace? This action cannot be undone.')) {
|
||||||
|
try {
|
||||||
|
await traceDatabase.deleteTrace(id)
|
||||||
|
setTraces(traces.filter(t => t.id !== id))
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Failed to delete trace')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRename = async (id: string, newName: string) => {
|
||||||
|
if (!newName.trim()) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
await traceDatabase.updateTraceName(id, newName.trim())
|
||||||
|
setTraces(traces.map(t => t.id === id ? { ...t, name: newName.trim() } : t))
|
||||||
|
setEditingId(null)
|
||||||
|
setEditingName('')
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Failed to rename trace')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const startEdit = (trace: TraceRecord) => {
|
||||||
|
setEditingId(trace.id)
|
||||||
|
setEditingName(trace.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelEdit = () => {
|
||||||
|
setEditingId(null)
|
||||||
|
setEditingName('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatFileSize = (bytes: number) => {
|
||||||
|
if (bytes < 1024) return `${bytes} B`
|
||||||
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||||
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDuration = (microseconds: number) => {
|
||||||
|
const seconds = microseconds / 1000000
|
||||||
|
if (seconds < 60) return `${seconds.toFixed(1)}s`
|
||||||
|
const minutes = seconds / 60
|
||||||
|
return `${minutes.toFixed(1)}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (date: Date) => {
|
||||||
|
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: '200px',
|
||||||
|
fontFamily: 'system-ui, sans-serif'
|
||||||
|
}}>
|
||||||
|
<div>Loading traces...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding: '20px',
|
||||||
|
fontFamily: 'system-ui, sans-serif',
|
||||||
|
maxWidth: '1000px',
|
||||||
|
margin: '0 auto'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: '24px'
|
||||||
|
}}>
|
||||||
|
<h1 style={{
|
||||||
|
fontSize: '24px',
|
||||||
|
color: '#495057',
|
||||||
|
margin: '0',
|
||||||
|
fontWeight: '600'
|
||||||
|
}}>
|
||||||
|
Performance Traces ({traces.length})
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onUploadNew}
|
||||||
|
style={{
|
||||||
|
background: '#007bff',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '10px 20px',
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+ Upload New Trace
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div style={{
|
||||||
|
marginBottom: '20px',
|
||||||
|
padding: '12px 16px',
|
||||||
|
backgroundColor: '#f8d7da',
|
||||||
|
color: '#721c24',
|
||||||
|
border: '1px solid #f5c6cb',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{traces.length === 0 ? (
|
||||||
|
<div style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '60px 20px',
|
||||||
|
backgroundColor: '#f8f9fa',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #dee2e6'
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: '48px', marginBottom: '16px' }}>📊</div>
|
||||||
|
<h3 style={{
|
||||||
|
color: '#495057',
|
||||||
|
marginBottom: '8px',
|
||||||
|
fontSize: '18px',
|
||||||
|
fontWeight: '600'
|
||||||
|
}}>
|
||||||
|
No traces found
|
||||||
|
</h3>
|
||||||
|
<p style={{
|
||||||
|
color: '#6c757d',
|
||||||
|
marginBottom: '20px',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}>
|
||||||
|
Upload your first Chrome DevTools Performance trace to get started.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={onUploadNew}
|
||||||
|
style={{
|
||||||
|
background: '#007bff',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '12px 24px',
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Upload Trace File
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gap: '16px',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))'
|
||||||
|
}}>
|
||||||
|
{traces.map((trace) => (
|
||||||
|
<div
|
||||||
|
key={trace.id}
|
||||||
|
style={{
|
||||||
|
background: 'white',
|
||||||
|
border: '1px solid #dee2e6',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '20px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.2s ease',
|
||||||
|
boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#007bff'
|
||||||
|
e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,123,255,0.15)'
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#dee2e6'
|
||||||
|
e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)'
|
||||||
|
}}
|
||||||
|
onClick={() => onTraceSelect(trace.id)}
|
||||||
|
>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
marginBottom: '12px'
|
||||||
|
}}>
|
||||||
|
{editingId === trace.id ? (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editingName}
|
||||||
|
onChange={(e) => setEditingName(e.target.value)}
|
||||||
|
onBlur={() => handleRename(trace.id, editingName)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') handleRename(trace.id, editingName)
|
||||||
|
if (e.key === 'Escape') cancelEdit()
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
autoFocus
|
||||||
|
style={{
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: '600',
|
||||||
|
border: '1px solid #007bff',
|
||||||
|
borderRadius: '4px',
|
||||||
|
padding: '4px 8px',
|
||||||
|
background: 'white',
|
||||||
|
outline: 'none'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<h3
|
||||||
|
style={{
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#495057',
|
||||||
|
margin: '0',
|
||||||
|
wordBreak: 'break-word'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{trace.name}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
startEdit(trace)
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
background: 'transparent',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#6c757d',
|
||||||
|
padding: '4px'
|
||||||
|
}}
|
||||||
|
title="Rename"
|
||||||
|
>
|
||||||
|
✏️
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
handleDelete(trace.id)
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
background: 'transparent',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#dc3545',
|
||||||
|
padding: '4px'
|
||||||
|
}}
|
||||||
|
title="Delete"
|
||||||
|
>
|
||||||
|
🗑️
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1fr 1fr',
|
||||||
|
gap: '8px',
|
||||||
|
fontSize: '13px',
|
||||||
|
color: '#6c757d'
|
||||||
|
}}>
|
||||||
|
<div><strong>Events:</strong> {trace.eventCount.toLocaleString()}</div>
|
||||||
|
<div><strong>Size:</strong> {formatFileSize(trace.fileSize)}</div>
|
||||||
|
<div><strong>Duration:</strong> {formatDuration(trace.duration)}</div>
|
||||||
|
<div><strong>Uploaded:</strong> {formatDate(trace.uploadedAt)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
marginTop: '12px',
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#868e96',
|
||||||
|
textAlign: 'right'
|
||||||
|
}}>
|
||||||
|
Click to analyze →
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
165
src/components/TraceStats.tsx
Normal file
165
src/components/TraceStats.tsx
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
import { getTraceStats } from '../utils/traceLoader'
|
||||||
|
|
||||||
|
interface TraceStatsProps {
|
||||||
|
stats: ReturnType<typeof getTraceStats>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TraceStats({ stats }: TraceStatsProps) {
|
||||||
|
const formatNumber = (num: number) => {
|
||||||
|
return new Intl.NumberFormat().format(num)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDuration = (microseconds: number) => {
|
||||||
|
const milliseconds = microseconds / 1000
|
||||||
|
if (milliseconds < 1000) {
|
||||||
|
return `${milliseconds.toFixed(2)}ms`
|
||||||
|
}
|
||||||
|
const seconds = milliseconds / 1000
|
||||||
|
return `${seconds.toFixed(2)}s`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTimestamp = (timestamp: number) => {
|
||||||
|
return new Date(timestamp / 1000).toLocaleString()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPhaseDescription = (phase: string) => {
|
||||||
|
const descriptions: Record<string, string> = {
|
||||||
|
'M': 'Metadata',
|
||||||
|
'X': 'Complete Events',
|
||||||
|
'I': 'Instant Events',
|
||||||
|
'B': 'Begin Events',
|
||||||
|
'E': 'End Events',
|
||||||
|
'D': 'Deprecated',
|
||||||
|
'b': 'Nestable Start',
|
||||||
|
'e': 'Nestable End',
|
||||||
|
'n': 'Nestable Instant',
|
||||||
|
'S': 'Async Start',
|
||||||
|
'T': 'Async Instant',
|
||||||
|
'F': 'Async End',
|
||||||
|
'P': 'Sample',
|
||||||
|
'C': 'Counter',
|
||||||
|
'R': 'Mark'
|
||||||
|
}
|
||||||
|
return descriptions[phase] || `Unknown (${phase})`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding: '20px',
|
||||||
|
fontFamily: 'system-ui, sans-serif',
|
||||||
|
maxWidth: '800px',
|
||||||
|
margin: '0 auto'
|
||||||
|
}}>
|
||||||
|
<h2 style={{ marginBottom: '20px', color: '#333' }}>Trace Statistics</h2>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
|
||||||
|
gap: '20px',
|
||||||
|
marginBottom: '30px'
|
||||||
|
}}>
|
||||||
|
{/* Overview Section */}
|
||||||
|
<div style={{
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '15px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #e9ecef'
|
||||||
|
}}>
|
||||||
|
<h3 style={{ marginTop: '0', color: '#495057' }}>Overview</h3>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||||
|
<div><strong>Total Events:</strong> {formatNumber(stats.totalEvents)}</div>
|
||||||
|
<div><strong>Processes:</strong> {stats.processCount}</div>
|
||||||
|
<div><strong>Threads:</strong> {stats.threadCount}</div>
|
||||||
|
<div><strong>Duration:</strong> {formatDuration(stats.timeRange.duration)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metadata Section */}
|
||||||
|
<div style={{
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '15px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #e9ecef'
|
||||||
|
}}>
|
||||||
|
<h3 style={{ marginTop: '0', color: '#495057' }}>Metadata</h3>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||||
|
<div><strong>Source:</strong> {stats.metadata.source}</div>
|
||||||
|
<div><strong>Hardware Threads:</strong> {stats.metadata.hardwareConcurrency}</div>
|
||||||
|
<div><strong>Start Time:</strong> {new Date(stats.metadata.startTime).toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Time Range Section */}
|
||||||
|
<div style={{
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '15px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #e9ecef'
|
||||||
|
}}>
|
||||||
|
<h3 style={{ marginTop: '0', color: '#495057' }}>Time Range</h3>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '12px' }}>
|
||||||
|
<div><strong>Start:</strong> {formatTimestamp(stats.timeRange.start)}</div>
|
||||||
|
<div><strong>End:</strong> {formatTimestamp(stats.timeRange.end)}</div>
|
||||||
|
<div><strong>Duration:</strong> {formatDuration(stats.timeRange.duration)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Event Types Section */}
|
||||||
|
<div style={{
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '20px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #e9ecef'
|
||||||
|
}}>
|
||||||
|
<h3 style={{ marginTop: '0', color: '#495057' }}>Events by Type</h3>
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
|
||||||
|
gap: '10px'
|
||||||
|
}}>
|
||||||
|
{Object.entries(stats.eventsByPhase)
|
||||||
|
.sort(([, a], [, b]) => b - a)
|
||||||
|
.map(([phase, count]) => (
|
||||||
|
<div key={phase} style={{
|
||||||
|
background: 'white',
|
||||||
|
padding: '10px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
border: '1px solid #dee2e6',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '4px'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#495057',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}>
|
||||||
|
{getPhaseDescription(phase)}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#6c757d'
|
||||||
|
}}>
|
||||||
|
Phase: {phase}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#007bff'
|
||||||
|
}}>
|
||||||
|
{formatNumber(count)}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '11px',
|
||||||
|
color: '#6c757d'
|
||||||
|
}}>
|
||||||
|
{((count / stats.totalEvents) * 100).toFixed(1)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
247
src/components/TraceUpload.tsx
Normal file
247
src/components/TraceUpload.tsx
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import type { TraceFile } from '../../types/trace'
|
||||||
|
import { traceDatabase } from '../utils/traceDatabase'
|
||||||
|
|
||||||
|
interface TraceUploadProps {
|
||||||
|
onUploadSuccess: (traceId: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TraceUpload({ onUploadSuccess }: TraceUploadProps) {
|
||||||
|
const [uploading, setUploading] = useState(false)
|
||||||
|
const [dragOver, setDragOver] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const validateTraceFile = (data: any): data is TraceFile => {
|
||||||
|
return data &&
|
||||||
|
data.metadata &&
|
||||||
|
Array.isArray(data.traceEvents) &&
|
||||||
|
data.traceEvents.length > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const processFile = async (file: File) => {
|
||||||
|
setUploading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Validate file type
|
||||||
|
if (!file.name.toLowerCase().endsWith('.json')) {
|
||||||
|
throw new Error('Please upload a JSON trace file')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate file size (max 200MB)
|
||||||
|
if (file.size > 200 * 1024 * 1024) {
|
||||||
|
throw new Error('Trace file too large (max 200MB)')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Read file content
|
||||||
|
const text = await file.text()
|
||||||
|
|
||||||
|
// Parse JSON
|
||||||
|
let traceData: TraceFile
|
||||||
|
try {
|
||||||
|
traceData = JSON.parse(text)
|
||||||
|
} catch (parseError) {
|
||||||
|
throw new Error('Invalid JSON format')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate trace structure
|
||||||
|
if (!validateTraceFile(traceData)) {
|
||||||
|
throw new Error('Invalid trace file format. Expected Chrome DevTools Performance trace.')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store in database
|
||||||
|
const traceId = await traceDatabase.addTrace(traceData, file.name, file.size)
|
||||||
|
|
||||||
|
onUploadSuccess(traceId)
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Upload failed')
|
||||||
|
} finally {
|
||||||
|
setUploading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = event.target.files?.[0]
|
||||||
|
if (file) {
|
||||||
|
processFile(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDrop = (event: React.DragEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
setDragOver(false)
|
||||||
|
|
||||||
|
const file = event.dataTransfer.files[0]
|
||||||
|
if (file) {
|
||||||
|
processFile(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDragOver = (event: React.DragEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
setDragOver(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDragLeave = (event: React.DragEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
setDragOver(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
minHeight: '400px',
|
||||||
|
padding: '40px',
|
||||||
|
fontFamily: 'system-ui, sans-serif'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
maxWidth: '600px',
|
||||||
|
textAlign: 'center',
|
||||||
|
marginBottom: '30px'
|
||||||
|
}}>
|
||||||
|
<h1 style={{
|
||||||
|
fontSize: '28px',
|
||||||
|
color: '#495057',
|
||||||
|
marginBottom: '16px',
|
||||||
|
fontWeight: '600'
|
||||||
|
}}>
|
||||||
|
Performance Trace Analyzer
|
||||||
|
</h1>
|
||||||
|
<p style={{
|
||||||
|
fontSize: '16px',
|
||||||
|
color: '#6c757d',
|
||||||
|
lineHeight: '1.5',
|
||||||
|
marginBottom: '24px'
|
||||||
|
}}>
|
||||||
|
Upload Chrome DevTools Performance trace files to analyze network requests,
|
||||||
|
queue times, CDN usage, and performance bottlenecks.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: dragOver ? '2px dashed #007bff' : '2px dashed #dee2e6',
|
||||||
|
borderRadius: '12px',
|
||||||
|
padding: '40px',
|
||||||
|
backgroundColor: dragOver ? '#f8f9ff' : '#f8f9fa',
|
||||||
|
transition: 'all 0.2s ease',
|
||||||
|
cursor: 'pointer',
|
||||||
|
minWidth: '400px',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDragLeave={handleDragLeave}
|
||||||
|
onClick={() => document.getElementById('trace-upload')?.click()}
|
||||||
|
>
|
||||||
|
{uploading ? (
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
width: '40px',
|
||||||
|
height: '40px',
|
||||||
|
border: '4px solid #f3f3f3',
|
||||||
|
borderTop: '4px solid #007bff',
|
||||||
|
borderRadius: '50%',
|
||||||
|
animation: 'spin 1s linear infinite',
|
||||||
|
margin: '0 auto 20px'
|
||||||
|
}} />
|
||||||
|
<div style={{ fontSize: '16px', color: '#495057' }}>
|
||||||
|
Processing trace file...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: '48px', marginBottom: '16px' }}>📊</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '18px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#495057',
|
||||||
|
marginBottom: '8px'
|
||||||
|
}}>
|
||||||
|
Drop your trace file here
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#6c757d',
|
||||||
|
marginBottom: '16px'
|
||||||
|
}}>
|
||||||
|
or click to browse files
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#868e96',
|
||||||
|
marginTop: '16px'
|
||||||
|
}}>
|
||||||
|
Supports JSON trace files up to 200MB
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<input
|
||||||
|
id="trace-upload"
|
||||||
|
type="file"
|
||||||
|
accept=".json"
|
||||||
|
onChange={handleFileSelect}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
disabled={uploading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div style={{
|
||||||
|
marginTop: '20px',
|
||||||
|
padding: '12px 20px',
|
||||||
|
backgroundColor: '#f8d7da',
|
||||||
|
color: '#721c24',
|
||||||
|
border: '1px solid #f5c6cb',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '14px',
|
||||||
|
maxWidth: '400px',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
marginTop: '40px',
|
||||||
|
padding: '20px',
|
||||||
|
backgroundColor: '#e9ecef',
|
||||||
|
borderRadius: '8px',
|
||||||
|
maxWidth: '500px'
|
||||||
|
}}>
|
||||||
|
<h3 style={{
|
||||||
|
fontSize: '16px',
|
||||||
|
color: '#495057',
|
||||||
|
marginBottom: '12px',
|
||||||
|
marginTop: '0'
|
||||||
|
}}>
|
||||||
|
How to capture a trace:
|
||||||
|
</h3>
|
||||||
|
<ol style={{
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#6c757d',
|
||||||
|
lineHeight: '1.6',
|
||||||
|
paddingLeft: '20px',
|
||||||
|
margin: '0'
|
||||||
|
}}>
|
||||||
|
<li>Open Chrome DevTools (F12)</li>
|
||||||
|
<li>Go to the Performance tab</li>
|
||||||
|
<li>Click the record button and reload your page</li>
|
||||||
|
<li>Stop recording and click "Save profile"</li>
|
||||||
|
<li>Upload the saved .json file here</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
128
src/components/TraceViewer.tsx
Normal file
128
src/components/TraceViewer.tsx
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
import { useDatabaseTraceData } from '../hooks/useDatabaseTraceData'
|
||||||
|
import TraceStats from './TraceStats'
|
||||||
|
|
||||||
|
interface TraceViewerProps {
|
||||||
|
traceId: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TraceViewer({ traceId }: TraceViewerProps) {
|
||||||
|
const { traceData, loading, error, stats, reload } = useDatabaseTraceData(traceId)
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: '400px',
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#6c757d',
|
||||||
|
padding: '40px'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
width: '50px',
|
||||||
|
height: '50px',
|
||||||
|
border: '4px solid #f3f3f3',
|
||||||
|
borderTop: '4px solid #007bff',
|
||||||
|
borderRadius: '50%',
|
||||||
|
animation: 'spin 1s linear infinite',
|
||||||
|
marginBottom: '20px'
|
||||||
|
}} />
|
||||||
|
<div>Loading trace data...</div>
|
||||||
|
<div style={{ fontSize: '14px', marginTop: '10px', textAlign: 'center' }}>
|
||||||
|
This may take a moment for large trace files (90.9MB)
|
||||||
|
</div>
|
||||||
|
<style>{`
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding: '20px',
|
||||||
|
maxWidth: '600px',
|
||||||
|
margin: '0 auto',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
background: '#f8d7da',
|
||||||
|
color: '#721c24',
|
||||||
|
padding: '15px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #f5c6cb',
|
||||||
|
marginBottom: '15px'
|
||||||
|
}}>
|
||||||
|
<h3 style={{ margin: '0 0 10px 0' }}>Error Loading Trace Data</h3>
|
||||||
|
<p style={{ margin: '0' }}>{error}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={reload}
|
||||||
|
style={{
|
||||||
|
background: '#007bff',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '10px 20px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!traceData || !stats) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: '200px',
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#6c757d'
|
||||||
|
}}>
|
||||||
|
No trace data available
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
padding: '10px 20px',
|
||||||
|
background: '#e9ecef',
|
||||||
|
borderBottom: '1px solid #dee2e6',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}>
|
||||||
|
<h1 style={{ margin: '0', color: '#495057' }}>Performance Trace Viewer</h1>
|
||||||
|
<button
|
||||||
|
onClick={reload}
|
||||||
|
style={{
|
||||||
|
background: '#28a745',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
padding: '8px 16px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '12px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reload Data
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TraceStats stats={stats} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
79
src/hooks/useDatabaseTraceData.ts
Normal file
79
src/hooks/useDatabaseTraceData.ts
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import type { TraceFile } from '../../types/trace'
|
||||||
|
import { traceDatabase } from '../utils/traceDatabase'
|
||||||
|
import { getTraceStats } from '../utils/traceLoader'
|
||||||
|
|
||||||
|
interface UseDatabaseTraceDataResult {
|
||||||
|
traceData: TraceFile | null
|
||||||
|
loading: boolean
|
||||||
|
error: string | null
|
||||||
|
stats: ReturnType<typeof getTraceStats> | null
|
||||||
|
reload: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* React hook for loading and managing trace data from IndexedDB
|
||||||
|
* @param traceId - The ID of the trace to load, or null to load none
|
||||||
|
* @returns Object containing trace data, loading state, error, and statistics
|
||||||
|
*/
|
||||||
|
export function useDatabaseTraceData(traceId: string | null): UseDatabaseTraceDataResult {
|
||||||
|
const [traceData, setTraceData] = useState<TraceFile | null>(null)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const [stats, setStats] = useState<ReturnType<typeof getTraceStats> | null>(null)
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
if (!traceId) {
|
||||||
|
setTraceData(null)
|
||||||
|
setStats(null)
|
||||||
|
setError(null)
|
||||||
|
setLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
// Initialize database if needed
|
||||||
|
await traceDatabase.init()
|
||||||
|
|
||||||
|
// Load trace from database
|
||||||
|
const traceRecord = await traceDatabase.getTrace(traceId)
|
||||||
|
|
||||||
|
if (!traceRecord) {
|
||||||
|
throw new Error('Trace not found in database')
|
||||||
|
}
|
||||||
|
|
||||||
|
setTraceData(traceRecord.traceData)
|
||||||
|
|
||||||
|
// Calculate statistics
|
||||||
|
const traceStats = getTraceStats(traceRecord.traceData)
|
||||||
|
setStats(traceStats)
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred'
|
||||||
|
setError(errorMessage)
|
||||||
|
setTraceData(null)
|
||||||
|
setStats(null)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const reload = () => {
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadData()
|
||||||
|
}, [traceId])
|
||||||
|
|
||||||
|
return {
|
||||||
|
traceData,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
stats,
|
||||||
|
reload
|
||||||
|
}
|
||||||
|
}
|
||||||
60
src/hooks/useTraceData.ts
Normal file
60
src/hooks/useTraceData.ts
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import type { TraceFile } from '../../types/trace'
|
||||||
|
import { loadTraceFile, getTraceStats } from '../utils/traceLoader'
|
||||||
|
|
||||||
|
interface UseTraceDataResult {
|
||||||
|
traceData: TraceFile | null
|
||||||
|
loading: boolean
|
||||||
|
error: string | null
|
||||||
|
stats: ReturnType<typeof getTraceStats> | null
|
||||||
|
reload: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* React hook for loading and managing trace data
|
||||||
|
* @returns Object containing trace data, loading state, error, and statistics
|
||||||
|
*/
|
||||||
|
export function useTraceData(): UseTraceDataResult {
|
||||||
|
const [traceData, setTraceData] = useState<TraceFile | null>(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const [stats, setStats] = useState<ReturnType<typeof getTraceStats> | null>(null)
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
const data = await loadTraceFile()
|
||||||
|
setTraceData(data)
|
||||||
|
|
||||||
|
// Calculate statistics
|
||||||
|
const traceStats = getTraceStats(data)
|
||||||
|
setStats(traceStats)
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred'
|
||||||
|
setError(errorMessage)
|
||||||
|
setTraceData(null)
|
||||||
|
setStats(null)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const reload = () => {
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadData()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
traceData,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
stats,
|
||||||
|
reload
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/index.css
Normal file
1
src/index.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
159
src/utils/traceDatabase.ts
Normal file
159
src/utils/traceDatabase.ts
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
import type { TraceFile } from '../../types/trace'
|
||||||
|
|
||||||
|
export interface TraceRecord {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
uploadedAt: Date
|
||||||
|
fileSize: number
|
||||||
|
eventCount: number
|
||||||
|
duration: number
|
||||||
|
traceData: TraceFile
|
||||||
|
}
|
||||||
|
|
||||||
|
const DB_NAME = 'PerfVizTraces'
|
||||||
|
const DB_VERSION = 1
|
||||||
|
const STORE_NAME = 'traces'
|
||||||
|
|
||||||
|
class TraceDatabase {
|
||||||
|
private db: IDBDatabase | null = null
|
||||||
|
|
||||||
|
async init(): Promise<void> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const request = indexedDB.open(DB_NAME, DB_VERSION)
|
||||||
|
|
||||||
|
request.onerror = () => reject(request.error)
|
||||||
|
request.onsuccess = () => {
|
||||||
|
this.db = request.result
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
|
||||||
|
request.onupgradeneeded = (event) => {
|
||||||
|
const db = (event.target as IDBOpenDBRequest).result
|
||||||
|
|
||||||
|
// Create traces object store
|
||||||
|
const store = db.createObjectStore(STORE_NAME, { keyPath: 'id' })
|
||||||
|
store.createIndex('name', 'name', { unique: false })
|
||||||
|
store.createIndex('uploadedAt', 'uploadedAt', { unique: false })
|
||||||
|
store.createIndex('fileSize', 'fileSize', { unique: false })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async addTrace(traceData: TraceFile, filename: string, fileSize: number): Promise<string> {
|
||||||
|
if (!this.db) throw new Error('Database not initialized')
|
||||||
|
|
||||||
|
const id = `trace_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
|
||||||
|
|
||||||
|
// Calculate basic stats
|
||||||
|
const eventCount = traceData.traceEvents.length
|
||||||
|
let minTs = Infinity
|
||||||
|
let maxTs = -Infinity
|
||||||
|
|
||||||
|
for (const event of traceData.traceEvents) {
|
||||||
|
if (event.ts > 0) {
|
||||||
|
minTs = Math.min(minTs, event.ts)
|
||||||
|
maxTs = Math.max(maxTs, event.ts)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const duration = maxTs - minTs
|
||||||
|
|
||||||
|
const record: TraceRecord = {
|
||||||
|
id,
|
||||||
|
name: filename,
|
||||||
|
uploadedAt: new Date(),
|
||||||
|
fileSize,
|
||||||
|
eventCount,
|
||||||
|
duration,
|
||||||
|
traceData
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const transaction = this.db!.transaction([STORE_NAME], 'readwrite')
|
||||||
|
const store = transaction.objectStore(STORE_NAME)
|
||||||
|
const request = store.add(record)
|
||||||
|
|
||||||
|
request.onerror = () => reject(request.error)
|
||||||
|
request.onsuccess = () => resolve(id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAllTraces(): Promise<TraceRecord[]> {
|
||||||
|
if (!this.db) throw new Error('Database not initialized')
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const transaction = this.db!.transaction([STORE_NAME], 'readonly')
|
||||||
|
const store = transaction.objectStore(STORE_NAME)
|
||||||
|
const request = store.getAll()
|
||||||
|
|
||||||
|
request.onerror = () => reject(request.error)
|
||||||
|
request.onsuccess = () => resolve(request.result)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async getTrace(id: string): Promise<TraceRecord | null> {
|
||||||
|
if (!this.db) throw new Error('Database not initialized')
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const transaction = this.db!.transaction([STORE_NAME], 'readonly')
|
||||||
|
const store = transaction.objectStore(STORE_NAME)
|
||||||
|
const request = store.get(id)
|
||||||
|
|
||||||
|
request.onerror = () => reject(request.error)
|
||||||
|
request.onsuccess = () => resolve(request.result || null)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteTrace(id: string): Promise<void> {
|
||||||
|
if (!this.db) throw new Error('Database not initialized')
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const transaction = this.db!.transaction([STORE_NAME], 'readwrite')
|
||||||
|
const store = transaction.objectStore(STORE_NAME)
|
||||||
|
const request = store.delete(id)
|
||||||
|
|
||||||
|
request.onerror = () => reject(request.error)
|
||||||
|
request.onsuccess = () => resolve()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateTraceName(id: string, newName: string): Promise<void> {
|
||||||
|
if (!this.db) throw new Error('Database not initialized')
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const transaction = this.db!.transaction([STORE_NAME], 'readwrite')
|
||||||
|
const store = transaction.objectStore(STORE_NAME)
|
||||||
|
const getRequest = store.get(id)
|
||||||
|
|
||||||
|
getRequest.onsuccess = () => {
|
||||||
|
const record = getRequest.result
|
||||||
|
if (record) {
|
||||||
|
record.name = newName
|
||||||
|
const updateRequest = store.put(record)
|
||||||
|
updateRequest.onsuccess = () => resolve()
|
||||||
|
updateRequest.onerror = () => reject(updateRequest.error)
|
||||||
|
} else {
|
||||||
|
reject(new Error('Trace not found'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getRequest.onerror = () => reject(getRequest.error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async clearAllTraces(): Promise<void> {
|
||||||
|
if (!this.db) throw new Error('Database not initialized')
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const transaction = this.db!.transaction([STORE_NAME], 'readwrite')
|
||||||
|
const store = transaction.objectStore(STORE_NAME)
|
||||||
|
const request = store.clear()
|
||||||
|
|
||||||
|
request.onerror = () => reject(request.error)
|
||||||
|
request.onsuccess = () => resolve()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Singleton instance
|
||||||
|
export const traceDatabase = new TraceDatabase()
|
||||||
136
src/utils/traceLoader.ts
Normal file
136
src/utils/traceLoader.ts
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
import type { TraceFile } from '../../types/trace'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads and parses the trace.json file from the public directory with streaming support
|
||||||
|
* @returns Promise that resolves to the parsed trace data
|
||||||
|
*/
|
||||||
|
export async function loadTraceFile(): Promise<TraceFile> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/trace.json')
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to load trace.json: ${response.status} ${response.statusText}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the response as text first to avoid JSON.parse call stack issues
|
||||||
|
const textData = await response.text()
|
||||||
|
|
||||||
|
// Parse JSON with error handling for large files
|
||||||
|
let traceData: TraceFile
|
||||||
|
try {
|
||||||
|
// Use a timeout to prevent blocking the main thread too long
|
||||||
|
traceData = await parseJSONSafely(textData)
|
||||||
|
} catch (parseError) {
|
||||||
|
throw new Error(`Failed to parse trace JSON: ${parseError}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Basic validation to ensure the structure matches our expected format
|
||||||
|
if (!traceData.metadata || !Array.isArray(traceData.traceEvents)) {
|
||||||
|
throw new Error('Invalid trace file format: missing metadata or traceEvents array')
|
||||||
|
}
|
||||||
|
|
||||||
|
return traceData
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading trace file:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Safely parse JSON with chunked processing to avoid call stack issues
|
||||||
|
*/
|
||||||
|
async function parseJSONSafely(jsonString: string): Promise<TraceFile> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// Use setTimeout to prevent blocking the main thread
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(jsonString)
|
||||||
|
resolve(parsed)
|
||||||
|
} catch (error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
}, 0)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads trace file with error handling and loading state management
|
||||||
|
* Useful for React components that need loading states
|
||||||
|
*/
|
||||||
|
export async function loadTraceFileWithStatus(): Promise<{
|
||||||
|
data: TraceFile | null
|
||||||
|
loading: boolean
|
||||||
|
error: string | null
|
||||||
|
}> {
|
||||||
|
try {
|
||||||
|
const data = await loadTraceFile()
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
loading: false,
|
||||||
|
error: null
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
data: null,
|
||||||
|
loading: false,
|
||||||
|
error: error instanceof Error ? error.message : 'Unknown error occurred'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Utility function to get basic trace statistics with optimized processing for large datasets
|
||||||
|
* @param traceData - The loaded trace data
|
||||||
|
* @returns Object containing basic statistics about the trace
|
||||||
|
*/
|
||||||
|
export function getTraceStats(traceData: TraceFile) {
|
||||||
|
const { traceEvents, metadata } = traceData
|
||||||
|
|
||||||
|
// Initialize counters
|
||||||
|
const eventsByPhase: Record<string, number> = {}
|
||||||
|
const processes = new Set<number>()
|
||||||
|
const threads = new Set<string>()
|
||||||
|
let minTimestamp = Infinity
|
||||||
|
let maxTimestamp = -Infinity
|
||||||
|
|
||||||
|
// Single pass through events to calculate all stats efficiently
|
||||||
|
for (const event of traceEvents) {
|
||||||
|
// Count phase types
|
||||||
|
eventsByPhase[event.ph] = (eventsByPhase[event.ph] || 0) + 1
|
||||||
|
|
||||||
|
// Track processes and threads
|
||||||
|
processes.add(event.pid)
|
||||||
|
threads.add(`${event.pid}:${event.tid}`)
|
||||||
|
|
||||||
|
// Track time range (only for events with valid timestamps)
|
||||||
|
if (event.ts > 0) {
|
||||||
|
minTimestamp = Math.min(minTimestamp, event.ts)
|
||||||
|
maxTimestamp = Math.max(maxTimestamp, event.ts)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle case where no valid timestamps were found
|
||||||
|
if (minTimestamp === Infinity) {
|
||||||
|
minTimestamp = 0
|
||||||
|
maxTimestamp = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const duration = maxTimestamp - minTimestamp
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalEvents: traceEvents.length,
|
||||||
|
eventsByPhase,
|
||||||
|
timeRange: {
|
||||||
|
start: minTimestamp,
|
||||||
|
end: maxTimestamp,
|
||||||
|
duration: duration
|
||||||
|
},
|
||||||
|
processCount: processes.size,
|
||||||
|
threadCount: threads.size,
|
||||||
|
metadata: {
|
||||||
|
source: metadata.source,
|
||||||
|
startTime: metadata.startTime,
|
||||||
|
hardwareConcurrency: metadata.hardwareConcurrency
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
27
tsconfig.app.json
Normal file
27
tsconfig.app.json
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
25
tsconfig.node.json
Normal file
25
tsconfig.node.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
161
types/trace.ts
Normal file
161
types/trace.ts
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
/**
|
||||||
|
* Chrome DevTools Performance Trace Format
|
||||||
|
* Based on the Trace Event Format specification
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Main trace file structure
|
||||||
|
export interface TraceFile {
|
||||||
|
metadata: TraceMetadata
|
||||||
|
traceEvents: TraceEvent[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Metadata section
|
||||||
|
export interface TraceMetadata {
|
||||||
|
source: string
|
||||||
|
startTime: string
|
||||||
|
hardwareConcurrency: number
|
||||||
|
dataOrigin: string
|
||||||
|
modifications: TraceModifications
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TraceModifications {
|
||||||
|
entriesModifications: {
|
||||||
|
hiddenEntries: unknown[]
|
||||||
|
expandableEntries: unknown[]
|
||||||
|
}
|
||||||
|
initialBreadcrumb: {
|
||||||
|
window: {
|
||||||
|
min: number
|
||||||
|
max: number
|
||||||
|
range: number
|
||||||
|
}
|
||||||
|
child: null | unknown
|
||||||
|
}
|
||||||
|
annotations: {
|
||||||
|
entryLabels: unknown[]
|
||||||
|
labelledTimeRanges: unknown[]
|
||||||
|
linksBetweenEntries: unknown[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Base trace event structure
|
||||||
|
export interface BaseTraceEvent {
|
||||||
|
/** Event arguments - varies by event type */
|
||||||
|
args: Record<string, unknown>
|
||||||
|
/** Category */
|
||||||
|
cat: string
|
||||||
|
/** Event name */
|
||||||
|
name: string
|
||||||
|
/** Phase type */
|
||||||
|
ph: TraceEventPhase
|
||||||
|
/** Process ID */
|
||||||
|
pid: number
|
||||||
|
/** Thread ID */
|
||||||
|
tid: number
|
||||||
|
/** Timestamp in microseconds */
|
||||||
|
ts: number
|
||||||
|
/** Thread timestamp in microseconds (optional) */
|
||||||
|
tts?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// Specific event types
|
||||||
|
export interface MetadataEvent extends BaseTraceEvent {
|
||||||
|
ph: 'M'
|
||||||
|
args: {
|
||||||
|
name?: string
|
||||||
|
uptime?: string
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DurationEvent extends BaseTraceEvent {
|
||||||
|
ph: 'X'
|
||||||
|
/** Duration in microseconds */
|
||||||
|
dur: number
|
||||||
|
/** Thread duration in microseconds (optional) */
|
||||||
|
tdur?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InstantEvent extends BaseTraceEvent {
|
||||||
|
ph: 'I'
|
||||||
|
/** Scope (optional) */
|
||||||
|
s?: 't' | 'p' | 'g'
|
||||||
|
/** Layer tree ID (optional) */
|
||||||
|
layerTreeId?: number
|
||||||
|
/** Layer ID (optional) */
|
||||||
|
layerId?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BeginEvent extends BaseTraceEvent {
|
||||||
|
ph: 'B'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EndEvent extends BaseTraceEvent {
|
||||||
|
ph: 'E'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Union type for all trace events
|
||||||
|
export type TraceEvent = MetadataEvent | DurationEvent | InstantEvent | BeginEvent | EndEvent
|
||||||
|
|
||||||
|
// Phase type enumeration
|
||||||
|
export type TraceEventPhase =
|
||||||
|
| 'M' // Metadata
|
||||||
|
| 'X' // Complete (duration)
|
||||||
|
| 'I' // Instant
|
||||||
|
| 'B' // Begin
|
||||||
|
| 'E' // End
|
||||||
|
| 'D' // Deprecated
|
||||||
|
| 'b' // Nestable start
|
||||||
|
| 'e' // Nestable end
|
||||||
|
| 'n' // Nestable instant
|
||||||
|
| 'S' // Async start
|
||||||
|
| 'T' // Async instant
|
||||||
|
| 'F' // Async end
|
||||||
|
| 'P' // Sample
|
||||||
|
| 'C' // Counter
|
||||||
|
| 'R' // Mark
|
||||||
|
|
||||||
|
// Common argument types found in trace events
|
||||||
|
export interface TracingStartedArgs {
|
||||||
|
data: {
|
||||||
|
frameTreeNodeId: number
|
||||||
|
frames: Array<{
|
||||||
|
frame: string
|
||||||
|
isInPrimaryMainFrame: boolean
|
||||||
|
isOutermostMainFrame: boolean
|
||||||
|
name: string
|
||||||
|
processId: number
|
||||||
|
url: string
|
||||||
|
}>
|
||||||
|
persistentIds: boolean
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateLayerArgs {
|
||||||
|
layerId: number
|
||||||
|
layerTreeId: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NeedsBeginFrameChangedArgs {
|
||||||
|
data: {
|
||||||
|
needsBeginFrame: number
|
||||||
|
}
|
||||||
|
layerTreeId: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RunTaskArgs {
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
// Thread and process name arguments
|
||||||
|
export interface ThreadNameArgs {
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProcessNameArgs {
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProcessUptimeArgs {
|
||||||
|
uptime: string
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user