Port cpu profile flame graph to draw to canvas. (#506)

* Port cpu profile flame graph to draw to canvas.

Author: kenzieschmoll

packages/devtools/lib/src/timeline/cpu_flame_chart.dart

@@ -11,6 +11,7 @@ class CpuProfileData {
   CpuProfileData(this.cpuProfileResponse)
       : sampleCount = cpuProfileResponse.json['sampleCount'],
         samplePeriod = cpuProfileResponse.json['samplePeriod'],
+        timeExtentMicros = cpuProfileResponse.json['timeExtentMicros'],
         stackFramesJson = cpuProfileResponse.json['stackFrames'],
         stackTraceEvents = cpuProfileResponse.json['traceEvents'] {
     _processStackFrames(cpuProfileResponse);
@@ -19,6 +20,7 @@ class CpuProfileData {
   final Response cpuProfileResponse;
   final int sampleCount;
   final int samplePeriod;
+  final int timeExtentMicros;
   final Map<String, dynamic> stackFramesJson;
 
   /// Trace events associated with the last stackFrame in each sample (i.e. the

packages/devtools/lib/src/timeline/cpu_profile_protocol.dart

@@ -12,14 +12,11 @@ import '../ui/primer.dart';
 import '../utils.dart';
 import 'cpu_bottom_up.dart';
 import 'cpu_call_tree.dart';
-import 'cpu_flame_chart.dart';
 import 'cpu_profile_protocol.dart';
+import 'flame_chart_canvas.dart';
 import 'frame_flame_chart.dart';
 import 'timeline_protocol.dart';
 
-// TODO(kenzie): this should be removed once the cpu flame chart is optimized.
-const bool showCpuFlameChart = false;
-
 class EventDetails extends CoreElement {
   EventDetails() : super('div') {
     flex();
@@ -146,10 +143,9 @@ class _UiEventDetails extends CoreElement {
     layoutVertical();
     flex();
 
-    if (showCpuFlameChart) {
-      flameChart = CpuFlameChart();
-    } else {
-      flameChart = div(c: 'ui-details-section');
+    flameChart = div(c: 'ui-details-section');
+
+    if (!showCpuFlameChart) {
       flameChart.add(div(text: 'CPU flame chart coming soon', c: 'message'));
     }
 
@@ -163,8 +159,6 @@ class _UiEventDetails extends CoreElement {
     if (showCpuFlameChart) {
       add(stackFrameDetails);
     }
-
-    onSelectedCpuFlameChartItem.listen(updateStackFrameDetails);
   }
 
   static const String stackFrameDetailsDefaultText = '[No function selected]';
@@ -174,15 +168,20 @@ class _UiEventDetails extends CoreElement {
   CpuCallTree callTree;
   CoreElement stackFrameDetails;
 
+  EventDetailsTabType selectedTab = EventDetailsTabType.flameChart;
+
+  bool showingFlameChartError = false;
+
   TimelineEvent event;
 
   CpuProfileData cpuProfileData;
 
   void showTab(EventDetailsTabType tabType) {
+    selectedTab = tabType;
     switch (tabType) {
       case EventDetailsTabType.flameChart:
         flameChart.attribute('hidden', false);
-        stackFrameDetails.attribute('hidden', false);
+        stackFrameDetails.attribute('hidden', showingFlameChartError);
         bottomUp.attribute('hidden', true);
         callTree.attribute('hidden', true);
         break;
@@ -201,6 +200,45 @@ class _UiEventDetails extends CoreElement {
     }
   }
 
+  Future<void> _drawFlameChart() async {
+    final Response response =
+        await serviceManager.service.getCpuProfileTimeline(
+      serviceManager.isolateManager.selectedIsolate.id,
+      event.startTime,
+      event.duration,
+    );
+
+    cpuProfileData = CpuProfileData(response);
+
+    if (cpuProfileData.stackFrames.isEmpty) {
+      _updateFlameChartForError(div(
+        text: 'CPU profile unavailable for time range'
+            ' [${event.startTime} - ${event.endTime}]',
+        c: 'message',
+      ));
+      return;
+    }
+
+    final flameChartCanvas = FlameChartCanvas(
+      data: cpuProfileData,
+      flameChartWidth: flameChart.element.clientWidth,
+      flameChartHeight:
+          cpuProfileData.cpuProfileRoot.depth * rowHeightWithPadding,
+    );
+
+    flameChartCanvas.onStackFrameSelected.listen((CpuStackFrame stackFrame) {
+      _updateStackFrameDetails(stackFrame);
+    });
+
+    flameChart.add(flameChartCanvas.element);
+  }
+
+  void _updateFlameChartForError(CoreElement errorDiv) {
+    flameChart.add(errorDiv);
+    showingFlameChartError = true;
+    stackFrameDetails.attribute('hidden', true);
+  }
+
   Future<void> update(TimelineEvent event) async {
     if (event == this.event) {
       return;
@@ -212,17 +250,11 @@ class _UiEventDetails extends CoreElement {
     final Spinner spinner = Spinner()..clazz('cpu-profile-spinner');
     add(spinner);
 
-    final Response response =
-        await serviceManager.service.getCpuProfileTimeline(
-      serviceManager.isolateManager.selectedIsolate.id,
-      event.startTime,
-      event.duration,
-    );
-
-    cpuProfileData = CpuProfileData(response);
-
-    if (showCpuFlameChart) {
-      (flameChart as CpuFlameChart).update(cpuProfileData);
+    try {
+      await _drawFlameChart();
+    } catch (e) {
+      _updateFlameChartForError(div(
+          text: 'Error retrieving CPU profile: ${e.toString()}', c: 'message'));
     }
 
     spinner.element.remove();
@@ -233,11 +265,14 @@ class _UiEventDetails extends CoreElement {
   void reset() {
     flameChart.clear();
     stackFrameDetails.clear();
+    showingFlameChartError = false;
+    stackFrameDetails.attribute(
+        'hidden', selectedTab != EventDetailsTabType.flameChart);
     cpuProfileData = null;
   }
 
-  void updateStackFrameDetails(CpuFlameChartItem item) {
-    stackFrameDetails.text = item.stackFrame.toString();
+  void _updateStackFrameDetails(CpuStackFrame stackFrame) {
+    stackFrameDetails.text = stackFrame.toString();
   }
 }
 

packages/devtools/lib/src/timeline/event_details.dart

@@ -14,6 +14,8 @@ import '../ui/flutter_html_shim.dart';
 import '../ui/theme.dart';
 import 'timeline.dart';
 
+// TODO(kenzie): delete this file once frame_flame_chart is ported to canvas.
+
 const selectedFlameChartItemColor =
     ThemedColor(mainUiColorSelectedLight, mainUiColorSelectedDark);
 
@@ -202,6 +204,11 @@ class FlameChartItem {
   /// text does not get too close to the right hand size of each div.
   static const labelPaddingRight = 4;
 
+  static const selectedBorderColor = ThemedColor(
+    Color(0x5A1B1F23),
+    Color(0x5A1B1F23),
+  );
+
   /// Left value for the flame chart item at zoom level 1.
   final num startingLeft;
 
@@ -256,9 +263,7 @@ class FlameChartItem {
       ..backgroundColor =
           colorToCss(selected ? selectedFlameChartItemColor : backgroundColor)
       ..border = selected ? '1px solid' : 'none'
-      ..borderColor = selected
-          ? colorToCss(const Color(0x5A1B1F23))
-          : colorToCss(const Color(0x231B1F23));
+      ..borderColor = colorToCss(selectedBorderColor);
     itemLabel.style.color =
         colorToCss(selected ? selectedTextColor : defaultTextColor);
   }