Complete a Code Review with Review Maps

Review Maps allow you to do a visual, interactive code review. As an author, you can walk your reviewers through your change with a Tour. As a reviewer, you can grasp the entire change at a glance, and review code in logical chunks. (So much better than alphabetical!)

Once Maps is installed on a repository, Review Maps will be automatically generated for every pull request made to the repository. There is also an “Install Review Maps” button on the /maps page to get you up and running.

Interacting With A Review Map

There are two ways to navigate to your Review Map and start a visual code review:

1. Click on the image in the github pull request.
2. Navigate to app.codesee.io/reviews and click on the correct pull request. (By the way, on this page you can see all your pull requests across all connected repositories!)

Click on a file to highlight its connections. Double-click to view related code (more details below). Expand and collapse folders using the arrow icons. Or zoom into and out of the Review Map by using the Zoom UI.

To access PR-related details during the review, look to the header at the top of the page. Then,

• Click the PR title or number to navigate to that PR in GitHub.
• Click the PR author to visit that user’s page in GitHub.

Code Diffs

Double-click on individual nodes in a Map to view code in a diff format. Each file gets a color swatch that indicates whether the file was added, removed, edited, renamed, or is unchanged.

Double-clicking on an “unchanged” file (the white nodes on the Map) will also display their code.

When viewing a file, any related files (files it imports, and files that import it) that remain unchanged will also be listed in the diff. Unchanged files start with all their code hidden, but can be displayed by clicking on a file header to expand/collapse that file.

To return to the full Review Map, click on the back arrow in the header.

Progress Bar

Mark sections as 'Reviewed' via the checkboxes as you move through the code review. When the checkbox is selected, nodes on the Map are displayed as “Reviewed,” and files within the diff collapse. A progress bar indicating the number of files in the PR that have been reviewed is visible in the header.

Comments

Provide feedback on reviews by placing and responding to comments. You can add comments on specific lines within the code diffs or in the pull request discussion within the side panel. Comments are instantly reflected in both the repository and in CodeSee.

Tip: you can leave comments that span multiple lines by dragging the "new comment" button up and down:

Once a code review conversation is resolved, click "Resolve conversation" to collapse the thread. You can always bring it back by expanding the thread again and clicking on "Unresolve conversation":

Mark files as viewed

When performing a code review, it can be helpful to note files that have undergone review to keep track of progress. When viewing a file diff, click the checkbox on the top right to mark the file as "Reviewed":

Submit A Code Review

Click the “Review” button in the header to make a final review comment approving, requesting changes, or commenting on the pull request.