Frontend reorganization and polish.

- attempt to fix rendering of some blobs by removing null bytes,
  newlines, and limiting size
- use Handlebars instead of Hogan
- add code for discovering whether a directory is a git repo or not
- create an index page listing all the repos in the directory you
  specified at the commandline

Author: kwatters

README.md

@@ -8,7 +8,7 @@ Visualize git repositories as they change, live in the browser.
 Why?
 ----
 
-gitviz might useful as a teaching tool for git.
+gitviz might be useful as a teaching tool for git.
 
 It draws graphviz graphs on <canvas> elements, and updates them as you modify the target git repository on the fly.
 

TODO

@@ -0,0 +1,6 @@
+- check out http://networkx.lanl.gov/pygraphviz/ as an alternative to pydot
+- animate nodes as the graph changes
+- limit number of nodes so we can read repositories of more than "toy" size
+    - what to show, then?
+- add a checkbox for showing blobs, shas
+

app.js

@@ -6,25 +6,23 @@ var fs = require('fs'),
     path = require('path'),
     express = require('express'),
     http = require('http'),
-    path = require('path');
+    path = require('path'),
+    async = require('async'),
+    gitutil = require('gitutil');
 
 var WATCH_INTERVAL_MS = 300;
-
-if (process.argv.length !== 3)
-    throw "usage: node app.js REPOS_ROOT # (where REPOS_ROOT is the directory above your repositories)";
-
-var ROOT = process.argv[2];
+var ROOT;
+var io;
 var DEFAULT_REPO = 'testrepo';
 
-if (!dirExistsSync(ROOT))
-    throw 'not existing:'+ROOT;
-
 var app = express();
 
