diff --git a/ide/src/trace/component/chart/SpSegmentationChart.ts b/ide/src/trace/component/chart/SpSegmentationChart.ts index 443ef90ac5a0d8a3f6a12363cc4be91ad06d74ab..2729ad8c1fdaeb6248c7ecdf12601335b4046f9d 100644 --- a/ide/src/trace/component/chart/SpSegmentationChart.ts +++ b/ide/src/trace/component/chart/SpSegmentationChart.ts @@ -31,7 +31,7 @@ export class SegMenTaTion { static schedRow: TraceRow | undefined; static freqInfoMapData: any = new Map(); private rowFolder!: TraceRow; - static chartData: any; + static chartData: Array = [];; // 数据切割联动 static setChartData(type: string, data: any) { this.tabHover(type, false) @@ -167,9 +167,7 @@ export class SegMenTaTion { SegMenTaTion.binderRow!.isComplete = false; SegMenTaTion.binderRow!.style.height = `${binderStruct.maxHeight > 2 ? binderStruct.maxHeight * 20 + 20 : 40}px`; SegMenTaTion.binderRow!.supplier = (): Promise> => - new Promise>((resolve) => resolve(chartData)); - } else { - return + new Promise>((resolve) => resolve([])); } SegMenTaTion.trace.refreshCanvas(true) } @@ -209,8 +207,6 @@ export class SegMenTaTion { await this.initFolder(); await this.initCpuFreq(); await this.initGpuTrace(); - await this.initSchedTrace(); - await this.initBinderTrace(); } } @@ -255,7 +251,8 @@ export class SegMenTaTion { SegMenTaTion.jsonRow.style.height = '40px'; SegMenTaTion.jsonRow.name = `Cpu Computility`; SegMenTaTion.jsonRow.favoriteChangeHandler = SegMenTaTion.trace.favoriteChangeHandler; - SegMenTaTion.jsonRow.checkFile = 'json'; + SegMenTaTion.jsonRow.addRowCheckFilePop(); + SegMenTaTion.jsonRow.rowSetting = 'checkFile'; // 拿到了用户传递的数据 SegMenTaTion.jsonRow.onRowCheckFileChangeHandler = (e: any) => { let chartData = JSON.parse(e); @@ -339,105 +336,7 @@ export class SegMenTaTion { ); SegMenTaTion.GpuRow!.canvasRestore(context); }; - SegMenTaTion.trace.rowsEL!.appendChild(SegMenTaTion.GpuRow); + SegMenTaTion.trace.rowsEL.appendChild(SegMenTaTion.GpuRow); this.rowFolder!.addChildTraceRow(SegMenTaTion.GpuRow); } - - async initSchedTrace() { - SegMenTaTion.schedRow = TraceRow.skeleton(); - SegMenTaTion.schedRow.rowId = `sched_switch Count`; - SegMenTaTion.schedRow.rowType = TraceRow.ROW_TYPE_SCHED_SWITCH; - SegMenTaTion.schedRow.rowParentId = ''; - SegMenTaTion.schedRow.style.height = '40px'; - SegMenTaTion.schedRow.name = `Sched_switch Count`; - SegMenTaTion.schedRow.favoriteChangeHandler = SegMenTaTion.trace.favoriteChangeHandler; - SegMenTaTion.schedRow.selectChangeHandler = SegMenTaTion.trace.selectChangeHandler; - SegMenTaTion.schedRow.focusHandler = (ev) => { - SegMenTaTion.trace!.displayTip( - SegMenTaTion.schedRow!, - CpuFreqExtendStruct.hoverCpuFreqStruct, - `${ColorUtils.formatNumberComma(CpuFreqExtendStruct.hoverCpuFreqStruct!.value!)} Hz·ms` - ); - }; - SegMenTaTion.schedRow.findHoverStruct = () => { - CpuFreqExtendStruct.hoverCpuFreqStruct = SegMenTaTion.schedRow!.getHoverStruct(); - }; - SegMenTaTion.schedRow.supplier = (): Promise> => - new Promise>((resolve) => resolve([])); - SegMenTaTion.schedRow.onThreadHandler = (useCache) => { - let context: CanvasRenderingContext2D; - if (SegMenTaTion.schedRow!.currentContext) { - context = SegMenTaTion.schedRow!.currentContext; - } else { - context = SegMenTaTion.schedRow!.collect ? SegMenTaTion.trace.canvasFavoritePanelCtx! : SegMenTaTion.trace.canvasPanelCtx!; - } - SegMenTaTion.schedRow!.canvasSave(context); - (renders['freq-extend'] as FreqExtendRender).renderMainThread( - { - context: context, - useCache: useCache, - type: `json0`, - }, - SegMenTaTion.schedRow! - ); - SegMenTaTion.schedRow!.canvasRestore(context); - }; - SegMenTaTion.trace.rowsEL!.appendChild(SegMenTaTion.schedRow); - this.rowFolder!.addChildTraceRow(SegMenTaTion.schedRow); - } - - async initBinderTrace() { - SegMenTaTion.binderRow = TraceRow.skeleton(); - SegMenTaTion.binderRow.rowId = `binderrow`; - SegMenTaTion.binderRow.rowType = TraceRow.ROW_TYPE_BINDER_COUNT; - SegMenTaTion.binderRow.rowParentId = ''; - SegMenTaTion.binderRow.name = `Binder Count`; - SegMenTaTion.binderRow.style.height = '40px'; - SegMenTaTion.binderRow.favoriteChangeHandler = SegMenTaTion.trace.favoriteChangeHandler; - SegMenTaTion.binderRow.selectChangeHandler = SegMenTaTion.trace.selectChangeHandler; - SegMenTaTion.binderRow.focusHandler = (ev) => { - SegMenTaTion.trace!.displayTip( - SegMenTaTion.binderRow!, - binderStruct.hoverCpuFreqStruct, - `Cycle: ${binderStruct.hoverCpuFreqStruct!.cycle}
- Name: ${binderStruct.hoverCpuFreqStruct!.name || ''}
- Count: ${binderStruct.hoverCpuFreqStruct!.value || ''}` - ); - }; - SegMenTaTion.binderRow.findHoverStruct = () => { - binderStruct.hoverCpuFreqStruct = SegMenTaTion.binderRow!.dataListCache.find((v: any) => { - if (SegMenTaTion.binderRow!.isHover) { - if (v.frame.x < SegMenTaTion.binderRow.hoverX - && v.frame.x + v.frame.width > SegMenTaTion.binderRow.hoverX - && (binderStruct.maxHeight * 20 - v.depth * 20 + 20) < SegMenTaTion.binderRow!.hoverY - && binderStruct.maxHeight * 20 - v.depth * 20 + v.value * 20 + 20 > SegMenTaTion.binderRow!.hoverY) { - console - return v - } - } - }) - }; - SegMenTaTion.binderRow.supplier = (): Promise> => - new Promise>((resolve) => resolve([])); - SegMenTaTion.binderRow.onThreadHandler = (useCache) => { - let context: CanvasRenderingContext2D; - if (SegMenTaTion.binderRow!.currentContext) { - context = SegMenTaTion.binderRow!.currentContext; - } else { - context = SegMenTaTion.binderRow!.collect ? SegMenTaTion.trace.canvasFavoritePanelCtx! : SegMenTaTion.trace.canvasPanelCtx!; - } - SegMenTaTion.binderRow!.canvasSave(context); - (renders['binder'] as BinderRender).renderMainThread( - { - context: context, - useCache: useCache, - type: `binder`, - }, - SegMenTaTion.binderRow! - ); - SegMenTaTion.binderRow!.canvasRestore(context); - }; - SegMenTaTion.trace.rowsEL!.appendChild(SegMenTaTion.binderRow); - this.rowFolder!.addChildTraceRow(SegMenTaTion.binderRow); - } } diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 07de4e950a873d62204fc3aaf123561a225930a6..02a03392009273e1bf406e28301d5f06884c8b74 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -179,9 +179,9 @@ export class TraceRow extends HTMLElement { parentRowEl: TraceRow | undefined; _rowSettingList: Array | null | undefined; _docompositionList: Array | undefined; - public rowCheckFileEL: LitIcon | null | undefined; - public inputEL: any; public onRowCheckFileChangeHandler: ((file: any) => void) | undefined | null; + private rowCheckFilePop: LitPopover | null | undefined; + public fileEL: any; focusHandler?: (ev: MouseEvent) => void | undefined; findHoverStruct?: () => void | undefined; @@ -244,14 +244,6 @@ export class TraceRow extends HTMLElement { ]; } - get checkFile(): string { - return this.getAttribute('row-file') || 'disable' - } - - set checkFile(value: string) { - this.setAttribute('row-file', value) - } - get docompositionList(): Array | undefined { return this._docompositionList; } @@ -674,8 +666,6 @@ export class TraceRow extends HTMLElement { this.canvasVessel = this.shadowRoot?.querySelector('.panel-vessel'); this.tipEL = this.shadowRoot?.querySelector('.tip'); let canvasNumber = this.args['canvasNumber']; - this.rowCheckFileEL = this.shadowRoot?.querySelector('.checkfile'); - this.inputEL = this.shadowRoot?.querySelector('#fileinput'); if (!this.args['skeleton']) { for (let i = 0; i < canvasNumber; i++) { let canvas = document.createElement('canvas'); @@ -687,23 +677,6 @@ export class TraceRow extends HTMLElement { } } - this.rowCheckFileEL!.onclick = () => { - this.inputEL.click(); - this.inputEL.addEventListener('change', (e: any) => { - let file = e.target.files[0]; - if (file.type === 'application/json') { - let file_reader = new FileReader(); - file_reader.readAsText(file, 'UTF-8'); - file_reader.onload = () => { - let fc = file_reader.result; - this.onRowCheckFileChangeHandler?.(fc) - }; - } else { - return - } - }, false) - } - this.checkBoxEL!.onchange = (ev: any) => { info('checkBoxEL onchange '); if (!ev.target.checked) { @@ -759,6 +732,38 @@ export class TraceRow extends HTMLElement { this.describeEl?.appendChild(this.rowSettingPop); } + addRowCheckFilePop(): void { + this.rowCheckFilePop = document.createElement('litpopover') as LitPopover; + this.rowCheckFilePop.innerHTML = `
+
+ + `; + this.rowCheckFilePop.id = 'rowCheckFile'; + this.rowCheckFilePop.className = 'popover checkFile'; + this.rowCheckFilePop.setAttribute('trigger', 'click'); + this.rowCheckFilePop?.addEventListener('mouseenter', (e) => { + window.publish(window.SmartEvent.UI.HoverNull, undefined); + }); + this.fileEL = this.rowCheckFilePop.querySelector('#jsoninput'); + this.rowCheckFilePop.onclick = (): void => { + this.fileEL.click(); + this.fileEL.addEventListener('change', (e: any) => { + let file = e.target.files[0]; + if (file.type === 'application/json') { + let file_reader = new FileReader(); + file_reader.readAsText(file, 'UTF-8'); + file_reader.onload = () => { + let fc = file_reader.result; + this.onRowCheckFileChangeHandler?.(fc) + }; + } else { + return + } + }, false) + } + this.describeEl?.appendChild(this.rowCheckFilePop); + } + getRowSettingKeys(): Array { if (this.rowSetting === 'enable') { return this.rowSettingTree!.getCheckdKeys(); @@ -1458,23 +1463,11 @@ export class TraceRow extends HTMLElement { :host([row-setting='enable']:not([check-type='-1'])) .collect{ margin-right: 5px; } - :host(:not([row-file='json'])) .checkfile{ - display:none; - } - :host(:not([row-file='json'])) input{ - display:none; - } - :host([row-file='json']) .checkfile{ + :host([row-setting='checkFile']) #rowCheckFile{ display:flex; } - :host([row-file='json']) input{ - display:flex; - } - :host([row-file='json']) .folder{ - display:none; - } - :host([row-file="json"]) .describe:hover .checkfile{ - color:#000; + :host([row-setting='checkFile']) #myfolder{ + color:#4b5766; }
@@ -1482,10 +1475,8 @@ export class TraceRow extends HTMLElement { -
- `; } diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts index 3faaf8575dae08be735b5a07dc6f5fd7df149980..bbf0a5fa5af1cf678a1495a07915ae1188be85ea 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts @@ -1,4 +1,4 @@ -/* + /* * 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. @@ -67,14 +67,17 @@ export class CpuFreqExtendStruct extends BaseStruct { startNS: number | undefined; dur: number | undefined; //自补充,数据库没有返回 cycle: number | undefined; + type: string | undefined; + frame:any; static draw(freqContext: CanvasRenderingContext2D, data: CpuFreqExtendStruct) { if (data.frame) { let width = data.frame.width || 0; let index = data.cpu || 0; index += 2; - freqContext.fillStyle = ColorUtils.colorForTid(index); - freqContext.strokeStyle = ColorUtils.colorForTid(index); + let color = ColorUtils.colorForTid(index) + freqContext.fillStyle = color; + freqContext.strokeStyle = color; if (data === CpuFreqExtendStruct.hoverCpuFreqStruct || data === CpuFreqExtendStruct.selectCpuFreqStruct || data === CpuFreqExtendStruct.selectCpuFreqStruct @@ -84,6 +87,11 @@ export class CpuFreqExtendStruct extends BaseStruct { freqContext.strokeStyle = '#ff0000'; freqContext.lineWidth = 3; freqContext.globalAlpha = 0.6; + if (data.type === 'SCHED-SWITCH' || data.type === 'GPU-FREQ') { + 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 );