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 { ...@@ -56,7 +56,7 @@ dd {
<script type="module" > <script type="module" >
import {App} from './index.mjs'; import {App} from './index.mjs';
globalThis.app = new App(); globalThis.app = new App("#map-panel", "#timeline-panel", "#ic-panel");
</script> </script>
</head> </head>
<body> <body>
...@@ -68,7 +68,7 @@ globalThis.app = new App(); ...@@ -68,7 +68,7 @@ globalThis.app = new App();
</section> </section>
<div id="container" style="display: none;"> <div id="container" style="display: none;">
<timeline-panel id="timeline-panel"></timeline-panel> <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> <ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel>
</div> </div>
</div> </div>
......
tools/system-analyzer/index.mjs
View file @ 93b493bc
...@@ -10,114 +10,110 @@ import './timeline-panel.mjs'; ...@@ -10,114 +10,110 @@ import './timeline-panel.mjs';
import './map-panel.mjs'; import './map-panel.mjs';
import './log-file-reader.mjs'; import './log-file-reader.mjs';
document.onkeydown = handleKeyDown; class App {
function handleKeyDown(event) { constructor(mapPanelId, timelinePanelId, icPanelId) {
stateGlobal.navigation = document.state.navigation; this.mapPanelId_ = mapPanelId;
let nav = document.state.navigation; this.timelinePanelId_ = timelinePanelId;
switch(event.key) { this.icPanelId_ = icPanelId;
case "ArrowUp": this.icPanel_ = this.$(icPanelId);
event.preventDefault(); this.state_ = Object.create(null);
if (event.shiftKey) { document.addEventListener('keydown', e => this.handleKeyDown(e));
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 $(id) { return document.querySelector(id); }
function updateDocumentState(){
document.state = stateGlobal.state; 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 { try {
document.state.timeline = stateGlobal.timeline; document.state.timeline = this.state_.timeline;
} catch (error) { } catch (error) {
console.log(error); console.log(error);
console.log("cannot assign timeline to state!"); console.log("cannot assign timeline to state!");
} }
} }
// Map event log processing // Map event log processing
function handleLoadTextMapProcessor(text) { handleLoadTextMapProcessor(text) {
let mapProcessor = new MapProcessor(); let mapProcessor = new MapProcessor();
return mapProcessor.processString(text); 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 // IC event file reading and log processing
let stateGlobal = Object.create(null); loadICLogFile(fileData) {
let reader = new FileReader();
// call when a new file uploaded reader.onload = (evt) => {
function handleDataUpload(e) { let icProcessor = new CustomIcProcessor();
stateGlobal.timeline = e.detail; icProcessor.processString(fileData.chunk);
if(!e.detail) return; let entries = icProcessor.entries;
$('#container').style.display = 'block'; this.icPanel_.entries = entries;
// instantiate the app logic this.icPanel_.count.innerHTML = entries.length;
stateGlobal.fileData = e.detail; }
stateGlobal.state = new State('#map-panel','#timeline-panel'); reader.readAsText(fileData.file);
stateGlobal.timeline = handleLoadTextMapProcessor(stateGlobal.fileData.chunk); this.icPanel_.initGroupKeySelect();
updateDocumentState(); }
// process the IC explorer
loadFileIC(stateGlobal.fileData.file);
}
function handleMapAddressSearch(e) { // call when a new file uploaded
if(!e.detail.isValidMap) return; handleDataUpload(e) {
document.state.map = e.detail.map; 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) { handleMapAddressSearch(e) {
// show maps on the view if(!e.detail.isValidMap) return;
document.state.view.transitionView.showMaps(e.detail); document.state.map = e.detail.map;
} }
function handleSelectIc(e){ handleShowMaps(e) {
if(!e.detail) return; // show maps on the view
// Set selected IC events on the View document.state.view.transitionView.showMaps(e.detail);
document.state.filteredEntries = e.detail; }
}
class App { handleSelectIc(e){
handleDataUpload = handleDataUpload; if(!e.detail) return;
handleMapAddressSearch = handleMapAddressSearch; // Set selected IC events on the View
showMaps = showMaps; document.state.filteredEntries = e.detail;
handleSelectIc = handleSelectIc; }
} }
export {App}; export {App};
tools/system-analyzer/map-panel-template.html
View file @ 93b493bc
...@@ -135,7 +135,7 @@ found in the LICENSE file. --> ...@@ -135,7 +135,7 @@ found in the LICENSE file. -->
color: black; color: black;
} }
</style> </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"> <div class="panel">
<h2>Map Panel</h2> <h2>Map Panel</h2>
<h3>Transitions</h3> <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