Git Visualization

25 oct 14 - MeetupJS Singapore

Joshua Koo

Joshua Koo

@blurspline

Zopim / Zendesk

Git Visualization

Git Visualization

(in JS of course, duh)

3ource

a brief history...

SuperHappyDevHouse

3ource

https://github.com/zz85/3ource

3ource

#ph41L for s0URC3

3ource

Three Source

3ource

Tree Source or Source Tree

maybe, Tree Sauce?

Git

http://www.commitstrip.com/en/2013/11/05/git-svn-ou/

http://sartak.org/talks/dcbpw-2013/git-flux/

http://nvie.com/posts/a-successful-git-branching-model/​

http://xkcd.com/1296/

http://alias.sh/random-commit-message

rgc() {
    git commit -m"`curl -s http://whatthecommit.com/index.txt`"
}

For more: http://www.commitlogsfromlastnight.com/

Our CTO has discovered an incredible way of making developers read his commit messages. You won’t even believe how he did it!

http://www.commitstrip.com/en/2014/08/07/

Visualize

Mission:

how can we present git history in a way its useful and appealing?

http://stackoverflow.com/questions/1057564/pretty-git-branch-graphs

Twitter Code Swarm

http://vimeo.com/9225227

Gource

Linux Kernel Development, 1991-2012

Code!

Goals

• Build a Git Log viewer that runs in the browser
• Animate directory structure of repository over time

Challenges

• How do we get git data in JS to the browser?
• How do we render huge amount of logs?
• How do we visualize a git folder structure automatically?
• How do we build a nice UI?

Git Data in JS

1. Github API
2. Pipe Data from Command Line
3. node.js Bindings
4. Git in JS

Data Needed

• Git logs
  • author
  • message
  • date
  • hash
• Git tree diffs
  • filenames
  • add
  • delete
  • modified

Pipe from Process

var exec = require('child_process').exec;

exec(GIT_LOG_CMD, {
  cwd: cwd,
  maxBuffer: 1024 * 1024 * 200 // abuse memory up to 200MB ;P
}, function (error, stdout, stderr) {

  // handle and parse stdout here

    })

);

fs.writeFileSync(OUTPUT_JSON_FILE, json, 'utf8');

Custom Git Log format

git log --raw -m --pretty=format:"bla" --encoding=UTF-8

Where "bla" = pretty format placeholders

git log --help

Pretty Git Log Viewer

https://zz85.github.io/3ource/src/timeline.html

Strategy

• Build the graph paths in memory
• Graph is rendered on Canvas
• Row Rendering is done with a virtual view port

I wrote about virtual rendering some time ago on here and here

Directory Rendering

1. Get directory structure at commit #####
2. layout algorithm
3. WebGL?

Git Tree

git ls-tree -r COMMIT

Cache directory filenames

Force Directed Layouts

Nodes with simulated forces

Do.js

Minilistic event dispatcher

npm install do.js

var Do = require('do.js');
var onFire = new Do();
onFire.do(something)
onFire.fire('bla');

Finally...

http://geekandpoke.typepad.com/geekandpoke/2010/04/

One Big Hack but a WIP

suggestions, ideas, comments

https://github.com/zz85/3ource

Shameless Plug:

http://www.meetup.com/Singapore-Creative-Coding-Meetup/

Thank you