Visualising Changes With Semantic Git Differences
Tags: codereview, github, gitdiff, semantic
Published: 2021-07-30 16:52:12

_Yay – you receive a notification for a code review in a pull request on GitHub. You open the files changed tab on GitHub and there it is: a basic UI showing you nothing more than a git diff. Surely, there is a better way to look at the changes, including comments, and navigate to them, right?_

**`git diff`** is a great tool used by millions of developers every day. One of the ways developers consume it is through the UI of GitHub, GitLab, or Bitbucket when you doing a code review.

**Unfortunately, what you see is literally what you get out of the git command.**

For example, here is what you see on [GitHub.com](http://github.com) for the following pull request of the [google/guava](https://github.com/google/guava) project:

{% youtube _5GZSyv_K04 %}
<figcaption>Files changes in google/guava – #3304 Unhandled overflow in the concat() method of per-type primitive utility classes</figcaption>

We believe that in 2021, developers deserve better than having to exhaustively check textual diffs and try to reverse engineer the context of the changes.

So we have incorporated into Reviewpad a special diff operation that captures an overview of the changes at the semantic level:

![Reviewpad’s Explore Tree. Try our beta](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onamf2rfai8l2x8f3v8g.jpg)
<figcaption>Reviewpad’s Explore Tree. Try our beta at beta.reviewpad.com.</figcaption>

The Explore Tree was designed to immediately answer the following questions:

*   From the list of modified files, which have changes that involve semantic changes and how many changes occurred?
*   Which semantic objects (e.g. methods and classes in Java) were modified and which type of modification (added, removed, or changed)?
*   Which files or symbols contain comments?

Answering these questions has saved us a lot of review time as the tree also acts as an index into the diff, and allows us to navigate directly into it.

{% youtube 2o0SYdju1yo %}
<figcaption>Interactions with the Explore Tree for Google / Guava – #3304 Unhandled overflow in the concat() method of per-type primitive utility classes. Check it out on beta.reviewpad.com/review/github.com/google/guava/pull/3304.</figcaption>

In order to compute the Explore Tree, Reviewpad performs a semantic diff of two versions of the file, restricted only to the hunks associated with the git diff. From there, the challenge is to understand which symbol (function, method, class, type, etc) is associated with this change. We’ll write more details about the analyser in a future post. 😉

## Cool. How do I check this out by myself?

We have a public beta version of Reviewpad available at [beta.](https://beta.reviewpad.com)[reviewpad.com](https://beta.reviewpad.com). You will need to create a new account and once you log in for the first time, you will see the following page to connect to a code host:

![Connect to code host page on Reviewpad.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nq7sortt5dfkk06exgtx.png)
<figcaption>Connect to code host page on Reviewpad.</figcaption>

You can connect to GitHub through our OAuth app or manually [add a personal access token](https://docs.reviewpad.com/github). The OAuth requires minimal scopes to be able to read and comment on public repositories.

**And voilà – you are ready to get started with Reviewpad!**

Our semantic analysis works for more than 10 languages including: C, C++, C#, Go, Haskell, Java, Javascript, Proto, Python, Ruby, Rust, Swift and TypeScript.

We are adding more and more open source projects in different languages so that you can check it out easily. Feel free to reach us on our [community Slack](https://reviewpad.com/slack) with requests!