mirror of
https://github.com/nodejs/node.git
synced 2025-05-15 14:41:29 +00:00
6cdd310275
PR-URL: https://github.com/nodejs/node/pull/38990 Reviewed-By: Jiawen Geng <technicalcute@gmail.com> Reviewed-By: Matteo Collina <matteo.collina@gmail.com> Reviewed-By: Robert Nagy <ronagy@icloud.com> Reviewed-By: Colin Ihrig <cjihrig@gmail.com>
110 lines
2.9 KiB
JavaScript
110 lines
2.9 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 './map-panel/map-details.mjs';
|
|
import './map-panel/map-transitions.mjs';
|
|
|
|
import {MapLogEntry} from '../log/map.mjs';
|
|
|
|
import {FocusEvent} from './events.mjs';
|
|
import {CollapsableElement, DOM} from './helper.mjs';
|
|
|
|
DOM.defineCustomElement('view/map-panel',
|
|
(templateText) =>
|
|
class MapPanel extends CollapsableElement {
|
|
_map;
|
|
_timeline;
|
|
_selectedLogEntries = [];
|
|
_displayedLogEntries = [];
|
|
|
|
constructor() {
|
|
super(templateText);
|
|
this.searchBarBtn.addEventListener('click', e => this._handleSearch(e));
|
|
this.showAllRadio.onclick = _ => this._showEntries(this._timeline);
|
|
this.showTimerangeRadio.onclick = _ =>
|
|
this._showEntries(this._timeline.selectionOrSelf);
|
|
this.showSelectionRadio.onclick = _ =>
|
|
this._showEntries(this._selectedLogEntries);
|
|
}
|
|
|
|
get showAllRadio() {
|
|
return this.$('#show-all');
|
|
}
|
|
|
|
get showTimerangeRadio() {
|
|
return this.$('#show-timerange');
|
|
}
|
|
|
|
get showSelectionRadio() {
|
|
return this.$('#show-selection');
|
|
}
|
|
|
|
get mapTransitionsPanel() {
|
|
return this.$('#map-transitions');
|
|
}
|
|
|
|
get mapDetailsTransitionsPanel() {
|
|
return this.$('#map-details-transitions');
|
|
}
|
|
|
|
get mapDetailsPanel() {
|
|
return this.$('#map-details');
|
|
}
|
|
|
|
get searchBarBtn() {
|
|
return this.$('#searchBarBtn');
|
|
}
|
|
|
|
get searchBar() {
|
|
return this.$('#searchBar');
|
|
}
|
|
|
|
set timeline(timeline) {
|
|
console.assert(timeline !== undefined, 'timeline undefined!');
|
|
this._timeline = timeline;
|
|
this.$('.panel').style.display = timeline.isEmpty() ? 'none' : 'inherit';
|
|
this.mapTransitionsPanel.timeline = timeline;
|
|
this.mapDetailsTransitionsPanel.timeline = timeline;
|
|
}
|
|
|
|
set selectedLogEntries(entries) {
|
|
if (entries === this._timeline.selection) {
|
|
this.showTimerangeRadio.click();
|
|
} else if (entries == this._timeline) {
|
|
this.showAllRadio.click();
|
|
} else {
|
|
this._selectedLogEntries = entries;
|
|
this.showSelectionRadio.click();
|
|
}
|
|
}
|
|
|
|
set map(map) {
|
|
this._map = map;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
_showEntries(entries) {
|
|
this._displayedLogEntries = entries;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
_update() {
|
|
this.mapDetailsTransitionsPanel.selectedLogEntries = [this._map];
|
|
this.mapDetailsPanel.map = this._map;
|
|
this.mapTransitionsPanel.selectedLogEntries = this._displayedLogEntries;
|
|
}
|
|
|
|
_handleSearch(e) {
|
|
const searchBar = this.$('#searchBarInput');
|
|
const searchBarInput = searchBar.value;
|
|
// access the map from model cache
|
|
const selectedMap = MapLogEntry.get(searchBarInput);
|
|
if (selectedMap) {
|
|
searchBar.className = 'success';
|
|
this.dispatchEvent(new FocusEvent(selectedMap));
|
|
} else {
|
|
searchBar.className = 'failure';
|
|
}
|
|
}
|
|
});
|