https://github.com/dmk/tp-tree-viewer
https://github.com/dmk/tp-tree-viewer
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dmk/tp-tree-viewer
- Owner: dmk
- Created: 2025-06-22T18:02:48.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-22T18:24:41.000Z (12 months ago)
- Last Synced: 2025-06-22T19:30:52.724Z (12 months ago)
- Language: TypeScript
- Size: 41 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TP Tree Viewer
A modern React-based web interface for visualizing Ruby method call trees generated by the `tp_tree` gem.
## Features
- 🌳 **Interactive Tree View**: Expand/collapse nodes, click to view details
- 🎨 **Syntax Highlighting**: Color-coded by depth with timing information
- 📊 **Detailed Inspector**: View method parameters, return values, and timing
- 📁 **File Upload**: Upload JSON files via drag & drop or file picker
- ⚡ **Fast Performance**: Built with Vite and React for speed
## Quick Start
```bash
# Install dependencies
bun install
# Start development server
bun run dev
# Build for production
bun run build
# Preview production build
bun run preview
```
## Usage
1. **Generate trace data** from your Ruby code:
```ruby
require 'tp_tree'
TPTree.catch(write_to: 'trace.json') do
# Your Ruby code here
some_method_call
end
```
2. **Open the web app** in your browser (usually http://localhost:5173 in dev mode)
3. **Upload your trace.json file** using drag & drop or the file picker
## Ruby Integration
Make sure your Ruby code exports to JSON format:
```ruby
require 'tp_tree'
# Generate JSON file
TPTree.catch(write_to: 'trace.json') do
# Your traced code here
MyClass.new.complex_method(arg1, arg2)
end
```
## Data Format
The app expects JSON in this format:
```json
{
"version": "1.0.0",
"timestamp": "2024-01-01T00:00:00Z",
"events": [
{
"event": "call",
"method_name": "method_name",
"parameters": [...],
"return_value": null,
"depth": 0,
"defined_class": "ClassName",
"path": "/path/to/file.rb",
"lineno": 10,
"start_time": 1234567890.123,
"end_time": 1234567890.456,
"duration": 0.333
}
]
}
```
## Deployment
Build the static files and serve them from any web server:
```bash
bun run build
# Serve the dist/ directory
```