UI Explained

The live visualization page has various features available to customize the display

The visibility of the Trees and Blobs can be toggled on and off
The view can be paused and moved back and forth through time
All of the objects such as Trees, Blobs, Commits, HEAD and branches can be moved by clicking and dragging. The position of these objects will be retained even when the page is updated after a change made to the repo.

Working Area Window

Working Area screen shot

View the files that GIT can see in your file system

The screenshot here shows file1.txt and file2.txt are present in the working area

When a file is initally created it will appear only here and not in the staging area or repository

Additionally if file content extraction is enabled then we'll see each files contents here

Click the * to expand/colapse this UI element

Click and drag the header bar to move this UI elements position

Staging Area Window

Staging Area screen shot

View the files that are currently in the GIT Staging/Index

If file content extraction is enabled then we'll see each files contents here

Click the * to expand/colapse this UI element

Click and drag the header bar to move this UI elements position

Collapsing Windows

Click the * to expand/colapse these Windows

Staging Area screen shot
Staging Area screen shot
Staging Area screen shot
Staging Area screen shot

Moving Windows

Click and drag the header bar to move these Windows position

Changing Auto Update Checkbox

By default the visualisation will update automatically whenever a change is made to the repo

We can pause the visualisation by unchecking the 'AutoUpdate' check box

The inclusion of Tree objects in the visualisation is only really useful when explicitly looking into how Git Trees work.

For all other scenarios it is best to remove them to reduce clutter on the screen

Simply click the <Hide Tree> button to remove them

Hiding Trees within the visualisation option Graph showing screen when trees are hidden

Similarly to removing Tree object we can remove BLOB objects if desired too

Simply click the <Hide Blob> button to remove them

Hiding Blobs within the visualisation option Graph showing screen when Bloba are hidden