Introduce two utility elements for the cpu profiler

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 414 matching lines @@
     methodColumn.children.add(infoButton);
 
     // Fill in self column.
     var selfColumn = flexColumns[1];
     selfColumn.style.position = 'relative';
     selfColumn.style.alignItems = 'center';
     selfColumn.text = selfPercent;
   }
 }
 
-/// Displays a CpuProfile
-@CustomTag('cpu-profile')
-class CpuProfileElement extends ObservatoryElement {
-  static const MICROSECONDS_PER_SECOND = 1000000.0;
+@CustomTag('sample-buffer-control')
+class SampleBufferControlElement extends ObservatoryElement {
+  SampleBufferControlElement.created() : super.created() {
+    _stopWatch.start();
+  }
 
-  @published Isolate isolate;
+  Future<CpuProfile> reload(Isolate isolate) async {
+    profile.clear();
+    if (isolate == null) {
+      _update(profile);
+      // Notify listener.
+      onSampleBufferUpdate(profile);
+      return profile;
+    }
+    await _changeState(kFetchingState);
+    try {
+      var params = { 'tags': tagSelector };
+      var response = await isolate.invokeRpc('_getCpuProfile', params);
+      await _changeState(kLoadingState);
+      profile.load(isolate, response);
+      _update(profile);
+      await _changeState(kLoadedState);
+      // Notify listener.
+      onSampleBufferUpdate(profile);
+      return profile;
+    } catch (e, st) {
+      if (e is ServerRpcException) {
+        ServerRpcException se = e;
+        if (se.code == ServerRpcException.kFeatureDisabled) {
+          await _changeState(kDisabledState);
+          return profile;
+        }
+      }
+      await _changeState(kExceptionState, e, st);
+      rethrow;
+    }
+  }
+
+  Future _changeState(String newState, [exception, stackTrace]) {
+    if ((newState == kDisabledState) ||
+        (newState == kFetchingState) ||
+        (newState == kExceptionState)) {
+      loadTime = '';
+      fetchTime = '';
+    } else if (newState == kLoadingState) {
+      fetchTime = formatTimeMilliseconds(_stopWatch.elapsedMilliseconds);
+      loadTime = '';
+    } else if (newState == kLoadedState) {
+      loadTime = formatTimeMilliseconds(_stopWatch.elapsedMilliseconds);
+    }
+    state = newState;
+    this.exception = exception;
+    this.stackTrace = stackTrace;
+    _stopWatch.reset();
+    return window.animationFrame;
+  }
+
+  _update(CpuProfile sampleBuffer) {
+    sampleCount = profile.sampleCount.toString();
+    refreshTime = new DateTime.now().toString();
+    stackDepth = profile.stackDepth.toString();
+    sampleRate = profile.sampleRate.toStringAsFixed(0);
+    timeSpan = formatTime(profile.timeSpan);
+  }
+
+  void tagSelectorChanged(oldValue) {
+    reload(profile.isolate);
+  }
+
+  Function onSampleBufferUpdate;
+  @observable bool showTagSelector = true;
+
   @observable String sampleCount = '';
   @observable String refreshTime = '';
   @observable String sampleRate = '';
   @observable String stackDepth = '';
   @observable String timeSpan = '';
   @observable String fetchTime = '';
   @observable String loadTime = '';
   @observable String tagSelector = 'UserVM';
-  @observable String modeSelector = 'Function';
-  @observable String directionSelector = 'Up';
-
-  @observable String state = 'Requested';
+  @observable String state = 'kFetching';
   @observable var exception;
   @observable var stackTrace;
 
-  final Stopwatch _sw = new Stopwatch();
+  static const kDisabledState = 'kDisabled';
+  static const kExceptionState = 'Exception';
+  static const kFetchingState = 'kFetching';
+  static const kLoadedState = 'kLoaded';
+  static const kLoadingState = 'kLoading';
+
+  Isolate isolate;
 
   final CpuProfile profile = new CpuProfile();
+  final Stopwatch _stopWatch = new Stopwatch();
+}
 
-  CpuProfileElement.created() : super.created();
-
-  @override
-  void attached() {
-    super.attached();
-  }
-
-  void isolateChanged(oldValue) {
-    _getCpuProfile().catchError(app.handleException);
-  }
-
-  void tagSelectorChanged(oldValue) {
-    _getCpuProfile().catchError(app.handleException);
-  }
+@CustomTag('stack-trace-tree-config')
+class StackTraceTreeConfigElement extends ObservatoryElement {
+  StackTraceTreeConfigElement.created() : super.created();
 
   void modeSelectorChanged(oldValue) {
-    _updateView();
+    if (onTreeConfigChange == null) {
+      return;
+    }
+    onTreeConfigChange(modeSelector, directionSelector);
   }
 
   void directionSelectorChanged(oldValue) {
-    _updateView();
+    if (onTreeConfigChange == null) {
+      return;
+    }
+    onTreeConfigChange(modeSelector, directionSelector);
   }
 
-  Future clearCpuProfile() {
-    profile.clear();
-    if (isolate == null) {
-      return new Future.value(null);
-    }
-    return isolate.invokeRpc('_clearCpuProfile', { })
-        .then((ServiceMap response) {
-          _updateView();
-        });
+  Function onTreeConfigChange;
+  @observable bool showModeSelector = true;
+  @observable bool showDirectionSelector = true;
+  @observable String modeSelector = 'Function';
+  @observable String directionSelector = 'Up';
+}
+
+/// Displays a CpuProfile
+@CustomTag('cpu-profile')
+class CpuProfileElement extends ObservatoryElement {
+  CpuProfileElement.created() : super.created() {
+    _updateTask = new Task(update);
+    _renderTask = new Task(render);
   }
 
-  Future refresh() {
-    return _getCpuProfile();
+  attached() {
+    super.attached();
+    sampleBufferControlElement = shadowRoot.query('#sampleBufferControl');
+    assert(sampleBufferControlElement != null);
+    sampleBufferControlElement.onSampleBufferUpdate = onSampleBufferChange;
+    stackTraceTreeConfigElement = shadowRoot.query('#stackTraceTreeConfig');
+    assert(stackTraceTreeConfigElement != null);
+    stackTraceTreeConfigElement.onTreeConfigChange = onTreeConfigChange;
+    cpuProfileTreeElement = shadowRoot.querySelector('#cpuProfileTree');
+    assert(cpuProfileTreeElement != null);
+    cpuProfileTreeElement.profile = sampleBufferControlElement.profile;
+    _updateTask.queue();
   }
 
-  _onFetchStarted() {
-    _sw.reset();
-    _sw.start();
-    state = 'Requested';
+  isolateChanged(oldValue) {
+    _updateTask.queue();
   }
 
-  _onFetchFinished() {
-    _sw.stop();
-    fetchTime = formatTimeMilliseconds(_sw.elapsedMilliseconds);
-  }
-
-  Future _onLoadStarted() {
-    _sw.reset();
-    _sw.start();
-    state = 'Loading';
-    return window.animationFrame;
-  }
-
-  _onLoadFinished() {
-    _sw.stop();
-    loadTime = formatTimeMilliseconds(_sw.elapsedMilliseconds);
-    state = 'Loaded';
-  }
-
-  Future _getCpuProfile() async {
-    profile.clear();
-    if (isolate == null) {
-      return new Future.value(null);
-    }
-    _onFetchStarted();
-    try {
-      var params = { 'tags': tagSelector };
-      var response = await isolate.invokeRpc('_getCpuProfile', params);
-      _onFetchFinished();
-      await _onLoadStarted();
-      profile.load(isolate, response);
-      _onLoadFinished();
-      _updateView();
-    } catch (e, st) {
-      bool handled = false;
-      if (e is ServerRpcException) {
-        ServerRpcException se = e;
-        if (se.code == ServerRpcException.kFeatureDisabled) {
-          state = 'Disabled';
-          handled = true;
-        }
-      }
-      if (!handled) {
-        state = 'Exception';
-        exception = e;
-        stackTrace = st;
-        rethrow;
-      }
+  update() {
+    if (sampleBufferControlElement != null) {
+      sampleBufferControlElement.reload(isolate);
     }
   }
 
-  void _updateView() {
-    sampleCount = profile.sampleCount.toString();
-    refreshTime = new DateTime.now().toString();
-    stackDepth = profile.stackDepth.toString();
-    sampleRate = profile.sampleRate.toStringAsFixed(0);
-    timeSpan = formatTime(profile.timeSpan);
-    CpuProfileTreeElement cpuProfileTreeElement =
-        shadowRoot.querySelector('#cpuProfileTree');
+  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.profile = profile;
     cpuProfileTreeElement.direction = direction;
     cpuProfileTreeElement.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();
   }
+
+  @published Isolate isolate;
+
+  Task _updateTask;
+  Task _renderTask;
+  SampleBufferControlElement sampleBufferControlElement;
+  StackTraceTreeConfigElement stackTraceTreeConfigElement;
+  CpuProfileTreeElement cpuProfileTreeElement;
 }
 
 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 92 matching lines @@
     for (var i = 0; i < sortedRows.length; i++) {
       var rowIndex = sortedRows[i];
       var tr = table.children[i];
       _updateRow(tr, rowIndex, spacerColumns, refColumn);
     }
   }
 }
 
 @CustomTag('cpu-profile-table')
 class CpuProfileTableElement extends ObservatoryElement {
-  final Stopwatch _sw = new Stopwatch();
-  final CpuProfile profile = new CpuProfile();
-  StreamSubscription _resizeSubscription;
-  @observable NameSortedTable profileTable;
-  @observable NameSortedTable profileCallersTable;
-  @observable NameSortedTable profileCalleesTable;
-  @observable ServiceFunction focusedFunction;
-  @observable int focusedRow;
-  @observable String fetchTime = '';
-  @observable String loadTime = '';
-  @observable String state = 'Requested';
-  @observable var exception;
-  @observable var stackTrace;
-  @observable Isolate isolate;
-  @observable String sampleCount = '';
-  @observable String refreshTime = '';
-  @observable String sampleRate = '';
-  @observable String stackDepth = '';
-  @observable String timeSpan = '';
-  @observable String directionSelector = 'Up';
-
   CpuProfileTableElement.created() : super.created() {
+    _updateTask = new Task(update);
+    _renderTask = new Task(render);
     var columns = [
         new SortedTableColumn.withFormatter('Executing (%)',
                                             Utils.formatPercentNormalized),
         new SortedTableColumn.withFormatter('In stack (%)',
                                             Utils.formatPercentNormalized),
         new SortedTableColumn('Method'),
     ];
     profileTable = new NameSortedTable(columns);
     profileTable.sortColumnIndex = 0;
 
     columns = [
         new SortedTableColumn.withFormatter('Callees (%)',
                                             Utils.formatPercentNormalized),
         new SortedTableColumn('Method')
     ];
     profileCalleesTable = new NameSortedTable(columns);
     profileCalleesTable.sortColumnIndex = 0;
 
     columns = [
         new SortedTableColumn.withFormatter('Callers (%)',
                                             Utils.formatPercentNormalized),
         new SortedTableColumn('Method')
     ];
     profileCallersTable = new NameSortedTable(columns);
     profileCallersTable.sortColumnIndex = 0;
   }
 
   attached() {
     super.attached();
+    sampleBufferControlElement = shadowRoot.query('#sampleBufferControl');
+    assert(sampleBufferControlElement != null);
+    sampleBufferControlElement.onSampleBufferUpdate = onSampleBufferChange;
+    // Disable the tag selector- we always want no tags.
+    sampleBufferControlElement.tagSelector = 'None';
+    sampleBufferControlElement.showTagSelector = false;
+    stackTraceTreeConfigElement = shadowRoot.query('#stackTraceTreeConfig');
+    assert(stackTraceTreeConfigElement != null);
+    stackTraceTreeConfigElement.onTreeConfigChange = onTreeConfigChange;
+    stackTraceTreeConfigElement.modeSelector = 'Function';
+    stackTraceTreeConfigElement.showModeSelector = false;
+    stackTraceTreeConfigElement.directionSelector = 'Down';
+    stackTraceTreeConfigElement.showDirectionSelector = false;
+    cpuProfileTreeElement = shadowRoot.querySelector('#cpuProfileTree');
+    assert(cpuProfileTreeElement != null);
+    cpuProfileTreeElement.profile = sampleBufferControlElement.profile;
+    _updateTask.queue();
     _resizeSubscription = window.onResize.listen((_) => _updateSize());
     _updateSize();
   }
 
   detached() {
     super.detached();
     if (_resizeSubscription != null) {
       _resizeSubscription.cancel();
     }
   }
 
   _updateSize() {
     HtmlElement e = $['main'];
     final totalHeight = window.innerHeight;
     final top = e.offset.top;
     final bottomMargin = 32;
     final mainHeight = totalHeight - top - bottomMargin;
     e.style.setProperty('height', '${mainHeight}px');
   }
 
-  isolateChanged() {
-    _getCpuProfile()
-      .catchError(app.handleException)
-      .whenComplete(checkParameters);
+  isolateChanged(oldValue) {
+    _updateTask.queue();
+  }
+
+  update() {
+    _clearView();
+    if (sampleBufferControlElement != null) {
+      sampleBufferControlElement.reload(isolate).whenComplete(checkParameters);
+    }
+  }
+
+  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;
+    _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() {
+    _updateView();
   }
 
   checkParameters() {
     var functionId = app.locationManager.uri.queryParameters['functionId'];
     if (functionId == null) {
       _focusOnFunction(null);
       return;
     }
     if (isolate == null) {
       return;
     }
     isolate.getObject(functionId).then((func) => _focusOnFunction(func));
   }
 
-  void directionSelectorChanged(oldValue) {
-    _updateFunctionTreeView();
-  }
-
-  Future refresh() {
-    return _getCpuProfile();
-  }
-
-  _onFetchStarted() {
-    _sw.reset();
-    _sw.start();
-    state = 'Requested';
-  }
-
-  _onFetchFinished() {
-    _sw.stop();
-    fetchTime = formatTimeMilliseconds(_sw.elapsedMilliseconds);
-  }
-
-  _onLoadStarted() {
-    _sw.reset();
-    _sw.start();
-    state = 'Loading';
-  }
-
-  _onLoadFinished() {
-    _sw.stop();
-    loadTime = formatTimeMilliseconds(_sw.elapsedMilliseconds);
-    state = 'Loaded';
-  }
-
-  Future clearCpuProfile() {
-    profile.clear();
-    _clearView();
-    if (isolate == null) {
-      return new Future.value(null);
-    }
-    return isolate.invokeRpc('_clearCpuProfile', { })
-    .then((ServiceMap response) {
-      _updateView();
-    });
-  }
-
-  Future _getCpuProfile() async {
-    profile.clear();
-    _clearView();
-    if (isolate == null) {
-      return new Future.value(null);
-    }
-    _onFetchStarted();
-    try {
-      var params = { 'tags': 'None' };
-      var response = await isolate.invokeRpc('_getCpuProfile', params);
-      _onFetchFinished();
-      _onLoadStarted();
-      profile.load(isolate, response);
-      profile.buildFunctionCallerAndCallees();
-      _onLoadFinished();
-      _updateView();
-    } catch (e, st) {
-      bool handled = false;
-      if (e is ServerRpcException) {
-        ServerRpcException se = e;
-        if (se.code == ServerRpcException.kFeatureDisabled) {
-          state = 'Disabled';
-          handled = true;
-        }
-      }
-      if (!handled) {
-        state = 'Exception';
-        exception = e;
-        stackTrace = st;
-        rethrow;
-      }
-    }
-  }
-
   _clearView() {
     profileTable.clearRows();
     _renderTable();
   }
 
   _updateView() {
-    sampleCount = profile.sampleCount.toString();
-    refreshTime = new DateTime.now().toString();
-    stackDepth = profile.stackDepth.toString();
-    sampleRate = profile.sampleRate.toStringAsFixed(0);
-    timeSpan = formatTime(profile.timeSpan);
     _buildFunctionTable();
     _renderTable();
     _updateFunctionTreeView();
   }
 
   int _findFunctionRow(ServiceFunction function) {
     for (var i = 0; i < profileTable.sortedRows.length; i++) {
       var rowIndex = profileTable.sortedRows[i];
       var row = profileTable.rows[rowIndex];
       if (row.values[NameSortedTable.FUNCTION_COLUMN] == function) {
@@ skipping 179 matching lines @@
     _changeSort(target, profileCalleesTable);
     _renderCallTable($['callees-table'], profileCalleesTable, _onCalleesClick);
   }
 
   //////
   ///
   /// Function tree.
   ///
   TableTree functionTree;
   _updateFunctionTreeView() {
-    CpuProfileTreeElement cpuProfileTreeElement =
-        shadowRoot.querySelector('#cpuProfileTree');
-    ProfileTreeDirection direction = ProfileTreeDirection.Exclusive;
-    if (directionSelector != 'Up') {
-      direction = ProfileTreeDirection.Inclusive;
-    }
-    ProfileTreeMode mode = ProfileTreeMode.Function;
-    cpuProfileTreeElement.profile = profile;
-    cpuProfileTreeElement.direction = direction;
-    cpuProfileTreeElement.mode = mode;
     cpuProfileTreeElement.functionFilter = (FunctionCallTreeNode node) {
       return node.profileFunction.function == focusedFunction;
     };
     cpuProfileTreeElement.render();
   }
+
+  @published Isolate isolate;
+  @observable NameSortedTable profileTable;
+  @observable NameSortedTable profileCallersTable;
+  @observable NameSortedTable profileCalleesTable;
+  @observable ServiceFunction focusedFunction;
+  @observable int focusedRow;
+
+
+  StreamSubscription _resizeSubscription;
+  Task _updateTask;
+  Task _renderTask;
+
+  CpuProfile get profile => sampleBufferControlElement.profile;
+  SampleBufferControlElement sampleBufferControlElement;
+  StackTraceTreeConfigElement stackTraceTreeConfigElement;
+  CpuProfileTreeElement cpuProfileTreeElement;
 }
 
 enum ProfileTreeDirection {
   Exclusive,
   Inclusive
 }
 
 enum ProfileTreeMode {
   Code,
   Function,
@@ skipping 63 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);
   }
 }