mmainguy/perfViz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1f12b143ef
perfViz/CLAUDE.md
Michael Mainguy 1f12b143ef Initial commit: Performance Trace Analyzer with comprehensive features 
🚀 Features implemented:
- IndexedDB local database for trace storage and management
- Drag & drop trace file upload with validation
- HTTP Request viewer with advanced filtering and analysis
- CDN provider detection (Cloudflare, Akamai, CloudFront, etc.)
- Queue time analysis with bottleneck detection
- Visual highlighting for file sizes and request durations
- Priority-based request analysis
- Phase event viewer with detailed trace exploration
- Filmstrip screenshot integration (with debugging)
- 3D Babylon.js viewer component

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

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

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

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

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

3.3 KiB
Raw Blame History

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