From fdf96b07fe2cfb3d1f07674123f6df811e2d3ae8 Mon Sep 17 00:00:00 2001
From: Brian Warner <warner@lothar.com>
Date: Thu, 3 Mar 2016 14:31:37 -0800
Subject: [PATCH] dump-timing: show elapsed time on click

---
 misc/web/timeline.html |  1 +
 misc/web/timeline.js   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/misc/web/timeline.html b/misc/web/timeline.html
index 78d6418..190fdd9 100644
--- a/misc/web/timeline.html
+++ b/misc/web/timeline.html
@@ -15,6 +15,7 @@
 <br>
 <div id="cursor_date"></div>
 <div id="cursor_time"></div>
+<div id="elapsed"></div>
 
 <script src="timeline.js"></script>
 
diff --git a/misc/web/timeline.js b/misc/web/timeline.js
index 7b89570..1554f29 100644
--- a/misc/web/timeline.js
+++ b/misc/web/timeline.js
@@ -7,10 +7,12 @@ var options = {editable: false,
                order: function(a,b) { return a.id - b.id; }
               };
 var timeline = new vis.Timeline(container, options);
+var items;
 
 $.getJSON("data.json", function(data) {
+    items = new vis.DataSet(data.items);
     timeline.setData({groups: new vis.DataSet(data.groups),
-                      items: new vis.DataSet(data.items)});
+                      items: items});
     var start = data.items[0].start;
     var end = data.items[data.items.length-1].start;
     var span = end - start;
@@ -24,6 +26,7 @@ $.getJSON("data.json", function(data) {
     timeline.on("timechange", update_cursor);
     update_cursor({time: new Date(start)});
     timeline.on("doubleClick", zoom);
+    timeline.on("select", select_item);
     $.get("done", function(_) {});
 });
 
@@ -43,3 +46,14 @@ function update_cursor(properties) {
     var m = vis.moment(t);
     document.getElementById("cursor_time").innerText = m.format("ss.SSSSSS");
 }
+
+function select_item(properties) {
+    var item_id = properties.items[0];
+    var i = items.get(item_id);
+    if (i.end) {
+        var elapsed = (i.end - i.start) / 1000;
+        $("div#elapsed").text("elapsed: " + elapsed + " s");
+    } else {
+        $("div#elapsed").text("");
+    }
+}