<aside> 🗣

git graph generation is surprisingly unsimple…

</aside>

background

https://github.com/mhutchie/vscode-git-graph/blob/develop/web/graph.ts#L337

• VSCode extension used by VSCode to display the Git graph

• would be useful for @git-mastery where we can generate the current Git tree for students

high-level mechanism

sequenceDiagram
autonumber
participant Load
participant A as window
Load ->> A : load event
create participant B as GitGraphView
A ->> B : new GitGraphView()
create participant C as Graph
B ->> C : new Graph()
B ->> B : loadCommits()
B ->> C : loadCommits()
loop vertex available
C ->> C : determinePath()
end
B ->> C : render()

GitGraphView class

• represents the entire widget
• don’t need to care about anything else besides the Graph usage

Graph class

• central graph class containing the vertices, branches, available colors, and commits
• Vertex: bidirectional graph
• conceptually, the graph is structured in the following way:

state

• state is managed using VSCode’s WebView API where the state is stored and loaded through vscode.getState()
• commits are the only thing we’re interested in → stored as a reverse order (i.e. latest commits first

constructor