diff --git a/htrace-htraced/src/web/app/query_results.js b/htrace-htraced/src/web/app/query_results.js
index 6fdde9f..dc37e1e 100644
--- a/htrace-htraced/src/web/app/query_results.js
+++ b/htrace-htraced/src/web/app/query_results.js
@@ -20,7 +20,7 @@
 var htrace = htrace || {};
 
 htrace.QueryResults = Backbone.Collection.extend({
-  // The query results are spans. 
+  // The query results are spans.
   model: htrace.Span,
 
   initialize: function(options) {
diff --git a/htrace-htraced/src/web/app/search_result.js b/htrace-htraced/src/web/app/search_result.js
new file mode 100644
index 0000000..9798ad7
--- /dev/null
+++ b/htrace-htraced/src/web/app/search_result.js
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+var htrace = htrace || {};
+
+// A pair of span trees: one going up, and the other going down.
+// This represents a single search result.
+htrace.SearchResult = Backbone.Model.extend({
+  initialize: function(options) {
+    this.set("childrenRoot", {
+      root: options.span,
+      contents: null,
+    });
+    this.set("childrenRoot", {
+      root: options.span,
+      contents: null,
+    });
+
+    this.set("parentsRoot", options.span);
+  },
+
+  getBegin: function() {
+    var begin = this.get("span").get("begin");
+    var children = this.get("children");
+    for (var childIdx = 0; childIdx < children.length; childIdx++) {
+      begin = Math.min(begin, children[childIdx].getBegin());
+    }
+    return begin;
+  },
+
+  getEnd: function() {
+    var end = this.get("span").get("end");
+    var children = this.get("children");
+    for (var childIdx = 0; childIdx < children.length; childIdx++) {
+      end = Math.max(end, children[childIdx].getEnd());
+    }
+    return end;
+  }
+});
diff --git a/htrace-htraced/src/web/app/search_results.js b/htrace-htraced/src/web/app/search_results.js
index d214918..25b18ae 100644
--- a/htrace-htraced/src/web/app/search_results.js
+++ b/htrace-htraced/src/web/app/search_results.js
@@ -20,6 +20,6 @@
 var htrace = htrace || {};
 
 htrace.SearchResults = Backbone.Collection.extend({
-  // The search results are spans. 
-  model: htrace.Span
+  // The search results are span trees.
+  model: htrace.SpanTreeNode
 });
diff --git a/htrace-htraced/src/web/app/search_results_view.js b/htrace-htraced/src/web/app/search_results_view.js
index b3473c4..111f530 100644
--- a/htrace-htraced/src/web/app/search_results_view.js
+++ b/htrace-htraced/src/web/app/search_results_view.js
@@ -27,12 +27,10 @@
 
   end: this.MINIMUM_TIME_SPAN,
 
-  focused: false,
-
   initialize: function(options) {
-    this.model = options.searchResults;
+    this.searchResults = options.searchResults;
     this.el = options.el;
-    this.listenTo(this.model, 'add remove change reset', this.render);
+    this.listenTo(this.searchResults, 'add remove change reset', this.render);
 
     // Re-render the canvas when the window size changes.
     // Add a debouncer delay to avoid spamming render requests.
@@ -56,50 +54,40 @@
 
   handleMouseDown: function(e) {
     e.preventDefault();
-    var x = this.getCanvasX(e);
-    var y = this.getCanvasY(e);
-    var focused = this.widgetManager.handleMouseDown(x, y);
-    if (focused != this.focused) {
-      this.draw();
-      this.focused = focused;
-    }
+    this.widgetManager.handle({
+      type: "mouseDown",
+      x: this.getCanvasX(e),
+      y: this.getCanvasY(e)
+    });
+    this.draw();
   },
 
   handleMouseUp: function(e) {
     e.preventDefault();
-    var x = this.getCanvasX(e);
-    var y = this.getCanvasY(e);
-    this.widgetManager.handleMouseUp(x, y);
-    this.focused = false;
+    this.widgetManager.handle({
+      type: "mouseUp",
+      x: this.getCanvasX(e),
+      y: this.getCanvasY(e)
+    });
     this.draw();
   },
 
-  // When the mouse leaves the canvas, treat it like a mouse up event at -1, -1
-  // if something is focused.
   handleMouseOut: function(e) {
-    if (this.focused) {
-      this.widgetManager.handleMouseUp(-1, -1);
-      this.focused = false;
-      this.draw();
-    }
+    e.preventDefault();
+    this.widgetManager.handle({
+      type: "mouseOut"
+    });
+    this.draw();
   },
 
   handleMouseMove: function(e) {
     e.preventDefault();
-    var x = this.getCanvasX(e);
-    var y = this.getCanvasY(e);
-    if (this.focused) {
-      var mustDraw = false;
-      if (this.widgetManager.handleMouseMove(x, y)) {
-        mustDraw = true;
-      }
-    }
-    if (this.timeCursor.handleMouseMove(x, y)) {
-      mustDraw = true;
-    }
-    if (mustDraw) {
-      this.draw();
-    }
+    this.widgetManager.handle({
+      type: "mouseMove",
+      x: this.getCanvasX(e),
+      y: this.getCanvasY(e)
+    });
+    this.draw();
   },
 
   render: function() {
@@ -110,7 +98,6 @@
     this.ctx = this.canvas.get(0).getContext("2d");
     this.scaleCanvas();
     this.setupCoordinates();
-    this.setupTimeCursor();
     this.setupWidgets();
     this.draw();
     this.attachEvents();
@@ -160,66 +147,59 @@
   //
   // Set up the screen coordinates.
   //
-  //  0              buttonX    descX                scrollX    maxX
+  //  0              xB         xD                   xS         maxX
   //  +--------------+----------+--------------------+-----------+
   //  |ProcessId     | Buttons  | Span Description   | Scrollbar |
   //  +--------------+----------+--------------------+-----------+
   //
   setupCoordinates: function() {
-    this.buttonX = Math.min(300, Math.floor(this.maxX / 5));
-    this.descX = this.buttonX + Math.min(75, Math.floor(this.maxX / 20));
+    this.xB = Math.min(300, Math.floor(this.maxX / 5));
+    this.xD = this.xB + Math.min(75, Math.floor(this.maxX / 20));
     var scrollBarWidth = Math.min(50, Math.floor(this.maxX / 10));
-    this.scrollX = this.maxX - scrollBarWidth;
-  },
-
-  setupTimeCursor: function() {
-    var selectedTime;
-    if (this.timeCursor != null) {
-      selectedTime = this.timeCursor.selectedTime;
-      console.log("setupTimeCursor: selectedTime = (prev) " + selectedTime);
-    } else {
-      selectedTime = this.begin;
-      console.log("setupTimeCursor: selectedTime = (begin) " + selectedTime);
-    }
-    this.timeCursor = new htrace.TimeCursor({
-      ctx: this.ctx,
-      x0: this.descX,
-      xF: this.scrollX,
-      el: "#selectedTime",
-      y0: 0,
-      yF: this.maxY,
-      begin: this.begin,
-      end: this.end,
-      selectedTime: selectedTime
-    });
+    this.xS = this.maxX - scrollBarWidth;
   },
 
   setupWidgets: function() {
-    var widgets = [];
-    var spanWidgetHeight = Math.min(25, Math.floor(this.maxY / 32));
+    this.widgetManager = new htrace.WidgetManager({searchResultsView: this});
 
     // Create a SpanWidget for each span we know about
-    var numSpans = this.model.size();
-    for (var i = 0; i < numSpans; i++) {
-      var spanWidget = new htrace.SpanWidget({
+    var spanWidgetHeight = Math.min(25, Math.floor(this.maxY / 32));
+    var numResults = this.searchResults.size();
+    var groupY = 0;
+    for (var i = 0; i < numResults; i++) {
+      var widget = new htrace.SpanGroupWidget({
+        manager: this.widgetManager,
         ctx: this.ctx,
-        span: this.model.at(i),
+        span: this.searchResults.at(i),
         x0: 0,
-        xB: this.buttonX,
-        xD: this.descX,
-        xF: this.scrollX,
-        y0: i * spanWidgetHeight,
-        yF: (i * spanWidgetHeight) + (spanWidgetHeight - 1),
+        xB: this.xB,
+        xD: this.xD,
+        xF: this.xS,
+        y0: groupY,
         begin: this.begin,
-        end: this.end
+        end: this.end,
+        spanWidgetHeight: spanWidgetHeight
       });
-      widgets.push(spanWidget);
+      groupY = widget.yF;
     }
 
-    // Create a new root-leve WidgetManager
-    this.widgetManager = new htrace.WidgetManager({
-      widgets: widgets
+    // Create the time cursor widget.
+    var selectedTime = this.begin;
+    if (this.timeCursor != null) {
+      selectedTime = this.timeCursor.selectedTime;
+    }
+    this.timeCursor = new htrace.TimeCursor({
+      manager: this.widgetManager,
+      selectedTime: selectedTime,
+      el: "#selectedTime"
     });
+    this.timeCursor.ctx = this.ctx;
+    this.timeCursor.x0 = this.xD;
+    this.timeCursor.xF = this.xS;
+    this.timeCursor.y0 = 0;
+    this.timeCursor.yF = this.maxY;
+    this.timeCursor.begin = this.begin;
+    this.timeCursor.end = this.end;
   },
 
   draw: function() {
@@ -227,7 +207,7 @@
       return;
     }
 
-    // Set the background to white. 
+    // Set the background to white.
     this.ctx.save();
     this.ctx.fillStyle="#ffffff";
     this.ctx.strokeStyle="#000000";
@@ -235,8 +215,7 @@
     this.ctx.restore();
 
     // Draw all the widgets.
-    this.widgetManager.draw();
-    this.timeCursor.draw();
+    this.widgetManager.handle({type: "draw"});
   },
 
   checkCanvasTooSmall: function() {
@@ -268,10 +247,6 @@
     $("#resultsCanvas").on("mouseout", function(e) {
       view.handleMouseOut(e);
     });
-    $(window).off("mouseup");
-    $(window).on("mouseup"), function(e) {
-      view.handleGlobalMouseUp(e);
-    }
     $("#resultsCanvas").off("mousemove");
     $("#resultsCanvas").on("mousemove", function(e) {
       view.handleMouseMove(e);
@@ -342,24 +317,45 @@
   },
 
   zoomFitAll: function() {
-    var numSpans = this.model.size();
-    if (numSpans == 0) {
+    var numResults = this.searchResults.size();
+    if (numResults == 0) {
       this.setBegin(0);
       this.setEnd(this.MINIMUM_TIME_SPAN);
       return;
     }
     var minStart = 4503599627370496;
     var maxEnd = 0;
-    for (var i = 0; i < numSpans; i++) {
-      var span = this.model.at(i);
-      if (span.get('begin') < minStart) {
-        minStart = span.get('begin');
+    for (var i = 0; i < numResults; i++) {
+      var span = this.searchResults.at(i);
+      var begin = span.getEarliestBegin();
+      if (begin < minStart) {
+        minStart = begin;
       }
-      if (span.get('end') > maxEnd) {
-        maxEnd = span.get('end');
+      var end = span.getLatestEnd();
+      if (end > minStart) {
+        maxEnd = end;
       }
     }
     this.setBegin(minStart);
     this.setEnd(maxEnd);
+  },
+
+  // Apply a function to all spans
+  applyToAllSpans: function(cb) {
+    for (var i = 0; i < this.searchResults.length; i++) {
+      htrace.treeTraverseDepthFirstPre(this.searchResults.at(i),
+        htrace.getReifiedChildren, 0,
+          function(node, depth) {
+            console.log("node = " + node + ", node.constructor.name = " + node.constructor.name);
+            cb(node);
+          });
+      htrace.treeTraverseDepthFirstPre(this.searchResults.at(i),
+        htrace.getReifiedParents, 0,
+          function(node, depth) {
+            if (depth > 0) {
+              cb(node);
+            }
+          });
+    }
   }
 });
diff --git a/htrace-htraced/src/web/app/span.js b/htrace-htraced/src/web/app/span.js
index 2c06fa0..a056b4f 100644
--- a/htrace-htraced/src/web/app/span.js
+++ b/htrace-htraced/src/web/app/span.js
@@ -22,6 +22,46 @@
 // The invalid span ID, which is all zeroes.
 htrace.INVALID_SPAN_ID = "0000000000000000";
 
+// Convert an array of htrace.Span models into a comma-separated string.
+htrace.spanModelsToString = function(spans) {
+  var ret = "";
+  var prefix = "";
+  for (var i = 0; i < spans.length; i++) {
+    ret += prefix + JSON.stringify(spans[i].unparse());
+    prefix = ", ";
+  }
+  return ret;
+};
+
+// Convert an array of return results from ajax calls into an array of
+// htrace.Span models.
+htrace.parseMultiSpanAjaxQueryResults = function(ajaxCalls) {
+  var parsedSpans = [];
+  for (var i = 0; i < ajaxCalls.length; i++) {
+    var text = ajaxCalls[i][0];
+    var result = ajaxCalls[i][1];
+    if (ajaxCalls[i]["status"] != "200") {
+      throw "ajax error: " + ajaxCalls[i].statusText;
+    }
+    var parsedSpan = new htrace.Span({});
+    try {
+      parsedSpan.parse(ajaxCalls[i].responseJSON, {});
+    } catch (e) {
+      throw "span parse error: " + e;
+    }
+    parsedSpans.push(parsedSpan);
+  }
+  return parsedSpans;
+};
+
+htrace.getReifiedParents = function(span) {
+  return span.get("reifiedParents") || [];
+};
+
+htrace.getReifiedChildren = function(span) {
+  return span.get("reifiedChildren") || [];
+};
+
 htrace.Span = Backbone.Model.extend({
   // Parse a span sent from htraced.
   // We use more verbose names for some attributes.
@@ -36,6 +76,16 @@
     this.set("description", response.d ? response.d : "");
     this.set("begin", response.b ? parseInt(response.b, 10) : 0);
     this.set("end", response.e ? parseInt(response.e, 10) : 0);
+
+    this.set("selected", false);
+
+    // reifiedChildren starts off as null and will be filled in as needed.
+    this.set("reifiedChildren", null);
+
+    // If there are parents, reifiedParents starts off as null.  Otherwise, we
+    // know it is the empty array.
+    this.set("reifiedParents", (this.get("parents").length == 0) ? [] : null);
+
     return span;
   },
 
@@ -65,5 +115,138 @@
       obj.e = this.get("end");
     }
     return obj;
-  }
+  },
+
+  //
+  // Although the parent IDs are always present in the 'parents' field of the
+  // span, sometimes we need the actual parent span models.  In that case we
+  // must "reify" them (make them real).
+  //
+  // This functionReturns a jquery promise which reifies all the parents of this
+  // span and stores them into reifiedParents.  The promise returns the empty
+  // string on success, or an error string on failure.
+  //
+  reifyParents: function() {
+    var span = this;
+    var numParents = span.get("parents").length;
+    var ajaxCalls = [];
+    // Set up AJAX queries to reify the parents.
+    for (var i = 0; i < numParents; i++) {
+      ajaxCalls.push($.ajax({
+        url: "span/" + span.get("parents")[i],
+        data: {},
+        contentType: "application/json; charset=utf-8",
+        dataType: "json"
+      }));
+    }
+    var rootDeferred = jQuery.Deferred();
+    $.when.apply($, ajaxCalls).then(function() {
+      var reifiedParents = [];
+      try {
+        reifiedParents = htrace.parseMultiSpanAjaxQueryResults(ajaxCalls);
+      } catch (e) {
+        rootDeferred.resolve("Error reifying parents for " +
+            span.get("spanId") + ": " + e);
+        return;
+      }
+      // The current span is a child of the reified parents.  There may be other
+      // children of those parents, but we are ignoring that here.  By making
+      // this non-null, the "expand children" button will not appear for these
+      // paren spans.
+      for (var j = 0; j < reifiedParents.length; j++) {
+        reifiedParents[j].set("reifiedChildren", [span]);
+      }
+      console.log("Setting reified parents for " + span.get("spanId") +
+          " to " + htrace.spanModelsToString (reifiedParents));
+      span.set("reifiedParents", reifiedParents);
+      rootDeferred.resolve("");
+    });
+    return rootDeferred.promise();
+  },
+
+  //
+  // The span itself does not contain its children.  However, the server has an
+  // index which can be used to easily find the children of a particular span.
+  //
+  // This function returns a jquery promise which reifies all the children of
+  // this span and stores them into reifiedChildren.  The promise returns the
+  // empty string on success, or an error string on failure.
+  //
+  reifyChildren: function() {
+    var rootDeferred = jQuery.Deferred();
+    var span = this;
+    $.ajax({
+        url: "span/" + span.get("spanId") + "/children?lim=50",
+        data: {},
+        contentType: "application/json; charset=utf-8",
+        dataType: "json"
+      }).done(function(childIds) {
+        var ajaxCalls = [];
+        for (var i = 0; i < childIds.length; i++) {
+          ajaxCalls.push($.ajax({
+            url: "span/" + childIds[i],
+            data: {},
+            contentType: "application/json; charset=utf-8",
+            dataType: "json"
+          }));
+        };
+        $.when.apply($, ajaxCalls).then(function() {
+          var reifiedChildren;
+          try {
+            reifiedChildren = htrace.parseMultiSpanAjaxQueryResults(ajaxCalls);
+          } catch (e) {
+            reifiedChildren = rootDeferred.resolve("Error reifying children " +
+                "for " + span.get("spanId") + ": " + e);
+            return;
+          }
+          // The current span is a parent of the new child.
+          // There may be other parents, but we are ignoring that here.
+          // By making this non-null, the "expand parents" button will not
+          // appear for these child spans.
+          for (var j = 0; j < reifiedChildren.length; j++) {
+            reifiedChildren[j].set("reifiedParents", [span]);
+          }
+          console.log("Setting reified children for " + span.get("spanId") +
+              " to " + htrace.spanModelsToString (reifiedChildren));
+          span.set("reifiedChildren", reifiedChildren);
+          rootDeferred.resolve("");
+        });
+      }).fail(function(statusData) {
+        // Check if the /children query failed.
+        rootDeferred.resolve("Error querying children of " +
+            span.get("spanId") + ": got " + statusData);
+        return;
+      });
+    return rootDeferred.promise();
+  },
+
+  // Get the earliest begin time of this span or any of its reified parents or
+  // children.
+  getEarliestBegin: function() {
+    var earliestBegin = this.get("begin");
+    htrace.treeTraverseDepthFirstPre(this, htrace.getReifiedParents, 0,
+        function(span, depth) {
+          earliestBegin = Math.min(earliestBegin, span.get("begin"));
+        });
+    htrace.treeTraverseDepthFirstPre(this, htrace.getReifiedChildren, 0,
+        function(span, depth) {
+          earliestBegin = Math.min(earliestBegin, span.get("begin"));
+        });
+    return earliestBegin;
+  },
+
+  // Get the earliest begin time of this span or any of its reified parents or
+  // children.
+  getLatestEnd: function() {
+    var latestEnd = this.get("end");
+    htrace.treeTraverseDepthFirstPre(this, htrace.getReifiedParents, 0,
+        function(span, depth) {
+          latestEnd = Math.max(latestEnd, span.get("end"));
+        });
+    htrace.treeTraverseDepthFirstPre(this, htrace.getReifiedChildren, 0,
+        function(span, depth) {
+          latestEnd = Math.max(latestEnd, span.get("end"));
+        });
+    return latestEnd;
+  },
 });
diff --git a/htrace-htraced/src/web/app/span_group_widget.js b/htrace-htraced/src/web/app/span_group_widget.js
new file mode 100644
index 0000000..e32c2db
--- /dev/null
+++ b/htrace-htraced/src/web/app/span_group_widget.js
@@ -0,0 +1,110 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+var htrace = htrace || {};
+
+// Widget containing a group of trace spans displayed on the canvas.
+htrace.SpanGroupWidget = function(params) {
+  this.draw = function() {
+    this.ctx.save();
+    this.ctx.fillStyle="#ffffff";
+    this.ctx.fillRect(this.x0, this.y0, this.xF - this.x0, this.yF - this.y0);
+    this.ctx.strokeStyle="#aaaaaa";
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.x0, this.y0);
+    this.ctx.lineTo(this.xF, this.y0);
+    this.ctx.stroke();
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.x0, this.yF);
+    this.ctx.lineTo(this.xF, this.yF);
+    this.ctx.stroke();
+    this.ctx.restore();
+    return true;
+  };
+
+  this.createSpanWidget = function(node, indentLevel,
+      allowUpButton, allowDownButton) {
+    new htrace.SpanWidget({
+      manager: this.manager,
+      ctx: this.ctx,
+      span: node,
+      x0: this.x0,
+      xB: this.xB,
+      xD: this.xD,
+      xF: this.xF,
+      xT: this.childIndent * indentLevel,
+      y0: this.spanY,
+      yF: this.spanY + this.spanWidgetHeight,
+      allowUpButton: allowUpButton,
+      allowDownButton: allowDownButton,
+      begin: this.begin,
+      end: this.end
+    });
+    this.spanY += this.spanWidgetHeight;
+  }
+
+  this.handle = function(e) {
+    switch (e.type) {
+      case "draw":
+        this.draw();
+        return true;
+    }
+  }
+
+  for (var k in params) {
+    this[k]=params[k];
+  }
+  this.manager.register("draw", this);
+  this.spanY = this.y0 + 4;
+
+  // Figure out how much to indent each child's description text.
+  this.childIndent = Math.max(10, (this.xF - this.xD) / 50);
+
+  // Get the maximum depth of the parents tree to find out how far to indent.
+  var parentTreeHeight =
+      htrace.treeHeight(this.span, htrace.getReifiedParents);
+
+  console.log("parentTreeHeight = " + parentTreeHeight);
+  // Traverse the parents tree upwards.
+  var thisWidget = this;
+  htrace.treeTraverseDepthFirstPost(this.span, htrace.getReifiedParents, 0,
+      function(node, depth) {
+        if (depth > 0) {
+          thisWidget.createSpanWidget(node,
+              parentTreeHeight - depth, true, false);
+        }
+      });
+  thisWidget.createSpanWidget(this.span, parentTreeHeight, true, true);
+  // Traverse the children tree downwards.
+  htrace.treeTraverseDepthFirstPre(this.span, htrace.getReifiedChildren, 0,
+      function(node, depth) {
+        if (depth > 0) {
+          thisWidget.createSpanWidget(node,
+              parentTreeHeight + depth, false, true);
+        }
+      });
+  this.yF = this.spanY + 4;
+  console.log("SpanGroupWidget(this.span=" +
+      JSON.stringify(this.span.unparse()) +
+      ", x0=" + this.x0 + ", xB=" + this.xB +
+      ", xD=" + this.xD + ", xF=" + this.xF +
+      ", y0=" + this.y0 + ", yF=" + this.yF +
+      ")");
+  return this;
+};
diff --git a/htrace-htraced/src/web/app/span_widget.js b/htrace-htraced/src/web/app/span_widget.js
index f9333d6..0d18fef 100644
--- a/htrace-htraced/src/web/app/span_widget.js
+++ b/htrace-htraced/src/web/app/span_widget.js
@@ -21,50 +21,16 @@
 
 // Widget containing the trace span displayed on the canvas.
 htrace.SpanWidget = function(params) {
-  for (var k in params) {
-    this[k]=params[k];
-  }
-
-  this.selected = false;
-  this.widgetManagerFocused = false;
-  this.xSize = this.xF - this.x0;
-  this.ySize = this.yF - this.y0;
-  this.xDB = this.xD - this.xB;
-
-  var widgets = [];
-  this.upWidget = new htrace.TriangleButton({
-    ctx: this.ctx,
-    direction: "up",
-    x0: this.xB + 2,
-    xF: this.xB + (this.xDB / 2) - 2,
-    y0: this.y0 + 2,
-    yF: this.yF - 2,
-  });
-  widgets.push(this.upWidget);
-  this.downWidget = new htrace.TriangleButton({
-    ctx: this.ctx,
-    direction: "down",
-    x0: this.xB + (this.xDB / 2) + 2,
-    xF: this.xD - 2,
-    y0: this.y0 + 2,
-    yF: this.yF - 2,
-  });
-  widgets.push(this.downWidget);
-  this.widgetManager = new htrace.WidgetManager({
-    widgets: widgets,
-  });
-
   this.draw = function() {
     this.drawBackground();
     this.drawProcessId();
     this.drawDescription();
-    this.widgetManager.draw();
   };
 
   // Draw the background of this span widget.
   this.drawBackground = function() {
     this.ctx.save();
-    if (this.selected) {
+    if (this.span.get("selected")) {
       this.ctx.fillStyle="#ffccff";
     } else {
       this.ctx.fillStyle="#ffffff";
@@ -133,7 +99,9 @@
     // Draw description text
     this.ctx.fillStyle="#000000";
     this.ctx.font = (this.ySize - gapY) + "px sans-serif";
-    this.ctx.fillText(this.span.get('description'), this.xD, this.yF - gapY - 2);
+    this.ctx.fillText(this.span.get('description'),
+        this.xD + this.xT,
+        this.yF - gapY - 2);
 
     this.ctx.restore();
   };
@@ -145,42 +113,11 @@
         (this.end - this.begin));
   };
 
-  this.inBoundingBox = function(x, y) {
-    return ((x >= this.x0) && (x <= this.xF) && (y >= this.y0) && (y <= this.yF));
-  };
-
-  this.handleMouseDown = function(x, y) {
-    if (!this.inBoundingBox(x, y)) {
-      return false;
-    }
-    if (this.widgetManager.handleMouseDown(x, y)) {
-      this.widgetManagerFocused = true;
-      return true;
-    }
-    this.selected = !this.selected;
-    this.fillSpanDetailsView();
-    return true;
-  };
-
-  this.handleMouseUp = function(x, y) {
-    if (this.widgetManagerFocused) {
-      this.widgetManager.handleMouseUp(x, y);
-      this.widgetManagerFocused = false;
-    }
-  };
-
-  this.handleMouseMove = function(x, y) {
-    if (!this.widgetManagerFocused) {
-      return false;
-    }
-    return this.widgetManager.handleMouseUp(x, y);
-  };
-
   this.fillSpanDetailsView = function() {
     var info = {
       spanID: this.span.get("spanID"),
       begin: htrace.dateToString(parseInt(this.span.get("begin"), 10)),
-      end: htrace.dateToString(parseInt(this.span.get("end"), 10))
+      end: htrace.dateToString(parseInt(this.span.get("end"), 10)),
     };
     var explicitOrder = {
       spanId: -3,
@@ -189,6 +126,12 @@
     };
     keys = [];
     for(k in this.span.attributes) {
+      if (k == "reifiedChildren") {
+        continue;
+      }
+      if (k == "reifiedParents") {
+        continue;
+      }
       keys.push(k);
       if (info[k] == null) {
         info[k] = this.span.get(k);
@@ -225,5 +168,70 @@
     $("#spanDetails").html(h);
   };
 
+  this.handle = function(e) {
+    switch (e.type) {
+      case "mouseDown":
+        if (!htrace.inBoundingBox(e.x, e.y,
+              this.x0, this.xF, this.y0, this.yF)) {
+          return true;
+        }
+        this.manager.searchResultsView.applyToAllSpans(function(span) {
+            if (span.get("selected") == true) {
+              span.set("selected", false);
+            }
+          });
+        this.span.set("selected", true);
+        this.fillSpanDetailsView();
+        return true;
+      case "draw":
+        this.draw();
+        return true;
+    }
+  };
+
+  for (var k in params) {
+    this[k]=params[k];
+  }
+  this.xSize = this.xF - this.x0;
+  this.ySize = this.yF - this.y0;
+  this.xDB = this.xD - this.xB;
+  this.manager.register("draw", this);
+
+  var widget = this;
+  if ((this.span.get("reifiedParents") == null) && (this.allowUpButton)) {
+    new htrace.TriangleButton({
+      ctx: this.ctx,
+      manager: this.manager,
+      direction: "up",
+      x0: this.xB + 2,
+      xF: this.xB + (this.xDB / 2) - 2,
+      y0: this.y0 + 2,
+      yF: this.yF - 2,
+      callback: function() {
+        $.when(widget.span.reifyParents()).done(function (result) {
+          console.log("reifyParents: result was '" + result + "'");
+          widget.manager.searchResultsView.render();
+        });
+      },
+    });
+  }
+  if ((this.span.get("reifiedChildren") == null) && (this.allowDownButton)) {
+    new htrace.TriangleButton({
+      ctx: this.ctx,
+      manager: this.manager,
+      direction: "down",
+      x0: this.xB + (this.xDB / 2) + 2,
+      xF: this.xD - 2,
+      y0: this.y0 + 2,
+      yF: this.yF - 2,
+      callback: function() {
+        $.when(widget.span.reifyChildren()).done(function (result) {
+          console.log("reifyChildren: result was '" + result + "'");
+          widget.manager.searchResultsView.render();
+        });
+      },
+    });
+  }
+  this.manager.register("mouseDown", this);
   return this;
 };
diff --git a/htrace-htraced/src/web/app/time_cursor.js b/htrace-htraced/src/web/app/time_cursor.js
index 0060abb..1caaa9a 100644
--- a/htrace-htraced/src/web/app/time_cursor.js
+++ b/htrace-htraced/src/web/app/time_cursor.js
@@ -21,11 +21,6 @@
 
 // Draws a vertical bar selecting a time.
 htrace.TimeCursor = function(params) {
-  this.selectedTime = -1;
-  for (var k in params) {
-    this[k]=params[k];
-  }
-
   this.positionToTime = function(x) {
     if ((x < this.x0) || (x > this.xF)) {
       return -1;
@@ -56,19 +51,31 @@
     }
   };
 
-  this.handleMouseMove = function(x, y) {
-    if ((y >= this.y0) && (y <= this.yF) &&
-        (x >= this.x0) && (x <= this.xF)) {
-      this.selectedTime = this.positionToTime(x);
-      if (this.selectedTime < 0) {
-        $(this.el).val("");
-      } else {
-        $(this.el).val(htrace.dateToString(this.selectedTime));
-      }
-      return true;
+  this.handle = function(e) {
+    switch (e.type) {
+      case "mouseMove":
+        if (htrace.inBoundingBox(e.x, e.y,
+              this.x0, this.xF, this.y0, this.yF)) {
+          this.selectedTime = this.positionToTime(e.x);
+          if (this.selectedTime < 0) {
+            $(this.el).val("");
+          } else {
+            $(this.el).val(htrace.dateToString(this.selectedTime));
+          }
+          return true;
+        }
+        return true;
+      case "draw":
+        this.draw();
+        return true;
     }
-    return false;
   };
 
+  this.selectedTime = -1;
+  for (var k in params) {
+    this[k]=params[k];
+  }
+  this.manager.register("mouseMove", this);
+  this.manager.register("draw", this);
   return this;
 };
diff --git a/htrace-htraced/src/web/app/tree.js b/htrace-htraced/src/web/app/tree.js
new file mode 100644
index 0000000..046085c
--- /dev/null
+++ b/htrace-htraced/src/web/app/tree.js
@@ -0,0 +1,74 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+var htrace = htrace || {};
+
+//
+// Get the height of a tree-- that is, the number of edges on the longest
+// downward path between the root and a leaf
+//
+htrace.treeHeight = function(node, getDescendants) {
+  var height = 0;
+  var descendants = getDescendants(node);
+  for (var i = 0; i < descendants.length; i++) {
+    height = Math.max(height,
+        1 + htrace.treeHeight(descendants[i], getDescendants));
+  }
+  return height;
+};
+
+//
+// Perform a depth-first, post-order traversal on the tree, invoking the
+// callback on every node with the node and depth as the arguments.
+//
+// Example:
+//     5
+//    / \
+//   3   4
+//  / \
+// 1   2
+//
+htrace.treeTraverseDepthFirstPost = function(node, getDescendants, depth, cb) {
+  var descendants = getDescendants(node);
+  for (var i = 0; i < descendants.length; i++) {
+    htrace.treeTraverseDepthFirstPost(descendants[i],
+        getDescendants, depth + 1, cb);
+  }
+  cb(node, depth);
+};
+
+//
+// Perform a depth-first, pre-order traversal on the tree, invoking the
+// callback on every node with the node and depth as the arguments.
+//
+// Example:
+//     1
+//    / \
+//   2   5
+//  / \
+// 3   4
+//
+htrace.treeTraverseDepthFirstPre = function(node, getDescendants, depth, cb) {
+  cb(node, depth);
+  var descendants = getDescendants(node);
+  for (var i = 0; i < descendants.length; i++) {
+    htrace.treeTraverseDepthFirstPre(descendants[i],
+        getDescendants, depth + 1, cb);
+  }
+};
diff --git a/htrace-htraced/src/web/app/triangle_button.js b/htrace-htraced/src/web/app/triangle_button.js
index 89f9514..f252476 100644
--- a/htrace-htraced/src/web/app/triangle_button.js
+++ b/htrace-htraced/src/web/app/triangle_button.js
@@ -60,44 +60,49 @@
     } else {
       console.log("TriangleButton: unknown direction " + this.direction);
     }
-    this.ctx.closePath(); 
+    this.ctx.closePath();
     this.ctx.fill();
     this.ctx.restore();
   };
 
-  this.inBoundingBox = function(x, y) {
-    return ((x >= this.x0) && (x <= this.xF) && (y >= this.y0) && (y <= this.yF));
-  }
-
-  this.handleMouseDown = function(x, y) {
-//    console.log("TriangleButton#handleMouseDown(x=" + x + ", y=" + y +
-//        ", x0=" + this.x0 + ", y0="+ this.y0 +
-//        ", xF=" + this.xF + ", yF=" + this.yF);
-    if (this.inBoundingBox(x,y)) {
-      this.selected = true;
-      return true;
+  this.handle = function(e) {
+    switch (e.type) {
+      case "mouseDown":
+        if (!htrace.inBoundingBox(e.x, e.y,
+              this.x0, this.xF, this.y0, this.yF)) {
+          return true;
+        }
+        this.manager.register("mouseUp", this);
+        this.manager.register("mouseMove", this);
+        this.manager.register("mouseOut", this);
+        this.selected = true;
+        return false;
+      case "mouseUp":
+        if (this.selected) {
+          this.callback();
+          this.selected = false;
+        }
+        this.manager.unregister("mouseUp", this);
+        this.manager.unregister("mouseMove", this);
+        this.manager.unregister("mouseOut", this);
+        return true;
+      case "mouseMove":
+        this.selected = htrace.inBoundingBox(e.x, e.y,
+                this.x0, this.xF, this.y0, this.yF);
+        return true;
+      case "mouseOut":
+        this.selected = false;
+        return true;
+      case "draw":
+        this.draw();
+        return true;
     }
-    return false;
-  }
-
-  this.handleMouseUp = function(x, y) {
-    if (this.selected) {
-      console.log("executing callback");
-    }
-    this.selected = false;
-  }
-
-  this.handleMouseMove = function(x, y) {
-    var selected = this.inBoundingBox(x,y);
-    if (this.selected != selected) {
-      this.selected = selected;
-      return true;
-    }
-    return false;
-  }
+  };
 
   for (var k in params) {
     this[k]=params[k];
   }
+  this.manager.register("mouseDown", this);
+  this.manager.register("draw", this);
   return this;
 };
diff --git a/htrace-htraced/src/web/app/widget_manager.js b/htrace-htraced/src/web/app/widget_manager.js
index 49202c5..5f393b0 100644
--- a/htrace-htraced/src/web/app/widget_manager.js
+++ b/htrace-htraced/src/web/app/widget_manager.js
@@ -19,44 +19,40 @@
 
 var htrace = htrace || {};
 
+// Check if a point is inside a bounding box.
+htrace.inBoundingBox = function(x, y, x0, xF, y0, yF) {
+    return ((x >= x0) && (x <= xF) && (y >= y0) && (y <= yF));
+  }
+
 // Manages a set of widgets on the canvas.
 // Buttons and sliders are both widgets.
 htrace.WidgetManager = function(params) {
-  this.widgets = [];
-  this.focusedWidget = null;
+  this.listeners = {
+    "mouseDown": [],
+    "mouseUp": [],
+    "mouseMove": [],
+    "mouseOut": [],
+    "draw": [],
+  };
 
-  this.handleMouseDown = function(x, y) {
-    if (this.focusedWidget != null) {
-      this.focusedWidget = null;
-    }
-    var numWidgets = this.widgets.length;
-    console.log("WidgetManager looking through " + numWidgets + " widgets.");
-    for (var i = 0; i < numWidgets; i++) {
-      if (this.widgets[i].handleMouseDown(x, y)) {
-        this.focusedWidget = this.widgets[i];
+  this.register = function(type, widget) {
+    this.listeners[type].push(widget);
+  }
+
+  this.unregister = function(type, widget) {
+    this.listeners[type] = _.without(this.listeners[type], widget);
+  }
+
+  this.handle = function(e) {
+    // Make a copy of the listeners, in case the handling functions change the
+    // array.
+    var listeners = this.listeners[e.type].slice();
+    var len = listeners.length;
+    for (var i = 0; i < len; i++) {
+      if (!listeners[i].handle(e)) {
         break;
       }
     }
-    return (this.focusedWidget != null);
-  };
-
-  this.handleMouseUp = function(x, y) {
-    if (this.focusedWidget != null) {
-      this.focusedWidget.handleMouseUp(x, y);
-      this.focusedWidget = null;
-    }
-  };
-
-  this.handleMouseMove = function(x, y) {
-    return this.focusedWidget != null ?
-      this.focusedWidget.handleMouseMove(x, y) : false;
-  };
-
-  this.draw = function() {
-    var numWidgets = this.widgets.length;
-    for (var i = 0; i < numWidgets; i++) {
-      this.widgets[i].draw();
-    }
   };
 
   for (var k in params) {
diff --git a/htrace-htraced/src/web/image/owl.png b/htrace-htraced/src/web/image/owl.png
new file mode 100644
index 0000000..be6fabd
--- /dev/null
+++ b/htrace-htraced/src/web/image/owl.png
Binary files differ
diff --git a/htrace-htraced/src/web/index.html b/htrace-htraced/src/web/index.html
index 66ef0dc..bd15c9a 100644
--- a/htrace-htraced/src/web/index.html
+++ b/htrace-htraced/src/web/index.html
@@ -61,6 +61,45 @@
         <div class="col-md-3" role="form">
           <div class="panel panel-default">
             <div class="panel-heading">
+              <h1 class="panel-title">Timeline</h1>
+            </div style="border: 1px solid #000000;">
+            <div class="panel-body">
+              <div class="form-horizontal">
+                <div class="form-group">
+                  <label class="col-sm-2 control-label">Begin</label>
+                  <div class="col-sm-10">
+                    <input type="text" class="form-control" id="begin" value="1970-01-01T00:00:00,000"/>
+                  </div>
+                </div>
+                <div class="form-group">
+                  <label class="col-sm-2 control-label">End</label>
+                  <div class="col-sm-10">
+                    <input type="text" class="form-control" id="end" value="1970-01-01T00:00:00,100"/>
+                  </div>
+                </div>
+                <div class="form-group">
+                  <label class="col-sm-2 control-label">Cur</label>
+                  <div class="col-sm-10">
+                    <input type="text" class="form-control" id="selectedTime" value=""/>
+                  </div>
+                </div>
+                <div class="form-horizontal">
+                  <button type="button" class="btn btn btn-warning"
+                      id="zoomButton">Zoom</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="panel panel-default">
+            <div class="panel-heading">
+              <h1 class="panel-title">Span Details</h1>
+            </div style="border: 1px solid #000000;">
+            <div class="panel-body">
+              <div id="spanDetails" ></div>
+            </div>
+          </div>
+          <div class="panel panel-default">
+            <div class="panel-heading">
               <h1 class="panel-title">Search</h1>
             </div style="border: 1px solid #000000;">
             <div class="panel-body">
@@ -105,45 +144,6 @@
               </form>
             </div>
           </div>
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              <h1 class="panel-title">Timeline</h1>
-            </div style="border: 1px solid #000000;">
-            <div class="panel-body">
-              <div class="form-horizontal">
-                <div class="form-group">
-                  <label class="col-sm-2 control-label">Begin</label>
-                  <div class="col-sm-10">
-                    <input type="text" class="form-control" id="begin" value="1970-01-01T00:00:00,000"/>
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label class="col-sm-2 control-label">End</label>
-                  <div class="col-sm-10">
-                    <input type="text" class="form-control" id="end" value="1970-01-01T00:00:00,100"/>
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label class="col-sm-2 control-label">Cur</label>
-                  <div class="col-sm-10">
-                    <input type="text" class="form-control" id="selectedTime" value=""/>
-                  </div>
-                </div>
-                <div class="form-horizontal">
-                  <button type="button" class="btn btn btn-warning"
-                      id="zoomButton">Zoom</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              <h1 class="panel-title">Span Details</h1>
-            </div style="border: 1px solid #000000;">
-            <div class="panel-body">
-              <div id="spanDetails" ></div>
-            </div>
-          </div>
         </div>
         <div class="col-md-9" id="resultsView">
           <div id="results">
@@ -200,6 +200,7 @@
     <script src="lib/moment-2.10.3.js" type="text/javascript"></script>
 
     <script src="app/string.js" type="text/javascript"></script>
+    <script src="app/tree.js" type="text/javascript"></script>
     <script src="app/time_cursor.js" type="text/javascript"></script>
 
     <script src="app/widget_manager.js" type="text/javascript"></script>
@@ -207,6 +208,7 @@
 
     <script src="app/span.js" type="text/javascript"></script>
 
+    <script src="app/span_group_widget.js" type="text/javascript"></script>
     <script src="app/span_widget.js" type="text/javascript"></script>
     <script src="app/search_results.js" type="text/javascript"></script>
     <script src="app/about_view.js" type="text/javascript"></script>