pkg/observatory/lib/src/elements/process_snapshot.dart - sdk - Git at Google

 // Copyright (c) 2020, 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.

 import 'dart:async';
 import 'dart:convert';
 import 'dart:js_interop';
 import 'dart:math' as Math;

 import 'package:web/web.dart';

 import '../../models.dart' as M;
 import 'containers/virtual_tree.dart';
 import 'helpers/custom_element.dart';
 import 'helpers/element_utils.dart';
 import 'helpers/nav_bar.dart';
 import 'helpers/nav_menu.dart';
 import 'helpers/rendering_scheduler.dart';
 import 'nav/notify.dart';
 import 'nav/refresh.dart';
 import 'nav/top_menu.dart';
 import 'nav/vm_menu.dart';
 import 'tree_map.dart';
 import '../../utils.dart';

 enum ProcessSnapshotTreeMode { treeMap, tree, treeMapDiff, treeDiff }

 // Note the order of these lists is reflected in the UI, and the first option
 // is the default.
 const _viewModes = [
   ProcessSnapshotTreeMode.treeMap,
   ProcessSnapshotTreeMode.tree,
 ];

 const _diffModes = [
   ProcessSnapshotTreeMode.treeMapDiff,
   ProcessSnapshotTreeMode.treeDiff,
 ];

 class ProcessItemTreeMap extends NormalTreeMap<Map> {
   ProcessSnapshotElement element;
   ProcessItemTreeMap(this.element);

   int getSize(Map node) => node["size"];
   String getType(Map node) => node["name"];
   String getName(Map node) => node["name"];
   String getTooltip(Map node) => getLabel(node) + "\n" + node["description"];
   Map getParent(Map node) => node["parent"];
   Iterable<Map> getChildren(Map node) => new List<Map>.from(node["children"]);
   void onSelect(Map node) {
     element.selection = node;
     element._r.dirty();
   }

   void onDetails(Map node) {}
 }

 class ProcessItemDiff {
   Map? _a;
   Map? _b;
   ProcessItemDiff? parent;
   List<ProcessItemDiff>? children;
   int retainedGain = -1;
   int retainedLoss = -1;
   int retainedCommon = -1;

   int get retainedSizeA => _a == null ? 0 : _a!["size"];
   int get retainedSizeB => _b == null ? 0 : _b!["size"];
   int get retainedSizeDiff => retainedSizeB - retainedSizeA;

   int get shallowSizeA {
     if (_a == null) return 0;
     var s = _a!["size"];
     for (var c in _a!["children"]) {
       s -= c["size"];
     }
     return s;
   }

   int get shallowSizeB {
     if (_b == null) return 0;
     var s = _b!["size"];
     for (var c in _b!["children"]) {
       s -= c["size"];
     }
     return s;
   }

   int get shallowSizeDiff => shallowSizeB - shallowSizeA;

   String get name => _a == null ? _b!["name"] : _a!["name"];

   static ProcessItemDiff from(Map a, Map b) {
     var root = new ProcessItemDiff();
     root._a = a;
     root._b = b;

     // We must use an explicit stack instead of the call stack because the
     // dominator tree can be arbitrarily deep. We need to compute the full
     // tree to compute areas, so we do this eagerly to avoid having to
     // repeatedly test for initialization.
     var worklist = <ProcessItemDiff>[];
     worklist.add(root);
     // Compute children top-down.
     for (var i = 0; i < worklist.length; i++) {
       worklist[i]._computeChildren(worklist);
     }
     // Compute area bottom-up.
     for (var i = worklist.length - 1; i >= 0; i--) {
       worklist[i]._computeArea();
     }

     return root;
   }

   void _computeChildren(List<ProcessItemDiff> worklist) {
     assert(children == null);
     children = <ProcessItemDiff>[];

     // Matching children by name.
     final childrenB = <String, Map>{};
     if (_b != null)
       for (var childB in _b!["children"]) {
         childrenB[childB["name"]] = childB;
       }
     if (_a != null)
       for (var childA in _a!["children"]) {
         var childDiff = new ProcessItemDiff();
         childDiff.parent = this;
         childDiff._a = childA;
         var qualifiedName = childA["name"];
         var childB = childrenB[qualifiedName];
         if (childB != null) {
           childrenB.remove(qualifiedName);
           childDiff._b = childB;
         }
         children!.add(childDiff);
         worklist.add(childDiff);
       }
     for (var childB in childrenB.values) {
       var childDiff = new ProcessItemDiff();
       childDiff.parent = this;
       childDiff._b = childB;
       children!.add(childDiff);
       worklist.add(childDiff);
     }

     if (children!.length == 0) {
       // Compress.
       children = const <ProcessItemDiff>[];
     }
   }

   void _computeArea() {
     int g = 0;
     int l = 0;
     int c = 0;
     for (var child in children!) {
       g += child.retainedGain;
       l += child.retainedLoss;
       c += child.retainedCommon;
     }
     int d = shallowSizeDiff;
     if (d > 0) {
       g += d;
       c += shallowSizeA;
     } else {
       l -= d;
       c += shallowSizeB;
     }
     assert(retainedSizeA + g - l == retainedSizeB);
     retainedGain = g;
     retainedLoss = l;
     retainedCommon = c;
   }
 }

 class ProcessItemDiffTreeMap extends DiffTreeMap<ProcessItemDiff> {
   ProcessSnapshotElement element;
   ProcessItemDiffTreeMap(this.element);

   int getSizeA(ProcessItemDiff node) => node.retainedSizeA;
   int getSizeB(ProcessItemDiff node) => node.retainedSizeB;
   int getGain(ProcessItemDiff node) => node.retainedGain;
   int getLoss(ProcessItemDiff node) => node.retainedLoss;
   int getCommon(ProcessItemDiff node) => node.retainedCommon;

   String getType(ProcessItemDiff node) => node.name;
   String getName(ProcessItemDiff node) => node.name;
   ProcessItemDiff? getParent(ProcessItemDiff node) => node.parent;
   Iterable<ProcessItemDiff> getChildren(ProcessItemDiff node) => node.children!;
   void onSelect(ProcessItemDiff node) {
     element.diffSelection = node;
     element._r.dirty();
   }

   void onDetails(ProcessItemDiff node) {}
 }

 class ProcessSnapshotElement extends CustomElement implements Renderable {
   late RenderingScheduler<ProcessSnapshotElement> _r;

   Stream<RenderedEvent<ProcessSnapshotElement>> get onRendered => _r.onRendered;

   late M.VM _vm;
   late M.EventRepository _events;
   late M.NotificationRepository _notifications;
   M.NotificationRepository get notifications => _notifications;
   M.VMRef get vm => _vm;

   List<Map> _loadedSnapshots = <Map>[];
   Map? selection;
   ProcessItemDiff? diffSelection;
   Map? _snapshotA;
   Map? _snapshotB;
   ProcessSnapshotTreeMode _mode = ProcessSnapshotTreeMode.treeMap;

   factory ProcessSnapshotElement(
     M.VM vm,
     M.EventRepository events,
     M.NotificationRepository notifications, {
     RenderingQueue? queue,
   }) {
     ProcessSnapshotElement e = new ProcessSnapshotElement.created();
     e._r = new RenderingScheduler<ProcessSnapshotElement>(e, queue: queue);
     e._vm = vm;
     e._events = events;
     e._notifications = notifications;
     return e;
   }

   ProcessSnapshotElement.created() : super.created('process-snapshot');

   @override
   attached() {
     super.attached();
     _r.enable();
     _refresh();
   }

   @override
   detached() {
     super.detached();
     _r.disable(notify: true);
     removeChildren();
   }

   void render() {
     final content = <HTMLElement>[
       navBar(<HTMLElement>[
         new NavTopMenuElement(queue: _r.queue).element,
         new NavVMMenuElement(_vm, _events, queue: _r.queue).element,
         navMenu('process snapshot'),
         (new NavRefreshElement(queue: _r.queue)
               ..onRefresh.listen((e) {
                 _refresh();
               }))
             .element,
         (new NavRefreshElement(label: 'save', queue: _r.queue)
               ..disabled = _snapshotA == null
               ..onRefresh.listen((e) {
                 _save();
               }))
             .element,
         (new NavRefreshElement(label: 'load', queue: _r.queue)
               ..onRefresh.listen((e) {
                 _load();
               }))
             .element,
         new NavNotifyElement(_notifications, queue: _r.queue).element,
       ]),
     ];
     if (_snapshotA == null) {
       // Loading
       content.add(new HTMLSpanElement()..textContent = "Loading");
     } else {
       // Loaded
       content.addAll(_createReport());
     }
     children = content;
   }

   _refresh() async {
     Map snapshot = await (vm as dynamic).invokeRpcNoUpgrade(
       "getProcessMemoryUsage",
       {},
     );
     _snapshotLoaded(snapshot);
   }

   _save() {
     var blob = new Blob(
       [jsonEncode(_snapshotA).toJS].toJS,
       BlobPropertyBag(type: 'application/json'),
     );
     var blobUrl = URL.createObjectURL(blob);
     var link = new HTMLAnchorElement();
     link.href = blobUrl;
     var now = new DateTime.now();
     link.download = 'dart-process-${now.year}-${now.month}-${now.day}.json';
     link.click();
   }

   _load() {
     var input = new HTMLInputElement();
     input.type = 'file';
     input.multiple = false;
     input.onChange.listen((event) {
       final file = input.files!.item(0);
       final reader = FileReader();
       reader
         ..onLoadEnd.first.then((_) async {
           _snapshotLoaded(jsonDecode(reader.result as String));
         })
         ..readAsText(file as Blob);
     });
     input.click();
   }

   _snapshotLoaded(Map snapshot) {
     _loadedSnapshots.add(snapshot);
     _snapshotA = snapshot;
     _snapshotB = snapshot;
     selection = null;
     diffSelection = null;
     _r.dirty();
   }

   void _createTreeMap<T>(List<HTMLElement> report, TreeMap<T> treemap, T root) {
     final content = new HTMLDivElement();
     content.style.border = '1px solid black';
     content.style.width = '100%';
     content.style.height = '100%';
     content.textContent = 'Performing layout...';
     Timer.run(() {
       // Generate the treemap after the content div has been added to the
       // document so that we can ask the browser how much space is
       // available for treemap layout.
       treemap.showIn(root, content);
     });

     final text =
         'Double-click a tile to zoom in. Double-click the outermost tile to '
         'zoom out. Process memory that is not further subdivided is non-Dart '
         'memory not known to the VM.';
     report.addAll([
       new HTMLDivElement()
         ..className = 'content-centered-big explanation'
         ..textContent = text,
       new HTMLDivElement()
         ..className = 'content-centered-big'
         ..style.width = '100%'
         ..style.height = '100%'
         ..appendChild(content),
     ]);
   }

   List<HTMLElement> _createReport() {
     var report = <HTMLElement>[
       new HTMLDivElement()
         ..className = 'content-centered-big'
         ..appendChildren(<HTMLElement>[
           new HTMLDivElement()
             ..className = 'memberList'
             ..appendChildren(<HTMLElement>[
               new HTMLDivElement()
                 ..className = 'memberItem'
                 ..appendChildren(<HTMLElement>[
                   new HTMLDivElement()
                     ..className = 'memberName'
                     ..textContent = 'Snapshot A',
                   new HTMLDivElement()
                     ..className = 'memberName'
                     ..appendChildren(_createSnapshotSelectA()),
                 ]),
               new HTMLDivElement()
                 ..className = 'memberItem'
                 ..appendChildren(<HTMLElement>[
                   new HTMLDivElement()
                     ..className = 'memberName'
                     ..textContent = 'Snapshot B',
                   new HTMLDivElement()
                     ..className = 'memberName'
                     ..appendChildren(_createSnapshotSelectB()),
                 ]),
               new HTMLDivElement()
                 ..className = 'memberItem'
                 ..appendChildren(<HTMLElement>[
                   new HTMLDivElement()
                     ..className = 'memberName'
                     ..textContent = (_snapshotA == _snapshotB)
                         ? 'View '
                         : 'Compare ',
                   new HTMLDivElement()
                     ..className = 'memberName'
                     ..appendChildren(_createModeSelect()),
                 ]),
             ]),
         ]),
     ];

     switch (_mode) {
       case ProcessSnapshotTreeMode.treeMap:
         if (selection == null) {
           selection = _snapshotA!["root"];
         }
         _createTreeMap(report, new ProcessItemTreeMap(this), selection);
         break;
       case ProcessSnapshotTreeMode.tree:
         if (selection == null) {
           selection = _snapshotA!["root"];
         }
         _tree = new VirtualTreeElement(
           _createItem,
           _updateItem,
           _getChildrenItem,
           items: [selection],
           queue: _r.queue,
         );
         _tree!.expand(selection!);
         report.add(_tree!.element);
         break;
       case ProcessSnapshotTreeMode.treeMapDiff:
         if (diffSelection == null) {
           diffSelection = ProcessItemDiff.from(
             _snapshotA!["root"],
             _snapshotB!["root"],
           );
         }
         _createTreeMap(report, new ProcessItemDiffTreeMap(this), diffSelection);
         break;
       case ProcessSnapshotTreeMode.treeDiff:
         var root = ProcessItemDiff.from(
           _snapshotA!["root"],
           _snapshotB!["root"],
         );
         _tree = new VirtualTreeElement(
           _createItemDiff,
           _updateItemDiff,
           _getChildrenItemDiff,
           items: [root],
           queue: _r.queue,
         );
         _tree!.expand(root);
         report.add(_tree!.element);
         break;
     }

     return report;
   }

   VirtualTreeElement? _tree;

   static HTMLElement _createItem(toggle) {
     return new HTMLDivElement()
       ..className = 'tree-item'
       ..appendChildren(<HTMLElement>[
         new HTMLSpanElement()
           ..className = 'percentage'
           ..title = 'percentage of total',
         new HTMLSpanElement()
           ..className = 'size'
           ..title = 'retained size',
         new HTMLSpanElement()..className = 'lines',
         new HTMLButtonElement()
           ..className = 'expander'
           ..onClick.listen((_) => toggle(autoToggleSingleChildNodes: true)),
         new HTMLSpanElement()..className = 'name',
       ]);
   }

   static HTMLElement _createItemDiff(toggle) {
     return new HTMLDivElement()
       ..className = 'tree-item'
       ..appendChildren(<HTMLElement>[
         new HTMLSpanElement()
           ..className = 'percentage'
           ..title = 'percentage of total',
         new HTMLSpanElement()
           ..className = 'size'
           ..title = 'retained size A',
         new HTMLSpanElement()
           ..className = 'percentage'
           ..title = 'percentage of total',
         new HTMLSpanElement()
           ..className = 'size'
           ..title = 'retained size B',
         new HTMLSpanElement()
           ..className = 'size'
           ..title = 'retained size change',
         new HTMLSpanElement()..className = 'lines',
         new HTMLButtonElement()
           ..className = 'expander'
           ..onClick.listen((_) => toggle(autoToggleSingleChildNodes: true)),
         new HTMLSpanElement()..className = 'name',
       ]);
   }

   void _updateItem(HTMLElement element, node, int depth) {
     var size = node["size"];
     var rootSize = _snapshotA!["root"]["size"];
     (element.children.item(0) as HTMLElement).textContent =
         Utils.formatPercentNormalized(size * 1.0 / rootSize);
     (element.children.item(1) as HTMLElement).textContent = Utils.formatSize(
       size,
     );
     _updateLines(element.children.item(2) as HTMLElement, depth);
     if (_getChildrenItem(node).isNotEmpty) {
       (element.children.item(3) as HTMLElement).textContent =
           _tree!.isExpanded(node) ? '▼' : '►';
     } else {
       (element.children.item(3) as HTMLElement).textContent = '';
     }
     (element.children.item(4) as HTMLElement).textContent = node["name"];
     (element.children.item(4) as HTMLElement).title = node["description"];
   }

   void _updateItemDiff(HTMLElement element, nodeDynamic, int depth) {
     ProcessItemDiff node = nodeDynamic;
     (element.children.item(0) as HTMLElement).textContent =
         Utils.formatPercentNormalized(
           node.retainedSizeA * 1.0 / _snapshotA!["root"]["size"],
         );
     (element.children.item(1) as HTMLElement).textContent = Utils.formatSize(
       node.retainedSizeA,
     );
     (element.children.item(2) as HTMLElement).textContent =
         Utils.formatPercentNormalized(
           node.retainedSizeB * 1.0 / _snapshotB!["root"]["size"],
         );
     (element.children.item(3) as HTMLElement).textContent = Utils.formatSize(
       node.retainedSizeB,
     );
     (element.children.item(4) as HTMLElement).textContent =
         (node.retainedSizeDiff > 0 ? '+' : '') +
         Utils.formatSize(node.retainedSizeDiff);
     (element.children.item(4) as HTMLElement).style.color =
         node.retainedSizeDiff > 0 ? "red" : "green";
     _updateLines(element.children.item(5) as HTMLElement, depth);
     if (_getChildrenItemDiff(node).isNotEmpty) {
       (element.children.item(6) as HTMLElement).textContent =
           _tree!.isExpanded(node) ? '▼' : '►';
     } else {
       (element.children.item(6) as HTMLElement).textContent = '';
     }
     (element.children.item(7) as HTMLElement)..textContent = node.name;
   }

   static Iterable _getChildrenItem(node) {
     return new List<Map>.from(node["children"]);
   }

   static Iterable _getChildrenItemDiff(nodeDynamic) {
     ProcessItemDiff node = nodeDynamic;
     final list = node.children!.toList();
     list.sort((a, b) => b.retainedSizeDiff - a.retainedSizeDiff);
     return list;
   }

   static _updateLines(HTMLElement element, int n) {
     n = Math.max(0, n);
     while (element.children.length > n) {
       element.removeChild(element.lastChild!);
     }
     while (element.children.length < n) {
       element.appendChild(HTMLSpanElement());
     }
   }

   static String modeToString(ProcessSnapshotTreeMode mode) {
     switch (mode) {
       case ProcessSnapshotTreeMode.treeMap:
       case ProcessSnapshotTreeMode.treeMapDiff:
         return 'Tree Map';
       case ProcessSnapshotTreeMode.tree:
       case ProcessSnapshotTreeMode.treeDiff:
         return 'Tree';
     }
   }

   List<HTMLElement> _createModeSelect() {
     var modes = _snapshotA == _snapshotB ? _viewModes : _diffModes;
     if (!modes.contains(_mode)) {
       _mode = modes[0];
       _r.dirty();
     }
     final s = new HTMLSelectElement()
       ..className = 'analysis-select'
       ..value = modeToString(_mode)
       ..appendChildren(
         modes.map(
           (mode) => HTMLOptionElement()
             ..value = modeToString(mode)
             ..selected = _mode == mode
             ..textContent = modeToString(mode),
         ),
       );
     return [
       s
         ..onChange.listen((_) {
           _mode = modes[s.selectedIndex];
           _r.dirty();
         }),
     ];
   }

   String snapshotToString(snapshot) {
     if (snapshot == null) return "None";
     return snapshot["root"]["name"] +
         " " +
         Utils.formatSize(snapshot["root"]["size"]);
   }

   List<HTMLElement> _createSnapshotSelectA() {
     final s = HTMLSelectElement()
       ..className = 'analysis-select'
       ..value = snapshotToString(_snapshotA)
       ..appendChildren(
         _loadedSnapshots.map(
           (snapshot) => HTMLOptionElement()
             ..value = snapshotToString(snapshot)
             ..selected = _snapshotA == snapshot
             ..textContent = snapshotToString(snapshot),
         ),
       );
     return [
       s
         ..onChange.listen((_) {
           _snapshotA = _loadedSnapshots[s.selectedIndex];
           selection = null;
           diffSelection = null;
           _r.dirty();
         }),
     ];
   }

   List<HTMLElement> _createSnapshotSelectB() {
     final s = HTMLSelectElement()
       ..className = 'analysis-select'
       ..value = snapshotToString(_snapshotB)
       ..appendChildren(
         _loadedSnapshots.map(
           (snapshot) => HTMLOptionElement()
             ..value = snapshotToString(snapshot)
             ..selected = _snapshotB == snapshot
             ..textContent = snapshotToString(snapshot),
         ),
       );
     return [
       s
         ..onChange.listen((_) {
           _snapshotB = _loadedSnapshots[s.selectedIndex];
           selection = null;
           diffSelection = null;
           _r.dirty();
         }),
     ];
   }
 }
	// Copyright (c) 2020, 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.

	import 'dart:async';
	import 'dart:convert';
	import 'dart:js_interop';
	import 'dart:math' as Math;

	import 'package:web/web.dart';

	import '../../models.dart' as M;
	import 'containers/virtual_tree.dart';
	import 'helpers/custom_element.dart';
	import 'helpers/element_utils.dart';
	import 'helpers/nav_bar.dart';
	import 'helpers/nav_menu.dart';
	import 'helpers/rendering_scheduler.dart';
	import 'nav/notify.dart';
	import 'nav/refresh.dart';
	import 'nav/top_menu.dart';
	import 'nav/vm_menu.dart';
	import 'tree_map.dart';
	import '../../utils.dart';

	enum ProcessSnapshotTreeMode { treeMap, tree, treeMapDiff, treeDiff }

	// Note the order of these lists is reflected in the UI, and the first option
	// is the default.
	const _viewModes = [
	ProcessSnapshotTreeMode.treeMap,
	ProcessSnapshotTreeMode.tree,
	];

	const _diffModes = [
	ProcessSnapshotTreeMode.treeMapDiff,
	ProcessSnapshotTreeMode.treeDiff,
	];

	class ProcessItemTreeMap extends NormalTreeMap<Map> {
	ProcessSnapshotElement element;
	ProcessItemTreeMap(this.element);

	int getSize(Map node) => node["size"];
	String getType(Map node) => node["name"];
	String getName(Map node) => node["name"];
	String getTooltip(Map node) => getLabel(node) + "\n" + node["description"];
	Map getParent(Map node) => node["parent"];
	Iterable<Map> getChildren(Map node) => new List<Map>.from(node["children"]);
	void onSelect(Map node) {
	element.selection = node;
	element._r.dirty();
	}

	void onDetails(Map node) {}
	}

	class ProcessItemDiff {
	Map? _a;
	Map? _b;
	ProcessItemDiff? parent;
	List<ProcessItemDiff>? children;
	int retainedGain = -1;
	int retainedLoss = -1;
	int retainedCommon = -1;

	int get retainedSizeA => _a == null ? 0 : _a!["size"];
	int get retainedSizeB => _b == null ? 0 : _b!["size"];
	int get retainedSizeDiff => retainedSizeB - retainedSizeA;

	int get shallowSizeA {
	if (_a == null) return 0;
	var s = _a!["size"];
	for (var c in _a!["children"]) {
	s -= c["size"];
	}
	return s;
	}

	int get shallowSizeB {
	if (_b == null) return 0;
	var s = _b!["size"];
	for (var c in _b!["children"]) {
	s -= c["size"];
	}
	return s;
	}

	int get shallowSizeDiff => shallowSizeB - shallowSizeA;

	String get name => _a == null ? _b!["name"] : _a!["name"];

	static ProcessItemDiff from(Map a, Map b) {
	var root = new ProcessItemDiff();
	root._a = a;
	root._b = b;

	// We must use an explicit stack instead of the call stack because the
	// dominator tree can be arbitrarily deep. We need to compute the full
	// tree to compute areas, so we do this eagerly to avoid having to
	// repeatedly test for initialization.
	var worklist = <ProcessItemDiff>[];
	worklist.add(root);
	// Compute children top-down.
	for (var i = 0; i < worklist.length; i++) {
	worklist[i]._computeChildren(worklist);
	}
	// Compute area bottom-up.
	for (var i = worklist.length - 1; i >= 0; i--) {
	worklist[i]._computeArea();
	}

	return root;
	}

	void _computeChildren(List<ProcessItemDiff> worklist) {
	assert(children == null);
	children = <ProcessItemDiff>[];

	// Matching children by name.
	final childrenB = <String, Map>{};
	if (_b != null)
	for (var childB in _b!["children"]) {
	childrenB[childB["name"]] = childB;
	}
	if (_a != null)
	for (var childA in _a!["children"]) {
	var childDiff = new ProcessItemDiff();
	childDiff.parent = this;
	childDiff._a = childA;
	var qualifiedName = childA["name"];
	var childB = childrenB[qualifiedName];
	if (childB != null) {
	childrenB.remove(qualifiedName);
	childDiff._b = childB;
	}
	children!.add(childDiff);
	worklist.add(childDiff);
	}
	for (var childB in childrenB.values) {
	var childDiff = new ProcessItemDiff();
	childDiff.parent = this;
	childDiff._b = childB;
	children!.add(childDiff);
	worklist.add(childDiff);
	}

	if (children!.length == 0) {
	// Compress.
	children = const <ProcessItemDiff>[];
	}
	}

	void _computeArea() {
	int g = 0;
	int l = 0;
	int c = 0;
	for (var child in children!) {
	g += child.retainedGain;
	l += child.retainedLoss;
	c += child.retainedCommon;
	}
	int d = shallowSizeDiff;
	if (d > 0) {
	g += d;
	c += shallowSizeA;
	} else {
	l -= d;
	c += shallowSizeB;
	}
	assert(retainedSizeA + g - l == retainedSizeB);
	retainedGain = g;
	retainedLoss = l;
	retainedCommon = c;
	}
	}

	class ProcessItemDiffTreeMap extends DiffTreeMap<ProcessItemDiff> {
	ProcessSnapshotElement element;
	ProcessItemDiffTreeMap(this.element);

	int getSizeA(ProcessItemDiff node) => node.retainedSizeA;
	int getSizeB(ProcessItemDiff node) => node.retainedSizeB;
	int getGain(ProcessItemDiff node) => node.retainedGain;
	int getLoss(ProcessItemDiff node) => node.retainedLoss;
	int getCommon(ProcessItemDiff node) => node.retainedCommon;

	String getType(ProcessItemDiff node) => node.name;
	String getName(ProcessItemDiff node) => node.name;
	ProcessItemDiff? getParent(ProcessItemDiff node) => node.parent;
	Iterable<ProcessItemDiff> getChildren(ProcessItemDiff node) => node.children!;
	void onSelect(ProcessItemDiff node) {
	element.diffSelection = node;
	element._r.dirty();
	}

	void onDetails(ProcessItemDiff node) {}
	}

	class ProcessSnapshotElement extends CustomElement implements Renderable {
	late RenderingScheduler<ProcessSnapshotElement> _r;

	Stream<RenderedEvent<ProcessSnapshotElement>> get onRendered => _r.onRendered;

	late M.VM _vm;
	late M.EventRepository _events;
	late M.NotificationRepository _notifications;
	M.NotificationRepository get notifications => _notifications;
	M.VMRef get vm => _vm;

	List<Map> _loadedSnapshots = <Map>[];
	Map? selection;
	ProcessItemDiff? diffSelection;
	Map? _snapshotA;
	Map? _snapshotB;
	ProcessSnapshotTreeMode _mode = ProcessSnapshotTreeMode.treeMap;

	factory ProcessSnapshotElement(
	M.VM vm,
	M.EventRepository events,
	M.NotificationRepository notifications, {
	RenderingQueue? queue,
	}) {
	ProcessSnapshotElement e = new ProcessSnapshotElement.created();
	e._r = new RenderingScheduler<ProcessSnapshotElement>(e, queue: queue);
	e._vm = vm;
	e._events = events;
	e._notifications = notifications;
	return e;
	}

	ProcessSnapshotElement.created() : super.created('process-snapshot');

	@override
	attached() {
	super.attached();
	_r.enable();
	_refresh();
	}

	@override
	detached() {
	super.detached();
	_r.disable(notify: true);
	removeChildren();
	}

	void render() {
	final content = <HTMLElement>[
	navBar(<HTMLElement>[
	new NavTopMenuElement(queue: _r.queue).element,
	new NavVMMenuElement(_vm, _events, queue: _r.queue).element,
	navMenu('process snapshot'),
	(new NavRefreshElement(queue: _r.queue)
	..onRefresh.listen((e) {
	_refresh();
	}))
	.element,
	(new NavRefreshElement(label: 'save', queue: _r.queue)
	..disabled = _snapshotA == null
	..onRefresh.listen((e) {
	_save();
	}))
	.element,
	(new NavRefreshElement(label: 'load', queue: _r.queue)
	..onRefresh.listen((e) {
	_load();
	}))
	.element,
	new NavNotifyElement(_notifications, queue: _r.queue).element,
	]),
	];
	if (_snapshotA == null) {
	// Loading
	content.add(new HTMLSpanElement()..textContent = "Loading");
	} else {
	// Loaded
	content.addAll(_createReport());
	}
	children = content;
	}

	_refresh() async {
	Map snapshot = await (vm as dynamic).invokeRpcNoUpgrade(
	"getProcessMemoryUsage",
	{},
	);
	_snapshotLoaded(snapshot);
	}

	_save() {
	var blob = new Blob(
	[jsonEncode(_snapshotA).toJS].toJS,
	BlobPropertyBag(type: 'application/json'),
	);
	var blobUrl = URL.createObjectURL(blob);
	var link = new HTMLAnchorElement();
	link.href = blobUrl;
	var now = new DateTime.now();
	link.download = 'dart-process-${now.year}-${now.month}-${now.day}.json';
	link.click();
	}

	_load() {
	var input = new HTMLInputElement();
	input.type = 'file';
	input.multiple = false;
	input.onChange.listen((event) {
	final file = input.files!.item(0);
	final reader = FileReader();
	reader
	..onLoadEnd.first.then((_) async {
	_snapshotLoaded(jsonDecode(reader.result as String));
	})
	..readAsText(file as Blob);
	});
	input.click();
	}

	_snapshotLoaded(Map snapshot) {
	_loadedSnapshots.add(snapshot);
	_snapshotA = snapshot;
	_snapshotB = snapshot;
	selection = null;
	diffSelection = null;
	_r.dirty();
	}

	void _createTreeMap<T>(List<HTMLElement> report, TreeMap<T> treemap, T root) {
	final content = new HTMLDivElement();
	content.style.border = '1px solid black';
	content.style.width = '100%';
	content.style.height = '100%';
	content.textContent = 'Performing layout...';
	Timer.run(() {
	// Generate the treemap after the content div has been added to the
	// document so that we can ask the browser how much space is
	// available for treemap layout.
	treemap.showIn(root, content);
	});

	final text =
	'Double-click a tile to zoom in. Double-click the outermost tile to '
	'zoom out. Process memory that is not further subdivided is non-Dart '
	'memory not known to the VM.';
	report.addAll([
	new HTMLDivElement()
	..className = 'content-centered-big explanation'
	..textContent = text,
	new HTMLDivElement()
	..className = 'content-centered-big'
	..style.width = '100%'
	..style.height = '100%'
	..appendChild(content),
	]);
	}

	List<HTMLElement> _createReport() {
	var report = <HTMLElement>[
	new HTMLDivElement()
	..className = 'content-centered-big'
	..appendChildren(<HTMLElement>[
	new HTMLDivElement()
	..className = 'memberList'
	..appendChildren(<HTMLElement>[
	new HTMLDivElement()
	..className = 'memberItem'
	..appendChildren(<HTMLElement>[
	new HTMLDivElement()
	..className = 'memberName'
	..textContent = 'Snapshot A',
	new HTMLDivElement()
	..className = 'memberName'
	..appendChildren(_createSnapshotSelectA()),
	]),
	new HTMLDivElement()
	..className = 'memberItem'
	..appendChildren(<HTMLElement>[
	new HTMLDivElement()
	..className = 'memberName'
	..textContent = 'Snapshot B',
	new HTMLDivElement()
	..className = 'memberName'
	..appendChildren(_createSnapshotSelectB()),
	]),
	new HTMLDivElement()
	..className = 'memberItem'
	..appendChildren(<HTMLElement>[
	new HTMLDivElement()
	..className = 'memberName'
	..textContent = (_snapshotA == _snapshotB)
	? 'View '
	: 'Compare ',
	new HTMLDivElement()
	..className = 'memberName'
	..appendChildren(_createModeSelect()),
	]),
	]),
	]),
	];

	switch (_mode) {
	case ProcessSnapshotTreeMode.treeMap:
	if (selection == null) {
	selection = _snapshotA!["root"];
	}
	_createTreeMap(report, new ProcessItemTreeMap(this), selection);
	break;
	case ProcessSnapshotTreeMode.tree:
	if (selection == null) {
	selection = _snapshotA!["root"];
	}
	_tree = new VirtualTreeElement(
	_createItem,
	_updateItem,
	_getChildrenItem,
	items: [selection],
	queue: _r.queue,
	);
	_tree!.expand(selection!);
	report.add(_tree!.element);
	break;
	case ProcessSnapshotTreeMode.treeMapDiff:
	if (diffSelection == null) {
	diffSelection = ProcessItemDiff.from(
	_snapshotA!["root"],
	_snapshotB!["root"],
	);
	}
	_createTreeMap(report, new ProcessItemDiffTreeMap(this), diffSelection);
	break;
	case ProcessSnapshotTreeMode.treeDiff:
	var root = ProcessItemDiff.from(
	_snapshotA!["root"],
	_snapshotB!["root"],
	);
	_tree = new VirtualTreeElement(
	_createItemDiff,
	_updateItemDiff,
	_getChildrenItemDiff,
	items: [root],
	queue: _r.queue,
	);
	_tree!.expand(root);
	report.add(_tree!.element);
	break;
	}

	return report;
	}

	VirtualTreeElement? _tree;

	static HTMLElement _createItem(toggle) {
	return new HTMLDivElement()
	..className = 'tree-item'
	..appendChildren(<HTMLElement>[
	new HTMLSpanElement()
	..className = 'percentage'
	..title = 'percentage of total',
	new HTMLSpanElement()
	..className = 'size'
	..title = 'retained size',
	new HTMLSpanElement()..className = 'lines',
	new HTMLButtonElement()
	..className = 'expander'
	..onClick.listen((_) => toggle(autoToggleSingleChildNodes: true)),
	new HTMLSpanElement()..className = 'name',
	]);
	}

	static HTMLElement _createItemDiff(toggle) {
	return new HTMLDivElement()
	..className = 'tree-item'
	..appendChildren(<HTMLElement>[
	new HTMLSpanElement()
	..className = 'percentage'
	..title = 'percentage of total',
	new HTMLSpanElement()
	..className = 'size'
	..title = 'retained size A',
	new HTMLSpanElement()
	..className = 'percentage'
	..title = 'percentage of total',
	new HTMLSpanElement()
	..className = 'size'
	..title = 'retained size B',
	new HTMLSpanElement()
	..className = 'size'
	..title = 'retained size change',
	new HTMLSpanElement()..className = 'lines',
	new HTMLButtonElement()
	..className = 'expander'
	..onClick.listen((_) => toggle(autoToggleSingleChildNodes: true)),
	new HTMLSpanElement()..className = 'name',
	]);
	}

	void _updateItem(HTMLElement element, node, int depth) {
	var size = node["size"];
	var rootSize = _snapshotA!["root"]["size"];
	(element.children.item(0) as HTMLElement).textContent =
	Utils.formatPercentNormalized(size * 1.0 / rootSize);
	(element.children.item(1) as HTMLElement).textContent = Utils.formatSize(
	size,
	);
	_updateLines(element.children.item(2) as HTMLElement, depth);
	if (_getChildrenItem(node).isNotEmpty) {
	(element.children.item(3) as HTMLElement).textContent =
	_tree!.isExpanded(node) ? '▼' : '►';
	} else {
	(element.children.item(3) as HTMLElement).textContent = '';
	}
	(element.children.item(4) as HTMLElement).textContent = node["name"];
	(element.children.item(4) as HTMLElement).title = node["description"];
	}

	void _updateItemDiff(HTMLElement element, nodeDynamic, int depth) {
	ProcessItemDiff node = nodeDynamic;
	(element.children.item(0) as HTMLElement).textContent =
	Utils.formatPercentNormalized(
	node.retainedSizeA * 1.0 / _snapshotA!["root"]["size"],
	);
	(element.children.item(1) as HTMLElement).textContent = Utils.formatSize(
	node.retainedSizeA,
	);
	(element.children.item(2) as HTMLElement).textContent =
	Utils.formatPercentNormalized(
	node.retainedSizeB * 1.0 / _snapshotB!["root"]["size"],
	);
	(element.children.item(3) as HTMLElement).textContent = Utils.formatSize(
	node.retainedSizeB,
	);
	(element.children.item(4) as HTMLElement).textContent =
	(node.retainedSizeDiff > 0 ? '+' : '') +
	Utils.formatSize(node.retainedSizeDiff);
	(element.children.item(4) as HTMLElement).style.color =
	node.retainedSizeDiff > 0 ? "red" : "green";
	_updateLines(element.children.item(5) as HTMLElement, depth);
	if (_getChildrenItemDiff(node).isNotEmpty) {
	(element.children.item(6) as HTMLElement).textContent =
	_tree!.isExpanded(node) ? '▼' : '►';
	} else {
	(element.children.item(6) as HTMLElement).textContent = '';
	}
	(element.children.item(7) as HTMLElement)..textContent = node.name;
	}

	static Iterable _getChildrenItem(node) {
	return new List<Map>.from(node["children"]);
	}

	static Iterable _getChildrenItemDiff(nodeDynamic) {
	ProcessItemDiff node = nodeDynamic;
	final list = node.children!.toList();
	list.sort((a, b) => b.retainedSizeDiff - a.retainedSizeDiff);
	return list;
	}

	static _updateLines(HTMLElement element, int n) {
	n = Math.max(0, n);
	while (element.children.length > n) {
	element.removeChild(element.lastChild!);
	}
	while (element.children.length < n) {
	element.appendChild(HTMLSpanElement());
	}
	}

	static String modeToString(ProcessSnapshotTreeMode mode) {
	switch (mode) {
	case ProcessSnapshotTreeMode.treeMap:
	case ProcessSnapshotTreeMode.treeMapDiff:
	return 'Tree Map';
	case ProcessSnapshotTreeMode.tree:
	case ProcessSnapshotTreeMode.treeDiff:
	return 'Tree';
	}
	}

	List<HTMLElement> _createModeSelect() {
	var modes = _snapshotA == _snapshotB ? _viewModes : _diffModes;
	if (!modes.contains(_mode)) {
	_mode = modes[0];
	_r.dirty();
	}
	final s = new HTMLSelectElement()
	..className = 'analysis-select'
	..value = modeToString(_mode)
	..appendChildren(
	modes.map(
	(mode) => HTMLOptionElement()
	..value = modeToString(mode)
	..selected = _mode == mode
	..textContent = modeToString(mode),
	),
	);
	return [
	s
	..onChange.listen((_) {
	_mode = modes[s.selectedIndex];
	_r.dirty();
	}),
	];
	}

	String snapshotToString(snapshot) {
	if (snapshot == null) return "None";
	return snapshot["root"]["name"] +
	" " +
	Utils.formatSize(snapshot["root"]["size"]);
	}

	List<HTMLElement> _createSnapshotSelectA() {
	final s = HTMLSelectElement()
	..className = 'analysis-select'
	..value = snapshotToString(_snapshotA)
	..appendChildren(
	_loadedSnapshots.map(
	(snapshot) => HTMLOptionElement()
	..value = snapshotToString(snapshot)
	..selected = _snapshotA == snapshot
	..textContent = snapshotToString(snapshot),
	),
	);
	return [
	s
	..onChange.listen((_) {
	_snapshotA = _loadedSnapshots[s.selectedIndex];
	selection = null;
	diffSelection = null;
	_r.dirty();
	}),
	];
	}

	List<HTMLElement> _createSnapshotSelectB() {
	final s = HTMLSelectElement()
	..className = 'analysis-select'
	..value = snapshotToString(_snapshotB)
	..appendChildren(
	_loadedSnapshots.map(
	(snapshot) => HTMLOptionElement()
	..value = snapshotToString(snapshot)
	..selected = _snapshotB == snapshot
	..textContent = snapshotToString(snapshot),
	),
	);
	return [
	s
	..onChange.listen((_) {
	_snapshotB = _loadedSnapshots[s.selectedIndex];
	selection = null;
	diffSelection = null;
	_r.dirty();
	}),
	];
	}
	}