Contify | Devpost

contify
Zoomed out view of all changes
View of related usage of added function
Support for inline commenting
Support for merging

Inspiration

We both have a lot of experience dealing with PRs and they are often a big headache. We wanted to create a visual interface that allows us to see not only the changes in the PR but also files related to those changes. Having seen HackWestern's website this year, as well as many other infinite canvas visualization tools, we thought this would be a great use case.

What it does

Contify is a CLI tool that pulls a GitHub PR, parses the patches to find the precise spans of changed code, and visualizes them in an interactive canvas UI. It can also find code across the project that references the changes in the PR, to easily see the scope of the changes made. Contify supports easy authentication with github oauth, allowing for commenting and merging within the application.

Some other neat features include:

option to automatically checkout the chosen pr
syntax highlighting
word diff highlighting
showing and linking to pr and repo related information

How we built it

We used Go to create our CLI interface and backend, and React for the front end. To find relationships not included in the diff changes, we detect the filetype and use treesitter to parse and extract relevant information of the node like its type, position and name at the diffed position then traverse up the tree to find a relevant symbol node like function, interfaces, etc. Then make requests to the respective LSP (language server protocol) with the extracted information to find references across the repo.

Challenges we ran into

A lot of UI challenges on the web app. Implementing the canvas proved to be quite difficult as there were many different types of interactions that needed to be considered. Also rendering and parsing diffs as well as creating the links between related files was also quite difficult. To get the references to work, figuring out what technologies to use was the only the first hurdle. Past that, using tree sitter to extract symbol information in the diff text and using LSP to find references of said symbols also was quite tricky to implement, especially since we didn't have any experience working with tree-sitter and LSPs prior.

Accomplishments that we're proud of

The biggest accomplishment is probably getting referencing to work.

What we learned

We learned a lot about working with git and especially all the functionality around PRs. Beyond that, we realized through this project that code editors are actually very complex under the hood, and are more than just a text editor.