innoswp / syntax-tree-visualization Goto Github PK

User story

As a user I want to see syntax array view so I understand its properties

Acceptance criteria

Acceptance criteria:
Given: I'm a user on the main page
When: I want to see SA of the code
Then: I see SA of that code

User story

As a user I want to see general information about project and contacts of the developers so that I can understand purporse of this web site and contact if I encounter any bugs

Acceptance criteria

Fully implemented:

• Export to SVG
• Export to LaTeX
• Export to Graphviz
  Web site contains buttons for exproting to all this formats

Acceptance criteria

• • Given code of the program in JavaScript build corresponding AST save it as json

Acceptance criteria:
Given: I'm a user on the main page
When: I want to see AST of the code
Then: I see AST of that code

User story

As a user I want to see general information about project and contacts of the developers so that I can understand purporse of this web site and contact if I encounter any bugs

Estimation of effort

TBD

Acceptance criteria

• Pop up window with general information is available and contains link to GitHub repository of the project
• Button for toggling this pop up window

User story

As a user I want to be able to fold constant expressions so that I can understand how it works in real compilars

Acceptance criteria

User is able to fold all the constant expressions under specified node

User story

As a user I want to be able to drag and drop nodes in the graph view so that code changes

Acceptance criteria

User is able to:

• Move nodes to some appropriate places
• Move subtree to some appropriate places

Acceptance cirteria:

• Integration of jest framework
• Write tests for all backend components
  • AST
  • SA
  • Controllers

User story

As a user I want to have an ability to edit the code so that I can see changes in syntax tree and array

Acceptance criteria

Given: I'm a user on the main page of the app
When: I want to edit the code
Then: I can edit the code, see syntax highlighting and syntax errors

User story

As a user I want to see code highlighting so its easier to write code

Acceptance criteria

Editor has code hilighting

Acceptance criteria:
Given: I'm a user on the main page
When: I change code in code editor
Then: AST and SA rebuild dynamically as I change code

Think how it should look like on different screes:

• Ultra wide
• 3:4
• Different scaling

User story

As a user I want to see friendly interface so its easy to work with web site

Acceptance criteria

Completed design of the app:

• Color pallet
• Animations
• Fonts

User story

As a user I want to have an ability to select languages in code editor so that I can choose language that serves my needs

Acceptance criteria

• Ability to change language and fully work with it
• Button for choosing language

Estimation of effort

TBD

Acceptance criteria

Fully functional text editor is visible in the 1st column of the app. User can edit code in it

• Decide on formats of the messages
• Implement the way to send and get needed data

User story

As a user I want to see interactive tutorial so I can understand all the features of the web site I'm using

Acceptance criteria

Interactive tutorial covers all functionality of the project:

• Code editor
• Syntax tree and array view
• Sharing and general information about project

User story

As a user I want to see additional information about the node so I can understand its properties

Additional information

Decide how to show additional information(or):

• Hover over node
• Click on the node and select this option in drop down menu

Acceptance criteria

Given: I'm the user on the main page
When: I hover over the node
Then: I see meta data of that node

User story

As a user I want to be able to open graph and array view in the full screen so that I can explore them in more detail

Acceptance criteria

Full screen option is implemented for

• Both graph and array view
• Only graph view
• Only array view
• Buttons for all this options

User story

As a user I want to share web page by link so I can save the result and share it with others

Acceptance criteria

• Sharing by link is fully implemented
• Web page has button for sharing

User story

As a user I want to see highlighting of corresponding elements (code block, tree node and array) element if hovering over any one of them so its easier to compare different represenations

Acceptance criteria

• Hovering over code block/tree node/array entry highlights it and corresponding elements in remaining representations

User Story

As a user I want to have live syntax checker in code editor so it is easier for editing

Acceptance criteria

• Code editor has syntax checker