Add sub-queries to the JS profiler table

front/src/css/timeline.css

@@ -177,6 +177,46 @@ input.textFilter {
 .table > div > .type {
   white-space: nowrap;
 }
+.table .children {
+  margin-top: 0.2em;
+  font-size: 0.8em;
+  line-height: 1.6em;
+}
+.table .child {
+  margin-left: 0.5em;
+}
+.table .child > .child {
+  margin-left: 1em;
+}
+.table .child:before {
+  content: "↳";
+}
+.table .child .childArgs {
+  display: none;
+}
+.table .child span {
+  position: relative;
+}
+.table .child span:hover {
+  background: #EBD8E2;
+}
+.table .child span:hover .childArgs {
+  display: block;
+  position: absolute;
+  padding: 0 1em 0 2em;
+  left: 100%;
+  top: 0;
+  background: #EBD8E2;
+  line-height: 1.3em;
+  height: 1.3em;
+  z-index: 1;
+}
+.table .showingDetails .child span:hover {
+  background: inherit;
+}
+.table .showingDetails .child span:hover .childArgs {
+  display: none;
+}
 .table > div > .value {
   width: 70%;
   word-break: break-all;

front/src/js/app.js

@@ -12,6 +12,7 @@ var yltApp = angular.module('YellowLabTools', [
     'apiService',
     'menuService',
     'gradeDirective',
+    'jsChildrenDirective',
     'offendersDirectives'
 ]);
 

front/src/js/directives/jsChildrenDirective.js

@@ -0,0 +1,44 @@
+var jsChildrenDirective = angular.module('jsChildrenDirective', []);
+
+jsChildrenDirective.directive('jsChildren', function() {
+ 
+    return {
+        restrict: 'E',
+        scope: {
+            node: '=node'
+        },
+        template:   '<div class="children"></div>',
+        replace: true,
+        link: function(scope, element, attrs) {
+            
+            function recursiveHtmlBuilder(node) {
+                var html = '';
+                
+                if (node.children) {
+                    node.children.forEach(function(child) {
+                        
+                        var childArgs = '';
+                        if (child.data.callDetails && child.data.callDetails.arguments && child.data.callDetails.arguments.length > 0) {
+                            childArgs = child.data.callDetails.arguments.join(' : ');
+                            if (childArgs.length > 100) {
+                                childArgs = childArgs.substr(0, 98) + '...';
+                            }
+                        }
+
+                        html += '<div class="child"><span>' + child.data.type + '<div class="childArgs">' + childArgs + '</div></span>' + recursiveHtmlBuilder(child) + '</div>';
+                    });
+                }
+
+                return html;
+            }
+
+            element.append(recursiveHtmlBuilder(scope.node));
+
+            // Bind a very special behavior:
+            // We want to display something in the next table-cell, at the same hight.
+            element.find('span').on('mouseenter', function() {
+                
+            });
+        }
+    };
+});

front/src/less/timeline.less

@@ -197,6 +197,56 @@ input.textFilter {
     white-space:nowrap;
 }
 
+.table .children {
+    margin-top: 0.2em;
+    font-size: 0.8em;
+    line-height: 1.6em;
+}
+
+.table .child {
+    margin-left: 0.5em;
+
+    > .child {
+        margin-left: 1em;
+    }
+
+    &:before {
+        content: "↳";
+    }
+
+    .childArgs {
+        display: none;
+    }
+
+    span {
+        position: relative;
+    }
+
+    span:hover {
+        background: #EBD8E2;
+
+        .childArgs {
+            display: block;
+            position: absolute;
+            padding: 0 1em 0 2em;
+            left: 100%;
+            top: 0;
+            background: #EBD8E2;
+            line-height: 1.3em;
+            height: 1.3em;
+            z-index: 1;
+        }
+    }
+}
+
+.table .showingDetails .child span:hover {
+    background: inherit;
+
+    .childArgs {
+        display: none;
+    }
+}
+
 .table > div > .value {
     width: 70%;
     word-break: break-all;

front/src/main.html

@@ -35,6 +35,7 @@
     <script src="/js/services/apiService.js"></script>
     <script src="/js/services/menuService.js"></script>
     <script src="/js/directives/gradeDirective.js"></script>
+    <script src="/js/directives/jsChildrenDirective.js"></script>
     <script src="/js/directives/offendersDirectives.js"></script>
     <!-- endbuild -->
 <head>

front/src/views/timeline.html

@@ -78,7 +78,10 @@
             }">
 
             <div class="index">{{$index + 1}}</div>
-            <div class="type">{{node.data.type}}</div>
+            <div class="type">
+                {{node.data.type}}
+                <js-children node="node"></js-children>
+            </div>
 
             <div class="value">
                 {{node.data.callDetails.arguments[0]}}