🌳 Fortran AST/ASR JSON Visualizer

An interactive web-based visualization tool for exploring and understanding Fortran Abstract Syntax Trees (AST) and Abstract Semantic Representation (ASR). This project brings modern web technologies to Fortran development, making it easier to understand and debug Fortran code structure.

This uses LFortran for generating the AST and ASR Json from fortran code.

✨ Features

• 🎨 Interactive Visualization: Dynamic, zoomable tree visualization of AST/ASR structures
• 🔄 Real-time Updates: Instantly see changes as you modify JSON input
• 🌐 WebAssembly Integration: Powered by LFortran's WASM compilation
• 🎯 User-friendly Interface: Clean, modern UI with dark mode support
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices

🚀 Live Demo

Try it now: https://ubaidsk.github.io/fortran_ast_asr_json_visualizer/

🛠️ Setup & Installation

Prerequisites

This setups up node on your local system. Follow this if you don't have node already installed.

1. Install NVM (Node Version Manager)

   # For macOS and Linux
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
   
   # Add to your ~/.zshrc
   export NVM_DIR="$HOME/.nvm"
   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
   

2. Install Node.js

   nvm install 16
   nvm use 16
   

3. Verify Installation

   node --version
   npm --version
   

Project Setup

1. Clone the repository

   git clone https://github.com/ubaidsk/fortran_ast_asr_json_visualizer.git
   cd fortran_ast_asr_json_visualizer
   

2. Install dependencies

   npm install
   

3. Start development server

   npm start
   

4. Build for production

   npm run build
   npm run deploy
   

🔧 Technical Stack

Core Technologies

• React 18: Modern UI development with hooks and functional components
• WebAssembly: LFortran compilation for AST/ASR processing
• TailwindCSS: Utility-first CSS framework
• DaisyUI: Tailwind CSS component library

Visualization

• React Flow: Interactive node-based visualization
• Dagre: Graph layout and positioning algorithm
• Remix Icons: Modern icon library

Development Tools

• PostCSS: CSS processing and optimization
• Create React App: React application bootstrapping
• GitHub Pages: Deployment and hosting

🤝 Contributing

We welcome all contributions, big or small!

🆕 Bug/Feature Request

For reporting bugs or suggestions, please open an issue in the GitHub repository.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ for the Fortran Community