diff --git a/ide/src/trace/component/chart/SpFreqChart.ts b/ide/src/trace/component/chart/SpFreqChart.ts index 7836fb63bbbd07d174051848c963768afc89c95e..c317f266adf01b8d6771c6a547106fb470337333 100644 --- a/ide/src/trace/component/chart/SpFreqChart.ts +++ b/ide/src/trace/component/chart/SpFreqChart.ts @@ -18,33 +18,62 @@ 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'; +import { procedurePool } from '../../database/Procedure.js'; import { ColorUtils } from '../trace/base/ColorUtils.js'; import { CpuFreqLimitRender, CpuFreqLimitsStruct } from '../../database/ui-worker/ProcedureWorkerCpuFreqLimits.js'; 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 { Utils } from '../trace/base/Utils.js'; +import { FolderSupplier, FolderThreadHandler } from './SpChartManager.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() { + async init():Promise { + let CpuCount=await queryCpuCount(); + let freCpu=await queryCpuFreqData(CpuCount.length); + let CpuState=await queryCpuState(CpuCount.length); + let cpuFreqLimits = await getCpuLimitFreqId(); + let jsMemory = await queryJsMemoryData(); + if(jsMemory.length > 0 || 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); + } + let cpuFreqStartTime = new Date().getTime(); let freqList = await queryCpuFreq(); + let freqMaxList = await queryCpuMaxFreq(); let cpuStateFilterIds = await queryCpuStateFilter(); - let cpuFreqLimits = await getCpuLimitFreqId(); let cpuFreqLimitsMax = await getCpuLimitFreqMax( cpuFreqLimits .map((limit) => { @@ -53,7 +82,6 @@ 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; @@ -63,7 +91,7 @@ export class SpFreqChart { let traceRow = TraceRow.skeleton(); traceRow.rowId = `${it.filterId}`; traceRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ; - traceRow.rowParentId = ''; + traceRow.rowParentId = this.folderRow?.rowId; traceRow.style.height = '40px'; traceRow.name = `Cpu ${it.cpu} Frequency`; traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; @@ -76,16 +104,8 @@ export class SpFreqChart { `${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!; - } + let context = traceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; traceRow.canvasSave(context); (renders['freq'] as FreqRender).renderMainThread( { @@ -97,14 +117,29 @@ export class SpFreqChart { ); traceRow.canvasRestore(context); }; - this.trace.rowsEL?.appendChild(traceRow); + this.folderRow!.addChildTraceRow(traceRow); + } + if(jsMemory.length > 0 || 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.folderRow!.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 = this.folderRowState?.rowId; cpuStateRow.style.height = '40px'; cpuStateRow.name = `Cpu ${it.cpu} State`; cpuStateRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; @@ -125,16 +160,8 @@ export class SpFreqChart { `State: ${CpuStateStruct.hoverStateStruct?.value}` ); }; - cpuStateRow.findHoverStruct = () => { - CpuStateStruct.hoverStateStruct = cpuStateRow.getHoverStruct(); - }; cpuStateRow.onThreadHandler = (useCache: boolean) => { - let context: CanvasRenderingContext2D; - if (cpuStateRow.currentContext) { - context = cpuStateRow.currentContext; - } else { - context = cpuStateRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; - } + let context = cpuStateRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; cpuStateRow.canvasSave(context); (renders['cpu-state'] as CpuStateRender).renderMainThread( { @@ -147,10 +174,24 @@ 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); + if(jsMemory.length > 0 || 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 = ''; + this.folderRowLimit.folder = true; + this.folderRowLimit.name = 'Cpu Freq Limit'; + this.folderRowLimit.rowHidden=this.folderRow!.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) => { @@ -160,7 +201,7 @@ export class SpFreqChart { let cpuFreqLimitRow = TraceRow.skeleton(); cpuFreqLimitRow.rowId = `${limit.cpu}`; cpuFreqLimitRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ_LIMIT; - cpuFreqLimitRow.rowParentId = ''; + cpuFreqLimitRow.rowParentId = this.folderRowLimit?.rowId; cpuFreqLimitRow.style.height = '40px'; cpuFreqLimitRow.name = `Cpu ${limit.cpu} Freq Limit`; cpuFreqLimitRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; @@ -178,16 +219,8 @@ export class SpFreqChart { )} 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!; - } + let context = cpuFreqLimitRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; cpuFreqLimitRow.canvasSave(context); (renders['cpu-limit-freq'] as CpuFreqLimitRender).renderMainThread( { @@ -202,7 +235,7 @@ export class SpFreqChart { ); cpuFreqLimitRow.canvasRestore(context); }; - this.trace.rowsEL?.appendChild(cpuFreqLimitRow); + 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 35d2e6977745cd9ed863594ac6c45baa418811a7..69e982629fdb602da42487b267297ec624353d9e 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -48,6 +48,9 @@ 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 +670,12 @@ 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 + } + },500) this.describeEl?.addEventListener('click', () => { if (this.folder) { this.expansion = !this.expansion;