Refactored test case filter feature to increase code reuse.

6 files changed, 159 insertions, 158 deletions

diff --git a/web/analysis/index.html b/web/analysis/index.shtml
index 6c70a77..4c2c827 100644
--- a/web/analysis/index.html
+++ b/web/analysis/index.shtml
@@ -41,6 +41,14 @@ $("#mainPageLink").attr("href", "http://" + location.host + "/bm2");
 <div id="div_availableContexts" style="display:none">
 
 <br />
+
+<table style="border:0">
+<tr>
+
+<td valign="top" style="border:0">
+
+<!-- BEGIN Action table -------------------------------------------- -->
+
 <table id="actionTable">
   <tr id="actionTable_header"><th>Action</th><th>Arguments</th></tr>
   <tr>
@@ -169,6 +177,19 @@ $("#mainPageLink").attr("href", "http://" + location.host + "/bm2");
     </td>
   </tr>
 </table>
+<!-- END Action table -------------------------------------------- -->
+
+</td>
+
+<td valign="top" style="border:0">
+<!-- BEGIN Test case filter -------------------------------------------- -->
+<!--#include virtual="../global/tcfilter.html" -->
+<!-- END Test case filter -------------------------------------------- -->
+</td>
+
+</tr>
+</table>
+
 <br />
 <br />
 
@@ -206,23 +227,6 @@ $("#mainPageLink").attr("href", "http://" + location.host + "/bm2");
 <span style="font-size:14; color:red">--- no matching contexts ---</span>
 </div>
 
-<div id="div_matchingTestCases" style="display:none">
-<br />
-<br />
-<span style="font-size:14; font-weight:bold">Test Cases:</span>
-<a href="javascript::void(0)" onclick="selectAllTestCases(); return false;">
-   select all</a>
-&nbsp;&nbsp;&nbsp;
-<a href="javascript::void(0)" onclick="clearAllTestCases(); return false;">
-   clear all</a>
-<table id="testCasesTable">
-<thead>
-</thead>
-<tbody>
-</tbody>
-</table>
-
-</div>
 
 </div>
 
diff --git a/web/analysis/main.js b/web/analysis/main.js
index 196e6ec..b5e4d80 100644
--- a/web/analysis/main.js
+++ b/web/analysis/main.js
@@ -5,22 +5,9 @@ var testCaseChecked = new Array();
 // --- END Global variables -------------------------------------
 
 
