From 83844b1cb9c60d2cc73e35be49ea3a005f9eeada Mon Sep 17 00:00:00 2001 From: wangziyi Date: Tue, 17 Oct 2023 11:37:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E9=94=AE=E4=BC=B8=E7=BC=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: wangziyi --- ide/src/trace/component/chart/SpFreqChart.ts | 267 +++++++++++------- .../trace/component/trace/base/TraceRow.ts | 12 + 2 files changed, 180 insertions(+), 99 deletions(-) diff --git a/ide/src/trace/component/chart/SpFreqChart.ts b/ide/src/trace/component/chart/SpFreqChart.ts index 7836fb63..74012a82 100644 --- a/ide/src/trace/component/chart/SpFreqChart.ts +++ b/ide/src/trace/component/chart/SpFreqChart.ts @@ -18,11 +18,13 @@ import { getCpuLimitFreq, getCpuLimitFreqId, getCpuLimitFreqMax, + queryCpuCount, queryCpuFreq, queryCpuFreqData, queryCpuMaxFreq, queryCpuState, queryCpuStateFilter, + queryJsMemoryData, } from '../../database/SqlLite.js'; import { info } from '../../../log/Log.js'; import { TraceRow } from '../trace/base/TraceRow.js'; @@ -31,16 +33,26 @@ import { CpuFreqLimitRender, CpuFreqLimitsStruct } from '../../database/ui-worke import { renders } from '../../database/ui-worker/ProcedureWorker.js'; import { CpuFreqStruct, FreqRender } from '../../database/ui-worker/ProcedureWorkerFreq.js'; import { CpuStateRender, CpuStateStruct } from '../../database/ui-worker/ProcedureWorkerCpuState.js'; +import { FolderSupplier, FolderThreadHandler } from './SpChartManager.js'; import { Utils } from '../trace/base/Utils.js'; +const TYPE_SNAPSHOT = 0; +const TYPE_TIMELINE = 1; export class SpFreqChart { private trace: SpSystemTrace; + private folderRow: TraceRow | undefined; + private folderRowState: TraceRow | undefined; + private folderRowLimit: TraceRow | undefined; constructor(trace: SpSystemTrace) { this.trace = trace; } async init() { + let CpuCount = await queryCpuCount(); + let CpuState = await queryCpuState(CpuCount.length); + let freCpu = await queryCpuFreqData(CpuCount.length); + let cpuFreqStartTime = new Date().getTime(); let freqList = await queryCpuFreq(); let cpuStateFilterIds = await queryCpuStateFilter(); @@ -52,59 +64,97 @@ export class SpFreqChart { }) .join(',') ); - info('Cpu Freq data size is: ', freqList!.length); - let freqMaxList = await queryCpuMaxFreq(); - CpuFreqStruct.maxFreq = freqMaxList[0].maxFreq; - let maxFreqObj = Utils.getFrequencyWithUnit(freqMaxList[0].maxFreq); - CpuFreqStruct.maxFreq = maxFreqObj.maxFreq; - CpuFreqStruct.maxFreqName = maxFreqObj.maxFreqName; - for (let i = 0; i < freqList.length; i++) { - const it = freqList[i]; - let traceRow = TraceRow.skeleton(); - traceRow.rowId = `${it.filterId}`; - traceRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ; - traceRow.rowParentId = ''; - traceRow.style.height = '40px'; - traceRow.name = `Cpu ${it.cpu} Frequency`; - traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; - traceRow.selectChangeHandler = this.trace.selectChangeHandler; - traceRow.supplier = () => queryCpuFreqData(it.cpu); - traceRow.focusHandler = (ev) => { - this.trace?.displayTip( - traceRow, - CpuFreqStruct.hoverCpuFreqStruct, - `${ColorUtils.formatNumberComma(CpuFreqStruct.hoverCpuFreqStruct?.value!)} kHz` - ); - }; - traceRow.findHoverStruct = () => { - CpuFreqStruct.hoverCpuFreqStruct = traceRow.getHoverStruct(); - }; - traceRow.onThreadHandler = (useCache) => { - let context: CanvasRenderingContext2D; - if (traceRow.currentContext) { - context = traceRow.currentContext; - } else { - context = traceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; - } - traceRow.canvasSave(context); - (renders['freq'] as FreqRender).renderMainThread( - { - context: context, - useCache: useCache, - type: `freq${it.cpu}`, - }, - traceRow - ); - traceRow.canvasRestore(context); - }; - this.trace.rowsEL?.appendChild(traceRow); + let jsMemory = await queryJsMemoryData(); + if (freCpu.length > 0) { + this.folderRow = TraceRow.skeleton(); + this.folderRow.rowId = 'Cpu Frequency'; + this.folderRow.rowParentId = ''; + this.folderRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ_ALL; + this.folderRow.style.height = '40px'; + this.folderRow.style.width = '100%'; + this.folderRow.name = 'Cpu Frequency'; + this.folderRow.folder = true; + this.folderRow.rowHidden = this.folderRow!.expansion; + this.folderRow.setAttribute('children', ''); + + this.folderRow.supplier = FolderSupplier(); + this.folderRow.onThreadHandler = FolderThreadHandler(this.folderRow, this.trace); + + this.trace.rowsEL?.appendChild(this.folderRow); + info('Cpu Freq data size is: ', freqList!.length); + let freqMaxList = await queryCpuMaxFreq(); + CpuFreqStruct.maxFreq = freqMaxList[0].maxFreq; + let maxFreqObj = Utils.getFrequencyWithUnit(freqMaxList[0].maxFreq); + CpuFreqStruct.maxFreq = maxFreqObj.maxFreq; + CpuFreqStruct.maxFreqName = maxFreqObj.maxFreqName; + for (let i = 0; i < freqList.length; i++) { + const it = freqList[i]; + let traceRow = TraceRow.skeleton(); + traceRow.rowId = `${it.filterId}`; + traceRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ; + traceRow.rowParentId = 'Cpu Frequency'; + + traceRow.style.height = '40px'; + traceRow.name = `Cpu ${it.cpu} Frequency`; + traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; + traceRow.selectChangeHandler = this.trace.selectChangeHandler; + traceRow.supplier = () => queryCpuFreqData(it.cpu); + traceRow.focusHandler = (ev) => { + this.trace?.displayTip( + traceRow, + CpuFreqStruct.hoverCpuFreqStruct, + `${ColorUtils.formatNumberComma(CpuFreqStruct.hoverCpuFreqStruct?.value!)} kHz` + ); + }; + traceRow.findHoverStruct = () => { + CpuFreqStruct.hoverCpuFreqStruct = traceRow.getHoverStruct(); + }; + traceRow.onThreadHandler = (useCache) => { + let context: CanvasRenderingContext2D; + if (traceRow.currentContext) { + context = traceRow.currentContext; + } else { + context = traceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; + } + traceRow.canvasSave(context); + (renders['freq'] as FreqRender).renderMainThread( + { + context: context, + useCache: useCache, + type: `freq${it.cpu}`, + }, + traceRow + ); + traceRow.canvasRestore(context); + }; + this.folderRow!.addChildTraceRow(traceRow); + } + } + if (CpuState.length > 0) { + this.folderRowState = TraceRow.skeleton(); + + this.folderRowState.rowId = 'Cpu State'; + this.folderRowState.rowType = TraceRow.ROW_TYPE_CPU_STATE_ALL; + this.folderRowState.style.height = '40px'; + this.folderRowState.folder = true; + this.folderRowState.style.width = '100%'; + this.folderRowState.rowParentId = ''; + this.folderRowState.name = 'Cpu State'; + this.folderRowState.rowHidden = this.folderRowState!.expansion; + this.folderRowState.setAttribute('children', ''); + + this.folderRowState.supplier = FolderSupplier(); + this.folderRowState.onThreadHandler = FolderThreadHandler(this.folderRowState, this.trace); + + this.trace.rowsEL?.appendChild(this.folderRowState); + } let heights = [4, 12, 21, 30]; for (let it of cpuStateFilterIds) { let cpuStateRow = TraceRow.skeleton(); cpuStateRow.rowId = `${it.filterId}`; cpuStateRow.rowType = TraceRow.ROW_TYPE_CPU_STATE; - cpuStateRow.rowParentId = ''; + cpuStateRow.rowParentId = 'Cpu State'; cpuStateRow.style.height = '40px'; cpuStateRow.name = `Cpu ${it.cpu} State`; cpuStateRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; @@ -147,62 +197,81 @@ export class SpFreqChart { ); cpuStateRow.canvasRestore(context); }; - this.trace.rowsEL?.appendChild(cpuStateRow); + this.folderRowState!.addChildTraceRow(cpuStateRow); } let durTime = new Date().getTime() - cpuFreqStartTime; info('The time to load the CpuFreq data is: ', durTime); - for (let limit of cpuFreqLimits) { - let findMax = Utils.getFrequencyWithUnit( - cpuFreqLimitsMax.find((maxLimit) => { - return maxLimit.filterId == limit.maxFilterId; - })?.maxValue || 0 - ); - let cpuFreqLimitRow = TraceRow.skeleton(); - cpuFreqLimitRow.rowId = `${limit.cpu}`; - cpuFreqLimitRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ_LIMIT; - cpuFreqLimitRow.rowParentId = ''; - cpuFreqLimitRow.style.height = '40px'; - cpuFreqLimitRow.name = `Cpu ${limit.cpu} Freq Limit`; - cpuFreqLimitRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; - cpuFreqLimitRow.selectChangeHandler = this.trace.selectChangeHandler; - cpuFreqLimitRow.isHover = true; - cpuFreqLimitRow.supplier = () => getCpuLimitFreq(limit.maxFilterId, limit.minFilterId, limit.cpu); - cpuFreqLimitRow.focusHandler = (ev) => { - this.trace.displayTip( - cpuFreqLimitRow, - CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct, - `Max Freq: ${ColorUtils.formatNumberComma( - CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct?.max || 0 - )} kHzMin Freq: ${ColorUtils.formatNumberComma( - CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct?.min || 0 - )} kHz` - ); - }; - cpuFreqLimitRow.findHoverStruct = () => { - CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct = cpuFreqLimitRow.getHoverStruct(); - }; - cpuFreqLimitRow.onThreadHandler = (useCache: boolean) => { - let context: CanvasRenderingContext2D; - if (cpuFreqLimitRow.currentContext) { - context = cpuFreqLimitRow.currentContext; - } else { - context = cpuFreqLimitRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; - } - cpuFreqLimitRow.canvasSave(context); - (renders['cpu-limit-freq'] as CpuFreqLimitRender).renderMainThread( - { - context: context, - useCache: useCache, - type: `cpu-limit-freq-${limit.cpu}`, - cpu: limit.cpu, - maxFreq: findMax?.maxFreq || 0, - maxFreqName: findMax?.maxFreqName || '', - }, - cpuFreqLimitRow + if (cpuFreqLimits.length > 0) { + + this.folderRowLimit = TraceRow.skeleton(); + this.folderRowLimit.rowId = 'Cpu Freq Limit'; + this.folderRowLimit.rowType = TraceRow.ROW_TYPE_CPU_FREQ_LIMITALL; + this.folderRowLimit.style.height = '40px'; + this.folderRowLimit.rowParentId = 'Cpu Freq Limit'; + + this.folderRowLimit.folder = true; + this.folderRowLimit.name = 'Cpu Freq Limit'; + this.folderRowLimit.rowHidden = this.folderRowLimit!.expansion; + this.folderRowLimit.setAttribute('children', ''); + + this.folderRowLimit.supplier = FolderSupplier(); + this.folderRowLimit.onThreadHandler = FolderThreadHandler(this.folderRowLimit, this.trace); + + this.trace.rowsEL?.appendChild(this.folderRowLimit); + + for (let limit of cpuFreqLimits) { + let findMax = Utils.getFrequencyWithUnit( + cpuFreqLimitsMax.find((maxLimit) => { + return maxLimit.filterId == limit.maxFilterId; + })?.maxValue || 0 ); - cpuFreqLimitRow.canvasRestore(context); - }; - this.trace.rowsEL?.appendChild(cpuFreqLimitRow); + let cpuFreqLimitRow = TraceRow.skeleton(); + cpuFreqLimitRow.rowId = `${limit.cpu}`; + cpuFreqLimitRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ_LIMIT; + cpuFreqLimitRow.rowParentId = ''; + cpuFreqLimitRow.style.height = '40px'; + cpuFreqLimitRow.name = `Cpu ${limit.cpu} Freq Limit`; + cpuFreqLimitRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; + cpuFreqLimitRow.selectChangeHandler = this.trace.selectChangeHandler; + cpuFreqLimitRow.isHover = true; + cpuFreqLimitRow.supplier = () => getCpuLimitFreq(limit.maxFilterId, limit.minFilterId, limit.cpu); + cpuFreqLimitRow.focusHandler = (ev) => { + this.trace.displayTip( + cpuFreqLimitRow, + CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct, + `Max Freq: ${ColorUtils.formatNumberComma( + CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct?.max || 0 + )} kHzMin Freq: ${ColorUtils.formatNumberComma( + CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct?.min || 0 + )} kHz` + ); + }; + cpuFreqLimitRow.findHoverStruct = () => { + CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct = cpuFreqLimitRow.getHoverStruct(); + }; + cpuFreqLimitRow.onThreadHandler = (useCache: boolean) => { + let context: CanvasRenderingContext2D; + if (cpuFreqLimitRow.currentContext) { + context = cpuFreqLimitRow.currentContext; + } else { + context = cpuFreqLimitRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; + } + cpuFreqLimitRow.canvasSave(context); + (renders['cpu-limit-freq'] as CpuFreqLimitRender).renderMainThread( + { + context: context, + useCache: useCache, + type: `cpu-limit-freq-${limit.cpu}`, + cpu: limit.cpu, + maxFreq: findMax?.maxFreq || 0, + maxFreqName: findMax?.maxFreqName || '', + }, + cpuFreqLimitRow + ); + cpuFreqLimitRow.canvasRestore(context); + }; + this.folderRowLimit!.addChildTraceRow(cpuFreqLimitRow); + } } } } diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 35d2e697..d0e283ff 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -48,6 +48,10 @@ export class TraceRow extends HTMLElement { static ROW_TYPE_CPU_STATE = 'cpu-state'; static ROW_TYPE_CPU_FREQ = 'cpu-freq'; static ROW_TYPE_CPU_FREQ_LIMIT = 'cpu-limit-freq'; + static ROW_TYPE_CPU_FREQ_ALL='cpu-frequency'; + static ROW_TYPE_CPU_STATE_ALL = 'cpu-State'; + static ROW_TYPE_CPU_FREQ_LIMITALL = 'cpu-frequency-limit'; + static ROW_TYPE_FPS = 'fps'; static ROW_TYPE_NATIVE_MEMORY = 'native-memory'; static ROW_TYPE_HIPERF = 'hiperf'; @@ -667,6 +671,14 @@ export class TraceRow extends HTMLElement { this.checkBoxEL!.onclick = (ev: any) => { ev.stopPropagation(); }; + + setTimeout(()=>{ + let cpuFnanme=this.shadowRoot?.querySelector('.name')?.textContent; + if(this.folder && (cpuFnanme=='Cpu Frequency' || cpuFnanme=='Cpu State' || cpuFnanme=='Cpu Freq Limit')){ + this.expansion=!this.expansion + } + },1400) + this.describeEl?.addEventListener('click', () => { if (this.folder) { this.expansion = !this.expansion; -- Gitee