1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { ColorUtils } from "../../component/trace/base/ColorUtils.js"; 17import { 18 BaseStruct, 19 drawFlagLine, 20 drawLines, 21 drawLoading, 22 drawSelection, PerfRender, 23 RequestMessage 24} from "./ProcedureWorkerCommon.js"; 25import {HiPerfEvent} from "./ProcedureWorkerHiPerfEvent.js"; 26 27export class HiperfReportRender extends PerfRender { 28 render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) { 29 let groupBy10MS = req.scale > 100_000_000; 30 if (req.lazyRefresh) { 31 HiPerfEvent(list, dataList2, req.type!, filter, req.startNS, req.endNS, req.totalNS, req.frame, groupBy10MS, req.intervalPerf, req.useCache || !req.range.refresh); 32 } else { 33 if (!req.useCache) { 34 HiPerfEvent(list, dataList2, req.type!, filter, req.startNS, req.endNS, req.totalNS, req.frame, groupBy10MS, req.intervalPerf, false); 35 } 36 } 37 if (req.canvas) { 38 req.context.clearRect(0, 0, req.frame.width, req.frame.height); 39 let arr = filter; 40 if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) { 41 drawLoading(req.context, req.startNS, req.endNS, req.totalNS, req.frame, arr[0].startNS, arr[arr.length - 1].startNS + arr[arr.length - 1].dur) 42 } 43 drawLines(req.context, req.xs, req.frame.height, req.lineColor) 44 req.context.stroke(); 45 req.context.beginPath(); 46 HiPerfReportStruct.hoverStruct = undefined; 47 req.context.fillStyle = ColorUtils.FUNC_COLOR[0]; 48 req.context.strokeStyle = ColorUtils.FUNC_COLOR[0]; 49 if (req.isHover) { 50 let offset = groupBy10MS ? 0 : 3; 51 for (let re of filter) { 52 if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {//&& req.hoverY >= re.frame.y && req.hoverY <= re.frame.y + re.frame.height 53 HiPerfReportStruct.hoverStruct = re; 54 break; 55 } 56 } 57 } else { 58 HiPerfReportStruct.hoverStruct = req.params.hoverStruct; 59 } 60 HiPerfReportStruct.selectStruct = req.params.selectStruct; 61 let path = new Path2D(); 62 for (let re of filter) { 63 HiPerfReportStruct.draw(req.context, path, re, groupBy10MS); 64 } 65 groupBy10MS ? req.context.fill(path) : req.context.stroke(path); 66 req.context.closePath(); 67 drawSelection(req.context, req.params); 68 drawFlagLine(req.context, req.flagMoveInfo, req.flagSelectedInfo, req.startNS, req.endNS, req.totalNS, req.frame, req.slicesTime); 69 } 70 // @ts-ignore 71 self.postMessage({ 72 id: req.id, 73 type: req.type, 74 results: req.canvas ? undefined : filter, 75 hover: HiPerfReportStruct.hoverStruct 76 }); 77 } 78} 79 80export function HiPerfReport(arr: Array<any>, arr2: any, type: string, res: Array<any>, startNS: number, endNS: number, totalNS: number, frame: any, groupBy10MS: boolean, intervalPerf: number, use: boolean) { 81 if (use && res.length > 0) { 82 let pns = (endNS - startNS) / frame.width; 83 let y = frame.y; 84 for (let i = 0; i < res.length; i++) { 85 let it = res[i]; 86 if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) { 87 if (!it.frame) { 88 it.frame = {}; 89 it.frame.y = y; 90 } 91 it.frame.height = it.height; 92 HiPerfReportStruct.setFrame(it, pns, startNS, endNS, frame); 93 } else { 94 it.frame = null; 95 } 96 } 97 return; 98 } 99 res.length = 0; 100 if (arr) { 101 let list: Array<any>; 102 if (groupBy10MS) { 103 if (arr2[type] && arr2[type].length > 0) { 104 list = arr2[type]; 105 } else { 106 list = HiPerfReportStruct.groupBy10MS(arr, intervalPerf); 107 arr2[type] = list; 108 } 109 } else { 110 list = arr; 111 } 112 let pns = (endNS - startNS) / frame.width; 113 let y = frame.y; 114 115 let groups = list.filter(it => (it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS).map(it => { 116 if (!it.frame) { 117 it.frame = {}; 118 it.frame.y = y; 119 } 120 it.frame.height = it.height; 121 HiPerfReportStruct.setFrame(it, pns, startNS, endNS, frame); 122 return it; 123 }).reduce((pre, current, index, arr) => { 124 if (!pre[`${current.frame.x}`]) { 125 pre[`${current.frame.x}`] = []; 126 pre[`${current.frame.x}`].push(current); 127 if (groupBy10MS) { 128 res.push(current); 129 } else { 130 if (res.length == 0) { 131 res.push(current); 132 } 133 if (res[res.length - 1] && Math.abs(current.frame.x - res[res.length - 1].frame.x) > 4) { 134 res.push(current); 135 } 136 } 137 } 138 return pre; 139 }, {}); 140 } 141} 142 143export class HiPerfReportStruct extends BaseStruct { 144 static hoverStruct: HiPerfReportStruct | undefined; 145 static selectStruct: HiPerfReportStruct | undefined; 146 static path = new Path2D('M 100,100 h 50 v 50 h 50'); 147 id: number | undefined; 148 callchain_id: number | undefined; 149 timestamp: number | undefined; 150 thread_id: number | undefined; 151 event_count: number | undefined; 152 event_type_id: number | undefined; 153 cpu_id: number | undefined; 154 thread_state: string | undefined; 155 startNS: number | undefined; 156 endNS: number | undefined; 157 dur: number | undefined; 158 height: number | undefined; 159 cpu: number | undefined; 160 161 static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: HiPerfReportStruct, groupBy10MS: boolean) { 162 if (data.frame) { 163 if (groupBy10MS) { 164 let width = data.frame.width; 165 path.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0) 166 } else { 167 path.moveTo(data.frame.x + 7, 20); 168 HiPerfReportStruct.drawRoundRectPath(path, data.frame.x - 7, 20 - 7, 14, 14, 3) 169 path.moveTo(data.frame.x, 27); 170 path.lineTo(data.frame.x, 33); 171 } 172 } 173 } 174 175 static drawRoundRectPath(cxt: Path2D, x: number, y: number, width: number, height: number, radius: number) { 176 cxt.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2); 177 cxt.lineTo(x + radius, y + height); 178 cxt.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI); 179 cxt.lineTo(x + 0, y + radius); 180 cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); 181 cxt.lineTo(x + width - radius, y + 0); 182 cxt.arc(x + width - radius, y + radius, radius, Math.PI * 3 / 2, Math.PI * 2); 183 cxt.lineTo(x + width, y + height - radius); 184 cxt.moveTo(x + width / 3, y + height / 5); 185 cxt.lineTo(x + width / 3, y + height / 5 * 4); 186 cxt.moveTo(x + width / 3, y + height / 5); 187 cxt.bezierCurveTo(x + width / 3 + 7, y + height / 5 - 2, x + width / 3 + 7, y + height / 5 + 6, x + width / 3, y + height / 5 + 4); 188 } 189 190 static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) { 191 if ((node.startNS || 0) < startNS) { 192 node.frame.x = 0; 193 } else { 194 node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns); 195 } 196 if ((node.startNS || 0) + (node.dur || 0) > endNS) { 197 node.frame.width = frame.width - node.frame.x; 198 } else { 199 node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x); 200 } 201 if (node.frame.width < 1) { 202 node.frame.width = 1; 203 } 204 } 205 206 static groupBy10MS(array: Array<any>, intervalPerf: number): Array<any> { 207 let obj = array.map(it => { 208 it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0; 209 return it; 210 }).reduce((pre, current) => { 211 (pre[current["timestamp_group"]] = pre[current["timestamp_group"]] || []).push(current); 212 return pre; 213 }, {}); 214 let arr: any[] = []; 215 let max = 0; 216 for (let aKey in obj) { 217 let sum = obj[aKey].reduce((pre: any, cur: any) => { 218 return pre + cur.event_count 219 }, 0) 220 if (sum > max) max = sum; 221 let ns = parseInt(aKey); 222 arr.push({ 223 startNS: ns, 224 dur: 1_000_000_0, 225 height: 0, 226 sum: sum, 227 }) 228 } 229 arr.map(it => { 230 it.height = Math.floor(40 * it.sum / max); 231 return it; 232 }) 233 return arr; 234 } 235} 236