-
-function selectAllTestCases() {
-    $("#testCasesTable input").attr("checked", true);
-    updateActions();
-}
-
-function clearAllTestCases() {
-    $("#testCasesTable input").attr("checked", false);
-    updateActions();
-}
-
 function fetchTestCases() {
     updateStatus("fetching matching test cases ...", true);
 
-    $("#div_matchingTestCases").css("display", "none");
-
     context1_ = context1();
     if (context1_ == null) {
         updateStatus("fetching matching test cases ... done", false);
@@ -30,7 +17,7 @@ function fetchTestCases() {
     context2_ = context2();
 
     // Save current selection ...
-    $("#testCasesTable input").each(function() {
+    $("#test_cases input").each(function() {
         testCaseChecked[this.name] = this.checked;
     });
 
@@ -77,28 +64,11 @@ function fetchTestCases() {
                         "fetching matching test cases ... done", false);
                     updateStatus("", false);
 
-                    // Remove all rows ...
-                    $("#testCasesTable tr").remove();
-
-                    // Insert new rows ...
-                    testCases = data.testcases;
-                    html = "";
-                    for (i = 0; i < testCases.length; ++i) {
-                        testCase = testCases[i];
-                        html += "<tr>";
-                        html += "<td><input name=\"" + testCase + "\"" +
-                            "type=\"checkbox\" " +
-                            "onclick=\"updateActions()\"></td>";
-                        html += "<td>" + testCase + "</td>";
-                        html += "</tr>";
-                    }
-                    $("#testCasesTable > tbody:last").append(html);
-
-                    // Select all rows ...
-                    //$("#testCasesTable input").attr("checked", "true");
+                    updateTestCaseTable(
+                        "#test_cases", data.testcases, 5, "updateActions()");
 
                     // Restore last selection as much as possible ...
-                    $("#testCasesTable input").each(function() {
+                    $("#test_cases input").each(function() {
                         if (this.name in testCaseChecked) {
                             this.checked = testCaseChecked[this.name];
                         } else {
@@ -106,8 +76,6 @@ function fetchTestCases() {
                         }
                     });
 
-                    $("#div_matchingTestCases").css("display", "block");
-
                     updateActions();
                 }
             }
@@ -155,7 +123,7 @@ function updateActions() {
     context2_ = context2();
 
     testCaseFilter = "";
-    $("#testCasesTable input").each(function() {
+    $("#test_cases input").each(function() {
         if (this.checked) {
             testCaseFilter += " " + this.name;
         }
@@ -504,7 +472,6 @@ function clickContextRadioButton(cb, col) {
 
             trExtra.remove();
         }
-
     }
 
     highlightContextsTable();
@@ -519,5 +486,14 @@ $(document).ready(function() {
     $("#dur_tol_min option[value='3']").attr("selected", true);
     $("#dur_tol_max option[value='10']").attr("selected", true);
 
+    // Ensure that 'select all' and 'clear all' links in the test case filter
+    // also call updateActions() when clicked:
+    $("#testCaseFilter_selectAll").bind("click", function() {
+        updateActions();
+    });
+    $("#testCaseFilter_clearAll").bind("click", function() {
+        updateActions();
+    });
+
     fetchContexts();
 });
diff --git a/web/global/global.js b/web/global/global.js
index 13c0917..8ca9493 100644
--- a/web/global/global.js
+++ b/web/global/global.js
@@ -229,3 +229,67 @@ function initTablesorter() {
         type: "numeric"
     });
 }
+
+// Updates the test case filter table.
+// - tableSel is the JQuery selector for the table.
+// - testCases is the array of test case names.
+// - nc is the maximum number of columns.
+function updateTestCaseTable(tableSel, testCases, nc, onclickHandler) {
+
+    // Clear table:
+    $(tableSel + " tr").remove();
+
+    // Populate table:
+
+    var nr = Math.ceil(testCases.length / nc); // # of rows
+    var c1 = testCases.length % nc; // lowest column index for empty bottom cell
+
+    var html = "";
+    for (r = 0; r < nr; ++r) {
+        if ((r < (nr - 1)) || (nc > 1))
+            html += "<tr>";
+        for (c = 0; c < nc; ++c) {
+            if ((r == (nr - 1)) && (c1 > 0) && (c >= c1)) {
+                if (r > 0)
+                    html += "<td></td>"; // Fill in empty bottom cell
+            } else {
+                var index = -1;
+                if (c <= c1)
+                    index = r + c * nr;
+                else
+                    index = r + c1 * nr + (c - c1) * (nr - 1);
+
+                var name = testCases[index];
+                html += "<td style=\"white-space: nowrap\">";
+                html += "<input type=\"checkbox\" id=\"tc" + index + "\" " +
+                    "name=\"" + name + "\"";
+                if (!(onclickHandler === undefined))
+                    html += "onclick=\"" + onclickHandler + "\"";
+                html += "/>";
+                html += "<label for=\"tc" + index + "\">" + name +
+                    "</label>";
+                html += "</td>";
+            }
+        }
+        if ((r < (nr - 1)) || (nc > 1))
+            html += "</tr>";
+    }
+
+    $(tableSel).append(html);
+}
+
+// Toggles the visibilities of two div elements in a mutually exclusive
+// fashion (i.e. exactly one of them is visible at any time).
+// hiddenSel and shownSel are the JQuery selectors for the div elements that
+// represent the hidden and shown state respectively.
+function toggleVisibility(hiddenSel, shownSel) {
+    var divObj_hidden = $(hiddenSel);
+    var divObj_shown = $(shownSel);
+    if (divObj_shown.css("display") == "none") {
+        divObj_shown.css("display", "block");
+        divObj_hidden.css("display", "none");
+    } else {
+        divObj_shown.css("display", "none");
+        divObj_hidden.css("display", "block");
+    }
+}
diff --git a/web/global/tcfilter.html b/web/global/tcfilter.html
new file mode 100644
index 0000000..d99a89f
--- /dev/null
+++ b/web/global/tcfilter.html
@@ -0,0 +1,57 @@
+<table style="border:0">
+<tr>
+<td style="border:0">
+<fieldset>
+<legend style="font-size:16px; font-weight:bold">Test Cases</legend>
+
+<table style="border:0">
+<tr>
+<td style="border:0; background-color:#eee">
+Only benchmarks matching the selected test cases are considered (<b>note:</b>
+selecting none is equivalent to selecting all).
+</td>
+</tr>
+</table>
+
+<div id="div_testCaseFilter_hidden" style="display:block">
+<a id="link_testCaseFilter" href="javascript::void(0)"
+   style="text-decoration:none"
+   onclick="toggleVisibility('#div_testCaseFilter_hidden', '#div_testCaseFilter_shown')">show</a>
+</div> <!-- div_testCaseFilter_hidden -->
+
+<div id="div_testCaseFilter_shown" style="display:none">
+<a id="link_testCaseFilter" href="javascript::void(0)"
+   style="text-decoration:none"
+   onclick="toggleVisibility('#div_testCaseFilter_hidden', '#div_testCaseFilter_shown')">hide</a>
+
+&nbsp;&nbsp;&nbsp;
+
+<a id="testCaseFilter_selectAll" href="javascript::void(0)"
+   style="text-decoration:none">
+   select all</a>
+<script type="text/javascript">
+    $("#testCaseFilter_selectAll").bind("click", function() {
+        $("#test_cases input").attr("checked", true);
+    });
+</script>
+
+&nbsp;&nbsp;&nbsp;
+
+<a id="testCaseFilter_clearAll" href="javascript::void(0)"
+   style="text-decoration:none">
+   clear all</a>
+<script type="text/javascript">
+    $("#testCaseFilter_clearAll").bind("click", function() {
+        $("#test_cases input").attr("checked", false);
+    });
+</script>
+
+<table id="test_cases">
+</table>
+
+</div> <!-- div_testCaseFilter_shown -->
+
+</fieldset>
+</td>
+</tr>
+</table>
diff --git a/web/topchanges/index.shtml b/web/topchanges/index.shtml
index 03623b6..c145bdc 100644
--- a/web/topchanges/index.shtml
+++ b/web/topchanges/index.shtml
@@ -108,51 +108,10 @@ combinations.
 
 <td valign="top" style="border:0">
 <!-- BEGIN Test case filter -------------------------------------------- -->
-
-<table style="border:0">
-<tr>
-<td style="border:0">
-<fieldset>
-<legend style="font-size:16px; font-weight:bold">Test Cases</legend>
-
-<table style="border:0">
-<tr>
-<td style="border:0; background-color:#eee">
-Only benchmarks matching the selected test cases are considered (<b>note:</b>
-selecting none is equivalent to selecting all).
-</td>
-</tr>
-</table>
-
-<div id="div_testCaseFilter_hidden" style="display:block">
-<a id="link_testCaseFilter" href="javascript::void(0)"
-   style="text-decoration:none" onclick="toggleTestCaseFilter()">show</a>
-</div> <!-- div_testCaseFilter_hidden -->
-
-<div id="div_testCaseFilter_shown" style="display:none">
-<a id="link_testCaseFilter" href="javascript::void(0)"
-   style="text-decoration:none" onclick="toggleTestCaseFilter()">hide</a>
-&nbsp;&nbsp;&nbsp;
-<a href="javascript::void(0)" style="text-decoration:none"
-   onclick="$('#test_cases input').attr('checked', true); return false;">
-   select all</a>
-&nbsp;&nbsp;&nbsp;
-<a href="javascript::void(0)" style="text-decoration:none"
-   onclick="$('#test_cases input').attr('checked', false); return false;">
-   clear all</a>
-
-<table id="test_cases">
-</table>
-
-</div> <!-- div_testCaseFilter_shown -->
-
-</fieldset>
-</td>
-</tr>
-</table>
-
+<!--#include virtual="../global/tcfilter.html" -->
 <!-- END Test case filter -------------------------------------------- -->
 </td>
+
 </tr>
 </table>
 
diff --git a/web/topchanges/main.js b/web/topchanges/main.js
index cb9a208..dbc4fc0 100644
--- a/web/topchanges/main.js
+++ b/web/topchanges/main.js
@@ -10,66 +10,8 @@ var sha1s = null;
 var benchmarks = null;
 var metrics = null;
 
-// Test cases with changes:
-var testCases = null;
-
 // --- END Global variables -------------------------------------
 
-function toggleTestCaseFilter() {
-    var divObj_hidden = $("#div_testCaseFilter_hidden");
-    var divObj_shown = $("#div_testCaseFilter_shown");
-    if (divObj_shown.css("display") == "none") {
-        divObj_shown.css("display", "block");
-        divObj_hidden.css("display", "none");
-    } else {
-        divObj_shown.css("display", "none");
-        divObj_hidden.css("display", "block");
-    }
-}
-
-
-function updateTestCaseTable() {
-
-    // Clear table:
-    $("#test_cases tr").remove();
-
-    // Populate table:
-
-    var nc = 8; // # of columns
-    var nr = Math.ceil(testCases.length / nc); // # of rows
-    var c1 = testCases.length % nc; // lowest column index for empty bottom cell
-
-    var html = "";
-    for (r = 0; r < nr; ++r) {
-        if ((r < (nr - 1)) || (nc > 1))
-            html += "<tr>";
-        for (c = 0; c < nc; ++c) {
-            if ((r == (nr - 1)) && (c >= c1) && (!(nc == 1))) {
-                html += "<td></td>"; // Fill in empty bottom cell
-            } else {
-                var index = -1;
-                if (c <= c1)
-                    index = r + c * nr;
-                else
-                    index = r + c1 * nr + (c - c1) * (nr - 1);
-
-                var name = testCases[index];
-                html += "<td style=\"white-space: nowrap\">";
-                html += "<input type=\"checkbox\" id=\"tc" + index + "\" " +
-                    "name=\"" + name + "\"/>";
-                html += "<label for=\"tc" + index + "\">" + name +
-                    "</label>";
-                html += "</td>";
-            }
-        }
-        if ((r < (nr - 1)) || (nc > 1))
-            html += "</tr>";
-    }
-
-    $("#test_cases").append(html);
-}
-
-
 // ### 2 B DOCUMENTED!
 function timeSeriesURL(
     database, hostId, platformId, branchId, sha1Id, benchmarkId, metricId,
@@ -307,7 +249,6 @@ function fetchNameMappings() {
                     benchmarks = data.benchmarks;
                     metrics = data.metrics;
 
-                    updateTestCaseTable();
                     updateMainTable();
                 }
             }
@@ -363,7 +304,7 @@ function fetchTestCases() {
                     updateStatus("fetching test cases ... done", false);
                     updateStatus("", false);
 
-                    testCases = data.testCases;
+                    updateTestCaseTable("#test_cases", data.testCases, 8);
 
                     fetchNameMappings();
                 }