|
| 1 | +# Omnigraph: 3D Codebase Visualization |
| 2 | + |
| 3 | +A powerful desktop application for visualizing code dependencies and relationships as interactive 3D force-directed graphs. Built with Rust, Tauri, and Three.js to escape the limitations of VS Code's restrictive webview environment. |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | +## 🚀 Overview |
| 10 | + |
| 11 | +Omnigraph transforms your codebase into an interactive 3D visualization, helping you understand complex dependencies, identify architectural patterns, and navigate large projects with ease. Originally conceived as a VS Code extension, it has evolved into a standalone desktop application powered by Rust and Tauri for maximum performance and freedom. |
| 12 | + |
| 13 | +## ✨ Features |
| 14 | + |
| 15 | +- **🎨 Interactive 3D Visualization**: Navigate your codebase in a beautiful force-directed 3D graph |
| 16 | +- **⚡ Rust-Powered Parsing**: Lightning-fast AST parsing with tree-sitter for JavaScript, TypeScript, and Python |
| 17 | +- **📊 Real-time Progress**: Visual feedback during parsing with percentage completion |
| 18 | +- **🔍 Smart Filtering**: Automatically handles unresolved imports and external dependencies |
| 19 | +- **📐 Responsive Canvas**: Automatic resizing and optimal rendering on any screen size |
| 20 | +- **🔄 Hot Reset**: Quick reset functionality for testing and debugging |
| 21 | +- **🎯 Node Details**: Click nodes to see file paths, metrics, and relationships |
| 22 | + |
| 23 | +## 📦 Installation |
| 24 | + |
| 25 | +### Prerequisites |
| 26 | + |
| 27 | +- [Node.js](https://nodejs.org/) (v16 or higher) |
| 28 | +- [pnpm](https://pnpm.io/) (recommended) or npm |
| 29 | +- [Rust](https://rustup.rs/) (latest stable) |
| 30 | +- [Tauri Prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites) |
| 31 | + |
| 32 | +### Quick Start |
| 33 | + |
| 34 | +```bash |
| 35 | +# Clone the repository |
| 36 | +git clone https://github.com/yourusername/omnigraph.git |
| 37 | +cd omnigraph |
| 38 | + |
| 39 | +# Install dependencies |
| 40 | +pnpm install |
| 41 | + |
| 42 | +# Run in development mode |
| 43 | +pnpm tauri:dev |
| 44 | + |
| 45 | +# Build for production |
| 46 | +pnpm tauri:build |
| 47 | +``` |
| 48 | + |
| 49 | +### Linux/Wayland Users |
| 50 | + |
| 51 | +If you're using Wayland (especially with Hyprland), the app includes compatibility flags in the `pnpm tauri:dev` command. These are automatically applied. |
| 52 | + |
| 53 | +## 🎮 Usage |
| 54 | + |
| 55 | +1. **Launch the Application**: Run `pnpm tauri:dev` or use the built executable |
| 56 | +2. **Parse a Codebase**: Click "📁 Parse Codebase" and select your project directory |
| 57 | +3. **Generate Graph**: Click "🎨 Generate Graph" to visualize the parsed data |
| 58 | +4. **Explore**: |
| 59 | + - Rotate: Left-click and drag |
| 60 | + - Zoom: Scroll wheel |
| 61 | + - Pan: Right-click and drag |
| 62 | + - Node Info: Click on any node to focus |
| 63 | +5. **Reset**: Click "🗑️ Reset App" to clear and start fresh |
| 64 | + |
| 65 | +## 🏗️ Architecture |
| 66 | + |
| 67 | +### Technology Stack |
| 68 | + |
| 69 | +- **Backend**: Rust with Tauri framework |
| 70 | +- **Parser**: Tree-sitter for language-agnostic AST parsing |
| 71 | +- **Graph Engine**: Petgraph for graph algorithms |
| 72 | +- **Frontend**: TypeScript with Three.js |
| 73 | +- **3D Rendering**: 3d-force-graph for WebGL visualization |
| 74 | +- **Build System**: Vite for frontend, Cargo for Rust |
| 75 | + |
| 76 | +### Supported Languages |
| 77 | + |
| 78 | +- ✅ JavaScript (.js, .jsx) |
| 79 | +- ✅ TypeScript (.ts, .tsx) |
| 80 | +- ✅ Python (.py) |
| 81 | +- 🔜 Rust (.rs) - Coming soon |
| 82 | +- 🔜 Go (.go) - Planned |
| 83 | +- 🔜 Java (.java) - Planned |
| 84 | + |
| 85 | +## 🛠️ Development |
| 86 | + |
| 87 | +### Project Structure |
| 88 | + |
| 89 | +``` |
| 90 | +omnigraph/ |
| 91 | +├── src-tauri/ # Rust backend |
| 92 | +│ ├── src/ |
| 93 | +│ │ ├── engine/ # Core parsing and graph engine |
| 94 | +│ │ └── lib.rs # Tauri commands |
| 95 | +│ └── Cargo.toml |
| 96 | +├── src/ # Frontend |
| 97 | +│ ├── main.ts # Application entry |
| 98 | +│ └── visualization/ # 3D graph components |
| 99 | +├── package.json |
| 100 | +└── README.md |
| 101 | +``` |
| 102 | + |
| 103 | +### Key Commands |
| 104 | + |
| 105 | +```bash |
| 106 | +# Development |
| 107 | +pnpm tauri:dev # Run with hot-reload |
| 108 | +pnpm test # Run tests |
| 109 | +pnpm lint # Lint code |
| 110 | + |
| 111 | +# Building |
| 112 | +cargo tauri build # Production build |
| 113 | +cargo tauri build --debug # Debug build |
| 114 | + |
| 115 | +# Platform-specific builds |
| 116 | +cargo tauri build --target x86_64-pc-windows-msvc # Windows |
| 117 | +cargo tauri build --target x86_64-apple-darwin # macOS Intel |
| 118 | +cargo tauri build --target aarch64-apple-darwin # macOS M1/M2 |
| 119 | +cargo tauri build --target x86_64-unknown-linux-gnu # Linux |
| 120 | +``` |
| 121 | + |
| 122 | +### Adding Language Support |
| 123 | + |
| 124 | +1. Add tree-sitter grammar to `Cargo.toml` |
| 125 | +2. Create parser module in `src-tauri/src/engine/parser/` |
| 126 | +3. Implement the `Parser` trait |
| 127 | +4. Register in `ParserManager` |
| 128 | + |
| 129 | +See `CLAUDE.md` for detailed development guidelines. |
| 130 | + |
| 131 | +## 🚧 Roadmap |
| 132 | + |
| 133 | +### Current Status: Alpha |
| 134 | + |
| 135 | +- [x] Core Rust parsing engine |
| 136 | +- [x] Tree-sitter integration |
| 137 | +- [x] 3D force-directed graph |
| 138 | +- [x] Progress indicators |
| 139 | +- [x] Reset functionality |
| 140 | +- [x] Responsive canvas |
| 141 | + |
| 142 | +### Next Up |
| 143 | + |
| 144 | +- [ ] Import path resolution |
| 145 | +- [ ] Neo4j integration for persistence |
| 146 | +- [ ] Graph state save/load |
| 147 | +- [ ] VS Code extension wrapper |
| 148 | +- [ ] More language parsers |
| 149 | +- [ ] Graph analytics (PageRank, centrality) |
| 150 | +- [ ] Export to various formats (JSON, GraphML) |
| 151 | + |
| 152 | +### Future Vision |
| 153 | + |
| 154 | +- [ ] AI-powered code insights |
| 155 | +- [ ] Team collaboration features |
| 156 | +- [ ] Git history visualization |
| 157 | +- [ ] Performance profiling overlay |
| 158 | +- [ ] Custom graph layouts |
| 159 | +- [ ] Plugin system |
| 160 | + |
| 161 | +## 🐛 Known Issues |
| 162 | + |
| 163 | +- Import statements to external packages create orphaned edges (filtered out) |
| 164 | +- Large codebases (>10,000 files) may take time to parse |
| 165 | +- Wayland requires X11 compatibility mode (handled automatically) |
| 166 | + |
| 167 | +See `TODO.md` for complete issue tracking. |
| 168 | + |
| 169 | +## 🤝 Contributing |
| 170 | + |
| 171 | +Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change. |
| 172 | + |
| 173 | +1. Fork the repository |
| 174 | +2. Create your feature branch (`git checkout -b feature/AmazingFeature`) |
| 175 | +3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) |
| 176 | +4. Push to the branch (`git push origin feature/AmazingFeature`) |
| 177 | +5. Open a Pull Request |
| 178 | + |
| 179 | +## 📄 License |
| 180 | + |
| 181 | +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
| 182 | + |
| 183 | +## 🙏 Acknowledgments |
| 184 | + |
| 185 | +- [Tauri](https://tauri.app/) - For the amazing desktop framework |
| 186 | +- [Tree-sitter](https://tree-sitter.github.io/) - For robust language parsing |
| 187 | +- [Three.js](https://threejs.org/) - For 3D graphics |
| 188 | +- [3d-force-graph](https://github.com/vasturiano/3d-force-graph) - For the force-directed layout |
| 189 | + |
| 190 | +## 📬 Contact |
| 191 | + |
| 192 | +Project Link: [https://github.com/yourusername/omnigraph](https://github.com/yourusername/omnigraph) |
| 193 | + |
| 194 | +--- |
| 195 | + |
| 196 | +**Built with ❤️ to escape the tyranny of VS Code's CSP restrictions** |
0 commit comments