[turbolizer] Refactor view management

Change-Id: I6d84e7ef500aecd83a77ed2ce3fed4e15b29b7ac
Reviewed-on: https://chromium-review.googlesource.com/1065881
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#53289}

tools/turbolizer/code-view.js

@@ -19,7 +19,7 @@ class CodeView extends View {
   }
 
   constructor(parentId, broker, sourceResolver, sourceFunction, codeMode) {
-    super(parentId, broker, null, false);
+    super(parentId);
     let view = this;
     view.mouseDown = false;
     view.broker = broker;

tools/turbolizer/disassembly-view.js

@@ -18,7 +18,7 @@ class DisassemblyView extends TextView {
   }
 
   constructor(parentId, broker) {
-    super(parentId, broker, null, false);
+    super(parentId, broker, null);
     let view = this;
     let ADDRESS_STYLE = {
       css: 'tag',

tools/turbolizer/graph-view.js

@@ -15,8 +15,8 @@ class GraphView extends View {
     return pane;
   }
 
-  constructor(d3, id, broker, showPhaseByName) {
-    super(id, broker);
+  constructor(id, broker, showPhaseByName) {
+    super(id);
     var graph = this;
     this.showPhaseByName = showPhaseByName
 

tools/turbolizer/graphmultiview.js

+// Copyright 2018 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.
+
+"use strict";
+
+class GraphMultiView extends View {
+  createViewElement() {
+    const pane = document.createElement('div');
+    pane.setAttribute('id', "multiview");
+    return pane;
+  }
+
+  constructor(id, selectionBroker, sourceResolver) {
+    super(id);
+    const view = this;
+    view.sourceResolver = sourceResolver;
+    view.selectionBroker = selectionBroker;
+    this.graph = new GraphView(id, selectionBroker,
+      (phaseName) => view.displayPhaseByName(phaseName));
+    this.schedule = new ScheduleView(id, selectionBroker);
+
+
+    function handleSearch(e) {
+      if (this.currentPhaseView) {
+        this.currentPhaseView.searchInputAction(this.currentPhaseView, this)
+      }
+    }
+    d3.select("#search-input").on("keyup", handleSearch);
+    d3.select("#search-input").attr("value", window.sessionStorage.getItem("lastSearch") || "");
+    this.selectMenu = document.getElementById('display-selector');
+  }
+
+  initializeSelect() {
+    const view = this;
+    view.selectMenu.innerHTML = '';
+    view.sourceResolver.forEachPhase((phase) => {
+      const optionElement = document.createElement("option");
+      optionElement.text = phase.name;
+      view.selectMenu.add(optionElement);
+    });
+    view.selectMenu.onchange = function () {
+      window.sessionStorage.setItem("lastSelectedPhase", this.selectedIndex);
+      view.displayPhase(view.sourceResolver.getPhase(this.selectedIndex));
+    }
+  }
+
+  show(data, rememberedSelection) {
+    super.show(data, rememberedSelection);
+    this.initializeSelect();
+    const lastPhaseIndex = +window.sessionStorage.getItem("lastSelectedPhase");
+    const initialPhaseIndex = this.sourceResolver.repairPhaseId(lastPhaseIndex);
+    this.selectMenu.selectedIndex = initialPhaseIndex;
+    this.displayPhase(this.sourceResolver.getPhase(initialPhaseIndex));
+  }
+
+  initializeContent() {}
+
+  displayPhase(phase) {
+    if (phase.type == 'graph') {
+      this.displayPhaseView(this.graph, phase.data);
+    } else if (phase.type == 'schedule') {
+      this.displayPhaseView(this.schedule, phase);
+    }
+  }
+
+  displayPhaseView(view, data) {
+    const rememberedSelection = this.hideCurrentPhase();
+    view.show(data, rememberedSelection);
+    d3.select("#middle").classed("scrollable", view.isScrollable());
+    this.currentPhaseView = view;
+  }
+
+  displayPhaseByName(phaseName) {
+    const phaseId = this.sourceResolver.getPhaseIdByName(phaseName);
+    this.selectMenu.selectedIndex = phaseId - 1;
+    this.displayPhase(this.sourceResolver.getPhase(phaseId));
+  }
+
+  hideCurrentPhase() {
+    let rememberedSelection = null;
+    if (this.currentPhaseView != null) {
+      rememberedSelection = this.currentPhaseView.detachSelection();
+      this.currentPhaseView.hide();
+      this.currentPhaseView = null;
+    }
+    return rememberedSelection;
+  }
+
+  onresize() {
+    if (this.graph) this.graph.fitGraphViewToWindow();
+  }
+
+  deleteContent() {
+    this.hideCurrentPhase();
+  }
+}

tools/turbolizer/index.html

@@ -75,6 +75,7 @@
     <script src="graph-view.js"></script>
     <script src="schedule-view.js"></script>
     <script src="disassembly-view.js"></script>
+    <script src="graphmultiview.js"></script>
     <script src="turbo-visualizer.js"></script>
   </body>
 </html>

tools/turbolizer/schedule-view.js

@@ -18,7 +18,7 @@ class ScheduleView extends TextView {
   }
 
   constructor(parentId, broker) {
-    super(parentId, broker, null, false);
+    super(parentId, broker, null);
   }
 
   attachSelection(s) {

tools/turbolizer/text-view.js

@@ -10,7 +10,7 @@ function anyToString(x) {
 
 class TextView extends View {
   constructor(id, broker, patterns) {
-    super(id, broker);
+    super(id);
     let view = this;
     view.textListNode = view.divNode.getElementsByTagName('ul')[0];
     view.patterns = patterns;

tools/turbolizer/turbo-visualizer.js

@@ -170,9 +170,7 @@ class Resizer {
 document.onload = (function (d3) {
   "use strict";
   var svg = null;
-  var graph = null;
-  var schedule = null;
-  var currentPhaseView = null;
+  var multiview = null;
   var disassemblyView = null;
   var sourceViews = [];
   var selectionBroker = null;
@@ -180,32 +178,7 @@ document.onload = (function (d3) {
   let resizer = new Resizer(panesUpdatedCallback, 100);
 
   function panesUpdatedCallback() {
-    if (graph) graph.fitGraphViewToWindow();
-  }
-
-  function hideCurrentPhase() {
-    var rememberedSelection = null;
-    if (currentPhaseView != null) {
-      rememberedSelection = currentPhaseView.detachSelection();
-      currentPhaseView.hide();
-      currentPhaseView = null;
-    }
-    return rememberedSelection;
-  }
-
-  function displayPhaseView(view, data) {
-    var rememberedSelection = hideCurrentPhase();
-    view.show(data, rememberedSelection);
-    d3.select("#middle").classed("scrollable", view.isScrollable());
-    currentPhaseView = view;
-  }
-
-  function displayPhase(phase) {
-    if (phase.type == 'graph') {
-      displayPhaseView(graph, phase.data);
-    } else if (phase.type == 'schedule') {
-      displayPhaseView(schedule, phase);
-    }
+    if (multiview) multiview.onresize();
   }
 
   function loadFile(txtRes) {
@@ -216,8 +189,8 @@ document.onload = (function (d3) {
     }
     try {
       sourceViews.forEach((sv) => sv.hide());
-      hideCurrentPhase();
-      graph = null;
+      if (multiview) multiview.hide();
+      multiview = null;
       if (disassemblyView) disassemblyView.hide();
       sourceViews = [];
       sourceResolver = new SourceResolver();
@@ -259,33 +232,8 @@ document.onload = (function (d3) {
         disassemblyView.show(sourceResolver.disassemblyPhase.data, null);
       }
 
-      var selectMenu = document.getElementById('display-selector');
-      selectMenu.innerHTML = '';
-      sourceResolver.forEachPhase((phase) => {
-        var optionElement = document.createElement("option");
-        optionElement.text = phase.name;
-        selectMenu.add(optionElement, null);
-      });
-      selectMenu.onchange = function (item) {
-        window.sessionStorage.setItem("lastSelectedPhase", selectMenu.selectedIndex);
-        displayPhase(sourceResolver.getPhase(selectMenu.selectedIndex));
-      }
-
-      const initialPhaseIndex = sourceResolver.repairPhaseId(+window.sessionStorage.getItem("lastSelectedPhase"));
-      selectMenu.selectedIndex = initialPhaseIndex;
-
-      function displayPhaseByName(phaseName) {
-        const phaseId = sourceResolver.getPhaseIdByName(phaseName);
-        selectMenu.selectedIndex = phaseId - 1;
-        displayPhase(sourceResolver.getPhase(phaseId));
-      }
-
-      graph = new GraphView(d3, INTERMEDIATE_PANE_ID, selectionBroker, displayPhaseByName);
-      schedule = new ScheduleView(INTERMEDIATE_PANE_ID, selectionBroker);
-
-      displayPhase(sourceResolver.getPhase(initialPhaseIndex));
-
-      d3.select("#search-input").attr("value", window.sessionStorage.getItem("lastSearch") || "");
+      multiview = new GraphMultiView(INTERMEDIATE_PANE_ID, selectionBroker, sourceResolver);
+      multiview.show(jsonObj);
     } catch (err) {
       if (window.confirm("Error: Exception during load of TurboFan JSON file:\n" +
            "error: " + err.message + "\nDo you want to clear session storage?")) {
@@ -319,13 +267,6 @@ document.onload = (function (d3) {
 
   initializeUploadHandlers();
 
-  function handleSearch(e) {
-    if (currentPhaseView) {
-      currentPhaseView.searchInputAction(currentPhaseView, this)
-    }
-  }
-
-  d3.select("#search-input").on("keyup", handleSearch);
 
   resizer.snapper.setSourceExpanded(resizer.snapper.getLastExpandedState("source", true));
   resizer.snapper.setDisassemblyExpanded(resizer.snapper.getLastExpandedState("disassembly", false));

tools/turbolizer/view.js

@@ -5,7 +5,7 @@
 "use strict";
 
 class View {
-  constructor(id, broker) {
+  constructor(id) {
     this.container = document.getElementById(id);
     this.divNode = this.createViewElement();
     this.divElement = d3.select(this.divNode);
@@ -18,11 +18,9 @@ class View {
   show(data, rememberedSelection) {
     this.container.appendChild(this.divElement.node());
     this.initializeContent(data, rememberedSelection);
-    this.divElement.attr(VISIBILITY, 'visible');
   }
 
   hide() {
-    this.divElement.attr(VISIBILITY, 'hidden');
     this.deleteContent();
     this.container.removeChild(this.divNode);
   }