Plot benchmark history

conbench/app/_plots.py

@@ -1,3 +1,5 @@
+import dateutil
+
 import bokeh.plotting
 
 from ..hacks import sorted_data
@@ -23,6 +25,22 @@ def get_title(benchmarks, name):
     return title
 
 
+def get_date_format():
+    date_format = "%Y-%m-%d"
+    return bokeh.models.DatetimeTickFormatter(
+        microseconds=[date_format],
+        milliseconds=[date_format],
+        seconds=[date_format],
+        minsec=[date_format],
+        minutes=[date_format],
+        hourmin=[date_format],
+        hours=[date_format],
+        days=[date_format],
+        months=[date_format],
+        years=[date_format],
+    )
+
+
 def simple_bar_plot(benchmarks, height=400, width=400):
     if len(benchmarks) > 30:
         return None
@@ -54,3 +72,38 @@ def simple_bar_plot(benchmarks, height=400, width=400):
     p.yaxis.axis_label = unit
 
     return p
+
+
+def time_series_plot(history, height=250, width=1000):
+    unit = get_display_unit(history[0]["unit"])
+    times = [h["mean"] for h in history]
+    dates = [dateutil.parser.isoparse(h["timestamp"]) for h in history]
+    commits = [h["message"] for h in history]
+    source_data = dict(x=dates, y=times, commit=commits)
+    source = bokeh.models.ColumnDataSource(data=source_data)
+
+    tooltips = [
+        ("date", "$x{%F}"),
+        ("mean", "$y{0.000}"),
+        ("unit", unit),
+        ("commit", "@commit"),
+    ]
+    hover = bokeh.models.HoverTool(
+        tooltips=tooltips,
+        formatters={"$x": "datetime"},
+    )
+    p = bokeh.plotting.figure(
+        x_axis_type="datetime",
+        plot_height=height,
+        plot_width=width,
+        toolbar_location=None,
+        tools=[hover],
+    )
+
+    p.xaxis.formatter = get_date_format()
+    p.xaxis.major_label_orientation = 1
+    p.yaxis.axis_label = unit
+    p.circle(source=source)
+    p.line(source=source)
+
+    return p

conbench/app/benchmarks.py

@@ -1,9 +1,13 @@
+import json
+
+import bokeh
 import flask_login
 import flask_wtf
 import wtforms as w
 
 from ..app import rule
 from ..app._endpoint import AppEndpoint
+from ..app._plots import time_series_plot
 from ..app._util import augment, display_time
 from ..config import Config
 
@@ -122,6 +126,8 @@ def page(self, benchmark, run, form):
             benchmark=benchmark,
             run=run,
             form=form,
+            resources=bokeh.resources.CDN.render(),
+            plot_history=self._get_history_plot(benchmark),
         )
 
     def get(self, benchmark_id):
@@ -162,6 +168,20 @@ def _get_benchmark_and_run(self, benchmark_id):
             run = self.get_display_run(benchmark["run_id"])
         return benchmark, run
 
+    def _get_history_plot(self, benchmark):
+        return json.dumps(
+            bokeh.embed.json_item(
+                time_series_plot(self._get_history(benchmark)), "plot-history"
+            )
+        )
+
+    def _get_history(self, benchmark):
+        response = self.api_get("api.history", benchmark_id=benchmark["id"])
+        if response.status_code != 200:
+            self.flash("Error getting history.")
+            return []
+        return response.json
+
 
 class BenchmarkList(AppEndpoint, ContextMixin):
     def page(self, benchmarks):

conbench/app/compare.py

@@ -6,7 +6,7 @@
 
 from ..app import rule
 from ..app._endpoint import AppEndpoint
-from ..app._plots import simple_bar_plot
+from ..app._plots import simple_bar_plot, time_series_plot
 from ..app.benchmarks import BenchmarkMixin, RunMixin
 from ..config import Config
 
@@ -17,7 +17,7 @@ def page(self, comparisons, regressions, improvements, baseline_id, contender_id
         unknown = "unknown...unknown"
         compare_runs_url = f.url_for("app.compare-runs", compare_ids=unknown)
         compare_batches_url = f.url_for("app.compare-batches", compare_ids=unknown)
-        baseline, contender, plot = None, None, None
+        baseline, contender, plot, plot_history = None, None, None, None
         baseline_run, contender_run = None, None
 
         if comparisons and self.type == "batch":
@@ -31,6 +31,7 @@ def page(self, comparisons, regressions, improvements, baseline_id, contender_id
             baseline = self.get_display_benchmark(baseline_id)
             contender = self.get_display_benchmark(contender_id)
             plot = self._get_plot(baseline, contender)
+            plot_history = self._get_history_plot(contender)
             baseline_run_id = baseline["run_id"]
             contender_run_id = baseline["run_id"]
             compare = f"{baseline_run_id}...{contender_run_id}"
@@ -48,6 +49,7 @@ def page(self, comparisons, regressions, improvements, baseline_id, contender_id
             title=self.title,
             type=self.type,
             plot=plot,
+            plot_history=plot_history,
             resources=bokeh.resources.CDN.render(),
             comparisons=comparisons,
             regressions=regressions,
@@ -130,6 +132,21 @@ def _compare(self, params):
 
         return comparisons, regressions, improvements
 
+    def _get_history_plot(self, benchmark):
+        return json.dumps(
+            bokeh.embed.json_item(
+                time_series_plot(self._get_history(benchmark)),
+                "plot-history",
+            ),
+        )
+
+    def _get_history(self, benchmark):
+        response = self.api_get("api.history", benchmark_id=benchmark["id"])
+        if response.status_code != 200:
+            self.flash("Error getting history.")
+            return []
+        return response.json
+
 
 class CompareBenchmarks(Compare):
     type = "benchmark"

conbench/templates/batch.html

@@ -83,7 +83,9 @@
 
 {% block scripts %}
 {{super()}}
+
 {{ resources | safe }}
+
 <script type="text/javascript">
 $(document).ready(function() {
     {% for plot in plots %}

conbench/templates/benchmark-entity.html

@@ -15,6 +15,10 @@
       </ol>
     </nav>
 
+
+    <div id="plot-history" align="center"></div>
+    <br/>
+
     <div class="row">
       <div class="col-md-6">
         <ul class="list-group">
@@ -132,6 +136,9 @@
 
 {% block scripts %}
 {{super()}}
+
+{{ resources | safe }}
+
 <script type="text/javascript">
 $(document).ready(function($) {
     $("#benchmark-form").find("#delete").attr("type", "button");
@@ -141,5 +148,10 @@
     $("#benchmark-form").find("#delete").attr("data-href", "{{ url_for('app.benchmark', benchmark_id=benchmark.id) }}");
     $("#benchmark-form").find("#delete").attr("data-message", "<ul><li>Delete benchmark: <strong>{{ benchmark.id }}</strong></li></ul>");
 });
+
+$(document).ready(function() {
+    Bokeh.embed.embed_item({{ plot_history | safe }});
+});
+
 </script>
 {% endblock %}

conbench/templates/compare-entity.html

@@ -71,6 +71,8 @@
 
     </div>
 
+    <div id="plot-history" align="center"></div>
+    <br/>
 
     {% if baseline %}
     <div class="row">
@@ -273,12 +275,18 @@
 
 {% block scripts %}
 {{super()}}
+
 {{ resources | safe }}
+
 <script type="text/javascript">
 $(document).ready(function() {
     Bokeh.embed.embed_item({{ plot | safe }});
 });
 
+$(document).ready(function() {
+    Bokeh.embed.embed_item({{ plot_history | safe }});
+});
+
 $(document).ready(function() {
     $('#unit-tooltip').tooltip()
    });