A sophisticated performance monitoring dashboard for Tenstorrent's TT-Metal TTNN eltwise operations, providing day-by-day performance analysis, trend tracking, and comprehensive operation categorization.
🔗 ttnn-eltwise-performance.aswincloud.com
The Tenstorrent TT-Metal Eltwise Performance Tracker is an advanced React-based dashboard designed to monitor and analyze the performance of TTNN (Tenstorrent Neural Network) eltwise operations. Built specifically for Tenstorrent's TT-Metal framework, this tool provides insights into operation performance trends, comparative analysis, and comprehensive filtering capabilities.
- 📊 Day-by-Day Performance Comparison - Track performance metrics across multiple dates with baseline comparisons
- 🔍 Advanced Filtering System - 13 granular operation categories with collapsible checkbox filtering
- 📈 Trend Analysis - Visual indicators for performance improvements and degradations
- ⚡ Unit Conversion - Dynamic switching between ns, μs, ms, and seconds with appropriate precision
- 📝 Git Commit Correlation - Link performance changes to specific code commits
- 🎨 Color-Coded Performance - Green for improvements, red for degradations with percentage changes
- 📱 Responsive Design - Modern UI with sticky columns and horizontal scrolling support
- 🔄 Real-time Data Loading - Automatic data fetching and processing
- 📧 Self-Service Email Alerts - Subscribe with your own improvement/degradation thresholds; tailored daily emails via a Cloudflare Worker + Resend
| Technology | Version | Purpose |
|---|---|---|
| React | 19 | Frontend framework |
| Vite | 7 | Build tool and dev server |
| Tailwind CSS | 4 | Utility-first CSS framework |
| Recharts | 3 | Data visualization library |
| Cloudflare Workers | Latest | Deployment platform |
- Node.js 20 (see
.nvmrc;nvm usewill pick it up) - npm or yarn
- Git
# Clone the repository
git clone https://github.com/Aswincloud/ttnn-performance-dashboard.git
cd ttnn-performance-dashboard
# Install dependencies
npm install
# Start development server
npm run dev# Run development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lintThe dashboard tracks 262 TTNN eltwise operations across 6 main categories:
- Arithmetic:
add,subtract,multiply,divide - Activations:
relu,gelu,sigmoid,tanh,silu,celu - Mathematical:
sqrt,exp,log,reciprocal - Comparisons:
gt,lt,eq,ne,ge,le - Logical:
logical_and,logical_or,logical_not
- Unary Operations: 99 operations
- Binary Operations: 62 operations
- Ternary Operations: 5 operations
- Reduction Operations: 9 operations
- Backward Operations: 80 operations
- Complex Operations: 7 operations
Test Coverage: 262/262 operations (100%)
ttnn-performance-dashboard/
├── 📁 src/
│ ├── 📄 App.jsx # Main application component
│ ├── 📄 main.jsx # Application entry point
│ ├── 📄 index.css # Global styles
│ ├── 📁 components/
│ │ ├── 📄 OverviewCards.jsx # Performance summary cards
│ │ ├── 📄 PerformanceTable.jsx # Main data table with filtering
│ │ ├── 📄 TrendLineChart.jsx # Performance visualization
│ │ ├── 📄 CatalogModal.jsx # Operations catalog dialog
│ │ ├── 📄 SubscribeModal.jsx # Email-alert signup dialog
│ │ └── 📄 AdminSubscribersModal.jsx # Admin subscriber view
│ └── 📁 utils/
│ ├── 📄 dataLoader.js # Data fetching utilities
│ └── 📄 operationsCatalog.js # Operations categorization
├── 📁 worker/ # Cloudflare Worker (alert API + cron)
│ ├── 📄 index.js # fetch router + scheduled handler
│ ├── 📄 alerts.js # Daily comparison/alert engine
│ ├── 📄 db.js # D1 helpers
│ ├── 📄 email.js # Resend email builders
│ └── 📄 validate.js # Input validation
├── 📁 migrations/ # D1 schema (subscribers + meta)
├── 📁 data/ # Performance data files
│ ├── 📄 index.json # Data index
│ ├── 📁 daily/ # Daily performance results
│ └── 📁 latest/ # Latest performance data
├── 📁 docs/ # Extended documentation
├── 📁 public/ # Static assets
├── 📄 package.json # Dependencies and scripts
├── 📄 eslint.config.js # ESLint (flat) config
├── 📄 vite.config.js # Vite configuration
├── 📄 tailwind.config.js # Tailwind CSS configuration
└── 📄 wrangler.toml # Cloudflare Workers config
# Optional: Custom API endpoints
VITE_API_BASE_URL=https://your-api.comThe dashboard expects JSON files in the following structure:
{
"timestamp": "2025-07-17T04:21:52.123Z",
"commit_id": "abc123def456",
"results": {
"operation_name": {
"performance_ns": 1234.56,
"category": "unary"
}
}
}# Build and deploy
npm run build
npx wrangler deploy- Vercel:
npm run build && vercel --prod - Netlify:
npm run build && netlify deploy --prod --dir=dist
- Sticky Operation Column: Operations remain visible during horizontal scrolling
- Dynamic Unit Conversion: Switch between nanoseconds, microseconds, milliseconds, and seconds
- Baseline Comparison: First column serves as performance baseline with color-coded improvements/degradations
- Trend Indicators: Arrows showing day-over-day performance changes
- Commit Correlation: Git commit IDs displayed below each date column
- Collapsible Categories: Organized into Forward and Backward operations
- Multiple Selection: Checkbox-based filtering with select all/none functionality
- Performance Sorting: "Most Improved" and "Most Degraded" based on latest changes
- Category-based Organization: 13 granular categories for precise filtering
- Color-coded Performance: Green = improvement, Red = degradation
- Percentage Changes: Quantified performance differences
- Direction Indicators: Up/down arrows for quick trend identification
- Historical Context: Multi-day performance tracking
We welcome contributions! Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow React best practices and hooks patterns
- Use Tailwind CSS for styling
- Maintain component modularity
- Add JSDoc comments for complex functions
- Ensure responsive design compatibility
- JSON files should follow the established schema
- Include commit IDs for change correlation
- Use consistent timestamp formatting
- Validate data structure before committing
Anyone can subscribe to email alerts and pick their own thresholds — separately for improvements and degradations. Each confirmed subscriber gets a tailored daily email listing only the operations that crossed their thresholds.
- Self-service signup: the Get Alerts button on the dashboard
- Per-subscriber thresholds: independent improvement % and degradation %
- Double opt-in: confirmation email first; every alert has an unsubscribe link
- Runs on Cloudflare: Worker + D1 + daily Cron Trigger, sending via Resend — no GitHub Actions involvement
📖 Complete Alert Documentation · Operator Setup
- Create the D1 database and apply
migrations/0001_init.sql - Set
RESEND_API_KEY+FROM_EMAILas Cloudflare Worker secrets wrangler deploy— the cron registers automatically
See SETUP_ALERTS.md for the exact commands.
- Performance Alerting - Email notifications for significant performance regressions
- Real-time Data Updates - WebSocket integration for live performance monitoring
- Historical Analysis - Extended trend analysis with configurable date ranges
- Export Functionality - CSV/PDF export for performance reports
- Comparison Tools - Side-by-side operation performance comparisons
- API Integration - Direct integration with TT-Metal performance testing infrastructure
- Custom Dashboards - User-configurable dashboard layouts and metrics
This project is licensed under the MIT License - see the LICENSE file for details.
- Tenstorrent Team - For the amazing TT-Metal framework and TTNN operations
- React Community - For the robust ecosystem and best practices
- Tailwind CSS - For the utility-first CSS framework
- Recharts - For beautiful and responsive data visualizations
- 📧 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
- 🌐 Live Demo: ttnn-eltwise-performance.aswincloud.com
Built with ❤️ for the Tenstorrent Community
