Make summary grid have multiple levels

Author: Alphare

asv/www/asv.css

@@ -125,8 +125,38 @@ nav li.active span.navbar-brand:hover {
 
 /* Summary page */
 
-.benchmark-group > h1 {
-    text-align: center;
+.benchmark-group h1, h2, h3, h4, h5, h6 {
+    margin: 5px 0;
+}
+
+.benchmark-group h2, h3, h4, h5, h6 {
+    background-color: #ddd;
+}
+
+.benchmark-group h1 {
+    font-weight: bold;
+    background-color: #ccc;
+    padding-left: 10px;
+}
+
+.benchmark-group h2 {
+    padding-left: 30px;
+}
+
+.benchmark-group h3 {
+    padding-left: 50px;
+}
+
+.benchmark-group h4 {
+    padding-left: 60px;
+}
+
+.benchmark-group h5 {
+    padding-left: 80px;
+}
+
+.benchmark-group h6 {
+    padding-left: 100px;
 }
 
 .benchmark-container {

asv/www/summarygrid.js

@@ -2,6 +2,7 @@
 
 $(document).ready(function() {
     var summary_loaded = false;
+    var MAX_GRID_DEPTH = 3
 
     /* Callback a function when an element comes in view */
     function callback_in_view(element, func) {
@@ -18,19 +19,38 @@ $(document).ready(function() {
         $(window).on('scroll', handler);
     }
 
-    function get_benchmarks_by_groups() {
+    function get_benchmarks_tree() {
         var master_json = $.asv.master_json;
-        var groups = {};
+        var groups_by_level = {};
+        var current_object;
+        
         $.each(master_json.benchmarks, function(bm_name, bm) {
-            var i = bm_name.indexOf('.');
-            var group = bm_name.slice(0, i);
-            var name = bm_name.slice(i + 1);
-            if (groups[group] === undefined) {
-                groups[group] = [];
+            current_object = groups_by_level;
+            for (var level = 0; level < MAX_GRID_DEPTH; level++) {
+                var i = bm_name.indexOf('.');
+                var nested = bm_name.slice(0, i);
+                bm_name = bm_name.slice(i + 1)
+                i = bm_name.indexOf('.');
+                if (i === -1) {
+                    if (!Array.isArray(current_object[nested])) {
+                        current_object[nested] = []
+                    }
+                    current_object[nested].push(bm_name);
+                    break;
+                }
+                if (current_object[nested] === undefined) {
+                    current_object[nested] = {};
+                    if (level === MAX_GRID_DEPTH - 1) {
+                        current_object[nested] = []
+                    }
+                }
+                if (level === MAX_GRID_DEPTH - 1) {
+                    current_object[nested].push(bm_name);
+                }
+                current_object = current_object[nested]
             }
-            groups[group].push(bm_name);
         });
-        return groups;
+        return groups_by_level;
     }
 
     function benchmark_container(bm) {
@@ -100,7 +120,34 @@ $(document).ready(function() {
         });
         return container;
     }
-
+    
+    function benchmarks_tree_to_html(current_object, parent_container, bm_name, level) {
+        if (Array.isArray(current_object)) {
+            $.each(current_object, function (i, bm_suffix) {
+                var bm = $.asv.master_json.benchmarks[bm_name + '.' + bm_suffix];
+                if (bm !== undefined) {
+                    parent_container.append(benchmark_container(bm));
+                }
+            })
+        }
+        else {
+            for (var nested in current_object) {
+                if (current_object.hasOwnProperty(nested)) {
+                    var new_bm_name = bm_name + '.' + nested;
+                    var nested_container = $('<div class="benchmark-group-nested"/>');
+                    nested_container.append($('<h' + level + '>' + nested + '</h' + level + '>'));
+                    var inner = benchmarks_tree_to_html(
+                        current_object[nested],
+                        nested_container,
+                        new_bm_name,
+                        level + 1
+                    )
+                    nested_container.append(inner);
+                    parent_container.append(nested_container);
+                }
+            }
+        }
+    }
     function make_summary() {
         var summary_display = $('#summarygrid-display');
         var master_json = $.asv.master_json;
@@ -109,17 +156,18 @@ $(document).ready(function() {
         if (summary_loaded) {
             return;
         }
+        var tree = get_benchmarks_tree();
+        for (var key in tree) {
+            if (tree.hasOwnProperty(key)) {
+                var group_container = $('<div class="benchmark-group"/>')
+                group_container.append($('<h1>' + key + '</h1>'));
+                benchmarks_tree_to_html(tree[key], group_container, key, 2)
 
-        $.each(get_benchmarks_by_groups(), function(group, benchmarks) {
-            var group_container = $('<div class="benchmark-group"/>')
-            group_container.append($('<h1>' + group + '</h1>'));
-            summary_display.append(group_container);
-            $.each(benchmarks, function(i, bm_name) {
-                var bm = $.asv.master_json.benchmarks[bm_name];
-                group_container.append(benchmark_container(bm));
-            });
-        });
-
+                summary_display.append(group_container);
+            }
+            
+        }
+        
         summary_display.append(summary_container);
         $(window).trigger('scroll');