1// Copyright 2018 the V8 project authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5import {GraphView} from "./graph-view.js" 6import {ScheduleView} from "./schedule-view.js" 7import {SourceResolver} from "./source-resolver.js" 8import {SelectionBroker} from "./selection-broker.js" 9import {View, PhaseView} from "./view.js" 10 11export class GraphMultiView extends View { 12 sourceResolver: SourceResolver; 13 selectionBroker: SelectionBroker; 14 graph: GraphView; 15 schedule: ScheduleView; 16 selectMenu: HTMLSelectElement; 17 currentPhaseView: View & PhaseView; 18 19 createViewElement() { 20 const pane = document.createElement('div'); 21 pane.setAttribute('id', "multiview"); 22 return pane; 23 } 24 25 constructor(id, selectionBroker, sourceResolver) { 26 super(id); 27 const view = this; 28 view.sourceResolver = sourceResolver; 29 view.selectionBroker = selectionBroker; 30 const searchInput = document.getElementById("search-input") as HTMLInputElement; 31 searchInput.addEventListener("keyup", e => { 32 if (!view.currentPhaseView) return; 33 view.currentPhaseView.searchInputAction(searchInput, e) 34 }); 35 searchInput.setAttribute("value", window.sessionStorage.getItem("lastSearch") || ""); 36 this.graph = new GraphView(id, selectionBroker, 37 (phaseName) => view.displayPhaseByName(phaseName)); 38 this.schedule = new ScheduleView(id, selectionBroker); 39 this.selectMenu = (<HTMLSelectElement>document.getElementById('display-selector')); 40 } 41 42 initializeSelect() { 43 const view = this; 44 view.selectMenu.innerHTML = ''; 45 view.sourceResolver.forEachPhase((phase) => { 46 const optionElement = document.createElement("option"); 47 optionElement.text = phase.name; 48 view.selectMenu.add(optionElement); 49 }); 50 this.selectMenu.onchange = function (this: HTMLSelectElement) { 51 window.sessionStorage.setItem("lastSelectedPhase", this.selectedIndex.toString()); 52 view.displayPhase(view.sourceResolver.getPhase(this.selectedIndex)); 53 } 54 } 55 56 show(data, rememberedSelection) { 57 super.show(data, rememberedSelection); 58 this.initializeSelect(); 59 const lastPhaseIndex = +window.sessionStorage.getItem("lastSelectedPhase"); 60 const initialPhaseIndex = this.sourceResolver.repairPhaseId(lastPhaseIndex); 61 this.selectMenu.selectedIndex = initialPhaseIndex; 62 this.displayPhase(this.sourceResolver.getPhase(initialPhaseIndex)); 63 } 64 65 initializeContent() { } 66 67 displayPhase(phase) { 68 if (phase.type == 'graph') { 69 this.displayPhaseView(this.graph, phase.data); 70 } else if (phase.type == 'schedule') { 71 this.displayPhaseView(this.schedule, phase); 72 } 73 } 74 75 displayPhaseView(view, data) { 76 const rememberedSelection = this.hideCurrentPhase(); 77 view.show(data, rememberedSelection); 78 document.getElementById("middle").classList.toggle("scrollable", view.isScrollable()); 79 this.currentPhaseView = view; 80 } 81 82 displayPhaseByName(phaseName) { 83 const phaseId = this.sourceResolver.getPhaseIdByName(phaseName); 84 this.selectMenu.selectedIndex = phaseId - 1; 85 this.displayPhase(this.sourceResolver.getPhase(phaseId)); 86 } 87 88 hideCurrentPhase() { 89 let rememberedSelection = null; 90 if (this.currentPhaseView != null) { 91 rememberedSelection = this.currentPhaseView.detachSelection(); 92 this.currentPhaseView.hide(); 93 this.currentPhaseView = null; 94 } 95 return rememberedSelection; 96 } 97 98 onresize() { 99 if (this.currentPhaseView) this.currentPhaseView.onresize(); 100 } 101 102 deleteContent() { 103 this.hideCurrentPhase(); 104 } 105 106 detachSelection() { 107 return null; 108 } 109} 110