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
Show 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,9 +10,19 @@ import './timeline-panel.mjs'; ...@@ -10,9 +10,19 @@ 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;
this.timelinePanelId_ = timelinePanelId;
this.icPanelId_ = icPanelId;
this.icPanel_ = this.$(icPanelId);
this.state_ = Object.create(null);
document.addEventListener('keydown', e => this.handleKeyDown(e));
}
$(id) { return document.querySelector(id); }
handleKeyDown(event) {
let nav = document.state.navigation; let nav = document.state.navigation;
switch(event.key) { switch(event.key) {
case "ArrowUp": case "ArrowUp":
...@@ -44,80 +54,66 @@ function handleKeyDown(event) { ...@@ -44,80 +54,66 @@ function handleKeyDown(event) {
nav.decreaseTimelineResolution(); nav.decreaseTimelineResolution();
break; break;
} }
} }
// Update application state // Update application state
function updateDocumentState(){ updateDocumentState(){
document.state = stateGlobal.state; 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) { // IC event file reading and log processing
loadICLogFile(fileData) {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = function(evt) { reader.onload = (evt) => {
let icProcessor = new CustomIcProcessor(); let icProcessor = new CustomIcProcessor();
icProcessor.processString(this.result); icProcessor.processString(fileData.chunk);
let entries = icProcessor.entries; let entries = icProcessor.entries;
$("ic-panel").entries = entries; this.icPanel_.entries = entries;
$("ic-panel").count.innerHTML = entries.length; this.icPanel_.count.innerHTML = entries.length;
}
reader.readAsText(fileData.file);
this.icPanel_.initGroupKeySelect();
} }
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 // call when a new file uploaded
function handleDataUpload(e) { handleDataUpload(e) {
stateGlobal.timeline = e.detail;
if(!e.detail) return; if(!e.detail) return;
$('#container').style.display = 'block'; this.$('#container').style.display = 'block';
// instantiate the app logic // instantiate the app logic
stateGlobal.fileData = e.detail; let fileData = e.detail;
stateGlobal.state = new State('#map-panel','#timeline-panel'); this.state_.state = new State('#map-panel','#timeline-panel');
stateGlobal.timeline = handleLoadTextMapProcessor(stateGlobal.fileData.chunk); this.state_.timeline = this.handleLoadTextMapProcessor(fileData.chunk);
updateDocumentState(); this.updateDocumentState();
// process the IC explorer this.loadICLogFile(fileData);
loadFileIC(stateGlobal.fileData.file); }
}
function handleMapAddressSearch(e) { handleMapAddressSearch(e) {
if(!e.detail.isValidMap) return; if(!e.detail.isValidMap) return;
document.state.map = e.detail.map; document.state.map = e.detail.map;
} }
function showMaps(e) { handleShowMaps(e) {
// show maps on the view // show maps on the view
document.state.view.transitionView.showMaps(e.detail); document.state.view.transitionView.showMaps(e.detail);
} }
function handleSelectIc(e){ handleSelectIc(e){
if(!e.detail) return; if(!e.detail) return;
// Set selected IC events on the View // Set selected IC events on the View
document.state.filteredEntries = e.detail; document.state.filteredEntries = e.detail;
} }
class App {
handleDataUpload = handleDataUpload;
handleMapAddressSearch = handleMapAddressSearch;
showMaps = showMaps;
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