Misc. UI improvements. Added tooltips.

6 files changed, 81 insertions, 45 deletions

diff --git a/scripts/gettimeseriesstats.py b/scripts/gettimeseriesstats.py
index 08e2d15..b09ae78 100644
--- a/scripts/gettimeseriesstats.py
+++ b/scripts/gettimeseriesstats.py
@@ -63,8 +63,8 @@ class GetTimeSeriesStats:
         max_lcda = -1
 
         # Compute basic stats for each time series:
-        #for benchmark_id, metric_id in bmark_metrics[800:810]:
-        for benchmark_id, metric_id in bmark_metrics:
+        for benchmark_id, metric_id in bmark_metrics[800:810]:
+        #for benchmark_id, metric_id in bmark_metrics:
 
             benchmark = idToText("benchmark", benchmark_id)
             # if benchmark != "tst_qhostinfo:lookupSpeed(WithoutCache)":
diff --git a/web/getstats/help_tsbmplot.html b/web/getstats/help_tsbmplot.html
index c662e2d..90e1176 100644
--- a/web/getstats/help_tsbmplot.html
+++ b/web/getstats/help_tsbmplot.html
@@ -13,9 +13,6 @@
     indicate the number of invalid observations.
 
     <br /><br />
-    The maximum sample size range is shown on the y axis to the right.
-
-    <br /><br />
     The <span style="background-color:#ffa">yellow</span>
     dots indicate statistical dispersion (in the form of <a
     href="http://en.wikipedia.org/wiki/Standard_error_%28statistics%29#Relative_standard_error">Relative
diff --git a/web/getstats/style.css b/web/getstats/style.css
index 979ffc1..fc204fb 100644
--- a/web/getstats/style.css
+++ b/web/getstats/style.css
@@ -101,13 +101,13 @@ table, th, td {
     padding-right:20px;
 }
 .contentText_mono {
-    font-family: mono;
+    font-family: "Lucida Console", "Courier New", monospace;
     font-weight:regular;
     font-size:11px;
     text-align:left;
 }
 .contentText_mono_pad {
-    font-family: mono;
+    font-family: "Lucida Console", "Courier New", monospace;
     font-weight:regular;
     font-size:11px;
     text-align:left;
diff --git a/web/getstats/tsbmbody.html b/web/getstats/tsbmbody.html
index 15013ec..8f1135d 100644
--- a/web/getstats/tsbmbody.html
+++ b/web/getstats/tsbmbody.html
@@ -135,19 +135,24 @@
 <!-- *** END Time series benchmark and metric ********************** -->
 
 <!-- *** BEGIN Time series plot *********************************** -->
-<table style="border:0">
+<table style="border:0; background-color:#eee">
   <tr>
+    <td style="border:0; padding-right:10px">Median<br />obs.</td>
     <td style="border:0">
       <div id="plot_canvas"
            style="width:1000px; height:200px; background-color:#eee">
       </div>
     </td>
+    <td style="border:0; padding-left:10px">Sample<br />size</td>
   </tr>
   <tr>
     <td style="border:0">
       <a href="help_tsbmplot.html">help</a>
+    </td>
+    <td style="border:0; text-align:center; padding-top:0">Days ago</td>
+    <td style="border:0">
       <div id="div_url_tsbm" style="display:inline">
-        <span style="float:right">
+        <span style="text-align:left">
           <a id="url_tsbm" onclick="return false"
              href="javascript::void(0)">URL</a>
         </span>
@@ -157,6 +162,8 @@
 </table>
 <!-- *** END Time series plot *********************************** -->
 
+<br />
+
 
 <!-- *** BEGIN Details of selected snapshot ****************************** -->
 <table style="border:0">
@@ -164,7 +171,7 @@
 
 <!-- *** BEGIN Preceding result ****************************** -->
 
-    <td valign=top style="border:0">
+    <td valign=top style="border:0; padding-right:20">
       <table style="border:0">
         <tr>
           <td style="border:0; font-size:14; font-weight:bold">
@@ -175,30 +182,28 @@
           <td id="prec_res_sha1" class="contentText_mono"></td>
         </tr>
         <tr>
-          <td colspan=2 class="leadText" style="text-align:left">Sample:</td>
-        </tr>
-        <tr>
-          <td colspan=2>
-            <div style="overflow:auto; height:150px; width:220px;">
+          <td valign=top class="leadText" style="text-align:right">Sample:</td>
+          <td valign=top>
+            <div style="overflow:auto; height:170px; width:300px;">
               <table id="sample1" class="tablesorter" border="0"
-                cellpadding="0" cellspacing="1" style="width:200px">
+                cellpadding="0" cellspacing="1" style="width:280px">
                 <thead>
                   <tr>
                     <th id="sample1_value">Value</th>
-                      <script type="text/javascript">
+                    <script type="text/javascript">
 setTooltip(
 "sample1_value", "Individual observations.<br />" +
 "The median of valid and positive observations is shown in " +
 "<span style=\"background-color:#ff0\">" +
 "yellow</span>.<br />Invalid observations are shown in " +
 "<span style=\"background-color:#faa\">red</span>.");
-                      </script>
+                    </script>
                     <th id="sample1_daysAgo">Days ago</th>
-                      <script type="text/javascript">
+                    <script type="text/javascript">
 setTooltip(
 "sample1_daysAgo",
 "Days ago since observation<br />was uploaded to the database.");
-                      </script>
+                    </script>
                     </tr>
                   </thead>
                 <tbody></tbody>
@@ -207,11 +212,17 @@ setTooltip(
           </td>
         </tr>
         <tr>
-          <td class="leadText">RSE:</td>
+          <td id="prec_res_rse_lead" class="leadText">RSE:</td>
+          <script type="text/javascript">
+setTooltip("prec_res_rse_lead", tooltipText_rse_plot())
+          </script>
           <td id="prec_res_rse" class="contentText"></td>
         </tr>
         <tr>
-          <td class="leadText">Median observation:</td>
+          <td id="prec_res_medobs_lead" class="leadText">Median obs.:</td>
+          <script type="text/javascript">
+setTooltip("prec_res_medobs_lead", tooltipText_medobs_plot())
+          </script>
           <td id="prec_res_median_obs" class="contentText"></td>
         </tr>
       </table>
@@ -221,7 +232,7 @@ setTooltip(
 
 <!-- *** BEGIN Selected snapshot ****************************** -->
 
-    <td valign=top style="border:0; padding-left:20">
+    <td valign=top style="border:1; border-style:solid; border-color:#00f">
       <table style="border:0">
         <tr>
           <td style="border:0; font-size:14; font-weight:bold">
@@ -232,13 +243,11 @@ setTooltip(
           <td id="curr_sshot_sha1" class="contentText_mono"></td>
         </tr>
         <tr>
-          <td colspan=2 class="leadText" style="text-align:left">Sample:</td>
-        </tr>
-        <tr>
-          <td colspan=2>
-            <div style="overflow:auto; height:150px; width:220px;">
+          <td valign=top class="leadText" style="text-align:right">Sample:</td>
+          <td valign=top>
+            <div style="overflow:auto; height:170px; width:300px;">
               <table id="sample2" class="tablesorter" border="0"
-                cellpadding="0" cellspacing="1" style="width:200px">
+                cellpadding="0" cellspacing="1" style="width:280px">
                 <thead>
                   <tr>
                     <th id="sample2_value">Value</th>
@@ -264,15 +273,24 @@ setTooltip(
           </td>
         </tr>
         <tr>
-          <td class="leadText">RSE:</td>
+          <td id="curr_sshot_rse_lead" class="leadText">RSE:</td>
+          <script type="text/javascript">
+setTooltip("curr_sshot_rse_lead", tooltipText_rse_plot())
+          </script>
           <td id="curr_sshot_rse" class="contentText"></td>
         </tr>
         <tr>
-          <td class="leadText">Median observation:</td>
+          <td id="curr_sshot_medobs_lead" class="leadText">Median obs.:</td>
+          <script type="text/javascript">
+setTooltip("curr_sshot_medobs_lead", tooltipText_medobs_plot())
+          </script>
           <td id="curr_sshot_median_obs" class="contentText"></td>
         </tr>
         <tr>
-          <td class="leadText">Change:</td>
+          <td id="curr_sshot_change_lead" class="leadText">Change:</td>
+          <script type="text/javascript">
+setTooltip("curr_sshot_change_lead", tooltipText_change_plot())
+          </script>
           <td id="curr_sshot_change" class="contentText"></td>
         </tr>
       </table>
diff --git a/web/getstats/tsbmbody.js b/web/getstats/tsbmbody.js
index 0ddbb75..2a86812 100644
--- a/web/getstats/tsbmbody.js
+++ b/web/getstats/tsbmbody.js
@@ -124,6 +124,25 @@ function tooltipText_lcssi_ls() {
         "it is just an outlier!)";
 }
 
+function tooltipText_rse_plot() {
+    return "Relative standard error of the valid and<br />" +
+        "positive observations in this sample.<br />" +
+        "<img src=\"images/rse.png\" /><br />" +
+        "<b>Note:</b> RSE is not defined for less than two values.";
+}
+
+function tooltipText_medobs_plot() {
+    return "The median of the valid and positive<br />" +
+        "observations in this sample.<br />" +
+        "This is considered to be the most<br />representative/typical " +
+        "value in the sample.";
+}
+
+function tooltipText_change_plot() {
+    return "The factor by which the selected result improves over<br />" +
+        "the preceding result wrt the median observation.";
+}
+
 // A Flot plugin to draw a horizontal age bar below a time series.
 // Snapshots are assumed to be regularly spaced.
 // ### 2 B DOCUMENTED!
@@ -718,10 +737,6 @@ function createPlot(
             // The time series is missing the clicked snapshot:
             tsIndex = -1;
 
-        var precTsIndex = -1;
-        if (tsIndex > 0)
-            precTsIndex = tsValCoords[tsIndex - 1][0];
-
         plot.setHoveredSnapshot(snIndex, snIndex);
         plot.triggerRedrawOverlay();
 
@@ -763,6 +778,9 @@ function createPlot(
         $("#curr_sshot_rse").text("");
         $("#curr_sshot_median_obs").text("");
         $("#curr_sshot_change").text("");
+
+        $("#sample1 tr:gt(0)").remove();
+        $("#sample2 tr:gt(0)").remove();
     }
 
     $("#plot_canvas").unbind("plotclick");
@@ -770,9 +788,11 @@ function createPlot(
         snIndex = Math.floor(pos.x + 0.5); // Snapshot index
         if ((snIndex < 0) || (snIndex >= snapshots.length))
             return;
-        if (snIndex == prevClickIndex)
-            // No change, so just ignore:
+        if (snIndex == prevClickIndex) {
+            // No change ...
+            clearClickHighlighting();
             return;
+        }
         prevClickIndex = snIndex;
 
         var tsIndex = -1; // Time series index
@@ -784,10 +804,6 @@ function createPlot(
             // The time series is missing the clicked snapshot:
             tsIndex = -1;
 
-        var precTsIndex = -1;
-        if (tsIndex > 0)
-            precTsIndex = tsValCoords[tsIndex - 1][0];
-
         plot.setClickedSnapshot(snIndex, snIndex);
         plot.triggerRedrawOverlay();
 
@@ -819,14 +835,20 @@ function createPlot(
                     ratio = val1 / val2;
                 else
                     ratio = val2 / val1;
+
+                var precTsIndex = tsValCoords[tsIndex - 1][0];
                 $("#prec_res_sha1").text(snapshots[precTsIndex][0]);
+
                 $("#prec_res_median_obs").text(val1);
-                var nrse = tsNRSEVals[precTsIndex];
+                var nrse = tsNRSEVals[tsIndex - 1];
                 if (nrse >= 0)
                     $("#prec_res_rse").text((nrse * 100).toFixed(2));
                 else
                     $("#prec_rse_rse").text("");
                 $("#curr_sshot_change").text(ratio);
+                $("#curr_sshot_change").css(
+                    "color", (ratio > 1) ? "#0a0"
+                        : ((ratio < 1) ? "f00" : "000"));
 
                 var sha1 = snapshots[tsValCoords[tsIndex][0]][0];
                 var sha1_prec = snapshots[tsValCoords[tsIndex - 1][0]][0];
@@ -840,7 +862,6 @@ function createPlot(
 
     clearHoverHighlighting();
     clearClickHighlighting();
-    plot.triggerRedrawOverlay();
 
     $("#benchmark").html(benchmark.replace(anySpace, "&nbsp;"));
     $("#metric").text(metric);
diff --git a/web/getstats/tsstats.shtml b/web/getstats/tsstats.shtml
index 1cc7bd0..2caffc5 100644
--- a/web/getstats/tsstats.shtml
+++ b/web/getstats/tsstats.shtml
@@ -51,7 +51,7 @@ $("#mainPageLink").attr("href", "http://" + location.host + "/bm2");
 
 
 <div id="div_tsbm_border"
-  style="display:none; border-style:solid; border-width:2px;">
+  style="display:none; border-style:solid; border-width:2px; padding:5px">
 <!--#include file="tsbmbody.html" -->
 </div>