Skip to content

V
V8
Commit 93b493bc authored by Zeynep Cankara's avatar Zeynep Cankara Committed by Commit Bot
Browse files
Options

[tools][system-analyzer] Add global methods to App Class 

This CL adds global state management
methods into the App Class. Thus, make it
easier to control global state of the web app.

Bug: v8:10667, v8:10644

Change-Id: I9e37c3e851a3912ebc6c672eb4372f77d20a989c
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2300482
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: 's avatarCamillo Bruni <cbruni@chromium.org>
Reviewed-by: 's avatarSathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#68887}
parent f52e1872
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 95 deletions
tools/system-analyzer/index.html
View file @ 93b493bc
......@@ -56,7 +56,7 @@ dd {
<script type="module" >
import {App} from './index.mjs';
globalThis.app = new App();
globalThis.app = new App("#map-panel", "#timeline-panel", "#ic-panel");
</script>
</head>
<body>
......@@ -68,7 +68,7 @@ globalThis.app = new App();
</section>
<div id="container" style="display: none;">
<timeline-panel id="timeline-panel"></timeline-panel>
<map-panel id="map-panel" onclick="app.handleMapAddressSearch(event)" showMaps="app.showMaps(event)"></map-panel>
<map-panel id="map-panel" onclick="app.handleMapAddressSearch(event)" onchange="app.handleShowMaps(event)"></map-panel>
<ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel>
</div>
</div>
......
tools/system-analyzer/index.mjs
View file @ 93b493bc
......@@ -10,114 +10,110 @@ import './timeline-panel.mjs';
import './map-panel.mjs';
import './log-file-reader.mjs';
document.onkeydown = handleKeyDown;
function handleKeyDown(event) {
stateGlobal.navigation = document.state.navigation;
let nav = document.state.navigation;
switch(event.key) {
case "ArrowUp":
event.preventDefault();
if (event.shiftKey) {
nav.selectPrevEdge();
} else {
nav.moveInChunk(-1);
}
return false;
case "ArrowDown":
event.preventDefault();
if (event.shiftKey) {
nav.selectNextEdge();
} else {
nav.moveInChunk(1);
}
return false;
case "ArrowLeft":
nav.moveInChunks(false);
break;
case "ArrowRight":
nav.moveInChunks(true);
break;
case "+":
nav.increaseTimelineResolution();
break;
case "-":
nav.decreaseTimelineResolution();
break;
class App {
constructor(mapPanelId, timelinePanelId, icPanelId) {
this.mapPanelId_ = mapPanelId;
this.timelinePanelId_ = timelinePanelId;
this.icPanelId_ = icPanelId;
this.icPanel_ = this.$(icPanelId);
this.state_ = Object.create(null);
document.addEventListener('keydown', e => this.handleKeyDown(e));
}
}
// Update application state
function updateDocumentState(){
document.state = stateGlobal.state;
$(id) { return document.querySelector(id); }
handleKeyDown(event) {
let nav = document.state.navigation;
switch(event.key) {
case "ArrowUp":
event.preventDefault();
if (event.shiftKey) {
nav.selectPrevEdge();
} else {
nav.moveInChunk(-1);
}
return false;
case "ArrowDown":
event.preventDefault();
if (event.shiftKey) {
nav.selectNextEdge();
} else {
nav.moveInChunk(1);
}
return false;
case "ArrowLeft":
nav.moveInChunks(false);
break;
case "ArrowRight":
nav.moveInChunks(true);
break;
case "+":
nav.increaseTimelineResolution();
break;
case "-":
nav.decreaseTimelineResolution();
break;
}
}
// Update application state
updateDocumentState(){
document.state = this.state_.state;
try {
document.state.timeline = stateGlobal.timeline;
document.state.timeline = this.state_.timeline;
} catch (error) {
console.log(error);
console.log("cannot assign timeline to state!");
}
}
}
// Map event log processing
function handleLoadTextMapProcessor(text) {
// Map event log processing
handleLoadTextMapProcessor(text) {
let mapProcessor = new MapProcessor();
return mapProcessor.processString(text);
}
// IC event file reading and log processing
function loadFileIC(file) {
let reader = new FileReader();
reader.onload = function(evt) {
let icProcessor = new CustomIcProcessor();
icProcessor.processString(this.result);
let entries = icProcessor.entries;
$("ic-panel").entries = entries;
$("ic-panel").count.innerHTML = entries.length;
}
reader.readAsText(file);
$("ic-panel").initGroupKeySelect();
}
function $(id) { return document.querySelector(id); }
// holds the state of the application
let stateGlobal = Object.create(null);
// call when a new file uploaded
function handleDataUpload(e) {
stateGlobal.timeline = e.detail;
if(!e.detail) return;
$('#container').style.display = 'block';
// instantiate the app logic
stateGlobal.fileData = e.detail;
stateGlobal.state = new State('#map-panel','#timeline-panel');
stateGlobal.timeline = handleLoadTextMapProcessor(stateGlobal.fileData.chunk);
updateDocumentState();
// process the IC explorer
loadFileIC(stateGlobal.fileData.file);
}
// IC event file reading and log processing
loadICLogFile(fileData) {
let reader = new FileReader();
reader.onload = (evt) => {
let icProcessor = new CustomIcProcessor();
icProcessor.processString(fileData.chunk);
let entries = icProcessor.entries;
this.icPanel_.entries = entries;
this.icPanel_.count.innerHTML = entries.length;
}
reader.readAsText(fileData.file);
this.icPanel_.initGroupKeySelect();
}
function handleMapAddressSearch(e) {
if(!e.detail.isValidMap) return;
document.state.map = e.detail.map;
}
// call when a new file uploaded
handleDataUpload(e) {
if(!e.detail) return;
this.$('#container').style.display = 'block';
// instantiate the app logic
let fileData = e.detail;
this.state_.state = new State('#map-panel','#timeline-panel');
this.state_.timeline = this.handleLoadTextMapProcessor(fileData.chunk);
this.updateDocumentState();
this.loadICLogFile(fileData);
}
function showMaps(e) {
// show maps on the view
document.state.view.transitionView.showMaps(e.detail);
}
handleMapAddressSearch(e) {
if(!e.detail.isValidMap) return;
document.state.map = e.detail.map;
}
function handleSelectIc(e){
if(!e.detail) return;
// Set selected IC events on the View
document.state.filteredEntries = e.detail;
}
handleShowMaps(e) {
// show maps on the view
document.state.view.transitionView.showMaps(e.detail);
}
class App {
handleDataUpload = handleDataUpload;
handleMapAddressSearch = handleMapAddressSearch;
showMaps = showMaps;
handleSelectIc = handleSelectIc;
handleSelectIc(e){
if(!e.detail) return;
// Set selected IC events on the View
document.state.filteredEntries = e.detail;
}
}
export {App};
tools/system-analyzer/map-panel-template.html
View file @ 93b493bc
......@@ -135,7 +135,7 @@ found in the LICENSE file. -->
color: black;
}
</style>
<stats-panel id="stats-panel" onchange="app.showMaps(event)"></stats-panel>
<stats-panel id="stats-panel" onchange="app.handleShowMaps(event)"></stats-panel>
<div class="panel">
<h2>Map Panel</h2>
<h3>Transitions</h3>
......
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