Dramatically increase the performance of Observatory's profile UI

runtime/observatory/lib/src/elements/cpu_profile.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library cpu_profile_element;
 
 import 'dart:async';
 import 'dart:html';
 import 'observatory_element.dart';
 import 'package:observatory/service.dart';
@@ skipping 551 matching lines @@
   }
 
   Function onTreeConfigChange;
   @observable bool show = true;
   @observable bool showModeSelector = true;
   @observable bool showDirectionSelector = true;
   @observable String modeSelector = 'Function';
   @observable String directionSelector = 'Up';
 }
 
+class FunctionCallTreeNodeRow extends VirtualTreeRow {
+  final CpuProfile profile;
+  final FunctionCallTreeNode node;
+  final String selfPercent;
+  final String totalPercent;
+  final String percent;
+
+  FunctionCallTreeNodeRow(VirtualTree tree,
+                          int depth,
+                          this.profile,
+                          FunctionCallTreeNode node)
+      : node = node,
+        selfPercent = Utils.formatPercentNormalized(node.profileFunction.normalizedExclusiveTicks),
+        totalPercent = Utils.formatPercentNormalized(node.profileFunction.normalizedInclusiveTicks),
+        percent = Utils.formatPercentNormalized(node.percentage),
+        super(tree, depth) {
+  }
+
+  void onRender(DivElement rowDiv) {
+    rowDiv.children.add(
+        makeText(totalPercent, toolTip: 'global % on stack'));
+    rowDiv.children.add(makeGap());
+    rowDiv.children.add(
+        makeText(selfPercent, toolTip: 'global % executing'));
+    rowDiv.children.add(makeGap());
+    rowDiv.children.add(makeIndenter(colored: false));
+    rowDiv.children.add(makeColorBar());
+    rowDiv.children.add(makeGap(ems: 1.0));
+    rowDiv.children.add(makeExpander());
+    rowDiv.children.add(
+        makeText(percent, toolTip: 'tree node %', flexBasis: null));
+    rowDiv.children.add(makeGap(ems: 0.5));
+    functionRef.ref = node.profileFunction.function;
+    rowDiv.children.add(functionRef);
+  }
+
+  var functionRef = new Element.tag('function-ref');
+
+  int get childCount => node.children.length;
+
+  void onShow() {
+    if (children.length > 0) {
+      return;
+    }
+    for (var childNode in node.children) {
+      var row = new FunctionCallTreeNodeRow(tree, depth + 1, profile, childNode);
+      children.add(row);
+    }
+  }
+}
+
+
+class CodeCallTreeNodeRow extends VirtualTreeRow {
+  final CpuProfile profile;
+  final CodeCallTreeNode node;
+  final String selfPercent;
+  final String totalPercent;
+  final String percent;
+
+  CodeCallTreeNodeRow(VirtualTree tree,
+                      int depth,
+                      this.profile,
+                      CodeCallTreeNode node)
+      : node = node,
+        selfPercent = Utils.formatPercentNormalized(node.profileCode.normalizedExclusiveTicks),
+        totalPercent = Utils.formatPercentNormalized(node.profileCode.normalizedInclusiveTicks),
+        percent = Utils.formatPercentNormalized(node.percentage),
+        super(tree, depth) {
+  }
+
+  void onRender(DivElement rowDiv) {
+    rowDiv.children.add(
+        makeText(totalPercent, toolTip: 'global % on stack'));
+    rowDiv.children.add(makeGap());
+    rowDiv.children.add(
+        makeText(selfPercent, toolTip: 'global % executing'));
+    rowDiv.children.add(makeGap());
+    rowDiv.children.add(makeIndenter(colored: false));
+    rowDiv.children.add(makeColorBar());
+    rowDiv.children.add(makeGap(ems: 1.0));
+    rowDiv.children.add(makeExpander());
+    rowDiv.children.add(
+        makeText(percent, toolTip: 'tree node %', flexBasis: null));
+    rowDiv.children.add(makeGap(ems: 0.5));
+    codeRef.ref = node.profileCode.code;
+    rowDiv.children.add(codeRef);
+  }
+
+  var codeRef = new Element.tag('code-ref');
+
+  int get childCount => node.children.length;
+
+  void onShow() {
+    if (children.length > 0) {
+      return;
+    }
+    for (var childNode in node.children) {
+      var row = new CodeCallTreeNodeRow(tree, depth + 1, profile, childNode);
+      children.add(row);
+    }
+  }
+}
+
 /// Displays a CpuProfile
 @CustomTag('cpu-profile')
 class CpuProfileElement extends ObservatoryElement {
   CpuProfileElement.created() : super.created() {
     _updateTask = new Task(update);
     _renderTask = new Task(render);
   }
 
   attached() {
     super.attached();
     sampleBufferControlElement =
         shadowRoot.querySelector('#sampleBufferControl');
     assert(sampleBufferControlElement != null);
     sampleBufferControlElement.onSampleBufferUpdate = onSampleBufferChange;
     stackTraceTreeConfigElement =
         shadowRoot.querySelector('#stackTraceTreeConfig');
     assert(stackTraceTreeConfigElement != null);
     stackTraceTreeConfigElement.onTreeConfigChange = onTreeConfigChange;
-    cpuProfileTreeElement = shadowRoot.querySelector('#cpuProfileTree');
-    assert(cpuProfileTreeElement != null);
-    cpuProfileTreeElement.profile = sampleBufferControlElement.profile;
+    cpuProfileVirtualTreeElement = shadowRoot.querySelector('#cpuProfileVirtualTree');
+    assert(cpuProfileVirtualTreeElement != null);
+    cpuProfileVirtualTreeElement.profile = sampleBufferControlElement.profile;
+    _resizeSubscription = window.onResize.listen((_) => _updateSize());
     _updateTask.queue();
+    _updateSize();
+  }
+
+  detached() {
+    super.detached();
+    if (_resizeSubscription != null) {
+      _resizeSubscription.cancel();
+    }
+  }
+
+  _updateSize() {
+    var applySize = (e) {
+      Rectangle rect = e.getBoundingClientRect();
+      final totalHeight = window.innerHeight;
+      final top = rect.top;
+      final bottomMargin = 200;
+      final mainHeight = totalHeight - top - bottomMargin;
+      e.style.setProperty('height', '${mainHeight}px');
+    };
+    HtmlElement e2 = $['cpuProfileVirtualTree'];
+    applySize(e2);
   }
 
   isolateChanged(oldValue) {
     _updateTask.queue();
   }
 
   update() {
     if (sampleBufferControlElement != null) {
       sampleBufferControlElement.reload(isolate);
     }
   }
 
   onSampleBufferChange(CpuProfile sampleBuffer) {
     _renderTask.queue();
   }
 
   onTreeConfigChange(String modeSelector, String directionSelector) {
     ProfileTreeDirection direction = ProfileTreeDirection.Exclusive;
     if (directionSelector != 'Up') {
       direction = ProfileTreeDirection.Inclusive;
     }
     ProfileTreeMode mode = ProfileTreeMode.Function;
     if (modeSelector == 'Code') {
       mode = ProfileTreeMode.Code;
     }
-    cpuProfileTreeElement.direction = direction;
-    cpuProfileTreeElement.mode = mode;
+    cpuProfileVirtualTreeElement.direction = direction;
+    cpuProfileVirtualTreeElement.mode = mode;
     _renderTask.queue();
   }
 
   Future clearCpuProfile() async {
     await isolate.invokeRpc('_clearCpuProfile', { });
     _updateTask.queue();
     return new Future.value(null);
   }
 
   Future refresh() {
     _updateTask.queue();
     return new Future.value(null);
   }
 
   render() {
-    cpuProfileTreeElement.render();
+    cpuProfileVirtualTreeElement.render();
   }
 
   @published Isolate isolate;
 
+  StreamSubscription _resizeSubscription;
   Task _updateTask;
   Task _renderTask;
   SampleBufferControlElement sampleBufferControlElement;
   StackTraceTreeConfigElement stackTraceTreeConfigElement;
-  CpuProfileTreeElement cpuProfileTreeElement;
+  CpuProfileVirtualTreeElement cpuProfileVirtualTreeElement;
 }
 
 class NameSortedTable extends SortedTable {
   NameSortedTable(columns) : super(columns);
   @override
   dynamic getSortKeyFor(int row, int col) {
     if (col == FUNCTION_COLUMN) {
       // Use name as sort key.
       return rows[row].values[col].name;
     }
@@ skipping 477 matching lines @@
 enum ProfileTreeDirection {
   Exclusive,
   Inclusive
 }
 
 enum ProfileTreeMode {
   Code,
   Function,
 }
 
+@CustomTag('cpu-profile-virtual-tree')
+class CpuProfileVirtualTreeElement extends ObservatoryElement {
+  ProfileTreeDirection direction = ProfileTreeDirection.Exclusive;
+  ProfileTreeMode mode = ProfileTreeMode.Function;
+  CpuProfile profile;
+  VirtualTree virtualTree;
+  FunctionCallTreeNodeFilter functionFilter;
+  @observable bool show = true;
+
+  CpuProfileVirtualTreeElement.created() : super.created();
+
+  void render() {
+    _updateView();
+  }
+
+  showChanged(oldValue) {
+    var treeTable = shadowRoot.querySelector('#treeTable');
+    assert(treeTable != null);
+    treeTable.style.display = show ? 'table' : 'none';
+  }
+
+  void _updateView() {
+    virtualTree?.clear();
+    virtualTree?.uninstall();
+    virtualTree = null;
+    bool exclusive = direction == ProfileTreeDirection.Exclusive;
+    if (mode == ProfileTreeMode.Code) {
+      _buildCodeTree(exclusive);
+    } else {
+      assert(mode == ProfileTreeMode.Function);
+      _buildFunctionTree(exclusive);
+    }
+    virtualTree?.refresh();
+  }
+
+  void _buildFunctionTree(bool exclusive) {
+    var treeBody = shadowRoot.querySelector('#tree');
+    assert(treeBody != null);
+    virtualTree = new VirtualTree(32, treeBody);
+    if (profile == null) {
+      return;
+    }
+    var tree = profile.loadFunctionTree(exclusive ? 'exclusive' : 'inclusive');
+    if (tree == null) {
+      return;
+    }
+    if (functionFilter != null) {
+      tree = tree.filtered(functionFilter);
+    }
+    for (var child in tree.root.children) {
+      virtualTree.rows.add(
+          new FunctionCallTreeNodeRow(virtualTree, 0, profile, child));
+    }
+    if (virtualTree.rows.length == 1) {
+      virtualTree.rows[0].expanded = true;
+    }
+  }
+
+  void _buildCodeTree(bool exclusive) {
+    var treeBody = shadowRoot.querySelector('#tree');
+    assert(treeBody != null);
+    virtualTree = new VirtualTree(32, treeBody);
+    if (profile == null) {
+      return;
+    }
+    var tree = profile.loadCodeTree(exclusive ? 'exclusive' : 'inclusive');
+    if (tree == null) {
+      return;
+    }
+    for (var child in tree.root.children) {
+      virtualTree.rows.add(
+          new CodeCallTreeNodeRow(virtualTree, 0, profile, child));
+    }
+    if (virtualTree.rows.length == 1) {
+      virtualTree.rows[0].expanded = true;
+    }
+  }
+}
+
 @CustomTag('cpu-profile-tree')
 class CpuProfileTreeElement extends ObservatoryElement {
   ProfileTreeDirection direction = ProfileTreeDirection.Exclusive;
   ProfileTreeMode mode = ProfileTreeMode.Function;
   CpuProfile profile;
   TableTree codeTree;
   TableTree functionTree;
   FunctionCallTreeNodeFilter functionFilter;
   @observable bool show = true;
 
@@ skipping 58 matching lines @@
       return;
     }
     var tree = profile.loadCodeTree(exclusive ? 'exclusive' : 'inclusive');
     if (tree == null) {
       return;
     }
     var rootRow = new CodeProfileTreeRow(codeTree, null, profile, tree.root);
     codeTree.initialize(rootRow);
   }
 }