Visualize heap fragmentation in Observatory.

Visualize heap fragmentation in Observatory.

R=johnmccutchan@google.com

Committed: https://code.google.com/p/dart/source/detail?r=33754

[koda, 2014-03-13 21:58:17]

To not further slow down the loading of the page, I hid this visualization
behind a "Show Fragmentation" button.

This is a simple first version with random colors and no breaks between pages.

For the record, this is my first non-trivial piece of Dart code and my first
contact with Polymer.

[koda, 2014-03-13 22:27:43]

On 2014/03/13 21:58:17, koda wrote:
> To not further slow down the loading of the page, I hid this visualization
> behind a "Show Fragmentation" button.
> 
> This is a simple first version with random colors and no breaks between pages.
> 
> For the record, this is my first non-trivial piece of Dart code and my first
> contact with Polymer.

Summary of offline discussion:
* Create new "heap map" page separate from heap profile.
* Render bitmap in worker isolate to avoid blocking UI.
* Show progress indication.

[Cutch, 2014-03-14 17:35:30]

On 2014/03/13 22:27:43, koda wrote:
> On 2014/03/13 21:58:17, koda wrote:
> > To not further slow down the loading of the page, I hid this visualization
> > behind a "Show Fragmentation" button.
> > 
> > This is a simple first version with random colors and no breaks between
pages.
> > 
> > For the record, this is my first non-trivial piece of Dart code and my first
> > contact with Polymer.
> 
> Summary of offline discussion:
> * Create new "heap map" page separate from heap profile.
> * Render bitmap in worker isolate to avoid blocking UI.
> * Show progress indication.

I wonder about:

Initially displaying pages as squares (think disk defragment tools) with the
external fragmentation percentage displayed inside each square as text.

Clicking on a page square would drill in and let you see the high level of
detail that you're currently presenting in the image.

[koda, 2014-03-14 18:34:24]

On 2014/03/14 17:35:30, Cutch wrote:
> On 2014/03/13 22:27:43, koda wrote:
> > On 2014/03/13 21:58:17, koda wrote:
> > > To not further slow down the loading of the page, I hid this visualization
> > > behind a "Show Fragmentation" button.
> > > 
> > > This is a simple first version with random colors and no breaks between
> pages.
> > > 
> > > For the record, this is my first non-trivial piece of Dart code and my
first
> > > contact with Polymer.
> > 
> > Summary of offline discussion:
> > * Create new "heap map" page separate from heap profile.
> > * Render bitmap in worker isolate to avoid blocking UI.
> > * Show progress indication.
> 
> I wonder about:
> 
> Initially displaying pages as squares (think disk defragment tools) with the
> external fragmentation percentage displayed inside each square as text.
> 
> Clicking on a page square would drill in and let you see the high level of
> detail that you're currently presenting in the image.

Updated (demo:
http://ndersson.mtv.corp.google.com:3030/client/web/index.html#/isolates/ ):

* Made heap map its own element.
* Async rendering of each page, UI remains responsive
* Progress indicator

I agree that separate overview/detail views would be nice to have. It requires
adding a new request/message type though, so I'd like to save that for the next
version.

[Cutch, 2014-03-17 16:00:11]

lgtm after comments are addressed and verified to work compiled to js.

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
File runtime/bin/vmservice/client/lib/elements.dart (right):

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
runtime/bin/vmservice/client/lib/elements.dart:22: export
'package:observatory/src/elements/heap_map.dart';
Add the corresponding entry to elements.html

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
File runtime/bin/vmservice/client/lib/src/elements/heap_map.dart (right):

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
runtime/bin/vmservice/client/lib/src/elements/heap_map.dart:93:
_renderPage(startPage + 1, dataIndex, colorMap);
Add a comment about what's going on with new Future()

[koda, 2014-03-17 17:05:34]

On 2014/03/17 16:00:11, Cutch wrote:
> lgtm after comments are addressed and verified to work compiled to js.
> 
>
https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
> File runtime/bin/vmservice/client/lib/elements.dart (right):
> 
>
https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
> runtime/bin/vmservice/client/lib/elements.dart:22: export
> 'package:observatory/src/elements/heap_map.dart';
> Add the corresponding entry to elements.html
> 
>
https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
> File runtime/bin/vmservice/client/lib/src/elements/heap_map.dart (right):
> 
>
https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
> runtime/bin/vmservice/client/lib/src/elements/heap_map.dart:93:
> _renderPage(startPage + 1, dataIndex, colorMap);
> Add a comment about what's going on with new Future()

Turns out the JS version calls enteredView and fragmentationChanged in the
opposite order on initial load; I'll change my code to handle this.

[koda, 2014-03-17 17:13:59]

Solved the issue on JS by making async call to _updateFragmentation.

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
File runtime/bin/vmservice/client/lib/elements.dart (right):

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
runtime/bin/vmservice/client/lib/elements.dart:22: export
'package:observatory/src/elements/heap_map.dart';
On 2014/03/17 16:00:11, Cutch wrote:
> Add the corresponding entry to elements.html

Done.

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
File runtime/bin/vmservice/client/lib/src/elements/heap_map.dart (right):

https://codereview.chromium.org/197923005/diff/80001/runtime/bin/vmservice/cl...
runtime/bin/vmservice/client/lib/src/elements/heap_map.dart:93:
_renderPage(startPage + 1, dataIndex, colorMap);
On 2014/03/17 16:00:11, Cutch wrote:
> Add a comment about what's going on with new Future()

Done.

[koda, 2014-03-17 17:17:02]

Committed patchset #7 manually as r33754 (presubmit successful).