From 9d28b17428e7155d6f89c10d5b2cfe632a70cc49 Mon Sep 17 00:00:00 2001 From: danghongquan Date: Wed, 6 Dec 2023 14:25:20 +0800 Subject: [PATCH 1/6] LTPO_Demo Signed-off-by: danghongquan --- .../trace/component/chart/SpAllAppStartups.ts | 5 +- .../trace/component/chart/SpChartManager.ts | 4 + ide/src/trace/component/chart/SpLTPO.ts | 211 ++++++++++++++++++ .../trace/component/trace/base/TraceRow.ts | 3 +- ide/src/trace/database/SqlLite.ts | 27 +++ .../database/ui-worker/ProcedureWorker.ts | 2 + .../database/ui-worker/ProcedureWorkerFreq.ts | 3 + .../database/ui-worker/ProcedureWorkerLTPO.ts | 109 +++++++++ 8 files changed, 361 insertions(+), 3 deletions(-) create mode 100644 ide/src/trace/component/chart/SpLTPO.ts create mode 100644 ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts diff --git a/ide/src/trace/component/chart/SpAllAppStartups.ts b/ide/src/trace/component/chart/SpAllAppStartups.ts index d12ed4015..1cb451b0c 100644 --- a/ide/src/trace/component/chart/SpAllAppStartups.ts +++ b/ide/src/trace/component/chart/SpAllAppStartups.ts @@ -17,6 +17,7 @@ import { SpSystemTrace } from '../SpSystemTrace.js'; import { TraceRow } from '../trace/base/TraceRow.js'; import { renders } from '../../database/ui-worker/ProcedureWorker.js'; import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq.js'; +import { ColorUtils } from '../trace/base/ColorUtils.js'; import { queryAppStartupProcessIds, queryProcessStartup, @@ -49,7 +50,7 @@ export class SpAllAppStartupsChart { SpAllAppStartupsChart.allAppStartupsAva = []; for (let i = 0; i < SpAllAppStartupsChart.APP_STARTUP_PID_ARR.length; i++) { let tmpSingleApp: any[] = await queryProcessStartup(SpAllAppStartupsChart.APP_STARTUP_PID_ARR[i]!); - if (tmpSingleApp.length == 8) { + if (tmpSingleApp.length === 8) { let avilSingleName = await querySingleAppStartupsName(SpAllAppStartupsChart.APP_STARTUP_PID_ARR[i]!); SpAllAppStartupsChart.allAppStartupsAva.push(SpAllAppStartupsChart.APP_STARTUP_PID_ARR[i]); SpAllAppStartupsChart.AllAppStartupsNameArr.push(avilSingleName![0].name); @@ -88,7 +89,7 @@ export class SpAllAppStartupsChart { } } tmpResArr.forEach((item) => { - if (item.startTs == maxStartTs) { + if (item.startTs === maxStartTs) { endTs = Number(item.startTs) + Number(item.dur); singleDur = Number(endTs) - Number(minStartTs); } diff --git a/ide/src/trace/component/chart/SpChartManager.ts b/ide/src/trace/component/chart/SpChartManager.ts index ce26806d6..f39148a3a 100644 --- a/ide/src/trace/component/chart/SpChartManager.ts +++ b/ide/src/trace/component/chart/SpChartManager.ts @@ -52,6 +52,7 @@ import { SpHiSysEventChart } from './SpHiSysEventChart.js'; import { SpAllAppStartupsChart } from './SpAllAppStartups.js'; import {setVSyncData} from './VSync.js'; import { SegMenTaTion } from './SpSegmentationChart.js'; +import { SpLtpoChart } from './SpLTPO.js'; export class SpChartManager { static APP_STARTUP_PID_ARR: Array = []; @@ -72,6 +73,7 @@ export class SpChartManager { private clockChart: SpClockChart; private irqChart: SpIrqChart; private SpAllAppStartupsChart!: SpAllAppStartupsChart; + private SpLtpoChart!: SpLtpoChart; frameTimeChart: SpFrameTimeChart; public arkTsChart: SpArkTsChart; private logChart: SpLogChart; @@ -100,6 +102,7 @@ export class SpChartManager { this.spHiSysEvent = new SpHiSysEventChart(trace); this.SpAllAppStartupsChart = new SpAllAppStartupsChart(trace); this.SegMenTaTion = new SegMenTaTion(trace); + this.SpLtpoChart = new SpLtpoChart(trace) } async init(progress: Function) { @@ -172,6 +175,7 @@ export class SpChartManager { await this.arkTsChart.initFolder(); info('ark ts initialized'); await this.SpAllAppStartupsChart.init(); + await this.SpLtpoChart.init(); await this.frameTimeChart.init(); progress('process', 92); await this.process.initAsyncFuncData(); diff --git a/ide/src/trace/component/chart/SpLTPO.ts b/ide/src/trace/component/chart/SpLTPO.ts new file mode 100644 index 000000000..b281946fd --- /dev/null +++ b/ide/src/trace/component/chart/SpLTPO.ts @@ -0,0 +1,211 @@ +/* + * 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 { SpSystemTrace } from '../SpSystemTrace.js'; +import { TraceRow } from '../trace/base/TraceRow.js'; +import { renders } from '../../database/ui-worker/ProcedureWorker.js'; +import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq.js'; +import { ColorUtils } from '../trace/base/ColorUtils.js'; +import { + queryPresentInfo, + queryVsNameList, + queryFanceNameList, + queryFpsNameList +} from '../../database/SqlLite.js'; +import { LtpoRender, LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO.js' + +export class SpLtpoChart { + private readonly trace: SpSystemTrace | undefined; + static APP_STARTUP_PID_ARR: Array = []; + static jsonRow: TraceRow | undefined; + static trace: SpSystemTrace; + static presentArr: Array = []; + static vsyncNameList: Array = []; + static fanceNameList: Array = []; + static fpsnameList: Array = []; + static ltpoDataArr: Array = []; + static sendDataArr: Array = []; + constructor(trace: SpSystemTrace) { + SpLtpoChart.trace = trace; + } + + async init() { + SpLtpoChart.ltpoDataArr = []; + SpLtpoChart.vsyncNameList = await queryVsNameList(); + SpLtpoChart.fanceNameList = await queryFanceNameList(); + SpLtpoChart.fpsnameList = await queryFpsNameList(); + SpLtpoChart.vsyncNameList.map((item) => { + let cutNameArr = item.name!.split(":"); + item.vsyncId = cutNameArr[cutNameArr.length - 1]; + }) + SpLtpoChart.fanceNameList.map((item) => { + let cutFanceNameArr = item.name!.split(" "); + item.fanceId = cutFanceNameArr[cutFanceNameArr.length - 1]; + }) + SpLtpoChart.fpsnameList.map((item) => { + let cutFpsNameArr = item.name!.split(",")[0].split(":"); + item.fps = cutFpsNameArr[cutFpsNameArr.length - 1] + }) + let vsyncIndex = 0; + let fanceIndex = 0; + if (SpLtpoChart.vsyncNameList && SpLtpoChart.vsyncNameList.length && SpLtpoChart.fanceNameList && SpLtpoChart.fanceNameList.length) { + while (vsyncIndex < SpLtpoChart.vsyncNameList.length) { + if ((Number(SpLtpoChart.vsyncNameList[vsyncIndex].ts!) + Number(SpLtpoChart.vsyncNameList[vsyncIndex].dur!)) > SpLtpoChart.fanceNameList[fanceIndex].ts!) { + this.pushLtpoData(SpLtpoChart.ltpoDataArr, + Number(SpLtpoChart.fanceNameList[fanceIndex].fanceId), + Number(SpLtpoChart.vsyncNameList[vsyncIndex].vsyncId), + 0, 0, 0, 0, 0 + ) + vsyncIndex++; + if (fanceIndex < SpLtpoChart.fanceNameList.length - 1) fanceIndex++; + } else { + this.pushLtpoData(SpLtpoChart.ltpoDataArr, + -1, + Number(SpLtpoChart.vsyncNameList[vsyncIndex].vsyncId), + 0, 0, 0, 0, 0 + ) + vsyncIndex++; + } + } + } + if (SpLtpoChart.fpsnameList && SpLtpoChart.fpsnameList.length && SpLtpoChart.ltpoDataArr && SpLtpoChart.ltpoDataArr.length) { + for (let i = 0; i < SpLtpoChart.ltpoDataArr.length; i++) { + if (i === 0) { + SpLtpoChart.ltpoDataArr[i].fps = 60 + } else { + SpLtpoChart.ltpoDataArr[i].fps = SpLtpoChart.fpsnameList[i - 1]?SpLtpoChart.fpsnameList[i - 1].fps:60; + } + } + } + + if (SpLtpoChart.vsyncNameList && SpLtpoChart.vsyncNameList.length) await this.initFolder(); + } + pushLtpoData( + lptoArr: any[] | undefined, + fanceId: Number, + vsyncId: Number, + fps: Number, + startTs: Number, + dur: Number, + nextStartTs: Number, + nextDur: number + ):void { + lptoArr?.push( + { + lptoArr: lptoArr, + fanceId: fanceId, + vsyncId: vsyncId, + fps: fps, + startTs: startTs, + dur: dur, + nextStartTs: nextStartTs, + nextDur: nextDur + } + ) + } + + async initFolder() { + SpLtpoChart.presentArr = []; + let row: TraceRow = TraceRow.skeleton(); + row.setAttribute('hasStartup', 'true'); + row.rowId = ``; + row.index = 0; + row.rowType = TraceRow.ROW_TYPE_LTPO; + row.rowParentId = ''; + row.folder = false; + row.style.height = '40px'; + row.name = `LTPO`; + row.favoriteChangeHandler = SpLtpoChart.trace.favoriteChangeHandler; + row.supplier = async (): Promise> => { + SpLtpoChart.presentArr = await queryPresentInfo(); + SpLtpoChart.presentArr.map((item) => { + let cutPresentArr = item.name.split(" ") + item.presentFance = cutPresentArr[cutPresentArr.length - 1] + }) + let ltpoIndex = 0; + let presentIndex = 0; + SpLtpoChart.sendDataArr = []; + if (SpLtpoChart.presentArr && SpLtpoChart.presentArr.length) { + while (ltpoIndex < SpLtpoChart.ltpoDataArr.length) { + if (SpLtpoChart.ltpoDataArr[ltpoIndex].fanceId === Number(SpLtpoChart.presentArr[presentIndex].presentFance)) { + SpLtpoChart.ltpoDataArr[ltpoIndex].startTs = SpLtpoChart.presentArr[presentIndex].ts - (window as any).recordStartNS; + SpLtpoChart.ltpoDataArr[ltpoIndex].dur = SpLtpoChart.presentArr[presentIndex].dur; + SpLtpoChart.ltpoDataArr[ltpoIndex].nextStartTs = SpLtpoChart.presentArr[presentIndex + 1] ? SpLtpoChart.presentArr[presentIndex + 1].ts - (window as any).recordStartNS : ''; + SpLtpoChart.ltpoDataArr[ltpoIndex].nextDur = SpLtpoChart.presentArr[presentIndex + 1] ? SpLtpoChart.presentArr[presentIndex + 1].dur : 0; + ltpoIndex++; + if (presentIndex < SpLtpoChart.presentArr.length - 1) presentIndex++; + } else { + ltpoIndex++; + } + } + } + + for (let i = 0; i < SpLtpoChart.ltpoDataArr.length; i++) { + if (SpLtpoChart.ltpoDataArr[i].fanceId != -1 && SpLtpoChart.ltpoDataArr[i].nextDur) { + let sendStartTs: number | undefined = 0; + let sendDur: number | undefined = 0; + let sendLossFrames: number | undefined = 0; + sendStartTs = Number(SpLtpoChart.ltpoDataArr[i].startTs) + Number(SpLtpoChart.ltpoDataArr[i].dur); + sendDur = Number(SpLtpoChart.ltpoDataArr[i].nextStartTs) + Number(SpLtpoChart.ltpoDataArr[i].nextDur) - sendStartTs; + let tmpDur = Math.ceil(sendDur / 1000000) + sendLossFrames = (tmpDur * SpLtpoChart.ltpoDataArr[i].fps / 1000 - 1) < 1 ? 0 : Math.floor(tmpDur * SpLtpoChart.ltpoDataArr[i].fps / 1000 - 1) + if (tmpDur < 170) { + SpLtpoChart.sendDataArr.push( + { + dur: sendDur, + value: sendLossFrames, + startTs: sendStartTs, + pid: SpLtpoChart.ltpoDataArr[i].vsyncId, + process: undefined, + itid: SpLtpoChart.ltpoDataArr[i].vsyncId, + endItid: undefined, + tid: undefined, + startName: undefined, + stepName: undefined, + } + ) + } + } + } + return SpLtpoChart.sendDataArr + } + row.focusHandler = (ev) => { + SpLtpoChart.trace?.displayTip( + row!, + LtpoStruct.hoverLtpoStruct, + `${ColorUtils.formatNumberComma(Number(LtpoStruct.hoverLtpoStruct?.value!))}` + ) + }; + row.onThreadHandler = (useCache): void => { + let context: CanvasRenderingContext2D; + if (row.currentContext) { + context = row.currentContext; + } else { + context = row.collect ? SpLtpoChart.trace.canvasFavoritePanelCtx! : SpLtpoChart.trace.canvasPanelCtx!; + } + row.canvasSave(context); + (renders['ltpo-present'] as LtpoRender).renderMainThread( + { + appStartupContext: context, + useCache: useCache, + type: `ltpo-present ${row.rowId}`, + }, + row + ); + row.canvasRestore(context); + }; + SpLtpoChart.trace.rowsEL?.appendChild(row); + } +} diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 02a033920..db84ba54c 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -122,7 +122,8 @@ export class TraceRow extends HTMLElement { static ROW_TYPE_PURGEABLE_TOTAL_VM = 'purgeable-total-vm'; static ROW_TYPE_PURGEABLE_PIN_VM = 'purgeable-pin-vm'; static ROW_TYPE_LOGS = 'logs'; - static ROW_TYPE_ALL_APPSTARTUPS = 'all-appstartups' + static ROW_TYPE_ALL_APPSTARTUPS = 'all-appstartups'; + static ROW_TYPE_LTPO = 'ltpo'; static FRAME_WIDTH: number = 0; static range: TimeRange | undefined | null; static rangeSelectObject: RangeSelectStruct | undefined; diff --git a/ide/src/trace/database/SqlLite.ts b/ide/src/trace/database/SqlLite.ts index 878d8f637..0add8cd5e 100644 --- a/ide/src/trace/database/SqlLite.ts +++ b/ide/src/trace/database/SqlLite.ts @@ -1457,6 +1457,33 @@ export const querySingleAppStartupsName = (pid: number): Promise> => { $pid: pid } ) + export const queryPresentInfo =(): Promise > => + query( + 'queryPresentInfo', + `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(112,114,101,115,101,110,116,37)}'))` + ) + + export const queryVsNameList = ():Promise> => + query( + 'queryVsNameList', + `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) + AND name LIKE('${String.fromCharCode(72,58,82,101,99,101,105,118,101,86,115,121,110,99,37)}')` + ) + + export const queryFanceNameList = ():Promise> => + query( + 'queryFanceNameList', + `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) + AND name LIKE('${String.fromCharCode(72,58,65,99,113,117,105,114,101,32,70,101,110,99,101,37)}')` + ) + + export const queryFpsNameList = ():Promise> => + query( + 'queryFpsNameList', + `SELECT name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) + AND name LIKE('${String.fromCharCode(37,68,97,116,97,32,114,101,102,114,101,115,104,82,97,116,101,37)}')` + ) + export const queryProcessSoMaxDepth = (): Promise> => query( 'queryProcessSoMaxDepth', diff --git a/ide/src/trace/database/ui-worker/ProcedureWorker.ts b/ide/src/trace/database/ui-worker/ProcedureWorker.ts index 1a6bbab86..d159cf2e1 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorker.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorker.ts @@ -61,6 +61,7 @@ import { HiSysEventRender } from './ProcedureWorkerHiSysEvent.js'; import { AllAppStartupRender } from './ProcedureWorkerAllAppStartup.js'; import { FreqExtendRender } from './ProcedureWorkerFreqExtend.js'; import { BinderRender } from './procedureWorkerBinder.js'; +import { LtpoRender } from './ProcedureWorkerLTPO.js'; let dataList: any = {}; let dataList2: any = {}; @@ -81,6 +82,7 @@ export let renders: any = { process: new ProcessRender(), 'app-start-up': new AppStartupRender(), 'all-app-start-up': new AllAppStartupRender(), + 'ltpo-present': new LtpoRender(), 'app-so-init': new SoRender(), heap: new HeapRender(), 'heap-timeline': new HeapTimelineRender(), diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts index 3e7744f83..7242fcddf 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts @@ -70,6 +70,9 @@ export class CpuFreqStruct extends BaseStruct { value: number | undefined; startNS: number | undefined; dur: number | undefined; //自补充，数据库没有返回 + name: any; + presentFance: any; + ts: any; static draw(freqContext: CanvasRenderingContext2D, data: CpuFreqStruct) { if (data.frame) { diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts new file mode 100644 index 000000000..68a3be693 --- /dev/null +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts @@ -0,0 +1,109 @@ +/* + * 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 { BaseStruct, dataFilterHandler, drawString } from './ProcedureWorkerCommon.js'; +import { TraceRow } from '../../component/trace/base/TraceRow.js'; + +export class LtpoRender { + renderMainThread( + req: { + appStartupContext: CanvasRenderingContext2D; + useCache: boolean; + type: string; + }, + ltpoRow: TraceRow + ): void { + let list = ltpoRow.dataList; + LtpoStruct.maxVal = 0; + for (let i = 0; i < list.length; i++) { + if (Number(list[i].value) > LtpoStruct.maxVal) LtpoStruct.maxVal = Number(list[i].value); + } + let filter = ltpoRow.dataListCache; + dataFilterHandler(list, filter, { + startKey: 'startTs', + durKey: 'dur', + startNS: TraceRow.range?.startNS ?? 0, + endNS: TraceRow.range?.endNS ?? 0, + totalNS: TraceRow.range?.totalNS ?? 0, + frame: ltpoRow.frame, + paddingTop: 5, + useCache: req.useCache || !(TraceRow.range?.refresh ?? false), + }); + req.appStartupContext.globalAlpha = 0.6; + let find = false; + let offset = 3; + for (let re of filter) { + if (re.frame) { + re.frame.height = Number(re.value) === 0 ? 1 : Number(re.value) * 30 / LtpoStruct.maxVal; + re.frame.y = 35 - re.frame.height; + } + if (ltpoRow.isHover) { + if ( + re.frame && + ltpoRow.hoverX >= re.frame.x - offset && + ltpoRow.hoverX <= re.frame.x + re.frame.width + offset + ) { + LtpoStruct.hoverLtpoStruct = re; + find = true; + } + } + if(!ltpoRow.isHover) LtpoStruct.hoverLtpoStruct = undefined + if (!find && ltpoRow.isHover) { + LtpoStruct.hoverLtpoStruct = undefined; + } + req.appStartupContext.beginPath() + LtpoStruct.draw(req.appStartupContext, re); + req.appStartupContext.closePath() + } + } +} + + +export class LtpoStruct extends BaseStruct { + static hoverLtpoStruct: LtpoStruct | undefined; + static selectLtpoStruct: LtpoStruct | undefined; + static maxVal: number | undefined; + dur: number | undefined; + value: string | undefined; + name: string | undefined; + presentFance: number | undefined; + ts: number | undefined; + vsyncId: number | undefined; + fanceId: number | undefined; + + static draw(ctx: CanvasRenderingContext2D, data: LtpoStruct): void { + if (data.frame) { + ctx.fillStyle = '#9933FA'; + if (data === LtpoStruct.hoverLtpoStruct || data === LtpoStruct.selectLtpoStruct) { + let drawHeight: number = Math.floor( + ((Number(data.value) || 0) * (data.frame.height || 0) * 1.0) / LtpoStruct.maxVal! + ); + drawHeight = drawHeight < 1 ? 1 : drawHeight + ctx.globalAlpha = 1.0; + ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight); + ctx.lineWidth = 1; + ctx.strokeStyle = ' #0000FF'; + ctx.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight) + } else { + ctx.globalAlpha = 0.6; + let drawHeight: number = Math.floor(((Number(data.value) || 0) * (data.frame.height || 0)) / LtpoStruct.maxVal!); + drawHeight = drawHeight < 1 ? 1 : drawHeight + ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight) + } + + } + } + +} -- Gitee From 3ea2a8a8434e3b1234040192b23888d14c74dc04 Mon Sep 17 00:00:00 2001 From: danghongquan Date: Sat, 9 Dec 2023 15:19:29 +0800 Subject: [PATCH 2/6] modify_Allappstartups_keyboard_ltpo Signed-off-by: danghongquan --- ide/src/trace/component/SpKeyboard.ts | 13 +-- ide/src/trace/component/SpSystemTrace.ts | 6 ++ .../trace/component/chart/SpAllAppStartups.ts | 12 +-- .../trace/component/chart/SpChartManager.ts | 57 ++++++----- ide/src/trace/component/chart/SpLTPO.ts | 16 ++-- .../database/ui-worker/ProcedureWorker.ts | 96 +++++++++---------- .../ui-worker/ProcedureWorkerAllAppStartup.ts | 1 - .../database/ui-worker/ProcedureWorkerLTPO.ts | 4 +- 8 files changed, 104 insertions(+), 101 deletions(-) diff --git a/ide/src/trace/component/SpKeyboard.ts b/ide/src/trace/component/SpKeyboard.ts index dac465032..f939b8e47 100644 --- a/ide/src/trace/component/SpKeyboard.ts +++ b/ide/src/trace/component/SpKeyboard.ts @@ -43,7 +43,7 @@ export class SpKeyboard extends BaseElement {
-

SmartPerf help

+

SmartPerf Help

✕
@@ -172,7 +172,7 @@ export class SpKeyboard extends BaseElement { .body{ width: 50%; background-color: #fff; - padding: 30px; + padding: 0 30px 30px; z-index: 9000; max-height: 600px; overflow-y: scroll; @@ -182,10 +182,11 @@ export class SpKeyboard extends BaseElement { position:absolute; } header { - position: relative; - width: 100%; - height: 31px; - line-height: 31px; + position: fixed; + width: 50%; + height: 50px; + line-height: 50px; + background-color: #fff; } .close-icon{ cursor: pointer; diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index b7c1138b2..114913023 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -2078,6 +2078,12 @@ export class SpSystemTrace extends BaseElement { (AppStartupStruct.selectStartupStruct.startTs || 0) + (AppStartupStruct.selectStartupStruct.dur || 0), shiftKey ); + }else if (AllAppStartupStruct.selectStartupStruct) { + this.slicestime = this.timerShaftEL?.setSlicesMark( + AllAppStartupStruct.selectStartupStruct.startTs || 0, + (AllAppStartupStruct.selectStartupStruct.startTs || 0) + (AllAppStartupStruct.selectStartupStruct.dur || 0), + shiftKey + ); } else if (SoStruct.selectSoStruct) { this.slicestime = this.timerShaftEL?.setSlicesMark( SoStruct.selectSoStruct.startTs || 0, diff --git a/ide/src/trace/component/chart/SpAllAppStartups.ts b/ide/src/trace/component/chart/SpAllAppStartups.ts index 55fcde1e1..d984cfd58 100644 --- a/ide/src/trace/component/chart/SpAllAppStartups.ts +++ b/ide/src/trace/component/chart/SpAllAppStartups.ts @@ -13,11 +13,10 @@ * limitations under the License. */ -import { SpSystemTrace } from '../SpSystemTrace.js'; -import { TraceRow } from '../trace/base/TraceRow.js'; -import { renders } from '../../database/ui-worker/ProcedureWorker.js'; -import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq.js'; -import { ColorUtils } from '../trace/base/ColorUtils.js'; +import { SpSystemTrace } from '../SpSystemTrace'; +import { TraceRow } from '../trace/base/TraceRow'; +import { renders } from '../../database/ui-worker/ProcedureWorker'; +import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq'; import { queryAppStartupProcessIds, queryProcessStartup, @@ -70,8 +69,9 @@ export class SpAllAppStartupsChart { row.folder = false; row.style.height = '40px'; row.name = `All App Startups`; - row.selectChangeHandler = SpAllAppStartupsChart.trace.selectChangeHandler; + row.addTemplateTypes('AppStartup'); row.favoriteChangeHandler = SpAllAppStartupsChart.trace.favoriteChangeHandler; + row.selectChangeHandler = SpAllAppStartupsChart.trace.selectChangeHandler; row.supplier = async (): Promise> => { let sendRes: AllAppStartupStruct[] | PromiseLike = []; for (let i = 0; i < SpAllAppStartupsChart.allAppStartupsAva.length; i++) { diff --git a/ide/src/trace/component/chart/SpChartManager.ts b/ide/src/trace/component/chart/SpChartManager.ts index 1697af703..be9ab6f42 100644 --- a/ide/src/trace/component/chart/SpChartManager.ts +++ b/ide/src/trace/component/chart/SpChartManager.ts @@ -26,33 +26,33 @@ import { queryTaskPoolCallStack, queryThreadAndProcessName, queryTotalTime, -} from '../../database/SqlLite.js'; -import { info } from '../../../log/Log.js'; -import { SpNativeMemoryChart } from './SpNativeMemoryChart.js'; -import { SpAbilityMonitorChart } from './SpAbilityMonitorChart.js'; -import { SpProcessChart } from './SpProcessChart.js'; -import { perfDataQuery } from './PerfDataQuery.js'; -import { SpVirtualMemChart } from './SpVirtualMemChart.js'; -import { SpFileSystemChart } from './SpFileSystemChart.js'; -import { SpSdkChart } from './SpSdkChart.js'; -import { SpHiSysEnergyChart } from './SpHiSysEnergyChart.js'; -import { VmTrackerChart } from './SpVmTrackerChart.js'; -import { SpClockChart } from './SpClockChart.js'; -import { SpIrqChart } from './SpIrqChart.js'; -import { renders } from '../../database/ui-worker/ProcedureWorker.js'; -import { EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU.js'; -import { TraceRow } from '../trace/base/TraceRow.js'; -import { SpFrameTimeChart } from './SpFrameTimeChart.js'; -import { Utils } from '../trace/base/Utils.js'; -import { SpArkTsChart } from './SpArkTsChart.js'; -import { MemoryConfig } from '../../bean/MemoryConfig.js'; -import { FlagsConfig } from '../SpFlags.js'; -import { SpLogChart } from './SpLogChart.js'; -import { SpHiSysEventChart } from './SpHiSysEventChart.js'; -import { SpAllAppStartupsChart } from './SpAllAppStartups.js'; -import {setVSyncData} from './VSync.js'; -import { SegMenTaTion } from './SpSegmentationChart.js'; -import { SpLtpoChart } from './SpLTPO.js'; +} from '../../database/SqlLite'; +import { info } from '../../../log/Log'; +import { SpNativeMemoryChart } from './SpNativeMemoryChart'; +import { SpAbilityMonitorChart } from './SpAbilityMonitorChart'; +import { SpProcessChart } from './SpProcessChart'; +import { perfDataQuery } from './PerfDataQuery'; +import { SpVirtualMemChart } from './SpVirtualMemChart'; +import { SpFileSystemChart } from './SpFileSystemChart'; +import { SpSdkChart } from './SpSdkChart'; +import { SpHiSysEnergyChart } from './SpHiSysEnergyChart'; +import { VmTrackerChart } from './SpVmTrackerChart'; +import { SpClockChart } from './SpClockChart'; +import { SpIrqChart } from './SpIrqChart'; +import { renders } from '../../database/ui-worker/ProcedureWorker'; +import { EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU'; +import { TraceRow } from '../trace/base/TraceRow'; +import { SpFrameTimeChart } from './SpFrameTimeChart'; +import { Utils } from '../trace/base/Utils'; +import { SpArkTsChart } from './SpArkTsChart'; +import { MemoryConfig } from '../../bean/MemoryConfig'; +import { FlagsConfig } from '../SpFlags'; +import { SpLogChart } from './SpLogChart'; +import { SpHiSysEventChart } from './SpHiSysEventChart'; +import { SpAllAppStartupsChart } from './SpAllAppStartups'; +import {setVSyncData} from './VSync'; +// import { SegMenTaTion } from './SpSegmentationChart'; +import { SpLtpoChart } from './SpLTPO'; export class SpChartManager { static APP_STARTUP_PID_ARR: Array = []; @@ -78,6 +78,7 @@ export class SpChartManager { public arkTsChart: SpArkTsChart; private logChart: SpLogChart; private spHiSysEvent: SpHiSysEventChart; + SegMenTaTion: any; constructor(trace: SpSystemTrace) { this.trace = trace; @@ -100,7 +101,6 @@ export class SpChartManager { this.logChart = new SpLogChart(trace); this.spHiSysEvent = new SpHiSysEventChart(trace); this.SpAllAppStartupsChart = new SpAllAppStartupsChart(trace); - this.SegMenTaTion = new SegMenTaTion(trace); this.SpLtpoChart = new SpLtpoChart(trace) } @@ -175,7 +175,6 @@ export class SpChartManager { await this.SpAllAppStartupsChart.init(); await this.SpLtpoChart.init(); await this.frameTimeChart.init(); - await this.spAllAppStartupsChart.init(); progress('process', 92); await this.process.initAsyncFuncData(); await this.process.initDeliverInputEvent(); diff --git a/ide/src/trace/component/chart/SpLTPO.ts b/ide/src/trace/component/chart/SpLTPO.ts index b281946fd..de1e4b14e 100644 --- a/ide/src/trace/component/chart/SpLTPO.ts +++ b/ide/src/trace/component/chart/SpLTPO.ts @@ -13,18 +13,18 @@ * limitations under the License.翻译 */ -import { SpSystemTrace } from '../SpSystemTrace.js'; -import { TraceRow } from '../trace/base/TraceRow.js'; -import { renders } from '../../database/ui-worker/ProcedureWorker.js'; -import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq.js'; -import { ColorUtils } from '../trace/base/ColorUtils.js'; +import { SpSystemTrace } from '../SpSystemTrace'; +import { TraceRow } from '../trace/base/TraceRow'; +import { renders } from '../../database/ui-worker/ProcedureWorker'; +import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq'; +import { ColorUtils } from '../trace/base/ColorUtils'; import { queryPresentInfo, queryVsNameList, queryFanceNameList, queryFpsNameList -} from '../../database/SqlLite.js'; -import { LtpoRender, LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO.js' +} from '../../database/SqlLite'; +import { LtpoRender, LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO' export class SpLtpoChart { private readonly trace: SpSystemTrace | undefined; @@ -126,7 +126,7 @@ export class SpLtpoChart { row.rowParentId = ''; row.folder = false; row.style.height = '40px'; - row.name = `LTPO`; + row.name = `Lost Frames`; row.favoriteChangeHandler = SpLtpoChart.trace.favoriteChangeHandler; row.supplier = async (): Promise> => { SpLtpoChart.presentArr = await queryPresentInfo(); diff --git a/ide/src/trace/database/ui-worker/ProcedureWorker.ts b/ide/src/trace/database/ui-worker/ProcedureWorker.ts index be3ec5d73..8089c46a7 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorker.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorker.ts @@ -13,55 +13,53 @@ * limitations under the License. */ -import { CpuRender, EmptyRender } from './ProcedureWorkerCPU.js'; -import { RequestMessage } from './ProcedureWorkerCommon.js'; -import { FreqRender } from './ProcedureWorkerFreq.js'; -import { ProcessRender } from './ProcedureWorkerProcess.js'; -import { MemRender } from './ProcedureWorkerMem.js'; -import { ThreadRender } from './ProcedureWorkerThread.js'; -import { FuncRender } from './ProcedureWorkerFunc.js'; -import { FpsRender } from './ProcedureWorkerFPS.js'; -import { HeapRender, NativeMemoryRender } from './ProcedureWorkerHeap.js'; -import { CpuAbilityRender } from './ProcedureWorkerCpuAbility.js'; -import { MemoryAbilityRender } from './ProcedureWorkerMemoryAbility.js'; -import { DiskIoAbilityRender } from './ProcedureWorkerDiskIoAbility.js'; -import { NetworkAbilityRender } from './ProcedureWorkerNetworkAbility.js'; -import { HiperfCpuRender } from './ProcedureWorkerHiPerfCPU.js'; -import { HiperfProcessRender } from './ProcedureWorkerHiPerfProcess.js'; -import { HiperfThreadRender } from './ProcedureWorkerHiPerfThread.js'; -import { HiperfEventRender } from './ProcedureWorkerHiPerfEvent.js'; -import { HiperfReportRender } from './ProcedureWorkerHiPerfReport.js'; -import { VirtualMemoryRender } from './ProcedureWorkerVirtualMemory.js'; -import { FileSystemRender } from './ProcedureWorkerFileSystem.js'; -import { info } from '../../../log/Log.js'; -import { SdkSliceRender } from './ProduceWorkerSdkSlice.js'; -import { SdkCounterRender } from './ProduceWorkerSdkCounter.js'; -import { CpuStateRender } from './ProcedureWorkerCpuState.js'; -import { EnergyAnomalyRender } from './ProcedureWorkerEnergyAnomaly.js'; -import { EnergySystemRender } from './ProcedureWorkerEnergySystem.js'; -import { EnergyPowerRender } from './ProcedureWorkerEnergyPower.js'; -import { EnergyStateRender } from './ProcedureWorkerEnergyState.js'; -import { CpuFreqLimitRender } from './ProcedureWorkerCpuFreqLimits.js'; -import { ClockRender } from './ProcedureWorkerClock.js'; -import { IrqRender } from './ProcedureWorkerIrq.js'; -import { JankRender } from './ProcedureWorkerJank.js'; -import { HeapTimelineRender } from './ProcedureWorkerHeapTimeline.js'; -import { HeapSnapshotRender } from './ProcedureWorkerHeapSnapshot.js'; -import { translateJsonString } from '../logic-worker/ProcedureLogicWorkerCommon.js'; -import { AppStartupRender } from './ProcedureWorkerAppStartup.js'; -import { SoRender } from './ProcedureWorkerSoInit.js'; -import { FrameDynamicRender } from './ProcedureWorkerFrameDynamic.js'; -import { FrameAnimationRender } from './ProcedureWorkerFrameAnimation.js'; -import { FrameSpacingRender } from './ProcedureWorkerFrameSpacing.js'; -import { JsCpuProfilerRender } from './ProcedureWorkerCpuProfiler.js'; -import { SnapshotRender } from './ProcedureWorkerSnapshot.js'; -import { LogRender } from './ProcedureWorkerLog.js'; -import { HiPerfCallChartRender } from './ProcedureWorkerHiPerfCallChart.js'; -import { HiSysEventRender } from './ProcedureWorkerHiSysEvent.js'; -import { AllAppStartupRender } from './ProcedureWorkerAllAppStartup.js'; -import { FreqExtendRender } from './ProcedureWorkerFreqExtend.js'; -import { BinderRender } from './procedureWorkerBinder.js'; -import { LtpoRender } from './ProcedureWorkerLTPO.js'; +import { CpuRender, EmptyRender } from './ProcedureWorkerCPU'; +import { RequestMessage } from './ProcedureWorkerCommon'; +import { FreqRender } from './ProcedureWorkerFreq'; +import { ProcessRender } from './ProcedureWorkerProcess'; +import { MemRender } from './ProcedureWorkerMem'; +import { ThreadRender } from './ProcedureWorkerThread'; +import { FuncRender } from './ProcedureWorkerFunc'; +import { FpsRender } from './ProcedureWorkerFPS'; +import { HeapRender, NativeMemoryRender } from './ProcedureWorkerHeap'; +import { CpuAbilityRender } from './ProcedureWorkerCpuAbility'; +import { MemoryAbilityRender } from './ProcedureWorkerMemoryAbility'; +import { DiskIoAbilityRender } from './ProcedureWorkerDiskIoAbility'; +import { NetworkAbilityRender } from './ProcedureWorkerNetworkAbility'; +import { HiperfCpuRender } from './ProcedureWorkerHiPerfCPU'; +import { HiperfProcessRender } from './ProcedureWorkerHiPerfProcess'; +import { HiperfThreadRender } from './ProcedureWorkerHiPerfThread'; +import { HiperfEventRender } from './ProcedureWorkerHiPerfEvent'; +import { HiperfReportRender } from './ProcedureWorkerHiPerfReport'; +import { VirtualMemoryRender } from './ProcedureWorkerVirtualMemory'; +import { FileSystemRender } from './ProcedureWorkerFileSystem'; +import { info } from '../../../log/Log'; +import { SdkSliceRender } from './ProduceWorkerSdkSlice'; +import { SdkCounterRender } from './ProduceWorkerSdkCounter'; +import { CpuStateRender } from './ProcedureWorkerCpuState'; +import { EnergyAnomalyRender } from './ProcedureWorkerEnergyAnomaly'; +import { EnergySystemRender } from './ProcedureWorkerEnergySystem'; +import { EnergyPowerRender } from './ProcedureWorkerEnergyPower'; +import { EnergyStateRender } from './ProcedureWorkerEnergyState'; +import { CpuFreqLimitRender } from './ProcedureWorkerCpuFreqLimits'; +import { ClockRender } from './ProcedureWorkerClock'; +import { IrqRender } from './ProcedureWorkerIrq'; +import { JankRender } from './ProcedureWorkerJank'; +import { HeapTimelineRender } from './ProcedureWorkerHeapTimeline'; +import { HeapSnapshotRender } from './ProcedureWorkerHeapSnapshot'; +import { translateJsonString } from '../logic-worker/ProcedureLogicWorkerCommon'; +import { AppStartupRender } from './ProcedureWorkerAppStartup'; +import { SoRender } from './ProcedureWorkerSoInit'; +import { FrameDynamicRender } from './ProcedureWorkerFrameDynamic'; +import { FrameAnimationRender } from './ProcedureWorkerFrameAnimation'; +import { FrameSpacingRender } from './ProcedureWorkerFrameSpacing'; +import { JsCpuProfilerRender } from './ProcedureWorkerCpuProfiler'; +import { SnapshotRender } from './ProcedureWorkerSnapshot'; +import { LogRender } from './ProcedureWorkerLog'; +import { HiPerfCallChartRender } from './ProcedureWorkerHiPerfCallChart'; +import { HiSysEventRender } from './ProcedureWorkerHiSysEvent'; +import { AllAppStartupRender } from './ProcedureWorkerAllAppStartup'; +import { LtpoRender } from './ProcedureWorkerLTPO'; let dataList: any = {}; let dataList2: any = {}; diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts index b39d47762..0f224ba29 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts @@ -61,7 +61,6 @@ export class AllAppStartupRender { } } -const padding = 3; export class AllAppStartupStruct extends BaseStruct { static hoverStartupStruct: AllAppStartupStruct | undefined; diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts index 68a3be693..0beca5f8c 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts @@ -13,8 +13,8 @@ * limitations under the License. */ -import { BaseStruct, dataFilterHandler, drawString } from './ProcedureWorkerCommon.js'; -import { TraceRow } from '../../component/trace/base/TraceRow.js'; +import { BaseStruct, dataFilterHandler, drawString } from './ProcedureWorkerCommon'; +import { TraceRow } from '../../component/trace/base/TraceRow'; export class LtpoRender { renderMainThread( -- Gitee From 3ef5a6ab5afd04995ac7acb221eaa3bf5462aba8 Mon Sep 17 00:00:00 2001 From: danghongquan Date: Mon, 11 Dec 2023 10:38:57 +0800 Subject: [PATCH 3/6] Code optimization_dhq Signed-off-by: danghongquan --- .../trace/component/chart/SpAllAppStartups.ts | 2 +- .../trace/component/chart/SpChartManager.ts | 1 - ide/src/trace/component/chart/SpLTPO.ts | 44 +++++++++++-------- ide/src/trace/database/SqlLite.ts | 9 ++-- .../ui-worker/ProcedureWorkerAllAppStartup.ts | 2 +- .../database/ui-worker/ProcedureWorkerLTPO.ts | 8 +++- 6 files changed, 39 insertions(+), 27 deletions(-) diff --git a/ide/src/trace/component/chart/SpAllAppStartups.ts b/ide/src/trace/component/chart/SpAllAppStartups.ts index d984cfd58..4c3d41d8b 100644 --- a/ide/src/trace/component/chart/SpAllAppStartups.ts +++ b/ide/src/trace/component/chart/SpAllAppStartups.ts @@ -30,7 +30,7 @@ export class SpAllAppStartupsChart { static APP_STARTUP_PID_ARR: Array = []; static jsonRow: TraceRow | undefined; static trace: SpSystemTrace; - static AllAppStartupsNameArr: any[] = []; + static AllAppStartupsNameArr: string[] = []; static allAppStartupsAva: number[] = []; constructor(trace: SpSystemTrace) { diff --git a/ide/src/trace/component/chart/SpChartManager.ts b/ide/src/trace/component/chart/SpChartManager.ts index be9ab6f42..8d9084bf2 100644 --- a/ide/src/trace/component/chart/SpChartManager.ts +++ b/ide/src/trace/component/chart/SpChartManager.ts @@ -51,7 +51,6 @@ import { SpLogChart } from './SpLogChart'; import { SpHiSysEventChart } from './SpHiSysEventChart'; import { SpAllAppStartupsChart } from './SpAllAppStartups'; import {setVSyncData} from './VSync'; -// import { SegMenTaTion } from './SpSegmentationChart'; import { SpLtpoChart } from './SpLTPO'; export class SpChartManager { diff --git a/ide/src/trace/component/chart/SpLTPO.ts b/ide/src/trace/component/chart/SpLTPO.ts index de1e4b14e..0fb94defa 100644 --- a/ide/src/trace/component/chart/SpLTPO.ts +++ b/ide/src/trace/component/chart/SpLTPO.ts @@ -31,12 +31,12 @@ export class SpLtpoChart { static APP_STARTUP_PID_ARR: Array = []; static jsonRow: TraceRow | undefined; static trace: SpSystemTrace; - static presentArr: Array = []; - static vsyncNameList: Array = []; - static fanceNameList: Array = []; - static fpsnameList: Array = []; - static ltpoDataArr: Array = []; - static sendDataArr: Array = []; + static presentArr: Array = []; + static vsyncNameList: Array = []; + static fanceNameList: Array = []; + static fpsnameList: Array = []; + static ltpoDataArr: Array = []; + static sendDataArr: Array = []; constructor(trace: SpSystemTrace) { SpLtpoChart.trace = trace; } @@ -48,15 +48,15 @@ export class SpLtpoChart { SpLtpoChart.fpsnameList = await queryFpsNameList(); SpLtpoChart.vsyncNameList.map((item) => { let cutNameArr = item.name!.split(":"); - item.vsyncId = cutNameArr[cutNameArr.length - 1]; + item.vsyncId = Number(cutNameArr[cutNameArr.length - 1]); }) SpLtpoChart.fanceNameList.map((item) => { let cutFanceNameArr = item.name!.split(" "); - item.fanceId = cutFanceNameArr[cutFanceNameArr.length - 1]; + item.fanceId = Number(cutFanceNameArr[cutFanceNameArr.length - 1]); }) SpLtpoChart.fpsnameList.map((item) => { let cutFpsNameArr = item.name!.split(",")[0].split(":"); - item.fps = cutFpsNameArr[cutFpsNameArr.length - 1] + item.fps = Number(cutFpsNameArr[cutFpsNameArr.length - 1]) }) let vsyncIndex = 0; let fanceIndex = 0; @@ -131,8 +131,8 @@ export class SpLtpoChart { row.supplier = async (): Promise> => { SpLtpoChart.presentArr = await queryPresentInfo(); SpLtpoChart.presentArr.map((item) => { - let cutPresentArr = item.name.split(" ") - item.presentFance = cutPresentArr[cutPresentArr.length - 1] + let cutPresentArr = item.name!.split(" ") + item.presentFance = Number(cutPresentArr[cutPresentArr.length - 1]) }) let ltpoIndex = 0; let presentIndex = 0; @@ -140,9 +140,9 @@ export class SpLtpoChart { if (SpLtpoChart.presentArr && SpLtpoChart.presentArr.length) { while (ltpoIndex < SpLtpoChart.ltpoDataArr.length) { if (SpLtpoChart.ltpoDataArr[ltpoIndex].fanceId === Number(SpLtpoChart.presentArr[presentIndex].presentFance)) { - SpLtpoChart.ltpoDataArr[ltpoIndex].startTs = SpLtpoChart.presentArr[presentIndex].ts - (window as any).recordStartNS; + SpLtpoChart.ltpoDataArr[ltpoIndex].startTs = Number(SpLtpoChart.presentArr[presentIndex].ts) - (window as any).recordStartNS; SpLtpoChart.ltpoDataArr[ltpoIndex].dur = SpLtpoChart.presentArr[presentIndex].dur; - SpLtpoChart.ltpoDataArr[ltpoIndex].nextStartTs = SpLtpoChart.presentArr[presentIndex + 1] ? SpLtpoChart.presentArr[presentIndex + 1].ts - (window as any).recordStartNS : ''; + SpLtpoChart.ltpoDataArr[ltpoIndex].nextStartTs = SpLtpoChart.presentArr[presentIndex + 1] ? Number(SpLtpoChart.presentArr[presentIndex + 1].ts) - (window as any).recordStartNS : ''; SpLtpoChart.ltpoDataArr[ltpoIndex].nextDur = SpLtpoChart.presentArr[presentIndex + 1] ? SpLtpoChart.presentArr[presentIndex + 1].dur : 0; ltpoIndex++; if (presentIndex < SpLtpoChart.presentArr.length - 1) presentIndex++; @@ -160,7 +160,7 @@ export class SpLtpoChart { sendStartTs = Number(SpLtpoChart.ltpoDataArr[i].startTs) + Number(SpLtpoChart.ltpoDataArr[i].dur); sendDur = Number(SpLtpoChart.ltpoDataArr[i].nextStartTs) + Number(SpLtpoChart.ltpoDataArr[i].nextDur) - sendStartTs; let tmpDur = Math.ceil(sendDur / 1000000) - sendLossFrames = (tmpDur * SpLtpoChart.ltpoDataArr[i].fps / 1000 - 1) < 1 ? 0 : Math.floor(tmpDur * SpLtpoChart.ltpoDataArr[i].fps / 1000 - 1) + sendLossFrames = (tmpDur * Number(SpLtpoChart.ltpoDataArr[i].fps) / 1000 - 1) < 1 ? 0 : Math.floor(tmpDur * Number(SpLtpoChart.ltpoDataArr[i].fps) / 1000 - 1) if (tmpDur < 170) { SpLtpoChart.sendDataArr.push( { @@ -168,12 +168,18 @@ export class SpLtpoChart { value: sendLossFrames, startTs: sendStartTs, pid: SpLtpoChart.ltpoDataArr[i].vsyncId, - process: undefined, itid: SpLtpoChart.ltpoDataArr[i].vsyncId, - endItid: undefined, - tid: undefined, - startName: undefined, - stepName: undefined, + name: undefined, + presentFance: undefined, + ts: undefined, + vsyncId: undefined, + fanceId: undefined, + fps: undefined, + nextStartTs: undefined, + nextDur: undefined, + translateY: undefined, + frame: undefined, + isHover: false } ) } diff --git a/ide/src/trace/database/SqlLite.ts b/ide/src/trace/database/SqlLite.ts index 1c4b00f6a..689802717 100644 --- a/ide/src/trace/database/SqlLite.ts +++ b/ide/src/trace/database/SqlLite.ts @@ -90,6 +90,7 @@ import { type SnapshotStruct } from './ui-worker/ProcedureWorkerSnapshot'; import { type MemoryConfig } from '../bean/MemoryConfig'; import { LogStruct } from './ui-worker/ProcedureWorkerLog'; import { HiSysEventStruct } from './ui-worker/ProcedureWorkerHiSysEvent'; +import { LtpoStruct } from './ui-worker/ProcedureWorkerLTPO'; class DataWorkerThread { taskMap: any = {}; @@ -1465,27 +1466,27 @@ order by start_name;`, { $pid: pid } ); - export const queryPresentInfo =(): Promise > => + export const queryPresentInfo =(): Promise > => query( 'queryPresentInfo', `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(112,114,101,115,101,110,116,37)}'))` ) - export const queryVsNameList = ():Promise> => + export const queryVsNameList = ():Promise> => query( 'queryVsNameList', `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) AND name LIKE('${String.fromCharCode(72,58,82,101,99,101,105,118,101,86,115,121,110,99,37)}')` ) - export const queryFanceNameList = ():Promise> => + export const queryFanceNameList = ():Promise> => query( 'queryFanceNameList', `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) AND name LIKE('${String.fromCharCode(72,58,65,99,113,117,105,114,101,32,70,101,110,99,101,37)}')` ) - export const queryFpsNameList = ():Promise> => + export const queryFpsNameList = ():Promise> => query( 'queryFpsNameList', `SELECT name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts index 0f224ba29..0527f12f4 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts @@ -101,7 +101,7 @@ export class AllAppStartupStruct extends BaseStruct { } } - static async getStartupName(pid: number): Promise { + static async getStartupName(pid: number): Promise { let singleAppName = await querySingleAppStartupsName(pid); return singleAppName[0].name; } diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts index 0beca5f8c..291a8feaf 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts @@ -76,12 +76,18 @@ export class LtpoStruct extends BaseStruct { static selectLtpoStruct: LtpoStruct | undefined; static maxVal: number | undefined; dur: number | undefined; - value: string | undefined; name: string | undefined; presentFance: number | undefined; ts: number | undefined; vsyncId: number | undefined; fanceId: number | undefined; + fps: number | undefined; + startTs: number | undefined; + nextStartTs: string | number | undefined; + nextDur: number | undefined; + value: number | undefined ; + pid: number | undefined; + itid: number | undefined; static draw(ctx: CanvasRenderingContext2D, data: LtpoStruct): void { if (data.frame) { -- Gitee From f8f6cee9b91ee28c18c260c7ab848bf618aafb8d Mon Sep 17 00:00:00 2001 From: danghongquan Date: Mon, 11 Dec 2023 11:53:37 +0800 Subject: [PATCH 4/6] AllAppStartups_repari Signed-off-by: danghongquan --- ide/src/trace/component/SpSystemTrace.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index 114913023..696860880 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -2484,6 +2484,7 @@ export class SpSystemTrace extends BaseElement { JsCpuProfilerStruct.selectJsCpuProfilerStruct = undefined; SnapshotStruct.selectSnapshotStruct = undefined; HiPerfCallChartStruct.selectStruct = undefined; + AllAppStartupStruct.selectStartupStruct = undefined; } isWASDKeyPress() { -- Gitee From 56d99103121a3be5b636c752f6854c32b60d8bb4 Mon Sep 17 00:00:00 2001 From: danghongquan Date: Mon, 11 Dec 2023 15:57:19 +0800 Subject: [PATCH 5/6] Keyboard_repair Signed-off-by: danghongquan --- ide/src/trace/SpApplication.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts index 5b760f70c..6fd8b5051 100644 --- a/ide/src/trace/SpApplication.ts +++ b/ide/src/trace/SpApplication.ts @@ -1448,12 +1448,12 @@ export class SpApplication extends BaseElement { }, }, { - title: 'Keyboard shortcuts', + title: 'Keyboard Shortcuts', icon: 'smart-help', clickHandler: function (item: MenuItem) { SpStatisticsHttpUtil.addOrdinaryVisitAction({ - event: 'Keyboard shortcuts', - action: 'Keyboard shortcuts', + event: 'Keyboard Shortcuts', + action: 'Keyboard Shortcuts', }); that.search = false; showContent(SpKeyboard); @@ -1876,14 +1876,14 @@ export class SpApplication extends BaseElement { }, }, { - title: 'Keyboard shortcuts', + title: 'Keyboard Shortcuts', icon: 'smart-help', clickHandler: function (item: MenuItem) { that.search = false; showContent(SpKeyboard); SpStatisticsHttpUtil.addOrdinaryVisitAction({ - event: 'Keyboard shortcuts', - action: 'Keyboard shortcuts', + event: 'Keyboard Shortcuts', + action: 'Keyboard Shortcuts', }); }, }, -- Gitee From 79a8a20eac1531bd7306c2b066492e62ee1b5c2b Mon Sep 17 00:00:00 2001 From: danghongquan Date: Fri, 15 Dec 2023 16:14:01 +0800 Subject: [PATCH 6/6] hitchTimeDemo Signed-off-by: danghongquan --- ide/src/trace/component/SpSystemTrace.ts | 5 + ide/src/trace/component/chart/SpLTPO.ts | 235 ++++++++++-------- .../trace/component/trace/base/TraceRow.ts | 1 + ide/src/trace/database/SqlLite.ts | 18 +- .../database/ui-worker/ProcedureWorker.ts | 2 + .../ui-worker/ProcedureWorkerHitchTime.ts | 112 +++++++++ .../database/ui-worker/ProcedureWorkerLTPO.ts | 7 +- .../ui-worker/ProcedureWorkerCpuState.test.ts | 3 +- 8 files changed, 260 insertions(+), 123 deletions(-) create mode 100644 ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index fd0e13606..6834c59f0 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -109,6 +109,8 @@ import { type HiSysEventStruct } from '../database/ui-worker/ProcedureWorkerHiSy import { InitAnalysis } from '../database/logic-worker/ProcedureLogicWorkerCommon'; import { type SpKeyboard } from '../component/SpKeyboard'; import { drawVSync, enableVSync, setVSyncDisable } from './chart/VSync'; +import { LtpoStruct } from '../database/ui-worker/ProcedureWorkerLTPO'; +import { HitchTimeStruct } from '../database/ui-worker/ProcedureWorkerHitchTime' function dpr() { return window.devicePixelRatio || 1; @@ -2271,6 +2273,7 @@ export class SpSystemTrace extends BaseElement { }; favoriteChangeHandler = (row: TraceRow) => { + console.log(row.offsetTop, row.offsetHeight,"------2-2-2--") info('favoriteChangeHandler', row.frame, row.offsetTop, row.offsetHeight); }; @@ -2487,6 +2490,8 @@ export class SpSystemTrace extends BaseElement { SnapshotStruct.selectSnapshotStruct = undefined; HiPerfCallChartStruct.selectStruct = undefined; AllAppStartupStruct.selectStartupStruct = undefined; + LtpoStruct.selectLtpoStruct = undefined; + HitchTimeStruct.selectHitchTimeStruct = undefined; } isWASDKeyPress() { diff --git a/ide/src/trace/component/chart/SpLTPO.ts b/ide/src/trace/component/chart/SpLTPO.ts index 0fb94defa..e3c61ba90 100644 --- a/ide/src/trace/component/chart/SpLTPO.ts +++ b/ide/src/trace/component/chart/SpLTPO.ts @@ -17,14 +17,13 @@ import { SpSystemTrace } from '../SpSystemTrace'; import { TraceRow } from '../trace/base/TraceRow'; import { renders } from '../../database/ui-worker/ProcedureWorker'; import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq'; -import { ColorUtils } from '../trace/base/ColorUtils'; import { queryPresentInfo, - queryVsNameList, queryFanceNameList, queryFpsNameList } from '../../database/SqlLite'; import { LtpoRender, LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO' +import { HitchTimeStruct, hitchTimeRender } from '../../database/ui-worker/ProcedureWorkerHitchTime'; export class SpLtpoChart { private readonly trace: SpSystemTrace | undefined; @@ -32,166 +31,145 @@ export class SpLtpoChart { static jsonRow: TraceRow | undefined; static trace: SpSystemTrace; static presentArr: Array = []; - static vsyncNameList: Array = []; static fanceNameList: Array = []; static fpsnameList: Array = []; static ltpoDataArr: Array = []; - static sendDataArr: Array = []; + static sendLTPODataArr: Array = []; + static sendHitchDataArr: Array = []; constructor(trace: SpSystemTrace) { SpLtpoChart.trace = trace; } async init() { SpLtpoChart.ltpoDataArr = []; - SpLtpoChart.vsyncNameList = await queryVsNameList(); SpLtpoChart.fanceNameList = await queryFanceNameList(); SpLtpoChart.fpsnameList = await queryFpsNameList(); - SpLtpoChart.vsyncNameList.map((item) => { - let cutNameArr = item.name!.split(":"); - item.vsyncId = Number(cutNameArr[cutNameArr.length - 1]); - }) SpLtpoChart.fanceNameList.map((item) => { let cutFanceNameArr = item.name!.split(" "); item.fanceId = Number(cutFanceNameArr[cutFanceNameArr.length - 1]); }) SpLtpoChart.fpsnameList.map((item) => { let cutFpsNameArr = item.name!.split(",")[0].split(":"); - item.fps = Number(cutFpsNameArr[cutFpsNameArr.length - 1]) + item.fps = Number(cutFpsNameArr[cutFpsNameArr.length - 1]); }) - let vsyncIndex = 0; - let fanceIndex = 0; - if (SpLtpoChart.vsyncNameList && SpLtpoChart.vsyncNameList.length && SpLtpoChart.fanceNameList && SpLtpoChart.fanceNameList.length) { - while (vsyncIndex < SpLtpoChart.vsyncNameList.length) { - if ((Number(SpLtpoChart.vsyncNameList[vsyncIndex].ts!) + Number(SpLtpoChart.vsyncNameList[vsyncIndex].dur!)) > SpLtpoChart.fanceNameList[fanceIndex].ts!) { - this.pushLtpoData(SpLtpoChart.ltpoDataArr, - Number(SpLtpoChart.fanceNameList[fanceIndex].fanceId), - Number(SpLtpoChart.vsyncNameList[vsyncIndex].vsyncId), - 0, 0, 0, 0, 0 - ) - vsyncIndex++; - if (fanceIndex < SpLtpoChart.fanceNameList.length - 1) fanceIndex++; - } else { - this.pushLtpoData(SpLtpoChart.ltpoDataArr, - -1, - Number(SpLtpoChart.vsyncNameList[vsyncIndex].vsyncId), - 0, 0, 0, 0, 0 - ) - vsyncIndex++; - } + if (SpLtpoChart.fanceNameList && SpLtpoChart.fanceNameList.length && SpLtpoChart.fpsnameList && SpLtpoChart.fpsnameList.length) { + for (let i = 0; i < SpLtpoChart.fanceNameList.length; i++) { + let tmpFps = SpLtpoChart.fpsnameList[i]!.fps ? Number(SpLtpoChart.fpsnameList[i]!.fps) : 60; + this.pushLtpoData( + SpLtpoChart.ltpoDataArr, + Number(SpLtpoChart.fanceNameList[i]!.fanceId!), + tmpFps, + 0, 0, 0, 0 + ); } } - if (SpLtpoChart.fpsnameList && SpLtpoChart.fpsnameList.length && SpLtpoChart.ltpoDataArr && SpLtpoChart.ltpoDataArr.length) { - for (let i = 0; i < SpLtpoChart.ltpoDataArr.length; i++) { - if (i === 0) { - SpLtpoChart.ltpoDataArr[i].fps = 60 - } else { - SpLtpoChart.ltpoDataArr[i].fps = SpLtpoChart.fpsnameList[i - 1]?SpLtpoChart.fpsnameList[i - 1].fps:60; - } - } + if (SpLtpoChart.fanceNameList && SpLtpoChart.fanceNameList.length) { + await this.initFolder(); + await this.initHitchTime(); } - - if (SpLtpoChart.vsyncNameList && SpLtpoChart.vsyncNameList.length) await this.initFolder(); } pushLtpoData( lptoArr: any[] | undefined, fanceId: Number, - vsyncId: Number, fps: Number, startTs: Number, dur: Number, nextStartTs: Number, nextDur: number - ):void { + ): void { lptoArr?.push( { - lptoArr: lptoArr, fanceId: fanceId, - vsyncId: vsyncId, fps: fps, startTs: startTs, dur: dur, nextStartTs: nextStartTs, nextDur: nextDur } - ) + ); + } + sendDataHandle(_presentArr: LtpoStruct[], _ltpoDataArr: LtpoStruct[]): Array { + let ltpoIndex = 0; + let presentIndex = 0; + let sendDataArr = []; + if (_presentArr && _presentArr.length) { + while (ltpoIndex < _ltpoDataArr.length) { + if (_ltpoDataArr[ltpoIndex].fanceId === Number(_presentArr[presentIndex].presentFance)) { + _ltpoDataArr[ltpoIndex].startTs = Number(_presentArr[presentIndex].ts) - (window as any).recordStartNS; + _ltpoDataArr[ltpoIndex].dur = _presentArr[presentIndex].dur; + _ltpoDataArr[ltpoIndex].nextStartTs = _presentArr[presentIndex + 1] ? Number(_presentArr[presentIndex + 1].ts) - (window as any).recordStartNS : ''; + _ltpoDataArr[ltpoIndex].nextDur = _presentArr[presentIndex + 1] ? _presentArr[presentIndex + 1].dur : 0; + ltpoIndex++; + if (presentIndex < _presentArr.length - 1) { + presentIndex++; + } + } else { + ltpoIndex++; + } + } + } + for (let i = 0; i < _ltpoDataArr.length; i++) { + if (_ltpoDataArr[i].fanceId !== -1 && _ltpoDataArr[i].nextDur) { + let sendStartTs: number | undefined = 0; + let sendDur: number | undefined = 0; + sendStartTs = Number(SpLtpoChart.ltpoDataArr[i].startTs) + Number(SpLtpoChart.ltpoDataArr[i].dur); + sendDur = Number(SpLtpoChart.ltpoDataArr[i].nextStartTs) + Number(SpLtpoChart.ltpoDataArr[i].nextDur) - sendStartTs; + let tmpDur = (Math.ceil(sendDur / 100000)) / 10; + if (tmpDur < 170) { + sendDataArr.push( + { + dur: sendDur, + value: 0, + startTs: sendStartTs, + pid: SpLtpoChart.ltpoDataArr[i].fanceId, + itid: SpLtpoChart.ltpoDataArr[i].fanceId, + name: undefined, + presentFance: SpLtpoChart.ltpoDataArr[i].fanceId, + ts: undefined, + fanceId: SpLtpoChart.ltpoDataArr[i].fanceId, + fps: SpLtpoChart.ltpoDataArr[i].fps, + nextStartTs: SpLtpoChart.ltpoDataArr[i].nextStartTs, + nextDur: SpLtpoChart.ltpoDataArr[i].nextDur, + translateY: undefined, + frame: undefined, + isHover: false + } + ); + } + } + } + return sendDataArr; } async initFolder() { SpLtpoChart.presentArr = []; let row: TraceRow = TraceRow.skeleton(); - row.setAttribute('hasStartup', 'true'); - row.rowId = ``; - row.index = 0; - row.rowType = TraceRow.ROW_TYPE_LTPO; + row.rowId = `LTPO ${SpLtpoChart.fanceNameList[0].fanceId}`; row.rowParentId = ''; + row.rowType = TraceRow.ROW_TYPE_LTPO; row.folder = false; row.style.height = '40px'; row.name = `Lost Frames`; row.favoriteChangeHandler = SpLtpoChart.trace.favoriteChangeHandler; + row.selectChangeHandler = SpLtpoChart.trace.selectChangeHandler; row.supplier = async (): Promise> => { SpLtpoChart.presentArr = await queryPresentInfo(); SpLtpoChart.presentArr.map((item) => { - let cutPresentArr = item.name!.split(" ") - item.presentFance = Number(cutPresentArr[cutPresentArr.length - 1]) + let cutPresentArr = item.name!.split(" "); + item.presentFance = Number(cutPresentArr[cutPresentArr.length - 1]); }) - let ltpoIndex = 0; - let presentIndex = 0; - SpLtpoChart.sendDataArr = []; - if (SpLtpoChart.presentArr && SpLtpoChart.presentArr.length) { - while (ltpoIndex < SpLtpoChart.ltpoDataArr.length) { - if (SpLtpoChart.ltpoDataArr[ltpoIndex].fanceId === Number(SpLtpoChart.presentArr[presentIndex].presentFance)) { - SpLtpoChart.ltpoDataArr[ltpoIndex].startTs = Number(SpLtpoChart.presentArr[presentIndex].ts) - (window as any).recordStartNS; - SpLtpoChart.ltpoDataArr[ltpoIndex].dur = SpLtpoChart.presentArr[presentIndex].dur; - SpLtpoChart.ltpoDataArr[ltpoIndex].nextStartTs = SpLtpoChart.presentArr[presentIndex + 1] ? Number(SpLtpoChart.presentArr[presentIndex + 1].ts) - (window as any).recordStartNS : ''; - SpLtpoChart.ltpoDataArr[ltpoIndex].nextDur = SpLtpoChart.presentArr[presentIndex + 1] ? SpLtpoChart.presentArr[presentIndex + 1].dur : 0; - ltpoIndex++; - if (presentIndex < SpLtpoChart.presentArr.length - 1) presentIndex++; - } else { - ltpoIndex++; - } - } - } - - for (let i = 0; i < SpLtpoChart.ltpoDataArr.length; i++) { - if (SpLtpoChart.ltpoDataArr[i].fanceId != -1 && SpLtpoChart.ltpoDataArr[i].nextDur) { - let sendStartTs: number | undefined = 0; - let sendDur: number | undefined = 0; - let sendLossFrames: number | undefined = 0; - sendStartTs = Number(SpLtpoChart.ltpoDataArr[i].startTs) + Number(SpLtpoChart.ltpoDataArr[i].dur); - sendDur = Number(SpLtpoChart.ltpoDataArr[i].nextStartTs) + Number(SpLtpoChart.ltpoDataArr[i].nextDur) - sendStartTs; - let tmpDur = Math.ceil(sendDur / 1000000) - sendLossFrames = (tmpDur * Number(SpLtpoChart.ltpoDataArr[i].fps) / 1000 - 1) < 1 ? 0 : Math.floor(tmpDur * Number(SpLtpoChart.ltpoDataArr[i].fps) / 1000 - 1) - if (tmpDur < 170) { - SpLtpoChart.sendDataArr.push( - { - dur: sendDur, - value: sendLossFrames, - startTs: sendStartTs, - pid: SpLtpoChart.ltpoDataArr[i].vsyncId, - itid: SpLtpoChart.ltpoDataArr[i].vsyncId, - name: undefined, - presentFance: undefined, - ts: undefined, - vsyncId: undefined, - fanceId: undefined, - fps: undefined, - nextStartTs: undefined, - nextDur: undefined, - translateY: undefined, - frame: undefined, - isHover: false - } - ) - } - } + SpLtpoChart.sendLTPODataArr = this.sendDataHandle(SpLtpoChart.presentArr, SpLtpoChart.ltpoDataArr); + for (let i = 0; i < SpLtpoChart.sendLTPODataArr.length; i++) { + let tmpDur = SpLtpoChart.sendLTPODataArr[i].dur! / 1000000; + SpLtpoChart.sendLTPODataArr[i].value = (Math.round(tmpDur * Number(SpLtpoChart.sendLTPODataArr[i].fps) / 1000 - 1)) < 1 ? 0 : Math.round(tmpDur * Number(SpLtpoChart.sendLTPODataArr[i].fps) / 1000 - 1); } - return SpLtpoChart.sendDataArr + return SpLtpoChart.sendLTPODataArr; } row.focusHandler = (ev) => { SpLtpoChart.trace?.displayTip( row!, LtpoStruct.hoverLtpoStruct, - `${ColorUtils.formatNumberComma(Number(LtpoStruct.hoverLtpoStruct?.value!))}` + `${(LtpoStruct.hoverLtpoStruct?.value!)}` ) }; row.onThreadHandler = (useCache): void => { @@ -214,4 +192,55 @@ export class SpLtpoChart { }; SpLtpoChart.trace.rowsEL?.appendChild(row); } + async initHitchTime() { + SpLtpoChart.presentArr = []; + let row: TraceRow = TraceRow.skeleton(); + row.rowId = `hitch-time ${SpLtpoChart.fanceNameList[1].fanceId}`; + row.rowParentId = ''; + row.rowType = TraceRow.ROW_TYPE_HITCH_TIME; + row.folder = false; + row.style.height = '40px'; + row.name = `Hitch Time`; + row.favoriteChangeHandler = SpLtpoChart.trace.favoriteChangeHandler; + row.selectChangeHandler = SpLtpoChart.trace.selectChangeHandler; + row.supplier = async (): Promise> => { + SpLtpoChart.presentArr = await queryPresentInfo(); + SpLtpoChart.presentArr.map((item) => { + let cutPresentArr = item.name!.split(" "); + item.presentFance = Number(cutPresentArr[cutPresentArr.length - 1]); + }) + SpLtpoChart.sendHitchDataArr = this.sendDataHandle(SpLtpoChart.presentArr, SpLtpoChart.ltpoDataArr); + for (let i = 0; i < SpLtpoChart.sendHitchDataArr.length; i++) { + let tmpVale = Number((Math.ceil(((SpLtpoChart.sendHitchDataArr[i].dur! / 1000000) - (1000 / SpLtpoChart.sendHitchDataArr[i].fps!)) * 10)) / 10); + SpLtpoChart.sendHitchDataArr[i].value = tmpVale < 0 ? 0 : tmpVale; + } + return SpLtpoChart.sendHitchDataArr; + } + row.focusHandler = (ev) => { + SpLtpoChart.trace?.displayTip( + row!, + HitchTimeStruct.hoverHitchTimeStruct, + `${(HitchTimeStruct.hoverHitchTimeStruct?.value!)}` + ) + }; + row.onThreadHandler = (useCache): void => { + let context: CanvasRenderingContext2D; + if (row.currentContext) { + context = row.currentContext; + } else { + context = row.collect ? SpLtpoChart.trace.canvasFavoritePanelCtx! : SpLtpoChart.trace.canvasPanelCtx!; + } + row.canvasSave(context); + (renders['hitch'] as hitchTimeRender).renderMainThread( + { + appStartupContext: context, + useCache: useCache, + type: `hitch ${row.rowId}`, + }, + row + ); + row.canvasRestore(context); + }; + SpLtpoChart.trace.rowsEL?.appendChild(row); + } } diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 77eba90ed..f1d9bbc78 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -119,6 +119,7 @@ export class TraceRow extends HTMLElement { static ROW_TYPE_LOGS = 'logs'; static ROW_TYPE_ALL_APPSTARTUPS = 'all-appstartups'; static ROW_TYPE_LTPO = 'ltpo'; + static ROW_TYPE_HITCH_TIME = 'hitch-time'; static FRAME_WIDTH: number = 0; static range: TimeRange | undefined | null; static rangeSelectObject: RangeSelectStruct | undefined; diff --git a/ide/src/trace/database/SqlLite.ts b/ide/src/trace/database/SqlLite.ts index d0c8ffd5d..5eb83d890 100644 --- a/ide/src/trace/database/SqlLite.ts +++ b/ide/src/trace/database/SqlLite.ts @@ -1516,28 +1516,22 @@ export const querySingleAppStartupsName = (pid: number): Promise> => export const queryPresentInfo =(): Promise > => query( 'queryPresentInfo', - `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(112,114,101,115,101,110,116,37)}'))` - ) - - export const queryVsNameList = ():Promise> => - query( - 'queryVsNameList', - `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) - AND name LIKE('${String.fromCharCode(72,58,82,101,99,101,105,118,101,86,115,121,110,99,37)}')` + `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(80,114,101,115,101,110,116,37)}')) + AND name LIKE('${String.fromCharCode(72,58,87,97,105,116,105,110,103,32,102,111,114,32,80,114,101,115,101,110,116,32,70,101,110,99,101,37)}')` ) export const queryFanceNameList = ():Promise> => query( 'queryFanceNameList', - `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) - AND name LIKE('${String.fromCharCode(72,58,65,99,113,117,105,114,101,32,70,101,110,99,101,37)}')` + `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(82,83,72,97,114,100,119,97,114,101,84,104,114,101,97,37)}')) + AND name LIKE('${String.fromCharCode(72,58,80,114,101,115,101,110,116,32,70,101,110,99,101,37)}')` ) export const queryFpsNameList = ():Promise> => query( 'queryFpsNameList', - `SELECT name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(114,101,110,100,101,114,95,115,101,114,118,105,99,101,37)}')) - AND name LIKE('${String.fromCharCode(37,68,97,116,97,32,114,101,102,114,101,115,104,82,97,116,101,37)}')` + `SELECT name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${String.fromCharCode(82,83,72,97,114,100,119,97,114,101,84,104,114,101,97,37)}')) + AND name LIKE('${String.fromCharCode(37,76,97,121,101,114,115,32,114,97,116,101,37)}')` ) export const queryProcessSoMaxDepth = (): Promise> => diff --git a/ide/src/trace/database/ui-worker/ProcedureWorker.ts b/ide/src/trace/database/ui-worker/ProcedureWorker.ts index 8089c46a7..57a4f2352 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorker.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorker.ts @@ -60,6 +60,7 @@ import { HiPerfCallChartRender } from './ProcedureWorkerHiPerfCallChart'; import { HiSysEventRender } from './ProcedureWorkerHiSysEvent'; import { AllAppStartupRender } from './ProcedureWorkerAllAppStartup'; import { LtpoRender } from './ProcedureWorkerLTPO'; +import { hitchTimeRender } from './ProcedureWorkerHitchTime'; let dataList: any = {}; let dataList2: any = {}; @@ -117,6 +118,7 @@ export let renders: any = { snapshot: new SnapshotRender(), logs: new LogRender(), hiSysEvent: new HiSysEventRender(), + 'hitch':new hitchTimeRender(), }; function match(type: string, req: RequestMessage): void { diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts new file mode 100644 index 000000000..4f5195c2e --- /dev/null +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts @@ -0,0 +1,112 @@ +/* + * 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 { BaseStruct, dataFilterHandler } from './ProcedureWorkerCommon'; +import { TraceRow } from '../../component/trace/base/TraceRow'; + +export class hitchTimeRender { + renderMainThread( + req: { + appStartupContext: CanvasRenderingContext2D; + useCache: boolean; + type: string; + }, + ltpoRow: TraceRow + ): void { + let list = ltpoRow.dataList; + HitchTimeStruct.maxVal = 0; + for (let i = 0; i < list.length; i++) { + if (Number(list[i].value) > HitchTimeStruct.maxVal) { + HitchTimeStruct.maxVal = Number(list[i].value) + }; + } + let filter = ltpoRow.dataListCache; + dataFilterHandler(list, filter, { + startKey: 'startTs', + durKey: 'dur', + startNS: TraceRow.range?.startNS ?? 0, + endNS: TraceRow.range?.endNS ?? 0, + totalNS: TraceRow.range?.totalNS ?? 0, + frame: ltpoRow.frame, + paddingTop: 5, + useCache: req.useCache || !(TraceRow.range?.refresh ?? false), + }); + req.appStartupContext.globalAlpha = 0.6; + let find = false; + let offset = 3; + for (let re of filter) { + if (ltpoRow.isHover) { + if ( + re.frame && + ltpoRow.hoverX >= re.frame.x - offset && + ltpoRow.hoverX <= re.frame.x + re.frame.width + offset + ) { + HitchTimeStruct.hoverHitchTimeStruct = re; + find = true; + } + } + if (!ltpoRow.isHover) HitchTimeStruct.hoverHitchTimeStruct = undefined + if (!find && ltpoRow.isHover) { + HitchTimeStruct.hoverHitchTimeStruct = undefined; + } + req.appStartupContext.beginPath() + HitchTimeStruct.draw(req.appStartupContext, re); + req.appStartupContext.closePath() + } + } +} + + +export class HitchTimeStruct extends BaseStruct { + static hoverHitchTimeStruct: HitchTimeStruct | undefined; + static selectHitchTimeStruct: HitchTimeStruct | undefined; + static maxVal: number = 0; + dur: number | undefined; + name: string | undefined; + presentFance: number | undefined; + ts: number | undefined; + fanceId: number | undefined; + fps: number | undefined; + startTs: number | undefined; + nextStartTs: string | number | undefined; + nextDur: number | undefined; + value: number | undefined; + pid: number | undefined; + itid: number | undefined; + + static draw(ctx: CanvasRenderingContext2D, data: HitchTimeStruct): void { + if (data.frame) { + ctx.fillStyle = '#9933FA'; + if (data === HitchTimeStruct.hoverHitchTimeStruct || data === HitchTimeStruct.selectHitchTimeStruct) { + let drawHeight: number = Math.floor( + ((Number(data.value) || 0) * (data.frame.height || 0) * 1.0) / HitchTimeStruct.maxVal! + ); + drawHeight = drawHeight < 1 ? 1 : drawHeight + ctx.globalAlpha = 1.0; + ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight); + ctx.lineWidth = 1; + ctx.strokeStyle = ' #0000FF'; + ctx.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight) + } else { + ctx.globalAlpha = 0.6; + let drawHeight: number = Math.floor(((Number(data.value) || 0) * (data.frame.height || 0)) / HitchTimeStruct.maxVal!); + drawHeight = drawHeight < 1 ? 1 : drawHeight + ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight) + } + + } + } + +} diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts index 291a8feaf..cb986a5cf 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -import { BaseStruct, dataFilterHandler, drawString } from './ProcedureWorkerCommon'; +import { BaseStruct, dataFilterHandler } from './ProcedureWorkerCommon'; import { TraceRow } from '../../component/trace/base/TraceRow'; export class LtpoRender { @@ -45,10 +45,6 @@ export class LtpoRender { let find = false; let offset = 3; for (let re of filter) { - if (re.frame) { - re.frame.height = Number(re.value) === 0 ? 1 : Number(re.value) * 30 / LtpoStruct.maxVal; - re.frame.y = 35 - re.frame.height; - } if (ltpoRow.isHover) { if ( re.frame && @@ -79,7 +75,6 @@ export class LtpoStruct extends BaseStruct { name: string | undefined; presentFance: number | undefined; ts: number | undefined; - vsyncId: number | undefined; fanceId: number | undefined; fps: number | undefined; startTs: number | undefined; diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts index 5d2cbc3b6..0c96498c0 100644 --- a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts +++ b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts @@ -23,8 +23,7 @@ jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => import { CpuStateRender, CpuStateStruct, - cpuState, -} from '../../../../dist/trace/database/ui-worker/ProcedureWorkerCpuState.js'; +} from '../../../../dist/trace/database/ui-worker/ProcedureWorkerCpuState'; describe('ProcedureWorkerCpuState Test', () => { it('ProcedureWorkerCpuStateTest01', function () { -- Gitee