Skip to content

Team: Andrei Markov, Grigorii Fil, Adelina Kildeeva, Albert Khazipov

License

Notifications You must be signed in to change notification settings

InnoSWP/SyntaxTreeVisualizer

Repository files navigation

Syntax Tree Visualizer 🌳

Visualizer for JavaScript code into an abstract syntax tree and a parallel array representations.


Description

Syntax Visualizer is an interactive webpage for vizualizing JavaScript code in forms of abstract syntax tree (AST) and parallel array representations. The page contains three fields: the code editor, the AST representation, and the parallel array representation. When you enter the code, the representations are immediately generated.

Demo

Watch the video

How to use?

Follow the link to use the website.

  1. Enter the code in the “code” block.
  2. The program will automatically build images of the tree and the array.
  3. You can hover on any item of tree or array to see corresponding parts of code.
  4. You can fold constant expressions (yellow nodes in tree) by clicking on them.

Examples

Features

  • ⏩ Immediate AST and parallel array generation
  • 🛠️ Code editor with syntax highlighting and code refactoring (Ctrl+Alt+L)
  • ↩️ UNDO (Ctrl+Z) and REDO (Ctrl+Y) functionality
  • 💡 Highlighting of similar parts
  • 🔗 Share the result via auto-generated URL
  • 👨‍💻 Folding of constant expressions

Installation

Manual installation

  1. Install Node.js by the following link nodejs.org
  2. Clone the repository
git clone https://github.com/InnoSWP/SyntaxTreeVisualizer
  1. Open project folder
  2. Install dependencies
npm install
  1. Run the project in development mode
npm start

Using Docker

  1. Install Docker on your computer docker.com
  2. Pull image markovav/syntax_tree_visualizer:latest
docker pull markovav/syntax_tree_visualizer
  1. Create a container using this image
docker run -p 80:3000 -d --name syntax-tree-visualizer markovav/syntax_tree_visualizer

Contribution

To contribute to the project, create a pull request with a detailed explanation, written tests, and no SonarCloud alerts.

Frameworks used

References

[1] Aaron W. Hsu, "The key to a data parallel compiler | Proceedings of the 3rd ACM SIGPLAN International Workshop on Libraries, Languages, and Compilers for Array Programming", 2016. [Online]. Available: https://dl.acm.org/doi/10.1145/2935323.2935331 [Accessed: May 27, 2022]

About

Team: Andrei Markov, Grigorii Fil, Adelina Kildeeva, Albert Khazipov

Resources

License

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •