Initial rudimentary version of rankings page.

6 files changed, 393 insertions, 6 deletions

diff --git a/web/getstats/index.html b/web/getstats/index.html
index 6adab2c..0d7ec62 100644
--- a/web/getstats/index.html
+++ b/web/getstats/index.html
@@ -39,13 +39,13 @@
   <tr><th>Action</th><th>Arguments</th></tr>
   <tr>
     <td style="padding-top:5px; padding-bottom:5px;">
-      <a class="disabledActionButton" id="action_context1_stats"
+      <a class="disabledActionButton" id="action_stats1"
         href="javascript::void(0)" onclick="return false">
         Show basic statistics for Context <span class="context1">
         &nbsp;1&nbsp;</span></a>
       <script type="text/javascript">
         setTooltip(
-            $("#action_context1_stats"),
+            $("#action_stats1"),
             "For Context 1, this action shows basic statistics for " +
                 "the observations produced by each benchmark.");
       </script>
@@ -53,13 +53,13 @@
   </tr>
   <tr>
     <td style="padding-top:5px; padding-bottom:5px;">
-      <a class="disabledActionButton" id="action_context1_rankings"
+      <a class="disabledActionButton" id="action_rankings"
         href="javascript::void(0)" onclick="return false">
         Show rankings for Context <span class="context1">
         &nbsp;1&nbsp;</span></a>
       <script type="text/javascript">
         setTooltip(
-            $("#action_context1_rankings"),
+            $("#action_rankings"),
             "For Context 1, this action ranks benchmarks on different " +
                 "criteria.<br /><br />The idea is to prioritize benchmarks " +
                 "that deserve attention (either because they reflect stable " +
diff --git a/web/getstats/main.js b/web/getstats/main.js
index ff8e551..1c12987 100644
--- a/web/getstats/main.js
+++ b/web/getstats/main.js
@@ -154,6 +154,17 @@ function updateActions() {
     url_stats1 += "&sha1=" + context1_["sha1"];
     url_stats1 += "&testcasefilter=" + testCaseFilter;
 
+    // --- rankings ---
+    url_rankings = "rankings.shtml";
+    url_rankings += "?db=" + $('#database').val();
+    url_rankings += "&cmd=rankings";
+    url_rankings += "&host=" + encodeURIComponent(context1_["host"]);
+    url_rankings += "&platform=" + encodeURIComponent(context1_["platform"]);
+    url_rankings += "&branch=" + encodeURIComponent(context1_["branch"]);
+    url_rankings += "&sha1=" + context1_["sha1"];
+    // ### Test case filter unsupported for now:
+    //url_rankings += "&testcasefilter=" + testCaseFilter;
+
     // --- stats2 ---
     if (context2_["host"] != "") {
         url_stats2 = "stats2.html";
@@ -203,7 +214,8 @@ function updateActions() {
         $("#tsstats_nsnapshots").text(0);
     }
 
-    setActionUrl("action_context1_stats", url_stats1);
+    setActionUrl("action_stats1", url_stats1);
+    setActionUrl("action_rankings", url_rankings);
     setActionUrl("action_stats2", url_stats2);
     setActionUrl("action_tsstats", url_tsstats);
 }
diff --git a/web/getstats/rankings.js b/web/getstats/rankings.js
new file mode 100644
index 0000000..845449e
--- /dev/null
+++ b/web/getstats/rankings.js
@@ -0,0 +1,246 @@
+function selectRankingTable() {
+    var val = $("#select_rankingTable").attr("value");
+    var types = ["qs", "lcssr", "lcssi", "lcss1r", "lcss1i"];
+    for (index in types) {
+        var type = types[index];
+        $("#div_rankingTable_" + type).css(
+            "display", (val == type) ? "block" : "none");
+    }
+
+    var nrows = $("#rankingTable_" + val).find("tr").length - 1;
+    $("#rankingTable_nrows").text(nrows + ((nrows == 1) ? " row" : " rows"));
+}
+
+// ### Same function in tsstats.js -> move both to a common place? tsbmbody.js?
+// 2 B DONE!
+function clickBenchmarkCheckbox(
+    cb, tableSel, database, host, platform, branch, sha11, sha12, benchmark,
+    metric, difftol, durtolmin, durtolmax) {
+
+    if (cb.checked) {
+        // Deselect all other benchmarks:
+        $(tableSel + " input").attr("checked", false);
+        cb.checked = true;
+        index = cb.id.match(/bm_cb:(\d+)/)[1];
+
+        // Fetch and plot time series:
+        fetchTimeSeries(
+            database, host, platform, branch, sha11, sha12, benchmark, metric,
+            difftol, durtolmin, durtolmax, true);
+    } else {
+        clearPlot();
+    }
+}
+
+function populateRankingTable(
+    tableSel, rankings, database, host, platform, branch, sha11, sha12,
+    difftol, durtolmin, durtolmax, bmarkId2Name, metricId2Name) {
+
+    // Remove all rows below the header ...
+    $(tableSel + " tr:gt(0)").remove();
+
+    var html = "";
+    for (var i = 0; i < rankings.length; ++i) {
+
+        row = rankings[i];
+        bmarkId = row[0];
+        metricId = row[1];
+        context1Id = row[2]; // unused?
+        pos = row[3];
+        val = row[4];
+
+        benchmark = bmarkId2Name[bmarkId];
+        metric = metricId2Name[metricId];
+
+        html += "<tr>"
+
+        html += "<td><input id=\"bm_cb:" + i +
+            "\" type=\"checkbox\" " +
+            "onclick=\"" +
+            "clickBenchmarkCheckbox(this, '" + tableSel + "', '" +
+            database + "', '" + host + "', '" +
+            platform + "', '" + branch + "', '" +
+            sha11 + "', '" + sha12 + "', '" +
+            benchmark + "', '" + metric + "', " +
+            difftol + ", " + durtolmin + ", " + durtolmax +
+            ")\"</td>";
+
+        html += "<td style=\"text-align:right\">" + pos + "</td>";
+        html += "<td>&lt;trend&gt;</td>";
+        html += "<td style=\"text-align:right\">" + val + "</td>";
+        html += "<td class=\"metric\">" + metric + "</td>";
+        html += "<td class=\"benchmark\">" + benchmark + "</td>";
+        html += "</tr>";
+    }
+
+    $(tableSel + " > tbody:last").append(html);
+}
+
+function fetchRankings(database, host, platform, branch, sha1) {
+    updateStatus("fetching rankings ...", true);
+
+    query = "?db=" + database +
+        "&cmd=rankings" +
+        "&host=" + encodeURIComponent(host) +
+        "&platform=" + encodeURIComponent(platform) +
+        "&branch=" + encodeURIComponent(branch) +
+        "&sha1=" + sha1;
+
+    url = "http://" + location.host + "/cgi-bin/getstatswrapper" + query;
+    //alert("url: >" + url + "<");
+
+    $.ajax({
+        url: url,
+        type: "GET",
+        dataType: "json",
+
+        success: function(data, textStatus, request) {
+            if (request.readyState == 4) {
+                if (request.status == 200) {
+
+                    if (data.error != null) {
+                        updateStatus(
+                            "fetching rankings ... failed: " +
+                                data.error, false);
+                        return
+                    }
+
+                    updateStatus("fetching rankings ... done", false);
+                    updateStatus("", false);
+
+                    var sha11 = data.snapshots[0][0];
+                    var sha12 = data.snapshots[data.snapshots.length - 1][0];
+
+
+                    // Show context ...
+                    $("#main_context_database").text(data.database);
+                    $("#main_context_host").text(data.host);
+                    $("#main_context_platform").text(data.platform);
+                    $("#main_context_branch").text(data.branch);
+                    $("#main_context_sha11").text(sha11);
+                    $("#main_context_sha12").text(sha12);
+                    $("#main_context_difftol").text("---");
+                    $("#main_context_durtolmin").text("---");
+                    $("#main_context_durtolmax").text("---");
+
+                    setSnapshots(data.snapshots);
+
+
+                    // ### The tolerance values should automatically be
+                    // set to those hardcoded in finalizeresults.py!
+                    // ... 2 B DONE!
+                    difftol = 1.1;
+                    durtolmin = 3;
+                    durtolmax = 30;
+
+                    var bmarkId2Name = [];
+                    for (var i = 0; i < data.benchmarks.length; ++i) {
+                        bmarkInfo = data.benchmarks[i];
+                        bmarkId2Name[bmarkInfo[0]] = bmarkInfo[1];
+                    }
+
+                    var metricId2Name = [];
+                    for (var i = 0; i < data.metrics.length; ++i) {
+                        metricInfo = data.metrics[i];
+                        metricId2Name[metricInfo[0]] = metricInfo[1];
+                    }
+
+                    rankings = {
+                        "qs": data.rankings.qs,
+                        "lcssr": data.rankings.lcssr,
+                        "lcssi": data.rankings.lcssi,
+                        "lcss1r": data.rankings.lcss1r,
+                        "lcss1i": data.rankings.lcss1i
+                    };
+                    for (key in rankings)
+                        populateRankingTable(
+                            "#rankingTable_" + key, rankings[key],
+                            data.database, data.host, data.platform,
+                            data.branch, sha11, sha12, difftol, durtolmin,
+                            durtolmax, bmarkId2Name, metricId2Name);
+
+
+                    // Initially show the QS statistic table:
+                    $("#select_rankingTable").attr("value", "qs");
+                    selectRankingTable();
+
+                    $("#div_tsbm_border").css("display", "block");
+                    $("#div_tsbm").css("display", "block");
+                    $("#div_perBenchmarkStats").css("display", "block");
+
+                    $("#div_context").css("display", "block");
+                    $("#div_rankings").css("display", "block");
+
+                    clearPlot();
+                }
+            }
+        },
+
+        error: function(request, textStatus, errorThrown) {
+            descr = errorThrown;
+            if (errorThrown == null) {
+                descr = "undefined error - is the server down?";
+            }
+            updateStatus("fetching rankings ... error: " + descr, false);
+        }
+
+        // complete: function(request, textStatus) {
+        //     alert("complete; request.status: " + request.status)
+        // }
+
+    });
+}
+
+
+function initRankingTable(tableSel) {
+    // Note: The nth-child selector below uses 1-based indexing!
+    setTooltip($(tableSel).find("th:nth-child(2)"), "---");
+    setTooltip($(tableSel).find("th:nth-child(3)"), "---");
+}
+
+$(document).ready(function() {
+
+    initTablesorter();
+    initTSBMBody();
+
+    initRankingTable("#rankingTable_qs");
+    initRankingTable("#rankingTable_lcssr");
+    initRankingTable("#rankingTable_lcssi");
+    initRankingTable("#rankingTable_lcss1r");
+    initRankingTable("#rankingTable_lcss1i");
+
+    var args = queryStringArgs();
+
+    database = extractArg(args, "db");
+    if (database == "") {
+        alert("ERROR: invalid query string (empty database)");
+        return;
+    }
+
+    host = extractArg(args, "host");
+    if (host == "") {
+        alert("ERROR: invalid query string (empty host)");
+        return;
+    }
+    platform = extractArg(args, "platform");
+    if (platform == "") {
+        alert("ERROR: invalid query string (empty platform)");
+        return;
+    }
+    branch = extractArg(args, "branch");
+    if (branch == "") {
+        alert("ERROR: invalid query string (empty branch)");
+        return;
+    }
+    sha1 = extractArg(args, "sha1");
+    if (sha1 == "") {
+        alert("ERROR: invalid query string (empty sha1)");
+        return;
+    }
+
+    $("#div_tsbm_border").css("display", "none");
+    $("#div_tsbm").css("display", "none");
+    $("#div_rankings").css("display", "none");
+
+    fetchRankings(database, host, platform, branch, sha1);
+});
diff --git a/web/getstats/rankings.shtml b/web/getstats/rankings.shtml
new file mode 100644
index 0000000..fbd6d6a
--- /dev/null
+++ b/web/getstats/rankings.shtml
@@ -0,0 +1,117 @@
+<html>
+
+<head>
+
+    <title>BM2 - Rankings</title>
+
+    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
+    <script type="text/javascript" src="flot/jquery.flot.js"></script>
+    <script type="text/javascript" src="flot/jquery.flot.selection.js"></script>
+    <script type="text/javascript" src="tablesorter/jquery.tablesorter.js">
+    </script>
+    <script type="text/javascript" src="boxover/boxover.js"></script>
+    <script type="text/javascript" src="global.js"></script>
+    <script type="text/javascript" src="tsbmbody.js"></script>
+    <script type="text/javascript" src="rankings.js"></script>
+
+    <link type="text/css" rel="stylesheet" href="style.css" />
+    <link type="text/css" rel="stylesheet" href="tablesorter/docs/css/jq.css" />
+    <link type="text/css" rel="stylesheet"
+        href="tablesorter/themes/bm/style.css" />
+
+</head>
+
+<body>
+
+<span id="title" style="font-size:18; font-weight:bold">
+BM2 - Rankings</span>
+&nbsp;&nbsp;&nbsp;
+<span style="white-space:nowrap">
+<span id="status1">no status</span>
+<img alt="spinner1" id="spinner1" src="images/ajax-spinner.gif"
+    style="display:none"/>
+<img alt="nospinner1" id="nospinner1" src="images/nospinner.png"
+    style="display:inline"/>
+</span>
+
+<br />
+<a id="mainPageLink" href="">main page</a>
+<script type="text/javascript">
+$("#mainPageLink").attr("href", "http://" + location.host + "/bm2");
+</script>
+<br />
+<br />
+
+
+<div id="div_tsbm_border"
+  style="display:none; border-style:solid; border-width:2px; padding:5px">
+<!--#include file="tsbmbody.html" -->
+</div>
+
+
+<div id="div_rankings" style="display:none">
+
+<span id="status2">no status</span>
+<img alt="spinner2" id="spinner2" src="images/ajax-spinner.gif"
+    style="display:none"/>
+<img alt="nospinner2" id="nospinner2" src="images/nospinner.png"
+    style="display:inline"/>
+
+<!-- *** BEGIN Rankings *********************************** -->
+<br />
+<!-- <span style="font-size:14; font-weight:bold">Benchmarks:</span> -->
+<select id="select_rankingTable" onchange="selectRankingTable()">
+  <option value="qs" selected=1>QS</option>
+  <option value="lcssr">LCSSR</option>
+  <option value="lcssi">LCSSI</option>
+  <option value="lcss1r">LCSS1R</option>
+  <option value="lcss1i">LCSS1I</option>
+</select>
+
+<br />
+<span id="rankingTable_nrows">no rows</span>
+
+<br />
+<div style="overflow:auto; height:400px; border-style:solid; border-width:1px;">
+
+
+<div id="div_rankingTable_qs" style="display:block">
+<table id="rankingTable_qs" border="0" cellpadding="0" cellspacing="1">
+<!--#include file="rankingtabledef.html" -->
+</table>
+</div> <!-- div_rankingTable_qs -->
+
+<div id="div_rankingTable_lcssr" style="display:block">
+<table id="rankingTable_lcssr" border="0" cellpadding="0" cellspacing="1">
+<!--#include file="rankingtabledef.html" -->
+</table>
+</div> <!-- div_rankingTable_lcssr -->
+
+<div id="div_rankingTable_lcssi" style="display:block">
+<table id="rankingTable_lcssi" border="0" cellpadding="0" cellspacing="1">
+<!--#include file="rankingtabledef.html" -->
+</table>
+</div> <!-- div_rankingTable_lcssi -->
+
+<div id="div_rankingTable_lcss1r" style="display:block">
+<table id="rankingTable_lcss1r" border="0" cellpadding="0" cellspacing="1">
+<!--#include file="rankingtabledef.html" -->
+</table>
+</div> <!-- div_rankingTable_lcss1r -->
+
+<div id="div_rankingTable_lcss1i" style="display:block">
+<table id="rankingTable_lcss1i" border="0" cellpadding="0" cellspacing="1">
+<!--#include file="rankingtabledef.html" -->
+</table>
+</div> <!-- div_rankingTable_lcss1i -->
+
+
+
+</div>
+<!-- *** END Rankings *********************************** -->
+
+</div> <!-- div_rankings -->
+
+</body>
+
+</html>
diff --git a/web/getstats/rankingtabledef.html b/web/getstats/rankingtabledef.html
new file mode 100644
index 0000000..5632552
--- /dev/null
+++ b/web/getstats/rankingtabledef.html
@@ -0,0 +1,12 @@
+<thead>
+<tr>
+    <th></th> <!-- check box -->
+    <th>Pos</th>
+    <th>Trend</th>
+    <th>Value</th>
+    <th>Metric</th>
+    <th>Benchmark</th>
+</tr>
+</thead>
+<tbody>
+</tbody>
diff --git a/web/getstats/stats2.js b/web/getstats/stats2.js
index b82d33f..ecb64de 100644
--- a/web/getstats/stats2.js
+++ b/web/getstats/stats2.js
@@ -193,7 +193,7 @@ function fetchResultDetails(benchmark, metric)  {
                     // Show samples ...
                     samples = { "1": data.sample1, "2": data.sample2 };
                     var currTime = dateToTimestamp(new Date());
-                    for (key in samples)  {
+                    for (key in samples) {
 
                         // $("#sample" + key + " option").remove();