Skip to content

Commit f48d060

Browse files
FindHaofacebook-github-bot
authored andcommitted
Enhance README and UI to support NDJSON and compressed file formats (#9)
Summary: Updated the README to clarify that trace logs are generated in NDJSON format and added documentation for supported file formats. Enhanced the DataSourceSelector and WelcomeScreen components to accept NDJSON and .gz files, updating error messages and file input prompts accordingly. - README.md: Specify NDJSON trace logs and supported file formats. - New docs/README.md: Add documentation structure and screenshots. - DataSourceSelector.tsx: Update file type validation and input acceptance. - WelcomeScreen.tsx: Modify prompts to reflect support for NDJSON and compressed files. Pull Request resolved: #9 Reviewed By: xuzhao9 Differential Revision: D75914353 Pulled By: FindHao fbshipit-source-id: 00a7ed88aecc57fe5a3ad59323750be5d5e96268
1 parent 3c9db58 commit f48d060

File tree

8 files changed

+75
-34
lines changed

8 files changed

+75
-34
lines changed

README.md

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ def your_kernel():
104104
pass
105105

106106
compiled_kernel = torch.compile(your_kernel)
107-
result = compiled_kernel() # This will generate trace logs in ./logs/
107+
result = compiled_kernel() # This will generate NDJSON trace logs in ./logs/
108108

109109
# The trace files can then be analyzed using the web interface
110110
```
@@ -115,9 +115,29 @@ result = compiled_kernel() # This will generate trace logs in ./logs/
115115

116116
**Visit [https://pytorch-labs.github.io/tritonparse/](https://pytorch-labs.github.io/tritonparse/)** to use the tool directly in your browser:
117117

118-
1. **Open your local trace file** directly in the browser
118+
1. **Open your local trace file** (NDJSON or .gz format) directly in the browser
119119
2. **Explore the visualization** using the Overview and Code Comparison tabs
120120

121+
**Supported File Formats:**
122+
- `.ndjson` - Newline Delimited JSON trace files
123+
- `.gz` - Gzip compressed trace files
124+
125+
#### Interface Overview
126+
127+
Once you load a trace file, you'll see the main interface with several key components:
128+
129+
**Kernel Overview & Details:**
130+
131+
![Kernel Overview](docs/screenshots/kernel-overview.png)
132+
133+
*The main interface showing the kernel list, compilation metadata, call stack, and navigation links to different IR representations.*
134+
135+
**Code Comparison View:**
136+
137+
![Code Comparison](docs/screenshots/code-comparison.png)
138+
139+
*Side-by-side comparison of different IR stages (e.g., TTGIR and PTX) with synchronized line highlighting and interactive navigation.*
140+
121141
#### Option B: Local Development (For Contributors)
122142

123143
For contributors working on the website:
@@ -154,6 +174,9 @@ tritonparse/
154174
│ ├── package.json # Node.js dependencies
155175
│ ├── vite.config.ts # Vite configuration
156176
│ └── dist/ # Built application (after build)
177+
├── docs/ # Documentation and assets
178+
│ ├── README.md # Documentation guidelines
179+
│ └── screenshots/ # Screenshots for README
157180
├── tests/ # Test files and example traces
158181
│ ├── test_add.py # Example Triton kernel test
159182
│ ├── unit_tests.py # Unit tests
@@ -243,12 +266,6 @@ Each stage can be inspected and compared to understand optimization transformati
243266
tritonparse.structured_logging.init("/custom/log/path/")
244267
```
245268

246-
### Source Mapping Extraction
247-
248-
```bash
249-
python tritonparse/extract_source_mappings.py input.ndjson output_mapped.ndjson
250-
```
251-
252269
## 🤝 Contributing
253270

254271
1. Fork the repository

docs/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Documentation
2+
3+
This directory contains documentation assets for the TritonParse project.
4+
5+
## Directory Structure
6+
7+
```
8+
docs/
9+
├── README.md # This file
10+
└── screenshots/ # Screenshots for README and documentation
11+
├── kernel-overview.png # Main interface with kernel list and details
12+
└── code-comparison.png # Code comparison view
13+
```

docs/screenshots/code-comparison.png

1.52 MB
Loading

docs/screenshots/kernel-overview.png

884 KB
Loading

website/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Triton Parse</title>
7+
<title>TritonParse</title>
88
</head>
99
<body>
1010
<div id="root"></div>

website/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ function App() {
353353
}}
354354
title="Back to home"
355355
>
356-
Triton Parse
356+
TritonParse
357357
</h1>
358358

359359
{/* Data source selector (only show when data is loaded or when on the welcome screen) */}

website/src/components/DataSourceSelector.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from 'react';
1+
import { useState } from "react";
22

33
interface DataSourceSelectorProps {
44
onFileSelected: (file: File) => void;
@@ -9,32 +9,34 @@ interface DataSourceSelectorProps {
99
/**
1010
* Component for selecting data sources - either local file or URL
1111
*/
12-
const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
13-
onFileSelected,
14-
onUrlSelected,
15-
isLoading
16-
}) => {
12+
const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ onFileSelected, onUrlSelected, isLoading }) => {
1713
const [showUrlInput, setShowUrlInput] = useState(false);
18-
const [url, setUrl] = useState('');
14+
const [url, setUrl] = useState("");
1915
const [error, setError] = useState<string | null>(null);
2016

2117
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
2218
const files = e.target.files;
2319
if (files && files.length > 0) {
2420
const file = files[0];
25-
if (file.type === 'application/json' || file.name.endsWith('.json')) {
21+
22+
// Support NDJSON and compressed files only
23+
const fileName = file.name.toLowerCase();
24+
const isValidFile =
25+
fileName.endsWith(".ndjson") || fileName.endsWith(".gz") || file.type === "application/x-ndjson";
26+
27+
if (isValidFile) {
2628
setError(null);
2729
onFileSelected(file);
2830
} else {
29-
setError('Please select a JSON file');
31+
setError("Please select an NDJSON or compressed file");
3032
}
3133
}
3234
};
3335

3436
const handleUrlSubmit = (e: React.FormEvent) => {
3537
e.preventDefault();
3638
if (!url.trim()) {
37-
setError('Please enter a URL');
39+
setError("Please enter a URL");
3840
return;
3941
}
4042

@@ -44,7 +46,7 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
4446
setError(null);
4547
onUrlSelected(url);
4648
} catch (err) {
47-
setError('Please enter a valid URL');
49+
setError("Please enter a valid URL");
4850
}
4951
};
5052

