Introducing the Commit Graph on DoltHub: Visualizing Commit History

WEBFEATURE RELEASE
2 min read

For those new to Dolt and DoltHub, Dolt is Git for data. Git versions files. Dolt versions SQL tables. DoltHub is a place on the internet to share Dolt databases.

We're excited to announce the release of a new DoltHub feature: the commit graph. With this new feature, you can now easily visualize your commits and understand your commit history. The commit graph displays information about branches, commits, and collaborators in a single view. You'll be able to easily identify contributions, track down specific commits, and gain valuable insights into your development process.

Comparison and Design Choices

If you're familiar with Git's commit graph or other commit graph visualization tools such as GitLens, you may be wondering how the DoltHub commit graph shows commits information. While there are similarities in terms of showing commits and branches, the DoltHub commit graph offers some unique features tailored to visualizing Dolt commits.

A GitLens commit graph:

GitLens Commit Graph

A commit graph on DoltHub with a similar commit history:

Commit Graph

We opted for straight paths for branches and branch labels on the right side to provide users with a cleaner, more streamlined view. Additionally, our commit graph is specifically designed for Dolt commits. For example, if a branch is deleted, there will not be a branch label for that branch, and commits from the deleted branch will appear on a single branch path. Similarly, if commits from a forked database are merged into the current parent database, they will be shown on the same branch path.

For those who may be unfamiliar with commit graphs, pvigier's blog offers a good introduction to methods for drawing commit graphs.

Paginated Commit Graph

We found a React rendering library for drawing commit graphs called gitgraph. While this worked well for rendering a commit graph of a set number of commits, it did not have support for pagination. Dolt databases can include a lot of commits, and we needed a way to paginate the graph.

We ended up forking gitgraph and adding support for pagination ourselves. You can check it out here.

Overview

To access the Commit Graph, navigate to the Commit Log tab and click on the "Show Commit Graph" button. This will display a visual representation of your database's commit history for the selected branch, which you can scroll through.

In the Commit Graph, each commit dot is accompanied by information such as the commit hash, author, commit time, and commit message. Additionally, if the commit represents the head of a branch, the corresponding branch label will be displayed on the right side.

To obtain more detailed information about a particular commit, simply click on the commit hash. This will allow you to navigate to the diff and access more information related to the commit.

Commit Graph Click To Diff Page

Conclusion

The commit graph is an exciting feature that offers DoltHub users a powerful tool for understanding their database's commit history. We encourage you to try it out today and let us know what you think on Discord, or file a feature request on GitHub. We're always looking for ways to improve our product and appreciate your feedback!

SHARE

JOIN THE DATA EVOLUTION

Get started with Dolt

Or join our mailing list to get product updates.