support dynamic queries!

Add form with event handler which performs JSON XHR query
and draws results.

3 files changed, 45 insertions, 3 deletions

diff --git a/html/css/git-deps.css b/html/css/git-deps.css
index 4f43c83..156b064 100644
--- a/html/css/git-deps.css
+++ b/html/css/git-deps.css
@@ -29,3 +29,7 @@ g.node text {
     opacity: 0.4;
     marker-end: url(#end-arrow);
 }
+
+.commitish input {
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
diff --git a/html/git-deps.html b/html/git-deps.html
index b1bb617..491c93a 100644
--- a/html/git-deps.html
+++ b/html/git-deps.html
@@ -23,5 +23,12 @@
     Drag background to pan.
     Hover over a commit for more information.
   </p>
+
+  <form class="commitish" action="#">
+    Detect dependencies for commit:
+    <input type="text" name="commitish" size="20"
+           value="master" autofocus />
+    <button>Submit</button>
+  </form>
 </body>
 </html>
diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js
index 53ad42f..004e79d 100644
--- a/html/js/git-deps-graph.js
+++ b/html/js/git-deps-graph.js
@@ -32,9 +32,31 @@ jQuery(function () {
     d3.html('tip-template.html', function (error, html) {
         tip_template = html;
     });
-    draw_graph();
+    //setup_default_form_values();
+    $('form.commitish').submit(function (event) {
+        event.preventDefault();
+        add_commitish($('.commitish input').val());
+    });
 });
 
+function setup_default_form_values () {
+    $('input[type=text]').each( function () {
+        $(this).val($(this).attr('defaultValue'));
+        $(this).css({color: 'grey'});
+    }).focus(function () {
+        if ($(this).val() == $(this).attr('defaultValue')){
+            $(this).val('');
+            $(this).css({color: 'black'});
+        }
+    })
+    .blur(function () {
+        if ($(this).val() == '') {
+            $(this).val($(this).attr('defaultValue'));
+            $(this).css({color: 'grey'});
+        }
+    });
+}
+
 function redraw_on_zoom () {
     fg.attr("transform",
             "translate(" + d3.event.translate + ")" +
@@ -99,7 +121,14 @@ function add_data (data) {
     build_constraints();
 }
 
-function draw_graph () {
+function add_commitish (commitish) {
+    if (! svg) {
+        init_svg();
+    }
+    draw_graph(commitish);
+}
+
+function init_svg () {
     svg = d3.select("body").append("svg")
         .attr("width", WIDTH)
         .attr("height", HEIGHT);
@@ -111,8 +140,10 @@ function draw_graph () {
         .call(d3.behavior.zoom().on("zoom", redraw_on_zoom));
 
     fg = svg.append('g');
+}
 
-    d3.json("test.json", function (error, data) {
+function draw_graph (commitish) {
+    d3.json("deps.json/" + commitish, function (error, data) {
         add_data(data);
 
         d3cola