• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BaseElement, element } from '../../../../base-ui/BaseElement';
17import '../../../../base-ui/select/LitSelect';
18import '../../../../base-ui/select/LitSelectOption';
19import { SelectionParam } from '../../../bean/BoxSelection';
20import { LitSelect } from '../../../../base-ui/select/LitSelect';
21import { TabPaneSchedSwitch } from './schedswitch/TabPaneSchedSwitch';
22import { TabPaneBinderDataCut } from './binder/TabPaneBinderDataCut';
23import { TabPaneFreqDataCut } from './frequsage/TabPaneFreqDataCut';
24import { TabPaneFreqStatesDataCut } from './states/TabPaneFreqStatesDataCut';
25import { TabPaneGpufreqDataCut } from './gpufreq/TabPaneGpufreqDataCut';
26import { TraceSheet } from '../base/TraceSheet';
27
28@element('tabpane-datacut')
29export class TabPaneDataCut extends BaseElement {
30  private currentSelection: SelectionParam | undefined;
31  private tabSelector: LitSelect | undefined | null;
32  private tabContainer: HTMLDivElement | undefined | null;
33  private currentTabKey: string | undefined;
34  private currentTabPane: any;
35  private tabMap: Map<string, any> = new Map<string, any>();
36  private traceSheetEl: TraceSheet | undefined | null;
37
38  set data(dataCutSelection: SelectionParam | any) {
39    if (dataCutSelection === this.currentSelection || dataCutSelection === undefined || dataCutSelection == null) {
40      return;
41    }
42    this.currentSelection = dataCutSelection;
43    this.initTabSelectorOptions();
44    this.showTabPane();
45  }
46
47  initTabSheetEl(traceSheet: TraceSheet): void {
48    this.traceSheetEl = traceSheet;
49  }
50
51  showTabPane(): void {
52    if (this.currentTabPane) {
53      this.tabContainer?.removeChild(this.currentTabPane);
54    }
55    if (this.currentTabKey && this.currentSelection) {
56      if (this.tabMap.has(this.currentTabKey)) {
57        this.currentTabPane = this.tabMap.get(this.currentTabKey);
58      } else {
59        let tab = this.createTabBySelector();
60        if (tab) {
61          this.currentTabPane = tab;
62          this.tabMap.set(this.currentTabKey, tab);
63        }
64      }
65      if (this.currentTabPane) {
66        this.tabContainer?.appendChild(this.currentTabPane);
67        this.currentTabPane.data = this.currentSelection;
68      }
69    }
70  }
71
72  createTabBySelector(): any {
73    switch (this.currentTabKey) {
74      case 'Sched Switch':
75        return new TabPaneSchedSwitch();
76      case 'Thread Binder':
77        return new TabPaneBinderDataCut();
78      case 'Cpu Freq':
79        return new TabPaneFreqDataCut();
80      case 'Thread States':
81        let tab = new TabPaneFreqStatesDataCut();
82        tab.initTabSheetEl(this.traceSheetEl!);
83        return tab;
84      case 'Gpu Freq':
85        return new TabPaneGpufreqDataCut();
86      default:
87        return undefined;
88    }
89  }
90
91  initTabSelectorOptions(): void {
92    let options = [];
93    if (this.currentSelection!.threadIds.length > 0) {
94      options.push(
95        ...[
96          {
97            name: 'Sched Switch',
98          },
99          {
100            name: 'Thread Binder',
101          },
102          {
103            name: 'Cpu Freq',
104          },
105          {
106            name: 'Thread States',
107          },
108        ]
109      );
110    }
111    if (
112      this.currentSelection!.clockMapData.size > 0 &&
113      this.currentSelection!.clockMapData.has('gpufreq Frequency') === true
114    ) {
115      options.push({
116        name: 'Gpu Freq',
117      });
118    }
119    this.currentTabKey = options[0].name;
120    this.tabSelector!.defaultValue = this.currentTabKey || '';
121    this.tabSelector!.value = this.currentTabKey || '';
122    this.tabSelector!.dataSource = options;
123  }
124
125  initElements(): void {
126    this.tabContainer = this.shadowRoot?.querySelector<HTMLDivElement>('#data_cut_tabpane_container');
127    this.tabSelector = this.shadowRoot?.querySelector<LitSelect>('#tab-select');
128    this.tabSelector!.onchange = () => {
129      this.currentTabKey = this.tabSelector!.value;
130      this.showTabPane();
131    };
132  }
133
134  connectedCallback() {
135    super.connectedCallback();
136  }
137
138  initHtml(): string {
139    return `
140        <style>
141        :host{
142            display: flex;
143            flex-direction: column;
144            height: 100%;
145        }
146        .bottom_filter{
147            height: 30px;
148            background: var(--dark-background4,#F2F2F2);
149            border-top: 1px solid var(--dark-border1,#c9d0da);
150            display: flex;
151            align-items: center;
152        }
153        </style>
154        <div id="data_cut_tabpane_container" style="flex-grow: 1"></div>
155        <div class="bottom_filter">
156            <lit-select id="tab-select" style="margin-left: 10px" placeholder="please choose"></lit-select>
157        </div>
158        `;
159  }
160}
161