From cad3a1534944748298f3621d7df81a349ca6accf Mon Sep 17 00:00:00 2001 From: danghongquan Date: Thu, 4 Jan 2024 19:12:55 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=91=8A=E8=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: danghongquan --- ide/src/trace/component/chart/SpAllAppStartups.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ide/src/trace/component/chart/SpAllAppStartups.ts b/ide/src/trace/component/chart/SpAllAppStartups.ts index 917f44ef..298c11ff 100644 --- a/ide/src/trace/component/chart/SpAllAppStartups.ts +++ b/ide/src/trace/component/chart/SpAllAppStartups.ts @@ -13,13 +13,13 @@ * limitations under the License. */ -import { SpSystemTrace } from '../SpSystemTrace'; +import { type SpSystemTrace } from '../SpSystemTrace'; import { TraceRow } from '../trace/base/TraceRow'; import { renders } from '../../database/ui-worker/ProcedureWorker'; -import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq'; +import { type CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq'; import { queryAppStartupProcessIds, queryProcessStartup, querySingleAppStartupsName } from '../../database/SqlLite'; import { FlagsConfig } from '../SpFlags'; -import { AllAppStartupStruct, AllAppStartupRender } from '../../database/ui-worker/ProcedureWorkerAllAppStartup'; +import { type AllAppStartupStruct, type AllAppStartupRender } from '../../database/ui-worker/ProcedureWorkerAllAppStartup'; export class SpAllAppStartupsChart { private readonly trace: SpSystemTrace | undefined; -- Gitee From dc378c493c4a20de39d1377d92b244fbc854be31 Mon Sep 17 00:00:00 2001 From: liufei Date: Fri, 5 Jan 2024 16:42:26 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E5=91=8A=E8=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ide/src/trace/component/SpHelp.ts | 4 +- .../component/chart/SpSegmentationChart.ts | 134 +++++++++--------- .../ui-worker/ProcedureWorkerFreqExtend.ts | 26 ++-- .../ui-worker/procedureWorkerBinder.ts | 30 ++-- 4 files changed, 95 insertions(+), 99 deletions(-) diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts index 5d81388b..0e66eaa1 100644 --- a/ide/src/trace/component/SpHelp.ts +++ b/ide/src/trace/component/SpHelp.ts @@ -14,8 +14,8 @@ */ import { BaseElement, element } from '../../base-ui/BaseElement'; -import { LitMainMenuGroup } from '../../base-ui/menu/LitMainMenuGroup'; -import { LitMainMenu, MenuItem } from '../../base-ui/menu/LitMainMenu'; +import { type LitMainMenuGroup } from '../../base-ui/menu/LitMainMenuGroup'; +import { type LitMainMenu, type MenuItem } from '../../base-ui/menu/LitMainMenu'; import { LitMainMenuItem } from '../../base-ui/menu/LitMainMenuItem'; import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil'; diff --git a/ide/src/trace/component/chart/SpSegmentationChart.ts b/ide/src/trace/component/chart/SpSegmentationChart.ts index caec30bf..e37fde9f 100644 --- a/ide/src/trace/component/chart/SpSegmentationChart.ts +++ b/ide/src/trace/component/chart/SpSegmentationChart.ts @@ -39,9 +39,9 @@ export class SpSegmentationChart { setGpuData(data, currentMaxValue, type); } else { setSchedData(data, currentMaxValue, type); - } + }; SpSegmentationChart.trace.refreshCanvas(true); - } + }; // binder联动调用 static setBinderChartData(type: string, data: Array>): void { @@ -55,10 +55,10 @@ export class SpSegmentationChart { v.name === 'binder transaction' ? 0 : v.name === 'binder transaction async' - ? 1 - : v.name === 'binder reply' - ? 2 - : 3, + ? 1 + : v.name === 'binder reply' + ? 2 + : 3, startNS: v.startNS, dur: v.dur, name: `${v.name}`, @@ -72,13 +72,12 @@ export class SpSegmentationChart { SpSegmentationChart.binderRow!.dataList = []; SpSegmentationChart.binderRow!.dataListCache = []; SpSegmentationChart.binderRow!.isComplete = false; - SpSegmentationChart.binderRow!.style.height = `${ - BinderStruct.maxHeight > 2 ? BinderStruct.maxHeight * 20 + 20 : 40 - }px`; + SpSegmentationChart.binderRow!.style.height = `${BinderStruct.maxHeight > 2 ? BinderStruct.maxHeight * 20 + 20 : 40 + }px`; // @ts-ignore SpSegmentationChart.binderRow!.supplier = (): Promise> => new Promise>((resolve) => resolve(chartData)); - } + }; // 悬浮联动 static tabHover(type: String, tableIsHover: boolean = false, cycle: number = -1): void { @@ -91,24 +90,24 @@ export class SpSegmentationChart { } else { CpuFreqExtendStruct.cycle = -1; CpuFreqExtendStruct.hoverCpuFreqStruct = undefined; - } + }; } else if (type === 'BINDER') { if (tableIsHover) { BinderStruct.hoverCycle = cycle; } else { BinderStruct.hoverCycle = -1; - } - } + }; + }; SpSegmentationChart.trace.refreshCanvas(true, 'flagChange'); - } + }; constructor(trace: SpSystemTrace) { SpSegmentationChart.trace = trace; - } + }; async init() { let irqList = await queryIrqList(); - if (irqList.length == 0) { + if (irqList.length === 0) { return; } else { await this.initFolder(); @@ -116,8 +115,8 @@ export class SpSegmentationChart { await this.initGpuTrace(); await this.initSchedTrace(); await this.initBinderTrace(); - } - } + }; + }; async initFolder() { let row = TraceRow.skeleton(); @@ -143,17 +142,17 @@ export class SpSegmentationChart { }, row ); - } + }; row.canvasRestore(SpSegmentationChart.trace.canvasPanelCtx!); }; this.rowFolder = row; SpSegmentationChart.trace.rowsEL?.appendChild(row); - } + }; async initCpuFreq() { // json文件泳道 SpSegmentationChart.jsonRow = TraceRow.skeleton(); - SpSegmentationChart.jsonRow.rowId = `json0`; + SpSegmentationChart.jsonRow.rowId = `cpu-freq`; SpSegmentationChart.jsonRow.rowType = TraceRow.ROW_TYPE_CPU_COMPUTILITY; SpSegmentationChart.jsonRow.rowParentId = ''; SpSegmentationChart.jsonRow.style.height = '40px'; @@ -170,7 +169,7 @@ export class SpSegmentationChart { chartData.map((v) => { for (let key in v.freqInfo) { mapData.set(Number(key), Number(v.freqInfo[key])); - } + }; SpSegmentationChart.freqInfoMapData.set(v.cpuId, mapData); mapData = new Map(); }); @@ -179,8 +178,7 @@ export class SpSegmentationChart { SpSegmentationChart.trace?.displayTip( SpSegmentationChart.jsonRow!, CpuFreqExtendStruct.hoverCpuFreqStruct, - `${ - CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value! + `${CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value! }` ); }; @@ -198,13 +196,13 @@ export class SpSegmentationChart { context = SpSegmentationChart.jsonRow!.collect ? SpSegmentationChart.trace.canvasFavoritePanelCtx! : SpSegmentationChart.trace.canvasPanelCtx!; - } + }; SpSegmentationChart.jsonRow!.canvasSave(context); (renders['freq-extend'] as FreqExtendRender).renderMainThread( { context: context, useCache: useCache, - type: `json0`, + type: `cpu-freq`, }, SpSegmentationChart.jsonRow! ); @@ -212,7 +210,7 @@ export class SpSegmentationChart { }; SpSegmentationChart.trace.rowsEL?.appendChild(SpSegmentationChart.jsonRow); this.rowFolder!.addChildTraceRow(SpSegmentationChart.jsonRow); - } + }; async initGpuTrace() { SpSegmentationChart.GpuRow = TraceRow.skeleton(); @@ -230,8 +228,7 @@ export class SpSegmentationChart { SpSegmentationChart.trace?.displayTip( SpSegmentationChart.GpuRow!, CpuFreqExtendStruct.hoverCpuFreqStruct, - `${ - CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value! + `${CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value! }` ); }; @@ -252,7 +249,7 @@ export class SpSegmentationChart { { context: context, useCache: useCache, - type: `json1`, + type: `gpu-freq`, }, SpSegmentationChart.GpuRow! ); @@ -260,7 +257,7 @@ export class SpSegmentationChart { }; SpSegmentationChart.trace.rowsEL?.appendChild(SpSegmentationChart.GpuRow); this.rowFolder!.addChildTraceRow(SpSegmentationChart.GpuRow); - } + }; async initSchedTrace() { SpSegmentationChart.schedRow = TraceRow.skeleton(); @@ -292,13 +289,13 @@ export class SpSegmentationChart { context = SpSegmentationChart.schedRow!.collect ? SpSegmentationChart.trace.canvasFavoritePanelCtx! : SpSegmentationChart.trace.canvasPanelCtx!; - } + }; SpSegmentationChart.schedRow!.canvasSave(context); (renders['freq-extend'] as FreqExtendRender).renderMainThread( { context: context, useCache: useCache, - type: `json0`, + type: `sched`, }, SpSegmentationChart.schedRow! ); @@ -306,7 +303,7 @@ export class SpSegmentationChart { }; SpSegmentationChart.trace.rowsEL?.appendChild(SpSegmentationChart.schedRow); this.rowFolder!.addChildTraceRow(SpSegmentationChart.schedRow); - } + }; async initBinderTrace() { SpSegmentationChart.binderRow = TraceRow.skeleton(); @@ -327,8 +324,8 @@ export class SpSegmentationChart { BinderStruct.maxHeight * 20 - v.depth * 20 + v.value * 20 + 20 > SpSegmentationChart.binderRow!.hoverY ) { return v; - } - } + }; + }; }); }; SpSegmentationChart.binderRow.supplier = (): Promise> => @@ -357,21 +354,18 @@ export class SpSegmentationChart { SpSegmentationChart.trace!.displayTip( SpSegmentationChart.binderRow!, BinderStruct.hoverCpuFreqStruct, - `Cycle: ${ - BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.cycle : 0 + `Cycle: ${BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.cycle : 0 }
- Name: ${ - BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.name : '' - }
- Count: ${ - BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.value : 0 - }` + Name: ${BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.name : '' + }
+ Count: ${BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.value : 0 + }` ); }; SpSegmentationChart.trace.rowsEL?.appendChild(SpSegmentationChart.binderRow); this.rowFolder!.addChildTraceRow(SpSegmentationChart.binderRow); - } -} + }; +}; class FreqChartDataStruct { cpu?: number = 0; @@ -384,7 +378,7 @@ class FreqChartDataStruct { type?: string = ''; count?: number = 0; cycleStartTime?: number = 0; -} +}; class BinderDataStruct { name: string = ''; @@ -393,7 +387,7 @@ class BinderDataStruct { startNS: number = 0; idx: number = -1; depth?: number = 0; -} +}; function setCpuData(data: Array, currentMaxValue: number, type: string) { let chartData = data.map((v: FreqChartDataStruct) => { @@ -416,14 +410,14 @@ function setCpuData(data: Array, currentMaxValue: number, t // @ts-ignore SpSegmentationChart.jsonRow!.supplier = (): Promise> => new Promise>((resolve) => resolve(chartData)); -} +}; function setGpuData(data: Array, currentMaxValue: number, type: string): void { let chartData = data.map((v: FreqChartDataStruct) => { let _count = Number(v.count); if (_count > currentMaxValue) { currentMaxValue = _count; - } + }; return { cpu: 7, dur: v.dur ? Number(v.dur * 1000000) : 0, @@ -450,7 +444,7 @@ function setSchedData(data: Array, currentMaxValue: number return { cpu: 5, dur: Number(v.duration) * 1000000, - value: v.count, + value: Number(v.count), startNS: Number(v.cycleStartTime) * 1000000, cycle: v.cycle, type, @@ -460,18 +454,20 @@ function setSchedData(data: Array, currentMaxValue: number SpSegmentationChart.schedRow!.dataList = []; SpSegmentationChart.schedRow!.dataListCache = []; SpSegmentationChart.schedRow!.isComplete = false; - SpSegmentationChart.schedRow!.supplier = (): Promise> => + // @ts-ignore + SpSegmentationChart.schedRow!.supplier = (): Promise> => new Promise>((resolve) => resolve(chartData)); } function setBinderData(data: Array>, binderList: Array): void { data.map((v: Array) => { + // 统计每一竖列的最大count let listCount = 0; v.map((t: BinderDataStruct) => { listCount += t.count; if (t.name === 'binder transaction') { t.depth = t.count; - } + }; if (t.name === 'binder transaction async') { t.depth = t.count + @@ -479,10 +475,10 @@ function setBinderData(data: Array>, binderList: Array 0 ? v.filter((i: BinderDataStruct) => { - return i.name === 'binder transaction'; - })[0].count + return i.name === 'binder transaction'; + })[0].count : 0); - } + }; if (t.name === 'binder reply') { t.depth = t.count + @@ -490,17 +486,17 @@ function setBinderData(data: Array>, binderList: Array 0 ? v.filter((i: BinderDataStruct) => { - return i.name === 'binder transaction'; - })[0].count + return i.name === 'binder transaction'; + })[0].count : 0) + (v.filter((i: BinderDataStruct) => { return i.name === 'binder transaction async'; }).length > 0 ? v.filter((i: BinderDataStruct) => { - return i.name === 'binder transaction async'; - })[0].count + return i.name === 'binder transaction async'; + })[0].count : 0); - } + }; if (t.name === 'binder async rcv') { t.depth = t.count + @@ -508,28 +504,28 @@ function setBinderData(data: Array>, binderList: Array 0 ? v.filter((i: BinderDataStruct) => { - return i.name === 'binder transaction'; - })[0].count + return i.name === 'binder transaction'; + })[0].count : 0) + (v.filter((i: BinderDataStruct) => { return i.name === 'binder transaction async'; }).length > 0 ? v.filter((i: BinderDataStruct) => { - return i.name === 'binder transaction async'; - })[0].count + return i.name === 'binder transaction async'; + })[0].count : 0) + (v.filter((i: BinderDataStruct) => { return i.name === 'binder reply'; }).length > 0 ? v.filter((i: BinderDataStruct) => { - return i.name === 'binder reply'; - })[0].count + return i.name === 'binder reply'; + })[0].count : 0); - } + }; binderList.push(t); }); BinderStruct.maxHeight = BinderStruct.maxHeight > listCount ? BinderStruct.maxHeight : JSON.parse(JSON.stringify(listCount)); listCount = 0; }); -} +}; diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts index 99d50e57..f996614c 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts @@ -42,18 +42,18 @@ export class FreqExtendRender extends Render { if (row.isHover) { CpuFreqExtendStruct.cycle = -1; CpuFreqExtendStruct.isTabHover = false; - } + }; freqReq.context.beginPath(); for (let re of freqFilter) { if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) { CpuFreqExtendStruct.hoverCpuFreqStruct = re; - } + }; if (!row.isHover && !CpuFreqExtendStruct.isTabHover) CpuFreqExtendStruct.hoverCpuFreqStruct = undefined; CpuFreqExtendStruct.draw(freqReq.context, re); - } + }; freqReq.context.closePath(); - } -} + }; +}; export class CpuFreqExtendStruct extends BaseStruct { static maxValue: number = 0; @@ -75,7 +75,7 @@ export class CpuFreqExtendStruct extends BaseStruct { let width = data.frame.width || 0; let index = data.cpu || 0; index += 2; - let color = ColorUtils.colorForTid(index) + let color = ColorUtils.colorForTid(index); freqContext.fillStyle = color; freqContext.strokeStyle = color; if (data === CpuFreqExtendStruct.hoverCpuFreqStruct @@ -91,13 +91,13 @@ export class CpuFreqExtendStruct extends BaseStruct { freqContext.globalAlpha = 1; freqContext.fillStyle = color; freqContext.strokeStyle = color; - } + }; let drawHeight: number = Math.floor( ((data.value || 0) * (data.frame.height || 0) * 1.0) / CpuFreqExtendStruct.maxValue ); if (drawHeight < 1) { drawHeight = 1; - } + }; freqContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight); freqContext.globalAlpha = 0.8; freqContext.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight); @@ -107,11 +107,11 @@ export class CpuFreqExtendStruct extends BaseStruct { let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / CpuFreqExtendStruct.maxValue); if (drawHeight < 1) { drawHeight = 1; - } + }; freqContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight); - } - } + }; + }; freqContext.globalAlpha = 1.0; freqContext.lineWidth = 1; - } -} \ No newline at end of file + }; +}; \ No newline at end of file diff --git a/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts b/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts index 8996d8ea..4cc37b56 100644 --- a/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts +++ b/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts @@ -43,15 +43,16 @@ export class BinderRender extends Render { for (let re of freqFilter) { if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) { BinderStruct.hoverCpuFreqStruct = re; - } + }; if (!row.isHover) { BinderStruct.hoverCpuFreqStruct = undefined; - } + }; BinderStruct.draw(freqReq.context, re); - } + }; freqReq.context.closePath(); - } -} + }; +}; + export class BinderStruct extends BaseStruct { static hoverCpuFreqStruct: BinderStruct | undefined; static selectCpuFreqStruct: BinderStruct | undefined; @@ -66,20 +67,19 @@ export class BinderStruct extends BaseStruct { depth: number = 0; static draw(freqContext: CanvasRenderingContext2D, data: BinderStruct) { if (data.frame) { - let index = data.cpu || 0; let color = ''; if (data.name === 'binder transaction') { color = '#e86b6a'; - } + }; if (data.name === 'binder transaction async') { color = '#36baa4'; - } + }; if (data.name === 'binder reply') { color = '#8770d3'; - } + }; if (data.name === 'binder async rcv') { color = '#0cbdd4'; - } + }; freqContext.fillStyle = color; if (data === BinderStruct.hoverCpuFreqStruct || data === BinderStruct.selectCpuFreqStruct || data.cycle === BinderStruct.hoverCycle) { freqContext.globalAlpha = 1; @@ -89,7 +89,7 @@ export class BinderStruct extends BaseStruct { freqContext.globalAlpha = 0.6; freqContext.lineWidth = 1; freqContext.fillRect(data.frame.x, BinderStruct.maxHeight * 20 - data.depth * 20 + 20, data.frame.width, data.value * 20); - } + }; if (data.frame.width > 8) { freqContext.lineWidth = 1; freqContext.fillStyle = ColorUtils.funcTextColor( @@ -97,9 +97,9 @@ export class BinderStruct extends BaseStruct { ); freqContext.textBaseline = 'middle'; drawString(freqContext, `${data.name || ''}`, 6, new Rect(data.frame.x, BinderStruct.maxHeight * 20 - data.depth * 20 + 20, data.frame.width, data.value * 20), data); - } + }; freqContext.globalAlpha = 1.0; freqContext.lineWidth = 1; - } - } -} \ No newline at end of file + }; + }; +}; \ No newline at end of file -- Gitee