1// Copyright 2020 the V8 project authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4import './map-panel/map-details.mjs';
5import './map-panel/map-transitions.mjs';
6
7import {MapLogEntry} from '../log/map.mjs';
8
9import {FocusEvent} from './events.mjs';
10import {CollapsableElement, DOM} from './helper.mjs';
11
12DOM.defineCustomElement('view/map-panel',
13                        (templateText) =>
14                            class MapPanel extends CollapsableElement {
15  _map;
16  _timeline;
17  _selectedLogEntries = [];
18  _displayedLogEntries = [];
19
20  constructor() {
21    super(templateText);
22    this.searchBarBtn.addEventListener('click', e => this._handleSearch(e));
23    this.showAllRadio.onclick = _ => this._showEntries(this._timeline);
24    this.showTimerangeRadio.onclick = _ =>
25        this._showEntries(this._timeline.selectionOrSelf);
26    this.showSelectionRadio.onclick = _ =>
27        this._showEntries(this._selectedLogEntries);
28  }
29
30  get showAllRadio() {
31    return this.$('#show-all');
32  }
33
34  get showTimerangeRadio() {
35    return this.$('#show-timerange');
36  }
37
38  get showSelectionRadio() {
39    return this.$('#show-selection');
40  }
41
42  get mapTransitionsPanel() {
43    return this.$('#map-transitions');
44  }
45
46  get mapDetailsTransitionsPanel() {
47    return this.$('#map-details-transitions');
48  }
49
50  get mapDetailsPanel() {
51    return this.$('#map-details');
52  }
53
54  get searchBarBtn() {
55    return this.$('#searchBarBtn');
56  }
57
58  get searchBar() {
59    return this.$('#searchBar');
60  }
61
62  set timeline(timeline) {
63    console.assert(timeline !== undefined, 'timeline undefined!');
64    this._timeline = timeline;
65    this.$('.panel').style.display = timeline.isEmpty() ? 'none' : 'inherit';
66    this.mapTransitionsPanel.timeline = timeline;
67    this.mapDetailsTransitionsPanel.timeline = timeline;
68  }
69
70  set selectedLogEntries(entries) {
71    if (entries === this._timeline.selection) {
72      this.showTimerangeRadio.click();
73    } else if (entries == this._timeline) {
74      this.showAllRadio.click();
75    } else {
76      this._selectedLogEntries = entries;
77      this.showSelectionRadio.click();
78    }
79  }
80
81  set map(map) {
82    this._map = map;
83    this.requestUpdate();
84  }
85
86  _showEntries(entries) {
87    this._displayedLogEntries = entries;
88    this.requestUpdate();
89  }
90
91  _update() {
92    this.mapDetailsTransitionsPanel.selectedLogEntries = [this._map];
93    this.mapDetailsPanel.map = this._map;
94    this.mapTransitionsPanel.selectedLogEntries = this._displayedLogEntries;
95  }
96
97  _handleSearch(e) {
98    const searchBar = this.$('#searchBarInput');
99    const searchBarInput = searchBar.value;
100    // access the map from model cache
101    const selectedMap = MapLogEntry.get(searchBarInput);
102    if (selectedMap) {
103      searchBar.className = 'success';
104      this.dispatchEvent(new FocusEvent(selectedMap));
105    } else {
106      searchBar.className = 'failure';
107    }
108  }
109});
110