diff --git a/ide/src/base-ui/table/LitPageTable.ts b/ide/src/base-ui/table/LitPageTable.ts index 0e78442e89d909111d41360aedcadbbbc3c7246a..5bf5f914b887e579f5f897944dbfaf7a201d1067 100644 --- a/ide/src/base-ui/table/LitPageTable.ts +++ b/ide/src/base-ui/table/LitPageTable.ts @@ -385,7 +385,7 @@ export class LitPageTable extends BaseElement { height: 15px; } .mouse-select{ - background-color: var(--dark-background6,#a2c4ed); + background-color: var(--dark-background6,#DEEDFF); } .mouse-in{ background-color: var(--dark-background6,#DEEDFF); diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts index c239c771ad1445101cd5e8323b38bb6bf2d9ec4c..a85f196ed5583b3a44f94bb7d9c39898045d0b88 100644 --- a/ide/src/base-ui/table/lit-table.ts +++ b/ide/src/base-ui/table/lit-table.ts @@ -255,7 +255,7 @@ export class LitTable extends HTMLElement { background: var(--dark-background1,#f5f5f5) } .mouse-select{ - background-color: var(--dark-background6,#a2c4ed); + background-color: var(--dark-background6,#DEEDFF); } .mouse-in{ background-color: var(--dark-background6,#DEEDFF); diff --git a/ide/src/trace/bean/BoxSelection.ts b/ide/src/trace/bean/BoxSelection.ts index 4346a22b8b9c003698f3b968f4f297b600382d85..9301a08f0b9d9da8304e7565ac8e3652d98ee8fe 100644 --- a/ide/src/trace/bean/BoxSelection.ts +++ b/ide/src/trace/bean/BoxSelection.ts @@ -134,7 +134,8 @@ export class SelectionData { wallDuration: number = 0; wallDurationFormat: string = ''; avgDuration: string = ''; - maxDuration: string = ''; + maxDuration: number = 0; + maxDurationFormat: string = ''; occurrences: number = 0; state: string = ''; trackId: number = 0; @@ -148,7 +149,6 @@ export class SelectionData { max: string = ''; stateJX: string = ''; cpu: number = 0; - recordStartNs: number = 0; leftNs: number = 0; rightNs: number = 0; diff --git a/ide/src/trace/bean/KeyPathStruct.ts b/ide/src/trace/bean/KeyPathStruct.ts new file mode 100644 index 0000000000000000000000000000000000000000..c524769ad0c5cf2a0d2db53c9d854f1e4b19e210 --- /dev/null +++ b/ide/src/trace/bean/KeyPathStruct.ts @@ -0,0 +1,25 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export class KeyPathStruct { + tid: number; + threadName: string; + tsArray: Array; + + constructor(tid: number, threadName: string, tsArray: Array) { + this.tid = tid; + this.threadName = threadName; + this.tsArray = tsArray; + } +} diff --git a/ide/src/trace/bean/MarkStruct.ts b/ide/src/trace/bean/MarkStruct.ts index 08e089ca9a8b156d6ad784d7bd2648b149d4edc6..c88df66d5a2f9c56acc042182f476b1d067697b8 100644 --- a/ide/src/trace/bean/MarkStruct.ts +++ b/ide/src/trace/bean/MarkStruct.ts @@ -19,7 +19,7 @@ export class MarkStruct { endTime: number | undefined; colorEl: HTMLInputElement | undefined; text: HTMLInputElement | undefined; - operate: HTMLButtonElement | undefined; +operate: HTMLButtonElement | undefined; isSelected: boolean = false; constructor( operate: HTMLButtonElement, diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts index 8f1517fdbad9ade0370756291ddc9aca4f2d805e..89e711aa928b8cc0e671c65c3c670360fbdd4096 100644 --- a/ide/src/trace/component/SpHelp.ts +++ b/ide/src/trace/component/SpHelp.ts @@ -127,7 +127,7 @@ export class SpHelp extends BaseElement { title: 'Native Memory抓取和展示说明', icon: '', clickHandler: function (item: MenuItem) { - console.log('22222') + console.log('22222'); SpStatisticsHttpUtil.addOrdinaryVisitAction({ event: 'native', action: 'help_doc', @@ -347,8 +347,6 @@ export class SpHelp extends BaseElement { }, }, - - { title: 'HiSystemEvent抓取和展示说明', icon: '', @@ -406,7 +404,7 @@ export class SpHelp extends BaseElement { title: 'Ability Monitor抓取和展示说明', icon: '', clickHandler: function (item: MenuItem) { - console.log('444444') + console.log('444444'); SpStatisticsHttpUtil.addOrdinaryVisitAction({ event: 'ability', action: 'help_doc', diff --git a/ide/src/trace/component/SpQuerySQL.ts b/ide/src/trace/component/SpQuerySQL.ts index 1b3bbf02314073728920b6cf38c3f752809cb5c4..4642ff926794f1bce9217e1ef4292ed68b62df35 100644 --- a/ide/src/trace/component/SpQuerySQL.ts +++ b/ide/src/trace/component/SpQuerySQL.ts @@ -63,6 +63,7 @@ export class SpQuerySQL extends BaseElement { }); let closeButtonEl = this.shadowRoot?.querySelector('#close-button') as HTMLButtonElement; closeButtonEl.addEventListener('click', () => { + this.pagination!.style.display = 'none'; this.querySize!.textContent = 'Query result - 0 counts.'; this.queryTableEl!.dataSource = []; this.response!.innerHTML = ''; diff --git a/ide/src/trace/component/SpRecordTrace.ts b/ide/src/trace/component/SpRecordTrace.ts index 9291412085972f270eae8c5d5e8394ffb62c4ecb..bd4190c25be884fb96ac5208f2357491c6daaade 100644 --- a/ide/src/trace/component/SpRecordTrace.ts +++ b/ide/src/trace/component/SpRecordTrace.ts @@ -2220,7 +2220,7 @@ export class SpRecordTrace extends BaseElement { nativeConfig.sampleInterval = this.spAllocations!.sample_interval; } } - if (this.spAllocations!.expandPids.length > 0) { + if (this.spAllocations!.expandPids.length > 1) { nativeConfig.expandPids = this.spAllocations!.expandPids.splice(0, maxProcessSize); } let nativePluginConfig: ProfilerPluginConfig = { diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index b7cd2be0d5debac1148dd6ed4b5b66dbd6d0719d..2de3499312f183f627db7bcdf9f40a8146a1174f 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -23,8 +23,6 @@ import { querySceneSearchFunc, querySearchFunc, threadPool, - querySfVSyncData, - querySingleVSyncData } from '../database/SqlLite.js'; import { RangeSelectStruct, TraceRow } from './trace/base/TraceRow.js'; import { TimerShaftElement } from './trace/TimerShaftElement.js'; @@ -51,7 +49,6 @@ import { ns2xByTimeShaft, PairPoint, Rect, - drawVsync } from '../database/ui-worker/ProcedureWorkerCommon.js'; import { SpChartManager } from './chart/SpChartManager.js'; import { CpuStruct, WakeupBean } from '../database/ui-worker/ProcedureWorkerCPU.js'; @@ -109,11 +106,27 @@ import { HiPerfCallChartStruct } from '../database/ui-worker/ProcedureWorkerHiPe import { type HiSysEventStruct } from '../database/ui-worker/ProcedureWorkerHiSysEvent.js'; import { InitAnalysis } from '../database/logic-worker/ProcedureLogicWorkerCommon.js'; import { type SpKeyboard } from '../component/SpKeyboard.js'; +import { drawVSync, enableVSync, setVSyncDisable } from './chart/VSync.js'; function dpr() { return window.devicePixelRatio || 1; } - +//节流处理 +function throttle(fn: any, t: number, ev: any): any { + let timer: any = null; + return function () { + if (!timer) { + timer = setTimeout(function () { + if (ev) { + fn(ev); + } else { + fn(); + } + timer = null; + }, t); + } + }; +} export class CurrentSlicesTime { startTime: number | undefined; @@ -187,11 +200,6 @@ export class SpSystemTrace extends BaseElement { private expandRowList: Array> = []; private _slicesList: Array = []; private _flagList: Array = []; - private _frameList: Array = []; - private _isVsync: boolean = false; - private queryFunData: Array = []; - private querydbData: Array = []; - private singleVSyncData: Array = []; set snapshotFile(data: FileInfo) { this.snapshotFiles = data; @@ -204,6 +212,7 @@ export class SpSystemTrace extends BaseElement { set flagList(list: Array) { this._flagList = list; } + //节流处理 throttle(fn: Function, t: number, ev?: any): Function { let timerId: any = null; @@ -238,53 +247,7 @@ export class SpSystemTrace extends BaseElement { }, ms); this.times.add(timerId); } - } - } - - async makeVsyncLine() { - if (this._isVsync) { - const range = this.timerShaftEL?.rangeRuler?.range; - const totalTime = range!.endNS - range!.startNS; - const totalHeight = this.canvasPanel!.clientHeight; - const drawData = []; - if (this.singleVSyncData.length === 0) { - if (this.querydbData.length === 0) { - this.querydbData = await querySfVSyncData(); - } - } else { - if (this.queryFunData.length === 0) { - this.queryFunData = await querySingleVSyncData(); - } - for (let i = 0; i < this.queryFunData.length; i++) { - this.queryFunData[i].color = '#808080'; - } - } - let allShowData = this.querydbData.length > 0 ? this.querydbData.filter((data: any) => data.startTime > range!.startNS && data.startTime < range!.endNS) : this.queryFunData.filter((data: any) => data.startTime > range!.startNS && data.startTime < range!.endNS); - for (let i = 0; i < allShowData.length; i++) { - let data = allShowData[i]; - const x1 = ns2x(data.startTime, range!.startNS, range!.endNS, totalTime, this.timerShaftEL!.sportRuler!.frame); - let x0 = 0; - if (i === allShowData.length - 1) { - x0 = ns2x(range!.endNS, range!.startNS, range!.endNS, totalTime, this.timerShaftEL!.sportRuler!.frame); - } else { - x0 = ns2x(allShowData[i + 1].startTime, range!.startNS, range!.endNS, totalTime, this.timerShaftEL!.sportRuler!.frame); - } - if ((data.value && data.value === 1) || data.color) { - const x = x1; - const y = 0; - const width = x0 - x1; - const height = totalHeight; - data.frame = new Rect(x, y, width, height); - } - if (data.color && i % 2) { - data.color = '#ffffff' - } - drawData.push(data); - } - this.refreshCanvas(true, '', drawData); - } else { - this.refreshCanvas(true, '', []) - } + }; } addPointPair(startPoint: PairPoint, endPoint: PairPoint) { @@ -399,7 +362,7 @@ export class SpSystemTrace extends BaseElement { } cpuFavoriteRow!.setAttribute('collect-type', ''); let replaceRow = document.createElement('div'); - replaceRow.setAttribute('row-id', cpuFavoriteRow.rowId + '-' + cpuFavoriteRow.rowType); + replaceRow.setAttribute('row-id', `${cpuFavoriteRow.rowId}-${cpuFavoriteRow.rowType}`); replaceRow.setAttribute('type', 'replaceRow'); replaceRow.setAttribute('row-parent-id', cpuFavoriteRow.rowParentId); replaceRow.style.display = 'none'; @@ -818,8 +781,8 @@ export class SpSystemTrace extends BaseElement { let isIntersect = (filterFunc: FuncStruct, rangeData: RangeSelectStruct) => Math.max(filterFunc.startTs! + filterFunc.dur!, rangeData!.endNS || 0) - - Math.min(filterFunc.startTs!, rangeData!.startNS || 0) < - filterFunc.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0) && + Math.min(filterFunc.startTs!, rangeData!.startNS || 0) < + filterFunc.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0) && filterFunc.funName!.indexOf('H:Task ') >= 0; let taskData = it.dataList.filter((taskData: FuncStruct) => { taskData!.tid = parseInt(it.rowId!); @@ -1204,7 +1167,7 @@ export class SpSystemTrace extends BaseElement { } else if (it.rowType == TraceRow.ROW_TYPE_JANK) { let isIntersect = (filterJank: JanksStruct, rangeData: RangeSelectStruct) => Math.max(filterJank.ts! + filterJank.dur!, rangeData!.endNS || 0) - - Math.min(filterJank.ts!, rangeData!.startNS || 0) < + Math.min(filterJank.ts!, rangeData!.startNS || 0) < filterJank.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0); if (it.name == 'Actual Timeline') { selection.jankFramesData = []; @@ -1287,7 +1250,7 @@ export class SpSystemTrace extends BaseElement { } else if (it.rowType == TraceRow.ROW_TYPE_FRAME_ANIMATION) { let isIntersect = (animationStruct: FrameAnimationStruct, selectStruct: RangeSelectStruct) => Math.max(animationStruct.startTs! + animationStruct.dur!, selectStruct!.endNS || 0) - - Math.min(animationStruct.startTs!, selectStruct!.startNS || 0) < + Math.min(animationStruct.startTs!, selectStruct!.startNS || 0) < animationStruct.dur! + (selectStruct!.endNS || 0) - (selectStruct!.startNS || 0); let frameAnimationList = it.dataList.filter((frameAnimationBean: FrameAnimationStruct) => { return isIntersect(frameAnimationBean, TraceRow.rangeSelectObject!); @@ -1384,15 +1347,6 @@ export class SpSystemTrace extends BaseElement { } this.timerShaftEL!.selectionList.push(selection); // 保持选中对象，为后面的再次选中该框选区域做准备。 this.selectionParam = selection; - - let currentRangeTid: Array = this.selectionParam.funTids - // 如果只框选了一个方法行 - if (currentRangeTid.length === 1) { - TraceRow.currentRowId = currentRangeTid[0] - setTimeout(() => { - this.refreshCanvas(true) - }, 50); - } }; // @ts-ignore new ResizeObserver((entries) => { @@ -1476,7 +1430,7 @@ export class SpSystemTrace extends BaseElement { window.subscribe(window.SmartEvent.UI.SliceMark, (data) => { this.sliceMarkEventHandler(data); }); - window.subscribe(window.SmartEvent.UI.TraceRowComplete, (tr) => { }); + window.subscribe(window.SmartEvent.UI.TraceRowComplete, (tr) => {}); window.subscribe(window.SmartEvent.UI.RefreshCanvas, () => { this.refreshCanvas(false); }); @@ -1735,14 +1689,10 @@ export class SpSystemTrace extends BaseElement { } // refresh main canvas and favorite canvas - refreshCanvas(cache: boolean, from?: string, frameList?: any[] | undefined) { + refreshCanvas(cache: boolean, from?: string) { if (this.visibleRows.length == 0) { return; } - if (frameList) { - this._frameList = []; - this._frameList.push(...frameList); - } //clear main canvas this.canvasPanelCtx?.clearRect(0, 0, this.canvasPanel!.offsetWidth, this.canvasPanel!.offsetHeight); this.favoriteChartListEL?.clearRect(); @@ -1827,29 +1777,7 @@ export class SpSystemTrace extends BaseElement { this.timerShaftEL! ); this.favoriteChartListEL?.drawLogsLineSegment(this.traceSheetEL!.systemLogFlag, this.timerShaftEL!); - //---------------------------新增代码开始-------------------------- - if (this._frameList.length > 0) { - for (let i = 0; i < this._frameList.length; i++) { - if (this._frameList[i].frame) { - drawVsync( - this.canvasPanelCtx, - TraceRow.range!.startNS, - TraceRow.range!.endNS, - TraceRow.range!.totalNS, - { - x: this._frameList[i].frame!.x!, - y: this._frameList[i].frame!.y!, - width: this._frameList[i].frame!.width!, - height: this.canvasPanel!.clientHeight! - } as Rect, - this._frameList[i]!.color! - ); - } - } - } - - //---------------------------新增代码结束-------------------------- // Draw the connection curve if (this.linkNodes) { drawLinkLines( @@ -1866,6 +1794,11 @@ export class SpSystemTrace extends BaseElement { this.favoriteChartListEL!.clientHeight ); } + drawVSync(this.canvasPanelCtx!, this.timerShaftEL?.canvas?.clientWidth || 0, canvasHeight); + this.favoriteChartListEL?.drawVSync( + this.timerShaftEL?.canvas?.clientWidth || 0, + this.favoriteChartListEL!.clientHeight + ); } documentOnMouseDown = (ev: MouseEvent) => { @@ -1875,13 +1808,16 @@ export class SpSystemTrace extends BaseElement { ev.stopPropagation(); return; } - this.isMouseLeftDown = true; - if (ev.ctrlKey) { - ev.preventDefault(); - this.style.cursor = 'move'; - this.mouseCurrentPosition = ev.clientX; - return; + if (ev.button === 0) { + this.isMouseLeftDown = true; + if (ev.ctrlKey) { + ev.preventDefault(); + this.style.cursor = 'move'; + this.mouseCurrentPosition = ev.clientX; + return; + } } + TraceRow.isUserInteraction = true; if (this.isMouseInSheet(ev)) return; this.observerScrollHeightEnable = false; @@ -1937,11 +1873,6 @@ export class SpSystemTrace extends BaseElement { this.offsetMouse = 0; this.mouseCurrentPosition = 0; this.style.cursor = 'default'; - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) return; } TraceRow.isUserInteraction = false; @@ -1961,7 +1892,7 @@ export class SpSystemTrace extends BaseElement { // 如果没有找到帽子，则绘制一个旗子 let time = Math.round( (x * (TraceRow.range?.endNS! - TraceRow.range?.startNS!)) / this.timerShaftEL!.canvas!.offsetWidth + - TraceRow.range?.startNS! + TraceRow.range?.startNS! ); this.timerShaftEL!.sportRuler!.drawTriangle(time, 'squre'); } @@ -1987,6 +1918,7 @@ export class SpSystemTrace extends BaseElement { documentOnMouseOut = (ev: MouseEvent) => { if (!this.loadTraceCompleted) return; TraceRow.isUserInteraction = false; + this.isMouseLeftDown = false; if (this.isMouseInSheet(ev)) return; if (ev.offsetX > this.timerShaftEL!.canvas!.offsetLeft) { this.rangeSelect.mouseOut(ev); @@ -2038,11 +1970,6 @@ export class SpSystemTrace extends BaseElement { if (keyPressWASD) { this.keyPressMap.set(keyPress, true); this.hoverFlag = null; - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) } this.timerShaftEL!.documentOnKeyPress(ev, this.currentSlicesTime); if (keyPress === 'f') { @@ -2150,13 +2077,13 @@ export class SpSystemTrace extends BaseElement { this.timerShaftEL?.setSlicesMark( FrameAnimationStruct.selectFrameAnimationStruct.startTs || 0, (FrameAnimationStruct.selectFrameAnimationStruct.startTs || 0) + - (FrameAnimationStruct.selectFrameAnimationStruct.dur || 0) + (FrameAnimationStruct.selectFrameAnimationStruct.dur || 0) ); } else if (JsCpuProfilerStruct.selectJsCpuProfilerStruct) { this.timerShaftEL?.setSlicesMark( JsCpuProfilerStruct.selectJsCpuProfilerStruct.startTime || 0, (JsCpuProfilerStruct.selectJsCpuProfilerStruct.startTime || 0) + - (JsCpuProfilerStruct.selectJsCpuProfilerStruct.totalTime || 0) + (JsCpuProfilerStruct.selectJsCpuProfilerStruct.totalTime || 0) ); } else { this.slicestime = this.timerShaftEL?.setSlicesMark(); @@ -2194,7 +2121,7 @@ export class SpSystemTrace extends BaseElement { ); } } - } + }; documentOnKeyUp = (ev: KeyboardEvent) => { if (this.times.size > 0) { @@ -2204,31 +2131,20 @@ export class SpSystemTrace extends BaseElement { } if (ev.key.toLocaleLowerCase() === '?') { - document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'visible'; + document + .querySelector('body > sp-application')! + .shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'visible'; } if (!this.loadTraceCompleted) return; let keyPress = ev.key.toLocaleLowerCase(); - if (keyPress === 'v') { - this._isVsync = !this._isVsync; - if (this._isVsync) { - this.makeVsyncLine(); - } else { - this.refreshCanvas(true, '', []) - } - - } + enableVSync(false, keyPress, () => this.refreshCanvas(true)); if (keyPress === 'w' || keyPress === 'a' || keyPress === 's' || keyPress === 'd') { this.keyPressMap.set(keyPress, false); - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) } TraceRow.isUserInteraction = false; this.observerScrollHeightEnable = false; this.keyboardEnable && this.timerShaftEL!.documentOnKeyUp(ev); - if (ev.code == 'Enter') { + if (ev.code === 'Enter') { document.removeEventListener('keydown', this.documentOnKeyDown); if (ev.shiftKey) { this.dispatchEvent( @@ -3783,6 +3699,9 @@ export class SpSystemTrace extends BaseElement { this.rowsPaneEL?.addEventListener('scroll', this.rowsElOnScroll, { passive: true, }); + this.favoriteChartListEL?.addEventListener('scroll', this.favoriteRowsElOnScroll, { + passive: true, + }); /** * 监听document的mousemove事件 坐标通过换算后找到当前鼠标所在的trace-row组件，将坐标传入 */ @@ -3808,11 +3727,6 @@ export class SpSystemTrace extends BaseElement { (e) => { if (e.ctrlKey) { if (e.deltaY > 0) { - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) e.preventDefault(); e.stopPropagation(); let eventS = new KeyboardEvent('keypress', { @@ -3826,11 +3740,6 @@ export class SpSystemTrace extends BaseElement { }, 200); } if (e.deltaY < 0) { - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) e.preventDefault(); e.stopPropagation(); let eventW = new KeyboardEvent('keypress', { @@ -3969,6 +3878,7 @@ export class SpSystemTrace extends BaseElement { disconnectedCallback() { this.timerShaftEL?.removeEventListener('range-change', this.timerShaftELRangeChange); this.rowsPaneEL?.removeEventListener('scroll', this.rowsElOnScroll); + this.favoriteChartListEL?.removeEventListener('scroll', this.favoriteRowsElOnScroll); this.removeEventListener('mousemove', this.documentOnMouseMove); this.removeEventListener('click', this.documentOnClick); this.removeEventListener('mousedown', this.documentOnMouseDown); @@ -4458,10 +4368,6 @@ export class SpSystemTrace extends BaseElement { } reset(progress: Function | undefined | null) { - this._frameList = []; - this.queryFunData = []; - this.querydbData = []; - this._isVsync = false; this.visibleRows.length = 0; this.tipEL!.style.display = 'none'; this.canvasPanelCtx?.clearRect(0, 0, this.canvasPanel!.clientWidth, this.canvasPanel!.offsetHeight); @@ -4499,15 +4405,13 @@ export class SpSystemTrace extends BaseElement { procedurePool.clearCache(); Utils.clearData(); InitAnalysis.getInstance().isInitAnalysis = true; - procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => { }); - procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => { }); + procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => {}); + procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => {}); this.times.clear(); + setVSyncDisable(); } init = async (param: { buf?: ArrayBuffer; url?: string }, wasmConfigUri: string, progress: Function) => { - setTimeout(async () => { - this.singleVSyncData = await querySingleVSyncData(); - }, 500) progress('Load database', 6); this.rowsPaneEL!.scroll({ top: 0, diff --git a/ide/src/trace/component/chart/FrameChart.ts b/ide/src/trace/component/chart/FrameChart.ts index a1a6d751f0625ef4e876b9127288a5b670ea3e33..780f5095383669e47ecc556ac8f681594a4102d3 100644 --- a/ide/src/trace/component/chart/FrameChart.ts +++ b/ide/src/trace/component/chart/FrameChart.ts @@ -890,7 +890,7 @@ export class FrameChart extends BaseElement { private listenerResize(): void { new ResizeObserver(() => { this.resizeChange(); - if (this.rootNode && this.canvas.clientWidth !== 0) { + if (this.rootNode && this.canvas.clientWidth !== 0 && this.xPoint === 0) { this.rootNode.frame!.width = this.canvas.clientWidth; } }).observe(this); diff --git a/ide/src/trace/component/chart/SpChartManager.ts b/ide/src/trace/component/chart/SpChartManager.ts index ab9f3a9072b3d78edcf26bccfcbef46b2ad1aebe..a8fa7c6f7162178c4390456f097393c2fbe1205d 100644 --- a/ide/src/trace/component/chart/SpChartManager.ts +++ b/ide/src/trace/component/chart/SpChartManager.ts @@ -49,6 +49,7 @@ import { MemoryConfig } from '../../bean/MemoryConfig.js'; import { FlagsConfig } from '../SpFlags.js'; import { SpLogChart } from './SpLogChart.js'; import { SpHiSysEventChart } from './SpHiSysEventChart.js'; +import {setVSyncData} from './VSync.js'; export class SpChartManager { static APP_STARTUP_PID_ARR: Array = []; @@ -170,6 +171,8 @@ export class SpChartManager { await this.process.init(); info('Process Data initialized'); progress('display', 95); + await setVSyncData(); + progress('SingleVSync', 96); } async importSoFileUpdate() { diff --git a/ide/src/trace/component/chart/SpFrameTimeChart.ts b/ide/src/trace/component/chart/SpFrameTimeChart.ts index 6984178deb0154f91cd4437f8e6a48c22b075c09..73c0938a2a99354401bcc1fb2debd4d9d1b84ba1 100644 --- a/ide/src/trace/component/chart/SpFrameTimeChart.ts +++ b/ide/src/trace/component/chart/SpFrameTimeChart.ts @@ -29,7 +29,6 @@ import { } from '../../database/SqlLite.js'; import { JanksStruct } from '../../bean/JanksStruct.js'; import { ns2xByTimeShaft, type PairPoint } from '../../database/ui-worker/ProcedureWorkerCommon.js'; -import { type LitPopover } from '../../../base-ui/popover/LitPopoverV.js'; import { FrameDynamicRender, FrameDynamicStruct } from '../../database/ui-worker/ProcedureWorkerFrameDynamic.js'; import { FrameAnimationRender, FrameAnimationStruct } from '../../database/ui-worker/ProcedureWorkerFrameAnimation.js'; import { type BaseStruct } from '../../bean/BaseStruct.js'; @@ -37,6 +36,7 @@ import { FrameSpacingRender, FrameSpacingStruct } from '../../database/ui-worker import { FlagsConfig, type Params } from '../SpFlags.js'; import { type AnimationRanges, type DeviceStruct } from '../../bean/FrameComponentBean.js'; import { type EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU.js'; +import { TreeItemData } from '../../../base-ui/tree/LitTree.js'; export class SpFrameTimeChart { private trace: SpSystemTrace; @@ -226,26 +226,7 @@ export class SpFrameTimeChart { let frameChart: TraceRow = TraceRow.skeleton(); let labelName = frameChart.shadowRoot?.querySelector('.name') as HTMLLabelElement; labelName.style.marginRight = '77px'; - let systemPopover = this.addSystemConfigButton(frameChart, nameArr); - systemPopover.style.zIndex = '101'; - let radioList = systemPopover.querySelectorAll('.radio'); - let divElement = systemPopover.querySelectorAll('.option'); - radioList[0].checked = true; - divElement.forEach((divEl, index) => { - divEl.addEventListener('click', () => { - if (radioList[index]) { - radioList[index].checked = true; - frameChart.name = radioList[index].value; - frameChart.childrenList.forEach((childrenRow) => { - childrenRow.setAttribute('model-name', `${radioList[index].value}`); - }); - systemPopover.blur(); - TraceRow.range!.refresh = true; - this.trace.refreshCanvas(true); - this.trace.clickEmptyArea(); - } - }); - }); + this.addSystemConfigButton(frameChart, nameArr, 'model-name', true); frameChart.rowId = 'frame'; frameChart.rowType = TraceRow.ROW_TYPE_FRAME; frameChart.rowHidden = !processRow.expansion; @@ -377,8 +358,8 @@ export class SpFrameTimeChart { name: string; }[] = [{ name: 'x' }, { name: 'y' }, { name: 'width' }, { name: 'height' }, { name: 'alpha' }]; let dynamicCurveRow: TraceRow = TraceRow.skeleton(); - let systemPopover = this.addSystemConfigButton(dynamicCurveRow, systemConfigList); - this.initSystemConfig(systemPopover, dynamicCurveRow); + this.addSystemConfigButton(dynamicCurveRow, systemConfigList, 'model-type'); + dynamicCurveRow.setAttribute('model-type', systemConfigList[0].name); dynamicCurveRow.rowId = 'animation-Effect-Curve'; dynamicCurveRow.rowType = TraceRow.ROW_TYPE_FRAME_DYNAMIC; dynamicCurveRow.rowHidden = !frameChart.expansion; @@ -398,9 +379,6 @@ export class SpFrameTimeChart { new Promise((resolve): void => { resolve(frameDynamicCurveData); }); - dynamicCurveRow.favoriteChangeHandler = (): void => { - this.favoriteSelect(systemPopover, dynamicCurveRow); - }; dynamicCurveRow.selectChangeHandler = this.trace.selectChangeHandler; dynamicCurveRow.onThreadHandler = (useCache: boolean): void => { let context: CanvasRenderingContext2D = dynamicCurveRow!.collect @@ -421,36 +399,6 @@ export class SpFrameTimeChart { frameChart.addChildTraceRow(dynamicCurveRow); } - private initSystemConfig(systemPopover: LitPopover, dynamicCurveRow: TraceRow): void { - let radioList = systemPopover.querySelectorAll('.radio'); - let divElement = systemPopover.querySelectorAll('.option'); - radioList[0].checked = true; - dynamicCurveRow.setAttribute('model-type', radioList[0].value); - divElement.forEach((divEl, index) => { - divEl.addEventListener('click', () => { - if (radioList[index]) { - radioList[index].checked = true; - dynamicCurveRow.setAttribute('model-type', `${radioList[index].value}`); - systemPopover.blur(); - TraceRow.range!.refresh = true; - this.trace.refreshCanvas(true); - this.trace.clickEmptyArea(); - } - }); - }); - } - - private favoriteSelect(systemPopover: LitPopover, dynamicCurveRow: TraceRow): void { - let popover = systemPopover.querySelector('.dynamicPopover') as HTMLDivElement; - if (dynamicCurveRow.collect) { - systemPopover.setAttribute('placement', 'right'); - popover.style.display = 'flex'; - } else { - systemPopover.setAttribute('placement', 'bottomLeft'); - popover.style.display = 'block'; - } - } - async initFrameSpacing( nameArr: { name: string }[], frameChart: TraceRow, @@ -539,30 +487,35 @@ export class SpFrameTimeChart { } } - addSystemConfigButton(systemTraceRow: TraceRow, systemConfigList: { name: string }[]): LitPopover { - let rowContent: HTMLDivElement = systemTraceRow.shadowRoot?.querySelector('.describe') as HTMLDivElement; - let systemPopover: LitPopover = document.createElement('lit-popover') as LitPopover; - systemPopover.style.zIndex = '100'; - systemPopover.style.position = 'absolute'; - systemPopover.style.left = '165px'; - systemPopover.style.display = 'flex'; - systemPopover.setAttribute('placement', 'bottomLeft'); - systemPopover.setAttribute('trigger', 'click'); - systemPopover.setAttribute('haveRadio', 'true'); - systemPopover.innerHTML = ` -
- ${systemConfigList - .map( - (it): string => ` -
- ${it.name}
` - ) - .join('')} -
- `; - rowContent.appendChild(systemPopover); - return systemPopover; + addSystemConfigButton( + systemTraceRow: TraceRow, + systemConfigList: { name: string }[], + attributeKey: string, + allowChangeName: boolean = false + ): void { + let componentList: Array = []; + for (let index = 0; index < systemConfigList.length; index++) { + let componentName = systemConfigList[index].name; + componentList.push({ + key: `${componentName}`, + title: `${componentName}`, + checked: index === 0, + }) + } + systemTraceRow.addRowSettingPop(); + systemTraceRow.rowSetting = 'enable'; + systemTraceRow.rowSettingPopoverDirection = 'bottomLeft'; + systemTraceRow.rowSettingList = componentList; + systemTraceRow.onRowSettingChangeHandler = (value: string[]): void => { + if (allowChangeName) { + systemTraceRow.name = value[0]; + } + systemTraceRow.setAttribute(attributeKey, `${value[0]}`); + systemTraceRow.childrenList.forEach((row): void => { + row.setAttribute(attributeKey, `${value[0]}`); + }); + this.trace.refreshCanvas(false); + }; } private frameNoExpandTimeOut( diff --git a/ide/src/trace/component/chart/SpHiPerf.ts b/ide/src/trace/component/chart/SpHiPerf.ts index 2068e512f5504c4f7b46b98a2580928fe1ccf698..3e1d8c91dce77f996b42817bb54cf819cf986109 100644 --- a/ide/src/trace/component/chart/SpHiPerf.ts +++ b/ide/src/trace/component/chart/SpHiPerf.ts @@ -125,6 +125,7 @@ export class SpHiPerf { row.rowParentId = ''; row.folder = true; row.drawType = -2; + row.addRowSettingPop(); row.rowSetting = 'enable'; row.rowSettingPopoverDirection = 'bottomLeft'; row.rowSettingList = [ @@ -269,6 +270,7 @@ export class SpHiPerf { return map; }, new Map()); row.addTemplateTypes('hiperf-callchart'); + row.addRowSettingPop(); row.rowSetting = 'enable'; row.rowSettingList = [ ...cpuData.reverse().map((it: any): { diff --git a/ide/src/trace/component/chart/SpHiSysEnergyChart.ts b/ide/src/trace/component/chart/SpHiSysEnergyChart.ts index 3a3f0dde7a7752b9e9697d7cbed4854fe331959f..6a157667b2795b474b8335203148b46acfc94e91 100644 --- a/ide/src/trace/component/chart/SpHiSysEnergyChart.ts +++ b/ide/src/trace/component/chart/SpHiSysEnergyChart.ts @@ -30,13 +30,13 @@ import { import { info } from '../../../log/Log.js'; import { TraceRow } from '../trace/base/TraceRow.js'; import { BaseStruct } from '../../bean/BaseStruct.js'; -import { LitPopover } from '../../../base-ui/popover/LitPopoverV.js'; import { EnergyAnomalyRender, EnergyAnomalyStruct } from '../../database/ui-worker/ProcedureWorkerEnergyAnomaly.js'; import { EnergySystemStruct, EnergySystemRender } from '../../database/ui-worker/ProcedureWorkerEnergySystem.js'; import { EnergyPowerStruct, EnergyPowerRender } from '../../database/ui-worker/ProcedureWorkerEnergyPower.js'; import { EnergyStateStruct, EnergyStateRender } from '../../database/ui-worker/ProcedureWorkerEnergyState.js'; import { renders } from '../../database/ui-worker/ProcedureWorker.js'; import { EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU.js'; +import { TreeItemData } from '../../../base-ui/tree/LitTree.js'; export class SpHiSysEnergyChart { static app_name: string | null; @@ -133,54 +133,23 @@ export class SpHiSysEnergyChart { SpHiSysEnergyChart.app_name = appNameFromTable[0].string_value; } this.energyTraceRow = TraceRow.skeleton(); - let appNameList = this.energyTraceRow?.shadowRoot!.querySelector('#appNameList'); - let addFlag = false; - appNameList?.addEventListener('click', () => { - let itemDiv = appNameList!.querySelector('div'); - if (!addFlag) { - for (let index = 0; index < appNameFromTable.length; index++) { - let div = document.createElement('div'); - div.setAttribute('style', 'margin-bottom: 5px'); - let appName = appNameFromTable[index].string_value; - // @ts-ignore - let formatAppName = 'appName' + index; - div.setAttribute('id', formatAppName); - let inputId = 'appName' + index + 1; - div.innerHTML = - " '; - itemDiv!.append(div); - let appList = this.energyTraceRow?.shadowRoot!.querySelectorAll( - 'input[type=radio][name=processoption]' - ); - appList!.forEach((appName) => [ - (appName.onclick = (e: MouseEvent) => { - if (appName.checked) { - SpHiSysEnergyChart.app_name = appName.getAttribute('value'); - TraceRow.range!.refresh = true; - // @ts-ignore - appNameList!.visible = false; - this.trace.refreshCanvas(false); - } - }), - ]); - } - addFlag = true; - } - }); - + this.energyTraceRow.addRowSettingPop(); + this.energyTraceRow.rowSetting = 'enable'; + this.energyTraceRow.rowSettingPopoverDirection = 'bottomLeft'; + let nameList: Array = []; + for (let index = 0; index < appNameFromTable.length; index++) { + let appName = appNameFromTable[index].string_value; + nameList.push({ + key: `${appName}`, + title: `${appName}`, + checked: index === 0, + }) + } + this.energyTraceRow.rowSettingList = nameList; + this.energyTraceRow.onRowSettingChangeHandler = (value): void => { + SpHiSysEnergyChart.app_name = value[0]; + this.trace.refreshCanvas(false); + }; this.energyTraceRow.rowId = `energy`; this.energyTraceRow.rowType = TraceRow.ROW_TYPE_ENERGY; this.energyTraceRow.rowParentId = ''; diff --git a/ide/src/trace/component/chart/SpNativeMemoryChart.ts b/ide/src/trace/component/chart/SpNativeMemoryChart.ts index f620975de11d4d744ef921575abc71868309bc73..e28619b23cd6a71d1fabeecfaff78b6d624a12bd 100644 --- a/ide/src/trace/component/chart/SpNativeMemoryChart.ts +++ b/ide/src/trace/component/chart/SpNativeMemoryChart.ts @@ -93,6 +93,7 @@ export class SpNativeMemoryChart { nativeRow.name = `Native Memory (${process})`; nativeRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; nativeRow.selectChangeHandler = this.trace.selectChangeHandler; + nativeRow.addRowSettingPop(); nativeRow.rowSetting = 'enable'; nativeRow.rowSettingPopoverDirection = 'bottomLeft'; nativeRow.rowSettingList = [ diff --git a/ide/src/trace/component/chart/SpVmTrackerChart.ts b/ide/src/trace/component/chart/SpVmTrackerChart.ts index 32ce983cb9fd162a3c38455ba8e86bd503bdd66e..4600b2c7ea2835d9f6f8c45d0d51e66c754a136f 100644 --- a/ide/src/trace/component/chart/SpVmTrackerChart.ts +++ b/ide/src/trace/component/chart/SpVmTrackerChart.ts @@ -247,6 +247,9 @@ export class VmTrackerChart { case 'RSS': keyName = 'resident_size'; break; + case 'Swapped': + keyName = 'swap + swap_pss'; + break; default: keyName = columnName; } @@ -390,6 +393,7 @@ export class VmTrackerChart { ); gpuTotalRow.folderTextLeft = 40; gpuTotalRow.addTemplateTypes('sys-memory'); + gpuTotalRow.addRowSettingPop(); gpuTotalRow.rowSetting = 'enable'; gpuTotalRow.rowSettingList = [ { @@ -464,6 +468,7 @@ export class VmTrackerChart { this.gpuFolder.rowId! ); gpuWindowRow.folderTextLeft = 40; + gpuWindowRow.addRowSettingPop(); gpuWindowRow.rowSetting = 'enable'; gpuWindowRow.rowSettingList = settings; gpuWindowRow.addTemplateTypes('sys-memory'); @@ -479,10 +484,7 @@ export class VmTrackerChart { } }; gpuWindowRow.supplier = () => { - return queryGpuWindowData( - VmTrackerChart.gpuWindow!, - VmTrackerChart.gpuWindowModule - ).then((res) => { + return queryGpuWindowData(VmTrackerChart.gpuWindow!, VmTrackerChart.gpuWindowModule).then((res) => { res.forEach((window, index) => { (window as any).name = `SnapShot ${index}`; }); diff --git a/ide/src/trace/component/chart/VSync.ts b/ide/src/trace/component/chart/VSync.ts new file mode 100644 index 0000000000000000000000000000000000000000..e1450937538f79eb58cd6d46b98fc1089301eec3 --- /dev/null +++ b/ide/src/trace/component/chart/VSync.ts @@ -0,0 +1,144 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { query } from '../../database/SqlLite.js'; +import { TraceRow } from '../trace/base/TraceRow.js'; +interface VSyncData { + startTime: number; + dur: number; + value?: number; +} + +let vSyncDataList: VSyncData[] = []; +let vSyncEnable = false; +let isSingle = false; + +export function setVSyncDisable(): void{ + vSyncEnable = false; +} + +export const querySfVSyncData = (): Promise> => + query( + 'querySfVSyncData', + `SELECT value, c.ts - tb.start_ts startTime + FROM process_measure c, + trace_range tb + WHERE c.filter_id IN (SELECT process_measure_filter.id AS traceId + FROM process_measure_filter + JOIN process USING (ipid) + WHERE process.name = ${ + `'` + + String.fromCharCode(115, 117, 114, 102, 97, 99, 101, 102, 108, 105, 110, 103, 101, 114) + + `'` + } + AND process_measure_filter.name = ${ + `'` + String.fromCharCode(86, 83, 89, 78, 67, 45, 97, 112, 112) + `'` + })` + ); + +export const querySingleVSyncData = (): Promise> => + query( + 'querySingleVSyncData', + `SELECT c.ts - tb.start_ts startTime + FROM callstack c, + trace_range tb + WHERE c.id IN (SELECT callstack.id AS trackId + FROM callstack + JOIN process + WHERE process.name = 'render_service' + AND callstack.name like 'H:GenerateVsyncCount%')` + ); + +/** + * load single vsync data + */ +export async function setVSyncData(): Promise { + let sfvSyncData = await querySfVSyncData(); + if (sfvSyncData.length === 0) { + sfvSyncData = await querySingleVSyncData(); + isSingle = true; + } + sfvSyncData.forEach((it, index, array) => { + if (index < array.length - 1) { + it.dur = array[index + 1].startTime - it.startTime; + } else { + it.dur = (window as any).totalNS - it.startTime; + } + }); + vSyncDataList = sfvSyncData; +} + +/** + * draw chart + */ +export function drawVSync(ctx: CanvasRenderingContext2D, width: number, height: number): void { + if (!vSyncEnable) { + return; + } + function draw(it: VSyncData): void { + let x = ns2x(it.startTime, width); + let x2 = ns2x(it.startTime + it.dur, width); + ctx.fillRect(x, 0, x2 - x, height); + } + ctx.beginPath(); + ctx.fillStyle = '#999999'; + ctx.lineWidth = 1; + ctx.globalAlpha = 0.5; + if (isSingle) { + // 单框架灰白交替 + for (let i = 0; i < vSyncDataList.length; i++) { + if (i % 2 === 1) { + continue; + } + draw(vSyncDataList[i]); + } + } else { + // 双框架绘制vSync 信号为1的数据为灰 + vSyncDataList + ?.filter((it) => it.value === 1) + .forEach((it) => { + draw(it); + }); + } + ctx.stroke(); + ctx.closePath(); +} + +/** + * enable/disable SingleVSync + */ +export function enableVSync(press: boolean, key: string, handler?: Function): void { + if (key.toLocaleLowerCase() === 'v') { + vSyncEnable = !vSyncEnable; + handler?.(); + } +} + +/** + * ns to px + */ +function ns2x(ns: number, width: number): number { + let startNS = TraceRow.range?.startNS || 0; + let endNS = TraceRow.range?.endNS || 0; + if (endNS === 0) { + endNS = (window as any).totalNS; + } + let xSize: number = ((ns - startNS) * width) / (endNS - startNS); + if (xSize < 0) { + xSize = 0; + } else if (xSize > width) { + xSize = width; + } + return xSize; +} diff --git a/ide/src/trace/component/setting/SpHisysEvent.ts b/ide/src/trace/component/setting/SpHisysEvent.ts index ec1a397ae2991cc65362657fc621cc394547ab54..154c68483422de2a68320e020a277bfb797e1444 100644 --- a/ide/src/trace/component/setting/SpHisysEvent.ts +++ b/ide/src/trace/component/setting/SpHisysEvent.ts @@ -53,7 +53,7 @@ export class SpHisysEvent extends BaseElement { } get eventName(): string { - if (this.eventNameInputEL!.value.length > 0) { + if (this.eventNameInputEL!.value.length > 0 && this.eventNameInputEL!.value !== 'ALL-Event') { return this.eventNameInputEL!.value; } return ''; @@ -133,12 +133,22 @@ export class SpHisysEvent extends BaseElement { let eventNameList = Object.keys(eventConfigElement); if (eventNameList?.length > 0 && this.startSamp) { this.nameInputEl!.setAttribute('readonly', 'readonly'); + eventNameList.unshift('ALL-Event'); this.eventNameInputEL!.processData = eventNameList; this.eventNameInputEL!.initData(); } } else { - this.eventNameInputEL!.value = ''; - this.eventNameInputEL!.processData = []; + let currentData: string[] = []; + if (domain === '' || domain === 'ALL-Domain') { + let domainKey = Object.keys(this.eventConfig); + domainKey.forEach(item => { + let currentEvent = this.eventConfig[item]; + let eventList = Object.keys(currentEvent); + currentData.push(...eventList); + }); + currentData.unshift('ALL-Event'); + } + this.eventNameInputEL!.processData = currentData; this.eventNameInputEL!.initData(); } } @@ -237,7 +247,7 @@ export class SpHisysEvent extends BaseElement { Record Domain Name + mode="multiple" canInsert="" title="Select Proces" placement="bottom" placeholder="ALL-Domain" readonly="readonly">
@@ -246,7 +256,7 @@ export class SpHisysEvent extends BaseElement { Record Event Name
+ mode="multiple" canInsert="" title="Select Proces" placement="bottom" placeholder="ALL-Event" readonly="readonly"> diff --git a/ide/src/trace/component/trace/SpChartList.ts b/ide/src/trace/component/trace/SpChartList.ts index aae37cd468898aea993da44d25efb8e032bd0eda..6e8e14a2acc24a2e8ad584623e67a557c3db347c 100644 --- a/ide/src/trace/component/trace/SpChartList.ts +++ b/ide/src/trace/component/trace/SpChartList.ts @@ -31,6 +31,7 @@ import { TimerShaftElement } from './TimerShaftElement.js'; import { CpuStruct } from '../../database/ui-worker/ProcedureWorkerCPU.js'; import { WakeupBean } from '../../bean/WakeupBean.js'; import { LitIcon } from '../../../base-ui/icon/LitIcon.js'; +import { drawVSync } from '../chart/VSync.js'; const maxScale = 0.8; //收藏最大高度为界面最大高度的80% const topHeight = 150; // 顶部cpu使用率部分高度固定为150px @@ -145,7 +146,7 @@ export class SpChartList extends BaseElement { return (this.parentElement!.clientHeight - topHeight) * maxScale; } - getCollectRows(filter?: (row: TraceRow) => boolean) : Array> | [] { + getCollectRows(filter?: (row: TraceRow) => boolean): Array> | [] { if (filter) { return [...this.collectRowList1.filter(filter), ...this.collectRowList2.filter(filter)]; } else { @@ -153,7 +154,7 @@ export class SpChartList extends BaseElement { } } - expandSearchRowGroup(row: TraceRow) : void { + expandSearchRowGroup(row: TraceRow): void { this.updateGroupDisplay(); if (row.collectGroup === SpChartList.COLLECT_G1) { if (!this.collect1Expand) { @@ -172,7 +173,7 @@ export class SpChartList extends BaseElement { this.resizeHeight(); } - getCollectRow(filter: (row: TraceRow) => boolean) : TraceRow | undefined { + getCollectRow(filter: (row: TraceRow) => boolean): TraceRow | undefined { return this.collectRowList1.find(filter) || this.collectRowList2.find(filter); } @@ -214,18 +215,18 @@ export class SpChartList extends BaseElement { this.collect2Expand = true; this.icon1!.style.transform = 'rotateZ(0deg)'; this.icon2!.style.transform = 'rotateZ(0deg)'; - this.collectRowList1.forEach(row => { + this.collectRowList1.forEach((row) => { row.clearMemory(); }); - this.collectRowList2.forEach(row => { + this.collectRowList2.forEach((row) => { row.clearMemory(); }); this.collectRowList1 = []; this.collectRowList2 = []; this.fragmentGroup1 = document.createDocumentFragment(); this.fragmentGroup2 = document.createDocumentFragment(); - this.collectEl1!.innerHTML = '' - this.collectEl2!.innerHTML = '' + this.collectEl1!.innerHTML = ''; + this.collectEl2!.innerHTML = ''; this.updateGroupDisplay(); this.style.height = 'auto'; } @@ -287,7 +288,8 @@ export class SpChartList extends BaseElement { onMouseMove = (ev: MouseEvent): void => { if (this.containPoint(ev)) { - let inResizeArea = this.getBoundingClientRect().bottom > ev.pageY - mouseMoveRange && + let inResizeArea = + this.getBoundingClientRect().bottom > ev.pageY - mouseMoveRange && this.getBoundingClientRect().bottom < ev.pageY + mouseMoveRange; if ((this.isPress && this.canResize) || inResizeArea) { this.style.cursor = 'row-resize'; @@ -397,7 +399,7 @@ export class SpChartList extends BaseElement { } } - hideCollectArea() : void { + hideCollectArea(): void { if (this.collect1Expand) { this.collectRowList1.forEach((row) => this.fragmentGroup1.appendChild(row)); } @@ -409,7 +411,7 @@ export class SpChartList extends BaseElement { this.resizeHeight(); } - showCollectArea() : void { + showCollectArea(): void { if (this.collect1Expand) { this.collectEl1?.appendChild(this.fragmentGroup1); } @@ -425,7 +427,7 @@ export class SpChartList extends BaseElement { this.groupTitle2!.style.display = this.collectRowList2.length === 0 ? 'none' : 'flex'; } - hasCollectRow() : boolean { + hasCollectRow(): boolean { return this.collectRowList2.length > 0 || this.collectRowList1.length > 0; } @@ -499,6 +501,10 @@ export class SpChartList extends BaseElement { drawLinkLines(this.canvasCtx!, nodes, tse, isFavorite, favoriteHeight); } + drawVSync(width: number, height: number) { + drawVSync(this.canvasCtx!, width, height); + } + refreshFavoriteCanvas(): void { this.canvas!.style.width = `${this.clientWidth - 248}px`; this.canvas!.style.left = `248px`; diff --git a/ide/src/trace/component/trace/base/RangeSelect.ts b/ide/src/trace/component/trace/base/RangeSelect.ts index 06220d9270eaea14851468e9fb5a05e97552fdc9..f6c7ebc3d476a290448d353ee8c37997183f7017 100644 --- a/ide/src/trace/component/trace/base/RangeSelect.ts +++ b/ide/src/trace/component/trace/base/RangeSelect.ts @@ -81,17 +81,24 @@ export class RangeSelect { this.selectHandler(this.rangeTraceRow || [], !this.isHover); } //如果只框选了一条泳道，查询H:RSMainThread::DoComposition数据 - if (this.rangeTraceRow?.length === 1) { - querySearchRowFuncData('H:RSMainThread::DoComposition', TraceRow.currentRowId!).then((res) => { - if (res.length) { + let docompositionData: Array = []; + if (this.rangeTraceRow) { + this.rangeTraceRow.forEach((row) => { + row.docompositionList = []; + }); + docompositionData = []; + if (this.rangeTraceRow.length === 1 && this.rangeTraceRow[0]?.getAttribute('row-type') === 'func') { + querySearchRowFuncData( + 'H:RSMainThread::DoComposition', + Number(this.rangeTraceRow[0]?.getAttribute('row-id')), + TraceRow.rangeSelectObject!.startNS!, + TraceRow.rangeSelectObject!.endNS! + ).then((res) => { res.forEach((item) => { - TraceRow.docompositionData.push(item.startTime!); + docompositionData.push(item.startTime!); }); - } - }) - } else { - if (TraceRow.docompositionData.length) { - TraceRow.docompositionData = [] + this.rangeTraceRow![0].docompositionList = docompositionData; + }); } } } @@ -230,6 +237,11 @@ export class RangeSelect { return false; } }); + if (this.rangeTraceRow && this.rangeTraceRow.length) { + this.rangeTraceRow!.forEach((row) => { + row.docompositionList = []; + }); + } this.timerShaftEL!.sportRuler!.isRangeSelect = this.rangeTraceRow?.length > 0; this.timerShaftEL!.sportRuler!.draw(); } diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 41cf9d28a5329e83b2003b958c94fc4a85b54bd9..df8041dc4dcdea53f2e559dfc13c4f1379e4729c 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -121,8 +121,6 @@ export class TraceRow extends HTMLElement { static range: TimeRange | undefined | null; static rangeSelectObject: RangeSelectStruct | undefined; static ROW_TYPE_HI_SYSEVENT = 'hi-sysevent'; - static docompositionData: Array = []; // 存储查询到的docomposition数据 - static currentRowId: number | undefined; // 存储当前行id public obj: TraceRowObject | undefined | null; isHover: boolean = false; hoverX: number = 0; @@ -174,6 +172,7 @@ export class TraceRow extends HTMLElement { childrenList: Array> = []; parentRowEl: TraceRow | undefined; _rowSettingList: Array | null | undefined; + _docompositionList: Array | undefined; focusHandler?: (ev: MouseEvent) => void | undefined; findHoverStruct?: () => void | undefined; @@ -188,12 +187,12 @@ export class TraceRow extends HTMLElement { isOffScreen: boolean; skeleton?: boolean; } = { - canvasNumber: 1, - alpha: false, - contextId: '2d', - isOffScreen: true, - skeleton: false, - } + canvasNumber: 1, + alpha: false, + contextId: '2d', + isOffScreen: true, + skeleton: false, + } ) { super(); this.args = args; @@ -235,6 +234,13 @@ export class TraceRow extends HTMLElement { 'row-setting-popover-direction', ]; } + get docompositionList(): Array | undefined { + return this._docompositionList; + } + + set docompositionList(value: Array | undefined) { + this._docompositionList = value; + } get funcExpand(): boolean { return this.getAttribute('func-expand') === 'true'; @@ -280,7 +286,9 @@ export class TraceRow extends HTMLElement { } set rowSettingPopoverDirection(value: string) { - this.rowSettingPop!.placement = value; + if (this.rowSettingPop) { + this.rowSettingPop.placement = value; + } } get rowSettingPopoverDirection(): string { @@ -289,7 +297,9 @@ export class TraceRow extends HTMLElement { set rowSettingList(value: Array | null | undefined) { this._rowSettingList = value; - this.rowSettingTree!.treeData = value || []; + if (this.rowSettingTree) { + this.rowSettingTree.treeData = value || []; + } } set rowSettingMultiple(value: boolean) { @@ -644,8 +654,6 @@ export class TraceRow extends HTMLElement { this.folderIconEL = this.shadowRoot?.querySelector('.icon'); this.nameEL = this.shadowRoot?.querySelector('.name'); this.canvasVessel = this.shadowRoot?.querySelector('.panel-vessel'); - this.rowSettingTree = this.shadowRoot?.querySelector('#rowSettingTree'); - this.rowSettingPop = this.shadowRoot?.querySelector('#rowSetting'); this.tipEL = this.shadowRoot?.querySelector('.tip'); let canvasNumber = this.args['canvasNumber']; if (!this.args['skeleton']) { @@ -681,25 +689,39 @@ export class TraceRow extends HTMLElement { } }); this.funcExpand = true; - this.rowSettingTree!.onChange = (e: any): void => { + this.checkType = '-1'; + } + + addRowSettingPop(): void{ + this.rowSettingPop = document.createElement('lit-popover') as LitPopover; + this.rowSettingPop.innerHTML = `
+ +
+ `; + this.rowSettingPop.id = 'rowSetting'; + this.rowSettingPop.className = 'popover setting'; + this.rowSettingPop.setAttribute('placement', 'bottomLeft'); + this.rowSettingPop.setAttribute('trigger', 'click'); + this.rowSettingPop.setAttribute('haveRadio', 'true'); + this.rowSettingTree = this.rowSettingPop.querySelector('#rowSettingTree') as LitTree; + this.rowSettingTree.onChange = (): void => { + let isVisible = false; // @ts-ignore - this.rowSettingPop!.visible = false; + this.rowSettingPop!.visible = isVisible; if (this.rowSettingTree?.multiple) { - // @ts-ignore - this.rowSettingPop!.visible = true; - } else { - // @ts-ignore - this.rowSettingPop!.visible = false; + isVisible = true; } + // @ts-ignore + this.rowSettingPop!.visible = isVisible; this.onRowSettingChangeHandler?.(this.rowSettingTree!.getCheckdKeys(), this.rowSettingTree!.getCheckdNodes()); }; - this.checkType = '-1'; this.rowSettingPop?.addEventListener('mouseenter', (e) => { window.publish(window.SmartEvent.UI.HoverNull, undefined); }); + this.describeEl?.appendChild(this.rowSettingPop); } - getRowSettingKeys(): Array { + getRowSettingKeys() : Array { if (this.rowSetting === 'enable') { return this.rowSettingTree!.getCheckdKeys(); } @@ -718,7 +740,7 @@ export class TraceRow extends HTMLElement { } } - enableCollapseChart(): void { + enableCollapseChart() : void { this._enableCollapseChart = true; this.nameEL!.onclick = () => { if (this.funcExpand) { @@ -1366,9 +1388,6 @@ export class TraceRow extends HTMLElement { } :host([highlight]) .flash{ background-color: #ffe263; - } - :host([row-type="energy"]) #appNameList{ - display: flex; } #listprocess::-webkit-scrollbar{ width: 6px; @@ -1407,17 +1426,6 @@ export class TraceRow extends HTMLElement { - -
-
- - - -
- -
- - diff --git a/ide/src/trace/component/trace/base/TraceSheet.ts b/ide/src/trace/component/trace/base/TraceSheet.ts index d1ff74b53230bb02ea62d75439a3c94a61f7482c..4ccf1157be4fbde68d10ab32f189df11f8f215b9 100644 --- a/ide/src/trace/component/trace/base/TraceSheet.ts +++ b/ide/src/trace/component/trace/base/TraceSheet.ts @@ -154,15 +154,11 @@ export class TraceSheet extends BaseElement { this.processTree!.onChange = (e: any): void => { const select = this.processTree!.getCheckdKeys(); const selectIPid = Number(select[0]); - if (selectIPid === this.lastSelectIPid) { - return; - } this.switchDiv!.visible = 'false'; this.updateRangeSelect(selectIPid) this.lastSelectIPid = selectIPid; }; - // }; this.buildTabs(this.litTabs); this.litTabs!.onTabClick = (e: any): void => this.loadTabPaneData(e.detail.key); this.litTabs!.addEventListener('close-handler', () => { diff --git a/ide/src/trace/component/trace/search/Search.ts b/ide/src/trace/component/trace/search/Search.ts index ed87a02d795f48c7773b5be12acf09fe4b382960..343333236f8b3818ba4b477eea702ad7feafc1a5 100644 --- a/ide/src/trace/component/trace/search/Search.ts +++ b/ide/src/trace/component/trace/search/Search.ts @@ -193,9 +193,9 @@ export class LitSearch extends BaseElement { }, 200); } - private searchKeyupListener(e: KeyboardEvent) { - if( e.key === 'Enter' ){ - this.updateSearchList(this.search!.value); + private searchKeyupListener(e: KeyboardEvent) { + if (e.code === 'Enter') { + this.updateSearchList(this.search!.value); if (e.shiftKey) { this.dispatchEvent( new CustomEvent('previous-data', { @@ -222,17 +222,15 @@ export class LitSearch extends BaseElement { e.stopPropagation(); } - clearTimes(){ - if(this.systemTrace) - { - if(this.systemTrace.times.size > 0){ - for(let timerId of this.systemTrace.times){ + clearTimes(): void { + if (this.systemTrace) { + if (this.systemTrace.times.size > 0) { + for (let timerId of this.systemTrace.times) { clearTimeout(timerId); - } + } } - } + } } - initElements(): void { this.search = this.shadowRoot!.querySelector('input'); @@ -243,19 +241,19 @@ export class LitSearch extends BaseElement { this._retarge_index = this.shadowRoot!.querySelector("input[name='retarge_index']"); let _root = this.shadowRoot!.querySelector('.root'); let _prompt = this.shadowRoot!.querySelector('#prompt'); - this.systemTrace = document.querySelector('body > sp-application')?. - shadowRoot?.querySelector('#sp-system-trace'); + this.systemTrace = document + .querySelector('body > sp-application') + ?.shadowRoot?.querySelector('#sp-system-trace'); - let searchKeyup = (e: KeyboardEvent)=> { + let searchKeyup = (e: KeyboardEvent) => { this.clearTimes(); - this._retarge_index!.value = "" - this.index = -1; document.removeEventListener('keyup', this.systemTrace!.documentOnKeyUp); document.removeEventListener('keydown', this.systemTrace!.documentOnKeyDown); this.searchKeyupListener(e); document.addEventListener('keydown', this.systemTrace!.documentOnKeyDown); document.addEventListener('keyup', this.systemTrace!.documentOnKeyUp); - } + }; + this.search!.addEventListener('focus', () => { this.searchFocusListener(); }); @@ -266,8 +264,8 @@ export class LitSearch extends BaseElement { this.index = -1; this._retarge_index!.value = ''; }); - this.search!.addEventListener('keyup', searchKeyup ); - + + this.search!.addEventListener('keyup', searchKeyup); this.shadowRoot?.querySelector('#arrow-left')?.addEventListener('click', (e) => { this.dispatchEvent( new CustomEvent('previous-data', { @@ -289,8 +287,7 @@ export class LitSearch extends BaseElement { // 添加翻页监听事件 this.shadowRoot?.querySelector("input[name='retarge_index']")?.addEventListener('keyup', (e: any) => { - - if (e.key === 'Enter') { + if (e.key === 'Enter') { this.clearTimes(); document.removeEventListener('keyup', this.systemTrace!.documentOnKeyUp); document.removeEventListener('keydown', this.systemTrace!.documentOnKeyDown); @@ -317,13 +314,13 @@ export class LitSearch extends BaseElement { this._retarge_index!.value = ''; }, 2000); } - this._retarge_index?.blur(); + this._retarge_index?.blur(); this.search!.addEventListener('keyup', searchKeyup); document.addEventListener('keyup', this.systemTrace!.documentOnKeyUp); - document.addEventListener('keydown', this.systemTrace!.documentOnKeyDown ); + document.addEventListener('keydown', this.systemTrace!.documentOnKeyDown); document.addEventListener('keypress', this.systemTrace!.documentOnKeyPress); - } - e.stopPropagation(); + } + e.stopPropagation(); }); } diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts index 09cbe2bcaa0d966b01016d4da2cc0f771cc9e3a2..cb064fd5c3c663039218084c377af924db751d46 100644 --- a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts +++ b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts @@ -19,6 +19,7 @@ import { MarkStruct } from '../../../bean/MarkStruct.js'; import { SpSystemTrace } from '../../SpSystemTrace.js'; import { ns2s } from '../TimerShaftElement.js'; import { SlicesTime, StType } from '../timer-shaft/SportRuler.js'; +import { getTimeString } from './TabPaneCurrentSelection.js'; @element('tabpane-current') export class TabPaneCurrent extends BaseElement { @@ -142,9 +143,9 @@ export class TabPaneCurrent extends BaseElement { btn, color, text, - ns2s(slice.startTime), + getTimeString(slice.startTime), slice.startTime, - ns2s(slice.endTime), + getTimeString(slice.endTime), slice.endTime ); color!.value = slice.color; @@ -311,11 +312,11 @@ export class TabPaneCurrent extends BaseElement { } - + - + - +