@@ -56,7 +58,7 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
5658
<label
5759
htmlFor="fileInput"
5860
className={`inline-flex items-center px-4 py-2 border border-gray-300 rounded-md font-medium text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer ${
59-
isLoading ? 'opacity-50 cursor-not-allowed' : ''
61+
isLoading ? "opacity-50 cursor-not-allowed" : ""
6062
}`}
6163
>
6264
{/* SVG icon representing a paperclip/attachment for the file upload button */}
@@ -72,12 +74,12 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
7274
clipRule="evenodd"
7375
/>
7476
</svg>
75-
Open Local JSON
77+
Open Local File
7678
</label>
7779
<input
7880
type="file"
7981
id="fileInput"
80-
accept=".json,application/json"
82+
accept=".ndjson,.gz,application/x-ndjson,application/gzip"
8183
onChange={handleFileChange}
8284
disabled={isLoading}
8385
className="hidden"
@@ -89,7 +91,7 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
8991
type="button"
9092
onClick={() => setShowUrlInput(!showUrlInput)}
9193
className={`inline-flex items-center px-4 py-2 border border-gray-300 rounded-md font-medium text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
92-
isLoading ? 'opacity-50 cursor-not-allowed' : ''
94+
isLoading ? "opacity-50 cursor-not-allowed" : ""
9395
}`}
9496
disabled={isLoading}
9597
>
@@ -118,14 +120,14 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
118120
type="url"
119121
value={url}
120122
onChange={(e) => setUrl(e.target.value)}
121-
placeholder="Enter JSON file URL"
123+
placeholder="Enter NDJSON file URL"
122124
className="flex-1 p-2 border border-gray-300 rounded-l-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
123125
disabled={isLoading}
124126
/>
125127
<button
126128
type="submit"
127129
className={`inline-flex items-center px-4 py-2 border border-transparent rounded-r-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
128-
isLoading ? 'opacity-50 cursor-not-allowed' : ''
130+
isLoading ? "opacity-50 cursor-not-allowed" : ""
129131
}`}
130132
disabled={isLoading}
131133
>

website/src/components/WelcomeScreen.tsx

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,24 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ loadDefaultData, handleFi
1414
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
1515
const files = e.target.files;
1616
if (files && files.length > 0) {
17-
handleFileSelected(files[0]);
17+
const file = files[0];
18+
19+
// Support NDJSON and compressed files only
20+
const fileName = file.name.toLowerCase();
21+
const isValidFile = fileName.endsWith(".ndjson") || fileName.endsWith(".gz");
22+
23+
if (isValidFile) {
24+
handleFileSelected(file);
25+
}
1826
}
1927
};
2028

2129
return (
2230
<div className="flex flex-col items-center justify-center px-4 py-16 max-w-4xl mx-auto text-center">
23-
<h2 className="text-2xl font-bold text-gray-800 mb-6">Welcome to Triton Parse</h2>
31+
<h2 className="text-2xl font-bold text-gray-800 mb-6">Welcome to TritonParse</h2>
2432
<p className="mb-8 text-gray-600">
25-
Load a Triton log file to analyze compiled kernels and their IR representations.
33+
Load a Triton log file to analyze compiled kernels and their IR representations. Supports NDJSON and compressed
34+
(.gz) files.
2635
</p>
2736

2837
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl mb-10">
@@ -77,12 +86,12 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ loadDefaultData, handleFi
7786
</svg>
7887
</div>
7988
<h3 className="text-lg font-medium text-gray-800 mb-2">Local File</h3>
80-
<p className="text-sm text-gray-600 mb-4">Open a Triton log file from your device</p>
89+
<p className="text-sm text-gray-600 mb-4">Open a Triton log file from your device (NDJSON or .gz)</p>
8190
<label htmlFor="welcomeFileInput" className="absolute inset-0 cursor-pointer" aria-label="Open local file" />
8291
<input
8392
type="file"
8493
id="welcomeFileInput"
85-
accept=".json,application/json"
94+
accept=".ndjson,.gz,application/x-ndjson,application/gzip"
8695
onChange={handleFileChange}
8796
className="hidden"
8897
/>
@@ -119,9 +128,9 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ loadDefaultData, handleFi
119128
</div>
120129

121130
<div className="text-sm text-gray-500 max-w-2xl">
122-
<h4 className="font-medium mb-2">About Triton Parse</h4>
131+
<h4 className="font-medium mb-2">About TritonParse</h4>
123132
<p>
124-
Triton Parse helps you analyze Triton GPU kernels by visualizing the compilation process across different IR
133+
TritonParse helps you analyze Triton GPU kernels by visualizing the compilation process across different IR
125134
stages.
126135
</p>
127136
</div>

0 commit comments

Comments
 (0)