Skip to content

V
V8
Commit be11d9b8 authored by Sigurd Schneider's avatar Sigurd Schneider Committed by Commit Bot
Browse files
Options

[turbolizer] Add toolbar only after graph is loaded 

This should make it possible to load a new graph without reloading
Turbolizer.

Notry: true
Change-Id: Ic6f8bdf7fee658836612043d8893614ae54d7e15
Bug: v8:7327
Reviewed-on: https://chromium-review.googlesource.com/c/1347476
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: 's avatarGeorg Neis <neis@chromium.org>
Cr-Commit-Position: refs/heads/master@{#57716}
parent c098b96c
Hide whitespace changes
Inline Side-by-side
Showing with 43 additions and 39 deletions
tools/turbolizer/index.html
View file @ be11d9b8
......@@ -13,26 +13,7 @@
<div id="left" class="content"></div>
<div id="resizer-left" class="resizer"></div>
<div id="middle">
<div id="graph-toolbox-anchor">
<div id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png" alt="layout graph" class="button-input">
<input id="show-all" type="image" title="show all nodes" src="expand-all.jpg" alt="show all nodes" class="button-input">
<input id="toggle-hide-dead" type="image" title="show only live nodes" src="live.png" alt="only live nodes"
class="button-input">
<input id="hide-unselected" type="image" title="hide unselected nodes" src="hide-unselected.png" alt="hide unselected nodes"
class="button-input">
<input id="hide-selected" type="image" title="hide selected nodes" src="hide-selected.png" alt="hide selected nodes"
class="button-input">
<input id="zoom-selection" type="image" title="zoom to selection" src="search.png" alt="zoom to selection"
class="button-input">
<input id="toggle-types" type="image" title="show/hide types" src="types.png" alt="show/hide types" class="button-input">
<input id="search-input" type="text" title="search nodes for regex" alt="search node for regex" class="search-input"
placeholder="find with regexp&hellip;">
<select id="display-selector">
<option disabled selected>(please open a file)</option>
</select>
</div>
</div>
<div id="load-file">
<input id="upload-helper" type="file">
<input id="upload" type="image" title="load graph" class="button-input" src="upload-icon.png" alt="upload graph">
......
tools/turbolizer/src/graph-view.ts
View file @ be11d9b8
......@@ -3,15 +3,15 @@
// found in the LICENSE file.
import * as d3 from "d3"
import {layoutNodeGraph} from "../src/graph-layout"
import {MAX_RANK_SENTINEL} from "../src/constants"
import {GNode, nodeToStr, isNodeInitiallyVisible} from "../src/node"
import {NODE_INPUT_WIDTH, MINIMUM_NODE_OUTPUT_APPROACH} from "../src/node"
import {DEFAULT_NODE_BUBBLE_RADIUS} from "../src/node"
import {Edge, edgeToStr} from "../src/edge"
import {View, PhaseView} from "../src/view"
import {MySelection} from "../src/selection"
import {partial, alignUp} from "../src/util"
import { layoutNodeGraph } from "../src/graph-layout"
import { MAX_RANK_SENTINEL } from "../src/constants"
import { GNode, nodeToStr, isNodeInitiallyVisible } from "../src/node"
import { NODE_INPUT_WIDTH, MINIMUM_NODE_OUTPUT_APPROACH } from "../src/node"
import { DEFAULT_NODE_BUBBLE_RADIUS } from "../src/node"
import { Edge, edgeToStr } from "../src/edge"
import { View, PhaseView } from "../src/view"
import { MySelection } from "../src/selection"
import { partial, alignUp } from "../src/util"
function nodeToStringKey(n) {
return "" + n.id;
......@@ -157,14 +157,6 @@ export class GraphView extends View implements PhaseView {
});
d3.select("#layout").on("click", partial(this.layoutAction, graph));
d3.select("#show-all").on("click", partial(this.showAllAction, graph));
d3.select("#toggle-hide-dead").on("click", partial(this.toggleHideDead, graph));
d3.select("#hide-unselected").on("click", partial(this.hideUnselectedAction, graph));
d3.select("#hide-selected").on("click", partial(this.hideSelectedAction, graph));
d3.select("#zoom-selection").on("click", partial(this.zoomSelectionAction, graph));
d3.select("#toggle-types").on("click", partial(this.toggleTypesAction, graph));
// listen for key events
d3.select(window).on("keydown", function (e) {
graph.svgKeyDown.call(graph);
......@@ -261,6 +253,13 @@ export class GraphView extends View implements PhaseView {
}
initializeContent(data, rememberedSelection) {
d3.select("#layout").on("click", partial(this.layoutAction, this));
d3.select("#show-all").on("click", partial(this.showAllAction, this));
d3.select("#toggle-hide-dead").on("click", partial(this.toggleHideDead, this));
d3.select("#hide-unselected").on("click", partial(this.hideUnselectedAction, this));
d3.select("#hide-selected").on("click", partial(this.hideSelectedAction, this));
d3.select("#zoom-selection").on("click", partial(this.zoomSelectionAction, this));
d3.select("#toggle-types").on("click", partial(this.toggleTypesAction, this));
this.createGraph(data, rememberedSelection);
if (rememberedSelection != null) {
this.attachSelection(rememberedSelection);
......
tools/turbolizer/src/graphmultiview.ts
View file @ be11d9b8
......@@ -11,6 +11,26 @@ import { View, PhaseView } from "../src/view"
const multiviewID = "multiview";
const toolboxHTML = `
<div id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png" alt="layout graph" class="button-input">
<input id="show-all" type="image" title="show all nodes" src="expand-all.jpg" alt="show all nodes" class="button-input">
<input id="toggle-hide-dead" type="image" title="show only live nodes" src="live.png" alt="only live nodes"
class="button-input">
<input id="hide-unselected" type="image" title="hide unselected nodes" src="hide-unselected.png" alt="hide unselected nodes"
class="button-input">
<input id="hide-selected" type="image" title="hide selected nodes" src="hide-selected.png" alt="hide selected nodes"
class="button-input">
<input id="zoom-selection" type="image" title="zoom to selection" src="search.png" alt="zoom to selection"
class="button-input">
<input id="toggle-types" type="image" title="show/hide types" src="types.png" alt="show/hide types" class="button-input">
<input id="search-input" type="text" title="search nodes for regex" alt="search node for regex" class="search-input"
placeholder="find with regexp&hellip;">
<select id="display-selector">
<option disabled selected>(please open a file)</option>
</select>
</div>`
export class GraphMultiView extends View {
sourceResolver: SourceResolver;
selectionBroker: SelectionBroker;
......@@ -32,7 +52,11 @@ export class GraphMultiView extends View {
const view = this;
view.sourceResolver = sourceResolver;
view.selectionBroker = selectionBroker;
const searchInput = document.getElementById("search-input") as HTMLInputElement;
const toolbox = document.createElement("div")
toolbox.id = "graph-toolbox-anchor";
toolbox.innerHTML = toolboxHTML
view.divNode.appendChild(toolbox);
const searchInput = toolbox.querySelector("#search-input") as HTMLInputElement;
searchInput.addEventListener("keyup", e => {
if (!view.currentPhaseView) return;
view.currentPhaseView.searchInputAction(searchInput, e)
......@@ -42,7 +66,7 @@ export class GraphMultiView extends View {
(phaseName) => view.displayPhaseByName(phaseName));
this.schedule = new ScheduleView(this.divNode, selectionBroker);
this.sequence = new SequenceView(this.divNode, selectionBroker);
this.selectMenu = (<HTMLSelectElement>document.getElementById('display-selector'));
this.selectMenu = (<HTMLSelectElement>toolbox.querySelector('#display-selector'));
}
initializeSelect() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment