Some UI fixes. 1) Don't overlap legend 2) Don't show obsolete machines/modes 3) Remove regression link

website/awfy.js

@@ -21,6 +21,11 @@ AWFY.lastRefresh = 0;
 
 // Hide a view modes by default. Since they aren't active anymore
 AWFYMaster.modes["35"].hidden = true
+AWFYMaster.modes["36"].hidden = true
+AWFYMaster.modes["40"].hidden = true
+AWFYMaster.modes["42"].hidden = true
+AWFYMaster.modes["54"].hidden = true
+AWFYMaster.modes["56"].hidden = true
 AWFYMaster.modes["27"].hidden = true
 AWFYMaster.modes["29"].hidden = true
 AWFYMaster.modes["22"].hidden = true
@@ -185,7 +190,9 @@ AWFY.drawLegend = function () {
             continue;
         modes.push(mode);
     }
+    modes.sort(function(a,b) {return a.vendor_id + a.name < b.vendor_id + b.name});
 
+    var oneHidden = false;
     for (var i = 0; i < modes.length; i++) {
         var mode = modes[i];
         var vendor = AWFYMaster.vendors[mode.vendor_id];
@@ -200,11 +207,11 @@ AWFY.drawLegend = function () {
 
         var onClick = (function (awfy, mode, link) {
             return (function () {
-                if (mode.hidden) {
-                    mode.hidden = false;
+                if (mode.runtime_hidden) {
+                    mode.runtime_hidden = false;
                     link.css('color', '#000000');
                 } else {
-                    mode.hidden = true;
+                    mode.runtime_hidden = true;
                     link.css('color', '#cccccc');
                 }
                 for (var i = 0; i < this.panes.length; i++) {
@@ -219,15 +226,26 @@ AWFY.drawLegend = function () {
         })(this, mode, link);
         link.click(onClick);
 
-        if (mode.hidden)
-            link.css('color', '#cccccc');
-        else
-            link.css('color', '#000000');
+        if (mode.hidden) {
+            oneHidden = true;
+            link.addClass('inactive');
+        } else {
+            link.removeClass('inactive');
+		}
+		if (mode.runtime_hidden) 
+			link.css('color', '#cccccc');
 
         link.appendTo(item);
         item.appendTo(legend);
     }
 
+	var view = $("<div><a href='#' class='show'>[Show obsolete modes]</a><a href='#' class='hide'>[Hide obsolete modes]</a></div>");
+	view.click(function() {
+		legend.toggleClass("all");
+		return false;
+	});
+	legend.append(view);
+
     this.hasLegend = true;
 }
 
@@ -936,13 +954,19 @@ AWFY.updateMachineList = function (machineId) {
             }).bind(this);
         }).bind(this)(id));
         if (parseInt(id) == machineId)
-            a.addClass('clicked');
+            li.addClass('clicked');
         if (!machine.recent_runs)
-            a.addClass('inactive');
+            li.addClass('inactive');
         a.html(machine.description);
         a.appendTo(li);
         li.appendTo(menu);
     }
+    var view = $("<div><a href='#' class='show'>[Show hidden machines]</a><a href='#' class='hide'>[Hide hidden machines]</a></div>");
+	view.click(function() {
+		menu.toggleClass("all");
+		return false;
+	});
+	menu.append(view);
     $('#message').html(AWFYMaster.machines[machineId].message+"<br />&nbsp;");
 }
 

website/frontpage.js

@@ -201,6 +201,8 @@ Display.prototype.draw = function () {
         mode.used = true;
         if (mode.hidden)
             continue;
+        if (mode.runtime_hidden)
+            continue;
 
         new_info.push(info);
         new_lines.push(this.orig_graph.lines[i]);

website/index.html

@@ -36,8 +36,8 @@
     <div class='rightSide'>
 	  <div><a href="http://h4writer.com"><span>Blog</span></a></div>
 	  <div><a href="/overview"><span>Overview</span></a></div>
-	  <div><a href="/regressions"><span>Regressions</span></a></div>
 <!--
+	  <div><a href="/regressions"><span>Regressions</span></a></div>
       <div class='userMenu'>
         <a href="javascript:doPersonaLogin()" ng-if="!currentUser"><span>Login</span></a>
         <a href="javascript:doPersonaLogout()" ng-if='currentUser'><span>Logout</span></a>
@@ -48,8 +48,6 @@
 </header>
 
 <div class='content'>
- <div class="graph-row">
-  <div id="message"></div>
   <div id="navcontainer">
     <ul id="legend"></ul>
     <br><br>
@@ -63,6 +61,8 @@
       <li><a href='#' id="aboutdrop">About</a> &#187;</li>
     </ul>
   </div>
+ <div class="graph-row">
+  <div id="message"></div>
   <div class="graph-container">
     <div id="kraken-label">kraken time</div>
     <div class="graph" id="kraken-graph"><h2>Loading...</h2></div>
@@ -72,7 +72,6 @@
     <div class="graph" id="ss-graph"><h2>Loading...</h2></div>
   </div>
  </div>
- <br><br><br>
  <div>
   <div class="graph-row">
    <div class="graph-container">
@@ -80,15 +79,6 @@
      <div class="graph" id="octane-graph"><h2>Loading...</h2></div>
    </div>
   </div>
-  <br><br><br>
-  <!--
-  <div class="graph-row">
-   <div class="graph-container">
-     <div id="v8-label">v8bench score</div>
-     <div class="graph" id="v8real-graph"><h2>Loading...</h2></div>
-   </div>
-  </div>
-  -->
  </div>
  <div id="breakdown">
  </div>

website/overview/index.html

@@ -28,7 +28,9 @@
     <div class='rightSide'>
 	  <div><a href="http://h4writer.com"><span>Blog</span></a></div>
 	  <div><a href="/"><span>Graphs</span></a></div>
+<!--
 	  <div><a href="/regressions"><span>Regressions</span></a></div>
+-->
       <div class='userMenu'>
         <a href="javascript:doPersonaLogin()" ng-if="!currentUser"><span>Login</span></a>
         <a href="javascript:doPersonaLogout()" ng-if='currentUser'><span>Logout</span></a>

website/style.css

@@ -27,7 +27,6 @@ h1 {
 }
 .graph-container {
  width: 600px;
- height: 340px;
  display: inline-block;
 }
 
@@ -323,3 +322,46 @@ html, body {
 header {
 	margin-bottom: 30px;
 }
+
+#machinelist .inactive {
+	display: none;
+}
+#machinelist .inactive a {
+    color: inherit;
+}
+#machinelist.all .inactive {
+	display: list-item;
+}
+#machinelist .clicked {
+	display: list-item;
+}
+#machinelist.all .show {
+	display: none;
+}
+#machinelist:not(.all) .hide {
+	display: none;
+}
+
+#legend .inactive {
+	display: none;
+}
+#legend.all .inactive {
+	display: list-item;
+}
+#legend.all .show {
+	display: none;
+}
+#legend:not(.all) .hide {
+	display: none;
+}
+
+
+.graph-row {
+	margin-left: 350px;
+}
+.graph-container {
+	margin: auto;
+}
+@media (max-width: 1600px) .graph-row .graph-container {
+	display: block;
+}