[tools][system-analyzer] Add map-details and map-transitions

This CL encapsulates map panel behaviour with custom
web components map-details for displaying information
and map-transitions to show map transition tree. The
web components emit/receive events to interact with
the app.

Bug: v8:10644

Change-Id: Ic61c2794ed7ab854ee61fa1e7c8fe9b1c3c31b7e
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2305889
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#69004}

tools/system-analyzer/helper.mjs

@@ -22,9 +22,10 @@ function formatSeconds(millis) {
   return (millis * kMillis2Seconds).toFixed(2) + 's';
 }
 
-function defineCustomElement(name, generator) {
-  let htmlTemplatePath = name + '-template.html';
-  fetch(htmlTemplatePath)
+function defineCustomElement(path, generator) {
+  let name = path.substring(path.lastIndexOf("/") + 1, path.length);
+  path = path + '-template.html';
+  fetch(path)
       .then(stream => stream.text())
       .then(
           templateText => customElements.define(name, generator(templateText)));

tools/system-analyzer/index.css

@@ -29,7 +29,7 @@ body {
   background-color: var(--background-color);
   letter-spacing: 0.5px;
 }
-h2 {
+h2, h4 {
   background-color: var(--primary-color);
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: 0.3s;

tools/system-analyzer/index.mjs

@@ -96,8 +96,7 @@ class App {
   }
 
   handleShowMaps(e) {
-    //document.state.view.transitionView.showMaps(e.detail);
-    document.state.mapPanel.showMaps(e.detail);
+    document.state.mapPanel.mapEntries = e.detail;
   }
 
   handleSelectIc(e){

tools/system-analyzer/map-model.mjs

@@ -62,7 +62,7 @@ class State {
   set map(value) {
     this._map = value;
     this._navigation.updateUrl();
-    this.mapPanel_.showMap(this.map);
+    this.mapPanel_.map = this._map;
     this.view.redraw();
   }
   updateChunks() {
@@ -155,12 +155,17 @@ class Navigation {
 class View {
   constructor(state, mapPanelId, timelinePanelId) {
     this.mapPanel_ = $(mapPanelId);
+    this.mapPanel_.addEventListener(
+      'statemapchange', e => this.handleStateMapChange(e));
+    this.mapPanel_.addEventListener(
+      'selectmapdblclick', e => this.handleDblClickSelectMap(e));
+    this.mapPanel_.addEventListener(
+      'sourcepositionsclick', e => this.handleClickSourcePositions(e));
+
     this.timelinePanel_ = $(timelinePanelId);
     this.state = state;
     setInterval(this.timelinePanel_.updateOverviewWindow(), 50);
     this.timelinePanel_.createBackgroundCanvas();
-    this.mapPanel_.transitionView = state;
-
     this.isLocked = false;
     this._filteredEntries = [];
   }
@@ -174,6 +179,24 @@ class View {
     return this.state.map
   }
 
+  handleClickSourcePositions(e){
+    //TODO(zcankara) Handle source position
+    console.log("source position map detail: ", e.detail);
+  }
+
+  handleDblClickSelectMap(e){
+    //TODO(zcankara) Handle double clicked map
+    console.log("double clicked map: ", e.detail);
+  }
+
+  handleStateMapChange(e){
+    this.state.map = e.detail;
+  }
+
+  handleIsLocked(e){
+    this.state.view.isLocked = e.detail;
+  }
+
   updateTimeline() {
     let chunksNode = this.timelinePanel_.timelineChunks;
     removeAllChildren(chunksNode);
@@ -247,7 +270,8 @@ class View {
     this.isLocked = true;
     let chunk = event.target.chunk;
     if (!chunk) return;
-    this.mapPanel_.showMaps(chunk.getUniqueTransitions());
+    this.state.view.isLocked = true;
+    this.mapPanel_.mapEntries = chunk.getUniqueTransitions();
   }
 
   drawOverview() {

tools/system-analyzer/map-panel-template.html

@@ -4,132 +4,6 @@ found in the LICENSE file. -->
 <style>
 @import "./index.css";
 
-#mapDetails {
-  font-family: monospace;
-  white-space: pre;
-  overflow-x: scroll;
-}
-#transitionView {
-  overflow-x: scroll;
-  white-space: nowrap;
-  min-height: 50px;
-  max-height: 200px;
-  padding: 50px 0 0 0;
-  margin-top: -25px;
-  width: 100%;
-}
-.map {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  border-radius: 50%;
-  background-color: var(--map-background-color);
-  border: 4px solid var(--on-surface-color);
-  font-size: 10px;
-  text-align: center;
-  line-height: 18px;
-  color: var(--on-surface-color);
-  vertical-align: top;
-  margin-top: -13px;
-  /* raise z-index */
-  position: relative;
-  z-index: 2;
-  cursor: pointer;
-}
-
-.map.selected {
-    border-color: var(--map-background-color);
-}
-
-.transitions {
-    display: inline-block;
-    margin-left: -15px;
-}
-
-.transition {
-  min-height: 55px;
-  margin: 0 0 -2px 2px;
-}
-
-/* gray out deprecated transitions */
-.deprecated > .transitionEdge,
-.deprecated > .map {
-  opacity: 0.5;
-}
-
-.deprecated > .transition {
-  border-color: rgba(0, 0, 0, 0.5);
-}
-
-/* Show a border for all but the first transition */
-.transition:nth-of-type(2),
-.transition:nth-last-of-type(n+2) {
-  border-left: 2px solid;
-  margin-left: 0px;
-}
-
-/* special case for 2 transitions */
-.transition:nth-last-of-type(1) {
-  border-left: none;
-}
-
-/* topmost transitions are not related */
-#transitionView > .transition {
-  border-left: none;
-}
-
-/* topmost transition edge needs initial offset to be aligned */
-#transitionView > .transition  > .transitionEdge {
-  margin-left: 13px;
-}
-
-.transitionEdge {
-  height: 2px;
-  width: 80px;
-  display: inline-block;
-  margin: 0 0 2px 0;
-  background-color: var(--map-background-color);
-  vertical-align: top;
-  padding-left: 15px;
-}
-
-.transitionLabel {
-  color: var(--on-surface-color);
-  transform: rotate(-15deg);
-  transform-origin: top left;
-  margin-top: -10px;
-  font-size: 10px;
-  white-space: normal;
-  word-break: break-all;
-  background-color: var(--surface-color);
-}
-
-.showSubtransitions {
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 10px solid var(--map-background-color);
-  cursor: zoom-in;
-  margin: 4px 0 0 4px;
-}
-
-.showSubtransitions.opened {
-  border-top: none;
-  border-bottom: 10px solid var(--map-background-color);
-  cursor: zoom-out;
-}
-
-#tooltip {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background-color: var(--red);
-  pointer-events: none;
-  z-index: 100;
-  display: none;
-}
-
 #searchBarInput {
   width: 200px;
   color: black;
@@ -138,20 +12,12 @@ found in the LICENSE file. -->
 <stats-panel id="stats-panel" onchange="app.handleShowMaps(event)"></stats-panel>
 <div class="panel">
   <h2>Map Panel</h2>
-  <h3>Transitions</h3>
-  <section id="transitionView"></section>
-  <br/>
-
-  <h4>Search Map by Address</h4>
+  <map-transitions id="map-transitions"></map-transitions>
+  <h3>Search Map by Address</h3>
   <section id="searchBar"></section>
   <input type="search" id="searchBarInput" placeholder="Search maps by address.."></input>
   <button id="searchBarBtn">Search</button>
 
-  <h4>Selected Map</h4>
-  <section id="mapDetails"></section>
-
-  <div id="tooltip">
-      <div id="tooltipContents"></div>
-  </div>
+  <map-details id="map-details"></map-details>
 </div>
 

tools/system-analyzer/map-panel.mjs

@@ -2,41 +2,48 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import "./stats-panel.mjs";
+import "./map-panel/map-details.mjs";
+import "./map-panel/map-transitions.mjs";
 import {V8Map} from "./map-processor.mjs";
 import {defineCustomElement, V8CustomElement} from './helper.mjs';
 
 defineCustomElement('map-panel', (templateText) =>
  class MapPanel extends V8CustomElement {
+  #map;
   constructor() {
     super(templateText);
-    this.transitionView.addEventListener(
-        'mousemove', e => this.handleTransitionViewChange(e));
-    this.$('#searchBarBtn').addEventListener(
+    this.searchBarBtn.addEventListener(
         'click', e => this.handleSearchBar(e));
+    this.addEventListener(
+      'mapdetailsupdate', e => this.handleUpdateMapDetails(e));
   }
 
-  get transitionView() {
-    return this.$('#transitionView');
+  handleUpdateMapDetails(e){
+    this.mapDetailsPanel.mapDetails = e.detail;
   }
 
-  get searchBar() {
-    return this.$('#searchBar');
+  get statsPanel() {
+    return this.$('#stats-panel');
   }
 
-  get mapDetails() {
-    return this.$('#mapDetails');
+  get mapTransitionsPanel() {
+    return this.$('#map-transitions');
   }
 
-  get tooltip() {
-    return this.$('#tooltip');
+  get mapDetailsPanel() {
+    return this.$('#map-details');
   }
 
-  get tooltipContents() {
-    return this.$('#tooltipContents');
+  get searchBarBtn() {
+    return this.$('#searchBarBtn');
   }
 
-  get statsPanel() {
-    return this.$('#stats-panel');
+  get searchBar() {
+    return this.$('#searchBar');
+  }
+
+  get mapDetails() {
+    return this.mapDetailsPanel.mapDetails;
   }
 
   // send a timeline to the stats-panel
@@ -49,14 +56,9 @@ defineCustomElement('map-panel', (templateText) =>
     this.statsPanel.update();
   }
 
-
-  handleTransitionViewChange(e){
-    this.tooltip.style.left = e.pageX + "px";
-    this.tooltip.style.top = e.pageY + "px";
-    let map = e.target.map;
-    if (map) {
-        this.tooltipContents.innerText = map.description;
-    }
+  set map(value) {
+    this.#map = value;
+    this.mapTransitionsPanel.map = this.#map;
   }
 
   handleSearchBar(e){
@@ -77,174 +79,15 @@ defineCustomElement('map-panel', (templateText) =>
       'click', {bubbles: true, composed: true, detail: dataModel}));
   }
 
-  //TODO(zcankara) Take view, transitionView logic inside map panel
-  //TODO(zcankara) VIEW RELATED
   updateStats(timeline) {
     this.timeline = timeline;
   }
 
-  updateMapDetails(map) {
-    let details = '';
-    if (map) {
-      details += 'ID: ' + map.id;
-      details += '\nSource location: ' + map.filePosition;
-      details += '\n' + map.description;
-    }
-    this.mapDetails.innerText = details;
-  }
-
-  //TODO(zcankara) DOM RELATED
-  div(classes) {
-    let node = document.createElement('div');
-    if (classes !== void 0) {
-      if (typeof classes === 'string') {
-        node.classList.add(classes);
-      } else {
-        classes.forEach(cls => node.classList.add(cls));
-      }
-    }
-    return node;
-  }
-
-  removeAllChildren(node) {
-    while (node.lastChild) {
-      node.removeChild(node.lastChild);
-    }
-  }
-
-  //TODO(zcankara) TRANSITIONVIEW RELATED
-  set transitionView(state){
-    this.state = state;
-    this.container = this.transitionView;
-    this.currentNode = this.transitionView;
-    this.currentMap = undefined;
-  }
-
-  selectMap(map) {
-    this.currentMap = map;
-    this.state.map = map;
-  }
-
-  showMap(map) {
-    this.updateMapDetails(map);
-    if (this.currentMap === map) return;
-    this.currentMap = map;
-    this._showMaps([map]);
-  }
-
-  showMaps(list) {
-    this.state.view.isLocked = true;
-    this._showMaps(list);
-  }
-
-  _showMaps(list) {
-    // Hide the container to avoid any layouts.
-    this.container.style.display = 'none';
-    this.removeAllChildren(this.container);
-    list.forEach(map => this.addMapAndParentTransitions(map));
-    this.container.style.display = ''
-  }
-
-  addMapAndParentTransitions(map) {
-    if (map === void 0) return;
-    this.currentNode = this.container;
-    let parents = map.getParents();
-    if (parents.length > 0) {
-      this.addTransitionTo(parents.pop());
-      parents.reverse().forEach(each => this.addTransitionTo(each));
-    }
-    let mapNode = this.addSubtransitions(map);
-    // Mark and show the selected map.
-    mapNode.classList.add('selected');
-    if (this.selectedMap == map) {
-      setTimeout(
-          () => mapNode.scrollIntoView(
-              {behavior: 'smooth', block: 'nearest', inline: 'nearest'}),
-          1);
-    }
-  }
-
-  addMapNode(map) {
-    let node = this.div('map');
-    if (map.edge) node.style.backgroundColor = map.edge.getColor();
-    node.map = map;
-    node.addEventListener('click', () => this.selectMap(map));
-    if (map.children.length > 1) {
-      node.innerText = map.children.length;
-      let showSubtree = this.div('showSubtransitions');
-      showSubtree.addEventListener('click', (e) => this.toggleSubtree(e, node));
-      node.appendChild(showSubtree);
-    } else if (map.children.length == 0) {
-      node.innerHTML = '●'
-    }
-    this.currentNode.appendChild(node);
-    return node;
-  }
-
-  addSubtransitions(map) {
-    let mapNode = this.addTransitionTo(map);
-    // Draw outgoing linear transition line.
-    let current = map;
-    while (current.children.length == 1) {
-      current = current.children[0].to;
-      this.addTransitionTo(current);
-    }
-    return mapNode;
-  }
-
-  addTransitionEdge(map) {
-    let classes = ['transitionEdge'];
-    let edge = this.div(classes);
-    edge.style.backgroundColor = map.edge.getColor();
-    let labelNode = this.div('transitionLabel');
-    labelNode.innerText = map.edge.toString();
-    edge.appendChild(labelNode);
-    return edge;
-  }
-
-  addTransitionTo(map) {
-    // transition[ transitions[ transition[...], transition[...], ...]];
-
-    let transition = this.div('transition');
-    if (map.isDeprecated()) transition.classList.add('deprecated');
-    if (map.edge) {
-      transition.appendChild(this.addTransitionEdge(map));
-    }
-    let mapNode = this.addMapNode(map);
-    transition.appendChild(mapNode);
-
-    let subtree = this.div('transitions');
-    transition.appendChild(subtree);
-
-    this.currentNode.appendChild(transition);
-    this.currentNode = subtree;
-
-    return mapNode;
-  }
-
-  toggleSubtree(event, node) {
-    let map = node.map;
-    event.target.classList.toggle('opened');
-    let transitionsNode = node.parentElement.querySelector('.transitions');
-    let subtransitionNodes = transitionsNode.children;
-    if (subtransitionNodes.length <= 1) {
-      // Add subtransitions excepth the one that's already shown.
-      let visibleTransitionMap = subtransitionNodes.length == 1 ?
-          transitionsNode.querySelector('.map').map :
-          void 0;
-      map.children.forEach(edge => {
-        if (edge.to != visibleTransitionMap) {
-          this.currentNode = transitionsNode;
-          this.addSubtransitions(edge.to);
-        }
-      });
-    } else {
-      // remove all but the first (currently selected) subtransition
-      for (let i = subtransitionNodes.length - 1; i > 0; i--) {
-        transitionsNode.removeChild(subtransitionNodes[i]);
-      }
+  set mapEntries(list){
+    this.mapTransitionsPanel.mapEntries = list;
   }
+  get mapEntries(){
+    return this.mapTransitionsPanel.mapEntries;
   }
 
 });
-

tools/system-analyzer/map-panel/map-details-template.html

+<!-- Copyright 2020 the V8 project authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+<head>
+  <link href="./index.css" rel="stylesheet">
+</head>
+<style>
+#mapDetails {
+  font-family: monospace;
+  white-space: pre;
+  overflow-x: scroll;
+}
+</style>
+<div id="container">
+  <div class="panel">
+    <h4>Map Details</h4>
+    <section id="mapDetails"></section>
+  </div>
+</div>

tools/system-analyzer/map-panel/map-details.mjs

+// Copyright 2020 the V8 project authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import {V8CustomElement, defineCustomElement} from '../helper.mjs';
+
+defineCustomElement('./map-panel/map-details', (templateText) =>
+ class MapDetails extends V8CustomElement {
+  constructor() {
+    super(templateText);
+    this.mapDetails.addEventListener('click', () => this.handleClickSourcePositions());
+    this.selectedMap = undefined;
+  }
+  get mapDetails() {
+    return this.$('#mapDetails');
+  }
+
+  setSelectedMap(value) {
+    this.selectedMap = value;
+  }
+
+  set mapDetails(map){
+    let details = '';
+    if (map) {
+      details += 'ID: ' + map.id;
+      details += '\nSource location: ' + map.filePosition;
+      details += '\n' + map.description;
+      this.setSelectedMap(map);
+    }
+    this.mapDetails.innerText = details;
+  }
+
+  handleClickSourcePositions(){
+    this.dispatchEvent(new CustomEvent(
+      'sourcepositionsclick', {bubbles: true, composed: true, detail: this.selectedMap.filePosition}));
+  }
+
+});

tools/system-analyzer/map-panel/map-transitions-template.html

+<!-- Copyright 2020 the V8 project authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+<head>
+  <link href="./index.css" rel="stylesheet">
+</head>
+<style>
+
+#transitionView {
+  overflow-x: scroll;
+  white-space: nowrap;
+  min-height: 50px;
+  max-height: 200px;
+  padding: 50px 0 0 0;
+  margin-top: -25px;
+  width: 100%;
+}
+.map {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  border-radius: 50%;
+  background-color: var(--map-background-color);
+  border: 4px solid var(--on-surface-color);
+  font-size: 10px;
+  text-align: center;
+  line-height: 18px;
+  color: var(--on-surface-color);
+  vertical-align: top;
+  margin-top: -13px;
+  /* raise z-index */
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.map.selected {
+    border-color: var(--map-background-color);
+}
+
+.transitions {
+    display: inline-block;
+    margin-left: -15px;
+}
+
+.transition {
+  min-height: 55px;
+  margin: 0 0 -2px 2px;
+}
+
+/* gray out deprecated transitions */
+.deprecated > .transitionEdge,
+.deprecated > .map {
+  opacity: 0.5;
+}
+
+.deprecated > .transition {
+  border-color: rgba(0, 0, 0, 0.5);
+}
+
+/* Show a border for all but the first transition */
+.transition:nth-of-type(2),
+.transition:nth-last-of-type(n+2) {
+  border-left: 2px solid;
+  margin-left: 0px;
+}
+
+/* special case for 2 transitions */
+.transition:nth-last-of-type(1) {
+  border-left: none;
+}
+
+/* topmost transitions are not related */
+#transitionView > .transition {
+  border-left: none;
+}
+
+/* topmost transition edge needs initial offset to be aligned */
+#transitionView > .transition  > .transitionEdge {
+  margin-left: 13px;
+}
+
+.transitionEdge {
+  height: 2px;
+  width: 80px;
+  display: inline-block;
+  margin: 0 0 2px 0;
+  background-color: var(--map-background-color);
+  vertical-align: top;
+  padding-left: 15px;
+}
+
+.transitionLabel {
+  color: var(--on-surface-color);
+  transform: rotate(-15deg);
+  transform-origin: top left;
+  margin-top: -10px;
+  font-size: 10px;
+  white-space: normal;
+  word-break: break-all;
+  background-color: var(--surface-color);
+}
+
+.showSubtransitions {
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 10px solid var(--map-background-color);
+  cursor: zoom-in;
+  margin: 4px 0 0 4px;
+}
+
+.showSubtransitions.opened {
+  border-top: none;
+  border-bottom: 10px solid var(--map-background-color);
+  cursor: zoom-out;
+}
+
+#tooltip {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: var(--red);
+  pointer-events: none;
+  z-index: 100;
+  display: none;
+}
+
+#title {
+  padding-bottom: 20px;
+}
+</style>
+<div id="container">
+  <div class="panel">
+  <div id="title"><h4>Transitions</h4></div>
+  <section id="transitionView"></section>
+  <div id="tooltip">
+    <div id="tooltipContents"></div>
+  </div>
+  </div>
+</div>

tools/system-analyzer/map-panel/map-transitions.mjs

+// Copyright 2020 the V8 project authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import {V8CustomElement, defineCustomElement} from '../helper.mjs';
+
+defineCustomElement('./map-panel/map-transitions', (templateText) =>
+ class MapTransitions extends V8CustomElement {
+  #map;
+  constructor() {
+    super(templateText);
+    this.transitionView.addEventListener(
+      'mousemove', e => this.handleTransitionViewChange(e));
+    this.currentNode = this.transitionView;
+    this.currentMap = undefined;
+  }
+
+  get transitionView() {
+    return this.$('#transitionView');
+  }
+
+  get tooltip() {
+    return this.$('#tooltip');
+  }
+
+  get tooltipContents() {
+    return this.$('#tooltipContents');
+  }
+
+  set map(value) {
+    this.#map = value;
+    this.showMap();
+  }
+
+  handleTransitionViewChange(e){
+    this.tooltip.style.left = e.pageX + "px";
+    this.tooltip.style.top = e.pageY + "px";
+    let map = e.target.map;
+    if (map) {
+        this.tooltipContents.innerText = map.description;
+    }
+  }
+
+  selectMap(map) {
+    this.currentMap = map;
+    this.dispatchEvent(new CustomEvent(
+      'mapdetailsupdate', {bubbles: true, composed: true, detail: map}));
+    this.dispatchEvent(new CustomEvent(
+      'statemapchange', {bubbles: true, composed: true, detail: map}));
+  }
+
+  dblClickSelectMap(map) {
+    this.dispatchEvent(new CustomEvent(
+      'selectmapdblclick', {bubbles: true, composed: true, detail: map}));
+  }
+
+  showMap() {
+    // Called when a map selected
+    let selected = this.#map;
+    if (this.currentMap === this.#map) return;
+    this.currentMap = this.#map;
+    this.mapEntries = [this.#map];
+    this.dispatchEvent(new CustomEvent(
+      'mapdetailsupdate', {bubbles: true, composed: true, detail: selected}));
+  }
+
+  showMaps() {
+    // Timeline dbl click to show map transitions of selected maps
+    this.transitionView.style.display = 'none';
+    this.removeAllChildren(this.transitionView);
+    this.mapEntries.forEach(map => this.addMapAndParentTransitions(map));
+    this.transitionView.style.display = '';
+  }
+
+  set mapEntries(list){
+    this._mapEntries = list;
+    this.showMaps();
+  }
+
+  get mapEntries(){
+    return this._mapEntries;
+  }
+
+  addMapAndParentTransitions(map) {
+    if (map === void 0) return;
+    this.currentNode = this.transitionView;
+    let parents = map.getParents();
+    if (parents.length > 0) {
+      this.addTransitionTo(parents.pop());
+      parents.reverse().forEach(each => this.addTransitionTo(each));
+    }
+    let mapNode = this.addSubtransitions(map);
+    // Mark and show the selected map.
+    mapNode.classList.add('selected');
+    if (this.selectedMap == map) {
+      setTimeout(
+          () => mapNode.scrollIntoView(
+              {behavior: 'smooth', block: 'nearest', inline: 'nearest'}),
+          1);
+    }
+  }
+
+  addMapNode(map) {
+    let node = this.div('map');
+    if (map.edge) node.style.backgroundColor = map.edge.getColor();
+    node.map = map;
+    node.addEventListener('click', () => this.selectMap(map));
+    node.addEventListener('dblclick', () => this.dblClickSelectMap(map));
+    if (map.children.length > 1) {
+      node.innerText = map.children.length;
+      let showSubtree = this.div('showSubtransitions');
+      showSubtree.addEventListener('click', (e) => this.toggleSubtree(e, node));
+      node.appendChild(showSubtree);
+    } else if (map.children.length == 0) {
+      node.innerHTML = '●'
+    }
+    this.currentNode.appendChild(node);
+    return node;
+  }
+
+  addSubtransitions(map) {
+    let mapNode = this.addTransitionTo(map);
+    // Draw outgoing linear transition line.
+    let current = map;
+    while (current.children.length == 1) {
+      current = current.children[0].to;
+      this.addTransitionTo(current);
+    }
+    return mapNode;
+  }
+
+  addTransitionEdge(map) {
+    let classes = ['transitionEdge'];
+    let edge = this.div(classes);
+    edge.style.backgroundColor = map.edge.getColor();
+    let labelNode = this.div('transitionLabel');
+    labelNode.innerText = map.edge.toString();
+    edge.appendChild(labelNode);
+    return edge;
+  }
+
+  addTransitionTo(map) {
+    // transition[ transitions[ transition[...], transition[...], ...]];
+
+    let transition = this.div('transition');
+    if (map.isDeprecated()) transition.classList.add('deprecated');
+    if (map.edge) {
+      transition.appendChild(this.addTransitionEdge(map));
+    }
+    let mapNode = this.addMapNode(map);
+    transition.appendChild(mapNode);
+
+    let subtree = this.div('transitions');
+    transition.appendChild(subtree);
+
+    this.currentNode.appendChild(transition);
+    this.currentNode = subtree;
+
+    return mapNode;
+  }
+
+  toggleSubtree(event, node) {
+    let map = node.map;
+    event.target.classList.toggle('opened');
+    let transitionsNode = node.parentElement.querySelector('.transitions');
+    let subtransitionNodes = transitionsNode.children;
+    if (subtransitionNodes.length <= 1) {
+      // Add subtransitions excepth the one that's already shown.
+      let visibleTransitionMap = subtransitionNodes.length == 1 ?
+          transitionsNode.querySelector('.map').map :
+          void 0;
+      map.children.forEach(edge => {
+        if (edge.to != visibleTransitionMap) {
+          this.currentNode = transitionsNode;
+          this.addSubtransitions(edge.to);
+        }
+      });
+    } else {
+      // remove all but the first (currently selected) subtransition
+      for (let i = subtransitionNodes.length - 1; i > 0; i--) {
+        transitionsNode.removeChild(subtransitionNodes[i]);
+      }
+    }
+  }
+
+});