b3b42a3008
This CL adds a Timeline Class to handle data interaction between panels. The timeline class enables to filter the data based on selected time range. Bug: v8:10644, v8:10735 Change-Id: I7fbbe1741abc69d2889b0547113e5da10b7f5510 Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2315983 Commit-Queue: Zeynep Cankara <zcankara@google.com> Reviewed-by: Sathya Gunasekaran <gsathya@chromium.org> Cr-Commit-Position: refs/heads/master@{#69056}
96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
// Copyright 2020 the V8 project authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
import "./stats-panel.mjs";
|
|
import "./map-panel/map-details.mjs";
|
|
import "./map-panel/map-transitions.mjs";
|
|
import {V8Map} from "./map-processor.mjs";
|
|
import {defineCustomElement, V8CustomElement} from './helper.mjs';
|
|
|
|
defineCustomElement('map-panel', (templateText) =>
|
|
class MapPanel extends V8CustomElement {
|
|
#map;
|
|
constructor() {
|
|
super(templateText);
|
|
this.searchBarBtn.addEventListener(
|
|
'click', e => this.handleSearchBar(e));
|
|
this.addEventListener(
|
|
'mapdetailsupdate', e => this.handleUpdateMapDetails(e));
|
|
}
|
|
|
|
handleUpdateMapDetails(e){
|
|
this.mapDetailsPanel.mapDetails = e.detail;
|
|
}
|
|
|
|
get statsPanel() {
|
|
return this.$('#stats-panel');
|
|
}
|
|
|
|
get mapTransitionsPanel() {
|
|
return this.$('#map-transitions');
|
|
}
|
|
|
|
get mapDetailsPanel() {
|
|
return this.$('#map-details');
|
|
}
|
|
|
|
get searchBarBtn() {
|
|
return this.$('#searchBarBtn');
|
|
}
|
|
|
|
get searchBar() {
|
|
return this.$('#searchBar');
|
|
}
|
|
|
|
get mapDetails() {
|
|
return this.mapDetailsPanel.mapDetails;
|
|
}
|
|
|
|
// send a timeline to the stats-panel
|
|
get timeline() {
|
|
return this.statsPanel.timeline;
|
|
}
|
|
set timeline(value) {
|
|
console.assert(value !== undefined, "timeline undefined!");
|
|
this.statsPanel.timeline = value;
|
|
this.statsPanel.update();
|
|
}
|
|
get transitions() {
|
|
return this.statsPanel.transitions;
|
|
}
|
|
set transitions(value) {
|
|
this.statsPanel.transitions = value;
|
|
}
|
|
|
|
set map(value) {
|
|
this.#map = value;
|
|
this.mapTransitionsPanel.map = this.#map;
|
|
}
|
|
|
|
handleSearchBar(e){
|
|
let dataModel = Object.create(null);
|
|
let searchBar = this.$('#searchBarInput');
|
|
let searchBarInput = searchBar.value;
|
|
//access the map from model cache
|
|
let selectedMap = V8Map.get(searchBarInput);
|
|
if(selectedMap){
|
|
dataModel.isValidMap = true;
|
|
dataModel.map = selectedMap;
|
|
searchBar.className = "success";
|
|
} else {
|
|
dataModel.isValidMap = false;
|
|
searchBar.className = "failure";
|
|
}
|
|
this.dispatchEvent(new CustomEvent(
|
|
'click', {bubbles: true, composed: true, detail: dataModel}));
|
|
}
|
|
|
|
set mapEntries(list){
|
|
this.mapTransitionsPanel.mapEntries = list;
|
|
}
|
|
get mapEntries(){
|
|
return this.mapTransitionsPanel.mapEntries;
|
|
}
|
|
|
|
});
|