+require('./handlebars-helpers.js')(require('hbs'));
+
 app.configure(function(){
   app.set('port', process.env.PORT || 3000);
   app.set('views', __dirname + '/views');
-  app.set('view engine', 'hjs');
+  app.set('view engine', 'hbs');
   app.use(express.favicon());
   app.use(express.logger('dev'));
   app.use(express.bodyParser());
@@ -39,11 +37,14 @@ app.configure('development', function(){
 
 function graphPage(req, res) {
     var repo = req.params['repo'] || 'testrepo';
-    res.render('index', {repo: repo});
+    res.render('repo', {repo: repo});
 };
 
-app.get('/', function(req, res) {
-    res.redirect(DEFAULT_REPO);
+app.get('/', function(req, res, next) {
+    gitutil.listRepos(ROOT, function(err, repos) {
+        if (err) return next(err);
+        res.render('index', {repos: repos});
+    });
 });
 
 app.get('/:repo/graph', function(req, res, next) {
@@ -73,22 +74,14 @@ app.get('/:repo/graph', function(req, res, next) {
 
 app.get('/:repo', graphPage);
 
-var server = http.createServer(app);
-
-var io = require('socket.io').listen(server);
-
-server.listen(app.get('port'), function(){
-  console.log("Express server listening on port " + app.get('port'));
-});
-
 var _watched ={};
 function watchRepo(repo) {
     if (_watched[repo]) return;
     _watched[repo] = true;
 
     var repodir = path.join(ROOT, repo);
     if (!dirExistsSync(repodir))
-        throw 'not existing: ' + repodir;
+        throw 'The repository root you provided does not not exist: ' + repodir;
 
     require('watch').watchTree(repodir, {interval: WATCH_INTERVAL_MS}, function() {
         onChange(repo);
@@ -100,16 +93,28 @@ function onChange(repo) {
     if (timeouts[repo]) return;
     timeouts[repo] = setTimeout(function() {
         timeouts[repo] = null;
-        console.log("REPO CHANGED", repo);
         io.sockets.emit('change:' + repo);
     }, 100);
 }
 
-io.sockets.on('connection', function(socket) {
-});
-
 function dirExistsSync (d) {
   try { return fs.statSync(d).isDirectory(); }
   catch (er) { return false; }
 }
 
+if (require.main === module) {
+    if (process.argv.length !== 3)
+        throw "usage: node app.js REPOS_ROOT # (where REPOS_ROOT is the directory above your repositories)";
+
+    ROOT = process.argv[2];
+    if (!dirExistsSync(ROOT))
+        throw 'not existing:'+ROOT;
+
+    var server = http.createServer(app);
+
+    io = require('socket.io').listen(server);
+
+    server.listen(app.get('port'), function(){
+      console.log("Express server listening on port " + app.get('port'));
+    });
+}

gitutil.js

@@ -0,0 +1,32 @@
+var fs = require('fs'),
+    path = require('path');
+
+var isGitDir = exports.isGitDir = function(fullPath) {
+    var gitDir = path.join(fullPath, '.git');
+
+    console.log('TRUE1', gitDir);
+    // check for a normal repository
+    if (fs.existsSync(gitDir)) {
+        return true;
+    }
+
+    // check for a bare repository
+    var bareRepoDirs = ['hooks', 'info', 'objects', 'refs'].map(function(f) {
+        return fs.existsSync(path.join(fullPath, f));
+    });
+
+    return bareRepoDirs.every(function(f) { return f; });
+};
+
+exports.listRepos = function(root, callback) {
+    fs.readdir(root, function(err, files) {
+        if (err) return callback(err);
+
+        var repos = files
+            .map(function(f) { return {name: f, path: path.join(root, f)}; })
+            .filter(function(info) { return isGitDir(info.path); });
+
+        callback(null, repos);
+    });
+};
+

gitviz.py

@@ -8,6 +8,9 @@
 import subprocess
 import tempfile
 
+MAX_NODES = 50
+MAX_BLOB = 200
+
 vertices = {}
 
 def node_opts(**opts):
@@ -53,9 +56,10 @@ def vertex_opts_for_obj(obj, **opts):
             #shape='cube'
         )
     elif obj.type_name == 'blob':
+        label = q(str(obj).decode('ascii', 'ignore').replace('\0', '').replace('\n', '\\n')[:MAX_BLOB])
         opts.update(
             shape='egg',
-            label=q(str(obj))
+            label=label
         )
     else:
         opts.update(
@@ -119,11 +123,13 @@ def walk_node(objstore, seen, sha):
     elif obj.type_name == 'commit':
         tree = obj.tree
         tree_vert = vert_for_sha(objstore, obj.tree)
+        seen.add(tree_vert)
         walk_node(objstore, seen, tree)
         add_edge(vert, tree_vert)
 
         for parent_sha in obj.parents:
             parent_vert = vert_for_sha(objstore, parent_sha)
+            seen.add(parent_vert)
             add_edge(vert, parent_vert)
             walk_node(objstore, seen, parent_sha)
 

handlebars-helpers.js

@@ -0,0 +1,30 @@
+var fs = require('fs'),
+    hbs = require('hbs');
+
+module.exports = function(hbs) {
+    var blocks = {};
+
+    hbs.registerHelper('extend', function(name, context) {
+        var block = blocks[name];
+        if (!block) {
+            block = blocks[name] = [];
+        }
+
+        block.push(context.fn(this));
+    });
+
+    hbs.registerHelper('block', function(name) {
+        var val = (blocks[name] || []).join('\n');
+
+        // clear the block
+        blocks[name] = [];
+        return val;
+    });
+
+}
+
+// Register all the partials
+fs.readdirSync(__dirname + '/views/partials').forEach(function(filename) {
+    var partial = filename.slice(0, -4);
+    hbs.registerPartial(partial, fs.readFileSync(__dirname + '/views/partials/' + filename).toString());
+});;

package.json

@@ -3,12 +3,12 @@
     "version": "0.0.1", 
     "dependencies": {
         "supervisor": "0.4.1", 
-        "hjs": "0.0.4", 
         "express": "3.0.0rc3", 
         "watch": "0.5.1", 
         "watch-tree": "0.1.1", 
         "socket.io": "0.9.10", 
         "node-watch": "0.2.4", 
-        "ejs": "0.8.2"
+        "hbs": ">= 1.0.4",
+        "async": ">= 0.1.22"
     }
 }

tests/TODO

@@ -0,0 +1,4 @@
+repositories with
+- missing objects
+- large binary files
+- images

views/index.hbs

@@ -0,0 +1,7 @@
+<h1>gitviz</h1>
+<h3>repos:</h3>
+<ul>
+{{#each repos}}
+  <li><a href="/{{name}}">{{name}}</a></li>
+{{/each}}
+</ul>

views/index.hjs

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{title}}</title>
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+
+    {{{block "stylesheets"}}}
+    {{{block "javascript"}}}
+  </head>
+  <body>
+      {{{body}}}
+  </body>
+</html>

views/layout.hbs

@@ -0,0 +1,35 @@
+{{#extend "stylesheets"}}
+<link rel="stylesheet" type="text/css" href="/stylesheets/canviz.css" />
+<script type="text/javascript" src="/javascripts/prototype.js"></script>
+<script type="text/javascript" src="/javascripts/canviz.js"></script>
+<script type="text/javascript" src="/javascripts/x11colors.js"></script>
+{{/extend}}
+
+{{#extend "javascript"}}
+<script src="/socket.io/socket.io.js"></script>
+<script>
+  document.observe('dom:loaded', function() {
+      var socket = io.connect('http://localhost');
+      socket.on('connect', function() {
+          refreshGraph();
+      });
+      socket.on('change:{{ repo }}', function(data) {
+          console.log('client received change');
+          refreshGraph();
+      });
+   });
+
+      var canviz;
+      function refreshGraph() {
+          if (!canviz)
+            canviz = new Canviz('graph_container');
+          canviz.load('/{{ repo }}/graph');
+      }
+
+</script>
+{{/extend}}
+
+<div id="page_container">
+    <div id="graph_container"></div>
+    <div id="debug_output"></div>
+</div>