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 { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { GpuCounter, SelectionParam } from '../../../../bean/BoxSelection'; 19import { ns2x, Rect } from '../../../../database/ui-worker/ProcedureWorkerCommon'; 20import { SpSystemTrace } from '../../../SpSystemTrace'; 21import { TraceRow } from '../../base/TraceRow'; 22import { TraceSheet } from '../../base/TraceSheet'; 23import { Flag } from '../../timer-shaft/Flag'; 24import { resizeObserver } from '../SheetUtils'; 25 26@element('tabpane-gpu-counter-selection') 27export class TabPaneGpuCounterSelection extends BaseElement { 28 private gpuCounterCounterTbl: LitTable | null | undefined; 29 private clockCounterSource: Array<GpuCounter> = []; 30 private traceSheetEl: TraceSheet | undefined | null; 31 private spSystemTrace: SpSystemTrace | undefined | null; 32 33 set data(gpuCounterValue: SelectionParam) { 34 //@ts-ignore 35 this.gpuCounterCounterTbl?.shadowRoot?.querySelector('.table')?.style?.height = 36 this.parentElement!.clientHeight - 45 + 'px'; 37 this.getCounterData(gpuCounterValue).then(); 38 } 39 40 async getCounterData(gpuCounterValue: SelectionParam): Promise<void> { 41 let collect = gpuCounterValue.gpuCounter; 42 let dataSource: Array<GpuCounter> = []; 43 collect.forEach((it) => { 44 let selectData = new GpuCounter(); 45 //@ts-ignore 46 selectData.startNS = it.startNS; 47 //@ts-ignore 48 selectData.height = it.height; 49 //@ts-ignore 50 selectData.dur = it.dur; 51 //@ts-ignore 52 selectData.type = it.type; 53 //@ts-ignore 54 selectData.frame = it.frame; 55 //@ts-ignore 56 selectData.startTime = it.startTime; 57 dataSource.push(selectData); 58 }); 59 this.clockCounterSource = dataSource; 60 this.gpuCounterCounterTbl!.recycleDataSource = dataSource; 61 } 62 63 initElements(): void { 64 this.gpuCounterCounterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter'); 65 this.spSystemTrace = document 66 .querySelector('body > sp-application') 67 ?.shadowRoot?.querySelector<SpSystemTrace>('#sp-system-trace'); 68 this.traceSheetEl = this.spSystemTrace?.shadowRoot?.querySelector('.trace-sheet'); 69 this.gpuCounterCounterTbl!.addEventListener('column-click', (event) => { 70 // @ts-ignore 71 this.sortByColumn(event.detail.key, event.detail.sort); 72 }); 73 this.addRowClickEventListener(this.gpuCounterCounterTbl!); 74 this.gpuCounterCounterTbl?.addEventListener('mouseout', () => { 75 this.refreshTable(); 76 }); 77 } 78 79 refreshTable(): void { 80 if (this.traceSheetEl) { 81 this.traceSheetEl.systemLogFlag = undefined; 82 this.spSystemTrace?.refreshCanvas(false); 83 } 84 } 85 86 addRowClickEventListener(table: LitTable): void { 87 table.addEventListener('row-hover', (evt) => { 88 // @ts-ignore 89 const data = evt.detail.data; 90 if (data) { 91 let pointX: number = ns2x( 92 data.startNS - data.startTime || 0, 93 TraceRow.range!.startNS, 94 TraceRow.range!.endNS, 95 TraceRow.range!.totalNS, 96 new Rect(0, 0, TraceRow.FRAME_WIDTH, 0) 97 ); 98 this.traceSheetEl!.systemLogFlag = new Flag( 99 Math.floor(pointX), 100 0, 101 0, 102 0, 103 data.startNS - data.startTime, 104 '#666666', 105 '', 106 true, 107 '' 108 ); 109 } 110 this.spSystemTrace?.refreshCanvas(false); 111 }); 112 } 113 114 connectedCallback(): void { 115 super.connectedCallback(); 116 resizeObserver(this.parentElement!, this.gpuCounterCounterTbl!); 117 } 118 119 initHtml(): string { 120 return ` 121 <style> 122 .gpu-counter-label{ 123 margin-bottom: 5px; 124 } 125 :host{ 126 padding: 10px 10px; 127 display: flex; 128 flex-direction: column; 129 } 130 </style> 131 <lit-table id="tb-counter" style="height: auto"> 132 <lit-table-column order title="type" data-index="type" key="type" align="flex-start" width="20%"> 133 </lit-table-column> 134 <lit-table-column order title="timestamp(μs)" data-index="startNS" key="startNS" align="flex-start" width="20%"> 135 </lit-table-column> 136 <lit-table-column data-index="height" order title="value" key="height" align="flex-start" width="1fr"> 137 </lit-table-column> 138 </lit-table> 139 `; 140 } 141 142 sortByColumn(sortColumn: string, sortType: number): void { 143 let key = sortColumn; 144 let type = sortType; 145 let arr = Array.from(this.clockCounterSource); 146 arr.sort((gpuCounterLeftData, gpuCounterRightData): number => { 147 if (key === 'startNS' || type === 0) { 148 return (type === 1 ? 1 : -1) * (gpuCounterLeftData.startNS - gpuCounterRightData.startNS); 149 } else if (key === 'height') { 150 return (type === 1 ? 1 : -1) * (gpuCounterLeftData.height - gpuCounterRightData.height); 151 } else { 152 return 0; 153 } 154 }); 155 this.gpuCounterCounterTbl!.recycleDataSource = arr; 156 } 157} 158